From 0f090f071a7de60a4b9205d70754148feec9ed6d Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Tue, 14 Nov 2023 20:49:43 -0300
Subject: [PATCH] feat: added $layer token in the background-color (#14726)

* feat: added layer toke in the background color

* fix: remove scss

* fix: fixed vrt test name

* fix: added background style

* fix: removed storybook and vrt testing

* fix: added layer stories

* fix: removed wrong files

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
---
 .../StructuredList/StructuredList-test.e2e.js |  8 ++
 .../StructuredList/StructuredList.stories.js  | 75 ++++++++++++-------
 .../structured-list/_structured-list.scss     |  2 +-
 3 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/e2e/components/StructuredList/StructuredList-test.e2e.js b/e2e/components/StructuredList/StructuredList-test.e2e.js
index 9436a5c9655c..df52b97a8241 100644
--- a/e2e/components/StructuredList/StructuredList-test.e2e.js
+++ b/e2e/components/StructuredList/StructuredList-test.e2e.js
@@ -22,6 +22,14 @@ test.describe('StructuredList', () => {
         });
       });
 
+      test('with layer @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'StructuredList',
+          id: 'components-structuredlist--with-background-layer',
+          theme,
+        });
+      });
+
       test('selection @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'StructuredList',
diff --git a/packages/react/src/components/StructuredList/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js
index 1f8ccaa5e2a7..77fcbbee84ad 100644
--- a/packages/react/src/components/StructuredList/StructuredList.stories.js
+++ b/packages/react/src/components/StructuredList/StructuredList.stories.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { CheckmarkFilled } from '@carbon/icons-react';
 import mdx from './StructuredList.mdx';
+import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 import {
   StructuredListWrapper,
@@ -102,35 +103,36 @@ Default.argTypes = {
   },
 };
 
+const structuredListBodyRowGenerator = (numRows) => {
+  return Array.apply(null, Array(numRows)).map((n, i) => (
+    <StructuredListRow key={`row-${i}`}>
+      <StructuredListCell>Row {i}</StructuredListCell>
+      <StructuredListCell>Row {i}</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+      <StructuredListInput
+        id={`row-${i}`}
+        value={`row-${i}`}
+        title={`row-${i}`}
+        name="row-0"
+        aria-label={`row-${i}`}
+      />
+      <StructuredListCell>
+        <CheckmarkFilled
+          className={`${prefix}--structured-list-svg`}
+          aria-label="select an option">
+          <title>select an option</title>
+        </CheckmarkFilled>
+      </StructuredListCell>
+    </StructuredListRow>
+  ));
+};
+
 export const Selection = (args) => {
-  const structuredListBodyRowGenerator = (numRows) => {
-    return Array.apply(null, Array(numRows)).map((n, i) => (
-      <StructuredListRow key={`row-${i}`}>
-        <StructuredListCell>Row {i}</StructuredListCell>
-        <StructuredListCell>Row {i}</StructuredListCell>
-        <StructuredListCell>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
-          magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-          sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
-          vulputate nisl a porttitor interdum.
-        </StructuredListCell>
-        <StructuredListInput
-          id={`row-${i}`}
-          value={`row-${i}`}
-          title={`row-${i}`}
-          name="row-0"
-          aria-label={`row-${i}`}
-        />
-        <StructuredListCell>
-          <CheckmarkFilled
-            className={`${prefix}--structured-list-svg`}
-            aria-label="select an option">
-            <title>select an option</title>
-          </CheckmarkFilled>
-        </StructuredListCell>
-      </StructuredListRow>
-    ));
-  };
   return (
     <StructuredListWrapper selection {...args}>
       <StructuredListHead>
@@ -160,6 +162,23 @@ Selection.argTypes = {
   },
 };
 
+export const WithBackgroundLayer = () => (
+  <WithLayer>
+    <StructuredListWrapper selection>
+      <StructuredListHead>
+        <StructuredListRow head>
+          <StructuredListCell head>ColumnA</StructuredListCell>
+          <StructuredListCell head>ColumnB</StructuredListCell>
+          <StructuredListCell head>ColumnC</StructuredListCell>
+        </StructuredListRow>
+      </StructuredListHead>
+      <StructuredListBody>
+        {structuredListBodyRowGenerator(4)}
+      </StructuredListBody>
+    </StructuredListWrapper>
+  </WithLayer>
+);
+
 export const Skeleton = (args) => (
   <div style={{ width: '800px' }}>
     <StructuredListSkeleton {...args} />
diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
index 6ed22b18bf39..3618aaa07f34 100644
--- a/packages/styles/scss/components/structured-list/_structured-list.scss
+++ b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -32,7 +32,7 @@
 
     display: table;
 
-    background-color: transparent;
+    background-color: $layer transparent;
     border-collapse: collapse;
     border-spacing: 0;
     inline-size: 100%;