@tactics/toddle-styleguide 5.0.0 → 5.0.2

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.component.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-type FailedBubbleProps = {
-    id: string;
-    text: string;
-    onPressRefresh?: (id: string) => void;
-    onPressDelete?: (id: string) => void;
-};
-declare const FailedTextBubble: ({ id, text, onPressRefresh, onPressDelete, }: FailedBubbleProps) => React.JSX.Element;
-export { FailedTextBubble };

package/src/components/molecules/failed-to-send/failed-bubble.component.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {View, Animated, Pressable} from 'react-native';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Icon} from '../../../icons/index';
-
-import {Stylesheet} from './failed-bubble.styles';
-import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
-import {SmallText} from '../../atoms/paragraph-components';
-
-type FailedBubbleProps = {
-  id: string;
-  text: string;
-  onPressRefresh?: (id: string) => void;
-  onPressDelete?: (id: string) => void;
-};
-
-const FailedTextBubble = ({
-  id,
-  text,
-  onPressRefresh,
-  onPressDelete,
-}: FailedBubbleProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-
-  const RenderRefreshDeleteAction = (
-    progress: Animated.AnimatedInterpolation<any>,
-    dragX: Animated.AnimatedInterpolation<any>
-  ) => {
-    const opacity = dragX.interpolate({
-      inputRange: [-200, 0],
-      outputRange: [1, 0],
-      extrapolate: 'clamp',
-    });
-
-    return (
-      <View style={styles.swipedRow}>
-        {onPressRefresh && (
-          <Animated.View style={[styles.swipedIcon, {opacity}]}>
-            <Pressable
-              onPress={() => onPressRefresh(id)}
-              testID="refresh-button"
-            >
-              <Icon
-                style={'solid'}
-                name={'refresh'}
-                color={context.colors.ui.error.xlight}
-              />
-            </Pressable>
-          </Animated.View>
-        )}
-
-        {onPressDelete && (
-          <Animated.View style={[styles.swipedIcon, {opacity}]}>
-            <Pressable onPress={() => onPressDelete(id)} testID="delete-button">
-              <Icon
-                style={'solid'}
-                name={'trash'}
-                color={context.colors.ui.error.xlight}
-              />
-            </Pressable>
-          </Animated.View>
-        )}
-      </View>
-    );
-  };
-
-  return (
-    <GestureHandlerRootView style={styles.rootContainer}>
-      <View style={styles.iconContainer}>
-        <Icon
-          style={'regular'}
-          name={'exclamation-circle'}
-          color={context.colors.ui.error.default}
-          size={26}
-        />
-      </View>
-
-      <View style={styles.textBubbleContainer}>
-        {onPressRefresh && onPressDelete ? (
-          <Swipeable renderRightActions={RenderRefreshDeleteAction}>
-            <SmallText
-              textColor={context.colors.ui.white}
-              addStyle={styles.text}
-            >
-              {text}
-            </SmallText>
-          </Swipeable>
-        ) : (
-          <SmallText textColor={context.colors.ui.white} addStyle={styles.text}>
-            {text}
-          </SmallText>
-        )}
-      </View>
-    </GestureHandlerRootView>
-  );
-};
-
-export {FailedTextBubble};

package/src/components/molecules/failed-to-send/failed-bubble.styles.d.ts

@@ -1,38 +0,0 @@
-export function Stylesheet(context: any): {
-  rootContainer: {
-    flexDirection: 'row';
-    gap: number;
-  };
-  iconContainer: {
-    padding: number;
-    justifyContent: 'center';
-  };
-  textBubbleContainer: {
-    flex: number;
-    paddingLeft: number;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-    justifyContent: 'center';
-    backgroundColor: any;
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-    borderBottomLeftRadius: number;
-    borderBottomRightRadius: number;
-  };
-  text: {
-    minHeight: number;
-    textAlignVertical: 'center';
-    backgroundColor: any;
-  };
-  swipedIcon: {
-    alignItems: 'center';
-    justifyContent: 'center';
-  };
-  swipedRow: {
-    flex: number;
-    flexDirection: 'row';
-    alignItems: 'center';
-    justifyContent: 'space-evenly';
-  };
-};

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

@@ -1,42 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale/index';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    rootContainer: {
-      flexDirection: 'row',
-      gap: Scale.s,
-    },
-    iconContainer: {
-      padding: Scale.xxxs,
-      justifyContent: 'center',
-    },
-    textBubbleContainer: {
-      flex: 1,
-      paddingLeft: Scale.l,
-      paddingTop: Scale.m,
-      paddingRight: Scale.l,
-      paddingBottom: Scale.m,
-      justifyContent: 'center',
-      backgroundColor: context.colors.ui.error.default,
-      borderTopLeftRadius: Scale.l,
-      borderTopRightRadius: Scale.l,
-      borderBottomLeftRadius: Scale.xs,
-      borderBottomRightRadius: Scale.xl,
-    },
-    text: {
-      minHeight: 30,
-      textAlignVertical: 'center',
-      backgroundColor: context.colors.ui.error.default,
-    },
-    swipedIcon: {
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    swipedRow: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-evenly',
-    },
-  });

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