@itcenteratunihelsinki/huds-lib 0.8.63 → 0.8.64

package/dist/collection/components/hy-hero/hy-hero.css

@@ -67,7 +67,7 @@
 }
 
 @media (min-width: 60rem) {
-  .hy-hero {
+  .hy-hero:not(.hy-hero--full-image) {
     margin-top: 32px;
   }
 }
@@ -79,7 +79,7 @@
 }
 
 @media (min-width: 75.0625rem) {
-  .without-sidebar .hy-hero {
+  .without-sidebar .hy-hero:not(.hy-hero--full-image) {
     max-width: 1216px;
     margin-right: auto;
     margin-left: auto;
@@ -87,14 +87,14 @@
 }
 
 @media (min-width: 75.0625rem) {
-  .with-sidebar .hy-hero {
+  .with-sidebar:not(.hy-hero--full-image) .hy-hero {
     padding-left: 32px;
     padding-right: 32px;
   }
 }
 
 @media (min-width: 1601px) {
-  .with-sidebar .hy-hero {
+  .with-sidebar:not(.hy-hero--full-image) .hy-hero {
     padding-right: 0;
     padding-left: 0;
     max-width: 1216px;
@@ -103,6 +103,284 @@
   }
 }
 
+.hy-hero--full-image {
+  --dark-bg: rgba(0, 0, 0, 0.55);
+  --light-bg: rgba(255, 255, 255, 0.50);
+  --dark-text: var(--brand-main-nearly-black);
+  --light-text: var(--grayscale-white);
+  border-bottom: 1px solid var(--grayscale-medium-dark);
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image {
+    border-bottom: 4px solid var(--grayscale-black);
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+}
+
+.hy-hero--full-image .hy-hero__container {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 1fr;
+}
+
+.hy-hero--full-image .hy-hero__image-container {
+  grid-column: 1/-1;
+  grid-row: 1/-1;
+  -o-object-fit: cover;
+  object-fit: cover;
+  padding: 0;
+  width: 100%;
+}
+
+.hy-hero--full-image .hy-hero__image-container img {
+  aspect-ratio: 16/8;
+}
+
+.hy-hero--full-image .hy-hero__content-container {
+  padding: 0;
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image .hy-hero__content-container {
+    align-self: center;
+    grid-column: 1/3;
+    grid-row: 1/-1;
+    margin-left: 32px;
+    max-width: 95%;
+    z-index: 2;
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .hy-hero--full-image .hy-hero__content-container {
+    margin-left: 0;
+  }
+}
+
+.hy-hero--full-image .hy-hero__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px 16px 32px 16px;
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image .hy-hero__content {
+    margin-left: 32px;
+    gap: 24px;
+    padding: 32px;
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .hy-hero--full-image .hy-hero__content {
+    margin-left: 64px;
+    gap: 32px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .hy-hero--full-image .hy-hero__content {
+    margin-left: 96px;
+  }
+}
+
+.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg] {
+  -webkit-backdrop-filter: blur(250px);
+  backdrop-filter: blur(250px);
+  background-color: var(--grayscale-white);
+  color: var(--dark-text);
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image .hy-hero__content[data-text-color=dark_text_light_bg] {
+    background: var(--light-bg);
+  }
+}
+
+.hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg] {
+  -webkit-backdrop-filter: blur(250px);
+  backdrop-filter: blur(250px);
+  background: var(--grayscale-black);
+  color: var(--light-text);
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image .hy-hero__content[data-text-color=light_text_dark_bg] {
+    background: var(--dark-bg);
+  }
+}
+
+.hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg] {
+  background-color: var(--grayscale-white);
+  color: var(--dark-text);
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image .hy-hero__content[data-text-color=dark_text_no_bg] {
+    background: transparent;
+    text-shadow: 0 0 5px var(--grayscale-white);
+  }
+}
+
+.hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg] {
+  background-color: var(--grayscale-black);
+  color: var(--light-text);
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image .hy-hero__content[data-text-color=light_text_no_bg] {
+    background: transparent;
+    text-shadow: 0 0 5px var(--grayscale-black);
+  }
+}
+
+.hy-hero--full-image .hy-hero__subtitle {
+  font-family: var(--main-font-family);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.2;
+  position: relative;
+}
+
+.hy-hero--full-image .hy-hero__subtitle::after {
+  aspect-ratio: 1;
+  background-color: currentColor;
+  bottom: -10px;
+  content: "";
+  display: block;
+  height: 4px;
+  left: 0;
+  position: absolute;
+  width: 64px;
+}
+
+@media (min-width: 60rem) {
+  .hy-hero--full-image .hy-hero__subtitle {
+    font-size: 20px;
+  }
+}
+
+.hy-hero--full-image h2.hy-hero__title.hy-heading__hero {
+  color: inherit !important;
+  font-family: var(--main-font-family);
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+@media (min-width: 75.0625rem) {
+  .hy-hero--full-image h2.hy-hero__title.hy-heading__hero {
+    font-size: 36px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .hy-hero--full-image h2.hy-hero__title.hy-heading__hero {
+    font-size: 64px;
+  }
+}
+
+.hy-hero--full-image .hy-hero__description {
+  font-family: var(--main-font-family);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+}
+
+@media (min-width: 1601px) {
+  .hy-hero--full-image .hy-hero__description {
+    font-size: 17px;
+  }
+}
+
+.hy-hero--full-image .hy-hero__actions {
+  margin: 0;
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link {
+  --light-bg: var(--grayscale-white);
+  --dark-bg: var(--grayscale-black);
+  --light-text: var(--grayscale-white);
+  --dark-text: var(--grayscale-black);
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: var(--main-font-family);
+  font-size: 16px;
+  font-weight: 700;
+  gap: 8px;
+  line-height: 18px;
+  padding: 13px 16px;
+  text-decoration: none;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link:hover {
+  text-decoration: underline;
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link svg {
+  width: 16px;
+  height: 16px;
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg] {
+  background: var(--dark-bg);
+  color: var(--light-text);
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_light_bg] svg {
+  fill: var(--light-text);
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg] {
+  background: var(--light-bg);
+  color: var(--dark-text);
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_dark_bg] svg {
+  fill: var(--dark-text);
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg] {
+  background: var(--dark-bg);
+  color: var(--light-text);
+  text-shadow: none;
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=dark_text_no_bg] svg {
+  fill: var(--light-text);
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg] {
+  background: var(--light-bg);
+  color: var(--dark-text);
+  text-shadow: none;
+}
+
+.hy-hero--full-image .hy-hero__actions .hy-hero__link[data-text-color=light_text_no_bg] svg {
+  fill: var(--dark-text);
+}
+
+.hy-hero--full-image .hy-image__image {
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
 @media (min-width: 60rem) {
   .hy-hero--white {
     margin-top: 0;

package/dist/collection/components/hy-hero/hy-hero.js

@@ -9,6 +9,7 @@ export class HyHero {
     this.heroGroupType = HeroGroupTypeVariant.default;
     this.colorVariant = HeroColorVariant.blue;
     this.sizeVariant = HeroSizeVariant.large;
+    this.heroTextColor = null;
     this.image = undefined;
     this.imageHeight = null;
     this.imageWidth = null;
@@ -17,6 +18,7 @@ export class HyHero {
     this.hasShortcuts = false;
     this.heading = undefined;
     this.description = undefined;
+    this.subtitle = undefined;
     this.url = undefined;
     this.urlTitle = undefined;
     this.scLabel = undefined;
@@ -26,6 +28,7 @@ export class HyHero {
   async componentWillLoad() {
     this._sourceSet = await jsonParserWorker(this.sourceSet);
   }
+  // TODO: Refactor, find way to get rid of this.
   handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {
     const heroContentContainerElement = heroElement.getElementsByClassName("hy-hero__content-container")[0];
     if (heroSizeVariant === "small") {
@@ -45,10 +48,23 @@ export class HyHero {
       }
     }
   }
+  createImageElement(props, srcSet, aspectRatio) {
+    return (h("div", { class: `hy-hero__image-container`, style: aspectRatio }, props.image &&
+      (srcSet ? (h("picture", null, srcSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: props.disableLazy ? "eager" : "lazy", alt: props.imageAltText, class: `hy-image__image`, src: props.image, height: props.imageHeight, width: props.imageWidth }))) : (h("img", { loading: props.disableLazy ? "eager" : "lazy", alt: props.imageAltText, class: `hy-image__image`, src: props.image, height: props.imageHeight, width: props.imageWidth })))));
+  }
+  // TODO: Refactor, is this still even used?
+  setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {
+    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+    return {
+      "--aspectRatio": `${aspect}%`,
+      //"aspect-ratio": `${aspectRatioWidth} / ${aspectRatioHeight}` as "aspectRatio",
+    };
+  }
   render() {
     let variant = CtaLinkButtonVariants.heroWhite;
     let colorVariantValue = this.colorVariant;
     let heroTypeValue = this.heroType;
+    //TODO: Refactor
     if (this.heroType === "minor_landing") {
       colorVariantValue = HeroColorVariant.white;
       heroTypeValue = HeroTypeVariant.landing;
@@ -68,18 +84,10 @@ export class HyHero {
       `hy-hero--${this.heroGroupType}`,
       `hy-hero--${colorVariantValue}`,
       `hy-hero--${this.sizeVariant}`,
+      this.hasShortcuts ? 'has-shortcuts' : '',
     ];
     const heroTitleClasses = ["hy-hero__title", "hy-heading__hero"].join(" ");
-    // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.
-    if (this.hasShortcuts) {
-      hyHeroClasses.push("has-shortcuts");
-    }
-    const aspectRatioWidth = 16;
-    const aspectRatioHeight = 10;
-    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
-    const aspectRatio = {
-      "--aspectRatio": `${aspect}%`,
-    };
+    // TODO: Refactor, find way to get rid of this.
     window.onload = () => {
       const heroElement = document.getElementsByClassName("hy-hero")[0];
       this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);
@@ -88,12 +96,14 @@ export class HyHero {
         timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);
       });
     };
-    if (heroTypeValue === "front_page") {
-      return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
-        (this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image, height: this.imageHeight, width: this.imageWidth }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image, height: this.imageHeight, width: this.imageWidth })))), h("div", { class: `hy-hero__spacer-box` }), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
+    if (heroTypeValue === "front_page" && this.sizeVariant !== 'full-image') {
+      return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), h("div", { class: `hy-hero__spacer-box` }), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
+    }
+    if (this.sizeVariant === 'full-image') {
+      const linkTarget = this.isExternal ? '_blank' : '_self';
+      return (h("div", { class: `hy-hero hy-hero--full-image` }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8)), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content`, "data-text-color": this.heroTextColor }, this.subtitle && h("span", { class: `hy-hero__subtitle` }, this.subtitle), h("h2", { innerHTML: this.heading, class: heroTitleClasses }), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("a", { class: "hy-hero__link", href: this.url, "aria-label": this.scLabel, target: linkTarget, "data-text-color": this.heroTextColor }, this.urlTitle, h("hy-icon", { icon: "hy-icon-arrow-right", size: 16 })))))))));
     }
-    return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
-      (this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image, height: this.imageHeight, width: this.imageWidth }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image, height: this.imageHeight, width: this.imageWidth })))), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
+    return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, this.createImageElement(this, this._sourceSet, this.setAspectRatio()), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
   }
   static get is() { return "hy-hero"; }
   static get originalStyleUrls() {
@@ -182,7 +192,7 @@ export class HyHero {
         "mutable": false,
         "complexType": {
           "original": "HeroSizeVariant",
-          "resolved": "HeroSizeVariant.large | HeroSizeVariant.small",
+          "resolved": "HeroSizeVariant.fullImage | HeroSizeVariant.large | HeroSizeVariant.small",
           "references": {
             "HeroSizeVariant": {
               "location": "import",
@@ -200,6 +210,29 @@ export class HyHero {
         "reflect": false,
         "defaultValue": "HeroSizeVariant.large"
       },
+      "heroTextColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HeroTextColor",
+          "resolved": "HeroTextColor.dark_text_light_bg | HeroTextColor.dark_text_no_bg | HeroTextColor.light_text_dark_bg | HeroTextColor.light_text_no_bg",
+          "references": {
+            "HeroTextColor": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hero-text-color",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "image": {
         "type": "string",
         "mutable": false,
@@ -341,6 +374,23 @@ export class HyHero {
         "attribute": "description",
         "reflect": false
       },
+      "subtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "subtitle",
+        "reflect": false
+      },
       "url": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/hy-hero/hy-hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"hy-hero.js","sourceRoot":"","sources":["../../../src/components/hy-hero/hy-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n  CtaLinkButtonVariants,\n  HeroColorVariant,\n  HeroSizeVariant,\n  HeroGroupTypeVariant,\n  HeroTypeVariant,\n} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-hero\",\n  styleUrl: \"hy-hero.scss\",\n  shadow: false,\n})\nexport class HyHero {\n  @Element() el: HTMLElement;\n  @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n  @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n  @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n  @Prop() image: string;\n  @Prop() imageHeight: number = null;\n  @Prop() imageWidth: number = null;\n  @Prop() imageAltText: string = \"\";\n  @Prop() disableLazy: boolean = false;\n  @Prop() hasShortcuts: boolean = false;\n  @Prop() heading: string;\n  @Prop() description: string;\n  @Prop() url: string;\n  @Prop() urlTitle: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(this.sourceSet);\n  }\n\n  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n    const heroContentContainerElement = heroElement.getElementsByClassName(\n      \"hy-hero__content-container\"\n    )[0] as HTMLElement;\n\n    if (heroSizeVariant === \"small\") {\n      if (heroContentContainerElement.offsetHeight >= 300) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n\n    if (heroSizeVariant === \"large\") {\n      if (heroContentContainerElement.offsetHeight >= 344) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n  }\n\n  render() {\n    let variant = CtaLinkButtonVariants.heroWhite;\n    let colorVariantValue = this.colorVariant;\n    let heroTypeValue = this.heroType;\n\n    if (this.heroType === \"minor_landing\") {\n      colorVariantValue = HeroColorVariant.white;\n      heroTypeValue = HeroTypeVariant.landing;\n    }\n\n    if (colorVariantValue === HeroColorVariant.blue) {\n      variant = CtaLinkButtonVariants.heroBlue;\n    }\n\n    if (colorVariantValue === HeroColorVariant.black) {\n      variant = CtaLinkButtonVariants.heroBlack;\n    }\n\n    if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n      colorVariantValue = HeroColorVariant.white;\n    }\n\n    const hyHeroClasses = [\n      \"hy-hero\",\n      `hy-hero--${heroTypeValue}`,\n      `hy-hero--${this.heroGroupType}`,\n      `hy-hero--${colorVariantValue}`,\n      `hy-hero--${this.sizeVariant}`,\n    ];\n\n    const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n    // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.\n    if (this.hasShortcuts) {\n      hyHeroClasses.push(\"has-shortcuts\");\n    }\n\n    const aspectRatioWidth = 16;\n    const aspectRatioHeight = 10;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n    };\n\n    window.onload = () => {\n      const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n      window.addEventListener(\"resize\", () => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n      });\n    };\n\n    if (heroTypeValue === \"front_page\") {\n      return (\n        <Host>\n          <div class={hyHeroClasses.join(\" \")}>\n            <div class={`hy-hero__container`}>\n              <div class={`hy-hero__image-container`} style={aspectRatio}>\n                {this.image &&\n                  (this._sourceSet ? (\n                    <picture>\n                      {this._sourceSet.map((item) => (\n                        <source\n                          srcSet={item.src}\n                          media={item.media}\n                          type={item.type}\n                          sizes={item.sizes ? item.sizes : \"\"}\n                        />\n                      ))}\n                      <img\n                        loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                        alt={this.imageAltText}\n                        class={`hy-image__image`}\n                        src={this.image}\n                        height={this.imageHeight}\n                        width={this.imageWidth}\n                      />\n                    </picture>\n                  ) : (\n                    <img\n                      loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                      height={this.imageHeight}\n                      width={this.imageWidth}\n                    />\n                  ))}\n              </div>\n              <div class={`hy-hero__spacer-box`}></div>\n              <div class={`hy-hero__content-container`}>\n                <div class={`hy-hero__content`}>\n                  <div class={`hy-hero__title-container`}>\n                    <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                  </div>\n                  {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                  {this.url && (\n                    <div class={`hy-hero__actions`}>\n                      <hy-cta-button\n                        link-content={this.urlTitle}\n                        sc-label={this.scLabel}\n                        url={this.url}\n                        is-external={this.isExternal}\n                        variant={variant}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <hy-box mb=\"2, 2, 1, 1\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class={hyHeroClasses.join(\" \")}>\n          <div class={`hy-hero__container`}>\n            <div class={`hy-hero__image-container`} style={aspectRatio}>\n              {this.image &&\n                (this._sourceSet ? (\n                  <picture>\n                    {this._sourceSet.map((item) => (\n                      <source\n                        srcSet={item.src}\n                        media={item.media}\n                        type={item.type}\n                        sizes={item.sizes ? item.sizes : \"\"}\n                      />\n                    ))}\n                    <img\n                      loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                      height={this.imageHeight}\n                      width={this.imageWidth}\n                    />\n                  </picture>\n                ) : (\n                  <img\n                    loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                    alt={this.imageAltText}\n                    class={`hy-image__image`}\n                    src={this.image}\n                    height={this.imageHeight}\n                    width={this.imageWidth}\n                  />\n                ))}\n            </div>\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`}>\n                <div class={`hy-hero__title-container`}>\n                  <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                </div>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <hy-cta-button\n                      link-content={this.urlTitle}\n                      sc-label={this.scLabel}\n                      url={this.url}\n                      is-external={this.isExternal}\n                      variant={variant}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"2, 2, 1, 1\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"hy-hero.js","sourceRoot":"","sources":["../../../src/components/hy-hero/hy-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport {\n  CtaLinkButtonVariants,\n  HeroColorVariant,\n  HeroSizeVariant,\n  HeroGroupTypeVariant,\n  HeroTypeVariant,\n  HeroTextColor,\n} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-hero\",\n  styleUrl: \"hy-hero.scss\",\n  shadow: false,\n})\nexport class HyHero {\n  @Element() el: HTMLElement;\n  @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n  @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n  @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n  @Prop() heroTextColor: HeroTextColor = null;\n  @Prop() image: string;\n  @Prop() imageHeight: number = null;\n  @Prop() imageWidth: number = null;\n  @Prop() imageAltText: string = \"\";\n  @Prop() disableLazy: boolean = false;\n  @Prop() hasShortcuts: boolean = false;\n  @Prop() heading: string;\n  @Prop() description: string;\n  @Prop() subtitle: string;\n  @Prop() url: string;\n  @Prop() urlTitle: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(this.sourceSet);\n  }\n\n  // TODO: Refactor, find way to get rid of this.\n  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n    const heroContentContainerElement = heroElement.getElementsByClassName(\n      \"hy-hero__content-container\"\n    )[0] as HTMLElement;\n\n    if (heroSizeVariant === \"small\") {\n      if (heroContentContainerElement.offsetHeight >= 300) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n\n    if (heroSizeVariant === \"large\") {\n      if (heroContentContainerElement.offsetHeight >= 344) {\n        heroElement.classList.add(\"has-cover\");\n      } else {\n        heroElement.classList.remove(\"has-cover\");\n      }\n    }\n  }\n\n  createImageElement(props, srcSet, aspectRatio) {\n    return (\n      <div class={`hy-hero__image-container`} style={aspectRatio}>\n        {props.image &&\n          (srcSet ? (\n            <picture>\n              {srcSet.map((item) => (\n                <source\n                  srcSet={item.src}\n                  media={item.media}\n                  type={item.type}\n                  sizes={item.sizes ? item.sizes : \"\"}\n                />\n              ))}\n              <img\n                loading={props.disableLazy ? \"eager\" : \"lazy\"}\n                alt={props.imageAltText}\n                class={`hy-image__image`}\n                src={props.image}\n                height={props.imageHeight}\n                width={props.imageWidth}\n              />\n            </picture>\n          ) : (\n            <img\n              loading={props.disableLazy ? \"eager\" : \"lazy\"}\n              alt={props.imageAltText}\n              class={`hy-image__image`}\n              src={props.image}\n              height={props.imageHeight}\n              width={props.imageWidth}\n            />\n          ))}\n      </div>\n    );\n  }\n\n  // TODO: Refactor, is this still even used?\n  setAspectRatio(aspectRatioWidth = 16, aspectRatioHeight = 10) {\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    return {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n      //\"aspect-ratio\": `${aspectRatioWidth} / ${aspectRatioHeight}` as \"aspectRatio\",\n    };\n  }\n\n  render() {\n    let variant = CtaLinkButtonVariants.heroWhite;\n    let colorVariantValue = this.colorVariant;\n    let heroTypeValue = this.heroType;\n\n    //TODO: Refactor\n    if (this.heroType === \"minor_landing\") {\n      colorVariantValue = HeroColorVariant.white;\n      heroTypeValue = HeroTypeVariant.landing;\n    }\n\n    if (colorVariantValue === HeroColorVariant.blue) {\n      variant = CtaLinkButtonVariants.heroBlue;\n    }\n\n    if (colorVariantValue === HeroColorVariant.black) {\n      variant = CtaLinkButtonVariants.heroBlack;\n    }\n\n    if (!colorVariantValue || colorVariantValue === \"fp_white\") {\n      colorVariantValue = HeroColorVariant.white;\n    }\n\n    const hyHeroClasses = [\n      \"hy-hero\",\n      `hy-hero--${heroTypeValue}`,\n      `hy-hero--${this.heroGroupType}`,\n      `hy-hero--${colorVariantValue}`,\n      `hy-hero--${this.sizeVariant}`,\n      this.hasShortcuts ? 'has-shortcuts' : '',\n    ];\n\n    const heroTitleClasses = [\"hy-hero__title\", \"hy-heading__hero\"].join(\" \");\n\n    // TODO: Refactor, find way to get rid of this.\n    window.onload = () => {\n      const heroElement = document.getElementsByClassName(\"hy-hero\")[0] as HTMLElement;\n      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n      window.addEventListener(\"resize\", () => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n      });\n    };\n\n    if (heroTypeValue === \"front_page\" && this.sizeVariant !== 'full-image') {\n      return (\n        <Host>\n          <div class={hyHeroClasses.join(\" \")}>\n            <div class={`hy-hero__container`}>\n              {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n              <div class={`hy-hero__spacer-box`}></div>\n              <div class={`hy-hero__content-container`}>\n                <div class={`hy-hero__content`}>\n                  <div class={`hy-hero__title-container`}>\n                    <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                  </div>\n                  {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                  {this.url && (\n                    <div class={`hy-hero__actions`}>\n                      <hy-cta-button\n                        link-content={this.urlTitle}\n                        sc-label={this.scLabel}\n                        url={this.url}\n                        is-external={this.isExternal}\n                        variant={variant}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <hy-box mb=\"2, 2, 1, 1\" />\n        </Host>\n      );\n    }\n\n    if (this.sizeVariant === 'full-image') {\n      const linkTarget = this.isExternal ? '_blank' : '_self';\n      return (\n        <div class={`hy-hero hy-hero--full-image`}>\n          <div class={`hy-hero__container`}>\n            {this.createImageElement(this, this._sourceSet, this.setAspectRatio(16, 8))}\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`} data-text-color={this.heroTextColor}>\n                {this.subtitle && <span class={`hy-hero__subtitle`}>{this.subtitle}</span>}\n                <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <a class=\"hy-hero__link\" href={this.url} aria-label={this.scLabel} target={linkTarget} data-text-color={this.heroTextColor}>\n                      {this.urlTitle}\n                      <hy-icon icon={\"hy-icon-arrow-right\"} size={16} />\n                    </a>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <div class={hyHeroClasses.join(\" \")}>\n          <div class={`hy-hero__container`}>\n            {this.createImageElement(this, this._sourceSet, this.setAspectRatio())}\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`}>\n                <div class={`hy-hero__title-container`}>\n                  <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                </div>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <hy-cta-button\n                      link-content={this.urlTitle}\n                      sc-label={this.scLabel}\n                      url={this.url}\n                      is-external={this.isExternal}\n                      variant={variant}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"2, 2, 1, 1\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/utils/utils.js

@@ -153,6 +153,7 @@ export var HeroSizeVariant;
 (function (HeroSizeVariant) {
   HeroSizeVariant["large"] = "large";
   HeroSizeVariant["small"] = "small";
+  HeroSizeVariant["fullImage"] = "full-image";
 })(HeroSizeVariant || (HeroSizeVariant = {}));
 export var HeroTypeVariant;
 (function (HeroTypeVariant) {
@@ -166,6 +167,13 @@ export var HeroGroupTypeVariant;
   HeroGroupTypeVariant["default"] = "no_group";
   HeroGroupTypeVariant["research"] = "research_group";
 })(HeroGroupTypeVariant || (HeroGroupTypeVariant = {}));
+export var HeroTextColor;
+(function (HeroTextColor) {
+  HeroTextColor["dark_text_light_bg"] = "dark_text_light_bg";
+  HeroTextColor["light_text_dark_bg"] = "light_text_dark_bg";
+  HeroTextColor["dark_text_no_bg"] = "dark_text_no_bg";
+  HeroTextColor["light_text_no_bg"] = "light_text_no_bg";
+})(HeroTextColor || (HeroTextColor = {}));
 export var FooterLinkItemColor;
 (function (FooterLinkItemColor) {
   FooterLinkItemColor["black"] = "black";

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {FunctionalComponent} from \"@stencil/core\";\n\nexport type ButtonVariants = \"primary\" | \"secondary\";\nexport enum ButtonStates {\n  enabled = \"enabled\",\n  disabled = \"disabled\",\n}\n\nexport type FetchPriorityRange = \"low\" | \"high\" | \"auto\";\n\nexport type ProcessFlowBoxStepStates = \"first\" | \"default\";\n\nexport type IconName = {\n  [key: string]: (props: any) => FunctionalComponent;\n};\n\nexport enum FooterLinkVariants {\n  default = \"base\",\n  base = \"base\",\n  campus = \"base\",\n  group = \"group\",\n}\n\nexport enum AccordionVariants {\n  default = \"default\",\n  mini = \"mini\",\n}\n\nexport enum BreadcrumbVariants {\n  default = \"default\",\n  landingLarge = \"large\",\n}\n\nexport enum HeadingVarians {\n  default = \"h1\",\n  h2 = \"h2\",\n  h3 = \"h3\",\n  h4 = \"h4\",\n  h5 = \"h5\",\n  h6 = \"h6\",\n}\n\nexport enum HeadingSectionVariants {\n  default = \"default\",\n  hero = \"hero\",\n  subSection = \"subsection\",\n  introduction = \"introduction\",\n  landingPageHeader = \"landingsection\",\n  contentPageHeader = \"contentsection\",\n  frontPage = \"frontpage\",\n  landingMajor = \"landing_major\",\n  landingMinor = \"landing_minor\",\n  course = \"courses\",\n  groupFooterInfo = \"group_footer_info\",\n  defaultFooterInfo = \"footer_info\",\n}\n\nexport enum LinkVariants {\n  default = \"default\",\n  paragraph = \"within-paragraph\",\n}\n\nexport enum CtaLinkVariants {\n  default = \"default\",\n  linkList = \"link-list\",\n}\n\nexport enum CtaLinkButtonVariants {\n  default = \"default\",\n  onBlueBkgd = \"blue-background\",\n  onWhiteBkgd = \"white-background\",\n  onBlackBkgd = \"black-background\",\n  onTransparentBkgd = \"transparent-background\",\n  heroWhite = \"hero-white\",\n  heroBlue = \"hero-blue\",\n  heroBlack = \"hero-black\",\n  darkBlue = \"dark-blue-background\",\n}\n\nexport enum ProcessFlowBoxVariants {\n  default = \"big\",\n  small = \"small\",\n}\n\nexport enum KeyHighlightVariants {\n  default = \"big\",\n  small = \"small\",\n}\n\nexport enum LinkBoxVariants {\n  default = \"content\",\n  landingPage = \"landing\",\n}\n\nexport enum CourseVariants {\n  default = \"row\",\n  row = \"row\",\n  grid = \"grid\",\n}\n\nexport enum CourseStateVariants {\n  default = \"current\",\n  pastCourses = \"past-courses\",\n}\n\nexport enum PersonCardVariants {\n  default = \"results\",\n  searchPanel = \"search-panel\",\n  extended = \"extended\",\n}\n\nexport enum ListStyleVariants {\n  default = \"grid\",\n  grid = \"grid\",\n  list = \"list\",\n}\n\nexport enum ListItemVariants {\n  default = \"default\",\n  degreeProgramme = \"degree\",\n  position = \"position\",\n}\n\nexport enum PaginationItemVariants {\n  default = \"default\",\n  current = \"current\",\n  previous = \"previous\",\n  next = \"next\",\n  ellipsis = \"ellipsis\",\n}\n\nexport enum MenuType {\n  desktop = \"desktop\",\n  mobile = \"mobile\",\n  tablet = \"tablet\",\n  default = \"desktop\",\n}\n\nexport enum SiteLogoSize {\n  small = 32,\n  big = 64,\n  large = 80,\n}\n\nexport enum FooterVariant {\n  header = \"header\",\n  footer = \"footer\",\n}\n\nexport enum ColorVariant {\n  black = \"var(--brand-main-nearly-black)\",\n  white = \"var(--grayscale-white)\",\n  grey_dark = \"var(--grayscale-dark)\",\n}\n\nexport type IntroductionBgColors = \"white\";\n\nexport enum HeroColorVariant {\n  blue = \"blue\",\n  black = \"black\",\n  white = \"white\",\n  fp_white = \"fp_white\",\n}\n\nexport enum HeroSizeVariant {\n  large = \"large\",\n  small = \"small\",\n}\n\nexport enum HeroTypeVariant {\n  landing = \"landing\",\n  group_landing = \"group_landing\",\n  minor_landing = \"minor_landing\",\n  front_page = \"front_page\",\n}\n\nexport enum HeroGroupTypeVariant {\n  default = \"no_group\",\n  research = \"research_group\",\n}\n\nexport enum FooterLinkItemColor {\n  black = \"black\",\n  white = \"white\",\n}\n\nexport enum CheckboxVariants {\n  default = \"default\",\n  button = \"button\",\n}\n\nexport enum GeneralListTypes {\n  list = \"list\",\n  grid = \"grid\",\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;EACtB,mCAAmB,CAAA;EACnB,qCAAqB,CAAA;AACvB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAUD,MAAM,CAAN,IAAY,kBAKX;AALD,WAAY,kBAAkB;EAC5B,sCAAgB,CAAA;EAChB,mCAAa,CAAA;EACb,qCAAe,CAAA;EACf,qCAAe,CAAA;AACjB,CAAC,EALW,kBAAkB,KAAlB,kBAAkB,QAK7B;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;EAC3B,wCAAmB,CAAA;EACnB,kCAAa,CAAA;AACf,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;EAC5B,yCAAmB,CAAA;EACnB,4CAAsB,CAAA;AACxB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,cAOX;AAPD,WAAY,cAAc;EACxB,gCAAc,CAAA;EACd,2BAAS,CAAA;EACT,2BAAS,CAAA;EACT,2BAAS,CAAA;EACT,2BAAS,CAAA;EACT,2BAAS,CAAA;AACX,CAAC,EAPW,cAAc,KAAd,cAAc,QAOzB;AAED,MAAM,CAAN,IAAY,sBAaX;AAbD,WAAY,sBAAsB;EAChC,6CAAmB,CAAA;EACnB,uCAAa,CAAA;EACb,mDAAyB,CAAA;EACzB,uDAA6B,CAAA;EAC7B,8DAAoC,CAAA;EACpC,8DAAoC,CAAA;EACpC,iDAAuB,CAAA;EACvB,wDAA8B,CAAA;EAC9B,wDAA8B,CAAA;EAC9B,4CAAkB,CAAA;EAClB,+DAAqC,CAAA;EACrC,2DAAiC,CAAA;AACnC,CAAC,EAbW,sBAAsB,KAAtB,sBAAsB,QAajC;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;EACtB,mCAAmB,CAAA;EACnB,8CAA8B,CAAA;AAChC,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;EACzB,sCAAmB,CAAA;EACnB,yCAAsB,CAAA;AACxB,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED,MAAM,CAAN,IAAY,qBAUX;AAVD,WAAY,qBAAqB;EAC/B,4CAAmB,CAAA;EACnB,uDAA8B,CAAA;EAC9B,yDAAgC,CAAA;EAChC,yDAAgC,CAAA;EAChC,qEAA4C,CAAA;EAC5C,iDAAwB,CAAA;EACxB,+CAAsB,CAAA;EACtB,iDAAwB,CAAA;EACxB,0DAAiC,CAAA;AACnC,CAAC,EAVW,qBAAqB,KAArB,qBAAqB,QAUhC;AAED,MAAM,CAAN,IAAY,sBAGX;AAHD,WAAY,sBAAsB;EAChC,yCAAe,CAAA;EACf,yCAAe,CAAA;AACjB,CAAC,EAHW,sBAAsB,KAAtB,sBAAsB,QAGjC;AAED,MAAM,CAAN,IAAY,oBAGX;AAHD,WAAY,oBAAoB;EAC9B,uCAAe,CAAA;EACf,uCAAe,CAAA;AACjB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,QAG/B;AAED,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;EACzB,sCAAmB,CAAA;EACnB,0CAAuB,CAAA;AACzB,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;EACxB,iCAAe,CAAA;EACf,6BAAW,CAAA;EACX,+BAAa,CAAA;AACf,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AAED,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;EAC7B,0CAAmB,CAAA;EACnB,mDAA4B,CAAA;AAC9B,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;EAC5B,yCAAmB,CAAA;EACnB,kDAA4B,CAAA;EAC5B,2CAAqB,CAAA;AACvB,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAED,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;EAC3B,qCAAgB,CAAA;EAChB,kCAAa,CAAA;EACb,kCAAa,CAAA;AACf,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;EAC1B,uCAAmB,CAAA;EACnB,8CAA0B,CAAA;EAC1B,yCAAqB,CAAA;AACvB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B;AAED,MAAM,CAAN,IAAY,sBAMX;AAND,WAAY,sBAAsB;EAChC,6CAAmB,CAAA;EACnB,6CAAmB,CAAA;EACnB,+CAAqB,CAAA;EACrB,uCAAa,CAAA;EACb,+CAAqB,CAAA;AACvB,CAAC,EANW,sBAAsB,KAAtB,sBAAsB,QAMjC;AAED,MAAM,CAAN,IAAY,QAKX;AALD,WAAY,QAAQ;EAClB,+BAAmB,CAAA;EACnB,6BAAiB,CAAA;EACjB,6BAAiB,CAAA;EACjB,+BAAmB,CAAA;AACrB,CAAC,EALW,QAAQ,KAAR,QAAQ,QAKnB;AAED,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;EACtB,kDAAU,CAAA;EACV,8CAAQ,CAAA;EACR,kDAAU,CAAA;AACZ,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAED,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;EACvB,kCAAiB,CAAA;EACjB,kCAAiB,CAAA;AACnB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;AAED,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;EACtB,wDAAwC,CAAA;EACxC,gDAAgC,CAAA;EAChC,mDAAmC,CAAA;AACrC,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAID,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;EAC1B,iCAAa,CAAA;EACb,mCAAe,CAAA;EACf,mCAAe,CAAA;EACf,yCAAqB,CAAA;AACvB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;EACzB,kCAAe,CAAA;EACf,kCAAe,CAAA;EACf,2CAAwB,CAAA;AAC1B,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;EACzB,sCAAmB,CAAA;EACnB,kDAA+B,CAAA;EAC/B,kDAA+B,CAAA;EAC/B,4CAAyB,CAAA;AAC3B,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAN,IAAY,oBAGX;AAHD,WAAY,oBAAoB;EAC9B,4CAAoB,CAAA;EACpB,mDAA2B,CAAA;AAC7B,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,QAG/B;AAED,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;EACvB,0DAAyC,CAAA;EACzC,0DAAyC,CAAA;EACzC,oDAAmC,CAAA;EACnC,sDAAqC,CAAA;AACvC,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAED,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;EAC7B,sCAAe,CAAA;EACf,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;EAC1B,uCAAmB,CAAA;EACnB,qCAAiB,CAAA;AACnB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;EAC1B,iCAAa,CAAA;EACb,iCAAa,CAAA;AACf,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["import {FunctionalComponent} from \"@stencil/core\";\n\nexport type ButtonVariants = \"primary\" | \"secondary\";\nexport enum ButtonStates {\n  enabled = \"enabled\",\n  disabled = \"disabled\",\n}\n\nexport type FetchPriorityRange = \"low\" | \"high\" | \"auto\";\n\nexport type ProcessFlowBoxStepStates = \"first\" | \"default\";\n\nexport type IconName = {\n  [key: string]: (props: any) => FunctionalComponent;\n};\n\nexport enum FooterLinkVariants {\n  default = \"base\",\n  base = \"base\",\n  campus = \"base\",\n  group = \"group\",\n}\n\nexport enum AccordionVariants {\n  default = \"default\",\n  mini = \"mini\",\n}\n\nexport enum BreadcrumbVariants {\n  default = \"default\",\n  landingLarge = \"large\",\n}\n\nexport enum HeadingVarians {\n  default = \"h1\",\n  h2 = \"h2\",\n  h3 = \"h3\",\n  h4 = \"h4\",\n  h5 = \"h5\",\n  h6 = \"h6\",\n}\n\nexport enum HeadingSectionVariants {\n  default = \"default\",\n  hero = \"hero\",\n  subSection = \"subsection\",\n  introduction = \"introduction\",\n  landingPageHeader = \"landingsection\",\n  contentPageHeader = \"contentsection\",\n  frontPage = \"frontpage\",\n  landingMajor = \"landing_major\",\n  landingMinor = \"landing_minor\",\n  course = \"courses\",\n  groupFooterInfo = \"group_footer_info\",\n  defaultFooterInfo = \"footer_info\",\n}\n\nexport enum LinkVariants {\n  default = \"default\",\n  paragraph = \"within-paragraph\",\n}\n\nexport enum CtaLinkVariants {\n  default = \"default\",\n  linkList = \"link-list\",\n}\n\nexport enum CtaLinkButtonVariants {\n  default = \"default\",\n  onBlueBkgd = \"blue-background\",\n  onWhiteBkgd = \"white-background\",\n  onBlackBkgd = \"black-background\",\n  onTransparentBkgd = \"transparent-background\",\n  heroWhite = \"hero-white\",\n  heroBlue = \"hero-blue\",\n  heroBlack = \"hero-black\",\n  darkBlue = \"dark-blue-background\",\n}\n\nexport enum ProcessFlowBoxVariants {\n  default = \"big\",\n  small = \"small\",\n}\n\nexport enum KeyHighlightVariants {\n  default = \"big\",\n  small = \"small\",\n}\n\nexport enum LinkBoxVariants {\n  default = \"content\",\n  landingPage = \"landing\",\n}\n\nexport enum CourseVariants {\n  default = \"row\",\n  row = \"row\",\n  grid = \"grid\",\n}\n\nexport enum CourseStateVariants {\n  default = \"current\",\n  pastCourses = \"past-courses\",\n}\n\nexport enum PersonCardVariants {\n  default = \"results\",\n  searchPanel = \"search-panel\",\n  extended = \"extended\",\n}\n\nexport enum ListStyleVariants {\n  default = \"grid\",\n  grid = \"grid\",\n  list = \"list\",\n}\n\nexport enum ListItemVariants {\n  default = \"default\",\n  degreeProgramme = \"degree\",\n  position = \"position\",\n}\n\nexport enum PaginationItemVariants {\n  default = \"default\",\n  current = \"current\",\n  previous = \"previous\",\n  next = \"next\",\n  ellipsis = \"ellipsis\",\n}\n\nexport enum MenuType {\n  desktop = \"desktop\",\n  mobile = \"mobile\",\n  tablet = \"tablet\",\n  default = \"desktop\",\n}\n\nexport enum SiteLogoSize {\n  small = 32,\n  big = 64,\n  large = 80,\n}\n\nexport enum FooterVariant {\n  header = \"header\",\n  footer = \"footer\",\n}\n\nexport enum ColorVariant {\n  black = \"var(--brand-main-nearly-black)\",\n  white = \"var(--grayscale-white)\",\n  grey_dark = \"var(--grayscale-dark)\",\n}\n\nexport type IntroductionBgColors = \"white\";\n\nexport enum HeroColorVariant {\n  blue = \"blue\",\n  black = \"black\",\n  white = \"white\",\n  fp_white = \"fp_white\",\n}\n\nexport enum HeroSizeVariant {\n  large = \"large\",\n  small = \"small\",\n  fullImage = 'full-image',\n}\n\nexport enum HeroTypeVariant {\n  landing = \"landing\",\n  group_landing = \"group_landing\",\n  minor_landing = \"minor_landing\",\n  front_page = \"front_page\",\n}\n\nexport enum HeroGroupTypeVariant {\n  default = \"no_group\",\n  research = \"research_group\",\n}\n\nexport enum HeroTextColor {\n  dark_text_light_bg = 'dark_text_light_bg',\n  light_text_dark_bg = 'light_text_dark_bg',\n  dark_text_no_bg = 'dark_text_no_bg',\n  light_text_no_bg = 'light_text_no_bg',\n}\n\nexport enum FooterLinkItemColor {\n  black = \"black\",\n  white = \"white\",\n}\n\nexport enum CheckboxVariants {\n  default = \"default\",\n  button = \"button\",\n}\n\nexport enum GeneralListTypes {\n  list = \"list\",\n  grid = \"grid\",\n}\n"]}