@butternutbox/pawprint-native 1.3.1 → 1.4.0

package/src/components/molecules/NavigationHeader/NavigationHeaderButton.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import { View } from "react-native"
+import { Button, type ButtonProps } from "../../atoms/Button"
+import { IconButton, type IconButtonProps } from "../../atoms/IconButton"
+import {
+  getButtonDefaults,
+  getIconButtonColour,
+  useNavigationHeaderContext
+} from "./NavigationHeaderContext"
+
+export type NavigationHeaderButtonProps = Omit<
+  ButtonProps,
+  "size" | "fullWidth"
+>
+
+export type NavigationHeaderIconButtonProps = Omit<IconButtonProps, "size">
+
+/**
+ * Text button for the navigation header action group. A medium `Button` with
+ * the header defaults: white `filled` / `tertiary` on the `brand` surface and
+ * `outlined` on other surfaces.
+ *
+ * Passing `variant` or `colour` overrides the default.
+ *
+ * @param {"filled" | "outlined" | "text"} [variant] - Button style.
+ * @param {"primary" | "secondary" | "tertiary"} [colour] - Filled colour.
+ *
+ * @example
+ * ```tsx
+ * <NavigationHeader.Button onPress={editQuantity}>
+ *   Pouch quantity
+ * </NavigationHeader.Button>
+ * ```
+ */
+export const NavigationHeaderButton = React.forwardRef<
+  View,
+  NavigationHeaderButtonProps
+>(({ variant, colour, ...props }, ref) => {
+  const defaults = getButtonDefaults(useNavigationHeaderContext())
+
+  return (
+    <Button
+      ref={ref}
+      size="md"
+      variant={variant ?? defaults.variant}
+      colour={colour ?? defaults.colour}
+      {...props}
+    />
+  )
+})
+
+NavigationHeaderButton.displayName = "NavigationHeader.Button"
+
+/**
+ * Icon button for the navigation header action group. A medium filled
+ * `IconButton`, `tertiary` on the `brand` surface and `secondary` on other
+ * surfaces.
+ *
+ * Passing `variant` or `colour` overrides the default.
+ *
+ * @param {PawprintIcon} icon - **(required)** Icon component.
+ * @param {string} aria-label - **(required)** Accessible label.
+ * @param {"filled" | "outlined" | "text"} [variant="filled"] - Button style.
+ * @param {"primary" | "secondary" | "tertiary"} [colour] - Filled colour.
+ *
+ * @example
+ * ```tsx
+ * <NavigationHeader.IconButton icon={Add} aria-label="Add dog" />
+ * ```
+ */
+export const NavigationHeaderIconButton = React.forwardRef<
+  View,
+  NavigationHeaderIconButtonProps
+>(({ colour, ...props }, ref) => {
+  const context = useNavigationHeaderContext()
+
+  return (
+    <IconButton
+      ref={ref}
+      size="md"
+      colour={colour ?? getIconButtonColour(context)}
+      {...props}
+    />
+  )
+})
+
+NavigationHeaderIconButton.displayName = "NavigationHeader.IconButton"

package/src/components/molecules/NavigationHeader/NavigationHeaderContext.ts

@@ -0,0 +1,38 @@
+import React from "react"
+import type { ButtonColour, ButtonVariant } from "../../atoms/Button"
+import type { IconButtonColour } from "../../atoms/IconButton"
+
+type NavigationHeaderSurface = "brand" | "subtle" | "plain"
+
+type NavigationHeaderContextValue = {
+  surface: NavigationHeaderSurface
+}
+
+const NavigationHeaderContext =
+  React.createContext<NavigationHeaderContextValue>({ surface: "brand" })
+
+const useNavigationHeaderContext = () =>
+  React.useContext(NavigationHeaderContext)
+
+const getButtonDefaults = ({
+  surface
+}: NavigationHeaderContextValue): {
+  variant: ButtonVariant
+  colour: ButtonColour
+} =>
+  surface === "brand"
+    ? { variant: "filled", colour: "tertiary" }
+    : { variant: "outlined", colour: "primary" }
+
+const getIconButtonColour = ({
+  surface
+}: NavigationHeaderContextValue): IconButtonColour =>
+  surface === "brand" ? "tertiary" : "secondary"
+
+export {
+  NavigationHeaderContext,
+  useNavigationHeaderContext,
+  getButtonDefaults,
+  getIconButtonColour
+}
+export type { NavigationHeaderSurface, NavigationHeaderContextValue }

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

@@ -0,0 +1,14 @@
+export { NavigationHeader } from "./NavigationHeader"
+export type {
+  NavigationHeaderProps,
+  NavigationHeaderVariant,
+  NavigationHeaderSurface
+} from "./NavigationHeader"
+export {
+  NavigationHeaderButton,
+  NavigationHeaderIconButton
+} from "./NavigationHeaderButton"
+export type {
+  NavigationHeaderButtonProps,
+  NavigationHeaderIconButtonProps
+} from "./NavigationHeaderButton"

package/src/components/molecules/index.ts

@@ -27,3 +27,4 @@ export * from "./ProductListingCard"
 export * from "./ProductDisplayCard"
 export * from "./TabNavigation"
 export * from "./FloatingActionButton"
+export * from "./NavigationHeader"