Skip to content
Snippets Groups Projects
Commit af68a8d0 authored by Ekaterina Kondareva's avatar Ekaterina Kondareva Committed by Tuukka Turu
Browse files

Nxstage 579 key highlights update

parent 03c9188c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 51 additions and 93 deletions
src/components/hy-key-figure-group/hy-key-figure-group.tsx
+ 1
− 1
View file @ af68a8d0
......@@ -9,7 +9,7 @@ import {KeyHighlightVariants} from '../../utils/utils';
@Component({
tag: 'hy-key-figure-group',
styleUrl: 'hy-key-figure-group.scss',
shadow: true,
shadow: false,
})
export class HyKeyFigureGroup implements ComponentInterface {
private _dataItems: KeyFigureValue[];
......
src/components/hy-key-figure-group/test/hy-key-figure-group.spec.tsx deleted 100644 → 0
+ 0
− 23
View file @ 03c9188c
import {newSpecPage} from '@stencil/core/testing';
import {HyKeyFigureGroup} from '../hy-key-figure-group';
describe('hy-key-figure-group', () => {
it('renders', async () => {
const page = await newSpecPage({
components: [HyKeyFigureGroup],
html: `<hy-key-figure-group data-items='[{"heading":"a","description":"b"}]'></hy-key-figure-group>`,
});
expect(page.root).toEqualHtml(`
<hy-key-figure-group data-items="[{&quot;heading&quot;:&quot;a&quot;,&quot;description&quot;:&quot;b&quot;}]">
<mock:shadow-root>
<div class="big hy-key-figure-group-container">
<div class="hy-key-figure-group">
<hy-key-figure class="box" description="b" heading="a" variant="big"></hy-key-figure>
</div>
</div>
<hy-box pb="3, 5, 6"></hy-box>
</mock:shadow-root>
</hy-key-figure-group>
`);
});
});
src/components/hy-key-highlight-group/hy-key-highlight-group.scss
+ 30
− 26
View file @ af68a8d0
......@@ -2,50 +2,54 @@
display: block;
}
.hy-key-highlight-group-container {
overflow: hidden;
}
.hy-key-highlight-group {
display: block;
justify-content: center;
max-width: 30rem;
margin-right: auto;
margin-left: auto;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
@include breakpoint($medium) {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
flex-direction: row;
margin: 0 calc(-1 * var(--gutter-medium));
}
@include breakpoint($wide) {
justify-content: left;
margin: 0 calc(-1 * var(--gutter-wide));
}
.box,
.box-4 {
flex: none;
padding: 0;
padding: 0 50px 0 20px;
@include breakpoint($medium) {
flex: 1;
padding-right: 22px;
padding: 0 var(--gutter-medium);
}
@include breakpoint($wide) {
flex: 1;
padding-right: 22px;
padding: 0 var(--gutter-wide);
}
}
.box-4 {
// 3 key highlights in a row
.box {
width: 100%;
@include breakpoint($medium) {
flex: none;
flex-grow: 1;
max-width: 49%;
padding-right: 22px;
width: 49%;
width: 33.33%;
max-width: 33.33%;
}
}
}
.hy-key-highlight-block::after {
clear: both;
// 4 key highlights in a row
.box-4 {
width: 100%;
@include breakpoint($medium) {
width: 50%;
max-width: 50%;
}
@include breakpoint($wide) {
width: 25%;
}
}
}
src/components/hy-key-highlight-group/test/hy-key-highlight-group.spec.tsx deleted 100644 → 0
+ 0
− 21
View file @ 03c9188c
import {newSpecPage} from '@stencil/core/testing';
import {HyKeyHighlightGroup} from '../hy-key-highlight-group';
describe('hy-key-highlight-group', () => {
it('renders', async () => {
const page = await newSpecPage({
components: [HyKeyHighlightGroup],
html: `<hy-key-highlight-group data-items='[{"heading":"a","description":"b"}]'></hy-key-highlight-group>`,
});
expect(page.root).toEqualHtml(`
<hy-key-highlight-group data-items="[{&quot;heading&quot;:&quot;a&quot;,&quot;description&quot;:&quot;b&quot;}]">
<mock:shadow-root>
<div class="big hy-key-highlight-group">
<hy-key-highlight class="box" description="b" heading="a" variant="big"></hy-key-highlight>
</div>
<hy-box pb="3, 5, 6"></hy-box>
</mock:shadow-root>
</hy-key-highlight-group>
`);
});
});
src/components/hy-key-highlight/hy-key-highlight.scss
+ 6
− 4
View file @ af68a8d0
......@@ -7,8 +7,6 @@
width: 100%;
@include breakpoint($medium) {
display: flex;
flex-direction: column;
width: 100%;
}
......@@ -21,6 +19,9 @@
text-align: left;
}
}
&__title__container::after {
clear: both;
}
&__title,
&__overlay {
......@@ -30,9 +31,10 @@
display: inline;
font-family: var(--main-font-family);
letter-spacing: -0.75px;
padding: 4px 10px;
padding: 0 10px;
position: relative;
text-align: center;
text-transform: uppercase;
z-index: 1;
@include breakpoint($medium) {
......@@ -64,7 +66,7 @@
color: var(--grayscale-dark);
font-family: var(--main-font-family);
letter-spacing: 0;
margin-top: 12px;
margin-top: 8px;
text-align: center;
@include breakpoint($medium) {
......
src/index.html
+ 14
− 18
View file @ af68a8d0
......@@ -20,7 +20,8 @@
{"heading":"Example link label three", "url":"https://yle.fi"}]'
>
</hy-shortcuts>
test
<hy-key-highlight-group data-items='[{"heading":"a","description":"b"}]'></hy-key-highlight-group>
<section>
<a href="#this-is-an-accordion-item-3--title">Click here to go to Accordion Item 3</a>
</section>
......@@ -47,26 +48,21 @@
<a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
</section>
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
url="#this-is-an-accordion-item-2--title"
url-title="Show list of conferences"
sc-label="List of conferences"
<hy-key-highlight-group
variant="big"
data-items='[{"heading":"Key Highlight title","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
{"heading":"Onnea uudet opiskelijat","description":"Key Highlight description text"},
{"heading":"Key Highlight title","description":"Key Highlight description text"}]'
>
</hy-banner>
<section>
<a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
</section>
</hy-key-highlight-group>
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
url="#this-is-an-accordion-item-2--title"
url-title="Show list of conferences"
sc-label="List of conferences"
<hy-key-highlight-group
variant="small"
data-items='[{"heading":"Key Highlight title","description":"Key Highlight description text"},
{"heading":"Key Highlight title","description":"Key Highlight description text"},
{"heading":"Key Highlight title","description":"Kaikista maistereista työllistyi omalle alalleen vuoden sisällä valmistumisesta"}]'
>
</hy-banner>
</hy-key-highlight-group>
<hy-accordion-container accordionId="example-accordion">
<hy-accordion-item accordiontitle="This is an accordion item 1">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment