@itcenteratunihelsinki/huds-lib 0.5.0 → 0.5.4

package/dist/collection/components/courses/hy-content-list-item/hy-content-list-item.js

@@ -1,5 +1,5 @@
 import { Component, Element, h, Listen, Prop } from '@stencil/core';
-import { CourseVariants } from '../../../utils/utils';
+import { CourseStateVariants, CourseVariants } from '../../../utils/utils';
 import { jsonParserWorker } from '../../../global/globalScript';
 let keys = {
   enter: 'Enter',
@@ -7,6 +7,7 @@ let keys = {
 export class HyContentLstItem {
   constructor() {
     this.variant = CourseVariants.default;
+    this.stateVariant = CourseStateVariants.default;
     this.cancelledLabel = 'Cancelled';
     this._dateValue = '';
   }
@@ -36,11 +37,16 @@ export class HyContentLstItem {
     const classAttributes = [this.variant, 'hy-content-list-item'].join(' ');
     const target = '_blank';
     const ariaLabel = 'Link points outside the current website.';
+    const classItemName = [
+      'hy-content-list-item--item-name',
+      `hy-content-list-item--item-name--${this.stateVariant}`,
+    ].join(' ');
+    const classItemCancelled = ['cancelled', `cancelled--${this.stateVariant}`].join(' ');
     return [
       h("div", { class: classAttributes, tabindex: "0" },
-        h("div", { class: "hy-content-list-item--item-name" }, this.courseName),
+        h("div", { class: classItemName }, this.courseName),
         h("div", { class: "hy-content-list-item--metadata" },
-          this.isCancelled && (h("div", { class: "cancelled" },
+          this.isCancelled && (h("div", { class: classItemCancelled },
             h("span", null, this.cancelledLabel))),
           h("div", { class: "hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first" },
             h("span", null, this._dateValue)),
@@ -100,6 +106,29 @@ export class HyContentLstItem {
       "reflect": false,
       "defaultValue": "CourseVariants.default"
     },
+    "stateVariant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CourseStateVariants",
+        "resolved": "CourseStateVariants.default | CourseStateVariants.pastCourses",
+        "references": {
+          "CourseStateVariants": {
+            "location": "import",
+            "path": "../../../utils/utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "state-variant",
+      "reflect": false,
+      "defaultValue": "CourseStateVariants.default"
+    },
     "courseCode": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/cta-button/cta-button.css

@@ -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;
@@ -67,23 +69,49 @@
 .hy-cta-button {
   cursor: pointer;
   font-family: var(--main-font-family);
-  font-weight: 600;
+  font-weight: 700;
   position: relative;
   text-decoration: none;
 }
 
+.hy-cta-button.transparent-background, .hy-cta-button.black-background, .hy-cta-button.blue-background, .hy-cta-button.white-background, .hy-cta-button.hero-white, .hy-cta-button.hero-blue, .hy-cta-button.hero-black {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  max-width: 328px;
+  padding: 13px 16px;
+}
+
+.hy-cta-button.transparent-background .text, .hy-cta-button.black-background .text, .hy-cta-button.blue-background .text, .hy-cta-button.white-background .text, .hy-cta-button.hero-white .text, .hy-cta-button.hero-blue .text, .hy-cta-button.hero-black .text {
+  font-size: 1rem;
+  line-height: 18px;
+  letter-spacing: -0.3px;
+}
+
+.hy-cta-button.transparent-background .link-icon, .hy-cta-button.black-background .link-icon, .hy-cta-button.blue-background .link-icon, .hy-cta-button.white-background .link-icon, .hy-cta-button.hero-white .link-icon, .hy-cta-button.hero-blue .link-icon, .hy-cta-button.hero-black .link-icon {
+  margin-left: 8px;
+}
+
+.hy-cta-button.transparent-background .link-icon svg, .hy-cta-button.black-background .link-icon svg, .hy-cta-button.blue-background .link-icon svg, .hy-cta-button.white-background .link-icon svg, .hy-cta-button.hero-white .link-icon svg, .hy-cta-button.hero-blue .link-icon svg, .hy-cta-button.hero-black .link-icon svg {
+  height: 16px;
+  width: 16px;
+}
+
 .hy-cta-button.transparent-background {
   background-color: var(--grayscale-white);
-  border: 3px solid var(--grayscale-black);
+  border: 4px solid var(--grayscale-black);
   color: var(--grayscale-black);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.transparent-background {
-    border: 4px solid var(--grayscale-black);
-  }
-}
-
 .hy-cta-button.transparent-background .link-icon svg {
   background-color: var(--grayscale-white);
   fill: var(--grayscale-black);
@@ -95,16 +123,10 @@
 
 .hy-cta-button.black-background {
   background-color: var(--grayscale-black);
-  border: 3px solid var(--grayscale-white);
+  border: 4px solid var(--grayscale-white);
   color: var(--grayscale-white);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.black-background {
-    border: 4px solid var(--grayscale-white);
-  }
-}
-
 .hy-cta-button.black-background .link-icon svg {
   background-color: var(--grayscale-black);
   fill: var(--grayscale-white);
@@ -132,16 +154,10 @@
 
 .hy-cta-button.blue-background {
   background-color: var(--brand-main-light);
-  border: 3px solid var(--grayscale-white);
+  border: 4px solid var(--grayscale-white);
   color: var(--grayscale-white);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.blue-background {
-    border: 4px solid var(--grayscale-white);
-  }
-}
-
 .hy-cta-button.blue-background .link-icon svg {
   background-color: var(--brand-main-light);
   fill: var(--grayscale-white);
@@ -169,16 +185,10 @@
 
 .hy-cta-button.white-background {
   background-color: var(--grayscale-white);
-  border: 3px solid var(--brand-main-light);
+  border: 4px solid var(--brand-main-light);
   color: var(--brand-main-light);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.white-background {
-    border: 4px solid var(--brand-main-light);
-  }
-}
-
 .hy-cta-button.white-background .link-icon svg {
   background-color: var(--grayscale-white);
   fill: var(--brand-main-light);
@@ -212,157 +222,110 @@
   fill: var(--brand-main-active);
 }
 
-.hy-cta-button.transparent-background, .hy-cta-button.black-background, .hy-cta-button.blue-background, .hy-cta-button.white-background {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  max-width: 278px;
-  padding: 14px 12px;
+.hy-cta-button.hero-white {
+  background-color: var(--brand-main-light);
+  color: var(--grayscale-white);
 }
 
-@media (min-width: 30rem) {
-  .hy-cta-button.transparent-background, .hy-cta-button.black-background, .hy-cta-button.blue-background, .hy-cta-button.white-background {
-    padding: 15px 16px;
-  }
+.hy-cta-button.hero-white .link-icon svg {
+  background-color: var(--brand-main-light);
+  fill: var(--grayscale-white);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.transparent-background, .hy-cta-button.black-background, .hy-cta-button.blue-background, .hy-cta-button.white-background {
-    padding: 15px 16px;
-  }
+.hy-cta-button.hero-white .text {
+  color: var(--grayscale-white);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.transparent-background, .hy-cta-button.black-background, .hy-cta-button.blue-background, .hy-cta-button.white-background {
-    padding: 17px 16px;
-  }
+.hy-cta-button.hero-white:hover {
+  background-color: var(--brand-main);
 }
 
-.hy-cta-button.transparent-background .text, .hy-cta-button.black-background .text, .hy-cta-button.blue-background .text, .hy-cta-button.white-background .text {
-  font-size: 1rem;
-  line-height: 16px;
+.hy-cta-button.hero-white:hover .link-icon svg {
+  background-color: var(--brand-main);
 }
 
-@media (min-width: 30rem) {
-  .hy-cta-button.transparent-background .text, .hy-cta-button.black-background .text, .hy-cta-button.blue-background .text, .hy-cta-button.white-background .text {
-    font-size: 1.125rem;
-    line-height: 18px;
-  }
+.hy-cta-button.hero-white:focus {
+  background-color: var(--brand-main-active);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.transparent-background .text, .hy-cta-button.black-background .text, .hy-cta-button.blue-background .text, .hy-cta-button.white-background .text {
-    font-size: 1.125rem;
-    line-height: 18px;
-  }
+.hy-cta-button.hero-white:focus .link-icon svg {
+  background-color: var(--brand-main-active);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.transparent-background .text, .hy-cta-button.black-background .text, .hy-cta-button.blue-background .text, .hy-cta-button.white-background .text {
-    font-size: 1.25rem;
-    line-height: 20px;
-  }
+.hy-cta-button.hero-black {
+  background-color: var(--grayscale-black);
+  border: 4px solid var(--grayscale-white);
+  color: var(--grayscale-white);
 }
 
-.hy-cta-button.transparent-background .link-icon, .hy-cta-button.black-background .link-icon, .hy-cta-button.blue-background .link-icon, .hy-cta-button.white-background .link-icon {
-  margin-left: 8px;
+.hy-cta-button.hero-black .link-icon svg {
+  background-color: var(--grayscale-black);
+  fill: var(--grayscale-white);
 }
 
-@media (min-width: 30rem) {
-  .hy-cta-button.transparent-background .link-icon, .hy-cta-button.black-background .link-icon, .hy-cta-button.blue-background .link-icon, .hy-cta-button.white-background .link-icon {
-    margin-left: 10px;
-  }
+.hy-cta-button.hero-black .text {
+  color: var(--grayscale-white);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.transparent-background .link-icon, .hy-cta-button.black-background .link-icon, .hy-cta-button.blue-background .link-icon, .hy-cta-button.white-background .link-icon {
-    margin-left: 10px;
-  }
+.hy-cta-button.hero-black:hover {
+  border-color: var(--brand-main-soft);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.transparent-background .link-icon, .hy-cta-button.black-background .link-icon, .hy-cta-button.blue-background .link-icon, .hy-cta-button.white-background .link-icon {
-    margin-left: 12px;
-  }
+.hy-cta-button.hero-black:hover .text {
+  color: var(--brand-main-soft);
 }
 
-.hy-cta-button.transparent-background .link-icon svg, .hy-cta-button.black-background .link-icon svg, .hy-cta-button.blue-background .link-icon svg, .hy-cta-button.white-background .link-icon svg {
-  height: 16px;
-  width: 16px;
+.hy-cta-button.hero-black:hover .link-icon svg {
+  fill: var(--brand-main-soft);
 }
 
-@media (min-width: 30rem) {
-  .hy-cta-button.transparent-background .link-icon svg, .hy-cta-button.black-background .link-icon svg, .hy-cta-button.blue-background .link-icon svg, .hy-cta-button.white-background .link-icon svg {
-    height: 18px;
-    width: 18px;
-  }
+.hy-cta-button.hero-black:focus {
+  border-color: var(--brand-main-soft);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.transparent-background .link-icon svg, .hy-cta-button.black-background .link-icon svg, .hy-cta-button.blue-background .link-icon svg, .hy-cta-button.white-background .link-icon svg {
-    height: 18px;
-    width: 18px;
-  }
+.hy-cta-button.hero-black:focus .text {
+  color: var(--brand-main-soft);
 }
 
-@media (min-width: 1601px) {
-  .hy-cta-button.transparent-background .link-icon svg, .hy-cta-button.black-background .link-icon svg, .hy-cta-button.blue-background .link-icon svg, .hy-cta-button.white-background .link-icon svg {
-    height: 22px;
-    width: 22px;
-  }
+.hy-cta-button.hero-black:focus .link-icon svg {
+  fill: var(--brand-main-soft);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.large {
-    padding: 17px 16px;
-  }
+.hy-cta-button.hero-blue {
+  background-color: var(--brand-main);
+  border: 4px solid var(--grayscale-white);
+  color: var(--grayscale-white);
+}
+
+.hy-cta-button.hero-blue .link-icon svg {
+  background-color: var(--brand-main);
+  fill: var(--grayscale-white);
+}
+
+.hy-cta-button.hero-blue .text {
+  color: var(--grayscale-white);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.large .text {
-    font-size: 1.25rem;
-    line-height: 20px;
-  }
+.hy-cta-button.hero-blue:hover {
+  border-color: var(--brand-main-soft);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.large .link-icon {
-    margin-left: 12px;
-  }
+.hy-cta-button.hero-blue:hover .text {
+  color: var(--brand-main-soft);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.large .link-icon svg {
-    height: 22px;
-    width: 22px;
-  }
+.hy-cta-button.hero-blue:hover .link-icon svg {
+  fill: var(--brand-main-soft);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.large.blue-background, .hy-cta-button.large.black-background {
-    border-width: 4px;
-  }
+.hy-cta-button.hero-blue:focus {
+  border-color: var(--brand-main-soft);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.large.transparent-background {
-    border-width: 4px;
-  }
+.hy-cta-button.hero-blue:focus .text {
+  color: var(--brand-main-soft);
 }
 
-@media (min-width: 75.0625rem) {
-  .hy-cta-button.large.white-background {
-    border-width: 4px;
-  }
+.hy-cta-button.hero-blue:focus .link-icon svg {
+  fill: var(--brand-main-soft);
 }

package/dist/collection/components/cta-button/cta-button.js

@@ -7,14 +7,6 @@ export class CtaButton {
     this.isExternal = false;
     this.headerstyle = 'common';
   }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
-      }
-    }
-  }
   render() {
     const classAttributes = ['hy-cta-button', this.variant, this.headerstyle].join(' ');
     const containerClassAttributes = ['hy-cta-button-container'].join(' ');
@@ -41,7 +33,7 @@ export class CtaButton {
       "mutable": false,
       "complexType": {
         "original": "CtaLinkButtonVariants",
-        "resolved": "CtaLinkButtonVariants.default | CtaLinkButtonVariants.onBlackBkgd | CtaLinkButtonVariants.onBlueBkgd | CtaLinkButtonVariants.onTransparentBkgd | CtaLinkButtonVariants.onWhiteBkgd",
+        "resolved": "CtaLinkButtonVariants.default | CtaLinkButtonVariants.heroBlack | CtaLinkButtonVariants.heroBlue | CtaLinkButtonVariants.heroWhite | CtaLinkButtonVariants.onBlackBkgd | CtaLinkButtonVariants.onBlueBkgd | CtaLinkButtonVariants.onTransparentBkgd | CtaLinkButtonVariants.onWhiteBkgd",
         "references": {
           "CtaLinkButtonVariants": {
             "location": "import",

package/dist/collection/components/cta-link/cta-link.css

@@ -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;
@@ -58,153 +60,51 @@
   display: block;
 }
 
-.hy-cta-link-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .hy-cta-link {
   font-weight: 600;
+  font-size: 1rem;
+  line-height: 24px;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background-color: transparent;
   color: var(--brand-main);
-  cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: inline-grid;
   font-family: var(--main-font-family);
-  height: 100%;
-  position: relative;
+  gap: 16px;
+  grid-auto-flow: column;
+  letter-spacing: -0.5px;
+  overflow: hidden;
   text-decoration: none;
 }
 
-.hy-cta-link.default {
-  font-size: 0.875rem;
-  line-height: 16px;
-  -webkit-box-align: right;
-  -ms-flex-align: right;
-  align-items: right;
-  letter-spacing: -0.26px;
-}
-
-@media (min-width: 30rem) {
-  .hy-cta-link.default {
-    font-size: 1rem;
-    line-height: 18px;
-    letter-spacing: -0.3px;
-  }
-}
-
-@media (min-width: 1601px) {
-  .hy-cta-link.default {
-    font-size: 1.125rem;
-    line-height: 20px;
-    letter-spacing: -0.34px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .hy-cta-link.default__large {
-    font-size: 1.125rem;
-    line-height: 20px;
-    letter-spacing: -0.34px;
-  }
-}
-
-.hy-cta-link.default .text {
-  padding: 14px 0;
-  text-align: right;
-}
-
-.hy-cta-link.default .link-icon {
-  margin-left: 16px;
-}
-
-.hy-cta-link.default .link-icon svg {
-  background-color: var(--brand-main-light);
-  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  fill: var(--grayscale-white);
-  padding: 10.29px;
-}
-
-.hy-cta-link.default:hover span {
-  color: var(--brand-main) !important;
+.hy-cta-link:hover, .hy-cta-link:focus {
   text-decoration: underline;
 }
 
-.hy-cta-link.default:hover svg {
-  background-color: var(--brand-main) !important;
+.hy-cta-link:hover .hy-cta-link__icon, .hy-cta-link:focus .hy-cta-link__icon {
+  background-color: var(--brand-main);
 }
 
-.hy-cta-link.link-list {
-  font-size: 0.875rem;
-  line-height: 16px;
+.hy-cta-link__icon {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  background-color: var(--brand-main-light);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 40px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  letter-spacing: -0.26px;
+  width: 40px;
 }
 
-@media (min-width: 30rem) {
-  .hy-cta-link.link-list {
-    font-size: 1rem;
-    line-height: 18px;
-    letter-spacing: -0.3px;
-  }
-}
-
-.hy-cta-link.link-list .text {
-  background-color: var(--grayscale-background-box);
-  margin-left: -36px;
-  padding: 10px 10px 10px 48px;
-}
-
-.hy-cta-link.link-list .hy-icon-wrapper {
-  background-color: var(--brand-main-light);
-  z-index: 10;
-}
-
-.hy-cta-link.link-list .hy-icon-wrapper .link-icon {
-  position: relative;
-  overflow: hidden;
-}
-
-.hy-cta-link.link-list .hy-icon-wrapper .link-icon svg {
-  background-color: transparent;
-  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+.hy-cta-link__icon svg {
   fill: var(--grayscale-white);
-  padding: 10.29px;
 }
 
-.hy-cta-link.link-list .hy-icon-wrapper .link-icon--external {
+.hy-cta-link__icon--external svg {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
-}
-
-.hy-cta-link.link-list:hover span {
-  color: var(--brand-main) !important;
-  text-decoration: underline;
-}
-
-.hy-cta-link.link-list:hover .hy-icon-wrapper {
-  background-color: var(--brand-main) !important;
-}
-
-.hy-cta-link.link-list.hy-cta-link--full {
-  width: 100%;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.hy-cta-link.link-list.hy-cta-link--full .text {
-  width: 100%;
 }