Skip to content

Commit 650b75f

Browse files
madsrasmussenmadsrasmussen
committed
WIP auth and app header example stories
1 parent a26e348 commit 650b75f

16 files changed

+587
-7
lines changed

‎.storybook/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const tsconfigPaths = require('vite-tsconfig-paths').default;
22

33
module.exports = {
4-
stories: ['../packages/**/*.story.ts'],
4+
stories: ['../packages/**/*.story.ts', '../stories/**/*.story.ts'],
55
addons: [
66
'@storybook/addon-links',
77
'@storybook/addon-essentials',

‎.storybook/preview-head.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,12 @@
1414
/* reset defaults: */
1515
margin: 24px;
1616
position: relative;
17+
}
18+
19+
body.sb-main-padded {
1720
padding: 40px !important;
1821
}
22+
1923
body[baseline-grid]::after {
2024
content: '';
2125
position: absolute;

‎images/login.jpeg

30 KB
Loading

‎images/umbraco_logo_white.svg

Lines changed: 1 addition & 0 deletions
Loading

‎images/umbraco_logomark_white.svg

Lines changed: 1 addition & 0 deletions
Loading

‎packages/uui-button/lib/uui-button.element.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
import { css, html, LitElement } from 'lit';
1717
import { property } from 'lit/decorators.js';
1818

19-
export type UUIButtonState = null | 'waiting' | 'success' | 'failed';
19+
export type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';
2020

2121
export type UUIButtonType = 'submit' | 'button' | 'reset';
2222

@@ -545,12 +545,12 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
545545

546546
/**
547547
* Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.
548-
* @type {null |'waiting' | 'success' | 'failed'}
548+
* @type {undefined |'waiting' | 'success' | 'failed'}
549549
* @attr
550-
* @default null
550+
* @default undefined
551551
*/
552552
@property({ type: String, reflect: true })
553-
state: UUIButtonState = null;
553+
state: UUIButtonState = undefined;
554554

555555
/**
556556
* This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/
@@ -600,7 +600,7 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
600600
clearTimeout(this._resetStateTimeout);
601601
if (this.state === 'success' || this.state === 'failed') {
602602
this._resetStateTimeout = setTimeout(
603-
() => (this.state = null),
603+
() => (this.state = undefined),
604604
2000
605605
) as any;
606606
}

‎packages/uui-tabs/lib/uui-tab-group.element.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export class UUITabGroupElement extends LitElement {
5353

5454
private onTabActive = (e: MouseEvent) => {
5555
//? should this contain stopPropagation?
56-
const selectedElement = e.target as HTMLElement;
56+
const selectedElement = e.currentTarget as HTMLElement;
5757
if (this.elementIsTabLike(selectedElement)) {
5858
selectedElement.active = true;
5959
}

‎stories/auth/auth-layout.example.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { css, CSSResultGroup, html, LitElement } from 'lit';
2+
import { customElement } from 'lit/decorators.js';
3+
4+
@customElement('uui-auth-layout-example')
5+
export class UUIAuthLayoutExample extends LitElement {
6+
static styles: CSSResultGroup = [
7+
css`
8+
#background {
9+
position: fixed;
10+
overflow: hidden;
11+
background-position: 50%;
12+
background-repeat: no-repeat;
13+
background-size: cover;
14+
background-image: url('/images/login.jpeg');
15+
width: 100vw;
16+
height: 100vh;
17+
}
18+
19+
#logo {
20+
position: fixed;
21+
top: var(--uui-size-space-5);
22+
left: var(--uui-size-space-5);
23+
height: 30px;
24+
}
25+
26+
#logo img {
27+
height: 100%;
28+
}
29+
30+
#container {
31+
position: relative;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
width: 100vw;
36+
height: 100vh;
37+
}
38+
39+
#box {
40+
width: 500px;
41+
padding: var(--uui-size-space-6) var(--uui-size-space-5)
42+
var(--uui-size-space-5) var(--uui-size-space-5);
43+
}
44+
45+
#email,
46+
#password {
47+
width: 100%;
48+
}
49+
`,
50+
];
51+
52+
render() {
53+
return html`
54+
<div id="background"></div>
55+
56+
<div id="logo">
57+
<img src="/images/umbraco_logo_white.svg" alt="Umbraco" />
58+
</div>
59+
60+
<div id="container">
61+
<uui-box id="box">
62+
<slot></slot>
63+
</uui-box>
64+
</div>
65+
`;
66+
}
67+
}

‎stories/auth/login/login.example.ts

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { css, CSSResultGroup, html, LitElement } from 'lit';
2+
import { customElement, state } from 'lit/decorators.js';
3+
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
4+
import { ifDefined } from 'lit/directives/if-defined.js';
5+
6+
@customElement('uui-login-example')
7+
export class UUILoginExample extends LitElement {
8+
static styles: CSSResultGroup = [
9+
UUITextStyles,
10+
css`
11+
#email,
12+
#password {
13+
width: 100%;
14+
}
15+
`,
16+
];
17+
18+
@state()
19+
private _loggingIn: boolean = false;
20+
21+
private _handleSubmit = (e: SubmitEvent) => {
22+
e.preventDefault();
23+
24+
const form = e.target as HTMLFormElement;
25+
if (!form) return;
26+
27+
const isValid = form.checkValidity();
28+
if (!isValid) return;
29+
30+
const formData = new FormData(form);
31+
32+
const username = formData.get('email') as string;
33+
const password = formData.get('password') as string;
34+
const persist = formData.has('persist');
35+
36+
this._login(username, password, persist);
37+
};
38+
39+
private _login(username: string, password: string, persist: boolean) {
40+
console.log('LOGIN', username, password, persist);
41+
this._loggingIn = true;
42+
setTimeout(() => {
43+
this._loggingIn = false;
44+
}, 1000);
45+
}
46+
47+
private _greetings: Array<string> = [
48+
'Happy super Sunday',
49+
'Happy manic Monday',
50+
'Happy tubular Tuesday',
51+
'Happy wonderful Wednesday',
52+
'Happy thunderous Thursday',
53+
'Happy funky Friday',
54+
'Happy Caturday',
55+
];
56+
57+
@state()
58+
private _greeting: string = this._greetings[new Date().getDay()];
59+
60+
render() {
61+
return html`
62+
<div class="uui-text">
63+
<h1 class="uui-h3">${this._greeting}</h1>
64+
<uui-form>
65+
<form id="LoginForm" name="login" @submit="${this._handleSubmit}">
66+
<uui-form-layout-item>
67+
<uui-label for="email" slot="label" required>Email</uui-label>
68+
<uui-input
69+
type="email"
70+
id="email"
71+
name="email"
72+
placeholder="Enter your email..."
73+
required
74+
required-message="Email is required"></uui-input>
75+
</uui-form-layout-item>
76+
77+
<uui-form-layout-item>
78+
<uui-label for="password" slot="label" required
79+
>Password</uui-label
80+
>
81+
<uui-input-password
82+
id="password"
83+
name="password"
84+
placeholder="Enter your password..."
85+
required
86+
required-message="Password is required"></uui-input-password>
87+
</uui-form-layout-item>
88+
89+
<uui-form-layout-item>
90+
<uui-checkbox name="persist" label="Remember me">
91+
Remember me
92+
</uui-checkbox>
93+
</uui-form-layout-item>
94+
95+
<uui-button
96+
type="submit"
97+
label="Login"
98+
look="positive"
99+
state=${ifDefined(
100+
this._loggingIn ? 'waiting' : undefined
101+
)}></uui-button>
102+
<uui-button type="button" label="Forgot Password?"></uui-button>
103+
</form>
104+
</uui-form>
105+
</div>
106+
`;
107+
}
108+
}

‎stories/auth/login/login.story.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Story } from '@storybook/web-components';
2+
import { html } from 'lit-html';
3+
4+
import '../auth-layout.example.ts';
5+
import './login.example.ts';
6+
7+
export default {
8+
id: 'login-example',
9+
title: 'Examples/Auth/Login',
10+
component: 'uui-login-example',
11+
};
12+
13+
export const Login: Story = () => html`
14+
<uui-login-example></uui-login-example>
15+
`;
16+
17+
export const OnAPage: Story = () => html`
18+
<uui-auth-layout-example>
19+
<uui-login-example></uui-login-example>
20+
</uui-auth-layout-example>
21+
`;
22+
23+
OnAPage.parameters = {
24+
layout: 'fullscreen',
25+
};

0 commit comments

Comments
 (0)