@tactics/toddle-styleguide 0.0.1

package/src/components/atoms/pressable-icon/pressable-icon.styles.js

@@ -0,0 +1,25 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, disabled) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 50,
+      width: 50,
+      height: 50,
+      padding: Scale.s,
+    },
+    backgroundDefault: {
+      backgroundColor: disabled
+        ? context.colors.ui.lightgrey
+        : context.colors.main['9'],
+    },
+    backgroundInverted: {
+      backgroundColor: disabled
+        ? context.colors.ui.lightgrey
+        : context.colors.main['0'],
+    },
+  });

package/src/components/atoms/pressable-icon/pressable-icon.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {PressableIcon} from './pressable-icon.component';
+import {Icon} from '../../../icons';
+
+describe('pressable-icon test', () => {
+  it('render a default pressable icon', function () {
+    const tree = render
+      .create(<PressableIcon icon={<Icon.Outline.ThumbUp key="default" />} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a default disabled pressable icon', () => {
+    const tree = render
+      .create(
+        <PressableIcon
+          icon={<Icon.Outline.Mail key="disabled" />}
+          disabled={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an inverted pressable icon', () => {
+    const tree = render
+      .create(
+        <PressableIcon
+          icon={<Icon.Outline.Filter key="inverted" />}
+          inverted={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an inverted pressable icon that is disabled', () => {
+    const tree = render
+      .create(
+        <PressableIcon
+          icon={<Icon.Solid.Trash key="disabled inverted" />}
+          inverted={true}
+          disabled={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/quick-filter/__snapshots__/quick-filter.test.js.snap

@@ -0,0 +1,465 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test quick filter given the visual state is default AND isSelected is false ,return a white circle with a bleu border and a blue number 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;
+
+exports[`test quick filter given the visual state is default AND isSelected is true ,return a blue circle with a white number  1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#35469C",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;
+
+exports[`test quick filter given the visual state is error AND isSelected is false ,return a white circle with a red border and a red number 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;
+
+exports[`test quick filter given the visual state is error AND isSelected is true ,return a red circle with a white number  1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#35469C",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;
+
+exports[`test quick filter given the visual state is success AND isSelected is false ,return a white circle with a green border and a green number 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;
+
+exports[`test quick filter given the visual state is success AND isSelected is true ,return a green circle with a white number  1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#35469C",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;
+
+exports[`test quick filter given the visual state is warning AND isSelected is false ,return a white circle with an orange border and an orange number 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#19216C",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;
+
+exports[`test quick filter given the visual state is warning AND isSelected is true ,return an orange circle with a white number 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 50,
+        "borderStyle": "solid",
+        "borderWidth": 2,
+        "height": 48,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 48,
+      },
+      {
+        "backgroundColor": "#35469C",
+        "borderColor": "#19216C",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        false,
+        false,
+        false,
+      ]
+    }
+  >
+    3
+  </Text>
+</View>
+`;

package/src/components/atoms/quick-filter/quick-filter.component.tsx

@@ -0,0 +1,32 @@
+import React, {useContext} from 'react';
+import {Pressable, Text} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Stylesheet} from './quick-filter.styles';
+
+type QuickFilterProps = {
+  id: string;
+  amount: number;
+  isSelected?: boolean;
+  onSelect: (id: string) => void;
+  visualState: VisualState;
+};
+
+const QuickFilter = ({
+  id,
+  amount,
+  isSelected,
+  onSelect,
+  visualState,
+}: QuickFilterProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, visualState, isSelected);
+
+  return (
+    <Pressable onPress={() => onSelect(id)} style={styles.container}>
+      <Text style={styles.text}>{amount}</Text>
+    </Pressable>
+  );
+};
+
+export {QuickFilter as QuickFilter};

package/src/components/atoms/quick-filter/quick-filter.prevriew.tsx

@@ -0,0 +1,46 @@
+import React, {useState} from 'react';
+import {VisualState} from '../../../types/visual-state.enum';
+import {QuickFilter} from './quick-filter.component';
+import {View} from 'react-native';
+
+export const QuickFilterPreview = ({}: {}) => {
+  const [quickFilterIsSelected, setQuickFilterIsSelected] = useState(false);
+
+  const onClick = (id: string) => {
+    setQuickFilterIsSelected((current) => !current);
+    console.log('selected=', quickFilterIsSelected, 'id=', id);
+  };
+
+  return (
+    <View>
+      <QuickFilter
+        id={'1'}
+        amount={6}
+        onSelect={onClick}
+        visualState={VisualState.DEFAULT}
+        isSelected={quickFilterIsSelected}
+      />
+      <QuickFilter
+        id={'22'}
+        amount={60}
+        onSelect={onClick}
+        visualState={VisualState.SUCCESS}
+        isSelected={!quickFilterIsSelected}
+      />
+      <QuickFilter
+        id={'3'}
+        amount={3}
+        onSelect={onClick}
+        visualState={VisualState.ERROR}
+        isSelected={quickFilterIsSelected}
+      />
+      <QuickFilter
+        id={'4'}
+        amount={44}
+        onSelect={onClick}
+        visualState={VisualState.WARNING}
+        isSelected={!quickFilterIsSelected}
+      />
+    </View>
+  );
+};

package/src/components/atoms/quick-filter/quick-filter.styles.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Scale} from '../../../theme/scale';
+import {Font} from '../../../theme/font';
+
+export const Stylesheet = (context, visualState, isSelected) =>
+  StyleSheet.create({
+    container: [
+      {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 50,
+        borderStyle: 'solid',
+        borderWidth: 2,
+        overflow: 'hidden',
+        width: Scale.xxl,
+        height: Scale.xxl,
+      },
+      visualState === VisualState.DEFAULT && {
+        backgroundColor: isSelected
+          ? context.colors.main['2']
+          : context.colors.ui.white,
+        borderColor: context.colors.main['0'],
+      },
+      visualState === VisualState.WARNING && {
+        backgroundColor: isSelected
+          ? context.colors.ui.warning.default
+          : context.colors.ui.white,
+        borderColor: context.colors.ui.warning.dark,
+      },
+      visualState === VisualState.ERROR && {
+        backgroundColor: isSelected
+          ? context.colors.ui.error.default
+          : context.colors.ui.white,
+        borderColor: context.colors.ui.error.dark,
+      },
+      visualState === VisualState.SUCCESS && {
+        backgroundColor: isSelected
+          ? context.colors.ui.success.default
+          : context.colors.ui.white,
+        borderColor: context.colors.ui.success.dark,
+      },
+    ],
+    text: [
+      {
+        ...Font.regularBold,
+      },
+      visualState === VisualState.DEFAULT && {
+        color: isSelected ? context.colors.ui.white : context.colors.main['0'],
+      },
+      visualState === VisualState.WARNING && {
+        color: isSelected
+          ? context.colors.ui.white
+          : context.colors.ui.warning.dark,
+      },
+      visualState === VisualState.ERROR && {
+        color: isSelected
+          ? context.colors.ui.white
+          : context.colors.ui.error.dark,
+      },
+      visualState === VisualState.SUCCESS && {
+        color: isSelected
+          ? context.colors.ui.white
+          : context.colors.ui.success.dark,
+      },
+    ],
+  });