feat: classname for slider buttons

ZopaPublic · Jul 31, 2024 · 79ed63d · 79ed63d
1 parent 851b354
commit 79ed63d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/components/atoms/InputRange/InputRange.tsx b/src/components/atoms/InputRange/InputRange.tsx
@@ -1,8 +1,9 @@
 import React, { InputHTMLAttributes, ChangeEvent, MouseEvent, forwardRef } from 'react';
+import styled from 'styled-components';
+import classnames from 'classnames';
 import { calculateTrackPosition } from './helpers';
 import { Button, Icon, Input, Wrapper } from './styles';
 import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
-import styled from 'styled-components';
 import { AppThemeProps, useThemeContext } from '../../styles/Theme';
 
 export interface InputRange extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange'> {
@@ -47,7 +48,13 @@ const InputRange = forwardRef<HTMLInputElement, InputRange>(
       <StyledWrapper>
         {controls ? (
           // styling="icon"
-          <Button title="decrement" styling="secondary" disabled={value <= min} onClick={decrement}>
+          <Button
+            title="decrement"
+            styling="secondary"
+            disabled={value <= min}
+            onClick={decrement}
+            className={classnames(theme.inputRange?.button?.className)}
+          >
             <Icon variant={faMinus} width="12px" height="12px" />
           </Button>
         ) : null}
@@ -66,7 +73,13 @@ const InputRange = forwardRef<HTMLInputElement, InputRange>(
           theme={theme}
         />
         {controls ? (
-          <Button title="increment" styling="secondary" disabled={value >= max} onClick={increment}>
+          <Button
+            title="increment"
+            styling="secondary"
+            disabled={value >= max}
+            onClick={increment}
+            className={classnames(theme.inputRange?.button?.className)}
+          >
             <Icon variant={faPlus} width="12px" height="12px" />
           </Button>
         ) : null}

diff --git a/src/components/atoms/InputRange/styles/Button.tsx b/src/components/atoms/InputRange/styles/Button.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
+import classnames from 'classnames';
 import { grid } from '../../../../constants';
-import { ButtonProps } from '../../Button/Button';
+import { ButtonProps, buttonStyle } from '../../Button/Button';
 import { AppThemeProps, useThemeContext } from '../../../styles/Theme';
 
 interface InputRangeThemeProps extends AppThemeProps {}
@@ -14,7 +15,7 @@ const ButtonWrapper = styled.div<InputRangeThemeProps>`
 `;
 
 const StyledButton = styled.button<InputRangeThemeProps>`
-  ${({ theme }) => theme.inputRange?.button.buttonStyle};
+  ${buttonStyle};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -33,7 +34,7 @@ export const Button = (props: ButtonProps) => {
   const theme = useThemeContext();
   return (
     <ButtonWrapper>
-      <StyledButton {...props} theme={theme} />
+      <StyledButton {...props} className={classnames(theme.inputRange?.button?.className)} theme={theme} />
     </ButtonWrapper>
   );
 };
diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -175,7 +175,7 @@ export interface InputTheme {
 export interface InputRangeTheme {
   justifyContent: string;
   button: {
-    // buttonStyle: any; //TODO: type this
+    className?: any; //TODO: type this
     borderRadius: string;
     paddingMobile: string;
     padding: string;
@@ -594,7 +594,6 @@ export const zopaTheme: AppTheme = {
   inputRange: {
     justifyContent: 'flex-start',
     button: {
-      // buttonStyle, //TODO: type this
       borderRadius: '50%',
       paddingMobile: '12px',
       padding: '16px',