diff --git a/src/lib/components/checkbox/Checkbox.component.tsx b/src/lib/components/checkbox/Checkbox.component.tsx index ae909cebd2..8d46f8c8c1 100644 --- a/src/lib/components/checkbox/Checkbox.component.tsx +++ b/src/lib/components/checkbox/Checkbox.component.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, forwardRef } from 'react'; +import { ChangeEvent, InputHTMLAttributes, forwardRef } from 'react'; import styled from 'styled-components'; import { spacing, Stack } from '../../spacing'; import { getTheme } from '../../utils'; @@ -10,39 +10,32 @@ type Props = { checked?: boolean; disabled?: boolean; onChange?: (e: ChangeEvent) => void; -}; - -const Checkbox = forwardRef(({ - disabled, - checked, - label, - value, - onChange, - ...rest -}, ref) => { - return ( - - - ; + +const Checkbox = forwardRef( + ({ disabled, checked, label, value, onChange, ...rest }, ref) => { + return ( + - {label && ( - {label} - )} - - - ); -}); + className="sc-checkbox" + > + + + {label && {label}} + + + ); + }, +); export { Checkbox }; @@ -52,10 +45,10 @@ const StyledCheckbox = styled.label<{ }>` /* Basic styling */ - [type=checkbox] { + [type='checkbox'] { width: 0.75rem; height: 0.75rem; - color: ${props => getTheme(props).textPrimary}; + color: ${(props) => getTheme(props).textPrimary}; vertical-align: middle; -webkit-appearance: none; background: none; @@ -63,16 +56,15 @@ const StyledCheckbox = styled.label<{ outline: 0; flex-grow: 0; border-radius: ${spacing.r2}; - background-color: ${props => getTheme(props).backgroundLevel1}; + background-color: ${(props) => getTheme(props).backgroundLevel1}; transition: background 300ms; cursor: pointer; } - /* Pseudo element for check styling */ - [type=checkbox]::before { - content: ""; + [type='checkbox']::before { + content: ''; color: transparent; display: block; width: inherit; @@ -81,45 +73,45 @@ const StyledCheckbox = styled.label<{ border: 0; background-color: transparent; background-size: contain; - box-shadow: inset 0 0 0 ${spacing.r1} ${props => getTheme(props).border}; + box-shadow: inset 0 0 0 ${spacing.r1} ${(props) => getTheme(props).border}; } - /* Checked */ - [type=checkbox]:checked { - background-color: ${props => getTheme(props).selectedActive}; + [type='checkbox']:checked { + background-color: ${(props) => getTheme(props).selectedActive}; } - [type=checkbox]:checked::before { + [type='checkbox']:checked::before { box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E"); } /* Indeterminate */ - [type=checkbox]:indeterminate::before { + [type='checkbox']:indeterminate::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='4' y1='11' x2='18' y2='11' style='stroke:%23fff;stroke-width:2'/%3E %3C/svg%3E"); } /* Hover & focus */ - [type=checkbox]:hover { + [type='checkbox']:hover { ${(props) => !props.disabled && `box-shadow: inset 0 0 0 ${spacing.r1} ${getTheme(props).infoPrimary};`} } - [type=checkbox]:focus { - box-shadow: inset 0 0 0 ${spacing.r1} ${props => getTheme(props).infoPrimary}; + [type='checkbox']:focus { + box-shadow: inset 0 0 0 ${spacing.r1} + ${(props) => getTheme(props).infoPrimary}; } - [type=checkbox]:focus-visible:enabled { - outline: dashed ${spacing.r2} ${props => getTheme(props).selectedActive}; + [type='checkbox']:focus-visible:enabled { + outline: dashed ${spacing.r2} ${(props) => getTheme(props).selectedActive}; outline-offset: ${spacing.r2}; } /* Disabled */ - [type=checkbox]:disabled { + [type='checkbox']:disabled { opacity: 0.5; cursor: not-allowed; }