@ukho/admiralty-core 0.0.0

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

@@ -0,0 +1,72 @@
+.form-control {
+  font-size: 18px;
+  position: relative;
+  display: inline-block;
+}
+.form-control input[type=checkbox] {
+  box-sizing: border-box;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+.form-control input[type=checkbox]:checked + label::after {
+  content: "";
+}
+.form-control label {
+  position: relative;
+  display: inline-block;
+  padding-left: 42px;
+  margin-bottom: 14px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  line-height: 30px;
+}
+.form-control label.disabled {
+  cursor: default;
+  pointer-events: none;
+}
+.form-control label::before, .form-control label::after {
+  position: absolute;
+  content: none;
+  display: inline-block;
+}
+.form-control label::before {
+  content: "";
+  height: 26px;
+  width: 26px;
+  border: 2px solid #03284f;
+  left: 0;
+  top: 0;
+  background-color: #fff;
+}
+.form-control label::after {
+  height: 8px;
+  width: 15px;
+  border-left: 3px solid;
+  border-bottom: 3px solid;
+  transform: rotate(-45deg);
+  color: #09315b;
+  left: 6px;
+  top: 7px;
+}
+.form-control.right-align label {
+  padding-left: unset;
+  padding-right: 35px;
+}
+.form-control.right-align label::before {
+  left: unset;
+  right: 0;
+}
+.form-control.right-align label::after {
+  left: unset;
+  right: 6px;
+}

package/dist/collection/components/checkbox/checkbox.js

@@ -0,0 +1,222 @@
+import { Host, h } from '@stencil/core';
+export class CheckboxComponent {
+  constructor() {
+    this.inputId = `admiralty-${checkboxIds++}`;
+    this.onBlur = () => {
+      this.checkboxBlur.emit();
+    };
+    this.onClick = (ev) => {
+      if (!this.disabled) {
+        ev.preventDefault();
+        this.checked = !this.checked;
+      }
+    };
+    this.onFocus = () => {
+      this.checkboxFocus.emit();
+    };
+    this.checkboxRight = false;
+    this.disabled = false;
+    this.name = this.inputId;
+    this.checked = false;
+    this.value = undefined;
+    this.labelText = null;
+  }
+  checkedChanged(isChecked) {
+    this.checkboxChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  render() {
+    const { checked, checkboxRight, disabled, inputId, labelText, name } = this;
+    return (h(Host, null, h("div", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: { 'form-control': true, 'right-align': checkboxRight } }, h("input", { "aria-checked": `${checked}`, type: "checkbox", onBlur: () => this.onBlur(), onFocus: () => this.onFocus(), id: inputId, disabled: disabled, name: name, checked: checked }), h("label", { class: { disabled: disabled }, onClick: this.onClick, htmlFor: inputId }, labelText))));
+  }
+  static get is() { return "admiralty-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checkboxRight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the checkbox should be positioned to the right of the label."
+        },
+        "attribute": "checkbox-right",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This dictates whether the form field is disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the control, which is submitted with the form data."
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "this.inputId"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the checkbox is selected."
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any | null",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "labelText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text that's displayed alongside the checkbox"
+        },
+        "attribute": "label-text",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "checkboxChange",
+        "name": "checkboxChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "event",
+              "text": "radioChanges"
+            }],
+          "text": "Event is fired when the form control changes state"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "checkboxFocus",
+        "name": "checkboxFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "event",
+              "text": "checkboxFocus"
+            }],
+          "text": "Event is fired when the form control gains focus"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "checkboxBlur",
+        "name": "checkboxBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "event",
+              "text": "checkboxBlur"
+            }],
+          "text": "Event is fired when the form control loses focus"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "checkedChanged"
+      }];
+  }
+}
+let checkboxIds = 0;
+//# sourceMappingURL=checkbox.js.map

