@artsy/palette 31.4.3 → 31.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Theme.d.ts +2 -2
- package/dist/elements/BorderedRadio/BorderedRadio.d.ts +67 -66
- package/dist/elements/Box/Box.d.ts +2 -1
- package/dist/elements/Box/Box.js +8 -1
- package/dist/elements/Box/Box.js.map +1 -1
- package/dist/elements/Box/Box.story.d.ts +5 -0
- package/dist/elements/Box/Box.story.js +50 -0
- package/dist/elements/Box/Box.story.js.map +1 -0
- package/dist/elements/Clickable/Clickable.d.ts +1 -1
- package/dist/elements/Expandable/Expandable.d.ts +1 -0
- package/dist/elements/Expandable/Expandable.js +5 -2
- package/dist/elements/Expandable/Expandable.js.map +1 -1
- package/dist/elements/Expandable/Expandable.story.js +2 -1
- package/dist/elements/Expandable/Expandable.story.js.map +1 -1
- package/package.json +2 -2
package/dist/Theme.d.ts
CHANGED
|
@@ -246,7 +246,7 @@ declare const THEMES: {
|
|
|
246
246
|
};
|
|
247
247
|
};
|
|
248
248
|
};
|
|
249
|
-
textVariants: Record<string, Record<"
|
|
249
|
+
textVariants: Record<string, Record<"small" | "caption" | "title" | "text" | "largeTitle" | "subtitle" | "mediumText", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
|
|
250
250
|
};
|
|
251
251
|
v3: {
|
|
252
252
|
id: string;
|
|
@@ -575,7 +575,7 @@ export declare const isThemeV2: (theme: TTheme) => theme is {
|
|
|
575
575
|
};
|
|
576
576
|
};
|
|
577
577
|
};
|
|
578
|
-
textVariants: Record<string, Record<"
|
|
578
|
+
textVariants: Record<string, Record<"small" | "caption" | "title" | "text" | "largeTitle" | "subtitle" | "mediumText", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
|
|
579
579
|
};
|
|
580
580
|
/** Typeguard for v3 */
|
|
581
581
|
export declare const isThemeV3: (theme: TTheme) => theme is {
|
|
@@ -3,99 +3,103 @@ import { RadioProps } from "../Radio";
|
|
|
3
3
|
export declare type BorderedRadioProps = RadioProps;
|
|
4
4
|
/** A radio button with a border */
|
|
5
5
|
export declare const BorderedRadio: import("styled-components").StyledComponentClass<RadioProps, any, {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
color?: string | undefined;
|
|
12
|
-
bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
6
|
+
gap?: import("styled-system").ResponsiveValue<string | number, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
7
|
+
property?: string | undefined;
|
|
8
|
+
alignContent?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
9
|
+
alignItems?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
10
|
+
alignSelf?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
13
11
|
backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
14
|
-
opacity?: import("styled-system").ResponsiveValue<import("csstype").GlobalsNumber, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
15
|
-
background?: import("styled-system").ResponsiveValue<import("csstype").BackgroundProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
16
12
|
backgroundImage?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
17
|
-
backgroundSize?: import("styled-system").ResponsiveValue<import("csstype").BackgroundSizeProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
18
|
-
backgroundPosition?: import("styled-system").ResponsiveValue<import("csstype").BackgroundPositionProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
19
13
|
backgroundRepeat?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
borderTopWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
25
|
-
borderBottomWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
26
|
-
borderLeftWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
27
|
-
borderRightWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
28
|
-
borderStyle?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
29
|
-
borderTopStyle?: import("styled-system").ResponsiveValue<import("csstype").BorderTopStyleProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
14
|
+
backgroundSize?: import("styled-system").ResponsiveValue<import("csstype").BackgroundSizeProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
15
|
+
borderBottomColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
16
|
+
borderBottomLeftRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
17
|
+
borderBottomRightRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
30
18
|
borderBottomStyle?: import("styled-system").ResponsiveValue<import("csstype").BorderBottomStyleProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
19
|
+
borderBottomWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
20
|
+
borderLeftColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
31
21
|
borderLeftStyle?: import("styled-system").ResponsiveValue<import("csstype").BorderLeftStyleProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
22
|
+
borderLeftWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
23
|
+
borderRightColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
32
24
|
borderRightStyle?: import("styled-system").ResponsiveValue<import("csstype").BorderRightStyleProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
33
|
-
|
|
25
|
+
borderRightWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
34
26
|
borderTopColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
35
|
-
borderBottomColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
36
|
-
borderLeftColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
37
|
-
borderRightColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
38
|
-
borderRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
39
27
|
borderTopLeftRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
40
28
|
borderTopRightRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
alignItems?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
48
|
-
alignContent?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
49
|
-
justifyItems?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
50
|
-
justifyContent?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
51
|
-
flexWrap?: import("styled-system").ResponsiveValue<import("csstype").FlexWrapProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
29
|
+
borderTopStyle?: import("styled-system").ResponsiveValue<import("csstype").BorderTopStyleProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
30
|
+
borderTopWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
31
|
+
bottom?: import("styled-system").ResponsiveValue<import("csstype").BottomProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
32
|
+
color?: string | undefined;
|
|
33
|
+
display?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
34
|
+
flexBasis?: import("styled-system").ResponsiveValue<import("csstype").FlexBasisProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
52
35
|
flexDirection?: import("styled-system").ResponsiveValue<import("csstype").FlexDirectionProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
53
|
-
flex?: import("styled-system").ResponsiveValue<import("csstype").FlexProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
54
36
|
flexGrow?: import("styled-system").ResponsiveValue<import("csstype").GlobalsNumber, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
55
37
|
flexShrink?: import("styled-system").ResponsiveValue<import("csstype").GlobalsNumber, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
56
|
-
|
|
57
|
-
justifySelf?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
58
|
-
alignSelf?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
59
|
-
order?: import("styled-system").ResponsiveValue<import("csstype").GlobalsNumber, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
60
|
-
gridArea?: import("styled-system").ResponsiveValue<import("csstype").GridAreaProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
61
|
-
width?: import("styled-system").ResponsiveValue<import("csstype").WidthProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
38
|
+
flexWrap?: import("styled-system").ResponsiveValue<import("csstype").FlexWrapProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
62
39
|
height?: import("styled-system").ResponsiveValue<import("csstype").HeightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
40
|
+
justifyContent?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
41
|
+
justifyItems?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
42
|
+
justifySelf?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
43
|
+
left?: import("styled-system").ResponsiveValue<import("csstype").LeftProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
44
|
+
marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
45
|
+
marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
46
|
+
marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
47
|
+
marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
66
48
|
maxHeight?: import("styled-system").ResponsiveValue<import("csstype").MaxHeightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
49
|
+
maxWidth?: import("styled-system").ResponsiveValue<import("csstype").MaxWidthProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
50
|
+
minHeight?: import("styled-system").ResponsiveValue<import("csstype").MinHeightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
51
|
+
minWidth?: import("styled-system").ResponsiveValue<import("csstype").MinWidthProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
52
|
+
opacity?: import("styled-system").ResponsiveValue<import("csstype").GlobalsNumber, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
53
|
+
order?: import("styled-system").ResponsiveValue<import("csstype").GlobalsNumber, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
71
54
|
overflowX?: import("styled-system").ResponsiveValue<import("csstype").OverflowXProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
72
55
|
overflowY?: import("styled-system").ResponsiveValue<import("csstype").OverflowYProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
56
|
+
paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
57
|
+
paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
58
|
+
paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
59
|
+
paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
73
60
|
position?: import("styled-system").ResponsiveValue<import("csstype").PositionProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
61
|
+
right?: import("styled-system").ResponsiveValue<import("csstype").RightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
62
|
+
textAlign?: import("styled-system").ResponsiveValue<import("csstype").TextAlignProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
63
|
+
top?: import("styled-system").ResponsiveValue<import("csstype").TopProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
64
|
+
translate?: "yes" | "no" | undefined;
|
|
65
|
+
verticalAlign?: import("styled-system").ResponsiveValue<import("csstype").VerticalAlignProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
66
|
+
width?: import("styled-system").ResponsiveValue<import("csstype").WidthProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
74
67
|
zIndex?: import("styled-system").ResponsiveValue<import("csstype").ZIndexProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
75
|
-
|
|
68
|
+
background?: import("styled-system").ResponsiveValue<import("csstype").BackgroundProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
69
|
+
backgroundPosition?: import("styled-system").ResponsiveValue<import("csstype").BackgroundPositionProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
70
|
+
border?: import("styled-system").ResponsiveValue<import("csstype").BorderProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
71
|
+
borderBottom?: import("styled-system").ResponsiveValue<import("csstype").BorderBottomProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
72
|
+
borderColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
73
|
+
borderLeft?: import("styled-system").ResponsiveValue<import("csstype").BorderLeftProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
74
|
+
borderRadius?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
75
|
+
borderRight?: import("styled-system").ResponsiveValue<import("csstype").BorderRightProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
76
|
+
borderStyle?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
77
|
+
borderTop?: import("styled-system").ResponsiveValue<import("csstype").BorderTopProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
78
|
+
borderWidth?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
79
|
+
flex?: import("styled-system").ResponsiveValue<import("csstype").FlexProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
80
|
+
gridArea?: import("styled-system").ResponsiveValue<import("csstype").GridAreaProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
76
81
|
margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
82
|
+
overflow?: import("styled-system").ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
83
|
+
padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
84
|
+
hidden?: boolean | undefined;
|
|
85
|
+
bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
86
|
+
borderX?: import("styled-system").ResponsiveValue<import("csstype").BorderProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
87
|
+
borderY?: import("styled-system").ResponsiveValue<import("csstype").BorderProperty<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
88
|
+
size?: string | undefined;
|
|
89
|
+
m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
77
90
|
mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
78
|
-
marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
79
91
|
mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
80
|
-
marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
81
92
|
mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
82
|
-
marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
83
93
|
ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
84
|
-
marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
85
94
|
mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
86
95
|
marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
87
96
|
my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
88
97
|
marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
89
98
|
p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
90
|
-
padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
91
99
|
pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
92
|
-
paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
93
100
|
pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
94
|
-
paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
95
101
|
pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
96
|
-
paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
97
102
|
pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
98
|
-
paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
99
103
|
px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
100
104
|
paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
101
105
|
py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
@@ -119,14 +123,12 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
|
|
|
119
123
|
placeholder?: string | undefined;
|
|
120
124
|
spellCheck?: (boolean | "false" | "true") | undefined;
|
|
121
125
|
tabIndex?: number | undefined;
|
|
122
|
-
translate?: "yes" | "no" | undefined;
|
|
123
126
|
radioGroup?: string | undefined;
|
|
124
127
|
role?: string | undefined;
|
|
125
128
|
about?: string | undefined;
|
|
126
129
|
datatype?: string | undefined;
|
|
127
130
|
inlist?: any;
|
|
128
131
|
prefix?: string | undefined;
|
|
129
|
-
property?: string | undefined;
|
|
130
132
|
resource?: string | undefined;
|
|
131
133
|
typeof?: string | undefined;
|
|
132
134
|
vocab?: string | undefined;
|
|
@@ -161,7 +163,7 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
|
|
|
161
163
|
'aria-expanded'?: boolean | "false" | "true" | undefined;
|
|
162
164
|
'aria-flowto'?: string | undefined;
|
|
163
165
|
'aria-grabbed'?: boolean | "false" | "true" | undefined;
|
|
164
|
-
'aria-haspopup'?: boolean | "
|
|
166
|
+
'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "false" | "true" | "listbox" | "tree" | undefined;
|
|
165
167
|
'aria-hidden'?: boolean | "false" | "true" | undefined;
|
|
166
168
|
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
167
169
|
'aria-keyshortcuts'?: string | undefined;
|
|
@@ -178,7 +180,7 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
|
|
|
178
180
|
'aria-posinset'?: number | undefined;
|
|
179
181
|
'aria-pressed'?: boolean | "false" | "true" | "mixed" | undefined;
|
|
180
182
|
'aria-readonly'?: boolean | "false" | "true" | undefined;
|
|
181
|
-
'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "
|
|
183
|
+
'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
182
184
|
'aria-required'?: boolean | "false" | "true" | undefined;
|
|
183
185
|
'aria-roledescription'?: string | undefined;
|
|
184
186
|
'aria-rowcount'?: number | undefined;
|
|
@@ -358,7 +360,6 @@ export declare const BorderedRadio: import("styled-components").StyledComponentC
|
|
|
358
360
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
359
361
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
360
362
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
361
|
-
textAlign?: import("styled-system").ResponsiveValue<import("csstype").TextAlignProperty, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
362
363
|
disabled?: boolean | undefined;
|
|
363
364
|
name?: string | undefined;
|
|
364
365
|
value?: string | undefined;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridAreaProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps } from "styled-system";
|
|
2
|
+
import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridAreaProps, LayoutProps, PositionProps, ResponsiveValue, SpaceProps, TextAlignProps } from "styled-system";
|
|
3
3
|
export interface BoxProps extends BackgroundProps, BorderProps, Omit<ColorProps, "color">, FlexboxProps, GridAreaProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps {
|
|
4
|
+
gap?: ResponsiveValue<string | number>;
|
|
4
5
|
}
|
|
5
6
|
/**
|
|
6
7
|
* All the system functions for Box
|
package/dist/elements/Box/Box.js
CHANGED
|
@@ -13,10 +13,17 @@ var _splitProps = require("../../utils/splitProps");
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
+
var gap = (0, _styledSystem.system)({
|
|
17
|
+
gap: {
|
|
18
|
+
property: "gap",
|
|
19
|
+
scale: "space"
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
|
|
16
23
|
/**
|
|
17
24
|
* All the system functions for Box
|
|
18
25
|
*/
|
|
19
|
-
var boxMixin = (0, _styledSystem.compose)(_styledSystem.background, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.gridArea, _styledSystem.layout, _styledSystem.position, _styledSystem.space, _styledSystem.textAlign);
|
|
26
|
+
var boxMixin = (0, _styledSystem.compose)(_styledSystem.background, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.gridArea, _styledSystem.layout, _styledSystem.position, _styledSystem.space, _styledSystem.textAlign, gap);
|
|
20
27
|
/**
|
|
21
28
|
* Box is just a `View` or `div` (depending on the platform) with common styled-systems
|
|
22
29
|
* hooks.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Box/Box.tsx"],"names":["boxMixin","background","border","color","flexbox","gridArea","layout","position","space","textAlign","Box","styled","div","displayName","splitBoxProps"],"mappings":";;;;;;;AAAA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Box/Box.tsx"],"names":["gap","property","scale","boxMixin","background","border","color","flexbox","gridArea","layout","position","space","textAlign","Box","styled","div","displayName","splitBoxProps"],"mappings":";;;;;;;AAAA;;AACA;;AAuBA;;;;AAEA,IAAMA,GAAG,GAAG,0BAAO;AACjBA,EAAAA,GAAG,EAAE;AACHC,IAAAA,QAAQ,EAAE,KADP;AAEHC,IAAAA,KAAK,EAAE;AAFJ;AADY,CAAP,CAAZ;;AAoBA;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,2BACtBC,wBADsB,EAEtBC,oBAFsB,EAGtBC,mBAHsB,EAItBC,qBAJsB,EAKtBC,sBALsB,EAMtBC,oBANsB,EAOtBC,sBAPsB,EAQtBC,mBARsB,EAStBC,uBATsB,EAUtBZ,GAVsB,CAAjB;AAaP;AACA;AACA;AACA;;;;AACO,IAAMa,GAAG,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,aACZZ,QADY,CAAT;;;AAIPU,GAAG,CAACG,WAAJ,GAAkB,KAAlB;AAEA;;AACO,IAAMC,aAAa,GAAG,4BAAqBd,QAArB,CAAtB","sourcesContent":["import styled from \"styled-components\"\nimport {\n background,\n BackgroundProps,\n border,\n BorderProps,\n color,\n ColorProps,\n compose,\n flexbox,\n FlexboxProps,\n gridArea,\n GridAreaProps,\n layout,\n LayoutProps,\n position,\n PositionProps,\n ResponsiveValue,\n space,\n SpaceProps,\n system,\n textAlign,\n TextAlignProps,\n} from \"styled-system\"\nimport { splitProps } from \"../../utils/splitProps\"\n\nconst gap = system({\n gap: {\n property: \"gap\",\n scale: \"space\",\n },\n})\n\nexport interface BoxProps\n extends BackgroundProps,\n BorderProps,\n Omit<ColorProps, \"color\">,\n FlexboxProps,\n GridAreaProps,\n LayoutProps,\n PositionProps,\n SpaceProps,\n TextAlignProps {\n gap?: ResponsiveValue<string | number>\n}\n\n/**\n * All the system functions for Box\n */\nexport const boxMixin = compose(\n background,\n border,\n color,\n flexbox,\n gridArea,\n layout,\n position,\n space,\n textAlign,\n gap\n)\n\n/**\n * Box is just a `View` or `div` (depending on the platform) with common styled-systems\n * hooks.\n */\nexport const Box = styled.div<BoxProps>`\n ${boxMixin}\n`\n\nBox.displayName = \"Box\"\n\n/** Splits out props into valid and invalid BoxProps */\nexport const splitBoxProps = splitProps<BoxProps>(boxMixin)\n"],"file":"Box.js"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Stack = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _storybookStates = require("storybook-states");
|
|
11
|
+
|
|
12
|
+
var _Box = require("../Box");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
var _default = {
|
|
17
|
+
title: "Components/Box"
|
|
18
|
+
};
|
|
19
|
+
exports.default = _default;
|
|
20
|
+
|
|
21
|
+
var Stack = function Stack() {
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
|
|
23
|
+
states: [{}, {
|
|
24
|
+
gap: 1
|
|
25
|
+
}, {
|
|
26
|
+
gap: 2
|
|
27
|
+
}, {
|
|
28
|
+
gap: [2, 4]
|
|
29
|
+
}]
|
|
30
|
+
}, /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
31
|
+
display: "flex",
|
|
32
|
+
flexDirection: "column"
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
34
|
+
bg: "yellow100"
|
|
35
|
+
}, "1"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
36
|
+
bg: "yellow100"
|
|
37
|
+
}, "2"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
38
|
+
bg: "yellow100"
|
|
39
|
+
}, "3"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
40
|
+
bg: "yellow100"
|
|
41
|
+
}, "4"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
42
|
+
bg: "yellow100"
|
|
43
|
+
}, "5"), /*#__PURE__*/_react.default.createElement(_Box.Box, {
|
|
44
|
+
bg: "yellow100"
|
|
45
|
+
}, "6")));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
exports.Stack = Stack;
|
|
49
|
+
Stack.displayName = "Stack";
|
|
50
|
+
//# sourceMappingURL=Box.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Box/Box.story.tsx"],"names":["title","Stack","gap"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,KAAK,GAAG,SAARA,KAAQ,GAAM;AACzB,sBACE,6BAAC,uBAAD;AAAkB,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,GAAG,EAAE;AAAP,KAAL,EAAiB;AAAEA,MAAAA,GAAG,EAAE;AAAP,KAAjB,EAA6B;AAAEA,MAAAA,GAAG,EAAE,CAAC,CAAD,EAAI,CAAJ;AAAP,KAA7B;AAA1B,kBACE,6BAAC,QAAD;AAAK,IAAA,OAAO,EAAC,MAAb;AAAoB,IAAA,aAAa,EAAC;AAAlC,kBACE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC;AAAR,SADF,eAEE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC;AAAR,SAFF,eAGE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC;AAAR,SAHF,eAIE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC;AAAR,SAJF,eAKE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC;AAAR,SALF,eAME,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC;AAAR,SANF,CADF,CADF;AAYD,CAbM;;;AAAMD,K","sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport default {\n title: \"Components/Box\",\n}\n\nexport const Stack = () => {\n return (\n <States<BoxProps> states={[{}, { gap: 1 }, { gap: 2 }, { gap: [2, 4] }]}>\n <Box display=\"flex\" flexDirection=\"column\">\n <Box bg=\"yellow100\">1</Box>\n <Box bg=\"yellow100\">2</Box>\n <Box bg=\"yellow100\">3</Box>\n <Box bg=\"yellow100\">4</Box>\n <Box bg=\"yellow100\">5</Box>\n <Box bg=\"yellow100\">6</Box>\n </Box>\n </States>\n )\n}\n"],"file":"Box.story.js"}
|
|
@@ -17,4 +17,4 @@ export declare const Clickable: import("styled-components").StyledComponentClass
|
|
|
17
17
|
cursor?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
18
18
|
textDecoration?: ResponsiveValue<string, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
19
19
|
}>;
|
|
20
|
-
export declare const splitClickableProps: <U>(props: U) => [ClickableProps, Omit<U,
|
|
20
|
+
export declare const splitClickableProps: <U>(props: U) => [ClickableProps, Omit<U, "cursor" | "textDecoration" | keyof BoxProps | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>];
|
|
@@ -23,7 +23,7 @@ var _Flex = require("../Flex");
|
|
|
23
23
|
|
|
24
24
|
var _Text = require("../Text");
|
|
25
25
|
|
|
26
|
-
var _excluded = ["label", "expanded", "children", "disabled", "onClick", "borderColor"];
|
|
26
|
+
var _excluded = ["label", "expanded", "children", "disabled", "onClick", "onToggle", "borderColor"];
|
|
27
27
|
|
|
28
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
29
|
|
|
@@ -58,6 +58,7 @@ var Expandable = function Expandable(_ref) {
|
|
|
58
58
|
children = _ref.children,
|
|
59
59
|
disabled = _ref.disabled,
|
|
60
60
|
onClick = _ref.onClick,
|
|
61
|
+
onToggle = _ref.onToggle,
|
|
61
62
|
_ref$borderColor = _ref.borderColor,
|
|
62
63
|
borderColor = _ref$borderColor === void 0 ? "black60" : _ref$borderColor,
|
|
63
64
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -74,7 +75,9 @@ var Expandable = function Expandable(_ref) {
|
|
|
74
75
|
|
|
75
76
|
var handleClick = function handleClick(event) {
|
|
76
77
|
setExpanded(function (prevExpanded) {
|
|
77
|
-
|
|
78
|
+
var isExpanded = !prevExpanded;
|
|
79
|
+
onToggle && onToggle(isExpanded);
|
|
80
|
+
return isExpanded;
|
|
78
81
|
});
|
|
79
82
|
onClick && onClick(event);
|
|
80
83
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","borderColor","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.tsx"],"names":["Expandable","label","defaultExpanded","expanded","children","disabled","onClick","onToggle","borderColor","rest","setExpanded","boxProps","clickableProps","handleClick","event","prevExpanded","isExpanded"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;AACA;AACA;AACO,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,OAS/C;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPMC,eAON,QAPJC,QAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,8BAFJC,WAEI;AAAA,MAFJA,WAEI,iCAFU,SAEV;AAAA,MADDC,IACC;;AACJ,kBAAgC,qBAASP,eAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBO,WAAjB;;AAEA,uBAAmC,wBAAcD,IAAd,CAAnC;AAAA;AAAA,MAAOE,QAAP;AAAA,MAAiBC,cAAjB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAClBC,KADkB,EAEf;AACHJ,IAAAA,WAAW,CAAC,UAACK,YAAD,EAAkB;AAC5B,UAAMC,UAAU,GAAG,CAACD,YAApB;AACAR,MAAAA,QAAQ,IAAIA,QAAQ,CAACS,UAAD,CAApB;AACA,aAAOA,UAAP;AACD,KAJU,CAAX;AAMAV,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAVD;;AAYA,sBACE,6BAAC,QAAD,EAASH,QAAT,eACE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,OAAO,EAAC,MAFV;AAGE,IAAA,UAAU,EAAC,QAHb;AAIE,IAAA,cAAc,EAAC,eAJjB;AAKE,IAAA,SAAS,EAAC,WALZ;AAME,IAAA,WAAW,EAAEH,WANf;AAOE,IAAA,EAAE,EAAE,CAPN;AAQE,IAAA,EAAE,EAAE,CARN;AASE,IAAA,QAAQ,EAAEH,QATZ;AAUE,qBAAeF,QAVjB;AAWE,IAAA,OAAO,EAAEU;AAXX,KAYMD,cAZN,gBAcE,6BAAC,UAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,OAAO,EAAC,MAAvB;AAA8B,IAAA,UAAU,EAAC;AAAzC,KACG,oBAAOX,KAAP,iBAAgB,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAA4BA,KAA5B,CAAhB,GAA4DA,KAD/D,CAdF,EAkBG,CAACI,QAAD,iBACC,4DACGF,QAAQ,gBACP,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IADO,gBASP,6BAAC,wBAAD;AACE,IAAA,KAAK,EAAE,EADT;AAEE,IAAA,MAAM,EAAE,EAFV;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,EAAE,EAAE,CAJN;AAKE,mBAAY;AALd,IAVJ,CAnBJ,CADF,EA0CGA,QAAQ,KACN,OAAOC,QAAP,KAAoB,UAApB,GACGA,QAAQ,CAAC;AAAEM,IAAAA,WAAW,EAAXA,WAAF;AAAeP,IAAAA,QAAQ,EAARA;AAAf,GAAD,CADX,GAEGC,QAHG,CA1CX,CADF;AAiDD,CA3EM;;;AAAMJ,U","sourcesContent":["import React, { useState } from \"react\"\nimport { isText } from \"../../helpers/isText\"\nimport ChevronUpIcon from \"@artsy/icons/ChevronUpIcon\"\nimport ChevronDownIcon from \"@artsy/icons/ChevronDownIcon\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport interface ExpandableProps extends ClickableProps {\n label?: string | JSX.Element\n expanded?: boolean\n children: React.ReactNode\n onToggle?: (isExpanded: boolean) => void\n}\n\n/**\n * A toggleable component used to show / hide content\n */\nexport const Expandable: React.FC<ExpandableProps> = ({\n label,\n expanded: defaultExpanded,\n children,\n disabled,\n onClick,\n onToggle,\n borderColor = \"black60\",\n ...rest\n}) => {\n const [expanded, setExpanded] = useState(defaultExpanded)\n\n const [boxProps, clickableProps] = splitBoxProps(rest)\n\n const handleClick = (\n event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => {\n setExpanded((prevExpanded) => {\n const isExpanded = !prevExpanded\n onToggle && onToggle(isExpanded)\n return isExpanded\n })\n\n onClick && onClick(event)\n }\n\n return (\n <Box {...boxProps}>\n <Clickable\n width=\"100%\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n borderTop=\"1px solid\"\n borderColor={borderColor}\n pt={2}\n pb={1}\n disabled={disabled}\n aria-expanded={expanded}\n onClick={handleClick}\n {...clickableProps}\n >\n <Flex flex={1} display=\"flex\" alignItems=\"center\">\n {isText(label) ? <Text variant=\"sm-display\">{label}</Text> : label}\n </Flex>\n\n {!disabled && (\n <>\n {expanded ? (\n <ChevronUpIcon\n width={14}\n height={14}\n ml={1}\n mr={1}\n aria-hidden=\"true\"\n />\n ) : (\n <ChevronDownIcon\n width={14}\n height={14}\n ml={1}\n mr={1}\n aria-hidden=\"true\"\n />\n )}\n </>\n )}\n </Clickable>\n\n {expanded &&\n (typeof children === \"function\"\n ? children({ setExpanded, expanded })\n : children)}\n </Box>\n )\n}\n"],"file":"Expandable.js"}
|
|
@@ -75,7 +75,8 @@ var Default = function Default() {
|
|
|
75
75
|
}]
|
|
76
76
|
}, /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, {
|
|
77
77
|
label: "Example",
|
|
78
|
-
maxWidth: 350
|
|
78
|
+
maxWidth: 350,
|
|
79
|
+
onToggle: (0, _addonActions.action)("onToggle")
|
|
79
80
|
}, /*#__PURE__*/_react.default.createElement(_Text.Text, null, "Expanded content")));
|
|
80
81
|
};
|
|
81
82
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded","ConfigurableColors"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM,EAgCN;AAAEL,MAAAA,KAAK,EAAE;AAAT,KAhCM;AADV,kBAoCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE;
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Expandable/Expandable.story.tsx"],"names":["title","Default","expanded","disabled","label","e","stopPropagation","mb","children","setExpanded","ConfigurableColors"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAFM,EAGN;AAAEA,MAAAA,QAAQ,EAAE,KAAZ;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KAHM,EAIN;AAAED,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAJM,EAKN;AACEC,MAAAA,KAAK,eACH,6BAAC,UAAD;AAAM,QAAA,IAAI,EAAE,CAAZ;AAAe,QAAA,cAAc,EAAC;AAA9B,sBACE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,mBADF,eAEE,6BAAC,oBAAD;AACE,QAAA,cAAc,EAAC,WADjB;AAEE,QAAA,OAAO,EAAE,iBAACC,CAAD,EAAO;AACdA,UAAAA,CAAC,CAACC,eAAF;AACA,oCAAO,kBAAP;AACD;AALH,sBAOE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,iBAPF,CAFF;AAFJ,KALM,EAqBN;AAAEC,MAAAA,EAAE,EAAE;AAAN,KArBM,EAsBN;AAAEL,MAAAA,QAAQ,EAAE,IAAZ;AAAkBK,MAAAA,EAAE,EAAE;AAAtB,KAtBM,EAuBN;AACEL,MAAAA,QAAQ,EAAE,IADZ;AAEEM,MAAAA,QAAQ,EAAE;AAAA,YAAGC,WAAH,QAAGA,WAAH;AAAA,4BACR,uDACE,6BAAC,UAAD,2BADF,eAEE,6BAAC,cAAD;AAAQ,UAAA,OAAO,EAAE;AAAA,mBAAMA,WAAW,CAAC,KAAD,CAAjB;AAAA;AAAjB,mBAFF,CADQ;AAAA;AAFZ,KAvBM,EAgCN;AAAEL,MAAAA,KAAK,EAAE;AAAT,KAhCM;AADV,kBAoCE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE,GAAtC;AAA2C,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAArD,kBACE,6BAAC,UAAD,2BADF,CApCF,CADF;AA0CD,CA3CM;;;AAAMH,O;;AA6CN,IAAMS,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC,sBACE,6BAAC,QAAD;AAAK,IAAA,KAAK,EAAC,UAAX;AAAsB,IAAA,EAAE,EAAC;AAAzB,kBACE,6BAAC,uBAAD;AAAkC,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAER,MAAAA,QAAQ,EAAE;AAAZ,KAAL;AAA1C,kBACE,6BAAC,sBAAD;AAAY,IAAA,KAAK,EAAC,SAAlB;AAA4B,IAAA,QAAQ,EAAE,GAAtC;AAA2C,IAAA,WAAW,EAAC;AAAvD,kBACE,6BAAC,UAAD,2BADF,CADF,CADF,CADF;AASD,CAVM;;;AAAMQ,kB","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Expandable, ExpandableProps } from \"./Expandable\"\nimport { Button } from \"../Button\"\nimport { Box } from \"../Box\"\n\nexport default {\n title: \"Components/Expandable\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<ExpandableProps>>\n states={[\n {},\n { expanded: true },\n { expanded: false, disabled: true },\n { expanded: true, disabled: true },\n {\n label: (\n <Flex flex={1} justifyContent=\"space-between\">\n <Text variant=\"sm-display\">Heading</Text>\n <Clickable\n textDecoration=\"underline\"\n onClick={(e) => {\n e.stopPropagation()\n action(\"Secondary action\")\n }}\n >\n <Text variant=\"sm-display\">Reset</Text>\n </Clickable>\n </Flex>\n ),\n },\n { mb: 6 },\n { expanded: true, mb: 6 },\n {\n expanded: true,\n children: ({ setExpanded }) => (\n <div>\n <Text>Expanded content</Text>\n <Button onClick={() => setExpanded(false)}>Close</Button>\n </div>\n ),\n },\n { label: \"Lorem ipsum dolor sit amet consectetur adipisicing elit.\" },\n ]}\n >\n <Expandable label=\"Example\" maxWidth={350} onToggle={action(\"onToggle\")}>\n <Text>Expanded content</Text>\n </Expandable>\n </States>\n )\n}\n\nexport const ConfigurableColors = () => {\n return (\n <Box color=\"white100\" bg=\"black100\">\n <States<Partial<ExpandableProps>> states={[{}, { expanded: true }]}>\n <Expandable label=\"Example\" maxWidth={350} borderColor=\"black30\">\n <Text>Expanded content</Text>\n </Expandable>\n </States>\n </Box>\n )\n}\n"],"file":"Expandable.story.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "31.
|
|
3
|
+
"version": "31.6.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -180,5 +180,5 @@
|
|
|
180
180
|
"url": "http://localhost"
|
|
181
181
|
}
|
|
182
182
|
},
|
|
183
|
-
"gitHead": "
|
|
183
|
+
"gitHead": "63a127b62b38a3f02b314e944c3aadd6f5fd729b"
|
|
184
184
|
}
|