@hero-design/rn 8.30.3 → 8.31.0

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

@@ -57,13 +57,13 @@ exports[`Skeleton renders correctly by default 1`] = `
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -128,13 +128,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is circular
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -199,13 +199,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is rectangul
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -270,13 +270,13 @@ exports[`Skeleton renders correctly when intent is dark and variant is rounded 1
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -341,13 +341,13 @@ exports[`Skeleton renders correctly when intent is light and variant is circular
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -412,13 +412,13 @@ exports[`Skeleton renders correctly when intent is light and variant is rectangu
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />
@@ -483,13 +483,13 @@ exports[`Skeleton renders correctly when intent is light and variant is rounded
       }
       style={
         Object {
-          "height": 0,
+          "height": "100%",
           "transform": Array [
             Object {
               "translateX": -0,
             },
           ],
-          "width": 0,
+          "width": "100%",
         }
       }
     />

package/src/components/Skeleton/index.tsx

@@ -69,9 +69,6 @@ const Skeleton = ({
   const [containerWidth, setContainerWidth] = useState(
     Number(StyleSheet.flatten(style)?.width) || 0
   );
-  const [containerHeight, setContainerHeight] = useState(
-    Number(StyleSheet.flatten(style)?.height) || 0
-  );
 
   const [shouldStartAnimation, setShouldStartAnimation] = useState(false);
 
@@ -96,8 +93,7 @@ const Skeleton = ({
   });
 
   const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setContainerHeight(height);
+    const { width } = e.nativeEvent.layout;
     setContainerWidth(width);
 
     if (!shouldStartAnimation) {
@@ -120,8 +116,8 @@ const Skeleton = ({
           start={gradientPositions.start}
           end={gradientPositions.end}
           style={{
-            width: containerWidth,
-            height: containerHeight,
+            width: '100%',
+            height: '100%',
             transform: [{ translateX }],
           }}
           colors={colors}

package/src/components/Typography/Caption/StyledCaption.tsx

@@ -0,0 +1,19 @@
+import { Text } from 'react-native';
+import styled from '@emotion/native';
+import { FONTWEIGHT_MAP, ThemeIntent } from '../types';
+
+const StyledCaption = styled(Text)<{
+  themeFontWeight: 'regular' | 'semi-bold';
+  themeIntent: ThemeIntent;
+}>(({ themeFontWeight, themeIntent, theme }) => ({
+  fontSize: theme.__hd__.typography.fontSizes.caption,
+  lineHeight: theme.__hd__.typography.lineHeights.caption,
+  letterSpacing:
+    theme.__hd__.typography.fontSizes.caption *
+    (themeFontWeight === 'regular' ? 0.04 : 0.02),
+  color: theme.__hd__.typography.colors[themeIntent],
+  fontFamily:
+    theme.__hd__.typography.fonts.neutral[FONTWEIGHT_MAP[themeFontWeight]],
+}));
+
+export { StyledCaption };

package/src/components/Typography/Caption/__tests__/StyledCaption.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import { StyledCaption } from '../StyledCaption';
+
+describe('StyledCaption', () => {
+  it.each`
+    fontWeight
+    ${'regular'}
+    ${'semi-bold'}
+  `('has $fontWeight fontWeight style', ({ fontWeight }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledCaption themeFontWeight={fontWeight} themeIntent="body">
+        This is a test
+      </StyledCaption>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    intent
+    ${'body'}
+    ${'subdued'}
+    ${'primary'}
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
+    ${'inverted'}
+  `('has $intent intent style', ({ intent }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledCaption themeFontWeight="regular" themeIntent={intent}>
+        This is a test
+      </StyledCaption>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Typography/Caption/__tests__/__snapshots__/StyledCaption.spec.tsx.snap

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledCaption has body intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has danger intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#f46363",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="danger"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has info intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#4568fb",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="info"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has inverted intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="inverted"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has primary intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#401960",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="primary"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has regular fontWeight style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has semi-bold fontWeight style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-SemiBold",
+        "fontSize": 12,
+        "letterSpacing": 0.24,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="semi-bold"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has subdued intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#4d6265",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="subdued"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has success intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#5ace7d",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="success"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has warning intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#ffbe71",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="warning"
+>
+  This is a test
+</Text>
+`;

package/src/components/Typography/Caption/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Caption has archived intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#737479",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="archived"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has body intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has danger intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#f46363",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="danger"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has disabled intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#bfc1c5",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="disabled"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has info intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#4568fb",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="info"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has inverted intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="inverted"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has primary intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#401960",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="primary"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has regular fontWeight style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has secondary intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#795e90",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="secondary"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has semi-bold fontWeight style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-SemiBold",
+        "fontSize": 12,
+        "letterSpacing": 0.24,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="semi-bold"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has subdued intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#4d6265",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="subdued"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has success intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#5ace7d",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="success"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has warning intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#ffbe71",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="warning"
+>
+  This is a test
+</Text>
+`;