Skip to content

Commit 023ca2a

Browse files
juzserjuzser
committed
Update: docs for new components
1 parent 3ac8a11 commit 023ca2a

File tree

9 files changed

+412
-47
lines changed

9 files changed

+412
-47
lines changed

‎src/components/Bleed/Bleed.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const negativeMargins = computed(() => {
6464
});
6565
6666
const style = computed(() => {
67-
return {
67+
const fullStyles = {
6868
...(negativeMargins.value.bottom
6969
? {'--pc-bleed-margin-bottom': `var(--p-space-${negativeMargins.value.bottom})`}
7070
: undefined),
@@ -77,7 +77,14 @@ const style = computed(() => {
7777
...(negativeMargins.value.top
7878
? {'--pc-bleed-margin-top': `var(--p-space-${negativeMargins.value.top})`}
7979
: undefined),
80-
} as Record<string, any>;
80+
};
81+
82+
return Object.keys(fullStyles).reduce((acc, key) => {
83+
if (fullStyles[key] !== undefined) {
84+
acc[key] = fullStyles[key];
85+
}
86+
return acc;
87+
}, {} as Record<string, any>);
8188
});
8289
</script>
8390

‎src/components/Columns/Columns.vue‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,37 @@ interface Props {
3232
3333
const props = defineProps<Props>();
3434
35-
const style = computed(() => ({
36-
'--pc-columns-xs': formatColumns(props.columns?.xs || 6),
37-
'--pc-columns-sm': formatColumns(props.columns?.sm),
38-
'--pc-columns-md': formatColumns(props.columns?.md),
39-
'--pc-columns-lg': formatColumns(props.columns?.lg),
40-
'--pc-columns-xl': formatColumns(props.columns?.xl),
41-
'--pc-columns-space-xs': props.spacing?.xs
42-
? `var(--p-space-${props.spacing?.xs})`
43-
: undefined,
44-
'--pc-columns-space-sm': props.spacing?.sm
45-
? `var(--p-space-${props.spacing?.sm})`
46-
: undefined,
47-
'--pc-columns-space-md': props.spacing?.md
48-
? `var(--p-space-${props.spacing?.md})`
49-
: undefined,
50-
'--pc-columns-space-lg': props.spacing?.lg
51-
? `var(--p-space-${props.spacing?.lg})`
52-
: undefined,
53-
'--pc-columns-space-xl': props.spacing?.xl
54-
? `var(--p-space-${props.spacing?.xl})`
55-
: undefined,
56-
} as Record<string, any>));
35+
const style = computed(() => {
36+
const fullStyles = {
37+
'--pc-columns-xs': formatColumns(props.columns?.xs || 6),
38+
'--pc-columns-sm': formatColumns(props.columns?.sm),
39+
'--pc-columns-md': formatColumns(props.columns?.md),
40+
'--pc-columns-lg': formatColumns(props.columns?.lg),
41+
'--pc-columns-xl': formatColumns(props.columns?.xl),
42+
'--pc-columns-space-xs': props.spacing?.xs
43+
? `var(--p-space-${props.spacing?.xs})`
44+
: undefined,
45+
'--pc-columns-space-sm': props.spacing?.sm
46+
? `var(--p-space-${props.spacing?.sm})`
47+
: undefined,
48+
'--pc-columns-space-md': props.spacing?.md
49+
? `var(--p-space-${props.spacing?.md})`
50+
: undefined,
51+
'--pc-columns-space-lg': props.spacing?.lg
52+
? `var(--p-space-${props.spacing?.lg})`
53+
: undefined,
54+
'--pc-columns-space-xl': props.spacing?.xl
55+
? `var(--p-space-${props.spacing?.xl})`
56+
: undefined,
57+
} as Record<string, any>;
58+
59+
return Object.keys(fullStyles).reduce((acc, key) => {
60+
if (fullStyles[key] !== undefined) {
61+
acc[key] = fullStyles[key];
62+
}
63+
return acc;
64+
}, {});
65+
});
5766
5867
function formatColumns(columns?: number | string) {
5968
if (!columns) {

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
2+
import { Columns, Text, Inline, SkeletonDisplayText } from '@/polaris-vue';
3+
import dedent from 'ts-dedent';
4+
import { ref } from 'vue';
5+
6+
<Meta
7+
title="Components / Columns"
8+
component={ Columns }
9+
argTypes={{
10+
default: {
11+
table: {
12+
disable: true,
13+
},
14+
},
15+
}}
16+
/>
17+
18+
export const Template = (args) => ({
19+
components: { Columns, Text, Inline, SkeletonDisplayText },
20+
setup() {
21+
return { args };
22+
},
23+
template: `
24+
<Columns>
25+
<SkeletonDisplayText />
26+
<SkeletonDisplayText />
27+
<SkeletonDisplayText />
28+
<SkeletonDisplayText />
29+
<SkeletonDisplayText />
30+
<SkeletonDisplayText />
31+
</Columns>
32+
`,
33+
});
34+
35+
# Columns
36+
37+
Displays content horizontally in one or more columns with equal spacing between.
38+
39+
<Canvas>
40+
<Story
41+
name="Columns"
42+
height="200px"
43+
parameters={{
44+
docs: {
45+
source: {
46+
code: dedent`
47+
<Columns>
48+
<SkeletonDisplayText />
49+
<SkeletonDisplayText />
50+
<SkeletonDisplayText />
51+
<SkeletonDisplayText />
52+
<SkeletonDisplayText />
53+
<SkeletonDisplayText />
54+
</Columns>
55+
`,
56+
},
57+
},
58+
}}
59+
>
60+
{Template.bind({})}
61+
</Story>
62+
</Canvas>
63+
64+
<ArgsTable story="Columns" />
65+
66+
---
67+
68+
```javascript
69+
type Columns = {
70+
xs?: string | number;
71+
sm?: string | number;
72+
md?: string | number;
73+
lg?: string | number;
74+
xl?: string | number;
75+
}
76+
```
77+
78+
```javascript
79+
type Spacing = {
80+
xs?: "0" | "025" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "28" | "32";
81+
sm?: "0" ...;
82+
md?: "0" ...;
83+
lg?: "0" ...;
84+
xl?: "0" ...;
85+
}
86+
```

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
2+
import { ContentBlock, Box, Text } from '@/polaris-vue';
3+
import dedent from 'ts-dedent';
4+
import { ref } from 'vue';
5+
6+
<Meta
7+
title="Components / Content block"
8+
component={ ContentBlock }
9+
argTypes={{
10+
default: {
11+
table: {
12+
disable: true,
13+
},
14+
},
15+
width: {
16+
control: {
17+
type: 'select',
18+
options: ['md', 'lg'],
19+
},
20+
},
21+
}}
22+
/>
23+
24+
export const Template = (args) => ({
25+
components: { ContentBlock, Box, Text },
26+
setup() {
27+
return { args };
28+
},
29+
template: `
30+
<div :style="{width: '100%'}">
31+
<ContentBlock width="md">
32+
<Box background="surface" borderRadius="2" padding="5" shadow="card">
33+
<Text variant="bodySm" as="h3" alignment="center">
34+
medium
35+
</Text>
36+
</Box>
37+
</ContentBlock>
38+
<br />
39+
<ContentBlock width="lg">
40+
<Box background="surface" borderRadius="2" padding="5" shadow="card">
41+
<Text variant="bodySm" as="h3" alignment="center">
42+
large
43+
</Text>
44+
</Box>
45+
</ContentBlock>
46+
</div>
47+
`,
48+
});
49+
50+
# Content block
51+
52+
Used to create a container that centers and sets the maximum width of the content within.
53+
54+
<Canvas>
55+
<Story
56+
name="Content block"
57+
height="200px"
58+
parameters={{
59+
docs: {
60+
source: {
61+
code: dedent`
62+
`,
63+
},
64+
},
65+
}}
66+
>
67+
{Template.bind({})}
68+
</Story>
69+
</Canvas>
70+
71+
<ArgsTable story="Content block" />

‎src/components/IndexTable/children/HeadingContentWrapper.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ UnstyledButton(
2828
HeadingContent(v-else, :heading="heading")
2929
</template>
3030
<script setup lang="ts">
31-
import { computed } from 'vue';
31+
import { computed, VueElement } from 'vue';
3232
import { classNames } from '@/utilities/css';
3333
import SortAscendingMajor from '@icons/SortAscendingMajor.svg';
3434
import SortDescendingMajor from '@icons/SortDescendingMajor.svg';
@@ -68,14 +68,14 @@ const newDirection = computed(() => {
6868
});
6969
const SourceComponent = computed(() => {
7070
if (isCurrentlySorted.value) {
71-
return props.sortDirection === 'ascending'
71+
return (props.sortDirection === 'ascending'
7272
? SortAscendingMajor
73-
: SortDescendingMajor;
73+
: SortDescendingMajor) as any;
7474
}
7575
76-
return props.defaultSortDirection === 'ascending'
76+
return (props.defaultSortDirection === 'ascending'
7777
? SortAscendingMajor
78-
: SortDescendingMajor;
78+
: SortDescendingMajor) as any;
7979
});
8080
8181
const className = computed(() => classNames(

‎src/components/Inline/Inline.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,16 @@ const props = withDefaults(defineProps<Props>(), {
4040
4141
const slots = useSlots();
4242
43-
const style = computed(() => ({
44-
'--pc-inline-align': props.align,
45-
'--pc-inline-align-y': props.alignY ? AlignY[props.alignY] : undefined,
46-
'--pc-inline-wrap': props.wrap ? 'wrap' : 'nowrap',
47-
'--pc-inline-spacing': `var(--p-space-${props.spacing})`,
48-
} as Record<string, any>));
43+
const style = computed(() => {
44+
const fullStyles = {
45+
'--pc-inline-align': props.align,
46+
'--pc-inline-align-y': props.alignY ? AlignY[props.alignY] : undefined,
47+
'--pc-inline-wrap': props.wrap ? 'wrap' : 'nowrap',
48+
'--pc-inline-spacing': `var(--p-space-${props.spacing})`,
49+
};
50+
51+
return Object.fromEntries(Object.entries(fullStyles).filter(([, value]) => value));
52+
});
4953
5054
const slotsElms = computed(() => {
5155
let elms : VNodeArrayChildren = [];

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
2+
import { Inline, SkeletonDisplayText } from '@/polaris-vue';
3+
import dedent from 'ts-dedent';
4+
import { ref } from 'vue';
5+
6+
<Meta
7+
title="Components / Inline"
8+
component={ Inline }
9+
argTypes={{
10+
default: {
11+
table: {
12+
disable: true,
13+
},
14+
},
15+
align: {
16+
control: {
17+
type: 'select',
18+
options: ['start', 'center', 'end'],
19+
},
20+
},
21+
alignY: {
22+
control: {
23+
type: 'select',
24+
options: ['baseline', 'top', 'center', 'bottom'],
25+
},
26+
},
27+
spacing: {
28+
control: {
29+
type: 'select',
30+
options: ['0', '025', '05', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16', '20', '24', '28', '32'],
31+
},
32+
},
33+
}}
34+
/>
35+
36+
export const Template = (args) => ({
37+
components: { Inline, SkeletonDisplayText },
38+
setup() {
39+
return { args };
40+
},
41+
template: `
42+
<Inline>
43+
<SkeletonDisplayText :style="{width: '300px', height: '60px'}" />
44+
<SkeletonDisplayText :style="{width: '300px'}" />
45+
<SkeletonDisplayText :style="{width: '300px'}" />
46+
<SkeletonDisplayText :style="{width: '300px'}" />
47+
<SkeletonDisplayText :style="{width: '300px'}" />
48+
<SkeletonDisplayText :style="{width: '300px'}" />
49+
</Inline>
50+
`,
51+
});
52+
53+
# Inline
54+
55+
Use to arrange items in a horizontal row with equal spacing around them. Items wrap onto multiple lines when needed.
56+
57+
<Canvas>
58+
<Story
59+
name="Inline"
60+
height="200px"
61+
parameters={{
62+
docs: {
63+
source: {
64+
code: dedent`
65+
`,
66+
},
67+
},
68+
}}
69+
>
70+
{Template.bind({})}
71+
</Story>
72+
</Canvas>
73+
74+
<ArgsTable story="Inline" />
75+
76+
---
77+

0 commit comments

Comments
 (0)