npm - @oiz/stzh-components - Versions diffs - 2.2.0 → 2.3.0-alpha2 - Mend

@oiz/stzh-components 2.2.0 → 2.3.0-alpha2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (828) hide show

package/dist/collection/components/stzh-vspace/stzh-vspace.js CHANGED Viewed

@@ -11,6 +11,7 @@ export class StzhVspace {
     this.sizeLarge = "inherit";
     this.sizeUltra = "inherit";
     this.justify = "start";
+    this.items = "start";
     this.around = false;
     this.border = "none";
   }
@@ -18,11 +19,11 @@ export class StzhVspace {
     return (h(Host, null, h("div", { class: {
         "stzh-vspace": true,
         [`stzh-vspace--justify-${this.justify}`]: !!this.justify,
-        [`stzh-vspace--border-${this.border}`]: !!this.border
+        [`stzh-vspace--items-${this.items}`]: !!this.items
       } }, h("slot", null))));
   }
   static get is() { return "stzh-vspace"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["stzh-vspace.scss"]
@@ -196,6 +197,29 @@ export class StzhVspace {
         "reflect": false,
         "defaultValue": "\"start\""
       },
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout.Items",
+          "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Control how cells items are positioned along a container's cross axis"
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "\"start\""
+      },
       "around": {
         "type": "boolean",
         "mutable": false,
@@ -211,15 +235,15 @@ export class StzhVspace {
           "text": "Apply spacing to slotted elements"
         },
         "attribute": "around",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "border": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"none\" | \"top\" | \"bottom\"",
-          "resolved": "\"bottom\" | \"none\" | \"top\"",
+          "original": "\"none\" | \"top\" | \"bottom\" | \"top-bottom\"",
+          "resolved": "\"bottom\" | \"none\" | \"top\" | \"top-bottom\"",
           "references": {}
         },
         "required": false,
@@ -229,7 +253,7 @@ export class StzhVspace {
           "text": "Add border"
         },
         "attribute": "border",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"none\""
       }
     };

package/dist/collection/pages/egov.stories.js CHANGED Viewed

@@ -10,8 +10,8 @@ export default {
   }
 };
