#1446 - updated preview config

.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'];
+// export const decorators = [getLangCode, sbFrameReset, setDirection, setAccentClass];
+// export const tags = ['autodocs'];
+
+export default {
+  parameters: parameters,
+  globalTypes: globalTypes,
+  decorators: [getLangCode, sbFrameReset, setDirection, setAccentClass],
+  tags: ['autodocs'],
+}

package.json

@@ -8,7 +8,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --progress",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build --debug-webpack --loglevel verbose"
+    "build-storybook": "storybook build --loglevel verbose"
   },
   "keywords": [
     "UNDP",
@@ -127,5 +127,6 @@
   },
   "bugs": {
     "url": "https://github.com/undp/design-system/issues"
-  }
+  },
+  "packageManager": "[email protected]+sha512.65a9c38a8172948f617a53619762cd77e12b9950fe1f9239debcb8d62c652f2081824b986fee7c0af6c0a7df615becebe4bf56e17ec27214a87aa29d9e038b4b"
 }

stories/Atom/Accessibility/Accessibility.mdx

@@ -1,9 +1,6 @@
 import { Meta, Story } from "@storybook/blocks";
 
-<Meta
-  title="Foundation/Accessibility"
-
-/>
+<Meta title="Foundation/Accessibility" />
 
 # Accessibility
 

stories/Documentation/Howtouse.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/blocks";
-import { Link } from '@storybook/addon-links/react';
 
 <Meta
   title="Getting started/How to use our design system?"
@@ -11,7 +10,7 @@ Using the UNDP design system is very simple. To use the design system you need t
 
 ### Steps to integrate
 
-- Include the base styling CSS file in your project [https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css](https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css).
+- Include the base styling CSS file in your project [https://cdn.jsdelivr.net/npm/@undp/design-system-assets/css/base-minimal.min.css](https://cdn.jsdelivr.net/npm/@undp/design-system-assets/css/base-minimal.min.css).
 - Browse the component which you want to integrate.
 - Check out the documentation page of the component.
 - Copy the HTML of the component in your project.
@@ -33,36 +32,33 @@ git clone
 2. Install project dependencies
 
 ```bash
-yarn install
+npm install
 ```
 
 3. Runs storybook locally
 
 ```bash
-yarn run storybook
+npm run storybook
 ```
 
 4. Build storybook
 
 ```bash
-yarn run build-storybook
+npm run build-storybook
 ```
 
-5. Linting on codebase
+5. Run this command whenever compiling CSS and JS
 
 ```bash
-yarn run lint
-```
-
-6. Run this command whenever compiling CSS and JS
-
-```bash
-yarn run build
+npm run build
 ```
 
 ### Dependencies
+(need to be loaded separately)
 
 - jQuery [(https://www.jquery.com/)](https://www.jquery.com/)
+- GSAP [(https://greensock.com/gsap/)](https://greensock.com/gsap/)
+- Swiper [(https://swiperjs.com/)](https://swiperjs.com/)
 
 ### Assets (CSS/JS/Icons) Path
 

stories/Documentation/intro.mdx

@@ -1,5 +1,5 @@
-import { Meta, Source, Canvas, Story, Preview } from "@storybook/blocks";
-import { Heading } from "../Atom/Typography/Heading/Heading";
+import { Meta, Source, Canvas, Story, Preview } from '@storybook/blocks';
+import { Heading } from '../Atom/Typography/Heading/Heading';
 import { Video } from "../Atom/Video/Video";
 import "./documentation.scss";
 import { FeaturedContentCard } from "../Components/UIcomponents/Cards/FeaturedCard/FeaturedContentCard";