@tactics/toddle-styleguide 5.2.2 → 5.3.3

package/src/components/molecules/default-select/__snapshots__/default-select.test.js.snap

@@ -1,140 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test default select component should render a default select component that accepts a label and onPress does something 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={
-    [
-      {
-        "backgroundColor": "#7B93DB",
-      },
-      {
-        "alignItems": "center",
-        "borderRadius": 8,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "paddingBottom": 16,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 16,
-        "width": "100%",
-      },
-    ]
-  }
->
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansProBold",
-              "fontSize": 18,
-              "lineHeight": 22.6,
-            },
-          ],
-          {
-            "color": "#FFFFFF",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      Alle leefgroepen
-    </Text>
-  </View>
-  <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": 4294967295,
-            "type": 0,
-          }
-        }
-        strokeLinecap={1}
-        strokeLinejoin={1}
-        strokeWidth="2"
-      />
-    </RNSVGGroup>
-  </RNSVGSvgView>
-</View>
-`;

package/src/components/molecules/default-select/default-select.test.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {DefaultSelect} from './default-select.component';
-
-describe('test default select component', () => {
-  it('should render a default select component that accepts a label and onPress does something', () => {
-    const tree = render
-      .create(
-        <DefaultSelect
-          label={'Alle leefgroepen'}
-          onPress={() => console.log('pressed')}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/department_logo/__snapshots__/department-logo.test.js.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test department-logo component should render a department-logo component 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "Montserrat",
-          "fontSize": 13,
-          "lineHeight": 20.4,
-        },
-      ],
-      {
-        "color": "#19216C",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      {
-        "textAlignVertical": "bottom",
-      },
-    ]
-  }
->
-  Test Department
-</Text>
-`;

