@hero-design/rn 7.6.1-alpha.0 → 7.8.0

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -23,6 +23,26 @@ exports[`StyledButtonContainer has basic-transparent style 1`] = `
 />
 `;
 
+exports[`StyledButtonContainer has filled-danger style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#de350b",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-danger"
+/>
+`;
+
 exports[`StyledButtonContainer has filled-primary style 1`] = `
 <View
   style={
@@ -63,6 +83,28 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
 />
 `;
 
+exports[`StyledButtonContainer has outlined-danger style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#de350b",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-danger"
+/>
+`;
+
 exports[`StyledButtonContainer has outlined-primary style 1`] = `
 <View
   style={
@@ -131,6 +173,27 @@ exports[`StyledButtonContainer has pressed with the correct variant basic-transp
 />
 `;
 
+exports[`StyledButtonContainer has pressed with the correct variant filled-danger style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f2ae9d",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-danger"
+/>
+`;
+
 exports[`StyledButtonContainer has pressed with the correct variant filled-primary style 1`] = `
 <View
   pressed={true}
@@ -173,6 +236,29 @@ exports[`StyledButtonContainer has pressed with the correct variant filled-secon
 />
 `;
 
+exports[`StyledButtonContainer has pressed with the correct variant outlined-danger style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#f2ae9d",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-danger"
+/>
+`;
+
 exports[`StyledButtonContainer has pressed with the correct variant outlined-primary style 1`] = `
 <View
   pressed={true}
@@ -263,6 +349,29 @@ exports[`StyledButtonIcon has basic-transparent style 1`] = `
 />
 `;
 
+exports[`StyledButtonIcon has filled-danger style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
 exports[`StyledButtonIcon has filled-primary style 1`] = `
 <HeroIcon
   name="bell"
@@ -309,6 +418,30 @@ exports[`StyledButtonIcon has filled-secondary style 1`] = `
 />
 `;
 
+exports[`StyledButtonIcon has outlined-danger style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontSize": 18,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
 exports[`StyledButtonIcon has outlined-primary style 1`] = `
 <HeroIcon
   name="bell"
@@ -380,6 +513,29 @@ exports[`StyledButtonIcon has pressed with the correct variant basic-transparent
 />
 `;
 
+exports[`StyledButtonIcon has pressed with the correct variant filled-danger style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
 exports[`StyledButtonIcon has pressed with the correct variant filled-primary style 1`] = `
 <HeroIcon
   name="bell"
@@ -426,6 +582,30 @@ exports[`StyledButtonIcon has pressed with the correct variant filled-secondary
 />
 `;
 
+exports[`StyledButtonIcon has pressed with the correct variant outlined-danger style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#f2ae9d",
+          "fontSize": 18,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
 exports[`StyledButtonIcon has pressed with the correct variant outlined-primary style 1`] = `
 <HeroIcon
   name="bell"
@@ -558,6 +738,39 @@ exports[`StyledButtonText has basic-transparent style 1`] = `
 </Text>
 `;
 
+exports[`StyledButtonText has filled-danger style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled-danger"
+>
+  Example
+</Text>
+`;
+
 exports[`StyledButtonText has filled-primary style 1`] = `
 <Text
   style={
@@ -624,6 +837,39 @@ exports[`StyledButtonText has filled-secondary style 1`] = `
 </Text>
 `;
 
+exports[`StyledButtonText has outlined-danger style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="outlined-danger"
+>
+  Example
+</Text>
+`;
+
 exports[`StyledButtonText has outlined-primary style 1`] = `
 <Text
   style={
@@ -724,6 +970,40 @@ exports[`StyledButtonText has pressed with the correct variant basic-transparent
 </Text>
 `;
 
+exports[`StyledButtonText has pressed with the correct variant filled-danger style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled-danger"
+>
+  Example
+</Text>
+`;
+
 exports[`StyledButtonText has pressed with the correct variant filled-primary style 1`] = `
 <Text
   pressed={true}
@@ -792,6 +1072,40 @@ exports[`StyledButtonText has pressed with the correct variant filled-secondary
 </Text>
 `;
 
+exports[`StyledButtonText has pressed with the correct variant outlined-danger style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#f2ae9d",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="outlined-danger"
+>
+  Example
+</Text>
+`;
+
 exports[`StyledButtonText has pressed with the correct variant outlined-primary style 1`] = `
 <Text
   pressed={true}

package/src/components/Card/DataCard/StyledDataCard.tsx

@@ -0,0 +1,20 @@
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import { scale } from '../../../utils/scale';
+
+const StyledDataCard = styled(View)(({ theme }) => ({
+  borderRadius: theme.__hd__.card.radii.default,
+  overflow: 'hidden',
+  flex: 1,
+  flexDirection: 'row',
+}));
+
+const Indicator = styled(View)<{
+  themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+}>(({ theme, themeIntent }) => ({
+  backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
+  width: scale(16),
+  height: '100%',
+}));
+
+export { StyledDataCard, Indicator };

package/src/components/Card/DataCard/__tests__/StyledDataCard.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import { StyledDataCard, Indicator } from '../StyledDataCard';
+
+describe('StyledDataCard', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<StyledDataCard />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Indicator', () => {
+  it.each`
+    intent
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
+    ${'archived'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { toJSON } = renderWithTheme(<Indicator themeIntent={intent} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Indicator renders correctly when intent is archived 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#bfc1c5",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="archived"
+/>
+`;
+
+exports[`Indicator renders correctly when intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#e3602a",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="danger"
+/>
+`;
+
+exports[`Indicator renders correctly when intent is info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#b5c3fd",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+/>
+`;
+
+exports[`Indicator renders correctly when intent is success 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#5ace7d",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="success"
+/>
+`;
+
+exports[`Indicator renders correctly when intent is warning 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffbe71",
+        "height": "100%",
+        "width": 16,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="warning"
+/>
+`;
+
+exports[`StyledDataCard renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "flex": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+/>
+`;

package/src/components/Card/DataCard/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataCard renders correctly when intent is archived 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "flex": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#bfc1c5",
+          "height": "100%",
+          "width": 16,
+        },
+        undefined,
+      ]
+    }
+    testID="data-card-indicator"
+    themeIntent="archived"
+  />
+</View>
+`;
+
+exports[`DataCard renders correctly when intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "flex": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#e3602a",
+          "height": "100%",
+          "width": 16,
+        },
+        undefined,
+      ]
+    }
+    testID="data-card-indicator"
+    themeIntent="danger"
+  />
+</View>
+`;
+
+exports[`DataCard renders correctly when intent is info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "flex": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#b5c3fd",
+          "height": "100%",
+          "width": 16,
+        },
+        undefined,
+      ]
+    }
+    testID="data-card-indicator"
+    themeIntent="info"
+  />
+</View>
+`;
+
+exports[`DataCard renders correctly when intent is success 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "flex": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#5ace7d",
+          "height": "100%",
+          "width": 16,
+        },
+        undefined,
+      ]
+    }
+    testID="data-card-indicator"
+    themeIntent="success"
+  />
+</View>
+`;
+
+exports[`DataCard renders correctly when intent is warning 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "flex": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ffbe71",
+          "height": "100%",
+          "width": 16,
+        },
+        undefined,
+      ]
+    }
+    testID="data-card-indicator"
+    themeIntent="warning"
+  />
+</View>
+`;

package/src/components/Card/DataCard/__tests__/index.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import DataCard from '..';
+
+describe('DataCard', () => {
+  it('renders correctly', () => {
+    const { queryAllByTestId } = renderWithTheme(
+      <DataCard testID="card">
+        <View testID="child-view" />
+      </DataCard>
+    );
+
+    expect(queryAllByTestId('card')).toHaveLength(1);
+    expect(queryAllByTestId('child-view')).toHaveLength(1);
+    expect(queryAllByTestId('data-card-indicator')).toHaveLength(1);
+  });
+
+  it.each`
+    intent
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
+    ${'archived'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { toJSON } = renderWithTheme(<DataCard intent={intent} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});