@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/molecules/pressable-icon/__snapshots__/pressable-icon.test.js.snap

@@ -0,0 +1,460 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pressable-icon test render a default disabled pressable icon 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "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]}
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#E5E8EB",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="24"
+      bbWidth="24"
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      vbHeight={19}
+      vbWidth={23}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M1.375 5L10.2519 10.9179C11.0077 11.4218 11.9923 11.4218 12.7481 10.9179L21.625 5M3.625 17.375H19.375C20.6176 17.375 21.625 16.3676 21.625 15.125V3.875C21.625 2.63236 20.6176 1.625 19.375 1.625H3.625C2.38236 1.625 1.375 2.63236 1.375 3.875V15.125C1.375 16.3676 2.38236 17.375 3.625 17.375Z"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4283522924,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`pressable-icon test render a default pressable icon 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]}
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#E0E8F9",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="24"
+      bbWidth="24"
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      vbHeight={23}
+      vbWidth={23}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M13.75 9.25H19.1094C20.782 9.25 21.8699 11.0102 21.1219 12.5062L17.1844 20.3812C16.8033 21.1435 16.0242 21.625 15.1719 21.625H10.652C10.468 21.625 10.2848 21.6024 10.1063 21.5578L5.875 20.5M13.75 9.25V3.625C13.75 2.38236 12.7426 1.375 11.5 1.375H11.3926C10.8306 1.375 10.375 1.83059 10.375 2.39259C10.375 3.19618 10.1371 3.9818 9.69138 4.65043L5.875 10.375V20.5M13.75 9.25H11.5M5.875 20.5H3.625C2.38236 20.5 1.375 19.4926 1.375 18.25V11.5C1.375 10.2574 2.38236 9.25 3.625 9.25H6.4375"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4279837036,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`pressable-icon test render an inverted pressable icon 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]}
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#19216C",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="24"
+      bbWidth="24"
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      vbHeight={22}
+      vbWidth={22}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M1.25 2.25C1.25 1.69772 1.69772 1.25 2.25 1.25H19.75C20.3023 1.25 20.75 1.69772 20.75 2.25V5.16912C20.75 5.43434 20.6446 5.68869 20.4571 5.87623L13.4596 12.8738C13.272 13.0613 13.1667 13.3157 13.1667 13.5809V16.4167L8.83333 20.75V13.5809C8.83333 13.3157 8.72798 13.0613 8.54044 12.8738L1.54289 5.87623C1.35536 5.68869 1.25 5.43434 1.25 5.16912V2.25Z"
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={
+            {
+              "payload": 4292929785,
+              "type": 0,
+            }
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+          strokeWidth="2"
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`pressable-icon test render an inverted pressable icon that is disabled 1`] = `
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "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]}
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#E5E8EB",
+        },
+        {
+          "alignItems": "center",
+          "borderRadius": 50,
+          "flexDirection": "row",
+          "height": 50,
+          "justifyContent": "center",
+          "padding": 12,
+          "width": 50,
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="24"
+      bbWidth="24"
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      vbHeight={18}
+      vbWidth={17}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          clipRule={0}
+          d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+          fill={
+            {
+              "payload": 4283522924,
+              "type": 0,
+            }
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

package/src/components/molecules/pressable-icon/pressable-icon.component.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type PressableIconProps = {
+    icon: React.ReactElement;
+    inverted?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+};
+export declare const PressableIcon: ({ icon, inverted, disabled, onPress, }: PressableIconProps) => React.JSX.Element;
+export {};

package/src/components/molecules/pressable-icon/pressable-icon.component.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {Pressable, View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './pressable-icon.styles';
+
+type PressableIconProps = {
+  icon: React.ReactElement;
+  inverted?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+};
+
+export const PressableIcon = ({
+  icon,
+  inverted,
+  disabled,
+  onPress,
+}: PressableIconProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, disabled);
+
+  const disabledIcon = React.Children.map(icon, (child) =>
+    React.cloneElement(child, {
+      ...icon.props,
+      color: context.colors.ui.darkgrey,
+    })
+  );
+
+  const invertedIcon = React.Children.map(icon, (child) =>
+    React.cloneElement(child, {
+      ...icon.props,
+      color: context.colors.main['9'],
+    })
+  );
+
+  return (
+    <Pressable onPress={onPress} disabled={disabled}>
+      <View
+        style={[
+          inverted ? styles.backgroundInverted : styles.backgroundDefault,
+          styles.container,
+        ]}
+      >
+        {[disabled ? disabledIcon : icon && inverted ? invertedIcon : icon]}
+      </View>
+    </Pressable>
+  );
+};

package/src/components/molecules/pressable-icon/pressable-icon.preview.d.ts

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

package/src/components/molecules/pressable-icon/pressable-icon.preview.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {PressableIcon} from './pressable-icon.component';
+import {Icon} from '../../../icons';
+const {View} = require('react-native');
+
+export const PressableIconPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <PressableIcon
+        icon={<Icon style={'regular'} name={'mail'} key={'random'} />}
+        onPress={() => console.log('Pressed')}
+      />
+      <PressableIcon
+        icon={<Icon style={'regular'} name={'phone'} key={'test'} />}
+        inverted={true}
+        disabled={true}
+        onPress={() => console.log('Pressed')}
+      />
+      <PressableIcon
+        icon={<Icon style={'solid'} name={'chat-alt'} key={'testen'} />}
+        inverted={true}
+        onPress={() => console.log('Pressed')}
+      />
+      <PressableIcon
+        icon={<Icon style={'regular'} name={'plus'} key={'hello'} />}
+        disabled={true}
+        onPress={() => console.log('Pressed')}
+      />
+    </View>
+  );
+};

package/src/components/molecules/pressable-icon/pressable-icon.styles.d.ts

@@ -0,0 +1,20 @@
+export function Stylesheet(
+  context: any,
+  disabled: any
+): {
+  container: {
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    borderRadius: number;
+    width: number;
+    height: number;
+    padding: number;
+  };
+  backgroundDefault: {
+    backgroundColor: any;
+  };
+  backgroundInverted: {
+    backgroundColor: any;
+  };
+};

package/src/components/molecules/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/molecules/pressable-icon/pressable-icon.test.js

@@ -0,0 +1,51 @@
+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 style={'regular'} name={'thumb-up'} key="default" />}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render a default disabled pressable icon', () => {
+    const tree = render
+      .create(
+        <PressableIcon
+          icon={<Icon style={'regular'} name={'mail'} key="disabled" />}
+          disabled={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('render an inverted pressable icon', () => {
+    const tree = render
+      .create(
+        <PressableIcon
+          icon={<Icon style={'regular'} name={'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 style={'solid'} name={'trash'} key="disabled inverted" />}
+          inverted={true}
+          disabled={true}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});