From 8ae1b4c45a0f2958f41a0125a0cc993359825796 Mon Sep 17 00:00:00 2001
From: Conny Andersson <44571006+conandx@users.noreply.github.com>
Date: Tue, 21 May 2024 11:27:31 +0200
Subject: [PATCH] First version of segmented control (#1381)

---
 .../segmentedcontrol/accessibility.mdx        |  5 ++
 .../component/segmentedcontrol/code.mdx       |  5 ++
 .../component/segmentedcontrol/design.mdx     |  7 +++
 .../component/segmentedcontrol/index.mdx      | 61 +++++++++++++++++++
 .../component/segmentedcontrol/ux-text.mdx    |  7 +++
 5 files changed, 85 insertions(+)
 create mode 100644 apps/docs/content/component/segmentedcontrol/accessibility.mdx
 create mode 100644 apps/docs/content/component/segmentedcontrol/code.mdx
 create mode 100644 apps/docs/content/component/segmentedcontrol/design.mdx
 create mode 100644 apps/docs/content/component/segmentedcontrol/index.mdx
 create mode 100644 apps/docs/content/component/segmentedcontrol/ux-text.mdx

diff --git a/apps/docs/content/component/segmentedcontrol/accessibility.mdx b/apps/docs/content/component/segmentedcontrol/accessibility.mdx
new file mode 100644
index 0000000000..c2afdbad04
--- /dev/null
+++ b/apps/docs/content/component/segmentedcontrol/accessibility.mdx
@@ -0,0 +1,5 @@
+---
+title: Accessibility
+global_id: segmentedcontrolaccessibility
+date: 2024-05-21
+---
diff --git a/apps/docs/content/component/segmentedcontrol/code.mdx b/apps/docs/content/component/segmentedcontrol/code.mdx
new file mode 100644
index 0000000000..1be40043ec
--- /dev/null
+++ b/apps/docs/content/component/segmentedcontrol/code.mdx
@@ -0,0 +1,5 @@
+---
+title: Code
+global_id: segmentedcontrolcode
+date: 2024-05-21
+---
diff --git a/apps/docs/content/component/segmentedcontrol/design.mdx b/apps/docs/content/component/segmentedcontrol/design.mdx
new file mode 100644
index 0000000000..b90bf4ad8e
--- /dev/null
+++ b/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" />
\ No newline at end of file
diff --git a/apps/docs/content/component/segmentedcontrol/index.mdx b/apps/docs/content/component/segmentedcontrol/index.mdx
new file mode 100644
index 0000000000..e6bac42de8
--- /dev/null
+++ b/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>
+
diff --git a/apps/docs/content/component/segmentedcontrol/ux-text.mdx b/apps/docs/content/component/segmentedcontrol/ux-text.mdx
new file mode 100644
index 0000000000..2a8d4dad33
--- /dev/null
+++ b/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
+---
+