From 2bf6eb2dda1873f23a609a31f17a584cbf06cc18 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Thu, 29 Oct 2020 21:16:30 +0200
Subject: [PATCH] text paragraph, styles for content page text paragraph with
respect to if it is external or internal
---
src/components.d.ts | 2 ++
.../paragraph-text/paragraph-text-content.scss | 9 +++++++++
src/components/paragraph-text/paragraph-text.tsx | 5 ++++-
src/components/paragraph-text/readme.md | 9 +++++----
4 files changed, 20 insertions(+), 5 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 2ed41f52..ac648e79 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 94ed6b7c..225d3b5e 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 2f331964..9f3b4a50 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 7ad35e36..087bbb76 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` |
---
--
GitLab