diff --git a/src/components.d.ts b/src/components.d.ts
index 04cf52eca573579c12437ae5579d335848971b6a..c3fa15cb390e14e957d0b8048612b8a30ba1153a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -63,6 +63,7 @@ export namespace Components {
variant: AccordionVariants;
}
interface HyAdjacentImageText {
+ headerstyle: string;
imageAlt: string;
imageUrl: string;
mainUrl?: string;
@@ -107,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.
*/
@@ -395,7 +417,9 @@ export namespace Components {
imageAlt: string;
imageUrl?: string;
}
- interface HyIngress {}
+ interface HyIngress {
+ headerstyle: string;
+ }
interface HyIntroduction {
headerstyle: string;
imageUrl?: string;
@@ -415,6 +439,7 @@ export namespace Components {
}
interface HyKeyFigureGroup {
dataItems: KeyFigureValue[] | string;
+ headerstyle: string;
}
interface HyKeyHighlight {
description: string;
@@ -423,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;
@@ -451,10 +478,12 @@ export namespace Components {
}
interface HyLinkBoxList {
dataItems: LinkBox[] | string;
+ headerstyle: string;
variant: LinkBoxVariants;
}
interface HyLinkList {
dataItems: CtaLinkValue[] | string;
+ headerstyle: string;
listHeading: string;
}
interface HyListItem {
@@ -647,6 +676,7 @@ export namespace Components {
}
interface HyProcess {
dataItems: ProcessFlowBoxValue[] | string;
+ headerstyle: string;
numberTerm: string;
}
interface HyProcessFlowBox {
@@ -664,6 +694,7 @@ export namespace Components {
textTitle?: string;
}
interface HyQuote {
+ headerstyle: string;
quoteSignature?: string;
}
interface HyRow {
@@ -688,6 +719,7 @@ export namespace Components {
interface HySectionContainer {}
interface HyShortcuts {
dataItems: ShortcutLinkValue[] | string;
+ headerstyle: string;
listHeading: string;
}
interface HySiteHeader {
@@ -1309,6 +1341,7 @@ declare namespace LocalJSX {
variant?: AccordionVariants;
}
interface HyAdjacentImageText {
+ headerstyle?: string;
imageAlt?: string;
imageUrl?: string;
mainUrl?: string;
@@ -1353,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.
*/
@@ -1641,7 +1695,9 @@ declare namespace LocalJSX {
imageAlt?: string;
imageUrl?: string;
}
- interface HyIngress {}
+ interface HyIngress {
+ headerstyle?: string;
+ }
interface HyIntroduction {
headerstyle?: string;
imageUrl?: string;
@@ -1661,6 +1717,7 @@ declare namespace LocalJSX {
}
interface HyKeyFigureGroup {
dataItems?: KeyFigureValue[] | string;
+ headerstyle?: string;
}
interface HyKeyHighlight {
description?: string;
@@ -1669,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;
@@ -1697,10 +1756,12 @@ declare namespace LocalJSX {
}
interface HyLinkBoxList {
dataItems?: LinkBox[] | string;
+ headerstyle?: string;
variant?: LinkBoxVariants;
}
interface HyLinkList {
dataItems?: CtaLinkValue[] | string;
+ headerstyle?: string;
listHeading?: string;
}
interface HyListItem {
@@ -1903,6 +1964,7 @@ declare namespace LocalJSX {
}
interface HyProcess {
dataItems?: ProcessFlowBoxValue[] | string;
+ headerstyle?: string;
numberTerm?: string;
}
interface HyProcessFlowBox {
@@ -1920,6 +1982,7 @@ declare namespace LocalJSX {
textTitle?: string;
}
interface HyQuote {
+ headerstyle?: string;
quoteSignature?: string;
}
interface HyRow {
@@ -1944,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/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-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-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/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