@hero-design/rn 7.7.0 → 7.8.0

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -0,0 +1,355 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolbarItems renders correctly when disabled 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      Array [
+        Object {
+          "color": "#8b8d92",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-item-icon-home"
+    themeIntent="disabled-text"
+    themeSize="medium"
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#8b8d92",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
+    themeIntent="subdued"
+  >
+    Action
+  </Text>
+</View>
+`;
+
+exports[`ToolbarItems renders correctly when intent is danger 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-item-icon-home"
+    themeIntent="danger"
+    themeSize="medium"
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
+    themeIntent="danger"
+  >
+    Action
+  </Text>
+</View>
+`;
+
+exports[`ToolbarItems renders correctly when intent is info 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      Array [
+        Object {
+          "color": "#4568fb",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-item-icon-home"
+    themeIntent="info"
+    themeSize="medium"
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#4568fb",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
+    themeIntent="info"
+  >
+    Action
+  </Text>
+</View>
+`;
+
+exports[`ToolbarItems renders correctly when intent is primary 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      Array [
+        Object {
+          "color": "#7622d7",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-item-icon-home"
+    themeIntent="primary"
+    themeSize="medium"
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#7622d7",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
+    themeIntent="primary"
+  >
+    Action
+  </Text>
+</View>
+`;
+
+exports[`ToolbarItems renders correctly when intent is success 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      Array [
+        Object {
+          "color": "#01b39c",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-item-icon-home"
+    themeIntent="success"
+    themeSize="medium"
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#01b39c",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
+    themeIntent="success"
+  >
+    Action
+  </Text>
+</View>
+`;
+
+exports[`ToolbarItems renders correctly when intent is warning 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "opacity": 1,
+      "paddingHorizontal": 12,
+      "paddingVertical": 8,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      Array [
+        Object {
+          "color": "#ffa234",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-item-icon-home"
+    themeIntent="warning"
+    themeSize="medium"
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#ffa234",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
+    themeIntent="warning"
+  >
+    Action
+  </Text>
+</View>
+`;

package/src/components/Toolbar/index.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { ToolbarWrapper } from './StyledToolbar';
+import ToolbarGroup from './ToolbarGroup';
+
+export interface ToolbarProps {
+  /**
+   * Toolbar's content.
+   */
+  children?: ReactNode;
+}
+
+const Toolbar = ({ children }: ToolbarProps) => (
+  <ToolbarWrapper>{children}</ToolbarWrapper>
+);
+
+export default Object.assign(Toolbar, {
+  Group: ToolbarGroup,
+});

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

@@ -10,7 +10,14 @@ const FONTWEIGHT_MAP = {
 const StyledText = styled(Text)<{
   themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
-  themeIntent: 'body' | 'subdued' | 'primary';
+  themeIntent:
+    | 'body'
+    | 'subdued'
+    | 'primary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger';
 }>(({ themeFontSize, themeFontWeight, themeIntent, theme }) => {
   const sizeStyles = {
     fontSize: theme.__hd__.typography.fontSizes[themeFontSize],

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

@@ -46,6 +46,11 @@ describe('StyledText', () => {
     intent
     ${'body'}
     ${'subdued'}
+    ${'primary'}
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <StyledText

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -22,6 +22,50 @@ exports[`StyledText has body intent style 1`] = `
 </Text>
 `;
 
+exports[`StyledText has danger intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#de350b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="danger"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has info intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#4568fb",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="info"
+>
+  This is a test
+</Text>
+`;
+
 exports[`StyledText has large fontSize style 1`] = `
 <Text
   style={
@@ -88,6 +132,28 @@ exports[`StyledText has medium fontSize style 1`] = `
 </Text>
 `;
 
+exports[`StyledText has primary intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#7622d7",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="primary"
+>
+  This is a test
+</Text>
+`;
+
 exports[`StyledText has regular fontWeight style 1`] = `
 <Text
   style={
@@ -176,6 +242,50 @@ exports[`StyledText has subdued intent style 1`] = `
 </Text>
 `;
 
+exports[`StyledText has success intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#01b39c",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="success"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has warning intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#ffa234",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="warning"
+>
+  This is a test
+</Text>
+`;
+
 exports[`StyledText has xlarge fontSize style 1`] = `
 <Text
   style={

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

@@ -22,9 +22,16 @@ export interface TextProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?: 'body' | 'subdued' | 'primary';
+  intent?:
+    | 'body'
+    | 'subdued'
+    | 'primary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<TextStyle>;
   /**

package/src/index.ts

@@ -15,6 +15,7 @@ import Divider from './components/Divider';
 import Drawer from './components/Drawer';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import List from './components/List';
 import Progress from './components/Progress';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
@@ -25,6 +26,7 @@ import Tabs from './components/Tabs';
 import Tag from './components/Tag';
 import TextInput from './components/TextInput';
 import Toast from './components/Toast';
+import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 
 export {
@@ -47,6 +49,7 @@ export {
   Drawer,
   FAB,
   Icon,
+  List,
   Progress,
   Spinner,
   Radio,
@@ -57,6 +60,7 @@ export {
   Tag,
   TextInput,
   Toast,
+  Toolbar,
   Typography,
 };