Merge branch 'buttons-146' into 'development'

Buttons 146

See merge request julkiset-sivut/design-system-lib!16

dist/cjs/hy-baseline.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-552c6bcd.js');
+const index = require('./index-8ee21469.js');
 
 const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
 

dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-552c6bcd.js');
+const index = require('./index-8ee21469.js');
 
 const defineCustomElements = (win, options) => index.patchEsm().then(() => {
   return index.bootstrapLazy([["hy-baseline.cjs",[[4,"hy-baseline"]]],["hy-accordion-container_15.cjs",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);

dist/collection/collection-manifest.json

@@ -19,7 +19,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "1.11.2",
+    "version": "1.11.3",
     "typescriptVersion": "3.8.3"
   },
   "collections": [],

dist/esm-es5/hy-baseline.entry.js

-import { r as registerInstance, h } from './index-d8f759a7.js';
-
-const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
-
-const Baseline = class {
-    constructor(hostRef) {
+import { r as registerInstance, h } from './index-5809f4b1.js';
+var baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
+var Baseline = /** @class */ (function () {
+    function Baseline(hostRef) {
         registerInstance(this, hostRef);
     }
-    render() {
+    Baseline.prototype.render = function () {
         return (h("div", { class: "hy-baseline" }, h("slot", null)));
-    }
-};
+    };
+    return Baseline;
+}());
 Baseline.style = baselineCss;
-
 export { Baseline as hy_baseline };

dist/esm-es5/loader.mjs

-import { a as patchEsm, b as bootstrapLazy } from './index-d8f759a7.js';
-
-const defineCustomElements = (win, options) => patchEsm().then(() => {
-  return bootstrapLazy([["hy-baseline",[[4,"hy-baseline"]]],["hy-accordion-container_15",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);
-});
-
+import { a as patchEsm, b as bootstrapLazy } from './index-5809f4b1.js';
+var defineCustomElements = function (win, options) { return patchEsm().then(function () {
+    return bootstrapLazy([["hy-baseline", [[4, "hy-baseline"]]], ["hy-accordion-container_15", [[4, "hy-accordion-item", { "accordiontitle": [1], "ready": [32] }], [4, "hy-button", { "variant": [1], "state": [1], "icon": [1], "iconRight": [1, "icon-right"] }], [4, "hy-accordion-container", { "accordionid": [1] }], [4, "hy-docs-container"], [4, "hy-grid-container"], [4, "hy-grid-item", { "columns": [1], "columnssm": [1], "columnslg": [1], "contentalign": [1] }], [4, "hy-grid-row"], [1, "hy-heading", { "heading": [1], "section": [1] }], [1, "hy-ingress"], [1, "hy-link", { "variant": [1], "linkContent": [1, "link-content"], "url": [1], "ariaLabel": [1, "aria-label"], "isExternal": [4, "is-external"] }], [1, "hy-paragraph-text"], [4, "hy-row", { "justify": [1], "align": [1] }], [4, "hy-section-container"], [1, "hy-tiny-text"], [0, "hy-icon", { "icon": [1], "fill": [1], "size": [2] }]]]], options);
+}); };
 export { defineCustomElements };

dist/esm/hy-baseline.entry.js

-import { r as registerInstance, h } from './index-d8f759a7.js';
+import { r as registerInstance, h } from './index-5809f4b1.js';
 
 const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
 

dist/esm/loader.mjs

-import { a as patchEsm, b as bootstrapLazy } from './index-d8f759a7.js';
+import { a as patchEsm, b as bootstrapLazy } from './index-5809f4b1.js';
 
 const defineCustomElements = (win, options) => patchEsm().then(() => {
   return bootstrapLazy([["hy-baseline",[[4,"hy-baseline"]]],["hy-accordion-container_15",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);

src/components/button/readme.md

@@ -12,43 +12,87 @@ Well, it's a button.
 ### Primary (Default) button
 
 <hy-docs-container>
-  <hy-button>Just a plain button</hy-button>
+  <hy-button>Primary</hy-button>
 </hy-docs-container>
 
 ```
-<hy-button>Just a plain button</hy-button>
+<hy-button>Primary</hy-button>
 ```
 
-### With icons
+### Secondary & Transparent
 
-<hy-docs-container>
-<hy-row>
-<hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
-<hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
-</hy-row>
-</hy-docs-container>
+<hy-button variant="secondary">Secondary</hy-button>
 
 ```
-<hy-row>
-  <hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
-  <hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
-</hy-row>
+<hy-button variant="secondary">Secondary</hy-button>
 ```
 
-### Secondary & Outline
+### Primary button, state disabled
+<hy-button state="disabled">Primary</hy-button>
 
-<hy-docs-container>
-<hy-row>
-<hy-button variant="secondary">I feel secondary and transparent</hy-button>
-</hy-row>
-</hy-docs-container>
 
 ```
-<hy-row>
-  <hy-button variant="secondary">I feel secondary</hy-button>
-  <hy-button variant="outline">I'm actually transparent</hy-button>
-</hy-row>
+<hy-button state="disabled">Primary</hy-button>
+```
+
+### Secondary button, state disabled
+<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>
+
+```
+<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>
+```
+
+### With arrows, state enabled
+
+<hy-button icon="hy-icon-arrow-left">Primary</hy-button>
+```
+<hy-button icon="hy-icon-arrow-left">Primary</hy-button>
+```
+
+<hy-button variant="secondary" icon="hy-icon-arrow-left">Secondary</hy-button>
 ```
+<hy-button variant="secondary" icon="hy-icon-arrow-left">
+    Secondary
+</hy-button>
+```
+
+<hy-button icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+<hy-button icon-right="hy-icon-arrow-right">
+    Primary
+</hy-button>
+```
+
+<hy-button icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+<hy-button icon-right="hy-icon-arrow-right" variant="secondary">
+    Secondary
+</hy-button>
+```
+
+      
+### With arrows, state disabled
+
+<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>
+```
+<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>
+```
+
+<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>
+```
+<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>
+```
+
+<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+
+<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+
 
 ### Mix with any icon