@tactics/toddle-styleguide 1.2.8 → 1.3.0

package/App.tsx

@@ -71,6 +71,8 @@ import {TimePickerPreview} from './src/components/molecules/time-picker/time-pic
 import {PopOverActionPreview} from './src/components/templates/popover-action/popover-action.preview';
 import {QuickMessagePreview} from './src/components/atoms/quick-message/quick-message.preview';
 import {TabViewPreview} from './src/components/organisms/tab-view/tab-view.preview';
+import {LinePreview} from './src/components/atoms/line/line.preview';
+import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -179,10 +181,15 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Info Component"
         onPress={() => navigation.push('info')}
       />
+      <ReactBtn
+        title="Journal Entry"
+        onPress={() => navigation.push('journal-entry')}
+      />
       <ReactBtn
         title="Language Button"
         onPress={() => navigation.push('language-button')}
       />
+      <ReactBtn title="Line" onPress={() => navigation.push('line')} />
       <ReactBtn
         title="Loading Indicator"
         onPress={() => navigation.push('loading-indicator')}
@@ -371,9 +378,13 @@ function App() {
             {() => <IncrementInputPreview />}
           </Stack.Screen>
           <Stack.Screen name="info">{() => <InfoPreview />}</Stack.Screen>
+          <Stack.Screen name="journal-entry">
+            {() => <JournalEntryPreview />}
+          </Stack.Screen>
           <Stack.Screen name="language-button">
             {() => <LanguageButtonPreview />}
           </Stack.Screen>
+          <Stack.Screen name="line">{() => <LinePreview />}</Stack.Screen>
           <Stack.Screen name="loading-indicator">
             {() => <LoadingIndicatorPreview />}
           </Stack.Screen>

package/index.d.ts

@@ -56,6 +56,7 @@ import { TimePicker } from './src/components/molecules/time-picker/time-picker.c
 import { PopOverAction } from './src/components/templates/popover-action/popover-action.component';
 import { QuickMessage } from './src/components/atoms/quick-message/quick-message.component';
 import { TabView } from './src/components/organisms/tab-view/tab-view.component';
+import { Line } from './src/components/atoms/line/line.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -65,4 +66,4 @@ import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, LanguageButton, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, };
+export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, };

package/index.tsx

@@ -74,6 +74,7 @@ import {TimePicker} from './src/components/molecules/time-picker/time-picker.com
 import {PopOverAction} from './src/components/templates/popover-action/popover-action.component';
 import {QuickMessage} from './src/components/atoms/quick-message/quick-message.component';
 import {TabView} from './src/components/organisms/tab-view/tab-view.component';
+import {Line} from './src/components/atoms/line/line.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -126,6 +127,7 @@ export {
   IncrementInput,
   Info,
   LanguageButton,
+  Line,
   LoadingIndicator,
   Logo,
   MessageInput,

package/package.json

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

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",
-                  },
                 ]
               }
             >
@@ -1307,7 +1300,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 10 Augustus 2023 "
+            accessibilityLabel="today Donderdag 10 Augustus 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1339,6 +1332,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,
@@ -1358,6 +1355,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",
                   },
                 ]
               }
@@ -4688,7 +4683,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 10 Augustus 2023 "
+            accessibilityLabel="today Donderdag 10 Augustus 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -4719,6 +4715,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,
@@ -4739,7 +4739,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

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

@@ -0,0 +1,12 @@
+type Orientation = 'horizontal' | 'vertical';
+interface LineProps {
+  color?: string;
+  thickness?: number;
+  orientation?: Orientation;
+}
+export declare const Line: ({
+  color,
+  thickness,
+  orientation,
+}: LineProps) => JSX.Element;
+export {};

package/src/components/atoms/line/line.component.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './line.styles';
+
+type Orientation = 'horizontal' | 'vertical';
+
+interface LineProps {
+  color?: string;
+  thickness?: number;
+  orientation?: Orientation;
+}
+
+export const Line = ({
+  color,
+  thickness = 1,
+  orientation = 'horizontal',
+}: LineProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, color, orientation, thickness);
+  return <View style={styles.container} />;
+};

package/src/components/atoms/line/line.preview.d.ts

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

package/src/components/atoms/line/line.preview.tsx

@@ -0,0 +1,54 @@
+import {View} from 'react-native';
+import {Line} from './line.component';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+
+export const LinePreview = () => {
+  const context = useContext(ThemeCtx);
+  return (
+    <View style={{flex: 1, gap: 24, padding: 32, backgroundColor: 'white'}}>
+      <Line />
+      <Line
+        color={context.colors.main[5]}
+        orientation={'horizontal'}
+        thickness={2}
+      />
+      <Line
+        color={context.colors.main[9]}
+        orientation={'horizontal'}
+        thickness={3}
+      />
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          alignItems: 'center',
+        }}
+      >
+        <Line
+          color={context.colors.main[7]}
+          orientation={'vertical'}
+          thickness={14}
+        />
+        <Line
+          color={context.colors.main[0]}
+          orientation={'vertical'}
+          thickness={6}
+        />
+      </View>
+      <View style={{flex: 1, gap: 24}}>
+        <Line
+          color={context.colors.main[5]}
+          orientation={'horizontal'}
+          thickness={6}
+        />
+        <Line
+          color={context.colors.main[9]}
+          orientation={'horizontal'}
+          thickness={12}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/line/line.styles.d.ts

@@ -0,0 +1,12 @@
+export function Stylesheet(
+  context: any,
+  color: any,
+  orientation: any,
+  thickness: any
+): {
+  container: {
+    backgroundColor: any;
+    height: any;
+    width: any;
+  };
+};

package/src/components/atoms/line/line.styles.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (context, color, orientation, thickness) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: color ? color : context.colors.ui.xlightgrey,
+      height: orientation === 'horizontal' ? thickness : '100%',
+      width: orientation === 'vertical' ? thickness : '100%',
+    },
+  });

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

@@ -2,10 +2,12 @@ import {PressableProps} from 'react-native';
 interface QuickMessageProps extends PressableProps {
   message: string;
   setMessage: (value: string) => void;
+  selectedMessage: boolean;
 }
 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,4 +1,7 @@
-export function Stylesheet(context: any): {
+export function Stylesheet(
+  context: any,
+  selectedMessage: any
+): {
   container: {
     width: string;
     backgroundColor: any;

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