First version of segmented control (seb-oss#1381)

apps/docs/content/component/segmentedcontrol/accessibility.mdx

@@ -0,0 +1,5 @@
+---
+title: Accessibility
+global_id: segmentedcontrolaccessibility
+date: 2024-05-21
+---

apps/docs/content/component/segmentedcontrol/code.mdx

@@ -0,0 +1,5 @@
+---
+title: Code
+global_id: segmentedcontrolcode
+date: 2024-05-21
+---

apps/docs/content/component/segmentedcontrol/design.mdx

@@ -0,0 +1,7 @@
+---
+title: Design
+global_id: segmentedcontroldesign
+date: 2024-05-21
+---
+## Anatomy
+<Figma node="3241-18803" caption="Anatomy of Segmented control" />

apps/docs/content/component/segmentedcontrol/index.mdx

@@ -0,0 +1,61 @@
+---
+title: Segmented control
+summary: A segmented control is a group of 2 – 5 buttons that lets the user switch views or sort elements.
+date: 2024-05-21
+global_id: segmentedcontrolindex
+status: work in progress
+tags: 
+node: 3241-18797
+---
+## Overview
+The segmented control switches between views or to sort elements.
+The segmented control is good to use to provide the user with closely related choices that affect an object, state or view.
+
+## Variants
+The segmented control comes in two sizes:
+
+- **Default**: The most commonly used to ensure visibility.
+- **Small**: Used in confined spaces.
+
+<Grid columns={2} gapInline="small">
+    <Figma node="3354-11181" caption="Default size" />
+    <Figma node="3354-11183" caption="Small size" />
+</Grid>
+
+## Behaviour
+Component acts as button and trigger a change on click. One option need to be pre-selected, most likely the first. Only one segment can be active simultaneously. 
+
+## Features
+
+<Grid columns={2} gapInline="small">
+    <div>
+        ### Icons
+        The options may have an icon to accentuate the choices. Use icons sparsely but consistently.
+    </div>
+    <Figma node="3354-11216" caption="Options augmented with icons" />
+</Grid>
+
+<Grid columns={2} gapInline="small">
+    <div>
+        ### Overflow
+        When there isn't enough room for all items to be displayed the items will need to scroll. This is indicated by arrows indicating that there are more options available.
+    </div>
+    <Figma node="3354-11368" caption="Overflow of options" />
+</Grid>
+
+## Do's and Don'ts
+<Grid columns={2} gapInline="small">
+<div>
+**Do**
+	- Use max 5 options, try to have as few as possible.
+	- Keep option size consistent
+</div>
+<div>
+**Don'ts**
+	- Use it to collect data in a form, in that case use radio button or select.
+	- Use to navigate in different areas, use tabs for that.
+	- Mix items with and without icon
+	- Use it for actions, use buttons instead.
+</div>
+</Grid>
+

apps/docs/content/component/segmentedcontrol/ux-text.mdx

@@ -0,0 +1,7 @@
+---
+title: UX text
+global_id: segmentedcontrolux-text
+date: 2024-05-21
+private: true
+---
+