@tactics/toddle-styleguide 5.0.2 → 5.0.5

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

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

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

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

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

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

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