Skip to content

Commit 7f0cd41

Browse files
juzserjuzser
committed
Update: all skeleton components & docs
1 parent 91aecdc commit 7f0cd41

File tree

11 files changed

+304
-15
lines changed

11 files changed

+304
-15
lines changed

‎src/classes/SkeletonTabs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"Tabs":"Polaris-SkeletonTabs__Tabs","Tab":"Polaris-SkeletonTabs__Tab","Tab-short":"Polaris-SkeletonTabs__Tab--short","Tab-long":"Polaris-SkeletonTabs__Tab--long"}

‎src/classes/SkeletonThumbnail.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"SkeletonThumbnail":"Polaris-SkeletonThumbnail","sizeExtraSmall":"Polaris-SkeletonThumbnail--sizeExtraSmall","sizeSmall":"Polaris-SkeletonThumbnail--sizeSmall","sizeMedium":"Polaris-SkeletonThumbnail--sizeMedium","sizeLarge":"Polaris-SkeletonThumbnail--sizeLarge"}

‎src/components/SkeletonPage/README.stories.mdx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import dedent from 'ts-dedent';
2+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
3+
import { SkeletonPage, Layout, LayoutSection, Card, TextContainer, SkeletonBodyText, SkeletonDisplayText, CardSection } from '@/polaris-vue';
4+
5+
<Meta
6+
title="Components / Feedback indicators / Skeleton page"
7+
component={ SkeletonPage }
8+
argTypes={{
9+
}}
10+
/>
11+
12+
export const Template = (args) => ({
13+
components: { SkeletonPage, Layout, LayoutSection, Card, TextContainer, SkeletonBodyText, SkeletonDisplayText, CardSection },
14+
setup() {
15+
return { args };
16+
},
17+
template: `
18+
<SkeletonPage primaryAction>
19+
<Layout>
20+
<LayoutSection>
21+
<Card sectioned>
22+
<SkeletonBodyText />
23+
</Card>
24+
<Card sectioned>
25+
<TextContainer>
26+
<SkeletonDisplayText size="small" />
27+
<SkeletonBodyText />
28+
</TextContainer>
29+
</Card>
30+
<Card sectioned>
31+
<TextContainer>
32+
<SkeletonDisplayText size="small" />
33+
<SkeletonBodyText />
34+
</TextContainer>
35+
</Card>
36+
</LayoutSection>
37+
<LayoutSection secondary>
38+
<Card>
39+
<CardSection>
40+
<TextContainer>
41+
<SkeletonDisplayText size="small" />
42+
<SkeletonBodyText :lines="2" />
43+
</TextContainer>
44+
</Card.Section>
45+
<CardSection>
46+
<SkeletonBodyText lines={1} />
47+
</Card.Section>
48+
</Card>
49+
<Card subdued>
50+
<CardSection>
51+
<TextContainer>
52+
<SkeletonDisplayText size="small" />
53+
<SkeletonBodyText :lines="2" />
54+
</TextContainer>
55+
</CardSection>
56+
<CardSection>
57+
<SkeletonBodyText :lines="2" />
58+
</CardSection>
59+
</Card>
60+
</LayoutSection>
61+
</Layout>
62+
</SkeletonPage>
63+
`,
64+
});
65+
66+
# Skeleton page
67+
68+
Skeleton page is used with other skeleton loading components to provide a low fidelity representation of the user interface (UI) before content appears on the page. It improves load times perceived by merchants.
69+
70+
<Canvas>
71+
<Story
72+
name="Skeleton page"
73+
parameters={{
74+
docs: {
75+
source: {
76+
code: dedent`
77+
<SkeletonPage primaryAction>
78+
<Layout>
79+
<LayoutSection>
80+
<Card sectioned>
81+
<SkeletonBodyText />
82+
</Card>
83+
<Card sectioned>
84+
<TextContainer>
85+
<SkeletonDisplayText size="small" />
86+
<SkeletonBodyText />
87+
</TextContainer>
88+
</Card>
89+
<Card sectioned>
90+
<TextContainer>
91+
<SkeletonDisplayText size="small" />
92+
<SkeletonBodyText />
93+
</TextContainer>
94+
</Card>
95+
</LayoutSection>
96+
<LayoutSection secondary>
97+
<Card>
98+
<CardSection>
99+
<TextContainer>
100+
<SkeletonDisplayText size="small" />
101+
<SkeletonBodyText :lines="2" />
102+
</TextContainer>
103+
</Card.Section>
104+
<CardSection>
105+
<SkeletonBodyText lines={1} />
106+
</Card.Section>
107+
</Card>
108+
<Card subdued>
109+
<CardSection>
110+
<TextContainer>
111+
<SkeletonDisplayText size="small" />
112+
<SkeletonBodyText :lines="2" />
113+
</TextContainer>
114+
</CardSection>
115+
<CardSection>
116+
<SkeletonBodyText :lines="2" />
117+
</CardSection>
118+
</Card>
119+
</LayoutSection>
120+
</Layout>
121+
</SkeletonPage>
122+
`,
123+
},
124+
},
125+
}}
126+
>
127+
{Template.bind({})}
128+
</Story>
129+
</Canvas>
130+
131+
<ArgsTable story="Skeleton page"/>

