Merge branch 'NXSTAGE-147-Link_box_component' into 'development'

Nxstage 147 link box component

See merge request julkiset-sivut/design-system-lib!18

src/components/button/readme.md

@@ -12,43 +12,87 @@ Well, it's a button.
 ### Primary (Default) button
 
 <hy-docs-container>
-  <hy-button>Just a plain button</hy-button>
+  <hy-button>Primary</hy-button>
 </hy-docs-container>
 
 ```
-<hy-button>Just a plain button</hy-button>
+<hy-button>Primary</hy-button>
 ```
 
-### With icons
+### Secondary & Transparent
 
-<hy-docs-container>
-<hy-row>
-<hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
-<hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
-</hy-row>
-</hy-docs-container>
+<hy-button variant="secondary">Secondary</hy-button>
 
 ```
-<hy-row>
-  <hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
-  <hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
-</hy-row>
+<hy-button variant="secondary">Secondary</hy-button>
 ```
 
-### Secondary & Outline
+### Primary button, state disabled
+<hy-button state="disabled">Primary</hy-button>
 
-<hy-docs-container>
-<hy-row>
-<hy-button variant="secondary">I feel secondary and transparent</hy-button>
-</hy-row>
-</hy-docs-container>
 
 ```
-<hy-row>
-  <hy-button variant="secondary">I feel secondary</hy-button>
-  <hy-button variant="outline">I'm actually transparent</hy-button>
-</hy-row>
+<hy-button state="disabled">Primary</hy-button>
+```
+
+### Secondary button, state disabled
+<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>
+
+```
+<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>
+```
+
+### With arrows, state enabled
+
+<hy-button icon="hy-icon-arrow-left">Primary</hy-button>
+```
+<hy-button icon="hy-icon-arrow-left">Primary</hy-button>
+```
+
+<hy-button variant="secondary" icon="hy-icon-arrow-left">Secondary</hy-button>
 ```
+<hy-button variant="secondary" icon="hy-icon-arrow-left">
+    Secondary
+</hy-button>
+```
+
+<hy-button icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+<hy-button icon-right="hy-icon-arrow-right">
+    Primary
+</hy-button>
+```
+
+<hy-button icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+<hy-button icon-right="hy-icon-arrow-right" variant="secondary">
+    Secondary
+</hy-button>
+```
+
+      
+### With arrows, state disabled
+
+<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>
+```
+<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>
+```
+
+<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>
+```
+<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>
+```
+
+<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+
+<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+
 
 ### Mix with any icon
 

src/components/grid-item/grid-item.scss

@@ -25,9 +25,8 @@
 }
 
 // grid
-
-$width: 96%;
-$gutter: 4%;
+$width: 98%;
+$gutter: 2%;
 
 $narrow: 30em; // 480px
 $medium: 48em; // 768px

src/components/grid-item/grid-item.tsx

@@ -11,6 +11,7 @@ import {
   styleUrl: 'grid-item.scss',
   shadow: false
 })
