@tactics/toddle-styleguide 1.7.8 → 1.7.10

package/index.d.ts

@@ -64,6 +64,7 @@ import { Count } from './src/components/atoms/count/count.component';
 import { Amount } from './src/components/molecules/amount/amount.component';
 import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
 import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
+import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -75,4 +76,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, JournalEntry, 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, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimeSlotRecord, TimeSlotSequence, InlineError };
+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, JournalEntry, 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, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimeSlotRecord, TimeSlotSequence, InlineError, InlineNotice };

package/package.json

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

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

@@ -9,6 +9,7 @@ type AvatarProps = {
     isActive?: boolean;
     isLoading?: boolean;
     hasShadow?: boolean;
+    isBirthday?: boolean;
 };
-declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, }: AvatarProps) => React.JSX.Element;
+declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, isBirthday }: AvatarProps) => React.JSX.Element;
 export { Avatar as Avatar };

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

@@ -14,6 +14,7 @@ import {Size} from '../../../types/size.enum';
 import {Initials} from '../../../models/initials.model';
 import {MainGradient} from '../../../gradients/main/main.gradient';
 import {Heading1, Heading2, Heading3} from '../../atoms/heading-components';
+import { CrownIcon } from '../../../icons/crown.icon';
 
 type AvatarProps = {
   source: ImageSourcePropType | Initials;
@@ -22,6 +23,7 @@ type AvatarProps = {
   isActive?: boolean;
   isLoading?: boolean;
   hasShadow?: boolean;
+  isBirthday?: boolean;
 };
 
 const Avatar = ({
@@ -31,10 +33,19 @@ const Avatar = ({
   isActive = true,
   isLoading,
   hasShadow,
+  isBirthday
 }: AvatarProps) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, size, isBlocked, isActive);
 
+  const renderCrown = () => {
+    if (isBirthday) {
+      return <View style={styles.crownContainer}>
+        <CrownIcon />
+      </View>
+    }
+  }
+
   const renderText = (size: Size) => {
     if (size === Size.SMALL) {
       return (
@@ -72,6 +83,7 @@ const Avatar = ({
 
   return source instanceof Initials ? (
     <View style={hasShadow ? styles.shadow : null}>
+      {renderCrown()}
       <View style={styles.container}>
         {isLoading ? (
           <ActivityIndicator size={'small'} color={Context.colors.ui.white} />
@@ -82,6 +94,7 @@ const Avatar = ({
     </View>
   ) : isLoading ? (
     <View style={hasShadow ? styles.shadow : null}>
+      {renderCrown()}
       <View style={styles.container}>
         {!isBlocked ? <MainGradient isActive={isActive} /> : null}
         <View style={{zIndex: 100, position: 'absolute'}}>
@@ -91,6 +104,7 @@ const Avatar = ({
     </View>
   ) : (
     <View style={hasShadow ? styles.shadow : null}>
+      {renderCrown()}
       <View style={styles.container}>
         {!isBlocked ? <MainGradient isActive={isActive} /> : null}
         <Image source={source} style={styles.image as ImageStyle} />

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

@@ -32,10 +32,23 @@ export const AvatarPreview = ({}: {}) => {
           size={Size.SMALL}
           source={require('./../../../../assets/components/avatar/baby.png')}
         />
+        <Avatar
+          size={Size.SMALL}
+          source={Initials.for('John', 'Doe')}
+          hasShadow={true}
+          isBirthday={true}
+        />
+        <Avatar
+          size={Size.MEDIUM}
+          source={Initials.for('John', 'Doe')}
+          hasShadow={true}
+          isBirthday={true}
+        />
         <Avatar
           size={Size.LARGE}
           source={Initials.for('John', 'Doe')}
           hasShadow={true}
+          isBirthday={true}
         />
         <Avatar
           size={Size.MEDIUM}

package/src/components/molecules/avatar/avatar.styles.d.ts

@@ -1,88 +1,84 @@
-export function Stylesheet(
-  context: any,
-  size: any,
-  isBlocked: any,
-  isActive: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      container: (
-        | {
-            overflow: string;
-            backgroundColor: any;
-            justifyContent: string;
-            alignItems: string;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
-            width: number;
-            height: number;
-            borderRadius: number;
-            overflow?: undefined;
-            backgroundColor?: undefined;
-            justifyContent?: undefined;
-            alignItems?: undefined;
-          }
-      )[];
-      shadow: (
-        | {
-            backgroundColor: string;
-            shadowColor?: undefined;
-            shadowOpacity?: undefined;
-            shadowRadius?: undefined;
-            shadowOffset?: undefined;
-            elevation?: undefined;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
-            shadowColor: any;
-            shadowOpacity: number;
-            shadowRadius: number;
-            shadowOffset: {
-              width: number;
-              height: number;
-            };
-            backgroundColor?: undefined;
-            elevation?: undefined;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
-            elevation: number;
-            shadowColor: any;
-            backgroundColor?: undefined;
-            shadowOpacity?: undefined;
-            shadowRadius?: undefined;
-            shadowOffset?: undefined;
-            width?: undefined;
-            height?: undefined;
-            borderRadius?: undefined;
-          }
-        | {
+export function Stylesheet(context: any, size: any, isBlocked: any, isActive: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    container: ({
+        overflow: string;
+        backgroundColor: any;
+        justifyContent: string;
+        alignItems: string;
+        width?: undefined;
+        height?: undefined;
+        borderRadius?: undefined;
+    } | {
+        width: number;
+        height: number;
+        borderRadius: number;
+        overflow?: undefined;
+        backgroundColor?: undefined;
+        justifyContent?: undefined;
+        alignItems?: undefined;
+    })[];
+    shadow: ({
+        backgroundColor: string;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        shadowOffset?: undefined;
+        elevation?: undefined;
+        width?: undefined;
+        height?: undefined;
+        borderRadius?: undefined;
+    } | {
+        shadowColor: any;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
             width: number;
             height: number;
-            borderRadius: number;
-            backgroundColor?: undefined;
-            shadowColor?: undefined;
-            shadowOpacity?: undefined;
-            shadowRadius?: undefined;
-            shadowOffset?: undefined;
-            elevation?: undefined;
-          }
-      )[];
-      image: {
+        };
+        backgroundColor?: undefined;
+        elevation?: undefined;
+        width?: undefined;
+        height?: undefined;
+        borderRadius?: undefined;
+    } | {
+        elevation: number;
+        shadowColor: any;
+        backgroundColor?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        shadowOffset?: undefined;
+        width?: undefined;
+        height?: undefined;
+        borderRadius?: undefined;
+    } | {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor?: undefined;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        shadowOffset?: undefined;
+        elevation?: undefined;
+    })[];
+    image: {
         position: string;
         width: string;
         height: string;
         borderRadius: number;
-      }[];
-      text: {
-        textTransform: 'uppercase';
-      };
-    }>;
-import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';
+    }[];
+    text: {
+        textTransform: "uppercase";
+    };
+    crownContainer: ({
+        position: string;
+        zIndex: number;
+        top?: undefined;
+        left?: undefined;
+    } | {
+        top: number;
+        left: number;
+        position?: undefined;
+        zIndex?: undefined;
+    })[];
+}>;
+import { StyleSheet } from 'react-native';

package/src/components/molecules/avatar/avatar.styles.js

@@ -69,4 +69,20 @@ export const Stylesheet = (context, size, isBlocked, isActive) =>
     text: {
       textTransform: 'uppercase',
     },
+    crownContainer:[ {
+      position: 'absolute',
+      zIndex: 999
+    },
+    size === Size.SMALL && {
+      top: -10,
+      left: -5,
+    },
+    size === Size.MEDIUM && {
+      top: -6,
+      left: 0,
+    },
+    size === Size.LARGE && {
+      top: -2,
+      left: 10,
+    }]
   });

package/src/components/molecules/calendar-select/calendar-select.component.tsx

@@ -44,7 +44,11 @@ const CalendarSelect = ({
         }}
         style={styles.arrowContainer}
       >
-        <Icon style={'regular'} name={'chevron-left'} />
+        <Icon
+          style={'regular'}
+          name={'chevron-left'}
+          color={context.colors.main['9']}
+        />
       </Pressable>
 
       <Pressable
@@ -60,7 +64,7 @@ const CalendarSelect = ({
         </View>
         <View>
           <Paragraph textColor={context.colors.main['9']}>
-            {visibleDate.toLocaleString(ToddleDateTime.DATE_MED)}
+            {visibleDate.toLocaleString({weekday: 'short', day: 'numeric', month: 'short', year: 'numeric'})}
           </Paragraph>
         </View>
       </Pressable>
@@ -71,7 +75,11 @@ const CalendarSelect = ({
         }}
         style={styles.arrowContainer}
       >
-        <Icon style={'regular'} name={'chevron-right'} />
+        <Icon
+          style={'regular'}
+          name={'chevron-right'}
+          color={context.colors.main['9']}
+        />
       </Pressable>
     </View>
   );

package/src/components/molecules/calendar-select/calendar-select.preview.tsx

@@ -9,7 +9,7 @@ export const CalendarSelectPreview = ({}: {}) => {
   );
   console.log(date);
   return (
-    <View>
+    <View style={{alignItems: 'center'}}>
       <CalendarSelect
         onPressDate={() => console.log('open modal')}
         startDate={date}

package/src/components/molecules/calendar-select/calendar-select.styles.d.ts

@@ -1,9 +1,13 @@
 export function Stylesheet(context: any): {
     container: {
+        width: "auto";
         color: any;
         flexDirection: "row";
         alignItems: "center";
-        justifyContent: "space-between";
+        justifyContent: "center";
+        backgroundColor: any;
+        borderRadius: number;
+        gap: number;
     };
     dateContainer: {
         flexDirection: "row";
@@ -13,7 +17,9 @@ export function Stylesheet(context: any): {
         paddingBottom: number;
         paddingLeft: number;
         paddingRight: number;
+        justifyContent: "space-between";
         alignItems: "center";
+        width: number;
     };
     arrowContainer: {
         width: number;

package/src/components/molecules/calendar-select/calendar-select.styles.js

@@ -4,10 +4,14 @@ import {Scale} from '../../../theme/scale/index';
 export const Stylesheet = (context) =>
   StyleSheet.create({
     container: {
+      width: 'auto',
       color: context.colors.ui.white,
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'space-between',
+      justifyContent: 'center',
+      backgroundColor: context.colors.main[0],
+      borderRadius: Scale.xl,
+      gap: Scale.s
     },
     dateContainer: {
       flexDirection: 'row',
@@ -15,9 +19,11 @@ export const Stylesheet = (context) =>
       borderRadius: Scale.xl,
       paddingTop: Scale.s,
       paddingBottom: Scale.s,
-      paddingLeft: Scale.l,
-      paddingRight: Scale.l,
+      paddingLeft: Scale.m,
+      paddingRight: Scale.m,
+      justifyContent: 'space-between',
       alignItems: 'center',
+      width: 185
     },
     arrowContainer: {
       width: Scale.xxl,

package/src/components/molecules/inline-notice/inline-notice.component.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type InlineNoticeProps = {
+    label: string;
+};
+declare const InlineNotice: ({ label }: InlineNoticeProps) => React.JSX.Element;
+export { InlineNotice as InlineNotice };

package/src/components/organisms/child-list-item/child-list-item.component.d.ts

@@ -17,6 +17,7 @@ type ChildListItemProps = {
     visualStateTimeTracker?: VisualState;
     tags?: string[];
     error: boolean;
+    isBirthday?: boolean;
 };
-declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, error }: ChildListItemProps) => React.JSX.Element>;
+declare const ChildListItem: React.MemoExoticComponent<({ id, name, department, selectable, isSelected, onPressArrow, onPressText, onLongPress, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, tags, error, isBirthday }: ChildListItemProps) => React.JSX.Element>;
 export { ChildListItem as ChildListItem };

package/src/components/organisms/child-list-item/child-list-item.component.tsx

@@ -29,6 +29,7 @@ type ChildListItemProps = {
   visualStateTimeTracker?: VisualState;
   tags?: string[];
   error: boolean;
+  isBirthday?: boolean;
 };
 
 const ChildListItem = React.memo(
@@ -46,7 +47,8 @@ const ChildListItem = React.memo(
     textTimeTracker,
     visualStateTimeTracker,
     tags,
-    error
+    error,
+    isBirthday
   }: ChildListItemProps) => {
     const context = useContext(ThemeCtx);
     const styles = Stylesheet(isSelected, context);
@@ -95,6 +97,7 @@ const ChildListItem = React.memo(
               source={sourceAvatar}
               size={Size.MEDIUM}
               isLoading={longPressExecuting}
+              isBirthday={isBirthday}
             />
             <View style={styles.pressableText}>
               <View style={styles.trackerContainer}>

package/src/icons/crown.icon.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const CrownIcon: () => React.JSX.Element;

package/src/icons/crown.icon.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Svg, {Defs, Image, Pattern, Rect, Use} from 'react-native-svg';
+
+export const CrownIcon = () => {
+  return (
+    <Svg width="32" height="28" viewBox="0 0 32 28" fill="none">
+      <Rect width="32" height="27.3231" fill="url(#pattern0)"/>
+      <Defs>
+      <Pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+      <Use xlinkHref="#image0_226_1363" transform="scale(0.00769231 0.00900901)"/>
+      </Pattern>
+      <Image id="image0_226_1363" width="130" height="111" xlinkHref="data:image/png;base64,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"/>
+      </Defs>
+    </Svg>
+  );
+};

package/src/models/time-slot-record.d.ts

@@ -9,6 +9,7 @@ export declare class TimeSlotRecord {
     static fromJson(json: TimeSlotRecordJSON): TimeSlotRecord;
     static fromEmpty(): TimeSlotRecord;
     static fromRecord(seq: TimeSlotRecord): TimeSlotRecord;
+    isEmpty(): boolean;
     isComplete(): boolean;
     toJson(): TimeSlotRecordJSON;
 }

package/src/models/time-slot-sequence.d.ts

@@ -12,4 +12,5 @@ export declare class TimeSlotSequence {
     toJson(): TimeSlotRecord[];
     addToNextSlot(checkInOutTime: string): void;
     isComplete(): boolean;
+    isEmpty(): boolean;
 }