@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

package/dist/collection/patterns/jobdetails.stories.js

@@ -0,0 +1,151 @@
+import { h } from '../utils/h';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../figma';
+
+import {
+  CTA as Button_CTA
+} from '../components/stzh-button/stzh-button.stories';
+
+export default {
+  title: 'Patterns/JobDetails',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      inlineStories: false,
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pattern_jobdetails'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-cspace>
+    <stzh-section>
+      {!args._hideLogo && (
+        <DocumentFragment>
+          <img src="media/logo/stzh-default.svg" height="50px" loading="lazy" alt="City of Zurich Logo" />
+          <stzh-vspace curve="regular"></stzh-vspace>
+        </DocumentFragment>
+      )}
+
+      <stzh-richtext>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
+      </stzh-richtext>
+
+      <stzh-vspace curve="large"></stzh-vspace>
+
+      <stzh-show mikro small="false">
+        <stzh-accordion>
+          <stzh-accordion-item heading="Your tasks" heading-level="2">
+            <stzh-richtext>
+              <ul>
+                <li>Lorem ipsum dolor sit amet</li>
+                <li>Lorem ipsum dolor sit amet</li>
+                <li>Lorem ipsum dolor sit amet</li>
+              </ul>
+            </stzh-richtext>
+          </stzh-accordion-item>
+          <stzh-accordion-item heading="Your bring with you" heading-level="2">
+            <stzh-richtext>
+              <ul>
+                <li>Lorem ipsum dolor sit amet</li>
+                <li>Lorem ipsum dolor sit amet</li>
+                <li>Lorem ipsum dolor sit amet</li>
+              </ul>
+            </stzh-richtext>
+          </stzh-accordion-item>
+          <stzh-accordion-item heading="We offer" heading-level="2">
+            <stzh-richtext>
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+            </stzh-richtext>
+          </stzh-accordion-item>
+          <stzh-accordion-item heading="Interested?" heading-level="2">
+            <stzh-richtext>
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <a href="example@zuerich.ch">example@zuerich.ch</a></p>
+            </stzh-richtext>
+          </stzh-accordion-item>
+        </stzh-accordion>
+      </stzh-show>
+
+      <stzh-show small>
+        <stzh-cspace>
+          <stzh-richtext>
+            <h2>Your tasks</h2>
+            <ul>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Lorem ipsum dolor sit amet</li>
+            </ul>
+          </stzh-richtext>
+          <stzh-richtext>
+            <h2>You bring with you</h2>
+            <ul>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Lorem ipsum dolor sit amet</li>
+            </ul>
+          </stzh-richtext>
+          <stzh-richtext>
+            <h2>We offer</h2>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+          </stzh-richtext>
+          <stzh-richtext>
+            <h2>Interested?</h2>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <a href="example@zuerich.ch">example@zuerich.ch</a></p>
+          </stzh-richtext>
+        </stzh-cspace>
+      </stzh-show>
+
+      <stzh-sticky disable-sticky-top>
+        <stzh-actions variant="cta">
+          {Button_CTA({ ...Button_CTA.args, label: 'Apply', slot: 'primary' })}
+        </stzh-actions>
+      </stzh-sticky>
+
+      <stzh-vspace size="small"></stzh-vspace>
+
+      {/* TODO: add Video component */}
+
+      <stzh-space size="medium" items="center">
+        <img src="media/images/patterns/jobdetails/fws.svg" loading="lazy" />
+        <img src="media/images/patterns/jobdetails/universum.svg" loading="lazy" />
+        <img src="media/images/patterns/jobdetails/praedikat-und.svg" loading="lazy" />
+        <img src="media/images/patterns/jobdetails/top-employer.svg" loading="lazy" />
+      </stzh-space>
+
+      <stzh-vspace size="xsmall"></stzh-vspace>
+
+      {/* TODO: add Scrollup / Print component */}
+    </stzh-section>
+
+    <stzh-section variant="highlight">
+      <stzh-cspace>
+        <stzh-heading level="2" with-border>More about us</stzh-heading>
+        <stzh-datalist>
+          <stzh-datalist-item href="#" value="Unsere Organisation"></stzh-datalist-item>
+        </stzh-datalist>
+      </stzh-cspace>
+    </stzh-section>
+
+    <stzh-section variant="highlight">
+      <stzh-cspace>
+        <stzh-heading level="2" with-border>The city as employer</stzh-heading>
+        <stzh-datalist>
+          <stzh-datalist-item href="#" value="Work for Zürich"></stzh-datalist-item>
+          <stzh-datalist-item href="#" value="Employment condition"></stzh-datalist-item>
+        </stzh-datalist>
+      </stzh-cspace>
+    </stzh-section>
+  </stzh-cspace>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

package/dist/collection/patterns/subpages.stories.js

@@ -11,7 +11,7 @@ export default {
     },
     design: {
       type: 'figma',
-      url: getFigmaLink('subpages'),
+      url: getFigmaLink('pattern_subpages'),
       allowFullscreen: true
     }
   },

package/dist/collection/patterns/twocolumns.stories.js

