list-item that can represent search result item, with styles.

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>;

src/components/hy-list-item/hy-list-item.scss

+: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);
+      }
+    }
+  }
+}

src/components/hy-list-item/hy-list-item.tsx

+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>
+    );
+  }
+}

src/components/hy-list-item/readme.md

+# 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

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} />,

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

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"