‎src/components/SkeletonPage/SkeletonPage.vue‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,15 @@ div(
44
role="status",
55
:aria-label="i18n.translate('Polaris.SkeletonPage.loadingLabel')",
66
)
7-
div(
8-
:class="styles.Header",
9-
)
7+
div(:class="styles.Header")
108
div(
119
v-if="breadcrumbs",
1210
:class="styles.BreadcrumbAction",
1311
:style="{ width: '60px' }",
1412
)
1513
SkeletonBodyText(:lines="1")
16-
div(
17-
:class="styles.TitleAndPrimaryAction",
18-
)
19-
div(
20-
:class="styles.TitleWrapper",
21-
)
14+
div(:class="styles.TitleAndPrimaryAction")
15+
div(:class="styles.TitleWrapper")
2216
h1(
2317
v-if="title",
2418
:class="styles.Title",
@@ -32,16 +26,14 @@ div(
3226
:class="styles.PrimaryAction",
3327
)
3428
SkeletonDisplayText(size="large")
35-
div(
36-
:class="styles.Content",
37-
)
29+
div(:class="styles.Content")
3830
slot
3931
</template>
4032
<script setup lang="ts">
41-
import { computed } from "vue";
33+
import { computed } from 'vue';
4234
import { classNames } from 'polaris/polaris-react/src/utilities/css';
4335
import styles from '@/classes/SkeletonPage.json';
44-
import { SkeletonBodyText, SkeletonDisplayText } from "@/components";
36+
import { SkeletonBodyText, SkeletonDisplayText } from '@/components';
4537
import { UseI18n } from '@/use';
4638
4739
interface Props {
@@ -57,7 +49,9 @@ interface Props {
5749
breadcrumbs?: boolean;
5850
}
5951
60-
const props = defineProps<Props>();
52+
const props = withDefaults(defineProps<Props>(), {
53+
title: '',
54+
});
6155
6256
const i18n = UseI18n();
6357

‎src/components/SkeletonTabs/README.stories.mdx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import dedent from 'ts-dedent';
2+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
3+
import { SkeletonTabs, Card } from '@/polaris-vue';
4+
5+
<Meta
6+
title="Components / Feedback indicators / Skeleton tabs"
7+
component={ SkeletonTabs }
8+
/>
9+
10+
export const Template = (args) => ({
11+
components: { SkeletonTabs, Card },
12+
setup() {
13+
return { args };
14+
},
15+
template: `
16+
<Card>
17+
<SkeletonTabs v-bind="args" />
18+
</Card>
19+
`,
20+
});
21+
22+
# Skeleton tabs
23+
24+
Skeleton tabs are used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.
25+
26+
<Canvas>
27+
<Story
28+
name="Skeleton tabs"
29+
args={{
30+
count: 2,
31+
}}
32+
parameters={{
33+
docs: {
34+
source: {
35+
code: dedent`
36+
<Card>
37+
<SkeletonTabs :count="2" />
38+
</Card>
39+
`,
40+
},
41+
},
42+
}}
43+
>
44+
{Template.bind({})}
45+
</Story>
46+
</Canvas>
47+
48+
<ArgsTable story="Skeleton tabs"/>

‎src/components/SkeletonTabs/SkeletonTabs.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template lang="pug">
2+
div(:class="styles.Tabs")
3+
div(
4+
v-for="key in count",
5+
:key="key",
6+
:class="className(key)",
7+
)
8+
SkeletonBodyText(:lines="1")
9+
</template>
10+
<script setup lang="ts">
11+
import { classNames } from 'polaris/polaris-react/src/utilities/css';
12+
import styles from '@/classes/SkeletonTabs.json';
13+
import { SkeletonBodyText } from '@/components';
14+
15+
interface Props {
16+
count?: number;
17+
}
18+
19+
const props = withDefaults(defineProps<Props>(), {
20+
count: 2,
21+
});
22+
23+
const className = (index: number) => {
24+
return classNames(styles.Tab, index % 2 === 0 ? styles['Tab-short'] : styles['Tab-long']);
25+
};
26+
</script>
27+
28+
<style lang="scss">
29+
@import 'polaris/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss';
30+
</style>

‎src/components/SkeletonTabs/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as SkeletonTabs } from './SkeletonTabs.vue';

‎src/components/SkeletonThumbnail/README.stories.mdx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import dedent from 'ts-dedent';
2+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
3+
import { SkeletonThumbnail } from '@/polaris-vue';
4+
5+
<Meta
6+
title="Components / Feedback indicators / Skeleton thumbnail"
7+
component={ SkeletonThumbnail }
8+
argTypes={{
9+
size: {
10+
options: ['extraSmall', 'small', 'medium', 'large'],
11+
control: { type: 'select' },
12+
}
13+
}}
14+
/>
15+
16+
export const Template = (args) => ({
17+
components: { SkeletonThumbnail },
18+
setup() {
19+
return { args };
20+
},
21+
template: `
22+
<SkeletonThumbnail v-bind="args" />
23+
`,
24+
});
25+
26+
# Skeleton thumbnail
27+
28+
Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Use for thumbnails in or outside of a card.
29+
30+
<Canvas>
31+
<Story
32+
name="Skeleton thumbnail"
33+
args={{
34+
size: 'medium',
35+
}}
36+
parameters={{
37+
docs: {
38+
source: {
39+
code: dedent`
40+
<SkeletonThumbnail size="medium" />
41+
`,
42+
},
43+
},
44+
}}
45+
>
46+
{Template.bind({})}
47+
</Story>
48+
</Canvas>
49+
50+
<ArgsTable story="Skeleton thumbnail"/>

‎src/components/SkeletonThumbnail/SkeletonThumbnail.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template lang="pug">
2+
div(:class="className")
3+
</template>
4+
<script setup lang="ts">
5+
import { classNames, variationName } from 'polaris/polaris-react/src/utilities/css';
6+
import styles from '@/classes/SkeletonThumbnail.json';
7+
8+
type Size = 'extraSmall' | 'small' | 'medium' | 'large';
9+
10+
interface Props {
11+
/**
12+
* Size of the thumbnail
13+
* @default 'medium'
14+
*/
15+
size?: Size;
16+
}
17+
18+
const props = withDefaults(defineProps<Props>(), {
19+
size: 'medium',
20+
});
21+
22+
const className = classNames(
23+
styles.SkeletonThumbnail,
24+
props.size && styles[variationName('size', props.size)],
25+
);
26+
</script>
27+
28+
<style lang="scss">
29+
@import 'polaris/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss';
30+
</style>

‎src/components/SkeletonThumbnail/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as SkeletonThumbnail } from './SkeletonThumbnail.vue';

0 commit comments

Comments
 (0)