@coinbase/cds-mobile 8.61.0 → 8.62.1

package/esm/system/__stories__/ComponentConfigProviderCustom.stories.js

@@ -0,0 +1,22 @@
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { ComponentConfigProvider, ThemeProvider } from '..';
+import { customComponentConfig } from './componentConfigStickerSheet/customComponentConfig';
+import { customTheme } from './componentConfigStickerSheet/customTheme';
+import { StickerSheet } from './componentConfigStickerSheet/StickerSheet';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ComponentConfigProviderCustomStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "ComponentConfigProviderCustom",
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: "dark",
+        theme: customTheme,
+        children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+          value: customComponentConfig,
+          children: /*#__PURE__*/_jsx(StickerSheet, {})
+        })
+      })
+    })
+  });
+};
+export default ComponentConfigProviderCustomStory;

package/esm/system/__stories__/componentConfigStickerSheet/Container.js

@@ -0,0 +1,27 @@
+const _excluded = ["paddingX", "gap", "title", "children"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { VStack } from '../../../layout/VStack';
+import { Text } from '../../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Container = /*#__PURE__*/memo(_ref => {
+  let {
+      paddingX = 2,
+      gap = 2,
+      title,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    gap: gap,
+    maxWidth: "100%",
+    paddingX: paddingX
+  }, props, {
+    children: [title && /*#__PURE__*/_jsx(Text, {
+      font: "title3",
+      width: "100%",
+      children: title
+    }), children]
+  }));
+});

package/esm/system/__stories__/componentConfigStickerSheet/StickerSheet.js

