@itcenteratunihelsinki/huds-lib 0.5.22 → 0.5.23

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);
+  }
+}

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

@@ -0,0 +1,199 @@
+import { Component, Host, h, Prop, State, Fragment } from '@stencil/core';
+export class PersonProfile {
+  constructor() {
+    this.isFullAboutTextHidden = false;
+  }
+  componentWillLoad() {
+    this.viewportSize = window.innerWidth;
+  }
+  toggleShowFullAboutText() {
+    this.isFullAboutTextHidden = !this.isFullAboutTextHidden;
+  }
+  render() {
+    const { name, job_title, additional_information, image_url, contact_information, organization_units, about, research, person_content, } = JSON.parse(this.personDataJson);
+    const { organizations, research_organizations } = organization_units.items;
+    const aboutDescriptionTextDestructured = about.description
+      .split('\n')
+      .filter((n) => n)
+      .map((item) => item.replace(/(<([^>]+)>)/gi, ''));
+    const aboutDescriptionLength = aboutDescriptionTextDestructured.join(' ').length;
+    let trimmedAboutDescription = '';
+    if (aboutDescriptionLength > 650) {
+      if (this.isFullAboutTextHidden) {
+        const ellipsisTextArray = (aboutDescriptionTextDestructured.join('\n') + '...').split('\n');
+        trimmedAboutDescription = ellipsisTextArray
+          .map((item) => {
+          return `<p>${item}</p>`;
+        })
+          .join('');
+      }
+      else {
+        const ellipsisTextArray = (aboutDescriptionTextDestructured.join('\n').substring(0, 647) + '...').split('\n');
+        trimmedAboutDescription = ellipsisTextArray
+          .map((item) => {
+          return `<p>${item}</p>`;
+        })
+          .join('');
+      }
+    }
+    window.addEventListener('resize', () => {
+      this.viewportSize = window.innerWidth;
+    });
+    return (h(Host, null,
+      h("section", { class: "hy-profile-page" },
+        h("a", { href: this.peopleFinderReturnLink, class: "hy-profile-page__back-button" },
+          h("hy-icon", { icon: 'hy-icon-arrow-left', size: 24 }),
+          h("span", null, "Back to people finder")),
+        h("section", { class: "hy-profile-page__section" },
+          h("div", { class: "hy-profile-page__person-information" },
+            h("div", null,
+              h("h1", { class: "hy-profile-page__name" }, name),
+              job_title && h("p", { class: "hy-profile-page__job-title" }, job_title),
+              additional_information && (h("p", { class: "hy-profile-page__additional-information" }, additional_information))),
+            image_url ? (h("img", { src: image_url, alt: "", class: "hy-profile-page__image" })) : (h("div", { class: "hy-profile-page__image", "aria-hidden": "true" }))),
+          contact_information && (h("div", { class: "hy-profile-page__contact-information" },
+            contact_information.label && h("h2", null, contact_information.label),
+            contact_information.items && (h("hy-person-profile-listing", { items: contact_information.items, col: "col-4", withoutIcons: true, textSpacingTight: true }))))),
+        (organizations.items.length > 0 || Object.keys(research_organizations.items).length > 0) && (h("section", { class: "hy-profile-page__section" },
+          organization_units.label && h("h2", null, organization_units.label),
+          organizations.items.length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" },
+            h("h3", null, organizations.label),
+            h("ul", { class: "hy-profile-page__organizations" },
+              h("li", null, organizations.items.map(({ name }, index) => {
+                return (h("span", null,
+                  index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                  h("span", null, name[organization_units.lang])));
+              }))))),
+          Object.keys(research_organizations.items).length > 0 && (h("section", { class: "hy-profile-page__organization-units-section" },
+            h("h3", null, research_organizations.label),
+            h("ul", { class: "hy-profile-page__research-organizations" }, Object.values(research_organizations.items).map(([...item]) => (h("li", null, item.map(({ name }, index) => {
+              return (h(Fragment, null, index !== 0 ? (h("ul", null,
+                h("li", null,
+                  h("span", null,
+                    h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                    h("span", null, name[organization_units.lang]))))) : (h("span", null, name[organization_units.lang]))));
+            }))))))))),
+        about && aboutDescriptionLength !== 0 && (h("section", { class: "hy-profile-page__section" },
+          h("h2", null, about.label),
+          about.description && (h("div", { class: "hy-profile-page__person-about-text", innerHTML: !this.isFullAboutTextHidden && aboutDescriptionLength > 650
+              ? trimmedAboutDescription
+              : about.description })),
+          aboutDescriptionLength > 650 && (h("button", { class: "hy-profile-page__person-about-text-toggle", onClick: () => this.toggleShowFullAboutText(), "aria-expanded": `${this.isFullAboutTextHidden ? 'true' : 'false'}` }, this.isFullAboutTextHidden ? this.hideFullAboutText : this.showFullAboutText)))),
+        (research || person_content) && (h("section", { class: "hy-profile-page__section" },
+          research.label && h("h2", null, research.label),
+          research.items && (h("hy-person-profile-listing", { items: research.items, col: "col-1", inline: true })),
+          h("div", { class: "hy-profile-page__loader", role: "presentation" },
+            h("div", null),
+            h("div", null),
+            h("div", null),
+            h("div", null)),
+          this.viewportSize < 768 ? (h("div", { class: "hy-profile-page__person-content-container" },
+            h("hy-accordion-container", { accordionid: "accordion-container-person-content" },
+              person_content.publications && (h("hy-accordion-item", { accordiontitle: person_content.publications.label })),
+              person_content.projects && (h("hy-accordion-item", { accordiontitle: person_content.projects.label })),
+              person_content.activities && (h("hy-accordion-item", { accordiontitle: person_content.activities.label }))))) : (h("div", { class: "hy-profile-page__person-content-container" },
+            h("hy-tabs", { "tab-id": "tabs-container-person-content" },
+              person_content.publications && (h("hy-tabs-item", { "tab-title": person_content.publications.label })),
+              person_content.projects && h("hy-tabs-item", { "tab-title": person_content.projects.label }),
+              person_content.activities && (h("hy-tabs-item", { "tab-title": person_content.activities.label }))))))))));
+  }
+  static get is() { return "hy-person-profile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["person-profile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["person-profile.css"]
+  }; }
+  static get properties() { return {
+    "personDataJson": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "person-data-json",
+      "reflect": false
+    },
+    "showFullAboutText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-full-about-text",
+      "reflect": false
+    },
+    "hideFullAboutText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-full-about-text",
+      "reflect": false
+    },
+    "organizationItemsLabelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "organization-items-label-text",
+      "reflect": false
+    },
+    "peopleFinderReturnLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "people-finder-return-link",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "isFullAboutTextHidden": {},
+    "viewportSize": {}
+  }; }
+}