-const Template = (args) => (
-  <div>
+const Base = (args) => (
+  <div class="stzh-theme-*"> { /* optinally use theme class on <html> class for each department (see themes documentation) */ }
     <stzh-visuallyhidden>
       <h1>Navigation</h1>
       <h2>Skiplinks</h2>
@@ -65,199 +65,207 @@ const Template = (args) => (
       </stzh-popover>
     </stzh-header>
-    <stzh-vspace curve="large"></stzh-vspace>
     <stzh-section id="anchorContent">
+      <stzh-vspace curve="large"></stzh-vspace>
       <stzh-container>
-        <stzh-row>
-          <stzh-cell span-medium="8">
-            <form>
-              <stzh-cspace>
-                <stzh-heading with-border>eGov Form</stzh-heading>
-                <stzh-progressbar
-                  index="0"
-                  data='[
-                    {
-                      "label": "Personal Information"
-                    },
-                    {
-                      "label": "Verfication"
-                    },
-                    {
-                      "label": "Confirmation"
-                    }
-                  ]'></stzh-progressbar>
-                <stzh-heading level="2" with-border>Personal Information</stzh-heading>
-                <stzh-message
-                  type="error"
-                  label="Title Error"
-                  description="This is an optional description text of a message."
+        {args.content}
+      </stzh-container>
+      <stzh-vspace curve="big"></stzh-vspace>
+    </stzh-section>
+    <stzh-footer variant="egov"></stzh-footer>
+  </div>
+);
+const Template = (args) => (
+  (Base({ content: (
+    <DocumentFragment>
+      <stzh-row>
+        <stzh-cell span-medium="8">
+          <form>
+            <stzh-cspace>
+              <stzh-heading with-border>eGov Form</stzh-heading>
+              <stzh-progressbar
+                index="0"
+                data='[
+                  {
+                    "label": "Personal Information"
+                  },
+                  {
+                    "label": "Verfication"
+                  },
+                  {
+                    "label": "Confirmation"
+                  }
+                ]'></stzh-progressbar>
+              <stzh-heading level="2" with-border>Personal Information</stzh-heading>
+              <stzh-message
+                type="error"
+                label="Title Error"
+                description="This is an optional description text of a message."
+              >
+                <stzh-link slot="link">optional link</stzh-link>
+              </stzh-message>
+              <stzh-fieldset legend="Name, E-Mail and Password">
+                <stzh-radiogroup
+                  show-marker
+                  name="salutation"
+                  legend="Salutation"
+                  direction="horizontal"
+                  required
                 >
-                  <stzh-link slot="link">optional link</stzh-link>
-                </stzh-message>
-                <stzh-fieldset legend="Name, E-Mail and Password">
-                  <stzh-radiogroup
-                    show-marker
-                    name="salutation"
-                    legend="Salutation"
-                    direction="horizontal"
-                    required
-                  >
-                    <stzh-radio value="mrs">Mrs.</stzh-radio>
-                    <stzh-radio value="mr">Mr</stzh-radio>
-                  </stzh-radiogroup>
-                  <stzh-input show-marker name="title" label="Title" description="Helptext"></stzh-input>
-                  <stzh-row>
-                    <stzh-cell span-small="6">
-                      <stzh-input show-marker name="first_name" label="First Name" required></stzh-input>
-                    </stzh-cell>
-                    <stzh-cell span-small="6">
-                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
-                      <stzh-input show-marker name="last_name" label="Last Name" required></stzh-input>
-                    </stzh-cell>
-                  </stzh-row>
-                  <stzh-checkboxgroup
-                    show-marker
-                    name="labels1[]"
-                    legend="Resident in the canton of Zurich"
-                    direction="horizontal"
-                  >
-                    <stzh-checkbox value="label1">Label 1</stzh-checkbox>
-                    <stzh-checkbox value="label2">Label 2</stzh-checkbox>
-                    <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
-                  </stzh-checkboxgroup>
-                  <stzh-checkboxgroup
-                    show-marker
-                    name="labels2[]"
-                    legend="Resident in the canton of Zurich"
-                  >
-                    <stzh-checkbox value="label1">Label 1</stzh-checkbox>
-                    <stzh-checkbox value="label2">Label 2</stzh-checkbox>
-                    <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
-                  </stzh-checkboxgroup>
-                  <stzh-row>
-                    <stzh-cell span-small="6">
-                      <stzh-input
-                        show-marker
-                        name="floating_1"
-                        label="Floating Label"
-                        description="Info text for the input field as help for users."
-                      >
-                        <stzh-richtext slot="description-long">
-                          <p>Your AHV number you will find, among other things, on your health insurance card:</p>
-                          <stzh-figure>
-                            <img src="media/images/example.jpg" loading="lazy" />
-                          </stzh-figure>
-                        </stzh-richtext>
-                      </stzh-input>
-                    </stzh-cell>
-                    <stzh-cell span-small="6">
-                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
-                      <stzh-input show-marker name="floating_2" label="Floating Label"></stzh-input>
-                    </stzh-cell>
-                  </stzh-row>
-                  <stzh-input
-                    show-marker
-                    required
-                    rows="3"
-                    multiline
-                    name="message"
-                    label="Message"
-                    description="Helptext"
-                    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo"
-                  ></stzh-input>
-                  <stzh-upload
-                    url="/upload"
-                    description="Drag and drop files here to upload. Allowed file formats: [txt, pdf, docs] (max. 25 MB)."
-                    accepted-files=".txt,.pdf,.docs"
-                  >
-                  </stzh-upload>
-                </stzh-fieldset>
-                <stzh-fieldset legend="More Information">
-                  <stzh-datepicker show-marker name="date" label="Choose Date"></stzh-datepicker>
-                  <stzh-checkboxgroup
-                    show-marker
-                    name="labels3[]"
-                    legend="Resident in the canton of Zurich"
-                    direction="horizontal"
-                  >
-                    <stzh-checkbox value="label1">Label 1</stzh-checkbox>
-                    <stzh-checkbox value="label2">Label 2</stzh-checkbox>
-                    <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
-                  </stzh-checkboxgroup>
-                  <stzh-checkboxgroup
-                    show-marker
-                    name="labels4[]"
-                    legend="Resident in the canton of Zurich"
-                  >
-                    <stzh-checkbox value="label1">Label 1</stzh-checkbox>
-                    <stzh-checkbox value="label2">Label 2</stzh-checkbox>
-                    <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
-                  </stzh-checkboxgroup>
-                  <stzh-row>
-                    <stzh-cell span-small="6">
-                      <stzh-input
-                        show-marker
-                        required
-                        name="email"
-                        label="E-Mail"
-                        value="Value"
-                        description="Helptext"
-                        error='["Please enter a valid email address."]'
-                      ></stzh-input>
-                    </stzh-cell>
-                    <stzh-cell span-small="6">
-                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
-                      <stzh-input show-marker required name="phone" label="Phone"></stzh-input>
-                    </stzh-cell>
-                  </stzh-row>
-                </stzh-fieldset>
+                  <stzh-radio value="mrs">Mrs.</stzh-radio>
+                  <stzh-radio value="mr">Mr</stzh-radio>
+                </stzh-radiogroup>
+                <stzh-input show-marker name="title" label="Title" description="Helptext"></stzh-input>
                 <stzh-row>
-                  <stzh-cell span="6">
-                    <stzh-saptcha numbers='["7", "9", "8"]' name="saptcha"></stzh-saptcha>
+                  <stzh-cell span-small="6">
+                    <stzh-input show-marker name="first_name" label="First Name" required></stzh-input>
+                  </stzh-cell>
+                  <stzh-cell span-small="6">
+                    <stzh-vspace size="large" size-small="none"></stzh-vspace>
+                    <stzh-input show-marker name="last_name" label="Last Name" required></stzh-input>
                   </stzh-cell>
                 </stzh-row>
-                <stzh-checkbox show-marker checked name="copy" label="I would like an unencrypted copy of this message"></stzh-checkbox>
+                <stzh-checkboxgroup
+                  show-marker
+                  name="labels1[]"
+                  legend="Resident in the canton of Zurich"
+                  direction="horizontal"
+                >
+                  <stzh-checkbox value="label1">Label 1</stzh-checkbox>
+                  <stzh-checkbox value="label2">Label 2</stzh-checkbox>
+                  <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
+                </stzh-checkboxgroup>
+                <stzh-checkboxgroup
+                  show-marker
+                  name="labels2[]"
+                  legend="Resident in the canton of Zurich"
+                >
+                  <stzh-checkbox value="label1">Label 1</stzh-checkbox>
+                  <stzh-checkbox value="label2">Label 2</stzh-checkbox>
+                  <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
+                </stzh-checkboxgroup>
-                <stzh-message
-                  label="A message with the wrong sender will not be answered and will be deleted."
-                  description="The message is encrypted before it is sent to the city administration of Zurich."
-                ></stzh-message>
+                <stzh-row>
+                  <stzh-cell span-small="6">
+                    <stzh-input
+                      show-marker
+                      name="floating_1"
+                      label="Floating Label"
+                      description="Info text for the input field as help for users."
+                    >
+                      <stzh-richtext slot="description-long">
+                        <p>Your AHV number you will find, among other things, on your health insurance card:</p>
+                        <stzh-figure>
+                          <img src="media/images/example.jpg" loading="lazy" />
+                        </stzh-figure>
+                      </stzh-richtext>
+                    </stzh-input>
+                  </stzh-cell>
+                  <stzh-cell span-small="6">
+                    <stzh-vspace size="large" size-small="none"></stzh-vspace>
+                    <stzh-input show-marker name="floating_2" label="Floating Label"></stzh-input>
+                  </stzh-cell>
+                </stzh-row>
-                <stzh-actions variant="process" with-border>
-                  <stzh-button slot="primary">Send</stzh-button>
-                  <stzh-button slot="secondary">Cancel</stzh-button>
-                  <stzh-button slot="secondary">Back</stzh-button>
-                </stzh-actions>
-              </stzh-cspace>
-            </form>
+                <stzh-input
+                  show-marker
+                  required
+                  rows="3"
+                  multiline
+                  name="message"
+                  label="Message"
+                  description="Helptext"
+                  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo"
+                ></stzh-input>
+                <stzh-upload
+                  url="/upload"
+                  description="Drag and drop files here to upload. Allowed file formats: [txt, pdf, docs] (max. 25 MB)."
+                  accepted-files=".txt,.pdf,.docs"
+                >
+                </stzh-upload>
+              </stzh-fieldset>
-          </stzh-cell>
-        </stzh-row>
-      </stzh-container>
-    </stzh-section>
+              <stzh-fieldset legend="More Information">
+                <stzh-datepicker show-marker name="date" label="Choose Date"></stzh-datepicker>
-    <stzh-vspace curve="big"></stzh-vspace>
+                <stzh-checkboxgroup
+                  show-marker
+                  name="labels3[]"
+                  legend="Resident in the canton of Zurich"
+                  direction="horizontal"
+                >
+                  <stzh-checkbox value="label1">Label 1</stzh-checkbox>
+                  <stzh-checkbox value="label2">Label 2</stzh-checkbox>
+                  <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
+                </stzh-checkboxgroup>
+                <stzh-checkboxgroup
+                  show-marker
+                  name="labels4[]"
+                  legend="Resident in the canton of Zurich"
+                >
+                  <stzh-checkbox value="label1">Label 1</stzh-checkbox>
+                  <stzh-checkbox value="label2">Label 2</stzh-checkbox>
+                  <stzh-checkbox value="label3" checked>Label 3</stzh-checkbox>
+                </stzh-checkboxgroup>
-    <stzh-footer variant="egov"></stzh-footer>
-  </div>
+                <stzh-row>
+                  <stzh-cell span-small="6">
+                    <stzh-input
+                      show-marker
+                      required
+                      name="email"
+                      label="E-Mail"
+                      value="Value"
+                      description="Helptext"
+                      error='["Please enter a valid email address."]'
+                    ></stzh-input>
+                  </stzh-cell>
+                  <stzh-cell span-small="6">
+                    <stzh-vspace size="large" size-small="none"></stzh-vspace>
+                    <stzh-input show-marker required name="phone" label="Phone"></stzh-input>
+                  </stzh-cell>
+                </stzh-row>
+              </stzh-fieldset>
+              <stzh-row>
+                <stzh-cell span="6">
+                  <stzh-saptcha numbers='["7", "9", "8"]' name="saptcha"></stzh-saptcha>
+                </stzh-cell>
+              </stzh-row>
+              <stzh-checkbox show-marker checked name="copy" label="I would like an unencrypted copy of this message"></stzh-checkbox>
+              <stzh-message
+                label="A message with the wrong sender will not be answered and will be deleted."
+                description="The message is encrypted before it is sent to the city administration of Zurich."
+              ></stzh-message>
+              <stzh-actions variant="process" with-border>
+                <stzh-button slot="primary">Send</stzh-button>
+                <stzh-button slot="secondary">Cancel</stzh-button>
+                <stzh-button slot="secondary">Back</stzh-button>
+              </stzh-actions>
+            </stzh-cspace>
+          </form>
+        </stzh-cell>
+      </stzh-row>
+    </DocumentFragment>
+  ) }))
 );
 export const Default = Template.bind({});