diff --git a/src/components.d.ts b/src/components.d.ts index 2ed41f52c4b91bb2a49c2a1c1e61560b761a1686..ac648e7961b1cd2d19c102e7520fbc503442a47a 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -438,6 +438,7 @@ export namespace Components { } interface HyParagraphText { headerstyle: string; + placement: string; variant: string; } interface HyProcess { @@ -1298,6 +1299,7 @@ declare namespace LocalJSX { } interface HyParagraphText { headerstyle?: string; + placement?: string; variant?: string; } interface HyProcess { diff --git a/src/components/paragraph-text/paragraph-text-content.scss b/src/components/paragraph-text/paragraph-text-content.scss index 94ed6b7cf4a75438a01e6906c9140509ab77b6f8..225d3b5e45833c3be2b46e432c0942373eca1f74 100644 --- a/src/components/paragraph-text/paragraph-text-content.scss +++ b/src/components/paragraph-text/paragraph-text-content.scss @@ -4,6 +4,15 @@ * Common styles for text plus mobile & tablet & small desktop * in Content Pages and Field of science pages. */ +.hy-paragraph-text.content_page.external, +.hy-paragraph-text.field_of_science.external { + margin-top: 24px; + + @include breakpoint($narrow) { + margin-top: 16px; + } +} + .hy-paragraph-text.content_page, .hy-paragraph-text.field_of_science { h2 { diff --git a/src/components/paragraph-text/paragraph-text.tsx b/src/components/paragraph-text/paragraph-text.tsx index 2f33196493df775521e7956e510da255ac5c65ed..9f3b4a501721ef7e216798e0e7e82b2b32523682 100644 --- a/src/components/paragraph-text/paragraph-text.tsx +++ b/src/components/paragraph-text/paragraph-text.tsx @@ -11,6 +11,7 @@ import {Component, Element, h, Host, Prop} from '@stencil/core'; }) export class ParagraphText { @Prop() variant: string; + @Prop() placement: string = 'internal'; @Prop() headerstyle: string = 'default'; @Element() el: HTMLElement; @@ -24,7 +25,9 @@ export class ParagraphText { } render() { - const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.headerstyle}`].join(' '); + const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.placement}`, `${this.headerstyle}`].join( + ' ' + ); return ( <Host> diff --git a/src/components/paragraph-text/readme.md b/src/components/paragraph-text/readme.md index 7ad35e36fa50f80010a4e378f8973461f0b2ce5a..087bbb76a1ca5b3f5d76648f8f59c43f24e38326 100644 --- a/src/components/paragraph-text/readme.md +++ b/src/components/paragraph-text/readme.md @@ -31,10 +31,11 @@ Basic text paragraph. ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ----------- | -------- | ----------- | -| `headerstyle` | `headerstyle` | | `string` | `'default'` | -| `variant` | `variant` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ----------- | -------- | ------------ | +| `headerstyle` | `headerstyle` | | `string` | `'default'` | +| `placement` | `placement` | | `string` | `'internal'` | +| `variant` | `variant` | | `string` | `undefined` | ---