@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,460 +0,0 @@
-// 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

@@ -1,9 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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();
-  });
-});