diff --git a/src/components.d.ts b/src/components.d.ts
index 45c3242b7f1057efa0204b6bd4c8b1d52d4988e5..22fb694c4ebb8f47ea6cc832b01f8572886509ab 100644
--- a/src/components.d.ts
+++ b/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>;
}
}
}
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index 4f13fe73a4cb3eb6a0fd44f00de3d2795d39caa2..aa78774a44f4ddae1200d227f9a8adcfe2b625c1 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/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) {
diff --git a/src/components/hy-user-login-form/hy-user-login-form.scss b/src/components/hy-user-login-form/hy-user-login-form.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2255f9dbecd0d48e3d0ea52f195f92d37f0ecf42
--- /dev/null
+++ b/src/components/hy-user-login-form/hy-user-login-form.scss
@@ -0,0 +1,45 @@
+: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;
+ }
+ }
+}
diff --git a/src/components/hy-user-login-form/hy-user-login-form.tsx b/src/components/hy-user-login-form/hy-user-login-form.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..62ab7beedb8f6d4b47ec49ea1d169893267cd372
--- /dev/null
+++ b/src/components/hy-user-login-form/hy-user-login-form.tsx
@@ -0,0 +1,29 @@
+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>
+ );
+ }
+}
diff --git a/src/components/hy-user-login-form/readme.md b/src/components/hy-user-login-form/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..f6b315bedb965048c9d496d805d714220d062e68
--- /dev/null
+++ b/src/components/hy-user-login-form/readme.md
@@ -0,0 +1,29 @@
+# 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
diff --git a/src/components/site-header/site-logo/readme.md b/src/components/site-header/site-logo/readme.md
index f9b2c19a94e89a8e2a514a29de46593ad1a1c92f..b90fc7b66e0e326a8e27f0bf015c88ce88260625 100644
--- a/src/components/site-header/site-logo/readme.md
+++ b/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
```
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index cca906eb4e2f8ae14ae5c8fa8f879cc07e1d7b6c..20966b54199159e16ce6cda1e755b87d46b5e944 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -124,6 +124,7 @@ export enum MenuType {
export enum SiteLogoSize {
small = 32,
big = 64,
+ large = 80,
}
export enum ColorVariant {