@tactics/toddle-styleguide 1.7.0 → 1.7.1

package/App.tsx

@@ -78,6 +78,7 @@ import { CountPreview } from './src/components/atoms/count/count.preview';
 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 {
   SafeAreaProvider,
@@ -199,6 +200,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Info Component"
         onPress={() => navigation.push('info')}
       />
+      <ReactBtn
+        title="Inline Error"
+        onPress={() => navigation.push('inline-error')}
+      />
       <ReactBtn
         title="Journal Entry"
         onPress={() => navigation.push('journal-entry')}
@@ -511,6 +516,9 @@ function App() {
           <Stack.Screen name="wide-button">
             {() => <WideButtonPreview />}
           </Stack.Screen>
+          <Stack.Screen name="inline-error">
+            {() => <InlineErrorPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -63,6 +63,7 @@ import { ContextLabel } from './src/components/molecules/context-label/context-l
 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 { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -74,4 +75,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 };
+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 };

package/index.tsx

@@ -81,6 +81,7 @@ import { ContextLabel } from './src/components/molecules/context-label/context-l
 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';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -185,5 +186,6 @@ export {
   Amount,
   TimetableEditor,
   TimeSlotRecord,
-  TimeSlotSequence
+  TimeSlotSequence,
+  InlineError
 };

package/package.json

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

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

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

package/src/components/molecules/inline-error/inline-error.component.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {ThemeCtx} from '../../../context/theme.context';
+import {View} from 'react-native';
+import {Stylesheet} from './inline-error.styles';
+import {SmallText} from '../../atoms/paragraph-components';
+import { Icon } from '../../../icons';
+
+type InlineErrorProps = {
+  label: string;
+};
+
+const InlineError = ({label}: InlineErrorProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <Icon name='exclamation-circle' style='regular' color={context.colors.ui.error.dark} />
+      <SmallText addStyle={styles.label} textColor={context.colors.ui.error.dark}>
+        {label}
+      </SmallText>
+    </View>
+  );
+};
+export {InlineError as InlineError};

package/src/components/molecules/inline-error/inline-error.preview.d.ts

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

package/src/components/molecules/inline-error/inline-error.preview.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { InlineError } from './inline-error.component';
+const {View} = require('react-native');
+
+export const InlineErrorPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+      }}
+    >
+      <InlineError
+        label={'Deze dag is reeds gefactureerd. U kan deze enkel nog aanpassen in de beheerssoftware.'}
+      />
+    </View>
+  );
+};

package/src/components/molecules/inline-error/inline-error.styles.d.ts

@@ -0,0 +1,18 @@
+export function Stylesheet(context: any): {
+    container: {
+        flexDirection: "row";
+        gap: number;
+        width: "100%";
+        backgroundColor: any;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "flex-start";
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+    };
+    label: {
+        flex: number;
+    };
+};

package/src/components/molecules/inline-error/inline-error.styles.js

@@ -0,0 +1,22 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      gap: Scale.m,
+      width: '100%',
+      backgroundColor: context.colors.ui.error.xlight,
+      borderRadius: Scale.s,
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      paddingLeft: Scale.m,
+      paddingTop: Scale.m,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.m,
+    },
+    label: {
+      flex: 1
+    }
+  });