feat: add slider (#57)

feat: add slider compoment - Initial upload of german documentation and images. - Correct links to design specification after move from Invision to Sketch cloud. - Add rules. - Replace example images. - Adapt german documentation and add english translation. Closes #10 Co-authored-by: Franco Ehrat <[email protected]>
sbb-design-systems · Jun 1, 2021 · f458e0d · f458e0d
1 parent c09cd1e
commit f458e0d
Show file tree

Hide file tree

Showing 21 changed files with 218 additions and 0 deletions.
diff --git a/documentation/components/slider/images/Slider_Continuous_Horizontal.png b/documentation/components/slider/images/Slider_Continuous_Horizontal.png
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/Slider_Continuous_Vertical.png b/documentation/components/slider/images/Slider_Continuous_Vertical.png
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/Slider_Discrete_Horizontal.png b/documentation/components/slider/images/Slider_Discrete_Horizontal.png
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/Slider_Discrete_Vertical.png b/documentation/components/slider/images/Slider_Discrete_Vertical.png
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/Slider_Range.png b/documentation/components/slider/images/Slider_Range.png
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/Slider_Single.png b/documentation/components/slider/images/Slider_Single.png
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/images/[email protected] b/documentation/components/slider/images/[email protected]
diff --git a/documentation/components/slider/slider-de.md b/documentation/components/slider/slider-de.md
@@ -0,0 +1,98 @@
+## 1. Was macht die Komponente?
+* Ermöglicht eine schnelle die Auswahl eines Wertes innerhalb eines Wertebereichs.
+
+
+## 2. Wann soll die Komponente eingesetzt werden?
+* Zur schnellen Auswahl eines Wertes innerhalb eines Wertebereichs.
+
+
+## 3. Regeln
+* Das Textfeld zur Anzeige des aktuell gewählten Wertes ist optional.
+* Die Anzeige von min- und max-Werten ist optional.
+* Der Wert kann mittels Drag&Drop oder einem Klick auf den Balken geändert werden.
+
+
+## 4. Ausprägungen und Zustände
+Die Komponente hat folgende Zustände:
+* Default
+* Hover
+* Pressed
+* Focused
+* Disabled
+
+### 4.1 Kontinuierlich
+![Darstellung der Komponente Slider in der Ausprägung kontinuierlich in horizontaler Ausrichtung](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Continuous_Horizontal.png 'class: image')
+
+#### Design Spezifikation (Horizontal)
+* [Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/zxzJjKW#Inspector)
+* [Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ZOvZwn7#Inspector)
+* [Pressed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/JnaRGJ5#Inspector)
+* [Focused Thumb](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v8ajwQb#Inspector)
+* [Focused Textfield](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/nRglo80#Inspector)
+* [Disabled](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4a2705Z#Inspector)
+
+![Darstellung der Komponente Slider in der Ausprägung kontinuierlich in vertikaler Ausrichtung](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Continuous_Vertical.png 'class: image')
+
+#### Design Spezifikation (Vertikal)
+* [Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v8x9Wo4#Inspector)
+* [Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4a9OAwD#Inspector)
+* [Pressed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKorLjP#Inspector)
+* [Focused](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/Gm8O07O#Inspector)
+* [Disabled](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmnbJrm#Inspector)
+
+* Diese Ausprägung sollte nicht bei ganz grossen oder sehr kleinen Wertebereichen sondern v.a. bei unpräzisen Wertebereichen verwendet werden (z.B. "leise" - "laut", "wenig" - "viel")
+
+### 4.2 Diskret
+![Darstellung der Komponente Slider in der Ausprägung diskret in horizontaler Ausrichtung](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Discrete_Horizontal.png 'class: image')
+
+#### Design Spezifikation (Horizontal)
+* [Default with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKp0edj#Inspector)
+* [Default with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmOKAR4#Inspector)
+* [Hover Thumb with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/DP0b4Zk#Inspector)
+* [Hover Thumb with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/m1Opbq8#Inspector)
+* [Hover Line with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/jgo0VpG#Inspector)
+* [Hover Line with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/bgo4pY5#Inspector)
+* [Pressed with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dl1GrM9#Inspector)
+* [Pressed with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/WK4DOa0#Inspector)
+* [Focused Thumb with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/zxqp85r#Inspector)
+* [Focused Thumb with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/3Obegaw#Inspector)
+* [Focused Textfield with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/1KLvwja#Inspector)
+* [Focused Textfield with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/paApqDr#Inspector)
+* [Disabled with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ZOd0JLG#Inspector)
+* [Disabled with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/rblYEWP#Inspector)
+
+![Darstellung der Komponente Slider in der Ausprägung diskret in vertikaler Ausrichtung](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Discrete_Vertical.png 'class: image')
+
+#### Design Spezifikation (Vertikal)
+* [Default with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/JnMb8pe#Inspector)
+* [Default with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/JnMwkrk#Inspector)
+* [Hover Thumb with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v8xqgv8#Inspector)
+* [Hover Thumb with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/QbjvZ4Y#Inspector)
+* [Hover Line with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4a9Ggbo#Inspector)
+* [Hover Line with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/xryp1xm#Inspector)
+* [Pressed with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKoOaqa#Inspector)
+* [Pressed with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ELKb2aA#Inspector)
+* [Focused with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/Gm8bqpw#Inspector)
+* [Focused with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/jgo0vY9#Inspector)
+* [Disabled with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmnZaPR#Inspector)
+* [Disabled with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dl1GY53#Inspector)
+
+### 4.3 Wertebereich
+![Darstellung der Komponente Slider in der Ausprägung Wertebereich](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Range.png 'class: image')
+
+#### Design Spezifikation
+* [Continuous](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/QbOmjG8#Inspector)
+* [Discrete Textfield with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/VrvmPGr#Inspector)
+* [Discrete Textfield with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/YGjAzDZ#Inspector)
+* [Discrete Label with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/KvEb12A#Inspector)
+* [Discrete Label with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/wLwpdRA#Inspector)
+
+### 4.4 Einzelner Wert
+![Darstellung der Komponente Slider bei dem ein einzelner Wert in einem Wertespektrum gesetzt wird](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Single.png 'class: image')
+
+#### Design Spezifikation
+* [Default with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/qe9rLaV#Inspector)
+* [Default with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/7y5DP2b#Inspector)
+* [Hover Line with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/L0Pjp2l#Inspector)
+* [Hover Line with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ygybZpy#Inspector)
+* [Default Symbols](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/9PRAdbx#Inspector)
diff --git a/documentation/components/slider/slider-en.md b/documentation/components/slider/slider-en.md
@@ -0,0 +1,98 @@
+## 1. What does the component do? 
+* Allows a quick selection of a value within a range of values.
+
+
+## 2. When should the component be used?
+* To quickly select a value within a range of values.
+
+
+## 3. Rules
+* The textfield for displaying the currently selected value is optional.
+* The display of min and max values is optional.
+* The value can be changed using drag & drop or a click on the slider bar.
+
+
+## 4. Variants and statuses
+The component has the following statuses:
+* Default
+* Hover
+* Pressed
+* Focused
+* Disabled
+
+### 4.1 Continuous
+![Example image of the component Slider in the variant continuous in horizontal alignment](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Continuous_Horizontal.png 'class: image')
+
+#### Design specification (horizontal)
+* [Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/zxzJjKW#Inspector)
+* [Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ZOvZwn7#Inspector)
+* [Pressed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/JnaRGJ5#Inspector)
+* [Focused Thumb](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v8ajwQb#Inspector)
+* [Focused Textfield](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/nRglo80#Inspector)
+* [Disabled](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4a2705Z#Inspector)
+
+![Display of the component Slider in the variant continuous in vertical alignment](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Continuous_Vertical.png 'class: image')
+
+#### Design specification (vertical)
+* [Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v8x9Wo4#Inspector)
+* [Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4a9OAwD#Inspector)
+* [Pressed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKorLjP#Inspector)
+* [Focused](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/Gm8O07O#Inspector)
+* [Disabled](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmnbJrm#Inspector)
+
+* This variant should not be used for very large or very small value ranges, but above all for imprecise value ranges (e.g. "quiet" - "loud", "little" - "much").
+
+### 4.2 Discrete
+![Example image of the component slider in the variant discrete in horizontal alignment](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Discrete_Horizontal.png 'class: image')
+
+#### Design specification (horizontal)
+* [Default with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKp0edj#Inspector)
+* [Default with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmOKAR4#Inspector)
+* [Hover Thumb with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/DP0b4Zk#Inspector)
+* [Hover Thumb with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/m1Opbq8#Inspector)
+* [Hover Line with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/jgo0VpG#Inspector)
+* [Hover Line with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/bgo4pY5#Inspector)
+* [Pressed with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dl1GrM9#Inspector)
+* [Pressed with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/WK4DOa0#Inspector)
+* [Focused Thumb with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/zxqp85r#Inspector)
+* [Focused Thumb with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/3Obegaw#Inspector)
+* [Focused Textfield with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/1KLvwja#Inspector)
+* [Focused Textfield with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/paApqDr#Inspector)
+* [Disabled with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ZOd0JLG#Inspector)
+* [Disabled with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/rblYEWP#Inspector)
+
+![Example image of the component slider in the discrete variant in vertical alignment](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Discrete_Horizontal.png 'class: image')
+
+#### Design spezification (vertical)
+* [Default with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/JnMb8pe#Inspector)
+* [Default with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/JnMwkrk#Inspector)
+* [Hover Thumb with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v8xqgv8#Inspector)
+* [Hover Thumb with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/QbjvZ4Y#Inspector)
+* [Hover Line with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4a9Ggbo#Inspector)
+* [Hover Line with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/xryp1xm#Inspector)
+* [Pressed with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKoOaqa#Inspector)
+* [Pressed with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ELKb2aA#Inspector)
+* [Focused with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/Gm8bqpw#Inspector)
+* [Focused with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/jgo0vY9#Inspector)
+* [Disabled with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmnZaPR#Inspector)
+* [Disabled with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dl1GY53#Inspector)
+
+### 4.3 Value range
+![Example image of the component slider in the variant value range](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Range.png 'class: image')
+
+#### Design spezification
+* [Continuous](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/QbOmjG8#Inspector)
+* [Discrete Textfield with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/VrvmPGr#Inspector)
+* [Discrete Textfield with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/YGjAzDZ#Inspector)
+* [Discrete Label with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/KvEb12A#Inspector)
+* [Discrete Label with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/wLwpdRA#Inspector)
+
+### 4.4 Single value
+![Example image of the component slider where a single value is set in a value range](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/slider/images/Slider_Single.png 'class: image')
+
+#### Design spezification
+* [Default with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/qe9rLaV#Inspector)
+* [Default with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/7y5DP2b#Inspector)
+* [Hover Line with Space](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/L0Pjp2l#Inspector)
+* [Hover Line with Circle](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/ygybZpy#Inspector)
+* [Default Symbols](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/9PRAdbx#Inspector)
diff --git a/documentation/components/tree/tree-de.md b/documentation/components/tree/tree-de.md
@@ -0,0 +1,22 @@
+## 1. Was macht die Komponente?
+* Zeigt hierarchisch strukturierte Daten in einer Baumstruktur an.
+
+
+## 2. Wann soll die Komponente eingesetzt werden?
+* Zur Auswahl von Elementen in hierarchiescher Struktur.
+
+
+## 3. Regeln 
+* tbd
+
+
+## 4. Ausprägungen und Zustände
+Die Komponente hat folgende Zustände:
+* tbd
+
+### 4.1 Standard
+![Darstellung der Komponente Tree](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/tree/images/tree_default.png 'class: image')
+
+#### Design Spezifikation
+* [tbd](tbd)
+* [tbd](tbd)