@coinbase/cds-mobile 8.25.1 → 8.27.0

package/esm/banner/__stories__/BannerActions.stories.js

@@ -0,0 +1,276 @@
+import React from 'react';
+import { NoopFn as noopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Link } from '../../typography/Link';
+import { Text } from '../../typography/Text';
+import { Banner } from '../Banner';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const primaryAction = /*#__PURE__*/_jsx(Link, {
+  to: "https://www.coinbase.com",
+  children: "Primary"
+});
+const secondaryAction = /*#__PURE__*/_jsx(Link, {
+  to: "https://www.coinbase.com",
+  children: "Secondary"
+});
+const shortMessage = 'Lorem ipsum dolar sit amet, consecturo.';
+const BannerActionsScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Primary Actions",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Link as Primary Action"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: primaryAction,
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Info with link action",
+          variant: "informational",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Button as Primary Action"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            children: "Get Started"
+          }),
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Promo with button action",
+          variant: "promotional",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Custom Button Variants"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "negative",
+            children: "Fix Now"
+          }),
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          title: "Error with action",
+          variant: "error",
+          children: "Critical issue requires immediate action"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multiple Actions",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Primary and Secondary Links"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: primaryAction,
+          secondaryAction: secondaryAction,
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          title: "Warning with two actions",
+          variant: "warning",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Mixed Action Types"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "positive",
+            children: "Claim Offer"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Learn More"
+          }),
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Special offer",
+          variant: "promotional",
+          children: "Limited time promotion available"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Button Actions Only"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            children: "Accept"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "secondary",
+            children: "Decline"
+          }),
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Choose your action",
+          variant: "informational",
+          children: "Make your selection below"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Actions with Dismiss",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Single Action with Dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
+          showDismiss: true,
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
+          primaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Try Now"
+          }),
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "New feature available",
+          variant: "promotional",
+          children: "Explore our latest features"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Multiple Actions with Dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
+          showDismiss: true,
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
+          primaryAction: primaryAction,
+          secondaryAction: secondaryAction,
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          title: "Action required",
+          variant: "warning",
+          children: "Complete your profile to continue"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Inline Links",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Link in Content"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Learn more about our services",
+          variant: "informational",
+          children: /*#__PURE__*/_jsxs(Text, {
+            font: "label2",
+            children: ["Discover new features and updates.", ' ', /*#__PURE__*/_jsx(Link, {
+              to: "https://www.coinbase.com",
+              children: "Read more"
+            }), " about the latest improvements."]
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Multiple Links in Content"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Resources available",
+          variant: "promotional",
+          children: /*#__PURE__*/_jsxs(Text, {
+            font: "label2",
+            children: ["Check our ", /*#__PURE__*/_jsx(Link, {
+              to: "https://www.coinbase.com",
+              children: "documentation"
+            }), " or visit the", ' ', /*#__PURE__*/_jsx(Link, {
+              to: "https://www.coinbase.com",
+              children: "help center"
+            }), " for assistance."]
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Link with Actions"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "negative",
+            children: "Get Updates"
+          }),
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          styleVariant: "global",
+          title: "Service disruption",
+          variant: "error",
+          children: /*#__PURE__*/_jsxs(Text, {
+            font: "label2",
+            children: ["Some services are currently unavailable.", ' ', /*#__PURE__*/_jsx(Link, {
+              to: "https://www.coinbase.com",
+              children: "View status page"
+            }), " for details."]
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Style Variants with Actions",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Inline with Actions"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: primaryAction,
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          styleVariant: "inline",
+          title: "Inline warning",
+          variant: "warning",
+          children: "Compact inline style with action"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Global with Actions"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          label: "Critical",
+          primaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "View Details"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Contact Support"
+          }),
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          styleVariant: "global",
+          title: "System alert",
+          variant: "error",
+          children: "System-wide message with multiple actions"
+        })]
+      })
+    })]
+  });
+};
+export default BannerActionsScreen;

package/esm/banner/__stories__/BannerLayout.stories.js

