@tactics/toddle-styleguide 0.0.1

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

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected is true 1`] = `
+<View
+  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,
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 8,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#1F2933",
+          "fontFamily": "Montserrat",
+          "fontSize": 13,
+          "lineHeight": 20.4,
+        }
+      }
+    >
+      Geblokkeerd
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test Tag renders Tag correctly (grey, black text) 1`] = `
+<View
+  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,
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 8,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#1F2933",
+          "fontFamily": "Montserrat",
+          "fontSize": 13,
+          "lineHeight": 20.4,
+        }
+      }
+    >
+      Geblokkeerd
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,37 @@
+import React, {useContext, useState} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './tag.styles';
+import {View, Text, Pressable} from 'react-native';
+
+export interface TagPressEvent {
+  value: string;
+  isSelected: boolean;
+}
+
+type TagProps = {
+  value: string;
+  text: string;
+  isSelected?: boolean;
+  onPress: (event: TagPressEvent) => void;
+};
+
+const Tag = ({text, isSelected, onPress, value}: TagProps) => {
+  const context = useContext(ThemeCtx);
+  const [isSelectedTag, setIsSelectedTag] = useState(isSelected);
+  const styles = Stylesheet(context, isSelectedTag);
+
+  const onClicked = () => {
+    setIsSelectedTag((current) => !current);
+    onPress({value, isSelected: !isSelectedTag});
+  };
+
+  return (
+    <Pressable onPress={onClicked}>
+      <View style={styles.container}>
+        <Text style={styles.text}>{text}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export {Tag as Tag};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Tag, TagPressEvent} from './tag.component';
+import {View} from 'react-native';
+
+export const TagPreview = ({}: {}) => {
+  return (
+    <View>
+      <Tag
+        value={'tab1'}
+        text={'Algemeen'}
+        onPress={(e) => console.log('clicked', e)}
+      />
+      <Tag
+        value={'tab2'}
+        text={'Gezondheid'}
+        isSelected={true}
+        onPress={(e) => console.log('clicked', e)}
+      />
+      <Tag
+        value={'tab3'}
+        text={'Activiteit'}
+        isSelected={true}
+        onPress={(e) => console.log('clicked', e)}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, isSelected) =>
+  StyleSheet.create({
+    container: {
+      borderRadius: 50,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: Scale.xs,
+      paddingHorizontal: Scale.xs,
+      backgroundColor: isSelected
+        ? context.colors.main[5]
+        : context.colors.ui.lightgrey,
+    },
+    text: {
+      ...(isSelected ? Font.smallBold : Font.small),
+      color: isSelected ? context.colors.main[9] : context.colors.ui.black,
+    },
+  });

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Tag} from './tag.component';
+
+describe('test Tag', () => {
+  it('renders Tag correctly (grey, black text)', () => {
+    const tree = renderer
+      .create(
+        <Tag text={'Geblokkeerd'} onPress={() => console.log('clicked')} />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders Tag correctly (blue, bold grey text) when isSelected is true', () => {
+    const tree = renderer
+      .create(
+        <Tag text={'Geblokkeerd'} onPress={() => console.log('clicked')} />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/text-bubble/__snapshots__/text-bubble.test.js.snap

@@ -0,0 +1,337 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble with right-bottom tip 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 24,
+          "borderStyle": "solid",
+          "borderWidth": 1,
+          "justifyContent": "center",
+          "marginTop": 24,
+          "maxWidth": "80%",
+          "overflow": "hidden",
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+        },
+        {
+          "backgroundColor": "#E0E8F9",
+          "borderColor": "#E0E8F9",
+        },
+        false,
+        false,
+        false,
+        {
+          "borderBottomLeftRadius": 32,
+          "borderBottomRightRadius": 8,
+          "marginLeft": 48,
+          "marginRight": 16,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          false,
+          {
+            "color": "#19216C",
+          },
+          false,
+        ]
+      }
+    >
+      TEST Bubble
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is DEFAULT return a light-blue colored text-bubble AND dark green text 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 24,
+          "borderStyle": "solid",
+          "borderWidth": 1,
+          "justifyContent": "center",
+          "marginTop": 24,
+          "maxWidth": "80%",
+          "overflow": "hidden",
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+        },
+        {
+          "backgroundColor": "#E0E8F9",
+          "borderColor": "#E0E8F9",
+        },
+        false,
+        false,
+        false,
+        {
+          "borderBottomLeftRadius": 32,
+          "borderBottomRightRadius": 8,
+          "marginLeft": 48,
+          "marginRight": 16,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          false,
+          {
+            "color": "#19216C",
+          },
+          false,
+        ]
+      }
+    >
+      TEST color
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is ERROR return a red colored text-bubble AND white text 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 24,
+          "borderStyle": "solid",
+          "borderWidth": 1,
+          "justifyContent": "center",
+          "marginTop": 24,
+          "maxWidth": "80%",
+          "overflow": "hidden",
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": "#F16868",
+          "borderColor": "#F16868",
+        },
+        false,
+        {
+          "borderBottomLeftRadius": 32,
+          "borderBottomRightRadius": 8,
+          "marginLeft": 48,
+          "marginRight": 16,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          {
+            "color": "#FFFFFF",
+          },
+          false,
+          false,
+        ]
+      }
+    >
+      TEST color
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is RECEIVE return a text-bubble with left-bottom tip 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 24,
+          "borderStyle": "solid",
+          "borderWidth": 1,
+          "justifyContent": "center",
+          "marginTop": 24,
+          "maxWidth": "80%",
+          "overflow": "hidden",
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+        },
+        {
+          "backgroundColor": "#E0E8F9",
+          "borderColor": "#E0E8F9",
+        },
+        false,
+        false,
+        {
+          "borderBottomLeftRadius": 8,
+          "borderBottomRightRadius": 32,
+          "marginLeft": 16,
+          "marginRight": 48,
+        },
+        false,
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          false,
+          {
+            "color": "#19216C",
+          },
+          false,
+        ]
+      }
+    >
+      TEST Bubble
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is RECEIVE return a textBubble with left-bottom tip 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 24,
+          "borderStyle": "solid",
+          "borderWidth": 1,
+          "justifyContent": "center",
+          "marginTop": 24,
+          "maxWidth": "80%",
+          "overflow": "hidden",
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+        },
+        {
+          "backgroundColor": "#E0E8F9",
+          "borderColor": "#E0E8F9",
+        },
+        false,
+        false,
+        {
+          "borderBottomLeftRadius": 8,
+          "borderBottomRightRadius": 32,
+          "marginLeft": 16,
+          "marginRight": 48,
+        },
+        false,
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          false,
+          {
+            "color": "#19216C",
+          },
+          false,
+        ]
+      }
+    >
+      TEST Bubble
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is WARNING return an orange colored text-bubble AND white text 1`] = `
+<View>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 24,
+          "borderStyle": "solid",
+          "borderWidth": 1,
+          "justifyContent": "center",
+          "marginTop": 24,
+          "maxWidth": "80%",
+          "overflow": "hidden",
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+        },
+        false,
+        {
+          "backgroundColor": "#FEEFDB",
+          "borderColor": "#FEEFDB",
+        },
+        false,
+        false,
+        {
+          "borderBottomLeftRadius": 32,
+          "borderBottomRightRadius": 8,
+          "marginLeft": 48,
+          "marginRight": 16,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        [
+          {
+            "fontFamily": "Montserrat",
+            "fontSize": 13,
+            "lineHeight": 20.4,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          false,
+          false,
+          {
+            "color": "#FAAC44",
+          },
+        ]
+      }
+    >
+      TEST color
+    </Text>
+  </View>
+</View>
+`;

package/src/components/atoms/text-bubble/text-bubble.component.tsx

@@ -0,0 +1,32 @@
+import React, {useContext} from 'react';
+import {View, Text} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+
+import {Stylesheet} from './text-bubble.styles';
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+
+type TextBubbleProps = {
+  text: string;
+  visualState: VisualState;
+  bubbleAlignment: BubbleAlignment;
+};
+
+const TextBubble: React.FC<TextBubbleProps> = ({
+  text,
+  visualState,
+  bubbleAlignment,
+}) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, visualState, bubbleAlignment);
+
+  return (
+    <View>
+      <View style={styles.container}>
+        <Text style={styles.text}>{text}</Text>
+      </View>
+    </View>
+  );
+};
+
+export {TextBubble as TextBubble};

package/src/components/atoms/text-bubble/text-bubble.preview.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {VisualState} from '../../../types/visual-state.enum';
+import {TextBubble} from './text-bubble.component';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+const {View} = require('react-native');
+
+export const TextBubblePreview = ({}: {}) => {
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <TextBubble
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit velit in nibh varius, quis accumsan tellus maximus. Aliquam ut massa ullamcorper, vulputate enim at, dignissim felis."
+        bubbleAlignment={BubbleAlignment.SENT}
+        visualState={VisualState.DEFAULT}
+      />
+      <TextBubble
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit velit in nibh varius, quis accumsan tellus maximus. Aliquam ut massa ullamcorper, vulputate enim at, dignissim felis."
+        bubbleAlignment={BubbleAlignment.RECEIVE}
+        visualState={VisualState.WARNING}
+      />
+      <TextBubble
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit velit in nibh varius, quis accumsan tellus maximus. Aliquam ut massa ullamcorper, vulputate enim at, dignissim felis."
+        bubbleAlignment={BubbleAlignment.SENT}
+        visualState={VisualState.ERROR}
+      />
+    </View>
+  );
+};

package/src/components/atoms/text-bubble/text-bubble.styles.js

@@ -0,0 +1,64 @@
+import {StyleSheet} from 'react-native';
+
+import {VisualState} from '../../../types/visual-state.enum';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
+import {Font} from '../../../theme/font';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, visualState, bubbleAlignment) =>
+  StyleSheet.create({
+    container: [
+      {
+        maxWidth: '80%',
+        paddingVertical: Scale.m,
+        paddingHorizontal: Scale.l,
+        marginTop: Scale.l,
+        borderRadius: Scale.l,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderStyle: 'solid',
+      },
+      visualState === VisualState.DEFAULT && {
+        backgroundColor: context.colors.main['9'],
+        borderColor: context.colors.main['9'],
+      },
+      visualState === VisualState.WARNING && {
+        backgroundColor: context.colors.ui.warning.xlight,
+        borderColor: context.colors.ui.warning.xlight,
+      },
+      visualState === VisualState.ERROR && {
+        backgroundColor: context.colors.ui.error.default,
+        borderColor: context.colors.ui.error.default,
+      },
+      bubbleAlignment === BubbleAlignment.RECEIVE && {
+        borderBottomLeftRadius: Scale.xs,
+        borderBottomRightRadius: Scale.xl,
+        marginRight: Scale.xxl,
+        marginLeft: Scale.m,
+      },
+      bubbleAlignment === BubbleAlignment.SENT && {
+        borderBottomRightRadius: Scale.xs,
+        borderBottomLeftRadius: Scale.xl,
+        marginLeft: Scale.xxl,
+        marginRight: Scale.m,
+      },
+    ],
+
+    text: [
+      {
+        ...Font.small,
+        paddingVertical: 16,
+        paddingHorizontal: 24,
+      },
+      visualState === VisualState.ERROR && {
+        color: context.colors.ui.white,
+      },
+      visualState === VisualState.DEFAULT && {
+        color: context.colors.main['0'],
+      },
+      visualState === VisualState.WARNING && {
+        color: context.colors.ui.warning.dark,
+      },
+    ],
+  });