feat: buttons

ZopaPublic · Jul 30, 2024 · cf80097 · cf80097
1 parent 8a55e73
commit cf80097
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 19 deletions.
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -5,7 +5,7 @@ import { AppTheme, useThemeContext } from '../../styles/Theme';
 import { colors, spacing, typography } from '../../../constants';
 import CustomSpinner from '../Spinner/CustomSpinner/CustomSpinner';
 
-export type Styling = 'primary' | 'secondary' | 'link';
+export type Styling = 'primary' | 'secondary' | 'icon' | 'link';
 
 type BaseButtonProps = {
   styling?: Styling;
@@ -35,6 +35,15 @@ const colorMap = {
       border: '1px solid #EEEFFB',
     },
   },
+  icon: {
+    text: colors.actionDark,
+    bg: colors.actionLight,
+    hover: {
+      bg: '#EEEFFB',
+      text: colors.actionDark,
+      border: '1px solid #EEEFFB',
+    },
+  },
   link: {
     text: colors.actionDark,
     bg: 'transparent',

diff --git a/src/components/atoms/InputRange/InputRange.tsx b/src/components/atoms/InputRange/InputRange.tsx
@@ -39,7 +39,7 @@ const InputRange = forwardRef<HTMLInputElement, InputRange>(
     return (
       <Wrapper>
         {controls && (
-          <Button title="decrement" styling="secondary" disabled={value <= min} onClick={decrement}>
+          <Button title="decrement" styling="icon" disabled={value <= min} onClick={decrement}>
             <Icon variant={faMinus} width="12px" height="12px" />
           </Button>
         )}
@@ -58,7 +58,7 @@ const InputRange = forwardRef<HTMLInputElement, InputRange>(
           theme={theme}
         />
         {controls && (
-          <Button title="increment" styling="secondary" disabled={value >= max} onClick={increment}>
+          <Button title="increment" styling="icon" disabled={value >= max} onClick={increment}>
             <Icon variant={faPlus} width="12px" height="12px" />
           </Button>
         )}

diff --git a/src/components/atoms/InputRange/styles/Button.tsx b/src/components/atoms/InputRange/styles/Button.tsx
@@ -7,9 +7,10 @@ import { AppThemeProps, useThemeContext } from '../../../styles/Theme';
 interface InputRangeThemeProps extends AppThemeProps {}
 
 const ButtonWrapper = styled.div`
-  padding: 12px;
+  padding: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.button.paddingMobile};
+
   @media (min-width: ${grid.breakpoints.m}px) {
-    padding: 16px;
+    padding: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.button.padding};
   }
 `;
 
@@ -22,6 +23,9 @@ const StyledButton = styled.button<InputRangeThemeProps>`
   height: 32px;
   padding: 0;
 
+  ${({ theme }) => theme.inputRange?.button.buttonStyle}
+
+
   @media (min-width: ${grid.breakpoints.m}px) {
     width: 50px;
     height: 50px;

diff --git a/src/components/atoms/InputRange/styles/Input.tsx b/src/components/atoms/InputRange/styles/Input.tsx
@@ -9,8 +9,6 @@ import { AppThemeProps } from '../../../styles/Theme';
 interface InputRangeThemeProps extends AppThemeProps {}
 
 const trackHeight = 8;
-const thumbDiameter = 50;
-const thumbDiameterMobile = 30;
 
 const TrackStyles = css`
   box-sizing: border-box;
@@ -24,13 +22,13 @@ const ThumbStyles = css<InputRangeThemeProps>`
   box-sizing: border-box;
   border: none;
   border-radius: 50%;
-  width: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.thumb.thumbDiameterMobile};
-  height: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.thumb.thumbDiameterMobile};
+  width: ${({ theme }: InputRangeThemeProps) => `${theme.inputRange?.thumb.thumbDiameterMobile}px`};
+  height: ${({ theme }: InputRangeThemeProps) => `${theme.inputRange?.thumb.thumbDiameterMobile}px`};
   background: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.thumb.thumbColor};
 
   @media (min-width: ${grid.breakpoints.m}px) {
-    width: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.thumb.thumbDiameter};
-    height: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.thumb.thumbDiameter};
+    width: ${({ theme }: InputRangeThemeProps) => `${theme.inputRange?.thumb.thumbDiameter}px`};
+    height: ${({ theme }: InputRangeThemeProps) => `${theme.inputRange?.thumb.thumbDiameter}px`};
     background: ${({ theme }: InputRangeThemeProps) =>
       theme.inputRange?.thumb.thumbIcon
         ? `url(${arrowsAltH}) no-repeat ${colors.actionPlain}`
@@ -49,12 +47,12 @@ export const Input = styled.input<
 >`
   -webkit-appearance: none;
   width: 100%;
-  height: ${thumbDiameterMobile}px;
+  height: ${({ theme }: InputRangeThemeProps) => `${theme.inputRange?.thumb.thumbDiameterMobile}px`};
   cursor: pointer;
   background: transparent;
 
   @media (min-width: ${grid.breakpoints.m}px) {
-    height: ${thumbDiameter}px;
+  height: ${({ theme }: InputRangeThemeProps) => `${theme.inputRange?.thumb.thumbDiameter}px`};
   }
 
   &::-webkit-slider-runnable-track {
@@ -66,13 +64,13 @@ export const Input = styled.input<
 
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-      margin-top: ${(trackHeight - thumbDiameterMobile) * 0.5}px;
+    margin-top: ${({ theme }) => (trackHeight - theme.inputRange?.thumb.thumbDiameterMobile) * 0.5}px;
 
     ${ThumbStyles}
 
     @media (min-width: ${grid.breakpoints.m}px) {
       margin-top: ${({ theme }: InputRangeThemeProps) =>
-        `(${trackHeight - thumbDiameterMobile}) * ${theme.inputRange?.thumb.marginTop}px`};
+        `(${trackHeight - theme.inputRange?.thumb.thumbDiameterMobile}) * ${theme.inputRange?.thumb.marginTop}px`};
   }
   }
   &::-moz-range-thumb {

diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -176,14 +176,16 @@ export interface InputRangeTheme {
   button: {
     buttonStyle: any;
     borderRadius: string;
+    paddingMobile: string;
+    padding: string;
   };
   slider: {
     lowerColor: string;
     upperColor: string;
   };
   thumb: {
-    thumbDiameterMobile: string;
-    thumbDiameter: string;
+    thumbDiameterMobile: number;
+    thumbDiameter: number;
     thumbIcon: boolean;
     thumbColor: string;
     marginTop: number;
@@ -583,14 +585,16 @@ export const zopaTheme: AppTheme = {
     button: {
       buttonStyle,
       borderRadius: '50%',
+      paddingMobile: '12px',
+      padding: '16px',
     },
     slider: {
       lowerColor: colors.actionPlain,
       upperColor: colors.greyLighter,
     },
     thumb: {
-      thumbDiameterMobile: '30px',
-      thumbDiameter: '50px',
+      thumbDiameterMobile: 30,
+      thumbDiameter: 50,
       thumbIcon: true,
       thumbColor: colors.actionPlain,
       marginTop: 0.5,