1052 upgrade storybook library dependencies

.storybook/main.js

@@ -1,23 +1,24 @@
 const path = require("path");
-
 module.exports = {
-  core: {
-    builder: "webpack5"
-  },
   staticDirs: ['../stories/assets'],
-  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../stories/**/*.stories.mdx", 
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-actions",
     "@storybook/addon-docs",
     "@storybook/addon-essentials",
     "@whitespace/storybook-addon-html",
     "storybook-addon-rtl",
-    "@storybook/addon-a11y",
+    "@storybook/addon-a11y"
   ],
   features: {
     storyStoreV7: true,
-    babelModeV7: true,
+    buildStoriesJson: true,
+    legacyMdx1: true,
+    babelModeV7: true
   },
   webpackFinal: async config => {
     // remove hash from the static file names
@@ -32,7 +33,7 @@ module.exports = {
     // });
     config.resolve.alias = {
       ...config.resolve.alias,
-      icons: path.resolve(__dirname, "../stories/assets/icons"),
+      icons: path.resolve(__dirname, "../stories/assets/icons")
     };
     // add SCSS support for CSS Modules
     config.module.rules.push({
@@ -43,9 +44,15 @@ module.exports = {
     });
     return config;
   },
-  framework: "@storybook/react",
-  env: (config) => ({
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  env: config => ({
     ...config,
-    CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920],
+    CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920]
   }),
-};
+  docs: {
+    autodocs: true
+  }
+};

.storybook/manager-head.html

