@tactics/toddle-styleguide 1.7.8 → 1.7.9

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.9",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

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