package/src/components/molecules/department_logo/department-logo.test.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {DepartmentLogo} from './department-logo.component';
-
-describe('test department-logo component', () => {
-  it('should render a department-logo component', function () {
-    const tree = render
-      .create(<DepartmentLogo department={'Test Department'} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/failed-to-send/__snapshots__/failed-bubble.test.js.snap

@@ -1,386 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Failed text bubble test shows a failed to send text bubble that is swipeable with refresh and trash icon, which if we press them we can resend or delete the message 1`] = `
-<View
-  style={
-    {
-      "flexDirection": "row",
-      "gap": 12,
-    }
-  }
->
-  <View
-    style={
-      {
-        "justifyContent": "center",
-        "padding": 2,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="26"
-      bbWidth="26"
-      fill="none"
-      focusable={false}
-      height={26}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 26,
-            "width": 26,
-          },
-        ]
-      }
-      vbHeight={23}
-      vbWidth={22}
-      width={26}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4294010984,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "backgroundColor": "#F16868",
-        "borderBottomLeftRadius": 8,
-        "borderBottomRightRadius": 32,
-        "borderTopLeftRadius": 24,
-        "borderTopRightRadius": 24,
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingBottom": 16,
-        "paddingLeft": 24,
-        "paddingRight": 24,
-        "paddingTop": 16,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      handlerTag={1}
-      handlerType="PanGestureHandler"
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onLayout={[Function]}
-      style={
-        {
-          "overflow": "hidden",
-        }
-      }
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "bottom": 0,
-            "flexDirection": "row-reverse",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": [
-              {
-                "translateX": -10000,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "alignItems": "center",
-              "flex": 1,
-              "flexDirection": "row",
-              "justifyContent": "space-evenly",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-                "opacity": 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]}
-              testID="refresh-button"
-            >
-              <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={18}
-                vbWidth={16}
-                width={24}
-              >
-                <RNSVGGroup
-                  fill={null}
-                  propList={
-                    [
-                      "fill",
-                    ]
-                  }
-                >
-                  <RNSVGPath
-                    d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                    fill={
-                      {
-                        "payload": 4294695385,
-                        "type": 0,
-                      }
-                    }
-                    propList={
-                      [
-                        "fill",
-                      ]
-                    }
-                  />
-                </RNSVGGroup>
-              </RNSVGSvgView>
-            </View>
-          </View>
-          <View
-            collapsable={false}
-            style={
-              {
-                "alignItems": "center",
-                "justifyContent": "center",
-                "opacity": 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]}
-              testID="delete-button"
-            >
-              <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={18}
-                vbWidth={17}
-                width={24}
-              >
-                <RNSVGGroup
-                  fill={null}
-                  propList={
-                    [
-                      "fill",
-                    ]
-                  }
-                >
-                  <RNSVGPath
-                    clipRule={0}
-                    d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                    fill={
-                      {
-                        "payload": 4294695385,
-                        "type": 0,
-                      }
-                    }
-                    fillRule={0}
-                    propList={
-                      [
-                        "fill",
-                        "fillRule",
-                      ]
-                    }
-                  />
-                </RNSVGGroup>
-              </RNSVGSvgView>
-            </View>
-          </View>
-        </View>
-        <View
-          onLayout={[Function]}
-        />
-      </View>
-      <View
-        collapsable={false}
-        handlerTag={2}
-        handlerType="TapGestureHandler"
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        pointerEvents="auto"
-        style={
-          {
-            "transform": [
-              {
-                "translateX": -0,
-              },
-            ],
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              [
-                {
-                  "fontFamily": "Montserrat",
-                  "fontSize": 13,
-                  "lineHeight": 20.4,
-                },
-              ],
-              {
-                "color": "#FFFFFF",
-                "textAlign": undefined,
-                "width": "100%",
-              },
-              {
-                "backgroundColor": "#F16868",
-                "minHeight": 30,
-                "textAlignVertical": "center",
-              },
-            ]
-          }
-        >
-          Testing our failed bubble
-        </Text>
-      </View>
-    </View>
-  </View>
-</View>
-`;

package/src/components/molecules/failed-to-send/failed-bubble.test.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {FailedTextBubble} from './failed-bubble.component';
-import {render, fireEvent} from '@testing-library/react-native';
-
-describe('Failed text bubble test', () => {
-  it('shows a failed to send text bubble that is swipeable with refresh and trash icon, which if we press them we can resend or delete the message', () => {
-    const tree = renderer
-      .create(
-        <FailedTextBubble
-          id={'1'}
-          text={'Testing our failed bubble'}
-          onPressRefresh={() => alert('pressed resend')}
-          onPressDelete={() => alert('delete the message')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-
-describe('FailedTextBubble', () => {
-  const mockId = '123';
-  const mockText = 'Failed message';
-  const mockOnPressRefresh = jest.fn();
-  const mockOnPressDelete = jest.fn();
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should render the component correctly', () => {
-    const {getByText} = render(
-      <FailedTextBubble
-        id={mockId}
-        text={mockText}
-        onPressRefresh={mockOnPressRefresh}
-        onPressDelete={mockOnPressDelete}
-      />
-    );
-
-    expect(getByText(mockText)).toBeDefined();
-  });
-
-  it('should call onPressRefresh when the refresh button is pressed', () => {
-    const {getByTestId} = render(
-      <FailedTextBubble
-        id={mockId}
-        text={mockText}
-        onPressRefresh={mockOnPressRefresh}
-        onPressDelete={mockOnPressDelete}
-      />
-    );
-
-    fireEvent.press(getByTestId('refresh-button'));
-
-    expect(mockOnPressRefresh).toHaveBeenCalledWith(mockId);
-  });
-
-  it('should call onPressDelete when the delete button is pressed', () => {
-    const {getByTestId} = render(
-      <FailedTextBubble
-        id={mockId}
-        text={mockText}
-        onPressRefresh={mockOnPressRefresh}
-        onPressDelete={mockOnPressDelete}
-      />
-    );
-
-    fireEvent.press(getByTestId('delete-button'));
-
-    expect(mockOnPressDelete).toHaveBeenCalledWith(mockId);
-  });
-});