feat(theme): Update design tokens and defaultTheme

.prettierrc.js

@@ -5,4 +5,5 @@ module.exports = {
   endOfLine: "lf",
   tabWidth: 2,
   trailingComma: "es5",
+  printWidth: 80,
 };

.storybook/components/SidebarItem/SidebarItem.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyledSidebarItem } from "./style";
+import StatusTag from "../StatusTag/StatusTag";
+
+export type StatusType = "beta" | "deprecated" | "wip";
+
+interface SidebarItemProps {
+  children: React.ReactNode;
+  status: StatusType;
+}
+
+const SidebarItem = ({ children, status }: SidebarItemProps) => {
+  return (
+    <StyledSidebarItem>
+      <div>{children}</div>
+      <StatusTag type={status}>{status}</StatusTag>
+    </StyledSidebarItem>
+  );
+};
+
+export default SidebarItem;

.storybook/components/SidebarItem/style.ts

@@ -0,0 +1,8 @@
+import { styled } from "@mui/material";
+
+export const StyledSidebarItem = styled("div")`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;

.storybook/components/StatusTag/StatusTag.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from "react";
+import { StyledLabel } from "./style";
+import { StatusType } from "../SidebarItem/SidebarItem";
+
+interface StatusTagProps {
+  children: React.ReactNode;
+  type: StatusType;
+}
+
+const TypeToLabel: Record<StatusType, string> = {
+  beta: "Beta",
+  deprecated: "Deprecated",
+  wip: "Work in Progress",
+};
+
+const StatusTag: FC<StatusTagProps> = ({ type }) => {
+  const label = TypeToLabel[type];
+
+  return <StyledLabel type={type}>{label}</StyledLabel>;
+};
+
+export default StatusTag;

.storybook/components/StatusTag/style.ts

@@ -0,0 +1,36 @@
+import { styled } from "@mui/material";
+import { StatusType } from "../SidebarItem/SidebarItem";
+
+interface StyledLabelProps {
+  type: StatusType;
+}
+
+const TypeToColor: Record<StatusType, string> = {
+  beta: "#703CBE",
+  deprecated: "#C61128",
+  wip: "#D8921F",
+};
+
+const TypeToBorderColor: Record<StatusType, string> = {
+  beta: "#7A41CE",
+  deprecated: "#DC132C",
+  wip: "#F5A623",
+};
+
+export const StyledLabel = styled("label")`
+  ${(props: StyledLabelProps) => {
+    const { type } = props;
+    const color = TypeToColor[type];
+    const borderColor = TypeToBorderColor[type];
+
+    return `
+            margin: 0 16px 0 8px;
+            padding: 1px 4px;
+            font-size: 10px;
+            font-weight: 600;
+            color: ${color};
+            border: solid 1px ${borderColor};
+            border-radius: 2px;
+        `;
+  }}
+`;

.storybook/main.js

@@ -35,6 +35,7 @@ module.exports = {
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/react"),
     getAbsolutePath("storybook-addon-pseudo-states"),
+    getAbsolutePath("@geometricpanda/storybook-addon-badges"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-webpack5"),

.storybook/manager-head.html

@@ -1,27 +1,30 @@
-<meta property="og:description" content="SDS design system by CZI" />
-<meta property="og:title" content="Vibe Design System" />
+<meta property="og:description" content="Science Design System by CZI" />
+<meta property="og:title" content="Science Design System" />
 <link
   rel="icon"
   type="image/png"
   href="https://user-images.githubusercontent.com/927990/204130290-897628ee-e89a-4911-89df-0956c9edf940.png"
   sizes="48x48"
 />
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
-  crossorigin="anonymous"
 />
 <title>SDS Design System</title>
 <style>
   body {
-    font-family: "Open Sans", sans-serif !important;
+    font-family: "Inter", sans-serif !important;
     font-size: 14px;
   }
 
   #storybook-explorer-menu svg {
     color: #555;
-    margin-top: 4px;
   }
 
   #storybook-explorer-menu button:focus,
@@ -62,17 +65,14 @@
     background-color: transparent !important;
   }
 
-  #storybook-explorer-menu button.sidebar-item {
-    font-size: 14px;
-    padding: 5px 3px 5px 2px;
-  }
-
+  #storybook-explorer-menu button.sidebar-item,
   #storybook-explorer-menu a.sidebar-item {
     font-size: 14px;
-    padding: 5px 3px 5px 34px;
+    padding-top: 5px;
+    padding-bottom: 5px;
   }
 
-  #storybook-explorer-menu .sidebar-item > span {
+  #storybook-explorer-menu .sidebar-item > div > span {
     display: inline-block;
     position: relative;
     border-style: solid;
@@ -90,11 +90,13 @@
     margin-right: 6px;
   }
 
-  #storybook-explorer-menu .sidebar-item > span {
-    margin-top: 7px;
+  #storybook-explorer-menu .sidebar-item[data-selected="true"] {
+    background-color: #eaeaea;
+    color: black;
+    font-weight: 600;
   }
 
-  #storybook-explorer-menu .sidebar-item[aria-expanded="true"] > span,
+  #storybook-explorer-menu .sidebar-item[aria-expanded="true"] > div > span,
   #storybook-explorer-menu
     .sidebar-subheading[aria-expanded="true"]
     > button
@@ -105,7 +107,7 @@
 <script>
   //workaround to increase the left panel width just enough to show even the longer story names
   //based on https://github.com/storybookjs/storybook/issues/9682#issuecomment-983356523
-  const DEFAULT_MINIMUM_LEFT_PANEL_WIDTH = 260; // original default is 230
+  const DEFAULT_MINIMUM_LEFT_PANEL_WIDTH = 280; // original default is 230
   let storybookConfig = JSON.parse(localStorage.getItem("storybook-layout"));
 
   // we only resize the left panel if it is set to a value lower than DEFAULT_MINIMUM_LEFT_PANEL_WIDTH
@@ -132,7 +134,7 @@
     ).firstChild;
     bookmarkHollowIcon.setAttribute(
       "d",
-      "M 13.762 6.202 C 13.87 6.452 13.927 6.724 13.927 7.001 C 13.927 7.275 13.87 7.548 13.762 7.799 C 13.656 8.049 13.498 8.272 13.303 8.451 L 8.873 12.502 C 8.711 12.65 8.504 12.731 8.29 12.731 L 0.968 12.731 C 0.731 12.731 0.503 12.631 0.336 12.452 C 0.168 12.273 0.073 12.03 0.073 11.775 L 0.073 2.224 C 0.073 1.971 0.168 1.727 0.336 1.548 C 0.503 1.369 0.731 1.269 0.968 1.269 L 8.29 1.269 C 8.504 1.269 8.711 1.35 8.873 1.499 L 13.303 5.55 C 13.498 5.729 13.656 5.952 13.762 6.202 Z M 11.862 7.553 C 11.929 7.492 11.988 7.412 12.029 7.315 C 12.071 7.219 12.093 7.11 12.093 7.001 C 12.093 6.889 12.071 6.782 12.029 6.684 C 11.988 6.589 11.929 6.508 11.862 6.447 L 7.885 2.809 L 1.594 2.809 L 1.594 11.191 L 7.885 11.191 L 11.862 7.553 Z"
+      "M 13.762 6.202 C 13.87 6.452 13.927 6.724 13.927 7.001 C 13.927 7.275 13.87 7.548 13.762 7.799 C 13.656 8.049 13.498 8.272 13.303 8.451 L 8.873 12.502 C 8.711 12.65 8.504 12.731 8.29 12.731 L 0.968 12.731 C 0.731 12.731 0.503 12.631 0.336 12.452 C 0.168 12.273 0.073 12.03 0.073 11.775 L 0.073 2.224 C 0.073 1.971 0.168 1.727 0.336 1.548 C 0.503 1.369 0.731 1.269 0.968 1.269 L 8.29 1.269 C 8.504 1.269 8.711 1.35 8.873 1.499 L 13.303 5.55 C 13.498 5.729 13.656 5.952 13.762 6.202 Z M 12.508 7.538 C 12.575 7.477 12.634 7.397 12.675 7.3 C 12.717 7.204 12.739 7.095 12.739 6.986 C 12.739 6.874 12.717 6.767 12.675 6.669 C 12.634 6.574 12.575 6.493 12.508 6.432 L 8.161 2.346 L 1.085 2.34 L 1.106 11.659 L 8.28 11.628 L 12.508 7.538 Z"
     );
     bookmarkHollowIcon.setAttribute("fill-rule", "evenodd");
   });

.storybook/manager.js

@@ -1,8 +1,25 @@
 // .storybook/manager.js
-
+import React from "react";
 import { addons } from "@storybook/addons";
 import sdsTheme from "./sds-theme";
+import SidebarItem from "./components/SidebarItem/SidebarItem";
 
 addons.setConfig({
   theme: sdsTheme,
+  sidebar: {
+    renderLabel: ({ name }) => {
+      const statusRegex = /\[([^)]+)]/gi;
+      const [statusMatch, statusType] = statusRegex.exec(name) || [];
+
+      if (statusMatch) {
+        return (
+          <SidebarItem status={statusType}>
+            {name.replace(statusMatch, "").trim()}
+          </SidebarItem>
+        );
+      }
+
+      return name;
+    },
+  },
 });

.storybook/preview-head.html

@@ -1,6 +1,10 @@
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
-  crossorigin="anonymous"
 />

.storybook/preview.js

@@ -1,5 +1,6 @@
 import { defaultTheme } from "../packages/components/src/core/styles";
 import { ThemeProvider } from "@mui/material/styles";
+import { BADGE } from "../packages/components/src/common/storybook/storybookBadges";
 
 export const decorators = [
   (Story) => (
@@ -18,5 +19,60 @@ const preview = {
   globalTypes: {
     pseudo: {},
   },
+  parameters: {
+    badgesConfig: {
+      [BADGE.BETA]: {
+        styles: {
+          backgroundColor: "#F4F0F9",
+          borderColor: "#7A41CE",
+          borderRadius: 2,
+          color: "#703CBE",
+        },
+        title: "Beta",
+      },
+      [BADGE.DEPRECATED]: {
+        styles: {
+          backgroundColor: "#FEF2F2",
+          borderColor: "#DC132C",
+          borderRadius: 2,
+          color: "#C61128",
+        },
+        title: "Deprecated",
+      },
+      [BADGE.NEEDS_REVISION]: {
+        styles: {
+          backgroundColor: "#F8F8F8",
+          borderColor: "#999999",
+          borderRadius: 2,
+          color: "#767676",
+        },
+        title: "Needs Revision",
+      },
+      [BADGE.STABLE]: {
+        styles: {
+          backgroundColor: "#ECF5F0",
+          borderColor: "#3CB371",
+          borderRadius: 2,
+          color: "#349A61",
+        },
+        title: "Stable",
+      },
+      [BADGE.WIP]: {
+        styles: {
+          backgroundColor: "#FCF6EC",
+          borderColor: "#F5A623",
+          borderRadius: 2,
+          color: "#D8921F",
+        },
+        title: "Work in progress",
+      },
+    },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: ["Bases", "Components", "Data Viz", "Deprecated"],
+      },
+    },
+  },
 };
 export default preview;

.storybook/sds-theme.js

@@ -15,7 +15,7 @@ export default create({
   appBorderRadius: 0,
 
   // Typography
-  fontBase: '"Open Sans", sans-serif',
+  fontBase: '"Inter", sans-serif',
   fontCode: "monospace",
 
   // Text colors

README.md

@@ -4,7 +4,7 @@ The Science Design System (SDS) brings consistency and universal standards to CZ
 
 ## Design System Documentation
 
-`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spacings`, `typography`, etc., so you can leverage the theme properly in your application.
+`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spaces`, `typography`, etc., so you can leverage the theme properly in your application.
 
 ![Science Design System Zeroheight Homepage Snapshot](https://user-images.githubusercontent.com/6309723/155802483-366008aa-7380-4a01-b356-ae0ab02f4f3b.png)
 
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
 
 ```ts
 import { css, SerializedStyles } from "@emotion/react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
 import { getColors, getCorners } from "@czi-sds/components";
 
 export const Tag = styled("div")`
   // This is a callback function that returns more CSS rules, but the only way
   // to access the custom theme object
-      ${(props) => {
-        // getColors() is a selector that picks out colors from the theme object
-        const colors = getColors(props);
-        // getSpaces() is a selector that picks out spacings from the theme object
-        const spacings = getSpaces(props);
+  ${(props) => {
+    // getColors() is a selector that picks out colors from the theme object
+    const colors = getColors(props);
+    // getSpaces() is a selector that picks out spaces from the theme object
+    const spaces = getSpaces(props);
 
-        return `
+    return `
           background-color: ${colors?.gray[500]};
-          padding-bottom: ${spacings?.m}px;
-          margin-bottom: ${spacings?.xxl}px;
+          padding-bottom: ${spaces?.m}px;
+          margin-bottom: ${spaces?.xxl}px;
         `;
-      }}
+  }}
 `;
 ```
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
 
 ```html
 // installs the sds font from google fonts
-<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
 <link
-  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
   rel="stylesheet"
 />
 ```

jest.common.config.js

@@ -3,6 +3,20 @@ module.exports = {
   preset: "ts-jest",
   setupFilesAfterEnv: ["./jest.setup.ts"],
   testEnvironment: "jsdom",
+  /**
+   * A list of paths to directories that Jest should use to search for files in.
+   * The first two paths are the default paths that Jest uses to search for files.
+   * The third path specifies the namespace-test files that we want to exclude from the test run.
+   * The fourth path specifies the storybook files that we want to exclude from the test run.
+   *
+   * https://jestjs.io/docs/configuration#testmatch-arraystring
+   */
+  testMatch: [
+    "**/__tests__/**/*.[jt]s?(x)",
+    "**/?(*.)+(spec|test).[jt]s?(x)",
+    "!**/__tests__/**/*.namespace-test.[jt]s?(x)",
+    "!**/__storybook__/**/*",
+  ],
   transform: {
     "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "../../fileTransformer.js",