@gympass/yoga 7.65.0 → 7.66.1

package/esm/AutoComplete/web/AutoComplete.test.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ThemeProvider, AutoComplete } from '../..';
+describe('<AutoComplete />', function () {
+  describe('Snapshots', function () {
+    it('should match with default component', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with a full width component', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        full: true
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with options list', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "s",
+        options: ['first', 'second']
+      }))),
+          getByDisplayValue = _render3.getByDisplayValue,
+          container = _render3.container;
+
+      fireEvent.focus(getByDisplayValue('s'));
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with full width options list', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "s",
+        full: true,
+        options: ['first', 'second']
+      }))),
+          getByDisplayValue = _render4.getByDisplayValue,
+          container = _render4.container;
+
+      fireEvent.focus(getByDisplayValue('s'));
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Options list', function () {
+    it('should filter the options', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "secon",
+        options: ['first', 'second', 'third']
+      }))),
+          container = _render5.container,
+          getByDisplayValue = _render5.getByDisplayValue;
+
+      fireEvent.focus(getByDisplayValue('secon'));
+      expect(container.querySelector('ul').firstChild.textContent).toBe('second');
+    });
+    it('should close options list when clean button is clicked', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "secon",
+        options: ['first', 'second', 'third']
+      }))),
+          container = _render6.container,
+          getByDisplayValue = _render6.getByDisplayValue,
+          getByRole = _render6.getByRole;
+
+      fireEvent.focus(getByDisplayValue('secon'));
+      fireEvent.click(getByRole('button', {
+        name: /clear/i
+      }));
+      expect(container.querySelector('ul')).toBe(null);
+    });
+  });
+  describe('Event listeners', function () {
+    it('should call onChangeMock', function () {
+      var onChangeMock = jest.fn();
+      var onCleanMock = jest.fn();
+      var onSelectMock = jest.fn();
+
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "New",
+        options: ['New York'],
+        onChange: onChangeMock
+      }))),
+          getByDisplayValue = _render7.getByDisplayValue;
+
+      fireEvent.change(getByDisplayValue('New'), {
+        target: {
+          value: 'a'
+        }
+      });
+      expect(onChangeMock).toHaveBeenCalledWith('a');
+      expect(onSelectMock).not.toHaveBeenCalled();
+      expect(onCleanMock).not.toHaveBeenCalled();
+    });
+    it('should call onCleanMock', function () {
+      var onCleanMock = jest.fn();
+      var onSelectMock = jest.fn();
+      var onChangeMock = jest.fn();
+
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "New",
+        options: ['New York'],
+        onClean: onCleanMock,
+        onSelect: onSelectMock,
+        onChange: onChangeMock
+      }))),
+          getByDisplayValue = _render8.getByDisplayValue,
+          getByRole = _render8.getByRole;
+
+      fireEvent.focus(getByDisplayValue('New'));
+      fireEvent.click(getByRole('button', {
+        name: /clear/i
+      }));
+      expect(onCleanMock).toHaveBeenCalledWith('');
+      expect(onSelectMock).not.toHaveBeenCalled();
+      expect(onChangeMock).toHaveBeenCalledWith('');
+    });
+    it('should call onSelectMock', function () {
+      var onSelectMock = jest.fn();
+      var onCleanMock = jest.fn();
+      var onChangeMock = jest.fn();
+
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "New",
+        options: ['New York'],
+        onSelect: onSelectMock,
+        onClean: onCleanMock,
+        onChange: onChangeMock
+      }))),
+          getByDisplayValue = _render9.getByDisplayValue,
+          getByRole = _render9.getByRole;
+
+      fireEvent.focus(getByDisplayValue('New'));
+      fireEvent.click(getByRole('option'));
+      expect(onSelectMock).toHaveBeenCalledWith('New York');
+      expect(onChangeMock).toHaveBeenCalledWith('New York');
+      expect(onCleanMock).not.toHaveBeenCalled();
+    });
+  });
+});

