Merge pull request #1398 from undp/develop

Release 1.3.2

Author: Jura

.storybook/main.js

@@ -11,7 +11,7 @@ export default {
         actions: false, // 👈 disable the actions addon
       },
     },
-    'storybook-addon-rtl',
+    // 'storybook-addon-rtl',
     '@storybook/blocks',
     '@storybook/addon-a11y',
     '@storybook/react-webpack5',

.storybook/preview-head.html

@@ -1,4 +1,5 @@
-<link rel="stylesheet" href="https://use.typekit.net/icr3zpi.css">
+<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"] {
@@ -38,11 +39,11 @@
   .sbdocs .sbdocs-h6 {
     font-family: proxima-nova, sans-serif;
   }
+
 </style>
 
 <!-- external libs-->
 <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
-<!-- <script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1/jquery-ui.min.js"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/EasePack.min.js"></script>

.storybook/preview.js

@@ -1,12 +1,12 @@
 // import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 // import * as RTLAddon from 'storybook-addon-rtl';
-import renderToHTML from './renderToHTML';
-import { allModes } from './modes';
+import { allModes } from './modes'
+import renderToHTML from './renderToHTML'
 
 
 // include base styling globally
-import '!style-loader!css-loader!sass-loader!../stories/assets/scss/base-minimal.scss';
-import '!style-loader!css-loader!sass-loader!../docs/css/components/documentation.min.css';
+import '!style-loader!css-loader!sass-loader!../docs/css/components/documentation.min.css'
+import '!style-loader!css-loader!sass-loader!../stories/assets/scss/base-minimal.scss'
 
 // Log the contents of RTLAddon for debugging
 
@@ -84,7 +84,13 @@ export const globalTypes = {
         { value: 'arabic', title: 'Arabic' },
         { value: 'burmese', title: 'Burmese' },
         { value: 'japanese', title: 'Japanese' },
-        { value: 'ukrainian', title: 'Ukrainian' }
+        { value: 'ukrainian', title: 'Ukrainian' },
+        // { value: 'azerbaijani', title: 'Azerbaijani' },
+        // { value: 'georgian', title: 'Georgian' },
+        // { value: 'khmer', title: 'Khmer' },
+        // { value: 'nepali', title: 'Nepali' },
+        // { value: 'chinese', title: 'Chinese' },
+        // { value: 'korean', title: 'Korean' }
       ],
     },
   },
@@ -122,15 +128,18 @@ const getLangCode = (Story, context) => {
     'arabic': 'ar',
     'burmese': 'my',
     'japanese': 'ja',
-    'ukrainian': 'uk'
+    'ukrainian': 'uk',
   };
 
   if (typeof langArr[activeLang] == 'undefined') {
     activeLang = 'english';
   }
 
-  const htmlElem = document.querySelector('html');
-  htmlElem.setAttribute('lang', langArr[activeLang]);
+  const htmlElem = document.querySelectorAll('#storybook-root, .sb-story');
+  htmlElem.forEach(ele => {
+    ele.setAttribute('lang', langArr[activeLang]);
+    ele.setAttribute('dir', activeLang === 'arabic' ? 'rtl' : 'ltr');
+  });
 
   return (
     <Story {...context} />

.storybook/theme.js

@@ -1,7 +1,7 @@
 import { create } from '@storybook/theming';
 
 export default create({
-  base: 'light',
+  base: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
   brandTitle: 'UNDP Design system',
   brandUrl: 'https://www.undp.org/',
   brandImage: './images/undp-logo-blue.svg'