@hero-design/rn 7.0.4 → 7.1.0

package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "transform": Array [
+        Object {
+          "rotate": "0deg",
+        },
+      ],
+    }
+  }
+>
+  <HeroIcon
+    name="add"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        Object {
+          "color": "#ffffff",
+          "fontSize": 28,
+        },
+        Object {},
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;
+
+exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "transform": Array [
+        Object {
+          "rotate": "-45deg",
+        },
+      ],
+    }
+  }
+>
+  <HeroIcon
+    name="add"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        Object {
+          "color": "#ffffff",
+          "fontSize": 28,
+        },
+        Object {},
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;

package/src/components/FAB/__tests__/__snapshots__/StyledFABContainer.spec.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledFABContainer renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#292a2b",
+      "borderBottomLeftRadius": 999,
+      "borderBottomRightRadius": 999,
+      "borderTopLeftRadius": 999,
+      "borderTopRightRadius": 999,
+      "height": 64,
+      "justifyContent": "center",
+      "overflow": "hidden",
+      "width": 64,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "#292a2b",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      }
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+     button 
+  </Text>
+</View>
+`;

package/src/components/FAB/__tests__/__snapshots__/StyledFABIcon.spec.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledFABIcon renders correctly 1`] = `
+<HeroIcon
+  name="add"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Object {
+        "color": "#ffffff",
+        "fontSize": 28,
+      },
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;

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

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FAB when animated is false renders styledFABIcon 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#292a2b",
+        "borderBottomLeftRadius": 999,
+        "borderBottomRightRadius": 999,
+        "borderTopLeftRadius": 999,
+        "borderTopRightRadius": 999,
+        "height": 64,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 64,
+      },
+      Object {
+        "backgroundColor": "#292a2b",
+      },
+    ]
+  }
+>
+  <HeroIcon
+    name="add"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        Object {
+          "color": "#ffffff",
+          "fontSize": 28,
+        },
+      ]
+    }
+    testID="styledFABIcon"
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;
+
+exports[`FAB when animated is true renders animatedFABIcon 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#292a2b",
+        "borderBottomLeftRadius": 999,
+        "borderBottomRightRadius": 999,
+        "borderTopLeftRadius": 999,
+        "borderTopRightRadius": 999,
+        "height": 64,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 64,
+      },
+      Object {
+        "backgroundColor": "#292a2b",
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "rotate": "0deg",
+          },
+        ],
+      }
+    }
+  >
+    <HeroIcon
+      name="add"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 24,
+          },
+          Object {
+            "color": "#ffffff",
+            "fontSize": 28,
+          },
+          Object {},
+        ]
+      }
+      testID="animatedFABIcon"
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;

package/src/components/FAB/__tests__/index.spec.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import FAB from '..';
+
+describe('FAB', () => {
+  describe('when animated is true', () => {
+    it('renders animatedFABIcon', () => {
+      const { queryAllByTestId, toJSON } = render(
+        <ThemeProvider theme={theme}>
+          <FAB
+            icon="add"
+            animated
+            style={{ backgroundColor: theme.colors.backgroundDark }}
+          />
+        </ThemeProvider>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('animatedFABIcon')).toHaveLength(1);
+    });
+  });
+
+  describe('when animated is false', () => {
+    it('renders styledFABIcon', () => {
+      const { queryAllByTestId, toJSON } = render(
+        <ThemeProvider theme={theme}>
+          <FAB
+            icon="add"
+            style={{ backgroundColor: theme.colors.backgroundDark }}
+          />
+        </ThemeProvider>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('styledFABIcon')).toHaveLength(1);
+    });
+  });
+
+  describe('when onPress', () => {
+    it('triggers onPress', () => {
+      const onPressSpy = jest.fn();
+      const { getByTestId } = render(
+        <ThemeProvider theme={theme}>
+          <FAB
+            onPress={onPressSpy}
+            icon="add"
+            style={{ backgroundColor: theme.colors.backgroundDark }}
+            testID="FAB"
+          />
+        </ThemeProvider>
+      );
+
+      fireEvent(getByTestId('FAB'), 'press');
+      expect(onPressSpy).toBeCalledTimes(1);
+    });
+  });
+});

