fix(with-layer): update stories (#19425)

* fix(with-layer): update stories

* fix(theme-layer): stories

* fix(tile): clickable layer feature

* fix(with-layer): background icon

Author: ariellalgilmore

packages/react/.storybook/templates/Annotation/Annotation.scss

@@ -16,6 +16,11 @@
 @use '../prefix' as *;
 
 $types: (
+  'background': (
+    border: colors.$magenta-50,
+    background: tag.$tag-background-magenta,
+    color: tag.$tag-color-magenta,
+  ),
   'deprecation-notice': (
     border: colors.$red-50,
     background: tag.$tag-background-red,
@@ -67,6 +72,11 @@ $types: (
   padding: spacing.$spacing-05;
 }
 
+.#{$prefix}--annotation--background {
+  margin: -42px;
+  min-block-size: 100vh;
+}
+
 @each $type, $colors in $types {
   $border: map.get($colors, 'border');
   $background: map.get($colors, 'background');

packages/react/.storybook/templates/Annotation/index.js

@@ -15,6 +15,9 @@ import { WarningHex, Layers, Chemistry } from '@carbon/react/icons';
 import { prefix } from '../_prefix';
 
 const types = {
+  background: {
+    icon: Layers,
+  },
   'deprecation-notice': {
     icon: WarningHex,
   },

packages/react/.storybook/templates/WithLayer/WithLayer.scss

@@ -7,7 +7,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import './WithLayer.scss';
 
 import { Layer } from '../../../src';
 
@@ -20,24 +19,18 @@ function WithLayer({ children }) {
   }
 
   return (
-    <Annotation type="layer" text="Layer 1" className={`${prefix}--with-layer`}>
+    <Annotation type="background" text="$background">
       {renderChild(0)}
-
-      <Annotation
-        type="layer"
-        text="Layer 2"
-        className={`${prefix}--with-layer`}>
-        <Layer>
+      <Layer withBackground>
+        <Annotation type="layer" text="$layer-01">
           {renderChild(1)}
-
-          <Annotation
-            type="layer"
-            text="Layer 3"
-            className={`${prefix}--with-layer`}>
-            <Layer>{renderChild(2)}</Layer>
-          </Annotation>
-        </Layer>
-      </Annotation>
+          <Layer withBackground>
+            <Annotation type="layer" text="$layer-02">
+              {renderChild(2)}
+            </Annotation>
+          </Layer>
+        </Annotation>
+      </Layer>
     </Annotation>
   );
 }

packages/react/.storybook/templates/WithLayer/index.js

@@ -29,3 +29,8 @@
   background: theme.$layer;
   color: theme.$text-primary;
 }
+
+.carbon-storybook-template--annotation--background {
+  margin: 0 !important; /* stylelint-disable-line declaration-no-important */
+  min-block-size: 0 !important; /* stylelint-disable-line declaration-no-important */
+}

packages/react/src/components/Theme/Theme-story.scss

@@ -18,3 +18,8 @@
 div .cds--tile--selectable:not(:last-child) {
   margin-block-end: 1rem;
 }
+
+.carbon-storybook-template--annotation--background {
+  margin: 0 !important; /* stylelint-disable-line declaration-no-important */
+  min-block-size: 0 !important; /* stylelint-disable-line declaration-no-important */
+}