Skip to content

Commit

Permalink
feat: use theme colors in Banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@haxonadora
haxonadora committed Oct 15, 2021
1 parent 0c35337 commit 0d07b82
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 22 deletions.
8 changes: 6 additions & 2 deletions src/components/Banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ const Banner = ({
<Surface
{...rest}
style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}
theme={theme}
>
<View style={[styles.wrapper, contentStyle]}>
<Animated.View style={{ height }} />
Expand All @@ -197,15 +198,18 @@ const Banner = ({
<Icon source={icon} size={40} />
</View>
) : null}
<Text style={styles.message}>{children}</Text>
<Text style={[styles.message, { color: theme.colors.text }]}>
{children}
</Text>
</View>
<View style={styles.actions}>
{actions.map(({ label, ...others }, i) => (
<Button
key={/* eslint-disable-line react/no-array-index-key */ i}
compact
mode="text"
style={styles.button}
style={[styles.button]}
color={theme.colors.primary}
{...others}
>
{label}
Expand Down
22 changes: 22 additions & 0 deletions src/components/__tests__/Banner.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,25 @@ it('renders visible banner, with action buttons and with image', () => {

expect(tree).toMatchSnapshot();
});

it('render visible banner, with custom theme', () => {
const tree = renderer
.create(
<Banner
visible
theme={{
colors: {
text: '#00f',
surface: '#ccc',
primary: '#043',
},
}}
actions={[{ label: 'first', onPress: () => {} }]}
>
Custom theme
</Banner>
)
.toJSON();

expect(tree).toMatchSnapshot();
});
255 changes: 235 additions & 20 deletions src/components/__tests__/__snapshots__/Banner.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,195 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`render visible banner, with custom theme 1`] = `
<View
style={
Object {
"backgroundColor": "#ccc",
"elevation": 1,
"shadowColor": "#000000",
"shadowOffset": Object {
"height": 0.5,
"width": 0,
},
"shadowOpacity": 0.24,
"shadowRadius": 0.75,
}
}
>
<View
style={
Array [
Object {
"alignSelf": "center",
"maxWidth": 960,
"overflow": "hidden",
"width": "100%",
},
undefined,
]
}
>
<View
style={
Object {
"height": 0,
}
}
/>
<View
onLayout={[Function]}
style={Object {}}
>
<View
style={
Object {
"flexDirection": "row",
"justifyContent": "flex-start",
"marginBottom": 0,
"marginHorizontal": 8,
"marginTop": 16,
}
}
>
<Text
style={
Array [
Object {
"color": "#000000",
"fontFamily": "System",
"fontWeight": "400",
},
Object {
"textAlign": "left",
},
Array [
Object {
"flex": 1,
"margin": 8,
},
Object {
"color": "#00f",
},
],
]
}
>
Custom theme
</Text>
</View>
<View
style={
Object {
"flexDirection": "row",
"justifyContent": "flex-end",
"margin": 4,
}
}
>
<View
style={
Object {
"backgroundColor": "transparent",
"borderColor": "transparent",
"borderRadius": 4,
"borderStyle": "solid",
"borderWidth": 0,
"elevation": 0,
"margin": 4,
"minWidth": "auto",
}
}
>
<View
accessibilityRole="button"
accessibilityState={
Object {
"disabled": undefined,
}
}
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Array [
Object {
"overflow": "hidden",
},
Object {
"borderRadius": 4,
},
]
}
>
<View
style={
Array [
Object {
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "center",
},
undefined,
]
}
>
<Text
numberOfLines={1}
selectable={false}
style={
Array [
Object {
"color": "#000000",
"fontFamily": "System",
"fontWeight": "400",
},
Object {
"textAlign": "left",
},
Array [
Object {
"letterSpacing": 1,
"marginHorizontal": 16,
"marginVertical": 9,
"textAlign": "center",
},
Object {
"marginHorizontal": 8,
},
Object {
"textTransform": "uppercase",
},
Object {
"color": "#043",
"fontFamily": "System",
"fontWeight": "500",
},
Object {
"fontFamily": "System",
"fontWeight": "500",
},
undefined,
],
]
}
>
first
</Text>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
`;

exports[`renders hidden banner, without action buttons and without image 1`] = `
<View
style={
Expand Down Expand Up @@ -74,10 +264,15 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
Object {
"textAlign": "left",
},
Object {
"flex": 1,
"margin": 8,
},
Array [
Object {
"flex": 1,
"margin": 8,
},
Object {
"color": "#000000",
},
],
]
}
>
Expand Down Expand Up @@ -161,10 +356,15 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
Object {
"textAlign": "left",
},
Object {
"flex": 1,
"margin": 8,
},
Array [
Object {
"flex": 1,
"margin": 8,
},
Object {
"color": "#000000",
},
],
]
}
>
Expand Down Expand Up @@ -346,10 +546,15 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
Object {
"textAlign": "left",
},
Object {
"flex": 1,
"margin": 8,
},
Array [
Object {
"flex": 1,
"margin": 8,
},
Object {
"color": "#000000",
},
],
]
}
>
Expand Down Expand Up @@ -630,10 +835,15 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
Object {
"textAlign": "left",
},
Object {
"flex": 1,
"margin": 8,
},
Array [
Object {
"flex": 1,
"margin": 8,
},
Object {
"color": "#000000",
},
],
]
}
>
Expand Down Expand Up @@ -716,10 +926,15 @@ exports[`renders visible banner, without action buttons and without image 1`] =
Object {
"textAlign": "left",
},
Object {
"flex": 1,
"margin": 8,
},
Array [
Object {
"flex": 1,
"margin": 8,
},
Object {
"color": "#000000",
},
],
]
}
>
Expand Down

0 comments on commit 0d07b82

Please sign in to comment.