@gov-design-system-ce/components 0.0.1 → 0.0.3

package/dist/collection/components/gov-grid/gov-grid-item.css

@@ -0,0 +1,450 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Breadcrumbs
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Tiles
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -  Variables - Loading
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -  Variables - Form group
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Side nav
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
+/*
+*   Grid Cell
+*/
+.gov-grid-item {
+  border: 0 solid transparent;
+  -o-border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
+     border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
+}
+.gov-grid-item[size="1/12"] {
+  width: 8.3333333333%;
+}
+
+.gov-grid-item[size="2/12"] {
+  width: 16.6666666667%;
+}
+
+.gov-grid-item[size="3/12"] {
+  width: 25%;
+}
+
+.gov-grid-item[size="4/12"] {
+  width: 33.3333333333%;
+}
+
+.gov-grid-item[size="5/12"] {
+  width: 41.6666666667%;
+}
+
+.gov-grid-item[size="6/12"] {
+  width: 50%;
+}
+
+.gov-grid-item[size="7/12"] {
+  width: 58.3333333333%;
+}
+
+.gov-grid-item[size="8/12"] {
+  width: 66.6666666667%;
+}
+
+.gov-grid-item[size="9/12"] {
+  width: 75%;
+}
+
+.gov-grid-item[size="10/12"] {
+  width: 83.3333333333%;
+}
+
+.gov-grid-item[size="11/12"] {
+  width: 91.6666666667%;
+}
+
+.gov-grid-item[size="12/12"] {
+  width: 100%;
+}
+
+@media (min-width: 30em) {
+  .gov-grid-item[size-sm="1/12"] {
+    width: 8.3333333333%;
+  }
+
+  .gov-grid-item[size-sm="2/12"] {
+    width: 16.6666666667%;
+  }
+
+  .gov-grid-item[size-sm="3/12"] {
+    width: 25%;
+  }
+
+  .gov-grid-item[size-sm="4/12"] {
+    width: 33.3333333333%;
+  }
+
+  .gov-grid-item[size-sm="5/12"] {
+    width: 41.6666666667%;
+  }
+
+  .gov-grid-item[size-sm="6/12"] {
+    width: 50%;
+  }
+
+  .gov-grid-item[size-sm="7/12"] {
+    width: 58.3333333333%;
+  }
+
+  .gov-grid-item[size-sm="8/12"] {
+    width: 66.6666666667%;
+  }
+
+  .gov-grid-item[size-sm="9/12"] {
+    width: 75%;
+  }
+
+  .gov-grid-item[size-sm="10/12"] {
+    width: 83.3333333333%;
+  }
+
+  .gov-grid-item[size-sm="11/12"] {
+    width: 91.6666666667%;
+  }
+
+  .gov-grid-item[size-sm="12/12"] {
+    width: 100%;
+  }
+}
+@media (min-width: 48em) {
+  .gov-grid-item[size-md="1/12"] {
+    width: 8.3333333333%;
+  }
+
+  .gov-grid-item[size-md="2/12"] {
+    width: 16.6666666667%;
+  }
+
+  .gov-grid-item[size-md="3/12"] {
+    width: 25%;
+  }
+
+  .gov-grid-item[size-md="4/12"] {
+    width: 33.3333333333%;
+  }
+
+  .gov-grid-item[size-md="5/12"] {
+    width: 41.6666666667%;
+  }
+
+  .gov-grid-item[size-md="6/12"] {
+    width: 50%;
+  }
+
+  .gov-grid-item[size-md="7/12"] {
+    width: 58.3333333333%;
+  }
+
+  .gov-grid-item[size-md="8/12"] {
+    width: 66.6666666667%;
+  }
+
+  .gov-grid-item[size-md="9/12"] {
+    width: 75%;
+  }
+
+  .gov-grid-item[size-md="10/12"] {
+    width: 83.3333333333%;
+  }
+
+  .gov-grid-item[size-md="11/12"] {
+    width: 91.6666666667%;
+  }
+
+  .gov-grid-item[size-md="12/12"] {
+    width: 100%;
+  }
+}
+@media (min-width: 64em) {
+  .gov-grid-item[size-lg="1/12"] {
+    width: 8.3333333333%;
+  }
+
+  .gov-grid-item[size-lg="2/12"] {
+    width: 16.6666666667%;
+  }
+
+  .gov-grid-item[size-lg="3/12"] {
+    width: 25%;
+  }
+
+  .gov-grid-item[size-lg="4/12"] {
+    width: 33.3333333333%;
+  }
+
+  .gov-grid-item[size-lg="5/12"] {
+    width: 41.6666666667%;
+  }
+
+  .gov-grid-item[size-lg="6/12"] {
+    width: 50%;
+  }
+
+  .gov-grid-item[size-lg="7/12"] {
+    width: 58.3333333333%;
+  }
+
+  .gov-grid-item[size-lg="8/12"] {
+    width: 66.6666666667%;
+  }
+
+  .gov-grid-item[size-lg="9/12"] {
+    width: 75%;
+  }
+
+  .gov-grid-item[size-lg="10/12"] {
+    width: 83.3333333333%;
+  }
+
+  .gov-grid-item[size-lg="11/12"] {
+    width: 91.6666666667%;
+  }
+
+  .gov-grid-item[size-lg="12/12"] {
+    width: 100%;
+  }
+}
+@media (min-width: 75em) {
+  .gov-grid-item[size-xl="1/12"] {
+    width: 8.3333333333%;
+  }
+
+  .gov-grid-item[size-xl="2/12"] {
+    width: 16.6666666667%;
+  }
+
+  .gov-grid-item[size-xl="3/12"] {
+    width: 25%;
+  }
+
+  .gov-grid-item[size-xl="4/12"] {
+    width: 33.3333333333%;
+  }
+
+  .gov-grid-item[size-xl="5/12"] {
+    width: 41.6666666667%;
+  }
+
+  .gov-grid-item[size-xl="6/12"] {
+    width: 50%;
+  }
+
+  .gov-grid-item[size-xl="7/12"] {
+    width: 58.3333333333%;
+  }
+
+  .gov-grid-item[size-xl="8/12"] {
+    width: 66.6666666667%;
+  }
+
+  .gov-grid-item[size-xl="9/12"] {
+    width: 75%;
+  }
+
+  .gov-grid-item[size-xl="10/12"] {
+    width: 83.3333333333%;
+  }
+
+  .gov-grid-item[size-xl="11/12"] {
+    width: 91.6666666667%;
+  }
+
+  .gov-grid-item[size-xl="12/12"] {
+    width: 100%;
+  }
+}

package/dist/collection/components/gov-grid/gov-grid-item.js

@@ -0,0 +1,119 @@
+import { h, Host } from "@stencil/core";
+import { GridItemClass } from "./constants";
+import { govHost } from "../../helpers/Dom/template";
+export class GovGridItem {
+  constructor() {
+    this.size = "12/12";
+    this.sizeSm = undefined;
+    this.sizeMd = undefined;
+    this.sizeLg = undefined;
+    this.sizeXl = undefined;
+    this.h = govHost(this.host);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(GridItemClass.root), role: "listitem", size: this.size, "size-sm": this.sizeSm, "size-md": this.sizeMd, "size-lg": this.sizeLg, "size-xl": this.sizeXl }, h("slot", null)));
+  }
+  static get is() { return "gov-grid-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-grid-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-grid-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cell size as a fraction of 1/12 of the grid size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"12/12\""
+      },
+      "sizeSm": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cell size for SM media query and up as a fraction of 12 of the grid size"
+        },
+        "attribute": "size-sm",
+        "reflect": false
+      },
+      "sizeMd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cell size for MD media query and up as a fraction of 12 of the grid size"
+        },
+        "attribute": "size-md",
+        "reflect": false
+      },
+      "sizeLg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cell size for LG media query and up as a fraction of 12 of the grid size"
+        },
+        "attribute": "size-lg",
+        "reflect": false
+      },
+      "sizeXl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Cell size for XL media query and up as a fraction of 12 of the grid size"
+        },
+        "attribute": "size-xl",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-grid-item.js.map

package/dist/collection/components/gov-grid/gov-grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-grid-item.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAOpD,MAAM,OAAO,WAAW;EAGvB;gBAQgC,OAAO;;;;;IAPtC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAwBD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EACzC,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM;MACpB,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\"\nimport { GridItemClass } from \"./constants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\n\n@Component({\n\ttag: \"gov-grid-item\",\n\tstyleUrl: \"gov-grid-item.scss\",\n})\nexport class GovGridItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovGridItemElement\n\t/**\n\t * Cell size as a fraction of 1/12 of the grid size\n\t */\n\t@Prop() readonly size: string = \"12/12\"\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({attribute: 'size-sm'}) readonly sizeSm: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({attribute: 'size-md'}) readonly sizeMd: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({attribute: 'size-lg'}) readonly sizeLg: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({attribute: 'size-xl'}) readonly sizeXl: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(GridItemClass.root)}\n\t\t\t\trole=\"listitem\"\n\t\t\t\tsize={this.size}\n\t\t\t\tsize-sm={this.sizeSm}\n\t\t\t\tsize-md={this.sizeMd}\n\t\t\t\tsize-lg={this.sizeLg}\n\t\t\t\tsize-xl={this.sizeXl}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}