From f368f8b75cfcf25a8849746e52869d49edeb4374 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 18 May 2022 11:20:16 -0500 Subject: [PATCH 1/3] chore(data): update react docgen --- src/data/docgen/react-docgen.json | 141 ++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) diff --git a/src/data/docgen/react-docgen.json b/src/data/docgen/react-docgen.json index d4cd30863b0..25358e10550 100644 --- a/src/data/docgen/react-docgen.json +++ b/src/data/docgen/react-docgen.json @@ -4153,6 +4153,147 @@ } } }, + "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" + }, + "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" + }, + "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" + }, + "highContrast": { + "type": { + "name": "bool" + }, + "required": false, + "description": "Render the component using the high-contrast variant" + }, + "open": { + "type": { + "name": "bool" + }, + "required": true, + "description": "Specify whether the component is currently open or closed" + } + } + }, + "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": "", From 3b403c823bbb6714c326b81f865b23ce9f842e63 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 19 May 2022 11:55:17 -0500 Subject: [PATCH 2/3] feat(components): add content for popover --- src/components/ComponentDemo/KnobContainer.js | 12 +++- src/data/docgen/react-docgen.json | 15 +++-- 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, 150 insertions(+), 10 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 25358e10550..594a38ee883 100644 --- a/src/data/docgen/react-docgen.json +++ b/src/data/docgen/react-docgen.json @@ -4213,7 +4213,8 @@ ] }, "required": false, - "description": "Specify how the popover should align with the trigger element" + "description": "Specify how the popover should align with the trigger element", + "defaultValue": { "value": "'bottom'", "computed": false } }, "as": { "type": { @@ -4235,7 +4236,8 @@ "name": "bool" }, "required": false, - "description": "Specify whether a caret should be rendered" + "description": "Specify whether a caret should be rendered", + "defaultValue": { "value": true, "computed": false } }, "children": { "type": { @@ -4256,21 +4258,24 @@ "name": "bool" }, "required": false, - "description": "Specify whether a drop shadow should be rendered on the popover" + "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" + "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" + "description": "Specify whether the component is currently open or closed", + "defaultValue": { "value": true, "computed": false } } } }, 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..fdaf80a8e38 --- /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', 'Accessibility'] +--- + +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..5167b0339e1 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', 'Accessibility'] --- ## 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..f8b60ac9a02 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', 'Accessibility'] --- +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 From 1210693b4bccf90b73aecac9b70ed93105e8ed9b Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 19 May 2022 11:57:04 -0500 Subject: [PATCH 3/3] chore: update tabs for popover --- src/pages/components/popover/code.mdx | 2 +- src/pages/components/popover/style.mdx | 2 +- src/pages/components/popover/usage.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/components/popover/code.mdx b/src/pages/components/popover/code.mdx index fdaf80a8e38..4cbf8f0b76d 100644 --- a/src/pages/components/popover/code.mdx +++ b/src/pages/components/popover/code.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', 'Code', 'Accessibility'] +tabs: ['Usage', 'Style', 'Code'] --- import PopoverComponentDemo from './ComponentDemo'; diff --git a/src/pages/components/popover/style.mdx b/src/pages/components/popover/style.mdx index 5167b0339e1..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', 'Code', 'Accessibility'] +tabs: ['Usage', 'Style', 'Code'] --- ## Color diff --git a/src/pages/components/popover/usage.mdx b/src/pages/components/popover/usage.mdx index f8b60ac9a02..ad9567ce0f2 100644 --- a/src/pages/components/popover/usage.mdx +++ b/src/pages/components/popover/usage.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', 'Code', 'Accessibility'] +tabs: ['Usage', 'Style', 'Code'] --- import PopoverComponentDemo from './ComponentDemo';