@hero-design/rn 8.22.0-alpha.0 → 8.23.0

package/src/components/Tag/__tests__/Tag.spec.tsx

@@ -4,77 +4,28 @@ import Tag from '..';
 import Typography from '../../Typography';
 
 describe('Tag', () => {
-  it('has success style when intent is success', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="SUCCESS" intent="success" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('SUCCESS')).toBeDefined();
-  });
-
-  it('has warning style when intent is warning', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="WARNING" intent="warning" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('WARNING')).toBeDefined();
-  });
-
-  it('has danger style when intent is danger', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="DANGER" intent="danger" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('DANGER')).toBeDefined();
-  });
-
-  it('has info style when intent is info', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="INFO" intent="info" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('INFO')).toBeDefined();
-  });
-
-  it('has archived style when intent is archived', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="ARCHIVED" intent="archived" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('ARCHIVED')).toBeDefined();
-  });
-
-  it('has archived style when intent is primary', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="PRIMARY" intent="primary" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('PRIMARY')).toBeDefined();
-  });
-
-  it('renders correctly when variant is filled and intent is warning', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="WARNING" intent="warning" variant="filled" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('WARNING')).toBeDefined();
-  });
-
-  it('renders correctly when variant is filled and intent is danger', () => {
-    const { getByText, toJSON } = renderWithTheme(
-      <Tag content="DANGER" intent="danger" variant="filled" />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByText('DANGER')).toBeDefined();
-  });
+  it.each`
+    variant       | intent       | content      | expected
+    ${'outlined'} | ${'success'} | ${'SUCCESS'} | ${'SUCCESS'}
+    ${'outlined'} | ${'warning'} | ${'WARNING'} | ${'WARNING'}
+    ${'outlined'} | ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
+    ${'outlined'} | ${'info'}    | ${'INFO'}    | ${'INFO'}
+    ${'outlined'} | ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
+    ${'filled'}   | ${'warning'} | ${'WARNING'} | ${'WARNING'}
+    ${'filled'}   | ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
+    ${'filled'}   | ${'info'}    | ${'INFO'}    | ${'INFO'}
+    ${'filled'}   | ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
+  `(
+    'renders correctly when variant is $variant and intent is $intent',
+    ({ variant, intent, content, expected }) => {
+      const { getByText, toJSON } = renderWithTheme(
+        <Tag content={content} intent={intent} variant={variant} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText(expected)).toBeDefined();
+    }
+  );
 
   it('renders correctly with custom content', () => {
     const { getByText, toJSON } = renderWithTheme(

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag has archived style when intent is archived 1`] = `
+exports[`Tag renders correctly when variant is filled and intent is danger 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#f1f2f3",
-        "borderColor": "#737479",
+        "backgroundColor": "#fcebe7",
+        "borderColor": "#fcebe7",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -15,8 +15,8 @@ exports[`Tag has archived style when intent is archived 1`] = `
       undefined,
     ]
   }
-  themeIntent="archived"
-  themeVariant="outlined"
+  themeIntent="danger"
+  themeVariant="filled"
 >
   <Text
     allowFontScaling={false}
@@ -31,7 +31,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
         },
         Array [
           Object {
-            "color": "#737479",
+            "color": "#de350b",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -46,20 +46,73 @@ exports[`Tag has archived style when intent is archived 1`] = `
     themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
-    themeVariant="outlined"
+    themeVariant="filled"
   >
-    ARCHIVED
+    DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag has archived style when intent is primary 1`] = `
+exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ecf0ff",
+        "borderColor": "#ecf0ff",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+  themeVariant="filled"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "color": "#4568fb",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 12,
+            "includeFontPadding": false,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="filled"
+  >
+    INFO
+  </Text>
+</View>
+`;
+
+exports[`Tag renders correctly when variant is filled and intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": undefined,
-        "borderColor": "#401960",
+        "borderColor": undefined,
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -69,7 +122,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     ]
   }
   themeIntent="primary"
-  themeVariant="outlined"
+  themeVariant="filled"
 >
   <Text
     allowFontScaling={false}
@@ -84,7 +137,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
         },
         Array [
           Object {
-            "color": "#401960",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -99,20 +152,20 @@ exports[`Tag has archived style when intent is primary 1`] = `
     themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
-    themeVariant="outlined"
+    themeVariant="filled"
   >
     PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag has danger style when intent is danger 1`] = `
+exports[`Tag renders correctly when variant is filled and intent is warning 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fcebe7",
-        "borderColor": "#de350b",
+        "backgroundColor": "#fff6eb",
+        "borderColor": "#fff6eb",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -121,8 +174,8 @@ exports[`Tag has danger style when intent is danger 1`] = `
       undefined,
     ]
   }
-  themeIntent="danger"
-  themeVariant="outlined"
+  themeIntent="warning"
+  themeVariant="filled"
 >
   <Text
     allowFontScaling={false}
@@ -137,7 +190,7 @@ exports[`Tag has danger style when intent is danger 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#ffa234",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -152,20 +205,20 @@ exports[`Tag has danger style when intent is danger 1`] = `
     themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
-    themeVariant="outlined"
+    themeVariant="filled"
   >
-    DANGER
+    WARNING
   </Text>
 </View>
 `;
 
-exports[`Tag has info style when intent is info 1`] = `
+exports[`Tag renders correctly when variant is outlined and intent is danger 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#4568fb",
+        "backgroundColor": "#fcebe7",
+        "borderColor": "#de350b",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -174,7 +227,7 @@ exports[`Tag has info style when intent is info 1`] = `
       undefined,
     ]
   }
-  themeIntent="info"
+  themeIntent="danger"
   themeVariant="outlined"
 >
   <Text
@@ -190,7 +243,7 @@ exports[`Tag has info style when intent is info 1`] = `
         },
         Array [
           Object {
-            "color": "#4568fb",
+            "color": "#de350b",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -207,18 +260,18 @@ exports[`Tag has info style when intent is info 1`] = `
     themeTypeface="neutral"
     themeVariant="outlined"
   >
-    INFO
+    DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag has success style when intent is success 1`] = `
+exports[`Tag renders correctly when variant is outlined and intent is info 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#f0fef4",
-        "borderColor": "#017d6d",
+        "backgroundColor": "#ecf0ff",
+        "borderColor": "#4568fb",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -227,7 +280,7 @@ exports[`Tag has success style when intent is success 1`] = `
       undefined,
     ]
   }
-  themeIntent="success"
+  themeIntent="info"
   themeVariant="outlined"
 >
   <Text
@@ -243,7 +296,7 @@ exports[`Tag has success style when intent is success 1`] = `
         },
         Array [
           Object {
-            "color": "#017d6d",
+            "color": "#4568fb",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -260,18 +313,18 @@ exports[`Tag has success style when intent is success 1`] = `
     themeTypeface="neutral"
     themeVariant="outlined"
   >
-    SUCCESS
+    INFO
   </Text>
 </View>
 `;
 
-exports[`Tag has warning style when intent is warning 1`] = `
+exports[`Tag renders correctly when variant is outlined and intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#ffa234",
+        "backgroundColor": undefined,
+        "borderColor": "#001f23",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -280,7 +333,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
       undefined,
     ]
   }
-  themeIntent="warning"
+  themeIntent="primary"
   themeVariant="outlined"
 >
   <Text
@@ -296,7 +349,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
         },
         Array [
           Object {
-            "color": "#ffa234",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -313,18 +366,18 @@ exports[`Tag has warning style when intent is warning 1`] = `
     themeTypeface="neutral"
     themeVariant="outlined"
   >
-    WARNING
+    PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is danger 1`] = `
+exports[`Tag renders correctly when variant is outlined and intent is success 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fcebe7",
-        "borderColor": "#fcebe7",
+        "backgroundColor": "#f0fef4",
+        "borderColor": "#017d6d",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -333,8 +386,8 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
       undefined,
     ]
   }
-  themeIntent="danger"
-  themeVariant="filled"
+  themeIntent="success"
+  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}
@@ -349,7 +402,7 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#017d6d",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -364,20 +417,20 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
     themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
-    themeVariant="filled"
+    themeVariant="outlined"
   >
-    DANGER
+    SUCCESS
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is warning 1`] = `
+exports[`Tag renders correctly when variant is outlined and intent is warning 1`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": "#fff6eb",
-        "borderColor": "#fff6eb",
+        "borderColor": "#ffa234",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -387,7 +440,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
     ]
   }
   themeIntent="warning"
-  themeVariant="filled"
+  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}
@@ -402,7 +455,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#ffa234",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
@@ -417,7 +470,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
     themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
-    themeVariant="filled"
+    themeVariant="outlined"
   >
     WARNING
   </Text>
@@ -430,7 +483,7 @@ exports[`Tag renders correctly with custom content 1`] = `
     Array [
       Object {
         "backgroundColor": undefined,
-        "borderColor": "#401960",
+        "borderColor": "#001f23",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,