@coinbase/cds-mobile 8.25.0 → 8.26.0

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

@@ -1,354 +1,193 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
 import { NoopFn as noopFn } from '@coinbase/cds-common/utils/mockUtils';
-import { Button } from '../../buttons';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { Spacer, VStack } from '../../layout';
-import { Link } from '../../typography/Link';
+import { VStack } from '../../layout';
 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 longMessage = "" + loremIpsum + loremIpsum + loremIpsum + loremIpsum + loremIpsum;
+const longMessage = loremIpsum.slice(0, 200) + "...";
 const label = 'Last updated today at 3:33pm';
-const exampleProps = {
-  title: 'Failure Message',
-  startIcon: 'error',
-  startIconActive: true,
-  startIconAccessibilityLabel: 'Error',
-  closeAccessibilityLabel: 'Close'
-};
-const examplePropsWithOffset = _extends({}, exampleProps, {
-  marginX: -2,
-  children: 'Lorem ipsum dolar sit amet'
-});
-const borderRadiusValues = [0, 200, 400];
-const styleProps = [{
-  variant: 'warning',
-  title: 'Warning message',
-  startIcon: 'warning',
-  startIconActive: true,
-  children: shortMessage,
-  startIconAccessibilityLabel: 'Warning',
-  closeAccessibilityLabel: 'Close'
-}, {
-  variant: 'informational',
-  title: 'Informative message',
-  startIcon: 'info',
-  startIconActive: true,
-  children: shortMessage,
-  startIconAccessibilityLabel: 'Information',
-  closeAccessibilityLabel: 'Close'
-}, {
-  variant: 'promotional',
-  title: 'Promotional message',
-  startIcon: 'info',
-  startIconActive: true,
-  children: shortMessage,
-  startIconAccessibilityLabel: 'Information',
-  closeAccessibilityLabel: 'Close'
-}, {
-  variant: 'error',
-  title: 'Error message',
-  startIcon: 'error',
-  startIconActive: true,
-  children: shortMessage,
-  startIconAccessibilityLabel: 'Error',
-  closeAccessibilityLabel: 'Close'
-}];
-const Banners = _ref => {
-  let {
-    title,
-    props
-  } = _ref;
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(Text, {
-      font: "title1",
-      children: title
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props)), /*#__PURE__*/_jsxs(Text, {
-      font: "title1",
-      children: [title, " with showDismiss"]
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      showDismiss: true,
-      onClose: noopFn,
-      title: title + " with showDismiss"
-    })), /*#__PURE__*/_jsxs(Text, {
-      font: "title1",
-      children: [title, " with Action"]
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      primaryAction: primaryAction
-    })), /*#__PURE__*/_jsxs(Text, {
-      font: "title1",
-      children: [title, " with multiple Actions"]
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      primaryAction: primaryAction,
-      secondaryAction: secondaryAction
-    })), /*#__PURE__*/_jsx(Text, {
-      font: "title1",
-      children: "Primary Action is not a Link"
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      primaryAction: /*#__PURE__*/_jsx(Button, {
-        compact: true,
-        children: "Primary Action"
-      })
-    })), /*#__PURE__*/_jsx(Text, {
-      font: "title1",
-      children: "Secondary Action is not a Link"
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      secondaryAction: /*#__PURE__*/_jsx(Button, {
-        compact: true,
-        children: "Secondary Action"
-      })
-    })), /*#__PURE__*/_jsxs(Text, {
-      font: "title1",
-      children: [title, " Long Text with Action"]
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      primaryAction: primaryAction,
-      title: title + " Long Text with Action. " + longMessage,
-      children: longMessage
-    })), /*#__PURE__*/_jsxs(Text, {
-      font: "title1",
-      children: [title, " with Action and showDismiss"]
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      showDismiss: true,
-      onClose: noopFn,
-      primaryAction: primaryAction,
-      title: title + " with Action and showDismiss"
-    })), /*#__PURE__*/_jsxs(Text, {
-      font: "title1",
-      children: [title, " Long Text and showDismiss"]
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      showDismiss: true,
-      onClose: noopFn,
-      title: title + " Long Text and showDismiss. " + longMessage,
-      children: longMessage
-    })), /*#__PURE__*/_jsxs(Text, {
-      font: "title1",
-      children: [title, " Long Text with Action and showDismiss"]
-    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
-      showDismiss: true,
-      onClose: noopFn,
-      primaryAction: primaryAction,
-      secondaryAction: secondaryAction,
-      title: title + " Long Text with Action and showDismiss. " + longMessage,
-      children: longMessage
-    }))]
-  });
-};
-const All = () => {
-  return /*#__PURE__*/_jsx(VStack, {
-    gap: 2,
-    children: styleProps.map(props => {
-      return /*#__PURE__*/_jsxs(VStack, {
-        gap: 2,
-        children: [/*#__PURE__*/_jsx(Banners, {
-          props: props,
-          title: "Contextual " + props.variant
-        }), /*#__PURE__*/_jsx(Banners, {
-          props: _extends({}, props, {
-            styleVariant: 'inline'
-          }),
-          title: "Inline " + props.variant
-        }), /*#__PURE__*/_jsx(Banners, {
-          props: _extends({}, props, {
-            label,
-            styleVariant: 'global'
-          }),
-          title: "Global " + props.variant
-        })]
-      }, "styles-" + props.variant);
-    })
-  });
-};
 const BannerScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