package/esm/Avatar/index.native.js

@@ -0,0 +1,4 @@
+import Avatar from './native/Avatar';
+import AvatarCircle from './native/AvatarCircle';
+Avatar.Circle = AvatarCircle;
+export default Avatar;

package/esm/Avatar/native/Avatar.js

@@ -0,0 +1,96 @@
+var _excluded = ["icon", "src", "children", "fill", "stroke"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { forwardRef } from 'react';
+import { BuildingFilled } from '@gympass/yoga-icons';
+import { string, func } from 'prop-types';
+import { Image } from 'react-native';
+import Box from '../../Box';
+import Icon from '../../Icon';
+
+var Content = function Content(_ref) {
+  var icon = _ref.icon,
+      src = _ref.src,
+      fill = _ref.fill,
+      content = _ref.content,
+      stroke = _ref.stroke;
+
+  if (src) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: Image,
+      width: "100%",
+      height: "100%",
+      source: src
+    });
+  }
+
+  if (content) {
+    return content;
+  }
+
+  return /*#__PURE__*/React.createElement(Icon, {
+    as: icon,
+    width: "50%",
+    height: "50%",
+    fill: fill,
+    stroke: stroke
+  });
+};
+/**
+ * The Avatar component is used to display the image.
+ * It has two shapes: default and circle
+ */
+
+
+var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$icon = _ref2.icon,
+      icon = _ref2$icon === void 0 ? BuildingFilled : _ref2$icon,
+      src = _ref2.src,
+      children = _ref2.children,
+      fill = _ref2.fill,
+      stroke = _ref2.stroke,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    bgColor: "elements.selectionAndIcons",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 48,
+    height: 48,
+    borderRadius: "small",
+    elevation: "small",
+    overflow: "hidden"
+  }, props), /*#__PURE__*/React.createElement(Content, {
+    icon: icon,
+    src: src,
+    fill: fill,
+    stroke: stroke,
+    content: children
+  }));
+});
+Content.propTypes = _extends({
+  src: Image.propTypes.source,
+  icon: func,
+  fill: string
+}, Box.propTypes);
+Content.defaultProps = {
+  src: undefined,
+  fill: 'white',
+  icon: BuildingFilled
+};
+Avatar.propTypes = _extends({
+  src: Image.propTypes.source,
+  icon: func,
+  fill: string
+}, Box.propTypes);
+Avatar.defaultProps = _extends({
+  src: undefined,
+  fill: 'white'
+}, Box.defaultProps);
+Avatar.displayName = 'Avatar';
+export default Avatar;

package/esm/Avatar/native/Avatar.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { UserFilled } from '@gympass/yoga-icons';
+import { ThemeProvider } from '../..';
+import Avatar from './Avatar';
+import Text from '../../Text';
+describe('<Avatar />', function () {
+  it('should match snapshot in default avatar', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
+      width: 78,
+      height: 78,
+      fill: "black"
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in default avatar with placeholder prop', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
+      placeholder: UserFilled
+    }))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in circle avatar', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, null))),
+        toJSON = _render3.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in circle avatar with placeholder prop', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, {
+      placeholder: UserFilled
+    }))),
+        toJSON = _render4.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in avatar with children prop', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement(Text, null, "AL")))),
+        toJSON = _render5.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Avatar/native/AvatarCircle.js

@@ -0,0 +1,24 @@
+var _excluded = ["src"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { forwardRef } from 'react';
+import { UserFilled } from '@gympass/yoga-icons';
+import Avatar from './Avatar';
+var AvatarCircle = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var src = _ref.src,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Avatar, _extends({}, props, {
+    src: src,
+    borderRadius: "circle",
+    icon: !src ? UserFilled : undefined,
+    ref: ref
+  }));
+});
+AvatarCircle.propTypes = Avatar.propTypes;
+AvatarCircle.defaultProps = Avatar.defaultProps;
+AvatarCircle.displayName = 'Avatar.Circle';
+export default AvatarCircle;

