npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.5.0 → 0.5.4 - Mend

@itcenteratunihelsinki/huds-lib 0.5.0 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (421) hide show

package/dist/collection/components/cta-link/cta-link.js CHANGED Viewed

@@ -5,36 +5,16 @@ export class CtaLink {
     this.variant = CtaLinkVariants.default;
     this.linkContent = '';
     this.isExternal = false;
-    this.headerstyle = 'default';
-    this.fullWidth = false;
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
-      }
-    }
   }
   render() {
-    const classAttributes = [
-      'hy-cta-link',
-      this.variant,
-      `${this.variant}__${this.headerstyle}`,
-      this.fullWidth ? 'hy-cta-link--full' : '',
-    ].join(' ');
-    const containerClassAttributes = ['hy-cta-link-container'].join(' ');
-    const textClassAttributes = ['text'].join(' ');
-    const iconClassAttributes = ['link-icon', this.isExternal ? 'link-icon--external' : null].join(' ');
+    const iconClassAttributes = ['hy-cta-link__icon', this.isExternal && 'hy-cta-link__icon--external'].join(' ');
     const target = this.isExternal ? '_blank' : '_self';
-    return (h("span", { class: containerClassAttributes },
-      h("a", { "aria-label": this.scLabel, class: classAttributes, href: this.url, target: target },
-        this.variant == CtaLinkVariants.linkList && (h("span", { class: 'hy-icon-wrapper' },
-          h("div", { class: iconClassAttributes },
-            h("hy-icon", { icon: 'hy-icon-arrow-to-right', size: 40 })))),
-        h("span", { class: textClassAttributes }, this.linkContent.length === 0 ? h("slot", null) : this.linkContent),
-        this.variant == CtaLinkVariants.default && (h("span", { class: iconClassAttributes },
-          h("hy-icon", { icon: 'hy-icon-arrow-right', size: 40 }))))));
+    return (h("a", { "aria-label": this.scLabel, href: this.url, target: target, class: `hy-cta-link hy-cta-link--${this.variant}` },
+      this.variant == CtaLinkVariants.linkList && (h("span", { class: iconClassAttributes },
+        h("hy-icon", { icon: 'hy-icon-arrow-to-right', size: 24 }))),
+      h("span", null, this.linkContent),
+      this.variant == CtaLinkVariants.default && (h("span", { class: iconClassAttributes },
+        h("hy-icon", { icon: 'hy-icon-arrow-to-right', size: 24 })))));
   }
   static get is() { return "hy-cta-link"; }
   static get encapsulation() { return "shadow"; }
@@ -137,42 +117,6 @@ export class CtaLink {
       "attribute": "is-external",
       "reflect": false,
       "defaultValue": "false"
-    },
-    "headerstyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "headerstyle",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "fullWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "full-width",
-      "reflect": false,
-      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/footer/hy-footer/hy-footer.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/footer/hy-footer-action/hy-footer-action.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/footer/hy-footer-base/hy-footer-base.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/footer/hy-footer-info/hy-footer-info.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/footer/hy-footer-link-item/hy-footer-link-item.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/grid-container/grid-container.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/grid-item/grid-item.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/grid-row/grid-row.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/heading/heading-fw.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;
@@ -214,11 +216,7 @@ h2.hy-heading__landingsection {
   text-transform: uppercase;
 }
