@tactics/toddle-styleguide 1.7.12 → 1.7.14

package/package.json

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

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 type InfoProps = {
-    label: string;
+    label?: string;
     description: string;
+    active?: boolean;
 };
-declare const Info: ({ label, description }: InfoProps) => React.JSX.Element;
+declare const Info: ({ label, description, active }: InfoProps) => React.JSX.Element;
 export { Info as Info };

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

@@ -8,20 +8,21 @@ import {Heading3} from '../../atoms/heading-components';
 import {SmallText} from '../../atoms/paragraph-components';
 
 type InfoProps = {
-  label: string;
+  label?: string;
   description: string;
+  active?: boolean
 };
 
-const Info = ({label, description}: InfoProps) => {
+const Info = ({label, description, active}: InfoProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
   return (
     <View style={styles.container}>
-      <Heading3 bold={true} addStyle={styles.label}>
+      {label && <Heading3 bold={true} addStyle={styles.label}>
         {label}
-      </Heading3>
-      <SmallText textColor={context.colors.ui.darkgrey}>
+      </Heading3>}
+      <SmallText textColor={active !== undefined && active === false ? context.colors.ui.grey : context.colors.ui.darkgrey}>
         {description}
       </SmallText>
     </View>

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

@@ -10,12 +10,20 @@ export const InfoPreview = ({}: {}) => {
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: 'white',
+        gap: 16,
       }}
     >
       <Info
         label={'Mijn Gezin'}
         description={'Volg hier de dag van uw kinderen'}
       />
+      <Info
+        description={'Luca was heel de dag wat flauw en voelde zich niet lekker. Mama is haar vroeger komen halen.'}
+      />
+      <Info
+        active={false}
+        description={'Geen opmerking voor deze dag.'}
+      />
     </View>
   );
 };

package/src/components/molecules/selectable-list-item/selectable-list-item-preview.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {SelectableListItem} from './selectable-list-item.component';
 import {Icon} from '../../../icons/index';
 
 const {View} = require('react-native');
 
 export const SelectableListItemPreview = ({}: {}) => {
+  const [selected, setSelected] = useState(false);
+
   return (
     <View
       style={{
@@ -18,31 +20,31 @@ export const SelectableListItemPreview = ({}: {}) => {
         title="Vlindertjes VlindertjesVlindertjesVlindertjesVlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
         icon={<Icon style={'regular'} name={'user-group'} size={27} />}
-        onPress={() => console.log('clicked')}
-        selected={false}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
       />
       <SelectableListItem
         title="Vlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
         icon={<Icon style={'regular'} name={'office-building'} size={27} />}
         inverse={true}
-        onPress={() => console.log('clicked')}
-        selected={false}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
       />
       <SelectableListItem
         title="Vlindertjes VlindertjesVlindertjesVlindertjesVlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
         icon={<Icon style={'regular'} name={'user-group'} size={27} />}
-        onPress={() => console.log('clicked')}
-        selected={true}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
       />
       <SelectableListItem
         title="Vlindertjes"
         subtitle={'Leeftijd 2 tot 4 jaar'}
         icon={<Icon style={'regular'} name={'office-building'} size={27} />}
         inverse={true}
-        onPress={() => console.log('clicked')}
-        selected={true}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
       />
     </View>
   );

package/src/components/molecules/selectable-list-item/selectable-list-item.component.tsx

@@ -34,7 +34,7 @@ const SelectableListItem = ({
   );
 
   return (
-    <Pressable onPress={onPress} style={styles.container}>
+    <Pressable onPress={onPress} style={[styles.container, {backgroundColor: selected ? context.colors.main['9'] : undefined}]}>
       <View style={styles.iconCircle}>
         <View>{inverse ? invertedIcon : icon}</View>
       </View>

package/src/components/molecules/selectable-list-item/selectable-list-item.styles.d.ts

@@ -1,13 +1,12 @@
-export function Stylesheet(context: any, selected: any, inverse: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+export function Stylesheet(context: any, selected: any, inverse: any): {
     container: {
         width: "100%";
         flexDirection: "row";
         alignItems: "center";
-        backgroundColor: any;
         padding: number;
-        borderBottomLeftRadius: string;
+        borderBottomLeftRadius: number;
         borderBottomRightRadius: number;
-        borderTopLeftRadius: string;
+        borderTopLeftRadius: number;
         borderTopRightRadius: number;
     };
     iconCircle: {
@@ -26,5 +25,4 @@ export function Stylesheet(context: any, selected: any, inverse: any): StyleShee
         paddingTop: number;
         paddingBottom: number;
     };
-}>;
-import { StyleSheet } from 'react-native';
+};

package/src/components/molecules/selectable-list-item/selectable-list-item.styles.js

@@ -7,11 +7,10 @@ export const Stylesheet = (context, selected, inverse) =>
       width: '100%',
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: selected ? context.colors.main['9'] : 'none',
       padding: Scale.xxs,
-      borderBottomLeftRadius: '50%',
+      borderBottomLeftRadius: 65 / 2,
       borderBottomRightRadius: Scale.m,
-      borderTopLeftRadius: '50%',
+      borderTopLeftRadius: 65 / 2,
       borderTopRightRadius: Scale.m,
     },
     iconCircle: {