From d6676f0fd30daaf1339241334970bb34474d75be Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <ekaterina.kondareva@helsinki.fi>
Date: Wed, 21 Oct 2020 15:43:42 +0300
Subject: [PATCH] text paragraph: add variant for content and landing page.
Styles should also be divided as common (with sidebar in desktop screens) and
wide (no sidebar in desktop screens)
---
src/components.d.ts | 10 +-
src/components/heading/heading.scss | 2 +-
src/components/heading/readme.md | 2 +-
.../hy-two-columns/hy-two-columns.scss | 3 +
.../paragraph-text-content.scss | 141 ++++++++++++++++++
.../paragraph-text-landing.scss | 97 ++++++++++++
.../paragraph-text/paragraph-text.scss | 128 +++++-----------
.../paragraph-text/paragraph-text.tsx | 26 +++-
src/components/paragraph-text/readme.md | 7 +
src/global/_breakpoints.scss | 13 +-
src/global/_colors.scss | 1 +
11 files changed, 327 insertions(+), 103 deletions(-)
create mode 100644 src/components/paragraph-text/paragraph-text-content.scss
create mode 100644 src/components/paragraph-text/paragraph-text-landing.scss
diff --git a/src/components.d.ts b/src/components.d.ts
index 5fc495d2..9ef7f9f8 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -351,7 +351,10 @@ export namespace Components {
labelBack: string;
labelFrontPage: string;
}
- interface HyParagraphText {}
+ interface HyParagraphText {
+ headerstyle: string;
+ variant: string;
+ }
interface HyProcess {
dataItems: ProcessFlowBoxValue[] | string;
numberTerm: string;
@@ -1091,7 +1094,10 @@ declare namespace LocalJSX {
labelFrontPage?: string;
onRemoveBreadcrumb?: (event: CustomEvent<any>) => void;
}
- interface HyParagraphText {}
+ interface HyParagraphText {
+ headerstyle?: string;
+ variant?: string;
+ }
interface HyProcess {
dataItems?: ProcessFlowBoxValue[] | string;
numberTerm?: string;
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 7e49c1a8..f3f579a7 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -115,7 +115,7 @@ h2.hy-heading__landingsection {
}
@include breakpoint($overwide) {
- // > 1400px
+ // > 1441px
// ex. Side menu layout on Large desktop; Large font
@include font-size(48px, 48px);
letter-spacing: -1.6px;
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
index e9c25eca..5fcc3fc6 100644
--- a/src/components/heading/readme.md
+++ b/src/components/heading/readme.md
@@ -89,7 +89,7 @@ Provide heading attribute for the component to choose what type of heading to us
| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| `headerstyle` | `headerstyle` | | `string` | `"normal"` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `heading` | `heading` | | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default as any` |
| `negative` | `negative` | | `boolean` | `false` |
| `section` | `section` | | `HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection` | `HeadingSectionVariants.default as any` |
diff --git a/src/components/hy-two-columns/hy-two-columns.scss b/src/components/hy-two-columns/hy-two-columns.scss
index 00a6837d..db5c55df 100644
--- a/src/components/hy-two-columns/hy-two-columns.scss
+++ b/src/components/hy-two-columns/hy-two-columns.scss
@@ -59,6 +59,9 @@
[slot='main'] {
width: 100%;
+ .hy-paragraph-text {
+ width: 100% !important;
+ }
}
}
diff --git a/src/components/paragraph-text/paragraph-text-content.scss b/src/components/paragraph-text/paragraph-text-content.scss
new file mode 100644
index 00000000..94ed6b7c
--- /dev/null
+++ b/src/components/paragraph-text/paragraph-text-content.scss
@@ -0,0 +1,141 @@
+//overrides for Content pages
+
+/*
+* Common styles for text plus mobile & tablet & small desktop
+* in Content Pages and Field of science pages.
+*/
+.hy-paragraph-text.content_page,
+.hy-paragraph-text.field_of_science {
+ h2 {
+ // text H2 small
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+ padding-bottom: 40px;
+
+ @include breakpoint($wide) {
+ // text H2 Medium size ?? also for 1200-1440 with sidebar !!!
+ @include font-size(32px, 38px);
+ letter-spacing: -1px;
+
+ padding-bottom: 56px;
+ }
+ }
+
+ h3 {
+ // text H3 small
+ @include font-size(22px, 28px);
+ letter-spacing: -0.7px;
+
+ padding-bottom: 12px;
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ // text H3 Medium size
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+
+ padding-bottom: 12px;
+ padding-top: 28px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 16px;
+ padding-top: 32px;
+ }
+ }
+
+ h4 {
+ // text H4 small
+ @include font-size(18px, 24px);
+ letter-spacing: -0.56px;
+
+ padding-bottom: 12px;
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ // text H4 Medium size
+ @include font-size(22px, 28px);
+ letter-spacing: -0.69px;
+
+ padding-bottom: 12px;
+ padding-top: 28px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 16px;
+ padding-top: 32px;
+ }
+ }
+
+ h5 {
+ // text H5 small
+ @include font-size(16px, 20px);
+ letter-spacing: -0.5px;
+
+ padding-bottom: 12px;
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ // text H5 Medium size
+ @include font-size(18px, 24px);
+ letter-spacing: -0.56px;
+
+ padding-bottom: 12px;
+ padding-top: 28px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 16px;
+ padding-top: 32px;
+ }
+ }
+
+ h6 {
+ // text H6 small
+ @include font-size(14px, 16px);
+ letter-spacing: -0.44px;
+
+ padding-bottom: 12px;
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ // text H6 Medium size
+ @include font-size(16px, 20px);
+ letter-spacing: -0.5px;
+
+ padding-bottom: 12px;
+ padding-top: 28px;
+ }
+
+ @include breakpoint($overwide) {
+ padding-bottom: 16px;
+ padding-top: 32px;
+ }
+ }
+}
+
+// There is a sidebar on the Content page
+.hy-paragraph-text.content_page.default,
+.hy-paragraph-text.field_of_science.default {
+ h2 {
+ @include breakpoint($extrawide) {
+ padding-bottom: 56px;
+ }
+ @include breakpoint($overwide) {
+ padding-bottom: 64px;
+ }
+ }
+}
+
+// No sidebar on the Content page
+.hy-paragraph-text.content_page.wide,
+.hy-paragraph-text.field_of_science.default {
+ h2 {
+ @include breakpoint($extrawide) {
+ padding-bottom: 64px;
+ }
+ @include breakpoint($overwide) {
+ padding-bottom: 64px;
+ }
+ }
+}
diff --git a/src/components/paragraph-text/paragraph-text-landing.scss b/src/components/paragraph-text/paragraph-text-landing.scss
new file mode 100644
index 00000000..d858cee4
--- /dev/null
+++ b/src/components/paragraph-text/paragraph-text-landing.scss
@@ -0,0 +1,97 @@
+//overrides for Landing pages and Front page
+
+// Common styles for text plus mobile & tablet & small desktop in Landing Pages
+.hy-paragraph-text.landing_page,
+.hy-paragraph-text.main_front_page {
+ h3 {
+ // text H3 small
+ @include font-size(22px, 28px);
+ letter-spacing: -0.7px;
+
+ padding-bottom: 12px;
+ padding-top: 32px;
+
+ @include breakpoint($narrow) {
+ // text H3 Medium size
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+
+ padding-bottom: 16px;
+ padding-top: 40px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 16px;
+ padding-top: 48px;
+ }
+ }
+
+ h4 {
+ // text H4 small
+ @include font-size(18px, 24px);
+ letter-spacing: -0.56px;
+
+ padding-bottom: 12px;
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ // text H4 Medium size
+ @include font-size(22px, 28px);
+ letter-spacing: -0.69px;
+
+ padding-bottom: 16px;
+ padding-top: 32px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 16px;
+ padding-top: 40px;
+ }
+ }
+
+ h5 {
+ // text H5 small
+ @include font-size(16px, 20px);
+ letter-spacing: -0.5px;
+
+ padding-bottom: 12px;
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ // text H5 Medium size
+ @include font-size(18px, 24px);
+ letter-spacing: -0.56px;
+
+ padding-bottom: 16px;
+ padding-top: 32px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 16px;
+ padding-top: 40px;
+ }
+ }
+
+ h6 {
+ // text H6 small
+ @include font-size(14px, 16px);
+ letter-spacing: -0.44px;
+
+ padding-bottom: 12px;
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ // text H6 Medium size
+ @include font-size(16px, 20px);
+ letter-spacing: -0.5px;
+
+ padding-bottom: 16px;
+ padding-top: 32px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 16px;
+ padding-top: 40px;
+ }
+ }
+}
diff --git a/src/components/paragraph-text/paragraph-text.scss b/src/components/paragraph-text/paragraph-text.scss
index 33135690..89d6d763 100644
--- a/src/components/paragraph-text/paragraph-text.scss
+++ b/src/components/paragraph-text/paragraph-text.scss
@@ -1,16 +1,24 @@
+@import './paragraph-text-content.scss';
+@import './paragraph-text-landing.scss';
+
:host {
display: block;
}
+// General styles for text paragraph
.hy-paragraph-text {
+ @include font-size(14px, 20px); // Paragraph Small size
color: var(--grayscale-dark);
font-family: var(--main-font-family);
- font-size: 14px;
- line-height: 20px;
+ letter-spacing: 0;
+ width: 100%;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px); // Paragraph Medium size
+ }
- @include breakpoint($medium) {
- font-size: var(--base-font-size);
- line-height: 24px;
+ @include breakpoint($wide) {
+ width: 91.46%; // 11 col
}
h1,
@@ -19,112 +27,54 @@
h4,
h5,
h6 {
- color: var(--brand-main-nearly-black);
+ color: var(--grayscale-black);
font-family: var(--main-font-family);
font-weight: 700;
- padding: 0 0 1rem;
margin: 0;
width: 100%;
- @include breakpoint($medium) {
- padding: 0 0 1.5rem;
- }
-
&.negative {
color: var(--grayscale-white);
}
}
- h1 {
- @include font-size(32px, 32px);
- letter-spacing: -1px;
- text-transform: uppercase;
+ // link within paragraph (Open sans semibold)
+ a {
+ @include font-size(14px, 20px); // Paragraph Small size
+ color: var(--link-blue);
+ font-family: var(--main-font-family);
+ font-weight: 600;
@include breakpoint($narrow) {
- // > 480px
- @include font-size(46px, 52px);
- letter-spacing: -1.5px;
- }
-
- @include breakpoint($extrawide) {
- // > 1200px
- @include font-size(52px, 64px);
- letter-spacing: -1.6px;
- }
-
- @include breakpoint($overwide) {
- // > 1400px
- @include font-size(52px, 64px);
- letter-spacing: -1.6px;
+ @include font-size(16px, 24px);
+ letter-spacing: -0.1px;
}
}
- // default h2 used in content pages
- h2 {
- @include font-size(26px, 32px);
- letter-spacing: -0.8px;
-
- @include breakpoint($narrow) {
- // > 480px
- @include font-size(32px, 32px);
- letter-spacing: -1px;
- }
-
- @include breakpoint($extrawide) {
- // > 1200px
- @include font-size(40px, 48px);
- letter-spacing: -1.2px;
- }
-
- @include breakpoint($overwide) {
- // > 1400px
- @include font-size(40px, 48px);
- letter-spacing: -1.2px;
- }
+ p {
+ margin: 0;
+ padding: 0;
}
+}
- // default h3 used in content pages
- h3 {
- @include font-size(22px, 28px);
- letter-spacing: -0.7px;
-
- @include breakpoint($narrow) {
- // > 480px
- @include font-size(26px, 32px);
- letter-spacing: -0.8px;
- }
+// There is a sidebar on the page
+.hy-paragraph-text.default {
+ @include breakpoint($extrawide) {
+ width: 91.46%; // 11 col
}
- h4 {
- @include font-size(18px, 24px);
- letter-spacing: -0.56px;
-
- @include breakpoint($narrow) {
- // > 480px
- @include font-size(22px, 28px);
- letter-spacing: -0.69px;
- }
+ @include breakpoint($overwide) {
+ width: 82.89%; // 10 col
}
+}
- h5 {
- @include font-size(16px, 20px);
- letter-spacing: -0.5px;
-
- @include breakpoint($narrow) {
- // > 480px
- @include font-size(18px, 24px);
- letter-spacing: -0.56px;
- }
+// No sidebar on the page
+.hy-paragraph-text.wide {
+ @include breakpoint($extrawide) {
+ width: 82.89%; // 10 col
}
- h6 {
- @include font-size(14px, 16px);
- letter-spacing: -0.44px;
-
- @include breakpoint($narrow) {
- // > 480px
- @include font-size(16px, 20px);
- letter-spacing: -0.5px;
- }
+ @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 85fc031a..2f331964 100644
--- a/src/components/paragraph-text/paragraph-text.tsx
+++ b/src/components/paragraph-text/paragraph-text.tsx
@@ -1,16 +1,34 @@
-import {Component, h, Host} from '@stencil/core';
+import {Component, Element, h, Host, Prop} from '@stencil/core';
@Component({
tag: 'hy-paragraph-text',
- styleUrl: 'paragraph-text.scss',
+ styleUrls: {
+ default: 'paragraph-text.scss',
+ content: 'paragraph-text-content.scss',
+ landing: 'paragraph-text-landing.scss',
+ },
shadow: false,
})
export class ParagraphText {
+ @Prop() variant: string;
+ @Prop() headerstyle: string = 'default';
+ @Element() el: HTMLElement;
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'wide';
+ }
+ }
+ }
+
render() {
- const classAttributes = ['hy-paragraph-text'];
+ const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.headerstyle}`].join(' ');
+
return (
<Host>
- <div class={classAttributes.join(' ')}>
+ <div class={classAttributes}>
<slot></slot>
</div>
</Host>
diff --git a/src/components/paragraph-text/readme.md b/src/components/paragraph-text/readme.md
index 33e51e0b..7ad35e36 100644
--- a/src/components/paragraph-text/readme.md
+++ b/src/components/paragraph-text/readme.md
@@ -29,6 +29,13 @@ Basic text paragraph.
<!-- Auto Generated Below -->
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | -------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'default'` |
+| `variant` | `variant` | | `string` | `undefined` |
+
---
Helsinki University Design System
diff --git a/src/global/_breakpoints.scss b/src/global/_breakpoints.scss
index 17684055..7e5feb0c 100644
--- a/src/global/_breakpoints.scss
+++ b/src/global/_breakpoints.scss
@@ -7,10 +7,11 @@
--breakpoint-wide: 60rem; // 960px
}
-$narrow: 30em; // 480px 480-767
-$medium: 48em; // 768px 768-959
-$wide: 60em; // 960px 960-1200 //small desktop
-$extrawide: 75.0625em; // 1201px //mid-size desktop full width lauout
-$overwide: 90.0625rem; // >=1441px
-$fullhd: 120em; // 1920px
+$narrow: 30rem; // 480px 480-767
+$medium: 48rem; // 768px 768-959
+$wide: 60rem; // 960px-1200px; small
+$extrawide: 75.0625rem; // 1201px-1440px; mid-size
+$overwide: 90.0625rem; // 1441px-1600px, large
+$xlarge: 1601px; //1601px-1920px, x-large
+$fullhd: 120.0625rem; // 1921px
$max-width: $overwide;
diff --git a/src/global/_colors.scss b/src/global/_colors.scss
index e0b53e72..40d3a2fc 100644
--- a/src/global/_colors.scss
+++ b/src/global/_colors.scss
@@ -4,6 +4,7 @@
--brand-main-active: #005379;
--brand-main-dark: #003146;
--brand-main-nearly-black: #000222;
+ --link-blue: #0479a5;
--grayscale-white: #fff;
--grayscale-light: #f8f8f8;
--grayscale-medium: #d2d2d2;
--
GitLab