From 6e7de431159469f26688b6036cafce959b2ca9af Mon Sep 17 00:00:00 2001 From: Rohit Agrawal Date: Wed, 17 Nov 2021 16:23:57 +0530 Subject: [PATCH] docs: updated Screen docs to reflect new props, scrollability, and pull-to-refresh --- App.tsx | 6 +- .../docs/components/forms/CheckBox.mdx | 6 +- .../docs/components/forms/Radio.mdx | 5 + .../docs/components/layout/Screen.mdx | 62 +- src/components/Atoms/Avatar/Avatar.config.ts | 5 + src/components/Atoms/Avatar/Avatar.spec.tsx | 17 + src/components/Atoms/Avatar/Avatar.story.tsx | 15 + src/components/Atoms/Avatar/Avatar.tsx | 28 + .../__snapshots__/Divider.spec.tsx.snap | 100 + .../Atoms/Box/__snapshots__/Box.spec.tsx.snap | 2 + .../Center/__snapshots__/Center.spec.tsx.snap | 2 + src/components/Atoms/Divider/Divider.tsx | 2 +- src/components/Atoms/Icon/Icon.tsx | 4 +- .../__snapshots__/Pressable.spec.tsx.snap | 202 +- src/components/Atoms/Screen/Screen.spec.tsx | 7 +- src/components/Atoms/Screen/Screen.tsx | 9 +- .../Screen/__snapshots__/Screen.spec.tsx.snap | 6 +- src/components/Atoms/Skeleton/Skeleton.tsx | 128 - .../Atoms/Skeleton/animations/Fade.tsx | 58 - .../Atoms/Skeleton/animations/Progressive.tsx | 66 - .../Atoms/Skeleton/animations/Shine.tsx | 63 - .../Skeleton/animations/ShineOverlay.tsx | 63 - .../Atoms/Skeleton/animations/context.ts | 5 - src/components/Atoms/Spinner/Spinner.tsx | 2 +- src/components/Atoms/Stack/Stack.tsx | 2 +- .../Stack/__snapshots__/Stack.spec.tsx.snap | 36 + src/components/Molecules/Button/Button.tsx | 2 +- .../Button/__snapshots__/Button.spec.tsx.snap | 2852 +++++++++++------ .../Molecules/CheckBox/CheckBoxGroup.tsx | 4 +- .../__snapshots__/CheckBox.spec.tsx.snap | 2834 ++++++++++------ src/components/Molecules/Image/Image.tsx | 8 +- .../Image/__snapshots__/Image.spec.tsx.snap | 25 + .../Input/__snapshots__/Input.spec.tsx.snap | 30 + src/components/Molecules/Radio/RadioGroup.tsx | 4 +- .../Radio/__snapshots__/Radio.spec.tsx.snap | 2016 ++++++++---- .../Molecules/TextLink/TextLink.tsx | 2 +- .../__snapshots__/TextLink.spec.tsx.snap | 996 ++++-- 37 files changed, 6502 insertions(+), 3172 deletions(-) create mode 100644 src/components/Atoms/Avatar/Avatar.config.ts create mode 100644 src/components/Atoms/Avatar/Avatar.spec.tsx create mode 100644 src/components/Atoms/Avatar/Avatar.story.tsx create mode 100644 src/components/Atoms/Avatar/Avatar.tsx create mode 100644 src/components/Atoms/Avatar/__snapshots__/Divider.spec.tsx.snap delete mode 100644 src/components/Atoms/Skeleton/Skeleton.tsx delete mode 100644 src/components/Atoms/Skeleton/animations/Fade.tsx delete mode 100644 src/components/Atoms/Skeleton/animations/Progressive.tsx delete mode 100644 src/components/Atoms/Skeleton/animations/Shine.tsx delete mode 100644 src/components/Atoms/Skeleton/animations/ShineOverlay.tsx delete mode 100644 src/components/Atoms/Skeleton/animations/context.ts diff --git a/App.tsx b/App.tsx index 792696d5..affaaaff 100644 --- a/App.tsx +++ b/App.tsx @@ -37,7 +37,11 @@ const App = () => { return ( {/* */} - + { + console.log("Hello"); + }} + > This is the screen ``` +### Scrolling behaviour + +More often than not the contents inside your screen would exceed the device height, thus `Screen` allows you to add scrolling support to all your screens using the `scrollable` prop. By default, it's value is set to `true`. + +```jsx +This is a scrollable screen + +This is a static screen +``` + +### Pull to Refresh + +The pull-to-refresh (or swipe-to-refresh) pattern lets a user pull down on a list of data using touch in order to retrieve more data. + +This can be added using the `onPullToRefresh` prop which expects a function/Promise which should be executed if a pull-to-refresh action has occured. + +_(Note: The screen needs to scrollable to allow this behaviour to work on iOS devices)_. + +```tsx + { + new Promise((res, rej) => + setTimeout(() => { + console.log("I got executed!"); + res(); + }, 2000) + ); + }} +> + Pull me! + +``` + ## Example import Snack from "../../../src/components/ExpoSnack"; @@ -55,16 +88,37 @@ import TabItem from "@theme/TabItem"; ### Additional props -| Name | Required | Type | Default | Description | -| ------- | -------- | ----------------------------------------------- | ------- | ------------------------- | -| size | false | PearlTheme.components.Screen["sizes"] | | The size of the screen | -| variant | false | PearlTheme.components.Screen["variants"] | | The variant of the screen | +`Screen` also composes a [KeyboardAwareScrollView](https://github.com/APSL/react-native-keyboard-aware-scroll-view), there it supports all of it's props excluding: + +- `refresh` +- `scrollEnabled` +- `showsHorizontalScrollIndicator` +- `showsVerticalScrollIndicator` + +Finally, the following additional props are supported as well: + +| Name | Required | Type | Default | Description | +| ------------------------------ | -------- | ----------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- | +| size | false | PearlTheme.components.Screen["sizes"] | | The size of the screen. | +| variant | false | PearlTheme.components.Screen["variants"] | | The variant of the screen. | +| scrollable | false | boolean | `true` | Whether the screen is scrollable. | +| showScrollBar | false | boolean | `false` | Whether to show the vertical scrollbar if the Screen is scrollable. | +| onPullToRefresh | false | Function | | Method to execute when a pull-to-refresh action is performed. | +| refreshIndicatorColors | false | string[] | | The colors (at least one) that will be used to draw the refresh indicator (Android only). | +| refreshProgressBackgroundColor | false | string | | Progress view top offset. | +| refreshProgressViewOffset | false | number | `0` | The background color of the refresh indicator. | +| refreshIndicatorSize | false | "default" \| "large" | `"default"` | Size of the refresh indicator (Android only). | +| refreshTintColor | false | string | `"default"` | The color of the refresh indicator (iOS only). | +| refreshTitle | false | string | `"default"` | The title displayed under the refresh indicator (iOS only). | +| refreshTitleColor | false | string | `"default"` | The color of the refresh indicator title (iOS only). | ## Default Component Style ```js export default { baseStyle: { + scrollable: true, + showScrollBar: false, backgroundColor: { light: "neutral.50", dark: "neutral.800", diff --git a/src/components/Atoms/Avatar/Avatar.config.ts b/src/components/Atoms/Avatar/Avatar.config.ts new file mode 100644 index 00000000..b680af2d --- /dev/null +++ b/src/components/Atoms/Avatar/Avatar.config.ts @@ -0,0 +1,5 @@ +export default { + parts: ["root", "image", "text"], + baseStyle: {}, + defaults: {}, +}; diff --git a/src/components/Atoms/Avatar/Avatar.spec.tsx b/src/components/Atoms/Avatar/Avatar.spec.tsx new file mode 100644 index 00000000..c083860f --- /dev/null +++ b/src/components/Atoms/Avatar/Avatar.spec.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { render } from "@testing-library/react-native"; +import Avatar from "./Avatar"; +import { ThemeProvider } from "../../../theme/src/themeContext"; + +jest.useFakeTimers(); + +describe("Atoms/Divider", () => { + it("passes the snapshot test in light mode", () => { + const tree = render( + + + + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/Atoms/Avatar/Avatar.story.tsx b/src/components/Atoms/Avatar/Avatar.story.tsx new file mode 100644 index 00000000..48bee358 --- /dev/null +++ b/src/components/Atoms/Avatar/Avatar.story.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { storiesOf } from "@storybook/react-native"; +import Screen from "../Screen/Screen"; +import Avatar from "./Avatar"; + +storiesOf("Avatar", module) + .addDecorator((getStory) => {getStory()}) + .add("Main", () => ( + <> + {/* + + + */} + + )); diff --git a/src/components/Atoms/Avatar/Avatar.tsx b/src/components/Atoms/Avatar/Avatar.tsx new file mode 100644 index 00000000..24c12e4f --- /dev/null +++ b/src/components/Atoms/Avatar/Avatar.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { useMolecularComponentConfig } from "../../../hooks/useMolecularComponentConfig"; +import Box from "../../Atoms/Box/Box"; +import { ImageProps } from "../../Molecules/Image/Image"; + +type AvatarProps = ImageProps & { + /** The size of the avatar */ + size?: string; + /** The variant of the avatar */ + variant?: string; +}; + +// TODO: Add main user image render +// TODO: Add icon fallback based on user name +// TODO: Add support for custom fallback icon +// TODO: Add icon badge to avatar + +/** The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon. */ +const Avatar: React.FC = ({ children, ...rest }) => { + const props = useMolecularComponentConfig("Avatar", rest, { + size: rest.size, + variant: rest.size, + }); + + return ; +}; + +export default Avatar; diff --git a/src/components/Atoms/Avatar/__snapshots__/Divider.spec.tsx.snap b/src/components/Atoms/Avatar/__snapshots__/Divider.spec.tsx.snap new file mode 100644 index 00000000..5e0ba9f5 --- /dev/null +++ b/src/components/Atoms/Avatar/__snapshots__/Divider.spec.tsx.snap @@ -0,0 +1,100 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Atoms/Divider passes the snapshot test for different length modes 1`] = ` +Array [ + , + , +] +`; + +exports[`Atoms/Divider passes the snapshot test in dark mode 1`] = ` +Array [ + , + , +] +`; + +exports[`Atoms/Divider passes the snapshot test in light mode 1`] = ` +Array [ + , + , +] +`; diff --git a/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap b/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap index b24d5dae..931da7db 100644 --- a/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap +++ b/src/components/Atoms/Box/__snapshots__/Box.spec.tsx.snap @@ -2,8 +2,10 @@ exports[`Atoms/Box passes the snapshot test 1`] = ` = ({ iconFamily, diff --git a/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap b/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap index fbbd0d07..05cc5a31 100644 --- a/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap +++ b/src/components/Atoms/Pressable/__snapshots__/Pressable.spec.tsx.snap @@ -11,29 +11,88 @@ exports[`Atoms/Pressable passes the snapshot test for basic setup 1`] = ` } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "display": "flex", - }, - Object { - "backgroundColor": undefined, - "opacity": undefined, - }, - ] + Object { + "alignSelf": undefined, + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": undefined, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - Button press + + + Button press + + `; @@ -48,31 +107,88 @@ exports[`Atoms/Pressable passes the snapshot test when using style props 1`] = ` } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "backgroundColor": "#6A7BFF", - "borderColor": "#C5CEE0", - "borderWidth": 2, - "display": "flex", - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": undefined, - }, - ] + Object { + "alignSelf": undefined, + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": undefined, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - Button press + + + Button press + + `; diff --git a/src/components/Atoms/Screen/Screen.spec.tsx b/src/components/Atoms/Screen/Screen.spec.tsx index 502f0bd3..0e443e22 100644 --- a/src/components/Atoms/Screen/Screen.spec.tsx +++ b/src/components/Atoms/Screen/Screen.spec.tsx @@ -5,11 +5,16 @@ import { ThemeProvider } from "../../../theme/src/themeContext"; jest.useFakeTimers(); +jest.mock("react-native-keyboard-aware-scroll-view", () => { + const KeyboardAwareScrollView = ({ children }: { children: any }) => children; + return { KeyboardAwareScrollView }; +}); + describe("Atoms/Screen", () => { it("passes the snapshot test", () => { const tree = render( - asdasd + ).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/components/Atoms/Screen/Screen.tsx b/src/components/Atoms/Screen/Screen.tsx index 42ca81fc..64b2900c 100644 --- a/src/components/Atoms/Screen/Screen.tsx +++ b/src/components/Atoms/Screen/Screen.tsx @@ -15,9 +15,10 @@ import { } from "react-native-keyboard-aware-scroll-view"; import { useTheme } from "../../../hooks/useTheme"; -type ScreenProps = BoxProps & +export type ScreenProps = BoxProps & Omit< KeyboardAwareScrollViewProps, + | "refresh" | "scrollEnabled" | "showsHorizontalScrollIndicator" | "showsVerticalScrollIndicator" @@ -48,6 +49,8 @@ type ScreenProps = BoxProps & refreshTitleColor?: string; }; +// TODO: Add Custom Pull-to-Refresh components and animations + /** A layout component that you can use to wrap all the views in your app. */ const Screen: React.FC = ({ children, @@ -94,8 +97,10 @@ const Screen: React.FC = ({ > - asdasd - + /> `; diff --git a/src/components/Atoms/Skeleton/Skeleton.tsx b/src/components/Atoms/Skeleton/Skeleton.tsx deleted file mode 100644 index 1251c658..00000000 --- a/src/components/Atoms/Skeleton/Skeleton.tsx +++ /dev/null @@ -1,128 +0,0 @@ -// import React from "react"; -// import { -// backgroundColor, -// BackgroundColorProps, -// color, -// ColorProps, -// layout, -// LayoutProps, -// spacing, -// SpacingProps, -// opacity, -// OpacityProps, -// visible, -// VisibleProps, -// } from "../../../theme/src/styleFunctions"; -// import { RNStyle, StyleFunctionContainer } from "../../../theme/src/types"; -// import { -// AntDesign, -// Entypo, -// EvilIcons, -// Feather, -// FontAwesome, -// FontAwesome5, -// Fontisto, -// Foundation, -// Ionicons, -// MaterialCommunityIcons, -// MaterialIcons, -// Octicons, -// SimpleLineIcons, -// Zocial, -// } from "@expo/vector-icons"; -// import { useAtomicComponentConfig } from "../../../hooks/useAtomicComponentConfig"; -// import responsiveSize from "../../../utils/responsiveSize"; - -// const iconStyleFunctions = [ -// color, -// backgroundColor, -// spacing, -// layout, -// opacity, -// visible, -// ] as StyleFunctionContainer[]; - -// type IconProps = ColorProps & -// BackgroundColorProps & -// SpacingProps & -// LayoutProps & -// OpacityProps & -// VisibleProps & { -// /** Icon family that contains the icon you want to use */ -// iconFamily: -// | "AntDesign" -// | "Entypo" -// | "EvilIcons" -// | "Feather" -// | "FontAwesome" -// | "FontAwesome5" -// | "Fontisto" -// | "Foundation" -// | "Ionicons" -// | "MaterialCommunityIcons" -// | "MaterialIcons" -// | "Octicons" -// | "SimpleLineIcons" -// | "Zocial"; -// /** Name of the icon as given in it's respective icon family */ -// iconName: string; -// /** The size of the icon */ -// size?: string; -// /** The variant of the icon */ -// variant?: string; -// /** The accessibility label of the icon */ -// accessibilityLabel?: string; -// style?: RNStyle; -// }; - -// const iconFamilyMapping = { -// AntDesign, -// Entypo, -// EvilIcons, -// Feather, -// FontAwesome, -// FontAwesome5, -// Fontisto, -// Foundation, -// Ionicons, -// MaterialCommunityIcons, -// MaterialIcons, -// Octicons, -// SimpleLineIcons, -// Zocial, -// }; - -// /** he `Icon` component can used to add Expo Icons to your app and customize them using style props. */ -// const Icon: React.FC = ({ -// iconFamily, -// iconName, -// size = "m", -// accessibilityLabel = null, -// ...rest -// }) => { -// const props = useAtomicComponentConfig( -// "Skeleton", -// rest, -// { -// size: size, -// variant: rest.variant, -// }, -// iconStyleFunctions -// ); - -// const IconToUse = iconFamilyMapping[iconFamily]; - -// return ( -// -// ); -// }; - -// export default Icon; diff --git a/src/components/Atoms/Skeleton/animations/Fade.tsx b/src/components/Atoms/Skeleton/animations/Fade.tsx deleted file mode 100644 index 2c9df18d..00000000 --- a/src/components/Atoms/Skeleton/animations/Fade.tsx +++ /dev/null @@ -1,58 +0,0 @@ -// import React, { useRef } from "react"; -// import { Animated, ViewProps } from "react-native"; -// import { AnimationContext } from "./context"; - -// const START_VALUE = 0.5; -// const END_VALUE = 1; -// const useNativeDriver = true; -// const isInteraction = false; - -// export interface FadeProps extends ViewProps { -// /* Animation duration, default is 500 */ -// duration?: number; -// } - -// export const Fade: React.FC = ({ -// duration = 500, -// children, -// style, -// }) => { -// const animation = useRef(new Animated.Value(START_VALUE)); - -// const start = () => { -// Animated.sequence([ -// Animated.timing(animation.current, { -// duration, -// isInteraction, -// toValue: END_VALUE, -// useNativeDriver, -// }), -// Animated.timing(animation.current, { -// duration, -// isInteraction, -// toValue: START_VALUE, -// useNativeDriver, -// }), -// ]).start((e) => { -// if (e.finished) { -// start(); -// } -// }); -// }; - -// React.useEffect(() => { -// start(); -// }, []); - -// const animationStyle = { -// backgroundColor: "#dfdfdf", -// height: "100%", -// opacity: animation.current, -// }; - -// return ( -// -// {children} -// -// ); -// }; diff --git a/src/components/Atoms/Skeleton/animations/Progressive.tsx b/src/components/Atoms/Skeleton/animations/Progressive.tsx deleted file mode 100644 index 933c121f..00000000 --- a/src/components/Atoms/Skeleton/animations/Progressive.tsx +++ /dev/null @@ -1,66 +0,0 @@ -// import React, { useRef } from "react"; -// import { Animated, StyleSheet, ViewProps } from "react-native"; -// import { AnimationContext } from "./context"; - -// const START_VALUE = 0; -// const END_VALUE = 100; -// const DURATION = 750; -// const isInteraction = false; - -// export interface ProgressiveProps extends ViewProps { -// color?: string; -// } - -// export const Progressive: React.FC = ({ -// style, -// color = "rgba(0,0,0,0.1)", -// children, -// }) => { -// const animation = useRef(new Animated.Value(START_VALUE)); - -// const start = () => { -// Animated.sequence([ -// Animated.timing(animation.current, { -// duration: DURATION, -// isInteraction, -// toValue: END_VALUE, -// useNativeDriver: false, -// }), -// Animated.timing(animation.current, { -// duration: DURATION, -// isInteraction, -// toValue: START_VALUE, -// useNativeDriver: false, -// }), -// ]).start((e) => { -// if (e.finished) { -// start(); -// } -// }); -// }; - -// React.useEffect(() => { -// start(); -// }, []); - -// const right = animation.current.interpolate({ -// inputRange: [START_VALUE, END_VALUE], -// outputRange: ["0%", "100%"], -// }); - -// return ( -// -// {children} -// -// ); -// }; - -// const styles = StyleSheet.create({ -// animationStyle: { -// height: "100%", -// position: "absolute", -// width: "100%", -// }, -// }); diff --git a/src/components/Atoms/Skeleton/animations/Shine.tsx b/src/components/Atoms/Skeleton/animations/Shine.tsx deleted file mode 100644 index 54dcae6d..00000000 --- a/src/components/Atoms/Skeleton/animations/Shine.tsx +++ /dev/null @@ -1,63 +0,0 @@ -// import React, { useEffect, useRef } from "react"; -// import { Animated, StyleSheet, ViewProps } from "react-native"; -// import { AnimationContext } from "./context"; - -// const START_VALUE = 0; -// const END_VALUE = 100; -// const isInteraction = false; - -// export interface ShineProps extends ViewProps { -// /* Animation duration, default is 750 */ -// duration?: number; - -// /* Play the animation in reverse mod */ -// reverse: boolean; -// } - -// export const Shine: React.FC = ({ -// duration, -// children, -// style, -// reverse, -// }) => { -// const animation = useRef(new Animated.Value(START_VALUE)); - -// const start = () => { -// animation.current.setValue(START_VALUE); - -// Animated.timing(animation.current, { -// duration: duration || 750, -// isInteraction, -// toValue: END_VALUE, -// useNativeDriver: false, -// }).start((e) => { -// if (e.finished) { -// start(); -// } -// }); -// }; - -// useEffect(() => { -// start(); -// }, []); - -// const left = animation.current.interpolate({ -// inputRange: [START_VALUE, END_VALUE], -// outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"], -// }); - -// return ( -// -// {children} -// -// ); -// }; - -// const styles = StyleSheet.create({ -// shine: { -// backgroundColor: "white", -// height: "100%", -// opacity: 0.5, -// width: "40%", -// }, -// }); diff --git a/src/components/Atoms/Skeleton/animations/ShineOverlay.tsx b/src/components/Atoms/Skeleton/animations/ShineOverlay.tsx deleted file mode 100644 index 2a0d6257..00000000 --- a/src/components/Atoms/Skeleton/animations/ShineOverlay.tsx +++ /dev/null @@ -1,63 +0,0 @@ -// import React, { useEffect, useRef } from "react"; -// import { Animated, StyleSheet, View } from "react-native"; - -// const START_VALUE = 0; -// const END_VALUE = 100; -// const isInteraction = false; - -// export interface ShineOverlayProps { -// /* Animation duration, default is 750 */ -// duration?: number; - -// /* Play the animation in reverse mod */ -// reverse?: boolean; -// } - -// export const ShineOverlay: React.FC = ({ -// duration, -// children, -// reverse, -// }) => { -// const animation = useRef(new Animated.Value(START_VALUE)); - -// const start = () => { -// animation.current.setValue(START_VALUE); - -// Animated.timing(animation.current, { -// duration: duration || 750, -// isInteraction, -// toValue: END_VALUE, -// useNativeDriver: false, -// }).start((e) => { -// if (e.finished) { -// start(); -// } -// }); -// }; - -// useEffect(() => { -// start(); -// }, []); - -// const left = animation.current.interpolate({ -// inputRange: [START_VALUE, END_VALUE], -// outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"], -// }); - -// return ( -// -// {children} -// -// -// ); -// }; - -// const styles = StyleSheet.create({ -// shine: { -// backgroundColor: "#ffffff", -// height: "100%", -// opacity: 0.4, -// position: "absolute", -// width: 30, -// }, -// }); diff --git a/src/components/Atoms/Skeleton/animations/context.ts b/src/components/Atoms/Skeleton/animations/context.ts deleted file mode 100644 index 3b4176f2..00000000 --- a/src/components/Atoms/Skeleton/animations/context.ts +++ /dev/null @@ -1,5 +0,0 @@ -// import React, { useContext } from "react"; - -// export const AnimationContext = React.createContext({}); - -// export const useAnimation = () => useContext(AnimationContext); diff --git a/src/components/Atoms/Spinner/Spinner.tsx b/src/components/Atoms/Spinner/Spinner.tsx index 4ef311a7..5efa7801 100644 --- a/src/components/Atoms/Spinner/Spinner.tsx +++ b/src/components/Atoms/Spinner/Spinner.tsx @@ -29,7 +29,7 @@ const indicatorStyleFunctions = [ layout, ] as StyleFunctionContainer[]; -type SpinnerProps = ColorProps & +export type SpinnerProps = ColorProps & SpacingProps & LayoutProps & { /** Size of the spinner. */ diff --git a/src/components/Atoms/Stack/Stack.tsx b/src/components/Atoms/Stack/Stack.tsx index b468ad23..71884468 100644 --- a/src/components/Atoms/Stack/Stack.tsx +++ b/src/components/Atoms/Stack/Stack.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from "react"; import { BasePearlTheme } from "../../../theme/src/types"; import Box, { BoxProps } from "../Box/Box"; -type StackProps = BoxProps & { +export type StackProps = BoxProps & { /** The direction to stack the items */ direction: "horizontal" | "vertical"; /** The spacing between the elements */ diff --git a/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap b/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap index 8995849b..01af37e5 100644 --- a/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap +++ b/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap @@ -4,10 +4,12 @@ exports[`Atoms/Stack passes the snapshot test for horizontal direction 1`] = ` } + onLayout={[Function]} spacing="l" style={ Object { "alignSelf": "flex-start", + "borderRadius": undefined, "display": "flex", "flexDirection": "row", "flexWrap": "wrap", @@ -15,9 +17,11 @@ exports[`Atoms/Stack passes the snapshot test for horizontal direction 1`] = ` } > } + onLayout={[Function]} spacing="l" style={ Object { "alignSelf": "flex-start", + "borderRadius": undefined, "display": "flex", "flexDirection": "column", "flexWrap": "nowrap", @@ -161,9 +181,11 @@ exports[`Atoms/Stack passes the snapshot test for vertical direction 1`] = ` } > - - Button press - + + + Button press + + + `; @@ -78,56 +135,113 @@ Array [ } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "activeBackgroundColor": "#8F9DFF", - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#6A7BFF", - "borderRadius": 8, - "display": "flex", - "justifyContent": "center", - "marginVertical": 4, - "opacity": 1, - "paddingHorizontal": 12, - "paddingVertical": 12, - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": 1, - }, - ] + Object { + "alignSelf": "flex-start", + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": 4, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - - Primary button - + + + Primary button + + + , - - Secondary button - + + + Secondary button + + + , ] `; @@ -207,65 +378,124 @@ Array [ } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "activeBackgroundColor": "#8F9DFF", - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#6A7BFF", - "borderRadius": 8, - "display": "flex", - "justifyContent": "center", - "marginVertical": 4, - "opacity": 1, - "paddingHorizontal": 12, - "paddingVertical": 12, - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": 1, - }, - ] + Object { + "alignSelf": "flex-start", + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": 4, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - - - Button with left icon - + + + + Button with left icon + + + , - - Button with right icon - - + + + Button with right icon + + + + , ] @@ -359,57 +646,114 @@ Array [ } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - size="xs" + onLayout={[Function]} style={ - Array [ - Object { - "activeBackgroundColor": "#8F9DFF", - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#6A7BFF", - "borderRadius": 4, - "display": "flex", - "justifyContent": "center", - "marginVertical": 4, - "opacity": 1, - "paddingHorizontal": 8, - "paddingVertical": 4, - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": 1, - }, - ] + Object { + "alignSelf": "flex-start", + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": 4, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - - Button press - + + + Button press + + + , - - Button press - + + + Button press + + + , - - Button press - + + + Button press + + + , - - Button press - + + + Button press + + + , ] `; @@ -616,57 +1131,114 @@ Array [ } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "activeBackgroundColor": "#8F9DFF", - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#6A7BFF", - "borderRadius": 8, - "display": "flex", - "justifyContent": "center", - "marginVertical": 4, - "opacity": 1, - "paddingHorizontal": 12, - "paddingVertical": 12, - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": 1, - }, - ] + Object { + "alignSelf": "flex-start", + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": 4, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } - variant="filled" > - - Button press - + + + Button press + + + , - - Button press - + + + Button press + + + , - - Button press - + + + Button press + + + , ] `; @@ -812,110 +1496,139 @@ Array [ } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "activeBackgroundColor": "#8F9DFF", - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#6A7BFF", - "borderRadius": 8, - "display": "flex", - "justifyContent": "center", - "marginVertical": 4, - "opacity": 0.5, - "paddingHorizontal": 12, - "paddingVertical": 12, - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": 0.5, - }, - ] + Object { + "alignSelf": "flex-start", + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": 4, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > @@ -925,10 +1638,10 @@ Array [ "height": 15, "transform": Array [ Object { - "translateY": 0, + "rotate": "82.5deg", }, Object { - "rotate": "-172.5deg", + "rotate": "0deg", }, ], "width": 15, @@ -948,56 +1661,55 @@ Array [ + > + + + + - - - - @@ -1007,10 +1719,10 @@ Array [ "height": 15, "transform": Array [ Object { - "translateY": -7.5, + "rotate": "82.5deg", }, Object { - "rotate": "352.5deg", + "rotate": "0deg", }, ], "width": 15, @@ -1023,6 +1735,7 @@ Array [ Object { "height": 7.5, "overflow": "hidden", + "top": 7.5, "width": 15, } } @@ -1030,39 +1743,67 @@ Array [ + > + + + + + + Basic loading button + - - Basic loading button - , @@ -1196,10 +1968,10 @@ Array [ "height": 15, "transform": Array [ Object { - "translateY": 0, + "rotate": "82.5deg", }, Object { - "rotate": "-172.5deg", + "rotate": "0deg", }, ], "width": 15, @@ -1219,56 +1991,55 @@ Array [ + > + + + + - - - - @@ -1278,10 +2049,10 @@ Array [ "height": 15, "transform": Array [ Object { - "translateY": -7.5, + "rotate": "82.5deg", }, Object { - "rotate": "352.5deg", + "rotate": "0deg", }, ], "width": 15, @@ -1294,6 +2065,7 @@ Array [ Object { "height": 7.5, "overflow": "hidden", + "top": 7.5, "width": 15, } } @@ -1301,40 +2073,68 @@ Array [ + > + + + + + + Loading + - - Loading - , - - Loading - - + Loading + + @@ -1488,10 +2319,10 @@ Array [ "height": 15, "transform": Array [ Object { - "translateY": 0, + "rotate": "82.5deg", }, Object { - "rotate": "-172.5deg", + "rotate": "0deg", }, ], "width": 15, @@ -1511,56 +2342,55 @@ Array [ + > + + + + - - - - @@ -1570,10 +2400,10 @@ Array [ "height": 15, "transform": Array [ Object { - "translateY": -7.5, + "rotate": "82.5deg", }, Object { - "rotate": "352.5deg", + "rotate": "0deg", }, ], "width": 15, @@ -1586,6 +2416,7 @@ Array [ Object { "height": 7.5, "overflow": "hidden", + "top": 7.5, "width": 15, } } @@ -1593,14 +2424,42 @@ Array [ + > + + + + @@ -1625,57 +2484,112 @@ exports[`Molecules/Button passes the snapshot test when using style props 1`] = } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "activeBackgroundColor": "#8F9DFF", - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#6A7BFF", - "borderColor": "#C5CEE0", - "borderRadius": 8, - "borderWidth": 2, - "display": "flex", - "justifyContent": "center", - "marginVertical": 4, - "opacity": 1, - "paddingHorizontal": 12, - "paddingVertical": 12, - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": 1, - }, - ] + Object { + "alignSelf": "flex-start", + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": 4, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - - Button press - + + + Button press + + + `; diff --git a/src/components/Molecules/CheckBox/CheckBoxGroup.tsx b/src/components/Molecules/CheckBox/CheckBoxGroup.tsx index 33194a4f..ad18407b 100644 --- a/src/components/Molecules/CheckBox/CheckBoxGroup.tsx +++ b/src/components/Molecules/CheckBox/CheckBoxGroup.tsx @@ -1,7 +1,7 @@ import React, { createContext, useContext } from "react"; import Box, { BoxProps } from "../../Atoms/Box/Box"; -export interface ICheckBoxGroupContext { +interface ICheckBoxGroupContext { /** Size of all the checkbox children in the group. */ size?: string; /** Variant of all the checkbox children in the group. */ @@ -28,7 +28,7 @@ const checkboxGroupContext = createContext({} as ICheckBoxGroupContext); export const useCheckBoxGroup = () => useContext(checkboxGroupContext) as ICheckBoxGroupContext; -type CheckBoxGroupProps = BoxProps & { +export type CheckBoxGroupProps = BoxProps & { /** Size of all the children checkbox in the group. */ size?: string; /** Variant of all the children checkbox in the group. */ diff --git a/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap b/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap index 33399785..88f52f77 100644 --- a/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap +++ b/src/components/Molecules/CheckBox/__snapshots__/CheckBox.spec.tsx.snap @@ -12,10 +12,12 @@ exports[`Molecules/CheckBox passes the snapshot test for basic setup 1`] = ` } accessible={true} direction="horizontal" + onLayout={[Function]} spacing="xs" style={ Object { "alignSelf": "flex-start", + "borderRadius": undefined, "display": "flex", "flexDirection": "row", "flexWrap": "wrap", @@ -25,9 +27,11 @@ exports[`Molecules/CheckBox passes the snapshot test for basic setup 1`] = ` } > + - + "overflow": "hidden", + } + } + > + + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + - -  - + + +  + + + = ({ +const Image: React.FC = ({ children, source, onError = () => {}, diff --git a/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap b/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap index 36b2de73..65968264 100644 --- a/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap +++ b/src/components/Molecules/Image/__snapshots__/Image.spec.tsx.snap @@ -6,6 +6,7 @@ exports[`Molecules/Image loads uses the filesystem url for remote images with ca accessible={true} isCached={true} loaderType="spinner" + onLayout={[Function]} previewSource={ Object { "uri": "https://www.logolynx.com/images/logolynx/43/430c07f27af3fda19373042528edbe3d.jpeg", @@ -59,9 +60,11 @@ exports[`Molecules/Image loads uses the filesystem url for remote images with ca } /> useContext(radioGroupContext) as IRadioGroupContext; -type RadioGroupProps = BoxProps & { +export type RadioGroupProps = BoxProps & { /** Size of all the children radio in the group. */ size?: string; /** Variant of all the children radio in the group. */ diff --git a/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap b/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap index 28a2e696..d06b60fb 100644 --- a/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap +++ b/src/components/Molecules/Radio/__snapshots__/Radio.spec.tsx.snap @@ -12,10 +12,12 @@ exports[`Molecules/Radio passes the snapshot test for basic setup 1`] = ` } accessible={true} direction="horizontal" + onLayout={[Function]} spacing="xs" style={ Object { "alignSelf": "flex-start", + "borderRadius": undefined, "display": "flex", "flexDirection": "row", "flexWrap": "wrap", @@ -25,9 +27,11 @@ exports[`Molecules/Radio passes the snapshot test for basic setup 1`] = ` } > + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + + > + + + + - - Text Link press - + + + Text Link press + + + `; @@ -67,47 +126,106 @@ Array [ } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "display": "flex", - "opacity": 1, - }, - Object { - "backgroundColor": undefined, - "opacity": 1, - }, - ] + Object { + "alignSelf": undefined, + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": undefined, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - - Primary text link - + + + Primary text link + + + , - - Secondary text link - + + + Secondary text link + + + , ] `; @@ -176,48 +353,107 @@ Array [ } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - size="xs" + onLayout={[Function]} style={ - Array [ - Object { - "display": "flex", - "opacity": 1, - }, - Object { - "backgroundColor": undefined, - "opacity": 1, - }, - ] + Object { + "alignSelf": undefined, + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": undefined, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - - Text Link press - + + + Text Link press + + + , - - Text Link press - + + + Text Link press + + + , - - Text Link press - + + + Text Link press + + + , - - Text Link press - + + + Text Link press + + + , ] `; @@ -392,49 +805,106 @@ exports[`Molecules/TextLink passes the snapshot test when using style props 1`] } } accessible={true} - focusable={true} - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + onLayout={[Function]} style={ - Array [ - Object { - "backgroundColor": "#6A7BFF", - "borderColor": "#C5CEE0", - "borderWidth": 2, - "display": "flex", - "opacity": 1, - }, - Object { - "backgroundColor": "#6A7BFF", - "opacity": 1, - }, - ] + Object { + "alignSelf": undefined, + "borderRadius": undefined, + "bottom": undefined, + "display": "flex", + "elevation": undefined, + "end": undefined, + "left": undefined, + "margin": undefined, + "marginBottom": undefined, + "marginEnd": undefined, + "marginHorizontal": undefined, + "marginLeft": undefined, + "marginRight": undefined, + "marginStart": undefined, + "marginTop": undefined, + "marginVertical": undefined, + "position": undefined, + "right": undefined, + "shadowColor": undefined, + "shadowOffset": undefined, + "shadowOpacity": undefined, + "shadowRadius": undefined, + "start": undefined, + "top": undefined, + } } > - - Text link press - + + + Text link press + + + `;