refactor(styles): change font to Inter + Add storybook Badges + Updat…

…e Storybook sidebar hierarchy
chanzuckerberg · Feb 13, 2024 · d668f61 · d668f61
1 parent 47f940f
commit d668f61
Show file tree

Hide file tree

Showing 60 changed files with 409 additions and 197 deletions.
diff --git a/.storybook/main.js b/.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"),

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -67,6 +67,10 @@
     padding: 5px 3px 5px 2px;
   }
 
+  #storybook-explorer-menu button.sidebar-item.css-1ot7nkv {
+    padding: 5px 3px 5px 18px;
+  }
+
   #storybook-explorer-menu a.sidebar-item {
     font-size: 14px;
     padding: 5px 3px 5px 34px;
@@ -94,6 +98,10 @@
     margin-top: 7px;
   }
 
+  #storybook-explorer-menu .sidebar-item > div > span {
+    margin-top: 3px;
+  }
+
   #storybook-explorer-menu .sidebar-item[aria-expanded="true"] > span,
   #storybook-explorer-menu
     .sidebar-subheading[aria-expanded="true"]

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <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:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
   rel="stylesheet"
   crossorigin="anonymous"
 />
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -18,5 +18,13 @@ const preview = {
   globalTypes: {
     pseudo: {},
   },
+  parameters: {
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: ["Foundations", "Components", "Data Viz", "Deprecated"],
+      },
+    },
+  },
 };
 export default preview;
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -152,5 +152,7 @@
     "packages/*"
   ],
   "main": "index.js",
-  "dependencies": {}
+  "dependencies": {
+    "@geometricpanda/storybook-addon-badges": "^2.0.2"
+  }
 }
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -2,33 +2,33 @@
   --sds-font-letter-spacing-default: 0.3px;
   --sds-font-letter-spacing-caps: 1px;
   --sds-font-color: black;
-  --sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxs-600-text-transform:  uppercase;
-  --sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
+  --sds-font-font-family: "Inter", "Inter-Regular";
+  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", "Inter-Regular";
+  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
+  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", "Inter-Regular";
+  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
+  --sds-font-body-xs-400-font: 400 13px/20px "Inter", "Inter-Regular";
+  --sds-font-body-xs-600-font: 600 13px/20px "Inter", "Inter-SemiBold";
+  --sds-font-body-s-400-font: 400 14px/24px "Inter", "Inter-Regular";
+  --sds-font-body-s-600-font: 600 14px/24px "Inter", "Inter-SemiBold";
+  --sds-font-body-m-400-font: 400 16px/26px "Inter", "Inter-Regular";
+  --sds-font-body-m-600-font: 600 16px/26px "Inter", "Inter-SemiBold";
+  --sds-font-body-l-400-font: 400 18px/28px "Inter", "Inter-Regular";
+  --sds-font-body-l-600-font: 600 18px/28px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
+  --sds-font-caps-xxs-600-text-transform: uppercase;
+  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", "Inter-SemiBold";
+  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", "Inter-SemiBold";
+  --sds-font-header-xs-600-font: 600 13px/18px "Inter", "Inter-SemiBold";
+  --sds-font-header-s-600-font: 600 14px/20px "Inter", "Inter-SemiBold";
+  --sds-font-header-m-600-font: 600 16px/22px "Inter", "Inter-SemiBold";
+  --sds-font-header-l-600-font: 600 18px/24px "Inter", "Inter-SemiBold";
+  --sds-font-header-xl-600-font: 600 22px/30px "Inter", "Inter-SemiBold";
+  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", "Inter-SemiBold";
   --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
   --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
   --sds-color-beta-100: #f4f0f9;
@@ -66,9 +66,10 @@
   --sds-color-warning-200: #fff3e1;
   --sds-color-warning-400: #f5a623;
   --sds-color-warning-600: #946314;
-  --sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-  --sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-  --sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+  --sds-drop-shadows-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+  --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+  --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
   --sds-borders-error-400: 1px solid #dc132c;
   --sds-borders-gray-100: 1px solid #f8f8f8;
   --sds-borders-gray-200: 1px solid #eaeaea;

diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -1,12 +1,12 @@
 {
   "fontFamily": {
     "sds-regular": [
-      "Open Sans",
-      "OpenSans-Regular"
+      "Inter",
+      "Inter-Regular"
     ],
     "sds-semibold": [
-      "Open Sans",
-      "OpenSans-SemiBold"
+      "Inter",
+      "Inter-SemiBold"
     ]
   },
   "fontSize": {

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -1,33 +1,33 @@
 $sds-font-letter-spacing-default: 0.3px;
 $sds-font-letter-spacing-caps: 1px;
 $sds-font-color: black;
-$sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-$sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-font-family: 'Inter', 'Inter-Regular';
+$sds-font-body-xxxs-400-font: 400 11px/16px 'Inter', 'Inter-Regular';
+$sds-font-body-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
+$sds-font-body-xxs-400-font: 400 12px/18px 'Inter', 'Inter-Regular';
+$sds-font-body-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
+$sds-font-body-xs-400-font: 400 13px/20px 'Inter', 'Inter-Regular';
+$sds-font-body-xs-600-font: 600 13px/20px 'Inter', 'Inter-SemiBold';
+$sds-font-body-s-400-font: 400 14px/24px 'Inter', 'Inter-Regular';
+$sds-font-body-s-600-font: 600 14px/24px 'Inter', 'Inter-SemiBold';
+$sds-font-body-m-400-font: 400 16px/26px 'Inter', 'Inter-Regular';
+$sds-font-body-m-600-font: 600 16px/26px 'Inter', 'Inter-SemiBold';
+$sds-font-body-l-400-font: 400 18px/28px 'Inter', 'Inter-Regular';
+$sds-font-body-l-600-font: 600 18px/28px 'Inter', 'Inter-SemiBold';
+$sds-font-caps-xxxxs-600-font: 600 10px/14px 'Inter', 'Inter-SemiBold';
 $sds-font-caps-xxxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-caps-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
 $sds-font-caps-xxxs-600-text-transform:  uppercase;
-$sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-caps-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
 $sds-font-caps-xxs-600-text-transform:  uppercase;
-$sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-$sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
+$sds-font-header-xxxs-600-font: 600 11px/16px 'Inter', 'Inter-SemiBold';
+$sds-font-header-xxs-600-font: 600 12px/18px 'Inter', 'Inter-SemiBold';
+$sds-font-header-xs-600-font: 600 13px/18px 'Inter', 'Inter-SemiBold';
+$sds-font-header-s-600-font: 600 14px/20px 'Inter', 'Inter-SemiBold';
+$sds-font-header-m-600-font: 600 16px/22px 'Inter', 'Inter-SemiBold';
+$sds-font-header-l-600-font: 600 18px/24px 'Inter', 'Inter-SemiBold';
+$sds-font-header-xl-600-font: 600 22px/30px 'Inter', 'Inter-SemiBold';
+$sds-font-header-xxl-600-font: 600 26px/34px 'Inter', 'Inter-SemiBold';
 $sds-color-overlay-100: rgba(0, 0, 0, 0.08);
 $sds-color-overlay-200: rgba(0, 0, 0, 0.03);
 $sds-color-beta-100: #f4f0f9;

diff --git a/packages/components/src/common/styles-dictionary/style-dictionary.json b/packages/components/src/common/styles-dictionary/style-dictionary.json
@@ -8,7 +8,7 @@
       "color": {
         "value": "black"
       },
-      "font-family": { "value": "'Open Sans', 'OpenSans-Regular'" },
+      "font-family": { "value": "'Inter', 'Inter-Regular'" },
       "body": {
         "xxxs": {
           "400": {
@@ -18,7 +18,7 @@
           },
           "600": {
             "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
@@ -30,7 +30,7 @@
           },
           "600": {
             "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
@@ -42,7 +42,7 @@
           },
           "600": {
             "font": {
-              "value": "600 13px/20px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 13px/20px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
@@ -54,7 +54,7 @@
           },
           "600": {
             "font": {
-              "value": "600 14px/24px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 14px/24px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
@@ -66,7 +66,7 @@
           },
           "600": {
             "font": {
-              "value": "600 16px/26px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 16px/26px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
@@ -78,7 +78,7 @@
           },
           "600": {
             "font": {
-              "value": "600 18px/28px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 18px/28px 'Inter', 'Inter-SemiBold'"
             }
           }
         }
@@ -87,23 +87,23 @@
         "xxxxs": {
           "600": {
             "font": {
-              "value": "600 10px/14px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 10px/14px 'Inter', 'Inter-SemiBold'"
             },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
             },
             "text-transform": { "value": " uppercase" }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
             },
             "text-transform": { "value": " uppercase" }
           }
@@ -113,57 +113,57 @@
         "xxxs": {
           "600": {
             "font": {
-              "value": "600 11px/16px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 11px/16px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
         "xxs": {
           "600": {
             "font": {
-              "value": "600 12px/18px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 12px/18px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
         "xs": {
           "600": {
             "font": {
-              "value": "600 13px/18px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 13px/18px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
         "s": {
           "600": {
             "font": {
-              "value": "600 14px/20px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 14px/20px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
         "m": {
           "600": {
             "font": {
-              "value": "600 16px/22px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 16px/22px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
         "l": {
           "600": {
             "font": {
-              "value": "600 18px/24px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 18px/24px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
 
         "xl": {
           "600": {
             "font": {
-              "value": "600 22px/30px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 22px/30px 'Inter', 'Inter-SemiBold'"
             }
           }
         },
         "xxl": {
           "600": {
             "font": {
-              "value": "600 26px/34px 'Open Sans', 'OpenSans-SemiBold'"
+              "value": "600 26px/34px 'Inter', 'Inter-SemiBold'"
             }
           }
         }

diff --git a/packages/components/src/core/Accordion/index.stories.tsx b/packages/components/src/core/Accordion/index.stories.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import AccordionDetails from "./components/AccordionDetails";
 import AccordionHeader from "./components/AccordionHeader";
 import RawAccordion from "./index";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
 
 const Accordion = (props: Args): JSX.Element => {
   const { id, subtitle, useDivider, togglePosition } = props;
@@ -42,7 +43,10 @@ export default {
     },
   },
   component: Accordion,
-  title: "Accordion",
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
+  title: "Components/Accordion",
 } as Meta;
 
 // Default