@hero-design/rn 7.12.1 → 7.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.12.1",
+  "version": "7.14.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,8 +21,10 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.12.1",
-    "date-fns": "^2.16.1"
+    "@hero-design/colors": "7.14.0",
+    "date-fns": "^2.16.1",
+    "events": "^3.2.0",
+    "hero-editor": "^1.9.9"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -30,7 +32,8 @@
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
-    "@react-native-community/datetimepicker": "^3.5.2"
+    "@react-native-community/datetimepicker": "^3.5.2",
+    "react-native-webview": "^11.15.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -54,6 +57,7 @@
     "@types/react-native-vector-icons": "^6.4.10",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
+    "babel-plugin-inline-import": "^3.0.0",
     "eslint": "^8.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -68,6 +72,7 @@
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
+    "react-native-webview": "^11.15.0",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",

package/rollup.config.js

@@ -28,6 +28,7 @@ export default {
     'react-native',
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',
+    'react-native-webview',
   ],
   plugins: [
     replace({

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import {
+  StyledCollapse,
+  StyledHeaderWrapper,
+  StyledItemWrapper,
+  Variant,
+} from './StyledAccordion';
+import Typography from '../Typography';
+import Icon from '../Icon';
+
+export type AccordionItemProps = {
+  header: string | ReactElement;
+  content: ReactElement;
+  open?: boolean;
+  onPress?: () => void;
+  variant?: Variant;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+const AccordionItem = ({
+  header,
+  content,
+  open = false,
+  onPress,
+  variant = 'default',
+  style,
+  testID,
+}: AccordionItemProps) => (
+  <StyledItemWrapper themeVariant={variant} style={style} testID={testID}>
+    <StyledHeaderWrapper onPress={onPress}>
+      {typeof header === 'string' ? (
+        <Typography.Text fontSize="large" fontWeight="semi-bold">
+          {header}
+        </Typography.Text>
+      ) : (
+        header
+      )}
+      <Icon
+        icon={`arrow-${open ? 'up' : 'down'}`}
+        intent="primary"
+        size="small"
+      />
+    </StyledHeaderWrapper>
+    <StyledCollapse open={open}>{content}</StyledCollapse>
+  </StyledItemWrapper>
+);
+
+export default AccordionItem;

package/src/components/Accordion/StyledAccordion.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/native';
+import { TouchableOpacity, View } from 'react-native';
+import Collapse from '../Collapse';
+
+export type Variant = 'default' | 'card';
+
+export const StyledWrapper = styled(View)(() => ({}));
+
+export const StyledItemWrapper = styled(View)<{ themeVariant: Variant }>(
+  ({ theme, themeVariant }) => ({
+    padding: theme.__hd__.accordion.space.padding,
+    backgroundColor: theme.__hd__.accordion.colors.background,
+    borderRadius:
+      themeVariant === 'card' ? theme.__hd__.accordion.radii.card : 0,
+  })
+);
+
+export const StyledHeaderWrapper = styled(TouchableOpacity)(() => ({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+}));
+
+export const StyledCollapse = styled(Collapse)(({ theme }) => ({
+  paddingTop: theme.__hd__.accordion.space.padding,
+}));
+
+export const Spacer = styled(View)(({ theme }) => ({
+  paddingTop: theme.__hd__.accordion.space.padding,
+}));

package/src/components/Accordion/__tests__/AccordionItem.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import AccordionItem from '../AccordionItem';
+
+describe('AccordionItem', () => {
+  it('renders correctly when header is string', () => {
+    const wrapper = renderWithTheme(
+      <AccordionItem
+        header="Accordion header"
+        content={<Typography.Text>Accordion content</Typography.Text>}
+      />
+    );
+
+    expect(wrapper.getAllByText('Accordion header')).toHaveLength(1);
+    expect(wrapper.getAllByText('Accordion content')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when header is an element', () => {
+    const wrapper = renderWithTheme(
+      <AccordionItem
+        header={<Typography.Text>Accordion header</Typography.Text>}
+        content={<Typography.Text>Accordion content</Typography.Text>}
+      />
+    );
+
+    expect(wrapper.getAllByText('Accordion header')).toHaveLength(1);
+    expect(wrapper.getAllByText('Accordion content')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when variant is card', () => {
+    const wrapper = renderWithTheme(
+      <AccordionItem
+        header="Accordion header"
+        content={<Typography.Text>Accordion content</Typography.Text>}
+        variant="card"
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when open', () => {
+    const wrapper = renderWithTheme(
+      <AccordionItem
+        header="Accordion header"
+        content={<Typography.Text>Accordion content</Typography.Text>}
+        open
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Accordion/__tests__/StyledAccordion.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledItemWrapper } from '../StyledAccordion';
+
+describe('StyledItemWrapper', () => {
+  it.each`
+    themeVariant
+    ${'default'}
+    ${'card'}
+  `('has correct style when variant is $themeVariant', ({ themeVariant }) => {
+    const wrapper = renderWithTheme(
+      <StyledItemWrapper themeVariant={themeVariant} />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});