Skip to content

Commit d6e1a57

Browse files
vogtnnmetulev
vogtn
and
nmetulev
authored
separating out the personCard stories (#1143)
* separating out the personCard stories * cleanup Co-authored-by: Nikola Metulev <[email protected]> Co-authored-by: Nikola Metulev <[email protected]>
1 parent 11d7c4e commit d6e1a57

File tree

5 files changed

+239
-117
lines changed

5 files changed

+239
-117
lines changed

‎stories/components/personCard.stories.js‎

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

‎stories/components/personCard/personCard.a.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-person-card',
13+
component: 'mgt-person-card',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const personCard = () => html`
18+
<mgt-person-card person-query="me"></mgt-person-card>
19+
`;
20+
21+
export const events = () => html`
22+
<!-- Open dev console and click on an event -->
23+
<!-- See js tab for event subscription -->
24+
25+
<mgt-person-card person-query="me"></mgt-person-card>
26+
<script>
27+
const personCard = document.querySelector('mgt-person-card');
28+
personCard.addEventListener('expanded', () => {
29+
console.log("expanded");
30+
})
31+
</script>
32+
`;
33+
34+
export const RTL = () => html`
35+
<mgt-person-card person-query="me" dir="rtl"></mgt-person-card>
36+
`;
37+
38+
export const localization = () => html`
39+
<mgt-person-card person-query="me"></mgt-person-card>
40+
<script>
41+
import { LocalizationHelper } from '@microsoft/mgt';
42+
LocalizationHelper.strings = {
43+
_components: {
44+
login: {
45+
signInLinkSubtitle: 'تسجيل الدخول',
46+
signOutLinkSubtitle: 'خروج'
47+
},
48+
'person-card': {
49+
sendEmailLinkSubtitle: 'ارسل بريد الكتروني',
50+
startChatLinkSubtitle: 'ابدأ الدردشة',
51+
showMoreSectionButton: 'أظهر المزيد' // global declaration
52+
},
53+
'person-card-contact': {
54+
contactSectionTitle: 'اتصل'
55+
},
56+
'person-card-organization': {
57+
reportsToSectionTitle: 'تقارير ل',
58+
directReportsSectionTitle: 'تقارير مباشرة',
59+
organizationSectionTitle: 'منظمة',
60+
youWorkWithSubSectionTitle: 'انت تعمل مع',
61+
userWorksWithSubSectionTitle: 'يعمل مع'
62+
},
63+
'person-card-messages': {
64+
emailsSectionTitle: 'رسائل البريد الإلكتروني'
65+
},
66+
'person-card-files': {
67+
filesSectionTitle: 'الملفات',
68+
sharedTextSubtitle: 'مشترك'
69+
},
70+
'person-card-profile': {
71+
SkillsAndExperienceSectionTitle: 'المهارات والخبرة',
72+
AboutCompactSectionTitle: 'حول',
73+
SkillsSubSectionTitle: 'مهارات',
74+
LanguagesSubSectionTitle: 'اللغات',
75+
WorkExperienceSubSectionTitle: 'خبرة في العمل',
76+
EducationSubSectionTitle: 'التعليم',
77+
professionalInterestsSubSectionTitle: 'المصالح المهنية',
78+
personalInterestsSubSectionTitle: 'اهتمامات شخصية',
79+
birthdaySubSectionTitle: 'عيد الميلاد',
80+
currentYearSubtitle: 'السنة الحالية'
81+
}
82+
}
83+
};
84+
</script>
85+
`;

‎stories/components/personCard/personCard.properties.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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-person-card / Properties',
13+
component: 'mgt-person-card',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const setCardDetails = () => html`
18+
<mgt-person-card class="my-person-card"></mgt-person-card>
19+
<script>
20+
const personCard = document.querySelector('.my-person-card');
21+
22+
personCard.personDetails = {
23+
displayName: 'Megan Bowen',
24+
title: 'CEO',
25+
mail: '[email protected]'
26+
};
27+
28+
// set image
29+
personCard.personImage = '';
30+
</script>
31+
`;
32+
33+
export const inheritDetails = () => html`
34+
<style>
35+
.note {
36+
margin: 2em 0 0 1em;
37+
color: #323130;
38+
font-size: 12px;
39+
}
40+
</style>
41+
<mgt-person person-query="me" view="twoLines" person-card="hover">
42+
<template data-type="person-card">
43+
<mgt-person-card inherit-details></mgt-person-card>
44+
</template>
45+
</mgt-person>
46+
<div class="note">
47+
(Hover on person to view Person Card)
48+
</div>
49+
`;
50+
51+
export const setUserId = () => html`
52+
<mgt-person-card user-id="2804bc07-1e1f-4938-9085-ce6d756a32d2"></mgt-person-card>
53+
`;

‎stories/components/personCard/personCard.style.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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-person-card / Style',
13+
component: 'mgt-person-card',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const darkTheme = () => html`
18+
<mgt-person-card person-query="me" class="mgt-dark"></mgt-person-card>
19+
<style>
20+
body {
21+
background-color: black;
22+
}
23+
</style>
24+
`;
25+
26+
export const customCSSProperties = () => html`
27+
<style>
28+
mgt-person-card {
29+
--person-card-display-name-font-size: 40px;
30+
--person-card-display-name-color: #ffffff;
31+
--person-card-title-font-size: 20px;
32+
--person-card-title-color: #ffffff;
33+
--person-card-subtitle-font-size: 10px;
34+
--person-card-subtitle-color: #ffffff;
35+
--person-card-details-title-font-size: 10px;
36+
--person-card-details-title-color: #b3bf0a;
37+
--person-card-details-item-font-size: 20px;
38+
--person-card-details-item-color: #3abf0a;
39+
--person-card-background-color: pink;
40+
}
41+
</style>
42+
<mgt-person-card person-query="me"></mgt-person-card>
43+
`;

‎stories/components/personCard/personCard.templating.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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-person-card / Templating',
13+
component: 'mgt-person-card',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const defaultTemplates = () => html`
18+
<mgt-person-card person-query="me">
19+
<template data-type="default">
20+
<div>
21+
<h3>user:</h3><p>{{this.person.givenName}}</p>
22+
<h3>mail:</h3><p>{{this.person.mail}}</p>
23+
</div>
24+
</template>
25+
</mgt-person-card>
26+
27+
`;
28+
29+
export const personDetails = () => html`
30+
<mgt-person person-query="me" view="twolines" person-card="hover">
31+
<template data-type="person-card">
32+
<mgt-person-card inherit-details>
33+
<template data-type="person-details">
34+
<div>
35+
<h3>user:</h3><p>{{this.person.givenName}}</p>
36+
<h3>mail:</h3><p>{{this.person.mail}}</p>
37+
</div>
38+
</mgt-person-card>
39+
</template>
40+
</mgt-person>
41+
`;
42+
43+
export const additionalDetails = () => html`
44+
<mgt-person person-query="me" view="twolines" person-card="hover">
45+
<template data-type="person-card">
46+
<mgt-person-card inherit-details>
47+
<template data-type="additional-details">
48+
<h3>Stuffed Animal Friends:</h3>
49+
<ul>
50+
<li>Giraffe</li>
51+
<li>lion</li>
52+
<li>Rabbit</li>
53+
</ul>
54+
</template>
55+
</mgt-person-card>
56+
</template>
57+
</mgt-person>
58+
`;

0 commit comments

Comments
 (0)