@oiz/stzh-components 2.0.0-beta → 2.1.0-alpha

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

@@ -0,0 +1,279 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --lines: 1;
+  width: 100%;
+  color: inherit;
+}
+
+:host([lines="1"]) {
+  --lines: 1;
+}
+
+:host([lines="2"]) {
+  --lines: 2;
+}
+
+:host([lines="3"]) {
+  --lines: 3;
+}
+
+:host([lines="4"]) {
+  --lines: 4;
+}
+
+:host([lines="5"]) {
+  --lines: 5;
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="5"]) {
+    --lines: 5;
+  }
+}
+
+.stzh-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lines);
+  line-clamp: var(--lines);
+  overflow: hidden;
+}

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

@@ -0,0 +1,125 @@
+import { Host, h } from "@stencil/core";
+/**
+ *
+ */
+export class StzhClamp {
+  constructor() {
+    this.lines = 1;
+    this.linesSmall = 0;
+    this.linesMedium = 0;
+    this.linesLarge = 0;
+    this.linesUltra = 0;
+  }
+  render() {
+    const classes = {
+      "stzh-clamp": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-clamp"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-clamp.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-clamp.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "lines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number"
+        },
+        "attribute": "lines",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "linesSmall": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above small breakpoint"
+        },
+        "attribute": "lines-small",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "linesMedium": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above medium breakpoint"
+        },
+        "attribute": "lines-medium",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "linesLarge": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above large breakpoint"
+        },
+        "attribute": "lines-large",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "linesUltra": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above ultra breakpoint"
+        },
+        "attribute": "lines-ultra",
+        "reflect": true,
+        "defaultValue": "0"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,41 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { fullwidthCentered } from '../../utils/decorators';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Clamp',
+  component: 'stzh-clamp',
+  parameters: {
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('clamp'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    fullwidthCentered,
+    withDesign
+  ]
+}
+
+const Template = (args) => (
+  <stzh-text>
+    <stzh-clamp {...args}>
+      <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>
+    </stzh-clamp>
+  </stzh-text>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};