Merge branch 'NXSTAGE-1205-Table' into 'development'

Nxstage 1205 table

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

src/components.d.ts

@@ -757,6 +757,7 @@ export namespace Components {
     showLabel: boolean;
     size: number;
   }
+  interface HyTableContainer {}
   interface HyTabs {
     headerstyle: string;
     tabId?: string;
@@ -1221,6 +1222,11 @@ declare global {
     prototype: HTMLHySiteSearchElement;
     new (): HTMLHySiteSearchElement;
   };
+  interface HTMLHyTableContainerElement extends Components.HyTableContainer, HTMLStencilElement {}
+  var HTMLHyTableContainerElement: {
+    prototype: HTMLHyTableContainerElement;
+    new (): HTMLHyTableContainerElement;
+  };
   interface HTMLHyTabsElement extends Components.HyTabs, HTMLStencilElement {}
   var HTMLHyTabsElement: {
     prototype: HTMLHyTabsElement;
@@ -1333,6 +1339,7 @@ declare global {
     'hy-site-header': HTMLHySiteHeaderElement;
     'hy-site-logo': HTMLHySiteLogoElement;
     'hy-site-search': HTMLHySiteSearchElement;
+    'hy-table-container': HTMLHyTableContainerElement;
     'hy-tabs': HTMLHyTabsElement;
     'hy-tabs-item': HTMLHyTabsItemElement;
     'hy-tag': HTMLHyTagElement;
@@ -2058,6 +2065,7 @@ declare namespace LocalJSX {
     showLabel?: boolean;
     size?: number;
   }
+  interface HyTableContainer {}
   interface HyTabs {
     headerstyle?: string;
     tabId?: string;
@@ -2215,6 +2223,7 @@ declare namespace LocalJSX {
     'hy-site-header': HySiteHeader;
     'hy-site-logo': HySiteLogo;
     'hy-site-search': HySiteSearch;
+    'hy-table-container': HyTableContainer;
     'hy-tabs': HyTabs;
     'hy-tabs-item': HyTabsItem;
     'hy-tag': HyTag;
@@ -2311,6 +2320,7 @@ declare module '@stencil/core' {
       'hy-site-header': LocalJSX.HySiteHeader & JSXBase.HTMLAttributes<HTMLHySiteHeaderElement>;
       'hy-site-logo': LocalJSX.HySiteLogo & JSXBase.HTMLAttributes<HTMLHySiteLogoElement>;
       'hy-site-search': LocalJSX.HySiteSearch & JSXBase.HTMLAttributes<HTMLHySiteSearchElement>;
+      'hy-table-container': LocalJSX.HyTableContainer & JSXBase.HTMLAttributes<HTMLHyTableContainerElement>;
       'hy-tabs': LocalJSX.HyTabs & JSXBase.HTMLAttributes<HTMLHyTabsElement>;
       'hy-tabs-item': LocalJSX.HyTabsItem & JSXBase.HTMLAttributes<HTMLHyTabsItemElement>;
       'hy-tag': LocalJSX.HyTag & JSXBase.HTMLAttributes<HTMLHyTagElement>;

src/components/hy-box/readme.md

@@ -39,6 +39,7 @@
 - [hy-paragraph-text](../paragraph-text)
 - [hy-process-flow-box](../process-flow-box)
 - [hy-shortcuts](../hy-shortcuts)
+- [hy-table-container](../hy-table-container)
 - [hy-tabs](../hy-tabs)
 - [hy-video](../hy-video)
 
@@ -58,6 +59,7 @@ graph TD;
   hy-paragraph-text --> hy-box
   hy-process-flow-box --> hy-box
   hy-shortcuts --> hy-box
+  hy-table-container --> hy-box
   hy-tabs --> hy-box
   hy-video --> hy-box
   style hy-box fill:#f9f,stroke:#333,stroke-width:4px

src/components/hy-table-container/hy-table-container.scss

+.hy-table-container {
+  @include font-size(14px, 18px);
+  position: relative;
+  overflow: auto;
+  white-space: nowrap;
+
+  @include breakpoint($narrow) {
+    @include font-size(16px, 20px);
+  }
+
+  table {
+    border-collapse: unset;
+    border-spacing: unset;
+    border: 1px solid var(--grayscale-dark);
+    text-indent: initial;
+    width: 100%;
+  }
+
+  thead {
+    th {
+      @include font-size(14px, 20px);
+
+      background-color: var(--grayscale-light);
+      text-transform: uppercase;
+
+      @include breakpoint($narrow) {
+        @include font-size(16px, 20px);
+      }
+    }
+  }
+
+  td,
+  th {
+    box-shadow: -0.5px -0.5px 0 var(--grayscale-dark);
+    color: var(--grayscale-dark);
+    font-family: var(--main-font-family);
+    letter-spacing: -0.5px;
+    padding: 0.7em 0.9em;
+    text-align: left;
+    vertical-align: top;
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+
+    p {
+      font-size: inherit;
+    }
+
+    &:not(th):first-child {
+      @include font-weight($bold);
+
+      background-color: var(--grayscale-white);
+      box-shadow: 0.5px -0.5px 0.5px var(--grayscale-dark);
+      left: 0;
+      max-width: 200px;
+      min-width: 200px;
+      position: sticky;
+      white-space: normal;
+      width: 200px;
+      z-index: 2;
+
+      @include breakpoint($narrow) {
+        max-width: 220px;
+        min-width: 220px;
+        width: 220px;
+      }
+
+      @include breakpoint($medium) {
+        max-width: 300px;
+        min-width: 300px;
+        width: 300px;
+      }
+
+      @include breakpoint($wide) {
+        max-width: 40%;
+        min-width: 40%;
+        width: 40%;
+      }
+    }
+  }
+
+  td {
+    background-color: var(--grayscale-white);
+  }
+}

src/components/hy-table-container/hy-table-container.tsx

+import {Component, Host, h} from '@stencil/core';
+
+@Component({
+  tag: 'hy-table-container',
+  styleUrl: 'hy-table-container.scss',
+  shadow: false,
+})
+export class HyTableContainer {
+  render() {
+    const classAttributes = ['hy-table-container'].join(' ');
+
+    return (
+      <Host class={classAttributes}>
+        <slot></slot>
+        <hy-box mb="1.75, 1.75, 2, 2.5" />
+      </Host>
+    );
+  }
+}

src/components/hy-table-container/readme.md

+# hy-table-container
+
+<!-- Auto Generated Below -->
+
+## Dependencies
+
+### Depends on
+
+- [hy-box](../hy-box)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-table-container --> hy-box
+  style hy-table-container fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System