Component/4518 button tertiary (#4525)

* [WIP] Push up icon changes

* Introduce assets

* Create script to generate Icon types based on icons in assets directory

* Change Icon component to use SVGs. Create script to auto generate SVG types. Use an svg transformer to allow for importing SVGs as components

* Update ignores on Icon.assets

* Update generate-assets script to add ignores

* Remove icon test - SVG mock issue. Update Icon docs with color prop

* Fix useStyles for other components

* Create BaseButton component

* Update Icon README

* Clean up BaseButton

* Create ButtomPrimary

* Add more stories to BaseButton

* Finalize ButtonPrimary

* Simplify ButtonPrimary types

* Clean up BaseButton

* Create secondary button

* Update test

* Update ButtonPrimary

* Create snapshot

* Create tertiary button

* Add variant

* Add vvariant

* Add variants

* Update test

* Update BaseButton type to extend TouchableOpacity

* Add pressed color

* Add pressed state

* Clean up types

* Update test

* Add pressed state

app/component-library/components/ButtonTertiary/ButtonTertiary.stories.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { select, text } from '@storybook/addon-knobs';
+import { IconName } from '../Icon';
+import { BaseButtonSize } from '../BaseButton';
+import ButtonTertiary from './ButtonTertiary';
+import { ButtonTertiaryVariant } from './ButtonTertiary.types';
+
+storiesOf('Component Library / ButtonTertiary', module)
+  .addDecorator((getStory) => getStory())
+  .add('Default', () => {
+    const groupId = 'Props';
+    const sizeSelector = select(
+      'size',
+      BaseButtonSize,
+      BaseButtonSize.Md,
+      groupId,
+    );
+    const iconSelector = select(
+      'icon',
+      IconName,
+      IconName.AddSquareFilled,
+      groupId,
+    );
+    const labelSelector = text('label', 'Click Me!', groupId);
+
+    return (
+      <ButtonTertiary
+        icon={iconSelector}
+        size={sizeSelector}
+        label={labelSelector}
+        onPress={() => console.log("I'm clicked!")}
+        variant={ButtonTertiaryVariant.Normal}
+      />
+    );
+  })
+  .add('Without icon', () => (
+    <ButtonTertiary
+      size={BaseButtonSize.Md}
+      label={'Click Me!'}
+      onPress={() => console.log("I'm clicked!")}
+      variant={ButtonTertiaryVariant.Normal}
+    />
+  ))
+  .add('Danger variant', () => (
+    <ButtonTertiary
+      size={BaseButtonSize.Md}
+      label={'Click Me!'}
+      onPress={() => console.log("I'm clicked!")}
+      variant={ButtonTertiaryVariant.Danger}
+    />
+  ));

app/component-library/components/ButtonTertiary/ButtonTertiary.styles.ts

@@ -0,0 +1,30 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import {
+  ButtonTertiaryStyleSheet,
+  ButtonTertiaryStyleSheetVars,
+} from './ButtonTertiary.types';
+
+/**
+ * Style sheet function for ButtonPrimary component.
+ *
+ * @param params Style sheet params.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: {
+  vars: ButtonTertiaryStyleSheetVars;
+}): ButtonTertiaryStyleSheet => {
+  const { vars } = params;
+  const { style } = vars;
+
+  return StyleSheet.create({
+    base: Object.assign(
+      {
+        backgroundColor: 'transparent',
+      } as ViewStyle,
+      style,
+    ) as ViewStyle,
+  });
+};
+
+export default styleSheet;

app/component-library/components/ButtonTertiary/ButtonTertiary.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { IconName } from '../Icon';
+import { BaseButtonSize } from '../BaseButton';
+import ButtonTertiary from './ButtonTertiary';
+import { ButtonTertiaryVariant } from './ButtonTertiary.types';
+
+describe('ButtonTertiary', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(
+      <ButtonTertiary
+        icon={IconName.BankFilled}
+        size={BaseButtonSize.Md}
+        label={'Click me!'}
+        onPress={() => null}
+        variant={ButtonTertiaryVariant.Normal}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

app/component-library/components/ButtonTertiary/ButtonTertiary.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable react/prop-types */
+import React, { useCallback, useMemo, useState } from 'react';
+import { GestureResponderEvent } from 'react-native';
+import { useStyles } from '../../hooks';
+import BaseButton from '../BaseButton';
+import styleSheet from './ButtonTertiary.styles';
+import {
+  ButtonTertiaryProps,
+  ButtonTertiaryVariant,
+} from './ButtonTertiary.types';
+
+const ButtonTertiary = ({
+  style,
+  onPressIn,
+  onPressOut,
+  variant,
+  ...props
+}: ButtonTertiaryProps): JSX.Element => {
+  const [pressed, setPressed] = useState(false);
+  const { styles, theme } = useStyles(styleSheet, { style, variant });
+  const labelColor = useMemo(() => {
+    let color: string;
+    switch (variant) {
+      case ButtonTertiaryVariant.Normal:
+        color = pressed
+          ? theme.colors.primary.alternative
+          : theme.colors.primary.default;
+        break;
+      case ButtonTertiaryVariant.Danger:
+        color = pressed
+          ? theme.colors.error.alternative
+          : theme.colors.error.default;
+        break;
+    }
+    return color;
+  }, [theme, variant, pressed]);
+
+  const triggerOnPressedIn = useCallback(
+    (e: GestureResponderEvent) => {
+      setPressed(true);
+      onPressIn?.(e);
+    },
+    [setPressed, onPressIn],
+  );
+
+  const triggerOnPressedOut = useCallback(
+    (e: GestureResponderEvent) => {
+      setPressed(false);
+      onPressOut?.(e);
+    },
+    [setPressed, onPressOut],
+  );
+
+  return (
+    <BaseButton
+      style={styles.base}
+      labelColor={labelColor}
+      onPressIn={triggerOnPressedIn}
+      onPressOut={triggerOnPressedOut}
+      {...props}
+    />
+  );
+};
+
+export default ButtonTertiary;

app/component-library/components/ButtonTertiary/ButtonTertiary.types.ts

@@ -0,0 +1,33 @@
+import { ViewStyle } from 'react-native';
+import { BaseButtonProps } from '../BaseButton';
+
+/**
+ * Enum used to select between variants.
+ */
+export enum ButtonTertiaryVariant {
+  Normal = 'Normal',
+  Danger = 'Danger',
+}
+
+/**
+ * ButtonTertiary component props.
+ */
+export interface ButtonTertiaryProps
+  extends Omit<BaseButtonProps, 'labelColor'> {
+  variant: ButtonTertiaryVariant;
+}
+
+/**
+ * ButtonTertiary component style sheet.
+ */
+export interface ButtonTertiaryStyleSheet {
+  base: ViewStyle;
+}
+
+/**
+ * Style sheet input parameters.
+ */
+export type ButtonTertiaryStyleSheetVars = Pick<
+  ButtonTertiaryProps,
+  'style' | 'variant'
+>;

app/component-library/components/ButtonTertiary/README.md

@@ -0,0 +1,47 @@
+# ButtonTertiary
+
+ButtonTertiary is used for secondary call to actions.
+
+## Props
+
+This component extends `ViewProps` from React Native's [View Component](https://reactnative.dev/docs/view).
+
+### `label`
+
+Button text.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | Yes                                                     |
+
+### `size`
+
+Enum to select between size variants.
+
+| <span style="color:gray;font-size:14px">TYPE</span>    | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :----------------------------------------------------- | :------------------------------------------------------ |
+| [BaseButtonSize](../BaseButton/BaseButton.types.ts#L4) | Yes                                                     |
+
+### `onPress`
+
+Function to trigger when pressing the button.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| Function                                            | Yes                                                     |
+
+### `iconName`
+
+Icon to use.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| [IconName](../Icon/Icon.types.ts#53)                | False                                                   |
+
+### `variant`
+
+Enum used to select between variants.
+
+| <span style="color:gray;font-size:14px">TYPE</span>   | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :---------------------------------------------------- | :------------------------------------------------------ |
+| [ButtonTertiaryVariant](./ButtonTertiary.types.ts#L7) | Yes                                                     |

app/component-library/components/ButtonTertiary/__snapshots__/ButtonTertiary.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonTertiary should render correctly 1`] = `
+<BaseButton
+  icon="BankFilled"
+  label="Click me!"
+  labelColor="#037DD6"
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="40"
+  style={
+    Object {
+      "backgroundColor": "transparent",
+    }
+  }
+/>
+`;

app/component-library/components/ButtonTertiary/index.ts

@@ -0,0 +1 @@
+export { default } from './ButtonTertiary';

storybook/storyLoader.js

@@ -16,6 +16,7 @@ function loadStories() {
   require('../app/component-library/components/BaseButton/BaseButton.stories');
   require('../app/component-library/components/ButtonPrimary/ButtonPrimary.stories');
   require('../app/component-library/components/ButtonSecondary/ButtonSecondary.stories');
+  require('../app/component-library/components/ButtonTertiary/ButtonTertiary.stories');
   require('../app/component-library/components/BaseText/BaseText.stories');
   require('../app/component-library/components/Icon/Icon.stories');
   require('../app/component-library/components/Link/Link.stories');
@@ -36,6 +37,7 @@ const stories = [
   '../app/component-library/components/BaseButton/BaseButton.stories',
   '../app/component-library/components/ButtonPrimary/ButtonPrimary.stories',
   '../app/component-library/components/ButtonSecondary/ButtonSecondary.stories',
+  '../app/component-library/components/ButtonTertiary/ButtonTertiary.stories',
   '../app/component-library/components/BaseText/BaseText.stories',
   '../app/component-library/components/Icon/Icon.stories',
   '../app/component-library/components/Link/Link.stories',