fixed lyne demo bugs

sbb-design-systems · Oct 6, 2023 · a62a239 · a62a239
1 parent cedb5d9
commit a62a239
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "dependencies": {
         "@11ty/eleventy-fetch": "^4.0.0",
         "@kevingimbel/eleventy-plugin-mermaid": "^2.1.0",
-        "@sbb-esta/lyne-components": "0.40.22",
+        "@sbb-esta/lyne-components": "0.41.3",
         "copyfiles": "^2.4.1",
         "eleventy-plugin-i18n": "^0.1.3",
         "eleventy-sass": "^2.2.1",

diff --git a/src/_data/lyne/actiongroup.json b/src/_data/lyne/actiongroup.json
@@ -2,26 +2,8 @@
         "label":"Action-Group",
         "id":"sbb-action-group",
         "link": "https://lyne-storybook.app.sbb.ch/?path=/docs/components-sbb-action-group--docs#stories",
-        "tag":"<sbb-action-group class='demo-item' orientation='vertical'><sbb-button variant='secondary'>Action 1</sbb-button><sbb-button variant='secondary'>Action 2</sbb-button><sbb-link align-self='end' icon-name='chevron-small-left-small' href='https://github.com/lyne-design-system/lyne-components'>Action 3</sbb-link></sbb-action-group>",
+        "tag":"<div class='full-width-wrapper'><sbb-action-group class='demo-item' orientation='vertical'><sbb-button variant='secondary'>Action 1</sbb-button><sbb-button variant='secondary'>Action 2</sbb-button><sbb-button variant='primary'>Action 3</sbb-button></sbb-action-group></div>",
         "configuration" : [
-            {
-                "id":"align-group",
-                "target":"demo-item",
-                "default":"left",
-                "mode":"property",
-                "radios" : [{
-                    "value":"left",
-                    "id":"left"
-                }, 
-                {
-                    "value":"center",
-                    "id":"center"
-                },
-                {
-                    "value":"right",
-                    "id":"right"
-                }]
-            },
             {
                 "id":"button-size",
                 "target":"demo-item",
@@ -37,28 +19,40 @@
                 }]
             },
             {
-                "id":"orientation",
+                "id":"align-group",
                 "target":"demo-item",
-                "default":"horizontal",
+                "default":"start",
                 "mode":"property",
                 "radios" : [{
-                    "value":"horizontal",
-                    "id":"horizontal"
+                    "value":"start",
+                    "id":"left"
                 }, 
                 {
-                    "value":"vertical",
-                    "id":"vertical"
+                    "value":"center",
+                    "id":"center"
+                },
+                {
+                    "value":"end",
+                    "id":"right"
+                },
+                {
+                    "value":"stretch",
+                    "id":"stretch"
                 }]
             },
             {
                 "id":"horizontal-from",
                 "target":"demo-item",
-                "default":"zero",
+                "default":"medium",
                 "mode":"property",
                 "radios" : [{
+                    "value":"",
+                    "id":"no-horizontal-distribution"
+                },
+                {
                     "value":"zero",
                     "id":"zero"
-                }, 
+                },
                 {
                     "value":"micro",
                     "id":"micro"

diff --git a/src/_data/lyne/formfield.json b/src/_data/lyne/formfield.json
@@ -76,20 +76,6 @@
                 "id":"l"
             }]
         },
-        {
-            "id":"width",
-            "target":"demo-item",
-            "default":"default",
-            "mode":"property",
-            "radios" : [{
-                "value":"default",
-                "id":"default"
-            }, 
-            {
-                "value":"collapse",
-                "id":"collapse"
-            }]
-        },
         {
             "id":"optional",
             "target":"demo-item",
@@ -118,23 +104,7 @@
                 "id":"true"
             }
             ]
-        },
-        {
-            "id":"error-space",
-            "target":"demo-item",
-            "default":"none",
-            "mode":"property",
-            "radios" : [{
-                "value":"none",
-                "id":"none"
-            }, 
-            {
-                "value":"reserve",
-                "id":"reserve"
-            }]
         }
-
-
     ]
 }
 