@@ -0,0 +1,94 @@
+import React, { memo } from 'react';
+import { HStack } from '../../../layout/HStack';
+import { VStack } from '../../../layout/VStack';
+import { AccordionExample } from './examples/Accordion';
+import { AvatarExample } from './examples/Avatar';
+import { BannerExample } from './examples/Banner';
+import { ButtonExample } from './examples/Button';
+import { CoachmarkExample } from './examples/Coachmark';
+import { ControlsExample } from './examples/Controls';
+import { DatePickerExample } from './examples/DatePicker';
+import { DotCountExample } from './examples/DotCount';
+import { IconExample } from './examples/Icon';
+import { InputChipExample } from './examples/InputChip';
+import { ListCellExample } from './examples/ListCell';
+import { SearchExample } from './examples/Search';
+import { SegmentedTabsExample } from './examples/SegmentedTabs';
+import { SelectExample } from './examples/Select';
+import { SelectChipExample } from './examples/SelectChip';
+import { TagExample } from './examples/Tag';
+import { TextInputExample } from './examples/TextInput';
+import { Container } from './Container';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const StickerSheet = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsx(VStack, {
+    alignItems: "center",
+    background: "bg",
+    gap: 2,
+    padding: 2,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "flex-start",
+      flexWrap: "wrap",
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Container, {
+          title: "Switch / Checkbox / Radio",
+          children: /*#__PURE__*/_jsx(ControlsExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Segmented Tabs",
+          children: /*#__PURE__*/_jsx(SegmentedTabsExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Select Input (SelectOption)",
+          children: /*#__PURE__*/_jsx(SelectExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "SearchInput",
+          children: /*#__PURE__*/_jsx(SearchExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "SelectChip / InputChip",
+          children: /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(SelectChipExample, {}), /*#__PURE__*/_jsx(InputChipExample, {})]
+          })
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Accordion",
+          children: /*#__PURE__*/_jsx(AccordionExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "DatePicker",
+          children: /*#__PURE__*/_jsx(DatePickerExample, {})
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Container, {
+          title: "Tag",
+          children: /*#__PURE__*/_jsx(TagExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Icon",
+          children: /*#__PURE__*/_jsx(IconExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Button / IconButton",
+          children: /*#__PURE__*/_jsx(ButtonExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Avatar",
+          children: /*#__PURE__*/_jsx(AvatarExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "TextInput",
+          children: /*#__PURE__*/_jsx(TextInputExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "ListCell",
+          children: /*#__PURE__*/_jsx(ListCellExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Banner",
+          children: /*#__PURE__*/_jsx(BannerExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "DotCount",
+          children: /*#__PURE__*/_jsx(DotCountExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Coachmark",
+          children: /*#__PURE__*/_jsx(CoachmarkExample, {})
+        })]
+      })]
+    })
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -0,0 +1,116 @@
+const _excluded = ["label", "labelNode"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+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 { Text } from '../../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const customComponentConfig = {
+  Banner: {
+    borderRadius: 0
+  },
+  Button: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32,
+    font: props.compact ? 'label1' : 'headline',
+    progressCircleSize: props.compact ? 12 : 16,
+    paddingY: 0
+  }),
+  IconButton: props => {
+    var _props$compact;
+    const isCompact = (_props$compact = props.compact) != null ? _props$compact : true;
+    return _extends({
+      borderRadius: 200,
+      height: isCompact ? 24 : 32,
+      width: isCompact ? 24 : 32
+    }, props.variant === 'tertiary' ? {
+      background: 'bgAlternate',
+      color: 'fg',
+      borderColor: 'bgAlternate'
+    } : {});
+  },
+  TextInput: _ref => {
+    let {
+        label,
+        labelNode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return {
+      labelNode: (labelNode != null ? labelNode : label) ? /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "label2",
+        children: label
+      }) : undefined,
+      bordered: false,
+      inputBackground: 'bgAlternate',
+      font: props.compact ? 'label2' : 'body',
+      variant: 'foregroundMuted',
+      focusedBorderWidth: 100
+    };
+  },
+  Switch: props => ({
+    background: props.checked ? 'bgPrimary' : undefined,
+    controlColor: props.checked ? 'bgAlternate' : 'fg'
+  }),
+  Tooltip: {
+    invertColorScheme: false
+  },
+  Radio: props => ({
+    background: 'bg',
+    borderWidth: props.checked ? 200 : 100,
+    borderColor: props.checked ? 'bgPrimary' : 'bgLinePrimarySubtle',
+    controlColor: 'bgPrimary',
+    dotSize: 20 / 3
+  }),
+  /**
+   * Advanced parity gap: we use 4px border radius instead of 2px border radius, could be fixed by adding borderRadius of 50
+   */
+  Checkbox: props => ({
+    borderWidth: 200,
+    controlColor: 'fg',
+    background: props.checked ? 'bgSecondary' : undefined,
+    borderColor: props.checked ? 'bgSecondary' : 'bgLinePrimarySubtle'
+  }),
+  ModalHeader: {
+    paddingX: 4,
+    paddingY: 3
+  },
+  ModalFooter: {
+    paddingX: 4,
+    paddingY: 4
+  },
+  ModalBody: {
+    paddingX: 4
+  },
+  SegmentedTabs: {
+    activeBackground: 'bgSecondary',
+    background: 'bgAlternate',
+    borderRadius: 300
+  },
+  SegmentedTab: {
+    activeColor: 'fg',
+    borderRadius: 200,
+    font: 'headline'
+  },
+  Chip: {
+    borderRadius: 200
+  },
+  Link: {
+    underline: true
+  },
+  ControlGroup: {
+    gap: 1
+  },
+  SearchInput: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32
+  }),
+  Select: props => ({
+    bordered: false,
+    variant: 'foregroundMuted',
+    inputBackground: 'bgAlternate',
+    focusedBorderWidth: 100,
+    height: props.compact ? 24 : props.labelVariant === 'inside' ? 40 : 32,
+    font: props.compact ? 'label2' : 'body',
+    labelColor: 'fgMuted',
+    labelFont: props.compact ? props.align === 'end' ? 'label1' : 'label2' : 'body'
+  })
+};