@tactics/toddle-styleguide 0.1.11 → 1.0.0

package/App.tsx

@@ -11,52 +11,54 @@ import 'intl/locale-data/jsonp/en';
 import {ThemeCtx} from './src/context/theme.context';
 import {StaffMemberTheme} from './src/theme/provider';
 import {LoadFonts} from './src/theme/font';
-import {AvatarPreview} from './src/components/atoms/avatar/avatar.preview';
-import {ButtonPreview} from './src/components/atoms/button/button.preview';
-import {PillPreview} from './src/components/atoms/pill/pill.preview';
-import {SnackbarPreview} from './src/components/atoms/snackbar/snackbar.preview';
-import {TextBubblePreview} from './src/components/atoms/text-bubble/text-bubble.preview';
+import {AvatarPreview} from './src/components/molecules/avatar/avatar.preview';
+import {ButtonPreview} from './src/components/molecules/button/button.preview';
+import {PillPreview} from './src/components/molecules/pill/pill.preview';
+import {SnackbarPreview} from './src/components/molecules/snackbar/snackbar.preview';
+import {TextBubblePreview} from './src/components/organisms/text-bubble/text-bubble.preview';
 import {ImageBubblePreview} from './src/components/atoms/image-bubble/image-bubble.preview';
-import {TimeTrackerPreview} from './src/components/atoms/time-tracker/time-tracker.preview';
-import {CancelLinkPreview} from './src/components/atoms/cancel-link/cancel-link.preview';
-import {InfoPreview} from './src/components/atoms/info/info.preview';
+import {TimeTrackerPreview} from './src/components/molecules/time-tracker/time-tracker.preview';
+import {CancelLinkPreview} from './src/components/molecules/cancel-link/cancel-link.preview';
+import {InfoPreview} from './src/components/molecules/info/info.preview';
 import {IconSolidPreview} from './src/icons/solid/solid.preview';
 import {IconOutlineWhitePreview} from './src/icons/outline/outline-white.preview';
 import {IconOutlineDefaultPreview} from './src/icons/outline/outline-default.preview';
 import {IconOutlineGreyPreview} from './src/icons/outline/outline-grey.preview';
-import {TagPreview} from './src/components/atoms/tag/tag.preview';
-import {PopoverPreview} from './src/components/atoms/popover/popover.preview';
-import {FilterTabPreview} from './src/components/atoms/filter-tab/filter-tab.preview';
-import {ContactItemPreview} from './src/components/atoms/contact-item/contact-item.preview';
-import {SelectListItemPreview} from './src/components/atoms/select-list-item/select-list-item-preview';
-import {CheckboxPreview} from './src/components/atoms/checkbox/checkbox.preview';
+import {TagPreview} from './src/components/molecules/tag/tag.preview';
+import {PopoverPreview} from './src/components/templates/popover/popover.preview';
+import {FilterTabPreview} from './src/components/molecules/filter-tab/filter-tab.preview';
+import {ContactItemPreview} from './src/components/organisms/contact-item/contact-item.preview';
+import {SelectListItemPreview} from './src/components/molecules/select-list-item/select-list-item-preview';
+import {CheckboxPreview} from './src/components/molecules/checkbox/checkbox.preview';
 import {CheckPreview} from './src/components/atoms/check-switch/check-switch.preview';
-import {WideButtonPreview} from './src/components/atoms/wide-button/wide-button.preview';
-import {PressableIconPreview} from './src/components/atoms/pressable-icon/pressable-icon.preview';
+import {WideButtonPreview} from './src/components/molecules/wide-button/wide-button.preview';
+import {PressableIconPreview} from './src/components/molecules/pressable-icon/pressable-icon.preview';
 import {SplitContainerPreview} from './src/components/atoms/split-container/split-container.preview';
 import {CalendarPreview} from './src/components/atoms/calendar/calendar.preview';
