@tactics/toddle-styleguide 5.0.4 → 5.0.5

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

@@ -0,0 +1,557 @@
+// 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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <ActivityIndicator
+    color="#FFFFFF"
+  />
+</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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        [
+          {
+            "fontFamily": "MontserratBold",
+            "fontSize": 14,
+            "lineHeight": 22.4,
+          },
+        ],
+        {
+          "color": "#FFFFFF",
+          "textAlign": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    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
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  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,
+      },
+      false,
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <ActivityIndicator
+    color="#FFFFFF"
+  />
+</View>
+`;

package/src/components/molecules/quick-filter/quick-filter.component.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { State } from '../../../types/state.enum';
+type QuickFilterProps = {
+    id: string;
+    isLoading: boolean;
+    amount: number;
+    isSelected?: boolean;
+    onSelect: (id: string) => void;
+    visualState: State;
+};
+declare const QuickFilter: ({ id, isLoading, amount, isSelected, onSelect, visualState, }: QuickFilterProps) => React.JSX.Element;
+export { QuickFilter as QuickFilter };

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {ActivityIndicator, Pressable} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './quick-filter.styles';
+import {Paragraph} from '../../atoms/paragraph-components';
+import {StateTextColorHandler} from '../../../utilities/color-handler/color-handler';
+import {State} from '../../../types/state.enum';
+
+type QuickFilterProps = {
+  id: string;
+  isLoading: boolean;
+  amount: number;
+  isSelected?: boolean;
+  onSelect: (id: string) => void;
+  visualState: State;
+};
+
+const QuickFilter = ({
+  id,
+  isLoading,
+  amount,
+  isSelected,
+  onSelect,
+  visualState,
+}: QuickFilterProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, visualState, isSelected);
+
+  return (
+    <Pressable onPress={() => onSelect(id)} style={styles.container}>
+      {isLoading ? (
+        <ActivityIndicator
+          color={StateTextColorHandler(visualState, isSelected, isLoading)}
+        />
+      ) : (
+        <Paragraph
+          bold={true}
+          textAlign={'center'}
+          textColor={StateTextColorHandler(visualState, isSelected)}
+        >
+          {amount}
+        </Paragraph>
+      )}
+    </Pressable>
+  );
+};
+
+export {QuickFilter as QuickFilter};

package/src/components/molecules/quick-filter/quick-filter.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const QuickFilterPreview: ({}: {}) => React.JSX.Element;

package/src/components/molecules/quick-filter/quick-filter.preview.tsx

@@ -0,0 +1,57 @@
+import React, {useState} from 'react';
+import {QuickFilter} from './quick-filter.component';
+import {View} from 'react-native';
+import {State} from '../../../types/state.enum';
+
+export const QuickFilterPreview = ({}: {}) => {
+  const [defaultFilterIsSelected, setDefaultFilterIsSelected] = useState(false);
+  const [successFilterIsSelected, setSuccessFilterIsSelected] = useState(false);
+  const [errorFilterIsSelected, setErrorFilterIsSelected] = useState(false);
+  const [warningFilterIsSelected, setWarningFilterIsSelected] = useState(false);
+  const [absentFilterIsSelected, setAbsentFilterIsSelected] = useState(false);
+
+  return (
+    <View>
+      <QuickFilter
+        id={'1'}
+        isLoading={false}
+        amount={6}
+        onSelect={() => setDefaultFilterIsSelected((current) => !current)}
+        visualState={State.UNPLANNED}
+        isSelected={defaultFilterIsSelected}
+      />
+      <QuickFilter
+        id={'22'}
+        isLoading={false}
+        amount={60}
+        onSelect={() => setSuccessFilterIsSelected((current) => !current)}
+        visualState={State.IN}
+        isSelected={successFilterIsSelected}
+      />
+      <QuickFilter
+        id={'3'}
+        isLoading={false}
+        amount={3}
+        onSelect={() => setErrorFilterIsSelected((current) => !current)}
+        visualState={State.OUT}
+        isSelected={errorFilterIsSelected}
+      />
+      <QuickFilter
+        id={'4'}
+        isLoading={false}
+        amount={44}
+        onSelect={() => setWarningFilterIsSelected((current) => !current)}
+        visualState={State.EXPECTED}
+        isSelected={warningFilterIsSelected}
+      />
+      <QuickFilter
+        id={'5'}
+        isLoading={false}
+        amount={5}
+        onSelect={() => setAbsentFilterIsSelected((current) => !current)}
+        visualState={State.ABSENT}
+        isSelected={absentFilterIsSelected}
+      />
+    </View>
+  );
+};

package/src/components/molecules/quick-filter/quick-filter.styles.d.ts

@@ -0,0 +1,35 @@
+export function Stylesheet(
+  context: any,
+  visualState: any,
+  isSelected: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            alignItems: string;
+            justifyContent: string;
+            borderRadius: number;
+            borderStyle: string;
+            borderWidth: number;
+            overflow: string;
+            width: number;
+            height: number;
+            backgroundColor?: undefined;
+            borderColor?: undefined;
+          }
+        | {
+            backgroundColor: any;
+            borderColor: any;
+            alignItems?: undefined;
+            justifyContent?: undefined;
+            borderRadius?: undefined;
+            borderStyle?: undefined;
+            borderWidth?: undefined;
+            overflow?: undefined;
+            width?: undefined;
+            height?: undefined;
+          }
+      )[];
+    }>;
+import {StyleSheet} from 'react-native';