Skip to content

Commit 92a4fdb

Browse files
mariuslundgardmariuslundgard
committed
test: update workshop stories
1 parent a98a7b9 commit 92a4fdb

File tree

10 files changed

+89
-15
lines changed

10 files changed

+89
-15
lines changed

‎src/core/__workshop__/constants.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,8 +246,8 @@ export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} =
246246
'color': 'color',
247247
}
248248

249-
export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
250-
None: '',
249+
export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | 'none'} = {
250+
None: 'none',
251251
Ellipsis: 'ellipsis',
252252
}
253253

‎src/core/components/breadcrumbs/__workshop__/buttons.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import {ChevronRightIcon} from '@sanity/icons'
2+
import {Box, Breadcrumbs, Button, Card, Flex, Text} from '@sanity/ui'
3+
import {useSelect} from '@sanity/ui-workshop'
4+
5+
const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
6+
'(none)': 0,
7+
'1': 1,
8+
'2': 2,
9+
'3': 3,
10+
'4': 4,
11+
'5': 5,
12+
'6': 6,
13+
'7': 7,
14+
}
15+
16+
export default function Example() {
17+
const maxLength =
18+
useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
19+
20+
return (
21+
<Flex align="center" height="fill" justify="center" padding={4} sizing="border">
22+
<Card padding={1} radius={3} shadow={1}>
23+
<Breadcrumbs
24+
gapX={0}
25+
expandButton={{padding: 2}}
26+
maxLength={maxLength}
27+
separator={
28+
<Box paddingY={2} style={{opacity: 0.5}}>
29+
<Text muted size={1}>
30+
<ChevronRightIcon />
31+
</Text>
32+
</Box>
33+
}
34+
// space={0}
35+
>
36+
<Button href="#" mode="bleed" padding={2} text="Root" />
37+
<Button href="#" mode="bleed" padding={2} text="Category A of some length" />
38+
<Button href="#" mode="bleed" padding={2} text="Category B" />
39+
<Button href="#" mode="bleed" padding={2} text="Category C" />
40+
<Button
41+
href="#"
42+
mode="bleed"
43+
padding={2}
44+
text="Category D of an every larger and more extended length"
45+
textOverflow="none"
46+
/>
47+
<Button href="#" mode="bleed" padding={2} text="Category E" />
48+
<Button href="#" mode="bleed" padding={2} text="Category F" />
49+
<Box padding={2}>
50+
<Text size={1} weight="semibold">
51+
Item
52+
</Text>
53+
</Box>
54+
</Breadcrumbs>
55+
</Card>
56+
</Flex>
57+
)
58+
}

‎src/core/components/breadcrumbs/__workshop__/example.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,17 @@ export default function Example() {
1717
useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
1818

1919
return (
20-
<Flex align="center" height="fill" justify="center">
20+
<Flex align="center" height="fill" justify="center" padding={4} sizing="border">
2121
<Breadcrumbs
22+
gapX={1}
23+
gapY={3}
2224
maxLength={maxLength}
2325
separator={
2426
<Text muted size={1}>
2527
/
2628
</Text>
2729
}
28-
space={2}
30+
// space={2}
2931
>
3032
<Text size={1}>
3133
<a href="#">Root</a>

‎src/core/components/breadcrumbs/__workshop__/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,10 @@ export default defineScope({
1010
title: 'Example',
1111
component: lazy(() => import('./example')),
1212
},
13+
{
14+
name: 'buttons',
15+
title: 'Buttons',
16+
component: lazy(() => import('./buttons')),
17+
},
1318
],
1419
})

‎src/core/primitives/button/__workshop__/custom.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
33

44
export default function CustomStory() {
55
const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
6+
const len = tones.length
67

78
return (
8-
<Flex align="center" height="fill" justify="center">
9+
<Flex align="center" height="fill" justify="center" padding={4} sizing="border">
910
<Stack space={2}>
10-
<Grid columns={5} gap={1}>
11+
<Grid columns={len} gap={1}>
1112
{tones.map(([title, tone]) => (
1213
<Button key={tone} mode="ghost" padding={3} tone={tone}>
1314
<Stack space={2}>
@@ -24,7 +25,7 @@ export default function CustomStory() {
2425
</Button>
2526
))}
2627
</Grid>
27-
<Grid columns={5} gap={1}>
28+
<Grid columns={len} gap={1}>
2829
{tones.map(([title, tone]) => (
2930
<Button key={tone} mode="default" padding={3} tone={tone}>
3031
<Stack space={2}>

‎src/core/primitives/button/__workshop__/mixedChildren.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function MixedChildrenStory() {
55
return (
66
<Flex align="center" height="fill" justify="center">
77
<Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">
8-
<span style={{display: 'none'}}>test</span>
8+
<span style={{opacity: 0.5}}>raw span</span>
99
</Button>
1010
</Flex>
1111
)

‎src/core/primitives/button/__workshop__/props.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ import {
99
WORKSHOP_ICON_SYMBOL_OPTIONS,
1010
WORKSHOP_TEXT_SIZE_OPTIONS,
1111
WORKSHOP_SPACE_OPTIONS,
12+
WORKSHOP_TEXT_OVERFLOW_OPTIONS,
1213
} from '../../../__workshop__/constants'
1314

1415
export default function ButtonStory() {
1516
const disabled = useBoolean('Disabled', false, 'Props')
16-
const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
17+
const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
1718
const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
1819
const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
1920
const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
@@ -26,9 +27,15 @@ export default function ButtonStory() {
2627
const textAlign =
2728
useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
2829
const textProp = useText('Text', 'Label', 'Props')
30+
const textOverflow = useSelect(
31+
'Text overflow',
32+
WORKSHOP_TEXT_OVERFLOW_OPTIONS,
33+
'ellipsis',
34+
'Props',
35+
)
2936

3037
return (
31-
<Flex align="center" height="fill" justify="center">
38+
<Flex align="center" height="fill" justify="center" padding={4} sizing="border">
3239
<Button
3340
disabled={disabled}
3441
fontSize={fontSize}
@@ -42,6 +49,7 @@ export default function ButtonStory() {
4249
selected={selected}
4350
space={space}
4451
textAlign={textAlign}
52+
textOverflow={textOverflow}
4553
text={textProp}
4654
tone={tone}
4755
/>

‎src/core/primitives/button/__workshop__/sanityUploadButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
1818
width: stretch;
1919
}
2020
21-
& span:nth-child(2) {
21+
& > span:nth-child(2) {
2222
width: 0;
2323
flex: none;
2424
padding: 0;

‎src/core/primitives/button/__workshop__/stacked.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ import {
1313
export default function StackedStory() {
1414
const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
1515
const disabled = useBoolean('Disabled', false, 'Props')
16-
const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
16+
const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
1717
const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
1818
const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
1919
const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
2020
const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
2121
const onClick = useAction('onClick')
22-
const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
23-
const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
22+
const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
23+
const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
2424
const selected = useBoolean('Selected', false, 'Props')
2525
const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
2626

‎src/core/primitives/label/__workshop__/plain.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function PlainStory() {
1010
const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
1111
const textChild = useText('Text', 'Label text', 'Props')
1212
const textOverflow =
13-
useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
13+
useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, 'none', 'Props') || undefined
1414
const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
1515

1616
return (

0 commit comments

Comments
 (0)