Skip to content

Commit e27e0d2

Browse files
musalenmetulev
musale
and
nmetulev
authored
Re-arrange and update the file stories. (#1136)
* Re-arrange and update the file stories. Re-arranged the stories to have the same format as the agenda component. Added the following stories: * Attribute stories for list-id and fileDetails * Templating * Events * Apply suggestions from code review Co-authored-by: Nikola Metulev <[email protected]>
1 parent cfd7620 commit e27e0d2

File tree

5 files changed

+268
-76
lines changed

5 files changed

+268
-76
lines changed

‎stories/components/file.stories.js‎

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

‎stories/components/file/file.a.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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-file',
13+
component: 'mgt-file',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const simple = () => html`
18+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
19+
`;
20+
21+
22+
export const RTL = () => html`
23+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2" dir="rtl"></mgt-file>
24+
`;

‎stories/components/file/file.properties.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
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-file / Properties',
13+
component: 'mgt-file',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const fileQuery = () => html`
18+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
19+
`;
20+
21+
export const fileViews = () => html`
22+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2" view="oneline"></mgt-file>
23+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2" view="twolines"></mgt-file>
24+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2" view="threelines"></mgt-file>
25+
`;
26+
27+
export const setIcon = () => html`
28+
<mgt-file
29+
file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
30+
file-icon="https://github.com//microsoftgraph/microsoft-graph-toolkit/blob/main/assets/favicon.png?raw=true"
31+
></mgt-file>
32+
`;
33+
34+
export const getFileByDriveId = () => html`
35+
<mgt-file
36+
drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
37+
item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
38+
></mgt-file>
39+
<mgt-file
40+
drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
41+
item-path="Attachments"
42+
></mgt-file>
43+
`;
44+
45+
export const getFileByGroupId = () => html`
46+
<mgt-file group-id="02bd9fd6-8f93-4758-87c3-1fb73740a315" item-id="01XKNBVLNL4EWP43GPU5EY67UHT3DGKCWQ"></mgt-file>
47+
<mgt-file group-id="02bd9fd6-8f93-4758-87c3-1fb73740a315" item-path="Onboarding/Employee Handbook.docx"></mgt-file>
48+
`;
49+
50+
export const getFileByListId = () => html`
51+
<mgt-file
52+
list-id="23f045a1-e6df-457c-8d95-a6ebd5feda5d"
53+
site-id="d82312f9-b23b-4cbc-95d5-3e0d94e68c1e"
54+
item-id="49">
55+
</mgt-file>
56+
`;
57+
58+
export const getSignedinUserFiles = () => html`
59+
<mgt-file item-id="01BYE5RZ6QN3ZWBTUFOFD3GSPGOHDJD36K"></mgt-file>
60+
<mgt-file item-path="Class Documents/01. Organic Chemistry Header Image.jpg"></mgt-file>
61+
`;
62+
63+
export const getFileBySiteId = () => html`
64+
<mgt-file
65+
site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
66+
item-id="01OXYKUGW6HG5WM2OBTVDZ72ABJAY5P4BY"
67+
></mgt-file>
68+
<mgt-file
69+
site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
70+
item-Path="/DemoDocs/AdminDemo"
71+
></mgt-file>
72+
`;
73+
74+
export const getFileByUserId = () => html`
75+
<mgt-person user-id="e3d0513b-449e-4198-ba6f-bd97ae7cae85" view="twolines"></mgt-person>
76+
<mgt-file user-id="e3d0513b-449e-4198-ba6f-bd97ae7cae85" item-id="01HT2SVWU2EX3RVDWYAFAZDLCGYFZTCUHC"></mgt-file>
77+
<mgt-file user-id="e3d0513b-449e-4198-ba6f-bd97ae7cae85" item-path="Fashion Products v2.pdf"></mgt-file>
78+
`;
79+
80+
export const getFileByInsights = () => html`
81+
<mgt-file
82+
insight-type="shared"
83+
insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
84+
></mgt-file>
85+
`;
86+
87+
export const changeLineProperties = () => html`
88+
<mgt-file
89+
file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
90+
line1-property="lastModifiedDateTime"
91+
line2-property="size"
92+
line3-property="name"
93+
></mgt-file>
94+
`;
95+
96+
export const supplyDriveItem = () => html`
97+
<mgt-file
98+
class="my-file"
99+
line1-property="lastModifiedDateTime"
100+
line2-property="name"
101+
>
102+
</mgt-file>
103+
<script>
104+
const file = document.querySelector('.my-file');
105+
106+
file.fileDetails = {
107+
size: 298990,
108+
name: "Sample Drive Item File",
109+
}
110+
</script>
111+
`;
112+
113+
// export const mediaQuery = () => html`
114+
// <mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
115+
// <p id="file-media-query">Getting media query</p>
116+
// <script>
117+
// const mediaQuery = document.querySelector('mgt-file').ComponentMediaQuery;
118+
// console.log(mediaQuery)
119+
// const display = document.getElementById("file-media-query");
120+
// display.innerHTML = mediaQuery;
121+
122+
// </script>
123+
// `;

‎stories/components/file/file.style.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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-file / Style',
13+
component: 'mgt-file',
14+
decorators: [withCodeEditor]
15+
};
16+
17+
export const darkTheme = () => html`
18+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2" class="mgt-dark"></mgt-file>
19+
`;
20+
21+
export const customCSSProperties = () => html`
22+
<style>
23+
mgt-file {
24+
--file-type-icon-size: 30px;
25+
--file-border: 4px dotted #ffbdc3;
26+
--file-box-shadow: none;
27+
--file-background-color: #e0f8db;
28+
--font-family: 'Comic Sans MS', cursive, sans-serif;;
29+
--font-size: 15px;
30+
--font-weight: 2px;
31+
--text-transform: "";
32+
--color: black;
33+
--line2-font-size: 11px;
34+
--line2-font-weight : 3px;
35+
--line2-color: red;
36+
--line2-text-transform: capitalize;
37+
--line3-font-size: 12px;
38+
--line3-font-weight: 3px;
39+
--line3-color: purple;
40+
--line3-text-transform: lowercase;
41+
}
42+
</style>
43+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
44+
`;

