diff --git a/scss/bitstyles/organisms/sidebar/Sidebar.js b/scss/bitstyles/organisms/sidebar/Sidebar.js new file mode 100644 index 000000000..7fb965bff --- /dev/null +++ b/scss/bitstyles/organisms/sidebar/Sidebar.js @@ -0,0 +1,216 @@ +import logoLarge from '../../../../test/assets/images/logoLarge.svg'; +import Button from '../../atoms/button/Button'; +import icons from '../../../../assets/images/icons.svg'; + +export const logoImg = document.createElement('img'); +logoImg.src = logoLarge; +logoImg.width = '150'; +logoImg.height = '50'; +logoImg.alt = 'Company logo'; +logoImg.classList.add( + 'u-flex-shrink-0', + 'u-margin-m-left', + 'u-margin-m-right', + 'u-margin-m-bottom' +); + +export const buttonList = document.createElement('ul'); +buttonList.classList.add( + 'u-flex-grow-1', + 'u-flex-shrink-1', + 'u-overflow-y-auto', + 'u-list-none', + 'u-flex', + 'u-flex-col', + 'u-items-start', + 'u-items-stretch', + 'u-padding-s4-right', + 'u-padding-s4-left' +); + +const listItem = document.createElement('li'); +listItem.classList.add('u-margin-s2-bottom', 'u-flex'); + +const buttomComponent = (label) => + Button({ + classname: ['u-justify-start'], + children: `${label}`, + colorVariant: ['transparent'], + }); + +const labels = [ + 'Dashboard', + 'Projects', + 'Team', + 'Customers', + 'Bookings', + 'Sales', +]; + +labels.forEach((label) => + buttonList.appendChild(listItem.appendChild(buttomComponent(label))) +); + +export const bottom = document.createElement('div'); +bottom.innerHTML = ` +
+
+ + +
+`; + +const Sidebar = ({ topSlot, children, bottomSlot, mainContent = '' }) => { + const sidebar = document.createElement('div'); + sidebar.classList.add('u-flex', 'u-height-100vh', 'u-relative'); + + const nav = document.createElement('nav'); + nav.classList.add('u-flex'); + sidebar.appendChild(nav); + + const sidebarLarge = document.createElement('div'); + sidebarLarge.classList.add( + 'u-hidden', + 'o-sidebar--large', + 'u-flex-shrink-0', + 'u-bg-grayscale-light-4', + 'u-padding-m-top', + 'u-flex@l', + 'u-flex-col' + ); + nav.appendChild(sidebarLarge); + + const sidebarSmall = document.createElement('div'); + sidebarSmall.classList.add( + 'o-sidebar--small', + 'u-bg-grayscale-light-4', + 'u-shadow-brand-1', + 'u-flex', + 'u-flex-col', + 'u-hidden@l' + ); + nav.appendChild(sidebarSmall); + + let sidebarOpen = false; + + const toggleSidebar = () => { + sidebarOpen = !sidebarOpen; + sidebarSmall.style.display = sidebarOpen ? 'flex' : 'none'; + }; + + const closeButton = () => + Button({ + children: `Close Sidebar`, + colorVariant: ['transparent'], + shapeVariant: ['square'], + onClick: () => toggleSidebar(), + }); + + sidebarSmall.appendChild(closeButton()); + + sidebarSmall.setAttribute('x-transition:enter', 'is-transitioning'); + sidebarSmall.setAttribute('x-transition:enter-start', 'is-off-screen'); + sidebarSmall.setAttribute('x-transition:enter-end', 'is-on-screen'); + sidebarSmall.setAttribute('x-transition:leave', 'is-transitioning'); + sidebarSmall.setAttribute('x-transition:leave-start', 'is-on-screen'); + sidebarSmall.setAttribute('x-transition:leave-end', 'is-off-screen'); + + if (topSlot) { + sidebarLarge.appendChild(topSlot.cloneNode(true)); + sidebarSmall.appendChild(topSlot); + } + if (children) { + sidebarLarge.appendChild(children.cloneNode(true)); + sidebarSmall.appendChild(children); + } + if (bottomSlot) { + sidebarLarge.appendChild(bottomSlot.cloneNode(true)); + sidebarSmall.appendChild(bottomSlot); + } + + const main = document.createElement('main'); + main.classList.add( + 'u-flex-grow-1', + 'u-padding-l4-left@l', + 'u-padding-l3-right@l', + 'u-padding-l3-bottom', + 'u-padding-m', + 'u-overflow-y-auto' + ); + sidebar.appendChild(main); + + const headerContainer = document.createElement('div'); + headerContainer.classList.add( + 'u-flex', + 'u-items-center', + 'u-margin-m-bottom' + ); + main.appendChild(headerContainer); + + const openButton = () => + Button({ + classname: [ + 'u-flex-shrink-0', + 'u-margin-neg-m-left', + 'u-margin-s4-right', + 'u-hidden@l', + ], + children: `Open Sidebar`, + colorVariant: ['secondary'], + shapeVariant: ['square'], + onClick: () => toggleSidebar(), + }); + headerContainer.appendChild(openButton()); + + const header = document.createElement('h1'); + header.classList.add('u-margin-0'); + header.innerHTML = 'Projects'; + headerContainer.appendChild(header); + + const mainContentDiv = document.createElement('div'); + mainContentDiv.innerHTML = mainContent; + main.appendChild(mainContentDiv); + + return sidebar; +}; + +export default Sidebar; diff --git a/scss/bitstyles/organisms/sidebar/_index.scss b/scss/bitstyles/organisms/sidebar/_index.scss index 028f50463..75ad3b56e 100644 --- a/scss/bitstyles/organisms/sidebar/_index.scss +++ b/scss/bitstyles/organisms/sidebar/_index.scss @@ -8,7 +8,7 @@ } #{classname.get($classname-items: 'sidebar--small', $layer: 'organism')} { - position: fixed; + position: absolute; z-index: settings.$z-index; top: 0; bottom: 0; diff --git a/scss/bitstyles/organisms/sidebar/sidebar.stories.js b/scss/bitstyles/organisms/sidebar/sidebar.stories.js new file mode 100644 index 000000000..56643a30b --- /dev/null +++ b/scss/bitstyles/organisms/sidebar/sidebar.stories.js @@ -0,0 +1,50 @@ +import Sidebar, { logoImg, buttonList, bottom } from './Sidebar'; + +export default { + title: 'Organisms/Sidebar', + component: Sidebar, + argTypes: { + topSlot: { + description: + 'The top area of the sidebar, can be a compony logo for example', + }, + children: { + description: + 'All the items that will go on the center of the sidebar, a list of buttons for example', + }, + bottomSlot: { + description: + 'The bottom area of the sidebar, a footer, or avatar link for example ', + }, + mainContent: { + description: + 'Content that goes on the main area, not part of the sidebar', + }, + }, +}; + +const mainContent = `Cotton candy chupa chups gummi bears cupcake candy canes sweet gummi bears macaroon lollipop. Danish toffee cheesecake chocolate bar jelly-o chocolate cake. Candy canes gummi bears pie fruitcake candy canes powder cheesecake. Jelly marshmallow marzipan apple pie jelly cupcake. Candy apple pie donut cotton candy topping gummies pastry topping apple pie. Gummies ice cream cookie pudding caramels candy canes pie. Ice cream macaroon halvah pastry lemon drops cheesecake.

