Merge branch 'update-figma-tokens' into w3c-dtcg-conversion

.storybook/main.js

@@ -1,18 +1,26 @@
 const path = require('path');
 
-const config = {
+export default {
   staticDirs: ['../stories/assets'],
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'],
-
-  addons: ['@storybook/addon-links', {
-    name: '@storybook/addon-essentials',
-    options: {
-      actions: false, // 👈 disable the actions addon
+  addons: [
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false, // 👈 disable the actions addon
+      },
     },
-  }, // 'storybook-addon-rtl',
-  '@storybook/blocks', '@storybook/addon-a11y', '@storybook/react-webpack5', // '@chromatic-com/storybook',
-  '@storybook/addon-webpack5-compiler-babel', '@whitespace/storybook-addon-html'],
-
+    // 'storybook-addon-rtl',
+    '@storybook/blocks',
+    '@storybook/addon-a11y',
+    '@storybook/react-webpack5',
+    // '@chromatic-com/storybook',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@whitespace/storybook-addon-html',
+    '@storybook/addon-designs',
+    'storybook-addon-sass-postcss',
+  ],
   webpackFinal: async config => {
     config.resolve.alias = {
       ...config.resolve.alias,
@@ -21,7 +29,7 @@ const config = {
 
     config.module.rules.push({
       test: /\.scss$/,
-      use: ['style-loader', 'css-loader', { loader: 'sass-loader', options: { implementation: 'sass-embedded', sourceMap: false, sassOptions: { quietDeps: true, silenceDeprecations: ['import', 'global-builtin'] } } }],
+      use: ['style-loader', 'css-loader', 'sass-loader'],
       include: path.resolve(__dirname, '../')
     });
 
@@ -37,16 +45,13 @@ const config = {
 
     return config;
   },
-
   framework: {
-    name: '@storybook/react-webpack5'
+    name: '@storybook/react-webpack5',
+    options: {}
   },
-
+  // env: config => ({
+  //   ...config,
+  //   CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920]
+  // }),
   docs: {},
-
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
 };
-
-export default config;

.storybook/preview-head.html

@@ -1,5 +1,5 @@
-<link rel="stylesheet" href="https://use.typekit.net/ukl2sym.css" />
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:[email protected]&family=Noto+Sans+JP:[email protected]&family=Noto+Sans+Myanmar:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
+<link href="https://use.typekit.net/icr3zpi.css" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:[email protected]&family=Noto+Sans+JP:[email protected]&family=Noto+Sans+Myanmar:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 <!-- CSS to override doc page -->
 <style type="text/css">
   .sbdocs .sbdocs-a, .sbdocs a[aria-hidden="true"] {

.storybook/preview.js

@@ -19,7 +19,7 @@ import '!style-loader!css-loader!sass-loader!../stories/assets/scss/base-minimal
 // }
 
 // Configure Storybook
-const parameters = {
+export const parameters = {
   // actions: { disable: true },
   controls: {
     matchers: {
@@ -53,8 +53,8 @@ const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Getting started', ['Intro', 'How to use our design system?', 'Browser support', 'Internationalization'], 'Foundation', 'Components', 'Patterns', 'Utilities', 'Templates'],
-      includeNames: true
+      order: ['Getting started', ['Intro', 'How to use our design system?', 'Browser support'], 'Foundation', 'Components', 'Patterns', 'Utilities', 'Templates'],
+      includeName: true
     },
   },
   chromatic: {
@@ -71,7 +71,7 @@ const parameters = {
 }
 
 /* Implementing locale for language switcher */
-const globalTypes = {
+export const globalTypes = {
   locale: {
     title: 'Locale',
     description: 'locale',
@@ -202,12 +202,5 @@ const setAccentClass = (Story, context) => {
   )
 }
 
-// export const decorators = [getLangCode, sbFrameReset, setDirection, setAccentClass];
-// export const tags = ['autodocs'];
-
-export default {
-  parameters: parameters,
-  globalTypes: globalTypes,
-  decorators: [getLangCode, sbFrameReset, setDirection, setAccentClass],
-  tags: ['autodocs', 'autodocs'],
-}
+export const decorators = [getLangCode, sbFrameReset, setDirection, setAccentClass];
+export const tags = ['autodocs', 'autodocs'];