@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/MessageCard/MessageCard.tsx

@@ -0,0 +1,362 @@
+import React from "react"
+import { View, ViewProps, Image, ImageSourcePropType } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Icon, type PawprintIcon } from "../../atoms/Icon"
+import { Illustration } from "../../atoms/Illustration"
+import { Typography } from "../../atoms/Typography"
+import { Link } from "../../atoms/Link"
+
+// ─── Shared ───────────────────────────────────────────────────────────────────
+
+type PawprintIllustration = React.ComponentType<{
+  width?: number
+  height?: number
+}>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+// ─── Insight variant ──────────────────────────────────────────────────────────
+
+type InsightVariant = "standalone" | "supporting"
+
+type MessageCardInsightOwnProps = {
+  variant?: InsightVariant
+  icon?: PawprintIcon
+  illustration?: PawprintIllustration
+  title?: string
+  children: React.ReactNode
+}
+
+export type MessageCardInsightProps = MessageCardInsightOwnProps &
+  Omit<ViewProps, keyof MessageCardInsightOwnProps>
+
+const StyledInsightRoot = styled(View)<{
+  rootGap: number
+  rootPaddingH: number
+  rootPaddingTop: number
+  rootPaddingBottom: number
+  rootBorderTopLeftRadius: number
+  rootBorderTopRightRadius: number
+  rootBorderBottomLeftRadius: number
+  rootBorderBottomRightRadius: number
+  rootBgColor: string
+  rootMinWidth: number
+}>(
+  ({
+    rootGap,
+    rootPaddingH,
+    rootPaddingTop,
+    rootPaddingBottom,
+    rootBorderTopLeftRadius,
+    rootBorderTopRightRadius,
+    rootBorderBottomLeftRadius,
+    rootBorderBottomRightRadius,
+    rootBgColor,
+    rootMinWidth
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: rootGap,
+    paddingHorizontal: rootPaddingH,
+    paddingTop: rootPaddingTop,
+    paddingBottom: rootPaddingBottom,
+    borderTopLeftRadius: rootBorderTopLeftRadius,
+    borderTopRightRadius: rootBorderTopRightRadius,
+    borderBottomLeftRadius: rootBorderBottomLeftRadius,
+    borderBottomRightRadius: rootBorderBottomRightRadius,
+    backgroundColor: rootBgColor,
+    minWidth: rootMinWidth
+  })
+)
+
+const StyledInsightContent = styled(View)<{ contentGap: number }>(
+  ({ contentGap }) => ({
+    flex: 1,
+    flexDirection: "column",
+    minWidth: 0,
+    gap: contentGap
+  })
+)
+
+/**
+ * Yellow highlight card for bite-sized USPs and trust signals.
+ *
+ * @param {"standalone" | "supporting"} [variant="standalone"] - `supporting`
+ *   renders a flat top edge when attached to a related element above.
+ * @param {PawprintIcon} [icon] - Optional core icon. Ignored when
+ *   `illustration` is provided.
+ * @param {PawprintIllustration} [illustration] - Optional illustration; takes
+ *   precedence over `icon`.
+ * @param {string} [title] - Optional headline. Renders above the body copy
+ *   in both `standalone` and `supporting` variants.
+ * @param {React.ReactNode} children - Body copy.
+ */
+const MessageCardInsight = React.forwardRef<View, MessageCardInsightProps>(
+  (
+    { variant = "standalone", icon, illustration, title, children, ...rest },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { insightCard } = theme.tokens.components
+    const semanticSpacing = theme.tokens.semantics.dimensions.spacing
+
+    const isSupporting = variant === "supporting"
+    const supporting = insightCard.spacing.supporting
+    const standalone = insightCard.spacing.standalone
+
+    const radiusStandalone = parseTokenValue(
+      insightCard.borderRadius.standalone.default
+    )
+    const radiusSupporting = parseTokenValue(
+      insightCard.borderRadius.supporting.bottom
+    )
+
+    return (
+      <StyledInsightRoot
+        ref={ref}
+        rootGap={parseTokenValue(
+          isSupporting ? supporting.gap : standalone.gap
+        )}
+        rootPaddingH={parseTokenValue(
+          isSupporting ? semanticSpacing.md : standalone.horizontalPadding
+        )}
+        rootPaddingTop={parseTokenValue(
+          isSupporting ? supporting.topPadding : standalone.verticalPadding
+        )}
+        rootPaddingBottom={parseTokenValue(
+          isSupporting ? supporting.bottomPadding : standalone.verticalPadding
+        )}
+        rootBorderTopLeftRadius={isSupporting ? 0 : radiusStandalone}
+        rootBorderTopRightRadius={isSupporting ? 0 : radiusStandalone}
+        rootBorderBottomLeftRadius={
+          isSupporting ? radiusSupporting : radiusStandalone
+        }
+        rootBorderBottomRightRadius={
+          isSupporting ? radiusSupporting : radiusStandalone
+        }
+        rootBgColor={insightCard.colour.background.default}
+        rootMinWidth={parseTokenValue(insightCard.size.minWidth)}
+        accessible
+        accessibilityRole="summary"
+        {...rest}
+      >
+        {illustration ? (
+          <Illustration illustration={illustration} size="sm" />
+        ) : icon ? (
+          <Icon icon={icon} size="xl" colour="primary" />
+        ) : null}
+        <StyledInsightContent
+          contentGap={parseTokenValue(standalone.content.gap)}
+        >
+          {title && (
+            <Typography
+              token={insightCard.typography.title}
+              color={insightCard.colour.text.title}
+            >
+              {title}
+            </Typography>
+          )}
+          <Typography
+            token={insightCard.typography.subText}
+            color={insightCard.colour.text.subText}
+          >
+            {children}
+          </Typography>
+        </StyledInsightContent>
+      </StyledInsightRoot>
+    )
+  }
+)
+
+MessageCardInsight.displayName = "MessageCard.Insight"
+
+// ─── Banner variant ───────────────────────────────────────────────────────────
+
+type BannerColourScheme = "primary" | "secondary"
+
+export type MessageCardBannerMedia =
+  | { type: "image"; source: ImageSourcePropType; alt?: string }
+  | { type: "illustration"; illustration: PawprintIllustration }
+
+type MessageCardBannerOwnProps = {
+  colourScheme?: BannerColourScheme
+  media?: MessageCardBannerMedia
+  title?: string
+  children: React.ReactNode
+  linkLabel?: string
+  linkHref?: string
+  onLinkPress?: () => void
+}
+
+export type MessageCardBannerProps = MessageCardBannerOwnProps &
+  Omit<ViewProps, keyof MessageCardBannerOwnProps>
+
+const StyledBannerRoot = styled(View)<{
+  rootGap: number
+  rootPadding: number
+  rootBorderRadius: number
+  rootBgColor: string
+}>(({ rootGap, rootPadding, rootBorderRadius, rootBgColor }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: rootGap,
+  padding: rootPadding,
+  borderRadius: rootBorderRadius,
+  backgroundColor: rootBgColor
+}))
+
+const StyledBannerImage = styled(View)<{
+  imageRadius: number
+  imageBgColor: string
+}>(({ imageRadius, imageBgColor }) => ({
+  flexShrink: 0,
+  width: 108,
+  height: 108,
+  borderRadius: imageRadius,
+  overflow: "hidden",
+  backgroundColor: imageBgColor
+}))
+
+const StyledBannerIllustrationSlot = styled(View)({
+  flexShrink: 0,
+  width: 108,
+  height: 108,
+  alignItems: "center",
+  justifyContent: "center"
+})
+
+const StyledBannerContents = styled(View)<{ contentsGap: number }>(
+  ({ contentsGap }) => ({
+    flex: 1,
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    gap: contentsGap,
+    minWidth: 0
+  })
+)
+
+const StyledBannerCopy = styled(View)<{ copyGap: number }>(({ copyGap }) => ({
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: copyGap,
+  width: "100%"
+}))
+
+/**
+ * Horizontal card with an image or illustration, title, body copy and an
+ * optional link CTA.
+ *
+ * @param {"primary" | "secondary"} [colourScheme="primary"] - Background
+ *   scheme. `primary` is saturated yellow; `secondary` is a lighter cream.
+ * @param {MessageCardBannerMedia} [media] - Tagged slot accepting either
+ *   `{ type: "image", source, alt }` or `{ type: "illustration", illustration }`.
+ * @param {string} [title] - Optional headline.
+ * @param {React.ReactNode} children - Body copy.
+ * @param {string} [linkLabel] - CTA label. When provided with `linkHref` or
+ *   `onLinkPress`, renders a link row.
+ * @param {string} [linkHref] - URL opened via `Linking` when pressed.
+ * @param {() => void} [onLinkPress] - Callback when the CTA is pressed.
+ */
+const MessageCardBanner = React.forwardRef<View, MessageCardBannerProps>(
+  (
+    {
+      colourScheme = "primary",
+      media,
+      title,
+      children,
+      linkLabel,
+      linkHref,
+      onLinkPress,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { colour, dimensions } = theme.tokens.semantics
+
+    const bgColor =
+      colourScheme === "secondary"
+        ? colour.background.container.secondary
+        : colour.background.container.alt
+
+    return (
+      <StyledBannerRoot
+        ref={ref}
+        rootGap={parseTokenValue(dimensions.spacing.md)}
+        rootPadding={parseTokenValue(dimensions.spacing.md)}
+        rootBorderRadius={parseTokenValue(dimensions.borderRadius.md)}
+        rootBgColor={bgColor}
+        accessible
+        accessibilityRole="summary"
+        {...rest}
+      >
+        {media?.type === "illustration" ? (
+          <StyledBannerIllustrationSlot>
+            {React.createElement(media.illustration, {
+              width: 108,
+              height: 108
+            })}
+          </StyledBannerIllustrationSlot>
+        ) : media?.type === "image" ? (
+          <StyledBannerImage
+            imageRadius={parseTokenValue(dimensions.borderRadius.sm)}
+            imageBgColor={colour.background.surface.secondary}
+          >
+            <Image
+              source={media.source}
+              accessibilityLabel={media.alt}
+              style={{ width: "100%", height: "100%" }}
+              resizeMode="cover"
+            />
+          </StyledBannerImage>
+        ) : null}
+        <StyledBannerContents
+          contentsGap={parseTokenValue(dimensions.spacing.xs)}
+        >
+          <StyledBannerCopy
+            copyGap={parseTokenValue(dimensions.spacing["3xs"])}
+          >
+            {title && (
+              <Typography variant="heading" size="xs" color="primary">
+                {title}
+              </Typography>
+            )}
+            <Typography variant="body" size="md" color="secondary">
+              {children}
+            </Typography>
+          </StyledBannerCopy>
+          {linkLabel && (linkHref || onLinkPress) && (
+            <Link
+              href={linkHref}
+              onPress={onLinkPress}
+              standalone
+              size="md"
+              weight="semiBold"
+            >
+              {linkLabel}
+            </Link>
+          )}
+        </StyledBannerContents>
+      </StyledBannerRoot>
+    )
+  }
+)
+
+MessageCardBanner.displayName = "MessageCard.Banner"
+
+// ─── Public namespace ─────────────────────────────────────────────────────────
+
+/**
+ * Compound component exposing two sub-components:
+ *
+ * - `MessageCard.Insight` — yellow trust-signal card
+ * - `MessageCard.Banner` — horizontal image/illustration + copy + optional CTA
+ */
+export const MessageCard = {
+  Insight: MessageCardInsight,
+  Banner: MessageCardBanner
+}
+
+export { MessageCardInsight, MessageCardBanner }

package/src/components/molecules/MessageCard/index.ts

@@ -0,0 +1,10 @@
+export {
+  MessageCard,
+  MessageCardInsight,
+  MessageCardBanner
+} from "./MessageCard"
+export type {
+  MessageCardInsightProps,
+  MessageCardBannerProps,
+  MessageCardBannerMedia
+} from "./MessageCard"

package/src/components/molecules/Notification/Notification.stories.tsx

@@ -0,0 +1,219 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Notification } from "./Notification"
+
+export default {
+  title: "Molecules/Notification",
+  component: Notification,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["inline", "toast", "system"],
+      description: "Layout variant"
+    },
+    type: {
+      control: "select",
+      options: ["error", "success", "warning", "info"],
+      description: "Severity type controlling colours and icon"
+    },
+    showIcon: {
+      control: "boolean",
+      description: "Whether to show the status icon"
+    },
+    title: {
+      control: "text",
+      description: "Optional headline (inline variant only)"
+    },
+    children: {
+      control: "text",
+      description: "Notification body text"
+    }
+  }
+}
+
+// --- Playground ---
+
+export const Playground = {
+  args: {
+    variant: "inline",
+    type: "error",
+    showIcon: true,
+    title: "Optional headline here",
+    children: "Try to keep the copy length here to a maximum of 2 lines"
+  }
+}
+
+// --- Inline / All Types ---
+
+export const AllInlineVariants = {
+  name: "Inline / All Types",
+  render: () => (
+    <View style={styles.column}>
+      <Notification
+        type="error"
+        title="Optional headline here"
+        onClose={() => {}}
+      >
+        Try to keep the copy length here to a maximum of 2 lines
+      </Notification>
+      <Notification
+        type="success"
+        title="Optional headline here"
+        onClose={() => {}}
+      >
+        Try to keep the copy length here to a maximum of 2 lines
+      </Notification>
+      <Notification
+        type="warning"
+        title="Optional headline here"
+        onClose={() => {}}
+      >
+        Try to keep the copy length here to a maximum of 2 lines
+      </Notification>
+      <Notification
+        type="info"
+        title="Optional headline here"
+        onClose={() => {}}
+      >
+        Try to keep the copy length here to a maximum of 2 lines
+      </Notification>
+    </View>
+  )
+}
+
+// --- Toast / All Types ---
+
+export const AllToastVariants = {
+  name: "Toast / All Types",
+  render: () => (
+    <View style={styles.column}>
+      <Notification
+        variant="toast"
+        type="error"
+        onClose={() => {}}
+        link={{ label: "Optional link" }}
+      >
+        Lorem ipsum dolor sit amet consectetur. Massa vestibulum eleifend sed
+        phasellus duis odio nunc massa.
+      </Notification>
+      <Notification
+        variant="toast"
+        type="success"
+        onClose={() => {}}
+        link={{ label: "Optional link" }}
+      >
+        Lorem ipsum dolor sit amet consectetur. Massa vestibulum eleifend sed
+        phasellus duis odio nunc massa.
+      </Notification>
+      <Notification
+        variant="toast"
+        type="warning"
+        onClose={() => {}}
+        link={{ label: "Optional link" }}
+      >
+        Lorem ipsum dolor sit amet consectetur. Massa vestibulum eleifend sed
+        phasellus duis odio nunc massa.
+      </Notification>
+      <Notification
+        variant="toast"
+        type="info"
+        onClose={() => {}}
+        link={{ label: "Optional link" }}
+      >
+        Lorem ipsum dolor sit amet consectetur. Massa vestibulum eleifend sed
+        phasellus duis odio nunc massa.
+      </Notification>
+    </View>
+  )
+}
+
+// --- System / Small ---
+
+export const SystemSmall = {
+  name: "System / Small",
+  render: () => (
+    <View style={styles.column}>
+      <Notification variant="system" type="error" size="sm">
+        Your order is confirmed and will be with you within two weeks
+      </Notification>
+      <Notification variant="system" type="success" size="sm">
+        Your order is confirmed and will be with you within two weeks
+      </Notification>
+      <Notification variant="system" type="warning" size="sm">
+        Your order is confirmed and will be with you within two weeks
+      </Notification>
+      <Notification variant="system" type="info" size="sm">
+        Your order is confirmed and will be with you within two weeks
+      </Notification>
+    </View>
+  )
+}
+
+// --- System / Large ---
+
+export const SystemLarge = {
+  name: "System / Large",
+  render: () => (
+    <View style={styles.column}>
+      <Notification variant="system" type="error" size="lg">
+        Due to a nationwide issue with DPD, we are experiencing 24-48 hour
+        delivery delays on all boxes.
+      </Notification>
+      <Notification variant="system" type="success" size="lg">
+        Due to a nationwide issue with DPD, we are experiencing 24-48 hour
+        delivery delays on all boxes.
+      </Notification>
+      <Notification variant="system" type="warning" size="lg">
+        Due to a nationwide issue with DPD, we are experiencing 24-48 hour
+        delivery delays on all boxes.
+      </Notification>
+      <Notification variant="system" type="info" size="lg">
+        Due to a nationwide issue with DPD, we are experiencing 24-48 hour
+        delivery delays on all boxes.
+      </Notification>
+    </View>
+  )
+}
+
+// --- States ---
+
+export const WithoutIcon = {
+  name: "Without Icon",
+  render: () => (
+    <View style={styles.column}>
+      <Notification type="info" showIcon={false} title="No icon">
+        This notification has the icon hidden.
+      </Notification>
+    </View>
+  )
+}
+
+export const WithoutTitle = {
+  name: "Inline / Without Title",
+  render: () => (
+    <View style={styles.column}>
+      <Notification type="warning">
+        This inline notification has no title, just body text.
+      </Notification>
+    </View>
+  )
+}
+
+export const ToastWithoutLink = {
+  name: "Toast / Without Link",
+  render: () => (
+    <View style={styles.column}>
+      <Notification variant="toast" type="success" onClose={() => {}}>
+        A simple toast notification without a link.
+      </Notification>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 16,
+    padding: 16
+  }
+})