Merge pull request #1371 from undp/post-sb8-upgrade-fixes

Post SB8 upgrade fixes

Author: Jura

.storybook/renderToHTML.js

@@ -1,7 +1,7 @@
 import { renderToStaticMarkup } from 'react-dom/server'
 import { decode } from 'html-entities'
-import prettier from 'prettier'
-import HTMLParser from 'prettier/parser-html'
+import * as prettier from 'prettier'
+import * as HTMLParser from 'prettier/parser-html'
 
 export default (story) => {
 	let html = prettier.format(decode(renderToStaticMarkup(story)), {

stories/Atom/BaseTypography/BaseTypography.stories.js

@@ -1,4 +1,5 @@
 import { Canvas, Meta, Story, Source, Anchor } from "@storybook/addon-docs";
+import React from "react";
 
 import { Heading } from "../Typography/Heading/Heading";
 import { Abbreviation } from "./Abbr/Abbr";
@@ -24,7 +25,6 @@ export default {
         <section>
         <h1>Base Typography</h1>
         <p>Basic elements which the design system has some styling listed here, you can use the elements as it is, without any specific CSS classes.</p>
-        <Anchor storyId="foundation-typography-basetypography--abbreviation"></Anchor>
         <h3>Abbreviation</h3>
         <p>Abbreviation component defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".</p>
         <ul>
@@ -34,7 +34,6 @@ export default {
 
         <Canvas of={AbbreviationComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--blockquote"></Anchor>
         <h3>Blockquote</h3>
         <p>The blockquote component is used to define a section that is quoted from another source.</p>
         <ul>
@@ -44,7 +43,6 @@ export default {
 
         <Canvas of={BlockquoteComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--cite"></Anchor>
         <h3>Cite</h3>
         <p>The Cite component defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).</p>
         <ul>
@@ -54,7 +52,6 @@ export default {
 
         <Canvas of={CiteComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--code"></Anchor>
         <h3>Code</h3>
         <p>The code component is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.</p>
         <ul>
@@ -64,7 +61,6 @@ export default {
 
         <Canvas of={CodeComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--description-list"></Anchor>
         <h3>Description List</h3>
         <p>A description list is a list of terms, with a description of each term.</p>
         <ul>
@@ -73,26 +69,22 @@ export default {
 
         <Canvas of={DescriptionlistComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--details"></Anchor>
         <h3>Details</h3>
         <p>The details tag creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element.</p>
 
         <Canvas of={DetailsTagComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--figcaption"></Anchor>
         <h3>Figcaption</h3>
         <p>The <code>figcaption</code> tag is used to caption the image. The <code>figcaption</code> tag is used with the <code>figure</code> tag.</p>
 
         <Canvas of={FigcaptionComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--headings"></Anchor>
         <h3>Headings</h3>
         <p>We can use the <code>h1/h2/h3/h4/h5/h6 tags</code> in any component to display the headings. h1 for most important heading to h6 for least important heading.</p>
         <p>Typographic scale when using headings in text component:</p>
 
         <Canvas of={HeadingComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--hr"></Anchor>
         <h3>Horizontal Rule</h3>
         <p>The <code>hr tag</code> defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.</p>
         <ul>
@@ -102,7 +94,6 @@ export default {
 
         <Canvas of={HrComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--mark"></Anchor>
         <h3>Mark</h3>
         <p>The <code>mark tag</code> defines marked or highlighted text.</p>
         <ul>
@@ -112,7 +103,6 @@ export default {
 
         <Canvas of={MarkComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--ordered-list"></Anchor>
         <h3>Ordered List</h3>
         <p>The <code>ol tag</code> defines an ordered list. An ordered list can be numerical or alphabetical.</p>
         <ul>
@@ -121,7 +111,6 @@ export default {
 
         <Canvas of={ListComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--p"></Anchor>
         <h3>Paragraph</h3>
         <p>The <code>p tag</code> defines a paragraph.</p>
         <ul>
@@ -131,7 +120,6 @@ export default {
 
         <Canvas of={PComponent} />
 
-        <Anchor storyId="foundation-typography-basetypography--quotation"></Anchor>
         <h3>Quotation</h3>
         <p>The <code>q tag</code> defines a short quotation.</p>
         <ul>
@@ -141,8 +129,6 @@ export default {
 
         <Canvas of={QuotationComponent} />
 
-          <Anchor storyId="foundation-typography-basetypography--small"></Anchor>
-
           <h3>Small</h3>
 
           <p>The <code>small tag</code> defines smaller text.</p>
@@ -151,10 +137,7 @@ export default {
           </ul>
           <p>Typographic scale when using small in text component:</p>
 
-          <Canvas of={SmallComponent} />
-
-        <Anchor storyId="foundation-typography-basetypography--unordered-list"></Anchor>
-            
+          <Canvas of={SmallComponent} />            
 
             <h3>Unordered List</h3>
 
@@ -163,8 +146,6 @@ export default {
               <li>We can use the <code>ul tag</code> in any component to render the text found within the <code>ul tag</code> in a bulleted list.</li>
             </ul>
 
-            <Anchor storyId="foundation-typography-basetypography--unordered-list"></Anchor>
-
             <Canvas of={ListComponent} />
 
             <h3>Usage</h3>

stories/Atom/Images/AuthorImage/AuthorImages.stories.js

@@ -48,7 +48,7 @@ export default {
               <Story
                 name="Author Image"
               >
-                {args => <Authorimg image={user} alt="Headshot of XYZ" {...args} />}
+                {args => <Authorimg image={user} alt="Headshot of XYZ" title="Headshot of XYZ" {...args} />}
               </Story>
             </Canvas>
             <h3>CSS and JS References</h3>
@@ -68,7 +68,7 @@ export default {
   },
 };
 
-const Template = (args) => <Authorimg image={user} {...args} />;
+const Template = (args) => <Authorimg image={user} alt="Headshot of XYZ" title="Headshot of XYZ" {...args} />;
 
 export const AuthorImage = Template.bind({});
 AuthorImage.args = {

stories/Atom/Logo/Logo.stories.js

@@ -12,6 +12,10 @@ export default {
 
 
   parameters: {
+    args: {
+      src: logo,
+      alt: 'UNDP Logo',
+    },
     backgrounds: {
       default: 'white',
       values: [
@@ -56,29 +60,21 @@ export default {
           <h4>States</h4>
           <p>The UNDP and PNUD logos are available in blue or white and used as per the page background.</p>
 
-          <Anchor storyId="foundation-logos--pnud-logo-blue"></Anchor>
-
           <h4>1. PNUD logo - Blue <a href="images/pnud-logo-blue.svg" download>Download</a></h4>
 
 
-          <Canvas of={PNUDLogoBlue} />
-
-          <Anchor storyId="foundation-logos--pnud-logo-white"></Anchor>
+          <Canvas  of={PNUDLogoBlue} />
 
           <h4>2. PNUD logo - White <a href="images/pnud-logo-white.svg" download>Download</a></h4>
 
 
           <Canvas of={PNUDLogoWhite} />
 
-          <Anchor storyId="foundation-logos--undp-logo-blue"></Anchor>
-
           <h4>3. UNDP Logo - Blue</h4>
 
 
           <Canvas of={UNDPLogoBlue} />
 
-          <Anchor storyId="foundation-logos--undp-logo-white"></Anchor>
-
           <h4>4. UNDP Logo - White</h4>
 
 
@@ -92,13 +88,17 @@ export default {
   },
 };
 
-const Template = (args, src) => <Logo src={src} {...args} />;
+const Template = (args) => <Logo {...args} />;
 
 export const PNUDLogoBlue = Template.bind({});
 PNUDLogoBlue.args = {
   src: pnud,
   alt: 'PNUD Logo - Blue',
 };
+PNUDLogoBlue.argTypes = {
+  src: { table: { disable: true } },
+  alt: { table: { disable: true } },
+};
 PNUDLogoBlue.parameters = {
   docs: {
     story: {
@@ -113,6 +113,10 @@ PNUDLogoWhite.args = {
   src: pnudwhite,
   alt: 'PNUD Logo - White',
 };
+PNUDLogoWhite.argTypes = {
+  src: { table: { disable: true } },
+  alt: { table: { disable: true } },
+};
 PNUDLogoWhite.parameters = {
   backgrounds: { default: 'gray' },
   docs: {
@@ -128,6 +132,10 @@ UNDPLogoBlue.args = {
   src: logo,
   alt: 'UNDP Logo - Blue',
 };
+UNDPLogoBlue.argTypes = {
+  src: { table: { disable: true } },
+  alt: { table: { disable: true } },
+};
 UNDPLogoBlue.parameters = {
   docs: {
     story: {
@@ -142,6 +150,11 @@ UNDPLogoWhite.args = {
   src: logowhite,
   alt: 'UNDP Logo - White',
 };
+UNDPLogoWhite.argTypes = {
+  src: { table: { disable: true } },
+  alt: { table: { disable: true } },
+  
+};
 UNDPLogoWhite.parameters = {
   backgrounds: { default: 'gray' },
   docs: {
@@ -150,4 +163,5 @@ UNDPLogoWhite.parameters = {
       iframeHeight: '100%',
     },
   },
+
 };

stories/Atom/Typography/Links/Links.stories.js

@@ -93,4 +93,7 @@ const Template = (args, { globals: { locale } }) => {
 }
 
 export const LinkStory = Template.bind({});
-LinkStory.storyName = 'Link';
+LinkStory.storyName = 'Link';
+LinkStory.argTypes = {
+  variant: { table: { disable: true } },
+};

stories/Components/Forms/Checkbox/Checkbox.stories.js

@@ -118,5 +118,7 @@ const Template = (args, { globals: { locale } }) => {
 };
 
 export const CheckboxStory = Template.bind({});
-
-CheckboxStory.storyName = 'Checkbox';
+CheckboxStory.storyName = 'Checkbox';
+CheckboxStory.argTypes = {
+  label_pos: {table : {disable: true}},
+};

stories/Components/Forms/SearchExpand/SearchExpand.jsx

@@ -1,18 +1,27 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import './search-expand.scss';
 import img from 'icons/search-black.svg';
 import img_close from 'icons/times.svg';
 import { expandSearch } from '../../../assets/js/expand-search';
 
 export const SearchExpand = () => {
+  const expandContainerRef = useRef(null);
+
   useEffect(() => {
-    expandSearch();
+    if (expandContainerRef.current) {
+      expandSearch(jQuery(expandContainerRef.current));
+    }
   }, []);
+
   return (
-    <div className="expand-search">
-      <button className='expand-button'><img src={img} alt="search expand" /></button>
+    <div className="expand-search" ref={expandContainerRef}>
+      <button className='expand-button'>
+        <img src={img} alt="search expand" />
+      </button>
       <input type="text" aria-label="expand-search" />
-      <button className='close-button'><img src={img_close} alt="search close" /></button>
+      <button className='close-button'>
+        <img src={img_close} alt="close search" />
+      </button>
     </div>
   );
-};
+};