fix(refactor): fix code review bugs

.storybook/components/SidebarItem/SidebarItem.tsx

@@ -9,11 +9,11 @@ interface SidebarItemProps {
   status: StatusType;
 }
 
-const SidebarItem = (props: SidebarItemProps) => {
+const SidebarItem = ({ children, status }: SidebarItemProps) => {
   return (
     <StyledSidebarItem>
-      <div>{props.children}</div>
-      <StatusTag type={props.status}>{props.status}</StatusTag>
+      <div>{children}</div>
+      <StatusTag type={status}>{status}</StatusTag>
     </StyledSidebarItem>
   );
 };

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { defaultTheme } from "../packages/components/src/core/styles";
 import { ThemeProvider } from "@mui/material/styles";
-import { BADGE } from "../packages/components/src/common/SDSBadges";
+import { BADGE } from "../packages/components/src/common/storybookBadges";
 
 export const decorators = [
   (Story) => (

packages/components/src/core/Accordion/components/AccordionHeader/style.ts

@@ -30,9 +30,11 @@ export const StyledAccordionHeader = styled(AccordionSummary)`
         }
       }
 
-      .${accordionSummaryClasses.expandIconWrapper} {
+      & .${accordionSummaryClasses.expandIconWrapper} {
         margin-left: ${spaces?.m}px;
+        margin-top: ${spaces?.xxs}px !important;
         align-self: center;
+
         svg {
           color: ${semanticComponentColors?.base?.icon};
         }

packages/components/src/core/Accordion/style.ts

@@ -9,6 +9,7 @@ import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   getBorders,
+  getIconSizes,
   getShadows,
   getSpaces,
   getTypography,
@@ -78,6 +79,7 @@ export const StyledAccordion = styled(Accordion, {
 
 const leftPosition = (props: AccordionExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
+  const iconSizes = getIconSizes(props);
 
   return css`
     &.${accordionClasses.root} {
@@ -100,8 +102,16 @@ const leftPosition = (props: AccordionExtraProps): SerializedStyles => {
         }
       }
 
+      /** This is to adjust the padding of the AccordionDetails when the togglePosition is left
+        * The padding-left is the sum of the
+        * left padding of the AccordionButton = spaces?.m
+        * the width of the expandIcon = iconSizes?.xs.width
+        * and the left padding of the AccordionSummary = spaces?.s 
+        */
       & .${accordionDetailsClasses.root} {
-        padding-left: 36px;
+        padding-left: ${(spaces?.m ?? 12) +
+        (iconSizes?.xs.width ?? 12) +
+        (spaces?.s ?? 8)}px;
       }
     }
   `;

packages/components/src/core/Alert/index.stories.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import Button from "../Button";
 import { defaultTheme } from "../styles/common/defaultTheme";
 import Alert from "./index";
-import { BADGE } from "../../common/SDSBadges";
+import { BADGE } from "../../common/storybookBadges";
 
 const DismissButton = styled(Button)`
   margin-left: -${defaultTheme.spacing(3)}px;

packages/components/src/core/Alert/style.ts

@@ -11,12 +11,12 @@ export const StyledAlert = styled(Alert)`
     const { severity = "success" } = props;
 
     const borderColor =
-      (colors && SeverityToColor(severity, colors)[400]) || "black";
+      (colors && severityToColor(severity, colors)[400]) || "black";
     const alertColor =
-      (colors && SeverityToColor(severity, colors)[100]) || "white";
+      (colors && severityToColor(severity, colors)[100]) || "white";
     const iconColor =
-      (colors && SeverityToColor(severity, colors)[400]) || "black";
-    const backgroundColor = colors && SeverityToColor(severity, colors)[100];
+      (colors && severityToColor(severity, colors)[400]) || "black";
+    const backgroundColor = colors && severityToColor(severity, colors)[100];
 
     return `
       background-color: ${backgroundColor};
@@ -39,7 +39,7 @@ export const StyledAlert = styled(Alert)`
   }}
 `;
 
-function SeverityToColor(
+function severityToColor(
   alertSeverity: AlertProps["severity"],
   colors: Colors
 ) {

packages/components/src/core/Bases/Borders/index.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta } from "@storybook/react";
-import { BADGE } from "../../../common/SDSBadges";
+import { BADGE } from "../../../common/storybookBadges";
 import { useTheme } from "@mui/material";
 import { getBorders } from "../../styles";
-import { StyledBorderBox, StyledBordersWrapper } from "./style";
+import { StyledBorderBox, StyledBordersWrapper } from "./storybook/style";
 import Table from "src/core/Table";
 import TableHeader from "src/core/TableHeader";
 import CellHeader from "src/core/CellHeader";

packages/components/src/core/Bases/Borders/style.ts → packages/components/src/core/Bases/Borders/storybook/style.ts

@@ -1,6 +1,9 @@
 import { styled } from "@mui/material";
 import { CommonThemeProps, getCorners } from "src/core/styles";
 
+const BORDER_BOX_BORDER_WIDTH_PX = 1,
+  BORDER_BOX_BOX_SIZE_PX = 60;
+
 export const StyledBordersWrapper = styled("div")`
   max-width: 100%;
 `;
@@ -15,16 +18,13 @@ export const StyledBorderBox = styled("div")`
 
     const corners = getCorners(props);
 
-    const BorderWidth = 1;
-    const BoxSize = 60;
-
     return `
       position: relative;
       margin-left: 10px;
-      width: ${BoxSize}px;
-      height: ${BoxSize}px;
+      width: ${BORDER_BOX_BOX_SIZE_PX}px;
+      height: ${BORDER_BOX_BOX_SIZE_PX}px;
       background-color: transparent;
-      border-radius: ${BorderWidth}px;
+      border-radius: ${BORDER_BOX_BORDER_WIDTH_PX}px;
       border: ${border};
       border-radius: ${corners?.l}px;
 

packages/components/src/core/Bases/Colors/index.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
-import { BADGE } from "../../../common/SDSBadges";
-import Colors from "./components/Colors";
+import { BADGE } from "../../../common/storybookBadges";
+import Colors from "./storybook/components/Color";
 import { useTheme } from "@mui/material";
 import {
   getColors,

packages/components/src/core/Bases/Colors/components/Colors/style.ts → packages/components/src/core/Bases/Colors/storybook/components/Color/style.ts

@@ -4,9 +4,11 @@ import {
   fontBodyXs,
   fontCodeXs,
   fontHeaderL,
+  getBorders,
   getCorners,
+  getFontWeights,
   getSpaces,
-} from "../../../../styles";
+} from "../../../../../styles";
 
 interface IStyledDivProps extends CommonThemeProps {
   backgroundColor: string;
@@ -21,6 +23,8 @@ export const StyledColorWrapper = styled("div")`
 
     const spaces = getSpaces(props);
     const corners = getCorners(props);
+    const borders = getBorders(props);
+    const fontWeights = getFontWeights(props);
 
     return `
       background-color: ${backgroundColor};
@@ -37,11 +41,11 @@ export const StyledColorWrapper = styled("div")`
       }
 
       &:hover {
-        border: solid 1px black;
+        border: ${borders?.base.black};
         z-index: 10;
 
         .color-title {
-          font-weight: bold;
+          font-weight: ${fontWeights?.semibold};
         }
       }
     `;
@@ -62,12 +66,18 @@ export const StyledColorGroupTitle = styled("h3")`
 export const StyledColorCode = styled("span")`
   ${fontCodeXs}
 
-  cursor: pointer;
-  font-size: 12px;
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      cursor: pointer;
+      font-size: 12px;
 
-  &:active {
-    font-weight: bold;
-  }
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
 `;
 
 export const StyledColorTitle = styled("span")`
@@ -77,12 +87,18 @@ export const StyledColorTitle = styled("span")`
 export const StyledColorVariable = styled("span")`
   ${fontCodeXs}
 
-  cursor: pointer;
-  font-size: 10px;
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      cursor: pointer;
+      font-size: 10px;
 
-  &:active {
-    font-weight: bold;
-  }
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
 `;
 
 interface IStyledColorsWrapperProps extends CommonThemeProps {

packages/components/src/core/Bases/Corners/index.stories.tsx

@@ -1,12 +1,12 @@
 import { Meta } from "@storybook/react";
-import { BADGE } from "../../../common/SDSBadges";
+import { BADGE } from "../../../common/storybookBadges";
 import { useTheme } from "@mui/material";
 import { Corners, getCorners } from "../../styles";
 import {
   StyledCornerBox,
   StyledCornerVariable,
   StyledCornersWrapper,
-} from "./style";
+} from "./storybook/style";
 import Table from "src/core/Table";
 import TableHeader from "src/core/TableHeader";
 import CellHeader from "src/core/CellHeader";

packages/components/src/core/Bases/Corners/style.ts → packages/components/src/core/Bases/Corners/storybook/style.ts

@@ -1,5 +1,10 @@
 import { styled } from "@mui/material";
-import { getColors, CommonThemeProps, fontCodeXs } from "src/core/styles";
+import {
+  getColors,
+  CommonThemeProps,
+  fontCodeXs,
+  getFontWeights,
+} from "src/core/styles";
 
 export const StyledCornersWrapper = styled("div")`
   max-width: 100%;
@@ -130,10 +135,17 @@ export const StyledCornerBox = styled("div")`
 
 export const StyledCornerVariable = styled("p")`
   ${fontCodeXs}
-  margin: 0;
-  cursor: pointer;
 
-  &:active {
-    font-weight: bold;
-  }
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      margin: 0;
+      cursor: pointer;
+
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
 `;

packages/components/src/core/Bases/DropShadows/index.stories.tsx

@@ -1,12 +1,12 @@
 import { Meta } from "@storybook/react";
-import { BADGE } from "../../../common/SDSBadges";
+import { BADGE } from "../../../common/storybookBadges";
 import { useTheme } from "@mui/material";
 import { getShadows } from "../../styles";
 import {
   StyledShadowBox,
   StyledShadowVariable,
   StyledShadowsWrapper,
-} from "./style";
+} from "./storybook/style";
 import Table from "src/core/Table";
 import TableHeader from "src/core/TableHeader";
 import CellHeader from "src/core/CellHeader";

packages/components/src/core/Bases/DropShadows/style.ts → packages/components/src/core/Bases/DropShadows/storybook/style.ts

@@ -1,5 +1,12 @@
 import { styled } from "@mui/material";
-import { getColors, CommonThemeProps, fontCodeXs } from "src/core/styles";
+import {
+  getColors,
+  CommonThemeProps,
+  fontCodeXs,
+  getFontWeights,
+} from "src/core/styles";
+
+const SHADOW_BOX_BOX_SIZE_PX = 60;
 
 export const StyledShadowsWrapper = styled("div")`
   max-width: 100%;
@@ -14,13 +21,12 @@ export const StyledShadowBox = styled("div")`
     const { shadow } = props;
 
     const colors = getColors(props);
-    const BoxSize = 60;
 
     return `
       position: relative;
       margin-left: 10px;
-      width: ${BoxSize}px;
-      height: ${BoxSize}px;
+      width: ${SHADOW_BOX_BOX_SIZE_PX}px;
+      height: ${SHADOW_BOX_BOX_SIZE_PX}px;
       background-color: ${colors?.gray[100]};
       border-radius: 6px;
       box-shadow: ${shadow};
@@ -40,10 +46,17 @@ export const StyledShadowBox = styled("div")`
 
 export const StyledShadowVariable = styled("p")`
   ${fontCodeXs}
-  margin: 0;
-  cursor: pointer;
 
-  &:active {
-    font-weight: bold;
-  }
+  ${(props) => {
+    const fontWeights = getFontWeights(props);
+
+    return `
+      margin: 0;
+      cursor: pointer;
+    
+      &:active {
+        font-weight: ${fontWeights?.semibold};
+      }
+    `;
+  }}
 `;

packages/components/src/core/Bases/Spaces/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import { BADGE } from "../../../common/SDSBadges";
+import { BADGE } from "../../../common/storybookBadges";
 import { useTheme } from "@mui/material";
 import { getSpaces } from "../../styles";
 import {
@@ -8,7 +8,7 @@ import {
   StyledSpacingVariable,
   StyledSpacingWrapper,
   StyledStackedSpacingBox,
-} from "./style";
+} from "./storybook/style";
 import Table from "src/core/Table";
 import TableHeader from "src/core/TableHeader";
 import CellHeader from "src/core/CellHeader";