@artsy/palette-mobile 19.9.0 → 19.11.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/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.d.ts +6 -0
- package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.js +11 -2
- package/dist/elements/Dialog/Dialog.stories.d.ts +29 -1
- package/dist/elements/Dialog/Dialog.stories.js +21 -8
- package/dist/elements/Image/Image.stories.d.ts +58 -1
- package/dist/elements/Image/Image.stories.js +40 -12
- package/dist/elements/Input/Input.stories.d.ts +5 -1
- package/dist/elements/Input/Input.stories.js +4 -2
- package/dist/elements/Input/Input.tests.js +1 -1
- package/dist/elements/List/List.stories.d.ts +5 -1
- package/dist/elements/List/List.stories.js +4 -2
- package/dist/elements/Message/Message.stories.d.ts +13 -1
- package/dist/elements/Message/Message.stories.js +11 -7
- package/dist/elements/Pill/Pill.stories.d.ts +15 -2
- package/dist/elements/Pill/Pill.stories.js +15 -12
- package/dist/elements/Popover/Popover.stories.d.ts +17 -1
- package/dist/elements/Popover/Popover.stories.js +15 -8
- package/dist/elements/ProgressBar/ProgressBar.stories.d.ts +10 -1
- package/dist/elements/ProgressBar/ProgressBar.stories.js +7 -2
- package/dist/elements/Radio/RadioButton.stories.d.ts +1 -2
- package/dist/elements/Radio/RadioButton.stories.js +2 -4
- package/dist/elements/Screen/Screen.stories.d.ts +59 -1
- package/dist/elements/Screen/Screen.stories.js +43 -15
- package/dist/elements/Tabs/Tabs.stories.d.ts +23 -1
- package/dist/elements/Tabs/Tabs.stories.js +16 -6
- package/dist/elements/Text/Text.stories.d.ts +4 -4
- package/dist/elements/Text/Text.stories.js +26 -14
- package/dist/elements/ToolTip/ToolTip.stories.d.ts +22 -1
- package/dist/elements/ToolTip/ToolTip.stories.js +16 -6
- package/dist/elements/VisualClue/VisualClue.stories.d.ts +5 -1
- package/dist/elements/VisualClue/VisualClue.stories.js +4 -2
- package/dist/setupJest.js +0 -2
- package/dist/storybook/decorators.d.ts +3 -4
- package/package.json +3 -3
|
@@ -9,3 +9,9 @@ export declare const ContactInformation: ({ handlePress }: {
|
|
|
9
9
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export declare const DisplayContent: () => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export declare const ComponentWithCollapsibleMenu: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare const _default: {
|
|
13
|
+
title: string;
|
|
14
|
+
excludeStories: string[];
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
export declare const CollapseCollapseItems: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { useRef, useState } from "react";
|
|
4
3
|
import { ScrollView, View } from "react-native";
|
|
5
4
|
import { CollapsibleMenuItem } from "./CollapsibleMenuItem";
|
|
@@ -83,4 +82,14 @@ export const ComponentWithCollapsibleMenu = () => {
|
|
|
83
82
|
}, children: Content }, index));
|
|
84
83
|
}) })] }) }) }));
|
|
85
84
|
};
|
|
86
|
-
|
|
85
|
+
export default {
|
|
86
|
+
title: "Collapsible Menu ",
|
|
87
|
+
excludeStories: [
|
|
88
|
+
"ArtworkDetails",
|
|
89
|
+
"UploadPhotos",
|
|
90
|
+
"ContactInformation",
|
|
91
|
+
"DisplayContent",
|
|
92
|
+
"ComponentWithCollapsibleMenu",
|
|
93
|
+
],
|
|
94
|
+
};
|
|
95
|
+
export const CollapseCollapseItems = () => (_jsx(_Fragment, { children: _jsx(ComponentWithCollapsibleMenu, {}) }));
|
|
@@ -1 +1,29 @@
|
|
|
1
|
-
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
};
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const WithSecondaryAction: {
|
|
7
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
story: {
|
|
9
|
+
name: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const WithDetails: {
|
|
13
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
story: {
|
|
15
|
+
name: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export declare const WithLongDetails: {
|
|
19
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
story: {
|
|
21
|
+
name: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export declare const WithBackgroundPressHandler: {
|
|
25
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
story: {
|
|
27
|
+
name: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { useState } from "react";
|
|
4
3
|
import { Dialog } from ".";
|
|
5
4
|
import { List } from "../../storybook/helpers";
|
|
@@ -11,12 +10,26 @@ const DialogDemo = (props) => {
|
|
|
11
10
|
onPress: () => setVisible(false),
|
|
12
11
|
}, ...props })] }));
|
|
13
12
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
export default {
|
|
14
|
+
title: "Dialog",
|
|
15
|
+
};
|
|
16
|
+
export const Default = () => _jsx(DialogDemo, {});
|
|
17
|
+
export const WithSecondaryAction = () => (_jsx(DialogDemo, { secondaryCta: {
|
|
17
18
|
text: "Cancel",
|
|
18
19
|
onPress: () => { },
|
|
19
|
-
} }))
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
} }));
|
|
21
|
+
WithSecondaryAction.story = {
|
|
22
|
+
name: "With secondary action",
|
|
23
|
+
};
|
|
24
|
+
export const WithDetails = () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }));
|
|
25
|
+
WithDetails.story = {
|
|
26
|
+
name: "With details",
|
|
27
|
+
};
|
|
28
|
+
export const WithLongDetails = () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) }));
|
|
29
|
+
WithLongDetails.story = {
|
|
30
|
+
name: "With long details",
|
|
31
|
+
};
|
|
32
|
+
export const WithBackgroundPressHandler = () => _jsx(DialogDemo, { onBackgroundPress: () => { } });
|
|
33
|
+
WithBackgroundPressHandler.story = {
|
|
34
|
+
name: "With background press handler",
|
|
35
|
+
};
|
|
@@ -1 +1,58 @@
|
|
|
1
|
-
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
};
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const WithDefaultFallbackScreenWidth: {
|
|
6
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
story: {
|
|
8
|
+
name: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export declare const WithWidthAndHeight: {
|
|
12
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
story: {
|
|
14
|
+
name: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export declare const WithAspectRatio: {
|
|
18
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
story: {
|
|
20
|
+
name: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export declare const WithoutAutomaticResizing: {
|
|
24
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
story: {
|
|
26
|
+
name: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export declare const WithPercentageWidthAndHeight: {
|
|
30
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
story: {
|
|
32
|
+
name: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export declare const WithDefaultFallbackScreenWidthBlurhash: {
|
|
36
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
story: {
|
|
38
|
+
name: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export declare const WithWidthAndHeightBlurhash: {
|
|
42
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
story: {
|
|
44
|
+
name: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
export declare const WithAspectRatioBlurhash: {
|
|
48
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
story: {
|
|
50
|
+
name: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
export declare const WithoutAutomaticResizingBlurhash: {
|
|
54
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
story: {
|
|
56
|
+
name: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
@@ -1,16 +1,44 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { Image } from "./Image";
|
|
4
3
|
import { Flex } from "../Flex";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
export default {
|
|
5
|
+
title: "Image",
|
|
6
|
+
};
|
|
7
|
+
export const WithDefaultFallbackScreenWidth = () => (_jsx(Image, { aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
8
|
+
WithDefaultFallbackScreenWidth.story = {
|
|
9
|
+
name: "With default fallback screen width",
|
|
10
|
+
};
|
|
11
|
+
export const WithWidthAndHeight = () => (_jsx(Image, { width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
12
|
+
WithWidthAndHeight.story = {
|
|
13
|
+
name: "With width and height",
|
|
14
|
+
};
|
|
15
|
+
export const WithAspectRatio = () => (_jsx(Image, { width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
16
|
+
WithAspectRatio.story = {
|
|
17
|
+
name: "With aspect ratio",
|
|
18
|
+
};
|
|
19
|
+
export const WithoutAutomaticResizing = () => (_jsx(Image, { aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
20
|
+
WithoutAutomaticResizing.story = {
|
|
21
|
+
name: "Without automatic resizing",
|
|
22
|
+
};
|
|
23
|
+
export const WithPercentageWidthAndHeight = () => {
|
|
11
24
|
return (_jsxs(Flex, { flexDirection: "row", flex: 1, children: [_jsx(Flex, { flex: 1, style: { aspectRatio: 0.69 }, children: _jsx(Image, { src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg", height: 260, width: 180, style: { width: "100%", height: "100%" } }) }), _jsx(Flex, { flex: 1, style: { aspectRatio: 1 }, children: _jsx(Image, { src: "https://i.imgur.com/b9IZinu.gif", width: 200, height: 200, style: { width: "100%", height: "100%" } }) }), _jsx(Flex, { flex: 1, style: { aspectRatio: 1.2 }, children: _jsx(Image, { width: 200, height: 240, src: "https://i.imgur.com/non-existing-image.gif", style: { width: "100%", height: "100%" } }) })] }));
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
25
|
+
};
|
|
26
|
+
WithPercentageWidthAndHeight.story = {
|
|
27
|
+
name: "With percentage width and height",
|
|
28
|
+
};
|
|
29
|
+
export const WithDefaultFallbackScreenWidthBlurhash = () => (_jsx(Image, { aspectRatio: 0.62, blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
30
|
+
WithDefaultFallbackScreenWidthBlurhash.story = {
|
|
31
|
+
name: "With default fallback screen width + blurhash",
|
|
32
|
+
};
|
|
33
|
+
export const WithWidthAndHeightBlurhash = () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, height: 400, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
34
|
+
WithWidthAndHeightBlurhash.story = {
|
|
35
|
+
name: "With width and height + blurhash",
|
|
36
|
+
};
|
|
37
|
+
export const WithAspectRatioBlurhash = () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", width: 250, aspectRatio: 0.62, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
38
|
+
WithAspectRatioBlurhash.story = {
|
|
39
|
+
name: "With aspect ratio + blurhash",
|
|
40
|
+
};
|
|
41
|
+
export const WithoutAutomaticResizingBlurhash = () => (_jsx(Image, { blurhash: "LXK,+3H#yArKH~bGx:tM.atxM*k9", aspectRatio: 0.62, performResize: false, src: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }));
|
|
42
|
+
WithoutAutomaticResizingBlurhash.story = {
|
|
43
|
+
name: "Without automatic resizing + blurhash",
|
|
44
|
+
};
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { SearchIcon } from "@artsy/icons/native";
|
|
3
|
-
import { storiesOf } from "@storybook/react-native";
|
|
4
3
|
import { Input } from "./Input";
|
|
5
4
|
import { List } from "../../storybook/helpers";
|
|
6
5
|
import { Join } from "../Join";
|
|
7
6
|
import { Separator } from "../Separator";
|
|
8
7
|
import { Text } from "../Text";
|
|
9
|
-
|
|
8
|
+
export default {
|
|
9
|
+
title: "Input",
|
|
10
|
+
};
|
|
11
|
+
export const Variants = () => (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: _jsxs(Join, { separator: _jsx(Separator, { my: 2 }), children: [_jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "Default" }), _jsx(Input, {})] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title" }), _jsx(Input, { title: "Title" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and required" }), _jsx(Input, { title: "Title", required: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and optional" }), _jsx(Input, { title: "Title", optional: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and clear button" }), _jsx(Input, { title: "Title", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and loading" }), _jsx(Input, { title: "Title", loading: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and icon" }), _jsx(Input, { title: "Title", icon: _jsx(SearchIcon, {}) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and error" }), _jsx(Input, { title: "Title", error: "this is an error" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and disabled" }), _jsx(Input, { title: "Disabled", disabled: true })] }), _jsx(_Fragment, { children: _jsx(Input, { placeholder: "I'm a placeholder" }) }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title, clear button and value" }), _jsx(Input, { value: "5", enableClearButton: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With fixed right placeholder" }), _jsx(Input, { fixedRightPlaceholder: "cm" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With placeholder" }), _jsx(Input, { placeholder: "I'm a placeholder" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With title and placeholder" }), _jsx(Input, { title: "full text", value: "Wow this is a long text, I wonder if I can read the whole thing!" })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "With text limit" }), _jsx(Input, { title: "Text with limit", maxLength: 100, showLimit: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine Without limit" }), _jsx(Input, { title: "Text area", multiline: true })] }), _jsxs(_Fragment, { children: [_jsx(Text, { mb: 1, variant: "sm-display", fontWeight: "bold", children: "multine With limit" }), _jsx(Input, { title: "Text area with limit", multiline: true, maxLength: 150, showLimit: true })] })] }) }));
|
|
@@ -10,7 +10,7 @@ describe("Input", () => {
|
|
|
10
10
|
});
|
|
11
11
|
it("uses correct font family", () => {
|
|
12
12
|
renderWithWrappers(_jsx(Input, { testID: testID, placeholder: "input" }));
|
|
13
|
-
expect(screen.getByPlaceholderText("input")
|
|
13
|
+
expect(screen.getByPlaceholderText("input")).toHaveStyle({ fontFamily: "Unica77LL-Regular" });
|
|
14
14
|
});
|
|
15
15
|
it("mutates given text as value", () => {
|
|
16
16
|
renderWithWrappers(_jsx(Input, { testID: testID }));
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { BulletedItem } from "./BulletedItem";
|
|
4
3
|
import { List } from "../../storybook/helpers";
|
|
5
4
|
import { Flex } from "../Flex";
|
|
6
5
|
import { Spacer } from "../Spacer";
|
|
7
6
|
import { Text } from "../Text";
|
|
8
|
-
|
|
7
|
+
export default {
|
|
8
|
+
title: "List",
|
|
9
|
+
};
|
|
10
|
+
export const _BulletedItem = () => (_jsx(List, { children: _jsxs(Flex, { children: [_jsx(BulletedItem, { children: "Bulleted Item text" }), _jsx(BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), _jsx(Spacer, { y: 2 }), _jsx(Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item" }), _jsx(Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) }));
|
|
@@ -1 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
decorators: import("@storybook/react").Decorator[];
|
|
4
|
+
};
|
|
5
|
+
export default _default;
|
|
6
|
+
export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const ColorVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const IconComponentPosition: {
|
|
9
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
story: {
|
|
11
|
+
name: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { InfoIcon } from "@artsy/icons/native";
|
|
3
|
-
import { storiesOf } from "@storybook/react-native";
|
|
4
3
|
import { Text } from "react-native";
|
|
5
4
|
import { Message } from "./Message";
|
|
6
5
|
import { withTheme } from "../../storybook/decorators";
|
|
7
6
|
import { List } from "../../storybook/helpers";
|
|
8
7
|
import { Button } from "../Button";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
export default {
|
|
9
|
+
title: "Message",
|
|
10
|
+
decorators: [withTheme],
|
|
11
|
+
};
|
|
12
|
+
export const Variants = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", title: "Without Close Button", text: "Text" }), _jsx(Message, { variant: "default", title: "Without Close Button", children: _jsx(Text, { children: "Text" }) }), _jsx(Message, { variant: "default", text: "Without title" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] }));
|
|
13
|
+
export const ColorVariants = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), _jsx(Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), _jsx(Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), _jsx(Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), _jsx(Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" }), _jsx(Message, { variant: "dark", showCloseButton: true, title: "Error", text: "Text" })] }));
|
|
14
|
+
export const IconComponentPosition = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default position", text: "Text", IconComponent: () => _jsx(InfoIcon, {}) }), _jsx(Message, { iconPosition: "right", variant: "default", showCloseButton: true, title: "Rign", text: "Text", IconComponent: () => _jsx(Button, { size: "small", children: "Click" }) }), _jsx(Message, { iconPosition: "bottom", variant: "default", showCloseButton: true, title: "Bottom", text: "Text", IconComponent: () => {
|
|
14
15
|
return _jsx(Button, { size: "small", children: "Click" });
|
|
15
16
|
} }), _jsx(Message, { iconPosition: "bottom", variant: "dark", showCloseButton: true, title: "Bottom, dark", text: "Text", IconComponent: () => {
|
|
16
17
|
return (_jsx(Button, { variant: "outlineLight", size: "small", children: "Click" }));
|
|
17
|
-
} })] }))
|
|
18
|
+
} })] }));
|
|
19
|
+
IconComponentPosition.story = {
|
|
20
|
+
name: "IconComponent position",
|
|
21
|
+
};
|
|
@@ -1,6 +1,19 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
declare const _default: {
|
|
3
2
|
title: string;
|
|
4
|
-
component: import("react").FC<import("./Pill").PillProps>;
|
|
5
3
|
};
|
|
6
4
|
export default _default;
|
|
5
|
+
export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const ProfileWithImage: {
|
|
7
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
story: {
|
|
9
|
+
name: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const ControlledState: {
|
|
13
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
story: {
|
|
15
|
+
name: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export declare const Onboarding: () => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const Link: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,29 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { GraphIcon } from "@artsy/icons/native";
|
|
3
|
-
import { storiesOf } from "@storybook/react-native";
|
|
4
3
|
import { useState } from "react";
|
|
5
4
|
import { Pill } from "./Pill";
|
|
6
5
|
import { List } from "../../storybook/helpers";
|
|
7
6
|
import { Flex } from "../Flex";
|
|
8
7
|
export default {
|
|
9
8
|
title: "Pill",
|
|
10
|
-
component: Pill,
|
|
11
9
|
};
|
|
12
|
-
|
|
13
|
-
.add("Variants", () => (_jsxs(List, { contentContainerStyle: {
|
|
10
|
+
export const Variants = () => (_jsxs(List, { contentContainerStyle: {
|
|
14
11
|
marginHorizontal: 20,
|
|
15
12
|
justifyContent: "flex-start",
|
|
16
13
|
alignItems: "flex-start",
|
|
17
|
-
}, children: [_jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { children: "Default" }), _jsx(Pill, { selected: true, children: "Selected" }), _jsx(Pill, { disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "filter", children: "Filter" }), _jsx(Pill, { variant: "filter", selected: true, children: "Selected" }), _jsx(Pill, { variant: "filter", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { Icon: GraphIcon, variant: "badge", children: "Badge" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", selected: true, children: "Selected" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "profile", children: "Profile" }), _jsx(Pill, { variant: "profile", selected: true, children: "Selected" }), _jsx(Pill, { variant: "profile", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Unique" }), _jsx(Pill, { variant: "search", selected: true, children: "Painting" }), _jsx(Pill, { variant: "search", disabled: true, children: "Sculpture" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Search" }), _jsx(Pill, { variant: "search", selected: true, children: "Selected" }), _jsx(Pill, { variant: "search", disabled: true, children: "Search" })] })] }))
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
}, children: [_jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { children: "Default" }), _jsx(Pill, { selected: true, children: "Selected" }), _jsx(Pill, { disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "filter", children: "Filter" }), _jsx(Pill, { variant: "filter", selected: true, children: "Selected" }), _jsx(Pill, { variant: "filter", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { Icon: GraphIcon, variant: "badge", children: "Badge" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", selected: true, children: "Selected" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "profile", children: "Profile" }), _jsx(Pill, { variant: "profile", selected: true, children: "Selected" }), _jsx(Pill, { variant: "profile", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Unique" }), _jsx(Pill, { variant: "search", selected: true, children: "Painting" }), _jsx(Pill, { variant: "search", disabled: true, children: "Sculpture" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Search" }), _jsx(Pill, { variant: "search", selected: true, children: "Selected" }), _jsx(Pill, { variant: "search", disabled: true, children: "Search" })] })] }));
|
|
15
|
+
export const ProfileWithImage = () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [_jsx(Pill, { variant: "profile", src: src, children: "Artist" }), _jsx(Pill, { variant: "profile", src: src, selected: true, children: "Selected" }), _jsx(Pill, { variant: "profile", src: src, disabled: true, children: "Disabled" })] }));
|
|
16
|
+
ProfileWithImage.story = {
|
|
17
|
+
name: "Profile with image",
|
|
18
|
+
};
|
|
19
|
+
export const ControlledState = () => {
|
|
20
20
|
const [selected, setSelected] = useState(false);
|
|
21
21
|
return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: _jsx(Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
|
|
22
|
-
}
|
|
23
|
-
|
|
22
|
+
};
|
|
23
|
+
ControlledState.story = {
|
|
24
|
+
name: "Controlled state",
|
|
25
|
+
};
|
|
26
|
+
export const Onboarding = () => {
|
|
24
27
|
return (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [_jsx(Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), _jsx(Pill, { variant: "onboarding", children: "No, I'm just starting out" })] }));
|
|
25
|
-
}
|
|
26
|
-
|
|
28
|
+
};
|
|
29
|
+
export const Link = () => {
|
|
27
30
|
return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20 }, children: _jsx(Pill, { variant: "link", children: "Yes, I love collecting art" }) }));
|
|
28
|
-
}
|
|
31
|
+
};
|
|
29
32
|
const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg";
|
|
@@ -1 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
};
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const WithTitleAndOrContent: {
|
|
7
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
story: {
|
|
9
|
+
name: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const EdgePositions: {
|
|
13
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
story: {
|
|
15
|
+
name: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -1,21 +1,28 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { useState } from "react";
|
|
4
3
|
import { Popover } from "./Popover";
|
|
5
4
|
import { Button } from "../Button";
|
|
6
5
|
import { Flex } from "../Flex";
|
|
7
6
|
import { Text } from "../Text";
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export default {
|
|
8
|
+
title: "Popover",
|
|
9
|
+
};
|
|
10
|
+
export const Variants = () => {
|
|
10
11
|
const [visible, setVisible] = useState(null);
|
|
11
12
|
return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "top-dark", title: _jsx(Text, { color: "mono0", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), _jsx(Popover, { visible: visible === "bottom-dark", placement: "bottom", title: _jsx(Text, { color: "mono0", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), _jsx(Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), _jsx(Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
|
|
12
|
-
}
|
|
13
|
-
|
|
13
|
+
};
|
|
14
|
+
export const WithTitleAndOrContent = () => {
|
|
14
15
|
const [visible, setVisible] = useState(null);
|
|
15
16
|
return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "title", title: _jsx(Text, { weight: "medium", color: "mono0", children: "Popover title" }), content: _jsxs(_Fragment, { children: [_jsx(Text, { color: "mono0", children: "Popover descriptive text with some not so long long long body" }), _jsx(Text, { color: "mono0", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), _jsx(Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title" }), _jsx(Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsxs(Flex, { flexDirection: "row", justifyContent: "flex-end", children: [_jsx(Button, { size: "small", variant: "outlineGray", children: "Learn more" }), _jsx(Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), _jsx(Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title?" }), _jsx(Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsx(Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
|
|
16
|
-
}
|
|
17
|
-
|
|
17
|
+
};
|
|
18
|
+
WithTitleAndOrContent.story = {
|
|
19
|
+
name: "With title and/or content",
|
|
20
|
+
};
|
|
21
|
+
export const EdgePositions = () => {
|
|
18
22
|
const [topVisible, setTopVisible] = useState(true);
|
|
19
23
|
const [bottomVisible, setBottomVisible] = useState(false);
|
|
20
24
|
return (_jsxs(Flex, { flex: 1, backgroundColor: "mono30", justifyContent: "space-between", px: 1, children: [_jsx(Flex, { backgroundColor: "mono0", width: 80, px: 1, children: _jsx(Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: _jsx(Text, { color: "mono0", variant: "xs", children: "Top-Left" }), children: _jsx(Text, { children: "Top-left" }) }) }), _jsx(Flex, { backgroundColor: "mono0", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: _jsx(Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: _jsx(Text, { color: "mono0", variant: "xs", children: "Bottom-Right" }), children: _jsx(Text, { children: "Bottom-right" }) }) })] }));
|
|
21
|
-
}
|
|
25
|
+
};
|
|
26
|
+
EdgePositions.story = {
|
|
27
|
+
name: "Edge positions",
|
|
28
|
+
};
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { ProgressBar } from "./";
|
|
4
3
|
import { Flex } from "../Flex";
|
|
5
4
|
import { Text } from "../Text";
|
|
6
|
-
|
|
5
|
+
export default {
|
|
6
|
+
title: "Progress Indicators",
|
|
7
|
+
};
|
|
8
|
+
export const _ProgressBar = () => (_jsxs(Flex, { p: 2, children: [_jsx(Text, { children: "10%" }), _jsx(ProgressBar, { progress: 10 }), _jsx(Text, { children: "20%" }), _jsx(ProgressBar, { progress: 20 }), _jsx(Text, { children: "50%" }), _jsx(ProgressBar, { progress: 50 })] }));
|
|
9
|
+
_ProgressBar.story = {
|
|
10
|
+
name: "ProgressBar",
|
|
11
|
+
};
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { useState } from "react";
|
|
4
3
|
import { RadioButton } from "./RadioButton";
|
|
5
4
|
import { List } from "../../storybook/helpers";
|
|
6
5
|
import { Flex } from "../Flex";
|
|
7
6
|
export default {
|
|
8
7
|
title: "RadioButton",
|
|
9
|
-
component: RadioButton,
|
|
10
8
|
};
|
|
11
|
-
|
|
9
|
+
export const Default = () => {
|
|
12
10
|
const [metric, setMetric] = useState("cm");
|
|
13
11
|
return (_jsxs(List, { contentContainerStyle: {
|
|
14
12
|
marginHorizontal: 20,
|
|
@@ -23,4 +21,4 @@ storiesOf("RadioButton", module).add("Default", () => {
|
|
|
23
21
|
}, block: true, selected: metric === "cm", text: "Centimeters" }), _jsx(RadioButton, { onPress: () => {
|
|
24
22
|
setMetric("in");
|
|
25
23
|
}, block: true, selected: metric === "in", text: "Inches" })] })] }));
|
|
26
|
-
}
|
|
24
|
+
};
|
|
@@ -1 +1,59 @@
|
|
|
1
|
-
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
};
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const WithHeaderAndBottomView: {
|
|
6
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
story: {
|
|
8
|
+
name: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export declare const WithHeaderAndRightElement: {
|
|
12
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
story: {
|
|
14
|
+
name: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export declare const WithHeaderWithoutLeftElementAndRightElement: {
|
|
18
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
story: {
|
|
20
|
+
name: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export declare const WithRightElementCustomLeftElement: {
|
|
24
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
story: {
|
|
26
|
+
name: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export declare const ScrollViewWithAnimatedHeader: {
|
|
30
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
story: {
|
|
32
|
+
name: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export declare const ScrollViewWithAnimatedHeaderAndRightElement: {
|
|
36
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
story: {
|
|
38
|
+
name: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
export declare const FlatListWithAnimatedHeader: {
|
|
42
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
story: {
|
|
44
|
+
name: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
export declare const FlatListWithAnimatedHeaderAndStickySubHeader: {
|
|
48
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
story: {
|
|
50
|
+
name: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
export declare const FlatListWithAnimatedHeaderAndLargeStickySubHeader: {
|
|
54
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
story: {
|
|
56
|
+
name: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
export declare const Fullwidth: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,22 +1,50 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { Flex } from "../Flex";
|
|
4
3
|
import { Screen } from "../Screen";
|
|
5
4
|
import { Text } from "../Text";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
export default {
|
|
6
|
+
title: "Screen",
|
|
7
|
+
};
|
|
8
|
+
export const WithHeaderAndBottomView = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
|
|
9
|
+
WithHeaderAndBottomView.story = {
|
|
10
|
+
name: "With Header and BottomView",
|
|
11
|
+
};
|
|
12
|
+
export const WithHeaderAndRightElement = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] }));
|
|
13
|
+
WithHeaderAndRightElement.story = {
|
|
14
|
+
name: "With Header and Right Element",
|
|
15
|
+
};
|
|
16
|
+
export const WithHeaderWithoutLeftElementAndRightElement = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", hideLeftElements: true, rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] }));
|
|
17
|
+
WithHeaderWithoutLeftElementAndRightElement.story = {
|
|
18
|
+
name: "With Header, Without Left Element and Right Element",
|
|
19
|
+
};
|
|
20
|
+
export const WithRightElementCustomLeftElement = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", leftElements: _jsx(Text, { variant: "xs", children: "Very long left element" }), rightElements: _jsx(Text, { variant: "xs", children: "right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
|
|
21
|
+
WithRightElementCustomLeftElement.story = {
|
|
22
|
+
name: "With Right Element & Custom Left Element",
|
|
23
|
+
};
|
|
24
|
+
export const ScrollViewWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
|
|
25
|
+
ScrollViewWithAnimatedHeader.story = {
|
|
26
|
+
name: "ScrollView With AnimatedHeader",
|
|
27
|
+
};
|
|
28
|
+
export const ScrollViewWithAnimatedHeaderAndRightElement = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title", rightElements: _jsx(Text, { children: "Right" }) }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
|
|
29
|
+
ScrollViewWithAnimatedHeaderAndRightElement.story = {
|
|
30
|
+
name: "ScrollView With AnimatedHeader and Right Element",
|
|
31
|
+
};
|
|
32
|
+
export const FlatListWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { ListHeaderComponent: () => _jsx(Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
|
|
14
33
|
return (_jsx(Text, { my: 1, children: item }, index));
|
|
15
|
-
} }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }))
|
|
16
|
-
|
|
34
|
+
} }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
|
|
35
|
+
FlatListWithAnimatedHeader.story = {
|
|
36
|
+
name: "FlatList With AnimatedHeader",
|
|
37
|
+
};
|
|
38
|
+
export const FlatListWithAnimatedHeaderAndStickySubHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
|
|
17
39
|
return (_jsx(Text, { my: 1, children: item }, index));
|
|
18
|
-
} }) })] }))
|
|
19
|
-
|
|
40
|
+
} }) })] }));
|
|
41
|
+
FlatListWithAnimatedHeaderAndStickySubHeader.story = {
|
|
42
|
+
name: "FlatList With AnimatedHeader and StickySubHeader",
|
|
43
|
+
};
|
|
44
|
+
export const FlatListWithAnimatedHeaderAndLargeStickySubHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", largeTitle: true, children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
|
|
20
45
|
return (_jsx(Text, { my: 1, children: item }, index));
|
|
21
|
-
} }) })] }))
|
|
22
|
-
|
|
46
|
+
} }) })] }));
|
|
47
|
+
FlatListWithAnimatedHeaderAndLargeStickySubHeader.story = {
|
|
48
|
+
name: "FlatList With AnimatedHeader and large StickySubHeader",
|
|
49
|
+
};
|
|
50
|
+
export const Fullwidth = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(Text, { children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }) })] }));
|
|
@@ -1 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
};
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const SimpleTabs: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const TabsWithIndicator: {
|
|
7
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
story: {
|
|
9
|
+
name: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const TabsWithAnimatedHeader: {
|
|
13
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
story: {
|
|
15
|
+
name: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export declare const _TabsWithHeader: {
|
|
19
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
story: {
|
|
21
|
+
name: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -1,11 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { Tabs } from "./Tabs";
|
|
4
3
|
import { Flex } from "../Flex";
|
|
5
4
|
import { Screen } from "../Screen";
|
|
6
5
|
import { Text } from "../Text";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
export default {
|
|
7
|
+
title: "Tabs",
|
|
8
|
+
};
|
|
9
|
+
export const SimpleTabs = () => (_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] }));
|
|
10
|
+
export const TabsWithIndicator = () => (_jsxs(Tabs, { indicators: [{ tabName: "tab1", Component: () => _jsx(Text, { textAlign: "right", children: "hi" }) }], children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] }));
|
|
11
|
+
TabsWithIndicator.story = {
|
|
12
|
+
name: "Tabs with Indicator",
|
|
13
|
+
};
|
|
14
|
+
export const TabsWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) })] }) })] }));
|
|
15
|
+
TabsWithAnimatedHeader.story = {
|
|
16
|
+
name: "Tabs with AnimatedHeader",
|
|
17
|
+
};
|
|
18
|
+
export const _TabsWithHeader = () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
|
|
19
|
+
_TabsWithHeader.story = {
|
|
20
|
+
name: "Tabs with header",
|
|
21
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ComponentMeta, ComponentStory } from "@storybook/react-native";
|
|
2
1
|
import { Text } from "../Text";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
|
+
declare const meta: Meta<typeof Text>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type TextStory = StoryObj<typeof Text>;
|
|
6
6
|
export declare const Variants: TextStory;
|
|
7
7
|
export declare const VariantsInBoxes: TextStory;
|
|
8
8
|
export declare const BasicProps: TextStory;
|
|
@@ -4,25 +4,37 @@ import { DataList, List } from "../../storybook/helpers";
|
|
|
4
4
|
import { Box } from "../Box";
|
|
5
5
|
import { Flex } from "../Flex";
|
|
6
6
|
import { LinkText, Text } from "../Text";
|
|
7
|
-
const
|
|
7
|
+
const meta = {
|
|
8
8
|
title: "Theme/Text",
|
|
9
9
|
component: Text,
|
|
10
10
|
};
|
|
11
|
-
export default
|
|
11
|
+
export default meta;
|
|
12
12
|
const variants = ["xs", "sm", "md", "lg", "xl", "xxl"];
|
|
13
|
-
export const Variants =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
export const
|
|
13
|
+
export const Variants = {
|
|
14
|
+
render: () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] })) })),
|
|
15
|
+
};
|
|
16
|
+
export const VariantsInBoxes = {
|
|
17
|
+
render: () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Box, { borderWidth: 1, borderColor: "black", width: 100, children: _jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] }) })) })),
|
|
18
|
+
};
|
|
19
|
+
export const BasicProps = {
|
|
20
|
+
render: () => (_jsxs(List, { children: [_jsx(Text, { children: "regular ~~ This is a text." }), _jsx(LinkText, { children: "LinkText." }), _jsx(Text, { caps: true, children: "caps ~~ This is a text." }), _jsx(Text, { italic: true, children: "italics ~~ This is a text." }), _jsx(Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), _jsx(Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), _jsx(Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] })),
|
|
21
|
+
};
|
|
22
|
+
export const Misc = {
|
|
23
|
+
render: () => (_jsxs(List, { children: [_jsx(View, { style: { borderWidth: 1, borderColor: "black" }, children: _jsx(Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), _jsx(View, {}), _jsx(Text, { lineHeight: "20px", fontSize: 30, children: "wow" })] })),
|
|
24
|
+
};
|
|
17
25
|
// this is useful for making sure our custom fonts are rendering at the same height for ios and android
|
|
18
|
-
export const FontCenteringRaw =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
26
|
+
export const FontCenteringRaw = {
|
|
27
|
+
render: () => {
|
|
28
|
+
const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
|
|
29
|
+
const systemFontStyle = Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
|
|
30
|
+
const unicaFontStyle = Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
|
|
31
|
+
return (_jsxs(Flex, { flexDirection: "row", flex: 1, children: [_jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "System font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, systemFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), _jsx(Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), _jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "Unica custom font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
|
|
32
|
+
},
|
|
23
33
|
};
|
|
24
34
|
// this is useful for making sure our custom fonts are rendering at the same height for ios and android
|
|
25
|
-
export const FontCenteringPalette =
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
export const FontCenteringPalette = {
|
|
36
|
+
render: () => {
|
|
37
|
+
const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
|
|
38
|
+
return (_jsxs(Flex, { flex: 1, children: [_jsx(Text, { children: "System font" }), _jsxs(List, { children: [_jsx(Text, { style: style, children: "regular TEXT." }), _jsx(Text, { style: style, children: "ALL CAPS text." })] })] }));
|
|
39
|
+
},
|
|
28
40
|
};
|
|
@@ -1 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
};
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const SimpleToolTip: {
|
|
6
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
story: {
|
|
8
|
+
name: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export declare const BottomToolTip: {
|
|
12
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
story: {
|
|
14
|
+
name: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export declare const ChangeToolTip: {
|
|
18
|
+
(): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
story: {
|
|
20
|
+
name: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { ToolTip, ToolTipContext } from "./ToolTip";
|
|
4
3
|
import { Button } from "../Button";
|
|
5
4
|
import { Flex } from "../Flex";
|
|
6
5
|
import { Text } from "../Text";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
export default {
|
|
7
|
+
title: "ToolTip",
|
|
8
|
+
};
|
|
9
|
+
export const SimpleToolTip = () => (_jsx(Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Tap to dismiss me", position: "TOP", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) }));
|
|
10
|
+
SimpleToolTip.story = {
|
|
11
|
+
name: "Simple ToolTip",
|
|
12
|
+
};
|
|
13
|
+
export const BottomToolTip = () => (_jsx(Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Bottom tooltip", position: "BOTTOM", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) }));
|
|
14
|
+
BottomToolTip.story = {
|
|
15
|
+
name: "Bottom ToolTip",
|
|
16
|
+
};
|
|
17
|
+
export const ChangeToolTip = () => (_jsx(Flex, { alignSelf: "center", mt: "200px", children: _jsx(ToolTip, { initialToolTipText: "I can be changed", position: "TOP", tapToDismiss: true, children: _jsx(ToolTipContext.Consumer, { children: ({ setToolTip }) => {
|
|
11
18
|
return (_jsx(Button, { size: "small", onPress: () => setToolTip("I'm the new tooltip"), children: "Press To Change ToolTip" }));
|
|
12
|
-
} }) }) }))
|
|
19
|
+
} }) }) }));
|
|
20
|
+
ChangeToolTip.story = {
|
|
21
|
+
name: "Change ToolTip",
|
|
22
|
+
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { storiesOf } from "@storybook/react-native";
|
|
3
2
|
import { VisualClueDot, VisualClueText } from "./";
|
|
4
3
|
import { List } from "../../storybook/helpers";
|
|
5
4
|
import { Box } from "../Box";
|
|
6
5
|
import { Text } from "../Text";
|
|
7
|
-
|
|
6
|
+
export default {
|
|
7
|
+
title: "Theme/Text",
|
|
8
|
+
};
|
|
9
|
+
export const VisualClue = () => (_jsxs(List, { children: [_jsxs(Box, { children: [_jsx(Text, { children: "Default" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, {}) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 4" }), _jsx(Box, { position: "absolute", top: "4px", right: "-4px", children: _jsx(VisualClueDot, { diameter: 4 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Diameter: 8" }), _jsx(Box, { position: "absolute", top: "4px", right: "-10px", children: _jsx(VisualClueDot, { diameter: 8 }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red50" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red50" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: red100" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "red100" }) })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Color: mono60" }), _jsx(Box, { position: "absolute", top: "4px", right: "-8px", children: _jsx(VisualClueDot, { color: "mono60" }) })] }), _jsxs(_Fragment, { children: [_jsx(Text, { children: "A Feature" }), _jsx(VisualClueText, { style: { top: 14, right: -24 } })] })] }));
|
package/dist/setupJest.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const useDarkModeSwitcher: DecoratorFunction<ReactNode>;
|
|
1
|
+
import type { Decorator } from "@storybook/react";
|
|
2
|
+
export declare const withTheme: Decorator;
|
|
3
|
+
export declare const useDarkModeSwitcher: Decorator;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette-mobile",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.11.0",
|
|
4
4
|
"description": "Artsy's design system for React Native",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"android": "expo run:android --port 8082",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"@babel/runtime": "^7.25.0",
|
|
79
79
|
"@react-native-async-storage/async-storage": "2.0.0",
|
|
80
80
|
"@react-native/eslint-config": "0.76.9",
|
|
81
|
-
"@storybook/react-native": "6.
|
|
81
|
+
"@storybook/react-native": "7.6.20",
|
|
82
82
|
"@testing-library/react-native": "13.2.0",
|
|
83
83
|
"@types/events": "^3.0.0",
|
|
84
84
|
"@types/jest": "29.4.0",
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
"react-native-device-info": "14.0.4",
|
|
127
127
|
"react-native-haptic-feedback": "1.14.0",
|
|
128
128
|
"react-native-linear-gradient": "2.6.2",
|
|
129
|
-
"react-native-reanimated": "3.
|
|
129
|
+
"react-native-reanimated": "3.16.7",
|
|
130
130
|
"react-native-safe-area-context": "5.4.1",
|
|
131
131
|
"react-native-svg": "15.10.1",
|
|
132
132
|
"react-test-renderer": "18.3.1",
|