+
 export class GridItem {
   @Prop() columns: GridColumns = GridColumns.default;
   @Prop() columnssm: GridColumnsSm = GridColumnsSm.default;
@@ -26,7 +27,7 @@ export class GridItem {
       `hy-grid-align__${this.contentalign}`,
     ];
 
-      return (
+    return (
       <Host
         class={classAttributes.join(" ")}
       >

src/components/grid-row/grid-row.scss

@@ -3,15 +3,22 @@
 }
 
 .hy-grid__row {
-  display: block;
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
   position: relative;
   width: 100%;
 }
 
 .hy-grid__row > [class^="hy-grid-item"] {
   float: left;
-  margin: 0.5rem 2%;
+  margin: .5rem 1%;
   min-height: 0.125rem;
+  
+  @include breakpoint($medium) {
+    margin: 1%;
+  }
 }
 
 .hy-grid__row::after {

src/components/grid-row/grid-row.tsx

@@ -5,8 +5,8 @@ import { Component, Host, h } from '@stencil/core';
   styleUrl: 'grid-row.scss',
   shadow: false
 })
-export class GridRow {
 
+export class GridRow {
   render() {
     const classAttributes = ["hy-grid__row"];
 
@@ -16,6 +16,4 @@ export class GridRow {
       </Host>
     );
   }
-
-
 }

src/components/icon/readme.md

@@ -20,12 +20,14 @@
 
  - [hy-accordion-item](../accordion-item)
  - [hy-button](../button)
+ - [hy-link-box](../link-box)
 
 ### Graph
 ```mermaid
 graph TD;
   hy-accordion-item --> hy-icon
   hy-button --> hy-icon
+  hy-link-box --> hy-icon
   style hy-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/link-box/link-box.scss

+:host {
+  display: block;
+  height: 100.5%;
+}
+
+.hy-link-box {
+  $border-color: var(--brand-main);
+  @include border-without-corners($border-color, 1px);
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  text-decoration: none;
+
+  &__image-container {
+    border-left: 1px solid var(--brand-main);
+    border-right: 1px solid var(--brand-main);
+    border-top: 1px solid var(--brand-main);
+    display: flex;
+    justify-content: stretch;
+    margin-bottom: 0;
+    min-height: 10rem;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: block;
+      padding-top: (10 / 16) * 100%;
+      width: 100%;
+    }
+
+    > img {
+      bottom: 0;
+      height: 100%;
+      left: 0;
+      object-fit: cover;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  &--with-image {
+    justify-content: flex-start;
+
+    .hy-link-box__text-container {
+      margin: 0 1px 2rem -1px;
+      padding: 1.25rem .5rem 1.25rem 0;
+      
+      @include breakpoint($medium) {
+        padding: 1.25rem .5rem 1.25rem 0;  
+      }
+    }
+  }
+
+  &__text-container {
+    background: var(--grayscale-white);
+    margin: 3rem 1px 3rem -1px;
+    padding: 1.5rem .5rem 1.5rem 0;
+
+    @include breakpoint($medium) {
+      margin: 1px 1px 1px -1px;
+      padding: 2.5rem .5rem 2.5rem 0;    
+    }
+
+    &__title {
+      color: var(--brand-main-nearly-black);
+      font-family: "Open Sans";
+      font-size: 20px;
+      font-weight: 600;
+      letter-spacing: -0.63px;
+      line-height: 26px;
+      margin-bottom: 11px;
+    }
+
+    &__description {
+      color: var(--grayscale-dark);
+      font-family: "Open Sans";
+      font-size: 14px;
+      letter-spacing: -0.2px;
+      line-height: 20px;
+    }
+  }
+
+  &__link-icon {
+    bottom: .75rem;
+    position: absolute;
+    right: .75rem;
+
+    svg {
+      fill: var(--brand-main);
+    }
+
+    &--external {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+

src/components/link-box/link-box.spec.tsx

+import { LinkBox } from './link-box';
+
+describe('hy-link-box', () => {
+  it('builds', () => {
+    expect(new LinkBox()).toBeTruthy();
+  });
+});

src/components/link-box/link-box.tsx

+import { Component, ComponentInterface, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'hy-link-box',
+  styleUrl: 'link-box.scss',
+  shadow: true,
+})
+export class LinkBox implements ComponentInterface {
+  @Prop() imageUrl: string = null;
+  @Prop() imageAlt: string = null;
+  @Prop() textTitle?: string;
+  @Prop() textDescription: string = null;
+  @Prop() url?: string;
+  @Prop() ariaLabel?: string;
+  @Prop() isExternal: boolean = false;
+
+  render() {    
+    const classAttributes = [
+      "hy-link-box",
+      this.imageUrl ? "hy-link-box--with-image" : null
+    ].join(" ");
+
+    const iconClassAttributes = [
+      "hy-link-box__link-icon",
+      this.isExternal ? "hy-link-box__link-icon--external" : null
+    ].join(" ");
+
+    const target = this.isExternal ? "_blank" : "_self";
+
+    return (
+      <a
+        aria-label={this.ariaLabel}
+        class={classAttributes}
+        href={this.url}
+        target={target}
+      >
+        { this.imageUrl && 
+          <div class="hy-link-box__image-container">
+            <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+          </div>
+        }
+        <div class="hy-link-box__text-container">
+          <div class="hy-link-box__text-container__title">{ this.textTitle }</div>
+          { this.textDescription && 
+            <div class="hy-link-box__text-container__description">{ this.textDescription }</div> 
+          }
+        </div>
+        <span class={iconClassAttributes}>
+          <hy-icon icon={'hy-icon-arrow-right'} size={16} />
+        </span>
+      </a>
+    );
+  }
+
+}

src/components/link-box/readme.md

+# hy-link-box
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute          | Description | Type      | Default     |
+| ----------------- | ------------------ | ----------- | --------- | ----------- |
+| `ariaLabel`       | `aria-label`       |             | `string`  | `undefined` |
+| `imageAlt`        | `image-alt`        |             | `string`  | `null`      |
+| `imageUrl`        | `image-url`        |             | `string`  | `null`      |
+| `isExternal`      | `is-external`      |             | `boolean` | `false`     |
+| `textDescription` | `text-description` |             | `string`  | `null`      |
+| `textTitle`       | `text-title`       |             | `string`  | `undefined` |
+| `url`             | `url`              |             | `string`  | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+```mermaid
+graph TD;
+  hy-link-box --> hy-icon
+  style hy-link-box fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Helsinki University Design System