@tactics/toddle-styleguide 5.0.0 → 5.0.2

package/src/components/atoms/quick-message/__snapshots__/quick-message.test.js.snap

@@ -1,143 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`QuickMessage should render a quick message that is not selected 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": "#515F6C",
-      "borderBottomLeftRadius": 8,
-      "borderBottomRightRadius": 24,
-      "borderTopLeftRadius": 24,
-      "borderTopRightRadius": 24,
-      "paddingBottom": 24,
-      "paddingLeft": 24,
-      "paddingRight": 24,
-      "paddingTop": 24,
-      "width": "100%",
-    }
-  }
-  testID="quick-message-test"
->
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "Montserrat",
-            "fontSize": 14,
-            "lineHeight": 22.4,
-          },
-        ],
-        {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
-  >
-    Test message
-  </Text>
-</View>
-`;
-
-exports[`QuickMessage should render a quick message that is selected 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": "#647ACB",
-      "borderBottomLeftRadius": 8,
-      "borderBottomRightRadius": 24,
-      "borderTopLeftRadius": 24,
-      "borderTopRightRadius": 24,
-      "paddingBottom": 24,
-      "paddingLeft": 24,
-      "paddingRight": 24,
-      "paddingTop": 24,
-      "width": "100%",
-    }
-  }
-  testID="quick-message-test"
->
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "Montserrat",
-            "fontSize": 14,
-            "lineHeight": 22.4,
-          },
-        ],
-        {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
-  >
-    Test message
-  </Text>
-</View>
-`;

package/src/components/atoms/quick-message/quick-message.component.d.ts

@@ -1,9 +0,0 @@
-import { PressableProps } from 'react-native';
-import React from 'react';
-interface QuickMessageProps extends PressableProps {
-    message: string;
-    setMessage: (value: string) => void;
-    selectedMessage: boolean;
-}
-export declare const QuickMessage: ({ message, setMessage, selectedMessage, ...props }: QuickMessageProps) => React.JSX.Element;
-export {};

package/src/components/atoms/quick-message/quick-message.component.tsx

@@ -1,35 +0,0 @@
-import {Pressable, PressableProps} from 'react-native';
-import {Paragraph} from '../paragraph-components';
-import {useContext} from 'react';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './quick-message.styles';
-import React from 'react';
-
-interface QuickMessageProps extends PressableProps {
-  message: string;
-  setMessage: (value: string) => void;
-  selectedMessage: boolean;
-}
-
-export const QuickMessage = ({
-  message,
-  setMessage,
-  selectedMessage,
-  ...props
-}: QuickMessageProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, selectedMessage);
-
-  return (
-    <Pressable
-      onPress={() => setMessage(message)}
-      {...props}
-      style={styles.container}
-      testID={'quick-message-test'}
-    >
-      <Paragraph textAlign={'center'} textColor={context.colors.ui.white}>
-        {message}
-      </Paragraph>
-    </Pressable>
-  );
-};

package/src/components/atoms/quick-message/quick-message.preview.d.ts

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

package/src/components/atoms/quick-message/quick-message.preview.tsx

@@ -1,43 +0,0 @@
-import {Text, View} from 'react-native';
-import {QuickMessage} from './quick-message.component';
-import {useState} from 'react';
-import React from 'react';
-
-export const QuickMessagePreview = () => {
-  const [message, setMessage] = useState<string>('');
-  return (
-    <View
-      style={{
-        width: '100%',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 32,
-        padding: 32,
-      }}
-    >
-      <QuickMessage
-        message={'Test message'}
-        setMessage={setMessage}
-        selectedMessage={message === 'Test message'}
-      />
-      <QuickMessage
-        message={'Option message number 2'}
-        setMessage={setMessage}
-        selectedMessage={message === 'Option message number 2'}
-      />
-      <QuickMessage
-        message={
-          'Aan het spelen met mijn vriendjes en vriendinnetjes in de speelhoek'
-        }
-        setMessage={setMessage}
-        selectedMessage={
-          message ===
-          'Aan het spelen met mijn vriendjes en vriendinnetjes in de speelhoek'
-        }
-      />
-
-      <Text style={{textAlign: 'center'}}>Pressed message: {message}</Text>
-    </View>
-  );
-};

package/src/components/atoms/quick-message/quick-message.styles.d.ts

