@itcenteratunihelsinki/huds-lib 0.5.21 → 0.5.25

package/dist/collection/components/person-profile/person-profile-listing/person-profile.listing.js

@@ -0,0 +1,124 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PersonProfile {
+  constructor() {
+    this.col = 'col-2';
+  }
+  render() {
+    return (h(Host, null,
+      h("ul", { class: `hy-person-profile-listing ${this.col} ${this.inline ? 'is-inline' : ''} ${this.withoutIcons ? 'without-icons' : ''} ${this.textSpacingTight ? 'text-tight' : ''}` }, this.items.map(({ label, items }) => {
+        if (items.filter(({ label, url }) => label !== '' && url !== '').length > 0) {
+          return (h("li", null,
+            h("h3", { class: "hy-person-profile-listing__label" }, label),
+            h("ul", { class: "hy-person-profile-listing__items" }, items.map(({ label, url }, index) => {
+              if (url) {
+                return (h("li", { class: "hy-person-profile-listing__item" },
+                  h("a", { href: url },
+                    index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                    h("span", null, label))));
+              }
+              return (h("li", { class: "hy-person-profile-listing__item" },
+                index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                h("span", null, label)));
+            }))));
+        }
+      }))));
+  }
+  static get is() { return "hy-person-profile-listing"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["person-profile-listing.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["person-profile-listing.css"]
+  }; }
+  static get properties() { return {
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "personProfileListingItems",
+        "resolved": "[{ label: string; items: string[]; }]",
+        "references": {
+          "personProfileListingItems": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "col": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'col-1' | 'col-2' | 'col-4'",
+        "resolved": "\"col-1\" | \"col-2\" | \"col-4\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "col",
+      "reflect": false,
+      "defaultValue": "'col-2'"
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inline",
+      "reflect": false
+    },
+    "withoutIcons": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "without-icons",
+      "reflect": false
+    },
+    "textSpacingTight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text-spacing-tight",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/person-profile/person-profile.css

@@ -0,0 +1,506 @@
+:root {
+  --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
+  --brand-main-light: #107eab;
+  --brand-main-active: #005379;
+  --brand-main-dark: #003146;
+  --brand-main-nearly-black: #000222;
+  --link-blue: #0479a4;
+  --link-disabled: #767676;
+  --grayscale-white: #fff;
+  --grayscale-slightly-gray: #fefefe;
+  --grayscale-light: #f8f8f8;
+  --grayscale-medium: #d2d2d2;
+  --grayscale-background-box: #f5f5f5;
+  --grayscale-tabs-border: #e6e6e6;
+  --grayscale-background-arrow: #dfdfdf;
+  --grayscale-medium-dark: #979797;
+  --grayscale-dark: #555555;
+  --grayscale-dark-text: #222222;
+  --grayscale-black: #000000;
+  --additional-red-light: #e5053a;
+  --additional-red-dark: #a31621;
+  --additional-purple-light: #420039;
+  --additional-yellow: #f9a21a;
+  --additional-skyblue: #48c5f8;
+  --additional-orange: #d14600;
+  --additional-green-light: #96ba3c;
+  --additional-green-dark: #006400;
+  --hover-gray: #eaeaea;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+:root {
+  --gutter-mobile: 16px;
+  --gutter-narrow: 24px;
+  --gutter-medium: 24px;
+  --gutter-wide: 24px;
+  --gutter-extrawide: 32px;
+}
+
+/**
+ * Mixin for fluid type.
+ * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
+ */
+
+:root {
+  --breakpoint-extrawide: 75.0625rem;
+  --breakpoint-max-width: 75.0625rem;
+  --breakpoint-medium: 48rem;
+  --breakpoint-narrow: 30rem;
+  --breakpoint-wide: 60rem;
+}
+
+.hy-profile-page__back-button {
+  font-size: 1rem;
+  line-height: 20px;
+  font-weight: 600;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.5px;
+  color: var(--brand-main-light);
+  padding: 12px 10px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  text-decoration: none;
+  margin-left: -10px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__back-button {
+    margin-bottom: 24px;
+  }
+}
+
+.hy-profile-page__back-button hy-icon {
+  margin-right: 16px;
+}
+
+.hy-profile-page__back-button hy-icon svg {
+  fill: var(--brand-main-light);
+}
+
+.hy-profile-page__section {
+  padding: 32px 0;
+}
+
+.hy-profile-page__section:first-of-type {
+  padding: 0 0 32px;
+}
+
+.hy-profile-page__section:not(:first-of-type) {
+  border-top: 1px solid var(--grayscale-medium);
+}
+
+.hy-profile-page__section > h2 {
+  font-size: 1.625rem;
+  line-height: 32px;
+  font-weight: 700;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.52px;
+  color: var(--grayscale-black);
+  margin: 0 0 32px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__section > h2 {
+    font-size: 2.125rem;
+    line-height: 40px;
+    letter-spacing: -0.68px;
+  }
+}
+
+.hy-profile-page__organization-units-section {
+  font-family: var(--main-font-family);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.hy-profile-page__organization-units-section h3 {
+  font-size: 0.9375rem;
+  line-height: 18px;
+  font-weight: 700;
+  letter-spacing: -0.28px;
+  color: var(--grayscale-black);
+  margin: 0 0 8px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__organization-units-section h3 {
+    font-size: 1.0625rem;
+    line-height: 20px;
+    letter-spacing: -0.32px;
+  }
+}
+
+.hy-profile-page__organization-units-section {
+  margin-top: 24px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__organization-units-section {
+    margin-top: 32px;
+  }
+}
+
+.hy-profile-page__organizations,
+.hy-profile-page__organizations ul,
+.hy-profile-page__research-organizations,
+.hy-profile-page__research-organizations ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.hy-profile-page__organizations li,
+.hy-profile-page__research-organizations li {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.hy-profile-page__organizations li span,
+.hy-profile-page__research-organizations li span {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  color: var(--grayscale-black);
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__organizations li span,
+.hy-profile-page__research-organizations li span {
+    font-size: 1.0625rem;
+    line-height: 26px;
+  }
+}
+
+.hy-profile-page__organizations li > span,
+.hy-profile-page__research-organizations li > span {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.hy-profile-page__organizations li hy-icon,
+.hy-profile-page__research-organizations li hy-icon {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 22px;
+  width: 28px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__organizations li hy-icon,
+.hy-profile-page__research-organizations li hy-icon {
+    height: 26px;
+  }
+}
+
+.hy-profile-page__person-about-text {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  font-family: var(--main-font-family);
+  color: var(--grayscale-black);
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__person-about-text {
+    font-size: 1.0625rem;
+    line-height: 26px;
+  }
+}
+
+.hy-profile-page__person-about-text-toggle {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  font-family: var(--main-font-family);
+  color: var(--link-blue);
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__person-about-text-toggle {
+    font-size: 1.0625rem;
+    line-height: 26px;
+  }
+}
+
+.hy-profile-page__person-about-text-toggle:hover {
+  cursor: pointer;
+}
+
+.hy-profile-page__person-information {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__person-information {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin-bottom: 40px;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+}
+
+.hy-profile-page__image {
+  aspect-ratio: 328/425;
+  width: 100%;
+  max-width: 328px;
+  -o-object-fit: cover;
+  object-fit: cover;
+  background-color: var(--grayscale-background-box);
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__image {
+    max-width: 194px;
+  }
+}
+
+.hy-profile-page__contact-information > h2 {
+  font-size: 1.625rem;
+  line-height: 32px;
+  font-weight: 700;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.52px;
+  color: var(--grayscale-black);
+  margin: 0 0 32px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__contact-information > h2 {
+    font-size: 2.125rem;
+    line-height: 40px;
+    letter-spacing: -0.68px;
+  }
+}
+
+.hy-profile-page__name {
+  font-size: 2rem;
+  line-height: 38px;
+  font-weight: 700;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.8px;
+  color: var(--grayscale-black);
+  margin: 0 0 4px;
+  text-transform: uppercase;
+}
+
+@media (min-width: 60rem) {
+  .hy-profile-page__name {
+    font-size: 2.875rem;
+    line-height: 54px;
+    letter-spacing: -1.15px;
+    margin: 0 0 8px;
+  }
+}
+
+@media (min-width: 120.0625rem) {
+  .hy-profile-page__name {
+    font-size: 3.25rem;
+    line-height: 60px;
+    letter-spacing: -1.3px;
+  }
+}
+
+.hy-profile-page__job-title {
+  font-size: 1rem;
+  line-height: 20px;
+  font-weight: 700;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.32px;
+  color: var(--grayscale-black);
+  margin: 0 0 4px;
+}
+
+@media (min-width: 60rem) {
+  .hy-profile-page__job-title {
+    font-size: 1.125rem;
+    line-height: 24px;
+    letter-spacing: -0.36px;
+  }
+}
+
+.hy-profile-page__additional-information {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  font-family: var(--main-font-family);
+  color: var(--grayscale-dark-text);
+  margin: 0;
+}
+
+@media (min-width: 60rem) {
+  .hy-profile-page__additional-information {
+    font-size: 1.0625rem;
+    line-height: 26px;
+  }
+}
+
+.hy-profile-page__person-content-container {
+  display: none;
+  margin-top: 32px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__person-content-container {
+    margin-top: 44px;
+  }
+}
+
+.hy-profile-page__person-content-listing {
+  display: grid;
+  gap: 32px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hy-profile-page__person-content > h2 {
+  margin: 0 0 8px;
+}
+
+.hy-profile-page__person-content > h2 a {
+  font-size: 1.125rem;
+  line-height: 24px;
+  font-weight: 700;
+  font-family: var(--main-font-family);
+  letter-spacing: -0.36px;
+  color: var(--link-blue);
+  text-decoration: none;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__person-content > h2 a {
+    font-size: 1.375rem;
+    line-height: 28px;
+    letter-spacing: -0.44px;
+  }
+}
+
+.hy-profile-page__person-content > span,
+.hy-profile-page__person-content > p {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  font-family: var(--main-font-family);
+  color: var(--grayscale-dark-text);
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__person-content > span,
+.hy-profile-page__person-content > p {
+    font-size: 1.0625rem;
+    line-height: 26px;
+    letter-spacing: -0.44px;
+  }
+}
+
+.hy-profile-page__person-content > p {
+  margin: 8px 0 0;
+}
+
+.hy-profile-page__loader {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin-top: 32px;
+}
+
+@media (min-width: 48rem) {
+  .hy-profile-page__loader {
+    margin-top: 44px;
+  }
+}
+
+.hy-profile-page__loader div {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 6px solid #fff;
+  border-radius: 50%;
+  -webkit-animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(--brand-main-light) transparent transparent transparent;
+}
+
+.hy-profile-page__loader div:nth-child(1) {
+  -webkit-animation-delay: -0.45s;
+  animation-delay: -0.45s;
+}
+
+.hy-profile-page__loader div:nth-child(2) {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+
+.hy-profile-page__loader div:nth-child(3) {
+  -webkit-animation-delay: -0.15s;
+  animation-delay: -0.15s;
+}
+
+@-webkit-keyframes loader-ring {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-ring {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}