@itcenteratunihelsinki/huds-lib 0.8.68 → 0.8.70

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

@@ -69,11 +69,11 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
   max-height: 100%;
-  padding: 32px 16px 32px 16px;
+  padding: 32px 16px 0 16px;
   place-content: center space-between;
   position: relative;
   width: 100%;
@@ -82,28 +82,27 @@
 @media (min-width: 30rem) {
   .hy-footer-base {
     -webkit-box-orient: vertical;
-    -webkit-box-direction: reverse;
-    -ms-flex-direction: column-reverse;
-    flex-direction: column-reverse;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
     margin: 0 auto;
     max-width: 120.0625rem;
-    padding: 32px 24px 32px 24px;
+    padding: 32px 24px 0 24px;
   }
 }
 
 @media (min-width: 60rem) {
   .hy-footer-base {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    padding: 36px 32px 36px 32px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, auto);
+    padding: 36px 32px 0 32px;
   }
 }
 
 @media (min-width: 75.0625rem) {
   .hy-footer-base {
-    padding: 40px 32px 40px 32px;
+    padding: 40px 32px 0 32px;
   }
 }
 
@@ -118,10 +117,13 @@
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   margin-top: 24px;
+  -webkit-box-ordinal-group: 3;
+  -ms-flex-order: 2;
+  order: 2;
 }
 
 @media (min-width: 30rem) {
@@ -135,10 +137,12 @@
 
 @media (min-width: 60rem) {
   .hy-footer-base__left {
+    -webkit-box-ordinal-group: unset;
+    -ms-flex-order: unset;
+    order: unset;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
-    width: 31.11%;
   }
 }
 
@@ -151,12 +155,12 @@
 }
 
 .hy-footer-base__logo .hy-site-logo__label {
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
   max-width: -webkit-max-content;
   max-width: -moz-max-content;
   max-width: max-content;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
 }
 
 .hy-footer-base__content {
@@ -167,25 +171,25 @@
   font-style: normal;
   font-weight: 600;
   letter-spacing: -0.1px;
-  margin: 32px 0;
+  margin: 22px 0;
   white-space: pre-line;
 }
 
 @media (min-width: 30rem) {
   .hy-footer-base__content {
-    margin: 32px 0;
+    margin: 22px 0;
   }
 }
 
 @media (min-width: 60rem) {
   .hy-footer-base__content {
-    margin: 42px 0;
+    margin: 32px 0;
   }
 }
 
 @media (min-width: 75.0625rem) {
   .hy-footer-base__content {
-    margin: 54px 0;
+    margin: 44px 0;
   }
 }
 
@@ -212,10 +216,16 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 64px;
+  margin-bottom: 0;
   z-index: 2;
 }
 