package/esm/Avatar/web/Avatar.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { UserFilled } from '@gympass/yoga-icons';
+import { ThemeProvider } from '../..';
+import Avatar from './Avatar';
+describe('<Avatar />', function () {
+  it('should match snapshot in default avatar', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
+      width: 78,
+      height: 78,
+      fill: "black"
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot in default avatar with src and alt prop', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
+      src: "https://github.com/Gympass.png",
+      alt: "Gympass brand logo"
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot in default avatar with placeholder prop', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
+      icon: UserFilled
+    }))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot in circle avatar', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, null))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot in circle avatar with placeholder prop', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, {
+      icon: UserFilled
+    }))),
+        container = _render5.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot in circle avatar with src and alt prop', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, {
+      src: "https://github.com/Gympass.png",
+      alt: "Gympass brand logo"
+    }))),
+        container = _render6.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot in avatar with children prop', function () {
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement("p", null, "LC")))),
+        container = _render7.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Banner/index.native.js

@@ -0,0 +1,2 @@
+import Banner from './native';
+export default Banner;

package/esm/Banner/native/Banner.js

@@ -0,0 +1,128 @@
+var _excluded = ["button"],
+    _excluded2 = ["icon", "variant", "message", "primaryButton", "secondaryButton"];
+
+var _templateObject;
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { borders, margins } from '@gympass/yoga-system';
+import { func, oneOf, string, checkPropTypes, elementType, shape } from 'prop-types';
+import Box from '../../Box';
+import Button from '../../Button';
+import Icon from '../../Icon';
+import Text from '../../Text';
+var StyledBanner = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  align-items: center;\n  ", "\n\n  ", "\n  \n  ", "\n"])), function (_ref) {
+  var variant = _ref.variant,
+      _ref$theme$yoga = _ref.theme.yoga,
+      banner = _ref$theme$yoga.components.banner,
+      spacing = _ref$theme$yoga.spacing,
+      _ref$theme$yoga$color = _ref$theme$yoga.colors.feedback[variant],
+      backgroundColor = _ref$theme$yoga$color === void 0 ? {
+    light: banner.defaultBackgroundColor
+  } : _ref$theme$yoga$color;
+  return "\n    background-color: " + backgroundColor.light + ";\n    padding: " + spacing.xxsmall + "px\n      " + spacing.small + "px;\n    border-radius: " + banner.border.radius + "px;\n  ";
+}, margins, borders);
+var BannerActionButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$button = _ref2.button,
+      label = _ref2$button.label,
+      action = _ref2$button.action,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: Button.Text,
+    small: true,
+    secondary: true,
+    onPress: action,
+    ref: ref
+  }, props), label);
+});
+BannerActionButton.propTypes = {
+  button: shape({
+    label: string.isRequired,
+    action: func.isRequired
+  }).isRequired
+};
+/** A banner is a component that displays a prominent message. It can have related action buttons on it or not. */
+
+var Banner = /*#__PURE__*/forwardRef(function (props, ref) {
+  var icon = props.icon,
+      variant = props.variant,
+      message = props.message,
+      primaryButton = props.primaryButton,
+      secondaryButton = props.secondaryButton,
+      rest = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  return /*#__PURE__*/React.createElement(StyledBanner, _extends({
+    ref: ref,
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(Box, {
+    flexDirection: "row",
+    flex: 1,
+    alignItems: "center"
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    as: icon,
+    size: "medium",
+    fill: "secondary",
+    marginRight: "xxsmall"
+  }), /*#__PURE__*/React.createElement(Text.Small, {
+    flex: 1,
+    marginVertical: "xxsmall"
+  }, message), primaryButton && !secondaryButton && /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: primaryButton,
+    marginLeft: "xxsmall"
+  })), primaryButton && secondaryButton && /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flex: 1,
+    justifyContent: "flex-end",
+    flexDirection: "row",
+    marginBottom: "xxsmall"
+  }, /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: primaryButton,
+    marginRight: "xxxsmall"
+  }), /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: secondaryButton
+  })));
+});
+var BannerActionButtonType = shape({
+  label: string.isRequired,
+  action: func.isRequired
+});
+Banner.propTypes = {
+  /** SVG to be rendered. */
+  icon: elementType,
+
+  /** style the banner following the theme (success, informative, attention) */
+  variant: oneOf(['success', 'informative', 'attention']),
+
+  /** the message to be displayed */
+  message: string.isRequired,
+
+  /** the label and action fuction are required for banner action buttons  */
+  primaryButton: BannerActionButtonType,
+
+  /** the secondary button should only be used assemble the primary button (the label and action fuction are required for banner action buttons).  */
+  secondaryButton: function secondaryButton(props, propName, componentName) {
+    var _checkPropTypes;
+
+    var primaryButton = props.primaryButton;
+
+    if (!primaryButton && !!props[propName]) {
+      return new Error("The " + propName + " must only be used ensemble with the primaryButton.");
+    }
+
+    return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = BannerActionButtonType, _checkPropTypes), props, 'prop', componentName);
+  }
+};
+Banner.defaultProps = {
+  icon: undefined,
+  variant: 'informative',
+  primaryButton: undefined,
+  secondaryButton: undefined
+};
+export default Banner;

