diff --git a/src/components.d.ts b/src/components.d.ts
index 208b883686b202183d3aa557d83b2d0008cc3c4d..c3fa15cb390e14e957d0b8048612b8a30ba1153a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -26,6 +26,7 @@ import {
KeyHighlightVariants,
LinkBoxVariants,
LinkVariants,
+ ListItemVariants,
MenuType,
PaginationItemVariants,
PersonCardVariants,
@@ -46,6 +47,7 @@ import {ProcessFlowValue} from './components/hy-large-process-flow/hy-large-proc
import {PhaseValue} from './components/hy-large-process-flow-phase/hy-large-process-flow-phase';
import {LinkBox} from './components/link-box-list/link-box-list';
import {CtaLinkValue} from './components/hy-link-list/hy-link-list';
+import {AdditionalInfo, RelatedLink} from './components/hy-list-item/hy-list-item';
import {MenuLanguage} from './components/navigation/menu-language/menu-language';
import {ComponentLabels} from './components/site-header/site-header';
import {ProcessFlowBoxValue} from './components/process/process';
@@ -61,6 +63,7 @@ export namespace Components {
variant: AccordionVariants;
}
interface HyAdjacentImageText {
+ headerstyle: string;
imageAlt: string;
imageUrl: string;
mainUrl?: string;
@@ -105,10 +108,31 @@ export namespace Components {
* fixed height for the container, useful for extra spacing containers
*/
h?: number;
+ headerstyle: string;
/**
* Value for horisontal alignment (justify-content)
*/
justify: string;
+ /**
+ * All sides margin value in rems. Responsive when given Comma separated values.
+ */
+ m?: string;
+ /**
+ * Bottom margin in rems. Responsive when given Comma separated values.
+ */
+ mb?: string;
+ /**
+ * Left margin in rems. Responsive when given Comma separated values.
+ */
+ ml?: string;
+ /**
+ * Right margin in rems. Responsive when given Comma separated values.
+ */
+ mr?: string;
+ /**
+ * Top margin in rems. Responsive when given Comma separated values.
+ */
+ mt?: string;
/**
* All sides padding value in rems. Responsive when given Comma separated values.
*/
@@ -393,7 +417,9 @@ export namespace Components {
imageAlt: string;
imageUrl?: string;
}
- interface HyIngress {}
+ interface HyIngress {
+ headerstyle: string;
+ }
interface HyIntroduction {
headerstyle: string;
imageUrl?: string;
@@ -413,6 +439,7 @@ export namespace Components {
}
interface HyKeyFigureGroup {
dataItems: KeyFigureValue[] | string;
+ headerstyle: string;
}
interface HyKeyHighlight {
description: string;
@@ -421,10 +448,12 @@ export namespace Components {
}
interface HyKeyHighlightGroup {
dataItems: KeyHighlightValue[] | string;
+ headerstyle: string;
variant: KeyHighlightVariants;
}
interface HyLargeProcessFlow {
dataItems: ProcessFlowValue[] | string;
+ headerstyle: string;
}
interface HyLargeProcessFlowPhase {
dataItems: PhaseValue[] | string;
@@ -449,19 +478,30 @@ export namespace Components {
}
interface HyLinkBoxList {
dataItems: LinkBox[] | string;
+ headerstyle: string;
variant: LinkBoxVariants;
}
interface HyLinkList {
dataItems: CtaLinkValue[] | string;
+ headerstyle: string;
listHeading: string;
}
interface HyListItem {
+ additionalInfo?: AdditionalInfo[] | string;
+ headerstyle: string;
+ imageLabel?: string;
isExternal: boolean;
itemDescription?: string;
+ itemImageAlt?: string;
+ itemImageUrl?: string;
itemTitle?: string;
itemType?: string;
+ outGoingUrlLabel?: string;
+ relatedLinks?: RelatedLink[] | string;
+ relatedLinksBlockTitle?: string;
scLabel?: string;
url?: string;
+ variant: ListItemVariants;
}
interface HyMain {
hasSidebar: boolean;
@@ -636,6 +676,7 @@ export namespace Components {
}
interface HyProcess {
dataItems: ProcessFlowBoxValue[] | string;
+ headerstyle: string;
numberTerm: string;
}
interface HyProcessFlowBox {
@@ -653,6 +694,7 @@ export namespace Components {
textTitle?: string;
}
interface HyQuote {
+ headerstyle: string;
quoteSignature?: string;
}
interface HyRow {
@@ -677,6 +719,7 @@ export namespace Components {
interface HySectionContainer {}
interface HyShortcuts {
dataItems: ShortcutLinkValue[] | string;
+ headerstyle: string;
listHeading: string;
}
interface HySiteHeader {
@@ -1298,6 +1341,7 @@ declare namespace LocalJSX {
variant?: AccordionVariants;
}
interface HyAdjacentImageText {
+ headerstyle?: string;
imageAlt?: string;
imageUrl?: string;
mainUrl?: string;
@@ -1342,10 +1386,31 @@ declare namespace LocalJSX {
* fixed height for the container, useful for extra spacing containers
*/
h?: number;
+ headerstyle?: string;
/**
* Value for horisontal alignment (justify-content)
*/
justify?: string;
+ /**
+ * All sides margin value in rems. Responsive when given Comma separated values.
+ */
+ m?: string;
+ /**
+ * Bottom margin in rems. Responsive when given Comma separated values.
+ */
+ mb?: string;
+ /**
+ * Left margin in rems. Responsive when given Comma separated values.
+ */
+ ml?: string;
+ /**
+ * Right margin in rems. Responsive when given Comma separated values.
+ */
+ mr?: string;
+ /**
+ * Top margin in rems. Responsive when given Comma separated values.
+ */
+ mt?: string;
/**
* All sides padding value in rems. Responsive when given Comma separated values.
*/
@@ -1630,7 +1695,9 @@ declare namespace LocalJSX {
imageAlt?: string;
imageUrl?: string;
}
- interface HyIngress {}
+ interface HyIngress {
+ headerstyle?: string;
+ }
interface HyIntroduction {
headerstyle?: string;
imageUrl?: string;
@@ -1650,6 +1717,7 @@ declare namespace LocalJSX {
}
interface HyKeyFigureGroup {
dataItems?: KeyFigureValue[] | string;
+ headerstyle?: string;
}
interface HyKeyHighlight {
description?: string;
@@ -1658,10 +1726,12 @@ declare namespace LocalJSX {
}
interface HyKeyHighlightGroup {
dataItems?: KeyHighlightValue[] | string;
+ headerstyle?: string;
variant?: KeyHighlightVariants;
}
interface HyLargeProcessFlow {
dataItems?: ProcessFlowValue[] | string;
+ headerstyle?: string;
}
interface HyLargeProcessFlowPhase {
dataItems?: PhaseValue[] | string;
@@ -1686,19 +1756,30 @@ declare namespace LocalJSX {
}
interface HyLinkBoxList {
dataItems?: LinkBox[] | string;
+ headerstyle?: string;
variant?: LinkBoxVariants;
}
interface HyLinkList {
dataItems?: CtaLinkValue[] | string;
+ headerstyle?: string;
listHeading?: string;
}
interface HyListItem {
+ additionalInfo?: AdditionalInfo[] | string;
+ headerstyle?: string;
+ imageLabel?: string;
isExternal?: boolean;
itemDescription?: string;
+ itemImageAlt?: string;
+ itemImageUrl?: string;
itemTitle?: string;
itemType?: string;
+ outGoingUrlLabel?: string;
+ relatedLinks?: RelatedLink[] | string;
+ relatedLinksBlockTitle?: string;
scLabel?: string;
url?: string;
+ variant?: ListItemVariants;
}
interface HyMain {
hasSidebar?: boolean;
@@ -1883,6 +1964,7 @@ declare namespace LocalJSX {
}
interface HyProcess {
dataItems?: ProcessFlowBoxValue[] | string;
+ headerstyle?: string;
numberTerm?: string;
}
interface HyProcessFlowBox {
@@ -1900,6 +1982,7 @@ declare namespace LocalJSX {
textTitle?: string;
}
interface HyQuote {
+ headerstyle?: string;
quoteSignature?: string;
}
interface HyRow {
@@ -1924,6 +2007,7 @@ declare namespace LocalJSX {
interface HySectionContainer {}
interface HyShortcuts {
dataItems?: ShortcutLinkValue[] | string;
+ headerstyle?: string;
listHeading?: string;
}
interface HySiteHeader {
diff --git a/src/components/accordion-container/accordion-container.tsx b/src/components/accordion-container/accordion-container.tsx
index 45faa7586a7e3fcc96337df42689bc03d2881315..3a008d942d0f8eaf19d9f2244ec3db6dcab14fa2 100644
--- a/src/components/accordion-container/accordion-container.tsx
+++ b/src/components/accordion-container/accordion-container.tsx
@@ -25,7 +25,7 @@ export class AccordionContainer {
<div id={id} class={classAttributes.join(' ')} data-allow-multiple="true" data-allow-toggle="true">
<slot></slot>
</div>
- <hy-box pb="3, 5, 6" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index ddeb1f521f069507eba82c1b99cab1a4ae6cfe22..1a5a0c9b07123c8ace4ebf97e0e2f166a1f247bf 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -69,9 +69,10 @@
text-decoration: none;
}
}
+
.hy-accordion__button {
@include font-size(22px, 28px);
- align-items: center;
+ align-items: flex-start;
border: none;
background-color: var(--grayscale-background-box);
color: var(--brand-main-nearly-black);
@@ -99,14 +100,20 @@
&[aria-expanded='true'] {
background: none;
}
+
+ span {
+ text-align: left;
+ }
}
.hy-accordion--heading__icon {
margin-right: 0.5rem;
+ margin-top: 4px;
z-index: 0;
@include breakpoint($narrow) {
margin-right: 1rem;
+ margin-top: 6px;
}
svg {
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 2276011589ebb82ca687422b0cdc3c4eaed5111e..3b3360c0f2bdcbd4200f78bc3b549a75ddfad611 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -83,7 +83,7 @@ export class AccordionItem {
let target = event.target as HTMLTextAreaElement;
const targetElement = target.tagName.toLowerCase();
- const possibleTags = [targetElement].some((r) => ['svg', 'path', 'button', 'a'].indexOf(r) >= 0);
+ const possibleTags = [targetElement].some((r) => ['svg', 'span', 'path', 'button', 'a'].indexOf(r) >= 0);
let accordion = document.querySelectorAll(`#${containerId}`)[0];
const allowMultiple = accordion.hasAttribute('data-allow-multiple');
@@ -211,7 +211,7 @@ export class AccordionItem {
<span class="hy-accordion--heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={20} />
</span>
- {this.accordiontitle}
+ <span>{this.accordiontitle}</span>
</button>
</a>
</div>
diff --git a/src/components/adjacent-image-text/adjacent-image-text.scss b/src/components/adjacent-image-text/adjacent-image-text.scss
index 30c6a65328be3b62d573245c8ac52e7855dc537c..faf6ecd980d3dcc92e7cea0fd4df905cf6b64768 100644
--- a/src/components/adjacent-image-text/adjacent-image-text.scss
+++ b/src/components/adjacent-image-text/adjacent-image-text.scss
@@ -11,9 +11,10 @@ $margin-narrow: 32px;
flex-direction: column;
position: relative;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
background: transparent;
}
+
@include breakpoint($wide) {
background: var(--grayscale-background-box);
flex-direction: row;
@@ -28,7 +29,7 @@ $margin-narrow: 32px;
position: relative;
padding-bottom: $margin-narrow;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
padding-bottom: 0;
}
@@ -68,7 +69,7 @@ $margin-narrow: 32px;
-moz-border-image: none;
-o-border-image: none;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
border-left: 1px solid transparent;
border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
margin-left: 66px;
@@ -99,7 +100,7 @@ $margin-narrow: 32px;
padding-left: 0;
padding-right: 0;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
padding-left: 50px;
}
@@ -119,7 +120,7 @@ $margin-narrow: 32px;
margin-top: 32px;
padding: 0 1rem;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
font-size: 32px;
letter-spacing: -1px;
line-height: 40px;
@@ -137,7 +138,7 @@ $margin-narrow: 32px;
margin: 20px 0 32px 0;
padding: 0 1rem;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
font-size: 20px;
letter-spacing: -0.1;
line-height: 32px;
diff --git a/src/components/adjacent-image-text/adjacent-image-text.tsx b/src/components/adjacent-image-text/adjacent-image-text.tsx
index 653a13bc853b4b1514971414a1cacf6f5dc7211d..2710d9dd2478c13ef67dbb09e6c034b30a06329c 100644
--- a/src/components/adjacent-image-text/adjacent-image-text.tsx
+++ b/src/components/adjacent-image-text/adjacent-image-text.tsx
@@ -1,4 +1,4 @@
-import {Component, ComponentInterface, Prop, h, Host} from '@stencil/core';
+import {Component, ComponentInterface, Prop, h, Host, Element} from '@stencil/core';
@Component({
tag: 'hy-adjacent-image-text',
@@ -6,6 +6,8 @@ import {Component, ComponentInterface, Prop, h, Host} from '@stencil/core';
shadow: false,
})
export class AdjacentImageText implements ComponentInterface {
+ @Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'default';
@Prop() imageUrl: string = null;
@Prop() imageAlt: string = '';
@Prop() textTitle?: string;
@@ -21,8 +23,17 @@ export class AdjacentImageText implements ComponentInterface {
@Prop() mainUrlAriaLabel2?: string;
@Prop() mainUrlIsExternal2: boolean = false;
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
- const classAttributes = ['hy-adjacent-image-text'].join(' ');
+ const classAttributes = ['hy-adjacent-image-text', `hy-adjacent-image-text__${this.headerstyle}`].join(' ');
const contentClassAttributes = [
'hy-adjacent-image-text__text-container',
'hy-adjacent-image-text__text-container--left',
@@ -72,7 +83,7 @@ export class AdjacentImageText implements ComponentInterface {
</div>
</div>
</div>
- <hy-box pb="4, 7, 8" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/adjacent-image-text/readme.md b/src/components/adjacent-image-text/readme.md
index ed0c11f6dd2fb266fcd9adb103805b98cdfd8d45..b02fbc7d5e239883b748e2c0e97b50dd3516af0b 100644
--- a/src/components/adjacent-image-text/readme.md
+++ b/src/components/adjacent-image-text/readme.md
@@ -10,6 +10,7 @@ Adjacent image & text
| Property | Attribute | Description | Type | Default |
| -------------------- | ------------------------ | ----------- | --------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'default'` |
| `imageAlt` | `image-alt` | | `string` | `''` |
| `imageUrl` | `image-url` | | `string` | `null` |
| `mainUrl` | `main-url` | | `string` | `undefined` |
diff --git a/src/components/footer/hy-footer-base/readme.md b/src/components/footer/hy-footer-base/readme.md
index 61d750b7c7c19c82ad3476affe0ae0e7b63addf3..1768dd6d5d03455f248df8be63aa3afbf77b0d71 100644
--- a/src/components/footer/hy-footer-base/readme.md
+++ b/src/components/footer/hy-footer-base/readme.md
@@ -33,6 +33,7 @@ graph TD;
hy-site-logo --> hy-icon
hy-footer-link-item --> hy-icon
hy-footer-link-item --> hy-heading
+ hy-heading --> hy-box
style hy-footer-base fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/footer/hy-footer-info/readme.md b/src/components/footer/hy-footer-info/readme.md
index ac2d06a47eb336d9cf3a44e0420421ab2300841e..7293a998ff1b0618cc44f08863445302e5283ccd 100644
--- a/src/components/footer/hy-footer-info/readme.md
+++ b/src/components/footer/hy-footer-info/readme.md
@@ -31,6 +31,7 @@ graph TD;
hy-footer-info --> hy-accordion-container
hy-footer-info --> hy-accordion-item
hy-footer-info --> hy-footer-link-item
+ hy-heading --> hy-box
hy-button --> hy-icon
hy-accordion-container --> hy-box
hy-accordion-item --> hy-icon
diff --git a/src/components/footer/hy-footer-link-item/readme.md b/src/components/footer/hy-footer-link-item/readme.md
index 4b1177f9c8d2aab48e762b594b31445c53610226..0ca31fc23a5df8862322f6e2b2adaf07c0be0647 100644
--- a/src/components/footer/hy-footer-link-item/readme.md
+++ b/src/components/footer/hy-footer-link-item/readme.md
@@ -31,6 +31,7 @@
graph TD;
hy-footer-link-item --> hy-icon
hy-footer-link-item --> hy-heading
+ hy-heading --> hy-box
hy-footer-base --> hy-footer-link-item
hy-footer-info --> hy-footer-link-item
style hy-footer-link-item fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index f61fcef9d518acc1b1259dc884242535a132006b..3ae739431e84fc46fcb0c220d51bc367f2671628 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -21,16 +21,22 @@
// H1 content page title
h1.hy-heading__default {
- padding: 8px 0 24px 0;
+ padding: 0.5rem 0 0;
+ margin-bottom: 2rem;
@include breakpoint($wide) {
- // > 960px
- padding: 16px 0 28px 0;
+ margin-bottom: 2.25rem;
+ padding: 1rem 0 0;
+ }
+ @include breakpoint($xlarge) {
+ margin-bottom: 3rem;
}
- @include breakpoint($extrawide) {
- // > 1200px
- padding: 16px 0 32px 0;
+ // No sidebar, large desktops
+ &__large {
+ @include breakpoint($extrawide) {
+ margin-bottom: 3rem;
+ }
}
}
diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx
index a4487163b692dee5fa058a1a827dcf6f82f1b7b0..5f33549f906de86ea755aeb5b2f10d626336b4f4 100644
--- a/src/components/heading/heading.tsx
+++ b/src/components/heading/heading.tsx
@@ -1,5 +1,5 @@
-import {Component, Element, Prop, Host, h} from '@stencil/core';
-import {HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
+import {Component, Element, h, Host, Prop} from '@stencil/core';
+import {HeadingSectionVariants, HeadingVarians} from '../../utils/utils';
@Component({
tag: 'hy-heading',
@@ -31,7 +31,14 @@ export class Heading {
render() {
const headingInVariants = this.heading in HeadingVarians;
- const classAttributes = ['hy-heading', this.negative ? 'negative' : '', `hy-heading__${this.section}`];
+ const isHeadingH2 = this.heading == HeadingVarians.h2;
+ const classAttributes = [
+ 'hy-heading',
+ this.negative ? 'negative' : '',
+ `hy-heading__${this.section}`,
+ `hy-heading__${this.headerstyle}`,
+ `hy-heading__${this.section}__${this.headerstyle}`,
+ ];
const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(' ');
@@ -44,13 +51,20 @@ export class Heading {
return (
<Host>
{headingInVariants ? (
- <div class={containerSectionClass}>
- <this.heading class={classAttributes.join(' ')}>
- <slot />
- </this.heading>
+ [
+ <div class={containerSectionClass}>
+ {isHeadingH2 && (
+ <div>
+ <hy-box pt="1.25, 1.25, 1.5, 2.5" />
+ </div>
+ )}
+ <this.heading class={classAttributes.join(' ')}>
+ <slot />
+ </this.heading>
- <span class={sectionClassAttributes}></span>
- </div>
+ <span class={sectionClassAttributes}></span>
+ </div>,
+ ]
) : (
<div class={containerSectionClass}>
<HeadingVarians.default class={classAttributes.join(' ')}>
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
index 7e1092499b438f55ac541242b200f3ed4869804f..8e1ff079c3cfc0d08e5a4b748db8ca886312942e 100644
--- a/src/components/heading/readme.md
+++ b/src/components/heading/readme.md
@@ -106,10 +106,15 @@ Provide heading attribute for the component to choose what type of heading to us
- [hy-shortcuts](../hy-shortcuts)
- [hy-video](../hy-video)
+### Depends on
+
+- [hy-box](../hy-box)
+
### Graph
```mermaid
graph TD;
+ hy-heading --> hy-box
hy-footer-info --> hy-heading
hy-footer-link-item --> hy-heading
hy-hero --> hy-heading
diff --git a/src/components/hy-banner/hy-banner.scss b/src/components/hy-banner/hy-banner.scss
index d6571f8be39c039e69f20d50d175d0404506ac0e..3c81c3cb4f9851f1fc53087710c7bc97b3068ac9 100644
--- a/src/components/hy-banner/hy-banner.scss
+++ b/src/components/hy-banner/hy-banner.scss
@@ -12,14 +12,16 @@
@include breakpoint($wide) {
padding: 48px 0 40px 0;
}
- @include breakpoint($extrawide) {
- padding: 48px 0 40px 0;
- }
- @include breakpoint($overwide) {
- //padding: 64px 0 48px 0;
+ @include breakpoint($xlarge) {
padding: 64px 32px 48px 32px;
}
+ &__large {
+ @include breakpoint($extrawide) {
+ padding: 64px 0 48px 0;
+ }
+ }
+
&__info-container {
&__title {
@include font-size(24px, 24px);
@@ -44,11 +46,24 @@
max-width: 92%;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
@include font-size(36px, 36px);
letter-spacing: -1.2px;
max-width: 83%;
}
+
+ &__large {
+ @include breakpoint($extrawide) {
+ @include font-size(36px, 36px);
+ letter-spacing: -1.2px;
+ max-width: 83%;
+ }
+ @include breakpoint($xlarge) {
+ @include font-size(40px, 40px);
+ letter-spacing: -1.33px;
+ margin-bottom: 32px;
+ }
+ }
}
&__description {
@@ -71,44 +86,23 @@
margin-bottom: 32px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
@include font-size(18px, 24px);
letter-spacing: -0.09px;
margin-bottom: 36px;
max-width: 83%;
}
- }
- }
-}
-// Big screen, no sidebar
-.hy-banner.large {
- @include breakpoint($extrawide) {
- padding: 64px 0 48px 0;
- }
-
- .hy-banner__info-container {
- &__title {
- @include breakpoint($extrawide) {
- @include font-size(36px, 36px);
- letter-spacing: -1.2px;
- max-width: 83%;
- }
- @include breakpoint($overwide) {
- @include font-size(40px, 40px);
- letter-spacing: -1.33px;
- margin-bottom: 32px;
- }
- }
- &__description {
- @include breakpoint($extrawide) {
- @include font-size(18px, 24px);
- letter-spacing: -0.09px;
- margin-bottom: 36px;
- max-width: 83%;
- }
- @include breakpoint($overwide) {
- margin-bottom: 44px;
+ &__large {
+ @include breakpoint($extrawide) {
+ @include font-size(18px, 24px);
+ letter-spacing: -0.09px;
+ margin-bottom: 36px;
+ max-width: 83%;
+ }
+ @include breakpoint($xlarge) {
+ margin-bottom: 44px;
+ }
}
}
}
diff --git a/src/components/hy-banner/hy-banner.tsx b/src/components/hy-banner/hy-banner.tsx
index 040d4ccb7ae70a535475c348525d6516f3d00ad0..76757166cb04058aea3797a2d4df72cc95ee3055 100644
--- a/src/components/hy-banner/hy-banner.tsx
+++ b/src/components/hy-banner/hy-banner.tsx
@@ -26,18 +26,30 @@ export class HyBanner {
}
render() {
- const hyBannerClass = ['hy-banner', this.headerstyle].join(' ');
+ const hyBannerClass = ['hy-banner', `hy-banner__${this.headerstyle}`, this.headerstyle].join(' ');
+
const hyBannerWrapperClass = ['hy-banner__info-container'].join(' ');
+ const hyBannerTitle = [
+ 'hy-banner__info-container__title',
+ `hy-banner__info-container__title__${this.headerstyle}`,
+ this.headerstyle,
+ ].join(' ');
+ const hyBannerDescription = [
+ 'hy-banner__info-container__description',
+ `hy-banner__info-container__description__${this.headerstyle}`,
+ this.headerstyle,
+ ].join(' ');
+
const variant = CtaLinkButtonVariants.onBlueBkgd;
return (
<Host>
- <hy-box pt="4" />
+ <hy-box pt="1.25, 1.25, 1.5, 2.5" />
<div class={hyBannerClass}>
<hy-main-content-wrapper>
<div class={hyBannerWrapperClass}>
- <div class="hy-banner__info-container__title">{this.textTitle}</div>
- <div class="hy-banner__info-container__description">{this.textDescription}</div>
+ <div class={hyBannerTitle}>{this.textTitle}</div>
+ <div class={hyBannerDescription}>{this.textDescription}</div>
{this.url && (
<div class="hy-banner__info-container__link">
<hy-cta-button
@@ -52,7 +64,7 @@ export class HyBanner {
</div>
</hy-main-content-wrapper>
</div>
- <hy-box pb="3, 5, 6" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/hy-box/hy-box.tsx b/src/components/hy-box/hy-box.tsx
index d8cb60739c94fcfb51104dcd038f420f1f158915..c26f781290bd312ee611605d05eb20e46159cc16 100644
--- a/src/components/hy-box/hy-box.tsx
+++ b/src/components/hy-box/hy-box.tsx
@@ -1,16 +1,31 @@
-import {Component, h, Prop, Host} from '@stencil/core';
+import {Component, h, Prop, Host, Element} from '@stencil/core';
import {css} from 'emotion';
+/*
+Example of using hy-box:
+<hy-box mb="1.75, 1.75, 2, 2.5" />
+Where mb = margin-bottom,
+mobile up to 30rem: 1.75rem (mb[0])
+tablet, 30rem - 60rem: 1.75rem (mb[1])
+wide, 60rem to 75rem or 60rem to 100.0625rem (depending on hasSidebar) (mb[2])
+xlarge, > 100.0625: 2.5rem (mb[3])
+* */
const toRemValue = (val?: number) => {
return typeof val === 'number' ? `${val}rem` : undefined;
};
interface P {
+ hasSidebar?: boolean;
p?: number[];
pt?: number[];
pl?: number[];
pb?: number[];
pr?: number[];
+ m?: number[];
+ mt?: number[];
+ ml?: number[];
+ mb?: number[];
+ mr?: number[];
h?: number;
bg?: string;
width: string[];
@@ -18,10 +33,17 @@ interface P {
align: string;
}
-const breakpoints = ['30rem', '48rem', '60rem', '76rem', '80rem'];
+const breakpoints = ['30rem', '60rem', '75.0625rem', '100.0625rem'];
+/*
+Default - mobile
+mq[0] - tablet
+mq[1] - wide, >960px
+mq[2] - extrawide, > 1200px
+mq[3] - xlarge, >1600px
+* */
const mq = breakpoints.map((b) => `@media (min-width: ${b})`);
-const createCssClass = ({pt, pb, pl, pr, h, bg, width, justify, align}: P) => {
+const createCssClass = ({hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, width, justify, align}: P) => {
const last = width[width.length - 1];
return css`
@@ -29,6 +51,10 @@ const createCssClass = ({pt, pb, pl, pr, h, bg, width, justify, align}: P) => {
padding-right: ${toRemValue(pr[0])};
padding-bottom: ${toRemValue(pb[0])};
padding-left: ${toRemValue(pl[0])};
+ margin-top: ${toRemValue(mt[0])};
+ margin-right: ${toRemValue(mr[0])};
+ margin-bottom: ${toRemValue(mb[0])};
+ margin-left: ${toRemValue(ml[0])};
height: ${toRemValue(h)};
background-color: ${!!bg ? `var(--${bg})` : 'transparent'};
width: ${width[0]};
@@ -43,6 +69,11 @@ const createCssClass = ({pt, pb, pl, pr, h, bg, width, justify, align}: P) => {
padding-right: ${toRemValue(pr[1])};
padding-bottom: ${toRemValue(pb[1])};
padding-left: ${toRemValue(pl[1])};
+
+ margin-top: ${toRemValue(mt[1])};
+ margin-right: ${toRemValue(mr[1])};
+ margin-bottom: ${toRemValue(mb[1])};
+ margin-left: ${toRemValue(ml[1])};
}
${mq[1]} {
width: ${width[2] || last};
@@ -51,29 +82,37 @@ const createCssClass = ({pt, pb, pl, pr, h, bg, width, justify, align}: P) => {
padding-right: ${toRemValue(pr[2])};
padding-bottom: ${toRemValue(pb[2])};
padding-left: ${toRemValue(pl[2])};
+
+ margin-top: ${toRemValue(mt[2])};
+ margin-right: ${toRemValue(mr[2])};
+ margin-bottom: ${toRemValue(mb[2])};
+ margin-left: ${toRemValue(ml[2])};
}
${mq[2]} {
width: ${width[3] || last};
+ padding-top: ${hasSidebar ? `${toRemValue(pt[2])}` : `${toRemValue(pt[3])}`};
+ padding-right: ${hasSidebar ? `${toRemValue(pr[2])}` : `${toRemValue(pr[3])}`};
+ padding-bottom: ${hasSidebar ? `${toRemValue(pb[2])}` : `${toRemValue(pb[3])}`};
+ padding-left: ${hasSidebar ? `${toRemValue(pl[2])}` : `${toRemValue(pl[3])}`};
+
+ margin-top: ${hasSidebar ? `${toRemValue(mt[2])}` : `${toRemValue(mt[3])}`};
+ margin-right: ${hasSidebar ? `${toRemValue(mr[2])}` : `${toRemValue(mr[3])}`};
+ margin-bottom: ${hasSidebar ? `${toRemValue(mb[2])}` : `${toRemValue(mb[3])}`};
+ margin-left: ${hasSidebar ? `${toRemValue(ml[2])}` : `${toRemValue(ml[3])}`};
+ }
+ ${mq[3]} {
+ width: ${width[4] || last};
+
padding-top: ${toRemValue(pt[3])};
padding-right: ${toRemValue(pr[3])};
padding-bottom: ${toRemValue(pb[3])};
padding-left: ${toRemValue(pl[3])};
- }
- ${mq[3]} {
- width: ${width[4] || last};
- padding-top: ${toRemValue(pt[4])};
- padding-right: ${toRemValue(pr[4])};
- padding-bottom: ${toRemValue(pb[4])};
- padding-left: ${toRemValue(pl[4])};
- }
- ${mq[4]} {
- width: ${width[5] || last};
- padding-top: ${toRemValue(pt[5])};
- padding-right: ${toRemValue(pr[5])};
- padding-bottom: ${toRemValue(pb[5])};
- padding-left: ${toRemValue(pl[5])};
+ margin-top: ${toRemValue(mt[3])};
+ margin-right: ${toRemValue(mr[3])};
+ margin-bottom: ${toRemValue(mb[3])};
+ margin-left: ${toRemValue(ml[3])};
}
`;
};
@@ -90,6 +129,8 @@ const toNumArray = (value?: string) =>
shadow: false,
})
export class HyBox {
+ @Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'common';
/**
* All sides padding value in rems. Responsive when given Comma separated values.
*/
@@ -111,6 +152,27 @@ export class HyBox {
* Top padding in rems. Responsive when given Comma separated values.
*/
@Prop() pt?: string;
+ /**
+ * All sides margin value in rems. Responsive when given Comma separated values.
+ */
+ @Prop() m?: string;
+
+ /**
+ * Left margin in rems. Responsive when given Comma separated values.
+ */
+ @Prop() ml?: string;
+ /**
+ * Right margin in rems. Responsive when given Comma separated values.
+ */
+ @Prop() mr?: string;
+ /**
+ * Bottom margin in rems. Responsive when given Comma separated values.
+ */
+ @Prop() mb?: string;
+ /**
+ * Top margin in rems. Responsive when given Comma separated values.
+ */
+ @Prop() mt?: string;
/**
* Value for horisontal alignment (justify-content)
*/
@@ -133,19 +195,38 @@ export class HyBox {
*/
@Prop() width: string = '100';
+ componentWillLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
const pt = toNumArray(this.pt) ?? toNumArray(this.p) ?? [0];
const pb = toNumArray(this.pb) ?? toNumArray(this.p) ?? [0];
const pr = toNumArray(this.pr) ?? toNumArray(this.p) ?? [0];
const pl = toNumArray(this.pl) ?? toNumArray(this.p) ?? [0];
+ const mt = toNumArray(this.mt) ?? toNumArray(this.m) ?? [0];
+ const mb = toNumArray(this.mb) ?? toNumArray(this.m) ?? [0];
+ const mr = toNumArray(this.mr) ?? toNumArray(this.m) ?? [0];
+ const ml = toNumArray(this.ml) ?? toNumArray(this.m) ?? [0];
+ const hasSidebar = this.headerstyle == 'common';
return (
<Host
class={createCssClass({
+ hasSidebar,
pt,
pl,
pr,
pb,
+ mt,
+ ml,
+ mr,
+ mb,
h: this.h,
bg: this.bg,
width: this.width.split(',').map((v) => `${v.trim()}%`),
diff --git a/src/components/hy-box/readme.md b/src/components/hy-box/readme.md
index 774de3b887a3d5cac7cb2e31b9c47157c9c5bedc..1329f8a9a91aa8a056c8d65763b03da4ee78eb6a 100644
--- a/src/components/hy-box/readme.md
+++ b/src/components/hy-box/readme.md
@@ -4,18 +4,24 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | --------------- |
-| `align` | `align` | value for vertical alignment (align-items) | `string` | `'baseline'` |
-| `bg` | `bg` | background color. Must use one of css variable names from color tokens | `string` | `'transparent'` |
-| `h` | `h` | fixed height for the container, useful for extra spacing containers | `number` | `undefined` |
-| `justify` | `justify` | Value for horisontal alignment (justify-content) | `string` | `'flex-start'` |
-| `p` | `p` | All sides padding value in rems. Responsive when given Comma separated values. | `string` | `undefined` |
-| `pb` | `pb` | Bottom padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
-| `pl` | `pl` | Left padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
-| `pr` | `pr` | Right padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
-| `pt` | `pt` | Top padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
-| `width` | `width` | Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value. | `string` | `'100'` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | --------------- |
+| `align` | `align` | value for vertical alignment (align-items) | `string` | `'baseline'` |
+| `bg` | `bg` | background color. Must use one of css variable names from color tokens | `string` | `'transparent'` |
+| `h` | `h` | fixed height for the container, useful for extra spacing containers | `number` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `justify` | `justify` | Value for horisontal alignment (justify-content) | `string` | `'flex-start'` |
+| `m` | `m` | All sides margin value in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `mb` | `mb` | Bottom margin in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `ml` | `ml` | Left margin in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `mr` | `mr` | Right margin in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `mt` | `mt` | Top margin in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `p` | `p` | All sides padding value in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `pb` | `pb` | Bottom padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `pl` | `pl` | Left padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `pr` | `pr` | Right padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `pt` | `pt` | Top padding in rems. Responsive when given Comma separated values. | `string` | `undefined` |
+| `width` | `width` | Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value. | `string` | `'100'` |
## Dependencies
@@ -25,13 +31,17 @@
- [hy-accordion-item](../accordion-item)
- [hy-adjacent-image-text](../adjacent-image-text)
- [hy-banner](../hy-banner)
+- [hy-heading](../heading)
+- [hy-hero](../hy-hero)
+- [hy-image](../image)
- [hy-introduction](../hy-introduction)
- [hy-key-figure-group](../hy-key-figure-group)
-- [hy-key-highlight-group](../hy-key-highlight-group)
- [hy-link-box-list](../link-box-list)
+- [hy-paragraph-text](../paragraph-text)
- [hy-process-flow-box](../process-flow-box)
- [hy-shortcuts](../hy-shortcuts)
-- [hy-two-columns](../hy-two-columns)
+- [hy-tabs](../hy-tabs)
+- [hy-video](../hy-video)
### Graph
@@ -41,13 +51,17 @@ graph TD;
hy-accordion-item --> hy-box
hy-adjacent-image-text --> hy-box
hy-banner --> hy-box
+ hy-heading --> hy-box
+ hy-hero --> hy-box
+ hy-image --> hy-box
hy-introduction --> hy-box
hy-key-figure-group --> hy-box
- hy-key-highlight-group --> hy-box
hy-link-box-list --> hy-box
+ hy-paragraph-text --> hy-box
hy-process-flow-box --> hy-box
hy-shortcuts --> hy-box
- hy-two-columns --> hy-box
+ hy-tabs --> hy-box
+ hy-video --> hy-box
style hy-box fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-box/test/hy-box.spec.tsx b/src/components/hy-box/test/hy-box.spec.tsx
index 58b801f5c80d519fe89e865d7ee5cc0de407b3cd..c0b1a0a70d0ad225de501fecc67cde0877c00ded 100644
--- a/src/components/hy-box/test/hy-box.spec.tsx
+++ b/src/components/hy-box/test/hy-box.spec.tsx
@@ -17,7 +17,7 @@ describe('hy-box helpers', () => {
});
expect(page.root).toMatchInlineSnapshot(`
- <hy-box class="css-n8pjz3" p="1,2,3">
+ <hy-box class="css-11co27t" p="1,2,3">
<!---->
Foo
</hy-box>
diff --git a/src/components/hy-checkbox/hy-checkbox.scss b/src/components/hy-checkbox/hy-checkbox.scss
index 5af23e8a19ceea5bd164aec1de2e6252dc563130..726cb17038ceace8679c3a6032f7b0e85a39b463 100644
--- a/src/components/hy-checkbox/hy-checkbox.scss
+++ b/src/components/hy-checkbox/hy-checkbox.scss
@@ -10,6 +10,8 @@
border-width: 2px;
height: 20px;
margin-right: 6px;
+ min-width: 20px;
+ min-height: 20px;
position: relative;
width: 20px;
@@ -39,9 +41,10 @@
display: inline-flex;
font-family: var(--main-font-family);
letter-spacing: -0.4px;
+ text-align: left;
@include breakpoint($narrow) {
- @include font-size(16px, 24px);
+ @include font-size(16px, 20px);
}
}
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index e1153ff6d17f6523e784ef4fe7be457c0bf056ea..e7c3b0eef2e536aae97c0a7778ec014f9b59c673 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -6,8 +6,21 @@
position: relative;
@include breakpoint($wide) {
- margin-right: 0;
margin-left: 0;
+ margin-right: 0;
+ }
+
+ @include breakpoint($xlarge) {
+ margin-left: -32px;
+ padding-left: 32px;
+ }
+
+ // No sidebar, >1200px styles
+ &__large {
+ @include breakpoint($xlarge) {
+ margin-left: 0;
+ padding-left: 0;
+ }
}
&__desktop-container {
@@ -65,7 +78,6 @@
}
&__content--container {
- //@todo left is now calculated in js. Find a css solution
position: relative;
@include breakpoint($wide) {
@@ -80,18 +92,22 @@
padding-top: 20px;
margin-left: 0;
margin-right: 0;
-
- //without sidebar
- //padding-bottom: 78px;
- //padding-top: 48px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
padding-bottom: 78px;
padding-top: 48px;
+ }
- //without sidebar
- //padding-bottom: 92px;
- //padding-top: 56px;
+ // No sidebar, large screens
+ &__large {
+ @include breakpoint($extrawide) {
+ padding-bottom: 78px;
+ padding-top: 48px;
+ }
+ @include breakpoint($xlarge) {
+ padding-bottom: 92px;
+ padding-top: 56px;
+ }
}
}
@@ -211,10 +227,20 @@
padding: 0 24px 20px 0;
}
- @include breakpoint($overwide) {
- margin: 9px 0 0;
+ @include breakpoint($xlarge) {
padding: 0 40px 32px 0;
}
+
+ // No sidebar, large desktop screens
+ &__large {
+ @include breakpoint($extrawide) {
+ padding: 0 40px 32px 0;
+ }
+
+ @include breakpoint($xlarge) {
+ padding: 0 40px 36px 0;
+ }
+ }
}
&__cta-link__container {
@@ -225,55 +251,6 @@
}
}
-.hy-hero.hy-hero--common {
- @include breakpoint($overwide) {
- margin-left: -32px;
- padding-left: 32px;
- }
-}
-
-.hy-hero.large {
- .hy-hero__content--container {
- @include breakpoint($extrawide) {
- padding-bottom: 78px;
- padding-top: 48px;
- }
- @include breakpoint($overwide) {
- padding-bottom: 92px;
- padding-top: 56px;
- }
-
- @include breakpoint($extrawide) {
- //without sidebar
- padding-bottom: 78px;
- padding-top: 48px;
- }
- @include breakpoint($overwide) {
- padding-bottom: 92px;
- padding-top: 56px;
- }
- }
-
- /* .hy-hero__title {
- @include breakpoint($extrawide) {
- padding: 30px 40px 16px 0;
- }
- @include breakpoint($overwide) {
- padding: 36px 48px 20px 0;
- }
- } */
-
- .hy-hero__description {
- @include breakpoint($extrawide) {
- margin: 0;
- padding: 0 40px 32px 0;
- }
-
- @include breakpoint($overwide) {
- padding: 0 40px 36px 0;
- }
- }
-}
.hy-hero__title {
z-index: 2;
}
@@ -324,7 +301,6 @@
box-decoration-break: clone;
display: inline;
- //padding: 0 1rem;
color: var(--grayscale-white);
font-family: var(--main-font-family);
font-weight: bold;
@@ -343,13 +319,6 @@
@include breakpoint($wide) {
margin: 0;
max-width: 100%;
- //padding: 24px 32px 16px 0;
- }
- @include breakpoint($extrawide) {
- //padding: 24px 32px 16px 0;
- }
- @include breakpoint($overwide) {
- //padding: 30px 40px 16px 0;
}
}
@@ -369,7 +338,7 @@
@include breakpoint($extrawide) {
padding: 16px 32px 16px 0;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
padding: 16px 40px 16px 0;
}
}
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index b7f352110f311bae9ec800c74086d87417f7279a..c45c58b297e813305227694e9fe1ba854527bf47 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -65,7 +65,12 @@ export class HyHero {
}
render() {
- const classAttributes = ['hy-hero', `hy-hero--${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' ');
+ const classAttributes = ['hy-hero', `hy-hero__${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' ');
+ const classDescription = ['hy-hero__description', `hy-hero__description__${this.headerstyle}`].join(' ');
+ const classContentContainer = [
+ 'hy-hero__content--container',
+ `hy-hero__content--container__${this.headerstyle}`,
+ ].join(' ');
const aspectRatioWidth = 8;
const aspectRatioHeight = 5;
@@ -92,7 +97,7 @@ export class HyHero {
</div>
<div class="hy-hero__content"></div>
<div class="hy-hero__content-wrap-helper">
- <div class="hy-hero__content--container">
+ <div class={classContentContainer}>
<div class="hy-hero__title__container">
<hy-heading
class="hy-hero__title"
@@ -114,7 +119,7 @@ export class HyHero {
<div class="hy-hero__content--bottom">
{this.description && (
<div class="hy-hero__description__container">
- <div class="hy-hero__description">{this.description}</div>
+ <div class={classDescription}>{this.description}</div>
</div>
)}
{this.url && (
@@ -134,6 +139,7 @@ export class HyHero {
</div>
</div>
</div>
+ <hy-box mb="2, 2, 2.5, 3.5" />
</Host>
);
}
diff --git a/src/components/hy-hero/readme.md b/src/components/hy-hero/readme.md
index ad636c85dfdc7bd3dee3cf56a6a3caa7383d653f..3a8d33c086f53c6979e2bd9ba947fc5891c58b30 100644
--- a/src/components/hy-hero/readme.md
+++ b/src/components/hy-hero/readme.md
@@ -22,6 +22,7 @@
- [hy-heading](../heading)
- [hy-cta-button](../cta-button)
+- [hy-box](../hy-box)
### Graph
@@ -29,6 +30,8 @@
graph TD;
hy-hero --> hy-heading
hy-hero --> hy-cta-button
+ hy-hero --> hy-box
+ hy-heading --> hy-box
hy-cta-button --> hy-icon
style hy-hero fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-introduction/hy-introduction.scss b/src/components/hy-introduction/hy-introduction.scss
index de52a23e6607e073f145c3f7ccf0f5e9b5639332..36607fc375a71b048390b5a91397b7a10b0eff8a 100644
--- a/src/components/hy-introduction/hy-introduction.scss
+++ b/src/components/hy-introduction/hy-introduction.scss
@@ -34,7 +34,6 @@
@include breakpoint($wide) {
box-shadow: none;
margin-top: 0;
- //padding: 0 32px 0 0;
padding: 0 5.52% 0 0;
width: 48.75%;
}
@@ -56,7 +55,6 @@
@include breakpoint($wide) {
box-shadow: none;
margin-top: 0;
- //padding: 0 0 0 32px;
padding: 0 0 0 5.52%;
width: 48.75%;
}
@@ -67,15 +65,17 @@
width: auto;
@include breakpoint($wide) {
- padding: 56px 0 56px 0;
+ //padding: 56px 0 56px 0;
+ padding: 0;
}
@include breakpoint($extrawide) {
- padding: 72px 0 72px 0;
+ //padding: 72px 0 72px 0;
}
- @include breakpoint($overwide) {
- padding: 80px 0 80px 32px;
+ @include breakpoint($xlarge) {
+ //padding: 80px 0 80px 32px;
+ padding: 0 0 0 32px;
}
&__blue {
@@ -161,7 +161,7 @@
@include breakpoint($extrawide) {
width: 82.89%;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
width: 74.2%;
}
}
@@ -226,7 +226,6 @@
@include breakpoint($narrow) {
@include font-size(18px, 28px);
}
-
@include breakpoint($wide) {
@include font-size(18px, 28px);
margin-bottom: 32px;
@@ -234,9 +233,15 @@
@include breakpoint($extrawide) {
margin-bottom: 32px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-bottom: 40px;
}
+
+ &__large {
+ @include breakpoint($extrawide) {
+ margin-bottom: 40px;
+ }
+ }
}
&__link {
@@ -284,17 +289,3 @@
}
}
}
-
-// Desktop screens without side nav bar.
-.hy-introduction.large {
- .hy-introduction__description {
- @include breakpoint($extrawide) {
- //font Ingress Large
- margin-bottom: 40px;
- }
- @include breakpoint($overwide) {
- //font Ingress Large
- margin-bottom: 40px;
- }
- }
-}
diff --git a/src/components/hy-introduction/hy-introduction.tsx b/src/components/hy-introduction/hy-introduction.tsx
index afaeffcb05a49c9b6525e3c9960a94f5e7d70baf..48154746830dc5ea5d5741fb7adf79a4f7861a2c 100644
--- a/src/components/hy-introduction/hy-introduction.tsx
+++ b/src/components/hy-introduction/hy-introduction.tsx
@@ -31,6 +31,7 @@ export class HyIntroduction {
render() {
const classAttributes = [
'hy-introduction',
+ `hy-introduction__${this.headerstyle}`,
this.headerstyle,
this.reversed && this.variant == null ? 'hy-introduction--reversed' : '',
this.variant
@@ -38,6 +39,11 @@ export class HyIntroduction {
: 'hy-introduction--without-bg',
].join(' ');
+ const classTitle = ['hy-introduction__title', `hy-introduction__title__${this.headerstyle}`].join(' ');
+ const classDescription = ['hy-introduction__description', `hy-introduction__description__${this.headerstyle}`].join(
+ ' '
+ );
+
const contentWrapperClasses = [
'hy-introduction__content',
this.reversed && this.variant == null ? 'hy-introduction__content--reversed' : '',
@@ -48,18 +54,19 @@ export class HyIntroduction {
return (
<Host>
+ <hy-box pt="1.25, 1.25, 1.5, 2.5" />
<div class={classAttributes}>
<hy-main-content-wrapper>
<div class="hy-introduction__outer-content">
<div class={contentWrapperClasses}>
<hy-heading
- class="hy-introduction__title"
+ class={classTitle}
heading={HeadingVarians.h2}
section={HeadingSectionVariants.introduction}
>
{this.textTitle}
</hy-heading>
- <div class="hy-introduction__description">{this.textDescription}</div>
+ <div class={classDescription}>{this.textDescription}</div>
{this.url && (
<div class="hy-introduction__link__container">
<a class="hy-introduction__link" href={this.url} aria-label={this.scLabel} target={target}>
@@ -79,7 +86,7 @@ export class HyIntroduction {
</div>
</hy-main-content-wrapper>
</div>
- <hy-box pb="3, 5, 6" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/hy-introduction/readme.md b/src/components/hy-introduction/readme.md
index 66affdf0d734d5d75c1c631b4af81efcd82fff9f..ecb40e3ebeaa1a32c5eef35254e75f7dfa9070fb 100644
--- a/src/components/hy-introduction/readme.md
+++ b/src/components/hy-introduction/readme.md
@@ -21,21 +21,23 @@
### Depends on
+- [hy-box](../hy-box)
- [hy-main-content-wrapper](../hy-main-content-wrapper)
- [hy-heading](../heading)
- [hy-icon](../icon)
- [hy-image](../image)
-- [hy-box](../hy-box)
### Graph
```mermaid
graph TD;
+ hy-introduction --> hy-box
hy-introduction --> hy-main-content-wrapper
hy-introduction --> hy-heading
hy-introduction --> hy-icon
hy-introduction --> hy-image
- hy-introduction --> hy-box
+ hy-heading --> hy-box
+ hy-image --> hy-box
style hy-introduction fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-key-figure-group/hy-key-figure-group.scss b/src/components/hy-key-figure-group/hy-key-figure-group.scss
index fa056f214b571c7d7381ef753aae0418f36f2842..e6abc90d4551e3bc058d4d3f575721c1fb74bfb0 100644
--- a/src/components/hy-key-figure-group/hy-key-figure-group.scss
+++ b/src/components/hy-key-figure-group/hy-key-figure-group.scss
@@ -2,6 +2,23 @@
display: block;
}
+.hy-key-figure-group-container {
+ margin: 20px 0 28px 0;
+
+ @include breakpoint($wide) {
+ margin: 24px 0 32px 0;
+ }
+ @include breakpoint($xlarge) {
+ margin: 40px 0;
+ }
+
+ &__large {
+ @include breakpoint($extrawide) {
+ margin: 40px 0;
+ }
+ }
+}
+
.hy-key-figure-group {
display: block;
justify-content: center;
diff --git a/src/components/hy-key-figure-group/hy-key-figure-group.tsx b/src/components/hy-key-figure-group/hy-key-figure-group.tsx
index 8ed41d367c964552c8a40ce8dbc490b08fd5249b..127ea0a99058f9e234b5e1a99ea4bccabee47ce9 100644
--- a/src/components/hy-key-figure-group/hy-key-figure-group.tsx
+++ b/src/components/hy-key-figure-group/hy-key-figure-group.tsx
@@ -3,7 +3,7 @@ export interface KeyFigureValue {
description: string;
}
-import {Component, ComponentInterface, Watch, Prop, h, Host} from '@stencil/core';
+import {Component, ComponentInterface, Watch, Prop, h, Host, Element} from '@stencil/core';
import {KeyHighlightVariants} from '../../utils/utils';
@Component({
@@ -12,8 +12,10 @@ import {KeyHighlightVariants} from '../../utils/utils';
shadow: false,
})
export class HyKeyFigureGroup implements ComponentInterface {
+ @Element() el: HTMLElement;
private _dataItems: KeyFigureValue[];
@Prop() dataItems: KeyFigureValue[] | string;
+ @Prop() headerstyle: string = 'common';
@Watch('dataItems')
arrayDataWatcher(newValue: KeyFigureValue[] | string) {
@@ -27,6 +29,15 @@ export class HyKeyFigureGroup implements ComponentInterface {
this.arrayDataWatcher(this.dataItems);
}
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
getBoxClassName(count) {
let className = 'box';
@@ -51,7 +62,11 @@ export class HyKeyFigureGroup implements ComponentInterface {
* */
const keyFiguresVariant = this._dataItems.length == 4 ? KeyHighlightVariants.small : KeyHighlightVariants.default;
- const classAttributes = [keyFiguresVariant, 'hy-key-figure-group-container'].join(' ');
+ const classAttributes = [
+ keyFiguresVariant,
+ 'hy-key-figure-group-container',
+ `hy-key-figure-group-container__${this.headerstyle}`,
+ ].join(' ');
const classRowAttributes = ['hy-key-figure-group'].join(' ');
const classRowCenteredAttributes = ['hy-key-figure-group', 'hy-key-figure-group-centered'].join(' ');
@@ -88,7 +103,7 @@ export class HyKeyFigureGroup implements ComponentInterface {
})}
</div>
</div>
- <hy-box pb="1.5, 2.5, 2.5" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
} else {
@@ -108,7 +123,7 @@ export class HyKeyFigureGroup implements ComponentInterface {
})}
</div>
</div>
- <hy-box pb="3, 5, 6" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/hy-key-figure-group/readme.md b/src/components/hy-key-figure-group/readme.md
index 7de5db01cd8d981a9df7395eee41859589bc4ee9..a08c71a85f849e24a29d2c2dcffe8f2979d1217c 100644
--- a/src/components/hy-key-figure-group/readme.md
+++ b/src/components/hy-key-figure-group/readme.md
@@ -4,9 +4,10 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------- | ------------ | ----------- | ---------------------------- | ----------- |
-| `dataItems` | `data-items` | | `KeyFigureValue[] \| string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | ---------------------------- | ----------- |
+| `dataItems` | `data-items` | | `KeyFigureValue[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
## Dependencies
diff --git a/src/components/hy-key-highlight-group/hy-key-highlight-group.scss b/src/components/hy-key-highlight-group/hy-key-highlight-group.scss
index 74f1db8bf7a5ae40bdf1ed74cf05c35e32e21ca7..0fc1d921c370ec755834e580f633edf18f3928bb 100644
--- a/src/components/hy-key-highlight-group/hy-key-highlight-group.scss
+++ b/src/components/hy-key-highlight-group/hy-key-highlight-group.scss
@@ -10,12 +10,12 @@
display: flex;
flex-direction: column;
flex-wrap: wrap;
- margin: 0;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-direction: row;
margin: 0 calc(-1 * var(--gutter-medium));
}
+
@include breakpoint($wide) {
margin: 0 calc(-1 * var(--gutter-wide));
}
diff --git a/src/components/hy-key-highlight-group/hy-key-highlight-group.tsx b/src/components/hy-key-highlight-group/hy-key-highlight-group.tsx
index 273a3afb37c8a09cae3e6f1958c843cafadafde9..8c141146269f831035065e0455e5fe0e2de39cf3 100644
--- a/src/components/hy-key-highlight-group/hy-key-highlight-group.tsx
+++ b/src/components/hy-key-highlight-group/hy-key-highlight-group.tsx
@@ -3,7 +3,7 @@ export interface KeyHighlightValue {
description: string;
}
-import {Component, ComponentInterface, Watch, Prop, h, Host} from '@stencil/core';
+import {Component, ComponentInterface, Watch, Prop, h, Host, Element} from '@stencil/core';
import {KeyHighlightVariants} from '../../utils/utils';
@Component({
@@ -12,10 +12,11 @@ import {KeyHighlightVariants} from '../../utils/utils';
shadow: true,
})
export class HyKeyHighlightGroup implements ComponentInterface {
+ @Element() el: HTMLElement;
@Prop() variant: KeyHighlightVariants = KeyHighlightVariants.default;
-
private _dataItems: KeyHighlightValue[];
@Prop() dataItems: KeyHighlightValue[] | string;
+ @Prop() headerstyle: string = 'common';
@Watch('dataItems')
arrayDataWatcher(newValue: KeyHighlightValue[] | string) {
@@ -29,8 +30,21 @@ export class HyKeyHighlightGroup implements ComponentInterface {
this.arrayDataWatcher(this.dataItems);
}
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
- const classAttributes = [this.variant, 'hy-key-highlight-group'].join(' ');
+ const classAttributes = [
+ this.variant,
+ 'hy-key-highlight-group',
+ `hy-key-highlight-group__${this.headerstyle}`,
+ ].join(' ');
const dataItemCount = this._dataItems.length;
const classItem = dataItemCount % 4 == 0 ? 'box-4' : 'box';
@@ -49,7 +63,6 @@ export class HyKeyHighlightGroup implements ComponentInterface {
);
})}
</div>
- <hy-box pb="3, 5, 6" />
</Host>
);
}
diff --git a/src/components/hy-key-highlight-group/readme.md b/src/components/hy-key-highlight-group/readme.md
index 8e79b9741ba44b15eaa499d1fd65a24d37c72218..6ac76031ce4fdd017c302af110a211198098856f 100644
--- a/src/components/hy-key-highlight-group/readme.md
+++ b/src/components/hy-key-highlight-group/readme.md
@@ -4,24 +4,23 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------- | ------------ | ----------- | ------------------------------------------------------------ | ------------------------------ |
-| `dataItems` | `data-items` | | `KeyHighlightValue[] \| string` | `undefined` |
-| `variant` | `variant` | | `KeyHighlightVariants.default \| KeyHighlightVariants.small` | `KeyHighlightVariants.default` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | ------------------------------------------------------------ | ------------------------------ |
+| `dataItems` | `data-items` | | `KeyHighlightValue[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `variant` | `variant` | | `KeyHighlightVariants.default \| KeyHighlightVariants.small` | `KeyHighlightVariants.default` |
## Dependencies
### Depends on
- [hy-key-highlight](../hy-key-highlight)
-- [hy-box](../hy-box)
### Graph
```mermaid
graph TD;
hy-key-highlight-group --> hy-key-highlight
- hy-key-highlight-group --> hy-box
style hy-key-highlight-group fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-large-process-flow/hy-large-process-flow.scss b/src/components/hy-large-process-flow/hy-large-process-flow.scss
index f1e62be85154656cccffc7b70e60ba1bc8314ce3..a3a93adeabe5f15a2ef53424359d927d9aae5588 100644
--- a/src/components/hy-large-process-flow/hy-large-process-flow.scss
+++ b/src/components/hy-large-process-flow/hy-large-process-flow.scss
@@ -5,12 +5,9 @@
.hy-large-process-flow {
max-width: 100%;
padding-top: 8px;
- margin-bottom: 24px;
width: 100%;
@include breakpoint($narrow) {
- //tablet up till 768 (including 768px)
- margin-bottom: 32px;
max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8
padding-top: 0;
}
@@ -19,11 +16,9 @@
max-width: calc(100% / 12 * 8 + var(--gutter-medium)); // 8 columns out of 12
}
@include breakpoint($wide) {
- //mid desktop
max-width: calc(100% / 12 * 8 + var(--gutter-wide)); // 8 columns out of 12
}
@include breakpoint($extrawide) {
- //large desktop
max-width: calc(100% / 12 * 8 + var(--gutter-extrawide)); // 8 columns out of 12
}
diff --git a/src/components/hy-large-process-flow/hy-large-process-flow.tsx b/src/components/hy-large-process-flow/hy-large-process-flow.tsx
index da214678ed816cef06fcaeeb7c8a98a8a525172c..270b3fe97a5cadd2f8336e4f5941c2c2dec7df9f 100644
--- a/src/components/hy-large-process-flow/hy-large-process-flow.tsx
+++ b/src/components/hy-large-process-flow/hy-large-process-flow.tsx
@@ -3,7 +3,7 @@ export interface ProcessFlowValue {
boxes: string;
}
-import {Component, ComponentInterface, h, Prop, Watch} from '@stencil/core';
+import {Component, ComponentInterface, Element, h, Prop, Watch} from '@stencil/core';
import {HeadingVarians} from '../../utils/utils';
@Component({
@@ -12,6 +12,9 @@ import {HeadingVarians} from '../../utils/utils';
shadow: true,
})
export class HyLargeProcessFlow implements ComponentInterface {
+ @Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'common';
+
private _dataItems: ProcessFlowValue[];
@Prop() dataItems: ProcessFlowValue[] | string;
@@ -27,10 +30,19 @@ export class HyLargeProcessFlow implements ComponentInterface {
this.arrayDataWatcher(this.dataItems);
}
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
- const classAttributes = ['hy-large-process-flow'].join(' ');
+ const classAttributes = ['hy-large-process-flow', `hy-large-process-flow__${this.headerstyle}`].join(' ');
- return (
+ return [
<div class={classAttributes}>
{this._dataItems.map((x, index) => {
let phases = JSON.stringify(x.boxes);
@@ -44,7 +56,7 @@ export class HyLargeProcessFlow implements ComponentInterface {
<hy-large-process-flow-phase data-items={phases} />,
];
})}
- </div>
- );
+ </div>,
+ ];
}
}
diff --git a/src/components/hy-large-process-flow/readme.md b/src/components/hy-large-process-flow/readme.md
index 9ed580374a8a05dd452c21e9622f5073a3319cad..32ee5c9e8b538c2df797bcbc8fc989c7793fe66c 100644
--- a/src/components/hy-large-process-flow/readme.md
+++ b/src/components/hy-large-process-flow/readme.md
@@ -4,9 +4,10 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------- | ------------ | ----------- | ------------------------------ | ----------- |
-| `dataItems` | `data-items` | | `ProcessFlowValue[] \| string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | ------------------------------ | ----------- |
+| `dataItems` | `data-items` | | `ProcessFlowValue[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
## Dependencies
@@ -21,6 +22,7 @@
graph TD;
hy-large-process-flow --> hy-heading
hy-large-process-flow --> hy-large-process-flow-phase
+ hy-heading --> hy-box
hy-large-process-flow-phase --> hy-cta-link
hy-cta-link --> hy-icon
style hy-large-process-flow fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/src/components/hy-link-list/hy-link-list.tsx b/src/components/hy-link-list/hy-link-list.tsx
index 3c101a14d60ae17d391a64bae47f772c495f659f..963914335c5eb808af35c24bae36a179e7e81ee4 100644
--- a/src/components/hy-link-list/hy-link-list.tsx
+++ b/src/components/hy-link-list/hy-link-list.tsx
@@ -5,7 +5,7 @@ export interface CtaLinkValue {
isExternal: boolean;
}
-import {Component, ComponentInterface, h, Prop, Watch} from '@stencil/core';
+import {Component, ComponentInterface, Element, h, Prop, Watch} from '@stencil/core';
import {CtaLinkVariants} from '../../utils/utils';
@Component({
@@ -14,6 +14,8 @@ import {CtaLinkVariants} from '../../utils/utils';
shadow: true,
})
export class HyLinkList implements ComponentInterface {
+ @Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'default';
private _dataItems: CtaLinkValue[];
@Prop() dataItems: CtaLinkValue[] | string;
@Prop() listHeading: string = '';
@@ -30,11 +32,20 @@ export class HyLinkList implements ComponentInterface {
this.arrayDataWatcher(this.dataItems);
}
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
- const classAttributes = ['hy-link-list'].join(' ');
+ const classAttributes = ['hy-link-list', `hy-link-list__${this.headerstyle}`].join(' ');
const linkVariant = CtaLinkVariants.linkList;
- return (
+ return [
<div class={classAttributes}>
{this.listHeading.length > 0 && <div class={'list-title'}>{this.listHeading}</div>}
{this._dataItems.map((x) => {
@@ -48,7 +59,7 @@ export class HyLinkList implements ComponentInterface {
/>
);
})}
- </div>
- );
+ </div>,
+ ];
}
}
diff --git a/src/components/hy-link-list/readme.md b/src/components/hy-link-list/readme.md
index 9ac5f3f4c58511d7e9f8c22cca86f811c441d15b..c9df663d9081774b1ecf964e3bddb9b6cd967d2b 100644
--- a/src/components/hy-link-list/readme.md
+++ b/src/components/hy-link-list/readme.md
@@ -7,6 +7,7 @@
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------- | -------------------------- | ----------- |
| `dataItems` | `data-items` | | `CtaLinkValue[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'default'` |
| `listHeading` | `list-heading` | | `string` | `''` |
## Dependencies
diff --git a/src/components/hy-list-item/hy-list-item.scss b/src/components/hy-list-item/hy-list-item.scss
index f67c979296f11da075fe193ba4140dd68fa8105f..f14818888ba75b029ecf18672688134d272305c5 100644
--- a/src/components/hy-list-item/hy-list-item.scss
+++ b/src/components/hy-list-item/hy-list-item.scss
@@ -5,79 +5,457 @@
.hy-list-item {
display: flex;
font-family: var(--main-font-family);
- margin-bottom: 28px;
text-decoration: none;
- @include breakpoint($wide) {
- margin-bottom: 32px;
- }
+ &__default {
+ margin-bottom: 28px;
+ @include breakpoint($wide) {
+ margin-bottom: 32px;
+ }
- &__info-container {
- &__header {
- @include font-size(12px, 14px);
- color: var(--grayscale-dark);
- letter-spacing: 0;
- margin-bottom: 4px;
+ &__info-container {
+ &__header {
+ @include font-size(12px, 14px);
+ color: var(--grayscale-dark);
+ letter-spacing: 0;
+ margin-bottom: 4px;
- @include breakpoint($narrow) {
- @include font-size(14px, 18px);
- margin-bottom: 2px;
+ @include breakpoint($narrow) {
+ @include font-size(14px, 18px);
+ margin-bottom: 2px;
+ }
+ }
+
+ &__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ color: var(--brand-main-light);
+ letter-spacing: -0.56px;
+ margin-bottom: 6px;
+
+ @include breakpoint($narrow) {
+ @include font-size(22px, 28px);
+ letter-spacing: -0.69px;
+ margin-bottom: 10px;
+ }
+ @include breakpoint($xlarge) {
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+ margin-bottom: 8px;
+ }
+ }
+
+ &__link-container {
+ align-items: center;
+ display: flex;
+ margin-bottom: 6px;
+
+ @include breakpoint($narrow) {
+ margin-bottom: 8px;
+ }
}
+
+ &__link {
+ @include font-size(12px, 16px);
+ color: var(--grayscale-dark);
+ letter-spacing: -0.07px;
+ margin-left: 4px;
+
+ @include breakpoint($narrow) {
+ margin-left: 5px;
+ }
+
+ &__icon {
+ svg {
+ fill: var(--grayscale-dark);
+ }
+ }
+ }
+
+ &__description {
+ @include font-size(14px, 20px);
+ color: var(--grayscale-black);
+ letter-spacing: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ }
+ }
+ }
+ }
+
+ // Degree programmes.
+ &__degree {
+ background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
+ flex-direction: column;
+ @include breakpoint($narrow) {
+ flex-direction: row;
}
- &__title {
- @include font-size(18px, 22px);
- @include font-weight($bold);
- color: var(--brand-main-light);
- letter-spacing: -0.56px;
- margin-bottom: 6px;
+ &__image-container {
+ display: block;
+ min-width: 100%;
+ position: relative;
+ width: 100%;
@include breakpoint($narrow) {
- @include font-size(22px, 28px);
- letter-spacing: -0.69px;
- margin-bottom: 10px;
+ min-width: 24%;
+ width: 24%;
}
- @include breakpoint($fullhd) {
- @include font-size(26px, 32px);
- letter-spacing: -0.8px;
- margin-bottom: 8px;
+
+ &__image {
+ vertical-align: bottom;
+ max-width: 100%;
+ height: 100%;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ span {
+ @include font-weight($semibold);
+ @include font-size(12px, 14px);
+ background-color: var(--additional-yellow);
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
+ color: var(--grayscale-black);
+ left: -4px;
+ letter-spacing: -0.07px;
+ padding: 8px 5px;
+ position: absolute;
+ top: 16px;
+ text-transform: uppercase;
+
+ @include breakpoint($narrow) {
+ left: -8px;
+ }
+ @include breakpoint($wide) {
+ top: 22px;
+ }
}
}
- &__link-container {
- align-items: center;
+ &__info-container {
display: flex;
- margin-bottom: 6px;
+ flex-direction: column;
+ margin: 0;
+ padding: 12px;
+ position: relative;
- @include breakpoint($narrow) {
+ // 960-1600 with Sidebar;
+ @include breakpoint($wide) {
+ padding: 12px 16px;
+ }
+ // >1600 with sidebar same as >1200 without sidebar
+ @include breakpoint($xlarge) {
+ padding: 20px 24px;
+ }
+
+ &__data {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 32px;
+ }
+
+ // >1200 no sidebar;
+ &__large {
+ @include breakpoint($extrawide) {
+ padding: 20px 24px;
+ }
+ }
+
+ &__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ color: var(--link-blue);
+ letter-spacing: -0.54px;
margin-bottom: 8px;
+
+ // 960-1600 with Sidebar;
+ @include breakpoint($wide) {
+ @include font-size(18px, 24px);
+ letter-spacing: -0.5px;
+ }
+
+ // >1600 with sidebar same as >1200 without sidebar
+ @include breakpoint($xlarge) {
+ @include font-size(20px, 26px);
+ letter-spacing: -0.6px;
+ }
+
+ &__large {
+ // >1200 no sidebar;
+ @include breakpoint($extrawide) {
+ @include font-size(20px, 26px);
+ letter-spacing: -0.6px;
+ }
+ }
}
- }
- &__link {
- @include font-size(12px, 16px);
- color: var(--grayscale-dark);
- letter-spacing: -0.07px;
- margin-left: 4px;
+ &__description {
+ @include font-size(14px, 18px);
+ color: var(--grayscale-dark);
+ letter-spacing: 0;
+ margin-bottom: 16px;
- @include breakpoint($narrow) {
- margin-left: 5px;
+ @include breakpoint($narrow) {
+ margin-bottom: 12px;
+ }
+ // 960-1600 with Sidebar;
+ @include breakpoint($wide) {
+ letter-spacing: -0.2;
+ }
+ // >1600 with sidebar same as >1200 without sidebar
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.25px;
+ }
+
+ &__large {
+ // >1200 no sidebar;
+ @include breakpoint($extrawide) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.25px;
+ }
+ }
}
- &__icon {
- svg {
- fill: var(--grayscale-dark);
+ &__additional-info {
+ &__item {
+ @include font-size(12px, 16px);
+ @include font-weight($light);
+ align-items: center;
+ color: var(--grayscale-black);
+ display: flex;
+ flex-direction: row;
+ letter-spacing: -0.2px;
+ margin-bottom: 4px;
+
+ @include breakpoint($xlarge) {
+ @include font-size(14px, 16px);
+ }
+ // >1200 no sidebar;
+ &__large {
+ @include breakpoint($extrawide) {
+ @include font-size(14px, 16px);
+ }
+ }
+ }
+ &__item.active::before {
+ content: ' ';
+ box-sizing: border-box;
+ height: 14px;
+ width: 14px;
+ border: 3px solid #ffffff;
+ border-radius: 4px;
+ background-color: #f9a21a;
+ left: -7px;
+ position: absolute;
+
+ @include breakpoint($narrow) {
+ border: none;
+ border-radius: 4px;
+ height: 8px;
+ margin-right: 6px;
+ width: 8px;
+ left: 0;
+ position: relative;
+ }
+ }
+ }
+
+ &__outgoing-link {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ padding-top: 16px;
+
+ a {
+ align-items: center;
+ bottom: 12px;
+ display: flex;
+ flex-direction: row;
+ position: absolute;
+ right: -6px;
+ text-decoration: none;
+
+ .label {
+ @include font-size(14px, 16px);
+ @include font-weight($bold);
+ color: var(--link-blue);
+ letter-spacing: -0.5px;
+ margin-right: 8px;
+ text-align: right;
+ }
+
+ .icon-wrapper {
+ background-color: var(--brand-main-light);
+ z-index: 10;
+
+ .icon {
+ 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: 6.4px;
+
+ @include breakpoint($xlarge) {
+ height: 36px;
+ width: 36px;
+ padding: 7.2px;
+ }
+ }
+ }
+ }
+ }
+
+ // >1200 no sidebar;
+ &__large {
+ svg {
+ @include breakpoint($extrawide) {
+ height: 36px;
+ width: 36px;
+ padding: 7.2px;
+ }
+ }
}
}
}
+ }
+}
- &__description {
- @include font-size(14px, 20px);
- color: var(--grayscale-black);
- letter-spacing: 0;
+.hy-list-item-wrapper {
+ font-family: var(--main-font-family);
+
+ &__degree {
+ margin-bottom: 16px;
+ @include breakpoint($narrow) {
+ flex-direction: row;
+ margin-bottom: 24px;
+ }
+ @include breakpoint($wide) {
+ margin-bottom: 28px;
+ }
+ @include breakpoint($xlarge) {
+ margin-bottom: 32px;
+ }
+ // >1200 no sidebar;
+ &__large {
+ @include breakpoint($extrawide) {
+ margin-bottom: 32px;
+ }
+ }
+
+ &__related-info {
+ background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);
+ margin-top: 4px;
+ padding: 0 12px 0 16px;
@include breakpoint($narrow) {
- @include font-size(16px, 24px);
+ padding: 0 24px 0 16px;
+ }
+ @include breakpoint($wide) {
+ margin-top: 6px;
+ padding: 0 24px 0 24px;
+ }
+ @include breakpoint($xlarge) {
+ margin-top: 8px;
+ }
+ // >1200 no sidebar;
+ &__large {
+ @include breakpoint($extrawide) {
+ margin-top: 8px;
+ }
+ }
+
+ &__heading {
+ &__link {
+ text-decoration: none;
+ }
+
+ &__button {
+ @include font-size(12px, 16px);
+ align-items: center;
+ background: radial-gradient(circle, #f8f8f8 0%, #f5f5f5 100%);
+ border: none;
+ color: var(--grayscale-black);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.2px;
+ height: 100%;
+ padding: 8px 0;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ @include font-size(12px, 20px);
+ padding: 14px 0;
+ }
+ @include breakpoint($wide) {
+ @include font-size(14px, 20px);
+ letter-spacing: -0.4px;
+ padding: 18px 0;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &__is-open {
+ svg {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ &__icon {
+ margin-right: 0.5rem;
+ z-index: 0;
+
+ @include breakpoint($wide) {
+ margin-right: 12px;
+ }
+
+ svg {
+ fill: var(--brand-main);
+ height: 14px;
+ width: 14px;
+
+ @include breakpoint($wide) {
+ height: 18px;
+ width: 18px;
+ }
+ }
+ }
+ }
+
+ &__content {
+ display: none;
+
+ &__is-open {
+ border-top: 1px solid #d2d2d2;
+ display: flex;
+ flex-direction: column;
+ padding: 20px 8px 5px 8px;
+
+ @include breakpoint($wide) {
+ padding: 20px 0 14px 0;
+ }
+ }
+ }
+
+ &__link {
+ @include font-size(14px, 16px);
+ @include font-weight($bold);
+ color: var(--link-blue);
+ letter-spacing: -0.4px;
+ margin-bottom: 16px;
+ text-decoration: none;
}
}
}
diff --git a/src/components/hy-list-item/hy-list-item.tsx b/src/components/hy-list-item/hy-list-item.tsx
index f06fdd00935c525749325c40054d9a3b3e4e0a2f..337e777e24c320a00b7c58395cf77dfd8226ead5 100644
--- a/src/components/hy-list-item/hy-list-item.tsx
+++ b/src/components/hy-list-item/hy-list-item.tsx
@@ -1,4 +1,22 @@
-import {Component, h, Prop} from '@stencil/core';
+export interface RelatedLink {
+ label: string;
+ url: string;
+ isExternal: boolean;
+ scLabel: string;
+}
+
+export interface AdditionalInfo {
+ text: string;
+ isActive: boolean;
+}
+
+import {Component, h, Prop, Watch, State, Listen, Element} from '@stencil/core';
+import {ListItemVariants} from '../../utils/utils';
+
+let keys = {
+ enter: 'Enter',
+ space: 'Space',
+};
@Component({
tag: 'hy-list-item',
@@ -6,37 +24,322 @@ import {Component, h, Prop} from '@stencil/core';
shadow: false,
})
export class HyListItem {
+ @Element() el: HTMLElement;
+ @State() isExpandedRelatedContent: boolean = false;
+ @Prop() variant: ListItemVariants = ListItemVariants.default;
@Prop() itemType?: string;
@Prop() itemTitle?: string;
@Prop() itemDescription?: string;
@Prop() url?: string;
@Prop() isExternal: boolean = false;
@Prop() scLabel?: string;
+ @Prop() itemImageUrl?: string;
+ @Prop() itemImageAlt?: string;
+ @Prop() relatedLinksBlockTitle?: string;
+ private _relatedLinks: RelatedLink[];
+ @Prop() relatedLinks?: RelatedLink[] | string;
+ @Prop() imageLabel?: string;
+ @Prop() outGoingUrlLabel?: string = 'Go to programme page';
+ private _additionalInfo: AdditionalInfo[];
+ @Prop() additionalInfo?: AdditionalInfo[] | string;
+ @Prop() headerstyle: string = 'common';
+
+ @State() _imageMinHeight: number = 0;
+ @State() _imageMinWidth: number = 0;
+
+ @Watch('relatedLinks')
+ relatedLinksWatcher(newValue: RelatedLink[] | string) {
+ if (typeof newValue === 'string') {
+ this._relatedLinks = JSON.parse(newValue);
+ } else {
+ this._relatedLinks = newValue;
+ }
+ }
+
+ @Watch('additionalInfo')
+ additionalInfoWatcher(newValue: AdditionalInfo[] | string) {
+ if (typeof newValue === 'string') {
+ this._additionalInfo = JSON.parse(newValue);
+ } else {
+ this._additionalInfo = newValue;
+ }
+ }
+
+ expandRelatedInfoPanel(target) {
+ let contentSelector = `hy-list-item-wrapper__${this.variant}__related-info__content`;
+ let targetButtonClass = 'hy-list-item-wrapper__degree__related-info__heading__button';
+ let contentSection = document.querySelectorAll(`[aria-labelledBy="${target.id}"]`)[0] as HTMLElement;
+ if (contentSection) {
+ if (!this.isExpandedRelatedContent) {
+ contentSection.classList.add(`${contentSelector}__is-open`);
+ target.classList.add(`${targetButtonClass}__is-open`);
+ } else {
+ contentSection.classList.remove(`${contentSelector}__is-open`);
+ target.classList.remove(`${targetButtonClass}__is-open`);
+ }
+ this.isExpandedRelatedContent = !this.isExpandedRelatedContent;
+ }
+ }
+
+ @Listen('keydown')
+ handleKeyDown(event: KeyboardEvent) {
+ const key = event.code;
+ let target = event.target as HTMLButtonElement;
+
+ const targetElement = target.tagName.toLowerCase();
+ const possibleTags = [targetElement].some((r) => ['svg', 'path', 'button', 'a'].indexOf(r) >= 0);
+
+ if (
+ target &&
+ possibleTags &&
+ !target.classList.contains('hy-list-item-wrapper__degree__related-info__link') &&
+ [keys.enter, keys.space].includes(key)
+ ) {
+ if (targetElement !== 'button') {
+ target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);
+ }
+ this.expandRelatedInfoPanel(target);
+ event.preventDefault();
+ }
+ }
+
+ @Listen('click')
+ handleClick(event) {
+ let target = event.target as HTMLElement;
+ const targetElement = target.tagName.toLowerCase();
+ const possibleTags = [targetElement].some((r) => ['svg', 'path', 'button', 'a'].indexOf(r) >= 0);
+
+ if (target && possibleTags && !target.classList.contains('hy-list-item-wrapper__degree__related-info__link')) {
+ if (targetElement !== 'button') {
+ target = target.closest(`.hy-list-item-wrapper__${this.variant}__related-info__heading__button`);
+ }
+ this.expandRelatedInfoPanel(target);
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ }
+ }
+
+ componentWillLoad() {
+ this.relatedLinksWatcher(this.relatedLinks);
+ this.additionalInfoWatcher(this.additionalInfo);
+ }
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ if (this.variant == ListItemVariants.degreeProgramme) {
+ const image = document.querySelector('.hy-list-item__degree__image-container__image img') as any;
+
+ if (image) {
+ image.addEventListener('load', function () {
+ const outputImageAspectRatio = 1;
+ const imageHeight = image.naturalHeight;
+ const imageWidth = image.naturalWidth;
+ const inputImageAspectRatio = imageWidth / imageHeight;
+ this._imageMinWidth = imageWidth;
+ this._imageMinHeight = imageHeight;
+ if (inputImageAspectRatio > outputImageAspectRatio) {
+ this._imageMinWidth = imageHeight * outputImageAspectRatio;
+ } else if (inputImageAspectRatio < outputImageAspectRatio) {
+ this._imageMinHeight = imageWidth / outputImageAspectRatio;
+ }
+ });
+ }
+ }
+ }
render() {
- const classAttributes = ['hy-list-item'].join(' ');
+ const classWrapperAttributes = [
+ 'hy-list-item-wrapper',
+ `hy-list-item-wrapper__${this.variant}`,
+ `hy-list-item-wrapper__${this.variant}__${this.headerstyle}`,
+ ].join(' ');
+ const classAttributes = ['hy-list-item', `hy-list-item__${this.variant}`].join(' ');
+ const classInfoContainerAttributes = [
+ `hy-list-item__${this.variant}__info-container`,
+ `hy-list-item__${this.variant}__info-container__${this.headerstyle}`,
+ ].join(' ');
+ const classInfoContainerDataAttributes = [
+ `hy-list-item__${this.variant}__info-container__data`,
+ `hy-list-item__${this.variant}__info-container__data__${this.headerstyle}`,
+ ].join(' ');
+ const classInfoContainerHeader = [
+ `hy-list-item__${this.variant}__info-container__header`,
+ `hy-list-item__${this.variant}__info-container__header__${this.headerstyle}`,
+ ].join(' ');
+ const classInfoContainerTitle = [
+ `hy-list-item__${this.variant}__info-container__title`,
+ `hy-list-item__${this.variant}__info-container__title__${this.headerstyle}`,
+ ].join(' ');
+ const classInfoContainerDescription = [
+ `hy-list-item__${this.variant}__info-container__description`,
+ `hy-list-item__${this.variant}__info-container__description__${this.headerstyle}`,
+ ].join(' ');
+ const classInfoContainerLinkContainer = [`hy-list-item__${this.variant}__info-container__link-container`].join(' ');
+ const classInfoContainerLinkIcon = [`hy-list-item__${this.variant}__info-container__link__icon`].join(' ');
+ const classInfoContainerLink = [`hy-list-item__${this.variant}__info-container__link`].join(' ');
+
const target = this.isExternal ? '_blank' : '_self';
- return (
- <article>
- <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
- <div class="hy-list-item__info-container">
- <div class="hy-list-item__info-container__header">{this.itemType}</div>
- <div class="hy-list-item__info-container__title">{this.itemTitle}</div>
-
- <div class="hy-list-item__info-container__link-container">
- <span class="hy-list-item__info-container__link__icon">
- <hy-icon icon={'hy-icon-link'} size={15} />
- </span>
- <div class="hy-list-item__info-container__link">{this.url}</div>
- </div>
-
- {this.itemDescription && (
- <div class="hy-list-item__info-container__description">{this.itemDescription}</div>
+ switch (this.variant) {
+ case ListItemVariants.degreeProgramme: {
+ const classImageContainerAttributes = [`hy-list-item__${this.variant}__image-container`].join(' ');
+ const classImageContainerImage = [`hy-list-item__${this.variant}__image-container__image`].join(' ');
+
+ const classInfoContainerAdditionalInfoAttributes = [
+ `hy-list-item__${this.variant}__info-container__additional-info`,
+ `hy-list-item__${this.variant}__info-container__additional-info__${this.headerstyle}`,
+ ].join(' ');
+
+ const classInfoContainerOutgoingLink = [
+ `hy-list-item__${this.variant}__info-container__outgoing-link`,
+ `hy-list-item__${this.variant}__info-container__outgoing-link__${this.headerstyle}`,
+ ].join(' ');
+ const classInfoContainerOutgoingLinkUrl = [
+ `hy-list-item__${this.variant}__info-container__outgoing-link__link`,
+ ].join(' ');
+
+ const classRelatedInfoContainer = [
+ `hy-list-item-wrapper__${this.variant}__related-info`,
+ `hy-list-item-wrapper__${this.variant}__related-info__${this.headerstyle}`,
+ ].join(' ');
+ const classRelatedInfoHeading = [`hy-list-item-wrapper__${this.variant}__related-info__heading`].join(' ');
+ const classRelatedInfoHeadingLink = [`hy-list-item-wrapper__${this.variant}__related-info__heading__link`].join(
+ ' '
+ );
+ const classRelatedInfoHeadingButton = [
+ `hy-list-item-wrapper__${this.variant}__related-info__heading__button`,
+ ].join(' ');
+ const classRelatedInfoHeadingIcon = [`hy-list-item-wrapper__${this.variant}__related-info__heading__icon`].join(
+ ' '
+ );
+ const classRelatedInfoContent = [`hy-list-item-wrapper__${this.variant}__related-info__content`].join(' ');
+ const classRelatedInfoLink = [`hy-list-item-wrapper__${this.variant}__related-info__link`].join(' ');
+
+ const titleAsId =
+ this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0
+ ? `${this.itemTitle}-${this.relatedLinksBlockTitle}`.toLowerCase().replace(/\W/g, '-')
+ : '';
+ const accordionItemHref = '#' + titleAsId + '--title';
+
+ const relatedLinksCount =
+ this.relatedLinksBlockTitle && this.relatedLinksBlockTitle.length > 0 ? this._relatedLinks.length : '';
+
+ return [
+ <article class={classWrapperAttributes}>
+ <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
+ <div class={classImageContainerAttributes}>
+ <div class={classImageContainerImage}>
+ <img
+ aria-hidden="true"
+ alt={this.itemImageAlt}
+ src={this.itemImageUrl}
+ style={{
+ '--minheight': `${this._imageMinHeight}px` as 'minHeight',
+ '--minwidth': `${this._imageMinWidth}px` as 'minWidth',
+ }}
+ />
+ </div>
+ {this.imageLabel && <span>{this.imageLabel}</span>}
+ </div>
+ <div class={classInfoContainerAttributes}>
+ <div class={classInfoContainerDataAttributes}>
+ <div class={classInfoContainerTitle}>{this.itemTitle}</div>
+ {this.itemDescription && <div class={classInfoContainerDescription}>{this.itemDescription}</div>}
+ {this._additionalInfo && (
+ <div class={classInfoContainerAdditionalInfoAttributes}>
+ {this._additionalInfo.map((x) => {
+ let classInfoContainerAdditionalInfoItem = [
+ `hy-list-item__${this.variant}__info-container__additional-info__item`,
+ `hy-list-item__${this.variant}__info-container__additional-info__item__${this.headerstyle}`,
+ `${x.isActive.toString() == 'true' ? 'active' : ''}`,
+ ].join(' ');
+ return <div class={classInfoContainerAdditionalInfoItem}>{x.text}</div>;
+ })}
+ </div>
+ )}
+ </div>
+ <div class={classInfoContainerOutgoingLink}>
+ <a
+ href={this.url}
+ target={target}
+ aria-label={this.scLabel}
+ class={classInfoContainerOutgoingLinkUrl}
+ tabindex="-1"
+ >
+ <span class="label">{this.outGoingUrlLabel}</span>
+ <span class="icon-wrapper">
+ <div class="icon">
+ <hy-icon icon={'hy-icon-arrow-to-right'} size={32} />
+ </div>
+ </span>
+ </a>
+ </div>
+ </div>
+ </a>
+ {this.relatedLinksBlockTitle && (
+ <div class={classRelatedInfoContainer}>
+ <div class={classRelatedInfoHeading}>
+ <a href={accordionItemHref} class={classRelatedInfoHeadingLink} tabindex="-1">
+ <button
+ aria-expanded="false"
+ aria-controls={`${titleAsId}--content`}
+ class={classRelatedInfoHeadingButton}
+ id={`${titleAsId}--title`}
+ >
+ <span class={classRelatedInfoHeadingIcon}>
+ <hy-icon icon={'hy-icon-caret-down'} size={14} />
+ </span>
+ {this.relatedLinksBlockTitle} ({relatedLinksCount})
+ </button>
+ </a>
+ </div>
+ <div
+ class={classRelatedInfoContent}
+ aria-labelledBy={`${titleAsId}--title`}
+ id={`${titleAsId}--content`}
+ role="region"
+ aria-hidden="true"
+ >
+ {this._relatedLinks.map((x) => {
+ let relatedLinkTarget = x.isExternal ? '_blank' : '_self';
+ return (
+ <a class={classRelatedInfoLink} href={x.url} target={target} aria-label={relatedLinkTarget}>
+ {x.label}
+ </a>
+ );
+ })}
+ </div>
+ </div>
)}
- </div>
- </a>
- </article>
- );
+ </article>,
+ ];
+ }
+ default: {
+ return (
+ <article>
+ <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
+ <div class={classInfoContainerAttributes}>
+ <div class={classInfoContainerHeader}>{this.itemType}</div>
+ <div class={classInfoContainerTitle}>{this.itemTitle}</div>
+
+ <div class={classInfoContainerLinkContainer}>
+ <span class={classInfoContainerLinkIcon}>
+ <hy-icon icon={'hy-icon-link'} size={15} />
+ </span>
+ <div class={classInfoContainerLink}>{this.url}</div>
+ </div>
+
+ {this.itemDescription && <div class={classInfoContainerDescription}>{this.itemDescription}</div>}
+ </div>
+ </a>
+ </article>
+ );
+ }
+ }
}
}
diff --git a/src/components/hy-list-item/readme.md b/src/components/hy-list-item/readme.md
index f9f00fefe6f4b29e3f80198a690658facc788399..09e7cfed73dfe4b6aa141947f88846b1ebab8f1d 100644
--- a/src/components/hy-list-item/readme.md
+++ b/src/components/hy-list-item/readme.md
@@ -4,14 +4,23 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------------- | ------------------ | ----------- | --------- | ----------- |
-| `isExternal` | `is-external` | | `boolean` | `false` |
-| `itemDescription` | `item-description` | | `string` | `undefined` |
-| `itemTitle` | `item-title` | | `string` | `undefined` |
-| `itemType` | `item-type` | | `string` | `undefined` |
-| `scLabel` | `sc-label` | | `string` | `undefined` |
-| `url` | `url` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------- | -------------------------- |
+| `additionalInfo` | `additional-info` | | `AdditionalInfo[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `imageLabel` | `image-label` | | `string` | `undefined` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
+| `itemDescription` | `item-description` | | `string` | `undefined` |
+| `itemImageAlt` | `item-image-alt` | | `string` | `undefined` |
+| `itemImageUrl` | `item-image-url` | | `string` | `undefined` |
+| `itemTitle` | `item-title` | | `string` | `undefined` |
+| `itemType` | `item-type` | | `string` | `undefined` |
+| `outGoingUrlLabel` | `out-going-url-label` | | `string` | `'Go to programme page'` |
+| `relatedLinks` | `related-links` | | `RelatedLink[] \| string` | `undefined` |
+| `relatedLinksBlockTitle` | `related-links-block-title` | | `string` | `undefined` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+| `variant` | `variant` | | `ListItemVariants.default \| ListItemVariants.degreeProgramme` | `ListItemVariants.default` |
## Dependencies
diff --git a/src/components/hy-person-card/hy-person-card.scss b/src/components/hy-person-card/hy-person-card.scss
index fabd0b77dde9c3b1082df1a10a9e1021d401e66a..08f7423fe10eae057c666bfb36ea5213cffd308d 100644
--- a/src/components/hy-person-card/hy-person-card.scss
+++ b/src/components/hy-person-card/hy-person-card.scss
@@ -145,6 +145,10 @@
letter-spacing: -0.56px;
margin-bottom: 8px;
}
+
+ &__search-panel {
+ @include font-weight($regular);
+ }
}
&__department {
diff --git a/src/components/hy-person-card/hy-person-card.tsx b/src/components/hy-person-card/hy-person-card.tsx
index 06c191ef82c4e175f4467e09ed27a7979c8edde6..6b15636f4bb873151f73787a94fca330917693e7 100644
--- a/src/components/hy-person-card/hy-person-card.tsx
+++ b/src/components/hy-person-card/hy-person-card.tsx
@@ -39,6 +39,10 @@ export class HyPersonCard {
render() {
const classLinkAttributes = ['hy-person-card-container__link', this.variant].join(' ');
const classAttributes = ['hy-person-card', this.variant].join(' ');
+ const classPositionTitle = [
+ 'hy-person-card__info-container__position-title',
+ `hy-person-card__info-container__position-title__${this.variant}`,
+ ].join(' ');
const target = this.isExternal ? '_blank' : '_self';
return (
@@ -61,9 +65,7 @@ export class HyPersonCard {
</div>
<div class="hy-person-card__info-container">
<div class="hy-person-card__info-container__full-name">{this._fullName}</div>
- {this.positionTitle && (
- <div class="hy-person-card__info-container__position-title">{this.positionTitle}</div>
- )}
+ {this.positionTitle && <div class={classPositionTitle}>{this.positionTitle}</div>}
{this.department && this.variant == PersonCardVariants.default && (
<div class="hy-person-card__info-container__department">{this.department}</div>
)}
diff --git a/src/components/hy-prominent-image/hy-prominent-image.scss b/src/components/hy-prominent-image/hy-prominent-image.scss
index f0fd6ce062f9dc2e87082014fea2cc505dba6f33..5811c729d3f37daea521a48e86301d2552a9bec3 100644
--- a/src/components/hy-prominent-image/hy-prominent-image.scss
+++ b/src/components/hy-prominent-image/hy-prominent-image.scss
@@ -21,7 +21,6 @@
text-transform: uppercase;
@include breakpoint($narrow) {
- // >=480px
// font: h4 small size
@include font-size(18px, 24px);
bottom: 20px;
@@ -33,7 +32,6 @@
}
@include breakpoint($wide) {
- // Applies both to 960px-1200px and 1201-1440px
// font: h4 medium size
@include font-size(22px, 28px);
bottom: 24px;
@@ -42,24 +40,7 @@
padding: 16px 24px;
position: absolute;
}
- @include breakpoint($overwide) {
- // >= 1441px
- // font: h3 medium size
- //@include font-size(26px, 32px);
- //bottom: 28px;
- //left: -16px;
- //letter-spacing: -0.8px;
- //padding: 20px 24px;
- //position: absolute;
- }
- }
-}
-
-// no sidebar
-.hy-prominent-image.large {
- &__text {
- @include breakpoint($overwide) {
- // >= 1441px no sidebar
+ @include breakpoint($xlarge) {
// font: h3 medium size
@include font-size(26px, 32px);
bottom: 28px;
@@ -68,17 +49,17 @@
padding: 20px 24px;
position: absolute;
}
- }
- .hy-prominent-image__text {
- @include breakpoint($overwide) {
- // >= 1441px no sidebar
- // font: h3 medium size
- @include font-size(26px, 32px);
- bottom: 28px;
- left: -16px;
- letter-spacing: -0.8px;
- padding: 20px 24px;
- position: absolute;
+
+ &__large {
+ @include breakpoint($extrawide) {
+ // font: h3 medium size
+ @include font-size(26px, 32px);
+ bottom: 28px;
+ left: -16px;
+ letter-spacing: -0.8px;
+ padding: 20px 24px;
+ position: absolute;
+ }
}
}
}
diff --git a/src/components/hy-prominent-image/hy-prominent-image.tsx b/src/components/hy-prominent-image/hy-prominent-image.tsx
index 9e68adfda9af7b3d1f74e737c72ee4bfce0c4ba9..78c80618830e4b9aa0494f92c7ada7adf08bc697 100644
--- a/src/components/hy-prominent-image/hy-prominent-image.tsx
+++ b/src/components/hy-prominent-image/hy-prominent-image.tsx
@@ -21,14 +21,21 @@ export class HyProminentImage {
}
render() {
- const prominentImageClass = ['hy-prominent-image', this.headerstyle].join(' ');
+ const prominentImageClass = [
+ 'hy-prominent-image',
+ this.headerstyle,
+ `hy-prominent-image__${this.headerstyle}`,
+ ].join(' ');
+
+ const prominentImageText = ['hy-prominent-image__text', `hy-prominent-image__text__${this.headerstyle}`].join(' ');
+
return (
<Host>
<div class={prominentImageClass}>
<div class="hy-prominent-image__image">
<hy-image image-url={this.imageUrl} aspectRatioWidth={2} aspectRatioHeight={1} />
</div>
- {this.textTitle && <div class="hy-prominent-image__text">{this.textTitle}</div>}
+ {this.textTitle && <div class={prominentImageText}>{this.textTitle}</div>}
</div>
</Host>
);
diff --git a/src/components/hy-prominent-image/readme.md b/src/components/hy-prominent-image/readme.md
index 4cf958a610c5d0308148d8f1b9d732d08ddbc5b2..5bbcbd4918ccc402852ee649f2eb3265e8d734cf 100644
--- a/src/components/hy-prominent-image/readme.md
+++ b/src/components/hy-prominent-image/readme.md
@@ -21,6 +21,7 @@
```mermaid
graph TD;
hy-prominent-image --> hy-image
+ hy-image --> hy-box
style hy-prominent-image fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-quote/hy-quote.scss b/src/components/hy-quote/hy-quote.scss
index 8a7c4e83946bc1f8b3e0ace2ee0f87dff1ab18ad..68b0e1c23eec16bbc01af3f4db77bee3c4721a7a 100644
--- a/src/components/hy-quote/hy-quote.scss
+++ b/src/components/hy-quote/hy-quote.scss
@@ -5,7 +5,6 @@
.hy-quote {
display: flex;
flex-direction: row;
-
padding: 0 8px;
@include breakpoint($narrow) {
@@ -28,7 +27,7 @@
margin-right: 24px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
margin-right: 32px;
}
}
@@ -43,7 +42,7 @@
height: 40px;
width: 40px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
height: 48px;
width: 48px;
}
diff --git a/src/components/hy-quote/hy-quote.tsx b/src/components/hy-quote/hy-quote.tsx
index bf12c676607fb08ca1aa22f2bb782de37d64d901..e85d34e14afb24cc79e373ded795ae4e1af61f6d 100644
--- a/src/components/hy-quote/hy-quote.tsx
+++ b/src/components/hy-quote/hy-quote.tsx
@@ -1,4 +1,4 @@
-import {Component, h, Prop} from '@stencil/core';
+import {Component, Element, h, Prop} from '@stencil/core';
@Component({
tag: 'hy-quote',
@@ -7,10 +7,22 @@ import {Component, h, Prop} from '@stencil/core';
})
export class HyQuote {
@Prop() quoteSignature?: string;
+ @Prop() headerstyle: string = 'common';
+ @Element() el: HTMLElement;
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
render() {
+ const quoteClass = ['hy-quote', this.headerstyle, `hy-quote__${this.headerstyle}`].join(' ');
return (
- <div class="hy-quote">
+ <div class={quoteClass}>
<span class="hy-quote__icon-wrapper">
<div class="hy-quote__icon">
<hy-icon icon={'hy-icon-quote'} size={48} />
diff --git a/src/components/hy-quote/readme.md b/src/components/hy-quote/readme.md
index 64a197c9f64b564266c763a2a59bb23aa750d942..e12b62d55db779b5df0037a354762a39e801652e 100644
--- a/src/components/hy-quote/readme.md
+++ b/src/components/hy-quote/readme.md
@@ -6,6 +6,7 @@
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ----------- | -------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `quoteSignature` | `quote-signature` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/hy-shortcuts/hy-shortcuts.tsx b/src/components/hy-shortcuts/hy-shortcuts.tsx
index 6d0cc0f07d4d3cf582cd9d65d9c8133bbd1ff663..a8baf9d6544e8e390e5a64c9d8ddd08a4936b17d 100644
--- a/src/components/hy-shortcuts/hy-shortcuts.tsx
+++ b/src/components/hy-shortcuts/hy-shortcuts.tsx
@@ -5,7 +5,7 @@ export interface ShortcutLinkValue {
ariaLabel: string;
}
-import {Component, ComponentInterface, h, Host, Prop, Watch} from '@stencil/core';
+import {Component, ComponentInterface, Element, h, Host, Prop, Watch} from '@stencil/core';
import {HeadingVarians} from '../../utils/utils';
@Component({
@@ -14,9 +14,11 @@ import {HeadingVarians} from '../../utils/utils';
shadow: false,
})
export class HyShortcuts implements ComponentInterface {
+ @Element() el: HTMLElement;
private _dataItems: ShortcutLinkValue[];
@Prop() dataItems: ShortcutLinkValue[] | string;
@Prop() listHeading: string = '';
+ @Prop() headerstyle: string = 'default';
@Watch('dataItems')
arrayDataWatcher(newValue: ShortcutLinkValue[] | string) {
@@ -30,8 +32,17 @@ export class HyShortcuts implements ComponentInterface {
this.arrayDataWatcher(this.dataItems);
}
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
- const classAttributes = ['hy-shortcuts'].join(' ');
+ const classAttributes = ['hy-shortcuts', `hy-shortcuts__${this.headerstyle}`].join(' ');
const textClassAttributes = ['text'].join(' ');
const iconClassAttributes = ['link-icon'].join(' ');
@@ -69,7 +80,7 @@ export class HyShortcuts implements ComponentInterface {
})}
</div>
</div>
- <hy-box pb="6, 6, 7.5" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/hy-shortcuts/readme.md b/src/components/hy-shortcuts/readme.md
index 024382d5b231ce9bc5eb158405965a0ecf74445d..8daf09908eb2767a3b5da2040541ef5f00bde92c 100644
--- a/src/components/hy-shortcuts/readme.md
+++ b/src/components/hy-shortcuts/readme.md
@@ -7,6 +7,7 @@
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------- | ------------------------------- | ----------- |
| `dataItems` | `data-items` | | `ShortcutLinkValue[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'default'` |
| `listHeading` | `list-heading` | | `string` | `''` |
## Dependencies
@@ -24,6 +25,7 @@ graph TD;
hy-shortcuts --> hy-heading
hy-shortcuts --> hy-icon
hy-shortcuts --> hy-box
+ hy-heading --> hy-box
style hy-shortcuts fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-tabs/hy-tabs.tsx b/src/components/hy-tabs/hy-tabs.tsx
index 5d62b0ef6f78b1db999968d9d78887d5ee23a067..f367752cc893443c51a8dc2636acce595a5905e9 100644
--- a/src/components/hy-tabs/hy-tabs.tsx
+++ b/src/components/hy-tabs/hy-tabs.tsx
@@ -312,10 +312,11 @@ export class HyTabs implements ComponentInterface {
}
render() {
- const classComponentAttributes = ['hy-tabs__container'].join(' ');
+ const classComponentAttributes = ['hy-tabs__container', `hy-tabs__container__${this.headerstyle}`].join(' ');
const id = this.tabId.toLowerCase().replace(/\W/g, '-');
- return (
+ return [
+ <hy-box pt="1.25, 1.25, 1.5, 2.5" />,
<div id={id} class={classComponentAttributes}>
<div class="hy-tablist-container">
<button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true">
@@ -338,7 +339,8 @@ export class HyTabs implements ComponentInterface {
</button>
</div>
<slot></slot>
- </div>
- );
+ </div>,
+ <hy-box mb="1.75, 1.75, 2, 2.5" />,
+ ];
}
}
diff --git a/src/components/hy-tabs/readme.md b/src/components/hy-tabs/readme.md
index 3e1e52b91d2b97b2537d8cb16aee0832bb4b2ea8..80c1ae4faeb6370b5971030374bf58e61b53dbfa 100644
--- a/src/components/hy-tabs/readme.md
+++ b/src/components/hy-tabs/readme.md
@@ -14,12 +14,14 @@
### Depends on
+- [hy-box](../hy-box)
- [hy-icon](../icon)
### Graph
```mermaid
graph TD;
+ hy-tabs --> hy-box
hy-tabs --> hy-icon
style hy-tabs fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-two-columns/hy-two-columns.tsx b/src/components/hy-two-columns/hy-two-columns.tsx
index eed55f39c577bd32dea271a88bdc19db07019d9c..850ac8911af5e860577252bf346db722050cf19d 100644
--- a/src/components/hy-two-columns/hy-two-columns.tsx
+++ b/src/components/hy-two-columns/hy-two-columns.tsx
@@ -21,7 +21,6 @@ export class HyTwoColumns {
<slot name="side"></slot>
</div>
</div>
- <hy-box pb="3, 5, 6" />
</Host>
);
}
diff --git a/src/components/hy-two-columns/readme.md b/src/components/hy-two-columns/readme.md
index f33325bda3634636aff6b23353a9abe4adfdec23..357c8f8f3d9eadab0dffbcbb2a6767fe5a6cf0ac 100644
--- a/src/components/hy-two-columns/readme.md
+++ b/src/components/hy-two-columns/readme.md
@@ -8,20 +8,6 @@
| ---------- | ---------- | ----------- | --------- | ------- |
| `reversed` | `reversed` | | `boolean` | `false` |
-## Dependencies
-
-### Depends on
-
-- [hy-box](../hy-box)
-
-### Graph
-
-```mermaid
-graph TD;
- hy-two-columns --> hy-box
- style hy-two-columns fill:#f9f,stroke:#333,stroke-width:4px
-```
-
---
Helsinki University Design System
diff --git a/src/components/hy-two-columns/test/hy-two-columns.spec.tsx b/src/components/hy-two-columns/test/hy-two-columns.spec.tsx
index 3139fed3cce042f5a5c53280a7b81827c35c6c85..9f22b323821c8ff135ca2719d894f02a40033384 100644
--- a/src/components/hy-two-columns/test/hy-two-columns.spec.tsx
+++ b/src/components/hy-two-columns/test/hy-two-columns.spec.tsx
@@ -21,7 +21,6 @@ describe('hy-two-columns', () => {
<div slot="side"></div>
</div>
</div>
- <hy-box pb="3, 5, 6"></hy-box>
</hy-two-columns>
`);
});
diff --git a/src/components/hy-video/hy-video.scss b/src/components/hy-video/hy-video.scss
index 839e39d6967d0c1c98ca691417698555eb08e56b..8368cefa5a87488689ff3fcf947667fe59a50b83 100644
--- a/src/components/hy-video/hy-video.scss
+++ b/src/components/hy-video/hy-video.scss
@@ -68,7 +68,7 @@
letter-spacing: -0.16px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
@include font-size(32px, 32px);
}
}
@@ -92,7 +92,7 @@
height: 104px;
width: 104px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($xlarge) {
height: 120px;
width: 120px;
}
@@ -163,8 +163,7 @@
padding: 16px 24px;
position: absolute;
}
- @include breakpoint($overwide) {
- // >= 1441px
+ @include breakpoint($xlarge) {
// font: h3 medium size
@include font-size(26px, 32px);
bottom: 28px;
@@ -240,13 +239,13 @@
margin-bottom: 16px;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(16px, 24px);
}
}
.hy-video__meta__label {
- font-weight: 700;
+ @include font-weight($bold);
}
.hy-video__meta__label,
@@ -257,7 +256,7 @@
font-family: var(--main-font-family);
letter-spacing: -0.5px;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
@include font-size(18px, 24px);
letter-spacing: -0.56px;
diff --git a/src/components/hy-video/hy-video.tsx b/src/components/hy-video/hy-video.tsx
index 9726f5e07e4a3a24f87eca54ff881e0821b3ff15..32593a0f352c3fd77fa308a125e35d2c954c0dab 100644
--- a/src/components/hy-video/hy-video.tsx
+++ b/src/components/hy-video/hy-video.tsx
@@ -40,7 +40,16 @@ export class HyVideo {
/** Use horizontal layout where metadata is on side */
@Prop() horizontal: boolean = false;
- @Prop() headerstyle: string = 'with-sidebar';
+ @Prop() headerstyle: string = 'default';
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
renderPreviewWithLink = () => {
return this.linkToVideo ? (
@@ -67,10 +76,10 @@ export class HyVideo {
const classAttributes = [
'hy-video',
this.horizontal ? 'hy-video--horizontal' : '',
- `hy-video--${this.headerstyle}`,
+ `hy-video__${this.headerstyle}`,
].join(' ');
- return (
+ return [
<div class={classAttributes}>
<div class="hy-video__video-container">
{this.previewImageUrl ? (
@@ -116,7 +125,8 @@ export class HyVideo {
<hy-paragraph-text class="hy-video__meta__description">{this.videoDescription}</hy-paragraph-text>
)}
</div>
- </div>
- );
+ </div>,
+ <hy-box mb="1.75, 1.75, 2, 2.5" />,
+ ];
}
}
diff --git a/src/components/hy-video/readme.md b/src/components/hy-video/readme.md
index b8df742528989a4bbbdfe871993f11c31453d283..bfa0fb2f360889c073b0f7203ee5f464cf798c6b 100644
--- a/src/components/hy-video/readme.md
+++ b/src/components/hy-video/readme.md
@@ -4,24 +4,24 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------------- | ----------------------- | -------------------------------------------------- | --------- | ---------------- |
-| `contextLabel` | `context-label` | Context label | `string` | `undefined` |
-| `contextLabelVisible` | `context-label-visible` | Should context label be visible | `boolean` | `false` |
-| `dateAdded` | `date-added` | Date added date as string | `string` | `undefined` |
-| `dateAddedLabel` | `date-added-label` | Label for date added | `string` | `undefined` |
-| `duration` | `duration` | Duration number | `string` | `undefined` |
-| `durationLabel` | `duration-label` | Label for duration number | `string` | `undefined` |
-| `headerstyle` | `headerstyle` | | `string` | `'with-sidebar'` |
-| `horizontal` | `horizontal` | Use horizontal layout where metadata is on side | `boolean` | `false` |
-| `linkToVideo` | `link-to-video` | Url to video, used with preview image | `string` | `undefined` |
-| `playButtonLabel` | `play-button-label` | Label for play button if preview image is provided | `string` | `undefined` |
-| `playButtonVisible` | `play-button-visible` | Should play button be visible | `boolean` | `false` |
-| `previewImageUrl` | `preview-image-url` | Preview image url | `string` | `undefined` |
-| `videoDescription` | `video-description` | Video description | `string` | `undefined` |
-| `videoTitle` | `video-title` | Video title | `string` | `undefined` |
-| `views` | `views` | Views count number | `string` | `undefined` |
-| `viewsLabel` | `views-label` | Label for views number | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| --------------------- | ----------------------- | -------------------------------------------------- | --------- | ----------- |
+| `contextLabel` | `context-label` | Context label | `string` | `undefined` |
+| `contextLabelVisible` | `context-label-visible` | Should context label be visible | `boolean` | `false` |
+| `dateAdded` | `date-added` | Date added date as string | `string` | `undefined` |
+| `dateAddedLabel` | `date-added-label` | Label for date added | `string` | `undefined` |
+| `duration` | `duration` | Duration number | `string` | `undefined` |
+| `durationLabel` | `duration-label` | Label for duration number | `string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'default'` |
+| `horizontal` | `horizontal` | Use horizontal layout where metadata is on side | `boolean` | `false` |
+| `linkToVideo` | `link-to-video` | Url to video, used with preview image | `string` | `undefined` |
+| `playButtonLabel` | `play-button-label` | Label for play button if preview image is provided | `string` | `undefined` |
+| `playButtonVisible` | `play-button-visible` | Should play button be visible | `boolean` | `false` |
+| `previewImageUrl` | `preview-image-url` | Preview image url | `string` | `undefined` |
+| `videoDescription` | `video-description` | Video description | `string` | `undefined` |
+| `videoTitle` | `video-title` | Video title | `string` | `undefined` |
+| `views` | `views` | Views count number | `string` | `undefined` |
+| `viewsLabel` | `views-label` | Label for views number | `string` | `undefined` |
## Dependencies
@@ -30,6 +30,7 @@
- [hy-icon](../icon)
- [hy-heading](../heading)
- [hy-paragraph-text](../paragraph-text)
+- [hy-box](../hy-box)
### Graph
@@ -38,6 +39,9 @@ graph TD;
hy-video --> hy-icon
hy-video --> hy-heading
hy-video --> hy-paragraph-text
+ hy-video --> hy-box
+ hy-heading --> hy-box
+ hy-paragraph-text --> hy-box
style hy-video fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/image/image.spec.tsx b/src/components/image/image.spec.tsx
index 8556d95625d6da22986da393c91dd636ac1e8495..236f8c6729b2d9dff46a0bff2c6d77ed29583d82 100644
--- a/src/components/image/image.spec.tsx
+++ b/src/components/image/image.spec.tsx
@@ -14,6 +14,7 @@ describe('image', () => {
<img class="hy-image__image">
</div>
</div>
+ <hy-box mb="1.75, 1.75, 2, 2.5"></hy-box>
</hy-image>
`);
});
diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
index de663e8e32f95b9408ef0120a0958431c6c65902..e499114bd76998d8d04142a05cae5ff8edcc9d31 100644
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@@ -19,13 +19,14 @@ export class Image implements ComponentInterface {
const aspectRatio = {
'--aspectRatio': `${aspect}%` as 'aspectRatio',
};
- return (
+ return [
<div class={classAttributes}>
<div class="hy-image__image-container" style={aspectRatio}>
<img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} />
</div>
{this.caption && <div class="hy-image__caption">{this.caption}</div>}
- </div>
- );
+ </div>,
+ <hy-box mb="1.75, 1.75, 2, 2.5" />,
+ ];
}
}
diff --git a/src/components/image/readme.md b/src/components/image/readme.md
index e1e51c7f4b8fa7c263ab8790db0225b71f536e07..8d1c01dae4a8f901af83d5cb4b29c6a36b22cc08 100644
--- a/src/components/image/readme.md
+++ b/src/components/image/readme.md
@@ -41,10 +41,15 @@ Defaults to 16/9 aspect ratio if none is provided. Caption is optional.
- [hy-introduction](../hy-introduction)
- [hy-prominent-image](../hy-prominent-image)
+### Depends on
+
+- [hy-box](../hy-box)
+
### Graph
```mermaid
graph TD;
+ hy-image --> hy-box
hy-introduction --> hy-image
hy-prominent-image --> hy-image
style hy-image fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/src/components/ingress/ingress.scss b/src/components/ingress/ingress.scss
index 732d80ae9c144f2df8fadb5f264b5ba733da6873..b9653d45c7ab2a225af65c332400fb85dc3a1f4d 100644
--- a/src/components/ingress/ingress.scss
+++ b/src/components/ingress/ingress.scss
@@ -9,15 +9,19 @@ p.hy-ingress {
letter-spacing: -0.1px;
line-height: 32px;
margin: 0;
- margin-bottom: 3.25rem;
+ margin-bottom: 2rem;
- @include breakpoint($narrow) {
- // > 480px
- margin-bottom: 4.5rem;
+ @include breakpoint($wide) {
+ margin-bottom: 2.25rem;
+ }
+ @include breakpoint($xlarge) {
+ margin-bottom: 3rem;
}
- @include breakpoint($wide) {
- // > 960px
- margin-bottom: 5.5rem;
+ // No sidebar, large desktop styles
+ &__large {
+ @include breakpoint($extrawide) {
+ margin-bottom: 3rem;
+ }
}
}
diff --git a/src/components/ingress/ingress.tsx b/src/components/ingress/ingress.tsx
index 76ea208014c567d187abf048e42644bd78ded24b..030223f9f16edc572a328c23e4b9721929540ae3 100644
--- a/src/components/ingress/ingress.tsx
+++ b/src/components/ingress/ingress.tsx
@@ -1,4 +1,4 @@
-import {Component, h, Host} from '@stencil/core';
+import {Component, Element, h, Host, Prop} from '@stencil/core';
@Component({
tag: 'hy-ingress',
@@ -6,11 +6,23 @@ import {Component, h, Host} from '@stencil/core';
shadow: false,
})
export class Ingress {
+ @Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'common';
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
- const classAttributes = ['hy-ingress'];
+ const classAttributes = ['hy-ingress', `hy-ingress__${this.headerstyle}`].join(' ');
return (
<Host>
- <p class={classAttributes.join(' ')}>
+ <p class={classAttributes}>
<slot></slot>
</p>
</Host>
diff --git a/src/components/ingress/readme.md b/src/components/ingress/readme.md
index a722bb3a5b16afd07a9353bf93c99ff26767e75d..a4c9aa69a216f9fd697555b50362a09d6aee0dbb 100644
--- a/src/components/ingress/readme.md
+++ b/src/components/ingress/readme.md
@@ -2,6 +2,12 @@
<!-- Auto Generated Below -->
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | -------- | ---------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+
---
Helsinki University Design System
diff --git a/src/components/link-box-list/link-box-list.scss b/src/components/link-box-list/link-box-list.scss
index 8f0e3c9290e3dc5dd26447bf7cf8e9b3df28b2fd..79ac11c3dd313269d412da3046b880c7b4e5a56b 100644
--- a/src/components/link-box-list/link-box-list.scss
+++ b/src/components/link-box-list/link-box-list.scss
@@ -7,14 +7,15 @@
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
- margin-right: auto;
- margin-left: auto;
max-width: 30rem;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
display: flex;
justify-content: left;
max-width: 100%;
}
+ @include breakpoint($wide) {
+ margin: 0 auto;
+ }
}
diff --git a/src/components/link-box-list/link-box-list.tsx b/src/components/link-box-list/link-box-list.tsx
index ac12d509775a1d17c2ed83ce4bd92683d14d6f03..353962d30cd34853043592b42ee6fe585c0b27f0 100644
--- a/src/components/link-box-list/link-box-list.tsx
+++ b/src/components/link-box-list/link-box-list.tsx
@@ -8,7 +8,7 @@ export interface LinkBox {
ariaLabel: string;
}
-import {Component, ComponentInterface, Watch, Prop, h, Host} from '@stencil/core';
+import {Component, ComponentInterface, Watch, Prop, h, Host, Element} from '@stencil/core';
import {LinkBoxVariants} from '../../utils/utils';
@Component({
@@ -17,6 +17,8 @@ import {LinkBoxVariants} from '../../utils/utils';
shadow: false,
})
export class LinkBoxList implements ComponentInterface {
+ @Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'common';
@Prop() variant: LinkBoxVariants = LinkBoxVariants.default;
private _dataItems: LinkBox[];
@@ -34,6 +36,15 @@ export class LinkBoxList implements ComponentInterface {
this.arrayDataWatcher(this.dataItems);
}
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
getBoxClassName(count) {
let className = 'small';
@@ -47,7 +58,7 @@ export class LinkBoxList implements ComponentInterface {
}
render() {
- const classAttributes = [this.variant, 'hy-link-box-list'].join(' ');
+ const classAttributes = [this.variant, 'hy-link-box-list', `hy-link-box-list__${this.headerstyle}`].join(' ');
/*
- Logic:
- 3 items: big
@@ -80,7 +91,7 @@ export class LinkBoxList implements ComponentInterface {
);
})}
</div>
- <hy-box pb="3, 5, 6" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/link-box-list/readme.md b/src/components/link-box-list/readme.md
index 9db32ae5f4959ee63ec6ce6ce43d37ce0e036a71..fd237b915d7966b984b80056f1b8489ae57c84d5 100644
--- a/src/components/link-box-list/readme.md
+++ b/src/components/link-box-list/readme.md
@@ -4,10 +4,11 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------- | ------------ | ----------- | -------------------------------------------------------- | ------------------------- |
-| `dataItems` | `data-items` | | `LinkBox[] \| string` | `undefined` |
-| `variant` | `variant` | | `LinkBoxVariants.default \| LinkBoxVariants.landingPage` | `LinkBoxVariants.default` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | -------------------------------------------------------- | ------------------------- |
+| `dataItems` | `data-items` | | `LinkBox[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `variant` | `variant` | | `LinkBoxVariants.default \| LinkBoxVariants.landingPage` | `LinkBoxVariants.default` |
## Dependencies
diff --git a/src/components/pagination/hy-pager-item/hy-pager-item.scss b/src/components/pagination/hy-pager-item/hy-pager-item.scss
index cbc959212dba05da94e938d5c4ca6518b0c12b8c..998d5c76d1f83ac07bbcfcb51d88c8f63ae74d24 100644
--- a/src/components/pagination/hy-pager-item/hy-pager-item.scss
+++ b/src/components/pagination/hy-pager-item/hy-pager-item.scss
@@ -14,7 +14,7 @@
justify-content: center;
letter-spacing: -0.4px;
margin-bottom: 4px;
- margin-right: 8px;
+ margin-right: 4px;
min-height: 36px;
min-width: 36px;
text-align: center;
@@ -44,6 +44,10 @@
min-height: 40px;
min-width: 40px;
}
+
+ &:hover {
+ background-color: var(--brand-main);
+ }
}
&__current {
@@ -52,14 +56,19 @@
border: 2px solid var(--grayscale-black);
a {
color: var(--brand-main-nearly-black);
-
- @include breakpoint($wide) {
- @include font-size(18px, 24px);
- letter-spacing: -0.56px;
+ &:hover {
+ background-color: var(--grayscale-white);
}
}
}
+ &__ellipsis {
+ background-color: var(--grayscale-white);
+ color: var(--brand-main-nearly-black);
+ min-width: auto;
+ min-height: auto;
+ }
+
&__next,
&__previous {
a {
diff --git a/src/components/pagination/hy-pager/hy-pager.scss b/src/components/pagination/hy-pager/hy-pager.scss
index 93bd7b5de625820d777e36818ebc157df8c1aae5..0df206eb60c7554feea63fbf408b3fe058b228fd 100644
--- a/src/components/pagination/hy-pager/hy-pager.scss
+++ b/src/components/pagination/hy-pager/hy-pager.scss
@@ -10,4 +10,5 @@
flex-wrap: wrap;
font-family: var(--main-font-family);
list-style: none;
+ padding: 0;
}
diff --git a/src/components/paragraph-text/paragraph-text-content.scss b/src/components/paragraph-text/paragraph-text-content.scss
index 6edae7cae222b71f65ae2b57fd574c25b96c3651..746c604185e1730abd48eef9c2679cac6fd590e3 100644
--- a/src/components/paragraph-text/paragraph-text-content.scss
+++ b/src/components/paragraph-text/paragraph-text-content.scss
@@ -28,8 +28,8 @@
}
// No sidebar on the Content page
-.hy-paragraph-text.content_page.external.wide,
-.hy-paragraph-text.field_of_science.external.wide {
+.hy-paragraph-text.content_page.external.large,
+.hy-paragraph-text.field_of_science.external.large {
@include breakpoint($extrawide) {
margin-top: 40px; //total gap 64px
}
diff --git a/src/components/paragraph-text/paragraph-text.scss b/src/components/paragraph-text/paragraph-text.scss
index eeb55ff95a04b217f7f0f99a3d8fe494145cccaa..c26d1ac787d11dccc574d59a225bca0010569baf 100644
--- a/src/components/paragraph-text/paragraph-text.scss
+++ b/src/components/paragraph-text/paragraph-text.scss
@@ -16,10 +16,21 @@
@include breakpoint($narrow) {
@include font-size(16px, 24px); // Paragraph Medium size
}
-
@include breakpoint($wide) {
width: 91.46%; // 11 col
}
+ @include breakpoint($xlarge) {
+ width: 82.89%; // 10 col
+ }
+
+ &__large {
+ @include breakpoint($extrawide) {
+ width: 82.89%; // 10 col
+ }
+ @include breakpoint($xlarge) {
+ width: 74.17%; // 9 col
+ }
+ }
h1,
h2,
@@ -56,25 +67,3 @@
padding-top: 0;
}
}
-
-// There is a sidebar on the page
-.hy-paragraph-text.default {
- @include breakpoint($extrawide) {
- width: 91.46%; // 11 col
- }
-
- @include breakpoint($overwide) {
- width: 82.89%; // 10 col
- }
-}
-
-// No sidebar on the page
-.hy-paragraph-text.wide {
- @include breakpoint($extrawide) {
- width: 82.89%; // 10 col
- }
-
- @include breakpoint($overwide) {
- width: 74.17%; // 9 col
- }
-}
diff --git a/src/components/paragraph-text/paragraph-text.tsx b/src/components/paragraph-text/paragraph-text.tsx
index 9f3b4a501721ef7e216798e0e7e82b2b32523682..0875121257c242a40f722581161f20af66aec2c4 100644
--- a/src/components/paragraph-text/paragraph-text.tsx
+++ b/src/components/paragraph-text/paragraph-text.tsx
@@ -19,21 +19,26 @@ export class ParagraphText {
let hyMainDiv = this.el.closest('.hy-main');
if (hyMainDiv) {
if (!hyMainDiv.classList.contains('with-sidebar')) {
- this.headerstyle = 'wide';
+ this.headerstyle = 'large';
}
}
}
render() {
- const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.placement}`, `${this.headerstyle}`].join(
- ' '
- );
+ const classAttributes = [
+ 'hy-paragraph-text',
+ `hy-paragraph-text__${this.headerstyle}`,
+ `${this.variant}`,
+ `${this.placement}`,
+ `${this.headerstyle}`,
+ ].join(' ');
return (
<Host>
<div class={classAttributes}>
<slot></slot>
</div>
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/paragraph-text/readme.md b/src/components/paragraph-text/readme.md
index f763b0bedcb64ce616f5f422a0d7a4d4e0792e5c..c2f3891065e19077a0bf6604813f38d60edbf664 100644
--- a/src/components/paragraph-text/readme.md
+++ b/src/components/paragraph-text/readme.md
@@ -43,10 +43,15 @@ Basic text paragraph.
- [hy-video](../hy-video)
+### Depends on
+
+- [hy-box](../hy-box)
+
### Graph
```mermaid
graph TD;
+ hy-paragraph-text --> hy-box
hy-video --> hy-paragraph-text
style hy-paragraph-text fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/process-flow-box/process-flow-box.tsx b/src/components/process-flow-box/process-flow-box.tsx
index a90b3c661f396032f3c93f22724f41de5c23da7c..cd8e67dbe49a594ac833146b79019d4f83651b6c 100644
--- a/src/components/process-flow-box/process-flow-box.tsx
+++ b/src/components/process-flow-box/process-flow-box.tsx
@@ -53,7 +53,7 @@ export class ProcessFlowBox implements ComponentInterface {
<div class="hy-process-flow-box__description">{this.boxDescription}</div>
</div>
</div>
- <hy-box pb="3, 5, 6" />
+ <hy-box mb="1.75, 1.75, 2, 2.5" />
</Host>
);
}
diff --git a/src/components/process/process.scss b/src/components/process/process.scss
index 059ada45242fe39b2af90301e4313c620314f185..e7e4f2d5e3d0a9e5df28ec7e5e037cc04cdefa2a 100644
--- a/src/components/process/process.scss
+++ b/src/components/process/process.scss
@@ -10,12 +10,11 @@
margin-left: auto;
width: 100%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
display: flex;
flex-wrap: wrap;
justify-content: left;
max-width: 60rem;
- margin-bottom: 30px;
width: 100%;
}
@include breakpoint($wide) {
@@ -27,7 +26,7 @@
.box {
display: block;
margin: 1%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-grow: 1;
max-width: 48%;
padding-bottom: 10px;
@@ -45,7 +44,7 @@
.box {
display: block;
margin: 1%;
- @include breakpoint($medium) {
+ @include breakpoint($narrow) {
flex-grow: 1;
max-width: 48%;
padding-bottom: 10px;
diff --git a/src/components/process/process.tsx b/src/components/process/process.tsx
index f5953af3d7682138c669ddcbd72046b85b7af9b5..172610c158cf67fe34eaac293b3c1b280a495944 100644
--- a/src/components/process/process.tsx
+++ b/src/components/process/process.tsx
@@ -4,17 +4,18 @@ export interface ProcessFlowBoxValue {
step: string;
}
-import {Component, ComponentInterface, Watch, Prop, h} from '@stencil/core';
+import {Component, ComponentInterface, Watch, Prop, h, Element} from '@stencil/core';
import {ProcessFlowBoxVariants} from '../../utils/utils';
@Component({
tag: 'hy-process',
styleUrl: 'process.scss',
- shadow: true
+ shadow: true,
})
export class Process implements ComponentInterface {
+ @Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'common';
@Prop() numberTerm: string;
-
private _dataItems: ProcessFlowBoxValue[];
@Prop() dataItems: ProcessFlowBoxValue[] | string;
@@ -30,6 +31,15 @@ export class Process implements ComponentInterface {
this.arrayDataWatcher(this.dataItems);
}
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
+
render() {
/*
- Logic:
@@ -47,11 +57,11 @@ export class Process implements ComponentInterface {
: ProcessFlowBoxVariants.small;
const itemsPerRow = processVariant == ProcessFlowBoxVariants.small ? 4 : 3;
- const classAttributes = [processVariant, 'hy-process'].join(' ');
+ const classAttributes = [processVariant, 'hy-process', `hy-process__${this.headerstyle}`].join(' ');
const classItem = 'box';
var stepState;
- return (
+ return [
<div class={classAttributes}>
{this._dataItems.map((x, index) => {
index % itemsPerRow == 0 ? (stepState = 'first') : (stepState = 'default');
@@ -68,7 +78,7 @@ export class Process implements ComponentInterface {
/>
);
})}
- </div>
- );
+ </div>,
+ ];
}
}
diff --git a/src/components/process/readme.md b/src/components/process/readme.md
index 18d8685d39d3a4cf45b849ea348f8d6a4c5d8ef7..ae5775524c34ec3b28bc68ca0266ecc1c5e8a82a 100644
--- a/src/components/process/readme.md
+++ b/src/components/process/readme.md
@@ -38,10 +38,11 @@ This process consists of boxes that have
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------ | ------------- | ----------- | --------------------------------- | ----------- |
-| `dataItems` | `data-items` | | `ProcessFlowBoxValue[] \| string` | `undefined` |
-| `numberTerm` | `number-term` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | --------------------------------- | ----------- |
+| `dataItems` | `data-items` | | `ProcessFlowBoxValue[] \| string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `numberTerm` | `number-term` | | `string` | `undefined` |
## Dependencies
diff --git a/src/global/_typography.scss b/src/global/_typography.scss
index 5d5c7235aa92eccf15a61264e9f9a96446e0adf1..240bdad251ba64b514fd35ce2872d6a5f880b781 100644
--- a/src/global/_typography.scss
+++ b/src/global/_typography.scss
@@ -13,6 +13,7 @@ $font-size-xxxx-large: 80px;
$base-font-size: $font-size-base;
// Font weights
+$light: 300;
$regular: 400;
$semibold: 600;
$bold: 700;
diff --git a/src/index.html b/src/index.html
index c422381d7db057255f7f54a1978f45597057e5f8..712a51eeb6041163f155b491cf69315275b91455 100644
--- a/src/index.html
+++ b/src/index.html
@@ -178,48 +178,221 @@
sc-label="Aria label"
></hy-hero>
+ <hy-main-content-wrapper>
+ <hy-accordion-container accordionId="example-mini-accordion-tabs">
+ <hy-accordion-item accordiontitle="This is an H4 accordion title inside an accordion" variant="mini">
+ <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="Here you can see another one" variant="mini">
+ <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="One of them is opened for us to see" variant="mini">
+ <hy-paragraph-text
+ >n pulvinar eleifend convallis. Suspendisse elit erat, venenatis eget ullamcorper ut, laoreet iaculis
+ nisl. Sed porta, felis id rhoncus aliquet, quam ipsum pellentesque metus, in sodales quam nunc vitae
+ risus. Quisque in venenatis massa. Phasellus neque risus, ornare quis nisl ultricies, ullamcorper
+ consectetur orci. Suspendisse rhoncus orci odio, id faucibus ipsum tincidunt nec. Ut eget ante sit amet
+ justo volutpat convallis vitae et augue. Phasellus sagittis cursus fermentum.</hy-paragraph-text
+ >
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="The last similar thing down under" variant="mini">
+ <hy-paragraph-text>Mini Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ </hy-accordion-container>
+
+ <hy-accordion-container accordionId="example-accordion">
+ <hy-accordion-item accordiontitle="This is a accordion item 1 Very long title expanded on the second line">
+ <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-paragraph-text>
+ THIS IS Pagination
+ </hy-paragraph-text>
+ <hy-pager>
+ <hy-pager-item
+ variant="previous"
+ item-label="Previous"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=1"
+ >
+ </hy-pager-item>
+ <hy-pager-item variant="current" item-label="1" item-url="https://helsinki.fi/sv/utbildning/program">
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="2"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=1"
+ sc-aria-label="Go to page 2"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="3"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=2"
+ sc-aria-label="Go to page 3"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="4"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="5"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="6"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="7"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item
+ item-label="8"
+ item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+ sc-aria-label="Go to page 4"
+ >
+ </hy-pager-item>
+ <hy-pager-item variant="ellipsis" item-label="..."> </hy-pager-item>
+ <hy-pager-item variant="next" item-label="Next" item-url="https://helsinki.fi/sv/utbildning/program?page=1">
+ </hy-pager-item>
+ </hy-pager>
+ </hy-main-content-wrapper>
+
<hy-paragraph-text>
- THIS IS Pagination
+ THIS IS MAIN CONTENT
</hy-paragraph-text>
- <hy-pager>
- <hy-pager-item
- variant="previous"
- item-label="Previous"
- item-url="https://helsinki.fi/sv/utbildning/program?page=1"
- >
- </hy-pager-item>
- <hy-pager-item variant="current" item-label="1" item-url="https://helsinki.fi/sv/utbildning/program">
- </hy-pager-item>
- <hy-pager-item
- item-label="2"
- item-url="https://helsinki.fi/sv/utbildning/program?page=1"
- sc-aria-label="Go to page 2"
- >
- </hy-pager-item>
- <hy-pager-item
- item-label="3"
- item-url="https://helsinki.fi/sv/utbildning/program?page=2"
- sc-aria-label="Go to page 3"
- >
- </hy-pager-item>
- <hy-pager-item
- item-label="4"
- item-url="https://helsinki.fi/sv/utbildning/program?page=3"
- sc-aria-label="Go to page 4"
- >
- </hy-pager-item>
- <hy-pager-item variant="ellipsis" item-label="..."> </hy-pager-item>
- <hy-pager-item variant="next" item-label="Next" item-url="https://helsinki.fi/sv/utbildning/program?page=1">
- </hy-pager-item>
- </hy-pager>
<hy-paragraph-text>
- THIS IS MAIN CONTENT
+ This Is Degree Programmes. Bachelor/Master
+ </hy-paragraph-text>
+ <hy-list-item
+ variant="degree"
+ item-title="Agricultural sciences – Master’s programme"
+ item-description="Study Agricultural Sciences and specialise in agrotechnology, animal science, environmental soil science or plant production sciences. University of Helsinki is the only university in Finland to offer academic education in this field."
+ url="https://www.helsinki.fi/en/faculty-of-arts/admissions/apply-to-the-faculty"
+ is-external="true"
+ sc-label="Link opens up in a new tab"
+ item-image-url="https://www.helsinki.fi/sites/default/files/styles/12_7_small/public/agricultural_sciences_0.jpg?itok=fyfKN1bI"
+ item-image-alt="degree image"
+ related-links-block-title="After completion of this bachelor's programme, it is possible to continue in the following master's programmes"
+ related-links='[
+ {"label":"Science – Master’s programme", "url":"https://helsinki.fi", "isExternal":"true","scLabel":"science programme"},
+ {"label":"Agricultural, environmental and resource economics – Master’s programme", "url":"https://helsinki.fi", "isExternal":"true","scLabel":"Agricultural programme"},
+ {"label":"Atmospheric sciences – Master’s programme", "url":"https://helsinki.fi", "isExternal":"true","scLabel":"Atmospheric programme"}
+ ]'
+ image-label="Apply now"
+ out-going-url-label="Go to programme page"
+ additional-info='[
+ {"text":"Submit application by 31 Jan 2021", "isActive":"true"}]'
+ >
+ </hy-list-item>
+ <hy-list-item
+ variant="degree"
+ item-title="Agricultural, environmental and resource economics – Master’s programme"
+ item-description="Combine economics and natural sciences to become a professional in applied economics in agricultural, environmental and resource-focused fields. You will be well versed in topics such as climate policy, sustainable agriculture and food security."
+ url="https://www.helsinki.fi/en/faculty-of-arts/admissions/apply-to-the-faculty"
+ is-external="true"
+ sc-label="Link opens up in a new tab"
+ item-image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+ item-image-alt="degree image"
+ out-going-url-label="Go to programme page"
+ additional-info='[
+ {"text":"Next application period starts 1 Dec 2020", "isActive":"false"}]'
+ >
+ </hy-list-item>
+
+ <hy-paragraph-text>
+ This Is Degree Programmes. Doctoral
+ </hy-paragraph-text>
+ <hy-list-item
+ variant="degree"
+ item-title="Omnipotential sciences – Doctoral programme"
+ item-description="Study Agricultural Sciences and specialise in agrotechnology, animal science, environmental soil science or plant production sciences. University of Helsinki is the only university in Finland to offer academic education in this field."
+ url="https://www.helsinki.fi/en/faculty-of-arts/admissions/apply-to-the-faculty"
+ is-external="true"
+ sc-label="Link opens up in a new tab"
+ item-image-url="https://www.helsinki.fi/sites/default/files/styles/12_7_small/public/agricultural_sciences_0.jpg?itok=fyfKN1bI"
+ item-image-alt="degree image"
+ image-label="Apply now"
+ related-links-block-title="After completion of this bachelor's programme, it is possible to continue in the following master's programmes"
+ related-links='[
+ {"label":"Science – Master’s programme", "url":"https://helsinki.fi", "isExternal":"true","scLabel":"science programme"}
+ ]'
+ out-going-url-label="Go to programme page"
+ additional-info='[
+ {"text":"Application period for doctoral study rights ends 30 Jan 2021", "isActive":"true"},
+ {"text":"Next call for university-funded positions opens 19 Aug 2021", "isActive":"false"}]'
+ >
+ </hy-list-item>
+ <hy-list-item
+ variant="degree"
+ item-title="Omnipotential sciences – Doctoral programme"
+ item-description="Study Agricultural Sciences and specialise in agrotechnology, animal science, environmental soil science or plant production sciences. University of Helsinki is the only university in Finland to offer academic education in this field. Study Agricultural Sciences and specialise in agrotechnology, animal science, environmental soil science or plant production sciences. University of Helsinki is the only university in Finland to offer academic education in this field. Study Agricultural Sciences and specialise in agrotechnology, animal science, environmental soil science or plant production sciences. University of Helsinki is the only university in Finland to offer academic education in this field. Study Agricultural Sciences and specialise in agrotechnology, animal science, environmental soil science or plant production sciences. University of Helsinki is the only university in Finland to offer academic education in this field."
+ url="https://www.helsinki.fi/en/faculty-of-arts/admissions/apply-to-the-faculty"
+ is-external="true"
+ sc-label="Link opens up in a new tab"
+ item-image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+ item-image-alt="degree image"
+ image-label="Apply now"
+ out-going-url-label="Go to programme page"
+ >
+ </hy-list-item>
+ <hy-list-item
+ variant="degree"
+ item-title="Space age material sciences – Doctoral programme"
+ item-description="Do you want to shape the future world and understand how the universe is built up? The core scientific disciplines of math, physics, chemistry and computer science set the basis for all modern technology. In the interdisciplinary programme you get to work on the cutting edge of exciting basic research and application development in all of these subjects.
+Do you want to shape the future world and understand how the universe is built up? The core scientific disciplines of math, physics, chemistry and computer science set the basis for all modern technology. In the interdisciplinary programme you get to work on the cutting edge of exciting basic research and application development in all of these subjects.
+Do you want to shape the future world and understand how the universe is built up? The core scientific disciplines of math, physics, chemistry and computer science set the basis for all modern technology. In the interdisciplinary programme you get to work on the cutting edge of exciting basic research and application development in all of these subjects.
+Do you want to shape the future world and understand how the universe is built up? The core scientific disciplines of math, physics, chemistry and computer science set the basis for all modern technology. In the interdisciplinary programme you get to work on the cutting edge of exciting basic research and application development in all of these subjects."
+ url="https://www.helsinki.fi/en/faculty-of-arts/admissions/apply-to-the-faculty"
+ is-external="true"
+ sc-label="Link opens up in a new tab"
+ item-image-url="https://www.helsinki.fi/sites/default/files/styles/12_7_small/public/agricultural_sciences_0.jpg?itok=fyfKN1bI"
+ item-image-alt="degree image"
+ out-going-url-label="Go to programme page"
+ additional-info='[
+ {"text":"Next application period for doctoral study rights starts 15 Jan 2021", "isActive":"false"},
+ {"text":"Next call for university-funded positions opens 19 Aug 2021", "isActive":"false"}]'
+ >
+ </hy-list-item>
+
+ <hy-paragraph-text>
+ This Is Search Result Items
</hy-paragraph-text>
<hy-box pt="2" pb="2" align="center">
<hy-checkbox checkbox-id="1" checkbox-value="checkbox_1" checkbox-label="Introduction course"></hy-checkbox>
<hy-checkbox checkbox-id="2" checkbox-value="checkbox_2" checkbox-label="Open online course"></hy-checkbox>
+ <hy-checkbox checkbox-id="3" checkbox-value="checkbox_3" checkbox-label="Flexible start"></hy-checkbox>
+ <hy-checkbox
+ checkbox-id="4"
+ checkbox-value="checkbox_4"
+ checkbox-label="Introduction course long text"
+ ></hy-checkbox>
+ <hy-checkbox
+ checkbox-id="5"
+ checkbox-value="checkbox_5"
+ checkbox-label="Open online course very long text"
+ ></hy-checkbox>
+ <hy-checkbox
+ checkbox-id="6"
+ checkbox-value="checkbox_6"
+ checkbox-label="Flexible start long text"
+ ></hy-checkbox>
</hy-box>
<hy-row>
<hy-checkbox
@@ -242,6 +415,23 @@
></hy-checkbox>
</hy-row>
+ <hy-dropdown
+ dropdown-label="Dropdown 1"
+ dropdown-options='[
+ {"id": "1", "label": "Exam 1", "value": "exam_1"},
+ {"id": "2", "label": "Exam 2", "value": "exam_2"},
+ {"id": "3", "label": "Exam 3", "value": "exam_3"}
+ ]'
+ ></hy-dropdown>
+ <hy-dropdown
+ dropdown-label="Dropdown 2"
+ dropdown-options='[
+ {"id": "1", "label": "Exam 1", "value": "exam_1"},
+ {"id": "2", "label": "Exam 2", "value": "exam_2"},
+ {"id": "3", "label": "Exam 3", "value": "exam_3"}
+ ]'
+ ></hy-dropdown>
+
<hy-list-item
item-type="News | 20.12.2020"
item-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit cras dapibus vulputate diam eu pretium"
@@ -261,6 +451,10 @@
>
</hy-list-item>
+ <hy-paragraph-text>
+ This Is Person card info
+ </hy-paragraph-text>
+
<hy-person-card
variant="search-panel"
category-title="People"
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 5b18b9cc6fa44620e05c833c19d5a04f846b4932..a8715385f72e427e41d21c28799e58f8e3afbee7 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -83,6 +83,11 @@ export enum PersonCardVariants {
searchPanel = 'search-panel',
}
+export enum ListItemVariants {
+ default = 'default',
+ degreeProgramme = 'degree',
+}
+
export enum PaginationItemVariants {
default = 'default',
current = 'current',