@artsy/palette-mobile 13.2.42 → 13.2.43
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.
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SpacingUnit } from "@artsy/palette-tokens";
|
|
2
|
+
import { View, ViewProps } from "react-native";
|
|
2
3
|
import { BorderProps, ColorProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps } from "styled-system";
|
|
3
4
|
import { ColorsTheme, SpacingUnitsTheme } from "../../tokens";
|
|
4
5
|
type GapProps = {
|
|
5
|
-
gap?:
|
|
6
|
-
rowGap?:
|
|
7
|
-
columnGap?:
|
|
6
|
+
gap?: SpacingUnit;
|
|
7
|
+
rowGap?: SpacingUnit;
|
|
8
|
+
columnGap?: SpacingUnit;
|
|
8
9
|
};
|
|
9
10
|
export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, BorderProps, GapProps, TextAlignProps {
|
|
10
11
|
}
|
package/dist/elements/Box/Box.js
CHANGED
|
@@ -1,6 +1,20 @@
|
|
|
1
1
|
import { View } from "react-native";
|
|
2
2
|
import styled from "styled-components/native";
|
|
3
|
-
import { border, color, flexbox, layout, position, space, textAlign, } from "styled-system";
|
|
3
|
+
import { border, color, flexbox, layout, position, space, system, textAlign, } from "styled-system";
|
|
4
|
+
const gap = system({
|
|
5
|
+
gap: {
|
|
6
|
+
property: "gap",
|
|
7
|
+
scale: "space",
|
|
8
|
+
},
|
|
9
|
+
rowGap: {
|
|
10
|
+
property: "rowGap",
|
|
11
|
+
scale: "space",
|
|
12
|
+
},
|
|
13
|
+
columnGap: {
|
|
14
|
+
property: "columnGap",
|
|
15
|
+
scale: "space",
|
|
16
|
+
},
|
|
17
|
+
});
|
|
4
18
|
/**
|
|
5
19
|
* Box is just a `View` with common styled-system props.
|
|
6
20
|
*/
|
|
@@ -12,4 +26,5 @@ export const Box = styled(View) `
|
|
|
12
26
|
${position}
|
|
13
27
|
${border}
|
|
14
28
|
${textAlign}
|
|
29
|
+
${gap}
|
|
15
30
|
`;
|
|
@@ -15,4 +15,4 @@ export const RegularViewProps = () => {
|
|
|
15
15
|
return (_jsx(Flex, { flex: 1, children: _jsx(Box, { px: 1, height: 200, width: 200, backgroundColor: "red100", onLayout: (e) => console.log(e.nativeEvent.layout), ref: r }) }));
|
|
16
16
|
};
|
|
17
17
|
const colors = ["red10", "green10", "yellow10", "devpurple", "red100", "black10"];
|
|
18
|
-
export const GapProps = () => (_jsxs(List, { style: { marginHorizontal: 20 }, children: [_jsx(Text, { children: "Gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", gap:
|
|
18
|
+
export const GapProps = () => (_jsxs(List, { style: { marginHorizontal: 20 }, children: [_jsx(Text, { children: "Gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", gap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-1`))) }), _jsx(Text, { children: "Row gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", rowGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-2`))) }), _jsx(Text, { children: "Column gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", columnGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-3`))) }), _jsx(Spacer, { y: 6 })] }));
|
|
@@ -7,5 +7,5 @@ export default {
|
|
|
7
7
|
component: Chip,
|
|
8
8
|
};
|
|
9
9
|
export const Variations = () => {
|
|
10
|
-
return (_jsxs(Flex, { p: 2, justifyContent: "center", alignItems: "center", gap:
|
|
10
|
+
return (_jsxs(Flex, { p: 2, justifyContent: "center", alignItems: "center", gap: 2, children: [_jsx(Chip, { title: "Only title" }), _jsx(Chip, { title: "Title and subtitle", subtitle: "Subtitle" }), _jsx(Chip, { title: "Title and image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), _jsx(Chip, { title: "Title, subtitle and image", subtitle: "Cow image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), _jsx(Chip, { title: "Press me", subtitle: "Pressing alerts something", onPress: () => Alert.alert("Pressed") })] }));
|
|
11
11
|
};
|
|
@@ -14,7 +14,7 @@ storiesOf("RadioButton", module).add("Default", () => {
|
|
|
14
14
|
marginHorizontal: 20,
|
|
15
15
|
justifyContent: "flex-start",
|
|
16
16
|
alignItems: "flex-start",
|
|
17
|
-
}, children: _jsxs(Flex, { flexDirection: "row", gap:
|
|
17
|
+
}, children: _jsxs(Flex, { flexDirection: "row", gap: 2, children: [_jsx(RadioButton, { onPress: () => {
|
|
18
18
|
setMetric("cm");
|
|
19
19
|
}, selected: metric === "cm", text: "centimeters" }), _jsx(RadioButton, { onPress: () => {
|
|
20
20
|
setMetric("in");
|
package/package.json
CHANGED