@butternutbox/pawprint-native 1.1.3 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

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

@@ -0,0 +1,304 @@
+import React from "react"
+import { View, ScrollView, StyleSheet } from "react-native"
+import {
+  FloatingActionButton,
+  type FloatingActionButtonProps
+} from "./FloatingActionButton"
+import { Typography } from "../../atoms/Typography"
+import { Button } from "../../atoms/Button"
+import { Basket } from "@butternutbox/pawprint-icons/core"
+
+const Message = () => (
+  <>
+    <Typography variant="body" size="lg" weight="bold">
+      Free
+    </Typography>{" "}
+    gift in your next box
+  </>
+)
+
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown
+  ? Omit<T, K>
+  : never
+
+// Applies the design pairing: with the `close` icon button the link reads
+// "See more" (so there aren't two close actions) and the icon button dismisses;
+// otherwise the link reads "Close" and dismisses.
+const DismissibleFab = (
+  props: DistributiveOmit<
+    FloatingActionButtonProps,
+    "linkLabel" | "linkHref" | "onLinkPress"
+  >
+) => {
+  const [dismissed, setDismissed] = React.useState(false)
+  const dismiss = () => setDismissed(true)
+
+  if (dismissed) {
+    return (
+      <Button variant="outlined" onPress={() => setDismissed(false)}>
+        Show again
+      </Button>
+    )
+  }
+
+  if (props.iconButtonIcon === "close") {
+    return (
+      <FloatingActionButton
+        {...props}
+        linkLabel="See more"
+        onLinkPress={() => console.warn("See more pressed")}
+        onIconButtonPress={dismiss}
+      />
+    )
+  }
+
+  return (
+    <FloatingActionButton {...props} linkLabel="Close" onLinkPress={dismiss} />
+  )
+}
+
+export default {
+  title: "Molecules/FloatingActionButton",
+  component: FloatingActionButton,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+      description:
+        "Colour scheme. `primary` is pink with a white icon container; `secondary` is white with a cream icon container."
+    },
+    children: {
+      control: { type: "text" },
+      description: "Message copy."
+    },
+    linkLabel: {
+      control: { type: "text" },
+      description:
+        "Link text (required). Pair with `linkHref` or `onLinkPress`."
+    },
+    linkHref: {
+      control: { type: "text" },
+      description: "URL opened via `Linking` when pressed."
+    },
+    iconButtonIcon: {
+      control: { type: "select" },
+      options: ["chevronUp", "chevronRight", "close"],
+      description:
+        "Icon button (required). Limited to `chevronUp`, `chevronRight` and `close`."
+    },
+    iconButtonVariant: {
+      control: { type: "select" },
+      options: ["filled", "outlined", "text"],
+      description:
+        "Icon button style. Defaults to `filled` for the chevrons and `text` for `close`."
+    },
+    iconButtonLabel: {
+      control: { type: "text" },
+      description: "Accessible label for the icon button."
+    },
+    animation: {
+      control: { type: "select" },
+      options: [undefined, "shine", "nudge"],
+      description:
+        "Optional attention animation (off by default). Runs 3 times after a short delay, then stops. Disabled with reduced motion."
+    },
+    icon: {
+      control: false,
+      description:
+        "Icon in the left container. Accepts any Pawprint icon; defaults to `Gift`. See the CustomIcon story."
+    }
+  }
+}
+
+export const Playground = (args: FloatingActionButtonProps) => (
+  <View style={styles.container}>
+    <FloatingActionButton
+      {...args}
+      onLinkPress={() => console.warn("Link pressed")}
+    />
+  </View>
+)
+Playground.args = {
+  variant: "primary",
+  children: "Free gift in your next box",
+  linkLabel: "Close",
+  iconButtonIcon: "chevronUp",
+  iconButtonLabel: "View offer",
+  onIconButtonPress: () => console.warn("Icon button pressed")
+}
+
+export const Primary = () => (
+  <View style={styles.container}>
+    <DismissibleFab
+      variant="primary"
+      iconButtonIcon="chevronUp"
+      iconButtonLabel="View offer"
+    >
+      <Message />
+    </DismissibleFab>
+  </View>
+)
+
+export const Secondary = () => (
+  <View style={styles.container}>
+    <DismissibleFab
+      variant="secondary"
+      iconButtonIcon="close"
+      iconButtonLabel="Dismiss"
+    >
+      <Message />
+    </DismissibleFab>
+  </View>
+)
+
+export const AllVariants = () => (
+  <View style={[styles.container, styles.column]}>
+    {(["primary", "secondary"] as const).map((variant) =>
+      (["chevronUp", "chevronRight", "close"] as const).map(
+        (iconButtonIcon) => (
+          <DismissibleFab
+            key={`${variant}-${iconButtonIcon}`}
+            variant={variant}
+            iconButtonIcon={iconButtonIcon}
+            iconButtonLabel={
+              iconButtonIcon === "close" ? "Dismiss" : "View offer"
+            }
+          >
+            <Message />
+          </DismissibleFab>
+        )
+      )
+    )}
+  </View>
+)
+
+export const CustomIcon = () => (
+  <View style={styles.container}>
+    <DismissibleFab
+      icon={Basket}
+      iconButtonIcon="chevronRight"
+      iconButtonLabel="Go to basket"
+    >
+      Your box is ready to check out
+    </DismissibleFab>
+  </View>
+)
+
+export const LinkOpensAction = () => {
+  const [count, setCount] = React.useState(0)
+  const [dismissed, setDismissed] = React.useState(false)
+  return (
+    <View style={[styles.container, styles.column]}>
+      {dismissed ? (
+        <Button variant="outlined" onPress={() => setDismissed(false)}>
+          Show again
+        </Button>
+      ) : (
+        <FloatingActionButton
+          linkLabel="See more"
+          onLinkPress={() => setCount((c) => c + 1)}
+          iconButtonIcon="close"
+          iconButtonLabel="Dismiss"
+          onIconButtonPress={() => setDismissed(true)}
+        >
+          <Message />
+        </FloatingActionButton>
+      )}
+      <Typography size="sm">Link pressed {count} times</Typography>
+    </View>
+  )
+}
+
+// The Storybook decorator wraps stories in a ScrollView, where `flex: 1` has
+// no height to fill — so the mock screen gets a fixed height to keep the inner
+// ScrollView scrolling beneath the pinned FAB.
+export const PinnedBottomRight = () => (
+  <View style={styles.screen}>
+    <ScrollView nestedScrollEnabled contentContainerStyle={styles.column}>
+      {Array.from({ length: 20 }, (_, i) => (
+        <Typography key={i}>Screen content line {i + 1}</Typography>
+      ))}
+    </ScrollView>
+    <View style={styles.pinned}>
+      <DismissibleFab iconButtonIcon="chevronUp" iconButtonLabel="View offer">
+        <Message />
+      </DismissibleFab>
+    </View>
+  </View>
+)
+
+export const IconButtonStyles = () => (
+  <View style={[styles.container, styles.column]}>
+    {(["filled", "outlined", "text"] as const).map((iconButtonVariant) =>
+      (["chevronUp", "chevronRight", "close"] as const).map(
+        (iconButtonIcon) => (
+          <DismissibleFab
+            key={`${iconButtonVariant}-${iconButtonIcon}`}
+            variant="secondary"
+            iconButtonIcon={iconButtonIcon}
+            iconButtonVariant={iconButtonVariant}
+            iconButtonLabel={`${iconButtonIcon} ${iconButtonVariant}`}
+          >
+            <Message />
+          </DismissibleFab>
+        )
+      )
+    )}
+  </View>
+)
+
+export const Animations = () => {
+  const [run, setRun] = React.useState(0)
+  return (
+    <View key={run} style={[styles.container, styles.column]}>
+      <Typography weight="semiBold">Shine</Typography>
+      <DismissibleFab
+        animation="shine"
+        iconButtonIcon="chevronUp"
+        iconButtonLabel="View offer"
+      >
+        <Message />
+      </DismissibleFab>
+      <DismissibleFab
+        animation="shine"
+        variant="secondary"
+        iconButtonIcon="close"
+        iconButtonLabel="Dismiss"
+      >
+        <Message />
+      </DismissibleFab>
+      <Typography weight="semiBold">Nudge</Typography>
+      <DismissibleFab
+        animation="nudge"
+        iconButtonIcon="chevronUp"
+        iconButtonLabel="View offer"
+      >
+        <Message />
+      </DismissibleFab>
+      <DismissibleFab
+        animation="nudge"
+        variant="secondary"
+        iconButtonIcon="chevronRight"
+        iconButtonLabel="View offer"
+      >
+        <Message />
+      </DismissibleFab>
+      <Button variant="outlined" onPress={() => setRun((r) => r + 1)}>
+        Replay
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 20 },
+  column: { flexDirection: "column", gap: 20 },
+  screen: { height: 600, padding: 16 },
+  pinned: {
+    position: "absolute",
+    right: 16,
+    bottom: 16,
+    left: 16,
+    alignItems: "flex-end"
+  }
+})