+ Accessible design not only helps users with disabilities; it also
+ provides a better user experience for everyone. All components
+ follow the WCAG 2.1 AA standards.
+
+
+ All patterns are perceivable, operable, and understandable to
+ users, even when using a screen reader or other assistive
+ technology. However, how you use these elements also affects the
+ accessibility of a product.
+
+
+ Please find additional information about accessibility in the links
+ below:
+
+
+ ),
+ },
+ },
+};
+
diff --git a/stories/Atom/Accessibility/Accessibility.stories.mdx b/stories/Atom/Accessibility/Accessibility.stories.mdx
deleted file mode 100644
index c5435950e..000000000
--- a/stories/Atom/Accessibility/Accessibility.stories.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Meta, Story } from "@storybook/addon-docs";
-
-
-
-# Accessibility
-
-Accessible design not only helps users with disabilities; it also provides a better user experience for everyone. All components follow the WCAG 2.1 AA standards.
-
-All patterns are perceivable, operable, and understandable to users, even when using a screen reader or other assistive technology. However, how you use these elements also affects the accessibility of a product.
-
-Please find additional information about accessibility in the links below:
-Visit W3C WCAG for more detail https://www.w3.org/TR/WCAG21/
diff --git a/stories/Atom/BaseTypography/BaseTypography.stories.mdx b/stories/Atom/BaseTypography/BaseTypography.mdx
similarity index 99%
rename from stories/Atom/BaseTypography/BaseTypography.stories.mdx
rename to stories/Atom/BaseTypography/BaseTypography.mdx
index 781b13ea7..9a103464f 100644
--- a/stories/Atom/BaseTypography/BaseTypography.stories.mdx
+++ b/stories/Atom/BaseTypography/BaseTypography.mdx
@@ -1,6 +1,6 @@
import { Canvas, Meta, Story, Source, Anchor } from "@storybook/addon-docs";
-import { Heading } from "./../Typography/Heading/Heading";
+import { Heading } from "../Typography/Heading/Heading";
import { Abbreviation } from "./Abbr/Abbr";
import { Blockquote } from "./Blockquote/Blockquote";
import { Cite } from "./Cite/Cite";
@@ -10,8 +10,8 @@ import { Mark } from "./Mark/Mark";
import { P } from "./Paragraph/Paragraph";
import { Quotation } from "./Quotation/Quotation";
import { Small } from "./Small/Small";
-import { List } from "./../Typography/Lists/Lists";
-import { Descriptionlist } from "./../Typography/Lists/Descriptionlist";
+import { List } from "../Typography/Lists/Lists";
+import { Descriptionlist } from "../Typography/Lists/Descriptionlist";
import { DetailsTag } from "../ReachElement/Details/Details";
import { Figcaption } from "../ReachElement/Figcaption/Figcaption";
diff --git a/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.js b/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.js
new file mode 100644
index 000000000..264753b0f
--- /dev/null
+++ b/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.js
@@ -0,0 +1,75 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import { P } from './Paragraph';
+
+const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return {
+ detail:
+ 'Large paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor mauris quis pulvinar ultrices. Quisque eget placerat odio, vel viverra ipsum. Sed pharetra varius dignissim. Cras varius luctus est sit amet sollicitudin. Donec eget dui eget nulla luctus ultrices. Sed eu turpis quam. Nulla facilisi.',
+ };
+ case 'arabic':
+ return {
+ detail:
+ 'فقرة كبيرة lorem ipsum dolor sit amet، consectetur adipiscing elit. Pellentesque porttitor mauris quis pulvinar ultrices. Quisque eget placerat odio، vel viverra ipsum. Sed pharetra varius gentissim. Cras varius luctus est sit amet sollicitudin. Donec eget dui eget nulla luctus ultrices. Sed eu Turpis quam. نولا فاسيليسي.-',
+ };
+ case 'burmese':
+ return {
+ detail:
+ 'ကြီးမားသောစာပိုဒ် lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Pellentesque porttitor mauris quis pulvinar ultrices Quisque eget placerat odio, vel viverra ipsum ။ Sed pharetra varius dignissim ဖြစ်သည်။ Cras varius luctus est amet sollicitudin ထိုင်သည်။ Donec eget dui eget nulla luctus ultrices ။ Sed eu turpis quam ။ Nulla facilisi',
+ };
+ case 'japanese':
+ return {
+ detail:
+ '大きな段落はインターネット自体の苦痛です。 Pellentesque porttitor mauris quis pulvinarultrices。誰もが本物、または漫画自体を嫌う必要があります。しかし、矢筒は資産です。悲しみは大変なことです。住宅の必要性が痛みを必要としないまで。しかし、どれほど素晴らしくて醜い。複雑なことは何もありません。',
+ };
+ default:
+ return {
+ detail:
+ 'Large paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor mauris quis pulvinar ultrices. Quisque eget placerat odio, vel viverra ipsum. Sed pharetra varius dignissim. Cras varius luctus est sit amet sollicitudin. Donec eget dui eget nulla luctus ultrices. Sed eu turpis quam. Nulla facilisi.',
+ };
+ }
+};
+
+export const metaComponent = () => ;
+
+export const templateComponent = () => (
+ <>
+
Paragraph Component
+
The Paragraph component defines a paragraph.
+
+
We can use the p tag in any component to define a paragraph.
+
+
Typographic scale when using paragraph in text component:
+
+);
+
+export default {
+ title: 'Documentation/Accessibility',
+ parameters: {
+ docs: {
+ page: () => ,
+ },
+ },
+};
diff --git a/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.mdx b/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.mdx
deleted file mode 100644
index e05035ca3..000000000
--- a/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.mdx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Meta, Story } from "@storybook/addon-docs";
-import { P } from "./Paragraph";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- detail:
- "Large paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor mauris quis pulvinar ultrices. Quisque eget placerat odio, vel viverra ipsum. Sed pharetra varius dignissim. Cras varius luctus est sit amet sollicitudin. Donec eget dui eget nulla luctus ultrices. Sed eu turpis quam. Nulla facilisi.",
- };
- return engText;
- case "arabic":
- const arabicText = {
- detail:
- "فقرة كبيرة lorem ipsum dolor sit amet، consectetur adipiscing elit. Pellentesque porttitor mauris quis pulvinar ultrices. Quisque eget placerat odio، vel viverra ipsum. Sed pharetra varius gentissim. Cras varius luctus est sit amet sollicitudin. Donec eget dui eget nulla luctus ultrices. Sed eu Turpis quam. نولا فاسيليسي.-",
- };
- return arabicText;
- case "burmese":
- const burmeseText = {
- detail:
- "ကြီးမားသောစာပိုဒ် lorem ipsum dolor sit amet, consectetur adipiscing elit ။ Pellentesque porttitor mauris quis pulvinar ultrices Quisque eget placerat odio, vel viverra ipsum ။ Sed pharetra varius dignissim ဖြစ်သည်။ Cras varius luctus est amet sollicitudin ထိုင်သည်။ Donec eget dui eget nulla luctus ultrices ။ Sed eu turpis quam ။ Nulla facilisi",
- };
- return burmeseText;
- case "japanese":
- const japaneseText = {
- detail:
- "大きな段落はインターネット自体の苦痛です。 Pellentesque porttitor mauris quis pulvinarultrices。誰もが本物、または漫画自体を嫌う必要があります。しかし、矢筒は資産です。悲しみは大変なことです。住宅の必要性が痛みを必要としないまで。しかし、どれほど素晴らしくて醜い。複雑なことは何もありません。",
- };
- return japaneseText;
- default:
- return {
- detail:
- "Large paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor mauris quis pulvinar ultrices. Quisque eget placerat odio, vel viverra ipsum. Sed pharetra varius dignissim. Cras varius luctus est sit amet sollicitudin. Donec eget dui eget nulla luctus ultrices. Sed eu turpis quam. Nulla facilisi.",
- };
- }
-};
-
-
-
-# Paragraph Component
-
-The Paragraph component defines a paragraph.
-
-- We can use the p tag in any component to define a paragraph.
-
-Typographic scale when using paragraph in text component:
-
-
-
-### Usage:
-
-- Copy the HTML from the HTML tab and include the CSS mentioned below.
-
-### CSS and JS References:
-
-#### CSS:
-
-- Add the base layout style from https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-
-#### JS:
-
-- NA
diff --git a/stories/Atom/Icons/Icons.stories.js b/stories/Atom/Icons/Icons.stories.js
new file mode 100644
index 000000000..872730b8f
--- /dev/null
+++ b/stories/Atom/Icons/Icons.stories.js
@@ -0,0 +1,105 @@
+import React from "react";
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Icons } from "./Icons.stories"; // Assuming Icons component is defined in Icons.js
+import data from "./Icons.json";
+import "./icons.scss";
+
+export const parameters = {
+ docs: {
+ page: () => (
+ <>
+
+
+
Icons
+
+ The Icon components can grab attention and draw users into a piece
+ of content. They can help users quickly understand the context in
+ which they are placed.
+
+
When to use:
+
+
+ When content is dense and complex to help comprehend the users
+ the available actions
+
+
+ When space needs to be saved instead of using words or long
+ phrases.
+
+
+
+
Usage
+
+
+ For svg icons download it from dist/images and use it on your
+ webpage.
+
+
+ For CSS based icons eg: .chevron-right-animated,
+ .external-link-animated and .download-animated use these classes
+ in span element.
+
+
+
+ ),
+ },
+};
diff --git a/stories/Atom/Icons/Icons.stories.mdx b/stories/Atom/Icons/Icons.stories.mdx
deleted file mode 100644
index 4990c3d61..000000000
--- a/stories/Atom/Icons/Icons.stories.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Icons } from "./Icons";
-import data from "./Icons.json";
-import "./icons.scss";
-
-
-
-# Icons
-
-The Icon components can grab attention and draw users into a piece of content. They can help users quickly understand the context in which they are placed.
-
-### When to use:
-
-- When content is dense and complex to help comprehend the users the available actions
-- When space needs to be saved instead of using words or long phrases.
-
-
-
-### Usage
-
-- For svg icons download it from dist/images and use it on your webpage.
-- For CSS based icons eg: .chevron-right-animated, .external-link-animated and .download-animated use these classes in **span** element.
-
-#### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-
-#### JS:
-
-NA
diff --git a/stories/Atom/Images/AuthorImage/AuthorImages.stories.js b/stories/Atom/Images/AuthorImage/AuthorImages.stories.js
new file mode 100644
index 000000000..03796afd3
--- /dev/null
+++ b/stories/Atom/Images/AuthorImage/AuthorImages.stories.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Authorimg } from './AuthorImages';
+import user from '../../../assets/images/author.png';
+
+export default {
+ title: 'Foundation/Images/Author image',
+ argTypes: {
+ variant: {
+ name: 'Size variant',
+ options: ['Large', 'Small'],
+ control: { type: 'inline-radio' },
+ },
+ accent: {
+ name: 'Hover accent color',
+ options: ['global', 'yellow', 'red', 'green', 'blue'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ accent: 'global',
+ variant: 'Small',
+ },
+};
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ const engText = {};
+ return engText;
+ case 'ukrainian':
+ return { detail: '' };
+ case 'arabic':
+ const arabicText = {};
+ return arabicText;
+ case 'burmese':
+ const burmeseText = {};
+ return burmeseText;
+ case 'japanese':
+ const japaneseText = {};
+ return japaneseText;
+ default:
+ return {};
+ }
+};
+
+const Template = (args, { globals: { locale, accent } }) => {
+ const caption = getCaptionForLocale(locale);
+ return ;
+};
+
+export const AuthorImageStory = Template.bind({});
+AuthorImageStory.args = {
+ accent: 'global',
+ variant: 'Small',
+};
+
+// Documentation content
+AuthorImageStory.parameters = {
+ docs: {
+ description: {
+ component: `
+# Author Image
+
+The Author Image component reveals the photo of the author.
+
+### Overview
+
+The Author Image component displays the author’s image but does not contain any information.
+
+#### When to use:
+
+- When the image of the author is to be displayed.
+
+### Formatting
+
+#### Default
+
+It’s circular shaped with an image inside it.
+
+### Behaviors
+
+#### States
+
+There are two states in the Author Image component: Small and Large.
+
+- Small
+- Large
+
+### CSS and JS References
+
+#### CSS:
+
+Add the base layout style from
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+
+#### JS:
+
+- N/A
+
+### Changelog
+
+1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Atom/Images/AuthorImage/AuthorImages.stories.mdx b/stories/Atom/Images/AuthorImage/AuthorImages.stories.mdx
deleted file mode 100644
index eaced34a6..000000000
--- a/stories/Atom/Images/AuthorImage/AuthorImages.stories.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Authorimg } from "./AuthorImages";
-import user from "../../../assets/images/author.png";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {};
- return engText;
- case "ukrainian":
- return {detail: ""}
- case "arabic":
- const arabicText = {};
- return arabicText;
- case "burmese":
- const burmeseText = {};
- return burmeseText;
- case "japanese":
- const japaneseText = {};
- return japaneseText;
- default:
- return {};
- }
-};
-
-
-
-# Author Image
-
-The Author Image component reveals the photo of the author.
-
-### Overview
-
-The Author Image component displays the author’s image but does not contain any information.
-
-#### When to use:
-
-- When the image of the author is to be displayed.
-
-### Formatting
-
-#### Default
-
-It’s circular shaped with an image inside it.
-
-### Behaviors
-
-#### States
-
-There are two states in the Author Image component: Small and Large.
-
-- Small
-- Large
-
-
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-
-#### JS:
-
-- N/A
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.js b/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.js
new file mode 100644
index 000000000..2ba801493
--- /dev/null
+++ b/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import { Meta, Story, Canvas, Source } from '@storybook/addon-docs';
+import { Images } from './ImageCaptionCredit';
+import farmlandlg from '../../../assets/images/farmland-lg.jpg';
+import farmlandmd from '../../../assets/images/farmland-md.jpg';
+import farmlandsm from '../../../assets/images/farmland-sm.jpg';
+
+export default {
+ title: 'Foundation/Images/Image with credit + caption',
+ argTypes: {
+ size: {
+ options: ['wide', 'medium', 'portrait'],
+ control: { type: 'inline-radio' },
+ },
+ caption: {
+ options: ['true', 'false'],
+ control: { type: 'inline-radio' },
+ },
+ credit: {
+ options: ['true', 'false'],
+ control: { type: 'inline-radio' },
+ },
+ animation: {
+ options: ['true', 'false'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ size: 'wide',
+ caption: 'true',
+ credit: 'true',
+ animation: 'false',
+ },
+};
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return {
+ label: ['UNDP/Angola', , Jerome Bell],
+ paragraph:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus. ',
+ };
+ case 'ukrainian':
+ return {
+ label: ['ПРООН в Україні', , Андрій Крєпкіх],
+ paragraph:
+ 'Аварійні роботи, що сприяють відновленню та відбудові',
+ };
+ case 'arabic':
+ return {
+ label: [
+ 'برنامج الأمم المتحدة الإنمائي / أنغولا',
+ ,
+ جيروم بيل,
+ ],
+ paragraph:
+ 'الألم بحد ذاته يسبب الكثير من الألم ، لكن التركيز الأساسي ينصب على العميل. Morbi lorem tortor، fermentum eu lorem at، venenatis malesuada laughter.',
+ };
+ case 'burmese':
+ return {
+ label: ['UNDP/အန်ဂိုလာ', , ဂျရုမ်း ဘဲလ်],
+ paragraph:
+ 'နာကျင်မှုကိုယ်တိုင်က နာကျင်ပေမယ့် အဓိက အာရုံစိုက်တာက ဖောက်သည်အပေါ်ပါ။ Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada ရယ်မောခြင်း။',
+ };
+ case 'japanese':
+ return {
+ label: ['UNDP /アンゴラ', , ジェロームベル],
+ paragraph:
+ '痛み自体は多くの痛みですが、主な焦点は顧客にあります。 Morbi lorem tortor、fermentum eu lorem at、venenatismalesuadaの笑い声。',
+ };
+ default:
+ return {
+ label: ['UNDP/Angola', , Jerome Bell],
+ paragraph:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus. ',
+ };
+ }
+};
+
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+};
+
+export const ImageCaptionCreditStory = Template.bind({});
+ImageCaptionCreditStory.args = {
+ size: 'wide',
+ caption: true,
+ credit: true,
+ animation: false,
+};
+
+// Documentation content
+ImageCaptionCreditStory.parameters = {
+ docs: {
+ description: {
+ component: `
+# Image with caption and credit component
+
+The Image with Caption and Credit describes the image and gives credit to its source.
+
+## Overview
+
+The Image with caption and credit creates boxes that are usually teasing some kind of content like- Image, Text, and Image author name. A grid system is used to manage the different types of sizes and caption molecules are used for creating the card.
+
+#### When to use:
+
+- When description and credit for the source of the image are to be added.
+
+### Formatting
+
+#### Default
+
+It consists of a grid with an image and the description and the source of the image mentioned below or beside the image.
+
+### Behaviors
+
+#### States
+
+It consists of three states: Wide, Medium, and Portrait.
+
+- Wide: In the wide state, the image is large-sized and the caption and credit are mentioned below the image.
+- Medium: In the medium state, the image is medium-sized and the caption and credit are mentioned below the image.
+- Portrait: In portrait state, the image is situated on either side of the grid, and the caption and credit beside the image.
+
+### CSS and JS References
+
+#### CSS:
+
+Add the base layout style from
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/image-caption.min.css
+
+#### JS:
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js
+
+### Interactions
+
+When the page containing the image is opened, the image zooms out and gives a 3-D effect.
+
+### Changelog
+
+1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.mdx b/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.mdx
deleted file mode 100644
index 16e85a086..000000000
--- a/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.mdx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { Meta, Story, Canvas, Source } from "@storybook/addon-docs";
-import { Images } from "./ImageCaptionCredit";
-import farmlandlg from "../../../assets/images/farmland-lg.jpg";
-import farmlandmd from "../../../assets/images/farmland-md.jpg";
-import farmlandsm from "../../../assets/images/farmland-sm.jpg";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- label: ["UNDP/Angola", , Jerome Bell],
- paragraph:
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus.",
- };
- return engText;
- case "ukrainian":
- return {
- label: ["ПРООН в Україні", , Андрій Крєпкіх],
- paragraph:
- "Аварійні роботи, що сприяють відновленню та відбудові",
- };
- case "arabic":
- const arabicText = {
- label: [
- "برنامج الأمم المتحدة الإنمائي / أنغولا",
- ,
- جيروم بيل,
- ],
- paragraph:
- "الألم بحد ذاته يسبب الكثير من الألم ، لكن التركيز الأساسي ينصب على العميل. Morbi lorem tortor، fermentum eu lorem at، venenatis malesuada laughter.",
- };
- return arabicText;
- case "burmese":
- const burmeseText = {
- label: ["UNDP/အန်ဂိုလာ", , ဂျရုမ်း ဘဲလ်],
- paragraph:
- "နာကျင်မှုကိုယ်တိုင်က နာကျင်ပေမယ့် အဓိက အာရုံစိုက်တာက ဖောက်သည်အပေါ်ပါ။ Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada ရယ်မောခြင်း။",
- };
- return burmeseText;
- case "japanese":
- const japaneseText = {
- label: ["UNDP /アンゴラ", , ジェロームベル],
- paragraph:
- "痛み自体は多くの痛みですが、主な焦点は顧客にあります。 Morbi lorem tortor、fermentum eu lorem at、venenatismalesuadaの笑い声。",
- };
- return japaneseText;
- default:
- return {
- label: ["UNDP/Angola", , Jerome Bell],
- paragraph:
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, fermentum eu lorem at, venenatis malesuada risus. ",
- };
- }
-};
-
-
-
-
-
-# Image with caption and credit component
-
-The Image with Caption and Credit describes the image and gives credit to it’s source.
-
-## Overview
-
-The Image with caption and credit creates boxes that are usually teasing some kind of content like- Image, Text, and Image author name. A grid system is used to manage the different types of sizes and caption molecules are used for creating the card.
-
-#### When to use:
-
-- When description and credit for the source of the image are to be added.
-
-### Formatting
-
-#### Default
-
-It consists of a grid with an image and the description and the source of the image mentioned below or beside the image.
-
-### Behaviors
-
-#### States
-
-It consists of three states: Wide, Medium, and Portrait.
-
-- Wide: In the wide state, the image is large-sized and the caption and credit are mentioned below the image.
-- Medium: In the medium state, the image is medium-sized and the caption and credit are mentioned below the image.
-- Portrait: In portrait state, the image is situated on either side of the grid, and the caption and credit beside the image.
-
-
-
-### Usage:
-
-- Choose the size controls as either wide, medium or portrait from the Canvas. Caption and Credit controls as true or false from the control tab of canvas.
-- Copy the HTML from the HTML tab and include below listed css file.
-- If you want to add left-right animation then add data-viewport=”true” attribute to your HTML element and include viewport.min.js.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/image-caption.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js
-
-### Interactions
-
-When the page containing the image is opened, the image zooms out and gives a 3-D effect.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Atom/Layout/Breakpoint/Breakpoint.stories.js b/stories/Atom/Layout/Breakpoint/Breakpoint.stories.js
new file mode 100644
index 000000000..fdc0325b2
--- /dev/null
+++ b/stories/Atom/Layout/Breakpoint/Breakpoint.stories.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Meta, Story, Source } from '@storybook/addon-docs';
+
+export default {
+ title: 'Foundation/Layout/Breakpoint',
+ parameters: {
+ viewMode: 'docs',
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ },
+};
+
+const Template = () => (
+ <>
+
Breakpoints
+
+
+ The Breakpoints are the points at which the content of the website adapts itself as per the user’s device width.
+
+
+
Overview
+
+ The Breakpoint components are defined to manage the layout of the website according to the device’s resolution with gutter spacing for left or right margins. The design system uses a mobile-first approach which means styles are applied first to mobile devices. Advanced styles and other overrides for larger screens are then added to the stylesheet via media queries.
+
+
+
When to use:
+
+
To make the content of the website adaptable to the user’s device resolution.
+
+
+
Formatting
+
+
Default
+
+ There are three types of breakpoints: small, medium, and large.
+
+
+
States
+
+ There are four states in Breakpoints: Desktop, Laptop, Tablet, and Mobile.
+
+
Desktop: The minimum width is 1440px
+
Laptop: The minimum width is 1025px and maximum width is 1439px.
+
Tablet: The minimum width is 481px and maximum width is 1024px
+
Mobile: The maximum width is 480px
+
+
+
+
CSS and JS References
+
+ We are mostly using Foundation Grid system for layouting and managing our component for different screen sizes shared above.
+
+ You need to include https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css in your html file and you are good to go.
+
+
+);
+
+export const BreakpointStory = Template.bind({});
+BreakpointStory.args = {};
diff --git a/stories/Atom/Layout/Breakpoint/Breakpoint.stories.mdx b/stories/Atom/Layout/Breakpoint/Breakpoint.stories.mdx
deleted file mode 100644
index 87115008c..000000000
--- a/stories/Atom/Layout/Breakpoint/Breakpoint.stories.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, Story, Source} from '@storybook/addon-docs';
-
-
-
-# Breakpoints
-
-The Breakpoints are the points at which the content of the website adapts itself as per the user’s device width.
-
-### Overview
-The Breakpoint components are defined to manage the layout of the website according to the device’s resolution with gutter spacing for left or right margins. The design system uses a mobile-first approach which means styles are applied first to mobile devices. Advanced styles and other overrides for larger screens are then added to the stylesheet via media queries.
-
-#### When to use:
- - To make the content of the website adaptable to the user’s device resolution.
-
-### Formatting
-
-#### Default
-There are three types of breakpoints: small, medium, and large.
-Content
-
-#### States
-There are four states in Breakpoints: Desktop, Laptop, Tablet, and Mobile.
-1. Desktop: The minimum width is 1440px
-2. Laptop: The minimum width is 1025px and maximum width is 1439px.
-3. Tablet: The minimum width is 481px and maximum width is 1024px
-4. Mobile: The maximum width is 480px
-
-### CSS and JS References
-We are mostly using Foundation Grid system for layouting and managing our component for different screen sizes shared above.
-
-You need to include **https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css** in your html file and you are good to go.
diff --git a/stories/Atom/Layout/Grid/Grid.stories.js b/stories/Atom/Layout/Grid/Grid.stories.js
new file mode 100644
index 000000000..306a290fa
--- /dev/null
+++ b/stories/Atom/Layout/Grid/Grid.stories.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Meta, Story, Source } from '@storybook/addon-docs';
+
+export default {
+ title: 'Foundation/Layout/Grid',
+ parameters: {
+ viewMode: 'docs',
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ },
+};
+
+const Template = () => (
+ <>
+
Grid system
+
+
+ A grid is a series of rows where the developer specifies the content. This Design system is based on Foundation Grid, more you can find about grid system here (https://get.foundation/sites/docs/xy-grid.html)
+
+
+
When to use:
+
+
When the user needs to control the layout in two dimensions. With Grid users have rows and columns, cells, and grid areas (a group of more than one cell) and items must be placed in these cells or Grid areas
Note: As the base of the design system is using Foundation grid but component are independent of grid system, that means components can be used with any other grid system (eg: bootstrap)
+
+
+);
+
+export const GridStory = () => ;
+GridStory.parameters = {
+ docs: {
+ source: {
+ code: `
+import { Meta, Story, Source } from '@storybook/addon-docs';
+
+
+
+# Grid system
+A grid is a series of rows where the developer specifies the content. This Design system is based on Foundation Grid, more you can find about grid system here (https://get.foundation/sites/docs/xy-grid.html)
+
+#### When to use:
+- When the user needs to control the layout in two dimensions. With Grid users have rows and columns, cells, and grid areas (a group of more than one cell) and items must be placed in these cells or Grid areas
+
+### Usage
+Design system is based on [Foundation Grid](https://get.foundation/sites/docs/xy-grid.html), you can get more detail about the layout and grid from their [getting started guide](https://get.foundation/sites/docs/index.html).
+
+**Note**: As the base of the design system is using Foundation grid but component are independent of grid system, that means components can be used with any other grid system (eg: bootstrap)
+
+### CSS and JS References
+#### CSS:
+Add the base layout style from below path which includes the grid system of Foundation.
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+
+#### JS:
+- NA
+
+### Changelog
+1.0 — Released component
+`,
+ },
+ },
+};
\ No newline at end of file
diff --git a/stories/Atom/Layout/Grid/Grid.stories.mdx b/stories/Atom/Layout/Grid/Grid.stories.mdx
deleted file mode 100644
index 292e840b4..000000000
--- a/stories/Atom/Layout/Grid/Grid.stories.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Meta, Story, Source} from '@storybook/addon-docs';
-
-
-
-# Grid system
-A grid is a series of rows where the developer specifies the content. This Design system is based on Foundation Grid, more you can find about grid system here (https://get.foundation/sites/docs/xy-grid.html)
-
-#### When to use:
-- When the user needs to control the layout in two dimensions. With Grid users have rows and columns, cells, and grid areas (a group of more than one cell) and items must be placed in these cells or Grid areas
-
-### Usage
-Design system is based on [Foundation Grid](https://get.foundation/sites/docs/xy-grid.html), you can get more detail about the layout and grid from their [getting started guide](https://get.foundation/sites/docs/index.html).
-
-**Note**: As the base of the design system is using Foundation grid but component are independent of grid system, that means components can be used with any other grid system (eg: bootstrap)
-
-### CSS and JS References
-#### CSS:
-Add the base layout style from below path which includes the grid system of Foundation.
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-
-#### JS:
-- NA
-
-### Changelog
-1.0 — Released component
diff --git a/stories/Atom/Layout/Spacing/Spacing.stories.js b/stories/Atom/Layout/Spacing/Spacing.stories.js
new file mode 100644
index 000000000..cb967b4c3
--- /dev/null
+++ b/stories/Atom/Layout/Spacing/Spacing.stories.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Spacing } from './Spacing';
+
+export default {
+ title: 'Foundation/Layout/Spacing',
+ component: Spacing,
+ parameters: {
+ viewMode: 'docs',
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ },
+};
+
+const Template = () => (
+ <>
+
Spacing
+
+
The Spacing units create visual rhythm and balance.
+
+
When to use:
+
+
To create spacing before, after, or in-between texts.
+
+
+
States
+
There are thirteen states with different spacing widths.
+
+
+
+
Usage
+
+ Use of standard spaces are already applied on different components, if you want to change the space, that can be done in stories/assets/scss/_variables.scss.
+
+
+);
+
+export const SpacingStory = () => ;
+SpacingStory.parameters = {
+ docs: {
+ source: {
+ code: `
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Spacing } from "./Spacing";
+
+
+
+# Spacing
+
+The Spacing units create visual rhythm and balance.
+
+### When to use:
+
+- To create spacing before, after, or in-between texts.
+
+### States
+
+There are thirteen states with different spacing widths.
+
+
+
+### Usage
+
+Use of standard spaces are already applied on different components, if you want to change the space, that can be done in **stories/assets/scss/_varaibles.scss**.
+`,
+ },
+ },
+};
diff --git a/stories/Atom/Layout/Spacing/Spacing.stories.mdx b/stories/Atom/Layout/Spacing/Spacing.stories.mdx
deleted file mode 100644
index 487c251bc..000000000
--- a/stories/Atom/Layout/Spacing/Spacing.stories.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Spacing } from "./Spacing";
-
-
-
-# Spacing
-
-The Spacing units create visual rhythm and balance.
-
-### When to use:
-
-- To create spacing before, after, or in-between texts.
-
-### States
-
-There are thirteen states with different spacing widths.
-
-
-
-### Usage
-
-Use of standard spaces are already applied on different components, if you want to change the space, that can be done in **stories/assets/scss/\_varaibles.scss**.
diff --git a/stories/Atom/Logo/Logo.stories.js b/stories/Atom/Logo/Logo.stories.js
new file mode 100644
index 000000000..206cd5cfe
--- /dev/null
+++ b/stories/Atom/Logo/Logo.stories.js
@@ -0,0 +1,273 @@
+import React from 'react';
+import { Meta, Story, Canvas, Anchor } from '@storybook/addon-docs';
+import { Logo } from './Logo';
+
+import logo from '../../assets/images/undp-logo-blue.svg';
+import logowhite from '../../assets/images/undp-logo-white.svg';
+import pnud from '../../assets/images/pnud-logo-blue.svg';
+import pnudwhite from '../../assets/images/pnud-logo-white.svg';
+
+export default {
+ title: 'Foundation/Logos',
+ parameters: {
+ backgrounds: {
+ default: 'white',
+ values: [
+ { name: 'white', value: '#fff' },
+ { name: 'gray', value: '#A9B1B7' },
+ ],
+ },
+ },
+};
+
+const Template = () => (
+ <>
+
UNDP Logos
+
+
+ The UNDP logo is a keystone element of the identity and is used to represent the entire organization.
+
+
+
Overview
+
+ The UNDP logo is the combination, in one fixed-size relationship, of the United Nations emblem and the letters “UNDP/PNUD”.
+ The UNDP logo is the keystone element of the identity program and should be used to represent the entire organization.
+
+
+
When to use:
+
+
To promote business.
+
To create an identity for the organization.
+
+
+
Formatting
+
Default
+
+ There are only two versions of the UNDP logo: UNDP (English) and PNUD (French/Spanish). Within the design system, the logo is used in the header and footer components.
+ The logo is available in blue or white.
+
+
+
Content
+
+ A well-established and consistently presented identity is a very valuable asset.
+ To protect and strengthen the trademark status of the logo, the approved versions must not be altered, modified, changed, or added to in any way.
+
+
+
Behaviors
+
States
+
The UNDP and PNUD logos are available in blue or white and used as per the page background.
By clicking on the logo, the website is redirected to the homepage.
+
+);
+
+export const LogosStory = () => ;
+LogosStory.parameters = {
+ docs: {
+ source: {
+ code: `
+import { Meta, Story, Canvas, Anchor } from "@storybook/addon-docs";
+import { Logo } from "./Logo";
+
+import logo from "../../assets/images/undp-logo-blue.svg";
+import logowhite from "../../assets/images/undp-logo-white.svg";
+import pnud from "../../assets/images/pnud-logo-blue.svg";
+import pnudwhite from "../../assets/images/pnud-logo-white.svg";
+
+
+
+# UNDP Logos
+
+The UNDP logo is a keystone element of the identity and is used to represent the entire organization.
+
+### Overview
+
+The UNDP logo is the combination, in one fixed-size relationship, of the United Nations emblem and the letters “UNDP/PNUD”.
+The UNDP logo is the keystone element of the identity program and should be used to represent the entire organization.
+
+### When to use:
+
+- To promote business.
+- To create an identity for the organization.
+
+### Formatting
+
+#### Default
+
+There are only two versions of the UNDP logo: UNDP (English) and PNUD (French/Spanish). Within the design system, the logo is used in the header and footer components.
+The logo is available in blue or white.
+
+### Content
+
+A well-established and consistently presented identity is a very valuable asset.
+To protect and strengthen the trademark status of the logo, the approved versions must not be altered, modified, changed, or added to in any way.
+
+### Behaviors
+
+#### States
+
+The UNDP and PNUD logos are available in blue or white and used as per the page background.
+
+The following behavior modifiers are available:
+
+
+
+1. PNUD logo - Blue [Download](images/pnud-logo-blue.svg)
+
+This is the default PNUD logo and is used primarily in the header of every page as well as country sites.
+
+
+
+
+
+2. PNUD logo - White [Download](images/pnud-logo-white.svg)
+
+The PNUD white logo is primarily used in the footer of all pages as well as on a dark background.
+
+
+
+
+
+3. UNDP Logo - Blue [Download](images/undp-logo-blue.svg)
+
+This is the default logo and is used primarily in the header of every page as well as country sites.
+
+
+
+
+
+4. UNDP Logo - White [Download](images/undp-logo-white.svg)
+
+The UNDP white logo is primarily used in the footer of all pages as well as on a dark background.
+
+
+
+### Interactions
+
+- By clicking on the logo, the website is redirected to the homepage.
+
+### Changelog
+
+1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Atom/Logo/Logo.stories.mdx b/stories/Atom/Logo/Logo.stories.mdx
deleted file mode 100644
index 6dd9b2855..000000000
--- a/stories/Atom/Logo/Logo.stories.mdx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Meta, Story, Canvas, Anchor } from "@storybook/addon-docs";
-import { Logo } from "./Logo";
-
-import logo from "../../assets/images/undp-logo-blue.svg";
-import logowhite from "../../assets/images/undp-logo-white.svg";
-import pnud from "../../assets/images/pnud-logo-blue.svg";
-import pnudwhite from "../../assets/images/pnud-logo-white.svg";
-
-
-
-# UNDP Logos
-
-The UNDP logo is a keystone element of the identity and is used to represent the entire organization.
-
-### Overview
-
-The UNDP logo is the combination, in one fixed-size relationship, of the United Nations emblem and the letters “UNDP/PNUD”. The UNDP logo is the keystone element of the identity program and should be used to represent the entire organization.
-
-When to use:
-
-- To promote business.
-- To create an identity for the organization.
-
-### Formatting
-
-#### Default
-
-There are only two versions of the UNDP logo: UNDP (English) and PNUD (French/Spanish). Within the design system, the logo is used in the header and footer components. The logo is available in blue or white.
-
-### Content
-
-A well-established and consistently presented identity is a very valuable asset. To protect and strengthen the trademark status of the logo, the approved versions must not be altered, modified, changed, or added to in any way.
-
-### Behaviors
-
-#### States
-
-The UNDP and PNUD logos are available in blue or white and used as per the page background.
-
-The following behavior modifiers are available:
-
-
-
-1. PNUD logo - Blue [Download](images/pnud-logo-blue.svg)
-
-This is the default PNUD logo and is used primarily in the header of every page as well as country sites.
-
-
-
-
-
-2. PNUD logo - White [Download](images/pnud-logo-white.svg)
-
-The PNUD white logo is primarily used in the footer of all pages as well as on a dark background.
-
-
-
-
-
-3. UNDP Logo - Blue [Download](images/undp-logo-blue.svg)
-
-This is the default logo and is used primarily in the header of every page as well as country sites.
-
-
-
-
-
-4. UNDP Logo - White [Download](images/undp-logo-white.svg)
-
-The UNDP white logo is primarily used in the footer of all pages as well as on a dark background.
-
-
-
-#### Interactions
-
-- By clicking on the logo, the website is redirected to the homepage.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.js b/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.js
new file mode 100644
index 000000000..82acf5ca8
--- /dev/null
+++ b/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.js
@@ -0,0 +1,185 @@
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ProgressBarNavigation } from './ProgressBarNavigation';
+
+export default {
+ title: 'Utilities/Progress bar navigation',
+ parameters: {
+ argTypes: {
+ Type: {
+ name: 'Type',
+ options: ['Large', 'Small'],
+ control: { type: 'inline-radio' },
+ },
+ Colors: {
+ name: 'Accent color',
+ options: ['global', 'yellow', 'red', 'green', 'blue'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ Colors: 'global',
+ Type: 'Large',
+ },
+ },
+};
+
+const Template = () => (
+ <>
+
Progress Bar
+
+
+ The Progress Bar is used to display an indicator showing the completion progress of a task, typically displayed as a progress bar.
+
+
+
When to use:
+
+
When a user page needs an indicator to be displayed on top of the page to show the length of scroll for a particular page.
+
+
+
Formatting
+
Default
+
+ Progress bar can be used as reading meter where scrolling progress of the page is captured in the bar. In this case additional javascript initialization is required as explained below.
+
+
+
+ It has different color variations, which increase the length of the color based on the amount of scrolling done by the user.
+
+
+);
+
+export const ProgressBarNavigationStory = () => ;
+ProgressBarNavigationStory.parameters = {
+ docs: {
+ source: {
+ code: `
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { ProgressBarNavigation } from "./ProgressBarNavigation";
+
+
+
+# Progress Bar
+
+The Progress Bar is used to display an indicator showing the completion progress of a task, typically displayed as a progress bar.
+
+#### When to use:
+
+- When a user page needs an indicator to be displayed on top of the page to show the length of scroll for a particular page.
+
+### Formatting
+
+#### Default
+
+Progress bar can be used as reading meter where scrolling progress of the page is captured in the bar. In this case additional javascript initialization is required as explained below.
+
+It has different color variations, which increase the length of the color based on the amount of scrolling done by the user.
+
+
+
+### Usage
+
+To use this component, follow these steps:
+
+- Copy the HTML from the canvas
+- Add it to your HTML page
+- Include the CSS and JS listed below
+- You should have loader-ready
+
+### CSS and JS References
+
+#### CSS:
+
+Add the base layout style from
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/progress-bar.min.css
+
+#### JS:
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/scrolling-progress-bar.min.js
+
+### Changelog
+
+1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.mdx b/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.mdx
deleted file mode 100644
index a73825259..000000000
--- a/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { ProgressBarNavigation } from "./ProgressBarNavigation";
-
-
-
-# Progress Bar
-
-The Progress Bar is used to display an indicator showing the completion progress of a task, typically displayed as a progress bar.
-
-#### When to use:
-
-- When a user page needs an indicator to be displayed on top of the page to show the length of scroll for a particular page.
-
-### Formatting
-
-#### Default
-
-Progress bar can be used as reading meter where scrolling progress of the page is captured in the bar. In this case additional javascript initialization is required as explained below.
-
-It has different color variations, which increase the length of the color based on the amount of scrolling done by the user.
-
-
-
-### Usage
-
-To use this component, follow these steps:
-
-- Copy the HTML from the canvas
-- Add it to your HTML page
-- Include the CSS and JS listed below
-- You should have loader-ready
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/progress-bar.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/scrolling-progress-bar.min.js
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Atom/Table/Table.stories.js b/stories/Atom/Table/Table.stories.js
new file mode 100644
index 000000000..c08e1b3cf
--- /dev/null
+++ b/stories/Atom/Table/Table.stories.js
@@ -0,0 +1,347 @@
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { TableTag } from './Table';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return {
+ headertext: 'Table header',
+ tdtext: 'Content Goes Here',
+ details:
+ 'In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate',
+ };
+ case 'ukrainian':
+ return {
+ headertext: 'Заголовок таблиці',
+ tdtext: 'вміст',
+ details: 'Програма ПРООН із підвищення стійкості та відновлення',
+ };
+ case 'arabic':
+ return {
+ headertext: 'رأس الجدول',
+ tdtext: 'المحتوى يذهب هنا',
+ details:
+ 'في النشر والتصميم الجرافيكي ، الدمية هي عنصر نائب يستخدم عادة للتوضيح',
+ };
+ case 'burmese':
+ return {
+ headertext: 'ဇယားခေါင်းစီး',
+ tdtext: 'အကြောင်းအရာကဒီမှာ',
+ details:
+ 'ထုတ်ဝေခြင်းနှင့် ဂရပ်ဖစ်ဒီဇိုင်းများတွင်၊ သည် သရုပ်ပြရန်အတွက် အသုံးများသော နေရာယူထားသော စာသားဖြစ်သည်။',
+ };
+ case 'japanese':
+ return {
+ headertext: 'テーブルヘッダー',
+ tdtext: 'コンテンツはここにあります',
+ details:
+ '出版やグラフィックデザインでは、ダミーはデモンストレーションに一般的に使用されるプレースホルダーテキストです',
+ };
+ default:
+ return {
+ headertext: 'Table header',
+ tdtext: 'Content Goes Here',
+ details:
+ 'In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate',
+ };
+ }
+};
+
+export default {
+ title: 'Foundation/Typography/Table',
+ component: TableTag,
+ parameters: {
+ argTypes: {
+ size: {
+ options: ['large', 'small'],
+ control: { type: 'inline-radio' },
+ },
+ variant: {
+ options: ['default', 'striped', 'border'],
+ control: { type: 'inline-radio' },
+ },
+ responsive: {
+ options: ['stacked', 'auto', 'scroll'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ size: 'large',
+ variant: 'default',
+ responsive: 'auto',
+ },
+ },
+};
+
+const Template = () => (
+ <>
+
Table
+
+
+ Tables are used to represent data sets that are easy to understand and access.
+
+
+
Overview
+
+ Tables are used for large volumes of data that can be accessed easily and understandable by the user. These tables are created using various modifiers like default, striped, bordered, small, stacked, scroll.
+
+
+
When to use:
+
+
These tables are used when there is huge data.
+
When there is a huge volume of data to handle. Using this the data can be accessed easily.
+
+
+
Formatting
+
+
Default
+
The table is large in size, variant default and responsive is auto
+
+
Behaviors
+
+
States
+
The tables are created using various modifiers:
+
+
+
+ Default: In this, there are 2 different states:
+
+
+ Large: In this state, the table size will be large, the variant is the default, and has auto responsive.
+
+
+ Small: In the state, the table size is small, the variant is the default, and has auto responsive.
+
+
+
+
+ Selected: In this, it has 2 different types of modifiers:
+
+
+ Striped: The table size can be larger, or small, the variant is striped and the responsiveness of the table is either stacked, auto or scroll.
+
+
+ Stripped with stacked table view: In this, the table has stripped rows with stacked views.
+
+
+ Stripped with scrolled table view: In this, the table has a stripped style of view with scrollable content. The table size can be large or small, the variant is the border. The responsiveness of the table is either stacked, auto or scroll.
+
+
+ Border with stacked table view: This table has a border and will be stacked.
+
+
+ Border with scroll table view: In this, the table has a border and will be scrollable.
+
+
+
+
+
+
+
+
Usage
+
+
Select the size control as either Large or Small, variant as Default, Stripped or Border and responsive control as Stacked, Auto or Scroll from the control tab of canvas.
+
Copy the HTML from the HTML tab and include the CSS mentioned below.
+
+);
+
+export const TableStory = () => ;
+
+TableStory.parameters = {
+ docs: {
+ source: {
+ code: `
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { TableTag } from "./Table";
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case "english":
+ return {
+ headertext: "Table header",
+ tdtext: "Content Goes Here",
+ details:
+ "In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate",
+ };
+ case "ukrainian":
+ return {
+ headertext: "Заголовок таблиці",
+ tdtext: "вміст",
+ details:
+ "Програма ПРООН із підвищення стійкості та відновлення",
+ };
+ case "arabic":
+ return {
+ headertext: "رأس الجدول",
+ tdtext: "المحتوى يذهب هنا",
+ details:
+ "في النشر والتصميم الجرافيكي ، الدمية هي عنصر نائب يستخدم عادة للتوضيح",
+ };
+ case "burmese":
+ return {
+ headertext: "ဇယားခေါင်းစီး",
+ tdtext: "အကြောင်းအရာကဒီမှာ",
+ details:
+ "ထုတ်ဝေခြင်းနှင့် ဂရပ်ဖစ်ဒီဇိုင်းများတွင်၊ သည် သရုပ်ပြရန်အတွက် အသုံးများသော နေရာယူထားသော စာသားဖြစ်သည်။",
+ };
+ case "japanese":
+ return {
+ headertext: "テーブルヘッダー",
+ tdtext: "コンテンツはここにあります",
+ details:
+ "出版やグラフィックデザインでは、ダミーはデモンストレーションに一般的に使用されるプレースホルダーテキストです",
+ };
+ default:
+ return {
+ headertext: "Table header",
+ tdtext: "Content Goes Here",
+ details:
+ "In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate",
+ };
+ }
+};
+
+
+
+# Table
+
+Tables are used to represent data sets that are easy to understand and access.
+
+### Overview
+
+Tables are used for large volumes of data that can be accessed easily and understandable by the user. These tables are created using various modifiers like default, striped, bordered, small, stacked, scroll.
+
+#### When to use:
+
+These tables are used when there is huge data. When there is a huge volume of data to handle. Using this the data can be accessed easily.
+
+### Formatting
+
+#### Default
+
+The table is large in size, variant default and responsive is auto
+
+### Behaviors
+
+#### States
+
+The tables are created using various modifiers:
+
+**Default**: In this, there are 2 different states:
+
+Large: In this state, the table size will be large, the variant is the default, and has auto responsive.
+Small: In the state, the table size is small, the variant is the default, and has auto responsive.
+
+**Selected**: In this, it has 2 different types of modifiers:
+
+Striped: The table size can be larger, or small, the variant is striped and the responsiveness of the table is either stacked, auto or scroll.
+
+Stripped with stacked table view: In this, the table has stripped rows with stacked views.
+
+Stripped with scrolled table view: In this, the table has a stripped style of view with scrollable content.
+
+The table size can be large or small, the variant is the border. The responsiveness of the table is either stacked, auto or scroll.
+
+- Border with stacked table view: This table has a border and will be stacked.
+- Border with scroll table view: In this, the table has a border and will be scrollable.
+
+
+
+### Usage
+
+- Select the size control as either Large or Small, variant as Default, Stripped or Border and responsive control as Stacked, Auto or Scroll from the control tab of canvas.
+- Copy the HTML from the HTML tab and include the CSS mentioned below.
+
+### CSS and JS References
+
+#### CSS:
+
+Add the base layout style from
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+
+#### JS:
+
+NA
+
+### Interactions
+
+No interactions are needed with the progress bar.
+
+### Changelog
+
+1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Atom/Table/Table.stories.mdx b/stories/Atom/Table/Table.stories.mdx
deleted file mode 100644
index 01d942e93..000000000
--- a/stories/Atom/Table/Table.stories.mdx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { TableTag } from "./Table";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- headertext: "Table header",
- tdtext: "Content Goes Here",
- details:
- "In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate",
- };
- return engText;
- case "ukrainian":
- return {
- headertext: "Заголовок таблиці",
- tdtext: "вміст",
- details:
- "Програма ПРООН із підвищення стійкості та відновлення",
- };
- case "arabic":
- const arabicText = {
- headertext: "رأس الجدول",
- tdtext: "المحتوى يذهب هنا",
- details:
- "في النشر والتصميم الجرافيكي ، الدمية هي عنصر نائب يستخدم عادة للتوضيح",
- };
- return arabicText;
- case "burmese":
- const burmeseText = {
- headertext: "ဇယားခေါင်းစီး",
- tdtext: "အကြောင်းအရာကဒီမှာ",
- details:
- "ထုတ်ဝေခြင်းနှင့် ဂရပ်ဖစ်ဒီဇိုင်းများတွင်၊ သည် သရုပ်ပြရန်အတွက် အသုံးများသော နေရာယူထားသော စာသားဖြစ်သည်။",
- };
- return burmeseText;
- case "japanese":
- const japaneseText = {
- headertext: "テーブルヘッダー",
- tdtext: "コンテンツはここにあります",
- details:
- "出版やグラフィックデザインでは、ダミーはデモンストレーションに一般的に使用されるプレースホルダーテキストです",
- };
- return japaneseText;
- default:
- return {
- headertext: "Table header",
- tdtext: "Content Goes Here",
- details:
- "In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate",
- };
- }
-};
-
-
-
-# Table
-
-Tables are used to represent data sets that are easy to understand and access.
-
-### Overview
-
-Tables are used for large volumes of data that can be accessed easily and understandable by the user. These tables are created using various modifiers like default, striped, bordered, small, stacked, scroll.
-
-#### When to use:
-
-These tables are used when there is huge data. When there is a huge volume of data to handle. Using this the data can be accessed easily.
-
-### Formatting
-
-#### Default
-
-The table is large in size, variant default and responsive is auto
-
-### Behaviors
-
-#### States
-
-The tables are created using various modifiers:
-
-**Default**: In this, there are 2 different states:
-
-Large: In this state, the table size will be large, the variant is the default, and has auto responsive.
-Small: In the state, the table size is small, the variant is the default, and has auto responsive.
-
-**Selected**: In this, it has 2 different types of modifiers:
-
-Striped: The table size can be larger, or small, the variant is striped and the responsiveness of the table is either stacked, auto or scroll.
-
-Stripped with stacked table view: In this, the table has stripped rows with stacked views.
-
-Stripped with scrolled table view: In this, the table has a stripped style of view with scrollable content.
-
-The table size can be large or small, the variant is the border. The responsiveness of the table is either stacked, auto or scroll.
-
-- Border with stacked table view: This table has a border and will be stacked.
-- Border with scroll table view: In this, the table has a border and will be scrollable.
-
-
-
-### Usage
-
-- Select the size control as either Large or Small, variant as Default, Stripped or Border and responsive control as Stacked, Auto or Scroll from the control tab of canvas.
-- Copy the HTML from the HTML tab and include the CSS mentioned below.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-
-#### JS:
-
-NA
-
-### Interactions
-
-No interactions are needed with the progress bar.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Atom/Typography/Heading/Heading.mdx b/stories/Atom/Typography/Heading/Heading.stories.js
similarity index 97%
rename from stories/Atom/Typography/Heading/Heading.mdx
rename to stories/Atom/Typography/Heading/Heading.stories.js
index ddde8b44a..acd71b82b 100644
--- a/stories/Atom/Typography/Heading/Heading.mdx
+++ b/stories/Atom/Typography/Heading/Heading.stories.js
@@ -1,5 +1,5 @@
import { Meta, Story } from '@storybook/addon-docs';
-import { Heading } from './Heading';
+import { Heading } from './Heading.mdx';
export const getCaptionForLocale = (locale) => {
switch(locale) {
diff --git a/stories/Atom/Typography/Links/Links.stories.js b/stories/Atom/Typography/Links/Links.stories.js
new file mode 100644
index 000000000..2f9b7d6f3
--- /dev/null
+++ b/stories/Atom/Typography/Links/Links.stories.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/addon-docs';
+import { Link } from './Links';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return { detail: 'Default link' };
+ case 'ukrainian':
+ return { detail: 'Посилання' };
+ case 'arabic':
+ return { detail: 'الارتباط الافتراضي' };
+ case 'burmese':
+ return { detail: 'မူရင်းလင့်ခ်' };
+ case 'japanese':
+ return { detail: 'デフォルトのリンク' };
+ default:
+ return { detail: 'Default link' };
+ }
+};
+
+export default {
+ title: 'Foundation/Typography/Links',
+ component: Link,
+ parameters: {
+ docs: {
+ title: 'Foundation/Typography/Links',
+ },
+ },
+};
+
+const Template = () => {
+ const locale = 'english'; // Set default locale here or via controls in Storybook
+ const caption = getCaptionForLocale(locale);
+
+ return (
+
+
Link
+
+
Overview
+
The Link component is used to attach links to the text component.
+
+
When to use:
+
Use the Link component to create hyperlinks.
+
+
Formatting
+
Default
+
The Link component displays a hyperlink with a red horizontal line below it.
+
+
Behaviors
+
States
+
The Link component has different states for Desktop & Laptop.
+
+
Desktop & Laptop
+
The font size of the Link is larger on Desktop and Laptop.
+
+
+ {(args) => }
+
+
+
Usage
+
Copy the HTML from the Canvas page to use the Link component.
Clicking on the link forwards the current page to the linked page.
+
+
Changelog
+
1.0 — Released component
+
+ );
+};
+
+export const Links = Template.bind({});
diff --git a/stories/Atom/Typography/Links/Links.stories.mdx b/stories/Atom/Typography/Links/Links.stories.mdx
deleted file mode 100644
index 127939b7f..000000000
--- a/stories/Atom/Typography/Links/Links.stories.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Link } from "./Links";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { detail: "Default link" };
- return engText;
- case "ukrainian":
- return {detail: "Посилання"};
- case "arabic":
- const arabicText = { detail: "الارتباط الافتراضي" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail: "မူရင်းလင့်ခ်" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail: "デフォルトのリンク" };
- return japaneseText;
- default:
- return { detail: "Default link" };
- }
-};
-
-
-
-# Link
-
-The Link component is used to attach links to the text component.
-
-### Overview
-
-The Link component defines a hyperlink that is used to link one page to another.
-
-#### When to use:
-
-When hyperlinks are to be attached.
-
-### Formatting
-
-#### Default
-
-The Link component consists of the link with a red horizontal line below it.
-
-### Behaviors
-
-#### States
-
-There are three states in the Link component: Desktop & Laptop. The component is compatible with tablets and mobile.
-
-Desktop & Laptop: The font size of the Link is biggest in Desktop and Laptop.
-
-
-
-### Usage
-
-- Copy the HTML from Canvas page
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-
-#### JS:
-
-NA
-
-### Interactions
-
-By clicking on the link, the current page is forwarded to the next page.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Atom/Typography/Lists/Lists.mdx b/stories/Atom/Typography/Lists/Lists.stories.js
similarity index 99%
rename from stories/Atom/Typography/Lists/Lists.mdx
rename to stories/Atom/Typography/Lists/Lists.stories.js
index 77053a17e..03dff5aee 100644
--- a/stories/Atom/Typography/Lists/Lists.mdx
+++ b/stories/Atom/Typography/Lists/Lists.stories.js
@@ -1,5 +1,5 @@
import { Meta, Story } from '@storybook/addon-docs';
-import { List } from './Lists';
+import { List } from './Lists.stories';
import { Descriptionlist } from './Descriptionlist';
export const getCaptionForLocale = (locale) => {
diff --git a/stories/Components/Forms/Checkbox/Checkbox.stories.js b/stories/Components/Forms/Checkbox/Checkbox.stories.js
new file mode 100644
index 000000000..a8065a6a6
--- /dev/null
+++ b/stories/Components/Forms/Checkbox/Checkbox.stories.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/addon-docs';
+import { Checkbox } from './Checkbox';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return { label: 'Category', value: 'category' };
+ case 'ukrainian':
+ return { label: 'Категорія', value: 'Категорія' };
+ case 'arabic':
+ return { label: 'فئة', value: 'فئة' };
+ case 'burmese':
+ return { label: 'အမျိုးအစား', value: 'အမျိုးအစား' };
+ case 'japanese':
+ return { label: 'カテゴリー', value: 'カテゴリー' };
+ default:
+ return { label: 'Category' };
+ }
+};
+
+export default {
+ title: 'Components/Forms/Checkbox',
+ component: Checkbox,
+ parameters: {
+ docs: {
+ title: 'Components/Forms/Checkbox',
+ },
+ },
+};
+
+const Template = () => {
+ const locale = 'english'; // Set default locale here or via controls in Storybook
+ const caption = getCaptionForLocale(locale);
+
+ return (
+
+
Checkbox
+
+
Overview
+
+ A checkbox or tick box is an interactive box that allows the user to
+ select one, none, or multiple options.
+
+
+
When to use:
+
Use a checkbox when the user needs to select or deselect multiple options.
+
+
Formatting
+
Default
+
+ The checkbox is a square-shaped selection box with white space or tick
+ which displays if options are selected or deselected. Independent
+ checkboxes are available beside each option.
+
+
+
Content
+
The checkbox is square-shaped. The color and the space inside the square indicates if the options are selected or not.
+
+
Behaviors
+
States
+
The checkbox has defaulted, checked, and hover states which indicates that an option is to be selected or has already been selected.
+
+
Default state
+
The Red-colored checkbox with white space indicates the default state where the user gets an option to select it.
+
+
Checked state
+
The Red-colored checkbox with a tick inside it indicates the checked state where the option has already been selected and can be deselected as well.
+
+
Hover state
+
The Light Red colored checkbox with white space indicates the hover state which changes appearance when the mouse hovers over it.
+
+
+ {(args) => (
+
+ )}
+
+
+
Usage
+
+
Copy the HTML from the HTML tab of canvas and include the css file mentioned below.
The checked state is applied to the entire button.
+
+
+
Changelog
+
1.0 — Released component
+
+ );
+};
+
+export const CheckboxComponent = Template.bind({});
diff --git a/stories/Components/Forms/Checkbox/Checkbox.stories.mdx b/stories/Components/Forms/Checkbox/Checkbox.stories.mdx
deleted file mode 100644
index 11ac9d1ea..000000000
--- a/stories/Components/Forms/Checkbox/Checkbox.stories.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Checkbox } from "./Checkbox";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { label: "Category", value: "category" };
- return engText;
- case "ukrainian":
- return {label: "Категорія", value: "Категорія"}
- case "arabic":
- const arabicText = { label: "فئة", value: "فئة" };
- return arabicText;
- case "burmese":
- const burmeseText = { label: "အမျိုးအစား", value: "အမျိုးအစား" };
- return burmeseText;
- case "japanese":
- const japaneseText = { label: "カテゴリー", value: "カテゴリー" };
- return japaneseText;
- default:
- return { label: "Category" };
- }
-};
-
-
-
-# Checkbox
-
-A checkbox or tick box is an interactive box that allows the user to select one, none, or multiple options.
-
-### Overview
-
-A checkbox is a type of indicator which allows the user to choose single or multiple options from the select box. Each checkbox is independent, which allows the user to select multiple options and the previously selected options do not get canceled.
-
-#### When to use:
-
-- When the user needs to select or deselect multiple options.
-
-### Formatting
-
-#### Default
-
-The checkbox is a square-shaped selection box with white space or tick which displays if options are selected or deselected. Independent checkboxes are available beside each option.
-
-### Content
-
-The checkbox is square-shaped. The color and the space inside the square indicates if the options are selected or not.
-
-### Behaviors
-
-#### States
-
-The checkbox has defaulted, checked, and hover states which indicates that an option is to be selected or has already been selected.
-
-The following behavior modifiers are available:
-
-#### Default state
-
-The Red-colored checkbox with white space indicates the default state where the user gets an option to select it.
-
-#### Checked state:
-
-The Red-colored checkbox with a tick inside it indicates the checked state where the option has already been selected and can be deselected as well.
-
-#### Hover state
-
-The Light Red colored checkbox with white space indicates the hover state which changes appearance when the mouse hovers over it.
-
-
-
-### Usage
-
-1. Copy the HTML from the HTML tab of canvas and include the css file mentioned below.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/checkbox.min.css
-
-#### JS:
-
-NA
-
-#### Interactions
-
-- The hover state is applied to the entire button.
-- The checked state is applied to the entire button.
-
-#### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.js b/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.js
new file mode 100644
index 000000000..e034ad72d
--- /dev/null
+++ b/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/addon-docs';
+import CustomSelect from './CustomSelect';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return 'Select Language';
+ case 'ukrainian':
+ return 'Оберіть мову';
+ case 'arabic':
+ return 'اختار اللغة';
+ case 'burmese':
+ return 'ဘာသာစကားကို ရွေးပါ။';
+ case 'japanese':
+ return '言語を選択する';
+ default:
+ return 'Category';
+ }
+};
+
+export default {
+ title: 'Components/Forms/Dropdown/Select',
+ component: CustomSelect,
+ parameters: {
+ docs: {
+ title: 'Components/Forms/Dropdown/Select',
+ },
+ },
+};
+
+const Template = () => {
+ const locale = 'english'; // Set default locale here or via controls in Storybook
+ const caption = getCaptionForLocale(locale);
+
+ return (
+
+
Custom Select
+
+
Overview
+
+ The custom select dropdown element allows users to choose a single option from a list. It is used in forms when there are single choices that can be collapsed under one title.
+
+
+
When to use:
+
Use the custom select dropdown when single or custom options are to be grouped under a single title.
+
+
Formatting
+
Default
+
It consists of a dropdown with an arrow from which the user can select any one option.
+
+
Content
+
In the custom dropdown select, only one option can be selected.
+
The direction of the arrow indicates if one option is selected. The downward arrow indicates a closed box and the upward arrow indicates an open box.
+
+
Behaviors
+
States
+
+
Closed and Auto Height
+
Closed and Fixed Height
+
Open and Auto Height
+
Open and Fixed Height
+
+
+
Canvas
+
+ {(args) => }
+
+
+
Usage
+
+
Copy the HTML from the HTML tab of Canvas.
+
Include the CSS and JS files listed below.
+
Initialize the select by calling `select()` function.
+
If you need a fixed height dropdown then apply Height to the "ul" tag of dropdown. It will scroll inside the dropdown.
By clicking on the arrow, the custom select dropdown box can be opened or closed.
+
By clicking on the option/options, those can be selected.
+
+
+
Changelog
+
1.0 — Released component
+
+ );
+};
+
+export const CustomSelectComponent = Template.bind({});
diff --git a/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.mdx b/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.mdx
deleted file mode 100644
index c5b4a5456..000000000
--- a/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import CustomSelect from "./CustomSelect";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = "Select Language";
- return engText;
- case "ukrainian":
- return "Оберіть мову"
- case "arabic":
- const arabicText = "اختار اللغة";
- return arabicText;
- case "burmese":
- const burmeseText = "ဘာသာစကားကို ရွေးပါ။";
- return burmeseText;
- case "japanese":
- const japaneseText = "言語を選択する";
- return japaneseText;
- default:
- return "Category";
- }
-};
-
-
-
-# Custom Select
-
-The custom select dropdown allows the user to select one.
-
-### Overview
-
-The custom select dropdown element allows users to choose a single option from a list. It is used in forms when there are single choices that can be collapsed under one title.
-
-### When to use:
-
-- When single or custom options are to be grouped under a single title.
-
-### Formatting
-
-#### Default
-
-It consists of a dropdown with an arrow from which the user can select any one option.
-
-### Content
-
-In the custom dropdown select, only one option can be selected.
-
-The direction of the arrow indicates if one option is selected. The downward arrow indicates a closed box and the upward arrow indicates an open box.
-
-### Behaviors
-
-#### States
-
-The Dropdown boxes are either opened or closed.
-The Custom dropdown boxes either have auto or fixed height.
-
-- Closed and Auto Height:
-- Closed and Fixed Height:
-- Open and Auto Height:
-- Open and Fixed Height:
-
-
-
-### Usage:
-
-Copy the HTML from the HTML tab of Canvas.
-Include the css and js files listed below.
-Initialize the select by calling select() function.
-If you need a fixed height dropdown then apply Height to the "ul" tag of dropdown. It will scroll inside the dropdown.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/custom-select.min.css
-
-#### JS:
-
-1. https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/select.min.js
-
-### Interactions
-
-- By clicking on the arrow, the custom select dropdown box can be opened or closed.
-- By clicking on the option/options, those can be selected.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.js b/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.js
new file mode 100644
index 000000000..cf09d302e
--- /dev/null
+++ b/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.js
@@ -0,0 +1,166 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/addon-docs';
+import MultiSelect from './MultiSelect';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return 'Category';
+ case 'ukrainian':
+ return 'Категорія';
+ case 'arabic':
+ return 'فئة';
+ case 'burmese':
+ return 'အမျိုးအစား';
+ case 'japanese':
+ return 'カテゴリー';
+ default:
+ return 'Category';
+ }
+};
+
+export default {
+ title: 'Components/Forms/Dropdown/MultiSelect',
+ component: MultiSelect,
+ parameters: {
+ docs: {
+ title: 'Components/Forms/Dropdown/MultiSelect',
+ description: `
+ The multiselect dropdown allows the user to multiple options from the list.
+
+ ### Overview
+
+ The multiselect component allows users to choose multiple options from a list. It is used in forms when there are multiple choices that can be collapsed under one title.
+
+ #### When to use:
+
+ - When multiselect options are to be grouped under a single title.
+
+ ### Formatting
+
+ #### Default
+
+ It consists of a dropdown with an arrow from which the user can select multiple options.
+
+ ### Content
+
+ In the multiselect dropdown, multiple options can be selected.
+
+ The direction of the arrow indicates if multiple options are selected. The downward arrow indicates a closed box and upward arrow indicates open box.
+
+ ### Behaviors
+
+ #### States
+
+ A multi-select box in an open state can adjust its height to the content (default behavior) or use preset max height by applying a .fix-height class to the unordered list container.
+
+ #### Closed:
+
+ #### Open:
+
+ - The sidebar component with a red colored box and empty space in the default state indicates that the option is not selected.
+ - The sidebar component with a red colored box and empty space in the hover state indicates that the option is not selected and it changes appearance once the mouse hovers over it.
+ - The sidebar component with a red colored box and red tick in the default state indicate that the option is selected.
+ - The sidebar component with a red colored box and red tick in the hover state indicate that the option is selected and it changes appearance once the mouse hovers over it.
+ - The sidebar component with the download icon in the default state indicates that the option can be downloaded.
+ - The sidebar component with the download icon in the hover state indicates that the option can be downloaded and it changes appearance once the mouse hovers over it.
+ - The sidebar component with an external link icon in the default state indicates that the option contains an external link related to the search.
+ - The sidebar component with external link icon in hover state indicates that the options contains an external link related to the search and it changes appearance once the mouse hovers over it.
+ `,
+ },
+ },
+ argTypes: {
+ Height: {
+ options: ['Fix height', 'Auto height'],
+ control: { type: 'radio' },
+ },
+ variant: {
+ options: ['Radio', 'Checkbox'],
+ control: { type: 'radio' },
+ },
+ },
+ args: {
+ Height: 'Auto height',
+ variant: 'Checkbox',
+ },
+};
+
+const Template = (args) => {
+ const locale = 'english'; // Set default locale here or via controls in Storybook
+ const caption = getCaptionForLocale(locale);
+
+ return (
+
+
MultiSelect
+
+
Overview
+
+ The multiselect dropdown allows the user to select multiple options from the list.
+
+
+
When to use:
+
Use the multiselect dropdown when multiple options are to be grouped under a single title.
+
+
Formatting
+
Default
+
It consists of a dropdown with an arrow from which the user can select multiple options.
+
+
Content
+
In the multiselect dropdown, multiple options can be selected.
+
The direction of the arrow indicates if multiple options are selected. The downward arrow indicates a closed box and upward arrow indicates an open box.
+
+
Behaviors
+
States
+
A multi-select box in an open state can adjust its height to the content (default behavior) or use preset max height by applying a .fix-height class to the unordered list container.
Select the variant either Checkbox or Radio button and height option for dropdown which has Fixed Height or Auto Height from the control tab on canvas.
+
Then grab the HTML from the HTML tab and include the below listed css and js files.
+
If you choose Checkbox variant then include checkbox.min.css.
+
If you choose Radio button variant then include radio.min.css.
+
Initialize the multi-select by calling multiSelect() function.
By clicking on the arrow, the drop-down box can be opened or closed.
+
By clicking on the option/options, those can be selected.
+
+
+
Changelog
+
1.0 — Released component
+
+ );
+};
+
+export const MultiSelectComponent = Template.bind({});
+MultiSelectComponent.args = {
+ Height: 'Auto height',
+ variant: 'Checkbox',
+};
diff --git a/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.mdx b/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.mdx
deleted file mode 100644
index b8b078110..000000000
--- a/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import MultiSelect from "./MultiSelect";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = "Category";
- return engText;
- case "ukrainian":
- return "Категорія";
- case "arabic":
- const arabicText = "فئة";
- return arabicText;
- case "burmese":
- const burmeseText = "အမျိုးအစား";
- return burmeseText;
- case "japanese":
- const japaneseText = "カテゴリー";
- return japaneseText;
- default:
- return "Category";
- }
-};
-
-
-
-# MultiSelect
-
-The multiselect dropdown allows the user to multiple options from the list.
-
-### Overview
-
-The multiselect component allows users to choose multiple options from a list. It is used in forms when there are multiple choices that can be collapsed under one title.
-
-When to use:
-
-- When multiselect options are to be grouped under a single title.
-
-Formatting
-
-#### Default
-
-It consists of a dropdown with an arrow from which the user can select multiple options.
-
-### Content
-
-In the multiselect dropdown, multiple options can be selected.
-
-The direction of the arrow indicates if multiple options are selected. The downward arrow indicates a closed box and upward arrow indicates open box.
-
-### Behaviors
-
-#### States
-
-A multi-select box in an open state can adjust its height to the content (default behavior) or use preset max height by applying a .fix-height class to the unordered list container.
-
-#### Closed:
-
-#### Open:
-
-- The sidebar component with a red colored box and empty space in the default state indicates that the option is not selected.
-- The sidebar component with a red colored box and empty space in the hover state indicates that the option is not selected and it changes appearance once the mouse hovers over it.
-- The sidebar component with a red colored box and red tick in the default state indicate that the option is selected.
-- The sidebar component with a red colored box and red tick in the hover state indicate that the option is selected and it changes appearance once the mouse hovers over it.
-- The sidebar component with the download icon in the default state indicates that the option can be downloaded.
-- The sidebar component with the download icon in the hover state indicates that the option can be downloaded and it changes appearance once the mouse hovers over it.
-- The sidebar component with an external link icon in the default state indicates that the option contains an external link related to the search.
-- The sidebar component with external link icon in hover state indicates that the options contains an external link related to the search and it changes appearance once the mouse hovers over it.
-
-
-
-### Usage:
-
-1. Select the variant either Checkbox or Radio button and height option for dropdown which has Fixed Height or Auto Height from the control tab on canvas.
-2. Then grab the HTML from the HTML tab and include the below listed css and js files.
-3. If you choose Checkbox variant then include checkbox.min.css
-4. If you choose Radio button variant then include radio.min.css
-5. Initialize the multi-select by calling multiSelect() function.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/multi-select.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/checkbox.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/radio.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/multi-select.min.js
-
-### Interactions
-
-- By clicking on the arrow, the drop-down box can be opened or closed.
-- By clicking on the option/options, those can be selected.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Forms/InputFields/InputFields.stories.js b/stories/Components/Forms/InputFields/InputFields.stories.js
new file mode 100644
index 000000000..f3732444e
--- /dev/null
+++ b/stories/Components/Forms/InputFields/InputFields.stories.js
@@ -0,0 +1,345 @@
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Inputcomponent } from './InputFields';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return {
+ detail1: 'Form Label:',
+ detail2: '*Error: this field is required',
+ detail3: 'Search',
+ detail4: 'Enter search term',
+ detail5: 'Number of projects',
+ detail6: 'Create password',
+ detail7: 'Password',
+ detail8: '8 characters minimum',
+ detail9: 'Phone number',
+ detail10: 'Brief description',
+ text: 'Date label',
+ text2: 'Enter text',
+ text3: 'Placeholder',
+ };
+ case 'ukrainian':
+ return {
+ detail1: 'Введіть текст:',
+ detail2: "*Помилка: це поле обов'язкове",
+ detail3: 'Пошук',
+ detail4: 'Введіть пошуковий термін',
+ detail5: 'Кількість проектів',
+ detail6: 'Створити пароль',
+ detail7: 'Пароль',
+ detail8: 'Мінімум 8 символів',
+ detail9: 'Номер телефону',
+ detail10: 'Короткий опис',
+ text: 'Дата',
+ text2: 'Введіть текст',
+ text3: '',
+ };
+ case 'arabic':
+ return {
+ detail1: 'تسمية النموذج:',
+ detail2: '* خطأ: هذا الحقل مطلوب',
+ detail3: 'بحث',
+ detail4: 'أدخل مصطلح البحث',
+ detail5: 'عدد المشاريع',
+ detail6: 'أنشئ كلمة مرور',
+ detail7: 'كلمه السر',
+ detail8: '8 أحرف كحد أدنى',
+ detail9: 'رقم الهاتف',
+ detail10: 'وصف مختصر',
+ text: 'تسمية التاريخ',
+ text2: 'أدخل النص',
+ text3: 'نائب',
+ };
+ case 'burmese':
+ return {
+ detail1: 'ပုံစံတံဆိပ်:',
+ detail2: '*အမှား - ဤအကွက်လိုအပ်သည်',
+ detail3: 'ရှာဖွေပါ',
+ detail4: 'ရှာဖွေရေးစာလုံးရိုက်ထည့်ပါ',
+ detail5: 'စီမံကိန်းအရေအတွက်',
+ detail6: 'စကားဝှက်ဖန်တီးပါ',
+ detail7: 'စကားဝှက်',
+ detail8: 'အနည်းဆုံးစာလုံး ၈ လုံး',
+ detail9: 'ဖုန်းနံပါတ်',
+ detail10: 'အကျဉ်းချုပ်ဖော်ပြချက်',
+ text: 'ရက်စွဲတံဆိပ်',
+ text2: 'စာသားရိုက်ထည့်ပါ',
+ text3: 'နေရာယူသည်',
+ };
+ case 'japanese':
+ return {
+ detail1: 'フォームラベル：',
+ detail2: '*エラー：このフィールドは必須です',
+ detail3: '検索',
+ detail4: '検索語を入力してください',
+ detail5: 'プロジェクト数',
+ detail6: 'パスワードを作成する',
+ detail7: 'パスワード',
+ detail8: '最小8文字',
+ detail9: '電話番号',
+ detail10: '簡単な説明',
+ text: '日付ラベル',
+ text2: 'テキストを入力してください',
+ text3: 'プレースホルダー',
+ };
+ default:
+ return {
+ detail1: 'Form Label:',
+ detail2: '*Error: this field is required',
+ detail3: 'Search',
+ detail4: 'Enter search term',
+ detail5: 'Number of projects',
+ detail6: 'Create password',
+ detail7: 'Password',
+ detail8: '8 characters minimum',
+ detail9: 'Phone number',
+ detail10: 'Brief description',
+ text: 'Date label',
+ text2: 'Enter text',
+ text3: 'Placeholder',
+ };
+ }
+};
+
+export default {
+ title: 'Components/Forms/Input fields',
+ parameters: {
+ docs: {
+ title: 'Components/Forms/Input fields',
+ description: `
+ The Input Field is used when the user is required to fill in the information.
+
+ ### Overview
+
+ The input HTML element is used to create interactive controls for web-based forms in order to accept data from the user. A variety of input types and states are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
+
+ #### When to use:
+
+ - When the user needs to fill in data.
+
+ ### Formatting
+
+ #### Default
+
+ The Input Field consists of various fields of rectangular boxes used to fill information. There is a Base Input where the user needs to fill data, a Label that describes the input box, Help Text which is a sub-heading to the input box but doesn’t appear in the field area, and an Error message which pops up if an error has occurred.
+
+ 1. Base Input:
+ 2. Label:
+ 3. Help Text:
+ 4. Error message:
+
+ The Input Fields are:
+
+ 1. Text: Input elements of type text create basic single-line text fields.
+ 2. Search: Input elements of type search are text fields designed for the user to enter search queries into.
+ 3. Number: Input elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.
+ 4. Date: Input elements of type date create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
+ 5. Phone: Input elements of type tel are used to let the user enter and edit a telephone number.
+ 6. Password: Input elements of type password provide a way for the user to enter a password.
+ 7. Textarea: The Textarea HTML element requires a multi-line plain-text editing control useful when you want to allow users to enter a sizable amount of free-form text, for example, a comment on a review or feedback form.
+
+ ### Behaviors
+
+ States
+ The Input Field has four states: Default, Focus. Error and Disabled.
+ `,
+ },
+ },
+ argTypes: {
+ State: {
+ options: ['Default', 'Focus', 'Error', 'Disabled'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ State: 'Default',
+ },
+};
+
+const Template = (args) => {
+ const locale = 'english'; // Set default locale here or via controls in Storybook
+ const caption = getCaptionForLocale(locale);
+
+ return (
+
+
Input Fields
+
+
Overview
+
The Input Field is used when the user is required to fill in the information.
+
+
When to use:
+
Use the Input Field when the user needs to fill in data.
+
+
Formatting
+
Default
+
+ The Input Field consists of various fields of rectangular boxes used to fill information.
+ There is a Base Input where the user needs to fill data, a Label that describes the input
+ box, Help Text which is a sub-heading to the input box but doesn’t appear in the field area,
+ and an Error message which pops up if an error has occurred.
+
+
+
+
Base Input:
+
Label:
+
Help Text:
+
Error message:
+
+
+
The Input Fields are:
+
+
Text: Input elements of type text create basic single-line text fields.
+
+ Search: Input elements of type search are text fields designed for the user to enter
+ search queries into.
+
+
+ Number: Input elements of type number are used to let the user enter a number. They include
+ built-in validation to reject non-numerical entries.
+
+
+ Date: Input elements of type date create input fields that let the user enter a date, either
+ with a textbox that validates the input or a special date picker interface.
+
+
+ Phone: Input elements of type tel are used to let the user enter and edit a telephone number.
+
+
+ Password: Input elements of type password provide a way for the user to enter a password.
+
+
+ Textarea: The Textarea HTML element requires a multi-line plain-text editing control useful
+ when you want to allow users to enter a sizable amount of free-form text, for example, a
+ comment on a review or feedback form.
+
+
+
+
Behaviors
+
States: The Input Field has four states: Default, Focus, Error, and Disabled.
+
+
+
+
+
+
+
+
+
+
+
+
Usage
+
+
+ Choose the state Default, Focus, Error, and Disabled from the control tab of the canvas.
+
+
+ Copy the HTML from the HTML tab and also include the below-mentioned CSS listed below.
+
By clicking on the box, the user can fill in the information.
+
+
+
Changelog
+
1.0 — Released component
+
+ );
+};
+
+export const InputFields = Template.bind({});
+InputFields.args = {
+ State: 'Default',
+};
diff --git a/stories/Components/Forms/InputFields/InputFields.stories.mdx b/stories/Components/Forms/InputFields/InputFields.stories.mdx
deleted file mode 100644
index fd5a48a4a..000000000
--- a/stories/Components/Forms/InputFields/InputFields.stories.mdx
+++ /dev/null
@@ -1,284 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Inputcomponent } from "./InputFields";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- detail1: "Form Label:",
- detail2: "*Error: this field is required",
- detail3: "Search",
- detail4: "Enter search term",
- detail5: "Number of projects",
- detail6: "Create password",
- detail7: "Password",
- detail8: "8 characters minimum",
- detail9: "Phone number",
- detail10: "Brief description",
- text: "Date label",
- text2: "Enter text",
- text3: "Placeholder",
- };
- return engText;
- case "ukrainian":
- const ukText = {
- detail1: "Введіть текст:",
- detail2: "*Помилка: це поле обов'язкове",
- detail3: "Пошук",
- detail4: "Введіть пошуковий термін",
- detail5: "Кількість проектів",
- detail6: "Створити пароль",
- detail7: "Пароль",
- detail8: "Мінімум 8 символів",
- detail9: "Номер телефону",
- detail10: "Короткий опис",
- text: "Дата",
- text2: "Введіть текст",
- text3: "",
- };
- return ukText;
- case "arabic":
- const arabicText = {
- detail1: "تسمية النموذج:",
- detail2: "* خطأ: هذا الحقل مطلوب",
- detail3: "بحث",
- detail4: "أدخل مصطلح البحث",
- detail5: "عدد المشاريع",
- detail6: "أنشئ كلمة مرور",
- detail7: "كلمه السر",
- detail8: "8 أحرف كحد أدنى",
- detail9: "رقم الهاتف",
- detail10: "وصف مختصر",
- text: "تسمية التاريخ",
- text2: "أدخل النص",
- text3: "نائب",
- };
- return arabicText;
- case "burmese":
- const burmeseText = {
- detail1: "ပုံစံတံဆိပ်:",
- detail2: "*အမှား - ဤအကွက်လိုအပ်သည်",
- detail3: "ရှာဖွေပါ",
- detail4: "ရှာဖွေရေးစာလုံးရိုက်ထည့်ပါ",
- detail5: "စီမံကိန်းအရေအတွက်",
- detail6: "စကားဝှက်ဖန်တီးပါ",
- detail7: "စကားဝှက်",
- detail8: "အနည်းဆုံးစာလုံး ၈ လုံး",
- detail9: "ဖုန်းနံပါတ်",
- detail10: "အကျဉ်းချုပ်ဖော်ပြချက်",
- text: "ရက်စွဲတံဆိပ်",
- text2: "စာသားရိုက်ထည့်ပါ",
- text3: "နေရာယူသည်",
- };
- return burmeseText;
- case "japanese":
- const japaneseText = {
- detail1: "フォームラベル：",
- detail2: "*エラー：このフィールドは必須です",
- detail3: "検索",
- detail4: "検索語を入力してください",
- detail5: "プロジェクト数",
- detail6: "パスワードを作成する",
- detail7: "パスワード",
- detail8: "最小8文字",
- detail9: "電話番号",
- detail10: "簡単な説明",
- text: "日付ラベル",
- text2: "テキストを入力してください",
- text3: "プレースホルダー",
- };
- return japaneseText;
- default:
- return {
- detail1: "Form Label:",
- detail2: "*Error: this field is required",
- detail3: "Search",
- detail4: "Enter search term",
- detail5: "Number of projects",
- detail6: "Create password",
- detail7: "Password",
- detail8: "8 characters minimum",
- detail9: "Phone number",
- detail10: "Brief description",
- text: "Date label",
- text2: "Enter text",
- text3: "Placeholder",
- };
- }
-};
-
-
-
-# Input Fields
-
-The Input Field is used when the user is required to fill in the information.
-
-### Overview
-
-The input HTML element is used to create interactive controls for web-based forms in order to accept data from the user. A variety of input types and states are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
-
-When to use:
-
-- When the user needs to fill in data.
-
-### Formatting
-
-#### Default
-
-The Input Field consists of various fields of rectangular boxes used to fill information. There is a Base Input where the user needs to fill data, a Label that describes the input box, Help Text which is a sub-heading to the input box but doesn’t appear in the field area, and an Error message which pops up if an error has occurred.
-
-1. Base Input:
-2. Label:
-3. Help Text:
-4. Error message:
-
-The Input Fields are:
-
-1. Text: Input elements of type text create basic single-line text fields.
-2. Search: Input elements of type search are text fields designed for the user to enter search queries into.
-3. Number: Input elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.
-4. Date: Input elements of type date create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
-5. Phone: Input elements of type tel are used to let the user enter and edit a telephone number.
-6. Password: Input elements of type password provide a way for the user to enter a password.
-7. Textarea: The Textarea HTML element requires a multi-line plain-text editing control useful when you want to allow users to enter a sizable amount of free-form text, for example, a comment on a review or feedback form.
-
-### Behaviors
-
-States
-The Input Field has four states: Default, Focus. Error and Disabled.
-
-
-
-
-
-
-
-
-
-
-
-### Usage
-
-1. Choose the state Default, Focus, Error, and Disabled from the control tab of the canvas.
-2. Copy the HTML from the HTML tab and also include the below-mentioned CSS listed below.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/input-fields.min.css
-
-#### JS:
-
-NA
-
-### Interactions
-
-- By clicking on the box, the user can fill in the information.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Forms/Radio/Radio.stories.js b/stories/Components/Forms/Radio/Radio.stories.js
new file mode 100644
index 000000000..c9ef9a3c4
--- /dev/null
+++ b/stories/Components/Forms/Radio/Radio.stories.js
@@ -0,0 +1,131 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Radio } from './Radio';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ const engText = { label: 'Category' };
+ return engText;
+ case 'ukrainian':
+ return { label: 'Категорія', value: 'Категорія' };
+ case 'arabic':
+ const arabicText = { label: 'فئة' };
+ return arabicText;
+ case 'burmese':
+ const burmeseText = { label: 'အမျိုးအစား' };
+ return burmeseText;
+ case 'japanese':
+ const japaneseText = { label: 'カテゴリー' };
+ return japaneseText;
+ default:
+ return { label: 'Category' };
+ }
+};
+
+export const parameters = {
+ title: 'Components/Forms/Radio',
+};
+
+export const RadioComponent = () => (
+ <>
+
+
+
Radio button
+
+
+ A radio button is a utility that allows the user to select a single option from a set of options
+ by clicking on the button.
+
+
+
Overview
+
+
+ A radio button is a type of indicator that informs the user to choose a single option among the
+ available set of options. If a radio button is selected and the user clicks on another radio
+ button, then the previous one gets deselected.
+
+
+
When to use:
+
+
- When the user needs to select a single option.
+
+
Formatting
+
+
Default
+
+
The radio button is a circular button and it is displayed beside each option that can be selected.
+
+
Content
+
+
The radio button is circular shaped. The color and the space inside the circle indicate if the option is selected or not.
+
+
Behaviors
+
+
States
+
+
+ The radio button has defaulted, active, and hovers states which indicates that an option is to be
+ selected or already selected.
+
+
+
The following behavior modifiers are available:
+
+
+
+ Default state:
+ A Red circular button with white space indicates the default state where a user can select an option.
+
+
+ Active state:
+ A Red circular button with a dot indicates the active state in which an option is already selected by the user.
+
+
+ Hover state:
+ A Light Red circular button with white space indicates the hover state which changes appearance when the mouse hovers over it.
+
+
+
+
+
+
Usage
+
+
+
Copy the HTML from the HTML tab of canvas and include the css file mentioned below.
+
+);
+
+export default {
+ title: 'Components/Forms/Radio',
+};
diff --git a/stories/Components/Forms/Radio/Radio.stories.mdx b/stories/Components/Forms/Radio/Radio.stories.mdx
deleted file mode 100644
index 61926271b..000000000
--- a/stories/Components/Forms/Radio/Radio.stories.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Radio } from "./Radio";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { label: "Category" };
- return engText;
- case "ukrainian":
- return {label: "Категорія", value: "Категорія"}
- case "arabic":
- const arabicText = { label: "فئة" };
- return arabicText;
- case "burmese":
- const burmeseText = { label: "အမျိုးအစား" };
- return burmeseText;
- case "japanese":
- const japaneseText = { label: "カテゴリー" };
- return japaneseText;
- default:
- return { label: "Category" };
- }
-};
-
-
-
-# Radio button
-
-A radio button is a utility that allows the user to select a single option from a set of options by clicking on the button.
-
-### Overview
-
-A radio button is a type of indicator that informs the user to choose a single option among the available set of options. If a radio button is selected and the user clicks on another radio button, then the previous one gets deselected.
-
-When to use:
-
-- When the user needs to select a single option.
-
-### Formatting
-
-#### Default
-
-The radio button is a circular button and it is displayed beside each option that can be selected.
-
-### Content
-
-The radio button is circular shaped. The color and the space inside the circle indicate if the option is selected or not.
-
-### Behaviors
-
-#### States
-
-The radio button has defaulted, active, and hovers states which indicates that an option is to be selected or already selected.
-
-The following behavior modifiers are available:
-
-1. Default state:
- A Red circular button with white space indicates the default state where a user can select an option.
-
-2. Active state:
- A Red circular button with a dot indicates the active state in which an option is already selected by the user.
-
-3. Hover state:
- A Light Red circular button with white space indicates the hover state which changes appearance when the mouse hovers over it.
-
-
-
-### Usage
-
-1. Copy the HTML from the HTML tab of canvas and include the css file mentioned below.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/radio.min.css
-
-#### JS:
-
-NA
-
-### Interactions
-
-- The hover state is applied to the entire button.
-- The active state is applied to the entire button.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Forms/SearchExpand/SearchExpand.stories.js b/stories/Components/Forms/SearchExpand/SearchExpand.stories.js
new file mode 100644
index 000000000..4b056a893
--- /dev/null
+++ b/stories/Components/Forms/SearchExpand/SearchExpand.stories.js
@@ -0,0 +1,100 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { SearchExpand } from './SearchExpand';
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return { label: 'Category', value: 'category' };
+ case 'ukrainian':
+ return { label: 'Категорія', value: 'Категорія' };
+ case 'arabic':
+ return { label: 'فئة', value: 'فئة' };
+ case 'burmese':
+ return { label: 'အမျိုးအစား', value: 'အမျိုးအစား' };
+ case 'japanese':
+ return { label: 'カテゴリー', value: 'カテゴリー' };
+ default:
+ return { label: 'Category' };
+ }
+};
+
+export const parameters = {
+ title: 'Components/Forms/Search expand',
+};
+
+export const SearchExpandComponent = () => (
+ <>
+
+
+
Search expand
+
+
input will increase on search click
+
+
Overview
+
+
+ On Search icon click input elements of type text will increase and clickable to type. On type the text a close button on right side will show. On close icon click typed data will erase form input.
+
+
+
When to use:
+
+
When the user needs to search.
+
+
Behaviors
+
+
States
+
+
+ The radio button has defaulted, active, and hovers states which indicates that an option is to be selected or already selected.
+
+
+
The following behavior modifiers are available:
+
+
+
+ Default state:
+ The search icon is displayed that can be selected.
+
+
+ Text on input state:
+ A close icon along with search icon and input field.
+
+
+
+
+
+
Usage
+
+
Copy the HTML from the HTML tab of canvas and include the Js and css files mentioned below.
+
+);
+
+export default {
+ title: 'Components/Forms/Search expand',
+};
diff --git a/stories/Components/Forms/SearchExpand/SearchExpand.stories.mdx b/stories/Components/Forms/SearchExpand/SearchExpand.stories.mdx
deleted file mode 100644
index 5189734e8..000000000
--- a/stories/Components/Forms/SearchExpand/SearchExpand.stories.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { SearchExpand } from "./SearchExpand";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { label: "Category", value: "category" };
- return engText;
- case "ukrainian":
- return {label: "Категорія", value: "Категорія"}
- case "arabic":
- const arabicText = { label: "فئة", value: "فئة" };
- return arabicText;
- case "burmese":
- const burmeseText = { label: "အမျိုးအစား", value: "အမျိုးအစား" };
- return burmeseText;
- case "japanese":
- const japaneseText = { label: "カテゴリー", value: "カテゴリー" };
- return japaneseText;
- default:
- return { label: "Category" };
- }
-};
-
-
-
-# Search expand
-
-input will increase on search click
-
-### Overview
-
-On Search icon click input elements of type text will increase and clickable to type. On type the text a close button on right side will show. On close icon click typed data will erase form input.
-
-#### When to use:
-
-When the user needs to search.
-
-### Behaviors
-
-#### States
-
-The radio button has defaulted, active, and hovers states which indicates that an option is to be selected or already selected.
-
-The following behavior modifiers are available:
-
-1. Default state:
- The search icon is displayed that can be selected.
-
-2. Text on input state:
- A close icon along with search icon and input field.
-
-
-
-### Usage
-
-Copy the HTML from the HTML tab of canvas and include the Js and css files mentioned below.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/search-expand.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/expand-search.min.js
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Forms/TextPanel/TextPanel.stories.mdx b/stories/Components/Forms/TextPanel/TextPanel.stories.js
similarity index 60%
rename from stories/Components/Forms/TextPanel/TextPanel.stories.mdx
rename to stories/Components/Forms/TextPanel/TextPanel.stories.js
index 54ab451c3..84bb6e721 100644
--- a/stories/Components/Forms/TextPanel/TextPanel.stories.mdx
+++ b/stories/Components/Forms/TextPanel/TextPanel.stories.js
@@ -4,7 +4,7 @@ import { FormTypes } from "./TextPanel";
export const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
- const engText = {
+ return {
labelname: "Sign up for our newsletter",
buttonname: "SUBMIT",
firstname: "First Name",
@@ -16,9 +16,8 @@ export const getCaptionForLocale = (locale) => {
heading2: "Stay connected to our work.",
para: "Enter your email address to get inspiring stories straight to your inbox.",
};
- return engText;
case "ukrainian":
- const ukText = {
+ return {
labelname: "Підпишіться на наші новини",
buttonname: "НАДІСЛАТИ",
firstname: "Ім'я",
@@ -30,9 +29,8 @@ export const getCaptionForLocale = (locale) => {
heading2: "Залишайтеся на зв'язку з нашою роботою.",
para: "Введіть свою адресу електронної пошти, щоб наші історії надходили прямо до вашої поштової скриньки.",
};
- return ukText;
case "arabic":
- const arabicText = {
+ return {
labelname: "سجل للحصول على اخر اخبارنا",
buttonname: "يقدم",
placeholdername: "اسم",
@@ -44,9 +42,8 @@ export const getCaptionForLocale = (locale) => {
heading2: "ابق على اتصال بعملنا.",
para: "أدخل عنوان بريدك الإلكتروني للحصول على قصص ملهمة مباشرة إلى صندوق الوارد الخاص بك.",
};
- return arabicText;
case "burmese":
- const burmeseText = {
+ return {
labelname: "ကျွန်ုပ်တို့၏သတင်းလွှာအတွက်စာရင်းပေးသွင်းပါ",
buttonname: "တင်ပေးပါ",
firstname: "နာမည်",
@@ -58,9 +55,8 @@ export const getCaptionForLocale = (locale) => {
heading2: "ကျွန်ုပ်တို့၏အလုပ်နှင့် ချိတ်ဆက်နေပါ။",
para: "စိတ်လှုပ်ရှားဖွယ်ရာ ဇာတ်လမ်းများကို သင့်ဝင်စာပုံးသို့ တိုက်ရိုက်ရရှိနိုင်ရန် သင့်အီးမေးလ်လိပ်စာကို ထည့်သွင်းပါ။",
};
- return burmeseText;
case "japanese":
- const japaneseText = {
+ return {
labelname: "ニュースレターに登録する",
buttonname: "送信",
firstname: "ファーストネーム",
@@ -72,7 +68,6 @@ export const getCaptionForLocale = (locale) => {
heading2: "私たちの仕事とのつながりを保ちましょう。",
para: "メールアドレスを入力して、感動的なストーリーを受信トレイに直接送信します。",
};
- return japaneseText;
default:
return {
labelname: "Sign up for our newsletter",
@@ -89,9 +84,9 @@ export const getCaptionForLocale = (locale) => {
}
};
- {
],
control: { type: "radio" },
},
- }}
- args={{
+ },
+ args: {
variant: "text panel and form",
- }}
-/>
-
-# Text Panel
-
-On the text panel, it shows all the forms structures.
-
-### Overview
-
-Text panel is the page for form structue that shows that we can use the input fields with many ways.
-
-#### When to use:
-
-When the user needs to create a form.
-
-### Behaviors
-
-#### States
-
-The following behavior modifiers are available:
-
-1. Text panel and form:
-2. Form with photo:
-3. Wide form:
-4. Stacked form:
-
-
-
-### Usage
-
-Copy the HTML from the HTML tab of canvas and include the css files mentioned below.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/text-panel.min.css
-
-#### JS:
-
-NA
-
-### Changelog
+ },
+};
-1.0 — Released component
+export const TextPanelComponent = () => (
+ <>
+
+
+
Text Panel
+
+
On the text panel, it shows all the forms structures.
+
+
Overview
+
+
Text panel is the page for form structue that shows that we can use the input fields with many ways.
+
+
When to use:
+
+
When the user needs to create a form.
+
+
Behaviors
+
+
States
+
+
The following behavior modifiers are available:
+
+
+
Text panel and form
+
Form with photo
+
Wide form
+
Stacked form
+
+
+
+
+
Usage
+
+
Copy the HTML from the HTML tab of canvas and include the css files mentioned below.
The Text Area is a multi-line section used to enter text.
+
+
Overview
+
+
+ The TextArea element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizable amount of free-form text.
+
+
+
When to use:
+
+
+
To enter multi-line texts.
+
+
+
Formatting
+
+
Default
+
+
It consists of a textbox used to enter data.
+
+
Behaviors
+
+
States
+
+
There are four states in Textarea: Default, Focus, Error, and Disabled.
+
+
Default:
+
+
The default state is the default textarea that is used to enter data.
+
+
Focus:
+
+
The Focused state is the state in which the textarea is focused when the page is opened.
+
+
Error:
+
+
+ In the Error state, an error message appears below the text area if mandatory data is to be filled in the textbox and it is not entered or if incorrect data is entered.
+
+
+
Disabled:
+
+
In the Disabled state, the textbox is disabled and needs to be able used it.
+
+
+
+
Usage:
+
+
Copy HTML from the HTML tab of canvas and also include the css file mentioned below.
By clicking on the text area, data can be entered into it.
+
+
Changelog
+
+
1.0 — Released component
+
+);
+
+export default {
+ title: 'Components/Forms/Textarea',
+};
diff --git a/stories/Components/Forms/Textarea/Textarea.stories.mdx b/stories/Components/Forms/Textarea/Textarea.stories.mdx
deleted file mode 100644
index 02d2c5d40..000000000
--- a/stories/Components/Forms/Textarea/Textarea.stories.mdx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Textarea } from "./Textarea";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- detail1: "Form Label:",
- detail2: "*Error: this field is required",
- detail3: "Search",
- detail4: "Enter search term",
- detail5: "Number of projects",
- detail6: "Create password",
- detail7: "Password",
- detail8: "8 characters minimum",
- detail9: "Phone number",
- detail10: "Brief description",
- text: "Date label",
- text2: "Enter text",
- text3: "Placeholder",
- };
- return engText;
- case "ukrainian":
- const ukText = {
- detail10: "Короткий опис",
- text2: "Введіть текст",
- };
- return ukText;
- case "arabic":
- const arabicText = {
- detail1: "تسمية النموذج:",
- detail2: "* خطأ: هذا الحقل مطلوب",
- detail3: "بحث",
- detail4: "أدخل مصطلح البحث",
- detail5: "عدد المشاريع",
- detail6: "أنشئ كلمة مرور",
- detail7: "كلمه السر",
- detail8: "8 أحرف كحد أدنى",
- detail9: "رقم الهاتف",
- detail10: "وصف مختصر",
- text: "تسمية التاريخ",
- text2: "أدخل النص",
- text3: "نائب",
- };
- return arabicText;
- case "burmese":
- const burmeseText = {
- detail1: "ပုံစံတံဆိပ်:",
- detail2: "*အမှား - ဤအကွက်လိုအပ်သည်",
- detail3: "ရှာဖွေပါ",
- detail4: "ရှာဖွေရေးစာလုံးရိုက်ထည့်ပါ",
- detail5: "စီမံကိန်းအရေအတွက်",
- detail6: "စကားဝှက်ဖန်တီးပါ",
- detail7: "စကားဝှက်",
- detail8: "အနည်းဆုံးစာလုံး ၈ လုံး",
- detail9: "ဖုန်းနံပါတ်",
- detail10: "အကျဉ်းချုပ်ဖော်ပြချက်",
- text: "ရက်စွဲတံဆိပ်",
- text2: "စာသားရိုက်ထည့်ပါ",
- text3: "နေရာယူသည်",
- };
- return burmeseText;
- case "japanese":
- const japaneseText = {
- detail1: "フォームラベル：",
- detail2: "*エラー：このフィールドは必須です",
- detail3: "検索",
- detail4: "検索語を入力してください",
- detail5: "プロジェクト数",
- detail6: "パスワードを作成する",
- detail7: "パスワード",
- detail8: "最小8文字",
- detail9: "電話番号",
- detail10: "簡単な説明",
- text: "日付ラベル",
- text2: "テキストを入力してください",
- text3: "プレースホルダー",
- };
- return japaneseText;
- default:
- return {
- detail1: "Form Label:",
- detail2: "*Error: this field is required",
- detail3: "Search",
- detail4: "Enter search term",
- detail5: "Number of projects",
- detail6: "Create password",
- detail7: "Password",
- detail8: "8 characters minimum",
- detail9: "Phone number",
- detail10: "Brief description",
- text: "Date label",
- text2: "Enter text",
- text3: "Placeholder",
- };
- }
-};
-
-
-
-# Textarea
-
-The Text Area is a multi-line section used to enter text.
-
-### Overview
-
-The TextArea element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizable amount of free-form text.
-
-When to use:
-
-- To enter multi-line texts.
-
-Formatting
-
-#### Default
-
-It consists of a textbox used to enter data.
-
-### Behaviors
-
-States
-There are four states in Textarea: Default, Focus, Error, and Disabled
-Default: The default state is the default textarea that is used to enter data.
-
-#### Focus:
-
-The Focused state is the state in which the textarea is focused when the page is opened.
-
-#### Error:
-
-In the Error state, an error message appears below the text area if mandatory data is to be filled in the textbox and it is not entered or if incorrect data is entered.
-
-#### Disabled:
-
-In the Disabled state, the textbox is disabled and needs to be able used it.
-
-
-
-### Usage:
-
-Copy HTML from the HTML tab of canvas and also include the css file mentioned below.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/input-fields.min.css
-
-#### JS:
-
-NA
-
-### Interactions
-
-By clicking on the text area, data can be entered into it.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.js b/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.js
new file mode 100644
index 000000000..bb4c0e263
--- /dev/null
+++ b/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.js
@@ -0,0 +1,171 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Breadcrumbcomponent } from "./Breadcrumbs";
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case "english":
+ return [
+ { text: "Home" },
+ { text: "Second-level" },
+ { text: "Third-level" },
+ { text: "Page title" },
+ ];
+ case "ukrainian":
+ return [
+ { text: "Home" },
+ { text: "Другий рівень" },
+ { text: "Третій рівень" },
+ { text: "Назва сторінки" },
+ ];
+ case "arabic":
+ return [
+ { text: "الصفحة الرئيسية" },
+ { text: "المستوى الثاني" },
+ { text: "المستوى الثالث" },
+ { text: "عنوان الصفحة" },
+ ];
+ case "burmese":
+ return [
+ { text: "အိမ်" },
+ { text: "ဒုတိယအဆင့်" },
+ { text: "တတိယအဆင့်" },
+ { text: "စာမျက်နှာခေါင်းစဉ်" },
+ ];
+ case "japanese":
+ return [
+ { text: "家" },
+ { text: "セカンドレベル" },
+ { text: "第3レベル" },
+ { text: "ページタイトル" },
+ ];
+ default:
+ return [
+ { text: "Home" },
+ { text: "Second-level" },
+ { text: "Third-level" },
+ { text: "Page title" },
+ ];
+ }
+};
+
+export const parameters = {
+ title: 'Components/Navigation components/Breadcrumbs',
+ argTypes: {
+ Color: {
+ options: ["Black", "White"],
+ control: { type: "inline-radio" },
+ },
+ },
+ parameters: {
+ backgrounds: {
+ default: "Light gray",
+ values: [
+ { name: "Light gray", value: "#D4D6D8" },
+ { name: "Dark gray", value: "#232e3d" },
+ { name: "White", value: "#FFFFFF" },
+ ],
+ },
+ },
+ args: {
+ Color: "Black",
+ },
+};
+
+export const BreadcrumbsComponent = () => (
+ <>
+
+
+
Breadcrumbs
+
+
The Breadcrumb provides links to each of the previously visited pages and indicates the location of the current page.
+
+
Overview
+
+
The Breadcrumb component creates navigation links for the current pathname based on an opinionated configuration object. The idea behind this component is to drop it anywhere with minimal or no configuration and get breadcrumbs generated automatically.
+
+
When to use:
+
+
+
To indicate the location of the current page and to navigate back to each of the previously visited pages.
+
+
+
Formatting
+
+
Default
+
+
It is present under the main navigation bar.
+
+
Behaviors
+
+
States
+
+
There is only a Default state.
+
+
+
+
Usage
+
+
+
Copy the HTML from the HTML tab of canvas and also include the js and css files listed below.
+
If you want to add left-right animation then add data-viewport=”true” attribute to your HTML element and include viewport.min.js file.
By clicking on the breadcrumb, the current page is redirected to the respective previous page.
+
+
+
Changelog
+
+
1.0 — Released component
+
+);
diff --git a/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.mdx b/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.mdx
deleted file mode 100644
index ee0973050..000000000
--- a/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.mdx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Breadcrumbcomponent } from "./Breadcrumbs";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- data: [
- { text: "Home" },
- { text: "Second-level" },
- { text: "Third-level" },
- { text: "Page title" },
- ],
- };
- return engText.data;
- case "ukrainian":
- const ukText = {
- data: [
- { text: "Home" },
- { text: "Другий рівень" },
- { text: "Третій рівень" },
- { text: "Назва сторінки" },
- ],
- };
- return ukText.data;
- case "arabic":
- const arabicText = {
- data: [
- { text: "الصفحة الرئيسية" },
- { text: "المستوى الثاني" },
- { text: "المستوى الثالث" },
- { text: "عنوان الصفحة" },
- ],
- };
- return arabicText.data;
- case "burmese":
- const burmeseText = {
- data: [
- { text: "အိမ်" },
- { text: "ဒုတိယအဆင့်" },
- { text: "တတိယအဆင့်" },
- { text: "စာမျက်နှာခေါင်းစဉ်" },
- ],
- };
- return burmeseText.data;
- case "japanese":
- const japaneseText = {
- data: [
- { text: "家" },
- { text: "セカンドレベル" },
- { text: "第3レベル" },
- { text: "ページタイトル" },
- ],
- };
- return japaneseText.data;
- default:
- const dummy = {
- data: [
- { text: "Home" },
- { text: "Second-level" },
- { text: "Third-level" },
- { text: "Page title" },
- ],
- };
- return dummy.data;
- }
-};
-
-
-
-# Breadcrumbs
-
-The Breadcrumb provides links to each of the previously visited pages and indicates the location of the current page.
-
-### Overview
-
-The Breadcrumb component creates navigation links for the current pathname based on an opinionated configuration object. The idea behind this component is to drop it anywhere with minimal or no configuration and get breadcrumbs generated automatically.
-
-#### When to use:
-
-- To indicate the location of the current page and to navigate back to each of the previously visited pages.
-
-Formatting
-
-#### Default
-
-It is present under the main navigation bar.
-
-### Behaviors
-
-#### States
-
-There is only a Default state.
-
-
-
-### Usage:
-
-1. Copy the HTML from the HTML tab of canvas and also include the js and css files listed below.
-2. If you want to add left-right animation then add data-viewport=”true” attribute to your HTML element and include viewport.min.js file.
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/breadcrumbs.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js
-
-### Interactions
-
-- By clicking on the breadcrumb, the current page is redirected to the respective previous page.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js
new file mode 100644
index 000000000..7403db3bf
--- /dev/null
+++ b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js
@@ -0,0 +1,214 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import CountrySiteHeader from "./CountrySiteHeader";
+import { getCaptionForLocale as Languageswitcher } from "../../../UIcomponents/LanguageSwitcher/LanguageSwitcher.stories.mdx";
+
+export const getNavLinks = (locale) => {
+ switch (locale) {
+ case "english":
+ return [
+ { title: "Who we are", id: "headerlink1" },
+ { title: "What we do", id: "headerlink2" },
+ { title: "Our Impact", id: "headerlink3" },
+ { title: "Get Involved", id: "headerlink4" },
+ ];
+ case "ukrainian":
+ return [
+ { title: "ПРООН в Україні", id: "headerlink1" },
+ { title: "Чим ми займаємося", id: "headerlink2" },
+ { title: "Наші результати", id: "headerlink3" },
+ { title: "Долучайтеся", id: "headerlink4" },
+ ];
+ case "arabic":
+ return [
+ { title: "من نحن", id: "headerlink1" },
+ { title: "الذي نفعله", id: "headerlink2" },
+ { title: "تأثيرنا", id: "headerlink3" },
+ { title: "شارك", id: "headerlink4" },
+ ];
+ case "burmese":
+ return [
+ { title: "ငါတို့ဘယ်သူလဲ။", id: "headerlink1" },
+ { title: "ငါတို့ဘာလုပ်မလဲ။", id: "headerlink2" },
+ { title: "ကျွန်ုပ်တို့၏သက်ရောက်မှု", id: "headerlink3" },
+ { title: "ပါဝင်လိုက်ပါ။", id: "headerlink4" },
+ ];
+ case "japanese":
+ return [
+ { title: "私たちは誰ですか", id: "headerlink1" },
+ { title: "私達がすること", id: "headerlink2" },
+ { title: "私たちの影響", id: "headerlink3" },
+ { title: "参加する", id: "headerlink4" },
+ ];
+ default:
+ return [
+ { title: "Who we are", id: "headerlink1" },
+ { title: "What we do", id: "headerlink2" },
+ { title: "Our Impact", id: "headerlink3" },
+ { title: "Get Involved", id: "headerlink4" },
+ ];
+ }
+};
+
+export const getSiteTitle = (locale) => {
+ switch (locale) {
+ case "english":
+ return { label: "REGION", span: "Site Title" };
+ case "ukrainian":
+ return { label: "РЕГІОН", span: "Заголовок сайту" };
+ case "arabic":
+ return { label: "عالمي", span: "عنوان الموقع" };
+ case "burmese":
+ return { label: "ကမ္ဘာလုံးဆိုင်ရာ", span: "ငဆိုက်ခေါင်းစဉ်" };
+ case "japanese":
+ return { label: "グローバル", span: "ウェブサイト名" };
+ default:
+ return { label: "REGION", span: "Site Title" };
+ }
+};
+
+export const getLocationDataForLocale = (locale) => {
+ switch (locale) {
+ case "english":
+ return { detail: "Locations" };
+ case "ukrainian":
+ return { detail: "Розташування" };
+ case "arabic":
+ return { detail: "المواقع" };
+ case "burmese":
+ return { detail: "နေရာမျာ" };
+ case "japanese":
+ return { detail: "場所" };
+ default:
+ return { detail: "Locations" };
+ }
+};
+
+export const getBackForLocale = (locale) => {
+ switch (locale) {
+ case "english":
+ return { detail: "Back" };
+ case "ukrainian":
+ return { detail: "назад" };
+ case "arabic":
+ return { detail: "الى الخلف" };
+ case "burmese":
+ return { detail: "ကျော" };
+ case "japanese":
+ return { detail: "戻る" };
+ default:
+ return { detail: "Back" };
+ }
+};
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case "english":
+ return "Select Language";
+ case "ukrainian":
+ return "Оберіть мову";
+ case "arabic":
+ return "اختار اللغة";
+ case "burmese":
+ return "ဘာသာစကားကို ရွေးပါ။";
+ case "japanese":
+ return "言語を選択する";
+ default:
+ return "Category";
+ }
+};
+
+export const getSelectlanguage = (locale) => {
+ switch (locale) {
+ case "english":
+ return "Select Language";
+ case "ukrainian":
+ return "Оберіть мову";
+ case "arabic":
+ return "اختار اللغة";
+ case "burmese":
+ return "ဘာသာစကားကို ရွေးပါ။";
+ case "japanese":
+ return "言語を選択する";
+ default:
+ return "Select Language";
+ }
+};
+
+export const menuData = (locale) => {
+ switch (locale) {
+ case "english":
+ return [
+ { text: "menu item" },
+ { text: "menu item" },
+ ];
+ case "ukrainian":
+ return [
+ { text: "пункт меню" },
+ { text: "пункт меню" },
+ ];
+ case "arabic":
+ return [
+ { text: "عنصر القائمة" },
+ { text: "عنصر القائمة" },
+ ];
+ case "burmese":
+ return [
+ { text: "မီနူးပစ္စည်းများ" },
+ { text: "မီနူးပစ္စည်းများ" },
+ ];
+ case "japanese":
+ return [
+ { text: "メニュー項目" },
+ { text: "メニュー項目" },
+ ];
+ default:
+ return [
+ { text: "menu item" },
+ { text: "menu item" },
+ ];
+ }
+};
+
+export const CountryHeader = () => {
+ return (
+
+ );
+};
+
+export default CountryHeader;
diff --git a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.mdx b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.mdx
deleted file mode 100644
index 419f9a694..000000000
--- a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.mdx
+++ /dev/null
@@ -1,477 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import CountrySiteHeader from "./CountrySiteHeader";
-import { getCaptionForLocale as Languageswitcher } from "../../../UIcomponents/LanguageSwitcher/LanguageSwitcher.stories.mdx";
-
-export const getNavLinks = (locale) => {
- switch (locale) {
- case "english":
- return [
- { title: "Who we are", id: "headerlink1" },
- { title: "What we do", id: "headerlink2" },
- { title: "Our Impact", id: "headerlink3" },
- { title: "Get Involved", id: "headerlink4" },
- ];
- case "ukrainian":
- return [
- { title: "ПРООН в Україні", id: "headerlink1" },
- { title: "Чим ми займаємося", id: "headerlink2" },
- { title: "Наші результати", id: "headerlink3" },
- { title: "Долучайтеся", id: "headerlink4" },
- ];
- case "arabic":
- return [
- { title: "من نحن", id: "headerlink1" },
- { title: "الذي نفعله", id: "headerlink2" },
- { title: "تأثيرنا", id: "headerlink3" },
- { title: "شارك", id: "headerlink4" },
- ];
- case "burmese":
- return [
- { title: "ငါတို့ဘယ်သူလဲ။", id: "headerlink1" },
- { title: "ငါတို့ဘာလုပ်မလဲ။", id: "headerlink2" },
- { title: "ကျွန်ုပ်တို့၏သက်ရောက်မှု", id: "headerlink3" },
- { title: "ပါဝင်လိုက်ပါ။", id: "headerlink4" },
- ];
- case "japanese":
- return [
- { title: "私たちは誰ですか", id: "headerlink1" },
- { title: "私達がすること", id: "headerlink2" },
- { title: "私たちの影響", id: "headerlink3" },
- { title: "参加する", id: "headerlink4" },
- ];
- default:
- return [
- { title: "Who we are", id: "headerlink1" },
- { title: "What we do", id: "headerlink2" },
- { title: "Our Impact", id: "headerlink3" },
- { title: "Get Involved", id: "headerlink4" },
- ];
- }
-};
-
-export const getSiteTitle = (locale) => {
- switch (locale) {
- case "english":
- return { label: "REGION", span: "Site Title" };
- case "ukrainian":
- return { label: "РЕГІОН", span: "Заголовок сайту" };
- case "arabic":
- return { label: "عالمي", span: "عنوان الموقع" };
- case "burmese":
- return { label: "ကမ္ဘာလုံးဆိုင်ရာ", span: "ငဆိုက်ခေါင်းစဉ်" };
- case "japanese":
- return { label: "グローバル", span: "ウェブサイト名" };
- default:
- return { label: "REGION", span: "Site Title" };
- }
-};
-
-export const getLocationDataForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { detail: "Locations" };
- return engText;
- case "ukrainian":
- return { detail: "Розташування" };
- case "arabic":
- const arabicText = { detail: "المواقع" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail: "နေရာမျာ" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail: "場所" };
- return japaneseText;
- default:
- return { detail: "Locations" };
- }
-};
-
-export const getBackForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { detail: "Back" };
- return engText;
- case "ukrainian":
- return { detail: "назад" };
- case "arabic":
- const arabicText = { detail: "الى الخلف" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail: "ကျော" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail: "戻る" };
- return japaneseText;
- default:
- return { detail: "Back" };
- }
-};
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = "Select Language";
- return engText;
- case "ukrainian":
- return "Оберіть мову";
- case "arabic":
- const arabicText = "اختار اللغة";
- return arabicText;
- case "burmese":
- const burmeseText = "ဘာသာစကားကို ရွေးပါ။";
- return burmeseText;
- case "japanese":
- const japaneseText = "言語を選択する";
- return japaneseText;
- default:
- return "Category";
- }
-};
-
-export const getSelectlanguage = (locale) => {
- switch (locale) {
- case "english":
- const engText = "Select Language";
- return engText;
- case "ukrainian":
- return "Оберіть мову";
- case "arabic":
- const arabicText = "اختار اللغة";
- return arabicText;
- case "burmese":
- const burmeseText = "ဘာသာစကားကို ရွေးပါ။";
- return burmeseText;
- case "japanese":
- const japaneseText = "言語を選択する";
- return japaneseText;
- default:
- return "Select Language";
- }
-};
-
-export const menuData = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- data: [{ text: "menu item" }, { text: "menu item" }],
- };
- return engText.data;
- case "ukrainian":
- const ukText = {
- data: [{ text: "пункт меню" }, { text: "пункт меню" }],
- };
- return ukText.data;
- case "arabic":
- const arabicText = {
- data: [{ text: "عنصر القائمة" }, { text: "عنصر القائمة" }],
- };
- return arabicText.data;
- case "burmese":
- const burmeseText = {
- data: [{ text: "မီနူးပစ္စည်းများ" }, { text: "မီနူးပစ္စည်းများ" }],
- };
- return burmeseText.data;
- case "japanese":
- const japaneseText = {
- data: [{ text: "メニュー項目" }, { text: "メニュー項目" }],
- };
- return japaneseText.data;
- default:
- const dummy = {
- data: [{ text: "menu item" }, { text: "menu item" }],
- };
- return dummy.data;
- }
-};
-
-
-
-
-
-# Country Header
-
-## With mega menu and menu overflow
-
-The Country Site Header is a header that contains the site name.
-
-### Overview
-
-The Country Site Header component is a navigation bar that allows access to important functions across the website.
-It is present at the top of the page.
-This version of the header uses the mega menu version of the menu.
-
-### When to use:
-
-- To indicate the location of the current page and to navigate back to each of the previously visited pages.
-- When a large descriptive mega menu is desired for further menu navigation.
-
-
-
----
-
-### Formatting:
-
-#### Default
-
-Default country header consists of a navigation bar with mega menus (optional), a Call to action link (optional), a search bar, logo, and the site name. The Logo is situated at the left-hand corner of the bar followed by the site title.
-
-#### Overflow
-
-In addition to the items above, The header can be set up to allow for more parent menu items. Currently the max is 4 items, but with "Overflow" an unlimited amount of top level parent menu items can be added. The menu items that overflow the header container are moved into an "overflow section" and can be observed by clicking a 3 dot (...) button that appears at the end of the header menu.
-
----
-
-### Setting up your HTML:
-
-#### New Header Structure (**Recommended**)
-
-The new pattern for the html structure has three main divs (**.top-left**, **.top-center** and **.top-right**),
-an optional **.menu\_\_overflow\_\_container** div for overflow menu items, addition and a **.mobile-nav** div to contain all the mobile elements.
-This setup is recommended for a more flexible structure and it can implement the overflow functionality if desired.
-
-```
-
-
-
-
-
-
- Logo and sitename ...
-
-
-
- .. Main menu ...
-
-
-
- Language selector, globe link, and search link icon and call to action link ...
-
-
-
-
- Add this menu__overflow__container section and empty ul.overflow div
- if you want the menu overflow functionality.
-
-
-
-
- Mobile navigation, menu, and links go in here ...
-
-
-
-
-
-
-
-```
-
-**Note:** When updating to the new recommended structure, make sure to adjust the foundation classes in the main divs. Example: old top-left had
-**"cell large-9 small-8 align-self-middle top-left"** classes and new top-left has **"cell small-8 large-2 shrink align-self-middle top-left"**
-
-#### Old Header Structure (Deprecated)
-
-The old, existing pattern for the html structure had two main divs (**.top-left** and **.top-right**) and a **.mobile-nav** div to contain all the mobile elements. This setup is deprecated for the more flexible structure above and can't implement the overflow functionality.
-**This setup is deprecated and should be updated to the recommended structure as soon as possible.**
-
-```
-
-
-
-
-
-
- Logo and sitename...
- Main menu
-
-
-
- Language selector, globe link, and search link icon and call to action link...
-
-
-
- Mobile navigation, menu, and links go in here...
-
-
-
-
-
-
-
-```
-
----
-
-### Content
-
-There are several types of Country Header:
-
-- Without Progress Bar and With Progress Bar
-- Without overflow menu funcionality and with overflow menu functionality
-
----
-
-### Behaviors
-
-### Setting up overflow
-
-The overflow functionality works by calculating the space available for the main menu, adding up the width of all the menu items,
-and if that width is greater than available space, it moves its into the **menu\_\_overflow\_\_container** until everything fits.
-
-The most important parts are making sure the main menu ul has an **overflow** class applied, and that the **menu\_\_overflow\_\_container**
-div exists in the right place. Then just make sure the right css files and the **navigation.min.js** file is loaded.
-
-```
-
-
- Menu items go here. It is important to add the overflow class to the parent ul, otherwise overflow wont trigger.
-
-
-
-...top-right container here...
-
-
-
- Add this menu__overflow__container section after the top-right div and before the mobile-nav div.
-
-
-
-... mobile nav container here ...
-```
-
----
-
-### States
-
-There are three states: Default, Tablet, and Mobile.
-
-1. Default
-
-- Without Progress Bar
-- With Progress Bar
-- Without overflow menu functionality
-- With overflow menu functionality
-
-2. Tablet
-
-- Without Progress Bar
-- With Progress Bar
-- Without overflow menu functionality
-- With overflow menu functionality
-
-3. Mobile
-
-- Without Progress Bar
-- With Progress Bar
-
----
-
-### Usage:
-
-#### Default mega menu Usage:
-
-1. Copy HTML from the HTML tab of canvas and also include the css and Js files listed below.
-2. Initialize the **navigationInitialize()**, **langSwitch()** function in your js file’s document ready, For example:
-
-```
-$(document).ready(function(){
- navigationInitialize();
-});
-```
-
-#### Overflow Usage:
-
-1. In addition to the steps above, Initialize the **navigationOverFlow()** function in your js file’s document ready.
-
----
-
-### CSS and JS References:
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/country-site-header.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/language-switcher.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/menu.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/mega-menu.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs//css/components/mobile-nav.min.css
-
-If adding the menu overflow functionality, add the style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/menu-overflow.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/navigation.min.js
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/undp.min.js
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs//js/lang-switcher.min.js
-
-Menu overflow functionality is included in the navigation.min.js file. It only triggers if the overflow classes are in place. Please see "Implementing menu overflow" for instructions on setting up overflow menu functionality for the main header menu.
-
-### Interactions
-
-- By clicking on the CTA Link, the page is directed to the subsequent link page.
-- By clicking on the search icon, the search tab opens.
-- If overflow is enabled, clicking on the 3 dot button will open overflow container.
-
-### Changelog
-
-1.3 — Released component
diff --git a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.mdx b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js
similarity index 53%
rename from stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.mdx
rename to stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js
index e0b16e747..5460518cf 100644
--- a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.mdx
+++ b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js
@@ -1,7 +1,3 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import CountrySiteHeaderDropdown from "./CountrySiteHeaderDropdown";
-import { getCaptionForLocale as Languageswitcher } from "../../../UIcomponents/LanguageSwitcher/LanguageSwitcher.stories.mdx";
-
export const getNavLinks = (locale) => {
switch (locale) {
case "english":
@@ -69,19 +65,15 @@ export const getSiteTitle = (locale) => {
export const getLocationDataForLocale = (locale) => {
switch (locale) {
case "english":
- const engText = { detail: "Locations" };
- return engText;
+ return { detail: "Locations" };
case "ukrainian":
return { detail: "Розташування" };
case "arabic":
- const arabicText = { detail: "المواقع" };
- return arabicText;
+ return { detail: "المواقع" };
case "burmese":
- const burmeseText = { detail: "နေရာမျာ" };
- return burmeseText;
+ return { detail: "နေရာမျာ" };
case "japanese":
- const japaneseText = { detail: "場所" };
- return japaneseText;
+ return { detail: "場所" };
default:
return { detail: "Locations" };
}
@@ -90,19 +82,15 @@ export const getLocationDataForLocale = (locale) => {
export const getBackForLocale = (locale) => {
switch (locale) {
case "english":
- const engText = { detail: "Back" };
- return engText;
+ return { detail: "Back" };
case "ukrainian":
return { detail: "назад" };
case "arabic":
- const arabicText = { detail: "الى الخلف" };
- return arabicText;
+ return { detail: "الى الخلف" };
case "burmese":
- const burmeseText = { detail: "ကျော" };
- return burmeseText;
+ return { detail: "ကျော" };
case "japanese":
- const japaneseText = { detail: "戻る" };
- return japaneseText;
+ return { detail: "戻る" };
default:
return { detail: "Back" };
}
@@ -111,40 +99,32 @@ export const getBackForLocale = (locale) => {
export const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
- const engText = "Select Language";
- return engText;
+ return "Select Language";
case "ukrainian":
return "Оберіть мову";
case "arabic":
- const arabicText = "اختار اللغة";
- return arabicText;
+ return "اختار اللغة";
case "burmese":
- const burmeseText = "ဘာသာစကားကို ရွေးပါ။";
- return burmeseText;
+ return "ဘာသာစကားကို ရွေးပါ။";
case "japanese":
- const japaneseText = "言語を選択する";
- return japaneseText;
+ return "言語を選択する";
default:
- return "Category";
+ return "Select Language";
}
};
export const getSelectlanguage = (locale) => {
switch (locale) {
case "english":
- const engText = "Select Language";
- return engText;
+ return "Select Language";
case "ukrainian":
return "Оберіть мову";
case "arabic":
- const arabicText = "اختار اللغة";
- return arabicText;
+ return "اختار اللغة";
case "burmese":
- const burmeseText = "ဘာသာစကားကို ရွေးပါ။";
- return burmeseText;
+ return "ဘာသာစကားကို ရွေးပါ။";
case "japanese":
- const japaneseText = "言語を選択する";
- return japaneseText;
+ return "言語を選択する";
default:
return "Select Language";
}
@@ -153,35 +133,26 @@ export const getSelectlanguage = (locale) => {
export const menuData = (locale) => {
switch (locale) {
case "english":
- const engText = {
- data: [{ text: "menu item" }, { text: "menu item" }],
- };
- return engText.data;
+ return [
+ { text: "menu item" },
+ { text: "menu item" },
+ { text: "menu item" },
+ { text: "menu item" },
+ ];
case "ukrainian":
- const ukText = {
- data: [{ text: "пункт меню" }, { text: "пункт меню" }],
- };
- return ukText.data;
- case "arabic":
- const arabicText = {
- data: [{ text: "عنصر القائمة" }, { text: "عنصر القائمة" }],
- };
- return arabicText.data;
- case "burmese":
- const burmeseText = {
- data: [{ text: "မီနူးပစ္စည်းများ" }, { text: "မီနူးပစ္စည်းများ" }],
- };
- return burmeseText.data;
- case "japanese":
- const japaneseText = {
- data: [{ text: "メニュー項目" }, { text: "メニュー項目" }],
- };
- return japaneseText.data;
+ return [
+ { text: "пункт меню" },
+ { text: "пункт меню" },
+ { text: "пункт меню" },
+ { text: "пункт меню" },
+ ];
default:
- const dummy = {
- data: [{ text: "menu item" }, { text: "menu item" }],
- };
- return dummy.data;
+ return [
+ { text: "menu item" },
+ { text: "menu item" },
+ { text: "menu item" },
+ { text: "menu item" },
+ ];
}
};
@@ -205,88 +176,88 @@ export const menuData = (locale) => {
}}
/>
-
-
-# Country Header
-
-## With dropdown menu and menu overflow
-
-The Country Site Header is a header that contains the site name.
-
-### Overview
-
-The Country Site Header component is a navigation bar that allows access to important functions across the website.
-It is present at the top of the page.
-This version of the header uses the dropdown/multilevel version of the menu.
-
-### When to use:
-
-- To indicate the location of the current page and to navigate back to each of the previously visited pages.
-- When a dropdown listing of child menu items is desired for further menu navigation.
-
-
-
----
-
-### Formatting
-
-#### Default
-
-Default country header consists of a navigation bar with dropdown menus (optional), a Call to action link (optional), a search bar, logo, and the site name. The Logo is situated at the left-hand corner of the bar followed by the site title.
-
-#### Overflow
-
-In addition to the items above, The header can be set up to allow for more parent menu items. Currently the max is 4 items, but with "Overflow" an unlimited amount of top level parent menu items can be added. The menu items that overflow the header container are moved into an "overflow section" and can be observed by clicking a 3 dot (...) button that appears at the end of the header menu.
-
----
-
-### Setting up your HTML:
-
-#### New Header Structure (**Recommended**)
-
-The new pattern for the html structure has three main divs (**.top-left**, **.top-center** and **.top-right**),
-an optional **.menu\_\_overflow\_\_container** div for overflow menu items, addition and a **.mobile-nav** div to contain all the mobile elements.
-This setup is recommended for a more flexible structure and it can implement the overflow functionality if desired.
-
-```
+const styles = `
+ iframe { min-height: 400px; }
+`;
+
+const CountrySiteHeader = () => (
+ <>
+
+
Country Header
+
With dropdown menu and menu overflow
+
+ The Country Site Header is a header that contains the site name.
+
+
Overview
+
+ The Country Site Header component is a navigation bar that allows access to important functions across the website.
+ It is present at the top of the page.
+ This version of the header uses the dropdown/multilevel version of the menu.
+
+
When to use:
+
+
To indicate the location of the current page and to navigate back to each of the previously visited pages.
+
When a dropdown listing of child menu items is desired for further menu navigation.
+
+
+
Formatting
+
Default
+
+ Default country header consists of a navigation bar with dropdown menus (optional), a Call to action link (optional),
+ a search bar, logo, and the site name. The Logo is situated at the left-hand corner of the bar followed by the site title.
+
+
Overflow
+
+ In addition to the items above, The header can be set up to allow for more parent menu items.
+ Currently the max is 4 items, but with "Overflow" an unlimited amount of top level parent menu items can be added.
+ The menu items that overflow the header container are moved into an "overflow section" and can be observed by clicking a 3 dot (...) button that appears at the end of the header menu.
+
+
Setting up your HTML
+
New Header Structure (Recommended)
+
+ The new pattern for the html structure has three main divs (.top-left, .top-center, and .top-right),
+ an optional .menu__overflow__container div for overflow menu items, addition and a .mobile-nav div to contain all the mobile elements.
+ This setup is recommended for a more flexible structure and it can implement the overflow functionality if desired.
+
+
+
+ {`
@@ -315,18 +286,21 @@ This setup is recommended for a more flexible structure and it can implement the
-```
-
-**Note:** When updating to the new recommended structure, make sure to adjust the foundation classes in the main divs. Example: old top-left had
-**"cell large-9 small-8 align-self-middle top-left"** classes and new top-left has **"cell small-8 large-2 shrink align-self-middle top-left"**
-
-#### Old Header Structure (Deprecated)
-
-The old, existing pattern for the html structure had two main divs (**.top-left** and **.top-right**) and a **.mobile-nav** div to contain all the mobile elements. This setup is deprecated for the more flexible structure above and can't implement the overflow functionality
-
-**This setup is deprecated and should be updated to the recommended structure as soon as possible.**
-
-```
+ `}
+
+
+
+ Note: When updating to the new recommended structure, make sure to adjust the foundation classes in the main divs.
+ Example: old top-left had "cell large-9 small-8 align-self-middle top-left" classes and new top-left has "cell small-8 large-2 shrink align-self-middle top-left"
+
+
Old Header Structure (Deprecated)
+
+ The old, existing pattern for the html structure had two main divs (.top-left and .top-right) and a .mobile-nav div to contain all the mobile elements.
+ This setup is deprecated for the more flexible structure above and can't implement the overflow functionality.
+
+
+
+ {`
@@ -346,16 +320,19 @@ The old, existing pattern for the html structure had two main divs (**.top-left*
-```
-
-#### Dropdown menu structure
-
-To build a dropdown style of menus, apply a class of **.has-submenu** to the parent li item. Then and a class of **.submenu** to the ul list of children links.
-Make sure to add the **.overflow** class to the top level parent **ul** tag if the overflow functionality is desired.
-
-It is not recommended beyond 3-4 levels of menus, including the main parent layer visible in the header.
-
-```
+ `}
+
+
+
Dropdown menu structure
+
+ To build a dropdown style of menus, apply a class of .has-submenu to the parent li item.
+ Then add a class of .submenu to the ul list of children links.
+ Make sure to add the .overflow class to the top level parent ul tag if the overflow functionality is desired.
+ It is not recommended beyond 3-4 levels of menus, including the main parent layer visible in the header.
+
+
+
+ {`
// Main parent div in header to set the menu
-```
-
----
-
-### Content
-
-There are several types of Country Header:
-
-- Without Progress Bar and With Progress Bar
-- Without overflow menu funcionality and with overflow menu functionality
-
----
-
-### Behaviors
-
-### Setting up overflow
-
-The overflow functionality works by calculating the space available for the main menu, adding up the width of all the menu items,
-and if that width is greater than available space, it moves its into the **menu\_\_overflow\_\_container** until everything fits.
-
-The most important parts are making sure the main menu ul has an **overflow** class applied, and that the **menu\_\_overflow\_\_container**
-div exists in the right place. Then just make sure the right css files and the **navigation.min.js** file is loaded.
-
-```
+ `}
+
+
+
Content
+
+ There are several types of Country Header:
+
+
+
Without Progress Bar and With Progress Bar
+
Without overflow menu functionality and with overflow menu functionality
+
+
Behaviors
+
Setting up overflow
+
+ The overflow functionality works by calculating the space available for the main menu, adding up the width of all the menu items,
+ and if that width is greater than available space, it moves its into the menu__overflow__container until everything fits.
+ The most important parts are making sure the main menu ul has an overflow class applied, and that the menu__overflow__container
+ div exists in the right place. Then just make sure the right css files and the navigation.min.js file is loaded.
+
+
+
+ {`
Menu items go here. It is important to add the overflow class to the parent ul,
@@ -420,32 +395,49 @@ top-right container here...
mobile nav container here ...
-```
-
----
-
-### States
-
-There are three states: Default, Tablet, and Mobile.
-
-1. Default
-
-- Without Progress Bar
-- With Progress Bar
-- Without overflow menu functionality
-- With overflow menu functionality
-
-2. Tablet
-
-- Without Progress Bar
-- With Progress Bar
-- Without overflow menu functionality
-- With overflow menu functionality
-
-3. Mobile
-
-- Without Progress Bar
-- With Progress Bar
+ `}
+
+
+
States
+
+ There are three states: Default, Tablet, and Mobile.
+
+
+
+ Default
+
+
Without Progress Bar
+
With Progress Bar
+
Without overflow menu functionality
+
With overflow menu functionality
+
+
+
+ Tablet
+
+
Without Progress Bar
+
With Progress Bar
+
Without overflow menu functionality
+
With overflow menu functionality
+
+
+
+ Mobile
+
+
Without Progress Bar
+
With Progress Bar
+
+
+
+
Usage
+
Default Dropdown Usage
+
+
Copy HTML from the HTML tab of canvas and also include the css and Js files listed below.
+
Initialize the navigationInitialize(), langSwitch() function in your js file’s document ready
+
+
Dropdown menu Usage
+
+
Copy HTML from the HTML tab of canvas and also include the css and Js files listed below.
+ The Global Header contains elements that provide context and easy access to key functions throughout the website.
+
+
+
Overview
+
+
+ The Global Header component is a navigation bar that allows access to important functions across the website. It is present at the top of each page.
+
+
+
When to use:
+
+
+
When the website needs a header to navigate through the pages.
+
+
+
Formatting
+
+
The Global header is a fixed horizontal panel on the top of the page, with a shaded bottom border, optionally accompanied by the Reading progress meter widget.
+
+
Content
+
+
+ Global Header consists of a navigation bar with drop-down menus, CTA links, Logo, language switcher, Globe icon (invoking Locations flyout), and Search icon (providing access to the Search overlay. The Logo is centered, menu items are aligned to the center as well on both sides of the Logo.
+
+
+
+ On small screens, the mega menu is transitioning into an off-screen menu accessible through the Hamburger icon. Language switcher and Locations flyout are accessible through the first level menu panel.
+
+
+
Behaviors
+
+
States
+
+
+
+ Default: The Logo overflows the header section when there is no progress bar or the progress bar is at the starting point. When the page scrolls for the first time logo contracts to match the Header’s height and the entire header’s panel remains fixed on the top of the page regardless of the depth of scrolling.
+
+
+
+
Usage:
+
+
+
Copy HTML from the HTML tab of canvas and also include the css and Js files listed below.
+
Initialize the navigationInitialize(), langSwitch().
By clicking on the CTA Link, the page is directed to the subsequent link page.
+
By clicking on the Drop-down menu, it expands, and clicking on the x icon closes it.
+
By clicking on the search icon, the search tab opens.
+
By clicking on the language switcher, it expands, and clicking on the x icon closes it.
+
Logo expands/contracts based on the scrolling depth.
+
Reading meter (if used) updated based on the scrolling depth into content.
+
+
+
Changelog
+
+
1.0 — Released component
+
+ );
+};
+
+export default GlobalHeaderStories;
diff --git a/stories/Components/Navigationcomponents/Mainnavigation/GlobalHeader/GlobalHeader.stories.mdx b/stories/Components/Navigationcomponents/Mainnavigation/GlobalHeader/GlobalHeader.stories.mdx
deleted file mode 100644
index ea6ea04f9..000000000
--- a/stories/Components/Navigationcomponents/Mainnavigation/GlobalHeader/GlobalHeader.stories.mdx
+++ /dev/null
@@ -1,352 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import GlobalHeader from "./GlobalHeader";
-import { getCaptionForLocale as Languageswitcher } from "../../../UIcomponents/LanguageSwitcher/LanguageSwitcher.stories.mdx";
-
-export const getNavLinks = (locale) => {
- switch (locale) {
- case "english":
- return [
- { label: "Who we are", id: "headerlink1", position: "left" },
- { label: "What we do", id: "headerlink2", position: "left" },
- { label: "Our Impact", id: "headerlink3", position: "right" },
- { label: "Get Involved", id: "headerlink4", position: "right" },
- ];
- case "ukrainian":
- return [
- { title: "ПРООН в Україні", id: "headerlink1", position: "left" },
- { title: "Чим ми займаємося", id: "headerlink2", position: "left" },
- { title: "Наші результати", id: "headerlink3", position: "right" },
- { title: "Долучайтеся", id: "headerlink4", position: "right" },
- ];
- case "arabic":
- return [
- { label: "من نحن", id: "headerlink1", position: "left" },
- { label: "الذي نفعله", id: "headerlink2", position: "left" },
- { label: "تأثيرنا", id: "headerlink3", position: "right" },
- { label: "شارك", id: "headerlink4", position: "right" },
- ];
- case "burmese":
- return [
- { label: "ငါတို့ဘယ်သူလဲ။", id: "headerlink1", position: "left" },
- { label: "ငါတို့ဘာလုပ်မလဲ။", id: "headerlink2", position: "left" },
- {
- label: "ကျွန်ုပ်တို့၏သက်ရောက်မှု",
- id: "headerlink3",
- position: "right",
- },
- { label: "ပါဝင်လိုက်ပါ။", id: "headerlink4", position: "right" },
- ];
- case "japanese":
- return [
- { label: "私たちは誰ですか", id: "headerlink1", position: "left" },
- { label: "私達がすること", id: "headerlink2", position: "left" },
- { label: "私たちの影響", id: "headerlink3", position: "right" },
- { label: "参加する", id: "headerlink4", position: "right" },
- ];
- default:
- return [
- { label: "Who we are", id: "headerlink1", position: "left" },
- { label: "What we do", id: "headerlink2", position: "left" },
- { label: "Our Impact", id: "headerlink3", position: "right" },
- { label: "Get Involved", id: "headerlink4", position: "right" },
- ];
- }
-};
-
-export const getSiteTitle = (locale) => {
- switch (locale) {
- case "english":
- return { label: "GLOBAL", span: "Site Title" };
- case "ukrainian":
- return { label: "ГЛОБАЛЬНИЙ", span: "Заголовок сайту" };
- case "arabic":
- return { label: "عالمي", span: "عنوان الموقع" };
- case "burmese":
- return { label: "ကမ္ဘာလုံးဆိုင်ရာ", span: "ငဆိုက်ခေါင်းစဉ်" };
- case "japanese":
- return { label: "グローバル", span: "ウェブサイト名" };
- default:
- return { label: "GLOBAL", span: "Site Title" };
- }
-};
-
-export const getLocationDataForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { detail: "Locations" };
- return engText;
- case "ukrainian":
- return { detail: "Розташування" };
- case "arabic":
- const arabicText = { detail: "المواقع" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail: "နေရာမျာ" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail: "場所" };
- return japaneseText;
- default:
- return { detail: "Locations" };
- }
-};
-
-export const getBackForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = { detail: "Back" };
- return engText;
- case "ukrainian":
- return { detail: "назад" };
- case "arabic":
- const arabicText = { detail: "الى الخلف" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail: "ကျော" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail: "戻る" };
- return japaneseText;
- default:
- return { detail: "Back" };
- }
-};
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = "Select Language";
- return engText;
- case "ukrainian":
- return "Оберіть мову";
- case "arabic":
- const arabicText = "اختار اللغة";
- return arabicText;
- case "burmese":
- const burmeseText = "ဘာသာစကားကို ရွေးပါ။";
- return burmeseText;
- case "japanese":
- const japaneseText = "言語を選択する";
- return japaneseText;
- default:
- return "Category";
- }
-};
-
-export const getSelectlanguage = (locale) => {
- switch (locale) {
- case "english":
- const engText = "Select Language";
- return engText;
- case "ukrainian":
- return "Оберіть мову";
- case "arabic":
- const arabicText = "اختار اللغة";
- return arabicText;
- case "burmese":
- const burmeseText = "ဘာသာစကားကို ရွေးပါ။";
- return burmeseText;
- case "japanese":
- const japaneseText = "言語を選択する";
- return japaneseText;
- default:
- return "Select Language";
- }
-};
-
-export const menuData = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- data: [
- {
- text: "menu item",
- },
- {
- text: "menu item",
- },
- ],
- };
- return engText.data;
- case "ukrainian":
- const ukText = {
- data: [{ text: "пункт меню" }, { text: "пункт меню" }],
- };
- return ukText.data;
- case "arabic":
- const arabicText = {
- data: [
- {
- text: "عنصر القائمة",
- },
- {
- text: "عنصر القائمة",
- },
- ],
- };
- return arabicText.data;
- case "burmese":
- const burmeseText = {
- data: [
- {
- text: "မီနူးပစ္စည်းများ",
- },
- {
- text: "မီနူးပစ္စည်းများ",
- },
- ],
- };
- return burmeseText.data;
- case "japanese":
- const japaneseText = {
- data: [
- {
- text: "メニュー項目",
- },
- {
- text: "メニュー項目",
- },
- ],
- };
- return japaneseText.data;
- default:
- const dummy = {
- data: [
- {
- text: "menu item",
- },
- {
- text: "menu item",
- },
- ],
- };
- return dummy.data;
- }
-};
-
-
-
-
-
-# Global Header
-
-The Global Header contains elements that provide context and easy access to key functions throughout the website.
-
-### Overview
-
-The Global Header component is a navigation bar that allows access to important functions across the website. It is present at the top of each page.
-
-When to use:
-
-- When the website needs a header to navigate through the pages.
-
-Formatting
-
-#### Default
-
-The Global header is a fixed horizontal panel on the top of the page, with a shaded bottom border, optionally accompanied by the Reading progress meter widget.
-
-### Content
-
-Global Header consists of a navigation bar with drop-down menus, CTA links, Logo, language switcher, Globe icon (invoking Locations flyout), and Search icon (providing access to the Search overlay. The Logo is centered, menu items are aligned to the center as well on both sides of the Logo.
-
-On small screens, the mega menu is transitioning into an off-screen menu accessible through the Hamburger icon. Language switcher and Locations flyout are accessible through the first level menu panel.
-
-### Behaviors
-
-#### States
-
-1. Default: The Logo overflows the header section when there is no progress bar or the progress bar is at the starting point. When the page scrolls for the first time logo contracts to match the Header’s height and the entire header’s panel remains fixed on the top of the page regardless of the depth of scrolling
-
-- Without Progress Bar:
-- With Progress Bar:
-
-The filled part of the Progress bar (in the current page’s accent color) is demonstrating the proportionate part of the content of the page the user has scrolled through so far without navigational and decorative sections.
-
-
-
-### Usage:
-
-1. Copy HTML from the HTML tab of canvas and also include the css and Js files listed below.
-2. Initialize the navigationInitialize(), langSwitch().
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/global-header.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/language-switcher.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/menu.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/mega-menu.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/mobile-nav.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/navigation.min.js
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/undp.min.js
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/lang-switcher.min.js
-
-### Interactions
-
-- By clicking on the CTA Link, the page is directed to the subsequent link page.
-- By clicking on the Drop-down menu, it expands, and clicking on the x icon closes it.
-- By clicking on the search icon, the search tab opens.
-- By clicking on the language switcher, it expands, and clicking on the x icon closes it.
-- Logo expands/contracts based on the scrolling depth
-- Reading meter (if used) updated based on the scrolling depth into content
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/Navigationcomponents/Menu/Menu.stories.mdx b/stories/Components/Navigationcomponents/Menu/Menu.stories.js
similarity index 92%
rename from stories/Components/Navigationcomponents/Menu/Menu.stories.mdx
rename to stories/Components/Navigationcomponents/Menu/Menu.stories.js
index f9f3d0fee..39c5fbb38 100644
--- a/stories/Components/Navigationcomponents/Menu/Menu.stories.mdx
+++ b/stories/Components/Navigationcomponents/Menu/Menu.stories.js
@@ -150,17 +150,21 @@ export const getCaptionForLocale = (locale) => {
}
};
+MenuStory.parameters = {
+ docs: {
+ source: {
+ code: `
-# Menu
-
-The Horizontal Menu consists of multiple clickable items placed at the top of the page. The navigation stays unchanged when browswing through the site and is present on every page.
-
+ `,
+ },
+ },
+};
diff --git a/stories/Components/Navigationcomponents/Pagination/Pagination.stories.mdx b/stories/Components/Navigationcomponents/Pagination/Pagination.stories.js
similarity index 55%
rename from stories/Components/Navigationcomponents/Pagination/Pagination.stories.mdx
rename to stories/Components/Navigationcomponents/Pagination/Pagination.stories.js
index 0ccae938d..ccbf32388 100644
--- a/stories/Components/Navigationcomponents/Pagination/Pagination.stories.mdx
+++ b/stories/Components/Navigationcomponents/Pagination/Pagination.stories.js
@@ -1,29 +1,36 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Pagination } from "./Pagination";
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import Pagination from './Pagination';
+import { getCaptionForLocale } from './utils';
export const getCaptionForLocale = (locale) => {
switch (locale) {
- case "english":
- const engText = { text: "Page", text2: "of" };
+ case 'english':
+ const engText = { text: 'Page', text2: 'of' };
return engText;
- case "ukrainian":
- return { text: "Сторінка", text2: "з" };
- case "arabic":
- const arabicText = { text: "صفحة", text2: "من" };
+ case 'ukrainian':
+ return { text: 'Сторінка', text2: 'з' };
+ case 'arabic':
+ const arabicText = { text: 'صفحة', text2: 'من' };
return arabicText;
- case "burmese":
- const burmeseText = { text: "စာမျက်နှာ", text2: "၏" };
+ case 'burmese':
+ const burmeseText = { text: 'စာမျက်နှာ', text2: '၏' };
return burmeseText;
- case "japanese":
- const japaneseText = { text: "ページ", text2: "の" };
+ case 'japanese':
+ const japaneseText = { text: 'ページ', text2: 'の' };
return japaneseText;
default:
- return { text: "Page", text2: "of" };
+ return { text: 'Page', text2: 'of' };
}
};
-
-
+export default {
+ title: 'Components/Navigation components/Pagination',
+ component: Pagination,
+ parameters: {
+ docs: {
+ description: {
+ component: `
# Pagination
The Pagination component divides the content of the website into different pages.
@@ -48,17 +55,6 @@ The Pagination component displays the number of the page and contains navigation
There is only the default state of Pagination.
-
-
### Usage:
1. Copy the HTML from the HTML tab of canvas and add it in your html file
@@ -84,3 +80,41 @@ By clicking on the forward or backward arrow, the pages are flipped forwards or
### Changelog
1.0 — Released component
+ `,
+ },
+ },
+ },
+};
+
+export const PaginationStory = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+
+ return (
+
+ );
+};
+
+PaginationStory.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+
+ `,
+ },
+ },
+};
diff --git a/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.js b/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.js
new file mode 100644
index 000000000..bb0883fac
--- /dev/null
+++ b/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.js
@@ -0,0 +1,381 @@
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import Sidebar from './Sidebar'; // Assuming Sidebar component is imported correctly
+import { getCaptionForLocale } from './utils'; // Assuming getCaptionForLocale is imported correctly from utils
+
+export const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'english':
+ return {
+ sidebardata: [
+ {
+ descriptionText: 'Subpage title',
+ },
+ {
+ descriptionText: 'Subpage with an exceptionally long title on two lines',
+ },
+ {
+ descriptionText: 'Subpage title',
+ },
+ ],
+ headerText: 'PAGE TITLE',
+ label: 'MENU',
+ };
+ case 'ukrainian':
+ return {
+ sidebardata: [
+ {
+ descriptionText: 'Назва підсторінки',
+ },
+ {
+ descriptionText:
+ 'Підсторінка з надзвичайно довгим заголовком у два рядки',
+ },
+ {
+ descriptionText: 'Назва підсторінки',
+ },
+ ],
+ headerText: 'Назва підсторінки',
+ label: 'МЕНЮ',
+ };
+ case 'arabic':
+ return {
+ sidebardata: [
+ {
+ descriptionText: 'عنوان الصفحة الفرعية',
+ },
+ {
+ descriptionText: 'صفحة فرعية بعنوان طويل بشكل استثنائي في سطرين',
+ },
+ {
+ descriptionText: 'عنوان الصفحة الفرعية',
+ },
+ ],
+ headerText: 'عنوان الصفحة',
+ label: 'قائمة',
+ };
+ case 'burmese':
+ return {
+ sidebardata: [
+ {
+ descriptionText: 'စာမျက်နှာခွဲခေါင်းစဉ်',
+ },
+ {
+ descriptionText:
+ 'စာကြောင်းနှစ်ကြောင်းတွင်ထူးခြားသောခေါင်းစဉ်ရှည်ပါ ၀ င်သောစာမျက်နှာခွဲ',
+ },
+ {
+ descriptionText: 'စာမျက်နှာခွဲခေါင်းစဉ်',
+ },
+ ],
+ headerText: 'စာမျက်နှာခေါင်းစဉ်',
+ label: 'မီနူး',
+ };
+ case 'japanese':
+ return {
+ sidebardata: [
+ {
+ descriptionText: 'サブページのタイトル',
+ },
+ {
+ descriptionText: '2行に非常に長いタイトルのサブページ',
+ },
+ {
+ descriptionText: 'サブページのタイトル',
+ },
+ ],
+ headerText: 'ページタイトル',
+ label: 'メニュー',
+ };
+ default:
+ return {
+ sidebardata: [
+ {
+ descriptionText: 'Subpage title',
+ },
+ {
+ descriptionText:
+ 'Subpage with an exceptionally long title on two lines',
+ },
+ {
+ descriptionText: 'Subpage title',
+ },
+ ],
+ headerText: 'PAGE TITLE',
+ label: 'Menu',
+ };
+ }
+};
+
+export default {
+ title: 'Components/Navigation components/Sidebar',
+ component: Sidebar,
+ argTypes: {
+ Height: {
+ options: ['Default', 'Narrow'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ Height: 'Default',
+ },
+ parameters: {
+ docs: {
+ description: {
+ component: `
+# Sidebar
+
+The Sidebar Component is a shorter piece of text that appears next to and accompanies a longer article.
+
+### Overview
+
+A sidebar is a column on the left or right side of a page which highlights the extra information related to the page.
+
+When to use:
+
+- When an extra piece of information needs to be added to the page.
+- When links to the supplementary information need to be added.
+
+### Formatting
+
+#### Default
+
+The sidebar is a column that displays the supplementary information or links related to the page.
+
+### Behaviors
+
+#### States
+
+The sidebar First level row has two types: default and mobile with three states: default, hover, and selected. The mobile sidebar is used for mobile applications.
+
+The following behavior modifiers are available:
+
+##### Default state:
+
+1. The White colored box with the default state indicates that the sidebar is not opened or expanded yet.
+2. The White colored box with down arrow and default state indicates that the sidebar isn’t open but expanded.
+3. The White colored box with the up arrow and default state indicates that the sidebar is opened and expanded.
+
+##### Hover state:
+
+1. The Gray coloured box with hover state indicates that once the mouse is hovered over the sidebar it changes appearance.
+2. The Gray colored box with down arrow and a hover state indicates that the sidebar changes appearance when the mouse hovers over it. The down arrow indicates that it is not opened but expanded.
+3. The Gray colored box with the up arrow and hover state indicates that the sidebar changes appearance when the mouse hovers over it. The up arrow indicates that it is opened and expanded.
+
+##### Selected state:
+
+1. The Blue colored box with selected state indicates that the sidebar is selected but it isn’t opened or expanded.
+2. The Blue colored box with a down arrow and selected state indicates that the sidebar is selected. The down arrow indicates that the sidebar is expanded but isn’t opened.
+3. The Blue colored box with the up arrow and selected state indicates that the sidebar is selected. The up arrow indicates that the sidebar is opened and expanded.
+4. The Second level row has two types: default and mobile with two states: default and hover. The font size is smaller for the mobile sidebar to make it more convenient as the mobile screen is smaller than the laptop/desktop.
+
+### Default state:
+
+1. The White colored box with the default state indicates the second sidebar which contains more information regarding the page.
+
+### Hover state:
+
+The Grey colored box with hover state indicates that the sidebar changes appearance once the mouse hovers over it.
+
+
+
+### Usage:
+
+1. Copy HTML from the HTML tab of canvas and also include css and js files listed below
+2. Initialize the sidebar for mobile and desktop by calling sidebarNav(), sidebarMenu() functions
+
+### CSS and JS References
+
+#### CSS:
+
+Add the base layout style from
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/sidebar-data.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/sidebar.min.css
+
+#### JS:
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs//js/sidebar.min.js
+
+### Interactions
+
+- The hover state is applied to the entire button.
+- The selected state is applied to the entire button.
+
+### Changelog
+
+1.0 — Released component
+ `,
+ },
+ },
+ },
+};
+
+export const SidebarStory = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+
+ return (
+
+ );
+};
+
+SidebarStory.parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+# Sidebar
+
+The Sidebar Component is a shorter piece of text that appears next to and accompanies a longer article.
+
+### Overview
+
+A sidebar is a column on the left or right side of a page which highlights the extra information related to the page.
+
+When to use:
+
+- When an extra piece of information needs to be added to the page.
+- When links to the supplementary information need to be added.
+
+### Formatting
+
+#### Default
+
+The sidebar is a column that displays the supplementary information or links related to the page.
+
+### Behaviors
+
+#### States
+
+The sidebar First level row has two types: default and mobile with three states: default, hover, and selected. The mobile sidebar is used for mobile applications.
+
+The following behavior modifiers are available:
+
+##### Default state:
+
+1. The White colored box with the default state indicates that the sidebar is not opened or expanded yet.
+2. The White colored box with down arrow and default state indicates that the sidebar isn’t open but expanded.
+3. The White colored box with the up arrow and default state indicates that the sidebar is opened and expanded.
+
+##### Hover state:
+
+1. The Gray coloured box with hover state indicates that once the mouse is hovered over the sidebar it changes appearance.
+2. The Gray colored box with down arrow and a hover state indicates that the sidebar changes appearance when the mouse hovers over it. The down arrow indicates that it is not opened but expanded.
+3. The Gray colored box with the up arrow and hover state indicates that the sidebar changes appearance when the mouse hovers over it. The up arrow indicates that it is opened and expanded.
+
+##### Selected state:
+
+1. The Blue colored box with selected state indicates that the sidebar is selected but it isn’t opened or expanded.
+2. The Blue colored box with a down arrow and selected state indicates that the sidebar is selected. The down arrow indicates that the sidebar is expanded but isn’t opened.
+3. The Blue colored box with the up arrow and selected state indicates that the sidebar is selected. The up arrow indicates that the sidebar is opened and expanded.
+4. The Second level row has two types: default and mobile with two states: default and hover. The font size is smaller for the mobile sidebar to make it more convenient as the mobile screen is smaller than the laptop/desktop.
+
+### Default state:
+
+1. The White colored box with the default state indicates the second sidebar which contains more information regarding the page.
+
+### Hover state:
+
+The Grey colored box with hover state indicates that the sidebar changes appearance once the mouse hovers over it.
+
+
+
+### Usage:
+
+1. Copy HTML from the HTML tab of canvas and also include css and js files listed below
+2. Initialize the sidebar for mobile and desktop by calling sidebarNav(), sidebarMenu() functions
+
+### CSS and JS References
+
+#### CSS:
+
+Add the base layout style from
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/sidebar-data.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/sidebar.min.css
+
+#### JS:
+
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs//js/sidebar.min.js
+
+### Interactions
+
+- The hover state is applied to the entire button.
+- The selected state is applied to the entire button.
+
+### Changelog
+
+1.0 — Released component
+ `,
+ },
+ },
+ };
diff --git a/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.mdx b/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.mdx
deleted file mode 100644
index 1b9ba8844..000000000
--- a/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.mdx
+++ /dev/null
@@ -1,231 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Sidebar } from "./Sidebar";
-
-export const getCaptionForLocale = (locale) => {
- switch (locale) {
- case "english":
- const engText = {
- sidebardata: [
- {
- descriptionText: "Subpage title",
- },
- {
- descriptionText:
- "Subpage with an exceptionally long title on two lines",
- },
- {
- descriptionText: "Subpage title",
- },
- ],
- headerText: "PAGE TITLE",
- label: "MENU",
- };
- return engText;
- case "ukrainian":
- const ukText = {
- sidebardata: [
- {
- descriptionText: "Назва підсторінки",
- },
- {
- descriptionText:
- "Підсторінка з надзвичайно довгим заголовком у два рядки",
- },
- {
- descriptionText: "Назва підсторінки",
- },
- ],
- headerText: "Назва підсторінки",
- label: "МЕНЮ",
- };
- return ukText;
- case "arabic":
- const arabicText = {
- sidebardata: [
- {
- descriptionText: "عنوان الصفحة الفرعية",
- },
- {
- descriptionText: "صفحة فرعية بعنوان طويل بشكل استثنائي في سطرين",
- },
- {
- descriptionText: "عنوان الصفحة الفرعية",
- },
- ],
- headerText: "عنوان الصفحة",
- label: "قائمة",
- };
- return arabicText;
- case "burmese":
- const burmeseText = {
- sidebardata: [
- {
- descriptionText: "စာမျက်နှာခွဲခေါင်းစဉ်",
- },
- {
- descriptionText:
- "စာကြောင်းနှစ်ကြောင်းတွင်ထူးခြားသောခေါင်းစဉ်ရှည်ပါ ၀ င်သောစာမျက်နှာခွဲ",
- },
- {
- descriptionText: "စာမျက်နှာခွဲခေါင်းစဉ်",
- },
- ],
- headerText: "စာမျက်နှာခေါင်းစဉ်",
- label: "မီနူး",
- };
- return burmeseText;
- case "japanese":
- const japaneseText = {
- sidebardata: [
- {
- descriptionText: "サブページのタイトル",
- },
- {
- descriptionText: "2行に非常に長いタイトルのサブページ",
- },
- {
- descriptionText: "サブページのタイトル",
- },
- ],
- headerText: "ページタイトル",
- label: "メニュー",
- };
- return japaneseText;
- default:
- const dummy = {
- sidebardata: [
- {
- descriptionText: "Subpage title",
- },
- {
- descriptionText:
- "Subpage with an exceptionally long title on two lines",
- },
- {
- descriptionText: "Subpage title",
- },
- ],
- headerText: "PAGE TITLE",
- label: "Menu",
- };
- return dummy;
- }
-};
-
-
-
-# Sidebar
-
-The Sidebar Component is a shorter piece of text that appears next to and accompanies a longer article.
-
-### Overview
-
-A sidebar is a column on the left or right side of a page which highlights the extra information related to the page.
-
-When to use:
-
-- When an extra piece of information needs to be added to the page.
-- When links to the supplementary information need to be added.
-
-### Formatting
-
-#### Default
-
-The sidebar is a column that displays the supplementary information or links related to the page.
-
-### Behaviors
-
-#### States
-
-The sidebar First level row has two types: default and mobile with three states: default, hover, and selected. The mobile sidebar is used for mobile applications.
-
-The following behavior modifiers are available:
-
-##### Default state:
-
-1. The White colored box with the default state indicates that the sidebar is not opened or expanded yet.
-2. The White colored box with down arrow and default state indicates that the sidebar isn’t open but expanded.
-3. The White colored box with the up arrow and default state indicates that the sidebar is opened and expanded.
-
-##### Hover state:
-
-1. The Gray coloured box with hover state indicates that once the mouse is hovered over the sidebar it changes appearance.
-2. The Gray colored box with down arrow and a hover state indicates that the sidebar changes appearance when the mouse hovers over it. The down arrow indicates that it is not opened but expanded.
-3. The Gray colored box with the up arrow and hover state indicates that the sidebar changes appearance when the mouse hovers over it. The up arrow indicates that it is opened and expanded.
-
-##### Selected state:
-
-1. The Blue colored box with selected state indicates that the sidebar is selected but it isn’t opened or expanded.
-2. The Blue colored box with a down arrow and selected state indicates that the sidebar is selected. The down arrow indicates that the sidebar is expanded but isn’t opened.
-3. The Blue colored box with the up arrow and selected state indicates that the sidebar is selected. The up arrow indicates that the sidebar is opened and expanded.
-4. The Second level row has two types: default and mobile with two states: default and hover. The font size is smaller for the mobile sidebar to make it more convenient as the mobile screen is smaller than the laptop/desktop.
-
-### Default state:
-
-1. The White colored box with the default state indicates the second sidebar which contains more information regarding the page.
-
-### Hover state:
-
-The Grey colored box with hover state indicates that the sidebar changes appearance once the mouse hovers over it.
-
-
-
-### Usage:
-
-1. Copy HTML from the HTML tab of canvas and also include css and js files listed below
-2. Initialize the sidebar for mobile and desktop by calling sidebarNav(), sidebarMenu() functions
-
-### CSS and JS References
-
-#### CSS:
-
-Add the base layout style from
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/sidebar-data.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/sidebar.min.css
-
-#### JS:
-
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs//js/sidebar.min.js
-
-### Interactions
-
-- The hover state is applied to the entire button.
-- The selected state is applied to the entire button.
-
-### Changelog
-
-1.0 — Released component
diff --git a/stories/Components/UIcomponents/Accordion/Accordion.stories.mdx b/stories/Components/UIcomponents/Accordion/Accordion.stories.js
similarity index 50%
rename from stories/Components/UIcomponents/Accordion/Accordion.stories.mdx
rename to stories/Components/UIcomponents/Accordion/Accordion.stories.js
index 62b42ac54..1e523b43f 100644
--- a/stories/Components/UIcomponents/Accordion/Accordion.stories.mdx
+++ b/stories/Components/UIcomponents/Accordion/Accordion.stories.js
@@ -1,6 +1,5 @@
import { Meta, Story, Canvas } from "@storybook/addon-docs";
import { renderToStaticMarkup } from "react-dom/server";
-
import { Accordion } from "./Accordion";
export const getCaptionForLocale = (locale) => {
@@ -55,88 +54,74 @@ export const getCaptionForLocale = (locale) => {
}
};
-
-
-# Accordion
-
-An accordion is a vertically stacked list of titles that reveal or hide additional content when selected.
-
-### Overview
-
-The accordion component delivers large amounts of content in a small space through progressive disclosure. The accordion title gives the user a high-level overview of the content allowing the user to decide which sections to read.
-
-Accordions make information processing and discovering more effective. However, it does obscure content from users and it is important to account for a user not noticing or reading all content placed within an accordion section. If it is necessary for a user to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.
-
-### When to use:
-
-- To organize related information.
-- To shorten pages and reduce scrolling when content is not crucial to read in full.
-- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.
-- If you have only a small space to display a lot of content.
-
-### Formatting
-
-#### Default
-
-
-
-#### CSS
-
-Add following CSS in your project
-
-- [Base layouting CSS](https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css).
-- [Copy and add this component CSS in your project](https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/accordion.min.css).
-
-#### JS
-
-[Use this JS file in your project ](https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/accordion.min.js)
-and then use following code:
-
-```
-$(document).ready(function(){
- accordion();
-});
-```
-
-### Content
-
-The accordion is made up of a title and body copy. Accordion titles should use a short amount of text that describes the content of the body copy.
-
-The contents within an accordion section may utilize multiple paragraphs and subsections as needed.
-
-### Behaviors
-
-#### States
-
-An accordion panel has two states: collapsed and expanded. The chevron icon at the end of the accordion title should indicate the accordion panel’s state. By default, all panels of an accordion should begin at the collapsed state. The following behavior modifiers are available:
-
-- **Multi-expand**. By default only one panel of the accordion can be open at a time. It can be changed by assigning data-multi-expand=”true” attribute to the accordion’s outermost element.
-- **Disabled**: temporary removing expanding capability of the specific panel while preserving overall look and feel
-- **Active**: while default state of all panels is “close” we can enable certain panels by assigning class .is-active to it
-- **Mobile Only**: To shwo the Accordion on mobile device only we have to pass the attribute to the parent div eg:
- `
`
-
-#### Interactions
-
-The entire accordion title and chevron is selectable. Users can click anywhere in the title area to expand or collapse the content, providing a large, easy to manipulate target.
-
-#### Accordion and URLs
-
-- Optional **deep linking** - allow users to open a particular accordion panel at page load with hash-appended URL. Configurable by setting data-deep-link=”true” , disabled by default
-- Browser history - modifying widget behavior for browser history modification, by default each click replaces current page’s URL, but by using data-update-history=”true” you can instruct browser to insert new entries on every click providing ability to track back the navigation history while clicking Back button.
-
-### Changelog
-
-1.0 — Released component
+export const parameters = {
+ docs: {
+ page: () => (
+ <>
+
+
Accordion
+
+ An accordion is a vertically stacked list of titles that reveal or hide additional content when selected.
+
+
Overview
+
+ The accordion component delivers large amounts of content in a small space through progressive disclosure. The accordion title gives the user a high-level overview of the content allowing the user to decide which sections to read.
+
+
+ Accordions make information processing and discovering more effective. However, it does obscure content from users and it is important to account for a user not noticing or reading all content placed within an accordion section. If it is necessary for a user to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.
+
+
When to use:
+
+
To organize related information.
+
To shorten pages and reduce scrolling when content is not crucial to read in full.
+
When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.
+
If you have only a small space to display a lot of content.
Use this JS file in your project accordion.min.js and then use following code:
+
Content
+
The accordion is made up of a title and body copy. Accordion titles should use a short amount of text that describes the content of the body copy.
+
The contents within an accordion section may utilize multiple paragraphs and subsections as needed.
+
Behaviors
+
States
+
An accordion panel has two states: collapsed and expanded. The chevron icon at the end of the accordion title should indicate the accordion panel’s state. By default, all panels of an accordion should begin at the collapsed state. The following behavior modifiers are available:
+
+
Multi-expand. By default only one panel of the accordion can be open at a time. It can be changed by assigning data-multi-expand=”true” attribute to the accordion’s outermost element.
+
Disabled: temporary removing expanding capability of the specific panel while preserving overall look and feel
+
Active: while default state of all panels is “close” we can enable certain panels by assigning class .is-active to it
+
Mobile Only: To shwo the Accordion on mobile device only we have to pass the attribute to the parent div eg: <div class="accordion" data-accordion="mobile">
+
+
Interactions
+
The entire accordion title and chevron is selectable. Users can click anywhere in the title area to expand or collapse the content, providing a large, easy to manipulate target.
+
Accordion and URLs
+
+
Optional deep linking - allow users to open a particular accordion panel at page load with hash-appended URL. Configurable by setting data-deep-link=”true”, disabled by default
+
Browser history - modifying widget behavior for browser history modification, by default each click replaces current page’s URL, but by using data-update-history=”true” you can instruct browser to insert new entries on every click providing ability to track back the navigation history while clicking Back button.
+
+
Changelog
+
1.0 — Released component
+
+ ),
+ },
+};
diff --git a/stories/Components/UIcomponents/Author/AuthorCard/AuthorCard.stories.mdx b/stories/Components/UIcomponents/Author/AuthorCard/AuthorCard.stories.js
similarity index 64%
rename from stories/Components/UIcomponents/Author/AuthorCard/AuthorCard.stories.mdx
rename to stories/Components/UIcomponents/Author/AuthorCard/AuthorCard.stories.js
index 64a5ecbca..bafad0147 100644
--- a/stories/Components/UIcomponents/Author/AuthorCard/AuthorCard.stories.mdx
+++ b/stories/Components/UIcomponents/Author/AuthorCard/AuthorCard.stories.js
@@ -1,91 +1,120 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Authorcard } from "./AuthorCard";
-import authorImage from "../../../../assets/images/author.png";
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { Authorcard } from './AuthorCard';
+import authorImage from '../../../../assets/images/author.png';
+
+export default {
+ title: 'Components/UI components/Author/Author Card',
+ argTypes: {
+ Type: {
+ options: ['Expanding Arrow', 'Space'],
+ control: { type: 'inline-radio' },
+ },
+ button_option: {
+ options: ['Hyperlink', 'Inline'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ Type: 'Expanding Arrow',
+ button_option: 'Hyperlink',
+ },
+};
export const getCaptionForLocale = (locale) => {
switch (locale) {
- case "english":
- const engText = {
+ case 'english':
+ return {
authordata: [
{
- Authorlabel: "Achim Steiner",
- Authortext: "Administrator",
+ Authorlabel: 'Achim Steiner',
+ Authortext: 'Administrator',
},
],
paragraph:
- "Inventore magni accusantium labore qui. Dolorum numquam nihil labore quis harum dolorum. Sed eligendi ex quis delectus et tempore et eos. Molestias enim necessitatibus incidunt sit ab officiis aut. Qui aspernatur impedit nesciunt inventore quo. Reprehenderit voluptatum nihil voluptates et.",
- button: "VIEW 234 POSTS",
+ 'Inventore magni accusantium labore qui. Dolorum numquam nihil labore quis harum dolorum. Sed eligendi ex quis delectus et tempore et eos. Molestias enim necessitatibus incidunt sit ab officiis aut. Qui aspernatur impedit nesciunt inventore quo. Reprehenderit voluptatum nihil voluptates et.',
+ button: 'VIEW 234 POSTS',
};
- return engText;
- case "ukrainian":
- const ukText = {
+ case 'ukrainian':
+ return {
authordata: [
{
- Authorlabel: "Наталiя Бойко",
- Authortext: "Керівник проекту",
+ Authorlabel: 'Наталiя Бойко',
+ Authortext: 'Керівник проекту',
},
],
paragraph:
- "ПРООН працює приблизно в 170 країнах і територіях, допомагаючи долати бідність, зменшити нерівність та дискримінацію, а також зміцнити стійкість, щоб країни могли підтримувати досягнутий прогрес. Як агентство ООН із розвитку, ПРООН відіграє важливу роль, допомагаючи країнам досягати Цілей сталого розвитку.",
- button: "ПЕРЕГЛЯНУТИ 234 ПУБЛІКАЦІЇ",
+ 'ПРООН працює приблизно в 170 країнах і територіях, допомагаючи долати бідність, зменшити нерівність та дискримінацію, а також зміцнити стійкість, щоб країни могли підтримувати досягнутий прогрес. Як агентство ООН із розвитку, ПРООН відіграє важливу роль, допомагаючи країнам досягати Цілей сталого розвитку.',
+ button: 'ПЕРЕГЛЯНУТИ 234 ПУБЛІКАЦІЇ',
};
- return ukText;
- case "arabic":
- const arabicText = {
+ case 'arabic':
+ return {
authordata: [
{
- Authorlabel: "أكيم شتاينر",
- Authortext: "مدير",
+ Authorlabel: 'أكيم شتاينر',
+ Authortext: 'مدير',
},
],
paragraph:
- "مخترع يتهمه بعمل شاق كبير. لم أشعر أبدًا بأي ألم أو تعب أو أي من هذه الآلام. ولكن أن تختار من المختار والوقت وهم. تحدث المشاكل من الاحتياجات أو من الخدمات. أولئك الذين يرفضون الباحث لا يعرفون كيف يمنعونه. لا يلوم الملذات ولا الملذات.",
- button: "عرض 234 وظيفة",
+ 'مخترع يتهمه بعمل شاق كبير. لم أشعر أبدًا بأي ألم أو تعب أو أي من هذه الآلام. ولكن أن تختار من المختار والوقت وهم. تحدث المشاكل من الاحتياجات أو من الخدمات. أولئك الذين يرفضون الباحث لا يعرفون كيف يمنعونه. لا يلوم الملذات ولا الملذات.',
+ button: 'عرض 234 وظيفة',
};
- return arabicText;
- case "burmese":
- const burmeseText = {
+ case 'burmese':
+ return {
authordata: [
{
- Authorlabel: "အောင်မြင်သည် စတီရီယို",
- Authortext: "အုပ်ချုပ်သူ",
+ Authorlabel: 'အောင်မြင်သည် စတီရီယို',
+ Authortext: 'အုပ်ချုပ်သူ',
},
],
paragraph:
- "ကြီးကျယ်သောကြိုးစားအားထုတ်မှုကိုစွပ်စွဲသူတီထွင်သူတစ် ဦး ငါနာကျင်တာ၊ ပင်ပန်းတာမရှိဘူး၊ ဒီနာကျင်မှုတစ်ခုမှမရှိခဲ့ဘူး။ ဒါပေမယ့်ရွေးချယ်တဲ့သူတစ်ယောက်ကနေရွေးချယ်ဖို့နဲ့အချိန်နဲ့သူတို့အတွက်ပဲ။ ဒုက္ခများသည်လိုအပ်ချက်များသို့မဟုတ် ၀ န်ဆောင်မှုများမှဖြစ်သည်။ ရှာဖွေသူကိုငြင်းပယ်သူများသည်၎င်းကိုမည်သို့ကာကွယ်ရမည်ကိုမသိပါ။ သူသည်အပျော်အပါးနှင့်အပျော်အပါးကိုအပြစ်မတင်။",
- button: "ပိုစ် ၂၃၄ ကိုကြည့်ပါ",
+ 'ကြီးကျယ်သောကြိုးစားအားထုတ်မှုကိုစွပ်စွဲသူတီထွင်သူတစ် ဦး ငါနာကျင်တာ၊ ပင်ပန်းတာမရှိဘူး၊ ဒီနာကျင်မှုတစ်ခုမှမရှိခဲ့ဘူး။ ဒါပေမယ့်ရွေးချယ်တဲ့သူတစ်ယောက်ကနေရွေးချယ်ဖို့နဲ့အချိန်နဲ့သူတို့အတွက်ပဲ။ ဒုက္ခများသည်လိုအပ်ချက်များသို့မဟုတ် ၀ န်ဆောင်မှုများမှဖြစ်သည်။ ရှာဖွေသူကိုငြင်းပယ်သူများသည်၎င်းကိုမည်သို့ကာကွယ်ရမည်ကိုမသိပါ။ သူသည်အပျော်အပါးနှင့်အပျော်အပါးကိုအပြစ်မတင်။',
+ button: 'ပိုစ် ၂၃၄ ကိုကြည့်ပါ',
};
- return burmeseText;
- case "japanese":
- const japaneseText = {
+ case 'japanese':
+ return {
authordata: [
{
- Authorlabel: "テレサウェッブ",
- Authortext: "管理者",
+ Authorlabel: 'テレサウェッブ',
+ Authortext: '管理者',
},
],
paragraph:
- "大変な努力を非難している発明家。 痛みも、倦怠感も、これらの痛みもありませんでした。 しかし、選択されたものと時間とそれらから選択すること。 トラブルはニーズやサービスから発生します。 ファインダーを拒否する人はそれを防ぐ方法を知りません。 彼は喜びも喜びも非難しません。",
- button: "234件の投稿を表示",
+ '大変な努力を非難している発明家。 痛みも、倦怠感も、これらの痛みもありませんでした。 しかし、選択されたものと時間とそれらから選択すること。 トラブルはニーズやサービスから発生します。 ファインダーを拒否する人はそれを防ぐ方法を知りません。 彼は喜びも喜びも非難しません。',
+ button: '234件の投稿を表示',
};
- return japaneseText;
default:
- const dummy = {
+ return {
authordata: [
{
- Authorlabel: "Achim Steiner",
- Authortext: "Administrator",
+ Authorlabel: 'Achim Steiner',
+ Authortext: 'Administrator',
},
],
paragraph:
- "Inventore magni accusantium labore qui. Dolorum numquam nihil labore quis harum dolorum. Sed eligendi ex quis delectus et tempore et eos. Molestias enim necessitatibus incidunt sit ab officiis aut. Qui aspernatur impedit nesciunt inventore quo. Reprehenderit voluptatum nihil voluptates et.",
- button: "VIEW 234 POSTS",
+ 'Inventore magni accusantium labore qui. Dolorum numquam nihil labore quis harum dolorum. Sed eligendi ex quis delectus et tempore et eos. Molestias enim necessitatibus incidunt sit ab officiis aut. Qui aspernatur impedit nesciunt inventore quo. Reprehenderit voluptatum nihil voluptates et.',
+ button: 'VIEW 234 POSTS',
};
- return dummy;
}
};
-
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ // Replace key
+ args['button_option'] = args['Tag'];
+ delete args['Tag'];
+ return ;
+};
+
+export const AuthorCardStory = Template.bind({});
+AuthorCardStory.args = {
+ Type: 'Expanding Arrow',
+ Tag: 'Hyperlink',
+};
+
+AuthorCardStory.parameters = {
+ docs: {
+ description: {
+ component: `
# Author Card
@@ -160,3 +189,7 @@ Add the base layout style from
### Changelog
1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Components/UIcomponents/Author/AuthorColumn/AuthorColumn.stories.mdx b/stories/Components/UIcomponents/Author/AuthorColumn/AuthorColumn.stories.js
similarity index 92%
rename from stories/Components/UIcomponents/Author/AuthorColumn/AuthorColumn.stories.mdx
rename to stories/Components/UIcomponents/Author/AuthorColumn/AuthorColumn.stories.js
index f628286f4..5e7064fa0 100644
--- a/stories/Components/UIcomponents/Author/AuthorColumn/AuthorColumn.stories.mdx
+++ b/stories/Components/UIcomponents/Author/AuthorColumn/AuthorColumn.stories.js
@@ -2,6 +2,26 @@ import { Meta, Story, Canvas } from "@storybook/addon-docs";
import { Author } from "./AuthorColumn";
import authorImage from "../../../../assets/images/author.png";
+export default {
+ title: "Components/UI components/Authors/Author",
+ argTypes: {
+ Image: {
+ name: "Display image",
+ options: ["True", "False"],
+ control: { type: "inline-radio" },
+ },
+ Number: {
+ name: "Number of Items",
+ options: ["One", "Two", "Three", "Four", "Five"],
+ control: { type: "inline-radio" },
+ },
+ },
+ args: {
+ Image: "True",
+ Number: "One",
+ }
+}
+
export const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
@@ -163,25 +183,26 @@ export const getCaptionForLocale = (locale) => {
}
};
-
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ // Replace key
+ args['button_option'] = args['Tag'];
+ delete args['Tag'];
+ return ;
+};
+
+export const AuthorColumnStory = Template.bind({});
+AuthorColumnStory.args = {
+ Type: 'Expanding Arrow',
+ Tag: 'Hyperlink',
+};
+
+// Documentation content
+AuthorColumnStory.parameters = {
+ docs: {
+ description: {
+ component: `
+
# Authors
@@ -269,3 +290,7 @@ Add the base layout style from
### Changelog
1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Components/UIcomponents/Buttons/Chips/Chips.stories.mdx b/stories/Components/UIcomponents/Buttons/Chips/Chips.stories.js
similarity index 74%
rename from stories/Components/UIcomponents/Buttons/Chips/Chips.stories.mdx
rename to stories/Components/UIcomponents/Buttons/Chips/Chips.stories.js
index bb1a172e2..027792eed 100644
--- a/stories/Components/UIcomponents/Buttons/Chips/Chips.stories.mdx
+++ b/stories/Components/UIcomponents/Buttons/Chips/Chips.stories.js
@@ -1,39 +1,38 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Chips } from "./Chips";
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Chips } from './Chips';
export const getCaptionForLocale = (locale) => {
switch (locale) {
- case "english":
- return { detail: "Label" };
- case "ukrainian":
- return { detail: "Мітка" };
- case "arabic":
- const arabicText = { detail: "ملصق" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail: "တံဆိပ်" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail: "ラベル" };
- return japaneseText;
+ case 'english':
+ return { detail: 'Label' };
+ case 'ukrainian':
+ return { detail: 'Мітка' };
+ case 'arabic':
+ return { detail: 'ملصق' };
+ case 'burmese':
+ return { detail: 'တံဆိပ်' };
+ case 'japanese':
+ return { detail: 'ラベル' };
default:
- return { detail: "Label" };
+ return { detail: 'Label' };
}
};
-
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return ;
+};
+
+export const ChipsStory = Template.bind({});
+ChipsStory.args = {
+ Type: 'Without X',
+};
+ChipsStory.parameters = {
+ docs: {
+ description: {
+ component: `
# Buttons and Labels
A button describes what action will be performed when a user clicks or touches it.
@@ -112,3 +111,7 @@ NA
### Changelog
1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Components/UIcomponents/Buttons/CtaButton/CtaButton.stories.mdx b/stories/Components/UIcomponents/Buttons/CtaButton/CtaButton.stories.js
similarity index 72%
rename from stories/Components/UIcomponents/Buttons/CtaButton/CtaButton.stories.mdx
rename to stories/Components/UIcomponents/Buttons/CtaButton/CtaButton.stories.js
index 6e79c08f6..152f7f28f 100644
--- a/stories/Components/UIcomponents/Buttons/CtaButton/CtaButton.stories.mdx
+++ b/stories/Components/UIcomponents/Buttons/CtaButton/CtaButton.stories.js
@@ -1,52 +1,43 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { CtaButton } from "./CtaButton";
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { CtaButton } from './CtaButton';
export const getCaptionForLocale = (locale) => {
switch (locale) {
- case "english":
- return { detail: "READ MORE" };
- case "ukrainian":
- return { detail: "ЧИТАТИ ДАЛІ" };
- case "arabic":
- const arabicText = { detail: "اقرأ أكثر" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail: "ပိုပြီးဖတ်ပါ" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail: "続きを読む" };
- return japaneseText;
+ case 'english':
+ return { detail1: 'READ MORE' };
+ case 'ukrainian':
+ return { detail1: 'ЧИТАТИ ДАЛІ' };
+ case 'arabic':
+ return { detail1: 'اقرأ أكثر' };
+ case 'burmese':
+ return { detail1: 'ပိုပြီးဖတ်ပါ' };
+ case 'japanese':
+ return { detail1: '続きを読む' };
default:
- return { detail: "READ MORE" };
+ return { detail1: 'READ MORE' };
}
};
-
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ args['button_option'] = args['Type'];
+ delete args['Type'];
+ return ;
+};
+export const CtaButtonStory = Template.bind({});
+CtaButtonStory.args = {
+ Type: 'Primary',
+ State: 'Active',
+ Icon: 'Arrow',
+};
+
+// Documentation content
+CtaButtonStory.parameters = {
+ docs: {
+ description: {
+ component: `
# Buttons and Labels
A button describes what action will be performed when a user clicks or touches it.
@@ -109,7 +100,7 @@ The Gray-400 Secondary button is in a disabled state and will require error corr
{(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
- return ;
+ return ;
}}
@@ -140,3 +131,7 @@ NA
### Changelog
1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Components/UIcomponents/Buttons/CtaLink/CtaLink.stories.mdx b/stories/Components/UIcomponents/Buttons/CtaLink/CtaLink.stories.js
similarity index 59%
rename from stories/Components/UIcomponents/Buttons/CtaLink/CtaLink.stories.mdx
rename to stories/Components/UIcomponents/Buttons/CtaLink/CtaLink.stories.js
index 760dedbcf..b2fda9e2e 100644
--- a/stories/Components/UIcomponents/Buttons/CtaLink/CtaLink.stories.mdx
+++ b/stories/Components/UIcomponents/Buttons/CtaLink/CtaLink.stories.js
@@ -1,45 +1,61 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { Ctalink } from "./CtaLink";
+import React from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Ctalink } from './CtaLink';
+
+export default {
+ title: 'Components/UI components/Buttons/CTA link',
+ argTypes: {
+ Type: {
+ options: ['Expanding Arrow', 'Space'],
+ control: { type: 'inline-radio' },
+ },
+ Tag: {
+ options: ['Hyperlink', 'Inline'],
+ control: { type: 'inline-radio' },
+ },
+ },
+ args: {
+ Type: 'Expanding Arrow',
+ Tag: 'Hyperlink',
+ },
+};
export const getCaptionForLocale = (locale) => {
switch (locale) {
- case "english":
- const engText = { detail1: "READ MORE" };
- return engText;
- case "ukrainian":
- return { detail1: "ЧИТАТИ ДАЛІ" };
- case "arabic":
- const arabicText = { detail1: "اقرأ أكثر" };
- return arabicText;
- case "burmese":
- const burmeseText = { detail1: "ပိုပြီးဖတ်ပါ" };
- return burmeseText;
- case "japanese":
- const japaneseText = { detail1: "続きを読む" };
- return japaneseText;
+ case 'english':
+ return { detail1: 'READ MORE' };
+ case 'ukrainian':
+ return { detail1: 'ЧИТАТИ ДАЛІ' };
+ case 'arabic':
+ return { detail1: 'اقرأ أكثر' };
+ case 'burmese':
+ return { detail1: 'ပိုပြီးဖတ်ပါ' };
+ case 'japanese':
+ return { detail1: '続きを読む' };
default:
- return { detail1: "READ MORE" };
+ return { detail1: 'READ MORE' };
}
};
-
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ // Replace key
+ args['button_option'] = args['Tag'];
+ delete args['Tag'];
+ return ;
+};
+
+export const CtaLinkStory = Template.bind({});
+CtaLinkStory.args = {
+ Type: 'Expanding Arrow',
+ Tag: 'Hyperlink',
+};
+// Documentation content
+CtaLinkStory.parameters = {
+ docs: {
+ description: {
+ component: `
# Buttons and Labels
A button describes what action will be performed when a user clicks or touches it.
@@ -73,7 +89,7 @@ There are multiple button types in our design system
#### States
CTA Link:
-The CTA link with the arrow prompts the users to take action. and is in default state but the arrow does not expand.
+The CTA link with the arrow prompts the users to take action and is in default state but the arrow does not expand.
The CTA links with the arrow in the hover state which changes its appearance once the mouse hovers over it but the arrow does not expand.
@@ -81,18 +97,6 @@ The CTA link with space expand in default state is a space expand link where the
The CTA link with the arrow expand is in a hover state. When the mouse hovers over the link the text changes its appearance and the arrow expands.
-
-
### Usage
- Copy the HTML from the HTML Tab of canvas for either Chips, CTA Button, and CTA Link from the controls.
@@ -120,3 +124,7 @@ NA
### Changelog
1.0 — Released component
+`,
+ },
+ },
+};
diff --git a/stories/Components/UIcomponents/Cards/BioCard/BioCard.stories.mdx b/stories/Components/UIcomponents/Cards/BioCard/BioCard.stories.js
similarity index 91%
rename from stories/Components/UIcomponents/Cards/BioCard/BioCard.stories.mdx
rename to stories/Components/UIcomponents/Cards/BioCard/BioCard.stories.js
index 2167c0d7f..6f6769234 100644
--- a/stories/Components/UIcomponents/Cards/BioCard/BioCard.stories.mdx
+++ b/stories/Components/UIcomponents/Cards/BioCard/BioCard.stories.js
@@ -1,7 +1,29 @@
-import { Meta, Story, Canvas, Source } from "@storybook/addon-docs";
-import { BioCard } from "./BioCard";
-import img from "../../../../assets/images/bio.jpg";
-import img2 from "../../../../assets/images/modal.png";
+import React from 'react';
+import { Meta } from '@storybook/addon-docs';
+import { BioCard } from './BioCard';
+import img from '../../../../assets/images/bio.jpg';
+import img2 from '../../../../assets/images/modal.png';
+
+export default {
+ title: "Components/UI components/Cards/Bio card",
+ argTypes: {
+ size: {
+ name: "Size variant",
+ options: ["Large", "Medium"],
+ control: { type: "inline-radio" },
+ },
+ accent: {
+ name: "Hover accent color",
+ options: ["global", "yellow", "red", "green", "blue"],
+ control: { type: "inline-radio" },
+ },
+ },
+ args: {
+ size: "Medium",
+ accent: "global",
+ },
+};
+
export const getCaptionForLocale = (locale) => {
switch (locale) {
@@ -67,26 +89,35 @@ export const getCaptionForLocale = (locale) => {
}
};
-
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+};
+
+export const BioCardStory = Template.bind({});
+BioCardStory.args = {
+ size: "Medium",
+ accent: "global",
+};
+
+// Documentation content
+BioCardStory.parameters = {
+ docs: {
+ description: {
+ component: `
# Bio Content Card
A bio card is a profile summary of an author/leader along with their profile picture
@@ -117,27 +148,6 @@ The bio card requires a profile image, first and last name, title, profile summa
The bio card has a default and hover state. On hover, an accent color overlay is displayed over the profile photo.
-
-
### Usage
- Choose the size either large or medium from the control tab on canvas.
@@ -152,17 +162,15 @@ The bio card has a default and hover state. On hover, an accent color overlay is
Add the base layout style from
- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/bio-card.min.css,
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/modal.min.css,
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/bio-card.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/modal.min.css
- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/cta-link.min.css
#### JS:
-- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/modal.min.js.
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/modal.min.js
- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js
-The following behavior modifiers are available:
-
### Interactions
- The hover state is applied to the profile image only.
@@ -172,3 +180,7 @@ The following behavior modifiers are available:
### Changelog
1.0 — Released component
+`,
+ },
+ },
+};
\ No newline at end of file
diff --git a/stories/Components/UIcomponents/Cards/ContentCard/ContentCardImage.stories.mdx b/stories/Components/UIcomponents/Cards/ContentCard/ContentCardImage.stories.js
similarity index 100%
rename from stories/Components/UIcomponents/Cards/ContentCard/ContentCardImage.stories.mdx
rename to stories/Components/UIcomponents/Cards/ContentCard/ContentCardImage.stories.js
diff --git a/stories/assets/js/accordion.js b/stories/assets/js/accordion.js.broken
similarity index 100%
rename from stories/assets/js/accordion.js
rename to stories/assets/js/accordion.js.broken
diff --git a/stories/assets/js/all.js b/stories/assets/js/all.js.broken
similarity index 100%
rename from stories/assets/js/all.js
rename to stories/assets/js/all.js.broken
diff --git a/stories/assets/js/animation.js b/stories/assets/js/animation.js.broken
similarity index 100%
rename from stories/assets/js/animation.js
rename to stories/assets/js/animation.js.broken
diff --git a/stories/assets/js/author-filter.js b/stories/assets/js/author-filter.js.broken
similarity index 100%
rename from stories/assets/js/author-filter.js
rename to stories/assets/js/author-filter.js.broken
diff --git a/stories/assets/js/download-modal.js b/stories/assets/js/download-modal.js.broken
similarity index 100%
rename from stories/assets/js/download-modal.js
rename to stories/assets/js/download-modal.js.broken
diff --git a/stories/assets/js/expand-search.js b/stories/assets/js/expand-search.js.broken
similarity index 100%
rename from stories/assets/js/expand-search.js
rename to stories/assets/js/expand-search.js.broken
diff --git a/stories/assets/js/filter-search-bar.js b/stories/assets/js/filter-search-bar.js.broken
similarity index 100%
rename from stories/assets/js/filter-search-bar.js
rename to stories/assets/js/filter-search-bar.js.broken
diff --git a/stories/assets/js/fitText.js b/stories/assets/js/fitText.mdx
similarity index 100%
rename from stories/assets/js/fitText.js
rename to stories/assets/js/fitText.mdx
diff --git a/stories/assets/js/lang-switcher.js b/stories/assets/js/lang-switcher.mdx
similarity index 100%
rename from stories/assets/js/lang-switcher.js
rename to stories/assets/js/lang-switcher.mdx
diff --git a/stories/assets/js/lazyload.js b/stories/assets/js/lazyload.js.broken
similarity index 100%
rename from stories/assets/js/lazyload.js
rename to stories/assets/js/lazyload.js.broken
diff --git a/stories/assets/js/lightbox-gallery.js b/stories/assets/js/lightbox-gallery.js.broken
similarity index 100%
rename from stories/assets/js/lightbox-gallery.js
rename to stories/assets/js/lightbox-gallery.js.broken
diff --git a/stories/assets/js/modal.js b/stories/assets/js/modal.js.broken
similarity index 100%
rename from stories/assets/js/modal.js
rename to stories/assets/js/modal.js.broken
diff --git a/stories/assets/js/multi-select.js b/stories/assets/js/multi-select.js.broken
similarity index 100%
rename from stories/assets/js/multi-select.js
rename to stories/assets/js/multi-select.js.broken
diff --git a/stories/assets/js/navigation-data.js b/stories/assets/js/navigation-data.mdx
similarity index 100%
rename from stories/assets/js/navigation-data.js
rename to stories/assets/js/navigation-data.mdx
diff --git a/stories/assets/js/navigation.js b/stories/assets/js/navigation.js.broken
similarity index 100%
rename from stories/assets/js/navigation.js
rename to stories/assets/js/navigation.js.broken
diff --git a/stories/assets/js/our-expertise.js b/stories/assets/js/our-expertise.mdx
similarity index 97%
rename from stories/assets/js/our-expertise.js
rename to stories/assets/js/our-expertise.mdx
index 9826e6e4c..5169030aa 100644
--- a/stories/assets/js/our-expertise.js
+++ b/stories/assets/js/our-expertise.mdx
@@ -1,6 +1,7 @@
-/**
- * Our Expertise section
- */
+/\*\*
+
+* Our Expertise section
+ \*/
export function ourExpertise() {
// init slider
diff --git a/stories/assets/js/parallax.js b/stories/assets/js/parallax.js.broken
similarity index 100%
rename from stories/assets/js/parallax.js
rename to stories/assets/js/parallax.js.broken
diff --git a/stories/assets/js/resize.js b/stories/assets/js/resize.js.broken
similarity index 100%
rename from stories/assets/js/resize.js
rename to stories/assets/js/resize.js.broken
diff --git a/stories/assets/js/scrolling-progress-bar.js b/stories/assets/js/scrolling-progress-bar.js.broken
similarity index 100%
rename from stories/assets/js/scrolling-progress-bar.js
rename to stories/assets/js/scrolling-progress-bar.js.broken
diff --git a/stories/assets/js/sdg-modal.js b/stories/assets/js/sdg-modal.js.broken
similarity index 100%
rename from stories/assets/js/sdg-modal.js
rename to stories/assets/js/sdg-modal.js.broken
diff --git a/stories/assets/js/select.js b/stories/assets/js/select.mdx
similarity index 100%
rename from stories/assets/js/select.js
rename to stories/assets/js/select.mdx
diff --git a/stories/assets/js/sidebar.js b/stories/assets/js/sidebar.mdx
similarity index 100%
rename from stories/assets/js/sidebar.js
rename to stories/assets/js/sidebar.mdx
diff --git a/stories/assets/js/smartresize.js b/stories/assets/js/smartresize.js.broken
similarity index 100%
rename from stories/assets/js/smartresize.js
rename to stories/assets/js/smartresize.js.broken
diff --git a/stories/assets/js/smooth-bg-change.js b/stories/assets/js/smooth-bg-change.mdx
similarity index 100%
rename from stories/assets/js/smooth-bg-change.js
rename to stories/assets/js/smooth-bg-change.mdx
diff --git a/stories/assets/js/stats.js b/stories/assets/js/stats.js.broken
similarity index 100%
rename from stories/assets/js/stats.js
rename to stories/assets/js/stats.js.broken
diff --git a/stories/assets/js/sticky.js b/stories/assets/js/sticky.js.broken
similarity index 100%
rename from stories/assets/js/sticky.js
rename to stories/assets/js/sticky.js.broken
diff --git a/stories/assets/js/swiper.js b/stories/assets/js/swiper.js.broken
similarity index 100%
rename from stories/assets/js/swiper.js
rename to stories/assets/js/swiper.js.broken
diff --git a/stories/assets/js/tabs.js b/stories/assets/js/tabs.js.broken
similarity index 100%
rename from stories/assets/js/tabs.js
rename to stories/assets/js/tabs.js.broken
diff --git a/stories/assets/js/undp.js b/stories/assets/js/undp.js.broken
similarity index 100%
rename from stories/assets/js/undp.js
rename to stories/assets/js/undp.js.broken
diff --git a/stories/assets/js/viewport.js b/stories/assets/js/viewport.js.broken
similarity index 100%
rename from stories/assets/js/viewport.js
rename to stories/assets/js/viewport.js.broken
diff --git a/webpack.config.js b/webpack.config.js.broken
similarity index 100%
rename from webpack.config.js
rename to webpack.config.js.broken
diff --git a/webpack.entries.js b/webpack.entries.js.broken
similarity index 100%
rename from webpack.entries.js
rename to webpack.entries.js.broken