package/dist/collection/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,iBAAiB;;IACpB,YAAO,GAAG,aAAa,WAAW,EAAE,EAAE,CAAC;IA8DvC,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,EAAO,EAAE,EAAE;MAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;OAC9B;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC,CAAC;yBAtE+B,KAAK;oBAKV,KAAK;gBAKV,IAAI,CAAC,OAAO;mBAKS,KAAK;;qBAcrB,IAAI;;EAqBhC,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;MACvB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;EACL,CAAC;EAiBD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE5E,OAAO,CACL,EAAC,IAAI;MACH,2BAAmB,GAAG,OAAO,EAAE,iBAAe,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE;QACnJ,6BACgB,GAAG,OAAO,EAAE,EAC1B,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC7B,EAAE,EAAE,OAAO,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB;QACF,aAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,IAC1E,SAAS,CACJ,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,WAAW,GAAG,CAAC,CAAC","sourcesContent":["import { Component, EventEmitter, Event, Host, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  private inputId = `admiralty-${checkboxIds++}`;\n\n  /**\n   * Whether the checkbox should be positioned to the right of the label.\n   */\n  @Prop() checkboxRight: boolean = false;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the checkbox is selected.\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value: any | null;\n\n  /**\n   * The text that's displayed alongside the checkbox\n   */\n  @Prop() labelText: string = null;\n\n  /**\n   * Event is fired when the form control changes state\n   * @event radioChanges\n   */\n  @Event() checkboxChange: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control gains focus\n   * @event checkboxFocus\n   */\n  @Event() checkboxFocus: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event checkboxBlur\n   */\n  @Event() checkboxBlur: EventEmitter<any>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.checkboxChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onBlur = () => {\n    this.checkboxBlur.emit();\n  };\n\n  private onClick = (ev: any) => {\n    if (!this.disabled) {\n      ev.preventDefault();\n      this.checked = !this.checked;\n    }\n  };\n\n  private onFocus = () => {\n    this.checkboxFocus.emit();\n  };\n\n  render() {\n    const { checked, checkboxRight, disabled, inputId, labelText, name } = this;\n\n    return (\n      <Host>\n        <div aria-checked={`${checked}`} aria-hidden={disabled ? 'true' : null} role=\"checkbox\" class={{ 'form-control': true, 'right-align': checkboxRight }}>\n          <input\n            aria-checked={`${checked}`}\n            type=\"checkbox\"\n            onBlur={() => this.onBlur()}\n            onFocus={() => this.onFocus()}\n            id={inputId}\n            disabled={disabled}\n            name={name}\n            checked={checked}\n          />\n          <label class={{ disabled: disabled }} onClick={this.onClick} htmlFor={inputId}>\n            {labelText}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"]}

package/dist/collection/components/colour-block/colour-block.css

@@ -0,0 +1,53 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+admiralty-colour-block .colourBlock {
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  padding: 30px 18px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+admiralty-colour-block .colourBlock .content {
+  flex-grow: 1;
+}
+admiralty-colour-block .colourBlock .clickAction {
+  background-color: unset;
+  align-self: flex-end;
+  cursor: pointer;
+}
+admiralty-colour-block .colourBlock .clickAction h3 {
+  margin-bottom: 0px;
+}
+admiralty-colour-block .colourBlock.admiralty-blue {
+  background-color: #09315b;
+}
+admiralty-colour-block .colourBlock.admiralty-blue * {
+  color: #ffffff;
+}
+admiralty-colour-block .colourBlock.teal {
+  background-color: #007e97;
+}
+admiralty-colour-block .colourBlock.teal * {
+  color: #ffffff;
+}
+admiralty-colour-block .colourBlock.bright-blue {
+  background-color: #65c4db;
+  color: #09315b;
+}

package/dist/collection/components/colour-block/colour-block.js

@@ -0,0 +1,141 @@
+import { h } from '@stencil/core';
+import { ButtonVariant } from '../button/button.types';
+export class ColourBlockComponent {
+  constructor() {
+    this.width = undefined;
+    this.height = undefined;
+    this.heading = undefined;
+    this.colour = 'admiralty-blue';
+    this.clickAction = undefined;
+    this.actionText = undefined;
+  }
+  render() {
+    return (h("div", { class: {
+        colourBlock: true,
+        [this.colour]: true,
+      }, style: {
+        height: this.height ? `${this.height}px` : null,
+        width: this.width ? `${this.width}px` : null,
+      } }, h("h2", null, this.heading), h("div", { class: {
+        'content': true,
+        'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',
+      } }, h("slot", null)), this.clickAction && this.actionText ? (h("admiralty-button", { variant: ButtonVariant.Text, class: "clickAction", onClick: this.clickAction.bind(this) }, h("h3", null, this.actionText))) : null));
+  }
+  static get is() { return "admiralty-colour-block"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["colour-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["colour-block.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The width in pixels of the component."
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "height": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The height in pixels of the component."
+        },
+        "attribute": "height",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The heading text to display."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "colour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'admiralty-blue' | 'teal' | 'bright-blue'",
+          "resolved": "\"admiralty-blue\" | \"bright-blue\" | \"teal\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The background colour of the component."
+        },
+        "attribute": "colour",
+        "reflect": false,
+        "defaultValue": "'admiralty-blue'"
+      },
+      "clickAction": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => any",
+          "resolved": "() => any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The function to call when the action button is pressed."
+        }
+      },
+      "actionText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to display on the action button"
+        },
+        "attribute": "action-text",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=colour-block.js.map