`; + +const Template = (args) => Sidebar(args); + +export const Default = Template.bind({}); +Default.args = { + topSlot: logoImg, + children: buttonList, + bottomSlot: bottom, + mainContent, +}; +Default.parameters = { + zeplinLink: [ + { + name: 'base', + link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=63c7b0d90bf0da0ef88e1f19', + }, + ], +}; + +export const Minimal = Template.bind({}); +Minimal.args = { + children: buttonList.cloneNode(true), + mainContent, +}; diff --git a/scss/bitstyles/ui/sidebar.stories.mdx b/scss/bitstyles/ui/sidebar.stories.mdx index a92b89a40..df473ce7b 100644 --- a/scss/bitstyles/ui/sidebar.stories.mdx +++ b/scss/bitstyles/ui/sidebar.stories.mdx @@ -11,14 +11,6 @@ A vertical navbar provides more space than a horizontal version, useful for a lo Uses a fullwidth dropdown to fit with no overlap. -
-

- These examples use AlpineJS for the behavior. If you’re using a different JS - package, replace the blocks of html attributes starting with `x-`, and with - `@click`. -

-
-
Examples use
+Default, with using all top, children and bottom slots. + + + + + +Minimal, using only the children slot. + - - {` -
- -
-
- -

Projects

-
-

Cotton candy chupa chups gummi bears cupcake candy canes sweet gummi bears macaroon lollipop. Danish toffee cheesecake chocolate bar jelly-o chocolate cake. Candy canes gummi bears pie fruitcake candy canes powder cheesecake. Jelly marshmallow marzipan apple pie jelly cupcake. Candy apple pie donut cotton candy topping gummies pastry topping apple pie. Gummies ice cream cookie pudding caramels candy canes pie. Ice cream macaroon halvah pastry lemon drops cheesecake. Chocolate cake croissant marzipan gummi bears topping brownie. Donut cookie pie muffin sesame snaps. Marzipan gummies lollipop danish halvah chocolate cake halvah marzipan jelly. Donut cheesecake gummies macaroon tootsie roll croissant. Powder chupa chups icing.

-

Cheesecake dragée cake chocolate bar oat cake. Muffin bear claw apple pie topping carrot cake pie sugar plum. Carrot cake croissant fruitcake. Toffee cotton candy cotton candy jelly-o liquorice. Croissant sugar plum sweet roll. Topping halvah jelly croissant sweet roll chocolate bar. Sesame snaps sweet roll tart. Cake chocolate bar caramels. Macaroon ice cream candy canes croissant. Pastry marzipan macaroon. Soufflé sweet chupa chups caramels. Soufflé candy sweet. Biscuit biscuit caramels wafer pudding jujubes.

-

