diff --git a/stories/Atom/BaseTypography/BaseTypography.stories.js b/stories/Atom/BaseTypography/BaseTypography.stories.js
index c29914b3d..c66c867bf 100644
--- a/stories/Atom/BaseTypography/BaseTypography.stories.js
+++ b/stories/Atom/BaseTypography/BaseTypography.stories.js
@@ -348,7 +348,7 @@ export default {
- export const getCaptionForLocaleHeading = (locale) => {
+ const getCaptionForLocaleHeading = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -414,7 +414,7 @@ export default {
-export const getCaptionForLocaleAbbr = (locale) => {
+const getCaptionForLocaleAbbr = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -468,7 +468,7 @@ export const getCaptionForLocaleAbbr = (locale) => {
-export const getCaptionForLocaleBlockquote = (locale) => {
+const getCaptionForLocaleBlockquote = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -515,7 +515,7 @@ export const getCaptionForLocaleBlockquote = (locale) => {
};
-export const getCaptionForLocaleCite = (locale) => {
+const getCaptionForLocaleCite = (locale) => {
switch (locale) {
case "english":
const engText = { detail: "-Firstname Lastname" };
@@ -538,7 +538,7 @@ export const getCaptionForLocaleCite = (locale) => {
};
-export const getCaptionForLocaleCode = (locale) => {
+const getCaptionForLocaleCode = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -689,7 +689,7 @@ export const getLocaleForFigcaption = (locale) => {
}
};
-export const getCaptionForLocaleHr = (locale) => {
+const getCaptionForLocaleHr = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -730,7 +730,7 @@ export const getCaptionForLocaleHr = (locale) => {
};
-export const getCaptionForLocaleMark = (locale) => {
+const getCaptionForLocaleMark = (locale) => {
switch (locale) {
case "english":
const engText = { detail: "Eos nulla molestiae" };
@@ -751,7 +751,7 @@ export const getCaptionForLocaleMark = (locale) => {
}
};
-export const getCaptionForLocaleParagraph = (locale) => {
+const getCaptionForLocaleParagraph = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -788,7 +788,7 @@ export const getCaptionForLocaleParagraph = (locale) => {
};
-export const getCaptionForLocaleQuotation = (locale) => {
+const getCaptionForLocaleQuotation = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -826,7 +826,7 @@ export const getCaptionForLocaleQuotation = (locale) => {
-export const getCaptionForLocaleSmall = (locale) => {
+const getCaptionForLocaleSmall = (locale) => {
switch (locale) {
case "english":
const engText = { detail: "Et occaecati eos nulla molestiae repellat." };
@@ -855,7 +855,7 @@ export const getCaptionForLocaleSmall = (locale) => {
-export const getCaptionForLocaleList = (locale) => {
+const getCaptionForLocaleList = (locale) => {
switch (locale) {
case "english":
const engText = {
diff --git a/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.js b/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.js
index 82acf5ca8..d5ba502b3 100644
--- a/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.js
+++ b/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.js
@@ -4,182 +4,96 @@ 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.
-
-
-
-
- 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:
-
-
- JS:
-
-
- Changelog
- 1.0 — Released component
-
-);
-
-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
-`,
+ },
+ args: {
+ Colors: 'global',
+ Type: 'Large',
+ },
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ 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:
+
+
+ JS:
+
+
+ Changelog
+ 1.0 — Released component
+
+ ),
},
},
};
+
+const Template = (args) => ;
+
+export const ProgressBarNavigationStory = Template.bind({});
+
diff --git a/stories/Atom/Table/Table.stories.js b/stories/Atom/Table/Table.stories.js
index c08e1b3cf..5d96661e7 100644
--- a/stories/Atom/Table/Table.stories.js
+++ b/stories/Atom/Table/Table.stories.js
@@ -2,80 +2,33 @@ 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' },
- },
+ argTypes: {
+ size: {
+ options: ['large', 'small'],
+ control: { type: 'inline-radio' },
+ },
+ variant: {
+ options: ['default', 'striped', 'border'],
+ control: { type: 'inline-radio' },
},
- args: {
- size: 'large',
- variant: 'default',
- responsive: 'auto',
+ responsive: {
+ options: ['stacked', 'auto', 'scroll'],
+ control: { type: 'inline-radio' },
},
},
-};
-
-const Template = () => (
- <>
+ args: {
+ size: 'large',
+ variant: 'default',
+ responsive: 'auto',
+ },
+ parameters: {
+ docs: {
+ page: () => (
+ <>
Table
@@ -177,171 +130,65 @@ const Template = () => (
Changelog
1.0 — Released component
-);
+ ),
+ }
+ },
+};
-export const TableStory = () => ;
-TableStory.parameters = {
- docs: {
- source: {
- code: `
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { TableTag } from "./Table";
+export const Table = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return ;
+}
+
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
- case "english":
+ case 'english':
return {
- headertext: "Table header",
- tdtext: "Content Goes Here",
+ headertext: 'Table header',
+ tdtext: 'Content Goes Here',
details:
- "In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate",
+ 'In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate',
};
- case "ukrainian":
+ case 'ukrainian':
return {
- headertext: "Заголовок таблиці",
- tdtext: "вміст",
- details:
- "Програма ПРООН із підвищення стійкості та відновлення",
+ headertext: 'Заголовок таблиці',
+ tdtext: 'вміст',
+ details: 'Програма ПРООН із підвищення стійкості та відновлення',
};
- case "arabic":
+ case 'arabic':
return {
- headertext: "رأس الجدول",
- tdtext: "المحتوى يذهب هنا",
+ headertext: 'رأس الجدول',
+ tdtext: 'المحتوى يذهب هنا',
details:
- "في النشر والتصميم الجرافيكي ، الدمية هي عنصر نائب يستخدم عادة للتوضيح",
+ 'في النشر والتصميم الجرافيكي ، الدمية هي عنصر نائب يستخدم عادة للتوضيح',
};
- case "burmese":
+ case 'burmese':
return {
- headertext: "ဇယားခေါင်းစီး",
- tdtext: "အကြောင်းအရာကဒီမှာ",
+ headertext: 'ဇယားခေါင်းစီး',
+ tdtext: 'အကြောင်းအရာကဒီမှာ',
details:
- "ထုတ်ဝေခြင်းနှင့် ဂရပ်ဖစ်ဒီဇိုင်းများတွင်၊ သည် သရုပ်ပြရန်အတွက် အသုံးများသော နေရာယူထားသော စာသားဖြစ်သည်။",
+ 'ထုတ်ဝေခြင်းနှင့် ဂရပ်ဖစ်ဒီဇိုင်းများတွင်၊ သည် သရုပ်ပြရန်အတွက် အသုံးများသော နေရာယူထားသော စာသားဖြစ်သည်။',
};
- case "japanese":
+ case 'japanese':
return {
- headertext: "テーブルヘッダー",
- tdtext: "コンテンツはここにあります",
+ headertext: 'テーブルヘッダー',
+ tdtext: 'コンテンツはここにあります',
details:
- "出版やグラフィックデザインでは、ダミーはデモンストレーションに一般的に使用されるプレースホルダーテキストです",
+ '出版やグラフィックデザインでは、ダミーはデモンストレーションに一般的に使用されるプレースホルダーテキストです',
};
default:
return {
- headertext: "Table header",
- tdtext: "Content Goes Here",
+ headertext: 'Table header',
+ tdtext: 'Content Goes Here',
details:
- "In publishing and graphic design, dummy is a placeholder text commonly used to demonstrate",
+ '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/Components/Forms/Checkbox/Checkbox.stories.js b/stories/Components/Forms/Checkbox/Checkbox.stories.js
index a8065a6a6..72065dbf3 100644
--- a/stories/Components/Forms/Checkbox/Checkbox.stories.js
+++ b/stories/Components/Forms/Checkbox/Checkbox.stories.js
@@ -1,111 +1,122 @@
import React from 'react';
-import { Meta, Story } from '@storybook/addon-docs';
+import { Canvas, 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',
- },
- },
-};
+ page: () => (
+ <>
+ Checkbox
+ A checkbox or tick box is an interactive box that allows the user to select one, none, or multiple options.
-const Template = () => {
- const locale = 'english'; // Set default locale here or via controls in Storybook
- const caption = getCaptionForLocale(locale);
+ 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.
- return (
-
-
Checkbox
+
When to use:
+
+ - When the user needs to select or deselect multiple options.
+
-
Overview
-
- A checkbox or tick box is an interactive box that allows the user to
- select one, none, or multiple options.
-
+
Formatting
-
When to use:
-
Use a checkbox when the user needs to select or deselect multiple options.
+
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.
-
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.
-
Content
-
The checkbox is square-shaped. The color and the space inside the square indicates if the options are selected or not.
+
Behaviors
-
Behaviors
-
States
-
The checkbox has defaulted, checked, and hover states which indicates that an option is to be selected or has already been selected.
+
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.
+
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.
+
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.
+
Hover state
+
The Light Red colored checkbox with white space indicates the hover state which changes appearance when the mouse hovers over it.
-
- {(args) => (
-
+
+ {(args) => (
+
- )}
-
-
- Usage
-
- - Copy the HTML from the HTML tab of canvas and include the css file mentioned below.
-
-
- CSS and JS References
- CSS:
-
- - 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:
- N/A
-
- Interactions
-
- - The hover state is applied to the entire button.
- - The checked state is applied to the entire button.
-
-
- Changelog
- 1.0 — Released component
- Usage
+
+ - 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:
+
+
+ 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
+
+ )
+ },
+ },
+};
+
+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' };
+ }
+};
+
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
);
};
-export const CheckboxComponent = Template.bind({});
+export const CheckboxStory = Template.bind({});
+
+CheckboxStory.storyName = 'Checkbox';
\ No newline at end of file
diff --git a/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.js b/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.js
index e034ad72d..bcbfeb1b1 100644
--- a/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.js
+++ b/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.js
@@ -1,8 +1,8 @@
import React from 'react';
-import { Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
import CustomSelect from './CustomSelect';
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case 'english':
return 'Select Language';
@@ -24,79 +24,95 @@ export default {
component: CustomSelect,
parameters: {
docs: {
- title: 'Components/Forms/Dropdown/Select',
+ page: () => (
+ <>
+ 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 the select() function. If you need a fixed height dropdown, then apply height to the <ul> tag of the dropdown. It will scroll inside the dropdown.
+
+ CSS and JS References
+
+ CSS:
+ Add the base layout style from:
+
+
+ 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
+
+
+ ),
},
},
};
-const Template = () => {
- const locale = 'english'; // Set default locale here or via controls in Storybook
+const Template = (args, { globals: { locale } }) => {
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.
-
-
-
CSS and JS References
-
CSS:
-
- - 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:
-
- - 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
-
MultiSelect
+ The multiselect dropdown allows the user to select 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 the 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 a preset max height by applying a .fix-height class to the unordered list container.
+
+
+
+
+ - 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 a red tick in the default state indicates that the option is selected.
+ - The sidebar component with a red-colored box and a red tick in the hover state indicates 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 an external link icon in the hover state indicates that the option contains an external link related to the search and it changes appearance once the mouse hovers over it.
+
+
+
+
+ Usage:
+
+ - 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 CSS and JS files listed below.
+ - If you choose the Checkbox variant, then include
checkbox.min.css.
+ - If you choose the Radio button variant, then include
radio.min.css.
+ - Initialize the multi-select by calling the
multiSelect() function.
+
+
+ CSS and JS References
+
+ CSS:
+ Add the base layout style from:
+
+
+ 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
+
+
+ ),
+ },
+ },
};
-const Template = (args) => {
- const locale = 'english'; // Set default locale here or via controls in Storybook
+const Template = (args, { globals: { locale } }) => {
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.
-
-
Canvas
-
- {(args, { globals: { locale } }) => (
-
- )}
-
-
-
Usage
-
- - 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.
-
-
-
CSS and JS References
-
CSS:
-
- - 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
- {args.variant === 'Checkbox' && (
- - https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/checkbox.min.css
- )}
- {args.variant === 'Radio' && (
- - 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
-
Input Fields
+ The Input Field is used when the user is required to fill in the information.
-const Template = (args) => {
- const locale = 'english'; // Set default locale here or via controls in Storybook
- const caption = getCaptionForLocale(locale);
+ 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.
- return (
-
-
Input Fields
+
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.
-
Overview
-
The Input Field is used when the user is required to fill in the information.
+
+ - Base Input:
+ - Label:
+ - Help Text:
+ - Error message:
+
-
When to use:
-
Use the Input Field when the user needs to fill in data.
+
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.
+
-
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.
-
+
Behaviors
-
- - Base Input:
- - Label:
- - Help Text:
- - Error message:
-
+
States
+
The Input Field has four states: Default, Focus, Error, and Disabled.
-
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 CSS listed below.
+
-
+
CSS and JS References
-
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.
-
-
+
CSS:
+
Add the base layout style from:
+
-
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
-
JS:
-
NA
+
Interactions
+
+ - By clicking on the box, the user can fill in the information.
+
-
Interactions
-
- - By clicking on the box, the user can fill in the information.
-
+
Changelog
+
1.0 — Released component
-
Changelog
-
1.0 — Released component
-
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.
-
-
- CSS and JS References
-
- CSS:
-
-
- - 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
-
-);
-
export default {
title: 'Components/Forms/Radio',
+ component: Radio,
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ 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 hover states which indicate 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.
+
+
+ CSS and JS References
+
+ CSS:
+ Add the base layout style from:
+
+
+ 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
+
+
+ ),
+ },
+ }
};
+
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+}
+
+export const RadioStory = Template.bind({});
+RadioStory.storyName = 'Radio';
diff --git a/stories/Components/Forms/SearchExpand/SearchExpand.stories.js b/stories/Components/Forms/SearchExpand/SearchExpand.stories.js
index 4b056a893..2e4b2920c 100644
--- a/stories/Components/Forms/SearchExpand/SearchExpand.stories.js
+++ b/stories/Components/Forms/SearchExpand/SearchExpand.stories.js
@@ -1,7 +1,7 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { SearchExpand } from './SearchExpand';
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case 'english':
return { label: 'Category', value: 'category' };
@@ -18,83 +18,85 @@ export const getCaptionForLocale = (locale) => {
}
};
-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.
-
- CSS and JS References
-
- CSS:
-
-
- - 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
-
-);
-
export default {
title: 'Components/Forms/Search expand',
-};
+ component: SearchExpand,
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ Search expand
+ Input will increase on search click.
+
+ Overview
+ On Search icon click, input elements of type text will increase and be clickable to type. Upon typing the text, a close button will appear on the right side. On close icon click, the typed data will be erased from the input.
+
+ When to use:
+
+ - When the user needs to search.
+
+
+ Behaviors
+
+ States
+ The search expand feature has defaulted, active, and hover states which indicate that an option is to be selected or already selected.
+
+ The following behavior modifiers are available:
+
+ - Default state: The search icon is displayed and can be selected.
+ - Text on input state: A close icon appears alongside the search icon and input field.
+
+
+
+
+ Usage
+ Copy the HTML from the HTML tab of the canvas and include the JS and CSS files mentioned below.
+
+ CSS and JS References
+
+ CSS:
+ Add the base layout style from:
+
+
+ JS:
+
+
+ Changelog
+ 1.0 — Released component
+
+ )
+ },
+ },
+ };
+
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+}
+
+export const SearchExpandStory = Template.bind({});
+SearchExpandStory.storyname = 'Search expand';
+
diff --git a/stories/Components/Forms/TextPanel/TextPanel.stories.js b/stories/Components/Forms/TextPanel/TextPanel.stories.js
index 3782f89f6..caed759b3 100644
--- a/stories/Components/Forms/TextPanel/TextPanel.stories.js
+++ b/stories/Components/Forms/TextPanel/TextPanel.stories.js
@@ -1,7 +1,7 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas, ArgTypes } from "@storybook/addon-docs";
import { FormTypes } from "./TextPanel";
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
return {
@@ -84,10 +84,11 @@ export const getCaptionForLocale = (locale) => {
}
};
-export const parameters = {
- title: 'Components/Forms/Text panel',
+export default {
+ title: "Components/Forms/Text panel",
+ component: FormTypes,
argTypes: {
- variant: {
+ varient: {
options: [
"text panel and form",
"form with photo",
@@ -95,116 +96,112 @@ export const parameters = {
"stacked form",
],
control: { type: "radio" },
- },
+ },
},
args: {
variant: "text panel and form",
},
-};
-
-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.
-
- CSS and JS References
-
- CSS:
-
-
-
- JS:
-
- NA
-
- Changelog
-
- 1.0 — Released component
-
-);
-
-export default {
- title: "Components/Forms/Text panel",
- parameters,
-}
\ No newline at end of file
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ Text Panel
+ On the text panel, it shows all the forms structures.
+
+ Overview
+ The text panel is the page for form structure that shows how input fields can be used in various 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 the canvas and include the CSS files mentioned below.
+
+ CSS and JS References
+
+ CSS:
+ Add the base layout style from:
+
+
+ JS:
+ NA
+
+ Changelog
+ 1.0 — Released component
+
+ )
+ }
+ }
+}
+
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+}
+
+export const TextPanelStory = Template.bind({});
+TextPanelStory.storyName = 'Text panel';
\ No newline at end of file
diff --git a/stories/Components/Forms/Textarea/Textarea.stories.js b/stories/Components/Forms/Textarea/Textarea.stories.js
index 1f588c455..32713ae17 100644
--- a/stories/Components/Forms/Textarea/Textarea.stories.js
+++ b/stories/Components/Forms/Textarea/Textarea.stories.js
@@ -1,7 +1,7 @@
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Textarea } from './Textarea';
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case 'english':
return {
@@ -91,7 +91,7 @@ export const getCaptionForLocale = (locale) => {
}
};
-export const parameters = {
+export default {
title: 'Components/Forms/Textarea',
argTypes: {
State: {
@@ -102,117 +102,99 @@ export const parameters = {
args: {
State: 'Default',
},
-};
-
-export const TextareaComponent = () => (
- <>
- (
+ <>
+ 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 cannot be used.
+
+
+
+
+ Usage
+ Copy the HTML from the HTML tab of the canvas and include the CSS file mentioned below.
+
+ CSS and JS References
+
+ CSS:
+ Add the base layout style from:
+
+
+ JS:
+ NA
+
+ Interactions
+ By clicking on the text area, data can be entered into it.
+
+ Changelog
+ 1.0 — Released component
+
+ )
+ }
+ }
+}
+
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+}
- 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.
+export const TextareaStory = Template.bind({});
+TextareaStory.storyName = 'Textarea';
- 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:
-
-
- - 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
-
-);
-
-export default {
- title: 'Components/Forms/Textarea',
-};
diff --git a/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.js b/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.js
index 823c2c16c..b7ccfe10b 100644
--- a/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.js
+++ b/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.js
@@ -1,7 +1,7 @@
import { Meta, Story, Canvas } from "@storybook/addon-docs";
import { Breadcrumbcomponent } from "./Breadcrumbs";
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
return [
@@ -48,7 +48,7 @@ export const getCaptionForLocale = (locale) => {
}
};
-export const parameters = {
+export default {
title: 'Components/Navigation components/Breadcrumbs',
argTypes: {
Color: {
@@ -57,120 +57,95 @@ export const parameters = {
},
},
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.
-
-
- CSS and JS References
-
- CSS:
-
-
-
- JS:
-
-
-
- Interactions
+ args: {
+ Color: "Black",
+ },
+ docs: {
+ page: () => (
+ <>
+ 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 the viewport.min.js file.
+
+
+ CSS and JS References
+
+ CSS:
+ Add the base layout style from:
+
+
+ JS:
+
+
+ Interactions
+ By clicking on the breadcrumb, the current page is redirected to the respective previous page.
+
+ Changelog
+ 1.0 — Released component
+
+
+ )
+ }
+ },
+};
-
- - By clicking on the breadcrumb, the current page is redirected to the respective previous page.
-
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+}
- Changelog
+export const Breadcrumbs = Template.bind({});
+Breadcrumbs.storyName = "Breadcrumbs";
- 1.0 — Released component
-
-);
-export default {
- title: 'Components/Navigation components/Breadcrumbs',
- parameters,
-};
diff --git a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js
index b405b08a4..d6be378f2 100644
--- a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js
+++ b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js
@@ -1,8 +1,9 @@
+import React from "react";
import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import CountrySiteHeader from "./CountrySiteHeader";
+import CountrySiteHeader from "./CountrySiteHeader";
import { getCaptionForLocale as Languageswitcher } from "../../../UIcomponents/LanguageSwitcher/LanguageSwitcher.stories.js";
-export const getNavLinks = (locale) => {
+const getNavLinks = (locale) => {
switch (locale) {
case "english":
return [
@@ -49,7 +50,7 @@ export const getNavLinks = (locale) => {
}
};
-export const getSiteTitle = (locale) => {
+const getSiteTitle = (locale) => {
switch (locale) {
case "english":
return { label: "REGION", span: "Site Title" };
@@ -66,7 +67,7 @@ export const getSiteTitle = (locale) => {
}
};
-export const getLocationDataForLocale = (locale) => {
+const getLocationDataForLocale = (locale) => {
switch (locale) {
case "english":
return { detail: "Locations" };
@@ -83,7 +84,7 @@ export const getLocationDataForLocale = (locale) => {
}
};
-export const getBackForLocale = (locale) => {
+const getBackForLocale = (locale) => {
switch (locale) {
case "english":
return { detail: "Back" };
@@ -100,7 +101,7 @@ export const getBackForLocale = (locale) => {
}
};
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
return "Select Language";
@@ -117,7 +118,7 @@ export const getCaptionForLocale = (locale) => {
}
};
-export const getSelectlanguage = (locale) => {
+const getSelectlanguage = (locale) => {
switch (locale) {
case "english":
return "Select Language";
@@ -134,7 +135,7 @@ export const getSelectlanguage = (locale) => {
}
};
-export const menuData = (locale) => {
+const menuData = (locale) => {
switch (locale) {
case "english":
return [
@@ -169,59 +170,272 @@ export const menuData = (locale) => {
}
};
-export default {
- title: "Components/Navigation components/Main navigation/Country header",
-};
+export default {
+ title: "Components/Navigation components/Main navigation/Country Site Header",
+ component: CountrySiteHeader,
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+
+ Country Header
+ With mega menu and menu overflow
-CountryHeader.parameters = {
- docs: {
- description: {
- component: `
- return (
-
- );
+ 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 maximum 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, and a .mobile-nav div to contain all the mobile elements. This setup is recommended for a more flexible structure and can implement the overflow functionality if desired.
+
+ <header class="country-header">
+ <section class="header">
+ <div class="grid-container fluid">
+ <div class="grid-x grid-margin-x align-content-middle">
+
+ <div class="cell small-8 large-2 shrink align-self-middle top-left">
+ Logo and sitename ...
+ </div>
+
+ <div class="cell small-1 large-auto align-content-middle top-center">
+ .. Main menu ...
+ </div>
+
+ <div class="cell small-3 large-auto top-right">
+ Language selector, globe link, and search link icon and call to action link ...
+ </div>
+
+ <div class="grid-container full menu__overflow__container">
+ <ul class="overflow">
+ Add this menu__overflow__container section and empty ul.overflow div
+ if you want the menu overflow functionality.
+ </ul>
+ </div>
+
+ <div class="mobile-nav">
+ Mobile navigation, menu, and links go in here ...
+ </div>
+
+ </div>
+ </div>
+
+ </section>
+ </header>
+
+
+ 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.
+
+ <header class="country-header">
+ <section class="header">
+ <div class="grid-container fluid">
+ <div class="grid-x grid-margin-x align-content-middle">
+
+ <div class="cell large-9 small-8 align-self-middle top-left">
+ Logo and sitename...
+ Main menu
+ </div>
+
+ <div class="cell large-3 small-3 top-right">
+ Language selector, globe link, and search link icon and call to action link...
+ </div>
+
+ <div class="mobile-nav">
+ Mobile navigation, menu, and links go in here...
+ </div>
+
+ </div>
+ </div>
+
+ </section>
+ </header>
+
+ 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 them 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.
+
+ <div class="cell small-1 large-auto align-content-middle top-center">
+ <ul class="overflow">
+ Menu items go here. It is important to add the overflow class to the parent ul, otherwise overflow won't trigger.
+ </ul>
+ </div>
+
+ ...top-right container here...
+
+ <div class="grid-container full menu__overflow__container">
+ <ul class="overflow">
+ Add this menu__overflow__container section after the top-right div and before the mobile-nav div.
+ </ul>
+ </div>
+
+ ... mobile nav container here ...
+
+
+
+ States
+
+ 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 mega menu Usage:
+
+ - Copy HTML from the HTML tab of canvas and also include the CSS and JS files listed below.
+ - Initialize the
navigationInitialize(), langSwitch() functions in your JS file’s document ready, For example:
+
+
+ {/*
+ $(document).ready(function() {
+ navigationInitialize();
+ });
+
*/}
+
+ Overflow Usage:
+
+ - 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:
+
+
+ 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 the overflow container.
+
+
+ Changelog
+ 1.3 — Released component
+
+
+ )
+ }
+ }
+}
+
+const Template = (args, { globals: { locale } }) => {
+ let lang = locale === "en" ? "english" : locale;
+ const caption = getCaptionForLocale(locale);
+ const navigationData = getNavLinks(locale);
+ const backcaption = getBackForLocale(locale);
+ const siteTitleData = getSiteTitle(locale);
+ return (
+
+ );
+}
+
+export const CountrySiteHeaderStory = Template.bind({});
+CountrySiteHeaderStory.storyName = 'Country Header';
diff --git a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js
index 73139f3e2..ef32527af 100644
--- a/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js
+++ b/stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js
@@ -1,4 +1,11 @@
-export const getNavLinks = (locale) => {
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import CountrySiteHeaderDropdown from './CountrySiteHeaderDropdown';
+import { Canvas } from '@storybook/blocks';
+import { getCaptionForLocale as Languageswitcher } from "../../../UIcomponents/LanguageSwitcher/LanguageSwitcher.stories.js";
+
+
+const getNavLinks = (locale) => {
switch (locale) {
case "english":
return [
@@ -45,7 +52,7 @@ export const getNavLinks = (locale) => {
}
};
-export const getSiteTitle = (locale) => {
+const getSiteTitle = (locale) => {
switch (locale) {
case "english":
return { label: "REGION", span: "Site Title" };
@@ -62,7 +69,7 @@ export const getSiteTitle = (locale) => {
}
};
-export const getLocationDataForLocale = (locale) => {
+const getLocationDataForLocale = (locale) => {
switch (locale) {
case "english":
return { detail: "Locations" };
@@ -79,7 +86,7 @@ export const getLocationDataForLocale = (locale) => {
}
};
-export const getBackForLocale = (locale) => {
+const getBackForLocale = (locale) => {
switch (locale) {
case "english":
return { detail: "Back" };
@@ -96,7 +103,7 @@ export const getBackForLocale = (locale) => {
}
};
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
return "Select Language";
@@ -113,7 +120,7 @@ export const getCaptionForLocale = (locale) => {
}
};
-export const getSelectlanguage = (locale) => {
+const getSelectlanguage = (locale) => {
switch (locale) {
case "english":
return "Select Language";
@@ -130,7 +137,7 @@ export const getSelectlanguage = (locale) => {
}
};
-export const menuData = (locale) => {
+const menuData = (locale) => {
switch (locale) {
case "english":
return [
@@ -158,6 +165,7 @@ export const menuData = (locale) => {
export default {
title: "Components/Navigation components/Main navigation/Country header - Dropdown menu",
+ component: CountrySiteHeaderDropdown,
argTypes: {
cta_enabled: {
name: "Enable CTA",
@@ -173,335 +181,348 @@ export default {
args: {
cta_enabled: "Off",
menu_extended: "Off",
- }
-}
+ },
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+Country Header
-const Template = (args, { globals: { locale } }) => {
+With dropdown menu and menu overflow
- const caption = getCaptionForLocale(locale);
- const navigationData = getNavLinks(locale);
- const backcaption = getBackForLocale(locale);
- const siteTitleData = getSiteTitle(locale);
- return (
- The Country Site Header is a header that contains the site name.
- siteTitleData={siteTitleData}
- backcaption={backcaption}
- locale={locale}
- navigationData={navigationData}
- menuData={menuData(locale)}
- languageswitcherData={Languageswitcher(locale)}
- text={caption}
- locationData={getLocationDataForLocale(locale)}
- langSelect={getSelectlanguage(locale)}
- {...args}
- >
- );
-};
+Overview
-export const CountryHeaderDropdownStory = Template.bind({});
+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.
-CountryHeaderDropdownStory.args = {
- cta_enabled: "Off",
- menu_extended: "Off",
-};
+When to use:
-CountryHeaderDropdownStory.parameters = {
- docs: {
- description: {
- component: `
-
-
-
- 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.
-
-
-
- <header class="country-header">
- <section class="header">
- <div class="grid-container fluid">
- <div class="grid-x grid-margin-x align-content-middle">
- <div class="cell small-8 large-2 shrink align-self-middle top-left">
- Logo and sitename ...
- </div>
- <div class="cell small-1 large-auto align-content-middle top-center">
- Main menu ...
- </div>
- <div class="cell small-3 large-auto top-right">
- Language selector, globe link, and search link icon and
- call to action link ...
- </div>
- <div class="grid-container full menu__overflow__container">
- <ul class="overflow">
- Add this menu__overflow__container section and
- empty ul.overflow div if you want the menu
- overflow functionality.
- </ul>
- </div>
- <div class="mobile-nav">
- Mobile navigation, menu, and links go in here ...
- </div>
- </div>
- </div>
- </section>
- </header>
-
-
-
- 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.
-
-
-
- <header class="country-header">
- <section class="header">
- <div class="grid-container fluid">
- <div class="grid-x grid-margin-x align-content-middle">
- <div class="cell large-9 small-8 align-self-middle top-left">
- Logo and sitename...
- Main menu
- </div>
- <div class="cell large-3 small-3 top-right">
- Language selector, globe link, and search link icon and
- call to action link...
- </div>
- <div class="mobile-nav">
- Mobile navigation, menu, and links go in here...
- </div>
- </div>
- </div>
- </section>
- </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.
-
-
-
- <div class="... top-center"> // Main parent div in header to set the menu
- <nav class="menu"> // Important to have the .menu class
- <ul> // add class="overflow"
- <li>
- // Links without children links need no special classes or settings.
- <a href="">Link title here</a>
- </li>
- <li class="has-submenu">
- <a href="">Link with children</a>
- <ul class="submenu">
- <li class="has-submenu">
- <a href="">Child link with children</a>
- <ul class="submenu">
- <li>
- <a>Deep child link</a>
- </li>
- </ul>
- </li>
- </ul>
- </li>
- </ul>
- </nav>
+
+ - 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.
+
+
+
+<header class="country-header">
+ <section class="header">
+ <div class="grid-container fluid">
+ <div class="grid-x grid-margin-x align-content-middle">
+ <div class="cell small-8 large-2 shrink align-self-middle top-left">
+ Logo and sitename ...
</div>
-
-
- 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.
-
-
-
<div class="cell small-1 large-auto align-content-middle top-center">
+ Main menu ...
+ </div>
+ <div class="cell small-3 large-auto top-right">
+ Language selector, globe link, and search link icon and
+ call to action link ...
+ </div>
+ <div class="grid-container full menu__overflow__container">
<ul class="overflow">
- Menu items go here. It is important to add the overflow class to the parent ul,
- otherwise overflow wont trigger.
+ Add this menu__overflow__container section and
+ empty ul.overflow div if you want the menu
+ overflow functionality.
</ul>
</div>
+ <div class="mobile-nav">
+ Mobile navigation, menu, and links go in here ...
+ </div>
+ </div>
+ </div>
+ </section>
+</header>
+
+
- top-right container 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"
- <div class="grid-container full menu__overflow__container">
- <ul class="overflow">
- Add this menu__overflow__container section after the top-right div and before
- the mobile-nav div.
- </ul>
+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.
+
+
+
+<header class="country-header">
+ <section class="header">
+ <div class="grid-container fluid">
+ <div class="grid-x grid-margin-x align-content-middle">
+ <div class="cell large-9 small-8 align-self-middle top-left">
+ Logo and sitename...
+ Main menu
+ </div>
+ <div class="cell large-3 small-3 top-right">
+ Language selector, globe link, and search link icon and
+ call to action link...
</div>
+ <div class="mobile-nav">
+ Mobile navigation, menu, and links go in here...
+ </div>
+ </div>
+ </div>
+ </section>
+</header>
+
+
+
+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.
+
+
+
+<div class="... top-center"> <!-- Main parent div in header to set the menu -->
+ <nav class="menu"> <!-- Important to have the .menu class -->
+ <ul> <!-- add class="overflow" -->
+ <li>
+ <a href="">Link title here</a>
+ </li>
+ <li class="has-submenu">
+ <a href="">Link with children</a>
+ <ul class="submenu">
+ <li class="has-submenu">
+ <a href="">Child link with children</a>
+ <ul class="submenu">
+ <li>
+ <a>Deep child link</a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </nav>
+</div>
+
+
+
- mobile nav container here ...
-
-
- 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.
- - Initialize the navigationInitialize(), navigationMultiLevelEdgeDetection(), and langSwitch() function in your js file’s document ready. For example:
-
-
-
- $(document).ready(function(){
- navigationInitialize();
- navigationMultiLevelEdgeDetection();
- });
-
-
- Overflow Usage:
-
- - In addition to the steps above, Initialize the navigationOverFlow() function in your js file’s document ready.
-
- CSS and JS References
- CSS:
+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.
+
+
+
+<div class="cell small-1 large-auto align-content-middle top-center">
+ <ul class="overflow">
+ Menu items go here. It is important to add the overflow class to the parent ul,
+ otherwise overflow wont trigger.
+ </ul>
+</div>
+
+top-right container here...
+
+<div class="grid-container full menu__overflow__container">
+ <ul class="overflow">
+ Add this menu__overflow__container section after the top-right div and before
+ the mobile-nav div.
+ </ul>
+</div>
+
+mobile nav container here ...
+
+
+
+
+States
+
+There are three states: Default, Tablet, and Mobile.
+
+
+ - Default
- - 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/menu-multi-level.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
+ - Without Progress Bar
+ - With Progress Bar
+ - Without overflow menu functionality
+ - With overflow menu functionality
- JS:
+
+ - Tablet
- - 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
+ - Without Progress Bar
+ - With Progress Bar
+ - Without overflow menu functionality
+ - With overflow menu functionality
- Interactions
+
+ - Mobile
- - 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.
- - Hovering over the main menu items will display dropdown items, if they exist.
- - If overflow is enabled, clicking on the 3 dot button will open overflow container.
+ - Without Progress Bar
+ - With Progress Bar
- Changelog
- 1.3 — Released component
- `,
- },
- },
+
+
+
+
+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.
+ - Initialize the navigationInitialize(), navigationMultiLevelEdgeDetection(), and langSwitch() function in your js file’s document ready. For example:
+
+
+
+
+
+
+
+
+Overflow Usage:
+
+
+ - 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
+
+
+
+If adding the menu overflow functionality, add the style from
+
+
+
+JS:
+
+
+
+
+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.
+ - Hovering over the main menu items will display dropdown items, if they exist.
+ - If overflow is enabled, clicking on the 3 dot button will open overflow container.
+
+
+Changelog
+
+1.3 — Released component
+
+
+ )
+ }
+ }
+}
+
+const Template = (args, { globals: { locale, accent } }) => {
+ let lang = locale === "en" ? "english" : locale;
+ const caption = getCaptionForLocale(locale);
+ const navigationData = getNavLinks(locale);
+ const backcaption = getBackForLocale(locale);
+ const siteTitleData = getSiteTitle(locale);
+ return (
+
+ );
};
+
+export const CountrySiteHeaderDropdownStory = Template.bind({});
+CountrySiteHeaderDropdownStory.storyName = "Country Header - Dropdown Menu";
diff --git a/stories/Components/Navigationcomponents/Menu/Menu.stories.js b/stories/Components/Navigationcomponents/Menu/Menu.stories.js
index 9556df65a..a90859df9 100644
--- a/stories/Components/Navigationcomponents/Menu/Menu.stories.js
+++ b/stories/Components/Navigationcomponents/Menu/Menu.stories.js
@@ -1,7 +1,7 @@
import { Meta, Story, Canvas } from "@storybook/addon-docs";
import { Menu } from "./Menu";
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case "english":
const engText = {
@@ -153,22 +153,46 @@ export const getCaptionForLocale = (locale) => {
export default {
title: "Components/Navigation components/Menu",
component: Menu,
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ 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.
+
+
+
+
+ )
+ }
+ }
};
-MenuStory.parameters = {
- docs: {
- source: {
- code: `
+const Template = (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return (
+
+ );
+}
+
+export const MenuStory = Template.bind({});
+MenuStory.storyNamer = "Menu";
+
-
- `,
- },
- },
-};
diff --git a/stories/Components/Navigationcomponents/Pagination/Pagination.stories.js b/stories/Components/Navigationcomponents/Pagination/Pagination.stories.js
index 5117a076b..5623edd48 100644
--- a/stories/Components/Navigationcomponents/Pagination/Pagination.stories.js
+++ b/stories/Components/Navigationcomponents/Pagination/Pagination.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Pagination } from './Pagination';
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case 'english':
const engText = { text: 'Page', text2: 'of' };
@@ -28,92 +28,76 @@ export default {
component: Pagination,
parameters: {
docs: {
- description: {
- component: `
-# Pagination
-
-The Pagination component divides the content of the website into different pages.
-
-### Overview
-
-The Pagination component allows users to make large amounts of content easy to find and breaks up several entries or web content into multiple pages.
-
-When to use:
-
-- When web content needs to be divided into pages.
-
-Formatting
-
-#### Default
-
-The Pagination component displays the number of the page and contains navigational arrows to flip through the pages. The dark colored arrow represents that there are more pages to go backward or forwards. The Light colored arrow represents the last or first page.
-
-### Behaviors
-
-#### States
-
-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
-2. Include below listed CSS files
-
-### 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/pagination.min.css
-
-#### JS:
-
-NA
-
-### Interactions
-
-By clicking on the forward or backward arrow, the pages are flipped forwards or backwards.
-
-### Changelog
-
-1.0 — Released component
- `,
- },
- },
- },
+ page: () => (
+ <>
+ Pagination
+ The Pagination component divides the content of the website into different pages.
+
+ Overview
+ The Pagination component allows users to make large amounts of content easy to find and breaks up several entries or web content into multiple pages.
+ When to use:
+
+ - When web content needs to be divided into pages.
+
+
+ Formatting
+ Default
+ The Pagination component displays the number of the page and contains navigational arrows to flip through the pages. The dark colored arrow represents that there are more pages to go backward or forwards. The light colored arrow represents the last or first page.
+
+ Behaviors
+ States
+ There is only the default state of Pagination.
+
+
+
+ Usage:
+
+ - Copy the HTML from the HTML tab of canvas and add it in your HTML file.
+ - Include below listed CSS files.
+
+
+ CSS and JS References
+ CSS:
+
+ JS:
+ NA
+
+ Interactions
+ By clicking on the forward or backward arrow, the pages are flipped forwards or backwards.
+
+ Changelog
+ 1.0 — Released component
+
+ )
+ }
+ }
};
-export const PaginationStory = (args, { globals: { locale } }) => {
+const Template = (args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
-
return (
-
+
);
-};
+}
-PaginationStory.parameters = {
- docs: {
- source: {
- code: `
-
+export const PaginationStory = Template.bind({});
+PaginationStory.storyName = 'Pagination';
-
- `,
- },
- },
-};
+
\ No newline at end of file
diff --git a/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.js b/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.js
index 75f3ee5b3..c3082b994 100644
--- a/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.js
+++ b/stories/Components/Navigationcomponents/Sidebar/Sidebar.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Sidebar } from './Sidebar';
-export const getCaptionForLocale = (locale) => {
+const getCaptionForLocale = (locale) => {
switch (locale) {
case 'english':
return {
@@ -120,261 +120,124 @@ export 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.
+ page: () => (
+ <>
+ 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:
+
+ - The White colored box with the default state indicates that the sidebar is not opened or expanded yet.
+ - The White colored box with down arrow and default state indicates that the sidebar isn’t open but expanded.
+ - The White colored box with the up arrow and default state indicates that the sidebar is opened and expanded.
+
+
+Hover state:
+
+ - The Gray coloured box with hover state indicates that once the mouse is hovered over the sidebar it changes appearance.
+ - 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.
+ - 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:
+
+ - The Blue colored box with selected state indicates that the sidebar is selected but it isn’t opened or expanded.
+ - 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.
+ - 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.
+ - 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:
+
+ - 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
- `,
- },
+Usage:
+
+ - Copy HTML from the HTML tab of canvas and also include CSS and JS files listed below.
+ - Initialize the sidebar for mobile and desktop by calling
sidebarNav(), sidebarMenu() functions.
+
+
+CSS and JS References
+CSS:
+
+
+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 Template = (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.
+export const SidebarStory = Template.bind({});
+SidebarStory.storyName = 'Sidebar';
-### 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
- `,
- },
- },
- };