@oiz/stzh-components 2.1.0-beta → 2.1.0

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

@@ -0,0 +1,110 @@
+import { Host, h, } from "@stencil/core";
+import * as d3 from "d3";
+import * as sszvis from "sszvis/build/sszvis.js";
+import * as topojson from "topojson-client";
+/**
+ * @slot caption - Slot for a caption as alternative for attribute
+ */
+export class StzhChart {
+  constructor() {
+    this.initialized = false;
+    this.caption = "";
+    this.chartId = undefined;
+    this.create = function () { };
+  }
+  createWatcher() {
+    if (!this.initialized && this.chartElement) {
+      this.initialized = true;
+      this.create(this.chartElement, { d3, sszvis, topojson });
+    }
+  }
+  componentDidRender() {
+    if (!this.initialized && this.chartElement) {
+      this.initialized = true;
+      this.create(this.chartElement, { d3, sszvis, topojson });
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-chart": true
+    };
+    return (h(Host, null, h("figure", { class: classes }, h("div", { id: this.chartId, ref: (el) => (this.chartElement = el), class: "stzh-chart__element" }), h("figcaption", { class: "stzh-chart__caption" }, this.caption ? this.caption : h("slot", { name: "caption" })))));
+  }
+  static get is() { return "stzh-chart"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caption"
+        },
+        "attribute": "caption",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "chartId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chart id"
+        },
+        "attribute": "chart-id",
+        "reflect": false
+      },
+      "create": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chart generation function"
+        },
+        "defaultValue": "function() {}"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "create",
+        "methodName": "createWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,287 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Chart',
+  component: 'stzh-chart',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('chart'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-chart {...args}></stzh-chart>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  'chart-id': 'PieChartFourCat',
+  caption: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.',
+  create: function(container, libs) {
+    var PieChartFourCatParams = {
+      id: '#PieChartFourCat',
+      percentage: 'false',
+      description: 'Pie Chart Four Cat Desc',
+      yExtentOverride: null,
+      xColumn: '',
+      categoryColumn: 'Kategorie',
+      valueColumn: 'Schweiz Import',
+      dateColumn: 'Datum',
+      data: 'media/samples/chart.csv',
+      fallback: 'assets/icons/mono/important-warning.svg',
+      yLabel: '',
+      title: 'Pie Chart Four Cat Title',
+      yColumn: '',
+      xLabel: '',
+      xTicks: 5
+    };
+
+    (function (d3, sszvis, topojson, PieChartFourCatParams) {
+      'use strict';
+
+      /* Configuration
+      ----------------------------------------------- */
+      // CONFIG
+      // if a variable is optional, the code needs to work with default values
+      // if variable is missing.
+      var config = {
+        dataPath: PieChartFourCatParams.data, //optional
+        title: PieChartFourCatParams.title, //optional
+        description: PieChartFourCatParams.description, //optional
+        //dateColumn: 'Datum',
+        valueColumn: PieChartFourCatParams.valueColumn,
+        categoryColumn: PieChartFourCatParams.categoryColumn,
+        yLabel: '',
+        xLabel: '',
+        ticks: 5,
+        fallback: false, //optional, creates long ticks when true
+        targetElement: PieChartFourCatParams.id
+      };
+
+      if (sszvis.fallbackUnsupported()) {
+        sszvis.fallbackRender(PieChartFourCatParams.id);
+        return;
+      }
+
+
+      /* Configuration
+      ----------------------------------------------- */
+      var PIE_DIAMETER = 260;
+      var LEGEND_TOP_PADDING = 40;
+      var LEGEND_LEFT_PADDING = 25;
+      var LEGEND_HEIGHT = 76;
+      var LEGEND_WIDTH = 102;
+      var queryProps = sszvis.responsiveProps()
+        .prop('layout', {
+          palm: function (width) {
+            var sidePadding = Math.max((width - PIE_DIAMETER) / 2, 10);
+            var diameter = (width - 2 * sidePadding);
+            var legendHeight = LEGEND_TOP_PADDING + LEGEND_HEIGHT + 20;
+            return {
+              bounds: {
+                top: 20,
+                bottom: legendHeight,
+                left: sidePadding,
+                right: sidePadding,
+                height: 20 + diameter + legendHeight
+              },
+              pieRadius: diameter / 2,
+              piePosition: {
+                top: 0,
+                left: sidePadding
+              },
+              legendPosition: {
+                top: diameter + LEGEND_TOP_PADDING,
+                left: 0
+              }
+            }
+          },
+          _: function (width) {
+            return {
+              bounds: {
+                top: 20,
+                bottom: 20,
+                left: 20,
+                right: LEGEND_WIDTH,
+                height: 20 + 20 + PIE_DIAMETER
+              },
+              pieRadius: PIE_DIAMETER / 2,
+              piePosition: {
+                top: 0,
+                left: width / 2 - (PIE_DIAMETER + LEGEND_LEFT_PADDING + LEGEND_WIDTH) / 2
+              },
+              legendPosition: {
+                top: PIE_DIAMETER / 2 - LEGEND_HEIGHT / 2,
+                left: PIE_DIAMETER + LEGEND_LEFT_PADDING
+              }
+            }
+          }
+        });
+
+
+      /* Shortcuts
+      ----------------------------------------------- */
+      var vAcc = sszvis.prop('value');
+      var cAcc = sszvis.prop('category');
+
+
+      /* Application state
+      ----------------------------------------------- */
+      var state = {
+        data: [],
+        totalValue: 0,
+        categories: [],
+        selection: []
+      };
+
+
+      /* State transitions
+      ----------------------------------------------- */
+      var actions = {
+        prepareState: function (data) {
+          state.data = data;
+          state.totalValue = d3.sum(state.data, vAcc);
+          state.categories = sszvis.set(state.data, cAcc);
+          render(state);
+        },
+
+        showTooltip: function (datum) {
+          state.selection = [datum];
+          render(state);
+        },
+
+        hideTooltip: function () {
+          state.selection = [];
+          render(state);
+        },
+
+        resize: function () { render(state); }
+      };
+
+
+      /* Data initialization
+      ----------------------------------------------- */
+      d3.csv(config.dataPath)
+        .row(function (d) {
+          return {
+            category: d[config.categoryColumn],
+            value: sszvis.parseNumber(d[config.valueColumn])
+          };
+        })
+        .get(function (error, data) {
+          if (error) {
+            sszvis.loadError(error);
+            return;
+          }
+          actions.prepareState(data);
+        });
+
+
+      /* Render
+      ----------------------------------------------- */
+      function render(state) {
+        var props = queryProps(sszvis.measureDimensions(PieChartFourCatParams.id));
+        var bounds = sszvis.bounds(props.layout.bounds, PieChartFourCatParams.id);
+
+
+        // Scales
+
+        var aScale = d3.scaleLinear()
+          .domain([0, state.totalValue])
+          .range([0, 2 * Math.PI]);
+
+        // CONFIG
+        //choose color scale depending on number of categories
+        var cScale = state.categories.length > 6 ? sszvis.scaleQual12() : sszvis.scaleQual6();
+        cScale.domain(state.categories);
+
+
+        // Layers
+
+        var chartLayer = sszvis.createSvgLayer(PieChartFourCatParams.id, bounds, {
+          title: config.title,
+          description: config.description
+        })
+          .datum(state.data);
+
+        var tooltipLayer = sszvis.createHtmlLayer(PieChartFourCatParams.id, bounds)
+          .datum(state.selection);
+
+
+        // Components
+
+        var pieMaker = sszvis.pie()
+          .radius(props.layout.pieRadius)
+          .angle(sszvis.compose(aScale, vAcc))
+          .fill(sszvis.compose(cScale, cAcc));
+
+        var colorLegend = sszvis.legendColorOrdinal()
+          .scale(cScale)
+          .rows(state.categories.length)
+          .orientation('vertical');
+
+        var headerText = sszvis.modularTextHTML()
+          .bold(sszvis.compose(sszvis.formatFractionPercent, function (d) { return vAcc(d) / state.totalValue; }));
+
+        var tooltip = sszvis.tooltip()
+          .renderInto(tooltipLayer)
+          .header(headerText)
+          .visible(isSelected);
+
+
+        // Rendering
+
+        chartLayer
+          .attr('transform', sszvis.translateString(props.layout.piePosition.left, props.layout.piePosition.top));
+
+        var pie = chartLayer.selectGroup('piechart')
+          .call(pieMaker);
+
+        pie.selectAll('[data-tooltip-anchor]')
+          .call(tooltip);
+
+        chartLayer.selectGroup('colorLegend')
+          .attr('transform', function () {
+            return sszvis.translateString(props.layout.legendPosition.left, props.layout.legendPosition.top);
+          })
+          .call(colorLegend);
+
+
+        // Interaction
+
+        var interactionLayer = sszvis.panning()
+          .elementSelector('.sszvis-path')
+          .on('start', actions.showTooltip)
+          .on('pan', actions.showTooltip)
+          .on('end', actions.hideTooltip);
+
+        pie.call(interactionLayer);
+
+        sszvis.viewport.on('resize', actions.resize);
+      }
+
+
+      /* Helper functions
+      ----------------------------------------------- */
+      function isSelected(d) {
+        return sszvis.contains(state.selection, d);
+      }
+
+    })(libs.d3, libs.sszvis, libs.topojson, PieChartFourCatParams);
+  }
+};

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -164,27 +167,6 @@
   --hover-counter-color: var(--stzh-color-white48);
   --hover-icon-color: var(--stzh-color-white);
 }
