converted more files

undp · Aug 13, 2024 · 1649e19 · 1649e19
1 parent 2764a53
commit 1649e19
Show file tree

Hide file tree

Showing 17 changed files with 1,947 additions and 2,119 deletions.
diff --git 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
@@ -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 = () => (
-  <>
-    <h1>Progress Bar</h1>
-
-    <p>
-      The Progress Bar is used to display an indicator showing the completion progress of a task, typically displayed as a progress bar.
-    </p>
-
-    <h3>When to use:</h3>
-    <ul>
-      <li>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.</li>
-    </ul>
-
-    <h3>Formatting</h3>
-    <h4>Default</h4>
-    <p>
-      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.
-    </p>
-
-    <p>
-      It has different color variations, which increase the length of the color based on the amount of scrolling done by the user.
-    </p>
-
-    <Canvas>
-      <Story
-        name="Progress bar navigation"
-        parameters={{
-          layout: 'fullscreen',
-          docs: {
-            story: {
-              inline: false,
-            },
-          },
-        }}
-      >
-        {(args, { globals: { accent } }) => {
-          return <ProgressBarNavigation {...args}></ProgressBarNavigation>;
-        }}
-      </Story>
-    </Canvas>
-
-    <h3>Usage</h3>
-    <p>To use this component, follow these steps:</p>
-    <ul>
-      <li>Copy the HTML from the canvas</li>
-      <li>Add it to your HTML page</li>
-      <li>Include the CSS and JS listed below</li>
-      <li>You should have loader-ready</li>
-    </ul>
-
-    <h3>CSS and JS References</h3>
-
-    <h4>CSS:</h4>
-    <ul>
-      <li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css" target="_blank">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css</a></li>
-      <li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/progress-bar.min.css" target="_blank">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/progress-bar.min.css</a></li>
-    </ul>
-
-    <h4>JS:</h4>
-    <ul>
-      <li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/scrolling-progress-bar.min.js" target="_blank">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/scrolling-progress-bar.min.js</a></li>
-    </ul>
-
-    <h3>Changelog</h3>
-    <p>1.0 — Released component</p>
-  </>
-);
-
-export const ProgressBarNavigationStory = () => <Template />;
-ProgressBarNavigationStory.parameters = {
-  docs: {
-    source: {
-      code: `
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-import { ProgressBarNavigation } from "./ProgressBarNavigation";
-
-<Meta
-  title="Utilities/Progress bar navigation"
-  argTypes={{
+  argTypes: {
     Type: {
-      name: "Type",
-      options: ["Large", "Small"],
-      control: { type: "inline-radio" },
+      name: 'Type',
+      options: ['Large', 'Small'],
+      control: { type: 'inline-radio' },
     },
     Colors: {
-      name: "Accent color",
-      options: ["global", "yellow", "red", "green", "blue"],
-      control: { type: "inline-radio" },
+      name: 'Accent color',
+      options: ['global', 'yellow', 'red', 'green', 'blue'],
+      control: { type: 'inline-radio' },
     },
-  }}
-  args={{
-    Colors: "global",
-    Type: "Large",
-  }}
-/>
-
-# 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.
-
-<Canvas>
-  <Story
-    name="Progress bar navigation"
-    parameters={{
-      layout: "fullscreen",
-      docs: {
-        story: {
-          inline: false,
-        },
-      },
-    }}
-  >
-    {(args, { globals: { accent } }) => {
-      return <ProgressBarNavigation {...args}></ProgressBarNavigation>;
-    }}
-  </Story>
-</Canvas>
-
-### 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: () => (
+        <>
+        <h1>Progress Bar</h1>
+
+        <p>
+          The Progress Bar is used to display an indicator showing the completion progress of a task, typically displayed as a progress bar.
+        </p>
+
+        <h3>When to use:</h3>
+        <ul>
+          <li>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.</li>
+        </ul>
+
+        <h3>Formatting</h3>
+        <h4>Default</h4>
+        <p>
+          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.
+        </p>
+
+        <p>
+          It has different color variations, which increase the length of the color based on the amount of scrolling done by the user.
+        </p>
+
+        <Canvas>
+          <Story
+            name="Progress bar navigation"
+            parameters={{
+              layout: 'fullscreen',
+              docs: {
+                story: {
+                  inline: false,
+                },
+              },
+            }}
+          >
+            {(args, { globals: { accent } }) => {
+              return <ProgressBarNavigation {...args}></ProgressBarNavigation>;
+            }}
+          </Story>
+        </Canvas>
+
+        <h3>Usage</h3>
+        <p>To use this component, follow these steps:</p>
+        <ul>
+          <li>Copy the HTML from the canvas</li>
+          <li>Add it to your HTML page</li>
+          <li>Include the CSS and JS listed below</li>
+          <li>You should have loader-ready</li>
+        </ul>
+
+        <h3>CSS and JS References</h3>
+
+        <h4>CSS:</h4>
+        <ul>
+          <li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css" target="_blank">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css</a></li>
+          <li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/progress-bar.min.css" target="_blank">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/progress-bar.min.css</a></li>
+        </ul>
+
+        <h4>JS:</h4>
+        <ul>
+          <li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/scrolling-progress-bar.min.js" target="_blank">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/scrolling-progress-bar.min.js</a></li>
+        </ul>
+
+        <h3>Changelog</h3>
+        <p>1.0 — Released component</p>
+      </>
+      ),
     },
   },
 };
+
+const Template = (args) => <ProgressBarNavigation {...args}></ProgressBarNavigation>;
+
+export const ProgressBarNavigationStory = Template.bind({});
+