Skip to content

Commit cbae21d

Browse files
amrutha95Amrutha Srinivasannmetulev
authored
Added stories for people, person and login components (#1152)
* Added stories for login, people, person, todo * Cleaned up few stories and moved few arround Co-authored-by: Amrutha Srinivasan <[email protected]> Co-authored-by: Nikola Metulev <[email protected]>
1 parent d6e1a57 commit cbae21d

File tree

12 files changed

+575
-204
lines changed

12 files changed

+575
-204
lines changed

‎stories/components/login.stories.js‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎stories/components/login/login.stories.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
import { html } from 'lit-element';
9+
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
10+
11+
export default {
12+
title: 'Components | mgt-login',
13+
component: 'mgt-login',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const Login = () => html`
18+
<mgt-login></mgt-login>
19+
`;
20+
21+
export const Templates = () => html`
22+
<mgt-login>
23+
<template data-type="signed-out-button-content">
24+
👋
25+
</template>
26+
<template data-type="signed-in-button-content">
27+
{{personDetails.givenName}}
28+
</template>
29+
<template data-type="flyout-commands">
30+
<div>
31+
<button data-props="@click: handleSignOut">Sign Out</button>
32+
<button>Go to my profile</button>
33+
</div>
34+
</template>
35+
<template data-type="flyout-person-details">
36+
<div>
37+
{{personDetails.givenName}}
38+
</div>
39+
<div>
40+
{{personDetails.jobTitle}}
41+
</div>
42+
<div>
43+
{{personDetails.mail}}
44+
</div>
45+
</template>
46+
</mgt-login>
47+
`;
48+
49+
export const RTL = () => html`
50+
<mgt-login dir="RTL"></mgt-login>
51+
`;
52+
53+
export const Events = () => html`
54+
<mgt-login></mgt-login>
55+
<script>
56+
const login = document.querySelector('mgt-login');
57+
login.addEventListener('loginInitiated', (e) => {
58+
console.log("Login Initiated");
59+
})
60+
login.addEventListener('loginCompleted', (e) => {
61+
console.log("Login Completed");
62+
})
63+
login.addEventListener('logoutInitiated', (e) => {
64+
console.log("Logout Initiated");
65+
})
66+
login.addEventListener('logoutCompleted', (e) => {
67+
console.log("Logout Completed");
68+
})
69+
</script>
70+
`;
71+
72+
export const localization = () => html`
73+
<mgt-login></mgt-login>
74+
<script>
75+
import { LocalizationHelper } from '@microsoft/mgt';
76+
LocalizationHelper.strings = {
77+
_components: {
78+
login: {
79+
signInLinkSubtitle: 'Sign In 🤗',
80+
signOutLinkSubtitle: 'Sign Out 🙋‍♀️'
81+
},
82+
}
83+
}
84+
</script>
85+
`;

‎stories/components/login/login.styles.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
import { html } from 'lit-element';
9+
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
10+
11+
export default {
12+
title: 'Components / mgt-login / Styles',
13+
component: 'mgt-login',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const darkTheme = () => html`
18+
<mgt-login class="mgt-dark"></mgt-login>
19+
<style>
20+
body {
21+
background-color: black;
22+
}
23+
</style>
24+
`;
25+
26+
export const customCssProperties = () => html`
27+
<mgt-login></mgt-login>
28+
<style>
29+
mgt-login {
30+
--font-size: 14px;
31+
--font-weight: 600;
32+
--weight: '100%';
33+
--height: '100%';
34+
--margin: 0;
35+
--padding: 12px 20px;
36+
--button-color: #1e2020;
37+
--button-color--hover: var(--theme-primary-color);
38+
--button-background-color: pink;
39+
--button-background-color--hover: ##e9ba0f52;
40+
--popup-background-color: rgba(131, 180, 228, 0.664);
41+
--popup-command-font-size: 12px;
42+
--popup-color: #201f1e;
43+
}
44+
</style>
45+
`;

‎stories/components/people/people.a.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
import { html } from 'lit-element';
9+
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
10+
11+
export default {
12+
title: 'Components | mgt-people',
13+
component: 'mgt-people',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const People = () => html`
18+
<mgt-people show-max="5"></mgt-people>
19+
`;
20+
21+
export const RTL = () => html`
22+
<mgt-people show-max="5" dir="RTL"></mgt-people>
23+
`;

‎stories/components/people.stories.js‎ renamed to ‎stories/components/people/people.properties.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,22 @@
66
*/
77

88
import { html } from 'lit-element';
9-
import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon';
9+
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
1010

1111
export default {
12-
title: 'Components | mgt-people',
12+
title: 'Components / mgt-people / Properties',
1313
component: 'mgt-people',
1414
decorators: [withCodeEditor]
1515
};
1616

17-
export const People = () => html`
17+
export const ShowMax = () => html`
1818
<mgt-people show-max="5"></mgt-people>
1919
`;
2020

21+
export const ShowPresence = () => html`
22+
<mgt-people show-presence></mgt-people>
23+
`;
24+
2125
export const GroupId = () => html`
2226
<mgt-people group-id="02bd9fd6-8f93-4758-87c3-1fb73740a315"></mgt-people>
2327
`;
@@ -40,11 +44,9 @@ export const PeopleResource = () => html`
4044
<mgt-people resource="/me/directReports"></mgt-people>
4145
`;
4246

43-
export const darkTheme = () => html`
44-
<mgt-people class="mgt-dark"></mgt-people>
45-
<style>
46-
body {
47-
background-color: black;
48-
}
49-
</style>
47+
export const PersonCard = () => html`
48+
<div style="margin-bottom:10px">Person card Hover</div>
49+
<mgt-people show-max="5" person-card="hover"></mgt-people>
50+
<div style="margin-bottom:10px">Person card Click</div>
51+
<mgt-people show-max="5" person-card="click"></mgt-people>
5052
`;

‎stories/components/people/people.styles.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
import { html } from 'lit-element';
9+
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
10+
11+
export default {
12+
title: 'Components / mgt-people / Styles',
13+
component: 'mgt-people',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const darkTheme = () => html`
18+
<mgt-people class="mgt-dark"></mgt-people>
19+
<style>
20+
body {
21+
background-color: black;
22+
}
23+
</style>
24+
`;
25+
26+
export const customCssProperties = () => html`
27+
<mgt-people></mgt-people>
28+
<style>
29+
mgt-people {
30+
--list-margin: 10px 4px 10px 10px; /* Margin for component */
31+
--avatar-margin: 20px; /* Margin for each person */
32+
--color: pink /* Text color */
33+
}
34+
</style>
35+
`;

‎stories/components/people/people.templating.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
import { html } from 'lit-element';
9+
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
10+
11+
export default {
12+
title: 'Components / mgt-people / Templating',
13+
component: 'mgt-people',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const DefaultTemplates = () => html`
18+
<style>
19+
ul {
20+
list-style-type: none;
21+
padding: 0;
22+
}
23+
24+
li {
25+
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
26+
padding: 8px;
27+
margin: 8px;
28+
}
29+
30+
li mgt-person {
31+
--avatar-size: 42px;
32+
}
33+
</style>
34+
<mgt-people>
35+
<template>
36+
<ul><li data-for="person in people">
37+
<mgt-person data-props="personDetails: person" fetch-image></mgt-person>
38+
<h3>{{ person.displayName }}</h3>
39+
<p>{{ person.jobTitle }}</p>
40+
<p>{{ person.department }}</p>
41+
</li></ul>
42+
</template>
43+
<template data-type="loading">
44+
<div class="root">
45+
loading
46+
</div>
47+
</template>
48+
<template data-type="no-data">
49+
<div class="root">
50+
there is no data
51+
</div>
52+
</template>
53+
</mgt-people>`;
54+
55+
export const PersonTemplate = () => html`
56+
<mgt-people>
57+
<template data-type="person">
58+
{{person.displayName}} |
59+
</template>
60+
</mgt-people>`;
61+
62+
export const OverflowTemplate = () => html`
63+
<mgt-people>
64+
<template data-type="overflow">
65+
and {{extra}} left
66+
</template>
67+
</mgt-people>`;

0 commit comments

Comments
 (0)