@tactics/toddle-styleguide 1.2.6 → 1.2.8

package/src/components/atoms/calendar/calendar.component.d.ts

@@ -1,9 +1,14 @@
-import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type CalendarProps = {
-    onDayPress: (day: ToddleDateTime) => void;
-    selected: ToddleDateTime;
-    minDate?: string;
-    maxDate?: string;
+  onDayPress: (day: ToddleDateTime) => void;
+  selected: ToddleDateTime;
+  minDate?: string;
+  maxDate?: string;
 };
-export declare const Calendar: ({ onDayPress, selected, minDate, maxDate, }: CalendarProps) => JSX.Element;
+export declare const Calendar: ({
+  onDayPress,
+  selected,
+  minDate,
+  maxDate,
+}: CalendarProps) => JSX.Element;
 export {};

package/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -1,6 +1,6 @@
 type CheckProps = {
-    value: boolean;
-    onToggle: () => void;
+  value: boolean;
+  onToggle: () => void;
 };
-export declare const Check: ({ value, onToggle }: CheckProps) => JSX.Element;
+export declare const Check: ({value, onToggle}: CheckProps) => JSX.Element;
 export {};

package/src/components/atoms/footer/footer.component.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
-import { AnimateStyle } from 'react-native-reanimated';
+import {ViewStyle} from 'react-native';
+import {AnimateStyle} from 'react-native-reanimated';
 type FooterProps = {
-    children: React.ReactNode;
-    animatedStyle?: AnimateStyle<ViewStyle>;
+  children: React.ReactNode;
+  animatedStyle?: AnimateStyle<ViewStyle>;
 };
-declare const Footer: ({ children, animatedStyle }: FooterProps) => JSX.Element;
-export { Footer as Footer };
+declare const Footer: ({children, animatedStyle}: FooterProps) => JSX.Element;
+export {Footer as Footer};

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const AllCapsHeading: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const AllCapsHeading: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  numberOfLines,
+  ellipsizeMode,
+  addStyle,
+}: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading1/heading1.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading1: ({ bold, children, textColor, textAlign, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading1: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  ellipsizeMode,
+  numberOfLines,
+}: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading2/heading2.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading2: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading2: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  numberOfLines,
+  ellipsizeMode,
+  addStyle,
+}: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading3/heading3.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading3: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading3: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading4/heading4.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading4: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Heading4: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/index.d.ts

@@ -1,6 +1,6 @@
-import { Heading1 } from './heading1/heading1.component';
-import { Heading2 } from './heading2/heading2.component';
-import { Heading3 } from './heading3/heading3.component';
-import { Heading4 } from './heading4/heading4.component';
-import { AllCapsHeading } from './all-caps-heading/all-caps-heading.component';
-export { AllCapsHeading, Heading1, Heading2, Heading3, Heading4 };
+import {Heading1} from './heading1/heading1.component';
+import {Heading2} from './heading2/heading2.component';
+import {Heading3} from './heading3/heading3.component';
+import {Heading4} from './heading4/heading4.component';
+import {AllCapsHeading} from './all-caps-heading/all-caps-heading.component';
+export {AllCapsHeading, Heading1, Heading2, Heading3, Heading4};

package/src/components/atoms/image-bubble/image-bubble.component.d.ts

@@ -1,8 +1,11 @@
-import { ImageSourcePropType } from 'react-native';
-import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
+import {ImageSourcePropType} from 'react-native';
+import {BubbleAlignment} from '../../../types/bubble-alignment.enum';
 type ImageBubbleProps = {
-    source: ImageSourcePropType;
-    bubbleAlignment: BubbleAlignment;
+  source: ImageSourcePropType;
+  bubbleAlignment: BubbleAlignment;
 };
-declare const ImageBubble: ({ source, bubbleAlignment }: ImageBubbleProps) => JSX.Element;
-export { ImageBubble as ImageBubble };
+declare const ImageBubble: ({
+  source,
+  bubbleAlignment,
+}: ImageBubbleProps) => JSX.Element;
+export {ImageBubble as ImageBubble};