package/dist/collection/components/colour-block/colour-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-block.js","sourceRoot":"","sources":["../../../src/components/colour-block/colour-block.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAOvD,MAAM,OAAO,oBAAoB;;;;;kBAgB6B,gBAAgB;;;;EAU5E,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI;OACpB,EACD,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,IAAI;QAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI;OAC7C;MAED,cAAK,IAAI,CAAC,OAAO,CAAM;MACvB,WACE,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,gBAAgB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM;SACzE;QAED,eAAa,CACT;MACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACrC,wBAAkB,OAAO,EAAE,aAAa,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QACrG,cAAK,IAAI,CAAC,UAAU,CAAM,CACT,CACpB,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from '../button/button.types';\n\n@Component({\n  tag: 'admiralty-colour-block',\n  styleUrl: 'colour-block.scss',\n  shadow: false,\n})\nexport class ColourBlockComponent {\n  /**\n   * The width in pixels of the component.\n   */\n  @Prop() width: number;\n  /**\n   * The height in pixels of the component.\n   */\n  @Prop() height: number;\n  /**\n   * The heading text to display.\n   */\n  @Prop() heading: string;\n  /**\n   * The background colour of the component.\n   */\n  @Prop() colour: 'admiralty-blue' | 'teal' | 'bright-blue' = 'admiralty-blue';\n  /**\n   * The function to call when the action button is pressed.\n   */\n  @Prop() clickAction: () => any;\n  /**\n   * The text to display on the action button\n   */\n  @Prop() actionText: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          colourBlock: true,\n          [this.colour]: true,\n        }}\n        style={{\n          height: this.height ? `${this.height}px` : null,\n          width: this.width ? `${this.width}px` : null,\n        }}\n      >\n        <h2>{this.heading}</h2>\n        <div\n          class={{\n            'content': true,\n            'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',\n          }}\n        >\n          <slot></slot>\n        </div>\n        {this.clickAction && this.actionText ? (\n          <admiralty-button variant={ButtonVariant.Text} class=\"clickAction\" onClick={this.clickAction.bind(this)}>\n            <h3>{this.actionText}</h3>\n          </admiralty-button>\n        ) : null}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/dialogue/dialogue.css

@@ -0,0 +1,105 @@
+/* Device Sizes - matching layout breakpoints */
+@media (max-width: 1023px) {
+  .desktop-only {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .not-desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .tablet-only {
+    display: none;
+  }
+}
+@media (max-width: 479px) and (min-width: 0px) {
+  .tablet-only {
+    display: none;
+  }
+}
+
+@media (max-width: 479px) and (min-width: 0px) {
+  .tablet-or-desktop {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .phone-or-tablet {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .phone-only {
+    display: none;
+  }
+}
+@media (max-width: 1023px) and (min-width: 480px) {
+  .phone-only {
+    display: none;
+  }
+}
+
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+.dialogue {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+  padding: 30px 18px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+@media (max-width: 1023px) {
+  .dialogue {
+    padding: 24px 18px;
+  }
+}
+.dialogue .dialogue-title {
+  color: #09315b;
+  font-size: 20px;
+  font-weight: normal;
+  line-height: 30px;
+  display: flex;
+  align-items: center;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  margin-bottom: 12px;
+}
+.dialogue .dialogue-title .dialogue-title-icon {
+  margin-right: 12px;
+}
+.dialogue.info {
+  border-left: 5px solid #0177c1;
+  background-color: #e0ecf3;
+}
+.dialogue.error {
+  border-left: 5px solid #e20d0d;
+  background-color: #f7e1e1;
+}
+.dialogue.success {
+  border-left: 5px solid #47a234;
+  background-color: #e7f1e5;
+}
+.dialogue.warning {
+  border-left: 5px solid #e3660e;
+  background-color: #f8ede3;
+}

package/dist/collection/components/dialogue/dialogue.js

@@ -0,0 +1,78 @@
+import { h } from '@stencil/core';
+import { faCheck, faCircleInfo, faExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+export class DialogueComponent {
+  constructor() {
+    this.type = 'info';
+    this.heading = undefined;
+  }
+  getIconNameForType() {
+    switch (this.type) {
+      case 'info':
+        return faCircleInfo;
+      case 'warning':
+        return faTriangleExclamation;
+      case 'success':
+        return faCheck;
+      case 'error':
+        return faExclamation;
+    }
+  }
+  render() {
+    return (h("section", { class: {
+        dialogue: true,
+        [this.type]: true,
+      } }, h("div", { class: "dialogue-title" }, h("admiralty-icon", { class: "dialogue-title-icon", "icon-name": this.getIconNameForType().iconName }), this.heading), h("slot", null)));
+  }
+  static get is() { return "admiralty-dialogue"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dialogue.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dialogue.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'info' | 'warning' | 'success' | 'error'",
+          "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of dialogue box to render."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'info'"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The heading to display."
+        },
+        "attribute": "heading",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=dialogue.js.map