Skip to content

Commit 17fa58a

Browse files
musalenmetulev
musale
and
nmetulev
authored
Re-arrange and update the people-picker stories. (#1155)
* Re-arrange and update the people-picker stories. Re-arranged the stories to have the same format as the agenda component. Added the following stories: * Templating * Events * cleanup * cleanup Co-authored-by: Nikola Metulev <[email protected]> Co-authored-by: Nikola Metulev <[email protected]>
1 parent 1e64b9c commit 17fa58a

File tree

4 files changed

+145
-16
lines changed

4 files changed

+145
-16
lines changed

‎stories/components/peoplePicker/peoplePicker.a.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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-picker',
13+
component: 'mgt-people-picker',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const peoplePicker = () => html`
18+
<mgt-people-picker></mgt-people-picker>
19+
`;
20+
21+
export const RTL = () => html`
22+
<body dir="rtl">
23+
<mgt-people-picker></mgt-people-picker>
24+
</body>
25+
`;
26+
27+
export const selectionChangedEvent = () => html`
28+
<mgt-people-picker></mgt-people-picker>
29+
<!-- Check the console tab for results -->
30+
<script>
31+
document.querySelector('mgt-people-picker').addEventListener('selectionChanged', e => {
32+
console.log(e.detail)
33+
});
34+
</script>
35+
`;
36+
37+
export const localization = () => html`
38+
<mgt-people-picker></mgt-people-picker>
39+
<script>
40+
import { LocalizationHelper } from '@microsoft/mgt';
41+
LocalizationHelper.strings = {
42+
_components: {
43+
'people-picker': {
44+
inputPlaceholderText: 'Search for 🤼',
45+
noResultsFound: '🤷‍♀️',
46+
loadingMessage: '🦔'
47+
}
48+
}
49+
}
50+
</script>
51+
`;

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

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,14 @@
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-picker',
12+
title: 'Components / mgt-people-picker / Properties',
1313
component: 'mgt-people-picker',
1414
decorators: [withCodeEditor]
1515
};
1616

17-
export const peoplePicker = () =>
18-
html`
19-
<mgt-people-picker></mgt-people-picker>
20-
`;
21-
2217
export const groupId = () => html`
2318
<mgt-people-picker group-id="02bd9fd6-8f93-4758-87c3-1fb73740a315"></mgt-people-picker>
2419
`;
@@ -173,15 +168,6 @@ export const pickerDefaultSelectedUserAndGroupIds = () => html`
173168
</mgt-people-picker>
174169
`;
175170

176-
export const darkTheme = () => html`
177-
<mgt-people-picker class="mgt-dark"></mgt-people-picker>
178-
<style>
179-
body {
180-
background-color: black;
181-
}
182-
</style>
183-
`;
184-
185171
export const pickerAllowAnyEmail = () => html`
186172
<mgt-people-picker allow-any-email></mgt-people-picker>
187173
<!-- Type any email address and press comma(,), semicolon(;), tab or enter to add it -->

‎stories/components/peoplePicker/peoplePicker.style.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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-picker / Styles',
13+
component: 'mgt-people-picker',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const darkTheme = () => html`
18+
<mgt-people-picker class="mgt-dark"></mgt-people-picker>`;
19+
20+
export const customCssProperties = () => html`
21+
<mgt-people-picker></mgt-people-picker>
22+
<style>
23+
mgt-people-picker {
24+
--input-border: 10px 4px 10px 10px; /* sets all input area border */
25+
26+
/* OR individual input border sides */
27+
--input-border-bottom: 2px rgba(255, 255, 255, 0.5) solid;
28+
--input-border-right: 2px rgba(255, 255, 255, 0.5) solid;
29+
--input-border-left: 2px rgba(255, 255, 255, 0.5) solid;
30+
--input-border-top: 2px rgba(255, 255, 255, 0.5) solid;
31+
32+
--input-background-color: purple; /* input area background color */
33+
--input-border-color--hover: #008394; /* input area border hover color */
34+
--input-border-color--focus: #0f78d4; /* input area border focus color */
35+
36+
--dropdown-background-color: lightpink; /* selection area background color */
37+
--dropdown-item-hover-background: purple; /* person background color on hover */
38+
39+
--selected-person-background-color: pink; /* person item background color */
40+
41+
--color-sub1: white;
42+
--placeholder-color: whitesmoke; /* placeholder text color */
43+
--placeholder-color--focus: pink; /* placeholder text focus color */
44+
}
45+
</style>
46+
`;

‎stories/components/peoplePicker/peoplePicker.templating.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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-picker / Templating',
13+
component: 'mgt-people-picker',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const personTemplates = () => html`
18+
<mgt-people-picker>
19+
<template data-type="selected-person">
20+
<div>
21+
🧑 {{person.displayName}}
22+
</div>
23+
</template>
24+
<template data-type="person">
25+
<div>
26+
✋ {{person.displayName}} 🤚
27+
</div>
28+
</template>
29+
</mgt-people-picker>
30+
`;
31+
32+
export const DefaultTemplates = () => html`
33+
<mgt-people-picker>
34+
<template data-type="loading">
35+
<div class="root">
36+
loading
37+
</div>
38+
</template>
39+
<template data-type="no-data">
40+
<div class="root">
41+
there is no data
42+
</div>
43+
</template>
44+
</mgt-people-picker>
45+
`;
46+

0 commit comments

Comments
 (0)