Merge pull request #4780 from Sage/design-tokens/FE-4739-Search

feat(search): describe search component using design tokens
Sage · Feb 10, 2022 · 382b3a8 · 382b3a8
2 parents b908bb6 + 4d7c6e5
commit 382b3a8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 106 deletions.
diff --git a/cypress/support/step-definitions/search-steps.js b/cypress/support/step-definitions/search-steps.js
@@ -76,10 +76,8 @@ Then("search icon has golden border", () => {
 });
 
 Then("search icon has proper inner color", () => {
-  const mintColor = "rgb(0, 125, 90)";
-  searchIcon()
-    .should("have.css", "background-color", mintColor)
-    .and("have.css", "border-color", mintColor);
+  const mintColor = "rgb(0, 126, 69)";
+  searchIcon().should("have.css", "background-color", mintColor);
 });
 
 Then("search icon as button is visible", () => {

diff --git a/src/components/search/search.spec.js b/src/components/search/search.spec.js
@@ -28,7 +28,7 @@ describe("Search", () => {
     it("matches the expected styles", () => {
       assertStyleMatch(
         {
-          borderBottom: "2px solid #738F9B",
+          borderBottom: "2px solid var(--colorsUtilityMajor300)",
           display: "inline-flex",
           fontSize: "14px",
           fontWeight: "700",
@@ -37,21 +37,10 @@ describe("Search", () => {
       );
     });
 
-    it("matches the expected styles when the variant is dark", () => {
-      wrapper = renderWrapper({ value: "Foo", variant: "dark" }, mount);
-      assertStyleMatch(
-        {
-          borderBottom: "2px solid #8CA3AD",
-          color: "rgba(0,0,0,0.90)",
-        },
-        wrapper
-      );
-    });
-
     it("applies the default width when the user does not specify a width", () => {
       assertStyleMatch(
         {
-          borderBottom: "2px solid #738F9B",
+          borderBottom: "2px solid var(--colorsUtilityMajor300)",
           display: "inline-flex",
           fontSize: "14px",
           fontWeight: "700",
@@ -64,7 +53,7 @@ describe("Search", () => {
     it("applies the correct width specified by the user", () => {
       assertStyleMatch(
         {
-          borderBottom: "2px solid #738F9B",
+          borderBottom: "2px solid var(--colorsUtilityMajor300)",
           display: "inline-flex",
           fontSize: "14px",
           fontWeight: "700",
@@ -80,7 +69,7 @@ describe("Search", () => {
       input.simulate("focus");
       assertStyleMatch(
         {
-          borderBottom: "2px solid #738F9B",
+          borderBottom: "2px solid var(--colorsUtilityMajor300)",
         },
         wrapper
       );
@@ -90,7 +79,7 @@ describe("Search", () => {
       wrapper = renderWrapper({ value: "search", variant: "dark" }, mount);
       assertStyleMatch(
         {
-          borderBottom: "2px solid #8CA3AD",
+          borderBottom: "2px solid var(--colorsUtilityMajor200)",
           backgroundColor: "transparent",
         },
         wrapper
@@ -101,24 +90,13 @@ describe("Search", () => {
       wrapper = renderWrapper({ value: "search", searchButton: true }, mount);
       assertStyleMatch(
         {
-          borderBottom: "2px solid #738F9B",
+          borderBottom: "2px solid var(--colorsUtilityMajor300)",
           backgroundColor: "transparent",
         },
         wrapper
       );
     });
 
-    it("matches the expected styles when the search is active and has a value", () => {
-      wrapper = renderWrapper({ value: "Foo" }, mount);
-      assertStyleMatch(
-        {
-          borderBottom: "2px solid #738F9B",
-          color: "rgba(0,0,0,0.90)",
-        },
-        wrapper
-      );
-    });
-
     it("matches the expected styles for icon when variant is dark", () => {
       wrapper = renderWrapper(
         {
@@ -147,36 +125,6 @@ describe("Search", () => {
       );
     });
 
-    it("matches the expected styles for mouse over icon when variant is dark", () => {
-      wrapper = renderWrapper(
-        {
-          value: "",
-          searchButton: true,
-          id: "Search",
-          name: "Search",
-          variant: "dark",
-        },
-        mount
-      );
-      const icon = wrapper
-        .find(Icon)
-        .findWhere((n) => n.props().type === "search")
-        .hostNodes();
-      act(() => {
-        const input = wrapper.find(Input);
-        input.simulate("focus");
-        icon.simulate("mouseover");
-      });
-      wrapper.update();
-      assertStyleMatch(
-        {
-          color: "rgba(0,0,0,0.90)",
-        },
-        wrapper,
-        icon
-      );
-    });
-
     it("applies the expected styling to the input", () => {
       wrapper = renderWrapper({ value: "" }, mount);
       assertStyleMatch(

diff --git a/src/components/search/search.style.js b/src/components/search/search.style.js
@@ -1,5 +1,5 @@
-import styled, { css } from "styled-components";
 import { margin } from "styled-system";
+import styled, { css } from "styled-components";
 
 import StyledInputIconToggle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
@@ -21,8 +21,9 @@ const StyledSearch = styled.div`
   }) => {
     const darkVariant = variant === "dark";
     const variantColor = darkVariant
-      ? `${theme.search.darkVariantBorder}`
-      : `${theme.search.passive}`;
+      ? "var(--colorsUtilityMajor200)"
+      : "var(--colorsUtilityMajor300)";
+
     const iconColor =
       darkVariant &&
       ((searchHasValue && isFocused) ||
@@ -38,14 +39,15 @@ const StyledSearch = styled.div`
       font-size: 14px;
       font-weight: 700;
       :hover {
-        border-bottom-color: ${theme.search.active};
+        border-bottom-color: ${darkVariant
+          ? "var(--colorsUtilityMajor100)"
+          : "var(--colorsUtilityMajor400)"};
         cursor: pointer;
       }
       ${(isFocused || searchHasValue) &&
       css`
         border-color: transparent;
         transition: background 0.2s ease;
-        color: ${theme.icon.defaultHover};
         :hover {
           border-color: transparent;
         }
@@ -54,51 +56,51 @@ const StyledSearch = styled.div`
       !searchIsActive &&
       css`
         border-color: transparent;
-        color: ${theme.icon.defaultHover};
       `}
       ${!isFocused &&
       searchHasValue &&
       !showSearchButton &&
       css`
         border-bottom: 2px solid ${variantColor};
         :hover {
-          border-bottom-color: ${theme.search.active};
+          border-bottom-color: var(--colorsUtilityMajor400);
           cursor: pointer;
         }
       `}
 
       ${StyledInput} {
+        ::-moz-placeholder {
+          color: var(--colorsUtilityYin055);
+          opacity: 1;
+        }
+        ::placeholder {
+          color: var(--colorsUtilityYin055);
+        }
+
         ${darkVariant &&
         !isFocused &&
         css`
           ::-moz-placeholder {
-            color: ${theme.search.darkVariantPlaceholder};
+            color: var(--colorsUtilityMajor200);
             opacity: 1;
           }
           ::placeholder {
-            color: ${theme.search.darkVariantPlaceholder};
+            color: var(--colorsUtilityMajor200);
           }
         `}
 
         ${darkVariant &&
+        !isFocused &&
+        searchHasValue &&
+        !showSearchButton &&
         css`
-          ${!isFocused &&
-          searchHasValue &&
-          !showSearchButton &&
-          css`
-            color: ${theme.search.darkVariantText};
-          `}
-          ${!isFocused &&
-          !searchHasValue &&
-          css`
-            color: ${theme.search.darkVariantPlaceholder};
-          `}
+          color: var(--colorsUtilityYang100);
         `}
       }
 
       ${StyledInputPresentation} {
         background-color: ${searchHasValue || isFocused
-          ? `${theme.colors.white}`
+          ? "var(--colorsUtilityYang100)"
           : "transparent"};
         flex: 1;
         font-size: 14px;
@@ -110,7 +112,6 @@ const StyledSearch = styled.div`
         !searchHasValue &&
         css`
           border: 1px solid transparent;
-          color: ${theme.icon.default};
         `}
         ${!isFocused &&
         searchHasValue &&
@@ -119,38 +120,33 @@ const StyledSearch = styled.div`
           border: 1px solid transparent;
           background-color: ${darkVariant
             ? "transparent"
-            : `${theme.colors.white}`};
+            : "var(--colorsUtilityYang100)"};
         `}
       }
 
       ${StyledFormField} {
         flex: 1;
         z-index: ${theme.zIndex.smallOverlay};
       }
-      ${StyledButton} {
-        background-color: ${theme.search.button};
-        cursor: pointer;
-        color: ${theme.colors.white};
-      }
       ${StyledIcon} {
         color: ${iconColor
-          ? `${theme.search.icon}`
-          : `${theme.search.iconDarkVariant}`};
+          ? "var(--colorsUtilityMajor400)"
+          : "var(--colorsUtilityMajor200)"};
         ${!darkVariant &&
         css`
-          color: ${theme.search.icon};
+          color: var(--colorsUtilityMajor400);
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
         :hover {
           color: ${iconColor
-            ? `${theme.search.iconHover}`
-            : `${theme.search.iconDarkVariantHover}`};
+            ? "var(--colorsUtilityMajor500)"
+            : "var(--colorsUtilityMajor100)"};
           ${!darkVariant &&
           css`
-            color: ${theme.search.iconHover};
+            color: var(--colorsUtilityMajor500);
           `}
         }
       }
@@ -171,15 +167,13 @@ export default StyledSearch;
 export const StyledSearchButton = styled.div`
   display: inline-flex;
   border-bottom: none;
-  &&& ${StyledButton} {
-    ${({ theme }) => css`
-      background-color: ${theme.colors.primary};
-      border-color: ${theme.colors.primary};
-      :hover {
-        background: ${theme.colors.secondary};
-        border-color: ${theme.colors.secondary};
-      }
-    `}
+  & ${StyledButton} {
+    background-color: var(--colorsActionMajor500);
+    border-color: var(--colorsActionMajorTransparent);
+    :hover {
+      background: var(--colorsActionMajor600);
+      border-color: var(--colorsActionMajorTransparent);
+    }
 
     width: 40px;
     margin: 0px 0px;
@@ -192,7 +186,7 @@ export const StyledSearchButton = styled.div`
 
 export const StyledButtonIcon = styled.div`
   &&& ${StyledIcon} {
-    color: white;
+    color: var(--colorsActionMajorYang100);
     margin-right: 0px;
   }
 `;