@ukho/admiralty-core 0.0.0

package/dist/collection/components/filter/filter.css

@@ -0,0 +1,277 @@
+@charset "UTF-8";
+/* 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 */
+/* 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;
+  }
+}
+
+* {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 300;
+  color: #333333;
+}
+@media (max-width: 1023px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+a {
+  color: #09315b;
+}
+a:focus {
+  outline: 3px solid #ffdd00;
+  outline-offset: 1px;
+}
+
+h1 {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 48px;
+  line-height: 60px;
+  margin: 0 0 30px 0;
+}
+@media (max-width: 1023px) {
+  h1 {
+    font-size: 46px;
+    line-height: 54px;
+  }
+}
+
+h2, .filter-heading .filter-title {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 36px;
+  line-height: 48px;
+  margin-bottom: 18px;
+}
+@media (max-width: 1023px) {
+  h2, .filter-heading .filter-title {
+    font-size: 34px;
+    line-height: 42px;
+  }
+}
+
+h3,
+h4,
+h5 {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 21px;
+  line-height: 30px;
+  margin-bottom: 12px;
+}
+@media (max-width: 1023px) {
+  h3,
+  h4,
+  h5 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+}
+
+h6 {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  color: #09315b;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 24px;
+  margin-bottom: 12px;
+}
+@media (max-width: 1023px) {
+  h6 {
+    font-size: 16px;
+  }
+}
+
+p {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  margin-bottom: 30px;
+}
+
+.intro {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 28px;
+  line-height: 36px;
+  margin-bottom: 30px;
+}
+@media (max-width: 1023px) {
+  .intro {
+    font-size: 26px;
+  }
+}
+
+.small {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 16px;
+}
+@media (max-width: 1023px) {
+  .small {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+blockquote {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  line-height: 30px;
+  width: 100%;
+  padding: 24px 18px;
+  border-left: 5px solid #09315b;
+  margin-bottom: 30px;
+  background: #eeeeee;
+}
+@media (max-width: 1023px) {
+  blockquote {
+    line-height: 24px;
+  }
+}
+
+ul {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  list-style: none;
+}
+ul a {
+  font-weight: 300;
+}
+ul li {
+  margin-bottom: 12px;
+}
+ul li:before {
+  content: "■";
+  font-size: 18px;
+  color: #09315b;
+  vertical-align: text-bottom;
+  margin-right: 12px;
+}
+@media (max-width: 1023px) {
+  ul li:before {
+    font-size: 8px;
+  }
+}
+
+ol {
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  list-style: none;
+  counter-reset: li;
+}
+ol a {
+  font-weight: 300;
+}
+ol li:before {
+  content: counter(li) ".";
+  color: #03284f;
+  font-size: 18px;
+  margin-right: 12px;
+}
+ol li {
+  counter-increment: li;
+  margin-bottom: 12px;
+}
+
+.white-text * {
+  color: #ffffff;
+}
+
+.filter-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.filter-heading .button-wrapper {
+  position: relative;
+  margin-left: 28px;
+  /* TODO: If reused, move class to button component */
+}
+.filter-heading .button-wrapper button.text-link {
+  background-color: unset;
+  border: none;
+  color: black;
+  padding: 0;
+  min-width: unset;
+  width: unset;
+  height: unset;
+  font-size: 16px;
+  text-decoration: underline;
+  font-weight: unset;
+  cursor: pointer;
+}
+.filter-heading .button-wrapper button.text-link:hover {
+  background-color: unset;
+  border: unset;
+}
+.filter-heading .button-wrapper button.text-link:focus {
+  outline: none;
+}
+.filter-heading .button-wrapper button.text-link:focus::after {
+  content: "";
+  position: absolute;
+  top: -3px;
+  bottom: 0;
+  right: -3px;
+  left: -3px;
+  box-shadow: 0 0 0 3px #ffdd00;
+}

package/dist/collection/components/filter/filter.js

