@tactics/toddle-styleguide 5.0.0 → 5.0.2

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

@@ -1,557 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test snackbar  given the visual state is DEFAULT return a light blue background and black text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <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={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test snackbar  given the visual state is ERROR return a red background and white text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <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={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test snackbar  given the visual state is SUCCESS return a light green background and black text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <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={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test snackbar  given the visual state is WARNING return a light orange background and black text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <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={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { VisualState } from '../../../types/visual-state.enum';
-type SnackbarProps = {
-    text: string;
-    visualState: VisualState;
-};
-declare const Snackbar: ({ text, visualState }: SnackbarProps) => React.JSX.Element;
-export { Snackbar as Snackbar };

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

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {ThemeCtx} from '../../../context/theme.context';
-import {View} from 'react-native';
-import {Stylesheet} from './snackbar.styles';
-import {VisualState} from '../../../types/visual-state.enum';
-import {Paragraph} from '../../atoms/paragraph-components';
-import {Icon} from '../../../icons/index';
-
-type SnackbarProps = {
-  text: string;
-  visualState: VisualState;
-};
-
-const Snackbar = ({text, visualState}: SnackbarProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, visualState);
-
-  const snackbarIconNameHandler = (visualState: VisualState) => {
-    const defaultIcon = 'exclamation-circle';
-    const errorWarningIcon = 'exclamation';
-    const successIcon = 'thumb-up';
-    if (visualState === VisualState.DEFAULT) {
-      return defaultIcon;
-    } else if (visualState === VisualState.SUCCESS) {
-      return successIcon;
-    } else if (visualState === VisualState.WARNING || VisualState.ERROR) {
-      return errorWarningIcon;
-    } else {
-      return defaultIcon;
-    }
-  };
-
-  const snackbarIconTextColorHandler = (visualState: VisualState) => {
-    const defaultColor = context.colors.main['0'];
-    const errorColor = context.colors.ui.white;
-    const successWarningColor = context.colors.ui.black;
-    if (visualState === VisualState.DEFAULT) {
-      return defaultColor;
-    } else if (visualState === VisualState.ERROR) {
-      return errorColor;
-    } else if (visualState === VisualState.SUCCESS || VisualState.WARNING) {
-      return successWarningColor;
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.iconContainer}>
-        <Icon
-          style={'regular'}
-          name={snackbarIconNameHandler(visualState)}
-          color={snackbarIconTextColorHandler(visualState)}
-        />
-      </View>
-      <View style={styles.textContainer}>
-        <Paragraph textColor={snackbarIconTextColorHandler(visualState)}>
-          {text}
-        </Paragraph>
-      </View>
-    </View>
-  );
-};
-export {Snackbar as Snackbar};

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

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

package/src/components/molecules/snackbar/snackbar.preview.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import {VisualState} from '../../../types/visual-state.enum';
-import {Snackbar} from './snackbar.component';
-const {View} = require('react-native');
-
-export const SnackbarPreview = ({}: {}) => {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: 'center',
-      }}
-    >
-      <View style={{marginBottom: 16}}>
-        <Snackbar
-          text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
-          visualState={VisualState.DEFAULT}
-        />
-      </View>
-      <View style={{marginBottom: 16}}>
-        <Snackbar
-          text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
-          visualState={VisualState.SUCCESS}
-        />
-      </View>
-      <View style={{marginBottom: 16}}>
-        <Snackbar
-          text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
-          visualState={VisualState.WARNING}
-        />
-      </View>
-      <View style={{marginBottom: 16}}>
-        <Snackbar
-          text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
-          visualState={VisualState.ERROR}
-        />
-      </View>
-    </View>
-  );
-};