@tactics/toddle-styleguide 5.3.1 → 5.3.3

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);
-  });
-});

package/src/components/molecules/filter-range/__snapshots__/filter-range.test.js.snap

@@ -1,208 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Filter range test renders a filter range slider 1`] = `
-<View
-  style={
-    {
-      "width": "100%",
-    }
-  }
->
-  <View
-    animateTransitions={true}
-    animationType="timing"
-    onLayout={[Function]}
-    onValueChange={[Function]}
-    style={
-      [
-        {
-          "height": 40,
-          "justifyContent": "center",
-        },
-        {},
-        {
-          "marginLeft": 4,
-          "marginRight": 4,
-        },
-      ]
-    }
-    trackClickable={true}
-    trackMarks={[]}
-    value={
-      [
-        0,
-        100,
-      ]
-    }
-  >
-    <View
-      onLayout={[Function]}
-      renderToHardwareTextureAndroid={true}
-      style={
-        [
-          {
-            "borderRadius": 2,
-            "height": 4,
-          },
-          {
-            "backgroundColor": "#E5E8EB",
-          },
-          {
-            "borderRadius": 50,
-            "height": 8,
-          },
-          undefined,
-        ]
-      }
-    />
-    <View
-      collapsable={false}
-      renderToHardwareTextureAndroid={true}
-      style={
-        {
-          "backgroundColor": "#647ACB",
-          "borderRadius": 50,
-          "height": 8,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "width": 0,
-        }
-      }
-    />
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      style={
-        {
-          "backgroundColor": "#7B93DB",
-          "borderRadius": 10,
-          "height": 16,
-          "opacity": 0,
-          "position": "absolute",
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": 16,
-        }
-      }
-    />
-    <View
-      collapsable={false}
-      onLayout={[Function]}
-      style={
-        {
-          "backgroundColor": "#7B93DB",
-          "borderRadius": 10,
-          "height": 16,
-          "opacity": 0,
-          "position": "absolute",
-          "transform": [
-            {
-              "translateX": 0,
-            },
-            {
-              "translateY": 0,
-            },
-          ],
-          "width": 16,
-        }
-      }
-    />
-    <View
-      onMoveShouldSetResponder={[Function]}
-      onMoveShouldSetResponderCapture={[Function]}
-      onResponderEnd={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderReject={[Function]}
-      onResponderRelease={[Function]}
-      onResponderStart={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      onStartShouldSetResponderCapture={[Function]}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "marginBottom": -20,
-            "marginLeft": -20,
-            "marginRight": -20,
-            "marginTop": -20,
-          },
-        ]
-      }
-    />
-  </View>
-  <View
-    style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "Montserrat",
-                "fontSize": 13,
-                "lineHeight": 20.4,
-              },
-            ],
-            {
-              "color": "#1F2933",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        €
-        0
-      </Text>
-    </View>
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "Montserrat",
-                "fontSize": 13,
-                "lineHeight": 20.4,
-              },
-            ],
-            {
-              "color": "#1F2933",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        €
-        100
-      </Text>
-    </View>
-  </View>
-</View>
-`;

package/src/components/molecules/filter-range/filter-range.test.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {FilterRange} from './filter-range.component';
-
-describe('Filter range test', () => {
-  it('renders a filter range slider', function () {
-    const tree = render
-      .create(
-        <FilterRange
-          value={[0, 100]}
-          minValue={0}
-          maxValue={100}
-          prefix={'€'}
-          onChange={() => console.log('value change')}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});