+@media (min-width: 48rem) {
+  .hy-footer-base__some {
+    margin-bottom: 64px;
+  }
+}
+
 @media (min-width: 60rem) {
   .hy-footer-base__some {
     -webkit-box-align: start;
@@ -295,72 +305,148 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-orient: horizontal;
+  -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  grid-column: 2/-1;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   max-height: 100%;
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+  width: 100%;
+}
+
+.hy-footer-base__right hy-footer-link-item {
+  float: none;
   width: 100%;
 }
 
 @media (min-width: 30rem) {
   .hy-footer-base__right {
     margin-bottom: 32px;
-    max-height: 300px;
-    width: calc(100% + 24px);
+  }
+}
+
+@media (min-width: 48rem) {
+  .hy-footer-base__right {
+    display: block;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+  }
+  .hy-footer-base__right hy-footer-link-item {
+    clear: right;
+    float: left;
+    height: -webkit-max-content;
+    height: -moz-max-content;
+    height: max-content;
+    width: 50%;
+    margin-bottom: 1.5rem;
   }
 }
 
 @media (min-width: 60rem) {
   .hy-footer-base__right {
-    max-height: 350px;
-    width: 65.56%;
+    -webkit-box-ordinal-group: unset;
+    -ms-flex-order: unset;
+    order: unset;
+  }
+}
+
+.hy-footer-base__bottom {
+  border-top: 1px solid var(--grayscale-white);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  grid-column: 1/-1;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin: 2.5rem 0 1rem;
+  -webkit-box-ordinal-group: 4;
+  -ms-flex-order: 3;
+  order: 3;
+  padding-top: 2.5rem;
+  width: 100%;
+}
+
+@media (min-width: 48rem) {
+  .hy-footer-base__bottom {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    padding-top: 1rem;
+  }
+}
+
+.hy-footer-base__bottom__links {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1rem 1rem;
+}
+
+@media (min-width: 48rem) {
+  .hy-footer-base__bottom__links {
+    padding: 0;
+    gap: 2rem;
   }
 }
 
+.hy-footer-base__bottom__link {
+  color: var(--grayscale-white);
+  font-family: var(--main-font-family);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.1;
+  line-height: 19.07px;
+  text-align: right;
+  text-decoration: underline;
+  text-decoration-thickness: auto;
+}
+
+.hy-footer-base__bottom__link:hover, .hy-footer-base__bottom__link:focus-within {
+  text-decoration-thickness: 2px;
+}
+
 .hy-footer-base__copy {
   font-size: 1rem;
   line-height: 24px;
-  bottom: 40px;
+  -ms-flex-item-align: center;
+  align-self: center;
   color: var(--grayscale-white);
-  display: inline-block;
+  display: block;
   font-family: var(--main-font-family);
   font-weight: 600;
   letter-spacing: -0.1px;
-  position: absolute;
-  right: 50%;
   text-align: center;
-  -webkit-transform: translateX(50%);
-  transform: translateX(50%);
-  width: 100%;
-}
-
-@media (min-width: 30rem) {
-  .hy-footer-base__copy {
-    bottom: 32px;
-    right: 50%;
-    -webkit-transform: translateX(50%);
-    transform: translateX(50%);
-  }
 }
 
-@media (min-width: 60rem) {
-  .hy-footer-base__copy {
-    bottom: 36px;
-    right: 32px;
-    text-align: right;
-    -webkit-transform: none;
-    transform: none;
-  }
-}
-
-@media (min-width: 75.0625rem) {
+@media (min-width: 48rem) {
   .hy-footer-base__copy {
-    bottom: 40px;
+    -ms-flex-item-align: end;
+    align-self: flex-end;
+    margin-left: 0.5rem;
   }
 }

package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js

@@ -10,24 +10,29 @@ export class HyFooterBase {
     this.someLabel = undefined;
     this.copyrightText = undefined;
     this.dataFooterBaseLinks = undefined;
+    this.dataFooterPostSectionLinks = undefined;
     this.dataFooterBaseSome = undefined;
   }
   async componentWillLoad() {
     this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);
     this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);
+    this._dataFooterPostSectionLinks = await jsonParserWorker(this.dataFooterPostSectionLinks);
   }
   render() {
     const logoColor = ColorVariant.white;
     const classAttributes = ["hy-footer-base--content-container"].join(" ");
     const links = this._dataFooterBaseLinks;
+    const postSectionLinks = this._dataFooterPostSectionLinks;
     const some = this._dataFooterBaseSome;
-    return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("span", { class: "hy-footer-base__some__label" }, this.someLabel), h("div", { class: "hy-footer-base__some__items" }, some &&
+    return (h(Host, { class: classAttributes }, h("div", { class: "hy-footer-base" }, h("div", { class: "hy-footer-base__left" }, h("div", { class: "hy-footer-base__logo" }, h("hy-site-logo", { type: FooterVariant.footer, color: logoColor, url: this.logoUrl, label: this.logoLabel })), h("div", { class: "hy-footer-base__content" }, h("slot", { name: "content" })), h("div", { class: "hy-footer-base__some" }, h("div", { class: "hy-footer-base__some__items" }, some &&
       some.map((s) => {
         return (h("a", { "aria-label": s.label, href: s.url, class: `hy-footer-base__some__item`, title: s.label, target: "_blank" }, h("hy-icon", { icon: `hy-icon-some-${s.type}`, size: 36 })));
       })))), h("div", { class: "hy-footer-base__right" }, links &&
       links.map((link) => {
-        return (h("hy-footer-link-item", { label: link.label, url: link.url, color: FooterLinkItemColor.white }));
-      }), this.copyrightText && h("span", { class: "hy-footer-base__copy" }, this.copyrightText)))));
+        var _a;
+        return (h("hy-footer-link-item", { label: link.label, url: link.url, color: FooterLinkItemColor.white, mainLink: link.mainlink, items: (_a = link.items) !== null && _a !== void 0 ? _a : null }));
+      })), postSectionLinks && (h("div", { class: "hy-footer-base__bottom" }, h("div", { class: "hy-footer-base__bottom__links" }, postSectionLinks &&
+      postSectionLinks.map((item) => (h("a", { class: "hy-footer-base__bottom__link", href: item.url, target: item.external ? "_blank" : "_self" }, item.label)))), this.copyrightText && h("span", { class: "hy-footer-base__copy" }, this.copyrightText))))));
   }
   static get is() { return "hy-footer-base"; }
   static get originalStyleUrls() {
@@ -178,6 +183,28 @@ export class HyFooterBase {
         "attribute": "data-footer-base-links",
         "reflect": false
       },
+      "dataFooterPostSectionLinks": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FooterPostSectionLinks[] | string",
+          "resolved": "FooterPostSectionLinks[] | string",
+          "references": {
+            "FooterPostSectionLinks": {
+              "location": "local",
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/footer/hy-footer-base/hy-footer-base.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Footer post section links"
+        },
+        "attribute": "data-footer-post-section-links",
+        "reflect": false
+      },
       "dataFooterBaseSome": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/footer/hy-footer-base/hy-footer-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"hy-footer-base.js","sourceRoot":"","sources":["../../../../src/components/footer/hy-footer-base/hy-footer-base.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,mBAAmB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAC,MAAM,sBAAsB,CAAC;AACpG,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAO9D,MAAM,OAAO,YAAY;;iBAIc,mBAAmB,CAAC,KAAK;;;gBAYjC,YAAY,CAAC,GAAG;;;;;;EAqB7C,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,oBAAoB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC7E,IAAI,CAAC,mBAAmB,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;EAC7E,CAAC;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;IACrC,MAAM,eAAe,GAAG,CAAC,mCAAmC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,IAAI,CAAC,oBAA8C,CAAC;IAClE,MAAM,IAAI,GAAG,IAAI,CAAC,mBAA4C,CAAC;IAE/D,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe;MAC1B,WAAK,KAAK,EAAC,gBAAgB;QACzB,WAAK,KAAK,EAAC,sBAAsB;UAC/B,WAAK,KAAK,EAAC,sBAAsB;YAC/B,oBAAc,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAI,CACpG;UACN,WAAK,KAAK,EAAC,yBAAyB;YAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;UACN,WAAK,KAAK,EAAC,sBAAsB;YAC/B,YAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,SAAS,CAAQ;YACjE,WAAK,KAAK,EAAC,6BAA6B,IACrC,IAAI;cACH,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CACL,uBACc,CAAC,CAAC,KAAK,EACnB,IAAI,EAAE,CAAC,CAAC,GAAG,EACX,KAAK,EAAE,4BAA4B,EACnC,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAC,QAAQ;kBAEf,eAAS,IAAI,EAAE,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,GAAI,CACnD,CACL,CAAC;cACJ,CAAC,CAAC,CACA,CACF,CACF;QACN,WAAK,KAAK,EAAC,uBAAuB;UAC/B,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;cACjB,OAAO,CACL,2BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,mBAAmB,CAAC,KAAK,GACX,CACxB,CAAC;YACJ,CAAC,CAAC;UACH,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,aAAa,CAAQ,CACjF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["export interface FooterBaseLinks {\n  label: string;\n  url: string;\n  isActive?: boolean;\n  mainlink?: boolean;\n  items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterBaseSome {\n  label: string;\n  url: string;\n  type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-footer-base\",\n  styleUrl: \"hy-footer-base.scss\",\n  shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n  /**\n   * Link item color\n   */\n  @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n  /**\n   * Logo url\n   */\n  @Prop() logoUrl?: string;\n  /**\n   * Logo label\n   */\n  @Prop() logoLabel?: string;\n  /**\n   * Logo size\n   */\n  @Prop() size: SiteLogoSize = SiteLogoSize.big;\n  /**\n   * Label for some links\n   */\n  @Prop() someLabel?: string;\n  /**\n   * Copyright text\n   */\n  @Prop() copyrightText: string;\n\n  private _dataFooterBaseLinks: FooterBaseLinks[];\n  private _dataFooterBaseSome: FooterBaseSome[];\n  /**\n   * Footer links to be displayed\n   */\n  @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n  /**\n   * Footer some links\n   */\n  @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n  async componentWillLoad() {\n    this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n    this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n  }\n\n  render() {\n    const logoColor = ColorVariant.white;\n    const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n    const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n    const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n    return (\n      <Host class={classAttributes}>\n        <div class=\"hy-footer-base\">\n          <div class=\"hy-footer-base__left\">\n            <div class=\"hy-footer-base__logo\">\n              <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n            </div>\n            <div class=\"hy-footer-base__content\">\n              <slot name=\"content\"></slot>\n            </div>\n            <div class=\"hy-footer-base__some\">\n              <span class=\"hy-footer-base__some__label\">{this.someLabel}</span>\n              <div class=\"hy-footer-base__some__items\">\n                {some &&\n                  some.map((s) => {\n                    return (\n                      <a\n                        aria-label={s.label}\n                        href={s.url}\n                        class={`hy-footer-base__some__item`}\n                        title={s.label}\n                        target=\"_blank\"\n                      >\n                        <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n                      </a>\n                    );\n                  })}\n              </div>\n            </div>\n          </div>\n          <div class=\"hy-footer-base__right\">\n            {links &&\n              links.map((link) => {\n                return (\n                  <hy-footer-link-item\n                    label={link.label}\n                    url={link.url}\n                    color={FooterLinkItemColor.white}\n                  ></hy-footer-link-item>\n                );\n              })}\n            {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"hy-footer-base.js","sourceRoot":"","sources":["../../../../src/components/footer/hy-footer-base/hy-footer-base.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface FooterBaseLinks {\n  label: string;\n  url: string;\n  isActive?: boolean;\n  mainlink?: boolean;\n  items: Array<FooterBaseLinks>;\n}\n\nexport interface FooterPostSectionLinks {\n  label: string;\n  url: string;\n  external: boolean;\n}\n\nexport interface FooterBaseSome {\n  label: string;\n  url: string;\n  type: string;\n}\n\nimport {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\nimport {FooterLinkItemColor, SiteLogoSize, ColorVariant, FooterVariant} from \"../../../utils/utils\";\nimport {jsonParserWorker} from \"../../../global/globalScript\";\n\n@Component({\n  tag: \"hy-footer-base\",\n  styleUrl: \"hy-footer-base.scss\",\n  shadow: false,\n})\nexport class HyFooterBase implements ComponentInterface {\n  /**\n   * Link item color\n   */\n  @Prop() color: FooterLinkItemColor = FooterLinkItemColor.white;\n  /**\n   * Logo url\n   */\n  @Prop() logoUrl?: string;\n  /**\n   * Logo label\n   */\n  @Prop() logoLabel?: string;\n  /**\n   * Logo size\n   */\n  @Prop() size: SiteLogoSize = SiteLogoSize.big;\n  /**\n   * Label for some links\n   */\n  @Prop() someLabel?: string;\n  /**\n   * Copyright text\n   */\n  @Prop() copyrightText: string;\n\n  private _dataFooterBaseLinks: FooterBaseLinks[];\n  private _dataFooterBaseSome: FooterBaseSome[];\n  private _dataFooterPostSectionLinks: FooterPostSectionLinks[];\n  /**\n   * Footer links to be displayed\n   */\n  @Prop() dataFooterBaseLinks: FooterBaseLinks[] | string;\n  /**\n   * Footer post section links\n   */\n  @Prop() dataFooterPostSectionLinks: FooterPostSectionLinks[] | string;\n  /**\n   * Footer some links\n   */\n  @Prop() dataFooterBaseSome: FooterBaseSome[] | string;\n\n  async componentWillLoad() {\n    this._dataFooterBaseLinks = await jsonParserWorker(this.dataFooterBaseLinks);\n    this._dataFooterBaseSome = await jsonParserWorker(this.dataFooterBaseSome);\n    this._dataFooterPostSectionLinks = await jsonParserWorker(this.dataFooterPostSectionLinks);\n  }\n\n  render() {\n    const logoColor = ColorVariant.white;\n    const classAttributes = [\"hy-footer-base--content-container\"].join(\" \");\n    const links = this._dataFooterBaseLinks as Array<FooterBaseLinks>;\n    const postSectionLinks = this._dataFooterPostSectionLinks as Array<FooterPostSectionLinks>;\n    const some = this._dataFooterBaseSome as Array<FooterBaseSome>;\n\n    return (\n      <Host class={classAttributes}>\n        <div class=\"hy-footer-base\">\n          <div class=\"hy-footer-base__left\">\n            <div class=\"hy-footer-base__logo\">\n              <hy-site-logo type={FooterVariant.footer} color={logoColor} url={this.logoUrl} label={this.logoLabel} />\n            </div>\n            <div class=\"hy-footer-base__content\">\n              <slot name=\"content\"></slot>\n            </div>\n            <div class=\"hy-footer-base__some\">\n              <div class=\"hy-footer-base__some__items\">\n                {some &&\n                  some.map((s) => {\n                    return (\n                      <a\n                        aria-label={s.label}\n                        href={s.url}\n                        class={`hy-footer-base__some__item`}\n                        title={s.label}\n                        target=\"_blank\"\n                      >\n                        <hy-icon icon={`hy-icon-some-${s.type}`} size={36} />\n                      </a>\n                    );\n                  })}\n              </div>\n            </div>\n          </div>\n          <div class=\"hy-footer-base__right\">\n            {links &&\n              links.map((link) => {\n                return (\n                  <hy-footer-link-item\n                    label={link.label}\n                    url={link.url}\n                    color={FooterLinkItemColor.white}\n                    mainLink={link.mainlink}\n                    items={link.items ?? null}\n                  ></hy-footer-link-item>\n                );\n              })}\n          </div>\n          {postSectionLinks && (\n            <div class=\"hy-footer-base__bottom\">\n              <div class=\"hy-footer-base__bottom__links\">\n                {postSectionLinks &&\n                  postSectionLinks.map((item) => (\n                    <a class=\"hy-footer-base__bottom__link\" href={item.url} target={item.external ? \"_blank\" : \"_self\"}>\n                      {item.label}\n                    </a>\n                  ))}\n              </div>\n              {this.copyrightText && <span class=\"hy-footer-base__copy\">{this.copyrightText}</span>}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -65,7 +65,7 @@ hy-footer-link-item:not([main-link]) {
   width: 100%;
 }
 
-@media (min-width: 30rem) {
+@media (min-width: 48rem) {
   hy-footer-link-item:not([main-link]) {
     width: 50%;
   }
@@ -108,6 +108,12 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
   flex-direction: column;
 }
 
+@media (min-width: 48rem) {
+  .hy-footer-link-item--container {
+    margin-bottom: 1rem;
+  }
+}
+
 .hy-footer-link-item--container .hy-footer-link-item:last-child {
   margin-bottom: 16px;
 }
@@ -147,28 +153,36 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
   border: 0;
   padding: 0;
   margin-right: -32px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
 .hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
-  font-size: 1.125rem;
-  line-height: 22px;
+  font-size: 1rem;
+  line-height: 16px;
   letter-spacing: -0.45px;
-  padding: 0 0 1px 0 !important;
+  padding: 1.5rem 0 1px 0 !important;
+  text-transform: uppercase;
 }
 
 @media (min-width: 30rem) {
   .hy-footer-link-item__main .hy-heading__container > h3.hy-heading {
-    font-size: 1.375rem;
-    line-height: 28px;
     letter-spacing: -0.44px;
   }
 }
 
 .hy-footer-link-item__main .hy-heading__container > h3.hy-heading .hy-footer-link-item__link {
-  color: var(--grayscale-black);
+  color: var(--grayscale-white);
   font-family: var(--main-font-family);
   text-decoration: none;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
+}
+
+@media (min-width: 48rem) {
+  .hy-footer-link-item__main .hy-heading__container > h3.hy-heading .hy-footer-link-item__link {
+    margin-bottom: 12px;
+  }
 }
 
 .hy-footer-link-item__color-black {
@@ -198,7 +212,7 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
 }
 
 .hy-footer-link-item__color-white {
-  font-size: 0.875rem;
+  font-size: 0.9375rem;
   line-height: 18px;
   font-weight: 600;
   border-bottom: 1px solid var(--grayscale-white);
@@ -207,6 +221,10 @@ hy-footer-link-item.group[main-link]:not([is-luomus-group]) {
   padding: 15px 20px 15px 0;
 }
 
+.hy-footer-link-item__color-white:hover, .hy-footer-link-item__color-white:focus-within {
+  text-decoration: underline;
+}
+
 .hy-footer-link-item__color-white .hy-footer-link-item__icon svg {
   fill: var(--grayscale-white);
 }

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

@@ -93,6 +93,12 @@
   min-width: 100%;
 }
 
+.hy-dropdown .hy-dropdown__hidden-input {
+  display: none;
+  height: 0;
+  font-size: 0;
+}
+
 .hy-dropdown__toggle {
   font-size: 0.875rem;
   line-height: 24px;
@@ -238,14 +244,6 @@
 }
 
 .hy-dropdown__panel-item {
-  position: relative;
-}
-
-.hy-dropdown__panel-item:not(.is-last) {
-  margin-bottom: 6px;
-}
-
-.hy-dropdown__label {
   font-size: 0.875rem;
   line-height: 24px;
   -webkit-box-align: center;
@@ -265,18 +263,48 @@
   -ms-flex-pack: justify;
   justify-content: space-between;
   letter-spacing: normal;
-  padding: 0 16px;
+  position: relative;
+  padding: 0;
   text-align: left;
   width: 100%;
 }
 
 @media (min-width: 30rem) {
-  .hy-dropdown__label {
+  .hy-dropdown__panel-item {
     font-size: 1rem;
     line-height: 24px;
   }
 }
 
+.hy-dropdown__panel-item:not(.is-last) {
+  margin-bottom: 6px;
+}
+
+.hy-dropdown__panel-item[aria-selected=true] .hy-dropdown__checkbox {
+  border-color: var(--grayscale-black);
+  border-style: solid inset solid solid;
+  border-width: 2px;
+  color: var(--grayscale-black);
+  outline: 0;
+  text-indent: -1px;
+}
+
+.hy-dropdown__panel-item[aria-selected=true] .hy-dropdown__checkbox .hy-dropdown__label-icon {
+  display: -webkit-inline-box !important;
+  display: -ms-inline-flexbox !important;
+  display: inline-flex !important;
+  visibility: visible;
+}
+
+.hy-dropdown__panel-item--focused {
+  cursor: pointer;
+  border-color: var(--brand-main-light);
+  border-style: solid inset solid solid;
+  border-width: 2px;
+  outline: 0;
+  text-indent: -1px;
+}
+
 .hy-dropdown__label-icon {
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -294,39 +322,26 @@
 }
 
 .hy-dropdown__checkbox {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 40px;
   height: 100%;
   margin: 0;
-  opacity: 0;
-  position: absolute;
+  padding: 0 16px;
   width: 100%;
   z-index: 10;
 }
 
-.hy-dropdown__checkbox:checked + label {
-  border-color: var(--grayscale-black);
-  border-style: solid inset solid solid;
-  border-width: 2px;
-  color: var(--grayscale-black);
-  outline: 0;
-  text-indent: -1px;
-}
-
-.hy-dropdown__checkbox:checked + label .hy-dropdown__label-icon {
-  display: -webkit-inline-box !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
-  visibility: visible;
-}
-
 .hy-dropdown__checkbox:hover {
   cursor: pointer;
+  border-color: var(--brand-main-active);
 }
 
-.hy-dropdown__checkbox:hover + label {
-  border-color: var(--brand-main-light);
-}
-
-.hy-dropdown__checkbox:focus + label {
+.hy-dropdown__checkbox:focus-within {
   border-color: var(--brand-main-light);
   border-style: solid inset solid solid;
   border-width: 2px;