feat: add tree (#58)

* feat: add tree component - add documentation in german and english translation - add images - add variant for select component including a tree Closes #1 Co-authored-by: Franco Ehrat <[email protected]>
sbb-design-systems · Jun 3, 2021 · cb29dd0 · cb29dd0
1 parent ef6abb1
commit cb29dd0
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 7 deletions.
diff --git a/documentation/components/select/images/Select_Grouped_Single.png b/documentation/components/select/images/Select_Grouped_Single.png
diff --git a/documentation/components/select/images/[email protected] b/documentation/components/select/images/[email protected]
diff --git a/documentation/components/select/images/[email protected] b/documentation/components/select/images/[email protected]
diff --git a/documentation/components/select/select-de.md b/documentation/components/select/select-de.md
@@ -61,6 +61,7 @@ Die Komponente hat folgende Zustände:
 
 #### Design Spezifikation
 * [Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dAgjMj#Inspector)
+* [Expanded Tree](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/m4Ye4w#Inspector)
 
 #### Code Spezifikation
 * [SBB Angular Component Library](https://sbb-angular.app.sbb.ch/business/components/select)

diff --git a/documentation/components/select/select-en.md b/documentation/components/select/select-en.md
@@ -61,6 +61,7 @@ The component has the following statuses:
 
 #### Design specification
 * [Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dAgjMj#Inspector)
+* [Expanded Tree](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/m4Ye4w#Inspector)
 
 #### Code specification
 * [SBB Angular Component Library](https://sbb-angular.app.sbb.ch/business/components/select)

diff --git a/documentation/components/tree/images/Tree_Default.png b/documentation/components/tree/images/Tree_Default.png
diff --git a/documentation/components/tree/images/[email protected] b/documentation/components/tree/images/[email protected]
diff --git a/documentation/components/tree/images/[email protected] b/documentation/components/tree/images/[email protected]
diff --git a/documentation/components/tree/images/Tree_Selectable.png b/documentation/components/tree/images/Tree_Selectable.png
diff --git a/documentation/components/tree/images/[email protected] b/documentation/components/tree/images/[email protected]
diff --git a/documentation/components/tree/images/[email protected] b/documentation/components/tree/images/[email protected]
diff --git a/documentation/components/tree/images/Tree_Showcase.png b/documentation/components/tree/images/Tree_Showcase.png
diff --git a/documentation/components/tree/images/[email protected] b/documentation/components/tree/images/[email protected]
diff --git a/documentation/components/tree/images/[email protected] b/documentation/components/tree/images/[email protected]
diff --git a/documentation/components/tree/tree-de.md b/documentation/components/tree/tree-de.md
@@ -3,20 +3,42 @@
 
 
 ## 2. Wann soll die Komponente eingesetzt werden?
-* Zur Auswahl von Elementen in hierarchiescher Struktur.
+* Zur Darstellung und Auswahl von Elementen in hierarchischer Struktur.
 
 
-## 3. Regeln 
-* tbd
+## 3. Regeln
+* Beim Einsatz eines Trees als Navigationselement ist es sinnvoll, nicht zu viele Hierarchiestufen eizusetzen (Empfehlung max. 3).
+* Beim Einsatz eines Trees zur Darstellung von Datenstrukturen (z.B. ein Dossier, analog Filebrowser) ist es abhängig vom Anwendungsfall wieviele Hierarchiestufen benötigt werden.
+* Das Icon als Ergänzung zum Text ist optional. 
 
 
 ## 4. Ausprägungen und Zustände
 Die Komponente hat folgende Zustände:
-* tbd
+* Collapsed
+* Expanded
+* Default
+* Hover
+* Selected
 
 ### 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')
+![Darstellung der Komponente Tree in der Standard Ausprägung](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)
+* [Parent Collapsed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dK9rg3#Inspector)
+* [Parent Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/zAm8y4#Inspector)
+* [Leaf Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/e20W2p#Inspector)
+* [Leaf Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v81Q8O4#Inspector)
+* [Leaf Selected](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4aE5aeD#Inspector)
+
+### 4.2 Selektierbar
+![Darstellung der Komponente Tree in der Ausprägung selektierbar](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/tree/images/Tree_Selectable.png 'class: image')
+
+#### Design Spezifikation
+* [Parent Collapsed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/YGjEkWO#Inspector)
+* [Parent Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/KvEMzK1#Inspector)
+* [Leaf Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/wLwbnym#Inspector)
+* [Leaf Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKbdKwP#Inspector)
+* [Leaf Selected](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/GmzdmkO#Inspector)
+
+## 5. Beispielanwendung
+![Darstellung eines Beispiels eines Trees](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/tree/images/Tree_Showcase.png 'class: image')
diff --git a/documentation/components/tree/tree-en.md b/documentation/components/tree/tree-en.md
@@ -0,0 +1,44 @@
+## 1. What does the component do?
+* Displays hierarchically structured data in a tree structure.
+
+
+## 2. When should the component be used?
+* To display and select elements in a hierarchical structure.
+
+
+## 3. rules
+* When using a tree as a navigation element, it makes sense not to use too many hierarchy levels (recommendation max. 3).
+* When using an tree to display data structures (e.g. a dossier, analogous to a file browser), it depends on the application how many hierarchy levels are needed.
+* The icon as a supplement to the text is optional.
+
+
+## 4. Variants and statuses
+The component has the following statuses:
+* Collapsed
+* Expanded
+* Default
+* Hover
+* Selected
+
+### 4.1 Standard
+![Example image of the tree component in the standard variant](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/tree/images/Tree_Default.png 'class: image')
+
+#### Design specification
+* [Parent Collapsed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/dK9rg3#Inspector)
+* [Parent Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/zAm8y4#Inspector)
+* [Leaf Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/e20W2p#Inspector)
+* [Leaf Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/v81Q8O4#Inspector)
+* [Leaf Selected](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/4aE5aeD#Inspector)
+
+### 4.2 Selectable
+![Exmpale image of the tree component in the selectable variant](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/tree/images/Tree_Selectable.png 'class: image')
+
+#### Design specification
+* [Parent Collapsed](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/YGjEkWO#Inspector)
+* [Parent Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/KvEMzK1#Inspector)
+* [Leaf Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/wLwbnym#Inspector)
+* [Leaf Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/eKbdKwP#Inspector)
+* [Leaf Selected](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/GmzdmkO#Inspector)
+
+## 5. Example application
+![Image of an example of a tree](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/tree/images/Tree_Showcase.png 'class: image')