package/src/components/atoms/increment-input/increment-input.component.d.ts

@@ -1,7 +1,11 @@
 type IncrementInputProps = {
-    value: number;
-    maxValue?: number;
-    onPress: (number: number) => void;
+  value: number;
+  maxValue?: number;
+  onPress: (number: number) => void;
 };
-export declare const IncrementInput: ({ value, onPress, maxValue, }: IncrementInputProps) => JSX.Element;
+export declare const IncrementInput: ({
+  value,
+  onPress,
+  maxValue,
+}: IncrementInputProps) => JSX.Element;
 export {};

package/src/components/atoms/logo/logo.component.d.ts

@@ -1,6 +1,6 @@
 type logoProps = {
-    colorIsWhite?: boolean;
-    big?: boolean;
+  colorIsWhite?: boolean;
+  big?: boolean;
 };
-declare const Logo: ({ colorIsWhite, big }: logoProps) => JSX.Element;
-export { Logo as Logo };
+declare const Logo: ({colorIsWhite, big}: logoProps) => JSX.Element;
+export {Logo as Logo};

package/src/components/atoms/paragraph-components/index.d.ts

@@ -1,4 +1,4 @@
-import { Paragraph } from './paragraph/paragraph.component';
-import { SmallText } from './small-text/small-text.component';
-import { TinyText } from './tiny-text/tiny-text.component';
-export { Paragraph, SmallText, TinyText };
+import {Paragraph} from './paragraph/paragraph.component';
+import {SmallText} from './small-text/small-text.component';
+import {TinyText} from './tiny-text/tiny-text.component';
+export {Paragraph, SmallText, TinyText};

package/src/components/atoms/paragraph-components/paragraph/paragraph.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Paragraph: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const Paragraph: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => JSX.Element;

