@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,493 @@
+// 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",
+        "borderColor": "rgba (39, 51, 68, 0.1)",
+        "borderRadius": 16,
+        "elevation": 4,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingTop": 8,
+      },
+      {
+        "backgroundColor": "#E0E8F9",
+      },
+      false,
+      false,
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": 32,
+        "justifyContent": "center",
+        "marginRight": 8,
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
+        ]
+      }
+      vbHeight={26}
+      vbWidth={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          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": "#19216C",
+          },
+          false,
+          false,
+          false,
+        ]
+      }
+    >
+      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",
+        "borderColor": "rgba (39, 51, 68, 0.1)",
+        "borderRadius": 16,
+        "elevation": 4,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingTop": 8,
+      },
+      false,
+      false,
+      {
+        "backgroundColor": "#F16868",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": 32,
+        "justifyContent": "center",
+        "marginRight": 8,
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
+        ]
+      }
+      vbHeight={26}
+      vbWidth={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          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,
+          },
+          false,
+          false,
+          {
+            "color": "#FFFFFF",
+          },
+          false,
+        ]
+      }
+    >
+      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",
+        "borderColor": "rgba (39, 51, 68, 0.1)",
+        "borderRadius": 16,
+        "elevation": 4,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingTop": 8,
+      },
+      false,
+      {
+        "backgroundColor": "#E0F4DA",
+      },
+      false,
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": 32,
+        "justifyContent": "center",
+        "marginRight": 8,
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
+        ]
+      }
+      vbHeight={26}
+      vbWidth={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          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,
+          },
+          false,
+          {
+            "color": "#1F2933",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      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",
+        "borderColor": "rgba (39, 51, 68, 0.1)",
+        "borderRadius": 16,
+        "elevation": 4,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingTop": 8,
+      },
+      false,
+      false,
+      false,
+      {
+        "backgroundColor": "#FEEFDB",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "height": 32,
+        "justifyContent": "center",
+        "marginRight": 8,
+        "width": 32,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight="28"
+      bbWidth="28"
+      fill="none"
+      focusable={false}
+      height="28"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "flex": 0,
+            "height": 28,
+            "width": 28,
+          },
+        ]
+      }
+      vbHeight={26}
+      vbWidth={26}
+      width="28"
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
+        <RNSVGPath
+          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          propList={
+            [
+              "stroke",
+              "strokeWidth",
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          stroke={4279837036}
+          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,
+          },
+          false,
+          false,
+          false,
+          {
+            "color": "#1F2933",
+          },
+        ]
+      }
+    >
+      test
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,28 @@
+import React, {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Text, View} from 'react-native';
+import {Stylesheet} from './snackbar.styles';
+import {VisualState} from '../../../types/visual-state.enum';
+import {FilterIcon} from '../../../icons/outline/filter/filter.icon';
+
+type SnackbarProps = {
+  text: string;
+  variant: VisualState;
+};
+
+const Snackbar = ({text, variant}: SnackbarProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, variant);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.iconContainer}>
+        <FilterIcon color={context.colors.main['0']} />
+      </View>
+      <View style={styles.textContainer}>
+        <Text style={styles.text}>{text}</Text>
+      </View>
+    </View>
+  );
+};
+export {Snackbar as Snackbar};

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

@@ -0,0 +1,33 @@
+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,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Snackbar
+        text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
+        variant={VisualState.DEFAULT}
+      />
+      <Snackbar
+        text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
+        variant={VisualState.SUCCESS}
+      />
+      <Snackbar
+        text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
+        variant={VisualState.WARNING}
+      />
+      <Snackbar
+        text={'Geen internetverbinding, maak verbinding en probeer opnieuw'}
+        variant={VisualState.ERROR}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,82 @@
+import {StyleSheet} from 'react-native';
+import {VisualState} from '../../../types/visual-state.enum';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (Context, variant) =>
+  StyleSheet.create({
+    container: [
+      {
+        flexDirection: 'row',
+        paddingRight: Scale.xl,
+        paddingLeft: Scale.xl,
+        paddingTop: Scale.xs,
+        paddingBottom: Scale.xs,
+        overflow: 'hidden',
+        alignItems: 'center',
+        borderColor: 'rgba (39, 51, 68, 0.1)',
+        borderRadius: Scale.m,
+        elevation: Scale.xxs,
+      },
+      variant === VisualState.DEFAULT && {
+        backgroundColor: Context.colors.main['9'],
+      },
+      variant === VisualState.SUCCESS && {
+        backgroundColor: Context.colors.ui.success.xlight,
+      },
+      variant === VisualState.ERROR && {
+        backgroundColor: Context.colors.ui.error.default,
+      },
+      variant === VisualState.WARNING && {
+        backgroundColor: Context.colors.ui.warning.xlight,
+      },
+    ],
+
+    textContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignContent: 'center',
+      paddingLeft: Scale.xl,
+      paddingRight: Scale.xl,
+    },
+    text: [
+      {
+        ...Font.regular,
+      },
+      variant === VisualState.DEFAULT && {
+        color: Context.colors.main['0'],
+      },
+      variant === VisualState.SUCCESS && {
+        color: Context.colors.ui.black,
+      },
+      variant === VisualState.ERROR && {
+        color: Context.colors.ui.white,
+      },
+      variant === VisualState.WARNING && {
+        color: Context.colors.ui.black,
+      },
+    ],
+    iconContainer: {
+      height: Scale.xl,
+      width: Scale.xl,
+      marginRight: Scale.xs,
+      // marginVertical: Scale.m,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+
+    // icon: [
+    //     variant === VisualState.DEFAULT && {
+    //         color: Context.colors.main['0']
+    //     },
+    //     variant === VisualState.SUCCESS && {
+    //         color: Context.colors.ui.black
+    //     },
+    //     variant === VisualState.ERROR && {
+    //         color: Context.colors.ui.white
+    //     },
+    //     variant === VisualState.WARNING && {
+    //         color: Context.colors.ui.black
+    //     }
+    // ]
+  });

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

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