@@ -0,0 +1,46 @@
+import { h } from '../utils/h';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../figma';
+
+import { Default as Textandimage_Default } from '../components/stzh-textandimage/stzh-textandimage.stories';
+
+export default {
+  title: 'Patterns/TwoColumns',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      inlineStories: false,
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pattern_twocolumns'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-cspace>
+    <stzh-heading level="2">Lorem ipsum</stzh-heading>
+    <stzh-row span-small="6">
+      <stzh-cell>
+        <stzh-heading level="3">Lorem ipsum</stzh-heading>
+        <stzh-vspace size="xsmall"></stzh-vspace>
+        {Textandimage_Default({ ...Textandimage_Default.args, fullwidth: true })}
+      </stzh-cell>
+      <stzh-cell>
+        <stzh-vspace size="xxlarge" size-small="none"></stzh-vspace>
+        <stzh-heading level="3">Lorem ipsum</stzh-heading>
+        <stzh-vspace size="xsmall"></stzh-vspace>
+        {Textandimage_Default({ ...Textandimage_Default.args, fullwidth: true })}
+      </stzh-cell>
+    </stzh-row>
+  </stzh-cspace>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

package/dist/collection/utils/utils.js

@@ -1,15 +1,12 @@
-// IMPORTANT: Don't use this to check for a default slot when shadow DOM is not used
-// https://github.com/shoelace-style/shoelace/blob/9f7bc29b5f13eda1beb1d4f9c952894a21e13322/src/components/card/card.tsx
 // Determines whether an element has a slot. If name is specified, the function will look for a corresponding named
 // slot, otherwise it will look for a "default" slot (e.g. a non-empty text node or an element with no slot attribute).
-//
 export function hasSlot(el, name) {
   // Look for a named slot
   if (name) {
     return el.querySelector(`[slot="${name}"]`) !== null;
   }
   // Look for a default slot
-  return Array.from(el.childNodes).some(node => {
+  return Array.from(childNodes(el)).some(node => {
     if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
       return true;
     }
@@ -22,16 +19,6 @@ export function hasSlot(el, name) {
     return false;
   });
 }
-export function getSlotText(el, name) {
-  if (!name) {
-    return "";
-  }
-  const slot = el.querySelector(`[slot="${name}"]`);
-  if (slot !== null) {
-    return slot.textContent;
-  }
-  return "";
-}
 export function setPropsIfNull(element, attributes) {
   Object.keys(attributes).forEach(attribute => {
     if (element.getAttribute(attribute) === null) {
@@ -40,18 +27,52 @@ export function setPropsIfNull(element, attributes) {
   });
 }
 export function isStzhElement(element) {
-  if (!element) {
+  if (!element || element.nodeType !== 1) {
     return false;
   }
   return element.tagName.toLowerCase().indexOf('stzh-') === 0;
 }
-// Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom) and potentially wrapped in normal elements (e.g. angular component)
-export function cloneElement(elementToClone) {
+export function children(node) {
+  return childNodes(node).map((n) => n.nodeType === 1);
+}
+export function childNodes(node) {
+  const childNodes = node.childNodes;
+  // check if element is stencil element without shadow dom
+  // and then detect elements that were slotted into the element
+  if (node["s-sc"]) {
+    const result = [];
+    for (let i = 0; i < childNodes.length; i++) {
+      const slot = childNodes[i]["s-nr"];
+      if (slot) {
+        result.push(slot);
+      }
+    }
+    return result;
+  }
+  return Array.from(childNodes);
+}
+const nativeCloneNodeFn = Node.prototype.cloneNode;
+export function cloneElement(node, deep) {
+  const clonedNode = nativeCloneNodeFn.call(node, false);
+  const srcChildNodes = childNodes(node);
+  if (deep) {
+    for (let i = 0; i < srcChildNodes.length; i++) {
+      if (srcChildNodes[i].nodeType !== 2) {
+        const childClone = cloneElement(srcChildNodes[i], true);
+        clonedNode.appendChild(childClone);
+      }
+    }
+  }
+  return clonedNode;
+}
+// Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)
+// and potentially wrapped in normal elements (e.g. angular component)
+export function cloneWrappedStzhElement(elementToClone) {
   let clonedElement;
   let clonedStzhElement;
   let originalStzhElement;
   if (isStzhElement(elementToClone)) {
-    clonedElement = elementToClone.cloneNode(true);
+    clonedElement = cloneElement(elementToClone, true);
     clonedStzhElement = clonedElement;
     originalStzhElement = elementToClone;
   }
@@ -67,13 +88,13 @@ export function cloneElement(elementToClone) {
       clonedInnerElementLast = clonedInnerElementCurrent;
     }
     if (isStzhElement(originalInnerElementLast.children[0])) {
-      clonedStzhElement = originalInnerElementLast.children[0].cloneNode(true);
+      clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);
       originalStzhElement = originalInnerElementLast.children[0];
       clonedInnerElementLast.appendChild(clonedStzhElement);
     }
     else {
       // no root stzh element found, so we give up and just deep clone the root
-      clonedElement = elementToClone.cloneNode(true);
+      clonedElement = cloneElement(elementToClone, true);
     }
   }
   return [clonedElement, clonedStzhElement, originalStzhElement];