@@ -0,0 +1,329 @@
+import React from 'react';
+import { NoopFn as noopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Spacer, VStack } from '../../layout';
+import { Link } from '../../typography/Link';
+import { Text } from '../../typography/Text';
+import { Banner } from '../Banner';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const shortMessage = 'Lorem ipsum dolar sit amet';
+const borderRadiusValues = [0, 200, 400];
+const BannerLayoutScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Custom Margins",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Negative Margin Offset"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          marginX: -2,
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Custom offset banner",
+          variant: "informational",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Custom Margins - Inline"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          marginX: -2,
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          styleVariant: "inline",
+          title: "Inline with offset",
+          variant: "promotional",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Custom Margins - Global"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          marginX: -2,
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          styleVariant: "global",
+          title: "Global with offset",
+          variant: "warning",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "With Dismiss and Offset"
+        }), /*#__PURE__*/_jsx(Banner, {
+          showDismiss: true,
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          marginX: -2,
+          onClose: noopFn,
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          title: "Error with custom margin",
+          variant: "error",
+          children: shortMessage
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Vertical Alignment",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Center Aligned Content"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          alignItems: "center",
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          variant: "informational",
+          children: "Center aligned content without title"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          alignItems: "center",
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Center aligned with title",
+          variant: "promotional",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Center Aligned with Dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
+          showDismiss: true,
+          startIconActive: true,
+          alignItems: "center",
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          title: "Centered dismissible banner",
+          variant: "warning",
+          children: "Content is vertically centered"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Center Aligned with Actions"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          alignItems: "center",
+          closeAccessibilityLabel: "Close",
+          primaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Action"
+          }),
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          variant: "error",
+          children: "Centered content with action button"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Border Radius",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Contextual Style"
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: borderRadiusValues.map(radius => /*#__PURE__*/_jsx(Banner, {
+            startIconActive: true,
+            borderRadius: radius,
+            closeAccessibilityLabel: "Close",
+            startIcon: "info",
+            startIconAccessibilityLabel: "Information",
+            title: "Border radius: " + radius,
+            variant: "informational",
+            children: shortMessage
+          }, "contextual-" + radius))
+        }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Inline Style"
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: borderRadiusValues.map(radius => /*#__PURE__*/_jsx(Banner, {
+            startIconActive: true,
+            borderRadius: radius,
+            closeAccessibilityLabel: "Close",
+            startIcon: "warning",
+            startIconAccessibilityLabel: "Warning",
+            styleVariant: "inline",
+            title: "Border radius: " + radius,
+            variant: "warning",
+            children: shortMessage
+          }, "inline-" + radius))
+        }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "With Dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
+          showDismiss: true,
+          startIconActive: true,
+          borderRadius: 100,
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Custom border radius",
+          variant: "promotional",
+          children: "Banner with 100px border radius and dismiss button"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Labels",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "With Timestamp"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          label: "Last updated today at 3:33pm",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Update notification",
+          variant: "informational",
+          children: "System update completed successfully"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "With Status Label"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          label: "Expires in 2 days",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Limited time offer",
+          variant: "promotional",
+          children: "Special promotion for selected users"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Global with Label"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          label: "Scheduled: Tonight 2-4 AM",
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          styleVariant: "global",
+          title: "System maintenance",
+          variant: "error",
+          children: "Services will be temporarily unavailable"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Label with Actions"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          label: "Deadline: December 31",
+          primaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Complete Now"
+          }),
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          title: "Action required",
+          variant: "warning",
+          children: "Please complete your verification"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Complex Layouts",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "All Features Combined"
+        }), /*#__PURE__*/_jsx(Banner, {
+          showDismiss: true,
+          startIconActive: true,
+          alignItems: "center",
+          borderRadius: 200,
+          closeAccessibilityLabel: "Close",
+          label: "Priority: High",
+          marginX: -2,
+          onClose: noopFn,
+          primaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "View Details"
+          }),
+          secondaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Contact Support"
+          }),
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          styleVariant: "global",
+          title: "Critical system alert",
+          variant: "error",
+          children: /*#__PURE__*/_jsxs(Text, {
+            font: "label2",
+            children: ["System issues detected. ", /*#__PURE__*/_jsx(Link, {
+              to: "https://www.coinbase.com",
+              children: "Learn more"
+            }), " about the current status."]
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Inline Complex"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          borderRadius: 100,
+          closeAccessibilityLabel: "Close",
+          label: "Beta",
+          primaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Try It"
+          }),
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          styleVariant: "inline",
+          title: "New feature",
+          variant: "promotional",
+          children: "Experience our latest features before general release"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Without Title",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          variant: "informational",
+          children: "Simple message without a title"
+        }), /*#__PURE__*/_jsx(Banner, {
+          showDismiss: true,
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          styleVariant: "inline",
+          variant: "warning",
+          children: "Inline warning without title but with dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          primaryAction: /*#__PURE__*/_jsx(Link, {
+            to: "https://www.coinbase.com",
+            children: "Learn More"
+          }),
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          variant: "promotional",
+          children: "No title but includes an action"
+        })]
+      })
+    })]
+  });
+};
+export default BannerLayoutScreen;

package/esm/cells/Cell.js

@@ -35,7 +35,7 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
       testID,
       accessibilityLabel,
       accessibilityHint,
-      accessibilityRole,
+      accessibilityRole = 'button',
       accessibilityState,
       gap = 2,
       columnGap,

package/esm/cells/CellAccessory.js

@@ -33,6 +33,15 @@ export const CellAccessory = /*#__PURE__*/memo(function CellAccessory(_ref) {
       size: "s"
     });
   }
+  if (type === 'unselected') {
+    icon = /*#__PURE__*/_jsx(Icon, {
+      name: "checkmark",
+      size: "s",
+      style: {
+        opacity: 0
+      }
+    });
+  }
   if (!icon) {
     return null;
   }