@tactics/toddle-styleguide 5.0.0 → 5.0.2

package/src/components/molecules/blocked-message/blocked-message.styles.js

@@ -1,21 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    container: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: context.colors.ui.error.xlight,
-      borderRadius: Scale.xs,
-      paddingLeft: Scale.l,
-      paddingTop: Scale.l,
-      paddingRight: Scale.l,
-      paddingBottom: Scale.l,
-    },
-    message: {
-      flex: 1,
-      marginLeft: Scale.m,
-    },
-  });

package/src/components/molecules/blocked-message/blocked-message.test.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import render from 'react-test-renderer';
-import {BlockedMessage} from './blocked-message.component';
-
-describe('Blocked message visual test', () => {
-  it('renders a cancel link with label "cancel" that is pressable', function () {
-    const tree = render
-      .create(<BlockedMessage message={'You shall not pass!!!!'} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/button/__snapshots__/button.test.js.snap

@@ -1,652 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test button component should render a button component 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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#19216C",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#E0E8F9",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Test button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a button component 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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#515F6C",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Button without icon
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a button component with a clock icon, since regular is the default the icon will be outlined 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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#19216C",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "marginRight": 12,
-        }
-      }
-    >
-      <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={23}
-        width={24}
-      >
-        <RNSVGGroup
-          fill={null}
-          propList={
-            [
-              "fill",
-            ]
-          }
-        >
-          <RNSVGPath
-            d="M11.5 6.66667V11L14.875 14.25M21.625 11C21.625 16.3848 17.0919 20.75 11.5 20.75C5.90812 20.75 1.375 16.3848 1.375 11C1.375 5.61522 5.90812 1.25 11.5 1.25C17.0919 1.25 21.625 5.61522 21.625 11Z"
-            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>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#E0E8F9",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Button with icon
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a button component with a solid icon named eye-off but is also 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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "marginRight": 12,
-        }
-      }
-    >
-      <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={22}
-        width={24}
-      >
-        <RNSVGGroup
-          fill={null}
-          propList={
-            [
-              "fill",
-            ]
-          }
-        >
-          <RNSVGPath
-            clipRule={0}
-            d="M4.07779 0.522134C3.64822 0.092557 2.95174 0.092557 2.52216 0.522134C2.09258 0.95171 2.09258 1.64819 2.52216 2.07777L17.9222 17.4778C18.3517 17.9073 19.0482 17.9073 19.4778 17.4778C19.9074 17.0482 19.9074 16.3517 19.4778 15.9221L17.8573 14.3016C19.5486 12.9516 20.8329 11.1132 21.4966 8.99991C20.0949 4.53712 15.9256 1.29995 11.0002 1.29995C9.21429 1.29995 7.52776 1.72556 6.03654 2.48088L4.07779 0.522134ZM8.76492 5.20926L10.4302 6.87453C10.612 6.82588 10.8031 6.79995 11.0003 6.79995C12.2153 6.79995 13.2003 7.78492 13.2003 8.99995C13.2003 9.19711 13.1743 9.3882 13.1257 9.57002L14.791 11.2353C15.1781 10.5802 15.4003 9.81601 15.4003 8.99995C15.4003 6.5699 13.4303 4.59995 11.0003 4.59995C10.1842 4.59995 9.42002 4.82211 8.76492 5.20926Z"
-            fill={
-              {
-                "payload": 4283522924,
-                "type": 0,
-              }
-            }
-            fillRule={0}
-            propList={
-              [
-                "fill",
-                "fillRule",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M13.6995 16.3663L10.7246 13.3915C8.51412 13.2548 6.74539 11.4861 6.60875 9.27561L2.56839 5.23525C1.65067 6.3294 0.941981 7.60481 0.503784 8.99999C1.90549 13.4628 6.0748 16.6999 11.0002 16.6999C11.9315 16.6999 12.8358 16.5842 13.6995 16.3663Z"
-            fill={
-              {
-                "payload": 4283522924,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-        </RNSVGGroup>
-      </RNSVGSvgView>
-    </View>
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#515F6C",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Button with icon
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a light button component 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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#515F6C",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Light button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a success button component 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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#67C14E",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Success button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render an error button component 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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#D25E5E",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Error button
-      </Text>
-    </View>
-  </View>
-</View>
-`;

package/src/components/molecules/button/button.component.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { PressableProps } from 'react-native';
-import { IconNameType, IconStyleType } from '../../../types/icontype.type';
-type ButtonType = 'regular' | 'error' | 'success' | 'light';
-interface ButtonProps extends PressableProps {
-    label: string;
-    icon?: boolean;
-    iconStyle?: IconStyleType;
-    iconName?: IconNameType;
-    iconSize?: number;
-    disabled?: boolean;
-    type?: ButtonType;
-}
-declare const Button: ({ label, icon, iconStyle, iconName, iconSize, disabled, type, ...props }: ButtonProps) => React.JSX.Element;
-export { Button as Button };