Cupcake bear claw gingerbread carrot cake cake cheesecake chupa chups. Sesame snaps pudding muffin chocolate. Chupa chups soufflé jujubes dragée. Marshmallow bonbon caramels gummi bears marzipan apple pie. Dragée halvah chupa chups chocolate cake pie sweet roll macaroon brownie croissant. Ice cream fruitcake gummies. Candy canes wafer dragée gummi bears. Pudding ice cream chocolate bar. Chocolate bar donut jelly-o lemon drops brownie topping. Caramels pudding macaroon chocolate gingerbread cheesecake. Danish jelly-o liquorice biscuit oat cake dessert icing. Pudding chocolate bar tiramisu marshmallow. Jelly-o donut pudding chocolate. Pie pie chocolate bar apple pie chocolate cake croissant caramels.

-

Chocolate jelly-o wafer. Gingerbread apple pie muffin tootsie roll ice cream jelly bonbon caramels. Wafer gummi bears pudding. Pudding cotton candy pie croissant cookie. Gummies jelly wafer chocolate. Fruitcake cake gummies cupcake gummies. Sugar plum chupa chups chocolate cake macaroon cupcake dessert. Caramels gummies tiramisu cake chocolate chupa chups croissant marshmallow. Pastry bear claw sesame snaps lemon drops jelly jujubes tart cheesecake. Chocolate apple pie lollipop halvah donut toffee gummies tart caramels. Carrot cake macaroon biscuit wafer jujubes. Cake candy canes cupcake chupa chups chocolate cake wafer powder. Marzipan wafer pudding toffee pastry.

-
-
- `} - + ## Customization @@ -355,36 +88,3 @@ The width of the sidebar can be overridden for large and small screens: $large-width: 15rem; $small-width: 80vw; ``` - -For the small-screen version, there are several more variables that set appearance and animations. - -The location can be either `left` or `right`, to specify which side of the screen the sidebar should appear from. - -```scss -$small-location: left; -$small-box-shadow: var(design-token.get('size', 'm')) 0 var( - design-token.get('size', 'l2') - ) - rgba(var(design-token.get('color', 'brand-1')), 0.1), var( - design-token.get('size', 'l2') - ) 0 var(design-token.get('size', 'm')) rgba(var(design-token.get('color', 'grayscale', 'light-1')), 0.07), - 0 0 var(design-token.get('size', 'l3')) rgba( - var(design-token.get('color', 'grayscale', 'light-1')), - 0.1 - ); -``` - -By default the sidebar will animate into view and back out, assuming the classes `.is-off-screen` and `.is-on-screen` will be applied using JS. The classnames and the styles to be applied can be overridden. Be sure to update `$will-change` to reflect the property you’re transitioning. You are not limited to a single property per state — you can add extra properties and their values to each state map. - -```scss -$will-change: transform; -$transition: transform 0.12s ease-in; -$states: ( - 'off-screen': ( - 'transform': translateX(-100%), - ), - 'on-screen': ( - 'transform': none, - ), -); -``` diff --git a/scss/bitstyles/utilities/bg/_settings.scss b/scss/bitstyles/utilities/bg/_settings.scss index 52e95d307..14a857802 100644 --- a/scss/bitstyles/utilities/bg/_settings.scss +++ b/scss/bitstyles/utilities/bg/_settings.scss @@ -9,6 +9,7 @@ $values: ( 'grayscale-light-1': var(design-token.get('color', 'grayscale', 'light-1')), 'grayscale-light-2': var(design-token.get('color', 'grayscale', 'light-2')), 'grayscale-light-3': var(design-token.get('color', 'grayscale', 'light-3')), + 'grayscale-light-4': var(design-token.get('color', 'grayscale', 'light-4')), 'white': var(design-token.get('color', 'grayscale', 'white')), ) !default; $breakpoints: () !default; diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css index 64aec8426..48ee464a3 100644 --- a/test/scss/fixtures/bitstyles-overrides.css +++ b/test/scss/fixtures/bitstyles-overrides.css @@ -2176,7 +2176,7 @@ table { var(--bscpn-size-m) 0 var(--bscpn-size-s1) rgba(var(--bscpn-color-grayscale-light-1-rgb), 7%), 0 0 var(--bscpn-size-l1) rgba(var(--bscpn-color-grayscale-light-1-rgb), 10%); - position: fixed; + position: absolute; right: 0; top: 0; width: 80vw; diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css index 123863e5f..a1422fb79 100644 --- a/test/scss/fixtures/bitstyles.css +++ b/test/scss/fixtures/bitstyles.css @@ -2604,7 +2604,7 @@ table { rgba(var(--bs-color-grayscale-light-1-rgb), 7%), 0 0 var(--bs-size-l1) rgba(var(--bs-color-grayscale-light-1-rgb), 10%); left: 0; - position: fixed; + position: absolute; top: 0; width: 80vw; z-index: var(--bs-z-index-overlay); @@ -2731,6 +2731,9 @@ table { .u-bg-grayscale-light-3 { background-color: var(--bs-color-grayscale-light-3); } +.u-bg-grayscale-light-4 { + background-color: var(--bs-color-grayscale-light-4); +} .u-bg-white { background-color: var(--bs-color-grayscale-white); }