From 22cdc872c7824af511e09b38ea029715b1a49dd3 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Thu, 21 Oct 2021 14:11:12 -0500
Subject: [PATCH] feat(react,carbon-react): add layer stories (#9838)

* feat(react,carbon-react): add layer stories and deprecate light prop

* chore(react): update deprecation message for lsitbox light prop

* chore(react): remove deprecation warning for light prop

* chore(react): remove accidental change to content switcher

Co-authored-by: Alessandra Davila <aledavila@ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/Select/Select.stories.js   |  58 +++++++
 .../components/TextArea/TextArea.stories.js   |  36 ++++
 .../components/TextInput/TextInput.stories.js |  31 +++-
 .../src/components/Tile/Tile.stories.js       | 156 ++++++++++++++++++
 .../TimePicker/TimePicker.stories.js          |  42 +++++
 .../ContentSwitcher/ContentSwitcher.js        |   2 +-
 .../react/src/components/ListBox/ListBox.js   |   3 +-
 .../src/components/RadioTile/RadioTile.js     |   3 +-
 .../react/src/components/Select/Select.js     |   3 +-
 .../react/src/components/TextArea/TextArea.js |   3 +-
 .../TextInput/ControlledPasswordInput.js      |   3 +-
 .../src/components/TextInput/PasswordInput.js |   3 +-
 .../src/components/TextInput/TextInput.js     |   3 +-
 packages/react/src/components/Tile/Tile.js    |   2 +
 .../src/components/TimePicker/TimePicker.js   |   3 +-
 15 files changed, 341 insertions(+), 10 deletions(-)

diff --git a/packages/carbon-react/src/components/Select/Select.stories.js b/packages/carbon-react/src/components/Select/Select.stories.js
index 057fb8ff05a7..779e3497c1ae 100644
--- a/packages/carbon-react/src/components/Select/Select.stories.js
+++ b/packages/carbon-react/src/components/Select/Select.stories.js
@@ -12,6 +12,7 @@ import {
   SelectItemGroup,
   SelectSkeleton,
 } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/Select',
@@ -91,3 +92,60 @@ export const _Skeleton = () => (
     <SelectSkeleton />
   </div>
 );
+
+export const withLayer = () => {
+  return (
+    <>
+      <Select
+        id="select-1"
+        defaultValue="placeholder-item"
+        labelText=""
+        helperText="First layer">
+        <SelectItem
+          disabled
+          hidden
+          value="placeholder-item"
+          text="Choose an option"
+        />
+        <SelectItem value="option-1" text="Option 1" />
+        <SelectItem value="option-2" text="Option 2" />
+      </Select>
+      <Layer>
+        <Select
+          id="select-1"
+          defaultValue="placeholder-item"
+          labelText=""
+          helperText=" Second layer">
+          <SelectItem
+            disabled
+            hidden
+            value="placeholder-item"
+            text="Choose an option"
+          />
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+          <SelectItem value="option-3" text="Option 3" />
+          <SelectItem value="option-4" text="Option 4" />
+        </Select>
+        <Layer>
+          <Select
+            id="select-1"
+            defaultValue="placeholder-item"
+            labelText=""
+            helperText="Third layer">
+            <SelectItem
+              disabled
+              hidden
+              value="placeholder-item"
+              text="Choose an option"
+            />
+            <SelectItem value="option-1" text="Option 1" />
+            <SelectItem value="option-2" text="Option 2" />
+            <SelectItem value="option-3" text="Option 3" />
+            <SelectItem value="option-4" text="Option 4" />
+          </Select>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
diff --git a/packages/carbon-react/src/components/TextArea/TextArea.stories.js b/packages/carbon-react/src/components/TextArea/TextArea.stories.js
index 001a32aba115..3992c2be6984 100644
--- a/packages/carbon-react/src/components/TextArea/TextArea.stories.js
+++ b/packages/carbon-react/src/components/TextArea/TextArea.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { TextArea, TextAreaSkeleton } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/TextArea',
@@ -29,4 +30,39 @@ export const Default = () => (
   />
 );
 
+export const withLayer = () => {
+  return (
+    <>
+      <TextArea
+        labelText="First layer"
+        helperText="Optional helper text"
+        placeholder="Placeholder text"
+        cols={50}
+        rows={4}
+        id="text-area-1"
+      />
+      <Layer>
+        <TextArea
+          labelText="Second layer"
+          helperText="Optional helper text"
+          placeholder="Placeholder text"
+          cols={50}
+          rows={4}
+          id="text-area-1"
+        />
+        <Layer>
+          <TextArea
+            labelText="Third layer"
+            helperText="Optional helper text"
+            placeholder="Placeholder text"
+            cols={50}
+            rows={4}
+            id="text-area-1"
+          />
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const Skeleton = () => <TextAreaSkeleton />;
diff --git a/packages/carbon-react/src/components/TextInput/TextInput.stories.js b/packages/carbon-react/src/components/TextInput/TextInput.stories.js
index 99dfbe0852a1..efb9622a7cf6 100644
--- a/packages/carbon-react/src/components/TextInput/TextInput.stories.js
+++ b/packages/carbon-react/src/components/TextInput/TextInput.stories.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { TextInput, TextInputSkeleton, FluidForm } from '.';
-
+import { Layer } from '../Layer';
 import mdx from './TextInput.mdx';
 
 export default {
@@ -54,4 +54,33 @@ export const TogglePasswordVisibility = () => {
   );
 };
 
+export const withLayer = () => {
+  return (
+    <>
+      <TextInput
+        type="text"
+        labelText="First layer"
+        defaultValue="This is not a default value"
+        helperText="Optional help text"
+      />
+      <Layer>
+        <TextInput
+          type="text"
+          labelText="Second layer"
+          defaultValue="This is not a default value"
+          helperText="Optional help text"
+        />
+        <Layer>
+          <TextInput
+            type="text"
+            labelText="Third layer"
+            defaultValue="This is not a default value"
+            helperText="Optional help text"
+          />
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const Skeleton = () => <TextInputSkeleton />;
diff --git a/packages/carbon-react/src/components/Tile/Tile.stories.js b/packages/carbon-react/src/components/Tile/Tile.stories.js
index 1f567fab6569..44f9fc01a8ad 100644
--- a/packages/carbon-react/src/components/Tile/Tile.stories.js
+++ b/packages/carbon-react/src/components/Tile/Tile.stories.js
@@ -18,6 +18,7 @@ import {
   TileAboveTheFoldContent,
   TileBelowTheFoldContent,
 } from 'carbon-components-react';
+import { Layer } from '../Layer';
 import './tile-story.scss';
 
 export default {
@@ -47,10 +48,53 @@ export const Default = () => {
   );
 };
 
+export const DefaultWithLayer = () => {
+  return (
+    <>
+      <Tile>
+        First layer
+        <br />
+        <br />
+        <Link href="https://www.carbondesignsystem.com">Link</Link>
+      </Tile>
+      <Layer>
+        <Tile>
+          Second layer
+          <br />
+          <br />
+          <Link href="https://www.carbondesignsystem.com">Link</Link>
+        </Tile>
+        <Layer>
+          <Tile>
+            Third layer
+            <br />
+            <br />
+            <Link href="https://www.carbondesignsystem.com">Link</Link>
+          </Tile>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const Clickable = () => {
   return <ClickableTile>Clickable Tile</ClickableTile>;
 };
 
+export const ClickableWithLayer = () => {
+  return (
+    <>
+      <ClickableTile>First layer</ClickableTile>
+      <Layer>
+        <ClickableTile>Second layer</ClickableTile>
+        <Layer>
+          <ClickableTile>Third layer</ClickableTile>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const MultiSelect = () => {
   return (
     <div role="group" aria-label="selectable tiles">
@@ -67,6 +111,24 @@ export const MultiSelect = () => {
   );
 };
 
+export const SelectableWithLayer = () => {
+  <>
+    <SelectableTile id="tile-3" name="tiles">
+      First layer
+    </SelectableTile>
+    <Layer>
+      <SelectableTile id="tile-3" name="tiles">
+        Second layer
+      </SelectableTile>
+      <Layer>
+        <SelectableTile id="tile-3" name="tiles">
+          Third layer
+        </SelectableTile>
+      </Layer>
+    </Layer>
+  </>;
+};
+
 export const Radio = () => {
   return (
     <TileGroup
@@ -86,6 +148,50 @@ export const Radio = () => {
   );
 };
 
+export const RadioWithLayer = () => {
+  return (
+    <>
+      <TileGroup
+        defaultSelected="default-selected"
+        legend="First layer"
+        name="radio tile group">
+        <RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
+          Option 1
+        </RadioTile>
+        <RadioTile value="default-selected" id="tile-2">
+          Option 2
+        </RadioTile>
+      </TileGroup>
+      <Layer>
+        <TileGroup
+          defaultSelected="default-selected"
+          legend="Second Layer"
+          name="radio tile group">
+          <RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
+            Option 1
+          </RadioTile>
+          <RadioTile value="default-selected" id="tile-2">
+            Option 2
+          </RadioTile>
+        </TileGroup>
+        <Layer>
+          <TileGroup
+            defaultSelected="default-selected"
+            legend="Third Layer"
+            name="radio tile group">
+            <RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
+              Option 1
+            </RadioTile>
+            <RadioTile value="default-selected" id="tile-2">
+              Option 2
+            </RadioTile>
+          </TileGroup>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const Expandable = () => (
   <ExpandableTile
     tileCollapsedIconText="Interact to Expand tile"
@@ -101,3 +207,53 @@ export const Expandable = () => (
     </TileBelowTheFoldContent>
   </ExpandableTile>
 );
+
+export const ExpandableWithLayer = () => {
+  return (
+    <>
+      <ExpandableTile
+        tileCollapsedIconText="Interact to Expand tile"
+        tileExpandedIconText="Interact to Collapse tile">
+        <TileAboveTheFoldContent>
+          <div style={{ height: '200px' }}>First layer</div>
+        </TileAboveTheFoldContent>
+        <TileBelowTheFoldContent>
+          <div style={{ height: '400px' }}>
+            Below the fold content here
+            <TextInput id="test2" invalidText="A valid value is required" />
+          </div>
+        </TileBelowTheFoldContent>
+      </ExpandableTile>
+      <Layer>
+        <ExpandableTile
+          tileCollapsedIconText="Interact to Expand tile"
+          tileExpandedIconText="Interact to Collapse tile">
+          <TileAboveTheFoldContent>
+            <div style={{ height: '200px' }}>Second layer</div>
+          </TileAboveTheFoldContent>
+          <TileBelowTheFoldContent>
+            <div style={{ height: '400px' }}>
+              Below the fold content here
+              <TextInput id="test2" invalidText="A valid value is required" />
+            </div>
+          </TileBelowTheFoldContent>
+        </ExpandableTile>
+        <Layer>
+          <ExpandableTile
+            tileCollapsedIconText="Interact to Expand tile"
+            tileExpandedIconText="Interact to Collapse tile">
+            <TileAboveTheFoldContent>
+              <div style={{ height: '200px' }}>Third layer</div>
+            </TileAboveTheFoldContent>
+            <TileBelowTheFoldContent>
+              <div style={{ height: '400px' }}>
+                Below the fold content here
+                <TextInput id="test2" invalidText="A valid value is required" />
+              </div>
+            </TileBelowTheFoldContent>
+          </ExpandableTile>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
diff --git a/packages/carbon-react/src/components/TimePicker/TimePicker.stories.js b/packages/carbon-react/src/components/TimePicker/TimePicker.stories.js
index 34ba3e473bb2..96ef1e5ebdc1 100644
--- a/packages/carbon-react/src/components/TimePicker/TimePicker.stories.js
+++ b/packages/carbon-react/src/components/TimePicker/TimePicker.stories.js
@@ -11,6 +11,7 @@ import {
   TimePickerSelect,
   SelectItem,
 } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 // const props = {
 //   timepicker: () => ({
@@ -77,3 +78,44 @@ export const Default = () => {
     </TimePicker>
   );
 };
+
+export const withLayer = () => {
+  return (
+    <>
+      <TimePicker id="time-picker" labelText="First layer">
+        <TimePickerSelect id="time-picker-select-1">
+          <SelectItem value="AM" text="AM" />
+          <SelectItem value="PM" text="PM" />
+        </TimePickerSelect>
+        <TimePickerSelect id="time-picker-select-2">
+          <SelectItem value="Time zone 1" text="Time zone 1" />
+          <SelectItem value="Time zone 2" text="Time zone 2" />
+        </TimePickerSelect>
+      </TimePicker>
+      <Layer>
+        <TimePicker id="time-picker" labelText="Second layer">
+          <TimePickerSelect id="time-picker-select-1">
+            <SelectItem value="AM" text="AM" />
+            <SelectItem value="PM" text="PM" />
+          </TimePickerSelect>
+          <TimePickerSelect id="time-picker-select-2">
+            <SelectItem value="Time zone 1" text="Time zone 1" />
+            <SelectItem value="Time zone 2" text="Time zone 2" />
+          </TimePickerSelect>
+        </TimePicker>
+        <Layer>
+          <TimePicker id="time-picker" labelText="Third layer">
+            <TimePickerSelect id="time-picker-select-1">
+              <SelectItem value="AM" text="AM" />
+              <SelectItem value="PM" text="PM" />
+            </TimePickerSelect>
+            <TimePickerSelect id="time-picker-select-2">
+              <SelectItem value="Time zone 1" text="Time zone 1" />
+              <SelectItem value="Time zone 2" text="Time zone 2" />
+            </TimePickerSelect>
+          </TimePicker>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
index cd044d232ea2..85aa2b0a70cc 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js
@@ -8,9 +8,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
+import deprecate from '../../prop-types/deprecate';
 import { composeEventHandlers } from '../../tools/events';
 import { getNextIndex, matches, keys } from '../../internal/keyboard';
-import deprecate from '../../prop-types/deprecate';
 import { PrefixContext } from '../../internal/usePrefix';
 
 export default class ContentSwitcher extends React.Component {
diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js
index 0fe99aa963eb..29f3345b3885 100644
--- a/packages/react/src/components/ListBox/ListBox.js
+++ b/packages/react/src/components/ListBox/ListBox.js
@@ -112,7 +112,8 @@ ListBox.propTypes = {
   isOpen: PropTypes.bool,
 
   /**
-   * Specify if the control should use the light variant
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
    */
   light: PropTypes.bool,
 
diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js
index 3826de9dec2b..4dbd06a81392 100644
--- a/packages/react/src/components/RadioTile/RadioTile.js
+++ b/packages/react/src/components/RadioTile/RadioTile.js
@@ -120,7 +120,8 @@ RadioTile.propTypes = {
   id: PropTypes.string,
 
   /**
-   * `true` to use the light version.
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
    */
   light: PropTypes.bool,
 
diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
index bf31c3ace004..c85cd368dfee 100644
--- a/packages/react/src/components/Select/Select.js
+++ b/packages/react/src/components/Select/Select.js
@@ -218,7 +218,8 @@ Select.propTypes = {
   labelText: PropTypes.node,
 
   /**
-   * Specify whether you want the light version of this control
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
    */
   light: PropTypes.bool,
 
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 7382c174bbad..ea3b76c23348 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -171,7 +171,8 @@ TextArea.propTypes = {
   labelText: PropTypes.node.isRequired,
 
   /**
-   * Specify whether you want the light version of this control
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
    */
   light: PropTypes.bool,
 
diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
index c62434e654dd..17a11ac87028 100644
--- a/packages/react/src/components/TextInput/ControlledPasswordInput.js
+++ b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -208,7 +208,8 @@ ControlledPasswordInput.propTypes = {
   labelText: PropTypes.node.isRequired,
 
   /**
-   * Specify light version or default version of this control
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
    */
   light: PropTypes.bool,
 
diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
index c593fb0c6f26..6a9e0134ba02 100644
--- a/packages/react/src/components/TextInput/PasswordInput.js
+++ b/packages/react/src/components/TextInput/PasswordInput.js
@@ -264,7 +264,8 @@ PasswordInput.propTypes = {
   labelText: PropTypes.node.isRequired,
 
   /**
-   * Specify light version or default version of this control
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
    */
   light: PropTypes.bool,
 
diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
index 8ce8d7b0f3e9..fc943e010f58 100644
--- a/packages/react/src/components/TextInput/TextInput.js
+++ b/packages/react/src/components/TextInput/TextInput.js
@@ -235,7 +235,8 @@ TextInput.propTypes = {
   labelText: PropTypes.node.isRequired,
 
   /**
-   * `true` to use the light version.
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
    */
   light: PropTypes.bool,
 
diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
index d10221dbb688..ee3d2d4ab023 100644
--- a/packages/react/src/components/Tile/Tile.js
+++ b/packages/react/src/components/Tile/Tile.js
@@ -316,6 +316,7 @@ export function SelectableTile(props) {
     </>
   );
 }
+
 SelectableTile.defaultProps = {
   value: 'value',
   title: 'title',
@@ -326,6 +327,7 @@ SelectableTile.defaultProps = {
   onChange: () => {},
   onKeyDown: () => {},
 };
+
 SelectableTile.propTypes = {
   /**
    * The child nodes.
diff --git a/packages/react/src/components/TimePicker/TimePicker.js b/packages/react/src/components/TimePicker/TimePicker.js
index 46d7e8e980ce..774e9c90f8b1 100644
--- a/packages/react/src/components/TimePicker/TimePicker.js
+++ b/packages/react/src/components/TimePicker/TimePicker.js
@@ -59,7 +59,8 @@ export default class TimePicker extends Component {
     labelText: PropTypes.node,
 
     /**
-     * `true` to use the light version.
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
      */
     light: PropTypes.bool,