-
Notifications
You must be signed in to change notification settings - Fork 785
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add StorybookDemo component (#3716)
* feat: add StorybookDemo component * feat: add fluid dropdown * feat: update contained list to use small size demo
- Loading branch information
1 parent
0c21972
commit 8b6a187
Showing
85 changed files
with
1,604 additions
and
5,806 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| /* | ||
| * Copyright IBM Corp. 2022, 2023 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { unstable__FluidDropdown as FluidDropdown, Link } from '@carbon/react'; | ||
| import { Caption, Row, Column } from 'gatsby-theme-carbon'; | ||
| import cx from 'classnames'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useState } from 'react'; | ||
|
|
||
| import * as styles from './StorybookDemo.module.scss'; | ||
|
|
||
| const themeItems = [ | ||
| { | ||
| id: 'white', | ||
| label: 'White', | ||
| src: 'white', | ||
| }, | ||
| { | ||
| id: 'g10', | ||
| label: 'Gray 10', | ||
| src: 'g10', | ||
| }, | ||
| { | ||
| id: 'g90', | ||
| label: 'Gray 90', | ||
| src: 'g90', | ||
| }, | ||
| { | ||
| id: 'g100', | ||
| label: 'Gray 100', | ||
| src: 'g100', | ||
| }, | ||
| ]; | ||
|
|
||
| /** | ||
| * The `<StorybookDemo>` component displays an iframe embed for the storybook story | ||
| * for a component. It has the option to show different variants and themes. It also has a | ||
| * `wide` prop to span the full width, and `tall` for larger components. If you would like | ||
| * to use the theme selector, please use the Carbon React Storybook url, | ||
| * https://react.carbondesignsystem.com/?path=/story/components-button--default&globals=theme:g10 | ||
| * as an example. The `themeSelctor` appends `&globals=theme:g10` to the url. | ||
| */ | ||
| const StorybookDemo = ({ tall, themeSelector, wide, url, variants }) => { | ||
| const columnWidth = wide ? 12 : 8; | ||
|
|
||
| const demoClassNames = cx(styles.demo, { | ||
| [styles.tall]: tall, | ||
| [styles.wide]: wide, | ||
| }); | ||
|
|
||
| const [theme, setTheme] = useState(themeItems[0].src); | ||
| const onThemeChange = (item) => { | ||
| setTheme(item.selectedItem.src); | ||
| }; | ||
|
|
||
| const multipleVariants = variants?.length > 1; | ||
|
|
||
| const variantsDefined = | ||
| typeof variants !== 'undefined' && variants.length > 0; | ||
|
|
||
| const initialSetVariant = variantsDefined && variants[0].variant; | ||
|
|
||
| const [variant, setVariant] = useState(initialSetVariant); | ||
|
|
||
| const onVariantChange = (item) => { | ||
| setVariant(item.selectedItem.variant); | ||
| }; | ||
|
|
||
| const iframeUrl = | ||
| url + '/iframe.html?id=' + variant + '&globals=theme:' + theme; | ||
|
|
||
| // Only add border when theme and variant selectors are being displayed | ||
| const border = cx({ | ||
| [styles.themeSelector]: multipleVariants, | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <Row className={styles.dropdowns}> | ||
| {themeSelector && ( | ||
| <Column | ||
| sm={2} | ||
| colMd={4} | ||
| colLg={4} | ||
| noGutterSm | ||
| className={styles.column}> | ||
| <FluidDropdown | ||
| isCondensed | ||
| id="theme-selector" | ||
| titleText="Theme selector" | ||
| label="theme" | ||
| items={themeItems} | ||
| onChange={onThemeChange} | ||
| initialSelectedItem={themeItems[0]} | ||
| className={border} | ||
| /> | ||
| </Column> | ||
| )} | ||
| {variantsDefined && multipleVariants && ( | ||
| <Column | ||
| colSm={2} | ||
| colMd={4} | ||
| colLg={4} | ||
| noGutterSm | ||
| className={styles.column}> | ||
| <FluidDropdown | ||
| isCondensed | ||
| id="variant-selector" | ||
| titleText="Variant selector" | ||
| label="variant" | ||
| items={variants} | ||
| initialSelectedItem={variants[0]?.label} | ||
| onChange={onVariantChange} | ||
| /> | ||
| </Column> | ||
| )} | ||
| </Row> | ||
| <Row className={styles.demoRow}> | ||
| <Column | ||
| colSm={4} | ||
| colMd={8} | ||
| colLg={columnWidth} | ||
| className={demoClassNames}> | ||
| <iframe | ||
| title="Component demo" | ||
| className={styles.iframe} | ||
| src={iframeUrl} | ||
| frameBorder="no" | ||
| sandbox="allow-forms allow-scripts allow-same-origin" | ||
| /> | ||
| </Column> | ||
| </Row> | ||
| <Caption> | ||
| This live demo contains only a preview of functionality and styles | ||
| available for this component. View the{' '} | ||
| <Link href={`${url}/?path=/story/${variant}&globals=theme:${theme}`}> | ||
| full demo | ||
| </Link>{' '} | ||
| on Storybook for additional information such as its version, controls, | ||
| and API documentation. | ||
| </Caption> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| StorybookDemo.propTypes = { | ||
| /** | ||
| * Storybook demo height | ||
| */ | ||
| tall: PropTypes.bool, | ||
| /** | ||
| * Storybook demo display or hide theme selector | ||
| */ | ||
| themeSelector: PropTypes.bool, | ||
| /** | ||
| * Storybook demo url to change themes and variants | ||
| */ | ||
| url: PropTypes.string.isRequired, | ||
| /** | ||
| * Storybook demo variants for the specified component | ||
| */ | ||
| variants: PropTypes.object.isRequired, | ||
| /** | ||
| * Storybook demo width | ||
| */ | ||
| wide: PropTypes.bool, | ||
| }; | ||
|
|
||
| export default StorybookDemo; |
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,54 @@ | ||
| /* | ||
| * Copyright IBM Corp. 2022, 2022 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| @use '@carbon/react/scss/utilities/convert' as convert; | ||
|
|
||
| .column { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .dropdowns { | ||
| :global(.cds--dropdown) { | ||
| border-bottom: 1px solid $border-subtle-01; | ||
| } | ||
| } | ||
|
|
||
| .theme-selector { | ||
| @include breakpoint('md') { | ||
| :global(.cds--dropdown_wrapper) { | ||
| margin-right: -1px; | ||
| } | ||
| } | ||
|
|
||
| :global(.cds--dropdown) { | ||
| border-right: 1px solid $border-subtle-01; | ||
| } | ||
| } | ||
|
|
||
| .demo-row { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| .demo { | ||
| height: rem(320px); | ||
| padding: $spacing-03; | ||
| background: $layer-01; | ||
| } | ||
|
|
||
| .tall, | ||
| .wide { | ||
| height: rem(480px); | ||
| } | ||
|
|
||
| .wide.tall { | ||
| height: rem(640px); | ||
| } | ||
|
|
||
| .iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| } |
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,3 @@ | ||
| import StorybookDemo from './StorybookDemo'; | ||
|
|
||
| export default StorybookDemo; |
6 changes: 2 additions & 4 deletions
6
src/gatsby-theme-carbon/components/MDXProvider/defaultComponents.js
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 |
|---|---|---|
| @@ -1,18 +1,16 @@ | ||
| import defaultComponents from 'gatsby-theme-carbon/src/components/MDXProvider/defaultComponents'; | ||
|
|
||
| import MdxIcon from '../../../components/MdxIcon'; | ||
| import ComponentDemo from '../../../components/ComponentDemo'; | ||
| import ComponentVariant from '../../../components/ComponentDemo/ComponentVariant'; | ||
| import ColorPalette from '../../../components/ColorPalette'; | ||
| import Profile from '../../../components/Profile'; | ||
| import ListSection from '../../../components/ListSection'; | ||
| import StorybookDemo from '../../../components/StorybookDemo'; | ||
|
|
||
| export default { | ||
| ...defaultComponents, | ||
| ComponentDemo, | ||
| ComponentVariant, | ||
| MdxIcon, | ||
| ColorPalette, | ||
| Profile, | ||
| ListSection, | ||
| StorybookDemo, | ||
| }; |
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
Oops, something went wrong.