From d7b21937870651b05cb98a08cbf6e8976201d805 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <ekaterina.kondareva@helsinki.fi>
Date: Tue, 15 Dec 2020 13:23:18 +0200
Subject: [PATCH] list-item that can represent search result item, with styles.
---
src/components.d.ts | 24 ++++++
src/components/hy-list-item/hy-list-item.scss | 84 +++++++++++++++++++
src/components/hy-list-item/hy-list-item.tsx | 42 ++++++++++
src/components/hy-list-item/readme.md | 32 +++++++
src/components/icon/icon.tsx | 1 +
src/components/icon/readme.md | 2 +
src/index.html | 19 +++++
7 files changed, 204 insertions(+)
create mode 100644 src/components/hy-list-item/hy-list-item.scss
create mode 100644 src/components/hy-list-item/hy-list-item.tsx
create mode 100644 src/components/hy-list-item/readme.md
diff --git a/src/components.d.ts b/src/components.d.ts
index 082bbc9f..a759db31 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -438,6 +438,14 @@ export namespace Components {
dataItems: CtaLinkValue[] | string;
listHeading: string;
}
+ interface HyListItem {
+ isExternal: boolean;
+ itemDescription?: string;
+ itemTitle?: string;
+ itemType?: string;
+ scLabel?: string;
+ url?: string;
+ }
interface HyMain {
hasSidebar: boolean;
}
@@ -1005,6 +1013,11 @@ declare global {
prototype: HTMLHyLinkListElement;
new (): HTMLHyLinkListElement;
};
+ interface HTMLHyListItemElement extends Components.HyListItem, HTMLStencilElement {}
+ var HTMLHyListItemElement: {
+ prototype: HTMLHyListItemElement;
+ new (): HTMLHyListItemElement;
+ };
interface HTMLHyMainElement extends Components.HyMain, HTMLStencilElement {}
var HTMLHyMainElement: {
prototype: HTMLHyMainElement;
@@ -1206,6 +1219,7 @@ declare global {
'hy-link-box': HTMLHyLinkBoxElement;
'hy-link-box-list': HTMLHyLinkBoxListElement;
'hy-link-list': HTMLHyLinkListElement;
+ 'hy-list-item': HTMLHyListItemElement;
'hy-main': HTMLHyMainElement;
'hy-main-content-wrapper': HTMLHyMainContentWrapperElement;
'hy-menu': HTMLHyMenuElement;
@@ -1628,6 +1642,14 @@ declare namespace LocalJSX {
dataItems?: CtaLinkValue[] | string;
listHeading?: string;
}
+ interface HyListItem {
+ isExternal?: boolean;
+ itemDescription?: string;
+ itemTitle?: string;
+ itemType?: string;
+ scLabel?: string;
+ url?: string;
+ }
interface HyMain {
hasSidebar?: boolean;
}
@@ -2002,6 +2024,7 @@ declare namespace LocalJSX {
'hy-link-box': HyLinkBox;
'hy-link-box-list': HyLinkBoxList;
'hy-link-list': HyLinkList;
+ 'hy-list-item': HyListItem;
'hy-main': HyMain;
'hy-main-content-wrapper': HyMainContentWrapper;
'hy-menu': HyMenu;
@@ -2092,6 +2115,7 @@ declare module '@stencil/core' {
'hy-link-box': LocalJSX.HyLinkBox & JSXBase.HTMLAttributes<HTMLHyLinkBoxElement>;
'hy-link-box-list': LocalJSX.HyLinkBoxList & JSXBase.HTMLAttributes<HTMLHyLinkBoxListElement>;
'hy-link-list': LocalJSX.HyLinkList & JSXBase.HTMLAttributes<HTMLHyLinkListElement>;
+ 'hy-list-item': LocalJSX.HyListItem & JSXBase.HTMLAttributes<HTMLHyListItemElement>;
'hy-main': LocalJSX.HyMain & JSXBase.HTMLAttributes<HTMLHyMainElement>;
'hy-main-content-wrapper': LocalJSX.HyMainContentWrapper &
JSXBase.HTMLAttributes<HTMLHyMainContentWrapperElement>;
diff --git a/src/components/hy-list-item/hy-list-item.scss b/src/components/hy-list-item/hy-list-item.scss
new file mode 100644
index 00000000..f67c9792
--- /dev/null
+++ b/src/components/hy-list-item/hy-list-item.scss
@@ -0,0 +1,84 @@
+:host {
+ display: block;
+}
+
+.hy-list-item {
+ display: flex;
+ font-family: var(--main-font-family);
+ margin-bottom: 28px;
+ text-decoration: none;
+
+ @include breakpoint($wide) {
+ margin-bottom: 32px;
+ }
+
+ &__info-container {
+ &__header {
+ @include font-size(12px, 14px);
+ color: var(--grayscale-dark);
+ letter-spacing: 0;
+ margin-bottom: 4px;
+
+ @include breakpoint($narrow) {
+ @include font-size(14px, 18px);
+ margin-bottom: 2px;
+ }
+ }
+
+ &__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ color: var(--brand-main-light);
+ letter-spacing: -0.56px;
+ margin-bottom: 6px;
+
+ @include breakpoint($narrow) {
+ @include font-size(22px, 28px);
+ letter-spacing: -0.69px;
+ margin-bottom: 10px;
+ }
+ @include breakpoint($fullhd) {
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+ margin-bottom: 8px;
+ }
+ }
+
+ &__link-container {
+ align-items: center;
+ display: flex;
+ margin-bottom: 6px;
+
+ @include breakpoint($narrow) {
+ margin-bottom: 8px;
+ }
+ }
+
+ &__link {
+ @include font-size(12px, 16px);
+ color: var(--grayscale-dark);
+ letter-spacing: -0.07px;
+ margin-left: 4px;
+
+ @include breakpoint($narrow) {
+ margin-left: 5px;
+ }
+
+ &__icon {
+ svg {
+ fill: var(--grayscale-dark);
+ }
+ }
+ }
+
+ &__description {
+ @include font-size(14px, 20px);
+ color: var(--grayscale-black);
+ letter-spacing: 0;
+
+ @include breakpoint($narrow) {
+ @include font-size(16px, 24px);
+ }
+ }
+ }
+}
diff --git a/src/components/hy-list-item/hy-list-item.tsx b/src/components/hy-list-item/hy-list-item.tsx
new file mode 100644
index 00000000..f06fdd00
--- /dev/null
+++ b/src/components/hy-list-item/hy-list-item.tsx
@@ -0,0 +1,42 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-list-item',
+ styleUrl: 'hy-list-item.scss',
+ shadow: false,
+})
+export class HyListItem {
+ @Prop() itemType?: string;
+ @Prop() itemTitle?: string;
+ @Prop() itemDescription?: string;
+ @Prop() url?: string;
+ @Prop() isExternal: boolean = false;
+ @Prop() scLabel?: string;
+
+ render() {
+ const classAttributes = ['hy-list-item'].join(' ');
+ const target = this.isExternal ? '_blank' : '_self';
+
+ return (
+ <article>
+ <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
+ <div class="hy-list-item__info-container">
+ <div class="hy-list-item__info-container__header">{this.itemType}</div>
+ <div class="hy-list-item__info-container__title">{this.itemTitle}</div>
+
+ <div class="hy-list-item__info-container__link-container">
+ <span class="hy-list-item__info-container__link__icon">
+ <hy-icon icon={'hy-icon-link'} size={15} />
+ </span>
+ <div class="hy-list-item__info-container__link">{this.url}</div>
+ </div>
+
+ {this.itemDescription && (
+ <div class="hy-list-item__info-container__description">{this.itemDescription}</div>
+ )}
+ </div>
+ </a>
+ </article>
+ );
+ }
+}
diff --git a/src/components/hy-list-item/readme.md b/src/components/hy-list-item/readme.md
new file mode 100644
index 00000000..f9f00fef
--- /dev/null
+++ b/src/components/hy-list-item/readme.md
@@ -0,0 +1,32 @@
+# hy-list-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | --------- | ----------- |
+| `isExternal` | `is-external` | | `boolean` | `false` |
+| `itemDescription` | `item-description` | | `string` | `undefined` |
+| `itemTitle` | `item-title` | | `string` | `undefined` |
+| `itemType` | `item-type` | | `string` | `undefined` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-list-item --> hy-icon
+ style hy-list-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 3d04ef5e..851e564a 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -16,6 +16,7 @@ const iconNames: IconName = {
'hy-icon-dot-arrow-right': (p) => <icons.DotArrowRight {...p} />,
'hy-icon-done': (p) => <icons.Done {...p} />,
'hy-icon-euro': (p) => <icons.Euro {...p} />,
+ 'hy-icon-link': (p) => <icons.Url {...p} />,
'hy-icon-globe': (p) => <icons.Globe {...p} />,
'hy-icon-hamburger': (p) => <icons.Hamburger {...p} />,
'hy-icon-home': (p) => <icons.Home {...p} />,
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 7641c398..1d53339d 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -32,6 +32,7 @@
- [hy-footer-link-item](../footer/hy-footer-link-item)
- [hy-introduction](../hy-introduction)
- [hy-link-box](../link-box)
+- [hy-list-item](../hy-list-item)
- [hy-menu-item](../navigation/menu-item)
- [hy-menu-item-sidebar](../navigation/menu-item-sidebar)
- [hy-menu-language](../navigation/menu-language)
@@ -70,6 +71,7 @@ graph TD;
hy-footer-link-item --> hy-icon
hy-introduction --> hy-icon
hy-link-box --> hy-icon
+ hy-list-item --> hy-icon
hy-menu-item --> hy-icon
hy-menu-item-sidebar --> hy-icon
hy-menu-language --> hy-icon
diff --git a/src/index.html b/src/index.html
index cfb1f1c4..f03904a7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -182,6 +182,25 @@
THIS IS MAIN CONTENT
</hy-paragraph-text>
+ <hy-list-item
+ item-type="News | 20.12.2020"
+ item-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit cras dapibus vulputate diam eu pretium"
+ item-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium. Mauris elit orci, ultricies id fermentum vel, porta et eros. Vestibulum condimentum lectus in convallis feugiat…"
+ url="https://www.helsinki.fi/en/faculty-of-arts/admissions/apply-to-the-faculty"
+ is-external="true"
+ sc-label="Link opens up in a new tab"
+ >
+ </hy-list-item>
+ <hy-list-item
+ item-type="Web page | Sub site"
+ item-title="Explore our international master's programmes | Admissions"
+ item-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium. Mauris elit orci, ultricies id fermentum vel, porta et eros. Vestibulum condimentum lectus in convallis feugiat…"
+ url="https://www.helsinki.fi/en/faculty-of-arts/admissions/apply-to-the-faculty"
+ is-external="false"
+ sc-label="Internal links"
+ >
+ </hy-list-item>
+
<hy-person-card
variant="search-panel"
category-title="People"
--
GitLab