@@ -1,17 +0,0 @@
-export function Stylesheet(
-  context: any,
-  selectedMessage: any
-): {
-  container: {
-    width: '100%';
-    backgroundColor: any;
-    paddingTop: number;
-    paddingBottom: number;
-    paddingRight: number;
-    paddingLeft: number;
-    borderBottomLeftRadius: number;
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-  };
-};

package/src/components/atoms/quick-message/quick-message.styles.js

@@ -1,20 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale/index';
-
-export const Stylesheet = (context, selectedMessage) =>
-  StyleSheet.create({
-    container: {
-      width: '100%',
-      backgroundColor: !selectedMessage
-        ? context.colors.ui.darkgrey
-        : context.colors.main['5'],
-      paddingTop: Scale.l,
-      paddingBottom: Scale.l,
-      paddingRight: Scale.l,
-      paddingLeft: Scale.l,
-      borderBottomLeftRadius: Scale.xs,
-      borderTopLeftRadius: Scale.l,
-      borderTopRightRadius: Scale.l,
-      borderBottomRightRadius: Scale.l,
-    },
-  });

package/src/components/atoms/quick-message/quick-message.test.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import {render, fireEvent} from '@testing-library/react-native';
-import {QuickMessage} from './quick-message.component';
-
-describe('QuickMessage', () => {
-  it('should render a quick message that is not selected', () => {
-    const {toJSON} = render(
-      <QuickMessage
-        message="Test message"
-        setMessage={() => {}}
-        selectedMessage={false}
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-  it('should render a quick message that is selected', () => {
-    const {toJSON} = render(
-      <QuickMessage
-        message="Test message"
-        setMessage={() => {}}
-        selectedMessage={true}
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('calls setMessage when pressed (selected)', () => {
-    const setMessageMock = jest.fn();
-    const {getByTestId} = render(
-      <QuickMessage
-        message="Test message"
-        setMessage={setMessageMock}
-        selectedMessage={true} // Mocking selectedMessage as true
-      />
-    );
-
-    const pressable = getByTestId('quick-message-test');
-    fireEvent.press(pressable);
-
-    expect(setMessageMock).toHaveBeenCalledWith('Test message');
-  });
-
-  it('calls setMessage when pressed (not selected)', () => {
-    const setMessageMock = jest.fn();
-    const {getByTestId} = render(
-      <QuickMessage
-        message="Test message"
-        setMessage={setMessageMock}
-        selectedMessage={false} // Mocking selectedMessage as false
-      />
-    );
-
-    const pressable = getByTestId('quick-message-test');
-    fireEvent.press(pressable);
-
-    expect(setMessageMock).toHaveBeenCalledWith('Test message');
-  });
-});

package/src/components/atoms/split-container/__snapshots__/split-container.test.js.snap

@@ -1,333 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test split-container renders correctly when A COLORED ICON is provided  1`] = `
-<View
-  style={
-    {
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "justifyContent": "center",
-        },
-        {},
-      ]
-    }
-  >
-    <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={20}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11 1.5C11 0.947715 10.5523 0.5 9.99998 0.5C9.44769 0.5 8.99998 0.947715 8.99998 1.5H11ZM8.99998 2.625C8.99998 3.17728 9.44769 3.625 9.99998 3.625C10.5523 3.625 11 3.17728 11 2.625H8.99998ZM16.5 14C15.9477 14 15.5 14.4477 15.5 15C15.5 15.5523 15.9477 16 16.5 16V14ZM18.6666 16C19.2189 16 19.6666 15.5523 19.6666 15C19.6666 14.4477 19.2189 14 18.6666 14V16ZM9.99998 15V14C9.44769 14 8.99998 14.4477 8.99998 15H9.99998ZM12.1666 16C12.7189 16 13.1666 15.5523 13.1666 15C13.1666 14.4477 12.7189 14 12.1666 14V16ZM8.99998 19.5C8.99998 20.0523 9.44769 20.5 9.99998 20.5C10.5523 20.5 11 20.0523 11 19.5H8.99998ZM11 7.125C11 6.57272 10.5523 6.125 9.99998 6.125C9.44769 6.125 8.99998 6.57272 8.99998 7.125H11ZM9.99998 10.5H8.99998C8.99998 11.0523 9.44769 11.5 9.99998 11.5V10.5ZM14.3333 18.5C13.781 18.5 13.3333 18.9477 13.3333 19.5C13.3333 20.0523 13.781 20.5 14.3333 20.5V18.5ZM18.6666 20.5C19.2189 20.5 19.6666 20.0523 19.6666 19.5C19.6666 18.9477 19.2189 18.5 18.6666 18.5V20.5ZM1.33331 9.5C0.781028 9.5 0.333313 9.94771 0.333313 10.5C0.333313 11.0523 0.781028 11.5 1.33331 11.5V9.5ZM5.66665 11.5C6.21893 11.5 6.66665 11.0523 6.66665 10.5C6.66665 9.94771 6.21893 9.5 5.66665 9.5V11.5ZM10.0108 11.5C10.5631 11.5 11.0108 11.0523 11.0108 10.5C11.0108 9.94771 10.5631 9.5 10.0108 9.5V11.5ZM14.3441 11.5C14.8964 11.5 15.3441 11.0523 15.3441 10.5C15.3441 9.94771 14.8964 9.5 14.3441 9.5V11.5ZM18.6666 9.5C18.1144 9.5 17.6666 9.94771 17.6666 10.5C17.6666 11.0523 18.1144 11.5 18.6666 11.5V9.5ZM18.6775 11.5C19.2298 11.5 19.6775 11.0523 19.6775 10.5C19.6775 9.94771 19.2298 9.5 18.6775 9.5V11.5ZM2.41665 2.5H4.58331V0.5H2.41665V2.5ZM4.66665 2.625V4.875H6.66665V2.625H4.66665ZM4.58331 5H2.41665V7H4.58331V5ZM2.33331 4.875V2.625H0.333313V4.875H2.33331ZM2.41665 5C2.40602 5 2.39043 4.9971 2.37093 4.97685C2.3508 4.95595 2.33331 4.92194 2.33331 4.875H0.333313C0.333313 6.0127 1.23082 7 2.41665 7V5ZM4.66665 4.875C4.66665 4.92194 4.64916 4.95595 4.62902 4.97685C4.60953 4.9971 4.59394 5 4.58331 5V7C5.76914 7 6.66665 6.0127 6.66665 4.875H4.66665ZM4.58331 2.5C4.59394 2.5 4.60953 2.5029 4.62902 2.52315C4.64916 2.54405 4.66665 2.57806 4.66665 2.625H6.66665C6.66665 1.4873 5.76914 0.5 4.58331 0.5V2.5ZM2.41665 0.5C1.23082 0.5 0.333313 1.4873 0.333313 2.625H2.33331C2.33331 2.57806 2.3508 2.54405 2.37093 2.52315C2.39043 2.5029 2.40602 2.5 2.41665 2.5V0.5ZM15.4166 2.5H17.5833V0.5H15.4166V2.5ZM17.6666 2.625V4.875H19.6666V2.625H17.6666ZM17.5833 5H15.4166V7H17.5833V5ZM15.3333 4.875V2.625H13.3333V4.875H15.3333ZM15.4166 5C15.406 5 15.3904 4.9971 15.3709 4.97685C15.3508 4.95595 15.3333 4.92194 15.3333 4.875H13.3333C13.3333 6.0127 14.2308 7 15.4166 7V5ZM17.6666 4.875C17.6666 4.92194 17.6492 4.95595 17.629 4.97685C17.6095 4.9971 17.5939 5 17.5833 5V7C18.7691 7 19.6666 6.0127 19.6666 4.875H17.6666ZM17.5833 2.5C17.5939 2.5 17.6095 2.5029 17.629 2.52315C17.6492 2.54405 17.6666 2.57806 17.6666 2.625H19.6666C19.6666 1.4873 18.7691 0.5 17.5833 0.5V2.5ZM15.4166 0.5C14.2308 0.5 13.3333 1.4873 13.3333 2.625H15.3333C15.3333 2.57806 15.3508 2.54405 15.3709 2.52315C15.3904 2.5029 15.406 2.5 15.4166 2.5V0.5ZM2.41665 16H4.58331V14H2.41665V16ZM4.66665 16.125V18.375H6.66665V16.125H4.66665ZM4.58331 18.5H2.41665V20.5H4.58331V18.5ZM2.33331 18.375V16.125H0.333313V18.375H2.33331ZM2.41665 18.5C2.40602 18.5 2.39043 18.4971 2.37093 18.4769C2.3508 18.4559 2.33331 18.4219 2.33331 18.375H0.333313C0.333313 19.5127 1.23082 20.5 2.41665 20.5V18.5ZM4.66665 18.375C4.66665 18.4219 4.64916 18.4559 4.62902 18.4769C4.60953 18.4971 4.59394 18.5 4.58331 18.5V20.5C5.76914 20.5 6.66665 19.5127 6.66665 18.375H4.66665ZM4.58331 16C4.59394 16 4.60953 16.0029 4.62902 16.0231C4.64916 16.0441 4.66665 16.0781 4.66665 16.125H6.66665C6.66665 14.9873 5.76914 14 4.58331 14V16ZM2.41665 14C1.23082 14 0.333313 14.9873 0.333313 16.125H2.33331C2.33331 16.0781 2.3508 16.0441 2.37093 16.0231C2.39043 16.0029 2.40602 16 2.41665 16V14ZM8.99998 1.5V2.625H11V1.5H8.99998ZM16.5 16H18.6666V14H16.5V16ZM9.99998 16H12.1666V14H9.99998V16ZM8.99998 15V19.5H11V15H8.99998ZM8.99998 7.125V10.5H11V7.125H8.99998ZM14.3333 20.5H18.6666V18.5H14.3333V20.5ZM1.33331 11.5H5.66665V9.5H1.33331V11.5ZM9.99998 11.5H10.0108V9.5H9.99998V11.5ZM18.6666 11.5H18.6775V9.5H18.6666V11.5ZM9.99998 11.5H14.3441V9.5H9.99998V11.5Z"
-          fill={
-            {
-              "payload": 4283522924,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "fill",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`test split-container renders correctly when ONE ELEMENT is provided  1`] = `
-<View
-  style={
-    {
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "justifyContent": "center",
-        },
-        {},
-      ]
-    }
-  >
-    <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]}
-    >
-      <View
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "#19216C",
-            "borderRadius": 50,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "paddingHorizontal": 24,
-            "paddingVertical": 12,
-          }
-        }
-      >
-        <View>
-          <Text
-            style={
-              [
-                [
-                  {
-                    "fontFamily": "SourceSansPro",
-                    "fontSize": 16,
-                    "lineHeight": 22.4,
-                  },
-                ],
-                {
-                  "color": "#E0E8F9",
-                  "textAlign": "center",
-                  "width": "100%",
-                },
-                undefined,
-              ]
-            }
-          >
-            Toepassen
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test split-container renders correctly when TWO ELEMENTS are provided 1`] = `
-<View
-  style={
-    {
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "justifyContent": "center",
-        },
-        {
-          "justifyContent": "space-between",
-        },
-      ]
-    }
-  >
-    <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={
-        {
-          "alignItems": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 50,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "paddingHorizontal": 24,
-          "paddingVertical": 12,
-        }
-      }
-    >
-      <View>
-        <Text
-          style={
-            [
-              [
-                {
-                  "fontFamily": "Montserrat",
-                  "fontSize": 13,
-                  "lineHeight": 20.4,
-                },
-              ],
-              {
-                "color": "#515F6C",
-                "textAlign": "center",
-                "width": "100%",
-              },
-              undefined,
-            ]
-          }
-        >
-          Selecteer alle
-        </Text>
-      </View>
-    </View>
-    <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]}
-    >
-      <View
-        style={
-          {
-            "alignItems": "center",
-            "backgroundColor": "#19216C",
-            "borderRadius": 50,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "paddingHorizontal": 24,
-            "paddingVertical": 12,
-          }
-        }
-      >
-        <View>
-          <Text
-            style={
-              [
-                [
-                  {
-                    "fontFamily": "SourceSansPro",
-                    "fontSize": 16,
-                    "lineHeight": 22.4,
-                  },
-                ],
-                {
-                  "color": "#E0E8F9",
-                  "textAlign": "center",
-                  "width": "100%",
-                },
-                undefined,
-              ]
-            }
-          >
-            Kies actie
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;

package/src/components/atoms/split-container/split-container.component.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-type splitContainerProps = {
-    element1: React.ReactNode;
-    element2?: React.ReactNode;
-};
-declare const SplitContainer: ({ element1, element2 }: splitContainerProps) => React.JSX.Element;
-export { SplitContainer as SplitContainer };