new anatomy pictures

sbb-design-systems · Dec 12, 2024 · b99ac8e · b99ac8e
1 parent 6a5078d
commit b99ac8e
Show file tree

Hide file tree

Showing 255 changed files with 204 additions and 90 deletions.
diff --git a/src/_data/lyne/components/sbbAccentButton/anatomy_de.md b/src/_data/lyne/components/sbbAccentButton/anatomy_de.md
@@ -2,7 +2,7 @@
 {%- from "src/_includes/macros/macros.njk" import imageOnGreyBackground -%}
 
 {{ imageOnGreyBackground({
-  url: '/assets/images/lyne/anatomy/anatomy_tertiary_button',
+  url: '/assets/images/lyne/anatomy/anatomy_accent-button',
   alt: 'Anatomie der Komponente',
   title: 'Anatomie der Komponente'
 }) }}

diff --git a/src/_data/lyne/components/sbbAccentButton/anatomy_en.md b/src/_data/lyne/components/sbbAccentButton/anatomy_en.md
@@ -2,7 +2,7 @@
 {%- from "src/_includes/macros/macros.njk" import imageOnGreyBackground -%}
 
 {{ imageOnGreyBackground({
-  url: '/assets/images/lyne/anatomy/anatomy_tertiary_button',
+  url: '/assets/images/lyne/anatomy/anatomy_accent-button',
   alt: 'Anatomy of the component',
   title: 'Anatomy of the component'
 }) }}

diff --git a/src/_data/lyne/components/sbbChipLabel/anatomy_de.md b/src/_data/lyne/components/sbbChipLabel/anatomy_de.md
@@ -2,7 +2,7 @@
 {%- from "src/_includes/macros/macros.njk" import imageOnGreyBackground -%}
 
 {{ imageOnGreyBackground({
-  url: '/assets/images/lyne/anatomy/anatomy_chip',
+  url: '/assets/images/lyne/anatomy/anatomy_chip_label',
   alt: 'Anatomie der Komponente',
   title: 'Anatomie der Komponente'
 }) }}
@@ -11,8 +11,7 @@
 
 |Nummer|Typ|Beschreibung|Optional|Hinweis|
 |------|---|------------|--------|-------|
-|1|Text|Label|Nein|checked|
-|2|Komponente|`sbb-icon`|Ja|Noch nicht implementiert|
+|1|Text|Label|Nein||
 
 
 {.sbb-table}

diff --git a/src/_data/lyne/components/sbbChipLabel/anatomy_en.md b/src/_data/lyne/components/sbbChipLabel/anatomy_en.md
@@ -2,7 +2,7 @@
 {%- from "src/_includes/macros/macros.njk" import imageOnGreyBackground -%}
 
 {{ imageOnGreyBackground({
-  url: '/assets/images/lyne/anatomy/anatomy_chip',
+  url: '/assets/images/lyne/anatomy/anatomy_chip_label',
   alt: 'Anatomy of the component',
   title: 'Anatomy of the component'
 }) }}
@@ -11,8 +11,7 @@
 
 |Number|Type|Description|Optional|Info|
 |------|---|------------|--------|-------|
-|1|Text|Label|No|checked|
-|2|Component|`sbb-icon`|Yes|Noch nicht implementiert|
+|1|Text|Label|No||
 
 
 {.sbb-table}

diff --git a/src/_data/lyne/components/sbbChipLabel/overview_de.md b/src/_data/lyne/components/sbbChipLabel/overview_de.md
@@ -1,14 +1,12 @@
 
 ## Was macht die Komponente?
-Ein Chip ist ein kompaktes, visuelles Element, das eine Information, Eingabe oder Aktion darstellt.
+Ein Chip-Label ist ein kompaktes Text-Element.
 
 ## Wann soll die Komponente eingesetzt werden?
 * Um kurze, prägnante Informationen anzuzeigen.
-* Um ausgewählte Informationen/Optionen in einem Form-Field darzustellen.
-* Um Interaktionen wie das Entfernen oder Auswählen einer Option zu ermöglichen.
 
 ## Regeln
