@hero-design/rn 7.0.6 → 7.1.0

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

@@ -5,7 +5,7 @@ import HeroIcon from './HeroIcon';
 
 type IconName = typeof IconList[number];
 
-interface IconProps {
+export interface IconProps {
   /**
    * Name of the Icon.
    */

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,7 +32,7 @@ Object {
     },
     "card": Object {
       "padding": Object {
-        "default": "16px",
+        "default": "8px",
       },
       "radii": Object {
         "default": "12px",
@@ -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/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/playground/components/FAB.d.ts

@@ -0,0 +1,2 @@
+declare const FABPlayground: () => JSX.Element;
+export default FABPlayground;

package/types/src/components/FAB/AnimatedFABIcon.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '../Icon';
+declare type Props = {
+    active?: boolean;
+} & IconProps;
+declare const AnimatedFABIcon: ({ active, ...iconProps }: Props) => JSX.Element;
+export { AnimatedFABIcon };

package/types/src/components/FAB/StyledFABContainer.d.ts

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

package/types/src/components/FAB/StyledFABIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../Icon';
+declare const StyledFABIcon: import("styled-components").StyledComponent<({ icon, style, size, intent, testID, }: IconProps) => JSX.Element, import("../../theme").Theme, IconProps, never>;
+export { StyledFABIcon };

package/types/src/components/FAB/__tests__/AnimatedFABIcon.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/components/FAB/__tests__/StyledFABContainer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/components/FAB/__tests__/StyledFABIcon.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/components/FAB/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/components/FAB/index.d.ts

@@ -0,0 +1,30 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+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;
+}
+declare const FAB: ({ onPress, icon, animated, testID, active, style }: FABProps) => JSX.Element;
+export default FAB;

package/types/src/components/Icon/index.d.ts

@@ -1,7 +1,7 @@
 import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 declare type IconName = typeof IconList[number];
-interface IconProps {
+export interface IconProps {
     /**
      * Name of the Icon.
      */

package/types/src/index.d.ts

@@ -1,8 +1,10 @@
 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';
-export { theme, getTheme, useTheme, ThemeProvider, Badge, Card, Divider, Icon, Typography, };
+import FAB from './components/FAB';
+export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, Card, Divider, Icon, Typography, FAB, };

package/types/src/theme/components/fab.d.ts

@@ -0,0 +1,15 @@
+import { GlobalTheme } from '../global';
+declare const getFABTheme: (theme: GlobalTheme) => {
+    fontSizes: {
+        default: string;
+    };
+    colors: {
+        buttonBackground: string;
+        icon: string;
+    };
+    sizes: {
+        width: string;
+        height: string;
+    };
+};
+export default getFABTheme;

package/types/src/theme/index.d.ts

@@ -4,6 +4,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';
 declare type Theme = GlobalTheme & {
     __hd__: {
         badge: ReturnType<typeof getBadgeTheme>;
@@ -11,6 +12,7 @@ declare type Theme = GlobalTheme & {
         divider: ReturnType<typeof getDividerTheme>;
         icon: ReturnType<typeof getIconTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
+        fab: ReturnType<typeof getFABTheme>;
     };
 };
 declare const getTheme: (theme?: GlobalTheme) => Theme;

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

@@ -0,0 +1 @@
+export {};

package/types/src/utils/scale.d.ts

@@ -0,0 +1,2 @@
+export declare const BASE_WIDTH = 390;
+export declare const scale: (size: number) => number;