Merge branch 'NXSTAGE-684-loginpage' into 'development'

user login form component+styles

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

src/components.d.ts

@@ -392,6 +392,10 @@ export namespace Components {
   interface HyTwoColumns {
     reversed: boolean;
   }
+  interface HyUserLoginForm {
+    logoLabel?: string;
+    logoUrl?: string;
+  }
 }
 declare global {
   interface HTMLColorBoxElement extends Components.ColorBox, HTMLStencilElement {}
@@ -639,6 +643,11 @@ declare global {
     prototype: HTMLHyTwoColumnsElement;
     new (): HTMLHyTwoColumnsElement;
   };
+  interface HTMLHyUserLoginFormElement extends Components.HyUserLoginForm, HTMLStencilElement {}
+  var HTMLHyUserLoginFormElement: {
+    prototype: HTMLHyUserLoginFormElement;
+    new (): HTMLHyUserLoginFormElement;
+  };
   interface HTMLElementTagNameMap {
     'color-box': HTMLColorBoxElement;
     'hy-accordion-container': HTMLHyAccordionContainerElement;
@@ -689,6 +698,7 @@ declare global {
     'hy-site-search': HTMLHySiteSearchElement;
     'hy-tiny-text': HTMLHyTinyTextElement;
     'hy-two-columns': HTMLHyTwoColumnsElement;
+    'hy-user-login-form': HTMLHyUserLoginFormElement;
   }
 }
 declare namespace LocalJSX {
@@ -1055,6 +1065,10 @@ declare namespace LocalJSX {
   interface HyTwoColumns {
     reversed?: boolean;
   }
+  interface HyUserLoginForm {
+    logoLabel?: string;
+    logoUrl?: string;
+  }
   interface IntrinsicElements {
     'color-box': ColorBox;
     'hy-accordion-container': HyAccordionContainer;
@@ -1105,6 +1119,7 @@ declare namespace LocalJSX {
     'hy-site-search': HySiteSearch;
     'hy-tiny-text': HyTinyText;
     'hy-two-columns': HyTwoColumns;
+    'hy-user-login-form': HyUserLoginForm;
   }
 }
 export {LocalJSX as JSX};
@@ -1163,6 +1178,7 @@ declare module '@stencil/core' {
       'hy-site-search': LocalJSX.HySiteSearch & JSXBase.HTMLAttributes<HTMLHySiteSearchElement>;
       'hy-tiny-text': LocalJSX.HyTinyText & JSXBase.HTMLAttributes<HTMLHyTinyTextElement>;
       'hy-two-columns': LocalJSX.HyTwoColumns & JSXBase.HTMLAttributes<HTMLHyTwoColumnsElement>;
+      'hy-user-login-form': LocalJSX.HyUserLoginForm & JSXBase.HTMLAttributes<HTMLHyUserLoginFormElement>;
     }
   }
 }

src/components/hy-main/hy-main.scss

@@ -14,6 +14,15 @@
     width: 100%;
   }
 
+  .layout-user-login-page {
+    padding: 0 var(--gutter-medium);
+    width: 100%;
+
+    div[id^='block-breadcrumbs'] {
+      display: none;
+    }
+  }
+
   &.with-sidebar {
     .layout-content {
       @include breakpoint($medium) {

src/components/hy-user-login-form/hy-user-login-form.scss

+:host {
+  display: block;
+}
+
+.hy-user-login-form {
+  font-family: var(--main-font-family);
+
+  .user-login-form {
+    position: relative;
+
+    .hy-login-label {
+      margin-top: 16px;
+    }
+
+    input {
+      display: block;
+      margin: 8px 0 0 0;
+      min-height: 32px;
+    }
+
+    label {
+      @include font-size(16px, 16px);
+      @include font-weight($bold);
+      display: block;
+    }
+
+    label:before {
+      content: '*';
+      padding-right: 3px;
+    }
+
+    div#edit-name--description {
+      @include font-size(14px, 14px);
+      margin-top: 8px;
+      margin-bottom: 20px;
+    }
+    div#edit-pass--description {
+      display: none;
+    }
+
+    div#edit-actions {
+      margin-top: 32px;
+    }
+  }
+}

src/components/hy-user-login-form/hy-user-login-form.tsx

+import {Component, h, Prop} from '@stencil/core';
+import {ColorVariant, SiteLogoSize} from '../../utils/utils';
+
+@Component({
+  tag: 'hy-user-login-form',
+  styleUrl: 'hy-user-login-form.scss',
+  shadow: false,
+})
+export class HyUserLoginForm {
+  @Prop() logoUrl?: string;
+  @Prop() logoLabel?: string;
+
+  render() {
+    const classAttributes = 'hy-user-login-form';
+
+    const logoSize = SiteLogoSize.large;
+    const logoColor = ColorVariant.black;
+
+    return (
+      <div class={classAttributes}>
+        <div class={'hy-site-header__logo-container'}>
+          <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+        </div>
+
+        <slot />
+      </div>
+    );
+  }
+}

src/components/hy-user-login-form/readme.md

+# hy-user-login-form
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property    | Attribute    | Description | Type     | Default     |
+| ----------- | ------------ | ----------- | -------- | ----------- |
+| `logoLabel` | `logo-label` |             | `string` | `undefined` |
+| `logoUrl`   | `logo-url`   |             | `string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-site-logo](../site-header/site-logo)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-user-login-form --> hy-site-logo
+  hy-site-logo --> hy-icon
+  style hy-user-login-form fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System

src/components/site-header/site-logo/readme.md

@@ -4,12 +4,12 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                                       | Default              |
-| -------- | --------- | ----------- | ------------------------------------------ | -------------------- |
-| `color`  | `color`   |             | `ColorVariant.black \| ColorVariant.white` | `ColorVariant.black` |
-| `label`  | `label`   |             | `string`                                   | `undefined`          |
-| `size`   | `size`    |             | `SiteLogoSize.big \| SiteLogoSize.small`   | `SiteLogoSize.big`   |
-| `url`    | `url`     |             | `string`                                   | `undefined`          |
+| Property | Attribute | Description | Type                                                           | Default              |
+| -------- | --------- | ----------- | -------------------------------------------------------------- | -------------------- |
+| `color`  | `color`   |             | `ColorVariant.black \| ColorVariant.white`                     | `ColorVariant.black` |
+| `label`  | `label`   |             | `string`                                                       | `undefined`          |
+| `size`   | `size`    |             | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big`   |
+| `url`    | `url`     |             | `string`                                                       | `undefined`          |
 
 ## Dependencies
 
@@ -17,6 +17,7 @@
 
 - [hy-menu](../../navigation/menu)
 - [hy-site-header](..)
+- [hy-user-login-form](../../hy-user-login-form)
 
 ### Depends on
 
@@ -29,6 +30,7 @@ graph TD;
   hy-site-logo --> hy-icon
   hy-menu --> hy-site-logo
   hy-site-header --> hy-site-logo
+  hy-user-login-form --> hy-site-logo
   style hy-site-logo fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/utils/utils.ts

@@ -124,6 +124,7 @@ export enum MenuType {
 export enum SiteLogoSize {
   small = 32,
   big = 64,
+  large = 80,
 }
 
 export enum ColorVariant {