@hero-design/rn 7.19.0 → 7.20.0

package/src/components/Box/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,605 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box allows flex props 1`] = `
+<View
+  alignContent="center"
+  alignItems="flex-end"
+  alignSelf="baseline"
+  display="flex"
+  flex={1}
+  flexBasis={20}
+  flexDirection="row"
+  flexGrow={3}
+  flexShrink={5}
+  flexWrap="wrap"
+  justifyContent="space-around"
+  style={
+    Array [
+      Object {
+        "alignContent": "center",
+        "alignItems": "flex-end",
+        "alignSelf": "baseline",
+        "display": "flex",
+        "flex": 1,
+        "flexBasis": 20,
+        "flexDirection": "row",
+        "flexGrow": 3,
+        "flexShrink": 5,
+        "flexWrap": "wrap",
+        "justifyContent": "space-around",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct color from theme 1`] = `
+<View
+  backgroundColor="warning"
+  borderBottomColor="warning"
+  borderColor="warning"
+  borderEndColor="warning"
+  borderLeftColor="warning"
+  borderRightColor="warning"
+  borderStartColor="warning"
+  borderTopColor="warning"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffbe71",
+        "borderBottomColor": "#ffbe71",
+        "borderColor": "#ffbe71",
+        "borderEndColor": "#ffbe71",
+        "borderLeftColor": "#ffbe71",
+        "borderRightColor": "#ffbe71",
+        "borderStartColor": "#ffbe71",
+        "borderTopColor": "#ffbe71",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct color from theme 2`] = `
+<View
+  backgroundColor="danger"
+  borderBottomColor="danger"
+  borderColor="danger"
+  borderEndColor="danger"
+  borderLeftColor="danger"
+  borderRightColor="danger"
+  borderStartColor="danger"
+  borderTopColor="danger"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#de350b",
+        "borderBottomColor": "#de350b",
+        "borderColor": "#de350b",
+        "borderEndColor": "#de350b",
+        "borderLeftColor": "#de350b",
+        "borderRightColor": "#de350b",
+        "borderStartColor": "#de350b",
+        "borderTopColor": "#de350b",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct color from theme 3`] = `
+<View
+  backgroundColor="success"
+  borderBottomColor="success"
+  borderColor="success"
+  borderEndColor="success"
+  borderLeftColor="success"
+  borderRightColor="success"
+  borderStartColor="success"
+  borderTopColor="success"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#5ace7d",
+        "borderBottomColor": "#5ace7d",
+        "borderColor": "#5ace7d",
+        "borderEndColor": "#5ace7d",
+        "borderLeftColor": "#5ace7d",
+        "borderRightColor": "#5ace7d",
+        "borderStartColor": "#5ace7d",
+        "borderTopColor": "#5ace7d",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct color from theme 4`] = `
+<View
+  backgroundColor="backgroundDark"
+  borderBottomColor="backgroundDark"
+  borderColor="backgroundDark"
+  borderEndColor="backgroundDark"
+  borderLeftColor="backgroundDark"
+  borderRightColor="backgroundDark"
+  borderStartColor="backgroundDark"
+  borderTopColor="backgroundDark"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#001f23",
+        "borderBottomColor": "#001f23",
+        "borderColor": "#001f23",
+        "borderEndColor": "#001f23",
+        "borderLeftColor": "#001f23",
+        "borderRightColor": "#001f23",
+        "borderStartColor": "#001f23",
+        "borderTopColor": "#001f23",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct radius from theme 1`] = `
+<View
+  borderBottomEndRadius="base"
+  borderBottomLeftRadius="base"
+  borderBottomRightRadius="base"
+  borderBottomStartRadius="base"
+  borderRadius="base"
+  borderTopEndRadius="base"
+  borderTopLeftRadius="base"
+  borderTopRightRadius="base"
+  borderTopStartRadius="base"
+  style={
+    Array [
+      Object {
+        "borderBottomEndRadius": 4,
+        "borderBottomLeftRadius": 4,
+        "borderBottomRightRadius": 4,
+        "borderBottomStartRadius": 4,
+        "borderRadius": 4,
+        "borderTopEndRadius": 4,
+        "borderTopLeftRadius": 4,
+        "borderTopRightRadius": 4,
+        "borderTopStartRadius": 4,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct radius from theme 2`] = `
+<View
+  borderBottomEndRadius="large"
+  borderBottomLeftRadius="large"
+  borderBottomRightRadius="large"
+  borderBottomStartRadius="large"
+  borderRadius="large"
+  borderTopEndRadius="large"
+  borderTopLeftRadius="large"
+  borderTopRightRadius="large"
+  borderTopStartRadius="large"
+  style={
+    Array [
+      Object {
+        "borderBottomEndRadius": 12,
+        "borderBottomLeftRadius": 12,
+        "borderBottomRightRadius": 12,
+        "borderBottomStartRadius": 12,
+        "borderRadius": 12,
+        "borderTopEndRadius": 12,
+        "borderTopLeftRadius": 12,
+        "borderTopRightRadius": 12,
+        "borderTopStartRadius": 12,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct radius from theme 3`] = `
+<View
+  borderBottomEndRadius="medium"
+  borderBottomLeftRadius="medium"
+  borderBottomRightRadius="medium"
+  borderBottomStartRadius="medium"
+  borderRadius="medium"
+  borderTopEndRadius="medium"
+  borderTopLeftRadius="medium"
+  borderTopRightRadius="medium"
+  borderTopStartRadius="medium"
+  style={
+    Array [
+      Object {
+        "borderBottomEndRadius": 8,
+        "borderBottomLeftRadius": 8,
+        "borderBottomRightRadius": 8,
+        "borderBottomStartRadius": 8,
+        "borderRadius": 8,
+        "borderTopEndRadius": 8,
+        "borderTopLeftRadius": 8,
+        "borderTopRightRadius": 8,
+        "borderTopStartRadius": 8,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct radius from theme 4`] = `
+<View
+  borderBottomEndRadius="xlarge"
+  borderBottomLeftRadius="xlarge"
+  borderBottomRightRadius="xlarge"
+  borderBottomStartRadius="xlarge"
+  borderRadius="xlarge"
+  borderTopEndRadius="xlarge"
+  borderTopLeftRadius="xlarge"
+  borderTopRightRadius="xlarge"
+  borderTopStartRadius="xlarge"
+  style={
+    Array [
+      Object {
+        "borderBottomEndRadius": 16,
+        "borderBottomLeftRadius": 16,
+        "borderBottomRightRadius": 16,
+        "borderBottomStartRadius": 16,
+        "borderRadius": 16,
+        "borderTopEndRadius": 16,
+        "borderTopLeftRadius": 16,
+        "borderTopRightRadius": 16,
+        "borderTopStartRadius": 16,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct radius from theme 5`] = `
+<View
+  borderBottomEndRadius="rounded"
+  borderBottomLeftRadius="rounded"
+  borderBottomRightRadius="rounded"
+  borderBottomStartRadius="rounded"
+  borderRadius="rounded"
+  borderTopEndRadius="rounded"
+  borderTopLeftRadius="rounded"
+  borderTopRightRadius="rounded"
+  borderTopStartRadius="rounded"
+  style={
+    Array [
+      Object {
+        "borderBottomEndRadius": 999,
+        "borderBottomLeftRadius": 999,
+        "borderBottomRightRadius": 999,
+        "borderBottomStartRadius": 999,
+        "borderRadius": 999,
+        "borderTopEndRadius": 999,
+        "borderTopLeftRadius": 999,
+        "borderTopRightRadius": 999,
+        "borderTopStartRadius": 999,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct space from theme 1`] = `
+<View
+  margin="large"
+  marginBottom="large"
+  marginEnd="large"
+  marginHorizontal="large"
+  marginLeft="large"
+  marginRight="large"
+  marginStart="large"
+  marginTop="large"
+  marginVertical="large"
+  padding="large"
+  paddingBottom="large"
+  paddingEnd="large"
+  paddingHorizontal="large"
+  paddingLeft="large"
+  paddingRight="large"
+  paddingStart="large"
+  paddingTop="large"
+  paddingVertical="large"
+  style={
+    Array [
+      Object {
+        "margin": 24,
+        "marginBottom": 24,
+        "marginEnd": 24,
+        "marginHorizontal": 24,
+        "marginLeft": 24,
+        "marginRight": 24,
+        "marginStart": 24,
+        "marginTop": 24,
+        "marginVertical": 24,
+        "padding": 24,
+        "paddingBottom": 24,
+        "paddingEnd": 24,
+        "paddingHorizontal": 24,
+        "paddingLeft": 24,
+        "paddingRight": 24,
+        "paddingStart": 24,
+        "paddingTop": 24,
+        "paddingVertical": 24,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct space from theme 2`] = `
+<View
+  margin="medium"
+  marginBottom="medium"
+  marginEnd="medium"
+  marginHorizontal="medium"
+  marginLeft="medium"
+  marginRight="medium"
+  marginStart="medium"
+  marginTop="medium"
+  marginVertical="medium"
+  padding="medium"
+  paddingBottom="medium"
+  paddingEnd="medium"
+  paddingHorizontal="medium"
+  paddingLeft="medium"
+  paddingRight="medium"
+  paddingStart="medium"
+  paddingTop="medium"
+  paddingVertical="medium"
+  style={
+    Array [
+      Object {
+        "margin": 16,
+        "marginBottom": 16,
+        "marginEnd": 16,
+        "marginHorizontal": 16,
+        "marginLeft": 16,
+        "marginRight": 16,
+        "marginStart": 16,
+        "marginTop": 16,
+        "marginVertical": 16,
+        "padding": 16,
+        "paddingBottom": 16,
+        "paddingEnd": 16,
+        "paddingHorizontal": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingStart": 16,
+        "paddingTop": 16,
+        "paddingVertical": 16,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct space from theme 3`] = `
+<View
+  margin="small"
+  marginBottom="small"
+  marginEnd="small"
+  marginHorizontal="small"
+  marginLeft="small"
+  marginRight="small"
+  marginStart="small"
+  marginTop="small"
+  marginVertical="small"
+  padding="small"
+  paddingBottom="small"
+  paddingEnd="small"
+  paddingHorizontal="small"
+  paddingLeft="small"
+  paddingRight="small"
+  paddingStart="small"
+  paddingTop="small"
+  paddingVertical="small"
+  style={
+    Array [
+      Object {
+        "margin": 8,
+        "marginBottom": 8,
+        "marginEnd": 8,
+        "marginHorizontal": 8,
+        "marginLeft": 8,
+        "marginRight": 8,
+        "marginStart": 8,
+        "marginTop": 8,
+        "marginVertical": 8,
+        "padding": 8,
+        "paddingBottom": 8,
+        "paddingEnd": 8,
+        "paddingHorizontal": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingStart": 8,
+        "paddingTop": 8,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correct space from theme 4`] = `
+<View
+  margin="xlarge"
+  marginBottom="xlarge"
+  marginEnd="xlarge"
+  marginHorizontal="xlarge"
+  marginLeft="xlarge"
+  marginRight="xlarge"
+  marginStart="xlarge"
+  marginTop="xlarge"
+  marginVertical="xlarge"
+  padding="xlarge"
+  paddingBottom="xlarge"
+  paddingEnd="xlarge"
+  paddingHorizontal="xlarge"
+  paddingLeft="xlarge"
+  paddingRight="xlarge"
+  paddingStart="xlarge"
+  paddingTop="xlarge"
+  paddingVertical="xlarge"
+  style={
+    Array [
+      Object {
+        "margin": 32,
+        "marginBottom": 32,
+        "marginEnd": 32,
+        "marginHorizontal": 32,
+        "marginLeft": 32,
+        "marginRight": 32,
+        "marginStart": 32,
+        "marginTop": 32,
+        "marginVertical": 32,
+        "padding": 32,
+        "paddingBottom": 32,
+        "paddingEnd": 32,
+        "paddingHorizontal": 32,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingStart": 32,
+        "paddingTop": 32,
+        "paddingVertical": 32,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correctborderWidth from theme 1`] = `
+<View
+  borderBottomWidth="base"
+  borderLeftWidth="base"
+  borderRightWidth="base"
+  borderTopWidth="base"
+  borderWidth="base"
+  style={
+    Array [
+      Object {
+        "borderBottomWidth": 1,
+        "borderLeftWidth": 1,
+        "borderRightWidth": 1,
+        "borderTopWidth": 1,
+        "borderWidth": 1,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop to valid property and correctborderWidth from theme 2`] = `
+<View
+  borderBottomWidth="medium"
+  borderLeftWidth="medium"
+  borderRightWidth="medium"
+  borderTopWidth="medium"
+  borderWidth="medium"
+  style={
+    Array [
+      Object {
+        "borderBottomWidth": 2,
+        "borderLeftWidth": 2,
+        "borderRightWidth": 2,
+        "borderTopWidth": 2,
+        "borderWidth": 2,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop with shortcut name to valid property and correct color from theme 1`] = `
+<View
+  bgColor="warning"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffbe71",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop with shortcut name to valid property and correct color from theme 2`] = `
+<View
+  bgColor="danger"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#de350b",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop with shortcut name to valid property and correct color from theme 3`] = `
+<View
+  bgColor="success"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#5ace7d",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box map prop with shortcut name to valid property and correct color from theme 4`] = `
+<View
+  bgColor="backgroundDark"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#001f23",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Box renders content correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      undefined,
+    ]
+  }
+  testID="box-test-id"
+>
+  <Text>
+    Box Content
+  </Text>
+</View>
+`;

package/src/components/Box/__tests__/helpers.spec.ts

@@ -0,0 +1,14 @@
+import { pick } from '../helpers';
+
+describe('pick', () => {
+  it('works', () => {
+    const keys = ['a', 'b', 'f'];
+    const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
+
+    expect(pick(keys, props)).toEqual({
+      a: 1,
+      b: true,
+      f: 'whatever',
+    });
+  });
+});