-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4d91278
commit 30a1726
Showing
10 changed files
with
435 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import './sidebardata.scss'; | ||
|
|
||
| export const Sidebardata = ({ data, headerText }) => { | ||
|
|
||
| return ( | ||
| <> | ||
| <a href="#" className="accordion-navbar__item--headertext">{headerText}</a><span className="accordion-navbar__item--chevron"></span> | ||
| <ul class="accordion__panel"> | ||
| {data.map(function (item, index) { | ||
| return ( | ||
| <li className="accordion__panel--description"><a href="#" key={index}> {item.descriptionText} </a></li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| @import '../../assets/scss/mixins'; | ||
| @import '../../assets/scss/breakpoints'; | ||
| @import '../../assets/scss/variables'; | ||
|
|
||
| .accordion-navbar__item--headertext { | ||
| border: none; | ||
| font-family: $Font-Family-ProximaBold; | ||
| font-size: $font-size-16; | ||
| margin-bottom: 0; | ||
| padding: $spacing-24; | ||
|
|
||
| @include devicebreak(medium) { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .accordion__panel { | ||
| display: none; | ||
| height: auto; | ||
| padding: 0; | ||
|
|
||
| &--description > a { | ||
| border: none; | ||
| display: block; | ||
| font-family: $Font-Family-ProximaRegular; | ||
| font-size: $font-size-14; | ||
| margin: $spacing-16 $spacing-24 0 $spacing-32; | ||
|
|
||
| @include devicebreak(medium) { | ||
| font-size: $font-size-16; | ||
| margin-bottom: $spacing-16; | ||
| margin-left: $spacing-48; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| [dir='rtl'] { | ||
| .accordion__panel { | ||
| &--description > a { | ||
| margin-left: $spacing-24; | ||
| margin-right: $spacing-32; | ||
|
|
||
| @include devicebreak(medium) { | ||
| margin-right: $spacing-48; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import { SidebarNav, SidebarMenu } from '../../assets/js/Sidebar_custom'; | ||
| import { Sidebardata } from '../../Molecules/Sidebar-data/Sidebardata'; | ||
| import './sidebar.scss'; | ||
|
|
||
| export const Sidebar = ({ headerText, label, data }) => { | ||
| useEffect(() => { | ||
| SidebarNav(); | ||
| SidebarMenu(); | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div className='grid-x grid-margin-x'> | ||
| <div className='cell medium-4 accordion-wrapper'> | ||
| <span className='accordion-navbar__menu' id='sidebar-menu'>{label}</span> | ||
| <ul className='accordion-navbar' id='accordion-menu'> | ||
| <li className='accordion-navbar__item'> | ||
| <Sidebardata data={data} headerText={headerText} /> | ||
| </li> | ||
| <li className='accordion-navbar__no-children'> | ||
| <a href="#" className="accordion-navbar__item--headertext">{headerText}</a> | ||
| </li> | ||
| <li className='accordion-navbar__item'> | ||
| <Sidebardata data={data} headerText={headerText} /> | ||
| </li> | ||
| <li className='accordion-navbar__no-children'> | ||
| <a href="#" className="accordion-navbar__item--headertext">{headerText}</a> | ||
| </li> | ||
| <li className='accordion-navbar__no-children'> | ||
| <a href="#" className="accordion-navbar__item--headertext">{headerText}</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| import { Meta, Story } from "@storybook/addon-docs"; | ||
| import { Sidebar } from "./Sidebar"; | ||
|
|
||
| export const getCaptionForLocale = (locale) => { | ||
| switch (locale) { | ||
| case "english": | ||
| const engText = { | ||
| sidebardata: [ | ||
| { | ||
| descriptionText: "Subpage title", | ||
| }, | ||
| { | ||
| descriptionText: | ||
| "Subpage with an exceptionally long title on two lines", | ||
| }, | ||
| { | ||
| descriptionText: "Subpage title", | ||
| }, | ||
| ], | ||
| headerText: "PAGE TITLE", | ||
| label: "MENU", | ||
| }; | ||
| return engText; | ||
| case "arabic": | ||
| const arabicText = { | ||
| sidebardata: [ | ||
| { | ||
| descriptionText: "عنوان الصفحة الفرعية", | ||
| }, | ||
| { | ||
| descriptionText: "صفحة فرعية بعنوان طويل بشكل استثنائي في سطرين", | ||
| }, | ||
| { | ||
| descriptionText: "عنوان الصفحة الفرعية", | ||
| }, | ||
| ], | ||
| headerText: "عنوان الصفحة", | ||
| label: "قائمة", | ||
| }; | ||
| return arabicText; | ||
| case "burmese": | ||
| const burmeseText = { | ||
| sidebardata: [ | ||
| { | ||
| descriptionText: "စာမျက်နှာခွဲခေါင်းစဉ်", | ||
| }, | ||
| { | ||
| descriptionText: | ||
| "စာကြောင်းနှစ်ကြောင်းတွင်ထူးခြားသောခေါင်းစဉ်ရှည်ပါ ၀ င်သောစာမျက်နှာခွဲ", | ||
| }, | ||
| { | ||
| descriptionText: "စာမျက်နှာခွဲခေါင်းစဉ်", | ||
| }, | ||
| ], | ||
| headerText: "စာမျက်နှာခေါင်းစဉ်", | ||
| label: "မီနူး", | ||
| }; | ||
| return burmeseText; | ||
| case "japanese": | ||
| const japaneseText = { | ||
| sidebardata: [ | ||
| { | ||
| descriptionText: "サブページのタイトル", | ||
| }, | ||
| { | ||
| descriptionText: "2行に非常に長いタイトルのサブページ", | ||
| }, | ||
| { | ||
| descriptionText: "サブページのタイトル", | ||
| }, | ||
| ], | ||
| headerText: "ページタイトル", | ||
| label: "メニュー", | ||
| }; | ||
| return japaneseText; | ||
| default: | ||
| const dummy = { | ||
| sidebardata: [ | ||
| { | ||
| descriptionText: "Subpage title", | ||
| }, | ||
| { | ||
| descriptionText: | ||
| "Subpage with an exceptionally long title on two lines", | ||
| }, | ||
| { | ||
| descriptionText: "Subpage title", | ||
| }, | ||
| ], | ||
| headerText: "PAGE TITLE", | ||
| label: "Menu", | ||
| }; | ||
| return dummy; | ||
| } | ||
| }; | ||
|
|
||
| <Meta title="Organism/Navigation/Sidebar" /> | ||
|
|
||
| <style>{` | ||
| .subheading { | ||
| font-weight: 700; | ||
| font-size: 24px; | ||
| color: #031c2d; | ||
| letter-spacing: 1.5px; | ||
| line-height: 24px; | ||
| margin-bottom: 12px; | ||
| margin-top: 40px; | ||
| } | ||
| .sbdocs .sbdocs-p, | ||
| .sbdocs .sbdocs-li{ | ||
| font-size: 1rem; | ||
| } | ||
| .css-1gh4yjl { | ||
| font-size: 1rem; | ||
| } | ||
| `}</style> | ||
|
|
||
| # Sidebar Component | ||
|
|
||
| The Sidebar Component is a shorter piece of text that appears next to and accompanies a longer article. | ||
|
|
||
| <Story name="Sidebar"> | ||
| {(args, { globals: { locale } }) => { | ||
| const caption = getCaptionForLocale(locale); | ||
| return ( | ||
| <Sidebar | ||
| data={caption.sidebardata} | ||
| headerText={caption.headerText} | ||
| label={caption.label} | ||
| active={"default"} | ||
| ></Sidebar> | ||
| ); | ||
| }} | ||
| </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 (Faq_custom.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 variables, mixin from{" "} | ||
| <code>assets/scss</code> | ||
| </li> | ||
| <li> | ||
| Component SCSS file: <code>sidebar.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> | ||
| <u>To use JS include the following files in your implementation</u> | ||
| <li> | ||
| The compiled JS file from <code>assets/js/Faq_custom.js</code> | ||
| </li> | ||
| </ul> |
Oops, something went wrong.