-/*
-  H1 used in Hero paragraph (minor landing pages).
-*/
-h1.hy-heading__landing_minor {
+h1.hy-heading__hero {
   font-size: 2rem;
   line-height: 38px;
   font-weight: 700;
@@ -228,24 +226,8 @@ h1.hy-heading__landing_minor {
   margin-bottom: 0;
 }
-@media (min-width: 30rem) {
-  h1.hy-heading__landing_minor {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
-  }
-}
-@media (min-width: 60rem) {
-  h1.hy-heading__landing_minor {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
-  }
-}
-@media (min-width: 75.0625rem) {
-  h1.hy-heading__landing_minor {
+@media (min-width: 1024px) {
+  h1.hy-heading__hero {
     font-size: 2.875rem;
     line-height: 54px;
     letter-spacing: -1.15px;
@@ -253,64 +235,13 @@ h1.hy-heading__landing_minor {
 }
 @media (min-width: 1601px) {
-  h1.hy-heading__landing_minor {
+  h1.hy-heading__hero {
     font-size: 3.25rem;
     line-height: 60px;
     letter-spacing: -1.3px;
   }
 }
-/*
-  H1 used in Hero paragraph (front page).
-*/
-h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-  font-size: 2.25rem;
-  line-height: 42px;
-  font-weight: 700;
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
-  letter-spacing: -0.9px;
-  margin-bottom: 0;
-}
-@media (min-width: 30rem) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3rem;
-    line-height: 56px;
-    letter-spacing: -1.2px;
-  }
-}
-@media (min-width: 60rem) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3rem;
-    line-height: 56px;
-    letter-spacing: -1.2px;
-  }
-}
-@media (min-width: 75.0625rem) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3rem;
-    line-height: 56px;
-    letter-spacing: -1.2px;
-  }
-}
-@media (min-width: 1601px) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3.5rem;
-    line-height: 64px;
-    letter-spacing: -1.4px;
-  }
-}
 @media (min-width: 30rem) {
   .hy-heading__container__common h2.hy-heading__introduction,
 .hy-heading__container__common h2.hy-heading__landingsection {

package/dist/collection/components/heading/heading.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;
@@ -214,11 +216,7 @@ h2.hy-heading__landingsection {
   text-transform: uppercase;
 }
-/*
-  H1 used in Hero paragraph (minor landing pages).
-*/
-h1.hy-heading__landing_minor {
+h1.hy-heading__hero {
   font-size: 2rem;
   line-height: 38px;
   font-weight: 700;
@@ -228,24 +226,8 @@ h1.hy-heading__landing_minor {
   margin-bottom: 0;
 }
-@media (min-width: 30rem) {
-  h1.hy-heading__landing_minor {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
-  }
-}
-@media (min-width: 60rem) {
-  h1.hy-heading__landing_minor {
-    font-size: 2.875rem;
-    line-height: 54px;
-    letter-spacing: -1.15px;
-  }
-}
-@media (min-width: 75.0625rem) {
-  h1.hy-heading__landing_minor {
+@media (min-width: 1024px) {
+  h1.hy-heading__hero {
     font-size: 2.875rem;
     line-height: 54px;
     letter-spacing: -1.15px;
@@ -253,64 +235,13 @@ h1.hy-heading__landing_minor {
 }
 @media (min-width: 1601px) {
-  h1.hy-heading__landing_minor {
+  h1.hy-heading__hero {
     font-size: 3.25rem;
     line-height: 60px;
     letter-spacing: -1.3px;
   }
 }
-/*
-  H1 used in Hero paragraph (front page).
-*/
-h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-  font-size: 2.25rem;
-  line-height: 42px;
-  font-weight: 700;
-  color: var(--grayscale-black);
-  font-family: var(--main-font-family);
-  letter-spacing: -0.9px;
-  margin-bottom: 0;
-}
-@media (min-width: 30rem) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3rem;
-    line-height: 56px;
-    letter-spacing: -1.2px;
-  }
-}
-@media (min-width: 60rem) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3rem;
-    line-height: 56px;
-    letter-spacing: -1.2px;
-  }
-}
-@media (min-width: 75.0625rem) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3rem;
-    line-height: 56px;
-    letter-spacing: -1.2px;
-  }
-}
-@media (min-width: 1601px) {
-  h1.hy-heading__frontpage,
-h1.hy-heading__landing_major {
-    font-size: 3.5rem;
-    line-height: 64px;
-    letter-spacing: -1.4px;
-  }
-}
 @media (min-width: 30rem) {
   .hy-heading__container__common h2.hy-heading__introduction,
 .hy-heading__container__common h2.hy-heading__landingsection {

package/dist/collection/components/heading/heading.js CHANGED Viewed

@@ -110,7 +110,7 @@ export class Heading {
       "mutable": false,
       "complexType": {
         "original": "HeadingSectionVariants",
-        "resolved": "HeadingSectionVariants.contentPageHeader | HeadingSectionVariants.course | HeadingSectionVariants.default | HeadingSectionVariants.defaultFooterInfo | HeadingSectionVariants.frontPage | HeadingSectionVariants.groupFooterInfo | HeadingSectionVariants.introduction | HeadingSectionVariants.landingMajor | HeadingSectionVariants.landingMinor | HeadingSectionVariants.landingPageHeader | HeadingSectionVariants.subSection",
+        "resolved": "HeadingSectionVariants.contentPageHeader | HeadingSectionVariants.course | HeadingSectionVariants.default | HeadingSectionVariants.defaultFooterInfo | HeadingSectionVariants.frontPage | HeadingSectionVariants.groupFooterInfo | HeadingSectionVariants.hero | HeadingSectionVariants.introduction | HeadingSectionVariants.landingMajor | HeadingSectionVariants.landingMinor | HeadingSectionVariants.landingPageHeader | HeadingSectionVariants.subSection",
         "references": {
           "HeadingSectionVariants": {
             "location": "import",

package/dist/collection/components/hy-anchor-link-list/hy-anchor-link-list.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-badge/hy-badge.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-banner/hy-banner.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-box/hy-box.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-breadcrumbs/hy-breadcrumbs.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-checkbox/hy-checkbox.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-collaboration/hy-collaboration.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-crisis-banner/hy-crisis-banner.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-dropdown/hy-dropdown.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-filter-group/hy-filter-group.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-filter-list-type/hy-filter-list-type.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-filter-visibility-tool/hy-filter-visibility-tool.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-general-list/hy-general-list.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-general-list-item/hy-general-list-item.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;