@hero-design/rn 7.3.0 → 7.4.0

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -0,0 +1,248 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly 1`] = `
+<View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "opacity": 1,
+        "padding": 16,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Everything
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#000000",
+            "borderRadius": 999,
+            "borderWidth": 2,
+            "height": 20,
+            "justifyContent": "center",
+            "width": 20,
+          },
+          undefined,
+        ]
+      }
+      themeChecked={false}
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "opacity": 1,
+        "padding": 16,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Direct mentions only
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#000000",
+            "borderRadius": 999,
+            "borderWidth": 2,
+            "height": 20,
+            "justifyContent": "center",
+            "width": 20,
+          },
+          undefined,
+        ]
+      }
+      themeChecked={false}
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f1e9fb",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "opacity": 1,
+        "padding": 16,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="large"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Nothing
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#7622d7",
+            "borderRadius": 999,
+            "borderWidth": 2,
+            "height": 20,
+            "justifyContent": "center",
+            "width": 20,
+          },
+          undefined,
+        ]
+      }
+      themeChecked={true}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#7622d7",
+              "borderRadius": 999,
+              "height": 10,
+              "width": 10,
+            },
+            undefined,
+          ]
+        }
+        testID="Nothing-selected-circle"
+      />
+    </View>
+  </View>
+</View>
+`;

package/src/components/Radio/__tests__/__snapshots__/StyledRadio.spec.tsx.snap

@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Circle has checked style: false 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderColor": "#000000",
+        "borderRadius": 999,
+        "borderWidth": 2,
+        "height": 20,
+        "justifyContent": "center",
+        "width": 20,
+      },
+      undefined,
+    ]
+  }
+  themeChecked={false}
+/>
+`;
+
+exports[`Circle has checked style: true 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderColor": "#7622d7",
+        "borderRadius": 999,
+        "borderWidth": 2,
+        "height": 20,
+        "justifyContent": "center",
+        "width": 20,
+      },
+      undefined,
+    ]
+  }
+  themeChecked={true}
+/>
+`;
+
+exports[`InnerCircle has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 999,
+        "height": 10,
+        "width": 10,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Spacer has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginTop": 4,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Wrapper has checked style: false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`Wrapper has checked style: true 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;

package/src/components/Radio/index.tsx

@@ -0,0 +1,5 @@
+import RadioGroup from './RadioGroup';
+
+const CompoundRadio = { Group: RadioGroup } as const;
+
+export default CompoundRadio;

package/src/components/SectionHeading/StyledHeading.tsx

@@ -0,0 +1,24 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+
+const StyledHeading = styled(View)(({ theme }) => ({
+  paddingVertical: theme.space.small,
+  paddingHorizontal: theme.space.medium,
+  backgroundColor: theme.colors.outline,
+  marginBottom: theme.space.medium,
+  display: 'flex',
+  flexDirection: 'row',
+  alignContent: 'center',
+  justifyContent: 'space-between',
+}));
+
+const StyledIconWrapper = styled(View)(({ theme }) => ({
+  marginRight: theme.space.small,
+}));
+
+const StyledWrapper = styled(View)(() => ({
+  display: 'flex',
+  flexDirection: 'row',
+}));
+
+export { StyledHeading, StyledIconWrapper, StyledWrapper };

package/src/components/SectionHeading/__tests__/StyledHeading.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import {
+  StyledHeading,
+  StyledIconWrapper,
+  StyledWrapper,
+} from '../StyledHeading';
+
+describe('StyledHeading', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledHeading />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledIconWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledIconWrapper />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledWrapper />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/SectionHeading/__tests__/__snapshots__/StyledHeading.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledHeading renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "center",
+        "backgroundColor": "#dadbde",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`StyledIconWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginRight": 8,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`StyledWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "display": "flex",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+/>
+`;

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

@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionHeading render icon correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "center",
+        "backgroundColor": "#dadbde",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  testID="sectionHeading"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginRight": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="document"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      test demo
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`SectionHeading render right children correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "center",
+        "backgroundColor": "#dadbde",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  testID="sectionHeading"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginRight": 8,
+          },
+          undefined,
+        ]
+      }
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      test demo
+    </Text>
+  </View>
+  <Text>
+    right children
+  </Text>
+</View>
+`;
+
+exports[`SectionHeading renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignContent": "center",
+        "backgroundColor": "#dadbde",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  testID="sectionHeading"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "display": "flex",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "marginRight": 8,
+          },
+          undefined,
+        ]
+      }
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      test demo
+    </Text>
+  </View>
+</View>
+`;