@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

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

@@ -1,178 +1,178 @@
-import { h } from '../../utils/h';
-import readme from './readme.md';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
-
-import { Default as Metanav } from '../stzh-metanav/stzh-metanav.stories';
-import { Default as Menu } from '../stzh-menu/stzh-menu.stories';
-
-export default {
-  title: 'Components/Header',
-  component: 'stzh-header',
-  parameters: {
-    layout: 'fullscreen',
-    actions: {
-      handles: ['headerSticky']
-    },
-    docs: {
-      inlineStories: false,
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('header'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const Popover = () => (
-  <stzh-popover label="My Account" placement="bottom-end">
-    <stzh-button
-      fullwidth
-      text-align="space-between"
-      icon-position="right"
-      icon="user"
-      badge="3"
-    >
-      Full Name
-    </stzh-button>
-    <div slot="content">
-      <Menu></Menu>
-    </div>
-    <stzh-button slot="action" variant="secondary" size="small">
-      Logout
-    </stzh-button>
-  </stzh-popover>
-);
-
-const Logo = () => (
-  <img
-    src="media/logo/stzh-default.svg"
-    alt="Logo Stadt Zürich"
-  ></img>
-);
-
-const Header = (args) => (
-  <stzh-header {...args}>
-    <Metanav slot="nav"></Metanav>
-    <Popover slot="login"></Popover>
-    <Logo slot="logo"></Logo>
-  </stzh-header>
-);
-
-const DummyText = () => (
-  <div>
-    <stzh-vspace size="section"></stzh-vspace>
-    <stzh-text>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
-
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
-
-      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
-
-      <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
-
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
-
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
-
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-
-      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
-
-      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
-
-      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
-    </stzh-text>
-    <stzh-vspace size="section"></stzh-vspace>
-  </div>
-);
-
-const Template = (args) => (
-  <div>
-    <Header {...args}></Header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
-  </div>
-);
-
-const TemplateWithoutDummyText = (args) => (
-  <Header {...args}></Header>
-);
-
-const TemplateWithAppNavigation = (args) => (
-  <div>
-    <stzh-header {...args}>
-      <Metanav slot="nav"></Metanav>
-      <Popover slot="login"></Popover>
-      <Logo slot="logo"></Logo>
-
-      <stzh-appnav slot="appnav" app-title="My Account" status="Preview" href="#">
-        <stzh-link href="#" icon="services">
-          My Services
-        </stzh-link>
-        <stzh-link href="#" icon="bulleted-list">
-          All Services
-        </stzh-link>
-        <stzh-link href="#" badge="3" icon="mail">
-          Messages
-        </stzh-link>
-        <stzh-link href="#" icon="gear">
-          Settings
-        </stzh-link>
-      </stzh-appnav>
-    </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
-  </div>
-);
-
-const TemplateNestedInCointainer = (args) => (
-  <stzh-container>
-    <Header {...args}></Header>
-    <DummyText></DummyText>
-  </stzh-container>
-);
-
-const TemplateWithEmptyNav = (args) => (
-  <div>
-    <stzh-header {...args}>
-      <Logo slot="logo"></Logo>
-    </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-};
-
-export const WithoutScrollbar = TemplateWithoutDummyText.bind({});
-WithoutScrollbar.args = {
-};
-
-export const WithAppNavigation = TemplateWithAppNavigation.bind({});
-WithAppNavigation.args = {
-};
-
-export const WithEmptyNav = TemplateWithEmptyNav.bind({});
-WithEmptyNav.args = {
-};
-
-export const NestedInContainer = TemplateNestedInCointainer.bind({});
-NestedInContainer.args = {
-};
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+import { Default as Metanav } from '../stzh-metanav/stzh-metanav.stories';
+import { Default as Menu } from '../stzh-menu/stzh-menu.stories';
+
+export default {
+  title: 'Components/Header',
+  component: 'stzh-header',
+  parameters: {
+    layout: 'fullscreen',
+    actions: {
+      handles: ['headerSticky']
+    },
+    docs: {
+      inlineStories: false,
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('header'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Popover = () => (
+  <stzh-popover label="My Account" placement="bottom-end">
+    <stzh-button
+      fullwidth
+      text-align="space-between"
+      icon-position="right"
+      icon="user"
+      badge="3"
+    >
+      Full Name
+    </stzh-button>
+    <div slot="content">
+      <Menu></Menu>
+    </div>
+    <stzh-button slot="action" variant="secondary" size="small">
+      Logout
+    </stzh-button>
+  </stzh-popover>
+);
+
+const Logo = () => (
+  <img
+    src="media/logo/stzh-default.svg"
+    alt="Logo Stadt Zürich"
+  ></img>
+);
+
+const Header = (args) => (
+  <stzh-header {...args}>
+    <Metanav slot="nav"></Metanav>
+    <Popover slot="login"></Popover>
+    <Logo slot="logo"></Logo>
+  </stzh-header>
+);
+
+const DummyText = () => (
+  <div>
+    <stzh-vspace size="section"></stzh-vspace>
+    <stzh-text>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+
+      <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+      <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+      <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+      <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+    </stzh-text>
+    <stzh-vspace size="section"></stzh-vspace>
+  </div>
+);
+
+const Template = (args) => (
+  <div>
+    <Header {...args}></Header>
+    <stzh-container>
+      <DummyText></DummyText>
+    </stzh-container>
+  </div>
+);
+
+const TemplateWithoutDummyText = (args) => (
+  <Header {...args}></Header>
+);
+
+const TemplateWithAppNavigation = (args) => (
+  <div>
+    <stzh-header {...args}>
+      <Metanav slot="nav"></Metanav>
+      <Popover slot="login"></Popover>
+      <Logo slot="logo"></Logo>
+
+      <stzh-appnav slot="appnav" app-title="My Account" status="Preview" href="#">
+        <stzh-link href="#" icon="services">
+          My Services
+        </stzh-link>
+        <stzh-link href="#" icon="bulleted-list">
+          All Services
+        </stzh-link>
+        <stzh-link href="#" badge="3" icon="mail">
+          Messages
+        </stzh-link>
+        <stzh-link href="#" icon="gear">
+          Settings
+        </stzh-link>
+      </stzh-appnav>
+    </stzh-header>
+    <stzh-container>
+      <DummyText></DummyText>
+    </stzh-container>
+  </div>
+);
+
+const TemplateNestedInCointainer = (args) => (
+  <stzh-container>
+    <Header {...args}></Header>
+    <DummyText></DummyText>
+  </stzh-container>
+);
+
+const TemplateWithEmptyNav = (args) => (
+  <div>
+    <stzh-header {...args}>
+      <Logo slot="logo"></Logo>
+    </stzh-header>
+    <stzh-container>
+      <DummyText></DummyText>
+    </stzh-container>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const WithoutScrollbar = TemplateWithoutDummyText.bind({});
+WithoutScrollbar.args = {
+};
+
+export const WithAppNavigation = TemplateWithAppNavigation.bind({});
+WithAppNavigation.args = {
+};
+
+export const WithEmptyNav = TemplateWithEmptyNav.bind({});
+WithEmptyNav.args = {
+};
+
+export const NestedInContainer = TemplateNestedInCointainer.bind({});
+NestedInContainer.args = {
+};

package/dist/collection/components/stzh-heading/stzh-heading.js

@@ -1,99 +1,99 @@
-import { Host, h, } from "@stencil/core";
-/**
- * @slot - Text content
- */
-export class StzhHeading {
-  constructor() {
-    /** Heading level */
-    this.level = "1";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
-    this.curve = "auto";
-    /** With border bottom separator */
-    this.withBorder = false;
-  }
-  render() {
-    const Heading = `h${this.level}`;
-    const classes = {
-      "stzh-heading": true,
-      "stzh-heading--with-border": this.withBorder,
-      [`stzh-heading--level-${this.level}`]: !!this.level,
-      [`stzh-heading--curve-${this.curve}`]: !!this.curve
-    };
-    return (h(Host, null, h(Heading, { class: classes }, h("slot", null))));
-  }
-  static get is() { return "stzh-heading"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-heading.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-heading.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "level": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"1\" | \"2\" | \"3\" | \"4\"",
-          "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading level"
-        },
-        "attribute": "level",
-        "reflect": true,
-        "defaultValue": "\"1\""
-      },
-      "curve": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Font.Curves | \"auto\"",
-          "resolved": "\"auto\" | \"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"p1\" | \"p2\"",
-          "references": {
-            "Font": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of curve to overwrite the curve inherited from `level` attribute"
-        },
-        "attribute": "curve",
-        "reflect": true,
-        "defaultValue": "\"auto\""
-      },
-      "withBorder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "With border bottom separator"
-        },
-        "attribute": "with-border",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-}
+import { Host, h, } from "@stencil/core";
+/**
+ * @slot - Text content
+ */
+export class StzhHeading {
+  constructor() {
+    /** Heading level */
+    this.level = "1";
+    /** Type of curve to overwrite the curve inherited from `level` attribute */
+    this.curve = "auto";
+    /** With border bottom separator */
+    this.withBorder = false;
+  }
+  render() {
+    const Heading = `h${this.level}`;
+    const classes = {
+      "stzh-heading": true,
+      "stzh-heading--with-border": this.withBorder,
+      [`stzh-heading--level-${this.level}`]: !!this.level,
+      [`stzh-heading--curve-${this.curve}`]: !!this.curve
+    };
+    return (h(Host, null, h(Heading, { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-heading"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-heading.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-heading.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "level": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level"
+        },
+        "attribute": "level",
+        "reflect": true,
+        "defaultValue": "\"1\""
+      },
+      "curve": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Curves | \"auto\"",
+          "resolved": "\"auto\" | \"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"p1\" | \"p2\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of curve to overwrite the curve inherited from `level` attribute"
+        },
+        "attribute": "curve",
+        "reflect": true,
+        "defaultValue": "\"auto\""
+      },
+      "withBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With border bottom separator"
+        },
+        "attribute": "with-border",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -1,37 +1,37 @@
-import { h } from '../../utils/h';
-import readme from './readme.md';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
-
-export default {
-  title: 'Components/Heading',
-  component: 'stzh-heading',
-  parameters: {
-    actions: {
-      handles: []
-    },
-    docs: {
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('heading'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-}
-
-const Template = (args) => (
-  <stzh-heading {...args}>
-    Laboris laborum aute id laboris
-  </stzh-heading>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-};
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Heading',
+  component: 'stzh-heading',
+  parameters: {
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('heading'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+}
+
+const Template = (args) => (
+  <stzh-heading {...args}>
+    Laboris laborum aute id laboris
+  </stzh-heading>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};