@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

package/dist/collection/components/stzh-contactaddress/stzh-contactaddress.stories.js

@@ -0,0 +1,150 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Contactaddress',
+  component: 'stzh-contactaddress',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('contactaddress'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-contactaddress {...args}></stzh-contactaddress>
+);
+
+const TemplateWithImageAndAvailability = (args) => (
+  <stzh-contactaddress {...args}>
+    <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+  </stzh-contactaddress>
+);
+
+const numbers = `[
+  {
+    "type": "tel",
+    "label": "Phone",
+    "number": "+41 44 412 91 11"
+  },
+  {
+    "type": "fax",
+    "label": "Fax",
+    "number": "+41 44 412 91 11"
+  },
+  {
+    "type": "tel",
+    "label": "Service Desk",
+    "number": "+41 44 412 90 00"
+  }
+]`;
+
+const availability = `[
+  {
+    "weekday": "Montag",
+    "hours": [
+      "10.00-12.00 Uhr",
+      "13.30-17.00 Uhr"
+    ]
+  },
+  {
+    "weekday": "Dienstag",
+    "hours": [
+      "09.00-10.00 Uhr",
+      "11.00-12.00 Uhr",
+      "15:30-17:00 Uhr"
+    ]
+  },
+  {
+    "weekday": "Mittwoch",
+    "hours": [
+      "10.00-12.00 Uhr",
+      "13.30-17.00 Uhr"
+    ]
+  },
+  {
+    "weekday": "Donnerstag",
+    "hours": [
+      "09.00-10.00 Uhr",
+      "11.00-12.00 Uhr",
+      "15:30-17:00 Uhr"
+    ]
+  }
+]`;
+
+export const OrganizationWithPobox = Template.bind({});
+OrganizationWithPobox.args = {
+  'with-border': true,
+  type: 'Organization',
+  heading: 'City Zürich<br> Organisation and IT',
+  street: 'Musterstrasse 1',
+  'postal-code': '8000',
+  location: 'Zürich',
+  'pobox-heading': 'Postadresse:',
+  'pobox-title': 'Postfach',
+  'pobox-postal-code': '8022',
+  'pobox-location': 'Zürich',
+  numbers
+};
+
+export const FurtherContactPerson = Template.bind({});
+FurtherContactPerson.args = {
+  'with-border': true,
+  heading: 'Further Contact',
+  type: 'Person',
+  name: 'Hans Muster',
+  street: 'Musterstrasse 12',
+  'postal-code': '9000',
+  'location': 'Muster'
+}
+
+export const FurtherContactOrganization = Template.bind({});
+FurtherContactOrganization.args = {
+  'with-border': true,
+  heading: 'Further Contact',
+  type: 'Organization',
+  street: 'Musterstrasse 12',
+  'postal-code': '9000',
+  'location': 'Muster'
+}
+
+export const MinimalOrganization = Template.bind({});
+MinimalOrganization.args = {
+  'with-border': true,
+  type: 'Organization',
+  heading: 'City Zürich<br> Organisation and IT',
+  street: 'Musterstrasse 12',
+  'postal-code': '8000',
+  location: 'Zürich',
+  numbers: `[
+    {
+      "type": "tel",
+      "label": "Phone",
+      "number": "+41 44 412 91 11"
+    }
+  ]`
+}
+
+export const WithImageAndAvailability = TemplateWithImageAndAvailability.bind({});
+WithImageAndAvailability.args = {
+  type: 'Organization',
+  'main-heading': 'City Zürich Organisation',
+  street: 'Musterstrasse 1',
+  'postal-code': '8000',
+  location: 'Zürich',
+  numbers,
+  'availability-title': 'Erreichbarkeit',
+  availability
+}

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -338,11 +341,37 @@
     margin-bottom: var(--stzh-space-large);
   }
 }
-:host ::slotted(stzh-figure) {
+:host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
   margin-top: var(--stzh-space-xxlarge);
   margin-bottom: var(--stzh-space-xxlarge);
 }
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
 :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -351,6 +380,7 @@
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -359,6 +389,7 @@
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -367,6 +398,7 @@
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -375,6 +407,7 @@
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -410,6 +443,19 @@
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
+:host ::slotted(stzh-anchornav) {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-anchornav) {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-anchornav) {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
 :host ::slotted(stzh-actions) {
   margin-top: var(--stzh-space-xxlarge);
 }
@@ -423,7 +469,12 @@
 :host ::slotted(stzh-fieldset)[legend] {
   margin-top: var(--stzh-space-xxlarge);
 }
+:host ::slotted(stzh-heading[level="4"] + stzh-datalist),
+:host ::slotted(stzh-heading[curve=h4] + stzh-datalist) {
+  margin-top: 0;
+}
 :host ::slotted(:first-child),
+:host ::slotted(:first-child[legend]),
 :host ::slotted([no-cspace-top]) {
   margin-top: 0;
 }