@tactics/toddle-styleguide 1.2.5 → 1.2.6

package/package.json

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

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

@@ -1804,7 +1804,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Woensdag 12 Juli 2023 "
+            accessibilityLabel=" Woensdag 12 Juli 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1836,10 +1836,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,
@@ -1859,9 +1855,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1892,7 +1885,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 13 Juli 2023 "
+            accessibilityLabel="today Donderdag 13 Juli 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1924,6 +1917,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,
@@ -1943,6 +1940,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -5782,8 +5782,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Woensdag 12 Juli 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Woensdag 12 Juli 2023 "
             accessibilityState={
               {
                 "busy": undefined,
@@ -5814,10 +5813,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,
@@ -5838,7 +5833,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5870,7 +5865,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Donderdag 13 Juli 2023 "
+            accessibilityLabel="today Donderdag 13 Juli 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
@@ -5901,6 +5897,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,
@@ -5921,7 +5921,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

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

@@ -36,7 +36,7 @@ exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected i
     style={
       {
         "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
+        "backgroundColor": "#647ACB",
         "borderRadius": 50,
         "justifyContent": "center",
         "paddingBottom": 8,
@@ -51,13 +51,13 @@ exports[`test Tag renders Tag correctly (blue, bold grey text) when isSelected i
         [
           [
             {
-              "fontFamily": "Montserrat",
+              "fontFamily": "MontserratBold",
               "fontSize": 13,
               "lineHeight": 20.4,
             },
           ],
           {
-            "color": "#1F2933",
+            "color": "#E0E8F9",
             "textAlign": "center",
             "width": "100%",
           },

package/src/components/molecules/tag/tag.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useContext, useState} from 'react';
+import {useContext} from 'react';
 
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './tag.styles';
@@ -9,33 +9,28 @@ import {SmallText} from '../../atoms/paragraph-components';
 type TagProps = {
   value: string;
   label: string;
-  onPress: (event: string) => void;
+  onPress: (value: string, isSelected: boolean) => void;
+  isSelected: boolean;
 };
 
-const Tag = ({label, onPress, value}: TagProps) => {
-  const [isSelectedTag, setIsSelectedTag] = useState(false);
+const Tag = ({label, onPress, value, isSelected}: TagProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, isSelectedTag);
+  const styles = Stylesheet(context, isSelected);
 
   const onClicked = () => {
-    setIsSelectedTag((current) => !current);
-    onPress(value);
+    onPress(value, !isSelected);
   };
 
   return (
     <Pressable onPress={onClicked}>
       <View style={styles.container}>
-        {isSelectedTag ? (
-          <SmallText
-            bold={true}
-            textAlign={'center'}
-            textColor={context.colors.main[9]}
-          >
-            {label}
-          </SmallText>
-        ) : (
-          <SmallText textAlign={'center'}>{label}</SmallText>
-        )}
+        <SmallText
+          bold={isSelected}
+          textAlign={'center'}
+          textColor={isSelected ? context.colors.main[9] : undefined}
+        >
+          {label}
+        </SmallText>
       </View>
     </Pressable>
   );

package/src/components/molecules/tag/tag.preview.tsx

@@ -1,11 +1,23 @@
 import React, {useState} from 'react';
 import {Tag} from './tag.component';
-import {View} from 'react-native';
+import {View, Text} from 'react-native';
 
 export const TagPreview = ({}: {}) => {
-  const [value, setValue] = useState('');
+  const [singleTag, setSingleTag] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  const handleSingleTagPress = (value: string) => {
+    setSingleTag(value);
+  };
+
+  const handleTagPress = (value: string, isSelected: boolean) => {
+    if (isSelected) {
+      setSelectedTags([...selectedTags, value]);
+    } else {
+      setSelectedTags(selectedTags.filter((tag) => tag !== value));
+    }
+  };
 
-  console.log(value);
   return (
     <View
       style={{
@@ -16,15 +28,58 @@ export const TagPreview = ({}: {}) => {
         gap: 12,
       }}
     >
+      <Text>Select single tag</Text>
+      <View>
+        <Tag
+          value={'Option 1'}
+          label={'Option 1'}
+          onPress={handleSingleTagPress}
+          isSelected={singleTag === 'Option 1'}
+        />
+      </View>
+      <View>
+        <Tag
+          value={'Option 2'}
+          label={'Option 2'}
+          onPress={handleSingleTagPress}
+          isSelected={singleTag === 'Option 2'}
+        />
+      </View>
+      <View>
+        <Tag
+          value={'Option 3'}
+          label={'Option 3'}
+          onPress={handleSingleTagPress}
+          isSelected={singleTag === 'Option 3'}
+        />
+      </View>
+      <Text style={{marginBottom: 16}}>Selected tag: {singleTag}</Text>
+      <Text>Select multiple tags</Text>
       <View>
-        <Tag value={'tab1'} label={'Algemeen'} onPress={setValue} />
+        <Tag
+          value={'Algemeen'}
+          label={'Algemeen'}
+          onPress={handleTagPress}
+          isSelected={selectedTags.includes('Algemeen')}
+        />
       </View>
       <View>
-        <Tag value={'tab2'} label={'Gezondheid'} onPress={setValue} />
+        <Tag
+          value={'Gezondheid'}
+          label={'Gezondheid'}
+          onPress={handleTagPress}
+          isSelected={selectedTags.includes('Gezondheid')}
+        />
       </View>
       <View>
-        <Tag value={'tab3'} label={'Activiteit'} onPress={setValue} />
+        <Tag
+          value={'Activiteit'}
+          label={'Activiteit'}
+          onPress={handleTagPress}
+          isSelected={selectedTags.includes('Activiteit')}
+        />
       </View>
+      <Text>Selected tags: {selectedTags.join(', ')}</Text>
     </View>
   );
 };

package/src/components/molecules/tag/tag.test.js

@@ -10,6 +10,7 @@ describe('test Tag', () => {
           value={'Geblokkeerd'}
           text={'Geblokkeerd'}
           onPress={(value) => console.log(value)}
+          isSelected={false}
         />
       )
       .toJSON();
@@ -23,6 +24,7 @@ describe('test Tag', () => {
           value={'Test2'}
           text={'Tag2'}
           onPress={(value) => console.log(value)}
+          isSelected={true}
         />
       )
       .toJSON();