@@ -0,0 +1,88 @@
+import { h } from '@stencil/core';
+/**
+ * @slot - 'admiralty-filter-group' components can be placed inside of this element to render groups of filter controls. You can also place any elements you wish
+ */
+export class FilterComponent {
+  constructor() {
+    this.onFilterCleared = (ev) => {
+      ev.preventDefault();
+      this.filterCleared.emit();
+    };
+    this.onFilterApplied = (ev) => {
+      ev.preventDefault();
+      this.filterApplied.emit();
+    };
+    this.filterTitle = 'Filter';
+  }
+  render() {
+    return (h("div", { class: "filter-container" }, h("div", { class: "filter-heading" }, h("div", { class: "filter-title" }, this.filterTitle), h("div", { class: "button-wrapper" }, h("button", { type: "reset", class: "text-link", "aria-label": "Clear selected filters", onClick: this.onFilterCleared }, "Clear"))), h("div", null, h("slot", null)), h("div", null, h("admiralty-button", { onClick: this.onFilterApplied }, "Apply filters"))));
+  }
+  static get is() { return "admiralty-filter"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["filter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "filterTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title of the filter"
+        },
+        "attribute": "filter-title",
+        "reflect": false,
+        "defaultValue": "'Filter'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "filterCleared",
+        "name": "filterCleared",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is emitted when the filters are cleared"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "filterApplied",
+        "name": "filterApplied",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is emitted when the filters are applied"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","sourceRoot":"","sources":["../../../src/components/filter/filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE;;GAEG;AAMH,MAAM,OAAO,eAAe;;IAgBlB,oBAAe,GAAG,CAAC,EAAS,EAAE,EAAE;MACtC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEM,oBAAe,GAAG,CAAC,EAAS,EAAE,EAAE;MACtC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC,CAAC;uBApBoB,QAAQ;;EAsB9B,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;MAC3B,WAAK,KAAK,EAAC,gBAAgB;QACzB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO;QAClD,WAAK,KAAK,EAAC,gBAAgB;UACzB,cAAQ,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,gBAAY,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,YAE/F,CACL,CACF;MACN;QACE,eAAa,CACT;MACN;QACE,wBAAkB,OAAO,EAAE,IAAI,CAAC,eAAe,oBAAkC,CAC7E,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-filter-group' components can be placed inside of this element to render groups of filter controls. You can also place any elements you wish\n */\n@Component({\n  tag: 'admiralty-filter',\n  styleUrl: 'filter.scss',\n  scoped: true,\n})\nexport class FilterComponent {\n  /**\n   * The title of the filter\n   */\n  @Prop() filterTitle = 'Filter';\n\n  /**\n   * Event that is emitted when the filters are cleared\n   */\n  @Event() filterCleared: EventEmitter<void>;\n\n  /**\n   * Event that is emitted when the filters are applied\n   */\n  @Event() filterApplied: EventEmitter<void>;\n\n  private onFilterCleared = (ev: Event) => {\n    ev.preventDefault();\n    this.filterCleared.emit();\n  };\n\n  private onFilterApplied = (ev: Event) => {\n    ev.preventDefault();\n    this.filterApplied.emit();\n  };\n\n  render() {\n    return (\n      <div class=\"filter-container\">\n        <div class=\"filter-heading\">\n          <div class=\"filter-title\">{this.filterTitle}</div>\n          <div class=\"button-wrapper\">\n            <button type=\"reset\" class=\"text-link\" aria-label=\"Clear selected filters\" onClick={this.onFilterCleared}>\n              Clear\n            </button>\n          </div>\n        </div>\n        <div>\n          <slot></slot>\n        </div>\n        <div>\n          <admiralty-button onClick={this.onFilterApplied}>Apply filters</admiralty-button>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/filter-group/filter-group.js

@@ -0,0 +1,46 @@
+import { h } from '@stencil/core';
+/**
+ * @slot - You can place any content inside this element that you wish to use inside your filter component.
+ */
+export class FilterGroupComponent {
+  constructor() {
+    this.groupTitle = undefined;
+  }
+  render() {
+    return (h("admiralty-expansion", { heading: this.groupTitle, "hide-border": true, expanded: true }, h("slot", null)));
+  }
+  static get is() { return "admiralty-filter-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["filter-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["filter-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "groupTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title of the filter group"
+        },
+        "attribute": "group-title",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=filter-group.js.map

package/dist/collection/components/filter-group/filter-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-group.js","sourceRoot":"","sources":["../../../src/components/filter-group/filter-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,oBAAoB;;;;EAM/B,MAAM;IACJ,OAAO,CACL,2BAAqB,OAAO,EAAE,IAAI,CAAC,UAAU,iBAAe,IAAI,EAAE,QAAQ,EAAE,IAAI;MAC9E,eAAa,CACO,CACvB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @slot - You can place any content inside this element that you wish to use inside your filter component.\n */\n@Component({\n  tag: 'admiralty-filter-group',\n  styleUrl: 'filter-group.scss',\n  scoped: true,\n})\nexport class FilterGroupComponent {\n  /**\n   * The title of the filter group\n   */\n  @Prop() groupTitle: string;\n\n  render() {\n    return (\n      <admiralty-expansion heading={this.groupTitle} hide-border={true} expanded={true}>\n        <slot></slot>\n      </admiralty-expansion>\n    );\n  }\n}\n"]}

package/dist/collection/components/footer/footer.css

@@ -0,0 +1,61 @@
+/* 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-footer footer {
+  border-top: #09315b 0.375rem solid;
+  height: 148px;
+  background: #eeeeee;
+  display: flex;
+  flex-direction: row;
+}
+admiralty-footer footer .footer-branding .footer-img {
+  padding: 24px;
+  height: 100%;
+  box-sizing: border-box;
+}
+admiralty-footer footer .footer-branding .footer-img img {
+  min-width: 186px;
+  max-width: 246px;
+  height: 100%;
+}
+admiralty-footer footer .footer-content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding-right: 30px;
+}
+admiralty-footer footer .footer-content .footer-links {
+  align-self: flex-end;
+  flex-grow: 1;
+  margin-top: 36px;
+}
+admiralty-footer footer .footer-content .footer-links a {
+  margin-left: 1.5rem;
+  font-weight: normal;
+}
+admiralty-footer footer .footer-content .footer-text {
+  align-self: flex-end;
+  margin-bottom: 24px;
+}
+admiralty-footer footer .footer-content .footer-text p {
+  text-align: right;
+  margin: 0;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 24px;
+  color: #333333;
+}

package/dist/collection/components/footer/footer.js

@@ -0,0 +1,104 @@
+import { h } from '@stencil/core';
+/**
+ * @slot - Footer links should be placed in the slot e.g.
+ * `<admiralty-link href="http://www.example.com">Privacy Policy</admiralty-link>`
+ */
+export class FooterComponent {
+  constructor() {
+    this.imageLink = 'https://www.admiralty.co.uk/';
+    this.imageSrc = 'svg/UKHO stacked logo.svg';
+    this.imageAlt = 'Admiralty Maritime Data Solutions | UK Hydrographic Office';
+    this.text = `© Crown copyright ${new Date().getFullYear()} UK Hydrographic Office`;
+  }
+  render() {
+    return (h("footer", null, h("div", { class: "footer-branding" }, h("div", { class: "footer-img" }, h("a", { href: this.imageLink }, h("img", { src: this.imageSrc, alt: this.imageAlt })))), h("div", { class: "footer-content" }, h("nav", { "aria-label": "Footer Links", class: "footer-links" }, h("slot", null)), h("div", { class: "footer-text" }, h("p", null, this.text)))));
+  }
+  static get is() { return "admiralty-footer"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["footer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["footer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "imageLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The URL that the image links to."
+        },
+        "attribute": "image-link",
+        "reflect": false,
+        "defaultValue": "'https://www.admiralty.co.uk/'"
+      },
+      "imageSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The source of the image displayed in the footer."
+        },
+        "attribute": "image-src",
+        "reflect": false,
+        "defaultValue": "'svg/UKHO stacked logo.svg'"
+      },
+      "imageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A description for the image displayed in the footer. This might be shown if the image\nfails to load or get read out by screen readers."
+        },
+        "attribute": "image-alt",
+        "reflect": false,
+        "defaultValue": "'Admiralty Maritime Data Solutions | UK Hydrographic Office'"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to display in the footer. The default value displays crown copyright, the\ncurrent year and `UK Hydrographic Office`."
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "`\u00A9 Crown copyright ${new Date().getFullYear()} UK Hydrographic Office`"
+      }
+    };
+  }
+}
+//# sourceMappingURL=footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/components/footer/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,eAAe;;qBAIN,8BAA8B;oBAI/B,2BAA2B;oBAK3B,4DAA4D;gBAKhE,qBAAqB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,yBAAyB;;EAErF,MAAM;IACJ,OAAO,CACL;MACE,WAAK,KAAK,EAAC,iBAAiB;QAC1B,WAAK,KAAK,EAAC,YAAY;UACrB,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS;YACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC7C,CACA,CACF;MACN,WAAK,KAAK,EAAC,gBAAgB;QACzB,yBAAgB,cAAc,EAAC,KAAK,EAAC,cAAc;UACjD,eAAa,CACT;QACN,WAAK,KAAK,EAAC,aAAa;UACtB,aAAI,IAAI,CAAC,IAAI,CAAK,CACd,CACF,CACC,CACV,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @slot - Footer links should be placed in the slot e.g.\n * `<admiralty-link href=\"http://www.example.com\">Privacy Policy</admiralty-link>`\n */\n@Component({\n  tag: 'admiralty-footer',\n  styleUrl: 'footer.scss',\n  shadow: false,\n})\nexport class FooterComponent {\n  /**\n   * The URL that the image links to.\n   */\n  @Prop() imageLink = 'https://www.admiralty.co.uk/';\n  /**\n   * The source of the image displayed in the footer.\n   */\n  @Prop() imageSrc = 'svg/UKHO stacked logo.svg';\n  /**\n   * A description for the image displayed in the footer. This might be shown if the image\n   * fails to load or get read out by screen readers.\n   */\n  @Prop() imageAlt = 'Admiralty Maritime Data Solutions | UK Hydrographic Office';\n  /**\n   * The text to display in the footer. The default value displays crown copyright, the\n   * current year and `UK Hydrographic Office`.\n   */\n  @Prop() text = `© Crown copyright ${new Date().getFullYear()} UK Hydrographic Office`;\n\n  render() {\n    return (\n      <footer>\n        <div class=\"footer-branding\">\n          <div class=\"footer-img\">\n            <a href={this.imageLink}>\n              <img src={this.imageSrc} alt={this.imageAlt} />\n            </a>\n          </div>\n        </div>\n        <div class=\"footer-content\">\n          <nav aria-label=\"Footer Links\" class=\"footer-links\">\n            <slot></slot>\n          </nav>\n          <div class=\"footer-text\">\n            <p>{this.text}</p>\n          </div>\n        </div>\n      </footer>\n    );\n  }\n}\n"]}