From 6f8442bbf1dcd82f9455351a351215e6be49cf7e Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <ekaterina.kondareva@helsinki.fi>
Date: Mon, 7 Dec 2020 12:44:29 +0200
Subject: [PATCH] Nxstage 977 courses
---
src/components.d.ts | 62 ++
.../hy-content-list-item.scss | 184 ++++
.../hy-content-list-item.tsx | 113 +++
.../courses/hy-content-list-item/readme.md | 44 +
.../hy-content-list/hy-content-list.scss | 17 +
.../hy-content-list/hy-content-list.tsx | 103 +++
.../courses/hy-content-list/readme.md | 30 +
src/components/hy-tag/hy-tag.scss | 19 +
src/components/hy-tag/hy-tag.tsx | 22 +
src/components/hy-tag/readme.md | 21 +
src/components/icon/readme.md | 2 +
.../hy-desktop-menu-links.tsx | 218 ++---
src/index.html | 856 ++++++++++++++++--
src/utils/utils.ts | 6 +
14 files changed, 1536 insertions(+), 161 deletions(-)
create mode 100644 src/components/courses/hy-content-list-item/hy-content-list-item.scss
create mode 100644 src/components/courses/hy-content-list-item/hy-content-list-item.tsx
create mode 100644 src/components/courses/hy-content-list-item/readme.md
create mode 100644 src/components/courses/hy-content-list/hy-content-list.scss
create mode 100644 src/components/courses/hy-content-list/hy-content-list.tsx
create mode 100644 src/components/courses/hy-content-list/readme.md
create mode 100644 src/components/hy-tag/hy-tag.scss
create mode 100644 src/components/hy-tag/hy-tag.tsx
create mode 100644 src/components/hy-tag/readme.md
diff --git a/src/components.d.ts b/src/components.d.ts
index fb06caaf..dcf02cd2 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,6 +10,7 @@ import {
BreadcrumbVariants,
ButtonVariants,
ColorVariant,
+ CourseVariants,
CtaLinkButtonVariants,
CtaLinkVariants,
FooterLinkItemColor,
@@ -29,6 +30,7 @@ import {
ProcessFlowBoxVariants,
SiteLogoSize,
} from './utils/utils';
+import {TagValue} from './components/courses/hy-content-list-item/hy-content-list-item';
import {DesktopLinks} from './components/site-header/hy-desktop-menu-links/hy-desktop-menu-links';
import {IDropdownItem} from './components/hy-dropdown/hy-dropdown';
import {IFilterGroupFilter} from './components/hy-filter-group/hy-filter-group';
@@ -193,6 +195,23 @@ export namespace Components {
checkboxLabel: string;
checkboxValue: string | number;
}
+ interface HyContentList {
+ dataItems: string;
+ linkLabel: string;
+ }
+ interface HyContentListItem {
+ courseCode?: string;
+ courseCredits?: string;
+ courseEndDate?: string;
+ courseEnrollmentLink?: string;
+ courseLinkLabel?: string;
+ courseName?: string;
+ courseStartDate?: string;
+ courseStudyFormat?: string;
+ courseTags: TagValue[] | string;
+ courseTeachingLanguage?: string;
+ variant: CourseVariants;
+ }
interface HyCtaButton {
headerstyle: string;
isExternal: boolean;
@@ -565,6 +584,7 @@ export namespace Components {
interface HyTabsItem {
tabTitle?: string;
}
+ interface HyTag {}
interface HyTinyText {}
interface HyTwoColumns {
reversed: boolean;
@@ -698,6 +718,16 @@ declare global {
prototype: HTMLHyCheckboxElement;
new (): HTMLHyCheckboxElement;
};
+ interface HTMLHyContentListElement extends Components.HyContentList, HTMLStencilElement {}
+ var HTMLHyContentListElement: {
+ prototype: HTMLHyContentListElement;
+ new (): HTMLHyContentListElement;
+ };
+ interface HTMLHyContentListItemElement extends Components.HyContentListItem, HTMLStencilElement {}
+ var HTMLHyContentListItemElement: {
+ prototype: HTMLHyContentListItemElement;
+ new (): HTMLHyContentListItemElement;
+ };
interface HTMLHyCtaButtonElement extends Components.HyCtaButton, HTMLStencilElement {}
var HTMLHyCtaButtonElement: {
prototype: HTMLHyCtaButtonElement;
@@ -990,6 +1020,11 @@ declare global {
prototype: HTMLHyTabsItemElement;
new (): HTMLHyTabsItemElement;
};
+ interface HTMLHyTagElement extends Components.HyTag, HTMLStencilElement {}
+ var HTMLHyTagElement: {
+ prototype: HTMLHyTagElement;
+ new (): HTMLHyTagElement;
+ };
interface HTMLHyTinyTextElement extends Components.HyTinyText, HTMLStencilElement {}
var HTMLHyTinyTextElement: {
prototype: HTMLHyTinyTextElement;
@@ -1023,6 +1058,8 @@ declare global {
'hy-breadcrumbs': HTMLHyBreadcrumbsElement;
'hy-button': HTMLHyButtonElement;
'hy-checkbox': HTMLHyCheckboxElement;
+ 'hy-content-list': HTMLHyContentListElement;
+ 'hy-content-list-item': HTMLHyContentListItemElement;
'hy-cta-button': HTMLHyCtaButtonElement;
'hy-cta-link': HTMLHyCtaLinkElement;
'hy-desktop-menu-links': HTMLHyDesktopMenuLinksElement;
@@ -1081,6 +1118,7 @@ declare global {
'hy-site-search': HTMLHySiteSearchElement;
'hy-tabs': HTMLHyTabsElement;
'hy-tabs-item': HTMLHyTabsItemElement;
+ 'hy-tag': HTMLHyTagElement;
'hy-tiny-text': HTMLHyTinyTextElement;
'hy-two-columns': HTMLHyTwoColumnsElement;
'hy-user-login-form': HTMLHyUserLoginFormElement;
@@ -1235,6 +1273,23 @@ declare namespace LocalJSX {
checkboxLabel?: string;
checkboxValue?: string | number;
}
+ interface HyContentList {
+ dataItems?: string;
+ linkLabel?: string;
+ }
+ interface HyContentListItem {
+ courseCode?: string;
+ courseCredits?: string;
+ courseEndDate?: string;
+ courseEnrollmentLink?: string;
+ courseLinkLabel?: string;
+ courseName?: string;
+ courseStartDate?: string;
+ courseStudyFormat?: string;
+ courseTags?: TagValue[] | string;
+ courseTeachingLanguage?: string;
+ variant?: CourseVariants;
+ }
interface HyCtaButton {
headerstyle?: string;
isExternal?: boolean;
@@ -1613,6 +1668,7 @@ declare namespace LocalJSX {
interface HyTabsItem {
tabTitle?: string;
}
+ interface HyTag {}
interface HyTinyText {}
interface HyTwoColumns {
reversed?: boolean;
@@ -1697,6 +1753,8 @@ declare namespace LocalJSX {
'hy-breadcrumbs': HyBreadcrumbs;
'hy-button': HyButton;
'hy-checkbox': HyCheckbox;
+ 'hy-content-list': HyContentList;
+ 'hy-content-list-item': HyContentListItem;
'hy-cta-button': HyCtaButton;
'hy-cta-link': HyCtaLink;
'hy-desktop-menu-links': HyDesktopMenuLinks;
@@ -1755,6 +1813,7 @@ declare namespace LocalJSX {
'hy-site-search': HySiteSearch;
'hy-tabs': HyTabs;
'hy-tabs-item': HyTabsItem;
+ 'hy-tag': HyTag;
'hy-tiny-text': HyTinyText;
'hy-two-columns': HyTwoColumns;
'hy-user-login-form': HyUserLoginForm;
@@ -1777,6 +1836,8 @@ declare module '@stencil/core' {
'hy-breadcrumbs': LocalJSX.HyBreadcrumbs & JSXBase.HTMLAttributes<HTMLHyBreadcrumbsElement>;
'hy-button': LocalJSX.HyButton & JSXBase.HTMLAttributes<HTMLHyButtonElement>;
'hy-checkbox': LocalJSX.HyCheckbox & JSXBase.HTMLAttributes<HTMLHyCheckboxElement>;
+ 'hy-content-list': LocalJSX.HyContentList & JSXBase.HTMLAttributes<HTMLHyContentListElement>;
+ 'hy-content-list-item': LocalJSX.HyContentListItem & JSXBase.HTMLAttributes<HTMLHyContentListItemElement>;
'hy-cta-button': LocalJSX.HyCtaButton & JSXBase.HTMLAttributes<HTMLHyCtaButtonElement>;
'hy-cta-link': LocalJSX.HyCtaLink & JSXBase.HTMLAttributes<HTMLHyCtaLinkElement>;
'hy-desktop-menu-links': LocalJSX.HyDesktopMenuLinks & JSXBase.HTMLAttributes<HTMLHyDesktopMenuLinksElement>;
@@ -1842,6 +1903,7 @@ declare module '@stencil/core' {
'hy-site-search': LocalJSX.HySiteSearch & JSXBase.HTMLAttributes<HTMLHySiteSearchElement>;
'hy-tabs': LocalJSX.HyTabs & JSXBase.HTMLAttributes<HTMLHyTabsElement>;
'hy-tabs-item': LocalJSX.HyTabsItem & JSXBase.HTMLAttributes<HTMLHyTabsItemElement>;
+ 'hy-tag': LocalJSX.HyTag & JSXBase.HTMLAttributes<HTMLHyTagElement>;
'hy-tiny-text': LocalJSX.HyTinyText & JSXBase.HTMLAttributes<HTMLHyTinyTextElement>;
'hy-two-columns': LocalJSX.HyTwoColumns & JSXBase.HTMLAttributes<HTMLHyTwoColumnsElement>;
'hy-user-login-form': LocalJSX.HyUserLoginForm & JSXBase.HTMLAttributes<HTMLHyUserLoginFormElement>;
diff --git a/src/components/courses/hy-content-list-item/hy-content-list-item.scss b/src/components/courses/hy-content-list-item/hy-content-list-item.scss
new file mode 100644
index 00000000..c60f2e28
--- /dev/null
+++ b/src/components/courses/hy-content-list-item/hy-content-list-item.scss
@@ -0,0 +1,184 @@
+:host {
+ background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);
+ cursor: pointer;
+ display: flex;
+ margin-bottom: 16px;
+ position: relative;
+
+ @include breakpoint($narrow) {
+ margin-bottom: 24px;
+ }
+}
+:host(.row) {
+ max-width: 100%;
+ padding: 21px 0 60px 12px;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ padding: 21px 0 12px 24px;
+ }
+ @include breakpoint($wide) {
+ margin-bottom: 16px;
+ }
+}
+:host(.grid) {
+ max-width: 100%;
+ padding: 21px 0 60px 12px;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ margin-right: var(--gutter-medium);
+ max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
+ padding: 21px 0 60px 12px;
+ width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
+ }
+ @include breakpoint($wide) {
+ margin-bottom: 27px;
+ margin-right: var(--gutter-wide);
+ max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);
+ width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);
+ }
+ @include breakpoint($extrawide) {
+ margin-bottom: 32px;
+ margin-right: var(--gutter-extrawide);
+ max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);
+ width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);
+ }
+}
+
+:host(.grid:nth-of-type(2n + 0)) {
+ @include breakpoint($narrow) {
+ margin-right: 0;
+ }
+ @include breakpoint($wide) {
+ margin-right: var(--gutter-wide);
+ }
+ @include breakpoint($extrawide) {
+ margin-right: var(--gutter-extrawide);
+ }
+}
+
+:host(.grid:nth-of-type(3n + 0)) {
+ @include breakpoint($wide) {
+ margin-right: 0;
+ }
+}
+
+.hy-content-list-item {
+ font-family: var(--main-font-family);
+ position: relative;
+ width: 100%;
+
+ a {
+ text-decoration: none;
+ }
+
+ &--container {
+ cursor: pointer;
+ }
+
+ &--item-name {
+ color: var(--link-blue);
+ @include font-size(20px, 24px);
+ @include font-weight($bold);
+ letter-spacing: -0.6px;
+ margin-bottom: 16px;
+ }
+
+ &--metadata {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ color: var(--grayscale-black);
+ @include font-size(14px, 16px);
+ @include font-weight($semibold);
+ letter-spacing: -0.44px;
+ line-height: 16px;
+
+ margin-bottom: 19px;
+
+ &--item:after {
+ content: '|';
+ padding: 0 8px;
+ }
+ &--item--last:after {
+ content: ' ';
+ }
+ }
+
+ &--link {
+ position: absolute;
+ right: -6px;
+
+ a {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ text-decoration: none;
+
+ .label {
+ @include font-size(16px, 16px);
+ @include font-weight($bold);
+ color: var(--link-blue);
+ letter-spacing: -0.5px;
+ line-height: 16px;
+ margin-right: 8px;
+ text-align: right;
+ }
+
+ .icon-wrapper {
+ background-color: var(--brand-main-light);
+ z-index: 10;
+
+ .icon {
+ transform: rotate(-45deg);
+ position: relative;
+ overflow: hidden;
+
+ svg {
+ background-color: transparent;
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+ fill: var(--grayscale-white);
+ padding: 10.29px;
+ }
+ }
+ }
+ }
+ }
+}
+
+.hy-content-list-item.row {
+ .hy-content-list-item--link {
+ bottom: -60px;
+ padding-bottom: 12px;
+
+ @include breakpoint($narrow) {
+ bottom: 0;
+ padding-bottom: 0;
+ }
+ }
+
+ .hy-content-list-item--tags {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ @include breakpoint($wide) {
+ flex-direction: row;
+ padding-right: 200px;
+ }
+ }
+}
+
+.hy-content-list-item.grid {
+ .hy-content-list-item--link {
+ bottom: -60px;
+ padding-bottom: 12px;
+ }
+
+ .hy-content-list-item--tags {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ }
+}
diff --git a/src/components/courses/hy-content-list-item/hy-content-list-item.tsx b/src/components/courses/hy-content-list-item/hy-content-list-item.tsx
new file mode 100644
index 00000000..c08a3fe8
--- /dev/null
+++ b/src/components/courses/hy-content-list-item/hy-content-list-item.tsx
@@ -0,0 +1,113 @@
+export interface TagValue {
+ name: string;
+}
+
+import {Component, Element, h, Listen, Prop, Watch} from '@stencil/core';
+import {CourseVariants} from '../../../utils/utils';
+
+let keys = {
+ enter: 'Enter',
+};
+
+@Component({
+ tag: 'hy-content-list-item',
+ styleUrl: 'hy-content-list-item.scss',
+ shadow: true,
+})
+export class HyContentLstItem {
+ @Prop() variant: CourseVariants = CourseVariants.default;
+ @Prop() courseCode?: string;
+ @Prop() courseName?: string;
+ @Prop() courseCredits?: string;
+ private _courseTags: TagValue[];
+ @Prop() courseTags: TagValue[] | string;
+ @Prop() courseStartDate?: string;
+ @Prop() courseEndDate?: string;
+ @Prop() courseStudyFormat?: string;
+ @Prop() courseEnrollmentLink?: string;
+ @Prop() courseTeachingLanguage?: string;
+ @Prop() courseLinkLabel?: string;
+ private _dateValue: string = '';
+ @Element() el: HTMLElement;
+
+ @Watch('courseTags')
+ arrayDataWatcher(newValue: TagValue[] | string) {
+ if (typeof newValue === 'string') {
+ this._courseTags = JSON.parse(newValue);
+ } else {
+ this._courseTags = newValue;
+ }
+ }
+
+ componentWillLoad() {
+ this.arrayDataWatcher(this.courseTags);
+
+ // Convert to date format: 25.05. - 30.07.2020. Incoming date is in format YYYY-MM-DD
+ let startDate = this.courseStartDate ? this.courseStartDate.split(/\-|\s/) : '';
+ let endDate = this.courseEndDate ? this.courseEndDate.split(/\-|\s/) : '';
+
+ if (!startDate && endDate) {
+ this._dateValue = ` - ${endDate[2]}.${endDate[1]}.${endDate[0]}`;
+ } else if (startDate && !endDate) {
+ this._dateValue = `${startDate[2]}.${startDate[1]}. - `;
+ } else if (startDate && endDate) {
+ this._dateValue = `${startDate[2]}.${startDate[1]}. - ${endDate[2]}.${endDate[1]}.${endDate[0]}`;
+ }
+ }
+
+ @Listen('keydown')
+ handleKeyDown(event) {
+ const key = (event as KeyboardEvent).code;
+ if (key == keys.enter) {
+ let card = this.el;
+ window.open(card.dataset.location, '_blank');
+ }
+ }
+
+ render() {
+ const classAttributes = [this.variant, 'hy-content-list-item'].join(' ');
+
+ const target = '_blank';
+ const ariaLabel = 'Link points outside the current website.';
+
+ return [
+ <div class={classAttributes} tabindex="0">
+ <div class="hy-content-list-item--item-name">{this.courseName}</div>
+ <div class="hy-content-list-item--metadata">
+ <div class="hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first">
+ <span>{this._dateValue}</span>
+ </div>
+ <div class="hy-content-list-item--metadata--item">
+ <span>{this.courseStudyFormat}</span>
+ </div>
+ <div class="hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last ">
+ <span>{this.courseCredits}</span>
+ </div>
+ </div>
+ {this._courseTags && (
+ <div class="hy-content-list-item--tags">
+ {this._courseTags.map((x) => {
+ return <hy-tag>{x.name}</hy-tag>;
+ })}
+ </div>
+ )}
+ <div class="hy-content-list-item--link">
+ <a
+ href={this.courseEnrollmentLink}
+ target={target}
+ aria-label={ariaLabel}
+ class="hy-content-list-item--link--link"
+ tabindex="-1"
+ >
+ <span class="label">{this.courseLinkLabel}</span>
+ <span class="icon-wrapper">
+ <div class="icon">
+ <hy-icon icon={'hy-icon-arrow-to-right'} size={40} />
+ </div>
+ </span>
+ </a>
+ </div>
+ </div>,
+ ];
+ }
+}
diff --git a/src/components/courses/hy-content-list-item/readme.md b/src/components/courses/hy-content-list-item/readme.md
new file mode 100644
index 00000000..18e03395
--- /dev/null
+++ b/src/components/courses/hy-content-list-item/readme.md
@@ -0,0 +1,44 @@
+# hy-content-list-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------------------ | -------------------------- | ----------- | ----------------------------------------------- | ------------------------ |
+| `courseCode` | `course-code` | | `string` | `undefined` |
+| `courseCredits` | `course-credits` | | `string` | `undefined` |
+| `courseEndDate` | `course-end-date` | | `string` | `undefined` |
+| `courseEnrollmentLink` | `course-enrollment-link` | | `string` | `undefined` |
+| `courseLinkLabel` | `course-link-label` | | `string` | `undefined` |
+| `courseName` | `course-name` | | `string` | `undefined` |
+| `courseStartDate` | `course-start-date` | | `string` | `undefined` |
+| `courseStudyFormat` | `course-study-format` | | `string` | `undefined` |
+| `courseTags` | `course-tags` | | `TagValue[] \| string` | `undefined` |
+| `courseTeachingLanguage` | `course-teaching-language` | | `string` | `undefined` |
+| `variant` | `variant` | | `CourseVariants.default \| CourseVariants.grid` | `CourseVariants.default` |
+
+## Dependencies
+
+### Used by
+
+- [hy-content-list](../hy-content-list)
+
+### Depends on
+
+- [hy-tag](../../hy-tag)
+- [hy-icon](../../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-content-list-item --> hy-tag
+ hy-content-list-item --> hy-icon
+ hy-content-list --> hy-content-list-item
+ style hy-content-list-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/courses/hy-content-list/hy-content-list.scss b/src/components/courses/hy-content-list/hy-content-list.scss
new file mode 100644
index 00000000..031d0982
--- /dev/null
+++ b/src/components/courses/hy-content-list/hy-content-list.scss
@@ -0,0 +1,17 @@
+:host {
+ display: block;
+}
+
+.hy-content-list {
+ display: flex;
+ font-family: var(--main-font-family);
+ flex-wrap: wrap;
+}
+
+.hy-content-list.row {
+ flex-direction: column;
+}
+
+.hy-content-list.grid {
+ flex-direction: row;
+}
diff --git a/src/components/courses/hy-content-list/hy-content-list.tsx b/src/components/courses/hy-content-list/hy-content-list.tsx
new file mode 100644
index 00000000..2555aaff
--- /dev/null
+++ b/src/components/courses/hy-content-list/hy-content-list.tsx
@@ -0,0 +1,103 @@
+import {CourseVariants} from '../../../utils/utils';
+import {Component, ComponentInterface, Element, h, Host, Prop, State} from '@stencil/core';
+
+@Component({
+ tag: 'hy-content-list',
+ styleUrl: 'hy-content-list.scss',
+ shadow: true,
+})
+export class HyContentList implements ComponentInterface {
+ @Prop() linkLabel: string = 'Go to course page';
+ @Prop() dataItems: string;
+ private _dataItems: [];
+ private variant: CourseVariants = CourseVariants.default;
+ @State() courseRealisations: Array<object> = [];
+ @Element() el: HTMLElement;
+
+ handleCardClick(id) {
+ let card = this.el.shadowRoot.querySelectorAll('#' + id)[0] as HTMLElement;
+ window.open(card.dataset.location, '_blank');
+ }
+
+ componentDidLoad() {
+ this._dataItems = JSON.parse(this.dataItems);
+ let courseRealisations = [];
+ this._dataItems.forEach((item) => {
+ let courseObject = JSON.parse(JSON.stringify(item));
+ let courseTags = [];
+
+ const courseListType = courseObject['courseListType'];
+ this.variant = courseListType == 'list' ? CourseVariants.row : CourseVariants.grid;
+
+ for (let courseProperty in courseObject) {
+ if (courseProperty == 'courseListType') continue;
+
+ let courseItem = courseObject[courseProperty];
+ let courseCode = courseItem['code'];
+ let courseName = courseItem['name'];
+ let courseCredits = courseItem['credits'];
+
+ if (courseItem['tags']) {
+ let tags = JSON.parse(JSON.stringify(courseItem['tags']));
+ for (let z in tags) {
+ let tagItem = {name: tags[z]};
+ courseTags.push(tagItem);
+ }
+ }
+ let courseTagsJSON = JSON.stringify(courseTags);
+
+ if (courseItem['realisations']) {
+ let realisations = JSON.parse(JSON.stringify(courseItem['realisations']));
+ for (let realisationProperty in realisations) {
+ let realizationItem = realisations[realisationProperty];
+
+ let courseStudyFormat = realizationItem['studyFormat'];
+ let courseStartDate = realizationItem['startDate'];
+ let courseEndDate = realizationItem['endDate'];
+ let courseEnrollmentLink = realizationItem['enrolmentLink'];
+ let courseTeachingLanguage = realizationItem['teachingLanguage'];
+
+ const contentListItemClassAttributes = ['item', this.variant].join(' ');
+
+ //tabs[index].addEventListener('keydown', this.keydownEventListener);
+ //contentListItem.addEventListener('keydown', this.keydownEventListener);
+ //courseRealisations.push(contentListItem);
+
+ courseRealisations.push(
+ <hy-content-list-item
+ id={realisationProperty}
+ class={contentListItemClassAttributes}
+ variant={this.variant}
+ course-code={courseCode}
+ course-name={courseName}
+ course-credits={courseCredits}
+ course-tags={courseTagsJSON}
+ course-start-date={courseStartDate}
+ course-end-date={courseEndDate}
+ course-study-format={courseStudyFormat}
+ course-enrollment-link={courseEnrollmentLink}
+ course-teaching-language={courseTeachingLanguage}
+ course-link-label={this.linkLabel}
+ data-location={courseEnrollmentLink}
+ onClick={() => this.handleCardClick(realisationProperty)}
+ //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}
+ ></hy-content-list-item>
+ );
+ }
+ }
+ }
+ });
+
+ this.courseRealisations = courseRealisations;
+ }
+
+ render() {
+ const classAttributes = [this.variant, 'hy-content-list'].join(' ');
+
+ return (
+ <Host>
+ <div class={classAttributes}>{this.courseRealisations}</div>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/courses/hy-content-list/readme.md b/src/components/courses/hy-content-list/readme.md
new file mode 100644
index 00000000..ec30e6a5
--- /dev/null
+++ b/src/components/courses/hy-content-list/readme.md
@@ -0,0 +1,30 @@
+# hy-content-list
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------- | ------------ | ----------- | -------- | --------------------- |
+| `dataItems` | `data-items` | | `string` | `undefined` |
+| `linkLabel` | `link-label` | | `string` | `'Go to course page'` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-content-list-item](../hy-content-list-item)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-content-list --> hy-content-list-item
+ hy-content-list-item --> hy-tag
+ hy-content-list-item --> hy-icon
+ style hy-content-list fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-tag/hy-tag.scss b/src/components/hy-tag/hy-tag.scss
new file mode 100644
index 00000000..8c6bd369
--- /dev/null
+++ b/src/components/hy-tag/hy-tag.scss
@@ -0,0 +1,19 @@
+:host {
+ display: block;
+}
+
+.hy-tag {
+ margin: 0 4px 4px 0;
+
+ span {
+ @include font-size(12px, 16px);
+ @include font-weight($bold);
+
+ background-color: var(--grayscale-dark);
+ color: var(--grayscale-white);
+ font-family: var(--main-font-family);
+ letter-spacing: -0.07px;
+ padding: 4px 8px;
+ text-transform: uppercase;
+ }
+}
diff --git a/src/components/hy-tag/hy-tag.tsx b/src/components/hy-tag/hy-tag.tsx
new file mode 100644
index 00000000..d92c5a99
--- /dev/null
+++ b/src/components/hy-tag/hy-tag.tsx
@@ -0,0 +1,22 @@
+import {Component, Host, h} from '@stencil/core';
+
+@Component({
+ tag: 'hy-tag',
+ styleUrl: 'hy-tag.scss',
+ shadow: true,
+})
+export class HyTag {
+ render() {
+ const classAttributes = ['hy-tag'].join(' ');
+
+ return (
+ <Host>
+ <div class={classAttributes}>
+ <span>
+ <slot></slot>
+ </span>
+ </div>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-tag/readme.md b/src/components/hy-tag/readme.md
new file mode 100644
index 00000000..2d32edb1
--- /dev/null
+++ b/src/components/hy-tag/readme.md
@@ -0,0 +1,21 @@
+# hy-tag
+
+<!-- Auto Generated Below -->
+
+## Dependencies
+
+### Used by
+
+- [hy-content-list-item](../courses/hy-content-list-item)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-content-list-item --> hy-tag
+ style hy-tag fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 02f2abc5..552318cc 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -18,6 +18,7 @@
- [hy-breadcrumbs](../hy-breadcrumbs)
- [hy-button](../button)
- [hy-checkbox](../hy-checkbox)
+- [hy-content-list-item](../courses/hy-content-list-item)
- [hy-cta-button](../cta-button)
- [hy-cta-link](../cta-link)
- [hy-desktop-menu-links](../site-header/hy-desktop-menu-links)
@@ -51,6 +52,7 @@ graph TD;
hy-breadcrumbs --> hy-icon
hy-button --> hy-icon
hy-checkbox --> hy-icon
+ hy-content-list-item --> hy-icon
hy-cta-button --> hy-icon
hy-cta-link --> hy-icon
hy-desktop-menu-links --> hy-icon
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 607d2e24..f58e62e1 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -194,118 +194,120 @@ export class HyDesktopMenuLinks {
let menuLinkItems = [];
- links.map(
- ({
- menuLinkId: id,
- shortcuts,
- items,
- url,
- description,
- label,
- labelExtra,
- isActive,
- shortcutsTitle,
- closeButtonTitle,
- }) => {
- let classAttributes = [
- 'desktop-menu-link',
- isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
- ].join(' ');
-
- menuLinkItems.push(
- <li>
- <button
- type="button"
- class={classAttributes}
- link-id={id}
- onClick={() => this.handleDesktopMenuClick(id)}
- onMouseOver={() => this.handleDesktopMenuToggle(id)}
- onFocus={() => this.handleDesktopMenuToggle(id)}
- aria-expanded="false"
- >
- {label}
- <span class="desktop-menu-link__heading__icon">
- <hy-icon icon={'hy-icon-caret-down'} size={32} />
- </span>
- </button>
- <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
- <div class="hy-desktop-menu-panel__desktop-menu">
- <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
- <a
- aria-current={label}
- href={url}
- class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
- menu-link-id={id}
- >
- <span class="heading-icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={40} />
- </span>
- {labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
- {description && <span class="description">{description}</span>}
- </a>
- <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
- {items.map(({label, url}) => (
- <li>
- <a href={url}>
- <span class="heading-icon">
- <hy-icon icon={'hy-icon-caret-right'} size={12} />
- </span>
- <span class="label">{label}</span>
- </a>
- </li>
- ))}
- </ul>
- </div>
- {shortcuts.length > 0 && (
- <ul class="shortcuts-panel">
- <h2 class="shortcuts-panel__title">{shortcutsTitle}</h2>
- {shortcuts.map(
- ({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => {
- let target = shortcut_is_external ? '_blank' : '_self';
-
- let shortcutClass = [
- 'shortcuts-panel__shortcut-item',
- index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
- ].join(' ');
-
- return (
- <li class={shortcutClass}>
- <a
- aria-current={shortcut_aria_label}
- href={shortcut_url}
- class="shortcut-item__link"
- target={target}
- aria-label={shortcut_aria_label}
- >
- <span class="label">{shortcut_title}</span>
- <span class="icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={24} />
- </span>
- </a>
- </li>
- );
- }
- )}
- </ul>
- )}
- </div>
+ if (links) {
+ links.map(
+ ({
+ menuLinkId: id,
+ shortcuts,
+ items,
+ url,
+ description,
+ label,
+ labelExtra,
+ isActive,
+ shortcutsTitle,
+ closeButtonTitle,
+ }) => {
+ let classAttributes = [
+ 'desktop-menu-link',
+ isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
+ ].join(' ');
+
+ menuLinkItems.push(
+ <li>
<button
- onClick={() => this.handleDesktopMenuClose()}
- class={{
- 'hy-desktop-menu-panel__panel-toggle': true,
- }}
- aria-label="Close menu"
+ type="button"
+ class={classAttributes}
+ link-id={id}
+ onClick={() => this.handleDesktopMenuClick(id)}
+ onMouseOver={() => this.handleDesktopMenuToggle(id)}
+ onFocus={() => this.handleDesktopMenuToggle(id)}
+ aria-expanded="false"
>
- <span class="hy-desktop-menu-panel__panel-toggle__label">
- <span class="hy-desktop-menu-panel__panel-toggle__label__title">{closeButtonTitle}</span>
- <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ {label}
+ <span class="desktop-menu-link__heading__icon">
+ <hy-icon icon={'hy-icon-caret-down'} size={32} />
</span>
</button>
- </div>
- </li>
- );
- }
- );
+ <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
+ <div class="hy-desktop-menu-panel__desktop-menu">
+ <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
+ <a
+ aria-current={label}
+ href={url}
+ class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
+ menu-link-id={id}
+ >
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={40} />
+ </span>
+ {labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
+ {description && <span class="description">{description}</span>}
+ </a>
+ <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
+ {items.map(({label, url}) => (
+ <li>
+ <a href={url}>
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
+ </span>
+ <span class="label">{label}</span>
+ </a>
+ </li>
+ ))}
+ </ul>
+ </div>
+ {shortcuts.length > 0 && (
+ <ul class="shortcuts-panel">
+ <h2 class="shortcuts-panel__title">{shortcutsTitle}</h2>
+ {shortcuts.map(
+ ({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => {
+ let target = shortcut_is_external ? '_blank' : '_self';
+
+ let shortcutClass = [
+ 'shortcuts-panel__shortcut-item',
+ index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
+ ].join(' ');
+
+ return (
+ <li class={shortcutClass}>
+ <a
+ aria-current={shortcut_aria_label}
+ href={shortcut_url}
+ class="shortcut-item__link"
+ target={target}
+ aria-label={shortcut_aria_label}
+ >
+ <span class="label">{shortcut_title}</span>
+ <span class="icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={24} />
+ </span>
+ </a>
+ </li>
+ );
+ }
+ )}
+ </ul>
+ )}
+ </div>
+ <button
+ onClick={() => this.handleDesktopMenuClose()}
+ class={{
+ 'hy-desktop-menu-panel__panel-toggle': true,
+ }}
+ aria-label="Close menu"
+ >
+ <span class="hy-desktop-menu-panel__panel-toggle__label">
+ <span class="hy-desktop-menu-panel__panel-toggle__label__title">{closeButtonTitle}</span>
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ </button>
+ </div>
+ </li>
+ );
+ }
+ );
+ }
this.menuLinkItems = menuLinkItems;
}
diff --git a/src/index.html b/src/index.html
index 5535bd42..5f06571b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -177,60 +177,810 @@
url-title="See latest publications"
sc-label="Aria label"
></hy-hero>
- THIS IS MAIN CONTENT
- <hy-banner
- text-title="Check upcoming conferences"
- text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
- url="https://helsinki.fi"
- url-title="Show list of conferences"
- sc-label="List of conferences"
+
+ <hy-paragraph-text>
+ THIS IS MAIN CONTENT
+ </hy-paragraph-text>
+
+ <hy-link-list
+ list-heading="link list heading number one"
+ data-items='[
+ {"heading":"Some link title","ariaLabel":"Opetusta", "url":"https://yle.fi","isExternal":"true"},
+ {"heading":"Example link label one","ariaLabel":"Opetusta", "url":"https://yle.fi","isExternal":"false"},
+ {"heading":"Second very long link list label example that extends to another line","ariaLabel":"Opetusta", "url":"https://yle.fi","isExternal":"true"},
+ {"heading":"Example link label three","ariaLabel":"Opetusta", "url":"https://yle.fi","isExternal":"false"}]'
>
- </hy-banner>
- <hy-accordion-container accordionId="example-accordion">
- <hy-accordion-item accordiontitle="This is a accordion item 1">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is a accordion item 2">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is a accordion item 3">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- </hy-accordion-container>
- <hy-introduction
- text-title="This is an introduction"
- text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- ></hy-introduction>
- <hy-introduction
- variant="blue"
- text-title="This is an introduction"
- text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
- <hy-introduction
- variant="black"
- text-title="This is an introduction"
- text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
- <hy-introduction
- reversed
- text-title="This is an introduction"
- text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
+ </hy-link-list>
+
+ <hy-main-content-wrapper>
+ <hy-content-list link-label="Go to course page" data-items='[{"courseListType":"list"}]'> </hy-content-list>
+ </hy-main-content-wrapper>
+
+ <hy-main-content-wrapper>
+ <hy-content-list
+ link-label="Go to course page"
+ data-items='
+ [{
+ "AYKESK-533": {
+ "code": "AYKESK-533",
+ "name": "Avoin yo: Keskiajan taloushistoria",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-135916414": {
+ "studyFormat": "Kirjallinen työ",
+ "startDate": "2020-08-31",
+ "endDate": "2021-03-30",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-135916414"
+ },
+ "otm-8bdfaabf-40b9-4a41-83a8-c7e9c1cb4fde": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-11",
+ "endDate": "2021-03-30",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-8bdfaabf-40b9-4a41-83a8-c7e9c1cb4fde"
+ },
+ "otm-50ff73c4-8b79-43cc-ae6a-2fb590a5cd06": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-02-16",
+ "endDate": "2021-04-01",
+ "teachingLanguage": "englanti",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-50ff73c4-8b79-43cc-ae6a-2fb590a5cd06"
+ },
+ "otm-4dbc00e9-3db7-420a-8f8b-0d2a3e88bddf": {
+ "studyFormat": "Verkko-opetus",
+ "startDate": "2020-11-09",
+ "endDate": "2021-01-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-4dbc00e9-3db7-420a-8f8b-0d2a3e88bddf"
+ },
+ "otm-cc022b0f-b193-4bef-8e94-cbc31ce08362": {
+ "studyFormat": "Tentti",
+ "startDate": "2020-12-17",
+ "endDate": "2020-12-18",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-cc022b0f-b193-4bef-8e94-cbc31ce08362"
+ },
+ "otm-53d5dbb6-4cc7-4fba-b5c3-0bc1c530a3ba": {
+ "studyFormat": "Tentti",
+ "startDate": "2020-09-02",
+ "endDate": "2020-09-03",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-53d5dbb6-4cc7-4fba-b5c3-0bc1c530a3ba"
+ },
+ "otm-a1028433-4632-4b66-93d5-d81434a5a89d": {
+ "studyFormat": "Kirjallinen työ",
+ "startDate": "2020-10-01",
+ "endDate": "2020-10-09",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-a1028433-4632-4b66-93d5-d81434a5a89d"
+ }
+ },
+ "tags": {
+ "urn:code:custom:hy-university-root-id:opintotarjonta:avoin_verkkokurssi": "Open online course",
+ "urn:code:custom:hy-university-root-id:opintotarjonta:jatkuva_ilmoittautuminen": "Flexibly commenced",
+ "urn:code:custom:hy-university-root-id:opintotarjonta:sopii_lukiolaisille": "Suitable for upper secondary students",
+ "urn:code:custom:hy-university-root-id:opintotarjonta:tutustumiskurssi": "Introduction course"
+ }
+ },
+ "courseListType": "grid"
+ },
+ {
+ "HISK-221": {
+ "code": "HISK-221",
+ "name": "Aatteet ja opit",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136422738": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-04",
+ "endDate": "2020-10-17",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422738"
+ },
+ "hy-CUR-136422689": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-19",
+ "endDate": "2021-05-05",
+ "teachingLanguage": "englanti",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422689"
+ },
+ "hy-CUR-136422670": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-05-17",
+ "endDate": "2021-05-29",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422670"
+ },
+ "otm-ca58de83-c75d-4337-8f59-266b4cb69f77": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-11-23",
+ "endDate": "2020-11-27",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-ca58de83-c75d-4337-8f59-266b4cb69f77"
+ },
+ "otm-32b07b1d-3902-4b04-86e1-df1cd2a16b01": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-11-16",
+ "endDate": "2020-11-21",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-32b07b1d-3902-4b04-86e1-df1cd2a16b01"
+ },
+ "hy-CUR-136340504": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136340504"
+ },
+ "hy-CUR-136340594": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136340594"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-120": {
+ "code": "HISK-120",
+ "name": "Antiikki ja keskiaika",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136445880": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-01",
+ "endDate": "2020-10-14",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136445880"
+ },
+ "hy-CUR-136415791": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-02",
+ "endDate": "2020-10-15",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136415791"
+ },
+ "hy-CUR-136327556": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136327556"
+ },
+ "hy-CUR-136327721": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136327721"
+ },
+ "hy-CUR-132969300": {
+ "studyFormat": "Tentti",
+ "startDate": "2020-09-15",
+ "endDate": "2020-09-16",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-132969300"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-251": {
+ "code": "HISK-251",
+ "name": "Asiantuntijatehtäviin valmentavat opinnot",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136445035": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-03",
+ "endDate": "2020-12-11",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136445035"
+ },
+ "hy-CUR-136444669": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-20",
+ "endDate": "2021-04-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136444669"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-212": {
+ "code": "HISK-212",
+ "name": "Euroopan historia",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136422386": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-10-26",
+ "endDate": "2020-12-10",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422386"
+ },
+ "hy-CUR-136422502": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-16",
+ "endDate": "2021-05-07",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422502"
+ },
+ "hy-CUR-136422250": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-15",
+ "endDate": "2021-05-08",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422250"
+ },
+ "hy-CUR-136339495": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136339495"
+ },
+ "hy-CUR-136339551": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136339551"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-231": {
+ "code": "HISK-231",
+ "name": "Historiankirjoitus ja historiakulttuuri",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136433120": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-10-27",
+ "endDate": "2020-12-11",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136433120"
+ },
+ "otm-399fb966-7661-4a2f-9d3d-15d8c25430c1": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-11-09",
+ "endDate": "2020-11-14",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-399fb966-7661-4a2f-9d3d-15d8c25430c1"
+ },
+ "hy-CUR-136341657": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136341657"
+ },
+ "hy-CUR-136341658": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136341658"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-232": {
+ "code": "HISK-232",
+ "name": "Historian lähteet",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136447846": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-21",
+ "endDate": "2021-03-06",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136447846"
+ },
+ "hy-CUR-136433429": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-15",
+ "endDate": "2021-05-07",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136433429"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-110": {
+ "code": "HISK-110",
+ "name": "Historiantutkimuksen johdantokurssi",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136414881": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-01",
+ "endDate": "2020-10-16",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136414881"
+ },
+ "hy-CUR-136445645": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-01",
+ "endDate": "2020-10-16",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136445645"
+ },
+ "hy-CUR-135914860": {
+ "studyFormat": "Tentti",
+ "startDate": "2020-08-12",
+ "endDate": "2020-08-13",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-135914860"
+ },
+ "otm-ab1d9a85-abf4-4064-9e1e-064c27095dcc": {
+ "studyFormat": "Kirjallinen työ",
+ "startDate": "2020-11-10",
+ "endDate": "2020-11-14",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-ab1d9a85-abf4-4064-9e1e-064c27095dcc"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-233": {
+ "code": "HISK-233",
+ "name": "Historiantutkimuksen metodit",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136433674": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-15",
+ "endDate": "2021-05-08",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136433674"
+ },
+ "hy-CUR-136341960": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136341960"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-243": {
+ "code": "HISK-243",
+ "name": "Kandidaatintutkielma",
+ "credits": "6",
+ "realisations": [],
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-222": {
+ "code": "HISK-222",
+ "name": "Kansat ja kansainvälisyys",
+ "credits": "5",
+ "realisations": {
+ "hy-opt-cur-2021-1a080292-a0d2-4d06-aae4-c5af83d710c4": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-08-31",
+ "endDate": "2020-10-20",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-opt-cur-2021-1a080292-a0d2-4d06-aae4-c5af83d710c4"
+ },
+ "hy-CUR-136447431": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-21",
+ "endDate": "2021-05-07",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136447431"
+ },
+ "hy-CUR-136422813": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-02",
+ "endDate": "2020-10-10",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422813"
+ },
+ "hy-CUR-136340792": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136340792"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-223": {
+ "code": "HISK-223",
+ "name": "Kaupunki ja kulttuuri",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-139348312": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-16",
+ "endDate": "2021-05-07",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-139348312"
+ },
+ "hy-CUR-136422849": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-15",
+ "endDate": "2021-05-07",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422849"
+ },
+ "hy-CUR-136422844": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-20",
+ "endDate": "2021-03-05",
+ "teachingLanguage": "englanti",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422844"
+ },
+ "hy-CUR-136340864": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136340864"
+ },
+ "hy-CUR-136340905": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136340905"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-224": {
+ "code": "HISK-224",
+ "name": "Luonto ja ympäristö",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136422881": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-19",
+ "endDate": "2021-03-06",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422881"
+ },
+ "hy-CUR-136340992": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136340992"
+ },
+ "hy-CUR-136341024": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136341024"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-213": {
+ "code": "HISK-213",
+ "name": "Maailmanhistoria",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136422515": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-15",
+ "endDate": "2021-05-06",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422515"
+ },
+ "hy-CUR-136422596": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-10-26",
+ "endDate": "2020-12-10",
+ "teachingLanguage": "englanti",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422596"
+ },
+ "otm-8d13dfb4-d731-4a4a-85c7-b18fd0b67f4a": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-03-15",
+ "endDate": "2021-05-06",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/otm-8d13dfb4-d731-4a4a-85c7-b18fd0b67f4a"
+ },
+ "hy-CUR-136339812": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136339812"
+ },
+ "hy-CUR-136339867": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136339867"
+ }
+ },
+ "organisation": "Avoin yliopisto",
+ "tags": []
+ },
+ "HISK-241": {
+ "code": "HISK-241",
+ "name": "Praktikum",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136437050": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-09-01",
+ "endDate": "2021-05-07",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136437050"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-242": {
+ "code": "HISK-242",
+ "name": "Proseminaari",
+ "credits": "4",
+ "realisations": {
+ "hy-opt-cur-2021-0c219231-db98-4371-b43b-c6f01775c3d1": {
+ "studyFormat": "Seminaari",
+ "startDate": "2020-08-17",
+ "endDate": "2020-09-08",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-opt-cur-2021-0c219231-db98-4371-b43b-c6f01775c3d1"
+ },
+ "hy-CUR-136442410": {
+ "studyFormat": "Seminaari",
+ "startDate": "2021-01-19",
+ "endDate": "2021-05-08",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136442410"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-211": {
+ "code": "HISK-211",
+ "name": "Suomen ja lähialueiden historia",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136422206": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-18",
+ "endDate": "2021-03-05",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422206"
+ },
+ "hy-CUR-136422103": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-20",
+ "endDate": "2021-03-05",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422103"
+ },
+ "hy-CUR-136421999": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-18",
+ "endDate": "2021-03-03",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136421999"
+ },
+ "hy-CUR-136338868": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136338868"
+ },
+ "hy-CUR-136338953": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136338953"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-225": {
+ "code": "HISK-225",
+ "name": "Talous ja valta",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136422911": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-10-27",
+ "endDate": "2020-12-12",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136422911"
+ },
+ "hy-CUR-136341223": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136341223"
+ },
+ "hy-CUR-136341255": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136341255"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-252": {
+ "code": "HISK-252",
+ "name": "Työelämäopinnot",
+ "credits": "5",
+ "realisations": [],
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-131": {
+ "code": "HISK-131",
+ "name": "Uuden ajan alku I",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136416471": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-10-26",
+ "endDate": "2020-12-10",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136416471"
+ },
+ "hy-CUR-136446756": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2020-10-27",
+ "endDate": "2020-12-11",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136446756"
+ },
+ "hy-CUR-136331167": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136331167"
+ },
+ "hy-CUR-136331059": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136331059"
+ },
+ "hy-CUR-132969303": {
+ "studyFormat": "Tentti",
+ "startDate": "2020-09-15",
+ "endDate": "2020-09-16",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-132969303"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "HISK-132": {
+ "code": "HISK-132",
+ "name": "Uuden ajan alku II",
+ "credits": "5",
+ "realisations": {
+ "hy-CUR-136447249": {
+ "studyFormat": "Luento-opetus",
+ "startDate": "2021-01-19",
+ "endDate": "2021-05-05",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136447249"
+ },
+ "hy-CUR-136417210": {
+ "studyFormat": "Pienryhmäopetus",
+ "startDate": "2020-10-30",
+ "endDate": "2020-12-12",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136417210"
+ },
+ "hy-CUR-136331693": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "ruotsi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136331693"
+ },
+ "hy-CUR-132969306": {
+ "studyFormat": "Tentti",
+ "startDate": "2020-09-15",
+ "endDate": "2020-09-16",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-132969306"
+ },
+ "hy-CUR-136331585": {
+ "studyFormat": "Akvaariotentti",
+ "startDate": "2020-09-16",
+ "endDate": "2021-08-01",
+ "teachingLanguage": "suomi",
+ "enrolmentLink": "https://studies.helsinki.fi/opintotarjonta/cur/hy-CUR-136331585"
+ }
+ },
+ "organisation": "Historian kandiohjelma",
+ "tags": []
+ },
+ "courseListType": "grid"
+ }
+]'
+ >
+ </hy-content-list>
+ </hy-main-content-wrapper>
+
+ <hy-main-content-wrapper>
+ <hy-content-list
+ data-items='
+ [{"AYKESK-533":{
+ "code":"AYKESK-533",
+ "name":"Avoin yo: Keskiajan taloushistoria",
+ "credits":"5",
+ "realisations":{
+ "hy-CUR-135916414":{
+ "studyFormat":"Kirjallinen ty\u00f6",
+ "startDate":"2020-08-31",
+ "endDate":"2021-05-11",
+ "teachingLanguage":"suomi",
+ "enrolmentLink":"https:\/\/studies.helsinki.fi\/opintotarjonta\/cur\/hy-CUR-135916414"
+ },
+ "otm-8bdfaabf-40b9-4a41-83a8-c7e9c1cb4fde":{
+ "studyFormat":"Luento-opetus",
+ "startDate":"2021-01-11",
+ "endDate":"2021-03-30",
+ "teachingLanguage":"suomi",
+ "enrolmentLink":"https:\/\/studies.helsinki.fi\/opintotarjonta\/cur\/otm-8bdfaabf-40b9-4a41-83a8-c7e9c1cb4fde"
+ }
+ },
+ "tags":{
+ "urn:code:custom:hy-university-root-id:opintotarjonta:avoin_verkkokurssi":"Open online course",
+ "urn:code:custom:hy-university-root-id:opintotarjonta:jatkuva_ilmoittautuminen":"Flexibly commenced",
+ "urn:code:custom:hy-university-root-id:opintotarjonta:sopii_lukiolaisille":"Suitable for upper secondary students",
+ "urn:code:custom:hy-university-root-id:opintotarjonta:tutustumiskurssi":"Introduction course"
+ }
+ },
+ "courseListType":"list"
+ }
+ ]'
+ >
+ </hy-content-list>
+ </hy-main-content-wrapper>
+
+ <hy-main-content-wrapper>
+ <hy-accordion-container accordionId="example-accordion">
+ <hy-accordion-item accordiontitle="This is a accordion item 1">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is a accordion item 2">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is a accordion item 3">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ </hy-accordion-container>
+ </hy-main-content-wrapper>
</div>
<aside class="layout-sidebar-first" role="complementary">
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 7a2b0cbe..d4262365 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -67,6 +67,12 @@ export enum LinkBoxVariants {
landingPage = 'landing',
}
+export enum CourseVariants {
+ default = 'row',
+ row = 'row',
+ grid = 'grid',
+}
+
export enum GridColumnsSm {
columnsSm1 = '1',
columnsSm2 = '2',
--
GitLab