@tactics/toddle-styleguide 5.0.1 → 5.0.2

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

@@ -1,36 +0,0 @@
-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

@@ -1,257 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,28 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

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

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

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

@@ -1,16 +0,0 @@
-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();
-  });
-});