Merge pull request #1451 from undp/1446-proximanova-is-not-displaying…

…-certain-glyphs-correctly

1446 proximanova is not displaying certain glyphs correctly

.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-export default {
+const config = {
   staticDirs: ['../stories/assets'],
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'],
   addons: [
@@ -44,12 +44,8 @@ export default {
     return config;
   },
   framework: {
-    name: '@storybook/react-webpack5',
-    options: {}
+    name: '@storybook/react-webpack5'
   },
-  // env: config => ({
-  //   ...config,
-  //   CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920]
-  // }),
-  docs: {},
 };
+
+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 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" />
 <!-- 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
-export const parameters = {
+const parameters = {
   // actions: { disable: true },
   controls: {
     matchers: {
@@ -53,8 +53,8 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Getting started', ['Intro', 'How to use our design system?', 'Browser support'], 'Foundation', 'Components', 'Patterns', 'Utilities', 'Templates'],
-      includeName: true
+      order: ['Getting started', ['Intro', 'How to use our design system?', 'Browser support', 'Internationalization'], 'Foundation', 'Components', 'Patterns', 'Utilities', 'Templates'],
+      includeNames: true
     },
   },
   chromatic: {
@@ -71,7 +71,7 @@ export const parameters = {
 }
 
 /* Implementing locale for language switcher */
-export const globalTypes = {
+const globalTypes = {
   locale: {
     title: 'Locale',
     description: 'locale',
@@ -202,5 +202,12 @@ const setAccentClass = (Story, context) => {
   )
 }
 
-export const decorators = [getLangCode, sbFrameReset, setDirection, setAccentClass];
-export const tags = ['autodocs', 'autodocs'];
+// export const decorators = [getLangCode, sbFrameReset, setDirection, setAccentClass];
+// export const tags = ['autodocs'];
+
+export default {
+  parameters: parameters,
+  globalTypes: globalTypes,
+  decorators: [getLangCode, sbFrameReset, setDirection, setAccentClass],
+  tags: ['autodocs'],
+}