@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js

@@ -0,0 +1,456 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import readme from "./readme.md";
+import treeItemReadme from "../ic-tree-item/readme.md";
+import { html } from "lit-html";
+export default {
+    title: "Web Components/Tree view",
+    component: "ic-tree-view",
+    parameters: {
+        componentAPI: {
+            data: readme + treeItemReadme,
+        },
+    },
+};
+/**
+ * Use the tree view component to display hierarchical data in a tree structure. The tree view component is useful for displaying nested data, such as a file system or a category hierarchy.
+ *
+ * Click the 'Component API' tab to view all the available attributes, events and slots for tree view.
+ *
+ * To use the tree view component, import `@ukic/canary-web-components` into your application.
+ */
+export const Basic = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee"></ic-tree-item>
+        <ic-tree-item label="Tea"></ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Basic",
+};
+export const Nested = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee">
+          <ic-tree-item label="Americano">
+            <ic-tree-item label="With milk"></ic-tree-item>
+          </ic-tree-item>
+          <ic-tree-item label="Latte"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Nested",
+};
+export const WithIcons = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "With icons",
+};
+/**
+ * Small and large styling will be passed down from tree view to tree items and nested tree items.
+ */
+export const Small = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu" size="small">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Small",
+};
+export const Large = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu" size="large">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Large",
+};
+/**
+ * Set `appearance` to `light` when the tree-view is displayed on dark background, to provide sufficient colour contrast.
+ */
+export const Light = {
+    render: () => html `
+    <div style="width:250px;">
+      <ic-tree-view heading="Menu" appearance="light">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Light",
+    parameters: {
+        backgrounds: {
+            default: "dark",
+        },
+    },
+};
+/**
+ * Individual tree-items can be disabled using the `disabled` prop.
+ */
+export const DisabledTreeItems = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte" disabled="true">
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              />
+            </svg>
+          </ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai" disabled="true"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate" disabled="true"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Disabled tree items",
+};
+/**
+ * Custom links and router-items can be passed in using the `router-item` slot.
+ */
+export const RouterItem = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item>
+          <a slot="router-item" href="/">Slotted coffee</a>
+        </ic-tree-item>
+        <ic-tree-item label="Tea"></ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Router item",
+};
+/**
+ * Custom content can be passed to both the tree view (using the `heading` slot) and the tree-item (using the `label` slot).
+ */
+export const SlottedContent = {
+    render: () => html `
+      <div style="width:250px">
+        <ic-tree-view>
+          <ic-typography variant="subtitle-large" slot="heading">Menu</ic-typography>
+          <ic-tree-item>
+            <ic-typography slot="label">Coffee<ic-typography>
+          </ic-tree-item>
+          <ic-tree-item label="Tea"></ic-tree-item>
+          <ic-tree-item label="Hot chocolate"></ic-tree-item>
+        </ic-tree-view>
+      </div>
+    `,
+    name: "Slotted content",
+};
+/**
+ * When the heading/label exceeds the width of the container, the text will wrap unless `truncate-tree-item` is set to `true`.
+ */
+export const MaxContent = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu with nested options">
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte with extra milk and sugar"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate with marshmallows"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Max content",
+};
+/**
+ * When `truncate-tree-items` or `truncate-heading` are set to `true`, and the heading/label exceeds the width of the container, they will be truncated with an ellipsis.
+ */
+export const TruncationBehaviour = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view
+        heading="Menu with nested options"
+        truncate-tree-items="true"
+        truncate-heading="true"
+      >
+        <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"
+          />
+        </svg>
+        <ic-tree-item label="Coffee">
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+            />
+          </svg>
+          <ic-tree-item label="Americano"></ic-tree-item>
+          <ic-tree-item label="Latte with extra milk and sugar"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item
+            label="Earl Grey with truncation false"
+            truncate-tree-item="false"
+          ></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate with marshmallows"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Truncation behaviour",
+};
+/**
+ * Utilising the `selected` attribute on `ic-tree-item` will turn it into a controlled component, displaying the selected state when set to `true`.
+ */
+export const SelectedTreeItem = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee"></ic-tree-item>
+        <ic-tree-item label="Tea"></ic-tree-item>
+        <ic-tree-item label="Hot chocolate" selected="true"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Selected tree item",
+};
+/**
+ * When setting the `href` attribute, the tree-item will function as a link.
+ */
+export const Link = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee" href="#"></ic-tree-item>
+        <ic-tree-item label="Tea" selected="true" href="#"></ic-tree-item>
+        <ic-tree-item
+          label="Hot chocolate"
+          disabled="true"
+          href="#"
+        ></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Link",
+};
+/**
+ * An example with the `expanded` prop set to `true` on a parent tree item.
+ */
+export const Expanded = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee" expanded="true">
+          <ic-tree-item label="Americano" expanded="true">
+            <ic-tree-item label="With milk"></ic-tree-item>
+          </ic-tree-item>
+          <ic-tree-item label="Latte"></ic-tree-item>
+          <ic-tree-item label="Espresso"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Tea">
+          <ic-tree-item label="Earl Grey"></ic-tree-item>
+          <ic-tree-item label="Chai"></ic-tree-item>
+        </ic-tree-item>
+        <ic-tree-item label="Hot chocolate"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+  `,
+    name: "Expanded",
+};
+//# sourceMappingURL=ic-tree-view.stories.js.map

