Skip to content
Snippets Groups Projects
Commit a9ad4061 authored by druid's avatar druid
Browse files

link boxes

parent f7d16ce2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/link-box-list/link-box-list.tsx
+ 8
− 2
View file @ a9ad4061
......@@ -58,7 +58,13 @@ export class LinkBoxList implements ComponentInterface {
}
render() {
const classAttributes = [this.variant, 'hy-link-box-list', `hy-link-box-list__${this.headerstyle}`].join(' ');
const classAttributes = [
'hy-link-box-list',
this.variant,
`hy-link-box-list__${this.variant}`,
`hy-link-box-list__${this.headerstyle}`,
].join(' ');
/*
- Logic:
- 3 items: big
......@@ -70,7 +76,7 @@ export class LinkBoxList implements ComponentInterface {
- 9 items: big
* */
const classItem = this.getBoxClassName(this._dataItems.length);
const classItemAttributes = [this.variant, classItem].join(' ');
const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`, classItem].join(' ');
return (
<Host>
......
src/components/link-box/link-box.scss
+ 198
− 60
View file @ a9ad4061
:host {
background: var(--grayscale-background-box);
border: 2px solid purple; //@todo remove before submitting
display: flex;
margin-bottom: 32px;
margin-right: 0;
......@@ -16,23 +17,6 @@
@include breakpoint($extrawide) {
margin-right: var(--gutter-extrawide);
}
.hy-link-box__link {
bottom: 12px;
position: absolute;
right: -6px;
svg {
background-color: var(--brand-main-light);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
fill: var(--grayscale-white);
padding: 10.29px;
}
}
article {
position: relative;
width: 100%;
}
}
:host(.big) {
......@@ -68,6 +52,7 @@
width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 3 + #{var(--gutter-extrawide)} * 2);
}
}
:host(.big:nth-of-type(3n + 0)) {
display: flex;
margin-right: 0;
......@@ -98,13 +83,16 @@
margin-right: 0;
}
.hy-link-box {
text-decoration: none;
.hy-link-box-container {
position: relative;
width: 100%;
@include breakpoint($wide) {
text-align: left;
&:hover {
cursor: pointer;
}
}
.hy-link-box {
&__image-container {
display: flex;
justify-content: stretch;
......@@ -130,52 +118,202 @@
width: 100%;
}
}
}
// placed in Landing pages
.hy-link-box.landing {
.hy-link-box__text-container {
margin-bottom: 68px;
padding: 0 16px;
&__title {
@include font-weight($bold);
@include font-size(40px, 44px);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
letter-spacing: -1.26px;
margin-bottom: 20px;
margin-top: 28px;
// Front and Landing pages
&__landing {
.hy-link-box__text-container {
margin-bottom: 60px;
padding: 0 12px;
@include breakpoint($narrow) {
padding: 0 16px;
}
@include breakpoint($wide) {
padding: 0 12px;
}
@include breakpoint($xlarge) {
padding: 0 16px;
}
&__title {
@include font-size(22px, 28px);
@include font-weight($bold);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
letter-spacing: -0.6px;
margin-bottom: 8px;
// Margin if there is an image above the title
margin-top: 20px;
// Margin if there is no image above the title
&__image {
margin-top: 16px;
}
@include breakpoint($narrow) {
@include font-size(24px, 30px);
color: var(--grayscale-black);
letter-spacing: -0.7px;
}
@include breakpoint($wide) {
margin-top: 24px;
&__image {
margin-top: 18px;
}
}
@include breakpoint($extrawide) {
// with sidebar
&__common {
@include font-size(24px, 30px);
letter-spacing: -0.7px;
}
// without sidebar
&__large {
@include font-size(28px, 36px);
letter-spacing: -0.8px;
margin-bottom: 12px;
margin-top: 32px;
}
&__large.image {
// Margin if there is an image above the title
margin-top: 20px;
}
}
@include breakpoint($xlarge) {
// Both with and without sidebar
@include font-size(28px, 36px);
letter-spacing: -0.8px;
margin-bottom: 12px;
// Margin if there is an image above the title
margin-top: 32px;
// Margin if there is no image above the title
&__image {
margin-top: 20px;
}
}
}
&__description {
@include font-size(14px, 18px);
color: var(--grayscale-dark);
font-family: var(--main-font-family);
letter-spacing: -0.2px;
margin-bottom: 12px;
@include breakpoint($extrawide) {
// with sidebar
&__common {
@include font-size(14px, 18px);
letter-spacing: -0.2px;
}
// without sidebar
&__large {
@include font-size(16px, 22px);
letter-spacing: -0.2px;
}
}
@include breakpoint($xlarge) {
// Both with and without sidebar
@include font-size(16px, 22px);
letter-spacing: -0.2px;
}
}
}
&__description {
@include font-size(20px, 32px);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
letter-spacing: -0.1px;
}
// Content pages
&__content {
.hy-link-box__text-container {
margin-bottom: 60px;
padding: 0 12px;
//20px btw pic and title, 24px above title if no pic
@include breakpoint($narrow) {
padding: 0 16px;
//20px btw pic and title, 24px above title if no pic
}
@include breakpoint($wide) {
padding: 0 12px;
//16px btw pic and title, 24px above title if no pic
}
@include breakpoint($extrawide) {
&__large {
//20px btw pic and title, 32px above title if no pic
}
}
//@todo check title + description styles
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
letter-spacing: -0.5px;
margin-bottom: 8px;
@include breakpoint($extrawide) {
// with sidebar
&__common {
@include font-size(18px, 22px);
letter-spacing: -0.5px;
}
// without sidebar
&__large {
@include font-size(20px, 24px);
letter-spacing: -0.6px;
margin-bottom: 12px;
}
}
@include breakpoint($xlarge) {
// both with and without sidebar
@include font-size(20px, 24px);
letter-spacing: -0.6px;
margin-bottom: 12px;
}
}
&__description {
@include font-size(14px, 18px);
color: var(--grayscale-dark);
font-family: var(--main-font-family);
letter-spacing: -0.2px;
margin-bottom: 10px;
}
}
}
}
// placed in Content pages
.hy-link-box.content {
.hy-link-box__text-container {
margin-bottom: 68px;
padding: 0 12px;
&__title {
@include font-weight($bold);
@include font-size(20px, 26px);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
letter-spacing: -0.63px;
margin-bottom: 11px;
margin-top: 20px;
.hy-link-box-link {
bottom: 12px;
position: absolute;
right: -6px;
svg {
background-color: var(--brand-main);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
fill: var(--grayscale-white);
height: 32px;
padding: 6px;
width: 32px;
}
@include breakpoint($extrawide) {
// without sidebar, Landing MAJOR variation only
&__landing.large {
svg {
height: 40px;
padding: 8px;
width: 40px;
}
}
&__description {
@include font-size(14px, 20px);
color: var(--grayscale-dark);
font-family: var(--main-font-family);
letter-spacing: -0.2px;
}
@include breakpoint($xlarge) {
// MAJOR (Landing and Front pages)
&__landing {
svg {
height: 40px;
padding: 8px;
width: 40px;
}
}
}
}
src/components/link-box/link-box.tsx
+ 54
− 9
View file @ a9ad4061
import {Component, ComponentInterface, Element, Prop, h} from '@stencil/core';
import {Component, ComponentInterface, Element, Prop, h, Listen} from '@stencil/core';
import {LinkBoxVariants} from '../../utils/utils';
let keys = {
enter: 'Enter',
};
@Component({
tag: 'hy-link-box',
styleUrl: 'link-box.scss',
......@@ -27,20 +31,61 @@ export class LinkBox implements ComponentInterface {
}
}
@Listen('click')
handleClick(event) {
this.openLink(event.currentTarget);
}
@Listen('keydown')
handleKeyDown(event) {
const key = (event as KeyboardEvent).code;
if (key == keys.enter) {
this.openLink(event.currentTarget);
}
}
openLink(linkbox) {
let card = linkbox.shadowRoot.querySelector('.hy-link-box-container');
window.open(card.dataset.location, card.dataset.target);
}
render() {
const classContainerAttributes = ['hy-link-box-container'].join(' ');
const classAttributes = [
'hy-link-box',
this.variant,
`hy-link-box__${this.variant}`,
this.headerstyle,
`hy-link-box__${this.headerstyle}`,
this.imageUrl ? 'hy-link-box--with-image' : null,
].join(' ');
const classLinkAttributes = ['hy-link-box__link', this.headerstyle].join(' ');
const classLinkAttributes = [
'hy-link-box-link',
`hy-link-box-link__${this.variant}`,
`hy-link-box-link__${this.headerstyle}`,
this.headerstyle,
].join(' ');
const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
' '
);
const classTitle = [
'hy-link-box__text-container__title',
`hy-link-box__text-container__title__${this.variant}`,
`hy-link-box__text-container__title__${this.headerstyle}`,
this.imageUrl ? 'hy-link-box__text-container__title__image' : '',
this.imageUrl ? 'image' : '',
].join(' ');
const classDescription = [
'hy-link-box__text-container__description',
`hy-link-box__text-container__description__${this.variant}`,
`hy-link-box__text-container__description__${this.headerstyle}`,
].join(' ');
const target = this.isExternal ? '_blank' : '_self';
const aspectRatioWidth = 16;
......@@ -51,22 +96,22 @@ export class LinkBox implements ComponentInterface {
};
return [
<article>
<a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
<article class={classContainerAttributes} tabindex="0" data-target={target} data-location={this.url}>
<div class={classAttributes} aria-label={this.scLabel}>
{this.imageUrl && (
<div class="hy-link-box__image-container" style={aspectRatio}>
<img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
</div>
)}
<div class={classTextContainer}>
<h3 class="hy-link-box__text-container__title">{this.textTitle}</h3>
{this.textDescription && <div class="hy-link-box__text-container__description">{this.textDescription}</div>}
<h3 class={classTitle}>{this.textTitle}</h3>
{this.textDescription && <div class={classDescription}>{this.textDescription}</div>}
</div>
</div>
<a class={classLinkAttributes} href={this.url} target={target} aria-label={this.scLabel} tabindex="-1">
<hy-icon icon={'hy-icon-arrow-right'} size={32} />
</a>
</article>,
<div class={classLinkAttributes} aria-hidden="true">
<hy-icon icon={'hy-icon-arrow-right'} size={48} />
</div>,
];
}
}
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