@ukic/web-components 2.0.0-alpha.121

package/dist/collection/components/ic-classification-banner/ic-classification-banner.css

@@ -0,0 +1,494 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-style: inherit;
+  vertical-align: baseline;
+}
+
+
+:host {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: var(--ic-space-lg);
+  z-index: var(--ic-overlay-z-index);
+}
+
+:host(.inline) {
+  position: static;
+  left: auto;
+  bottom: auto;
+}
+
+.classification-banner {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ic-space-xxxs) var(--ic-space-md);
+}
+
+.default {
+  background-color: var(--ic-classification-not-set);
+  color: var(--ic-classification-not-set-foreground);
+}
+
+.official,
+.official-sensitive {
+  background-color: var(--ic-classification-official);
+  color: var(--ic-classification-official-foreground);
+}
+
+.secret {
+  background-color: var(--ic-classification-secret);
+  color: var(--ic-classification-secret-foreground);
+}
+
+.top-secret {
+  background-color: var(--ic-classification-top-secret);
+  color: var(--ic-classification-top-secret-foreground);
+}
+
+.offscreen {
+  position: absolute;
+  left: -9999px;
+  background-color: #fff;
+  color: #000;
+  text-transform: none;
+}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js

@@ -0,0 +1,141 @@
+import { h, Host } from "@stencil/core";
+const classificationText = {
+  default: "protective marking not set",
+  official: "official",
+  "official-sensitive": "official sensitive",
+  secret: "secret",
+  "top-secret": "top secret",
+};
+export class ClassificationBanner {
+  constructor() {
+    this.additionalSelectors = "";
+    this.classification = "default";
+    this.country = "uk";
+    this.inline = false;
+    this.upTo = false;
+  }
+  render() {
+    const { classification, inline, country, upTo, additionalSelectors } = this;
+    return (h(Host, { class: { ["inline"]: inline } }, h("banner", { "aria-label": "Protective marking", class: {
+        ["classification-banner"]: true,
+        [`${classification}`]: classification,
+      }, role: "contentinfo" }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { variant: "caption-uppercase" }, classification === "default"
+      ? classificationText[classification]
+      : `${upTo ? "up to" : ""} 
+               ${country !== "" ? country : ""} 
+               ${classificationText[classification]} 
+               ${additionalSelectors !== "" ? additionalSelectors : ""}`))));
+  }
+  static get is() { return "ic-classification-banner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-classification-banner.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-classification-banner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "additionalSelectors": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Additional information to display after the classification"
+        },
+        "attribute": "additional-selectors",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "classification": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcProtectiveMarkings",
+          "resolved": "\"default\" | \"official\" | \"official-sensitive\" | \"secret\" | \"top-secret\"",
+          "references": {
+            "IcProtectiveMarkings": {
+              "location": "import",
+              "path": "./ic-classification-banner.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The classification level to be displayed also determines the banner and text colour"
+        },
+        "attribute": "classification",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "country": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional text displayed before classification to specify relevant country/countries"
+        },
+        "attribute": "country",
+        "reflect": false,
+        "defaultValue": "\"uk\""
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the banner appears inline with the page or sticks to the bottom of the page"
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "upTo": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optionally display \"Up to\" before classification and country if set"
+        },
+        "attribute": "up-to",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=ic-classification-banner.js.map

package/dist/collection/components/ic-classification-banner/ic-classification-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-classification-banner.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,kBAAkB,GAAG;EACzB,OAAO,EAAE,4BAA4B;EACrC,QAAQ,EAAE,UAAU;EACpB,oBAAoB,EAAE,oBAAoB;EAC1C,MAAM,EAAE,QAAQ;EAChB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAOF,MAAM,OAAO,oBAAoB;;+BAIQ,EAAE;0BAIO,SAAS;mBAI9B,IAAI;kBAIJ,KAAK;gBAIP,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;IAE5E,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE;MACjC,4BACa,oBAAoB,EAC/B,KAAK,EAAE;UACL,CAAC,uBAAuB,CAAC,EAAE,IAAI;UAC/B,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,cAAc;SACtC,EACD,IAAI,EAAC,aAAa;QAEjB,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAC9B,YAAM,KAAK,EAAC,WAAW;;UACmB,GAAG,CACtC,CACR,CAAC,CAAC,CAAC,IAAI;QACR,qBAAe,OAAO,EAAC,mBAAmB,IACvC,cAAc,KAAK,SAAS;UAC3B,CAAC,CAAC,kBAAkB,CAAC,cAAc,CAAC;UACpC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBACrB,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;iBAC7B,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,CAC9C,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * Additional information to display after the classification\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed also determines the banner and text colour\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * Optional text displayed before classification to specify relevant country/countries\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * Determines whether the banner appears inline with the page or sticks to the bottom of the page\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * Optionally display \"Up to\" before classification and country if set\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { classification, inline, country, upTo, additionalSelectors } = this;\n\n    return (\n      <Host class={{ [\"inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n          role=\"contentinfo\"\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country !== \"\" ? country : \"\"} \n               ${classificationText[classification]} \n               ${additionalSelectors !== \"\" ? additionalSelectors : \"\"}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.test.a11y.js

@@ -0,0 +1,11 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+describe("ic-classification-banner", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-classification-banner />`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-classification-banner.test.a11y.js.map

package/dist/collection/components/ic-classification-banner/ic-classification-banner.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-classification-banner.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;EACxC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,8BAA8B,CAAC,CAAC;IACzD,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"ic-classification-banner\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-classification-banner />`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-classification-banner.types.js.map

package/dist/collection/components/ic-classification-banner/ic-classification-banner.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-classification-banner.types.js","sourceRoot":"","sources":["../../../src/components/ic-classification-banner/ic-classification-banner.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcProtectiveMarkings =\n  | \"default\"\n  | \"official\"\n  | \"official-sensitive\"\n  | \"secret\"\n  | \"top-secret\";\n"]}