-import {QuickFilterPreview} from './src/components/atoms/quick-filter/quick-filter.prevriew';
-import {DateInputPreview} from './src/components/atoms/date-input/date-input.preview';
+import {QuickFilterPreview} from './src/components/molecules/quick-filter/quick-filter.preview';
+import {DateInputPreview} from './src/components/molecules/date-input/date-input.preview';
 import {TextInputPreview} from './src/components/atoms/text-input/text-input.preview';
-import {ChildListItemPreview} from './src/components/atoms/child-list-item/child-list-item.preview';
-import {TimeLinePreview} from './src/components/atoms/timeline/timeline.preview';
-import {SelectPickerPreview} from './src/components/atoms/select-picker/select-picker.preview';
-import {FilterRangePreview} from './src/components/atoms/filter-range/filter-range.preview';
-import {DaySelectPreview} from './src/components/atoms/day-select/day-select.preview';
+import {ChildListItemPreview} from './src/components/organisms/child-list-item/child-list-item.preview';
+import {TimeLinePreview} from './src/components/molecules/timeline/timeline.preview';
+import {SelectPickerPreview} from './src/components/molecules/select-picker/select-picker.preview';
+import {FilterRangePreview} from './src/components/molecules/filter-range/filter-range.preview';
+import {DaySelectPreview} from './src/components/organisms/day-select/day-select.preview';
 import {IncrementInputPreview} from './src/components/atoms/increment-input/increment-input.preview';
-import {SwipePreview} from './src/components/atoms/swipe/swipe.preview';
+import {SwipePreview} from './src/components/molecules/swipe/swipe.preview';
 import {LogoPreview} from './src/components/atoms/logo/logo.preview';
-import {ContactRolePreview} from './src/components/atoms/contact-role/contact-role.preview';
-import {SearchPreview} from './src/components/atoms/search/search.preview';
-import {BlockedMessagePreview} from './src/components/atoms/blocked-message/blocked-message.preview';
-import {DepartmentLogoPreview} from './src/components/atoms/department_logo/department-logo.preview';
-import {CalendarSelectPreview} from './src/components/atoms/calendar-select/calendar-select.preview';
+import {ContactRolePreview} from './src/components/molecules/contact-role/contact-role.preview';
+import {SearchPreview} from './src/components/molecules/search-input/search.preview';
+import {BlockedMessagePreview} from './src/components/molecules/blocked-message/blocked-message.preview';
+import {DepartmentLogoPreview} from './src/components/molecules/department_logo/department-logo.preview';
+import {CalendarSelectPreview} from './src/components/molecules/calendar-select/calendar-select.preview';
 import {FooterPreview} from './src/components/atoms/footer/footer.preview';
-import {DefaulSelectPreview} from './src/components/atoms/default-select/default-select.preview';
-import {PasswordInputPreview} from './src/components/atoms/password-input/password-input.preview';
-import {MessageInputPreview} from './src/components/atoms/message-input/message-input.preview';
+import {DefaultSelectPreview} from './src/components/molecules/default-select/default-select.preview';
+import {PasswordInputPreview} from './src/components/molecules/password-input/password-input.preview';
+import {MessageInputPreview} from './src/components/molecules/message-input/message-input.preview';
 import {HeadingsPreview} from './src/components/atoms/heading-components/headings.preview';
 import {ParagraphComponentsPreview} from './src/components/atoms/paragraph-components/paragraph-components.preview';
+import {MyChildListItemPreview} from './src/components/organisms/my-child-list-item/my-child-list-item.preview';
+import {SelectLinkPreview} from './src/components/molecules/select-link/select-link.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -154,6 +156,7 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Child list item"
         onPress={() => navigation.push('child-list-item')}
       />
+      <ReactBtn title="Timeline" onPress={() => navigation.push('timeline')} />
       <ReactBtn
         title="Filter range"
         onPress={() => navigation.push('filter-range')}
@@ -212,6 +215,14 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Paragraphs"
         onPress={() => navigation.push('paragraphs')}
       />
