@tactics/toddle-styleguide 1.7.13 → 1.7.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.7.13",
+  "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>
   );
 };