-      title: "Banners",
-      children: /*#__PURE__*/_jsx(All, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "With Link",
+      title: "Variants",
       children: /*#__PURE__*/_jsxs(VStack, {
         gap: 2,
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Global"
+        children: [/*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "warning",
+          startIconAccessibilityLabel: "Warning",
+          title: "Warning message",
+          variant: "warning",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Informative message",
+          variant: "informational",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Promotional message",
+          variant: "promotional",
+          children: shortMessage
         }), /*#__PURE__*/_jsx(Banner, {
-          showDismiss: true,
           startIconActive: true,
           closeAccessibilityLabel: "Close",
-          primaryAction: primaryAction,
-          secondaryAction: secondaryAction,
           startIcon: "error",
           startIconAccessibilityLabel: "Error",
-          styleVariant: "global",
-          title: "Global " + shortMessage,
+          title: "Error message",
           variant: "error",
-          children: /*#__PURE__*/_jsxs(Text, {
-            font: "label2",
-            children: [shortMessage, /*#__PURE__*/_jsx(Link, {
-              to: "https://www.coinbase.com",
-              children: " Learn more"
-            })]
-          })
+          children: shortMessage
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Style Variants",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Contextual (default)"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Contextual banner",
+          variant: "informational",
+          children: "Used for messages within a specific context or section"
         }), /*#__PURE__*/_jsx(Text, {
-          font: "title1",
+          font: "headline",
           children: "Inline"
         }), /*#__PURE__*/_jsx(Banner, {
-          showDismiss: true,
           startIconActive: true,
           closeAccessibilityLabel: "Close",
-          primaryAction: primaryAction,
-          secondaryAction: secondaryAction,
           startIcon: "warning",
           startIconAccessibilityLabel: "Warning",
           styleVariant: "inline",
-          title: "Inline " + shortMessage,
+          title: "Inline banner",
           variant: "warning",
-          children: /*#__PURE__*/_jsx(Link, {
-            font: "label2",
-            to: "https://www.coinbase.com",
-            children: "Learn more"
-          })
+          children: "Used for inline messages with reduced visual emphasis"
         }), /*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Contextual"
+          font: "headline",
+          children: "Global"
         }), /*#__PURE__*/_jsx(Banner, {
-          showDismiss: true,
           startIconActive: true,
           closeAccessibilityLabel: "Close",
           label: label,
-          primaryAction: primaryAction,
-          secondaryAction: secondaryAction,
-          startIcon: "info",
-          startIconAccessibilityLabel: "Information",
-          variant: "promotional",
-          children: /*#__PURE__*/_jsxs(Text, {
-            font: "label2",
-            children: [shortMessage, /*#__PURE__*/_jsx(Link, {
-              to: "https://www.coinbase.com",
-              children: " Learn more"
-            })]
-          })
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          styleVariant: "global",
+          title: "Global banner",
+          variant: "error",
+          children: "Used for system-wide notifications and alerts"
         })]
       })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Custom Offset",
+      title: "Dismissible",
       children: /*#__PURE__*/_jsxs(VStack, {
         gap: 2,
-        children: [/*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Global"
-        }), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
-          showDismiss: true,
-          startIconAccessibilityLabel: "Information",
-          styleVariant: "global",
-          variant: "informational"
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Warning with Dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
           showDismiss: true,
-          startIconAccessibilityLabel: "Information",
-          styleVariant: "global",
-          variant: "promotional"
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
           startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
           startIcon: "warning",
           startIconAccessibilityLabel: "Warning",
-          styleVariant: "global",
-          variant: "warning"
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
-          styleVariant: "global",
-          variant: "error"
-        })), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Inline"
-        }), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
-          showDismiss: true,
-          startIconAccessibilityLabel: "Information",
-          styleVariant: "inline",
-          variant: "informational"
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
+          title: "Dismissible warning",
+          variant: "warning",
+          children: "This warning can be dismissed by the user"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Promotional with Dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
           showDismiss: true,
-          startIconAccessibilityLabel: "Information",
-          styleVariant: "inline",
-          variant: "promotional"
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
           startIconActive: true,
-          startIcon: "warning",
-          startIconAccessibilityLabel: "Warning",
-          styleVariant: "inline",
-          variant: "warning"
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, examplePropsWithOffset, {
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
           styleVariant: "inline",
-          variant: "error"
-        }))]
+          title: "Limited time offer",
+          variant: "promotional",
+          children: "Special promotion that can be dismissed"
+        })]
       })
-    }), /*#__PURE__*/_jsxs(Example, {
-      children: [/*#__PURE__*/_jsx(Text, {
-        font: "title1",
-        children: "Vertical Align"
-      }), /*#__PURE__*/_jsxs(VStack, {
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Long Content",
+      children: /*#__PURE__*/_jsxs(VStack, {
         gap: 2,
-        children: [/*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
-          alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Long Message"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "info",
           startIconAccessibilityLabel: "Information",
-          title: undefined,
+          title: "Information with extended content",
           variant: "informational",
-          children: examplePropsWithOffset.children
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
-          showDismiss: true,
-          alignItems: "center",
-          startIconAccessibilityLabel: "Information",
-          title: undefined,
-          variant: "promotional",
-          children: examplePropsWithOffset.children
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
-          alignItems: "center",
-          variant: "error"
-        })), /*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
+          children: longMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Long Title"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          title: "Critical error detected: " + longMessage,
+          variant: "error",
+          children: shortMessage
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Long Content with Dismiss"
+        }), /*#__PURE__*/_jsx(Banner, {
           showDismiss: true,
           startIconActive: true,
-          alignItems: "center",
+          closeAccessibilityLabel: "Close",
+          onClose: noopFn,
           startIcon: "warning",
           startIconAccessibilityLabel: "Warning",
-          variant: "warning"
-        }))]
-      })]
+          title: "Detailed warning message",
+          variant: "warning",
+          children: longMessage
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Border Radius",
+      title: "With Labels",
       children: /*#__PURE__*/_jsxs(VStack, {
         gap: 2,
-        children: [/*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Contextual"
-        }), /*#__PURE__*/_jsx(VStack, {
-          gap: 2,
-          children: borderRadiusValues.map(radius => /*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
-            borderRadius: radius,
-            title: "Contextual radius " + radius,
-            variant: "informational",
-            children: shortMessage
-          }), "mobile-contextual-" + radius))
-        }), /*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Inline"
-        }), /*#__PURE__*/_jsx(VStack, {
-          gap: 2,
-          children: borderRadiusValues.map(radius => /*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
-            borderRadius: radius,
-            styleVariant: "inline",
-            title: "Inline radius " + radius,
-            variant: "informational",
-            children: shortMessage
-          }), "mobile-inline-" + radius))
+        children: [/*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          label: "Version 2.4.1 released",
+          startIcon: "info",
+          startIconAccessibilityLabel: "Information",
+          title: "Update available",
+          variant: "informational",
+          children: "A new version of the app is available with bug fixes and improvements"
+        }), /*#__PURE__*/_jsx(Banner, {
+          startIconActive: true,
+          closeAccessibilityLabel: "Close",
+          label: label,
+          startIcon: "error",
+          startIconAccessibilityLabel: "Error",
+          styleVariant: "global",
+          title: "System maintenance",
+          variant: "error",
+          children: "Services will be unavailable during the maintenance window"
         })]
       })
     })]