feat(tile): describe tile and tile-footer components with design tokens

Sage · Jan 13, 2022 · 78dac46 · 78dac46
1 parent 44288c8
commit 78dac46
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 deletions.
diff --git a/src/components/tile/__snapshots__/tile.spec.js.snap b/src/components/tile/__snapshots__/tile.spec.js.snap
@@ -23,29 +23,29 @@ exports[`Tile renders base styles 1`] = `
 
 .c2 + .c1 {
   margin-top: 0;
-  border-left: solid 1px #E6EBED;
+  border-left: solid 1px var(--colorsUtilityMajor050);
 }
 
 .c7 + .c1 {
   margin-top: 0;
-  border-top: solid 1px #E6EBED;
+  border-top: solid 1px var(--colorsUtilityMajor050);
 }
 
 .c8 + .c1 {
   margin-top: 0;
-  border-left: solid 1px #E6EBED;
+  border-left: solid 1px var(--colorsUtilityMajor050);
 }
 
 .c9 + .c1 {
   margin-top: 0;
-  border-top: solid 1px #E6EBED;
+  border-top: solid 1px var(--colorsUtilityMajor050);
 }
 
 .c0 {
   padding: 24px;
   box-sizing: border-box;
-  background-color: #FFFFFF;
-  border: 1px solid #CCD6DB;
+  background-color: var(--colorsUtilityYang100);
+  border: 1px solid var(--colorsUtilityMajor100);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

diff --git a/src/components/tile/tile-footer/tile-footer.spec.js b/src/components/tile/tile-footer/tile-footer.spec.js
@@ -6,7 +6,6 @@ import {
   testStyledSystemPadding,
 } from "../../../__spec_helper__/test-utils";
 import StyledTileFooter from "./tile-footer.style";
-import { baseTheme } from "../../../style/themes";
 
 const renderWrapper = (props, renderType = mount) => {
   return renderType(<TileFooter {...props}>content</TileFooter>);
@@ -28,7 +27,7 @@ describe("TileFooter", () => {
   it("should render correct background as default", () => {
     assertStyleMatch(
       {
-        background: baseTheme.tile.footerBackground,
+        background: "var(--colorsUtilityMajor025)",
       },
       wrapper.find(StyledTileFooter)
     );
@@ -39,7 +38,7 @@ describe("TileFooter", () => {
 
     assertStyleMatch(
       {
-        background: baseTheme.tile.footerBackground,
+        background: "var(--colorsUtilityMajor025)",
       },
       wrapper.find(StyledTileFooter)
     );

diff --git a/src/components/tile/tile-footer/tile-footer.style.js b/src/components/tile/tile-footer/tile-footer.style.js
@@ -5,11 +5,11 @@ import { baseTheme } from "../../../style/themes";
 const StyledTileFooter = styled.div`
   ${padding}
 
-  ${({ variant, theme }) => css`
+  ${({ variant }) => css`
     background: ${variant === "transparent"
       ? "transparent"
-      : theme.tile.footerBackground};
-    border-top: 1px solid ${theme.tile.border};
+      : "var(--colorsUtilityMajor025)"};
+    border-top: 1px solid var(--colorsUtilityMajor100);
   `}
 `;
 

diff --git a/src/components/tile/tile.spec.js b/src/components/tile/tile.spec.js
@@ -10,7 +10,6 @@ import {
   testStyledSystemSpacing,
   testStyledSystemWidth,
 } from "../../__spec_helper__/test-utils";
-import { baseTheme } from "../../style/themes";
 
 function render(props, renderer = TestRenderer.create) {
   return renderer(
@@ -75,7 +74,10 @@ describe("Tile", () => {
       it('renders a white background when as === "tile"', () => {
         const wrapper = render({ as: "tile" }).toJSON();
 
-        assertStyleMatch({ backgroundColor: "#FFFFFF" }, wrapper);
+        assertStyleMatch(
+          { backgroundColor: "var(--colorsUtilityYang100)" },
+          wrapper
+        );
       });
 
       it('renders a transparent background when as === "transparent"', () => {
@@ -140,7 +142,7 @@ describe("Tile", () => {
           assertStyleMatch(
             {
               marginTop: "0",
-              borderLeft: `solid 1px ${baseTheme.tile.separator}`,
+              borderLeft: "solid 1px var(--colorsUtilityMajor050)",
             },
             wrapper,
             {
@@ -179,7 +181,7 @@ describe("Tile", () => {
           assertStyleMatch(
             {
               marginTop: "0",
-              borderTop: `solid 1px ${baseTheme.tile.separator}`,
+              borderTop: "solid 1px var(--colorsUtilityMajor050)",
             },
             wrapper,
             {
@@ -217,7 +219,7 @@ describe("Tile", () => {
         assertStyleMatch(
           {
             marginTop: "0",
-            borderTop: `solid 1px ${baseTheme.tile.separator}`,
+            borderTop: "solid 1px var(--colorsUtilityMajor050)",
           },
           wrapper,
           {

diff --git a/src/components/tile/tile.style.js b/src/components/tile/tile.style.js
@@ -5,8 +5,9 @@ import baseTheme from "../../style/themes/base";
 import computeWidth from "../../style/utils/width";
 
 const TileContent = styled.div`
-  ${({ isHorizontal, isVertical, theme, width }) => css`
+  ${({ isHorizontal, isVertical, width }) => css`
     ${space}
+
     box-sizing: border-box;
     position: relative;
     flex-grow: 1;
@@ -25,7 +26,7 @@ const TileContent = styled.div`
 
       & + & {
         margin-top: 0;
-        border-left: solid 1px ${theme.tile.separator};
+        border-left: solid 1px var(--colorsUtilityMajor050);
       }
     `}
 
@@ -43,7 +44,7 @@ const TileContent = styled.div`
 
       & + & {
         margin-top: 0;
-        border-top: solid 1px ${theme.tile.separator};
+        border-top: solid 1px var(--colorsUtilityMajor050);
       }
     `}
 
@@ -56,13 +57,14 @@ const TileContent = styled.div`
 `;
 
 const StyledTile = styled.div`
-  ${({ isHorizontal, tileTheme, theme, width }) => css`
+  ${({ isHorizontal, tileTheme, width }) => css`
     ${space}
+
     box-sizing: border-box;
     background-color: ${tileTheme === "tile"
-      ? theme.colors.white
+      ? "var(--colorsUtilityYang100)"
       : "transparent"};
-    border: 1px solid ${theme.tile.border};
+    border: 1px solid var(--colorsUtilityMajor100);
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;