From b677f5425222c345f439007348a6583591854682 Mon Sep 17 00:00:00 2001
From: Alessandra Davila <aledavila@ibm.com>
Date: Mon, 18 Oct 2021 09:30:59 -0500
Subject: [PATCH] feat(carbon-react): add layer stories (#9861)

---
 .../CodeSnippet/CodeSnippet.stories.js        | 148 ++++++++++++++++++
 .../components/ComboBox/ComboBox.stories.js   |  37 +++++
 .../ContentSwitcher.stories.js                |  27 ++++
 .../DatePicker/DatePicker.stories.js          | 112 +++++++++++++
 .../components/Dropdown/Dropdown.stories.js   |  67 ++++++++
 .../MultiSelect/MultiSelect.stories.js        |  77 +++++++++
 .../NumberInput/NumberInput.stories.js        |  15 ++
 .../Overflow/OverflowMenu.stories.js          |  33 ++++
 .../src/components/Search/Search.stories.js   |  74 +++++++++
 .../src/components/Slider/Slider.stories.js   |  87 ++++++++++
 .../src/components/Tabs/Tabs.stories.js       |  75 +++++++++
 11 files changed, 752 insertions(+)

diff --git a/packages/carbon-react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/carbon-react/src/components/CodeSnippet/CodeSnippet.stories.js
index 864b1f06ac02..8b6a05b3f7ae 100644
--- a/packages/carbon-react/src/components/CodeSnippet/CodeSnippet.stories.js
+++ b/packages/carbon-react/src/components/CodeSnippet/CodeSnippet.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { CodeSnippet, CodeSnippetSkeleton } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/CodeSnippet',
@@ -60,6 +61,153 @@ export const singleline = () => (
   </CodeSnippet>
 );
 
+export const inlineWithLayer = () => {
+  return (
+    <>
+      <CodeSnippet type="inline" feedback="Copied to clipboard">
+        {'node -v'}
+      </CodeSnippet>
+      <Layer>
+        <CodeSnippet type="inline" feedback="Copied to clipboard">
+          {'node -v'}
+        </CodeSnippet>
+        <Layer>
+          <CodeSnippet type="inline" feedback="Copied to clipboard">
+            {'node -v'}
+          </CodeSnippet>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const multilineWithLayer = () => {
+  return (
+    <>
+      <CodeSnippet type="multi" feedback="Copied to clipboard">
+        {`  "scripts": {
+        "build": "lerna run build --stream --prefix --npm-client yarn",
+        "ci-check": "carbon-cli ci-check",
+        "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+        "doctoc": "doctoc --title '## Table of Contents'",
+        "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+        "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+        "lint": "eslint actions config codemods packages",
+        "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+        "sync": "carbon-cli sync",
+        "test": "cross-env BABEL_ENV=test jest",
+        "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+        },
+        "resolutions": {
+          "react": "~16.9.0",
+          "react-dom": "~16.9.0",
+          "react-is": "~16.9.0",
+          "react-test-renderer": "~16.9.0"
+        },
+        "devDependencies": {
+          "@babel/core": "^7.10.0",
+          "@babel/plugin-proposal-class-properties": "^7.7.4",
+          "@babel/plugin-proposal-export-default-from": "^7.7.4",
+          "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+          "@babel/plugin-transform-runtime": "^7.10.0",
+          "@babel/preset-env": "^7.10.0",
+          "@babel/preset-react": "^7.10.0",
+          "@babel/runtime": "^7.10.0",
+          "@commitlint/cli": "^8.3.5",`}
+      </CodeSnippet>
+      <Layer>
+        <CodeSnippet type="multi" feedback="Copied to clipboard">
+          {`  "scripts": {
+          "build": "lerna run build --stream --prefix --npm-client yarn",
+          "ci-check": "carbon-cli ci-check",
+          "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+          "doctoc": "doctoc --title '## Table of Contents'",
+          "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+          "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+          "lint": "eslint actions config codemods packages",
+          "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+          "sync": "carbon-cli sync",
+          "test": "cross-env BABEL_ENV=test jest",
+          "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+          },
+          "resolutions": {
+            "react": "~16.9.0",
+            "react-dom": "~16.9.0",
+            "react-is": "~16.9.0",
+            "react-test-renderer": "~16.9.0"
+          },
+          "devDependencies": {
+            "@babel/core": "^7.10.0",
+            "@babel/plugin-proposal-class-properties": "^7.7.4",
+            "@babel/plugin-proposal-export-default-from": "^7.7.4",
+            "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+            "@babel/plugin-transform-runtime": "^7.10.0",
+            "@babel/preset-env": "^7.10.0",
+            "@babel/preset-react": "^7.10.0",
+            "@babel/runtime": "^7.10.0",
+            "@commitlint/cli": "^8.3.5",`}
+        </CodeSnippet>
+        <Layer>
+          <CodeSnippet type="multi" feedback="Copied to clipboard">
+            {`  "scripts": {
+            "build": "lerna run build --stream --prefix --npm-client yarn",
+            "ci-check": "carbon-cli ci-check",
+            "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+            "doctoc": "doctoc --title '## Table of Contents'",
+            "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+            "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+            "lint": "eslint actions config codemods packages",
+            "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+            "sync": "carbon-cli sync",
+            "test": "cross-env BABEL_ENV=test jest",
+            "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+            },
+            "resolutions": {
+              "react": "~16.9.0",
+              "react-dom": "~16.9.0",
+              "react-is": "~16.9.0",
+              "react-test-renderer": "~16.9.0"
+            },
+            "devDependencies": {
+              "@babel/core": "^7.10.0",
+              "@babel/plugin-proposal-class-properties": "^7.7.4",
+              "@babel/plugin-proposal-export-default-from": "^7.7.4",
+              "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+              "@babel/plugin-transform-runtime": "^7.10.0",
+              "@babel/preset-env": "^7.10.0",
+              "@babel/preset-react": "^7.10.0",
+              "@babel/runtime": "^7.10.0",
+              "@commitlint/cli": "^8.3.5",`}
+          </CodeSnippet>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const singlelineWithLayer = () => {
+  return (
+    <>
+      <CodeSnippet type="single" feedback="Copied to clipboard">
+        yarn add carbon-components@latest carbon-components-react@latest
+        @carbon/icons-react@latest carbon-icons@latest
+      </CodeSnippet>
+      <Layer>
+        <CodeSnippet type="single" feedback="Copied to clipboard">
+          yarn add carbon-components@latest carbon-components-react@latest
+          @carbon/icons-react@latest carbon-icons@latest
+        </CodeSnippet>
+        <Layer>
+          <CodeSnippet type="single" feedback="Copied to clipboard">
+            yarn add carbon-components@latest carbon-components-react@latest
+            @carbon/icons-react@latest carbon-icons@latest
+          </CodeSnippet>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const skeleton = () => (
   <div>
     <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
diff --git a/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js b/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js
index 0b997e2db9d7..5203768c6986 100644
--- a/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js
+++ b/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { ComboBox } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 const items = [
   {
@@ -54,3 +55,39 @@ export const Combobox = () => (
     />
   </div>
 );
+
+export const withLayer = () => (
+  <div style={{ width: 300 }}>
+    <ComboBox
+      onChange={() => {}}
+      id="carbon-combobox"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      placeholder="Filter..."
+      titleText="First Layer"
+      helperText="Combobox helper text"
+    />
+    <Layer>
+      <ComboBox
+        onChange={() => {}}
+        id="carbon-combobox"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        placeholder="Filter..."
+        titleText="Second Layer"
+        helperText="Combobox helper text"
+      />
+      <Layer>
+        <ComboBox
+          onChange={() => {}}
+          id="carbon-combobox"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+          placeholder="Filter..."
+          titleText="Third Layer"
+          helperText="Combobox helper text"
+        />
+      </Layer>
+    </Layer>
+  </div>
+);
diff --git a/packages/carbon-react/src/components/ContentSwitcher/ContentSwitcher.stories.js b/packages/carbon-react/src/components/ContentSwitcher/ContentSwitcher.stories.js
index efdeef12bb1b..82daf616a49a 100644
--- a/packages/carbon-react/src/components/ContentSwitcher/ContentSwitcher.stories.js
+++ b/packages/carbon-react/src/components/ContentSwitcher/ContentSwitcher.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { ContentSwitcher, Switch } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/ContentSwitcher',
@@ -27,3 +28,29 @@ export const Default = () => (
     <Switch name="three" text="Third section" />
   </ContentSwitcher>
 );
+
+export const withLayer = () => {
+  return (
+    <>
+      <ContentSwitcher onChange={() => {}}>
+        <Switch name="one" text="First section" />
+        <Switch name="two" text="Second section" />
+        <Switch name="three" text="Third section" />
+      </ContentSwitcher>
+      <Layer>
+        <ContentSwitcher onChange={() => {}}>
+          <Switch name="one" text="First section" />
+          <Switch name="two" text="Second section" />
+          <Switch name="three" text="Third section" />
+        </ContentSwitcher>
+        <Layer>
+          <ContentSwitcher onChange={() => {}}>
+            <Switch name="one" text="First section" />
+            <Switch name="two" text="Second section" />
+            <Switch name="three" text="Third section" />
+          </ContentSwitcher>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
diff --git a/packages/carbon-react/src/components/DatePicker/DatePicker.stories.js b/packages/carbon-react/src/components/DatePicker/DatePicker.stories.js
index c82738966093..bfb80349c536 100644
--- a/packages/carbon-react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/carbon-react/src/components/DatePicker/DatePicker.stories.js
@@ -12,6 +12,7 @@ import {
   DatePickerInput,
   DatePickerSkeleton,
 } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 // const patterns = {
 //   'Short (d{1,2}/d{4})': '\\d{1,2}/\\d{4}',
@@ -108,6 +109,117 @@ export const RangeWithCalendar = () => {
   );
 };
 
+export const SimpleWithLayer = () => {
+  return (
+    <>
+      <DatePicker datePickerType="simple">
+        <DatePickerInput
+          placeholder="mm/dd/yyyy"
+          labelText="Date Picker label"
+          id="date-picker-simple"
+        />
+      </DatePicker>
+      <Layer>
+        <DatePicker datePickerType="simple">
+          <DatePickerInput
+            placeholder="mm/dd/yyyy"
+            labelText="Date Picker label"
+            id="date-picker-simple"
+          />
+        </DatePicker>
+        <Layer>
+          <DatePicker datePickerType="simple">
+            <DatePickerInput
+              placeholder="mm/dd/yyyy"
+              labelText="Date Picker label"
+              id="date-picker-simple"
+            />
+          </DatePicker>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const SingleWithCalendarWithLayer = () => {
+  return (
+    <>
+      <DatePicker datePickerType="single">
+        <DatePickerInput
+          placeholder="mm/dd/yyyy"
+          labelText="Date Picker label"
+          id="date-picker-single"
+        />
+      </DatePicker>
+      <Layer>
+        <DatePicker datePickerType="single">
+          <DatePickerInput
+            placeholder="mm/dd/yyyy"
+            labelText="Date Picker label"
+            id="date-picker-single"
+          />
+        </DatePicker>
+        <Layer>
+          <DatePicker datePickerType="single">
+            <DatePickerInput
+              placeholder="mm/dd/yyyy"
+              labelText="Date Picker label"
+              id="date-picker-single"
+            />
+          </DatePicker>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const RangeWithCalendarWithLayer = () => {
+  return (
+    <>
+      <DatePicker datePickerType="range">
+        <DatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText="Start date"
+        />
+        <DatePickerInput
+          id="date-picker-input-id-finish"
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+        />
+      </DatePicker>
+      <Layer>
+        <DatePicker datePickerType="range">
+          <DatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+          />
+          <DatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </DatePicker>
+        <Layer>
+          <DatePicker datePickerType="range">
+            <DatePickerInput
+              id="date-picker-input-id-start"
+              placeholder="mm/dd/yyyy"
+              labelText="Start date"
+            />
+            <DatePickerInput
+              id="date-picker-input-id-finish"
+              placeholder="mm/dd/yyyy"
+              labelText="End date"
+            />
+          </DatePicker>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 /* eslint-disable react/prop-types */
 export const DatePickerPlayground = () => (
   <DatePicker {...props.datePicker()}>
diff --git a/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js b/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js
index 06fb5251c320..92ae3ab55f0d 100644
--- a/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js
+++ b/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { Dropdown, DropdownSkeleton } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 const items = [
   {
@@ -73,6 +74,72 @@ export const Inline = () => (
   </div>
 );
 
+export const withLayer = () => (
+  <div style={{ width: 400 }}>
+    <Dropdown
+      id="default"
+      titleText="First Layer"
+      helperText="This is some helper text"
+      label="Dropdown menu options"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+    <Layer>
+      <Dropdown
+        id="default"
+        titleText="Second Layer"
+        helperText="This is some helper text"
+        label="Dropdown menu options"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <Layer>
+        <Dropdown
+          id="default"
+          titleText="Third Layer"
+          helperText="This is some helper text"
+          label="Dropdown menu options"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+        />
+      </Layer>
+    </Layer>
+  </div>
+);
+
+export const InlineWithLayer = () => (
+  <div style={{ width: 600 }}>
+    <Dropdown
+      id="inline"
+      titleText="First Layer"
+      label="Dropdown menu options"
+      type="inline"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+    <Layer>
+      <Dropdown
+        id="inline"
+        titleText="Second Layer"
+        label="Dropdown menu options"
+        type="inline"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+      <Layer>
+        <Dropdown
+          id="inline"
+          titleText="Third Layer"
+          label="Dropdown menu options"
+          type="inline"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+        />
+      </Layer>
+    </Layer>
+  </div>
+);
+
 export const Skeleton = () => (
   <div style={{ width: 300 }}>
     <DropdownSkeleton />
diff --git a/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js b/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js
index 70b0afc23cb2..ee8df2d982fd 100644
--- a/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { MultiSelect } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 const items = [
   {
@@ -94,3 +95,79 @@ export const _Filterable = () => {
     </div>
   );
 };
+
+export const withLayer = () => {
+  return (
+    <div style={{ width: 300 }}>
+      <MultiSelect
+        label="First Layer"
+        id="carbon-multiselect-example"
+        titleText="Multiselect title"
+        helperText="This is helper text"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        selectionFeedback="top-after-reopen"
+      />
+      <Layer>
+        <MultiSelect
+          label="Second Layer"
+          id="carbon-multiselect-example"
+          titleText="Multiselect title"
+          helperText="This is helper text"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+          selectionFeedback="top-after-reopen"
+        />
+        <Layer>
+          <MultiSelect
+            label="Third Layer"
+            id="carbon-multiselect-example"
+            titleText="Multiselect title"
+            helperText="This is helper text"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            selectionFeedback="top-after-reopen"
+          />
+        </Layer>
+      </Layer>
+    </div>
+  );
+};
+
+export const _FilterableWithLayer = () => {
+  return (
+    <div style={{ width: 300 }}>
+      <MultiSelect.Filterable
+        id="carbon-multiselect-example-3"
+        titleText="First Layer"
+        helperText="This is helper text"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        placeholder="Filter"
+        selectionFeedback="top-after-reopen"
+      />
+      <Layer>
+        <MultiSelect.Filterable
+          id="carbon-multiselect-example-3"
+          titleText="Second Layer"
+          helperText="This is helper text"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+          placeholder="Filter"
+          selectionFeedback="top-after-reopen"
+        />
+        <Layer>
+          <MultiSelect.Filterable
+            id="carbon-multiselect-example-3"
+            titleText="Third Layer"
+            helperText="This is helper text"
+            items={items}
+            itemToString={(item) => (item ? item.text : '')}
+            placeholder="Filter"
+            selectionFeedback="top-after-reopen"
+          />
+        </Layer>
+      </Layer>
+    </div>
+  );
+};
diff --git a/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js b/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js
index b403c8622861..8109f350e78a 100644
--- a/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { NumberInput, NumberInputSkeleton } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/NumberInput',
@@ -33,6 +34,20 @@ export const Default = () => {
   return <NumberInput {...numberInputProps} />;
 };
 
+export const withLayer = () => {
+  return (
+    <>
+      <NumberInput {...numberInputProps} />
+      <Layer>
+        <NumberInput {...numberInputProps} />
+        <Layer>
+          <NumberInput {...numberInputProps} />
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const Skeleton = () => (
   <div>
     <NumberInputSkeleton />
diff --git a/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js b/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js
index 53d22796348d..b0b46cbf9538 100644
--- a/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js
+++ b/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js
@@ -7,6 +7,7 @@
 
 import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import React from 'react';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/OverflowMenu',
@@ -23,3 +24,35 @@ export const Default = () => {
     </OverflowMenu>
   );
 };
+
+export const withLayer = () => {
+  return (
+    <>
+      <OverflowMenu>
+        <OverflowMenuItem itemText="Stop app" />
+        <OverflowMenuItem itemText="Restart app" />
+        <OverflowMenuItem itemText="Rename app" />
+        <OverflowMenuItem itemText="Edit routes and access" requireTitle />
+        <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
+      </OverflowMenu>
+      <Layer>
+        <OverflowMenu>
+          <OverflowMenuItem itemText="Stop app" />
+          <OverflowMenuItem itemText="Restart app" />
+          <OverflowMenuItem itemText="Rename app" />
+          <OverflowMenuItem itemText="Edit routes and access" requireTitle />
+          <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
+        </OverflowMenu>
+        <Layer>
+          <OverflowMenu>
+            <OverflowMenuItem itemText="Stop app" />
+            <OverflowMenuItem itemText="Restart app" />
+            <OverflowMenuItem itemText="Rename app" />
+            <OverflowMenuItem itemText="Edit routes and access" requireTitle />
+            <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
+          </OverflowMenu>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
diff --git a/packages/carbon-react/src/components/Search/Search.stories.js b/packages/carbon-react/src/components/Search/Search.stories.js
index aca667e6aa2e..a99ab03d57d0 100644
--- a/packages/carbon-react/src/components/Search/Search.stories.js
+++ b/packages/carbon-react/src/components/Search/Search.stories.js
@@ -7,6 +7,7 @@
 
 import { Search, ExpandableSearch } from 'carbon-components-react';
 import React from 'react';
+import { Layer } from '../Layer';
 
 export default { title: 'Components/Search' };
 
@@ -32,3 +33,76 @@ export const Expandable = () => (
     onKeyDown={() => {}}
   />
 );
+
+export const withLayer = () => {
+  return (
+    <>
+      <Search
+        size="lg"
+        defaultValue="First Layer"
+        labelText="Search"
+        closeButtonLabelText="Clear search input"
+        id="search-1"
+        onChange={() => {}}
+        onKeyDown={() => {}}
+      />
+      <Layer>
+        <Search
+          size="lg"
+          defaultValue="Second Layer"
+          labelText="Search"
+          closeButtonLabelText="Clear search input"
+          id="search-1"
+          onChange={() => {}}
+          onKeyDown={() => {}}
+        />
+        <Layer>
+          <Search
+            size="lg"
+            defaultValue="Third Layer"
+            labelText="Search"
+            closeButtonLabelText="Clear search input"
+            id="search-1"
+            onChange={() => {}}
+            onKeyDown={() => {}}
+          />
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const ExpandableWithLayer = () => {
+  return (
+    <>
+      <ExpandableSearch
+        size="lg"
+        labelText="First Layer"
+        closeButtonLabelText="Clear search input"
+        id="search-expandable-1"
+        onChange={() => {}}
+        onKeyDown={() => {}}
+      />
+      <Layer>
+        <ExpandableSearch
+          size="lg"
+          labelText="Second Layer"
+          closeButtonLabelText="Clear search input"
+          id="search-expandable-1"
+          onChange={() => {}}
+          onKeyDown={() => {}}
+        />
+        <Layer>
+          <ExpandableSearch
+            size="lg"
+            labelText="Third Layer"
+            closeButtonLabelText="Clear search input"
+            id="search-expandable-1"
+            onChange={() => {}}
+            onKeyDown={() => {}}
+          />
+        </Layer>
+      </Layer>
+    </>
+  );
+};
diff --git a/packages/carbon-react/src/components/Slider/Slider.stories.js b/packages/carbon-react/src/components/Slider/Slider.stories.js
index b968c3d39bc5..802a63d55843 100644
--- a/packages/carbon-react/src/components/Slider/Slider.stories.js
+++ b/packages/carbon-react/src/components/Slider/Slider.stories.js
@@ -11,6 +11,7 @@ import React, { useState } from 'react';
 // import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 import { Slider, SliderSkeleton } from '.';
 // import { sliderValuePropSync } from '../../../../react/src/internal/FeatureFlags';
+import { Layer } from '../Layer';
 import mdx from './Slider.mdx';
 
 export default {
@@ -63,4 +64,90 @@ export const ControlledSlider = () => {
   );
 };
 
+export const withLayer = () => {
+  return (
+    <>
+      <Slider
+        labelText="First Layer"
+        value={50}
+        min={0}
+        max={100}
+        step={1}
+        stepMultiplier={10}
+        novalidate
+      />
+      <Layer>
+        <Slider
+          labelText="Second Layer"
+          value={50}
+          min={0}
+          max={100}
+          step={1}
+          stepMultiplier={10}
+          novalidate
+        />
+        <Layer>
+          <Slider
+            labelText="Third Layer"
+            value={50}
+            min={0}
+            max={100}
+            step={1}
+            stepMultiplier={10}
+            novalidate
+          />
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const ControlledSliderWithLayer = () => {
+  const [val, setVal] = useState(87);
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setVal(Math.round(Math.random() * 100))}>
+        randomize value
+      </button>
+      <Slider
+        max={100}
+        min={0}
+        value={val}
+        onChange={({ value }) => setVal(value)}
+      />
+      <h1>{val}</h1>
+      <Layer>
+        <button
+          type="button"
+          onClick={() => setVal(Math.round(Math.random() * 100))}>
+          randomize value
+        </button>
+        <Slider
+          max={100}
+          min={0}
+          value={val}
+          onChange={({ value }) => setVal(value)}
+        />
+        <h1>{val}</h1>
+        <Layer>
+          <button
+            type="button"
+            onClick={() => setVal(Math.round(Math.random() * 100))}>
+            randomize value
+          </button>
+          <Slider
+            max={100}
+            min={0}
+            value={val}
+            onChange={({ value }) => setVal(value)}
+          />
+          <h1>{val}</h1>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const Skeleton = () => <SliderSkeleton />;
diff --git a/packages/carbon-react/src/components/Tabs/Tabs.stories.js b/packages/carbon-react/src/components/Tabs/Tabs.stories.js
index 08482fdb9108..1c04f224b089 100644
--- a/packages/carbon-react/src/components/Tabs/Tabs.stories.js
+++ b/packages/carbon-react/src/components/Tabs/Tabs.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { Button, Tab, Tabs, TabsSkeleton } from '../Tabs';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/Tabs',
@@ -42,3 +43,77 @@ export const Default = () => (
     </Tab>
   </Tabs>
 );
+
+export const withLayer = () => {
+  return (
+    <>
+      <Tabs>
+        <Tab id="tab-1" label="Tab label 1">
+          <p>First Layer. Content for first tab goes here.</p>
+        </Tab>
+        <Tab id="tab-2" label="Tab label 2">
+          <p>Content for second tab goes here.</p>
+          <Button>With a button</Button>
+        </Tab>
+        <Tab id="tab-3" label="Tab label 3" disabled>
+          <p>Content for third tab goes here.</p>
+        </Tab>
+        <Tab
+          id="tab-4"
+          label="Tab label 4 shows truncation"
+          title="Tab label 4 shows truncation">
+          <p>Content for fourth tab goes here.</p>
+        </Tab>
+        <Tab label={<div>Custom Label</div>}>
+          <p>Content for fifth tab goes here.</p>
+        </Tab>
+      </Tabs>
+      <Layer>
+        <Tabs>
+          <Tab id="tab-1" label="Tab label 1">
+            <p>Second Layer. Content for first tab goes here.</p>
+          </Tab>
+          <Tab id="tab-2" label="Tab label 2">
+            <p>Content for second tab goes here.</p>
+            <Button>With a button</Button>
+          </Tab>
+          <Tab id="tab-3" label="Tab label 3" disabled>
+            <p>Content for third tab goes here.</p>
+          </Tab>
+          <Tab
+            id="tab-4"
+            label="Tab label 4 shows truncation"
+            title="Tab label 4 shows truncation">
+            <p>Content for fourth tab goes here.</p>
+          </Tab>
+          <Tab label={<div>Custom Label</div>}>
+            <p>Content for fifth tab goes here.</p>
+          </Tab>
+        </Tabs>
+        <Layer>
+          <Tabs>
+            <Tab id="tab-1" label="Tab label 1">
+              <p>Third Layer. Content for first tab goes here.</p>
+            </Tab>
+            <Tab id="tab-2" label="Tab label 2">
+              <p>Content for second tab goes here.</p>
+              <Button>With a button</Button>
+            </Tab>
+            <Tab id="tab-3" label="Tab label 3" disabled>
+              <p>Content for third tab goes here.</p>
+            </Tab>
+            <Tab
+              id="tab-4"
+              label="Tab label 4 shows truncation"
+              title="Tab label 4 shows truncation">
+              <p>Content for fourth tab goes here.</p>
+            </Tab>
+            <Tab label={<div>Custom Label</div>}>
+              <p>Content for fifth tab goes here.</p>
+            </Tab>
+          </Tabs>
+        </Layer>
+      </Layer>
+    </>
+  );
+};