@butternutbox/pawprint-native 0.10.0 → 0.10.1
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/.turbo/turbo-build.log +5 -5
- package/CHANGELOG.md +7 -0
- package/dist/index.cjs +1 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.stories.tsx +37 -0
- package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.tsx +4 -5
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import { View, StyleSheet } from "react-native"
|
|
3
3
|
import { ProductDisplayCard } from "./ProductDisplayCard"
|
|
4
|
+
import { Typography } from "../../atoms/Typography"
|
|
4
5
|
import type { ProductDisplayCardProps } from "./ProductDisplayCard"
|
|
5
6
|
|
|
6
7
|
const placeholderImageUrl =
|
|
@@ -243,3 +244,39 @@ export const WithImagePress = () => {
|
|
|
243
244
|
</View>
|
|
244
245
|
)
|
|
245
246
|
}
|
|
247
|
+
|
|
248
|
+
export const WithCustomBanner = () => (
|
|
249
|
+
<View style={styles.column}>
|
|
250
|
+
<ProductDisplayCard
|
|
251
|
+
title="Recipe Name"
|
|
252
|
+
subtext="+£0.00/pouch"
|
|
253
|
+
showSubtext
|
|
254
|
+
quantity={1}
|
|
255
|
+
showQuantityPicker
|
|
256
|
+
showBanner
|
|
257
|
+
bannerType="info"
|
|
258
|
+
showBannerIcon={false}
|
|
259
|
+
banner={
|
|
260
|
+
<View style={{ gap: 8 }}>
|
|
261
|
+
<View style={{ gap: 4 }}>
|
|
262
|
+
<Typography variant="body" size="sm" weight="semiBold">
|
|
263
|
+
Nutritional Benefits
|
|
264
|
+
</Typography>
|
|
265
|
+
</View>
|
|
266
|
+
<View style={{ gap: 4 }}>
|
|
267
|
+
<Typography variant="body" size="xs" color="secondary">
|
|
268
|
+
• High in protein
|
|
269
|
+
</Typography>
|
|
270
|
+
<Typography variant="body" size="xs" color="secondary">
|
|
271
|
+
• Natural ingredients
|
|
272
|
+
</Typography>
|
|
273
|
+
<Typography variant="body" size="xs" color="secondary">
|
|
274
|
+
• Vet approved
|
|
275
|
+
</Typography>
|
|
276
|
+
</View>
|
|
277
|
+
</View>
|
|
278
|
+
}
|
|
279
|
+
image={placeholderImageUrl}
|
|
280
|
+
/>
|
|
281
|
+
</View>
|
|
282
|
+
)
|
|
@@ -22,7 +22,7 @@ export type ProductDisplayCardProps = ViewProps & {
|
|
|
22
22
|
imageBackgroundColor?: string
|
|
23
23
|
thumbnailWidth?: number
|
|
24
24
|
onImagePress?: () => void
|
|
25
|
-
banner?: React.ReactNode
|
|
25
|
+
banner?: string | React.ReactNode
|
|
26
26
|
showBanner?: boolean
|
|
27
27
|
bannerType?: "error" | "success" | "warning" | "info"
|
|
28
28
|
showBannerIcon?: boolean
|
|
@@ -110,8 +110,7 @@ const StyledBannerWrapper = styled(View)(({ theme }) => {
|
|
|
110
110
|
const StyledRootWrapper = styled(View)(() => {
|
|
111
111
|
return {
|
|
112
112
|
flexDirection: "column",
|
|
113
|
-
width: "100%"
|
|
114
|
-
maxWidth: 358
|
|
113
|
+
width: "100%"
|
|
115
114
|
}
|
|
116
115
|
})
|
|
117
116
|
|
|
@@ -154,8 +153,8 @@ const StyledNotification = styled(Notification as any)(({ theme }) => {
|
|
|
154
153
|
* @param quantity - *(optional)* Current quantity value
|
|
155
154
|
* @param onQuantityChange - *(optional)* Callback when quantity changes
|
|
156
155
|
* @param showQuantityPicker - *(optional)* Show/hide quantity picker
|
|
157
|
-
* @param image - *(optional)* Image
|
|
158
|
-
* @param banner - *(optional)* Banner content to show below card
|
|
156
|
+
* @param image - *(optional)* Image URL string or React element
|
|
157
|
+
* @param banner - *(optional)* Banner content string or React element to show below card
|
|
159
158
|
* @param showBanner - *(optional)* Show/hide banner
|
|
160
159
|
* @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
|
|
161
160
|
* @param showBannerIcon - *(optional)* Show/hide banner notification icon
|