@@ -1 +1,2 @@
-<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAC2awDltmsA87drAPO2agDzsWQA87BjAPOyZQDztWkA87ZqAPOyZQDzsWQA87FkAPO2agDzt2wA87ZrAPO2awDltmsA/7dsAP+0aAD/sWMA/755JP/IiVD/y49c/7VpAP+xZAD/yIpQ/8iJUP++eCb/smUA/7NnAP+3bAD/tmsA/7drAPO0aAD/sWQA/8mMWf/r0cb/8NzS/+TBsP/Olmv/zJFj/+PArf/u18v/69LI/82TZv+yZQD/tGcA/7dsAPO1aQDzsGMA/9Gbc//x39X/5sWz/9CYbv++ej3/0555/9CYbf+7dCX/zJFi/+bFs//x3dP/1qWC/7FjAP+0aADzsWMA88SDQv/z4dn/5saz/8mMV/+9dgP/woBG/8J/PP/Rm3P/2KiM/753EP/FhET/5sWx//Tk2//HiE7/sWQA87ZqAPPmxbD/6Mq6/8F+MP/Gh0z/1KB8/8WFTf/WpYj////////////ft57/xINA/8aFRv/mxbL/6s6+/7dtAPPGh0rz8NzT/9CZcP/Ljlz/8NvR//78+//FhEb/4Lmf//He1f/y4Nj/3rWb/8B7Jv++dwT/1qSB//Db0f/IilPzyo1Z8+rOwP/FhET/2quM///////dspb/zZNl/9utjv/mxrP/8d7U/8+Xbf/AfCn/wX4w/8aGSf/qzr//0Ztz882TZPPkwq7/zJJi/8eJUP/Xp4b/5cSx//ft6f/Rm3P/0554////////////0596/8qOWv/HiVD/4buj/9SgfPPIiVLz7NLE/8+Wav/JjFf/xII+/9Gbc//68/D/3bOY/92ylv/69PL/5saz/8eJUf/HiVD/yo1Z/+jKuv/OlWjzv3kD8/Db0P/brpD/wX4w/7x0AP/IiVD/0510/9Wjf//Tn3n/zJFi/9Ofef/QmXD/vXcA/9Wjfv/y4Nf/wn4n87JlAPPaq4r/7NLF/8aFSP/KjVr/3LCT/8B8NP/JjFj/xoVI/8F+MP//////2KiI/795Hv/py7v/4Lme/7RoAPOyZQDztmsA/+G7pP/WpIH/zpZp/8mLUf+8djT/0Zty/9akgv/EhEz/3K+P/8uPXv/WpID/58e1/7lvAP+xZADzt2wA87JlAP+3bQD/wn4x/7dtAP/CgEP/xoha/9Ofev/jvqn/y5Bm/712Gf+3bQD/xINA/7tzAP+xZAD/t2wA87ZrAP+3bAD/tGcA/7NmAP+0aAD/s2cA/712AP+/eRj/vHUA/712AP+0aAD/tGgA/7NmAP+zZgD/t2wA/7ZrAP+2awDltmsA87ZrAPO2awDztmsA87ZrAPO0aADzsmUA87JlAPO0aADztmsA87ZrAPO2awDztmsA87ZrAPO2awDlAAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//w==" />
+<link rel="shortcut icon" type="image/svg+xml" sizes="192x192" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAC2awDltmsA87drAPO2agDzsWQA87BjAPOyZQDztWkA87ZqAPOyZQDzsWQA87FkAPO2agDzt2wA87ZrAPO2awDltmsA/7dsAP+0aAD/sWMA/755JP/IiVD/y49c/7VpAP+xZAD/yIpQ/8iJUP++eCb/smUA/7NnAP+3bAD/tmsA/7drAPO0aAD/sWQA/8mMWf/r0cb/8NzS/+TBsP/Olmv/zJFj/+PArf/u18v/69LI/82TZv+yZQD/tGcA/7dsAPO1aQDzsGMA/9Gbc//x39X/5sWz/9CYbv++ej3/0555/9CYbf+7dCX/zJFi/+bFs//x3dP/1qWC/7FjAP+0aADzsWMA88SDQv/z4dn/5saz/8mMV/+9dgP/woBG/8J/PP/Rm3P/2KiM/753EP/FhET/5sWx//Tk2//HiE7/sWQA87ZqAPPmxbD/6Mq6/8F+MP/Gh0z/1KB8/8WFTf/WpYj////////////ft57/xINA/8aFRv/mxbL/6s6+/7dtAPPGh0rz8NzT/9CZcP/Ljlz/8NvR//78+//FhEb/4Lmf//He1f/y4Nj/3rWb/8B7Jv++dwT/1qSB//Db0f/IilPzyo1Z8+rOwP/FhET/2quM///////dspb/zZNl/9utjv/mxrP/8d7U/8+Xbf/AfCn/wX4w/8aGSf/qzr//0Ztz882TZPPkwq7/zJJi/8eJUP/Xp4b/5cSx//ft6f/Rm3P/0554////////////0596/8qOWv/HiVD/4buj/9SgfPPIiVLz7NLE/8+Wav/JjFf/xII+/9Gbc//68/D/3bOY/92ylv/69PL/5saz/8eJUf/HiVD/yo1Z/+jKuv/OlWjzv3kD8/Db0P/brpD/wX4w/7x0AP/IiVD/0510/9Wjf//Tn3n/zJFi/9Ofef/QmXD/vXcA/9Wjfv/y4Nf/wn4n87JlAPPaq4r/7NLF/8aFSP/KjVr/3LCT/8B8NP/JjFj/xoVI/8F+MP//////2KiI/795Hv/py7v/4Lme/7RoAPOyZQDztmsA/+G7pP/WpIH/zpZp/8mLUf+8djT/0Zty/9akgv/EhEz/3K+P/8uPXv/WpID/58e1/7lvAP+xZADzt2wA87JlAP+3bQD/wn4x/7dtAP/CgEP/xoha/9Ofev/jvqn/y5Bm/712Gf+3bQD/xINA/7tzAP+xZAD/t2wA87ZrAP+3bAD/tGcA/7NmAP+0aAD/s2cA/712AP+/eRj/vHUA/712AP+0aAD/tGgA/7NmAP+zZgD/t2wA/7ZrAP+2awDltmsA87ZrAPO2awDztmsA87ZrAPO0aADzsmUA87JlAPO0aADztmsA87ZrAPO2awDztmsA87ZrAPO2awDlAAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//w==" />
+<link rel="icon" type="image/svg+xml" sizes="192x192" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAC2awDltmsA87drAPO2agDzsWQA87BjAPOyZQDztWkA87ZqAPOyZQDzsWQA87FkAPO2agDzt2wA87ZrAPO2awDltmsA/7dsAP+0aAD/sWMA/755JP/IiVD/y49c/7VpAP+xZAD/yIpQ/8iJUP++eCb/smUA/7NnAP+3bAD/tmsA/7drAPO0aAD/sWQA/8mMWf/r0cb/8NzS/+TBsP/Olmv/zJFj/+PArf/u18v/69LI/82TZv+yZQD/tGcA/7dsAPO1aQDzsGMA/9Gbc//x39X/5sWz/9CYbv++ej3/0555/9CYbf+7dCX/zJFi/+bFs//x3dP/1qWC/7FjAP+0aADzsWMA88SDQv/z4dn/5saz/8mMV/+9dgP/woBG/8J/PP/Rm3P/2KiM/753EP/FhET/5sWx//Tk2//HiE7/sWQA87ZqAPPmxbD/6Mq6/8F+MP/Gh0z/1KB8/8WFTf/WpYj////////////ft57/xINA/8aFRv/mxbL/6s6+/7dtAPPGh0rz8NzT/9CZcP/Ljlz/8NvR//78+//FhEb/4Lmf//He1f/y4Nj/3rWb/8B7Jv++dwT/1qSB//Db0f/IilPzyo1Z8+rOwP/FhET/2quM///////dspb/zZNl/9utjv/mxrP/8d7U/8+Xbf/AfCn/wX4w/8aGSf/qzr//0Ztz882TZPPkwq7/zJJi/8eJUP/Xp4b/5cSx//ft6f/Rm3P/0554////////////0596/8qOWv/HiVD/4buj/9SgfPPIiVLz7NLE/8+Wav/JjFf/xII+/9Gbc//68/D/3bOY/92ylv/69PL/5saz/8eJUf/HiVD/yo1Z/+jKuv/OlWjzv3kD8/Db0P/brpD/wX4w/7x0AP/IiVD/0510/9Wjf//Tn3n/zJFi/9Ofef/QmXD/vXcA/9Wjfv/y4Nf/wn4n87JlAPPaq4r/7NLF/8aFSP/KjVr/3LCT/8B8NP/JjFj/xoVI/8F+MP//////2KiI/795Hv/py7v/4Lme/7RoAPOyZQDztmsA/+G7pP/WpIH/zpZp/8mLUf+8djT/0Zty/9akgv/EhEz/3K+P/8uPXv/WpID/58e1/7lvAP+xZADzt2wA87JlAP+3bQD/wn4x/7dtAP/CgEP/xoha/9Ofev/jvqn/y5Bm/712Gf+3bQD/xINA/7tzAP+xZAD/t2wA87ZrAP+3bAD/tGcA/7NmAP+0aAD/s2cA/712AP+/eRj/vHUA/712AP+0aAD/tGgA/7NmAP+zZgD/t2wA/7ZrAP+2awDltmsA87ZrAPO2awDztmsA87ZrAPO0aADzsmUA87JlAPO0aADztmsA87ZrAPO2awDztmsA87ZrAPO2awDlAAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//w==" />