-:host[variant=filter][invert]:not([invert=false]):not([disabled]) {
-  --color: var(--stzh-color-white);
-  --border: 0.0625rem solid var(--stzh-color-white);
-  --remove-color: var(--stzh-color-white);
-  --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --counter-color: var(--stzh-color-white48);
-  --icon-color: var(--stzh-color-white);
-  --hover-color: var(--stzh-color-white);
-  --hover-border: 0.0625rem solid transparent;
-  --hover-background-color: var(--stzh-color-primary48);
-  --hover-remove-color: var(--stzh-color-white);
-  --hover-remove-background-color: var(--stzh-color-primary48);
-  --hover-counter-color: var(--stzh-color-white48);
-  --hover-icon-color: var(--stzh-color-white);
-}
-:host[variant=filter][invert]:not([invert=false])[active]:not([active=false]):not([disabled]) {
-  --border: 0.0625rem solid transparent;
-  --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-}
 :host[disabled]:not([disabled=false]) {
   --color: var(--stzh-color-grey25);
   --border: 0.0625rem solid var(--stzh-base-border-color);
@@ -229,6 +211,7 @@
   border: var(--border);
   background-color: var(--background-color);
   transition: all var(--stzh-base-transition-animation-speed);
+  text-decoration: none;
 }
 .stzh-chip__icon-wrapper {
   display: flex;

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, Fragment } from "@stencil/core";
 /**
  * @slot - Slot for label
  * @slot icon - Slot for icon
@@ -43,6 +43,8 @@ export class StzhChip {
     };
     this.label = "";
     this.icon = "";
+    this.href = "";
+    this.target = "";
     this.removable = false;
     this.variant = "tag";
     this.size = "default";
@@ -51,7 +53,6 @@ export class StzhChip {
     this.removeLabel = "";
     this.active = false;
     this.disabled = false;
-    this.invert = false;
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
   }
@@ -59,6 +60,13 @@ export class StzhChip {
   async setFocus() {
     this.chip.focus();
   }
+  renderInner() {
+    return (h(Fragment, null, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
+      h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
+      :
+        h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
+      h("div", { class: "stzh-chip__counter" }, this.counter)));
+  }
   render() {
     const classes = {
       "stzh-chip": true,
@@ -71,11 +79,10 @@ export class StzhChip {
       [`stzh-chip--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, h("div", { class: classes }, this.removable &&
-      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), h("button", { class: "stzh-chip__button", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby }, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
-      h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
+      h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), this.href ?
+      h("a", { class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
       :
-        h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
-      h("div", { class: "stzh-chip__counter" }, this.counter)))));
+        h("button", { class: "stzh-chip__button", disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
   }
   static get is() { return "stzh-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -127,6 +134,42 @@ export class StzhChip {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "`href` if the chip should be used as link"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target if the button is used as link (if `href` used)"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "removable": {
         "type": "boolean",
         "mutable": false,
@@ -271,24 +314,6 @@ export class StzhChip {
         "reflect": true,
         "defaultValue": "false"
       },
-      "invert": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Invert (only available for tag variant)"
-        },
-        "attribute": "invert",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "a11yLabel": {
         "type": "string",
         "mutable": false,

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

@@ -38,15 +38,6 @@ Filter.args = {
   icon: 'bulleted-list'
 };
 
-export const FilterInverted = Template.bind({});
-FilterInverted.args = {
-  variant: 'filter',
-  label: 'Topic Tag',
-  counter: '00',
-  icon: 'bulleted-list',
-  invert: true
-};
-
 export const Tag = Template.bind({});
 Tag.args = {
   label: 'Topic Tag',

package/dist/collection/components/stzh-chip-select/stzh-chip-select.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */