From 64af1b6cdf9072ebef80e08d0867682490d9c70a Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 24 May 2022 10:25:01 -0500 Subject: [PATCH] feat(components): add content for popover (#2947) * chore(data): update react docgen * feat(components): add content for popover * chore: update tabs for popover Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- src/components/ComponentDemo/KnobContainer.js | 12 +- src/data/docgen/react-docgen.json | 146 ++++++++++++++++++ src/pages/components/popover/ComponentDemo.js | 55 +++++++ src/pages/components/popover/code.mdx | 34 ++++ src/pages/components/popover/style.mdx | 2 +- src/pages/components/popover/styles.scss | 36 +++++ src/pages/components/popover/usage.mdx | 6 +- 7 files changed, 286 insertions(+), 5 deletions(-) create mode 100644 src/pages/components/popover/ComponentDemo.js create mode 100644 src/pages/components/popover/code.mdx create mode 100644 src/pages/components/popover/styles.scss diff --git a/src/components/ComponentDemo/KnobContainer.js b/src/components/ComponentDemo/KnobContainer.js index 56cfedacdd7..5b05585db3a 100644 --- a/src/components/ComponentDemo/KnobContainer.js +++ b/src/components/ComponentDemo/KnobContainer.js @@ -163,11 +163,17 @@ const Knob = ({ const propString = parsedKnobProps.concat( Object.entries(newKnobs[component]).reduce( (accumulator, [prop, value]) => { - if (!value || value === `'default'`) { + if (value === undefined) { + return accumulator; + } + if (value === `'default'`) { return accumulator; } if (typeof value === 'boolean') { - return `${accumulator} ${prop}`; + if (value === true) { + return `${accumulator} ${prop}`; + } + return `${accumulator} ${prop}={${value}}`; } return `${accumulator} ${prop}=${value}`; }, @@ -205,7 +211,7 @@ const Knob = ({ title={description} defaultChecked={defaultChecked} labelText={name} - wrapperClassName={checkboxWrapper} + className={checkboxWrapper} id={inputId} /> ); diff --git a/src/data/docgen/react-docgen.json b/src/data/docgen/react-docgen.json index f09793f2647..23d8e46d1c5 100644 --- a/src/data/docgen/react-docgen.json +++ b/src/data/docgen/react-docgen.json @@ -4153,6 +4153,152 @@ } } }, + "Popover": { + "description": "", + "methods": [], + "displayName": "Popover", + "props": { + "align": { + "type": { + "name": "enum", + "value": [ + { + "value": "'top'", + "computed": false + }, + { + "value": "'top-left'", + "computed": false + }, + { + "value": "'top-right'", + "computed": false + }, + { + "value": "'bottom'", + "computed": false + }, + { + "value": "'bottom-left'", + "computed": false + }, + { + "value": "'bottom-right'", + "computed": false + }, + { + "value": "'left'", + "computed": false + }, + { + "value": "'left-bottom'", + "computed": false + }, + { + "value": "'left-top'", + "computed": false + }, + { + "value": "'right'", + "computed": false + }, + { + "value": "'right-bottom'", + "computed": false + }, + { + "value": "'right-top'", + "computed": false + } + ] + }, + "required": false, + "description": "Specify how the popover should align with the trigger element", + "defaultValue": { "value": "'bottom'", "computed": false } + }, + "as": { + "type": { + "name": "union", + "value": [ + { + "name": "string" + }, + { + "name": "elementType" + } + ] + }, + "required": false, + "description": "Provide a custom element or component to render the top-level node for the\ncomponent." + }, + "caret": { + "type": { + "name": "bool" + }, + "required": false, + "description": "Specify whether a caret should be rendered", + "defaultValue": { "value": true, "computed": false } + }, + "children": { + "type": { + "name": "node" + }, + "required": false, + "description": "Provide elements to be rendered inside of the component" + }, + "className": { + "type": { + "name": "string" + }, + "required": false, + "description": "Provide a custom class name to be added to the outermost node in the\ncomponent" + }, + "dropShadow": { + "type": { + "name": "bool" + }, + "required": false, + "description": "Specify whether a drop shadow should be rendered on the popover", + "defaultValue": { "value": true, "computed": false } + }, + "highContrast": { + "type": { + "name": "bool" + }, + "required": false, + "description": "Render the component using the high-contrast variant", + "defaultValue": { "value": false, "computed": false } + }, + "open": { + "type": { + "name": "bool" + }, + "required": true, + "description": "Specify whether the component is currently open or closed", + "defaultValue": { "value": true, "computed": false } + } + } + }, + "PopoverContent": { + "description": "", + "methods": [], + "props": { + "children": { + "type": { + "name": "node" + }, + "required": false, + "description": "Provide elements to be rendered inside of the component" + }, + "className": { + "type": { + "name": "string" + }, + "required": false, + "description": "Provide a custom class name to be added to the outermost node in the\ncomponent" + } + } + }, "PrimaryButton": { "description": "", "displayName": "PrimaryButton" }, "ProgressIndicator": { "description": "", diff --git a/src/pages/components/popover/ComponentDemo.js b/src/pages/components/popover/ComponentDemo.js new file mode 100644 index 00000000000..2dc4f58b3b3 --- /dev/null +++ b/src/pages/components/popover/ComponentDemo.js @@ -0,0 +1,55 @@ +import './styles.scss'; + +import { Checkbox } from '@carbon/icons-react'; +import React from 'react'; +import ComponentDemo from '../../../components/ComponentDemo'; +import ComponentVariant from '../../../components/ComponentDemo/ComponentVariant'; + +const content = ` + +
+ +
+ +
+

Available storage

+

+ This server has 150 GB of block storage remaining. +

+
+ + +`; + +const components = [ + { + id: 'popover', + label: 'Popover', + }, +]; + +const knobs = { + Popover: ['align', 'caret', 'dropShadow', 'highContrast'], +}; + +const links = { + React: + 'https://react.carbondesignsystem.com/?path=/story/components-popover--playground', +}; + +function PopoverComponentDemo() { + return ( + + + {content} + + + ); +} + +export default PopoverComponentDemo; diff --git a/src/pages/components/popover/code.mdx b/src/pages/components/popover/code.mdx new file mode 100644 index 00000000000..4cbf8f0b76d --- /dev/null +++ b/src/pages/components/popover/code.mdx @@ -0,0 +1,34 @@ +--- +title: Popover +description: + A popover is a layer that pops up over all other elements on a page. +tabs: ['Usage', 'Style', 'Code'] +--- + +import PopoverComponentDemo from './ComponentDemo'; + + + +Preview the popover component with the React live demo. For detailed code usage +documentation, see the Storybooks for each framework below. + + + +## Documentation + + + + + + + + + + + +## Live demo + + diff --git a/src/pages/components/popover/style.mdx b/src/pages/components/popover/style.mdx index 5ac1d2b57c8..e4821f2411e 100644 --- a/src/pages/components/popover/style.mdx +++ b/src/pages/components/popover/style.mdx @@ -2,7 +2,7 @@ title: Popover description: A popover is a layer that pops up over all other elements on a page. -tabs: ['Usage', 'Style'] +tabs: ['Usage', 'Style', 'Code'] --- ## Color diff --git a/src/pages/components/popover/styles.scss b/src/pages/components/popover/styles.scss new file mode 100644 index 00000000000..c29ad0ef255 --- /dev/null +++ b/src/pages/components/popover/styles.scss @@ -0,0 +1,36 @@ +@use '@carbon/react/scss/theme'; +@use '@carbon/react/scss/spacing'; +@use '@carbon/react/scss/type'; + +.popover-trigger { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border: 1px solid theme.$border-subtle; +} + +.popover-trigger svg { + fill: theme.$background-inverse; +} + +.popover-example-content { + padding: 1rem; +} + +.popover-title { + @include type.type-style('heading-compact-01'); + margin-bottom: spacing.$spacing-01; +} + +.popover-details { + @include type.type-style('body-compact-01'); +} + +.popover-story { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} diff --git a/src/pages/components/popover/usage.mdx b/src/pages/components/popover/usage.mdx index 8ee9adcafc3..ad9567ce0f2 100644 --- a/src/pages/components/popover/usage.mdx +++ b/src/pages/components/popover/usage.mdx @@ -2,9 +2,11 @@ title: Popover description: A popover is a layer that pops up over all other elements on a page. -tabs: ['Usage', 'Style'] +tabs: ['Usage', 'Style', 'Code'] --- +import PopoverComponentDemo from './ComponentDemo'; + A popover is a layer that pops up over all other elements on a page. @@ -45,6 +47,8 @@ tooltips, overflow menus, and dropdown menus. ## Live demo + + ## Variants By default, a popovers structure is made up of a container with no additional