refactor: add variant in checkbox (#185)

platformbuilders · Oct 8, 2024 · 25d38ba · 25d38ba
1 parent 2ed1f2e
commit 25d38ba
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 16 deletions.
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -18,12 +18,19 @@ const meta: Meta<typeof Checkbox> = {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      type: 'string',
+      defaultValue: 'default',
+    },
+  },
   args: {
     onChange: eventMockFn,
     id: testId,
     label: 'Enable Settings',
     disabled: false,
     checked: false,
+    variant: 'default',
   },
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);

diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
@@ -13,6 +13,8 @@ export type CheckboxProps = {
   id?: string;
   style?: CSSProperties;
   disabled?: boolean;
+  variant?: 'default' | 'primary';
+  labelFontWeight?: number;
 };
 
 const Checkbox: FC<CheckboxProps> = ({
@@ -24,19 +26,24 @@ const Checkbox: FC<CheckboxProps> = ({
   error,
   style,
   disabled,
+  variant = 'default',
+  labelFontWeight,
 }): JSX.Element => (
-  <Wrapper enabled={!disabled}>
+  <Wrapper enabled={!disabled} $variant={variant}>
     <FormError error={error}>
-      <CheckboxRoot htmlFor={id} style={style}>
+      <CheckboxRoot htmlFor={id} style={style} $variant={variant}>
         <Check
           type="checkbox"
           id={id}
           checked={checked}
           onChange={onChange}
           name={name}
           disabled={disabled}
+          $variant={variant}
         />
-        <Label>{label}</Label>
+        <Label $variant={variant} $fontWeight={labelFontWeight}>
+          {label}
+        </Label>
       </CheckboxRoot>
     </FormError>
   </Wrapper>

diff --git a/src/components/Checkbox/styles.tsx b/src/components/Checkbox/styles.tsx
@@ -1,33 +1,55 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { getTheme, ifStyle } from '@platformbuilders/theme-toolkit';
 
 const brandPrimaryContrast = getTheme('brand.primary.contrast');
+const brandPrimaryMain = getTheme('brand.primary.main');
 const infoMain = getTheme('info.main');
 const spacingSm = getTheme('spacing.sm');
 const borderRadiusSm = getTheme('borderRadius.sm');
 
 // Ifs
 const isEnabled = ifStyle('enabled');
 
+type VariantProps = {
+  $variant?: 'default' | 'primary';
+};
+
+type LabelProps = {
+  $fontWeight?: number;
+} & VariantProps;
+
 type WrapperProps = {
   enabled?: boolean;
+} & VariantProps;
+
+const getVariantStyles = ({ $variant }: VariantProps) => {
+  switch ($variant) {
+    case 'primary':
+      return brandPrimaryMain;
+    case 'default':
+      return infoMain;
+    default:
+      return infoMain;
+  }
 };
 
 export const Wrapper = styled.div<WrapperProps>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: ${({ $variant }) =>
+    $variant && $variant === 'primary' ? '0' : '10px'};
   padding: ${spacingSm}px;
   border-radius: ${borderRadiusSm}px;
   transition: 0.5s;
 
   &:hover {
-    background-color: ${isEnabled(infoMain)}20;
+    background-color: ${({ $variant }) =>
+      $variant && $variant === 'primary' ? 'none' : isEnabled(infoMain)}20;
   }
 `;
 
-export const CheckboxRoot = styled.label`
+export const CheckboxRoot = styled.label<VariantProps>`
   z-index: 0;
   position: relative;
   display: inline-block;
@@ -37,8 +59,8 @@ export const CheckboxRoot = styled.label`
 
   input:checked + span::before,
   input:indeterminate + span::before {
-    border-color: ${infoMain};
-    background-color: ${infoMain};
+    border-color: ${({ $variant }) => getVariantStyles({ $variant })};
+    background-color: ${({ $variant }) => getVariantStyles({ $variant })};
   }
 
   input:checked + span::after,
@@ -52,7 +74,7 @@ export const CheckboxRoot = styled.label`
   }
 
   input:active + span::before {
-    border-color: ${infoMain};
+    border-color: ${({ $variant }) => getVariantStyles({ $variant })};
   }
 
   input:disabled + span {
@@ -61,18 +83,18 @@ export const CheckboxRoot = styled.label`
   }
 
   input:disabled + span::before {
-    border-color: ${infoMain};
+    border-color: ${({ $variant }) => getVariantStyles({ $variant })};
     opacity: 0.5;
   }
 
   input:checked:disabled + span::before,
   input:indeterminate:disabled + span::before {
     border-color: transparent;
-    background-color: ${infoMain};
+    background-color: ${({ $variant }) => getVariantStyles({ $variant })};
   }
 `;
 
-export const Check = styled.input`
+export const Check = styled.input<VariantProps>`
   appearance: none;
   z-index: -1;
   position: absolute;
@@ -93,7 +115,7 @@ export const Check = styled.input`
 
   &:checked,
   &:indeterminate {
-    background-color: ${infoMain};
+    background-color: ${({ $variant }) => getVariantStyles({ $variant })};
   }
 
   &:focus {
@@ -111,18 +133,24 @@ export const Check = styled.input`
   }
 `;
 
-export const Label = styled.span`
+export const Label = styled.span<LabelProps>`
   display: inline-block;
   width: 100%;
   cursor: pointer;
 
+  ${({ $fontWeight }) =>
+    $fontWeight &&
+    css`
+      font-weight: ${$fontWeight};
+    `}
+
   &::before {
     content: '';
     display: inline-block;
     box-sizing: border-box;
     margin: 3px 11px 3px 1px;
     border: solid 2px; /* Safari */
-    border-color: ${infoMain};
+    border-color: ${({ $variant }) => getVariantStyles({ $variant })};
     border-radius: 3px;
     width: 18px;
     height: 18px;