Added language switcher

stories/Molecules/Navbar/Languageswitcher/Languageswitcher.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { LangSwitch } from '../../../assets/js/Lang_switcher';
+import './languageswitcher.scss';
+
+export const variant_options = {
+  Blue: "blue",
+  White: "white",
+};
+
+export const Languageswitcher = ({ headerText, data, active, ...args }) => {
+  useEffect(() => {
+    LangSwitch();
+  }, [])
+
+  return (
+    <div className="dropdown-language" id="switcher">
+      <button class={["dropdown-btn", `dropdown-btn__${variant_options[`${args.variant}`]}`].join(' ')}  >{headerText}</button>
+      <ul className="dropdown-language__content" >
+        {data.map(function (item, index) {
+          return (
+            <li><a href="#" key={index} className="dropdown-language__content--item"> {item.descriptionText} </a></li>
+          )
+        })}
+      </ul>
+    </div>
+  );
+};
+
+Languageswitcher.defaultProps = {
+  variant: "Blue",
+};

stories/Molecules/Navbar/Languageswitcher/Languageswitcher.stories.mdx

@@ -0,0 +1,173 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { Languageswitcher } from "./Languageswitcher";
+
+export const getCaptionForLocale = (locale) => {
+  switch (locale) {
+    case "english":
+      const engText = {
+        languagedata: [
+          {
+            descriptionText: "Français",
+          },
+          {
+            descriptionText: "Español",
+          },
+        ],
+        headerText: "ENGLISH",
+      };
+      return engText;
+    case "arabic":
+      const arabicText = {
+        languagedata: [
+          {
+            descriptionText: "فرنسي",
+          },
+          {
+            descriptionText: "الاسبانية",
+          },
+        ],
+        headerText: "إنجليزي",
+      };
+      return arabicText;
+    case "burmese":
+      const burmeseText = {
+        languagedata: [
+          {
+            descriptionText: "ပြင်သစ်",
+          },
+          {
+            descriptionText: "ငပိ",
+          },
+        ],
+        headerText: "အင်္ဂလိပ်စာ",
+      };
+      return burmeseText;
+    case "japanese":
+      const japaneseText = {
+        languagedata: [
+          {
+            descriptionText: "フランス語",
+          },
+          {
+            descriptionText: "スペイン語",
+          },
+        ],
+        headerText: "英語",
+      };
+      return japaneseText;
+    default:
+      const dummy = {
+        languagedata: [
+          {
+            descriptionText: "Français",
+          },
+          {
+            descriptionText: "Español",
+          },
+        ],
+        headerText: "ENGLISH",
+      };
+      return dummy;
+  }
+};
+
+<Meta
+  title="Molecules/Navbar/Languageswitcher"
+  argTypes={{
+    variant: {
+      options: ["Blue", "White"],
+      control: { type: "radio" },
+    },
+  }}
+  parameters={{
+    backgrounds: {
+      default: "white",
+      values: [{ name: "gray", value: "#D4D6D8" }],
+    },
+  }}
+/>
+
+<style>{`
+  .sbdocs-h1 {
+    font-weight: 700;
+  }
+  .subheading {
+    font-weight: 500;
+    font-size: 22px;
+    color: #161616;
+    letter-spacing: 1.5px;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+  .high {
+    font-weight: 500;
+    font-size: 14px;
+    color: #161616;
+    letter-spacing: 1.5px;
+    line-height: 24px;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+    .css-zgt7u1 {
+    background: #D4D6D8;
+  }
+  .docblock-code-toggle {
+    display: none;
+  }
+`}</style>
+
+# Language Switcher Component
+
+Language Switcher Component allows visitors to select the language in which they want to read your content.
+
+<Story
+  name="Language switcher"
+  parameters={{ backgrounds: { default: "gray" } }}
+>
+  {(args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return (
+      <Languageswitcher
+        data={caption.languagedata}
+        headerText={caption.headerText}
+        {...args}
+      ></Languageswitcher>
+    );
+  }}
+</Story>
+
+<div className="subheading">Dependency</div>
+
+Libraries or another dependency which are used in the component.
+
+<ul>
+  <li>
+    For toggle functionality its depend on the jQuery plugin library, that is
+    placed in preview-head.html file.
+  </li>
+  <li>
+    Custom JS file (Lang_switcher.js) is located in the same component folder.
+  </li>
+  <li>
+    ID - (#accordion) is used in the JSX file to connect the Custom JS file to
+    achieve the functionality.
+  </li>
+</ul>
+
+<div className="subheading">Usage</div>
+<ul>
+  <li>Take HTML from the HTML tab in the canvas</li>
+  <u>To use SCSS include the following files in your implementation</u>
+  <li>
+    Include the common SCSS files like breakpoints, variables, mixin from{" "}
+    <code>assets/scss</code>
+  </li>
+  <li>
+    Component SCSS file: <code>Languageswitcher.scss</code>
+  </li>
+  <u>To use CSS include the following files in your implementation</u>
+  <li>
+    The compiled CSS file from <code>assets/css/style.css</code>
+  </li>
+</ul>

stories/Molecules/Navbar/Languageswitcher/languageswitcher.scss

@@ -0,0 +1,81 @@
+@import '../../../assets/scss/breakpoints';
+@import '../../../assets/scss/variables';
+@import '../../../assets/scss/mixins';
+
+.dropdown-language {
+  display: inline-block;
+  position: relative;
+
+  .dropdown-btn {
+    @extend %language_switcher;
+
+    align-items: center;
+    background-color: transparent;
+    color: $color-blue-600;
+    column-gap: 8px;
+    display: flex;
+
+    &::before {
+      background: url(#{$img-path-Icon}/Language.svg) no-repeat left center;
+      content: '';
+      height: 26px;
+      width: 25px;
+    }
+
+    &::after {
+      @include transition(0.2s ease-in-out);
+
+      background: url(#{$img-path-Icon}/arrowblue.svg) no-repeat left center;
+      content: '';
+      height: 10px;
+      width: 15px;
+    }
+
+    &__white {
+      color: $color-white;
+
+      &::before {
+        background: url(#{$img-path-Icon}/Language-white.svg) no-repeat left center;       
+      }
+      &::after {
+        background: url(#{$img-path-Icon}/arrowwhite.svg) no-repeat left center;
+      }
+    }
+  }
+
+  &.active {
+    .dropdown-btn::after {
+      @include transform(rotateZ(180deg));
+    }
+  }
+
+  &__content {
+    display: none;
+    left: 22px;
+    padding: 0;
+    position: absolute;
+
+    &--item {
+      @extend %language_switcher;
+
+      background: $color-gray-200;
+      border-bottom: 1px solid $color-gray-400;
+      box-shadow: 0 3px 4px rgb(0 0 0 / 10%);
+      display: block;
+      padding: $spacing-12 $spacing-16;
+    }
+  }
+}
+
+[dir='rtl'] {
+  .dropdown-language {
+    &__content {
+      left: unset;
+      right: 22px;
+    }
+
+    .dropdown-btn::before {
+      transform: scaleX(-1);
+    }
+  }
+}

stories/assets/js/Lang_switcher.js

@@ -0,0 +1,13 @@
+export function LangSwitch() {
+  $("#switcher").click(function () {
+    $(".dropdown-language").toggleClass("active");
+    $(this).find(".dropdown-language__content").slideToggle();
+  });
+
+  $(document).on("click", function (event) {
+    var $trigger = $("#switcher");
+    if ($trigger !== event.target && !$trigger.has(event.target).length) {
+      $(".dropdown-language__content").slideUp();
+    }
+  });
+}

stories/assets/scss/_mixins.scss

@@ -250,3 +250,11 @@
   top: 0;
   width: 100%;
 }
+
+%language_switcher {
+  font-family: $Font-Family-ProximaRegular;
+  font-size: $font-size-14;
+  font-weight: 600;
+  border: none;
+  text-transform: uppercase;
+}

stories/assets/scss/style.scss

@@ -72,3 +72,4 @@
 @import '../../Molecules/Multiselect/multiselect';
 @import '../../Molecules/Blocks/StatsPanel/statspanel';
 @import '../../Molecules/Form/signup';
+@import '../../Molecules/Navbar/Languageswitcher/languageswitcher';