diff --git a/src/components.d.ts b/src/components.d.ts
index e993421a7ee09305274628af857fdf16abd63d16..c434e6bd0b671d88e22094d3d70bce529dce1faf 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -61,6 +61,7 @@ export namespace Components {
}
interface HyAccordionItem {
accordiontitle?: string;
+ headerstyle: string;
variant: AccordionVariants;
}
interface HyAdjacentImageText {
@@ -254,6 +255,7 @@ export namespace Components {
courseEnrollmentLink?: string;
courseLinkLabel?: string;
courseName?: string;
+ courseOrganisation?: string;
courseStartDate?: string;
courseStudyFormat?: string;
courseTags: TagValue[] | string;
@@ -1347,6 +1349,7 @@ declare namespace LocalJSX {
}
interface HyAccordionItem {
accordiontitle?: string;
+ headerstyle?: string;
variant?: AccordionVariants;
}
interface HyAdjacentImageText {
@@ -1540,6 +1543,7 @@ declare namespace LocalJSX {
courseEnrollmentLink?: string;
courseLinkLabel?: string;
courseName?: string;
+ courseOrganisation?: string;
courseStartDate?: string;
courseStudyFormat?: string;
courseTags?: TagValue[] | string;
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 217d1f30fbd8700f872219bc3f0aff9ea20dcdbb..2e4bf823e0a472f095396d7b05e157eaa589a879 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -10,7 +10,7 @@
border-left: 1px solid var(--grayscale-medium);
border-right: 1px solid var(--grayscale-medium);
border-top: 2px solid var(--grayscale-medium);
- box-shadow: 0px 2px 12px 1px rgba(#000000, 10%);
+ box-shadow: 0 2px 12px 1px rgba(#000000, 10%);
.hy-accordion--heading {
margin: 0 auto;
@@ -194,29 +194,36 @@
.hy-accordion__content {
display: block;
height: 0;
- overflow: hidden;
padding: 0;
transition: all 0.25s ease-in-out;
&--inner-wrapper {
display: block;
- }
-
- > hy-box {
padding: 20px 16px 0;
-
@include breakpoint($narrow) {
padding: 20px 24px 0;
}
-
@include breakpoint($extrawide) {
+ // there is a sidebar
+ &--common {
+ padding: 20px 24px 0;
+ }
+ // without sidebar
+ &--large {
+ padding: 24px 32px 0;
+ }
+ }
+ @include breakpoint($xlarge) {
padding: 24px 32px 0;
}
- }
-}
-.hy-accordion__content.mini {
- hy-box {
- padding: 0;
+ &--mini {
+ padding: 0;
+ .course-heading {
+ h4 {
+ padding-top: 0 !important;
+ }
+ }
+ }
}
}
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 3b3360c0f2bdcbd4200f78bc3b549a75ddfad611..7a68ff6d51d6dc9cc0b0babb7832dbf918a87a16 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -21,10 +21,18 @@ export class AccordionItem {
@Element() el: HTMLElement;
@Prop() accordiontitle?: string;
@Prop() variant: AccordionVariants = AccordionVariants.default;
+ @Prop() headerstyle: string = 'common';
@State() ready: boolean = false;
componentDidLoad() {
this.ready = true;
+
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
}
componentDidRender() {
@@ -192,7 +200,16 @@ export class AccordionItem {
const classAttributes = ['hy-accordion__item', this.variant].join(' ');
const classInnerWrapper = ['hy-accordion__item--container', this.variant].join(' ');
const classHeadingAttributes = ['hy-accordion--heading', this.variant].join(' ');
- const classContentAttributes = ['hy-accordion__content', this.variant].join(' ');
+ const classContentAttributes = [
+ 'hy-accordion__content',
+ `hy-accordion__content--${this.variant}`,
+ this.variant,
+ ].join(' ');
+ const classContentInnerWrapper = [
+ 'hy-accordion__content--inner-wrapper',
+ `hy-accordion__content--inner-wrapper--${this.headerstyle}`,
+ `hy-accordion__content--inner-wrapper--${this.variant}`,
+ ].join(' ');
const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
const accordionItemHref = '#' + titleAsId + '--title';
@@ -223,11 +240,9 @@ export class AccordionItem {
aria-hidden="true"
style={{display: 'none'}}
>
- <hy-box pt="0" pb="0" pl="0.75" pr="0.75">
- <div class="hy-accordion__content--inner-wrapper">
- <slot></slot>
- </div>
- </hy-box>
+ <div class={classContentInnerWrapper}>
+ <slot></slot>
+ </div>
</div>
</div>
</div>
diff --git a/src/components/accordion-item/readme.md b/src/components/accordion-item/readme.md
index 858fdfd91a7f60426bbc714012699a76a7194c8b..b23350237b8e938fb5e37dae4ba20ac192c9c849 100644
--- a/src/components/accordion-item/readme.md
+++ b/src/components/accordion-item/readme.md
@@ -42,6 +42,7 @@ Accordion component
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ----------- | ----------------------------------------------------- | --------------------------- |
| `accordiontitle` | `accordiontitle` | | `string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `variant` | `variant` | | `AccordionVariants.default \| AccordionVariants.mini` | `AccordionVariants.default` |
## Dependencies
@@ -53,14 +54,12 @@ Accordion component
### Depends on
- [hy-icon](../icon)
-- [hy-box](../hy-box)
### Graph
```mermaid
graph TD;
hy-accordion-item --> hy-icon
- hy-accordion-item --> hy-box
hy-footer-info --> hy-accordion-item
style hy-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
```
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
index c60f2e28b7490ff94dc310c2f4301b578a5aa23f..42cb4698d58773630cb6cc28ec4832adfa93da21 100644
--- 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
@@ -86,17 +86,24 @@
}
&--metadata {
+ @include font-size(14px, 16px);
+ @include font-weight($semibold);
+
+ color: var(--grayscale-black);
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;
+ padding-bottom: 0;
+
+ @include breakpoint($narrow) {
+ padding-bottom: 1rem;
+ }
+ @include breakpoint($extrawide) {
+ padding-bottom: 0;
+ }
&--item:after {
content: '|';
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
index 3df481f1694ed8601f4e8f6f907b32b3a9729507..649de21b249d6cd5c6a907d69d8330e44622f27e 100644
--- 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
@@ -24,6 +24,7 @@ export class HyContentLstItem {
@Prop() courseStartDate?: string;
@Prop() courseEndDate?: string;
@Prop() courseStudyFormat?: string;
+ @Prop() courseOrganisation?: string;
@Prop() courseEnrollmentLink?: string;
@Prop() courseTeachingLanguage?: string;
@Prop() courseLinkLabel?: string;
@@ -77,11 +78,22 @@ export class HyContentLstItem {
<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 hy-content-list-item--metadata--item--last">
- <span>{this.courseStudyFormat}</span>
- </div>
+ {this.courseOrganisation
+ ? [
+ <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.courseOrganisation}</span>
+ </div>,
+ ]
+ : [
+ <div class="hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last">
+ <span>{this.courseStudyFormat}</span>
+ </div>,
+ ]}
</div>
- {this._courseTags && (
+ {this._courseTags.length > 0 && (
<div class="hy-content-list-item--tags">
{this._courseTags.map((x) => {
return <hy-tag>{x.name}</hy-tag>;
diff --git a/src/components/courses/hy-content-list-item/readme.md b/src/components/courses/hy-content-list-item/readme.md
index 18e033955b9fd02e8ce1755b0176279a16c76f5c..c9603f4aada0715797cbb1a1fff0d87157914a31 100644
--- a/src/components/courses/hy-content-list-item/readme.md
+++ b/src/components/courses/hy-content-list-item/readme.md
@@ -12,6 +12,7 @@
| `courseEnrollmentLink` | `course-enrollment-link` | | `string` | `undefined` |
| `courseLinkLabel` | `course-link-label` | | `string` | `undefined` |
| `courseName` | `course-name` | | `string` | `undefined` |
+| `courseOrganisation` | `course-organisation` | | `string` | `undefined` |
| `courseStartDate` | `course-start-date` | | `string` | `undefined` |
| `courseStudyFormat` | `course-study-format` | | `string` | `undefined` |
| `courseTags` | `course-tags` | | `TagValue[] \| string` | `undefined` |
diff --git a/src/components/courses/hy-content-list/hy-content-list.tsx b/src/components/courses/hy-content-list/hy-content-list.tsx
index 10cf3f2af018eb9e37d0d3609b10ebfa7325a984..c2f0551c1b8a3a0d533db5c590e5c06fb6083670 100644
--- a/src/components/courses/hy-content-list/hy-content-list.tsx
+++ b/src/components/courses/hy-content-list/hy-content-list.tsx
@@ -47,6 +47,7 @@ export class HyContentList implements ComponentInterface {
}
let courseTagsJSON = JSON.stringify(courseTags);
+ // Course realisations
if (courseItem['realisations']) {
let realisations = JSON.parse(JSON.stringify(courseItem['realisations']));
for (let realisationProperty in realisations) {
@@ -59,6 +60,7 @@ export class HyContentList implements ComponentInterface {
let courseEndDate = realizationItem['endDate'];
let courseEnrollmentLink = realizationItem['enrolmentLink'];
let courseTeachingLanguage = realizationItem['teachingLanguage'];
+ let courseOrganisation = realizationItem['organisation'];
const contentListItemClassAttributes = ['item', this.variant].join(' ');
@@ -74,6 +76,7 @@ export class HyContentList implements ComponentInterface {
course-start-date={courseStartDate}
course-end-date={courseEndDate}
course-study-format={courseStudyFormat}
+ course-organisation={courseOrganisation}
course-enrollment-link={courseEnrollmentLink}
course-teaching-language={courseTeachingLanguage}
course-link-label={this.linkLabel}
diff --git a/src/components/footer/hy-footer-info/readme.md b/src/components/footer/hy-footer-info/readme.md
index 7293a998ff1b0618cc44f08863445302e5283ccd..bd941092c893254f3e2086d3552ae38628eca947 100644
--- a/src/components/footer/hy-footer-info/readme.md
+++ b/src/components/footer/hy-footer-info/readme.md
@@ -35,7 +35,6 @@ graph TD;
hy-button --> hy-icon
hy-accordion-container --> hy-box
hy-accordion-item --> hy-icon
- hy-accordion-item --> hy-box
hy-footer-link-item --> hy-icon
hy-footer-link-item --> hy-heading
style hy-footer-info fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/src/components/hy-box/readme.md b/src/components/hy-box/readme.md
index 1329f8a9a91aa8a056c8d65763b03da4ee78eb6a..c31049caf136fe67b4ae102b00519274826907f4 100644
--- a/src/components/hy-box/readme.md
+++ b/src/components/hy-box/readme.md
@@ -28,7 +28,6 @@
### Used by
- [hy-accordion-container](../accordion-container)
-- [hy-accordion-item](../accordion-item)
- [hy-adjacent-image-text](../adjacent-image-text)
- [hy-banner](../hy-banner)
- [hy-heading](../heading)
@@ -48,7 +47,6 @@
```mermaid
graph TD;
hy-accordion-container --> hy-box
- hy-accordion-item --> hy-box
hy-adjacent-image-text --> hy-box
hy-banner --> hy-box
hy-heading --> hy-box