@tactics/toddle-styleguide 1.4.10 → 1.4.11

package/App.tsx

@@ -74,6 +74,7 @@ import {TabViewPreview} from './src/components/organisms/tab-view/tab-view.previ
 import {LinePreview} from './src/components/atoms/line/line.preview';
 import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
 import { TimetableEditPreview } from './src/components/organisms/timetable-edit/timetable-edit.preview';
+import { ContextLabelPreview } from './src/components/molecules/context-label/context-label.preview';
 
 import {
   SafeAreaProvider,
@@ -128,6 +129,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Contact Role"
         onPress={() => navigation.push('contact-role')}
       />
+      <ReactBtn
+        title="Context Label"
+        onPress={() => navigation.push('context-label')}
+      />
       <ReactBtn
         title="Date Input"
         onPress={() => navigation.push('date-input')}
@@ -347,6 +352,9 @@ function App() {
           <Stack.Screen name="contact-role">
             {() => <ContactRolePreview />}
           </Stack.Screen>
+          <Stack.Screen name="context-label">
+            {() => <ContextLabelPreview />}
+          </Stack.Screen>
           <Stack.Screen name="date-input">
             {() => <DateInputPreview />}
           </Stack.Screen>

package/index.d.ts

@@ -59,6 +59,7 @@ import { TabView } from './src/components/organisms/tab-view/tab-view.component'
 import { Line } from './src/components/atoms/line/line.component';
 import { JournalEntry } from './src/components/organisms/journal-entry/journal-entry.component';
 import { TimetableEdit } from './src/components/organisms/timetable-edit/timetable-edit.component';
+import { ContextLabel } from './src/components/molecules/context-label/context-label.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -68,4 +69,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 };
+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 };

package/index.tsx

@@ -77,6 +77,7 @@ import {TabView} from './src/components/organisms/tab-view/tab-view.component';
 import {Line} from './src/components/atoms/line/line.component';
 import {JournalEntry} from './src/components/organisms/journal-entry/journal-entry.component';
 import {TimetableEdit} from './src/components/organisms/timetable-edit/timetable-edit.component';
+import { ContextLabel } from './src/components/molecules/context-label/context-label.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -173,5 +174,6 @@ export {
   VisualState,
   CreateResponsiveStyle,
   Scale,
-  TimetableEdit
+  TimetableEdit,
+  ContextLabel
 };

package/package.json

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

package/src/components/molecules/context-label/context-label.component.d.ts

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

package/src/components/molecules/context-label/context-label.component.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './context-label.styles';
+import {Paragraph} from '../../atoms/paragraph-components';
+
+type ContextLabelProps = {
+  label: string;
+};
+
+const ContextLabel = ({label}: ContextLabelProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <Paragraph
+        bold={true}
+        textAlign={'center'}
+        ellipsizeMode={'tail'}
+        numberOfLines={1}
+      >
+        {label}
+      </Paragraph>
+    </View>
+  );
+};
+
+export {ContextLabel as ContextLabel};

package/src/components/molecules/context-label/context-label.preview.d.ts

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

package/src/components/molecules/context-label/context-label.preview.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ContextLabel } from './context-label.component';
+import { Avatar } from '../avatar/avatar.component';
+import { Size } from '../../../types/size.enum';
+import { Initials } from '../../../models/initials.model';
+import { Scale } from '../../../theme/scale';
+import { Paragraph } from '../../atoms/paragraph-components';
+const {View} = require('react-native');
+
+export const ContextLabelPreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'white',
+      }}
+    >
+        <ContextLabel label='Dirk Dingles' />
+
+        <View
+        style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'white',
+            flexDirection: 'row',
+            gap: Scale.xs
+          }}
+        >
+            <Avatar size={Size.SMALL} source={Initials.for('Dirk', 'Dingles')} />
+            <ContextLabel label='Dirk Dingles' />
+        </View>
+
+        <View
+        style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'white',
+            flexDirection: 'row',
+            gap: Scale.xs,
+            width: 250
+          }}
+        >
+            <View style={{width: '100%'}}><Paragraph>Toddle Logo</Paragraph></View>
+            <View style={{ flexWrap: 'nowrap', flexDirection: 'row', alignItems: 'center', gap: Scale.xs,}}>
+                <Avatar size={Size.SMALL} source={Initials.for('Dirk', 'DingleslangereNaam')} />
+                <ContextLabel label='Dirk DingleslangereNaamMaarDanEchtSuperLang' />
+            </View>
+        </View>
+    </View>
+  );
+};

package/src/components/molecules/context-label/context-label.styles.d.ts

@@ -0,0 +1,16 @@
+export function Stylesheet(context: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    container: {
+        flex: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+        height: number;
+        maxHeight: number;
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        backgroundColor: any;
+    }[];
+}>;
+import { StyleSheet } from 'react-native';

package/src/components/molecules/context-label/context-label.styles.js

@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: [
+      {
+        flex: 1,
+        borderRadius: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 40,
+        maxHeight: 40,
+        paddingLeft: Scale.s,
+        paddingTop: Scale.xs,
+        paddingRight: Scale.s,
+        paddingBottom: Scale.xs,
+        backgroundColor: context.colors.ui.lightgrey,
+      },
+    ],
+  });