@tactics/toddle-styleguide 1.7.4 → 1.7.5

package/package.json

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

package/src/components/molecules/inline-notice/inline-notice.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-notice.styles';
+import {SmallText} from '../../atoms/paragraph-components';
+import { Icon } from '../../../icons';
+
+type InlineNoticeProps = {
+  label: string;
+};
+
+const InlineNotice = ({label}: InlineNoticeProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <View style={styles.container}>
+      <Icon name='exclamation-circle' style='regular' color={context.colors.ui.warning.dark} />
+      <SmallText addStyle={styles.label} textColor={context.colors.ui.warning.dark}>
+        {label}
+      </SmallText>
+    </View>
+  );
+};
+export {InlineNotice as InlineNotice};

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

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

package/src/components/molecules/inline-notice/inline-notice.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-notice/inline-notice.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
+    }
+  });

package/src/models/time-slot-sequence.ts

@@ -73,4 +73,13 @@ export class TimeSlotSequence {
       this.fourth.isComplete()
     );
   }
+
+  isEmpty(): boolean {
+    return (
+        this.first.isEmpty() &&
+        this.second.isEmpty() &&
+        this.third.isEmpty() &&
+        this.fourth.isEmpty()
+    );
+  }
 }