Feature/switch variant

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/fluid-react",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "private": false,
   "description": "Builders React for Fluid Design System",
   "keywords": [

src/components/Switch/index.tsx

@@ -6,12 +6,19 @@ export type Props = {
   label: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   checked?: boolean;
+  variant?: 'default' | 'expanded';
 };
 
-const Switch: FC<Props> = ({ id, label, onChange, checked = false }) => (
+const Switch: FC<Props> = ({
+  id,
+  label,
+  onChange,
+  checked = false,
+  variant = 'default',
+}) => (
   <Wrapper>
     <Input type="checkbox" id={id} onChange={onChange} />
-    <Label htmlFor={id} checked={checked}>
+    <Label htmlFor={id} $checked={checked} $variant={variant}>
       {label}
     </Label>
   </Wrapper>

src/components/Switch/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.div`
   position: absolute;
@@ -24,46 +24,64 @@ export const Input = styled.input`
 `;
 
 type LabelProps = {
-  checked: boolean;
+  $checked: boolean;
+  $variant?: 'default' | 'expanded';
 };
 
 export const Label = styled.label<LabelProps>`
-  display: block;
+  display: ${({ $variant }) => ($variant === 'expanded' ? 'flex' : 'block')};
   position: relative;
-  margin: 0 0 10px;
+  margin: 0 0 15px;
   font-size: 16px;
   line-height: 24px;
-  padding: 0 0 0 44px;
+  padding: 0 0 0 60px;
   cursor: pointer;
 
+  ${({ $variant }) =>
+    $variant === 'expanded' &&
+    css`
+      align-items: center;
+      height: 32px;
+    `}
+
   &:before {
     content: '';
     position: absolute;
-    top: 5px;
+    top: ${({ $variant }) => ($variant === 'expanded' ? '0' : '5px')};
     left: 0;
-    width: 36px;
-    height: 14px;
-    background-color: rgba(0, 0, 0, 0.26);
-    border-radius: 14px;
     z-index: 1;
     transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    ${(props) => props.checked && 'background-color: rgba(63, 81, 181, .5);'}
+    width: ${({ $variant }) => ($variant === 'expanded' ? '52px' : '36px')};
+    height: ${({ $variant }) => ($variant === 'expanded' ? '32px' : '14px')};
+    background-color: ${({ $checked, $variant }) => {
+      if ($checked) {
+        return $variant === 'expanded' ? '#1E1F44' : 'rgba(63, 81, 181, 0.5)';
+      }
+      return 'rgba(0, 0, 0, 0.26)';
+    }};
+    border-radius: ${({ $variant }) =>
+      $variant === 'expanded' ? '999px' : '14px'};
   }
 
   &:after {
     content: '';
     position: absolute;
     top: 2px;
-    left: 0;
-    width: 20px;
-    height: 20px;
-    background-color: #fff;
+    left: ${({ $variant, $checked }) => {
+      if ($checked) {
+        return $variant === 'expanded' ? '22px' : '16px';
+      }
+      return $variant === 'expanded' ? '2px' : '0';
+    }};
+    width: ${({ $variant }) => ($variant === 'expanded' ? '28px' : '20px')};
+    height: ${({ $variant }) => ($variant === 'expanded' ? '28px' : '20px')};
+    background-color: ${({ $variant, $checked }) =>
+      $checked && $variant === 'default' ? '#3f51b5' : '#fff'};
     border-radius: 14px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
       0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     z-index: 2;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     transition-property: left, background-color;
-    ${(props) => props.checked && 'left: 16px; background-color: #3f51b5;'}
   }
 `;

src/components/Switch/switch.stories.tsx

@@ -21,6 +21,7 @@ const meta: Meta<typeof Switch> = {
     label: 'Switch Test',
     checked: false,
     onChange: mockOnChange,
+    variant: 'default',
   },
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);