UND-38-navigation-footer

stories/Molecules/FooterNavigation/FooterConditions/FooterConditions.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './footerCondition.scss';
+
+export const FooterConditions = ({ style, footerdata, ...args }) => {
+  return (
+    <ul className={['footer__condition',`footer__condition--${args.variant}`].join(' ')}>
+    {footerdata.map(function(item, index) {
+      return (
+        <li key= {index}><a href="#">{item.text}</a></li>
+      )})}
+    </ul>
+  );
+};
+
+FooterConditions.defaultProps = {
+  variant: 'black',
+};

stories/Molecules/FooterNavigation/FooterConditions/FooterConditions.stories.mdx

@@ -0,0 +1,146 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import { FooterConditions } from './FooterConditions';
+
+export const getCaptionForLocale = (locale) => {
+  switch(locale) {
+    case 'english': const engText = { footerdata: [{
+      text: 'Report Fraud, Abuse, Misconduct',
+    }, 
+    {
+      text: 'Submit Social Or Environmental Complaint',
+    },
+    {
+      text: 'Scam Alert',
+    }, 
+    {
+      text: 'Terms Of Use',
+    }]
+    }; return engText.footerdata;
+    case 'arabic': const arabicText = { footerdata: [{
+     text: 'الإبلاغ عن الاحتيال والإساءة وسوء السلوك',
+    }, 
+    {
+      text: 'إرسال شكوى اجتماعية أو بيئية',
+    },
+    {
+      text: 'تنبيه احتيال',
+    }, 
+    {
+      text: 'تعليمات الاستخدام',
+    }]
+    }; return arabicText.footerdata;
+    case 'burmese': const burmeseText = { footerdata: [{
+      text: 'လိမ်လည်မှု၊ အလွဲသုံးစားမှု၊ အကျင့်ပျက်ခြစားမှုကိုအစီရင်ခံပါ',
+    }, 
+    {
+      text: 'လူမှုရေးသို့မဟုတ်ပတ်ဝန်းကျင်ဆိုင်ရာတိုင်ကြားစာကိုတင်ပါ',
+    },
+    {
+      text: 'Scam သတိပေးချက်',
+    }, 
+    {
+      text: 'သတ်မှတ်ချက်များ',
+    }]
+    }; return burmeseText.footerdata;
+    case 'japanese': const japaneseText = { footerdata: [{
+      text: '詐欺、虐待、不正行為を報告する',
+    }, 
+    {
+      text: '社会的または環境的苦情を提出する',
+    },
+    {
+      text: '詐欺警告',
+    }, 
+    {
+      text: '利用規約',
+    },
+    {
+      text: '利用規約',
+    }]
+    }; return japaneseText.footerdata;
+    default:
+      const dummy =  { footerdata: [{
+     text: 'Report Fraud, Abuse, Misconduct',
+    }, 
+    {
+      text: 'Submit Social Or Environmental Complaint',
+    },
+    {
+      text: 'Scam Alert',
+    }, 
+    {
+      text: 'Terms Of Use',
+    }]
+    };
+    return dummy.footerdata;
+  }
+};
+
+
+<Meta title="Molecules/Footer Navigation/Footer Conditions Text 1 " 
+  argTypes={{
+      variant: {
+          options: ['black', 'white'],
+          control: { type: 'radio' }
+      }
+  }}
+  parameters={{
+    backgrounds: {
+      default: 'white',
+      values: [
+        { name: 'gray', value: '#D4D6D8' },
+      ],
+    },
+  }} 
+/>
+
+<style>{`
+  .subheading {
+    font-weight: 700;
+    font-size: 18px;
+    color: #666;
+    letter-spacing: 1.5px;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }  
+   .subheading2 {
+    font-weight: 700;
+    font-size: 14px;
+    color: #666;
+    letter-spacing: 1.5px;
+    line-height: 24px;
+    margin-bottom: 12px;
+  } 
+  .css-zgt7u1 {
+    background: #D4D6D8;
+  }
+  div[id^="story--molecules-footer-navigation-footer-log"] {
+    display: inline-block;
+    border: 1px solid #000;
+    padding: 10px;
+    align-items: center;
+    margin: 25px 25px 25px 0;
+  }
+`}</style>
+
+
+# Footer Condition Text block Component
+
+Footer Condition Text block used to show the content in the footer section related terms Condition and other rules.
+
+<Story name="Footer Conditions Text 1" parameters={{ backgrounds: { default: 'gray'}}}>
+  {(args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <FooterConditions  footerdata={caption} {...args} ></FooterConditions>;
+  }}
+</Story>
+
+
+<div className="subheading">Usage</div>
+<ul>
+<li>We can take HTML from the HTML tab in the canvas tab</li>
+<li>Include the common SCSS file like normalize, variables, mixins from the folder <code>assets/scss</code></li>
+<li>Component wise SCSS file residing in each component <code>footerConditions.scss</code></li>
+<li>Include the Compiled CSS file from the <code>assets/css/style.css</code></li>
+</ul>

stories/Molecules/FooterNavigation/FooterConditions/footerCondition.scss

