@tactics/toddle-styleguide 1.7.11 → 1.7.13

package/App.tsx

@@ -79,6 +79,7 @@ import { AmountPreview } from './src/components/molecules/amount/amount.preview'
 import { BareTimePickerPreview } from './src/components/molecules/bare-time-picker/bare-time-picker.preview';
 import { TimetableEditorPreview } from './src/components/organisms/timetable-editor/timetable-editor.preview';
 import { InlineErrorPreview } from './src/components/molecules/inline-error/inline-error.preview';
+import { SelectableListItemPreview } from './src/components/molecules/selectable-list-item/selectable-list-item-preview';
 
 import {
   SafeAreaProvider,
@@ -269,6 +270,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Select List Item"
         onPress={() => navigation.push('select-list-item')}
       />
+      <ReactBtn
+        title="Selectable List Item"
+        onPress={() => navigation.push('selectable-list-item')}
+      />
       <ReactBtn
         title="Select Picker"
         onPress={() => navigation.push('select-picker')}
@@ -519,6 +524,9 @@ function App() {
           <Stack.Screen name="inline-error">
             {() => <InlineErrorPreview />}
           </Stack.Screen>
+          <Stack.Screen name="selectable-list-item">
+            {() => <SelectableListItemPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -65,6 +65,7 @@ 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 { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-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';
@@ -76,4 +77,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, InlineNotice };
+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, SelectableListItem };

package/index.tsx

@@ -83,6 +83,7 @@ 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 { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -189,5 +190,6 @@ export {
   TimeSlotRecord,
   TimeSlotSequence,
   InlineError,
-  InlineNotice
+  InlineNotice,
+  SelectableListItem
 };

package/package.json

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

package/src/components/molecules/selectable-list-item/selectable-list-item-preview.d.ts

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

package/src/components/molecules/selectable-list-item/selectable-list-item-preview.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import {SelectableListItem} from './selectable-list-item.component';
+import {Icon} from '../../../icons/index';
+
+const {View} = require('react-native');
+
+export const SelectableListItemPreview = ({}: {}) => {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#19216C',
+      }}
+    >
+      <SelectableListItem
+        title="Vlindertjes VlindertjesVlindertjesVlindertjesVlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'user-group'} size={27} />}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
+      />
+      <SelectableListItem
+        title="Vlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'office-building'} size={27} />}
+        inverse={true}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
+      />
+      <SelectableListItem
+        title="Vlindertjes VlindertjesVlindertjesVlindertjesVlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'user-group'} size={27} />}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
+      />
+      <SelectableListItem
+        title="Vlindertjes"
+        subtitle={'Leeftijd 2 tot 4 jaar'}
+        icon={<Icon style={'regular'} name={'office-building'} size={27} />}
+        inverse={true}
+        onPress={() => setSelected(!selected)}
+        selected={selected}
+      />
+    </View>
+  );
+};

package/src/components/molecules/selectable-list-item/selectable-list-item.component.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+type SelectableListProps = {
+    title: string;
+    subtitle?: string;
+    icon: React.ReactElement;
+    onPress?: () => void;
+    inverse?: boolean;
+    selected: boolean;
+};
+declare const SelectableListItem: ({ title, subtitle, icon, onPress, inverse, selected }: SelectableListProps) => React.JSX.Element;
+export { SelectableListItem as SelectableListItem };

package/src/components/molecules/selectable-list-item/selectable-list-item.component.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {ThemeCtx} from '../../../context/theme.context';
+import {Pressable, View} from 'react-native';
+import {Stylesheet} from './selectable-list-item.styles';
+import {Heading2} from '../../atoms/heading-components';
+import {Paragraph} from '../../atoms/paragraph-components';
+
+type SelectableListProps = {
+  title: string;
+  subtitle?: string;
+  icon: React.ReactElement;
+  onPress?: () => void;
+  inverse?: boolean;
+  selected: boolean
+};
+
+const SelectableListItem = ({
+  title,
+  subtitle,
+  icon,
+  onPress,
+  inverse,
+  selected
+}: SelectableListProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, selected, inverse);
+  const invertedIcon = React.Children.map(icon, (child) =>
+    React.cloneElement(child, {
+      ...icon.props,
+      color: context.colors.main[6],
+    })
+  );
+
+  return (
+    <Pressable onPress={onPress} style={[styles.container, {backgroundColor: selected ? context.colors.main['9'] : undefined}]}>
+      <View style={styles.iconCircle}>
+        <View>{inverse ? invertedIcon : icon}</View>
+      </View>
+      <View style={styles.textContainer}>
+        <View>
+          <Heading2
+            bold={true}
+            textColor={selected ? context.colors.main['0'] : context.colors.ui.white}
+            numberOfLines={2}
+            ellipsizeMode={'tail'}
+          >
+            {title}
+          </Heading2>
+        </View>
+        <View>
+          <Paragraph textColor={selected ? context.colors.main['1'] : context.colors.ui.lightgrey}>
+            {subtitle}
+          </Paragraph>
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+export {SelectableListItem as SelectableListItem};

package/src/components/molecules/selectable-list-item/selectable-list-item.styles.d.ts

@@ -0,0 +1,28 @@
+export function Stylesheet(context: any, selected: any, inverse: any): {
+    container: {
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "center";
+        padding: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    iconCircle: {
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: any;
+        width: number;
+        height: number;
+        borderRadius: number;
+        marginRight: number;
+    };
+    textContainer: {
+        flex: number;
+        flexDirection: "column";
+        justifyContent: "center";
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};

package/src/components/molecules/selectable-list-item/selectable-list-item.styles.js

@@ -0,0 +1,34 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, selected, inverse) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: Scale.xxs,
+      borderBottomLeftRadius: 65 / 2,
+      borderBottomRightRadius: Scale.m,
+      borderTopLeftRadius: 65 / 2,
+      borderTopRightRadius: Scale.m,
+    },
+    iconCircle: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: inverse
+        ? context.colors.main['3']
+        : context.colors.main['6'],
+      width: 62,
+      height: 62,
+      borderRadius: 62 / 2,
+      marginRight: Scale.m,
+    },
+    textContainer: {
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      paddingTop: Scale.xxxs,
+      paddingBottom: Scale.xxxs,
+    },
+  });