package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/ic-tree-view/ic-tree-view.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport treeItemReadme from \"../ic-tree-item/readme.md\";\nimport { html } from \"lit-html\";\n\nexport default {\n  title: \"Web Components/Tree view\",\n  component: \"ic-tree-view\",\n\n  parameters: {\n    componentAPI: {\n      data: readme + treeItemReadme,\n    },\n  },\n};\n\n/**\n * Use the tree view component to display hierarchical data in a tree structure. The tree view component is useful for displaying nested data, such as a file system or a category hierarchy.\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for tree view.\n *\n * To use the tree view component, import `@ukic/canary-web-components` into your application.\n */\nexport const Basic = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <ic-tree-item label=\"Coffee\"></ic-tree-item>\n        <ic-tree-item label=\"Tea\"></ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Basic\",\n};\n\nexport const Nested = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <ic-tree-item label=\"Coffee\">\n          <ic-tree-item label=\"Americano\">\n            <ic-tree-item label=\"With milk\"></ic-tree-item>\n          </ic-tree-item>\n          <ic-tree-item label=\"Latte\"></ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Nested\",\n};\n\nexport const WithIcons = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n          />\n        </svg>\n        <ic-tree-item label=\"Coffee\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n            />\n          </svg>\n          <ic-tree-item label=\"Americano\"></ic-tree-item>\n          <ic-tree-item label=\"Latte\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n              />\n            </svg>\n          </ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"With icons\",\n};\n\n/**\n * Small and large styling will be passed down from tree view to tree items and nested tree items.\n */\nexport const Small = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\" size=\"small\">\n        <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n          />\n        </svg>\n        <ic-tree-item label=\"Coffee\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n            />\n          </svg>\n          <ic-tree-item label=\"Americano\"></ic-tree-item>\n          <ic-tree-item label=\"Latte\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n              />\n            </svg>\n          </ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Small\",\n};\n\nexport const Large = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\" size=\"large\">\n        <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n          />\n        </svg>\n        <ic-tree-item label=\"Coffee\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n            />\n          </svg>\n          <ic-tree-item label=\"Americano\"></ic-tree-item>\n          <ic-tree-item label=\"Latte\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n              />\n            </svg>\n          </ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Large\",\n};\n\n/**\n * Set `appearance` to `light` when the tree-view is displayed on dark background, to provide sufficient colour contrast.\n */\nexport const Light = {\n  render: () => html`\n    <div style=\"width:250px;\">\n      <ic-tree-view heading=\"Menu\" appearance=\"light\">\n        <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n          />\n        </svg>\n        <ic-tree-item label=\"Coffee\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n            />\n          </svg>\n          <ic-tree-item label=\"Americano\"></ic-tree-item>\n          <ic-tree-item label=\"Latte\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n              />\n            </svg>\n          </ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Light\",\n\n  parameters: {\n    backgrounds: {\n      default: \"dark\",\n    },\n  },\n};\n\n/**\n * Individual tree-items can be disabled using the `disabled` prop.\n */\nexport const DisabledTreeItems = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n          />\n        </svg>\n        <ic-tree-item label=\"Coffee\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n            />\n          </svg>\n          <ic-tree-item label=\"Americano\"></ic-tree-item>\n          <ic-tree-item label=\"Latte\" disabled=\"true\">\n            <svg\n              slot=\"icon\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n              />\n            </svg>\n          </ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\" disabled=\"true\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\" disabled=\"true\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Disabled tree items\",\n};\n\n/**\n * Custom links and router-items can be passed in using the `router-item` slot.\n */\nexport const RouterItem = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <ic-tree-item>\n          <a slot=\"router-item\" href=\"/\">Slotted coffee</a>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\"></ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Router item\",\n};\n\n/**\n * Custom content can be passed to both the tree view (using the `heading` slot) and the tree-item (using the `label` slot).\n */\nexport const SlottedContent = {\n  render: () => html`\n      <div style=\"width:250px\">\n        <ic-tree-view>\n          <ic-typography variant=\"subtitle-large\" slot=\"heading\">Menu</ic-typography>\n          <ic-tree-item>\n            <ic-typography slot=\"label\">Coffee<ic-typography>\n          </ic-tree-item>\n          <ic-tree-item label=\"Tea\"></ic-tree-item>\n          <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n        </ic-tree-view>\n      </div>\n    `,\n\n  name: \"Slotted content\",\n};\n\n/**\n * When the heading/label exceeds the width of the container, the text will wrap unless `truncate-tree-item` is set to `true`.\n */\nexport const MaxContent = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu with nested options\">\n        <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n          />\n        </svg>\n        <ic-tree-item label=\"Coffee\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n            />\n          </svg>\n          <ic-tree-item label=\"Americano\"></ic-tree-item>\n          <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Max content\",\n};\n\n/**\n * When `truncate-tree-items` or `truncate-heading` are set to `true`, and the heading/label exceeds the width of the container, they will be truncated with an ellipsis.\n */\nexport const TruncationBehaviour = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view\n        heading=\"Menu with nested options\"\n        truncate-tree-items=\"true\"\n        truncate-heading=\"true\"\n      >\n        <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <path\n            d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n          />\n        </svg>\n        <ic-tree-item label=\"Coffee\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n            />\n          </svg>\n          <ic-tree-item label=\"Americano\"></ic-tree-item>\n          <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item\n            label=\"Earl Grey with truncation false\"\n            truncate-tree-item=\"false\"\n          ></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Truncation behaviour\",\n};\n\n/**\n * Utilising the `selected` attribute on `ic-tree-item` will turn it into a controlled component, displaying the selected state when set to `true`.\n */\nexport const SelectedTreeItem = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <ic-tree-item label=\"Coffee\"></ic-tree-item>\n        <ic-tree-item label=\"Tea\"></ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\" selected=\"true\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Selected tree item\",\n};\n\n/**\n * When setting the `href` attribute, the tree-item will function as a link.\n */\nexport const Link = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <ic-tree-item label=\"Coffee\" href=\"#\"></ic-tree-item>\n        <ic-tree-item label=\"Tea\" selected=\"true\" href=\"#\"></ic-tree-item>\n        <ic-tree-item\n          label=\"Hot chocolate\"\n          disabled=\"true\"\n          href=\"#\"\n        ></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Link\",\n};\n\n/**\n * An example with the `expanded` prop set to `true` on a parent tree item.\n */\nexport const Expanded = {\n  render: () => html`\n    <div style=\"width:250px\">\n      <ic-tree-view heading=\"Menu\">\n        <ic-tree-item label=\"Coffee\" expanded=\"true\">\n          <ic-tree-item label=\"Americano\" expanded=\"true\">\n            <ic-tree-item label=\"With milk\"></ic-tree-item>\n          </ic-tree-item>\n          <ic-tree-item label=\"Latte\"></ic-tree-item>\n          <ic-tree-item label=\"Espresso\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Tea\">\n          <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n          <ic-tree-item label=\"Chai\"></ic-tree-item>\n        </ic-tree-item>\n        <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n      </ic-tree-view>\n    </div>\n  `,\n\n  name: \"Expanded\",\n};\n"]}