package/src/components/atoms/paragraph-components/small-text/small-text.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const SmallText: ({ bold, textColor, textAlign, children, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const SmallText: ({
+  bold,
+  textColor,
+  textAlign,
+  children,
+  addStyle,
+  ellipsizeMode,
+  numberOfLines,
+}: TextProperties) => JSX.Element;

package/src/components/atoms/paragraph-components/tiny-text/tiny-text.component.d.ts

@@ -1,2 +1,10 @@
-import { TextProperties } from '../../../../types/text-properties.type';
-export declare const TinyText: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => JSX.Element;
+import {TextProperties} from '../../../../types/text-properties.type';
+export declare const TinyText: ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => JSX.Element;

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

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QuickMessage should render correctly 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>
+`;

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

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

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

@@ -0,0 +1,32 @@
+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';
+
+interface QuickMessageProps extends PressableProps {
+  message: string;
+  setMessage: (value: string) => void;
+}
+
+export const QuickMessage = ({
+  message,
+  setMessage,
+  ...props
+}: QuickMessageProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  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

@@ -0,0 +1 @@
+export declare const QuickMessagePreview: () => JSX.Element;

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

@@ -0,0 +1,33 @@
+import {Text, View} from 'react-native';
+import {QuickMessage} from './quick-message.component';
+import {useState} 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} />
+      <QuickMessage
+        message={'Option message number 2'}
+        setMessage={setMessage}
+      />
+      <QuickMessage
+        message={
+          'Aan het spelen met mijn vriendjes en vriendinnetjes in de speelhoek'
+        }
+        setMessage={setMessage}
+      />
+
+      <Text style={{textAlign: 'center'}}>Pressed message: {message}</Text>
+    </View>
+  );
+};

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

@@ -0,0 +1,14 @@
+export function Stylesheet(context: any): {
+  container: {
+    width: string;
+    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

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      backgroundColor: context.colors.ui.darkgrey,
+      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

@@ -0,0 +1,26 @@
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+import {QuickMessage} from './quick-message.component';
+
+describe('QuickMessage', () => {
+  it('should render correctly', () => {
+    const {toJSON} = render(
+      <QuickMessage message="Test message" setMessage={() => {}} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('QuickMessage', () => {
+  it('should set the message when pressed', () => {
+    const setMessageMock = jest.fn();
+    const {getByTestId} = render(
+      <QuickMessage message="Test message" setMessage={setMessageMock} />
+    );
+
+    const pressable = getByTestId('quick-message-test');
+    fireEvent.press(pressable);
+
+    expect(setMessageMock).toHaveBeenCalledWith('Test message');
+  });
+});

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

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

package/src/components/atoms/static-wave/static-wave.component.d.ts

@@ -1,8 +1,13 @@
-import { ViewStyle } from 'react-native';
+import {ViewStyle} from 'react-native';
 export type WaveProps = {
-    customStyle?: ViewStyle;
-    customWavePath?: string;
-    heightSvgContainer?: number;
-    positionTop?: number;
+  customStyle?: ViewStyle;
+  customWavePath?: string;
+  heightSvgContainer?: number;
+  positionTop?: number;
 };
-export declare const StaticWave: ({ customStyle, customWavePath, heightSvgContainer, positionTop, }: WaveProps) => JSX.Element;
+export declare const StaticWave: ({
+  customStyle,
+  customWavePath,
+  heightSvgContainer,
+  positionTop,
+}: WaveProps) => JSX.Element;

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -1,8 +1,12 @@
-import { TextInputProps as NativeTextInputProps } from 'react-native';
-import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
+import {TextInputProps as NativeTextInputProps} from 'react-native';
+import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
 interface TextInputProps extends NativeTextInputProps {
-    keyboardType: KeyBoardTypes;
-    border?: boolean;
+  keyboardType: KeyBoardTypes;
+  border?: boolean;
 }
-declare const TextInput: ({ keyboardType, border, ...props }: TextInputProps) => JSX.Element;
-export { TextInput as TextInput };
+declare const TextInput: ({
+  keyboardType,
+  border,
+  ...props
+}: TextInputProps) => JSX.Element;
+export {TextInput as TextInput};

package/src/components/atoms/text-input/text-input.preview.d.ts

@@ -1 +1 @@
-export declare const TextInputPreview: ({}?: {}) => JSX.Element;
+export declare const TextInputPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/avatar/avatar.component.d.ts

@@ -1,13 +1,20 @@
-import { ImageSourcePropType } from 'react-native';
-import { Size } from '../../../types/size.enum';
-import { Initials } from '../../../models/initials.model';
+import {ImageSourcePropType} from 'react-native';
+import {Size} from '../../../types/size.enum';
+import {Initials} from '../../../models/initials.model';
 type AvatarProps = {
-    source: ImageSourcePropType | Initials;
-    size: Size;
-    isBlocked?: boolean;
-    isActive?: boolean;
-    isLoading?: boolean;
-    hasShadow?: boolean;
+  source: ImageSourcePropType | Initials;
+  size: Size;
+  isBlocked?: boolean;
+  isActive?: boolean;
+  isLoading?: boolean;
+  hasShadow?: boolean;
 };
-declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, }: AvatarProps) => JSX.Element;
-export { Avatar as Avatar };
+declare const Avatar: ({
+  source,
+  size,
+  isBlocked,
+  isActive,
+  isLoading,
+  hasShadow,
+}: AvatarProps) => JSX.Element;
+export {Avatar as Avatar};

package/src/components/molecules/blocked-message/blocked-message.component.d.ts

@@ -1,5 +1,7 @@
 type BlockedMessageProps = {
-    message: string;
+  message: string;
 };
-export declare const BlockedMessage: ({ message }: BlockedMessageProps) => JSX.Element;
+export declare const BlockedMessage: ({
+  message,
+}: BlockedMessageProps) => JSX.Element;
 export {};

package/src/components/molecules/button/__snapshots__/button.test.js.snap

@@ -429,6 +429,78 @@ exports[`test button component should render a button component with a solid ico
 </View>
 `;
 
+exports[`test button component should render a light button component 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]}
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 50,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 24,
+        "paddingVertical": 12,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "SourceSansPro",
+                "fontSize": 16,
+                "lineHeight": 22.4,
+              },
+            ],
+            {
+              "color": "#515F6C",
+              "textAlign": "center",
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        Light button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`test button component should render a success button component 1`] = `
 <View
   accessibilityState={