feat(components): add content for popover

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}
       />
     );

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": "",

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 = `
+<Popover open>
+  <div className="popover-trigger">
+    <Checkbox />
+  </div>
+  <PopoverContent>
+    <div className="popover-example-content">
+      <p className="popover-title">Available storage</p>
+      <p className="popover-details">
+        This server has 150 GB of block storage remaining.
+      </p>
+    </div>
+  </PopoverContent>
+</Popover>
+`;
+
+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 (
+    <ComponentDemo
+      components={components}
+      scope={{
+        Checkbox,
+      }}
+    >
+      <ComponentVariant id="popover" knobs={knobs} links={links}>
+        {content}
+      </ComponentVariant>
+    </ComponentDemo>
+  );
+}
+
+export default PopoverComponentDemo;

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';
+
+<PageDescription>
+
+Preview the popover component with the React live demo. For detailed code usage
+documentation, see the Storybooks for each framework below.
+
+</PageDescription>
+
+## Documentation
+
+<Row className="resource-card-group">
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+    subTitle="React"
+    href="https://react.carbondesignsystem.com/?path=/story/components-search--default"
+    >
+
+<MdxIcon name="react" />
+
+  </ResourceCard>
+</Column>
+</Row>
+
+## Live demo
+
+<PopoverComponentDemo />

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

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;
+}

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';
+
 <PageDescription>
 
 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
 
+<PopoverComponentDemo />
+
 ## Variants
 
 By default, a popovers structure is made up of a container with no additional