-* Ein Chip soll klar und kurz beschriftet sein.
-* Das Label innerhalb des Chips darf nicht zu lang sein und ist immer einzeilig darzustellen.
+* Ein Chip-Label soll klar und kurz beschriftet sein.
+* Das Label darf nicht zu lang sein und ist immer einzeilig darzustellen.
 * Chips sollen genügend Abstand zueinander haben, um eine klare Trennung und einfache Bedienung zu ermöglichen.
 
diff --git a/src/_data/lyne/components/sbbChipLabel/overview_en.md b/src/_data/lyne/components/sbbChipLabel/overview_en.md
@@ -1,13 +1,11 @@
 
 ## What does the component do?
-A chip is a compact, visual element that represents information, input or an action.
+A Chip-Label is a compact text element.
 
 ## When should the component be used?
 * To display short, concise information.
-* To display selected information/options in a form field.
-* To enable interactions such as removing or selecting an option.
 
 ## Rules
-* A chip should be labelled clearly and briefly.
-* The label within the chip must not be too long and must always be displayed in a single line.
+* A Chip-Label should be labelled clearly and briefly.
+* The label must not be too long and must always be displayed in a single line.
 * Chips should have sufficient space between them to enable clear separation and simple operation.
diff --git a/src/_data/lyne/components/sbbDialog/anatomy_de.md b/src/_data/lyne/components/sbbDialog/anatomy_de.md
@@ -24,5 +24,4 @@
 
 {.sbb-table}
 
-</sbb-table-wrapper>
-
+</sbb-table-wrapper>
diff --git a/src/_data/lyne/components/sbbDialog/anatomy_en.md b/src/_data/lyne/components/sbbDialog/anatomy_en.md
@@ -24,5 +24,4 @@
 
 {.sbb-table}
 