package/esm/Banner/native/Banner.test.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { CheckedFull } from '@gympass/yoga-icons';
+import { ThemeProvider, Banner } from '../..';
+describe('<Banner />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Feedback message."
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with custom variant', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      variant: "success",
+      message: "Success banner without button"
+    }), /*#__PURE__*/React.createElement(Banner, {
+      variant: "informative",
+      message: "Informative banner without button"
+    }), /*#__PURE__*/React.createElement(Banner, {
+      variant: "attention",
+      message: "Attention banner without button"
+    }))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with icon', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      icon: CheckedFull,
+      message: "Banner with icon"
+    }))),
+        toJSON = _render3.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with button', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Action',
+        action: function action() {}
+      }
+    }))),
+        toJSON = _render4.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should call button action function when the banner button is pressed', function () {
+    var onButtonPressMock = jest.fn();
+
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Action',
+        action: onButtonPressMock
+      }
+    }))),
+        getByText = _render5.getByText;
+
+    fireEvent.press(getByText('Action'));
+    expect(onButtonPressMock).toHaveBeenCalled();
+  });
+  it('should match snapshot with two action buttons', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with two action buttons",
+      primaryButton: {
+        label: 'Primary Action',
+        action: function action() {}
+      },
+      secondaryButton: {
+        label: 'Secondary Action',
+        action: function action() {}
+      }
+    }))),
+        toJSON = _render6.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should call both buttons action function when each banner action button are pressed', function () {
+    var onPrimaryButtonPressMock = jest.fn();
+    var onSecondaryButtonPressMock = jest.fn();
+
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Banner, {
+      message: "Banner with button",
+      primaryButton: {
+        label: 'Primary Action',
+        action: onPrimaryButtonPressMock
+      },
+      secondaryButton: {
+        label: 'Secondary Action',
+        action: onSecondaryButtonPressMock
+      }
+    }))),
+        getByText = _render7.getByText;
+
+    fireEvent.press(getByText('Primary Action'));
+    expect(onPrimaryButtonPressMock).toHaveBeenCalled();
+    fireEvent.press(getByText('Secondary Action'));
+    expect(onSecondaryButtonPressMock).toHaveBeenCalled();
+  });
+});

package/esm/Banner/native/index.js

@@ -0,0 +1,2 @@
+import Banner from './Banner';
+export default Banner;