feat(SwitchButton): refactor component

.changeset/wet-queens-trade.md

@@ -0,0 +1,11 @@
+---
+"@ultraviolet/ui": minor
+"@ultraviolet/form": minor
+---
+**Breaking changes**
+`SwitchButton`:  New version of the component: 
+- props `leftButton` and `rightButton` removed
+- Use `SwitchButton.Option` to add buttons/options
+- More than 2 options possible now !
+- New sizes
+- New prop `sentiment`

examples/next/src/pages/login/index.tsx

@@ -30,20 +30,13 @@ const Home = () => {
   return (
     <StyledPage>
       <StyledSwitchButton
-        name="switch button"
-        leftButton={{
-          label: 'Log In',
-          value: 'login',
-        }}
-        rightButton={{
-          label: 'Sign Up',
-          value: 'signup',
-        }}
         value="login"
-        onChange={event =>
-          setTab((event.currentTarget as HTMLInputElement).value)
-        }
-      />
+        name="switch button"
+        onChange={event => setTab((event.target as HTMLInputElement).value)}
+      >
+        <SwitchButton.Option value="login">Log In</SwitchButton.Option>
+        <SwitchButton.Option value="signup">Sign Up</SwitchButton.Option>
+      </StyledSwitchButton>
       <Content tab={tab} />
     </StyledPage>
   )

packages/form/src/components/SwitchButtonField/__stories__/Playground.stories.tsx

@@ -3,13 +3,6 @@ import { Template } from './Template.stories'
 export const Playground = Template.bind({})
 
 Playground.args = {
-  leftButton: {
-    label: 'Left Button Label',
-    value: 'left',
-  },
-  rightButton: {
-    label: 'Right Button Label',
-    value: 'right',
-  },
+  value: 'right',
   name: 'switchButton',
 }

packages/form/src/components/SwitchButtonField/__stories__/Template.stories.tsx

@@ -4,4 +4,10 @@ import { SwitchButtonField } from '..'
 
 export const Template: StoryFn<
   ComponentProps<typeof SwitchButtonField>
-> = args => <SwitchButtonField {...args} />
+> = args => (
+  <SwitchButtonField {...args}>
+    <SwitchButtonField.Option value="left">Left</SwitchButtonField.Option>
+    <SwitchButtonField.Option value="center">Center</SwitchButtonField.Option>
+    <SwitchButtonField.Option value="right">Right</SwitchButtonField.Option>
+  </SwitchButtonField>
+)