@tactics/toddle-styleguide 1.2.8 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

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

@@ -1,9 +1,6 @@
 type PopoverBackdropProps = {
-  isVisible: boolean;
-  touchBackDrop?: (value: boolean) => void;
+    isVisible: boolean;
+    touchBackDrop?: (value: boolean) => void;
 };
-declare const Backdrop: ({
-  isVisible,
-  touchBackDrop,
-}: PopoverBackdropProps) => JSX.Element;
-export {Backdrop as Backdrop};
+declare const Backdrop: ({ isVisible, touchBackDrop }: PopoverBackdropProps) => JSX.Element;
+export { Backdrop as Backdrop };

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -642,7 +642,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Woensdag 2 Augustus 2023 "
+            accessibilityLabel=" Woensdag 2 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -674,10 +674,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -697,9 +693,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -811,7 +804,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 4 Augustus 2023 "
+            accessibilityLabel="today Vrijdag 4 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -843,6 +836,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -862,6 +859,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4009,8 +4009,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Woensdag 2 Augustus 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Woensdag 2 Augustus 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -4041,10 +4040,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4065,7 +4060,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -4180,7 +4175,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Vrijdag 4 Augustus 2023 "
+            accessibilityLabel="today Vrijdag 4 Augustus 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4211,6 +4207,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4231,7 +4231,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

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

@@ -1,14 +1,9 @@
-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,10 +1,2 @@
-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,10 +1,2 @@
-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,10 +1,2 @@
-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,10 +1,2 @@
-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,10 +1,2 @@
-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,11 +1,8 @@
-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,11 +1,7 @@
 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,10 +1,2 @@
-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,10 +1,2 @@
-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,10 +1,2 @@
-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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`QuickMessage should render correctly 1`] = `
+exports[`QuickMessage should render a quick message that is not selected 1`] = `
 <View
   accessibilityState={
     {
@@ -70,3 +70,74 @@ exports[`QuickMessage should render correctly 1`] = `
   </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,11 +1,8 @@
-import {PressableProps} from 'react-native';
+import { PressableProps } from 'react-native';
 interface QuickMessageProps extends PressableProps {
-  message: string;
-  setMessage: (value: string) => void;
+    message: string;
+    setMessage: (value: string) => void;
+    selectedMessage: boolean;
 }
-export declare const QuickMessage: ({
-  message,
-  setMessage,
-  ...props
-}: QuickMessageProps) => JSX.Element;
+export declare const QuickMessage: ({ message, setMessage, selectedMessage, ...props }: QuickMessageProps) => JSX.Element;
 export {};

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

@@ -7,15 +7,17 @@ import {Stylesheet} from './quick-message.styles';
 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);
+  const styles = Stylesheet(context, selectedMessage);
 
   return (
     <Pressable

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

@@ -15,16 +15,25 @@ export const QuickMessagePreview = () => {
         padding: 32,
       }}
     >
-      <QuickMessage message={'Test message'} setMessage={setMessage} />
+      <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>

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

@@ -1,14 +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;
-  };
+export function Stylesheet(context: any, selectedMessage: 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

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

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

@@ -3,19 +3,51 @@ import {render, fireEvent} from '@testing-library/react-native';
 import {QuickMessage} from './quick-message.component';
 
 describe('QuickMessage', () => {
-  it('should render correctly', () => {
+  it('should render a quick message that is not selected', () => {
     const {toJSON} = render(
-      <QuickMessage message="Test message" setMessage={() => {}} />
+      <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();
   });
-});
 
-describe('QuickMessage', () => {
-  it('should set the message when pressed', () => {
+  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} />
+      <QuickMessage
+        message="Test message"
+        setMessage={setMessageMock}
+        selectedMessage={false} // Mocking selectedMessage as false
+      />
     );
 
     const pressable = getByTestId('quick-message-test');

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

@@ -1,10 +1,7 @@
 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 };