hr-design-system-handlebars 1.23.3 → 1.24.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.24.0 (Tue May 16 2023)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 2211 [#638](https://github.com/mumprod/hr-design-system-handlebars/pull/638) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.23.3 (Mon May 15 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -957,6 +957,31 @@ video {
 .ds-button-icon + .ds-button-label {
   margin-left: 0.5rem;
 }
+/* -------------------------BREADCRUMB ------------------------------ */
+#breadcrumb-nav.hide-last-item-below-sm li:nth-last-child(2) > .ds-icon-container {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media (min-width: 640px) {
+
+  #breadcrumb-nav.hide-last-item-below-sm li:nth-last-child(2) > .ds-icon-container {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1382,6 +1407,9 @@ video {
 .w-16 {
   width: 4rem;
 }
+.w-2 {
+  width: 0.5rem;
+}
 .w-2\/12 {
   width: 16.666667%;
 }
@@ -2047,6 +2075,10 @@ video {
   fill: #797979;
   fill: var(--color-eventcalendar-secondary);
 }
+.fill-link {
+  fill: #006eb7;
+  fill: var(--color-link);
+}
 .fill-white {
   fill: #ffffff;
 }
@@ -2688,7 +2720,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1684170416504;
+  counter-reset: cnt1684228799204;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -2930,7 +2962,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1684170416504 1;
+  counter-increment: cnt1684228799204 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2946,7 +2978,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1684170416504);
+  content: counter(cnt1684228799204);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -4177,6 +4209,17 @@ video {
 }
 @media (min-width: 640px) {
 
+  .sm\:not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
   .sm\:static {
     position: static;
   }

package/dist/views/components/base/load_dynamic.hbs

@@ -41,4 +41,7 @@
     {{#case "components/teaser/ticker/teaser_ticker"}}
         {{> components/teaser/ticker/teaser_ticker}}
     {{/case}}
+    {{#case "components/navigation/breadcrumb/breadcrumb_items.ssi"}}
+        {{> components/navigation/breadcrumb/breadcrumb_items.ssi }}
+    {{/case}}
 {{/switch}}

package/dist/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -0,0 +1,14 @@
+<nav id="breadcrumb-nav"{{~#unless this.showBreadcrumbTitleAlways}} class="hide-last-item-below-sm"{{/unless~}}
+        role="navigation"
+        aria-label="{{loca "breadcrumb_headline"}}"
+>   <ul>
+        {{#with this.breadcrumbSsi}}
+            {{> components/base/loadSSI _templatePath="components/navigation/breadcrumb/breadcrumb_items.ssi"}}
+        {{/with}}
+        <li class="inline">
+            <h1 class="inline{{#unless this.showBreadcrumbTitleAlways}} sr-only sm:not-sr-only{{/unless}}">
+                <a href="{{_currentPageUrl}}" class="{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">{{~_currentPageTitle~}}</a>
+            </h1>
+        </li>
+    </ul>
+</nav>

package/dist/views/components/navigation/breadcrumb/breadcrumb_items.ssi.hbs

@@ -0,0 +1,8 @@
+{{~#each this.breadcrumb}}
+    <li class="inline">
+        <a href="{{this.url}}" class="{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">
+            <span>{{this.title}}</span>
+        </a>
+        <span class="ds-icon-container inline-block">{{~> components/base/image/icon _icon="arrow-right" _addClass="mx-2 w-2 h-2 text-inherit fill-link" _iconmap="icons"~}}</span>
+    </li>
+{{/each~}}

package/dist/views/components/navigation/breadcrumb/utils/breadcrumb_link_classes.hbs

@@ -0,0 +1 @@
+ds-link py-2 text-link font-copy text-xs hover:underline

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.23.3",
+    "version": "1.24.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/css/custom-components.css

@@ -281,3 +281,8 @@
 .ds-button-icon + .ds-button-label {
     @apply ml-2;
 }
+
+/* -------------------------BREADCRUMB ------------------------------ */
+#breadcrumb-nav.hide-last-item-below-sm li:nth-last-child(2) > .ds-icon-container {
+    @apply sr-only sm:not-sr-only;
+}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb.inc.json

@@ -0,0 +1,15 @@
+{
+    "breadcrumb": {
+        "breadcrumb": {
+            "showBreadcrumbTitleAlways": false,
+            "breadcrumbSsi": {
+                "breadcrumb": [
+                    {
+                        "url": "item-1",
+                        "title": "Level 1"
+                    }
+                ]
+            }
+        }
+    }
+}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_2_level.json

@@ -0,0 +1,15 @@
+{
+    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
+    "@->contentpath": "breadcrumb",
+    "@->overrides": [
+        {
+            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
+            "@->value": [
+                {
+                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
+                    "@->contentpath": "level-1"
+                }
+            ]
+        }
+    ]
+}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_3_level.json

@@ -0,0 +1,19 @@
+{
+    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
+    "@->contentpath": "breadcrumb",
+    "@->overrides": [
+        {
+            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
+            "@->value": [
+                {
+                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
+                    "@->contentpath": "level-1"
+                },
+                {
+                    "url": "panorama",
+                    "title": "Panorama"
+                }
+            ]
+        }
+    ]
+}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_4_level.json

@@ -0,0 +1,23 @@
+{
+    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
+    "@->contentpath": "breadcrumb",
+    "@->overrides": [
+        {
+            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
+            "@->value": [
+                {
+                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
+                    "@->contentpath": "level-1"
+                },
+                {
+                    "url": "sport",
+                    "title": "Sport"
+                },
+                {
+                    "url": "darmstadt98",
+                    "title": "Darmstadt 98"
+                }
+            ]
+        }
+    ]
+}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_5_level.json

@@ -0,0 +1,27 @@
+{
+    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
+    "@->contentpath": "breadcrumb",
+    "@->overrides": [
+        {
+            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
+            "@->value": [
+                {
+                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
+                    "@->contentpath": "level-1"
+                },
+                {
+                    "url": "sport",
+                    "title": "Sport"
+                },
+                {
+                    "url": "fussball",
+                    "title": "Fußball"
+                },
+                {
+                    "url": "eintracht",
+                    "title": "Eintracht Frankfurt"
+                }
+            ]
+        }
+    ]
+}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_items.inc.json

@@ -0,0 +1,18 @@
+{
+    "level-1": {
+        "url": "item-1",
+        "title": "Start"
+    },
+    "level-2": {
+        "url": "item-2",
+        "title": "Level 2"
+    },
+    "level-3": {
+        "url": "item-3",
+        "title": "Level 3"
+    },
+    "level-4": {
+        "url": "item-4",
+        "title": "Level 4"
+    }
+}

package/src/stories/views/components/base/load_dynamic.hbs

@@ -41,4 +41,7 @@
     {{#case "components/teaser/ticker/teaser_ticker"}}
         {{> components/teaser/ticker/teaser_ticker}}
     {{/case}}
+    {{#case "components/navigation/breadcrumb/breadcrumb_items.ssi"}}
+        {{> components/navigation/breadcrumb/breadcrumb_items.ssi }}
+    {{/case}}
 {{/switch}}

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -0,0 +1,14 @@
+<nav id="breadcrumb-nav"{{~#unless this.showBreadcrumbTitleAlways}} class="hide-last-item-below-sm"{{/unless~}}
+        role="navigation"
+        aria-label="{{loca "breadcrumb_headline"}}"
+>   <ul>
+        {{#with this.breadcrumbSsi}}
+            {{> components/base/loadSSI _templatePath="components/navigation/breadcrumb/breadcrumb_items.ssi"}}
+        {{/with}}
+        <li class="inline">
+            <h1 class="inline{{#unless this.showBreadcrumbTitleAlways}} sr-only sm:not-sr-only{{/unless}}">
+                <a href="{{_currentPageUrl}}" class="{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">{{~_currentPageTitle~}}</a>
+            </h1>
+        </li>
+    </ul>
+</nav>

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.mdx

@@ -0,0 +1,60 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as BreadcrumbStories from './breadcrumb.stories'
+
+<Meta of={BreadcrumbStories} />
+
+# Breadcrumb
+
+## Übersicht
+
+Die Breadcrumb Navigation wird auf jeder Seite (nur nicht auf der Homepage) unterhalb der Hauptnavigation eingebunden.
+Sie zeigt den Nutzer:innen zu jeder Zeit an wo sie sich in der Struktur gerade befinden.
+Die einzelnen Einträge der Breadcrumb sind verlinkt.
+
+<Canvas>
+    <Story of={BreadcrumbStories.breadcrumb5Level} />
+</Canvas>
+
+## Eigenschaften
+
+<ArgsTable story="Breadcrumb 2 Level" />
+
+## Varianten
+
+Je nach Verschachtelungstiefe kann eine Breadcrumb von zwei bis zu einer nahezu beliebigen Anzahl an Einträgen haben
+
+### Zwei Navigations-Ebenen
+
+<Canvas>
+    <Story of={BreadcrumbStories.breadcrumb2Level} />
+</Canvas>
+
+## Drei Navigations-Ebenen
+
+<Canvas>
+    <Story of={BreadcrumbStories.breadcrumb3Level} />
+</Canvas>
+
+## Vier Navigations-Ebenen
+
+<Canvas>
+    <Story of={BreadcrumbStories.breadcrumb4Level} />
+</Canvas>
+
+## Fünf Navigations-Ebenen
+
+<Canvas>
+    <Story of={BreadcrumbStories.breadcrumb5Level} />
+</Canvas>
+
+## Verwendung
+
+Eine Breadcrumb wird mit der Handlebar Komponente `breadcrumb` eingebunden.
+
+<Canvas>
+    <Story of={BreadcrumbStories.breadcrumb5Level} />
+</Canvas>
+
+```handlebars
+{{> components/navigation/breadcrumb/breadcrumb _currentPageUrl="URL" _currentPageTitle="Titel der aktuellen Seite"}}
+```

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,101 @@
+import breadcrumb from './breadcrumb.hbs'
+import breadcrumb2LevelData from './fixtures/breadcrumb_2_level.json'
+import breadcrumb3LevelData from './fixtures/breadcrumb_3_level.json'
+import breadcrumb4LevelData from './fixtures/breadcrumb_4_level.json'
+import breadcrumb5LevelData from './fixtures/breadcrumb_5_level.json'
+
+const Template = (args) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return breadcrumb({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Navigation/Breadcrumb',
+
+    argTypes: {
+        _currentPageUrl: {
+            description: 'URL der aktuellen Seite',
+            control: 'text',
+        },
+
+        _currentPageTitle: {
+            control: 'text',
+            description: 'Titel der aktuellen Seite',
+        },
+        breadcrumbSsi: {
+            control: 'object',
+            description: 'SSI Include String aus dem Delivery',
+            table: {
+                category: 'Delivery',
+            },
+        },
+        showBreadcrumbTitleAlways: {
+            control: 'boolean',
+            description:
+                'Hierüber wird festgelegt, ob der letzte Eintrag in der Breacrumb über alle Viewports hinweg angezeigt wird oder ob dieser mobil nicht erscheinen soll.',
+            table: {
+                category: 'Delivery',
+            },
+        },
+    },
+
+    parameters: {
+        controls: {
+            sort: 'alpha',
+        },
+    },
+    decorators: [
+        (Story) => {
+            return `
+            <div class="breadcrumb-container grid grid-page">
+                <div class="grid-cols-12 py-6 col-full sm:px-9.5 sm:col-main">  
+                    ${Story()} 
+                </div>
+            </div>`
+        },
+    ],
+}
+
+export const breadcrumb2Level = {
+    render: Template.bind({}),
+    name: 'Breadcrumb 2 Level',
+    args: {
+        _currentPageUrl: '#currentPage',
+        _currentPageTitle: 'Kurzer Titel',
+        ...breadcrumb2LevelData.breadcrumb,
+    },
+}
+
+export const breadcrumb3Level = {
+    render: Template.bind({}),
+    name: 'Breadcrumb 3 Level',
+    args: {
+        _currentPageUrl: '#currentPage',
+        _currentPageTitle:
+            'Korruptionsprozess: Verteidigung von Ex-Oberstaatsanwalt plädiert auf höchstens vier Jahre Haft',
+        ...breadcrumb3LevelData.breadcrumb,
+    },
+}
+
+export const breadcrumb4Level = {
+    render: Template.bind({}),
+    name: 'Breadcrumb 4 Level',
+    args: {
+        _currentPageUrl: '#currentPage',
+        _currentPageTitle:
+            'Darmstadt 98 bleibt trotz Enttäuschung cool: "Keinen Stift in der Hose" ',
+        ...breadcrumb4LevelData.breadcrumb,
+    },
+}
+
+export const breadcrumb5Level = {
+    render: Template.bind({}),
+    name: 'Breadcrumb 5 Level',
+    args: {
+        _currentPageUrl: '#currentPage',
+        _currentPageTitle:
+            'Verein bestätigt: Eintracht Frankfurt trennt sich im Sommer von Oliver Glasner',
+        ...breadcrumb5LevelData.breadcrumb,
+    },
+}

package/src/stories/views/components/navigation/breadcrumb/breadcrumb_items.ssi.hbs

@@ -0,0 +1,8 @@
+{{~#each this.breadcrumb}}
+    <li class="inline">
+        <a href="{{this.url}}" class="{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">
+            <span>{{this.title}}</span>
+        </a>
+        <span class="ds-icon-container inline-block">{{~> components/base/image/icon _icon="arrow-right" _addClass="mx-2 w-2 h-2 text-inherit fill-link" _iconmap="icons"~}}</span>
+    </li>
+{{/each~}}

package/src/stories/views/components/navigation/breadcrumb/fixtures/breadcrumb_2_level.json

@@ -0,0 +1 @@
+{"breadcrumb":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"}]}}}

package/src/stories/views/components/navigation/breadcrumb/fixtures/breadcrumb_3_level.json

@@ -0,0 +1 @@
+{"breadcrumb":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"},{"url":"panorama","title":"Panorama"}]}}}

package/src/stories/views/components/navigation/breadcrumb/fixtures/breadcrumb_4_level.json

@@ -0,0 +1 @@
+{"breadcrumb":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"},{"url":"sport","title":"Sport"},{"url":"darmstadt98","title":"Darmstadt 98"}]}}}

package/src/stories/views/components/navigation/breadcrumb/fixtures/breadcrumb_5_level.json

@@ -0,0 +1 @@
+{"breadcrumb":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"},{"url":"sport","title":"Sport"},{"url":"fussball","title":"Fußball"},{"url":"eintracht","title":"Eintracht Frankfurt"}]}}}

package/src/stories/views/components/navigation/breadcrumb/utils/breadcrumb_link_classes.hbs

@@ -0,0 +1 @@
+ds-link py-2 text-link font-copy text-xs hover:underline