@tactics/toddle-styleguide 5.0.4 → 5.0.5

package/src/components/molecules/time-tracker/time-tracker.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {TimeTracker} from './time-tracker.component';
+
+describe('test time-tracker', () => {
+  it('given the visualState is DEFAULT return a blue colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="DEFAULT" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is SUCCESS return a green colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="SUCCESS" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is WARNING return an orange colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="WARNING" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('given the visualState is ERROR return a red colored ball', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="ERROR" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('text has color when a color is given as property', () => {
+    const tree = renderer
+      .create(<TimeTracker text="3u45" visualState="DEFAULT" color="red" />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/molecules/timeline/__snapshots__/timeline.test.js.snap

@@ -0,0 +1,257 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timeline visual test renders a check-in time and check-out time 1`] = `
+<View
+  style={
+    {
+      "marginBottom": 8,
+      "marginTop": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#E5E8EB",
+        "borderRadius": 50,
+        "height": 16,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoLinearGradient
+      colors={
+        [
+          4284775115,
+          4284775115,
+        ]
+      }
+      endPoint={
+        [
+          1,
+          0,
+        ]
+      }
+      startPoint={
+        [
+          0,
+          0,
+        ]
+      }
+      style={
+        {
+          "borderRadius": 50,
+          "height": "100%",
+          "left": "10%",
+          "width": "33.333333333333336%",
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "row",
+          "height": 24,
+          "marginTop": 8,
+          "width": "33.333333333333336%",
+        },
+        {
+          "justifyContent": "space-between",
+          "marginLeft": "10%",
+        },
+        false,
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "right": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#1F2933",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        07:30
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "left": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#1F2933",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        12:30
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Timeline visual test renders a check-in time with no known check-out time 1`] = `
+<View
+  style={
+    {
+      "marginBottom": 8,
+      "marginTop": 8,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "#E5E8EB",
+        "borderRadius": 50,
+        "height": 16,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoLinearGradient
+      colors={
+        [
+          4284775115,
+          4293257451,
+        ]
+      }
+      endPoint={
+        [
+          1,
+          0,
+        ]
+      }
+      startPoint={
+        [
+          0,
+          0,
+        ]
+      }
+      style={
+        {
+          "borderRadius": 50,
+          "height": "100%",
+          "left": "10%",
+          "width": "25%",
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "row",
+          "height": 24,
+          "marginTop": 8,
+          "width": "25%",
+        },
+        {
+          "justifyContent": "space-between",
+          "marginLeft": "10%",
+        },
+        false,
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "right": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#1F2933",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        07:30
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "left": 12,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            [
+              {
+                "fontFamily": "Montserrat",
+                "fontSize": 13,
+                "lineHeight": 20.4,
+              },
+            ],
+            {
+              "color": "#1F2933",
+              "textAlign": undefined,
+              "width": "100%",
+            },
+            undefined,
+          ]
+        }
+      >
+        --:--
+      </Text>
+    </View>
+  </View>
+</View>
+`;

package/src/components/molecules/timeline/timeline.component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type TimeLineProps = {
+    checkIn: string;
+    checkOut?: string;
+};
+export declare const TimeLine: ({ checkIn, checkOut }: TimeLineProps) => React.JSX.Element;
+export {};

package/src/components/molecules/timeline/timeline.component.tsx

@@ -0,0 +1,69 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './timeline.styles';
+import {LinearGradient} from 'expo-linear-gradient';
+import {SmallText} from '../../atoms/paragraph-components';
+
+type TimeLineProps = {
+  checkIn: string;
+  checkOut?: string;
+};
+
+export const TimeLine = ({checkIn, checkOut}: TimeLineProps) => {
+  const startHour = 0;
+  const endHour = 24;
+
+  const calculateCheckInPosition = (checkInTime: string) => {
+    const [hours, minutes] = checkInTime.split(':');
+    const totalMinutes =
+      parseInt(hours) * 60 + parseInt(minutes) - startHour * 60;
+    return (totalMinutes / ((endHour - startHour) * 60)) * 100;
+  };
+
+  const calculateCheckOutPosition = (checkOutTime?: string) => {
+    if (checkOutTime) {
+      const [hours, minutes] = checkOutTime.split(':');
+      const totalMinutes =
+        parseInt(hours) * 60 + parseInt(minutes) - startHour * 60;
+      return (totalMinutes / ((endHour - startHour) * 60)) * 100;
+    }
+    return 25;
+  };
+
+  const checkInPosition = calculateCheckInPosition(checkIn);
+  const checkOutPosition = calculateCheckOutPosition(checkOut);
+
+  const gradientWidth =
+    checkOut && checkOutPosition !== checkInPosition
+      ? checkOutPosition - checkInPosition
+      : 25;
+
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, checkInPosition, gradientWidth);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.lineContainer}>
+        <LinearGradient
+          colors={
+            !checkOut
+              ? [context.colors.main['5'], context.colors.ui.lightgrey]
+              : [context.colors.main['5'], context.colors.main['5']]
+          }
+          style={styles.checkInLine}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 0}}
+        />
+      </View>
+      <View style={styles.checkInOutTextContainer}>
+        <View style={styles.checkInTime}>
+          <SmallText>{checkIn}</SmallText>
+        </View>
+        <View style={styles.checkOutTime}>
+          <SmallText>{checkOut ? checkOut : '--:--'}</SmallText>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/components/molecules/timeline/timeline.preview.d.ts

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

package/src/components/molecules/timeline/timeline.preview.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {TimeLine} from './timeline.component';
+const {View} = require('react-native');
+
+export const TimeLinePreview = ({}: {}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: '80%',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <TimeLine checkIn={'07:00'} checkOut={'12:00'} />
+        <TimeLine checkIn={'08:00'} checkOut={'12:30'} />
+        <TimeLine checkIn={'13:00'} checkOut={''} />
+        <TimeLine checkIn={'16:00'} checkOut={'21:00'} />
+        <TimeLine checkIn={'07:52'} checkOut={'12:20'} />
+        <TimeLine checkIn={'13:00'} checkOut={'17:45'} />
+        <TimeLine checkIn={'18:00'} />
+        <TimeLine checkIn={'15:00'} checkOut={'20:00'} />
+      </View>
+    </View>
+  );
+};

package/src/components/molecules/timeline/timeline.styles.d.ts

@@ -0,0 +1,61 @@
+export function Stylesheet(
+  context: any,
+  startingPosition: any,
+  width: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: {
+        width: string;
+        marginTop: number;
+        marginBottom: number;
+      };
+      lineContainer: {
+        height: number;
+        borderRadius: number;
+        backgroundColor: any;
+        overflow: 'hidden';
+      };
+      checkInLine: {
+        height: string;
+        width: string;
+        borderRadius: number;
+        left: string;
+      };
+      checkInOutTextContainer: (
+        | {
+            width: string;
+            flexDirection: string;
+            height: number;
+            marginTop: number;
+            marginLeft?: undefined;
+            justifyContent?: undefined;
+            alignSelf?: undefined;
+          }
+        | {
+            marginLeft: string;
+            justifyContent: string;
+            width?: undefined;
+            flexDirection?: undefined;
+            height?: undefined;
+            marginTop?: undefined;
+            alignSelf?: undefined;
+          }
+        | {
+            alignSelf: string;
+            justifyContent: string;
+            width: string;
+            flexDirection?: undefined;
+            height?: undefined;
+            marginTop?: undefined;
+            marginLeft?: undefined;
+          }
+      )[];
+      checkInTime: {
+        right: number;
+      };
+      checkOutTime: {
+        left: number;
+      };
+    }>;
+import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';

package/src/components/molecules/timeline/timeline.styles.js

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, startingPosition, width) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      marginTop: Scale.xs,
+      marginBottom: Scale.xs,
+    },
+    lineContainer: {
+      height: Scale.m,
+      borderRadius: 50,
+      backgroundColor: context.colors.ui.lightgrey,
+      overflow: 'hidden',
+    },
+    checkInLine: {
+      height: '100%',
+      width: width.toString() + '%',
+      borderRadius: 50,
+      left: startingPosition.toString() + '%',
+    },
+    checkInOutTextContainer: [
+      {
+        width: width.toString() + '%',
+        flexDirection: 'row',
+        height: Scale.l,
+        marginTop: Scale.xs,
+      },
+      startingPosition < 80 && {
+        marginLeft: startingPosition.toString() + '%',
+        justifyContent: 'space-between',
+      },
+      startingPosition >= 80 && {
+        alignSelf: 'flex-end',
+        justifyContent: 'space-between',
+        width: 'auto',
+      },
+    ],
+    checkInTime: {
+      right: Scale.m,
+    },
+    checkOutTime: {
+      left: width === 25 ? Scale.s : Scale.m,
+    },
+  });

package/src/components/molecules/timeline/timeline.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {TimeLine} from './timeline.component';
+
+describe('Timeline visual test', () => {
+  it('renders a check-in time with no known check-out time', () => {
+    const tree = renderer.create(<TimeLine checkIn={'07:30'} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders a check-in time and check-out time', () => {
+    const tree = renderer
+      .create(<TimeLine checkIn={'07:30'} checkOut={'12:30'} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/molecules/timestamp/__snapshots__/timestamp.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timestamp component test Renders a timestamp component, this will be added to our text bubble for when a message has been sent 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "Montserrat",
+          "fontSize": 13,
+          "lineHeight": 20.4,
+        },
+      ],
+      {
+        "color": "#9AA5B1",
+        "textAlign": "right",
+        "width": "100%",
+      },
+      {
+        "textAlignVertical": "center",
+      },
+    ]
+  }
+>
+   
+  25 May, 9:08
+</Text>
+`;

package/src/components/molecules/timestamp/timestamp.component.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
+type TimestampProps = {
+    sent: ToddleDateTime;
+    label?: string;
+};
+export declare const Timestamp: ({ sent, label }: TimestampProps) => React.JSX.Element;
+export {};

package/src/components/molecules/timestamp/timestamp.component.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import {Stylesheet} from './timestamp.styles';
+import {SmallText} from '../../atoms/paragraph-components';
+
+type TimestampProps = {
+  sent: ToddleDateTime;
+  label?: string;
+};
+
+export const Timestamp = ({sent, label}: TimestampProps) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  const timestampToStringHandler = (timestamp: ToddleDateTime) => {
+    return timestamp.toFormat('d LLL, H:mm');
+  };
+
+  return (
+    <SmallText
+      textColor={Context.colors.ui.grey}
+      textAlign={'right'}
+      addStyle={styles.timestampText}
+    >
+      {label} {timestampToStringHandler(sent)}
+    </SmallText>
+  );
+};

package/src/components/molecules/timestamp/timestamp.styles.d.ts

@@ -0,0 +1,5 @@
+export function Stylesheet(): {
+  timestampText: {
+    textAlignVertical: 'center';
+  };
+};

package/src/components/molecules/timestamp/timestamp.styles.js

@@ -0,0 +1,8 @@
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    timestampText: {
+      textAlignVertical: 'center',
+    },
+  });

package/src/components/molecules/timestamp/timestamp.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Timestamp} from './timestamp.component';
+import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+
+const testDate = ToddleDateTime.fromISO('2016-05-25T09:08:34.123', {
+  locale: 'en-GB',
+});
+
+describe('Timestamp component test', () => {
+  it('Renders a timestamp component, this will be added to our text bubble for when a message has been sent', () => {
+    const tree = renderer.create(<Timestamp sent={testDate} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});