From 76a3084bd8759d1ff82ef0c0e33f81a708451cc3 Mon Sep 17 00:00:00 2001 From: pallavikadam-srijan Date: Thu, 21 Oct 2021 12:28:36 +0530 Subject: [PATCH] Added language switcher --- .../Languageswitcher/Languageswitcher.jsx | 31 ++++ .../Languageswitcher.stories.mdx | 173 ++++++++++++++++++ .../Languageswitcher/languageswitcher.scss | 81 ++++++++ stories/assets/images/Icon/Language-white.svg | 9 + stories/assets/images/Icon/arrowblue.svg | 3 + stories/assets/images/Icon/arrowwhite.svg | 3 + stories/assets/js/Lang_switcher.js | 14 ++ stories/assets/scss/_mixins.scss | 8 + stories/assets/scss/style.scss | 1 + 9 files changed, 323 insertions(+) create mode 100644 stories/Molecules/Navbar/Languageswitcher/Languageswitcher.jsx create mode 100644 stories/Molecules/Navbar/Languageswitcher/Languageswitcher.stories.mdx create mode 100644 stories/Molecules/Navbar/Languageswitcher/languageswitcher.scss create mode 100644 stories/assets/images/Icon/Language-white.svg create mode 100644 stories/assets/images/Icon/arrowblue.svg create mode 100644 stories/assets/images/Icon/arrowwhite.svg create mode 100644 stories/assets/js/Lang_switcher.js diff --git a/stories/Molecules/Navbar/Languageswitcher/Languageswitcher.jsx b/stories/Molecules/Navbar/Languageswitcher/Languageswitcher.jsx new file mode 100644 index 000000000..9665d3fd4 --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; + +Languageswitcher.defaultProps = { + variant: "Blue", +}; diff --git a/stories/Molecules/Navbar/Languageswitcher/Languageswitcher.stories.mdx b/stories/Molecules/Navbar/Languageswitcher/Languageswitcher.stories.mdx new file mode 100644 index 000000000..42c036f19 --- /dev/null +++ b/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; + } +}; + + + + + +# Language Switcher Component + +Language Switcher Component allows visitors to select the language in which they want to read your content. + + + {(args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return ( + + ); + }} + + +
Dependency
+ +Libraries or another dependency which are used in the component. + + + +
Usage
+ diff --git a/stories/Molecules/Navbar/Languageswitcher/languageswitcher.scss b/stories/Molecules/Navbar/Languageswitcher/languageswitcher.scss new file mode 100644 index 000000000..ee891c5d7 --- /dev/null +++ b/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); + } +} diff --git a/stories/assets/images/Icon/Language-white.svg b/stories/assets/images/Icon/Language-white.svg new file mode 100644 index 000000000..925280ea4 --- /dev/null +++ b/stories/assets/images/Icon/Language-white.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/stories/assets/images/Icon/arrowblue.svg b/stories/assets/images/Icon/arrowblue.svg new file mode 100644 index 000000000..985a28294 --- /dev/null +++ b/stories/assets/images/Icon/arrowblue.svg @@ -0,0 +1,3 @@ + + + diff --git a/stories/assets/images/Icon/arrowwhite.svg b/stories/assets/images/Icon/arrowwhite.svg new file mode 100644 index 000000000..cb877b086 --- /dev/null +++ b/stories/assets/images/Icon/arrowwhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/stories/assets/js/Lang_switcher.js b/stories/assets/js/Lang_switcher.js new file mode 100644 index 000000000..32b61e28f --- /dev/null +++ b/stories/assets/js/Lang_switcher.js @@ -0,0 +1,14 @@ +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").removeClass("active"); + $(".dropdown-language__content").slideUp(); + } + }); +} diff --git a/stories/assets/scss/_mixins.scss b/stories/assets/scss/_mixins.scss index ad901c395..c287ae1a4 100755 --- a/stories/assets/scss/_mixins.scss +++ b/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; +} diff --git a/stories/assets/scss/style.scss b/stories/assets/scss/style.scss index 575a4252a..a0b317880 100644 --- a/stories/assets/scss/style.scss +++ b/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';