package/src/components/FAB/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+import { AnimatedFABIcon } from './AnimatedFABIcon';
+import { StyledFABContainer } from './StyledFABContainer';
+import { StyledFABIcon } from './StyledFABIcon';
+
+interface FABProps {
+  /**
+   * Name of the Icon.
+   */
+  icon: IconProps['icon'];
+
+  /**
+   * This function is called on pressing the button.
+   * */
+  onPress?: () => void;
+
+  /**
+   * Specify if the button is animated.
+   */
+  animated?: boolean;
+
+  /**
+   * Specify if the button is in active state. It only works if animated is true.
+   */
+  active?: boolean;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const FAB = ({ onPress, icon, animated, testID, active, style }: FABProps) => (
+  <StyledFABContainer
+    testID={testID}
+    onPress={() => {
+      onPress?.();
+    }}
+    activeOpacity={0.6}
+    style={style}
+  >
+    {animated ? (
+      <AnimatedFABIcon active={active} icon={icon} testID="animatedFABIcon" />
+    ) : (
+      <StyledFABIcon icon={icon} testID="styledFABIcon" />
+    )}
+  </StyledFABContainer>
+);
+
+export default FAB;

package/src/components/Icon/index.tsx

@@ -1,27 +1,27 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 
 type IconName = typeof IconList[number];
 
-interface IconProps {
+export interface IconProps {
   /**
-   * Name of the `Icon`.
+   * Name of the Icon.
    */
   icon: IconName;
   /**
-   * Addditional style to be applied for `Icon`.
+   * Intent of the Icon.
    */
-  style?: StyleProp<ViewStyle>;
+  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
   /**
-   * Size of the `Icon`.
+   * Size of the Icon.
    */
   size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
-   * Intent of the `Icon`.
+   * Addditional style.
    */
-  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  style?: StyleProp<TextStyle>;
   /**
    * Testing id of the component.
    */

package/src/components/Typography/Text/index.tsx

@@ -1,5 +1,9 @@
 import React, { ReactNode } from 'react';
-import { TextProps as NativeTextProps } from 'react-native';
+import {
+  TextProps as NativeTextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
 import { StyledText } from './StyledText';
 
 interface TextProps extends NativeTextProps {
@@ -19,6 +23,14 @@ interface TextProps extends NativeTextProps {
    * Visual intent color to apply to the text.
    */
   intent?: 'body' | 'subdued';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
 }
 
 const Text = ({

package/src/index.ts

@@ -1,20 +1,24 @@
 import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
+import { scale } from './utils/scale';
 
 import Badge from './components/Badge';
 import Card from './components/Card';
 import Divider from './components/Divider';
 import Icon from './components/Icon';
 import Typography from './components/Typography';
+import FAB from './components/FAB';
 
 export {
   theme,
   getTheme,
   useTheme,
+  scale,
   ThemeProvider,
   Badge,
   Card,
   Divider,
   Icon,
   Typography,
+  FAB,
 };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -32,14 +32,14 @@ Object {
     },
     "card": Object {
       "padding": Object {
-        "default": "16px",
+        "default": "8px",
       },
       "radii": Object {
         "default": "12px",
       },
     },
     "divider": Object {
-      "borderWiths": Object {
+      "borderWidths": Object {
         "default": "1px",
       },
       "colors": Object {
@@ -53,6 +53,19 @@ Object {
         "xsmall": "4px",
       },
     },
+    "fab": Object {
+      "colors": Object {
+        "buttonBackground": "#292a2b",
+        "icon": "#ffffff",
+      },
+      "fontSizes": Object {
+        "default": "28px",
+      },
+      "sizes": Object {
+        "height": "64px",
+        "width": "64px",
+      },
+    },
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",

package/src/theme/components/card.ts

@@ -6,7 +6,7 @@ const getCardTheme = (theme: GlobalTheme) => {
   };
 
   const padding = {
-    default: `${theme.space.medium}px`,
+    default: `${theme.space.small}px`,
   };
 
   return { radii, padding };

package/src/theme/components/divider.ts

@@ -13,11 +13,11 @@ const getDividerTheme = (theme: GlobalTheme) => {
     xlarge: `${theme.space.xlarge}px`,
   };
 
-  const borderWiths = {
+  const borderWidths = {
     default: `${theme.borderWidths.base}px`,
   };
 
-  return { colors, space, borderWiths };
+  return { colors, space, borderWidths };
 };
 
 export default getDividerTheme;

package/src/theme/components/fab.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+
+const getFABTheme = (theme: GlobalTheme) => {
+  const colors = {
+    buttonBackground: theme.colors.backgroundDark,
+    icon: theme.colors.invertedText,
+  };
+
+  const sizes = {
+    width: '64px',
+    height: '64px',
+  };
+
+  const fontSizes = {
+    default: `${theme.fontSizes.xxxxlarge}px`,
+  };
+
+  return { fontSizes, colors, sizes };
+};
+
+export default getFABTheme;

package/src/theme/global/space.ts

@@ -1,15 +1,17 @@
+import { scale } from '../../utils/scale';
+
 const BASE = 8;
 
 const space = {
-  xxsmall: BASE * 0.25,
-  xsmall: BASE * 0.5,
-  small: BASE,
-  medium: BASE * 2,
-  large: BASE * 3,
-  xlarge: BASE * 4,
-  xxlarge: BASE * 5,
-  xxxlarge: BASE * 6,
-  xxxxlarge: BASE * 7,
+  xxsmall: scale(BASE * 0.25),
+  xsmall: scale(BASE * 0.5),
+  small: scale(BASE),
+  medium: scale(BASE * 2),
+  large: scale(BASE * 3),
+  xlarge: scale(BASE * 4),
+  xxlarge: scale(BASE * 5),
+  xxxlarge: scale(BASE * 6),
+  xxxxlarge: scale(BASE * 7),
 };
 
 export { space };

package/src/theme/global/typography.ts

@@ -1,15 +1,17 @@
+import { scale } from '../../utils/scale';
+
 const BASE = 16;
 
 const fontSizes = {
-  xxxxxlarge: BASE * 2, // 32
-  xxxxlarge: BASE * 1.75, // 28
-  xxxlarge: BASE * 1.5, // 24
-  xxlarge: BASE * 1.25, // 20
-  xlarge: BASE * 1.125, // 18
-  large: BASE, // 16
-  medium: BASE * 0.875, // 14
-  small: BASE * 0.75, // 12
-  xsmall: BASE * 0.625, // 10
+  xxxxxlarge: scale(BASE * 2), //      32
+  xxxxlarge: scale(BASE * 1.75), //    28
+  xxxlarge: scale(BASE * 1.5), //      24
+  xxlarge: scale(BASE * 1.25), //      20
+  xlarge: scale(BASE * 1.125), //      18
+  large: scale(BASE), //               16
+  medium: scale(BASE * 0.875), //      14
+  small: scale(BASE * 0.75), //        12
+  xsmall: scale(BASE * 0.625), //      10
 };
 
 const fontWeights = {

package/src/theme/index.ts

@@ -5,6 +5,7 @@ import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
 import getIconTheme from './components/icon';
 import getTypographyTheme from './components/typography';
+import getFABTheme from './components/fab';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -13,6 +14,7 @@ type Theme = GlobalTheme & {
     divider: ReturnType<typeof getDividerTheme>;
     icon: ReturnType<typeof getIconTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
+    fab: ReturnType<typeof getFABTheme>;
   };
 };
 
@@ -24,6 +26,7 @@ const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
     divider: getDividerTheme(theme),
     icon: getIconTheme(theme),
     typography: getTypographyTheme(theme),
+    fab: getFABTheme(theme),
   },
 });
 

package/src/utils/__tests__/scale.spec.ts

@@ -0,0 +1,26 @@
+import { Dimensions } from 'react-native';
+import { scale, BASE_WIDTH } from '../scale';
+
+jest.unmock('../scale'); // Unmock global mocking of scale for other tests
+
+describe('scale', () => {
+  it('returns scale based on width when width < height', () => {
+    jest
+      .spyOn(Dimensions, 'get')
+      .mockReturnValue({ width: 400, height: 500, scale: 1, fontScale: 1 });
+
+    const size = 10;
+
+    expect(scale(size)).toBe((400 / BASE_WIDTH) * size);
+  });
+
+  it('returns scale based on height when width > height', () => {
+    jest
+      .spyOn(Dimensions, 'get')
+      .mockReturnValue({ width: 700, height: 350, scale: 1, fontScale: 1 });
+
+    const size = 10;
+
+    expect(scale(size)).toBe((350 / BASE_WIDTH) * size);
+  });
+});

package/src/utils/scale.ts

@@ -0,0 +1,10 @@
+import { Dimensions } from 'react-native';
+
+export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
+
+export const scale = (size: number) => {
+  const { width, height } = Dimensions.get('window');
+  const shortDimension = width < height ? width : height;
+
+  return (shortDimension / BASE_WIDTH) * size;
+};

package/testUtils/setup.ts

@@ -1,3 +1,7 @@
 jest.mock('react-native-vector-icons', () => ({
   createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
 }));
+
+jest.mock('../src/utils/scale', () => ({
+  scale: jest.fn(size => size),
+}));

package/types/components/Card/StyledCard.d.ts

@@ -0,0 +1,3 @@
+import { View } from 'react-native';
+declare const StyledCard: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+export { StyledCard };