@tactics/toddle-styleguide 5.0.0 → 5.0.2

package/src/components/molecules/snackbar/snackbar.styles.d.ts

@@ -1,57 +0,0 @@
-export function Stylesheet(
-  Context: any,
-  visualState: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      container: (
-        | {
-            flexDirection: string;
-            paddingRight: number;
-            paddingLeft: number;
-            paddingTop: number;
-            paddingBottom: number;
-            overflow: string;
-            alignItems: string;
-            borderRadius: number;
-            shadowOffset: {
-              width: number;
-              height: number;
-            };
-            shadowOpacity: number;
-            shadowRadius: number;
-            elevation: number;
-            backgroundColor?: undefined;
-          }
-        | {
-            backgroundColor: any;
-            flexDirection?: undefined;
-            paddingRight?: undefined;
-            paddingLeft?: undefined;
-            paddingTop?: undefined;
-            paddingBottom?: undefined;
-            overflow?: undefined;
-            alignItems?: undefined;
-            borderRadius?: undefined;
-            shadowOffset?: undefined;
-            shadowOpacity?: undefined;
-            shadowRadius?: undefined;
-            elevation?: undefined;
-          }
-      )[];
-      textContainer: {
-        flex: number;
-        justifyContent: 'center';
-        alignContent: 'center';
-        paddingLeft: number;
-        paddingRight: number;
-      };
-      iconContainer: {
-        height: number;
-        width: number;
-        marginRight: number;
-        alignItems: 'center';
-        justifyContent: 'center';
-      };
-    }>;
-import {StyleSheet} from 'react-native';

package/src/components/molecules/snackbar/snackbar.styles.js

@@ -1,54 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {VisualState} from '../../../types/visual-state.enum';
-import {Scale} from '../../../theme/scale';
-
-export const Stylesheet = (Context, visualState) =>
-  StyleSheet.create({
-    container: [
-      {
-        flexDirection: 'row',
-        paddingRight: Scale.xl,
-        paddingLeft: Scale.xl,
-        paddingTop: Scale.xs,
-        paddingBottom: Scale.xs,
-        overflow: 'hidden',
-        alignItems: 'center',
-        borderRadius: Scale.m,
-        // Shadow iOS
-        shadowOffset: {
-          width: 0,
-          height: 2,
-        },
-        shadowOpacity: 0.23,
-        shadowRadius: 2.62,
-        // Shadow Android
-        elevation: Scale.xxs,
-      },
-      visualState === VisualState.DEFAULT && {
-        backgroundColor: Context.colors.main['9'],
-      },
-      visualState === VisualState.SUCCESS && {
-        backgroundColor: Context.colors.ui.success.xlight,
-      },
-      visualState === VisualState.ERROR && {
-        backgroundColor: Context.colors.ui.error.default,
-      },
-      visualState === VisualState.WARNING && {
-        backgroundColor: Context.colors.ui.warning.xlight,
-      },
-    ],
-    textContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignContent: 'center',
-      paddingLeft: Scale.xl,
-      paddingRight: Scale.xl,
-    },
-    iconContainer: {
-      height: Scale.xl,
-      width: Scale.xl,
-      marginRight: Scale.xs,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-  });

package/src/components/molecules/snackbar/snackbar.test.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Snackbar} from './snackbar.component';
-import {VisualState} from '../../../types/visual-state.enum';
-
-describe('test snackbar', () => {
-  it(' given the visual state is DEFAULT return a light blue background and black text ', () => {
-    const tree = renderer
-      .create(<Snackbar text="test" variant={VisualState.DEFAULT} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it(' given the visual state is SUCCESS return a light green background and black text ', () => {
-    const tree = renderer
-      .create(<Snackbar text="test" variant={VisualState.SUCCESS} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it(' given the visual state is WARNING return a light orange background and black text ', () => {
-    const tree = renderer
-      .create(<Snackbar text="test" variant={VisualState.WARNING} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it(' given the visual state is ERROR return a red background and white text ', () => {
-    const tree = renderer
-      .create(<Snackbar text="test" variant={VisualState.ERROR} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,340 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test Swipe component should render an swipe component with navigation arrows 1`] = `
-<View
-  style={
-    {
-      "flex": 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",
-        "height": 42,
-        "justifyContent": "center",
-        "position": "absolute",
-        "right": 0,
-        "top": 12,
-        "width": 42,
-        "zIndex": 10,
-      }
-    }
-  >
-    <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={11}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M1.75 1.625L9.33333 9.5L1.75 17.375"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4279837036,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <RNCViewPager
-    collapsable={false}
-    initialPage={0}
-    layoutDirection="ltr"
-    onMoveShouldSetResponderCapture={[Function]}
-    onPageScroll={[Function]}
-    onPageScrollStateChanged={[Function]}
-    onPageSelected={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "marginLeft": 15,
-              "marginRight": 15,
-              "marginTop": 20,
-              "width": "60%",
-            },
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-          ]
-        }
-      >
-        <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,
-                  ]
-                }
-              >
-                button 1
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      collapsable={false}
-      style={
-        {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "alignSelf": "center",
-              "marginLeft": 15,
-              "marginRight": 15,
-              "marginTop": 20,
-              "width": "60%",
-            },
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-          ]
-        }
-      >
-        <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,
-                  ]
-                }
-              >
-                button 2
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCViewPager>
-</View>
-`;

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

@@ -1,7 +0,0 @@
-import React, { ReactNode } from 'react';
-type SwipeProps = {
-    children: ReactNode;
-    onIndexChange?: (index: number) => void;
-};
-declare const Swipe: ({ children, onIndexChange }: SwipeProps) => React.JSX.Element;
-export { Swipe as Swipe };

package/src/components/molecules/swipe/swipe.component.native.tsx

@@ -1,78 +0,0 @@
-import React, {Children, ReactNode, useContext, useRef, useState} from 'react';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './swipe.styles';
-import {Icon} from '../../../icons/index';
-import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
-import {Pressable, View} from 'react-native';
-
-type SwipeProps = {
-  children: ReactNode;
-  onIndexChange?: (index: number) => void;
-};
-
-const Swipe = ({children, onIndexChange}: SwipeProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet();
-  const viewPagerRef = useRef<PagerView>(null);
-  const [currentPage, setCurrentPage] = useState(0);
-
-  const count = Children.count(children);
-
-  if (count > 5) {
-    console.warn(' for more then 5 child-components, use another way to show');
-  }
-
-  const handlePageSelected = (event: PagerViewOnPageSelectedEvent) => {
-    const currentIndex = event.nativeEvent.position;
-    setCurrentPage(currentIndex);
-
-    if (onIndexChange) {
-      onIndexChange(currentIndex);
-    }
-  };
-
-  return (
-    <View style={styles.rootContainer}>
-      {currentPage !== 0 && (
-        <Pressable
-          style={styles.leftArrowContainer}
-          onPress={() =>
-            viewPagerRef.current?.setPage(
-              currentPage != 1 ? currentPage - 1 : 0
-            )
-          }
-        >
-          <Icon
-            style={'regular'}
-            name={'chevron-left'}
-            color={context.colors.main['0']}
-          />
-        </Pressable>
-      )}
-
-      {currentPage !== count - 1 && (
-        <Pressable
-          style={styles.rightArrowContainer}
-          onPress={() => viewPagerRef.current?.setPage(currentPage + 1)}
-        >
-          <Icon
-            style={'regular'}
-            name={'chevron-right'}
-            color={context.colors.main['0']}
-          />
-        </Pressable>
-      )}
-
-      <PagerView
-        ref={viewPagerRef}
-        style={styles.swipeContainer}
-        initialPage={0}
-        collapsable={false}
-        onPageSelected={handlePageSelected}
-      >
-        {children}
-      </PagerView>
-    </View>
-  );
-};
-export {Swipe as Swipe};

package/src/components/molecules/swipe/swipe.component.tsx

@@ -1,20 +0,0 @@
-import React, {Children, ReactNode, useContext, useRef, useState} from 'react';
-import { Platform } from 'react-native';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './swipe.styles';
-import {Icon} from '../../../icons/index';
-import {Pressable, View} from 'react-native';
-
-type SwipeProps = {
-  children: ReactNode;
-  onIndexChange?: (index: number) => void;
-};
-
-const Swipe = ({children, onIndexChange}: SwipeProps) => {
-
-    const renderChildren = Children.map(children, (child, index) => {
-      return child
-    });
-    return <>{renderChildren ? renderChildren[0] : null}</>;
-};
-export {Swipe as Swipe};

package/src/components/molecules/swipe/swipe.preview.d.ts

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