‎stories/components/file/file.templating.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { html } from 'lit-element';
2+
import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
3+
4+
export default {
5+
title: 'Components / mgt-file / Templating',
6+
component: 'mgt-file',
7+
decorators: [withCodeEditor]
8+
};
9+
10+
export const defaultTemplates = () => html`
11+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
12+
<template data-type="default">
13+
<div class="root">
14+
<span>Found the file {{file.name}}</span>
15+
<p>The templateRendered event has been fired!</p>
16+
</div>
17+
</template>
18+
<template data-type="loading">
19+
<div class="root">
20+
loading file
21+
</div>
22+
</template>
23+
<template data-type="no-data">
24+
<div class="root">
25+
there is no data
26+
</div>
27+
</template>
28+
</mgt-file>
29+
`;
30+
31+
export const templateContext = () => html`
32+
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
33+
<template data-type="default">
34+
<div class="root">
35+
<span>Found the file {{file.name}} created on {{dayFromDateTime(file.createdDateTime)}}
36+
</div>
37+
</template>
38+
<template data-type="loading">
39+
<div class="root">
40+
loading file
41+
</div>
42+
</template>
43+
<template data-type="no-data">
44+
<div class="root">
45+
there is no data
46+
</div>
47+
</template>
48+
</mgt-file>
49+
<script>
50+
const file = document.querySelector('mgt-file').templateContext = {
51+
dayFromDateTime: dateTimeString => {
52+
let date = new Date(dateTimeString);
53+
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
54+
let monthNames = [
55+
'January',
56+
'February',
57+
'March',
58+
'April',
59+
'May',
60+
'June',
61+
'July',
62+
'August',
63+
'September',
64+
'October',
65+
'November',
66+
'December'
67+
];
68+
69+
let monthIndex = date.getMonth();
70+
let day = date.getDate();
71+
let year = date.getFullYear();
72+
73+
return monthNames[monthIndex] + ' ' + day + ' ' + year;
74+
}
75+
}
76+
</script>
77+
`;

0 commit comments

Comments
 (0)