@hero-design/rn 7.3.1 → 7.5.0

package/src/components/Alert/StyledAlert.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/native';
+import { ComponentProps } from 'react';
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+
+const Container = styled(View)<{
+  themeVariant: 'default' | 'round';
+  themeIntent: 'success' | 'info' | 'warning' | 'error';
+}>(({ theme, themeVariant = 'default', themeIntent }) => ({
+  borderRadius: themeVariant === 'round' ? theme.__hd__.alert.radii.default : 0,
+  backgroundColor: theme.__hd__.alert.colors[themeIntent],
+  minHeight: theme.__hd__.alert.sizes.height,
+  flexDirection: 'row',
+}));
+
+const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
+  alignItems: 'center',
+  paddingLeft: theme.__hd__.alert.space.padding,
+}));
+
+const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.alert.space.padding,
+  flex: 1,
+}));
+
+const ContentContainer = styled(View)<{ showDivider: boolean }>(
+  ({ theme, showDivider }) => ({
+    paddingVertical: theme.__hd__.alert.space.padding,
+    flex: 1,
+    borderRightWidth: showDivider ? theme.__hd__.alert.borderWidths.base : 0,
+    borderColor: theme.__hd__.alert.colors.divider,
+    flexDirection: 'row',
+  })
+);
+
+const CTAWrapper = styled(TouchableOpacity)<
+  ComponentProps<typeof TouchableOpacity>
+>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.alert.space.padding,
+  justifyContent: 'center',
+}));
+
+export {
+  Container,
+  ContentContainer,
+  TextContainer,
+  IconContainer,
+  CTAWrapper,
+};

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

@@ -0,0 +1,686 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert Icon render custom icon correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#1dbeee",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+  themeVariant="default"
+>
+  <View
+    showDivider={false}
+    style={
+      Array [
+        Object {
+          "borderColor": "#fafbfb",
+          "borderRightWidth": 0,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "paddingLeft": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="alert-left-icon"
+    >
+      <HeroIcon
+        name="home"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Content
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Alert renders correctly when intent is error 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="error"
+  themeVariant="default"
+>
+  <View
+    showDivider={true}
+    style={
+      Array [
+        Object {
+          "borderColor": "#fafbfb",
+          "borderRightWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "paddingLeft": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="alert-left-icon"
+    >
+      <HeroIcon
+        name="circle-warning"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="semi-bold"
+        themeIntent="body"
+      >
+        Title
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Content
+      </Text>
+    </View>
+  </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 {
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 16,
+      }
+    }
+    testID="alert-close-icon"
+  >
+    <HeroIcon
+      name="cancel"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+</View>
+`;
+
+exports[`Alert renders correctly when intent is info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#1dbeee",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+  themeVariant="default"
+>
+  <View
+    showDivider={true}
+    style={
+      Array [
+        Object {
+          "borderColor": "#fafbfb",
+          "borderRightWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "paddingLeft": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="alert-left-icon"
+    >
+      <HeroIcon
+        name="circle-info"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="semi-bold"
+        themeIntent="body"
+      >
+        Title
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Content
+      </Text>
+    </View>
+  </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 {
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 16,
+      }
+    }
+    testID="alert-close-icon"
+  >
+    <HeroIcon
+      name="cancel"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+</View>
+`;
+
+exports[`Alert renders correctly when intent is success 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#01b39c",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="success"
+  themeVariant="default"
+>
+  <View
+    showDivider={true}
+    style={
+      Array [
+        Object {
+          "borderColor": "#fafbfb",
+          "borderRightWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "paddingLeft": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="alert-left-icon"
+    >
+      <HeroIcon
+        name="circle-ok"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="semi-bold"
+        themeIntent="body"
+      >
+        Title
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Content
+      </Text>
+    </View>
+  </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 {
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 16,
+      }
+    }
+    testID="alert-close-icon"
+  >
+    <HeroIcon
+      name="cancel"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+</View>
+`;
+
+exports[`Alert renders correctly when intent is warning 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffa234",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="warning"
+  themeVariant="default"
+>
+  <View
+    showDivider={true}
+    style={
+      Array [
+        Object {
+          "borderColor": "#fafbfb",
+          "borderRightWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "paddingLeft": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="alert-left-icon"
+    >
+      <HeroIcon
+        name="warning"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="semi-bold"
+        themeIntent="body"
+      >
+        Title
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Content
+      </Text>
+    </View>
+  </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 {
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 16,
+      }
+    }
+    testID="alert-close-icon"
+  >
+    <HeroIcon
+      name="cancel"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+</View>
+`;