.storybook/preview.js

@@ -1,11 +1,10 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { initializeRTL } from 'storybook-addon-rtl';
-// import { anysort } from 'anysort'
-// import { addParameters } from '@storybook/react'
 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';
 
 // initialise RTL
 initializeRTL();
@@ -30,7 +29,9 @@ export const parameters = {
     viewports: INITIAL_VIEWPORTS,
   },
   docs: {
-    transformSource: (src, storyContext) => renderToHTML(storyContext.storyFn),
+    source: {
+      transform: (src, storyContext) => renderToHTML(storyContext.storyFn),
+    }
   },
   options: {
     storySort: {
@@ -49,11 +50,12 @@ export const parameters = {
 // Note: Languages added to items array need to be added to the getLangCode() function below.
 export const globalTypes = {
   locale: {
-    name: 'Locale',
+    title: 'Locale',
     description: 'locale',
     defaultValue: 'en',
     toolbar: {
       icon: 'globe',
+      title: 'Locale',
       items: [
         { value: 'english', title: 'English', right: 'Default' },
         { value: 'arabic', title: 'Arabic' },
@@ -63,7 +65,7 @@ export const globalTypes = {
     },
   },
   accent: {
-    name: 'Accent color',
+    title: 'Accent color',
     description: 'Define the accent color.',
     defaultValue: '',
     toolbar: {