From 2494d8796da606ddb031c5a7ccc8cda49522c84b Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Mon, 22 Feb 2021 14:42:02 +0200
Subject: [PATCH] Update hy-general-list component
---
.../hy-general-list-item.scss | 136 ++++++++++++------
.../hy-general-list-item.tsx | 47 +++---
.../hy-general-list/hy-general-list.scss | 6 +
.../hy-general-list/hy-general-list.tsx | 46 +++---
4 files changed, 135 insertions(+), 100 deletions(-)
diff --git a/src/components/hy-general-list-item/hy-general-list-item.scss b/src/components/hy-general-list-item/hy-general-list-item.scss
index f3fa4811..38314b5e 100644
--- a/src/components/hy-general-list-item/hy-general-list-item.scss
+++ b/src/components/hy-general-list-item/hy-general-list-item.scss
@@ -3,11 +3,15 @@
}
.hy-general-list-item {
+ font-family: var(--main-font-family);
+ margin-bottom: 1rem;
+}
+
+.hy-general-list-item__link {
display: flex;
flex-direction: column;
- font-family: var(--main-font-family);
position: relative;
- margin-bottom: 1rem;
+ text-decoration: none;
@include breakpoint($narrow) {
flex-direction: row;
@@ -17,68 +21,106 @@
cursor: pointer;
}
- &__image-container {
- display: flex;
- flex: 1;
- justify-content: stretch;
- min-height: 2rem;
- position: relative;
-
- @include breakpoint($narrow) {
- flex-basis: 33.3%;
+ &:hover,
+ &:focus {
+ .hy-general-list-item__type {
+ background-color: var(--brand-main);
}
- img {
- height: 100%;
- object-fit: cover;
- width: 100%;
+ .hy-general-list-item__title {
+ color: var(--brand-main);
+ text-decoration: underline;
}
}
+}
- &__text-container {
- background: var(--grayscale-background-box);
- display: flex;
- flex: 1;
- flex-direction: column;
- padding: 1rem;
+.hy-general-list-item__image-container {
+ display: flex;
+ justify-content: stretch;
+ margin: 0;
+ position: relative;
+ width: 100%;
- @include breakpoint($narrow) {
- flex-basis: 66.6%;
- padding: 1.375rem 2rem;
- }
+ @include breakpoint($narrow) {
+ max-width: 35.7%;
}
- &--image {
- background-color: #ececec;
- border: 1px solid red;
- width: 100%;
+ @include breakpoint($wide) {
+ max-width: 23.13%;
+ }
+
+ @include breakpoint($extrawide) {
+ max-width: 23.03%;
+ }
+
+ img {
height: 100%;
+ object-fit: cover;
+ width: 100%;
}
+}
- &--label {
- @include font-size(12px, 14px);
- @include font-weight($bold);
- background-color: var(--grayscale-black);
- color: #ffffff;
- letter-spacing: -0.1px;
- padding: 5px 8px;
- position: absolute;
- top: 16px;
- left: -8px;
- text-transform: uppercase;
+.hy-general-list-item__image {
+ background-color: #ececec;
+ width: 100%;
+ height: 100%;
+}
+
+.hy-general-list-item__type {
+ @include font-size(12px, 14px);
+ @include font-weight($bold);
+ background-color: var(--grayscale-black);
+ color: #ffffff;
+ left: -8px;
+ letter-spacing: -0.1px;
+ padding: 5px 8px;
+ position: absolute;
+ text-transform: uppercase;
+ top: 16px;
+}
+
+.hy-general-list-item__text-container {
+ background-color: var(--grayscale-background-box);
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ padding: 16px 12px;
+
+ @include breakpoint($wide) {
+ padding: 14px 32px 24px 24px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding: 20px 104px 32px 32px;
}
+}
+
+.hy-general-list-item__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ color: var(--brand-main-nearly-black);
+ letter-spacing: -0.45px;
+ margin-bottom: 8px;
+ margin-top: 0;
- &--title {
+ @include breakpoint($extrawide) {
@include font-size(20px, 24px);
- @include font-weight($bold);
- color: var(--brand-main-nearly-black);
letter-spacing: -0.5px;
- padding-bottom: 10px;
}
+}
- &--description {
- @include font-size(14px, 20px);
- color: var(--grayscale-dark);
+.hy-general-list-item__description {
+ @include font-size(15px, 20px);
+ color: var(--grayscale-dark);
+ letter-spacing: -0.09px;
+ margin: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(14px, 18px);
letter-spacing: -0.08px;
}
+
+ @include breakpoint($extrawide) {
+ @include font-size(14px, 20px);
+ }
}
diff --git a/src/components/hy-general-list-item/hy-general-list-item.tsx b/src/components/hy-general-list-item/hy-general-list-item.tsx
index d495b257..2c84d70c 100644
--- a/src/components/hy-general-list-item/hy-general-list-item.tsx
+++ b/src/components/hy-general-list-item/hy-general-list-item.tsx
@@ -10,34 +10,21 @@ let keys = {
shadow: true,
})
export class HyGeneralListItem {
- @Prop() itemTitle?: string;
@Prop() description?: string;
+ @Prop() imageAlt: string = '';
+ @Prop() imageUrl: string = null;
+ @Prop() itemTitle?: string;
@Prop() label?: string;
- @Prop() url?: string;
@Prop() type?: string;
- @Prop() imageUrl: string = null;
- @Prop() imageAlt: string = '';
+ @Prop() url?: string;
@Element() el: HTMLElement;
- @Listen('keydown')
- handleKeyDown(event) {
- const key = (event as KeyboardEvent).code;
- if (key == keys.enter) {
- let card = this.el;
- window.open(card.dataset.location, '_blank');
- }
- }
-
render() {
const classAttributes = ['hy-general-list-item'].join(' ');
-
const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');
-
const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');
- //const target = '_blank';
- //const ariaLabel = 'Link points outside the current website.';
const aspectRatioWidth = 16;
const aspectRatioHeight = 10;
const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
@@ -45,17 +32,19 @@ export class HyGeneralListItem {
'--aspectRatio': `${aspect}%` as 'aspectRatio',
};
- return [
- <div class={classAttributes} tabindex="0">
- <div class={imageClassAttributes} style={aspectRatio}>
- <img alt={this.imageAlt} class="hy-general-list-item--image" src={this.imageUrl} />
- <div class="hy-general-list-item--label">{this.label}</div>
- </div>
- <div class={contentClassAttributes}>
- <div class="hy-general-list-item--title">{this.itemTitle}</div>
- <div class="hy-general-list-item--description">{this.description}</div>
- </div>
- </div>,
- ];
+ return (
+ <article class={classAttributes}>
+ <a class="hy-general-list-item__link" href={this.url} target="_blank">
+ <figure class={imageClassAttributes} style={aspectRatio}>
+ <img alt={this.imageAlt} class="hy-general-list-item__image" src={this.imageUrl} />
+ <span class="hy-general-list-item__type">{this.label}</span>
+ </figure>
+ <div class={contentClassAttributes}>
+ <h3 class="hy-general-list-item__title">{this.itemTitle}</h3>
+ <p class="hy-general-list-item__description">{this.description}</p>
+ </div>
+ </a>
+ </article>
+ );
}
}
diff --git a/src/components/hy-general-list/hy-general-list.scss b/src/components/hy-general-list/hy-general-list.scss
index 5d4e87f3..cd22a3a3 100644
--- a/src/components/hy-general-list/hy-general-list.scss
+++ b/src/components/hy-general-list/hy-general-list.scss
@@ -1,3 +1,9 @@
:host {
display: block;
}
+
+.hy-general-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
diff --git a/src/components/hy-general-list/hy-general-list.tsx b/src/components/hy-general-list/hy-general-list.tsx
index 011ff501..037bf9b5 100644
--- a/src/components/hy-general-list/hy-general-list.tsx
+++ b/src/components/hy-general-list/hy-general-list.tsx
@@ -1,9 +1,11 @@
export interface ListItemValue {
+ description: string;
id: string;
+ imageAlt: string;
+ imageUrl: string;
label: string;
- type: string;
title: string;
- description: string;
+ type: string;
url: string;
}
@@ -32,31 +34,27 @@ export class HyGeneralList {
this.arrayDataWatcher(this.dataItems);
}
- handleCardClick(id) {
- let card = this.el.shadowRoot.querySelectorAll('#' + id)[0] as HTMLElement;
- window.open(card.dataset.location, '_blank');
- }
-
render() {
const classAttributes = ['hy-general-list'].join(' ');
- return [
- <div class={classAttributes}>
- {this._dataItems.map((x) => {
- return [
+ return (
+ <ul class={classAttributes}>
+ {this._dataItems.map((item) => (
+ <li>
<hy-general-list-item
- id={x.id}
- item-title={x.title}
- description={x.description}
- label={x.label}
- url={x.url}
- type={x.type}
- data-location={x.url}
- onClick={() => this.handleCardClick(x.id)}
- ></hy-general-list-item>,
- ];
- })}
- </div>,
- ];
+ data-location={item.url}
+ description={item.description}
+ id={item.id}
+ imageAlt={item.imageAlt}
+ imageUrl={item.imageUrl}
+ item-title={item.title}
+ label={item.label}
+ type={item.type}
+ url={item.url}
+ ></hy-general-list-item>
+ </li>
+ ))}
+ </ul>
+ );
}
}
--
GitLab