package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js

@@ -0,0 +1,85 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TreeView } from "../../ic-tree-view";
+import { TreeItem } from "../../../ic-tree-item/ic-tree-item";
+import { IcTypography as Typography } from "@ukic/web-components/dist/components/ic-typography";
+describe("ic-tree-view component", () => {
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [TreeView],
+            html: `<ic-tree-view heading="Heading"></ic-tree-view>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with icon", async () => {
+        const page = await newSpecPage({
+            components: [TreeView],
+            html: `<ic-tree-view heading="Heading">
+         <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+      </ic-tree-view>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with tree items", async () => {
+        const page = await newSpecPage({
+            components: [TreeView, TreeItem],
+            html: `<ic-tree-view heading="Heading">
+          <ic-tree-item label="Item 1"></ic-tree-item>
+          <ic-tree-item label="Item 2"></ic-tree-item>
+      </ic-tree-view>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with slotted heading", async () => {
+        const page = await newSpecPage({
+            components: [TreeView, Typography],
+            html: `<ic-tree-view>
+        <ic-typography slot="heading" variant="subtitle-large">Heading</ic-typography>
+      </ic-tree-view>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should test handleTreeItemSelected", async () => {
+        const page = await newSpecPage({
+            components: [TreeView, TreeItem],
+            html: `<ic-tree-view heading="Heading">
+          <ic-tree-item label="Item 1"></ic-tree-item>
+          <ic-tree-item label="Item 2"></ic-tree-item>
+      </ic-tree-view>`,
+        });
+        const treeItem = page.root.querySelector("ic-tree-item#ic-tree-item-2");
+        treeItem.selected = true;
+        await page.waitForChanges();
+        page.rootInstance.handleTreeItemSelected({
+            detail: { id: "ic-tree-item-3" },
+        });
+        expect(treeItem.selected).toBeFalsy();
+    });
+    it("should test rendering icon slot after initial render", async () => {
+        const page = await newSpecPage({
+            components: [TreeView],
+            html: `<ic-tree-view heading="Heading"></ic-tree-view>`,
+        });
+        const icon = document.createElement("svg");
+        icon.setAttribute("slot", "icon");
+        page.rootInstance.hostMutationCallback([
+            {
+                type: "childList",
+                addedNodes: [icon],
+                removedNodes: [],
+            },
+        ]);
+    });
+});
+//# sourceMappingURL=ic-tree-view.spec.js.map

package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tree-view.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tree-view/test/basic/ic-tree-view.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { TreeView } from \"../../ic-tree-view\";\nimport { TreeItem } from \"../../../ic-tree-item/ic-tree-item\";\nimport { IcTypography as Typography } from \"@ukic/web-components/dist/components/ic-typography\";\n\ndescribe(\"ic-tree-view component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [TreeView],\n      html: `<ic-tree-view heading=\"Heading\"></ic-tree-view>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with icon\", async () => {\n    const page = await newSpecPage({\n      components: [TreeView],\n      html: `<ic-tree-view heading=\"Heading\">\n         <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n      </ic-tree-view>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with tree items\", async () => {\n    const page = await newSpecPage({\n      components: [TreeView, TreeItem],\n      html: `<ic-tree-view heading=\"Heading\">\n          <ic-tree-item label=\"Item 1\"></ic-tree-item>\n          <ic-tree-item label=\"Item 2\"></ic-tree-item>\n      </ic-tree-view>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [TreeView, Typography],\n      html: `<ic-tree-view>\n        <ic-typography slot=\"heading\" variant=\"subtitle-large\">Heading</ic-typography>\n      </ic-tree-view>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test handleTreeItemSelected\", async () => {\n    const page = await newSpecPage({\n      components: [TreeView, TreeItem],\n      html: `<ic-tree-view heading=\"Heading\">\n          <ic-tree-item label=\"Item 1\"></ic-tree-item>\n          <ic-tree-item label=\"Item 2\"></ic-tree-item>\n      </ic-tree-view>`,\n    });\n\n    const treeItem: HTMLIcTreeItemElement = page.root.querySelector(\n      \"ic-tree-item#ic-tree-item-2\"\n    );\n    treeItem.selected = true;\n    await page.waitForChanges();\n\n    page.rootInstance.handleTreeItemSelected({\n      detail: { id: \"ic-tree-item-3\" },\n    });\n\n    expect(treeItem.selected).toBeFalsy();\n  });\n\n  it(\"should test rendering icon slot after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [TreeView],\n      html: `<ic-tree-view heading=\"Heading\"></ic-tree-view>`,\n    });\n\n    const icon = document.createElement(\"svg\");\n    icon.setAttribute(\"slot\", \"icon\");\n\n    page.rootInstance.hostMutationCallback([\n      {\n        type: \"childList\",\n        addedNodes: [icon],\n        removedNodes: [],\n      },\n    ]);\n  });\n});\n"]}