@@ -0,0 +1,33 @@
+@import "../../../assets/scss/mixins";
+@import "../../../assets/scss/breakpoints";
+@import "../../../assets/scss/variables";
+
+// * footer condition start *//
+.footer__condition {
+  padding-left: 0;
+  li {
+    list-style: none;
+    @extend %paragragh-font-16;
+    margin-bottom: $spacing-12;
+    text-align: left;
+    @include devicebreak(medium) {
+      text-align: right;
+    }
+    a {
+      @extend %paragragh-font-16;
+      border-bottom: 0;
+    }
+  }
+  &--white {
+    a {
+      color: $color-white;
+    }
+  }
+}
+
+[dir="rtl"] {
+  .footer__condition {
+    padding-right: 0;
+  }
+}
+// * footer condition end *//

stories/Molecules/FooterNavigation/FooterConditions2/FooterConditions2.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './footerCondition2.scss';
+
+export const FooterConditions2 = ({ style, text, footerdata2, ...args }) => {
+  return (
+    <ul className={['footer__condition_text',`footer__condition_text--${args.variant}`].join(' ')}>
+      {footerdata2.map(function(item, index) {
+      return (
+        <li key= {index}><a href="#">{item.text}</a></li>
+      )})}
+    </ul>
+  );
+};
+
+FooterConditions2.defaultProps = {
+  variant: 'black',
+};

stories/Molecules/FooterNavigation/FooterConditions2/FooterConditions2.stories.mdx

@@ -0,0 +1,139 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import { FooterConditions2 } from './FooterConditions2';
+
+export const getCaptionForLocale = (locale) => {
+  switch(locale) {
+    case 'english': const engText = {footerdata2: [{
+      text: 'Report Fraud, Abuse, Misconduct',
+    },
+    {
+      text: 'Scam Alert',
+    }, 
+    {
+      text: 'Terms Of Use',
+    }, 
+    {
+      text: 'Submit Social Or Environmental Complaint',
+    }]
+    }; return engText.footerdata2;
+    case 'arabic': const arabicText = {footerdata2: [{
+     text: 'الإبلاغ عن الاحتيال والإساءة وسوء السلوك',
+    },
+    {
+      text: 'تنبيه احتيال',
+    }, 
+    {
+      text: 'تعليمات الاستخدام',
+    }, 
+    {
+      text: 'إرسال شكوى اجتماعية أو بيئية',
+    }]
+    };
+     return arabicText.footerdata2;
+    case 'burmese': const burmeseText = {footerdata2: [{
+      text: 'လိမ်လည်မှု၊ အလွဲသုံးစားမှု၊ အကျင့်ပျက်ခြစားမှုကိုအစီရင်ခံပါ',
+    },
+    {
+      text: 'Scam သတိပေးချက်',
+    }, 
+    {
+      text: 'သတ်မှတ်ချက်များ',
+    }, 
+    {
+      text: 'လူမှုရေးသို့မဟုတ်ပတ်ဝန်းကျင်ဆိုင်ရာတိုင်ကြားစာကိုတင်ပါ',
+    }]
+    }; return burmeseText.footerdata2;
+    case 'japanese': const japaneseText = {footerdata2: [{
+      text: '詐欺、虐待、不正行為を報告する',
+    },
+    {
+      text: '詐欺警告',
+    }, 
+    {
+      text: '利用規約',
+    }, 
+    {
+      text: '社会的または環境的苦情を提出する',
+    }]
+    }; return japaneseText.footerdata2;
+    default:
+      const dummy =  {footerdata2: [{text: 'Report Fraud, Abuse, Misconduct',
+    }, 
+    {
+      text: 'Submit Social Or Environmental Complaint',
+    },
+    {
+      text: 'Scam Alert',
+    }, 
+    {
+      text: 'Terms Of Use',
+    }]
+    };
+    return dummy.footerdata2;
+  }
+};
+
+<Meta title="Molecules/Footer Navigation/Footer Conditions Text 2" 
+  argTypes={{
+      variant: {
+          options: ['black', 'white'],
+          control: { type: 'radio' }
+      }
+  }}
+  parameters={{
+    backgrounds: {
+      default: 'white',
+      values: [
+        { name: 'gray', value: '#D4D6D8' },
+      ],
+    },
+  }} 
+ />
+
+<style>{`
+  .subheading {
+    font-weight: 700;
+    font-size: 18px;
+    color: #666;
+    letter-spacing: 1.5px;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }  
+   .subheading2 {
+    font-weight: 700;
+    font-size: 14px;
+    color: #666;
+    letter-spacing: 1.5px;
+    line-height: 24px;
+    margin-bottom: 12px;
+  } 
+  .css-zgt7u1 {
+    background: #D4D6D8;
+  }
+  div[id^="story--molecules-footer-navigation-footer-conditions"] {
+   display: flow-root;
+  }
+  
+`}</style>
+
+
+# Footer Condition Text block 2 Component
+
+Footer Condition Text block used to show the content in the footer section related terms Condition and other rules.
+
+<Story name="Footer Conditions Text 2" parameters={{ backgrounds: { default: 'gray'}}}>
+  {(args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return <FooterConditions2 footerdata2={caption} {...args}></FooterConditions2>;
+  }}
+</Story>
+
+
+<div className="subheading">Usage</div>
+<ul>
+<li>We can take HTML from the HTML tab in the canvas tab</li>
+<li>Include the common SCSS file like normalize, variables, mixins from the folder <code>assets/scss</code></li>
+<li>Component wise SCSS file residing in each component <code>footerConditions2.scss</code></li>
+<li>Include the Compiled CSS file from the <code>assets/css/style.css</code></li>
+</ul>