refactor(storybook): multiple components

header lint fix checkbox disabled text fix radio disabled text fix message theming update modal close icon added progress primary color change table responsive fix timeline refactor pagination hover update label color update tab responsive fix comment color updates
eea · Jan 31, 2022 · 9277aac · 9277aac
1 parent 1671552
commit 9277aac
Show file tree

Hide file tree

Showing 28 changed files with 322 additions and 216 deletions.
diff --git a/src/customizations/components/theme/Footer/Footer.jsx b/src/customizations/components/theme/Footer/Footer.jsx
@@ -34,7 +34,7 @@ class Footer extends Component {
 
             <Container className="eea-subfooter">
               <Grid.Row>
-                <Col desktop="7" tablet="4" mobile="4">
+                <Col desktop="8" tablet="5" mobile="4">
                   <div className="eea-footer-logos eea-subfooter-item">
                     <Image src={EEALogo} alt="EEA Logo"></Image>
                     <p className="eea-footer-logo-description">
@@ -52,7 +52,7 @@ class Footer extends Component {
                     </div>
                   </div>
                 </Col>
-                <Col desktop="5" tablet="4" mobile="4">
+                <Col desktop="4" tablet="3" mobile="4">
                   <div className="eea-subfooter-item">
                     <p className="eea-subfooter-item-header">Contact us</p>
                     <div className="eea-footer-contact-item">

diff --git a/src/customizations/components/theme/Form/Checkbox.stories.js b/src/customizations/components/theme/Form/Checkbox.stories.js
@@ -96,7 +96,7 @@ function CheckboxForm({
       ) : null}
       <Form.Field error={invalid}>
         <Checkbox
-          className="eeaCheckbox"
+          className="eea-checkbox"
           label="Option 1"
           defaultChecked
           id="field1"
@@ -105,15 +105,15 @@ function CheckboxForm({
       </Form.Field>
       <Form.Field error={invalid}>
         <Checkbox
-          className="eeaCheckbox"
+          className="eea-checkbox"
           label="Option 2"
           id="field2"
         ></Checkbox>
         <label htmlFor="field2">Helper text for option 2</label>
       </Form.Field>
       <Form.Field error={invalid}>
         <Checkbox
-          className="eeaCheckbox"
+          className="eea-checkbox"
           label="Option 3 (disabled)"
           disabled
           id="field3"
@@ -147,7 +147,7 @@ function SingleCheckboxForm({
 
       <Form.Field error={invalid}>
         <Checkbox
-          className="eeaCheckbox"
+          className="eea-checkbox"
           label="Option 1"
           defaultChecked
           id="field4"

diff --git a/src/customizations/components/theme/Form/Radio.stories.js b/src/customizations/components/theme/Form/Radio.stories.js
@@ -99,7 +99,7 @@ function RadioForm({
       ) : null}
       <Form.Field error={invalid}>
         <Radio
-          className="eeaRadio"
+          className="eea-radio"
           label="Option 1"
           name="radioGroup"
           value="1"
@@ -111,7 +111,7 @@ function RadioForm({
       </Form.Field>
       <Form.Field error={invalid}>
         <Radio
-          className="eeaRadio"
+          className="eea-radio"
           label="Option 2"
           name="radioGroup"
           value="2"
@@ -123,7 +123,7 @@ function RadioForm({
       </Form.Field>
       <Form.Field error={invalid}>
         <Radio
-          className="eeaRadio"
+          className="eea-radio"
           label="Option 3 (disabled)"
           disabled
           name="radioGroup"
@@ -167,7 +167,7 @@ function Binary({
       ) : null}
       <Form.Field error={invalid}>
         <Radio
-          className="eeaRadio"
+          className="eea-radio"
           label="Yes"
           name="radioGroup"
           value="yes"
@@ -179,7 +179,7 @@ function Binary({
       </Form.Field>
       <Form.Field error={invalid}>
         <Radio
-          className="eeaRadio"
+          className="eea-radio"
           label="No"
           name="radioGroup"
           value="no"

diff --git a/src/customizations/components/theme/Header/Header.jsx b/src/customizations/components/theme/Header/Header.jsx
@@ -10,7 +10,6 @@ import { connect } from 'react-redux';
 import eeaFlag from '../../../../../theme/themes/eea/assets/images/Header/eea.png';
 import logo from '../../../../../theme/themes/eea/assets/images/Header/eea-logo.svg';
 import searchIcon from '../../../../../theme/themes/eea/assets/images/Header/search.png';
-import closeIcon from '../../../../../theme/themes/eea/assets/images/Header/close.png';
 import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 
@@ -341,6 +340,7 @@ class Header extends Component {
                       <div
                         onClick={this.searchOnClick}
                         className="eea-header-search-action "
+                        role="none"
                       >
                         <span></span>
                         <span></span>

diff --git a/src/customizations/components/theme/Header/HeaderMenuPopUp.js b/src/customizations/components/theme/Header/HeaderMenuPopUp.js
@@ -1,56 +1,29 @@
 import React from 'react';
-import { Container, Image } from 'semantic-ui-react';
-import menuArrow from '../../../../../theme/themes/eea/assets/images/Header/menu-left-arrow.svg';
+import { Container } from 'semantic-ui-react';
 
 function HeaderMenuPopUp() {
-  const [item1, setItem1] = React.useState('');
-
-  const items = [
-    {
-      name: 'Item 1',
-      sections: [
-        {
-          name: 'Section1',
-          pages: ['Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5'],
-        },
-        { name: 'Section 2', pages: [] },
-        { name: 'Section 3', pages: [] },
-        { name: 'Section 4', pages: [] },
-        { name: 'Section 5', pages: [] },
-      ],
-    },
-    { name: 'Item 2', sections: [] },
-    { name: 'Item 3', sections: [] },
-    { name: 'Item 4', sections: [] },
-    { name: 'Item 5', sections: [] },
-  ];
-
-  //const [firstLevelActive,setFirstLevelActive] = React.useState();
-  //const [secondLevelActive,setSecondLevelActive] = React.useState();
-  //const [firstLevelActive,setFirstLevelActive] = React.useState();
-
   return (
     <div id="eea-mega-menu-wrap">
       <Container>
         <nav className="eea-nav">
-          <a href="javascript:void(0);" className="eea-mobile-menu-trigger">
+          <a href="/#" className="eea-mobile-menu-trigger">
             Open mobile menu
           </a>
           <ul className="menu menu-bar">
             <li>
-              <a
-                href="javascript:void(0);"
+              {/* <a
+                href="/#"
                 className="menu-link menu-bar-link"
                 aria-haspopup="true"
                 id="trigger"
-              ></a>
+              ></a> */}
               <ul
                 className="mega-menu mega-menu--multiLevel"
                 id="first-section-link"
               >
                 <li>
                   <a
-                    href="javascript:void(0);"
+                    href="/#"
                     className="menu-link mega-menu-link"
                     aria-haspopup="true"
                   >
@@ -64,7 +37,7 @@ function HeaderMenuPopUp() {
                     </li>
                     <li>
                       <a
-                        href="javascript:void(0);"
+                        href="/#"
                         className="menu-link menu-list-link"
                         aria-haspopup="true"
                       >
@@ -102,7 +75,7 @@ function HeaderMenuPopUp() {
                 </li>
                 <li>
                   <a
-                    href="javascript:void(0);"
+                    href="/#"
                     className="menu-link mega-menu-link"
                     aria-haspopup="true"
                   >
@@ -123,7 +96,7 @@ function HeaderMenuPopUp() {
                 </li>
                 <li>
                   <a
-                    href="javascript:void(0);"
+                    href="/#"
                     className="menu-link mega-menu-link"
                     aria-haspopup="true"
                   >
@@ -151,68 +124,6 @@ function HeaderMenuPopUp() {
             </li>
           </ul>
         </nav>
-
-        {/* <div className="eea-mega-menu-wrapper">
-          <div className="mega-menu-first-level">
-            <ul className="eea-mega-menu-ul ul-is-active">
-              {items.map((item,index) => (
-                <li className={firstLevelActive === index ? "level-one-active" : ""} key={index} onMouseEnter={() => {setFirstLevelActive(index)}}>
-                  <span>{item.name} <Image src={menuArrow} alt="menu arrow" /></span>
-                  
-                  {item.sections.length > 0 &&
-                    <div className="mega-menu-second-level">
-                      <ul className="eea-mega-menu-ul">
-                        {item.sections.map((section,sectionIndex) => (
-                          <li className={secondLevelActive === sectionIndex ? "level-two-active" : ""} key={sectionIndex} onMouseEnter={() => {setSecondLevelActive(sectionIndex)}}>
-                            <span>{section.name}</span>
-                            <Image src={menuArrow} alt="menu arrow" />
-                            {section.pages.length > 0 && 
-                              <div className="mega-menu-third-level">
-                                <ul className="eea-mega-menu-ul">
-                                  {section.pages.map((page,pageIndex) =>(
-                                    <li key={pageIndex}>{page}</li>
-                                  ))}
-                                </ul>
-                              </div>
-                            }
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  }
-                </li>
-              ))} */}
-        {/* <li className={`has-sub-menu ${item1}`} >
-                <span>Item 1</span> <Image src={menuArrow} alt="menu arrow" />
-                <div className={`mega-menu-second-level ${item1}`}>
-                  <ul className="eea-mega-menu-ul ">
-                    <li className="has-sub-menu">
-                      <span>Section 1</span>{' '}
-                      <Image src={menuArrow} alt="menu arrow" />
-                      <div className="mega-menu-third-level">
-                        <ul className="eea-mega-menu-ul ">
-                          <li>Page 1</li>
-                          <li>Page 2</li>
-                          <li>Page 3</li>
-                          <li>Page 4</li>
-                          <li>Page 5</li>
-                        </ul>
-                      </div>
-                    </li>
-                    <li>Section 2</li>
-                    <li>Section 3</li>
-                    <li>Section 4</li>
-                    <li>Section 5</li>
-                  </ul>
-                </div>
-              </li>
-              <li>Item 2</li>
-              <li>Item 3</li>
-              <li>Item 4</li>
-              <li>Item 5</li> */}
-        {/* </ul>
-          </div>
-        </div> */}
       </Container>
     </div>
   );

diff --git a/src/customizations/components/theme/Message/Message.stories.js b/src/customizations/components/theme/Message/Message.stories.js
@@ -82,7 +82,6 @@ Success.parameters = {
 
 export const Warning = Template.bind({});
 Warning.args = {
-  header: 'Warning message',
   content: 'This is a Warning message',
   icon: 'exclamation circle',
   warning: true,
@@ -111,8 +110,8 @@ Warning.parameters = {
 
 export const Error = Template.bind({});
 Error.args = {
-  header: 'Error Message',
-  content: 'This is an Error message',
+  header: 'This is an Error Message',
+  content: 'This is information about the e rror message',
   icon: 'exclamation circle',
   error: true,
   size: 'small',
@@ -139,7 +138,6 @@ Error.parameters = {
 
 export const Info = Template.bind({});
 Info.args = {
-  header: 'Info Message',
   content: 'This is an Info message',
   icon: 'exclamation circle',
   info: true,

diff --git a/src/customizations/components/theme/Modal/Modal.stories.js b/src/customizations/components/theme/Modal/Modal.stories.js
@@ -84,6 +84,7 @@ function ModalEEA({
   const [open, setOpen] = React.useState(false);
   return (
     <Modal
+      closeIcon
       className="eea-modal"
       onClose={() => setOpen(false)}
       onOpen={() => setOpen(true)}

diff --git a/src/customizations/components/theme/Progress/Progress.stories.js b/src/customizations/components/theme/Progress/Progress.stories.js
@@ -67,7 +67,6 @@ const Template = (args) => <Progress {...args}></Progress>;
 export const Default = Template.bind({});
 Default.args = {
   percent: 80,
-  indicating: true,
   progress: true,
   children: 'Label',
 };
@@ -88,17 +87,6 @@ Default.argTypes = {
       },
     },
   },
-  indicating: {
-    description: 'visually indicates the current level of progress of a task',
-    table: {
-      type: {
-        summary: 'boolean',
-      },
-      defaultValue: {
-        summary: false,
-      },
-    },
-  },
 };
 
 // export const ProgressWithRatio = Template.bind({});