@hero-design/rn 7.0.6 → 7.1.2

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import { AnimatedFABIcon } from '../AnimatedFABIcon';
+
+describe('AnimatedFABIcon', () => {
+  it.each`
+    active
+    ${true}
+    ${false}
+  `('renders correctly when isActive is $active', ({ active }) => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <AnimatedFABIcon active={active} icon="add" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme, Typography } from '../../../index';
+import { StyledFABContainer } from '../StyledFABContainer';
+
+describe('StyledFABContainer', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <StyledFABContainer>
+          <Typography.Text> button </Typography.Text>
+        </StyledFABContainer>
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import { StyledFABIcon } from '../StyledFABIcon';
+
+describe('StyledFABIcon', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <StyledFABIcon icon="add" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

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

package/src/components/Icon/utils.ts

@@ -0,0 +1,6 @@
+import IconList from './IconList';
+
+const isHeroIcon = (x: any): x is typeof IconList[number] =>
+  IconList.includes(x);
+
+export { isHeroIcon };

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

@@ -4,7 +4,7 @@ import styled, { css } from '../../../styled-components';
 const StyledText = styled(Text)<{
   themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
-  themeIntent: 'body' | 'subdued';
+  themeIntent: 'body' | 'subdued' | 'primary';
 }>`
   ${({ themeFontSize, theme }) => {
     switch (themeFontSize) {
@@ -62,6 +62,10 @@ const StyledText = styled(Text)<{
         return css`
           color: ${theme.__hd__.typography.colors.subdued};
         `;
+      case 'primary':
+        return css`
+          color: ${theme.__hd__.typography.colors.primary};
+        `;
     }
   }}
 `;

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

@@ -22,7 +22,7 @@ interface TextProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?: 'body' | 'subdued';
+  intent?: 'body' | 'subdued' | 'primary';
   /**
    * Addditional style.
    */

package/src/index.ts

@@ -1,20 +1,26 @@
 import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
+import { scale } from './utils/scale';
 
 import Badge from './components/Badge';
+import BottomNavigation from './components/BottomNavigation';
 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,
+  BottomNavigation,
   Card,
   Divider,
   Icon,
   Typography,
+  FAB,
 };

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

@@ -30,9 +30,24 @@ Object {
         "default": "4px",
       },
     },
+    "bottomNavigation": Object {
+      "colors": Object {
+        "background": "#ffffff",
+        "shadow": "#292a2b",
+      },
+      "shadows": Object {
+        "elevation": 10,
+        "offset": "0px 3px",
+        "opacity": 0.27,
+        "radius": "4.65px",
+      },
+      "sizes": Object {
+        "height": 72,
+      },
+    },
     "card": Object {
       "padding": Object {
-        "default": "16px",
+        "default": "8px",
       },
       "radii": Object {
         "default": "12px",
@@ -53,6 +68,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",
@@ -73,6 +101,7 @@ Object {
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
+        "primary": "#7622d7",
         "subdued": "#8b8d92",
       },
       "fontSizes": Object {

package/src/theme/components/bottomNavigation.ts

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+
+const getBottomNavigationTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+  };
+
+  const sizes = {
+    height: 72,
+  };
+
+  const shadows = {
+    offset: `0px 3px`,
+    opacity: 0.27,
+    radius: `4.65px`,
+    elevation: 10,
+  };
+
+  return { colors, shadows, sizes };
+};
+
+export default getBottomNavigationTheme;

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/components/typography.ts

@@ -4,6 +4,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   const colors = {
     body: theme.colors.text,
     subdued: theme.colors.disabledText,
+    primary: theme.colors.primary,
   };
 
   const fontSizes = {

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 = {