+      <ReactBtn
+        title="My child list item"
+        onPress={() => navigation.push('my-child-list-item')}
+      />
+      <ReactBtn
+        title="Select link"
+        onPress={() => navigation.push('select-link')}
+      />
     </ScrollView>
   );
 };
@@ -337,7 +348,7 @@ function App() {
           </Stack.Screen>
           <Stack.Screen name="footer">{() => <FooterPreview />}</Stack.Screen>
           <Stack.Screen name="default-select">
-            {() => <DefaulSelectPreview />}
+            {() => <DefaultSelectPreview />}
           </Stack.Screen>
           <Stack.Screen name="message-input">
             {() => <MessageInputPreview />}
@@ -348,6 +359,12 @@ function App() {
           <Stack.Screen name="paragraphs">
             {() => <ParagraphComponentsPreview />}
           </Stack.Screen>
+          <Stack.Screen name="my-child-list-item">
+            {() => <MyChildListItemPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="select-link">
+            {() => <SelectLinkPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -1,54 +1,50 @@
 import 'intl';
 import 'intl/locale-data/jsonp/en';
-import { Avatar } from './src/components/atoms/avatar/avatar.component';
-import { Button } from './src/components/atoms/button/button.component';
-import { CancelLink } from './src/components/atoms/cancel-link/cancel-link.component';
+import { Avatar } from './src/components/molecules/avatar/avatar.component';
+import { Button } from './src/components/molecules/button/button.component';
+import { CancelLink } from './src/components/molecules/cancel-link/cancel-link.component';
 import { Check } from './src/components/atoms/check-switch/check-switch.component';
-import { Checkbox } from './src/components/atoms/checkbox/checkbox.component';
-import { ChildListItem } from './src/components/atoms/child-list-item/child-list-item.component';
-import { ContactItem } from './src/components/atoms/contact-item/contact-item.component';
-import { FilterTab } from './src/components/atoms/filter-tab/filter-tab.component';
+import { Checkbox } from './src/components/molecules/checkbox/checkbox.component';
+import { ChildListItem } from './src/components/organisms/child-list-item/child-list-item.component';
+import { ContactItem } from './src/components/organisms/contact-item/contact-item.component';
+import { FilterTab } from './src/components/molecules/filter-tab/filter-tab.component';
 import { SplitContainer } from './src/components/atoms/split-container/split-container.component';
 import { ImageBubble } from './src/components/atoms/image-bubble/image-bubble.component';
-import { Info } from './src/components/atoms/info/info.component';
-import { Pill } from './src/components/atoms/pill/pill.component';
-import { Popover } from './src/components/atoms/popover/popover.component';
-import { PressableIcon } from './src/components/atoms/pressable-icon/pressable-icon.component';
-import { QuickFilter } from './src/components/atoms/quick-filter/quick-filter.component';
-import { SelectListItem } from './src/components/atoms/select-list-item/select-list-item.component';
-import { Snackbar } from './src/components/atoms/snackbar/snackbar.component';
-import { Tag } from './src/components/atoms/tag/tag.component';
-import { TextBubble } from './src/components/atoms/text-bubble/text-bubble.component';
+import { Info } from './src/components/molecules/info/info.component';
+import { Pill } from './src/components/molecules/pill/pill.component';
+import { Popover } from './src/components/templates/popover/popover.component';
+import { PressableIcon } from './src/components/molecules/pressable-icon/pressable-icon.component';
+import { QuickFilter } from './src/components/molecules/quick-filter/quick-filter.component';
+import { SelectListItem } from './src/components/molecules/select-list-item/select-list-item.component';
+import { Snackbar } from './src/components/molecules/snackbar/snackbar.component';
+import { Tag } from './src/components/molecules/tag/tag.component';
+import { TextBubble } from './src/components/organisms/text-bubble/text-bubble.component';
 import { TextInput } from './src/components/atoms/text-input/text-input.component';
-import { TimeTracker } from './src/components/atoms/time-tracker/time-tracker.component';
-import { WideButton } from './src/components/atoms/wide-button/wide-button.component';
+import { TimeTracker } from './src/components/molecules/time-tracker/time-tracker.component';
+import { WideButton } from './src/components/molecules/wide-button/wide-button.component';
 import { Icon } from './src/icons';
 import { Calendar } from './src/components/atoms/calendar/calendar.component';
 import { IncrementInput } from './src/components/atoms/increment-input/increment-input.component';
-import { Swipe } from './src/components/atoms/swipe/swipe.component';
+import { Swipe } from './src/components/molecules/swipe/swipe.component';
 import { Logo } from './src/components/atoms/logo/logo.component';
-import { DaySelect } from './src/components/atoms/day-select/day-select.component';
-import { Search } from './src/components/atoms/search/search.component';
-import { BlockedMessage } from './src/components/atoms/blocked-message/blocked-message.component';
-import { DepartmentLogo } from './src/components/atoms/department_logo/department-logo.component';
-import { ContactRole } from './src/components/atoms/contact-role/contact-role.component';
-import { Timeline } from './src/components/atoms/timeline/timeline.component';
-import { SelectPicker } from './src/components/atoms/select-picker/select-picker.component';
-import { CalendarSelect } from './src/components/atoms/calendar-select/calendar-select.component';
-import { DateInput } from './src/components/atoms/date-input/date-input.component';
-import { FilterRange } from './src/components/atoms/filter-range/filter-range.component';
+import { DaySelect } from './src/components/organisms/day-select/day-select.component';
+import { Search } from './src/components/molecules/search-input/search.component';
+import { BlockedMessage } from './src/components/molecules/blocked-message/blocked-message.component';
+import { DepartmentLogo } from './src/components/molecules/department_logo/department-logo.component';
+import { ContactRole } from './src/components/molecules/contact-role/contact-role.component';
+import { Timeline } from './src/components/molecules/timeline/timeline.component';
+import { SelectPicker } from './src/components/molecules/select-picker/select-picker.component';
+import { CalendarSelect } from './src/components/molecules/calendar-select/calendar-select.component';
+import { DateInput } from './src/components/molecules/date-input/date-input.component';
+import { FilterRange } from './src/components/molecules/filter-range/filter-range.component';
 import { Footer } from './src/components/atoms/footer/footer.component';
-import { DefaultSelect } from './src/components/atoms/default-select/default-select.component';
-import { PasswordInput } from './src/components/atoms/password-input/password-input.component';
-import { MessageInput } from './src/components/atoms/message-input/message-input.component';
-import { Heading1 } from './src/components/atoms/heading-components/heading1/heading1.component';
-import { Heading2 } from './src/components/atoms/heading-components/heading2/heading2.component';
-import { Heading3 } from './src/components/atoms/heading-components/heading3/heading3.component';
-import { Heading4 } from './src/components/atoms/heading-components/heading4/heading4.component';
-import { AllCapsHeading } from './src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component';
-import { Paragraph } from './src/components/atoms/paragraph-components/paragraph/paragraph.component';
-import { SmallText } from './src/components/atoms/paragraph-components/small-text/small-text.component';
-import { TinyText } from './src/components/atoms/paragraph-components/tiny-text/tiny-text.component';
+import { DefaultSelect } from './src/components/molecules/default-select/default-select.component';
+import { PasswordInput } from './src/components/molecules/password-input/password-input.component';
+import { MessageInput } from './src/components/molecules/message-input/message-input.component';
+import { AllCapsHeading, Heading1, Heading2, Heading3, Heading4 } from './src/components/atoms/heading-components';
+import { Paragraph, SmallText, TinyText } from './src/components/atoms/paragraph-components';
+import { SelectLink } from './src/components/molecules/select-link/select-link.component';
+import { MyChildListItem } from './src/components/organisms/my-child-list-item/my-child-list-item.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -57,4 +53,4 @@ import { Initials } from './src/models/initials.model';
 import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.class';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, };

package/index.tsx

@@ -8,55 +8,61 @@ import App from './App';
 registerRootComponent(App);
 
 // Exports of components
-import {Avatar} from './src/components/atoms/avatar/avatar.component';
-import {Button} from './src/components/atoms/button/button.component';
-import {CancelLink} from './src/components/atoms/cancel-link/cancel-link.component';
+import {Avatar} from './src/components/molecules/avatar/avatar.component';
+import {Button} from './src/components/molecules/button/button.component';
+import {CancelLink} from './src/components/molecules/cancel-link/cancel-link.component';
 import {Check} from './src/components/atoms/check-switch/check-switch.component';
-import {Checkbox} from './src/components/atoms/checkbox/checkbox.component';
-import {ChildListItem} from './src/components/atoms/child-list-item/child-list-item.component';
-import {ContactItem} from './src/components/atoms/contact-item/contact-item.component';
-import {FilterTab} from './src/components/atoms/filter-tab/filter-tab.component';
+import {Checkbox} from './src/components/molecules/checkbox/checkbox.component';
+import {ChildListItem} from './src/components/organisms/child-list-item/child-list-item.component';
+import {ContactItem} from './src/components/organisms/contact-item/contact-item.component';
+import {FilterTab} from './src/components/molecules/filter-tab/filter-tab.component';
 import {SplitContainer} from './src/components/atoms/split-container/split-container.component';
 import {ImageBubble} from './src/components/atoms/image-bubble/image-bubble.component';
-import {Info} from './src/components/atoms/info/info.component';
-import {Pill} from './src/components/atoms/pill/pill.component';
-import {Popover} from './src/components/atoms/popover/popover.component';
-import {PressableIcon} from './src/components/atoms/pressable-icon/pressable-icon.component';
-import {QuickFilter} from './src/components/atoms/quick-filter/quick-filter.component';
-import {SelectListItem} from './src/components/atoms/select-list-item/select-list-item.component';
-import {Snackbar} from './src/components/atoms/snackbar/snackbar.component';
-import {Tag} from './src/components/atoms/tag/tag.component';
-import {TextBubble} from './src/components/atoms/text-bubble/text-bubble.component';
+import {Info} from './src/components/molecules/info/info.component';
+import {Pill} from './src/components/molecules/pill/pill.component';
+import {Popover} from './src/components/templates/popover/popover.component';
+import {PressableIcon} from './src/components/molecules/pressable-icon/pressable-icon.component';
+import {QuickFilter} from './src/components/molecules/quick-filter/quick-filter.component';
+import {SelectListItem} from './src/components/molecules/select-list-item/select-list-item.component';
+import {Snackbar} from './src/components/molecules/snackbar/snackbar.component';
+import {Tag} from './src/components/molecules/tag/tag.component';
+import {TextBubble} from './src/components/organisms/text-bubble/text-bubble.component';
 import {TextInput} from './src/components/atoms/text-input/text-input.component';
-import {TimeTracker} from './src/components/atoms/time-tracker/time-tracker.component';
-import {WideButton} from './src/components/atoms/wide-button/wide-button.component';
+import {TimeTracker} from './src/components/molecules/time-tracker/time-tracker.component';
+import {WideButton} from './src/components/molecules/wide-button/wide-button.component';
 import {Icon} from './src/icons';
 import {Calendar} from './src/components/atoms/calendar/calendar.component';
 import {IncrementInput} from './src/components/atoms/increment-input/increment-input.component';
-import {Swipe} from './src/components/atoms/swipe/swipe.component';
+import {Swipe} from './src/components/molecules/swipe/swipe.component';
 import {Logo} from './src/components/atoms/logo/logo.component';
-import {DaySelect} from './src/components/atoms/day-select/day-select.component';
-import {Search} from './src/components/atoms/search/search.component';
-import {BlockedMessage} from './src/components/atoms/blocked-message/blocked-message.component';
-import {DepartmentLogo} from './src/components/atoms/department_logo/department-logo.component';
-import {ContactRole} from './src/components/atoms/contact-role/contact-role.component';
-import {Timeline} from './src/components/atoms/timeline/timeline.component';
-import {SelectPicker} from './src/components/atoms/select-picker/select-picker.component';
-import {CalendarSelect} from './src/components/atoms/calendar-select/calendar-select.component';
-import {DateInput} from './src/components/atoms/date-input/date-input.component';
-import {FilterRange} from './src/components/atoms/filter-range/filter-range.component';
+import {DaySelect} from './src/components/organisms/day-select/day-select.component';
+import {Search} from './src/components/molecules/search-input/search.component';
+import {BlockedMessage} from './src/components/molecules/blocked-message/blocked-message.component';
+import {DepartmentLogo} from './src/components/molecules/department_logo/department-logo.component';
+import {ContactRole} from './src/components/molecules/contact-role/contact-role.component';
+import {Timeline} from './src/components/molecules/timeline/timeline.component';
+import {SelectPicker} from './src/components/molecules/select-picker/select-picker.component';
+import {CalendarSelect} from './src/components/molecules/calendar-select/calendar-select.component';
+import {DateInput} from './src/components/molecules/date-input/date-input.component';
+import {FilterRange} from './src/components/molecules/filter-range/filter-range.component';
 import {Footer} from './src/components/atoms/footer/footer.component';
-import {DefaultSelect} from './src/components/atoms/default-select/default-select.component';
-import {PasswordInput} from './src/components/atoms/password-input/password-input.component';
-import {MessageInput} from './src/components/atoms/message-input/message-input.component';
-import {Heading1} from './src/components/atoms/heading-components/heading1/heading1.component';
-import {Heading2} from './src/components/atoms/heading-components/heading2/heading2.component';
-import {Heading3} from './src/components/atoms/heading-components/heading3/heading3.component';
-import {Heading4} from './src/components/atoms/heading-components/heading4/heading4.component';
-import {AllCapsHeading} from './src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component';
-import {Paragraph} from './src/components/atoms/paragraph-components/paragraph/paragraph.component';
-import {SmallText} from './src/components/atoms/paragraph-components/small-text/small-text.component';
-import {TinyText} from './src/components/atoms/paragraph-components/tiny-text/tiny-text.component';
+import {DefaultSelect} from './src/components/molecules/default-select/default-select.component';
+import {PasswordInput} from './src/components/molecules/password-input/password-input.component';
+import {MessageInput} from './src/components/molecules/message-input/message-input.component';
+import {
+  AllCapsHeading,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+} from './src/components/atoms/heading-components';
+import {
+  Paragraph,
+  SmallText,
+  TinyText,
+} from './src/components/atoms/paragraph-components';
+import {SelectLink} from './src/components/molecules/select-link/select-link.component';
+import {MyChildListItem} from './src/components/organisms/my-child-list-item/my-child-list-item.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -134,4 +140,6 @@ export {
   Paragraph,
   SmallText,
   TinyText,
+  SelectLink,
+  MyChildListItem,
 };

package/package.json

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

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -931,7 +931,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 6 Februari 2023 "
+            accessibilityLabel=" Maandag 6 Februari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -951,10 +951,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -974,9 +970,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -1431,7 +1424,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 13 Februari 2023 "
+            accessibilityLabel="today Maandag 13 Februari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1451,6 +1444,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1470,6 +1467,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -3848,8 +3848,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 6 Februari 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Maandag 6 Februari 2023 "
             accessibilityState={
               {
                 "disabled": false,
@@ -3868,10 +3867,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -3892,7 +3887,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -4360,7 +4355,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 13 Februari 2023 "
+            accessibilityLabel="today Maandag 13 Februari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -4379,6 +4375,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4399,7 +4399,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

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

@@ -1,4 +1,4 @@
-import React, {ReactNode} from 'react';
+import React from 'react';
 import {useContext} from 'react';
 import {View} from 'react-native';
 

package/src/components/atoms/footer/footer.preview.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import {Footer} from './footer.component';
-import {QrcodeIcon} from '../../../icons/outline/qrcode/qrcode.icon';
 import {SplitContainer} from '../split-container/split-container.component';
-import {SelectLink} from '../select-link/select-link.component';
-import {Button} from '../button/button.component';
+import {SelectLink} from '../../molecules/select-link/select-link.component';
+import {Button} from '../../molecules/button/button.component';
 
 export const FooterPreview = ({}: {}) => {
   return (

package/src/components/atoms/heading-components/heading1/__snapshots__/heading1.test.js.snap

@@ -16,6 +16,7 @@ exports[`Test for Heading1 should render a Heading 1 component, huge font, bold
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -39,6 +40,7 @@ exports[`Test for Heading1 should render a Heading 1 component, huge font, bold
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -62,6 +64,7 @@ exports[`Test for Heading1 should render a Heading 1 component, huge font, bold
         "textAlign": "justify",
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -85,6 +88,7 @@ exports[`Test for Heading1 should render a Heading 1 component, huge font, not b
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -108,6 +112,7 @@ exports[`Test for Heading1 should render a Heading 1 component, huge font, not b
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >

package/src/components/atoms/heading-components/heading1/heading1.component.d.ts

@@ -1,2 +1,2 @@
 import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading1: ({ bold, children, textColor, textAlign, }: TextProperties) => JSX.Element;
+export declare const Heading1: ({ bold, children, textColor, textAlign, addStyle, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading1/heading1.component.tsx

@@ -9,9 +9,12 @@ export const Heading1 = ({
   children,
   textColor,
   textAlign,
+  addStyle,
 }: TextProperties) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, bold, textColor, textAlign);
 
-  return <Text style={[styles.heading1, styles.main]}>{children}</Text>;
+  return (
+    <Text style={[styles.heading1, styles.main, addStyle]}>{children}</Text>
+  );
 };

package/src/components/atoms/heading-components/heading2/__snapshots__/heading2.test.js.snap

@@ -16,6 +16,7 @@ exports[`Test for Heading2 should render a Heading 2 component, big font, bold 1
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -39,6 +40,7 @@ exports[`Test for Heading2 should render a Heading 2 component, big font, bold,
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -62,6 +64,7 @@ exports[`Test for Heading2 should render a Heading 2 component, big font, bold,
         "textAlign": "center",
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -85,6 +88,7 @@ exports[`Test for Heading2 should render a Heading 2 component, big font, not bo
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >
@@ -108,6 +112,7 @@ exports[`Test for Heading2 should render a Heading 2 component, big font, not bo
         "textAlign": undefined,
         "width": "100%",
       },
+      undefined,
     ]
   }
 >

package/src/components/atoms/heading-components/heading2/heading2.component.d.ts

@@ -1,2 +1,2 @@
 import { TextProperties } from '../../../../types/text-properties.type';
-export declare const Heading2: ({ bold, children, textColor, textAlign, }: TextProperties) => JSX.Element;
+export declare const Heading2: ({ bold, children, textColor, textAlign, numberOfLines, ellipsizeMode, addStyle, }: TextProperties) => JSX.Element;

package/src/components/atoms/heading-components/heading2/heading2.component.tsx

@@ -9,9 +9,20 @@ export const Heading2 = ({
   children,
   textColor,
   textAlign,
+  numberOfLines,
+  ellipsizeMode,
+  addStyle,
 }: TextProperties) => {
   const Context = useContext(ThemeCtx);
   const styles = Stylesheet(Context, bold, textColor, textAlign);
 
-  return <Text style={[styles.heading2, styles.main]}>{children}</Text>;
+  return (
+    <Text
+      style={[styles.heading2, styles.main, addStyle]}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+    >
+      {children}
+    </Text>
+  );
 };