feat(button): fallback for buttonlink

ZopaPublic · Jul 10, 2024 · b20a95f · b20a95f
1 parent afe5307
commit b20a95f
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 116 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,4 +16,4 @@ coverage
 *.iml
 
 .DS_Store
-
+*.idea
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -20,14 +20,29 @@ const colorMap = {
   primary: {
     text: colors.white,
     bg: colors.action,
+    hover: {
+      bg: `linear-gradient(90deg, #3B46C4 0%, #2732B0 100%)`,
+      text: colors.white,
+      border: `1px solid ${colors.action}`,
+    },
   },
   secondary: {
     text: colors.actionDark,
     bg: colors.actionLight,
+    hover: {
+      bg: '#EEEFFB',
+      text: colors.actionDark,
+      border: '1px solid #EEEFFB',
+    },
   },
   link: {
     text: colors.actionDark,
     bg: 'transparent',
+    hover: {
+      bg: '#EAEBFA',
+      text: colors.actionDark,
+      border: '1px solid #EAEBFA',
+    },
   },
 };
 
@@ -95,13 +110,13 @@ export const buttonStyle = css<BaseButtonProps>`
         background: ${activeBg ?? colorMap[styling].bg};
       }
       &:hover {
-        background: ${hoverBg};
-        color: ${hoverText};
-        border: ${hoverBorder};
+        background: ${hoverBg ?? colorMap[styling].hover.bg};
+        color: ${hoverText ?? colorMap[styling].hover.text};
+        border: ${hoverBorder ?? colorMap[styling].hover.border};
       }
       &:focus:not(:active) {
-        border: ${focusBorder};
-        box-shadow: ${focusBoxShadow};
+        border: ${focusBorder ?? `1px solid ${colors.white}`};
+        box-shadow: ${focusBoxShadow ?? `0 0 4px ${colors.actionPlain}`};
       }
     `;
     return disabled ? disabledStyles : enabledStyles;

diff --git a/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap b/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap
@@ -34,19 +34,23 @@ exports[`<Button /> renders as "link" 1`] = `
   letter-spacing: 0;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 .c0:active {
   opacity: 0.8;
   box-shadow: unset;
+  color: #21247F;
   border: 1px solid transparent;
+  background: transparent;
 }
 
 .c0:hover {
   background: #EAEBFA;
+  color: #21247F;
+  border: 1px solid #EAEBFA;
+}
+
+.c0:focus:not(:active) {
+  border: 1px solid #FFFFFF;
+  box-shadow: 0 0 4px #3B46C4;
 }
 
 <button
@@ -92,19 +96,23 @@ exports[`<Button /> renders as "secondary" 1`] = `
   letter-spacing: 0;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 .c0:active {
   opacity: 0.8;
   box-shadow: unset;
+  color: #21247F;
   border: 1px solid transparent;
+  background: #E9EAFA;
 }
 
 .c0:hover {
   background: #EEEFFB;
+  color: #21247F;
+  border: 1px solid #EEEFFB;
+}
+
+.c0:focus:not(:active) {
+  border: 1px solid #FFFFFF;
+  box-shadow: 0 0 4px #3B46C4;
 }
 
 <button
@@ -155,11 +163,6 @@ exports[`<Button /> renders disabled 1`] = `
   border: 1px solid transparent;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 <button
   class="c0"
   disabled=""
@@ -206,11 +209,6 @@ exports[`<Button /> renders loading as "primary" 1`] = `
   cursor: not-allowed;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 <button
   class="c0"
   disabled=""
@@ -264,11 +262,6 @@ exports[`<Button /> renders loading as "secondary" 1`] = `
   cursor: not-allowed;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 <button
   class="c0"
   disabled=""
@@ -322,11 +315,6 @@ exports[`<Button /> renders loading as "secondary" 2`] = `
   cursor: not-allowed;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 <button
   class="c0"
   disabled=""
@@ -381,19 +369,23 @@ exports[`<Button /> renders wide 1`] = `
   background-color: #3B46C4;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 .c0:active {
   opacity: 0.8;
   box-shadow: unset;
+  color: #FFFFFF;
   border: 1px solid transparent;
+  background: linear-gradient(90deg,#4F5AD8 0%,#3B46C4 100%);
 }
 
 .c0:hover {
   background: linear-gradient(90deg,#3B46C4 0%,#2732B0 100%);
+  color: #FFFFFF;
+  border: 1px solid linear-gradient(90deg,#4F5AD8 0%,#3B46C4 100%);
+}
+
+.c0:focus:not(:active) {
+  border: 1px solid #FFFFFF;
+  box-shadow: 0 0 4px #3B46C4;
 }
 
 <button
@@ -440,19 +432,23 @@ exports[`<Button /> renders with no a11y violations 1`] = `
   background-color: #3B46C4;
 }
 
-.c0:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 .c0:active {
   opacity: 0.8;
   box-shadow: unset;
+  color: #FFFFFF;
   border: 1px solid transparent;
+  background: linear-gradient(90deg,#4F5AD8 0%,#3B46C4 100%);
 }
 
 .c0:hover {
   background: linear-gradient(90deg,#3B46C4 0%,#2732B0 100%);
+  color: #FFFFFF;
+  border: 1px solid linear-gradient(90deg,#4F5AD8 0%,#3B46C4 100%);
+}
+
+.c0:focus:not(:active) {
+  border: 1px solid #FFFFFF;
+  box-shadow: 0 0 4px #3B46C4;
 }
 
 <button

diff --git a/src/components/molecules/BankDetails/__snapshots__/BankDetails.test.tsx.snap b/src/components/molecules/BankDetails/__snapshots__/BankDetails.test.tsx.snap
@@ -79,19 +79,23 @@ exports[`<BankDetails /> renders the component with no props and no a11y violati
   letter-spacing: 0;
 }
 
-.c4:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 .c4:active {
   opacity: 0.8;
   box-shadow: unset;
+  color: #21247F;
   border: 1px solid transparent;
+  background: transparent;
 }
 
 .c4:hover {
   background: #EAEBFA;
+  color: #21247F;
+  border: 1px solid #EAEBFA;
+}
+
+.c4:focus:not(:active) {
+  border: 1px solid #FFFFFF;
+  box-shadow: 0 0 4px #3B46C4;
 }
 
 .c0 {

diff --git a/src/components/molecules/Help/__snapshots__/Help.test.tsx.snap b/src/components/molecules/Help/__snapshots__/Help.test.tsx.snap
@@ -234,19 +234,23 @@ exports[`<Help /> renders the default Help component with no a11y violations 1`]
   letter-spacing: 0;
 }
 
-.c15:focus:not(:active) {
-  border: 1px solid #FFFFFF;
-  box-shadow: 0 0 4px #3B46C4;
-}
-
 .c15:active {
   opacity: 0.8;
   box-shadow: unset;
+  color: #21247F;
   border: 1px solid transparent;
+  background: #E9EAFA;
 }
 
 .c15:hover {
   background: #EEEFFB;
+  color: #21247F;
+  border: 1px solid #EEEFFB;
+}
+
+.c15:focus:not(:active) {
+  border: 1px solid #FFFFFF;
+  box-shadow: 0 0 4px #3B46C4;
 }
 
 @media (min-width:0px) {