@tactics/toddle-styleguide 1.7.13 → 1.7.15

package/package.json

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

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

@@ -1,6 +1,7 @@
 import React from "react";
 interface CountProps {
     count: number;
+    disabled?: boolean;
 }
-export declare const Count: ({ count, }: CountProps) => React.JSX.Element;
+export declare const Count: ({ count, disabled }: CountProps) => React.JSX.Element;
 export {};

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

@@ -7,13 +7,15 @@ import { Paragraph } from "../paragraph-components";
 
 interface CountProps {
   count: number;
+  disabled?: boolean
 }
 
 export const Count = ({
   count,
+  disabled
 }: CountProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const styles = Stylesheet(context, disabled);
   return <View style={styles.container}>
     <Paragraph addStyle={styles.text}>{count}</Paragraph>
   </View>;

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

@@ -1,4 +1,4 @@
-export function Stylesheet(context: any): {
+export function Stylesheet(context: any, disabled: any): {
     container: {
         borderWidth: number;
         borderColor: any;
@@ -16,5 +16,6 @@ export function Stylesheet(context: any): {
     text: {
         width: "auto";
         fontSize: number;
+        color: any;
     };
 };

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

@@ -1,24 +1,25 @@
 import {StyleSheet} from 'react-native';
 import { Scale } from '../../../theme/scale';
 
-export const Stylesheet = (context) =>
+export const Stylesheet = (context, disabled) =>
   StyleSheet.create({
     container: {
         borderWidth: 1,
-        borderColor: context.colors.main['1'],
+        borderColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.main['1'],
         borderRadius: 20,
         paddingVertical: Scale.xs,
         paddingHorizontal: Scale.m,
         minWidth: Scale.xxxl,
-        color: context.colors.main['2'],
+        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0,
-        backgroundColor: context.colors.ui.white
+        backgroundColor: disabled === true ? context.colors.ui.xlightgrey : context.colors.ui.white
     },
     text: {
         width: 'auto',
-        fontSize: Scale.m
+        fontSize: Scale.m,
+        color: disabled === true ? context.colors.ui.grey : context.colors.main['2'],
     }
   });

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

@@ -6,6 +6,7 @@ interface AmountProps {
     label: string;
     description?: string;
     onSave: (num: number) => void;
+    readonly: boolean;
 }
-export declare const Amount: ({ initialAmount, image, label, description, onSave }: AmountProps) => React.JSX.Element;
+export declare const Amount: ({ initialAmount, image, label, description, onSave, readonly }: AmountProps) => React.JSX.Element;
 export {};

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

@@ -14,7 +14,8 @@ interface AmountProps {
     image?: ImageSourcePropType;
     label: string;
     description?: string;
-    onSave: (num: number) => void
+    onSave: (num: number) => void;
+    readonly: boolean
 }
 
 export const Amount = ({
@@ -22,7 +23,8 @@ export const Amount = ({
     image,
     label,
     description,
-    onSave
+    onSave,
+    readonly
 }: AmountProps) => {
     const [editMode, setEditMode] = useState(false);
     const [countdown, setCountdown] = useState(0);
@@ -80,6 +82,32 @@ export const Amount = ({
         </>
     }
 
+    const renderInput = () => {
+        return <View style={styles.incrementContainer}>
+            {editMode ? (
+                <>
+                    <View>
+                        <IncrementInput value={amount} onPress={updateAmount} />
+                    </View>
+                    <PressableIcon
+                        onPress={saveChargedProduct}
+                        icon={
+                            <Icon key={label} name="check-circle" style="regular" />
+                        }
+                    />
+                </>
+            ) : (
+                <Pressable onPress={startEditMode}>
+                    <Count count={amount} />
+                </Pressable>
+            )}
+        </View>
+    }
+
+    const renderCount = () => {
+        return <Count disabled={true} count={amount} />
+    }
+
     return (
         <View style={styles.rootContainer}>
             <View style={styles.imageContainer}>
@@ -88,25 +116,7 @@ export const Amount = ({
             <View style={styles.container}>
                 <Paragraph bold={true} numberOfLines={1} ellipsizeMode="tail">{label}</Paragraph>
                 {description ? <Paragraph textColor={context.colors.ui.darkgrey} numberOfLines={1} ellipsizeMode="tail">{description}</Paragraph> : <></>}
-                <View style={styles.incrementContainer}>
-                    {editMode ? (
-                        <>
-                            <View>
-                                <IncrementInput value={amount} onPress={updateAmount} />
-                            </View>
-                            <PressableIcon
-                                onPress={saveChargedProduct}
-                                icon={
-                                    <Icon key={label} name="check-circle" style="regular" />
-                                }
-                            />
-                        </>
-                    ) : (
-                        <Pressable onPress={startEditMode}>
-                            <Count count={amount} />
-                        </Pressable>
-                    )}
-                </View>
+                {readonly ? renderCount() : renderInput()}
             </View>
         </View>
     );

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

@@ -12,10 +12,14 @@ export const AmountPreview = ({}: {}) => {
           backgroundColor: 'white',
         }}
       >
-        <Amount initialAmount={9} label='Maaltijd' onSave={(num) => console.log(num)} />
-        <Amount initialAmount={2} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd' onSave={(num) => console.log(num)} />
-        <Amount initialAmount={5} label='Maaltijd veggy' description='Hmm, lekker hoor' onSave={(num) => console.log(num)} />
-        <Amount initialAmount={1} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd met een lekkere lange titel' description='Hmm, lekker hoor. Met een sappige beschrijving' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={9} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={2} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={5} label='Maaltijd veggy' description='Hmm, lekker hoor' onSave={(num) => console.log(num)} />
+        <Amount readonly={false} initialAmount={1} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd met een lekkere lange titel' description='Hmm, lekker hoor. Met een sappige beschrijving' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={9} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={2} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={5} label='Maaltijd veggy' description='Hmm, lekker hoor' onSave={(num) => console.log(num)} />
+        <Amount readonly={true} initialAmount={1} image={require('./../../../../assets/components/avatar/baby.png')} label='Maaltijd met een lekkere lange titel' description='Hmm, lekker hoor. Met een sappige beschrijving' onSave={(num) => console.log(num)} />
       </View>
     </ScrollView>
   );

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