diff --git a/src/_data/lyne/icon.json b/src/_data/lyne/icon.json
@@ -37,12 +37,17 @@
         },
         {
             "id":"style",
+            "target":"demo-item",
             "default":"color: var(--sbb-color-black-default)",
             "mode":"property",
             "radios" : [{
                 "value":"color: var(--sbb-color-black-default)",
                 "id":"black"
             }, 
+            {
+                "value":"color: var(--sbb-color-red-default)",
+                "id":"red"
+            },
             {
                 "value":"color: var(--sbb-color-metal-default)",
                 "id":"metal"

diff --git a/src/_data/lyne/timeinput.json b/src/_data/lyne/timeinput.json
@@ -2,7 +2,8 @@
     "label":"Form-Field",
     "id":"sbb-form-field",
     "link": "https://lyne-storybook.app.sbb.ch/iframe.html?viewMode=docs&id=components-form-elements-sbb-time-input--docs#stories",
-    "tag":"<sbb-form-field class='demo-item' id='sbb-form-field' borderless='false' floating-label='fasle' disabled='false' optional='false' size='m' width='default' error-space='reserve' label='Label' size='m' width='default'><sbb-time-input value='08:00' readonly='false' form='form'></sbb-time-input><sbb-form-error class='error' slot='error'>This is a required field.</sbb-form-error><sbb-icon class='prefix' slot='prefix' name='pie-small'></sbb-icon><sbb-icon class='suffix' slot='suffix' name='pie-small'></sbb-icon></sbb-form-field>",
+    "tag":"<sbb-form-field class='demo-item' size='m' label='Label' width='collapse'></sbb-time-input><input id='input-id' value='12:00'><sbb-form-error class='error' slot='error'>This is a required field.</sbb-form-error><sbb-icon class='prefix' slot='prefix' name='pie-small'></sbb-icon><sbb-icon class='suffix' slot='suffix' name='pie-small'></sbb-icon></sbb-icon></sbb-form-field>",
+
     "configuration" : [
         {
             "id":"prefix",

diff --git a/src/_data/translations.js b/src/_data/translations.js
@@ -142,6 +142,7 @@ module.exports = {
       "never": "Never",
       "no-protective-room": "No protective room",
       "none": "No",
+      "no-horizontal-distribution": "No horizontal distribution",
       "optional": "Optional",
       "orientation": "Orientation",
       "other": "Other",
@@ -155,6 +156,7 @@ module.exports = {
       "radio": "Radiobutton",
       "radiocheck": "Selection-Type",
       "readonly": "Read only",
+      "red": "Red",
       "reserve": "Yes",
       "right": "Right",
       "ratio-1-1": "1-1",
@@ -176,6 +178,7 @@ module.exports = {
       "sky": "Sky",
       "small": "Small",
       "start": "At the beginning",
+      "stretch": "Distributed / Stretched",
       "style": "Color",
       "subtext": "Subtext",
       "suffix": "Suffix",
@@ -288,7 +291,7 @@ module.exports = {
       "hide-close-button": "Close Button",
       "himcus": "HIM-CUS Icon",
       "horizontal": "Horizontal",
-      "horizontal-from": "Horizontal ab",
+      "horizontal-from": "Horizontale Darstellung ab",
       "href": "Link",
       "icon": "Icon",
       "icon-large": "KOM Icon, large",
@@ -324,6 +327,7 @@ module.exports = {
       "never": "Nie",
       "no-protective-room": "Kein Schutzraum",
       "none": "Nein",
+      "no-horizontal-distribution": "Keine horizontale Verteilung",
       "optional": "Optional",
       "orientation": "Orientierung",
       "other": "Anderes",
@@ -337,6 +341,7 @@ module.exports = {
       "radio": "Radiobutton",
       "radiocheck": "Selection-Typ",
       "readonly": "Read only",
+      "red": "Rot",
       "reserve": "Ja",
       "right": "Rechts",
       "ratio-1-1": "1-1",
@@ -358,6 +363,7 @@ module.exports = {
       "sky": "Sky",
       "small": "Small",
       "start": "Am Anfang",
+      "stretch": "Verteilt / Stretched",
       "style": "Farbe",
       "subtext": "Subtext",
       "suffix": "Suffix",

diff --git a/src/_includes/macros/macros.njk b/src/_includes/macros/macros.njk
@@ -78,8 +78,8 @@
                 </sbb-expansion-panel-content>
             </sbb-expansion-panel>
         </sbb-accordion>
-        <sbb-action-group id="more-buttons" align-group="stretch" orientation="vertical" horizontal-from="unset" button-size="m">
-            <sbb-button variant="secondary" size="m" icon-name="plus-small" href="{{ pattern.link }}" target="_blank">{{ params.translations["more"] }}</sbb-button>
+        <sbb-action-group id="more-buttons" align-group="stretch" orientation="vertical" horizontal-from="unset" button-size="l">
+            <sbb-button variant="secondary" icon-name="plus-small" href="{{ pattern.link }}" target="_blank">{{ params.translations["more"] }}</sbb-button>
         </sbb-action-group>
     </div>
 </div>

diff --git a/src/assets/css/_content.scss b/src/assets/css/_content.scss
@@ -305,7 +305,7 @@ table {
     }
 }
 #more-buttons {
-    margin-top: var(--sbb-spacing-fixed-4x);
+    margin-top: var(--sbb-spacing-fixed-8x);
 }
 
 .badge-wrapper {
@@ -332,4 +332,7 @@ h3 {
 .error-divider {
     margin-top: var(--sbb-spacing-fixed-20x);
     margin-bottom: var(--sbb-spacing-fixed-18x);
+}
+.full-width-wrapper {
+    width: 100%;
 }
diff --git a/src/assets/images/lyne/overview/tab-group.webp b/src/assets/images/lyne/overview/tab-group.webp
diff --git a/src/assets/images/lyne/overview/tab.webp b/src/assets/images/lyne/overview/tab.webp