Merge branch 'NXSTAGE-1331_courses' into 'development'

Show the coordinating organisation in the realisation description (after the learning method)

See merge request julkiset-sivut/design-system-lib!126

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;

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

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>

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
 ```

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: '|';

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>;

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`              |

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}

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

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