feat: add additional variants for button (#59)

* feat: add button bar module and a new variant for button - Add module button bar - Add variant to component button for multiple actions Closes #4 Co-authored-by: Franco Ehrat <[email protected]>
sbb-design-systems · Jun 3, 2021 · 84d47ff · 84d47ff
1 parent cb29dd0
commit 84d47ff
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 0 deletions.
diff --git a/documentation/components/button/button-de.md b/documentation/components/button/button-de.md
@@ -82,5 +82,14 @@ Die Komponente hat folgende Zustände:
 * [On-Click](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/AOZR9R)
 * [Disabled](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/0KA7dG)
 
+* Beim Hover über einen Icon Button sollte ein [Tooltip](https://digital.sbb.ch/de/webapps/components/tooltip) verwendet werden, um die dahinterliegende Aktion klarer zu machen.
+
 #### Code Spezifikation
 * [SBB Angular Component Library](https://sbb-angular.app.sbb.ch/business/components/button)
+
+### 4.6 Mehrere Aktionen
+![Darstellung der Komponente Button bei dem mehrere Aktionen hinterlegt sind](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/button/images/Button_More_Actions.png 'class: image')
+
+* [Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/aLZ37A#Inspector)
+* [Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmnVV5v#Inspector)
+* [Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/A57mEx#Inspector)
diff --git a/documentation/components/button/button-en.md b/documentation/components/button/button-en.md
@@ -82,5 +82,14 @@ The component has the following statuses:
 * [On-Click](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/AOZR9R)
 * [Disabled](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/0KA7dG)
 
+* When hovering over an icon button, a [tooltip](https://digital.sbb.ch/en/webapps/components/tooltip) should be used to make the underlying action clearer.
+
 #### Code specification
 * [SBB Angular Component Library](https://sbb-angular.app.sbb.ch/business/components/button)
+
+### 4.6 Multiple actions
+![Image of the button component where multiple actions are available](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/button/images/Button_More_Actions.png 'class: image')
+
+* [Default](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/aLZ37A#Inspector)
+* [Hover](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/OmnVV5v#Inspector)
+* [Expanded](https://www.sketch.com/s/58b25e4c-bf9c-4f74-973f-503538fcbea2/a/A57mEx#Inspector)
diff --git a/documentation/components/button/images/Button_More_Actions.png b/documentation/components/button/images/Button_More_Actions.png
diff --git a/documentation/components/button/images/[email protected] b/documentation/components/button/images/[email protected]
diff --git a/documentation/components/button/images/[email protected] b/documentation/components/button/images/[email protected]
diff --git a/documentation/components/button/images/logo_default.png b/documentation/components/button/images/logo_default.png
diff --git a/documentation/components/button/images/[email protected] b/documentation/components/button/images/[email protected]
diff --git a/documentation/components/button/images/[email protected] b/documentation/components/button/images/[email protected]
diff --git a/documentation/modules/buttonbar/buttonbar-de.md b/documentation/modules/buttonbar/buttonbar-de.md
@@ -0,0 +1,22 @@
+## 1. Was macht das Modul?
+* Es bildet eine Leiste, wo alle Aktionen eines Anwendungsbereichs gesammelt werden.
+
+
+## 2. Wann soll das Modul eingesetzt werden?
+* Wenn in einem Anwendungsbereich mehrere Aktionen ausgeführt werden können.
+
+
+## 3. Regeln
+* Die Buttonbar sollte immer unten rechts von einem Container (z.B. Formular oder Dialog) platziert werden.
+* Die Buttons werden immer rechts innerhalb der Buttonbar platziert.
+* Die primäre Aktion wird links von den sekundären Aktionen platziert.
+* Es dürfen nicht mehr als drei [Buttons](https://digital.sbb.ch/de/webapps/components/button) platziert werden. Wenn mehr Aktionen notwendig sind, dann soll ein [Contextmenu](https://digital.sbb.ch/de/webapps/components/contextmenu) verwendet werden. Dieses wird rechts von den anderen Buttons platziert.
+
+
+## 4. Ausprägungen und Zustände
+
+### 4.1 Standard
+![Darstellung des Moduls Buttonleiste](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/button/images/Buttonbar_Default.png 'class: image')
+
+#### Design Spezifikation
+* [Default](https://www.sketch.com/s/36ab4f9f-f7f8-436e-9d7e-0f2088e52e04/a/g0o89Jz#Inspector)
diff --git a/documentation/modules/buttonbar/buttonbar-en.md b/documentation/modules/buttonbar/buttonbar-en.md
@@ -0,0 +1,22 @@
+## 1. What does the module do?
+* It forms a bar where all actions of an application area are collected.
+
+
+## 2. When should the module be used?
+* When several actions can be performed in an application area.
+
+
+## 3. Rules
+* The button bar should always be placed at the bottom right of a container (e.g. form or dialog).
+* The buttons are always placed to the right within the button bar.
+* The primary action is placed to the left of the secondary actions.
+* No more than three [Buttons](https://digital.sbb.ch/en/webapps/components/button) may be placed. If more actions are necessary, then a [Contextmenu](https://digital.sbb.ch/en/webapps/components/contextmenu) should be used. This is placed to the right of the other buttons.
+
+
+## 4. Variants and statuses
+
+### 4.1 Default
+![Display of the module buttonbar](https://raw.githubusercontent.com/sbb-design-systems/design-system-webapp-documentation/master/documentation/components/button/images/Buttonbar_Default.png 'class: image')
+
+#### Design specification
+* [Default](https://www.sketch.com/s/36ab4f9f-f7f8-436e-9d7e-0f2088e52e04/a/g0o89Jz#Inspector)
diff --git a/documentation/modules/buttonbar/images/Buttonbar_Default.png b/documentation/modules/buttonbar/images/Buttonbar_Default.png
diff --git a/documentation/modules/buttonbar/images/[email protected] b/documentation/modules/buttonbar/images/[email protected]
diff --git a/documentation/modules/buttonbar/images/[email protected] b/documentation/modules/buttonbar/images/[email protected]