-</sbb-table-wrapper>
-
+</sbb-table-wrapper>
diff --git a/src/_data/lyne/components/sbbDialog/playground.json b/src/_data/lyne/components/sbbDialog/playground.json
@@ -2,21 +2,6 @@
     "tag":"sbb-dialog",
     "content":"<sbb-action-group orientation='vertical' align-group='stretch' horizontal-from='unset' button-size='m'><sbb-secondary-button class='dialogtrigger' vairant='secondary' type='button'>mit Action-Group</sbb-secondary-button><sbb-secondary-button class='dialogtrigger' vairant='secondary' type='button'>ohne Action-Group</sbb-secondary-button></sbb-action-group><sbb-dialog id='dialog-1'><sbb-dialog-title class='dialog-title' back-button='false'>Title</sbb-dialog-title><sbb-dialog-content><p>Dialog content</p></sbb-dialog-content><sbb-dialog-actions align-group='stretch' orientation='vertical' horizontal-from='medium' size='m'><sbb-link align-self='start' icon-name='chevron-small-left-small' href='#' sbb-dialog-close=''>Link</sbb-link><sbb-button variant='secondary' sbb-dialog-close=''>Cancel</sbb-button><sbb-button variant='primary' sbb-dialog-close=''>Confirm</sbb-button></sbb-dialog-actions></sbb-dialog><sbb-dialog id='dialog-2'><sbb-dialog-title class='dialog-title' back-button='false'>Title</sbb-dialog-title><sbb-dialog-content><p>Dialog content</p></sbb-dialog-content></sbb-dialog>",
     "configuration" : [
-        {
-            "attribute":"negative",
-            "label":"negative",
-            "target":"demo-item",
-            "default":"false",
-            "mode":"boolean",
-            "options" : [{
-                "value":"false",
-                "label":"false"
-            }, 
-            {
-                "value":"true",
-                "label":"true"
-            }]
-        },
         {
             "attribute":"back-button",
             "label":"title-back-button",

diff --git a/src/_data/lyne/components/sbbFileSelector/anatomy_de.md b/src/_data/lyne/components/sbbFileSelector/anatomy_de.md
@@ -11,15 +11,11 @@
 
 |Nummer|Typ|Beschreibung|Optional|Hinweis|
 |------|---|------------|--------|-------|
-|1|Komponente|`sbb-icon`|Nein||
-|2|Komponente|`sbb-title`|Nein||
-|3|Area|Dropzone|Ja|Der File-Selector kann auf ein Button (5) reduziert werden.|
-|4|Text|Subtext|Nein||
-|5|Komponente|`sbb-secondary-button`|Nein|Datei auswählen|
-|6|Text|Label|Nein||
-|7|Komponente|`sbb-secondary-button`|Nein|Delete-Button|
-|8|Text|Dateigrösse|Nein||
-|9|Komponente|`sbb-form-error`|Nein||
+|1|Komponente|`sbb-secondary-button`|Nein|Datei auswählen|
+|2|Text|Label|Nein||
+|3|Komponente|`sbb-secondary-button`|Nein|Delete-Button|
+|4|Text|Dateigrösse|Nein||
+|5|Komponente|`sbb-form-error`|Nein||
 
 
 {.sbb-table}

diff --git a/src/_data/lyne/components/sbbFileSelector/anatomy_en.md b/src/_data/lyne/components/sbbFileSelector/anatomy_en.md
@@ -11,15 +11,11 @@
 
 |Number|Type|Description|Optional|Info|
 |------|---|------------|--------|-------|
-|1|Component|`sbb-icon`|No||
-|2|Component|`sbb-title`|No||
-|3|Area|Dropzone|Yes|Der File-Selector kann auf ein Button (5) reduziert werden.|
-|4|Text|Subtext|No||
-|5|Component|`sbb-secondary-button`|No|Datei auswählen|
-|6|Text|Label|No||
-|7|Component|`sbb-secondary-button`|No|Delete-Button|
-|8|Text|Dateigrösse|No||
-|9|Component|`sbb-form-error`|No||
+|1|Component|`sbb-secondary-button`|No|Choose file|
+|2|Text|Label|No||
+|3|Component|`sbb-secondary-button`|No|Delete button|
+|4|Text|Dateigrösse|No||
+|5|Component|`sbb-form-error`|No||
 
 
 {.sbb-table}

diff --git a/src/_data/lyne/components/sbbFileSelector/config.json b/src/_data/lyne/components/sbbFileSelector/config.json
@@ -13,7 +13,7 @@
     "showInFirstLevel": true,
     "childs": false,
     "isChildOf": false,
-    "similar":false,
+    "similar":["sbbFileSelectorDropzone"],
     "status": {
         "design": "ok",
         "code": "ok",

diff --git a/src/_data/lyne/components/sbbFileSelector/overview_de.md b/src/_data/lyne/components/sbbFileSelector/overview_de.md
@@ -10,5 +10,4 @@ Ein File-Selector ist eine Komponente, die es Nutzenden ermöglicht, Dateien von
 
 ## Regeln
 * Nutzende sollen Dateien entfernen können.
-* Der Fortschritt des Datei-Uploads kann Nutzenden angezeigt werden, insbesondere bei grösseren Dateien.
-* Der File-Selector unterstützt sowohl Drag-and-Drop als auch das Durchsuchen von Dateien über einen Button. Je nach Platzverhältnissen soll die entsprechende Variante gewählt werden.
+* Der Fortschritt des Datei-Uploads kann Nutzenden angezeigt werden, insbesondere bei grösseren Dateien.
diff --git a/src/_data/lyne/components/sbbFileSelector/overview_en.md b/src/_data/lyne/components/sbbFileSelector/overview_en.md
@@ -9,5 +9,4 @@ A file selector is a component that allows users to select and upload files from
 
 ## Rules
 * Users should be able to remove files.
-* The progress of the file upload can be displayed to users, especially for larger files.
-* The file selector supports both drag-and-drop and browsing files via a button. Depending on the available space, the appropriate variant should be selected.
+* The progress of the file upload can be displayed to users, especially for larger files.
diff --git a/src/_data/lyne/components/sbbFileSelector/playground.json b/src/_data/lyne/components/sbbFileSelector/playground.json
@@ -2,21 +2,6 @@
     "tag":"sbb-file-selector",
     "content":" <sbb-file-selector class='demo-item' variant='default' title-content='Title' multiple-mode='default' accessibility-label='Select from hard disk'></sbb-file-selector>",
     "configuration" : [
-        {
-            "attribute":"variant",
-            "label":"variant",
-            "target":"demo-item",
-            "default":"default",
-            "mode":"property",
-            "options" : [{
-                "value":"default",
-                "label":"default"
-            }, 
-            {
-                "value":"dropzone",
-                "label":"dropzone"
-            }]
-        },
         {
             "attribute":"disabled",
             "label":"disabled",

diff --git a/src/_data/lyne/components/sbbFileSelectorDropzone/anatomy_de.md b/src/_data/lyne/components/sbbFileSelectorDropzone/anatomy_de.md
@@ -0,0 +1,27 @@
+
+{%- from "src/_includes/macros/macros.njk" import imageOnGreyBackground -%}
+
+{{ imageOnGreyBackground({
+  url: '/assets/images/lyne/anatomy/anatomy_file_selector_dropzone',
+  alt: 'Anatomie der Komponente',
+  title: 'Anatomie der Komponente'
+}) }}
+
+<sbb-table-wrapper>
+
+|Nummer|Typ|Beschreibung|Optional|Hinweis|
+|------|---|------------|--------|-------|
+|1|Komponente|`sbb-icon`|Nein||
+|2|Komponente|`sbb-title`|Nein||
+|3|Area|Dropzone|Ja||
+|4|Text|Subtext|Nein||
+|5|Komponente|`sbb-secondary-button`|Nein|Datei auswählen|
+|6|Text|Label|Nein||
+|7|Komponente|`sbb-secondary-button`|Nein|Delete-Button|
+|8|Text|Dateigrösse|Nein||
+|9|Komponente|`sbb-form-error`|Nein||
+
+
+{.sbb-table}
+
+</sbb-table-wrapper>
diff --git a/src/_data/lyne/components/sbbFileSelectorDropzone/anatomy_en.md b/src/_data/lyne/components/sbbFileSelectorDropzone/anatomy_en.md
@@ -0,0 +1,27 @@
+
+{%- from "src/_includes/macros/macros.njk" import imageOnGreyBackground -%}
+
+{{ imageOnGreyBackground({
+  url: '/assets/images/lyne/anatomy/anatomy_file_selector_dropzone',
+  alt: 'Anatomy of the component',
+  title: 'Anatomy of the component'
+}) }}
+
+<sbb-table-wrapper>
+
+|Number|Type|Description|Optional|Info|
+|------|---|------------|--------|-------|
+|1|Component|`sbb-icon`|No||
+|2|Component|`sbb-title`|No||
+|3|Area|Dropzone|Yes||
+|4|Text|Subtext|No||
+|5|Component|`sbb-secondary-button`|No|Choose file|
+|6|Text|Label|No||
+|7|Component|`sbb-secondary-button`|No|Delete button|
+|8|Text|Dateigrösse|No||
+|9|Component|`sbb-form-error`|No||
+
+
+{.sbb-table}
+
+</sbb-table-wrapper>
diff --git a/src/_data/lyne/components/sbbFileSelectorDropzone/config.json b/src/_data/lyne/components/sbbFileSelectorDropzone/config.json
@@ -0,0 +1,26 @@
+{
+    "tag":"sbb-file-selector-dropzone",
+    "patternId":"sbbFileSelectorDropzone",
+    "patternDirectory":"fileselector",
+    "order": 430,
+    "category": "Form",
+    "keywords":["File input", "File uploader", "Dropzone"],
+    "hasOverview": true,
+    "hasAnatomy": true,
+    "hasStorybook": true,
+    "hasPlayground": true,
+    "hasImplementation": true,
+    "showInFirstLevel": true,
+    "childs": false,
+    "isChildOf": false,
+    "similar":["sbbFileSelector"],
+    "status": {
+        "design": "ok",
+        "code": "ok",
+        "documentation": "ok",
+        "context": { 
+            "public": true,
+            "business": true
+        }
+    }
+}
diff --git a/src/_data/lyne/components/sbbFileSelectorDropzone/implementation.js b/src/_data/lyne/components/sbbFileSelectorDropzone/implementation.js
@@ -0,0 +1,6 @@
+const fetchData = require('../../../../assets/helpers/fetchHelper');  
+
+module.exports = async function() {
+  const result = await fetchData("file-selector/file-selector-dropzone");
+  return result;
+};
diff --git a/src/_data/lyne/components/sbbFileSelectorDropzone/overview_de.md b/src/_data/lyne/components/sbbFileSelectorDropzone/overview_de.md
@@ -0,0 +1,13 @@
+
+
+## Was macht die Komponente?
+Ein File-Selector ist eine Komponente, die es Nutzenden ermöglicht, Dateien von seinem Gerät auszuwählen und hochzuladen.
+
+## Wann soll die Komponente eingesetzt werden?
+* Um Nutzenden die Möglichkeit zu geben, Dateien hochzuladen, wie z.B. Dokumente, Bilder oder Videos.
+* Um Formulare zu vervollständigen, die Dateianhänge erfordern.
+* Um Dateien für die Speicherung, Verarbeitung oder Weitergabe zu sammeln.
+
+## Regeln
+* Nutzende sollen Dateien entfernen können.
+* Der Fortschritt des Datei-Uploads kann Nutzenden angezeigt werden, insbesondere bei grösseren Dateien.
diff --git a/src/_data/lyne/components/sbbFileSelectorDropzone/overview_en.md b/src/_data/lyne/components/sbbFileSelectorDropzone/overview_en.md
@@ -0,0 +1,12 @@
+
+## What does the component do?
+A file selector is a component that allows users to select and upload files from their device.
+
+## When should the component be used?
+* To allow users to upload files, such as documents, images or videos.
+* To complete forms that require file attachments.
+* To collect files for storage, processing or sharing.
+
+## Rules
+* Users should be able to remove files.
+* The progress of the file upload can be displayed to users, especially for larger files.
diff --git a/src/_data/lyne/components/sbbFileSelectorDropzone/playground.json b/src/_data/lyne/components/sbbFileSelectorDropzone/playground.json
@@ -0,0 +1,23 @@
+{
+    "tag":"sbb-file-selector-dropzone",
+    "content":" <sbb-file-selector-dropzone class='demo-item' variant='default' title-content='Title' multiple-mode='default' accessibility-label='Select from hard disk'></sbb-file-selector-dropzone>",
+    "configuration" : [
+        {
+            "attribute":"disabled",
+            "label":"disabled",
+            "target":"demo-item",
+            "default":"false",
+            "mode":"boolean",
+            "options" : [{
+                "value":"false",
+                "label":"false"
+            },
+            {
+                "value":"true",
+                "label":"true"
+            }]
+        }
+    ]
+}
+
+
diff --git a/src/_data/lyne/components/sbbLoadingIndicator/anatomy_de.md b/src/_data/lyne/components/sbbLoadingIndicator/anatomy_de.md
@@ -11,8 +11,7 @@
 
 |Nummer|Typ|Beschreibung|Optional|Hinweis|
 |------|---|------------|--------|-------|
-|1|Animation|Variante `windwow`|Nein|Verfügbar in "Red", "Smoke" und "White". Geeignet für Overlay-Einsatz|
-|2|Animation|Variante `circle`|Nein|Verfügbar in "Red", "Smoke" und "White". Geeignet für Inline-Einsatz|
+|1|Animation||Nein|Verfügbar in "Red", "Smoke" und "White". Geeignet für Overlay-Einsatz|
 
 
 {.sbb-table}

diff --git a/src/_data/lyne/components/sbbLoadingIndicator/anatomy_en.md b/src/_data/lyne/components/sbbLoadingIndicator/anatomy_en.md
@@ -11,9 +11,7 @@
 
 |Number|Type|Description|Optional|Info|
 |------|---|------------|--------|-------|
-|1|Animation|Variante `windwow`|No|Verfügbar in "Red", "Smoke" und "White". Geeignet für Overlay-Einsatz|
-|2|Animation|Variante `circle`|No|Verfügbar in "Red", "Smoke" und "White". Geeignet für Inline-Einsatz|
-
+|1|Animation||No|Verfügbar in "Red", "Smoke" und "White". Geeignet für Overlay-Einsatz|
 
 {.sbb-table}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,5 +24,4 @@

		{.sbb-table}

		</sbb-table-wrapper>

		</sbb-table-wrapper>