@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

package/dist/collection/components/stzh-card-superteaser/stzh-card-superteaser.stories.js

@@ -0,0 +1,222 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-card-superteaser';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-card-superteaser></stzh-card-superteaser>
+`;
+
+const TEMPLATE_WITH_IMAGE = `
+<stzh-card-superteaser>
+  <stzh-ratio ratio="2:1" slot="image">
+    <img src="media/images/teaser_01.png" />
+  </stzh-ratio>
+</stzh-card-superteaser>
+`;
+
+const TEMPLATE_WITH_PUBLICATION = `
+<stzh-card-superteaser>
+  <img slot="image" src="media/images/publication_01.jpeg" />
+</stzh-card-superteaser>
+`;
+
+export default {
+  title: 'Components/CardSuperteaser',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'padded',
+    actions: {
+      handles: ['stzhClick']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('card-superteaser'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withActions,
+    withDesign
+  ]
+};
+
+export const Media = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Medienmitteilung",
+    "href": "#",
+    "dateline": "23. November 2023",
+    "heading": "Lorem ipsum dolor sit amet",
+    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+  }
+}
+
+export const CityCounsilResolution = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Stadtratsbeschluss",
+    "topic": "Lorem ipsum",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+    "meta": ["Lorem ipsum", "21.12.2022"]
+  }
+}
+
+export const Service = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "style": "--service-background-color: var(--stzh-color-violet40)",
+    "service": "Lorem ipsum",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+  }
+}
+
+export const Website = {
+  render: (args) => story(args, TEMPLATE_WITH_IMAGE),
+  args: {
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
+  }
+}
+
+export const Document = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Dokument",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "download": "",
+    "download-meta": ["Lorem", "Ipsum", "Dolor", "Amet", "PDF", "15 MB"]
+  }
+}
+
+export const JobOffer = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Job",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "meta": ["Lorem ipsum", "12.02.2022"]
+  }
+}
+
+export const Event = {
+  render: (args) => story(args, TEMPLATE_WITH_IMAGE),
+  args: {
+    "event-date-start": "2022-01-12T15:30:00.000Z",
+    "event-date-end": "2022-01-12T16:30:00.000Z",
+    "event-location": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "tag": "Veranstaltung",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
+  }
+}
+
+export const Publication = {
+  render: (args) => story(args, TEMPLATE_WITH_PUBLICATION),
+  args: {
+    "tag": "Publikation",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "image-position": "right",
+    "meta": ["Lorem", "Ipsum", "Dolor", "Amet", "Lorem", "February 2024", "PDF"]
+  }
+}
+
+export const PublicationStatistics = {
+  render: (args) => story(args, TEMPLATE_WITH_PUBLICATION),
+  args: {
+    "tag": "Publikation",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
+    "image-position": "right",
+    "meta": ["Lorem ipsum", "22.06.2023"]
+  }
+}
+
+export const OfficialCollection = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Amtliche Sammlung",
+    "topic": "Lorem ipsum",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+    "meta": ["Lorem ipsum: 21.12.2022", "Lorem ipsum: 21.12.2022"]
+  }
+}
+
+export const BusinessReport = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Geschäftsbericht",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "download": "",
+    "download-meta": ["Lorem", "Ipsum", "PDF", "15 MB"]
+  }
+}
+
+export const Gallery = {
+  render: (args) => story(args, TEMPLATE_WITH_PUBLICATION),
+  args: {
+    "tag": "Bildergalerie",
+    "topic": "1948.11.14",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "meta": ["Lorem ipsum dolor sit amet, consetetur sadipscing elitr."],
+    "image-position": "right"
+  }
+}
+
+export const FormsAndInformationSheets = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Formulare & Merkblätter",
+    "heading": "Lorem ipsum dolor sit amet",
+    "datalist-items": [
+      {
+        "icon": "file",
+        "iconPosition": "left",
+        "value": "Lorem ipsum dolor sit amet (1 MB)",
+        "href": "#"
+      },
+      {
+        "icon": "file",
+        "iconPosition": "left",
+        "value": "Lorem ipsum dolor sit amet (1 MB)",
+        "href": "#"
+      },
+      {
+        "icon": "file",
+        "iconPosition": "left",
+        "value": "Lorem ipsum dolor sit amet (1 MB)",
+        "href": "#"
+      }
+    ]
+  }
+}
+
+export const PracticePool = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    "tag": "Praxispool",
+    "href": "#",
+    "heading": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
+    "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
+    "meta": ["Lorem, Ipsum, Dolor", "Ipsum"]
+  }
+}

package/dist/collection/components/stzh-cardlist/stzh-cardlist.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -294,16 +297,16 @@
   }
 }
 .stzh-cardlist--layout-teasers .stzh-cardlist__cards {
-  row-gap: var(--stzh-space-xxlarge);
+  row-gap: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 900px) {
   .stzh-cardlist--layout-teasers .stzh-cardlist__cards {
-    row-gap: var(--stzh-space-xxxlarge);
+    row-gap: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-cardlist--layout-teasers .stzh-cardlist__cards {
-    row-gap: var(--stzh-space-xxxxlarge);
+    row-gap: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 600px) {
@@ -316,6 +319,11 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-cardlist--layout-teasers .stzh-cardlist__cards {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 .stzh-cardlist--layout-searchresults .stzh-cardlist__cards {
   gap: var(--stzh-space-xlarge);
 }

package/dist/collection/components/stzh-carousel/stzh-carousel.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-cell/stzh-cell.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-chart/stzh-chart.css

@@ -3,7 +3,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-checkbox/stzh-checkbox.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -164,6 +167,7 @@
 }
 
 .stzh-checkbox {
+  display: grid;
   /* Hover / Focus / Checked */
   /* Invalid */
   /* Disabled */

package/dist/collection/components/stzh-checkboxgroup/stzh-checkboxgroup.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-chip/stzh-chip.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -157,13 +160,17 @@
 }
 
 :host {
-  --color: var(--stzh-chip-color, var(--stzh-color-primary70));
+  --font-size: var(--stzh-font-micro-font-size);
+  --line-height: var(--stzh-font-micro-text-line-height);
+  --letter-spacing: normal;
   --height: 2rem;
+  --outer-height: 2.5rem;
   --padding-top: 0;
   --padding-bottom: 0;
-  --padding-left: var(--stzh-space-medium);
-  --padding-right: var(--stzh-space-medium);
+  --padding-left: var(--stzh-space-small);
+  --padding-right: var(--stzh-space-small);
   --border-radius: 1rem;
+  --color: var(--stzh-chip-color, var(--stzh-color-primary70));
   --remove-color: var(--color);
   --remove-border-radius: 1.5rem;
   --background-color: var(--stzh-chip-background-color, var(--stzh-color-secondary30));
@@ -172,7 +179,6 @@
   --icon-gap: var(--stzh-space-xsmall);
   --counter-color: var(--color);
   --counter-gap: var(--stzh-space-xsmall);
-  --outer-height: 2.5rem;
   --hover-color: var(--stzh-chip-hover-color, var(--stzh-color-primary70));
   --hover-background-color: var(--stzh-chip-hover-background-color, var(--stzh-color-secondary40));
   --hover-remove-color: var(--hover-color);
@@ -193,18 +199,6 @@
     --hover-remove-background-color: Canvas;
   }
 }
-:host[size=large] {
-  --height: 2.5rem;
-  --border-radius: 1.25rem;
-  --padding-left: var(--stzh-space-xlarge);
-  --padding-right: var(--stzh-space-xlarge);
-}
-:host[size=small] {
-  --height: 1.5rem;
-  --border-radius: 0.75rem;
-  --padding-left: var(--stzh-space-small);
-  --padding-right: var(--stzh-space-small);
-}
 :host[variant=input] {
   --background-color: var(--stzh-color-primary10);
   --hover-color: var(--stzh-color-primary90);
@@ -281,7 +275,7 @@
   --hover-counter-color: var(--counter-color);
 }
 :host[disabled]:not([disabled=false]) {
-  --color: var(--stzh-chip-disabled-color, var(--stzh-color-grey70));
+  --color: var(--stzh-chip-disabled-color, var(--stzh-color-grey80));
   --background-color: var(--stzh-chip-disabled-background-color, var(--stzh-color-grey20));
   --remove-color: var(--color);
   --icon-color: var(--color);
@@ -297,9 +291,177 @@
   --background-color: var(--stzh-color-grey10);
 }
 
+:host(:where([size="small"])) {
+  --font-size: var(--stzh-font-nano-font-size);
+  --line-height: var(--stzh-font-nano-text-line-height);
+  --letter-spacing: normal;
+  --height: 1.5rem;
+  --border-radius: 0.75rem;
+  --padding-left: var(--stzh-space-xsmall);
+  --padding-right: var(--stzh-space-xsmall);
+}
+
+:host(:where([size="large"])) {
+  --height: 2.5rem;
+  --border-radius: 1.25rem;
+  --padding-left: var(--stzh-space-medium);
+  --padding-right: var(--stzh-space-medium);
+}
+
+@media screen and (min-width: 600px) {
+  :host(:where([size-small="default"])) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-small);
+    --border-radius: 1rem;
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 900px) {
+  :host(:where([size-small="default"])) {
+    --outer-height: auto;
+  }
+}
+@media screen and (min-width: 600px) {
+  :host(:where([size-small="small"])) {
+    --font-size: var(--stzh-font-nano-font-size);
+    --line-height: var(--stzh-font-nano-text-line-height);
+    --letter-spacing: normal;
+    --height: 1.5rem;
+    --border-radius: 0.75rem;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 600px) {
+  :host(:where([size-small="large"])) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 900px) {
+  :host(:where([size-medium="default"])) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-small);
+    --border-radius: 1rem;
+  }
+}
+@media screen and (min-width: 900px) and (min-width: 900px) {
+  :host(:where([size-medium="default"])) {
+    --outer-height: auto;
+  }
+}
+@media screen and (min-width: 900px) {
+  :host(:where([size-medium="small"])) {
+    --font-size: var(--stzh-font-nano-font-size);
+    --line-height: var(--stzh-font-nano-text-line-height);
+    --letter-spacing: normal;
+    --height: 1.5rem;
+    --border-radius: 0.75rem;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 900px) {
+  :host(:where([size-medium="large"])) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host(:where([size-large="default"])) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-small);
+    --border-radius: 1rem;
+  }
+}
+@media screen and (min-width: 1260px) and (min-width: 900px) {
+  :host(:where([size-large="default"])) {
+    --outer-height: auto;
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host(:where([size-large="small"])) {
+    --font-size: var(--stzh-font-nano-font-size);
+    --line-height: var(--stzh-font-nano-text-line-height);
+    --letter-spacing: normal;
+    --height: 1.5rem;
+    --border-radius: 0.75rem;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host(:where([size-large="large"])) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1600px) {
+  :host(:where([size-ultra="default"])) {
+    --font-size: var(--stzh-font-micro-font-size);
+    --line-height: var(--stzh-font-micro-text-line-height);
+    --letter-spacing: normal;
+    --height: 2rem;
+    --outer-height: 2.5rem;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --padding-left: var(--stzh-space-small);
+    --padding-right: var(--stzh-space-small);
+    --border-radius: 1rem;
+  }
+}
+@media screen and (min-width: 1600px) and (min-width: 900px) {
+  :host(:where([size-ultra="default"])) {
+    --outer-height: auto;
+  }
+}
+@media screen and (min-width: 1600px) {
+  :host(:where([size-ultra="small"])) {
+    --font-size: var(--stzh-font-nano-font-size);
+    --line-height: var(--stzh-font-nano-text-line-height);
+    --letter-spacing: normal;
+    --height: 1.5rem;
+    --border-radius: 0.75rem;
+    --padding-left: var(--stzh-space-xsmall);
+    --padding-right: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1600px) {
+  :host(:where([size-ultra="large"])) {
+    --height: 2.5rem;
+    --border-radius: 1.25rem;
+    --padding-left: var(--stzh-space-medium);
+    --padding-right: var(--stzh-space-medium);
+  }
+}
 .stzh-chip {
   position: relative;
-  /* Size */
   /* Removeable */
   /* Disabled */
 }
@@ -315,8 +477,9 @@
   position: absolute;
 }
 .stzh-chip__button {
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
   min-height: var(--outer-height);
   font-family: inherit;
   -webkit-appearance: none;
@@ -407,10 +570,6 @@
 .stzh-chip__button:hover .stzh-chip__icon-wrapper, .stzh-chip__remove:hover + .stzh-chip__button .stzh-chip__icon-wrapper {
   color: var(--hover-icon-color);
 }
-.stzh-chip--size-small .stzh-chip__button {
-  font-size: var(--stzh-font-nano-font-size);
-  line-height: var(--stzh-font-nano-text-line-height);
-}
 .stzh-chip--is-removable .stzh-chip__button-inner {
   padding-right: calc(var(--height) + var(--stzh-space-xxsmall));
 }