@tactics/toddle-styleguide 5.3.1 → 5.3.3

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

@@ -1,18 +0,0 @@
-import renderer from 'react-test-renderer';
-import {TimePicker} from './time-picker.component';
-
-describe('Time picker test', () => {
-  it('Should render a time picker where we can choose the hours and minutes separately, and our initial set time is 08:00', () => {
-    const tree = renderer
-      .create(
-        <TimePicker
-          initialHours={'08'}
-          initialMinutes={'00'}
-          onChangeHours={() => console.log('set the hours')}
-          onChangeMinutes={() => console.log('set the minutes')}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,266 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test time-tracker given the visualState is DEFAULT return a blue colored ball 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "borderRadius": 6,
-          "height": 12,
-          "marginRight": 4,
-          "width": 12,
-        },
-        {
-          "backgroundColor": "#19216C",
-        },
-        false,
-        false,
-        false,
-      ]
-    }
-  />
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 11,
-              "lineHeight": 17.9,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      3u45
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test time-tracker given the visualState is ERROR return a red colored ball 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "borderRadius": 6,
-          "height": 12,
-          "marginRight": 4,
-          "width": 12,
-        },
-        false,
-        false,
-        false,
-        {
-          "backgroundColor": "#F16868",
-        },
-      ]
-    }
-  />
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 11,
-              "lineHeight": 17.9,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      3u45
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test time-tracker given the visualState is SUCCESS return a green colored ball 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "borderRadius": 6,
-          "height": 12,
-          "marginRight": 4,
-          "width": 12,
-        },
-        false,
-        {
-          "backgroundColor": "#83D56C",
-        },
-        false,
-        false,
-      ]
-    }
-  />
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 11,
-              "lineHeight": 17.9,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      3u45
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test time-tracker given the visualState is WARNING return an orange colored ball 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "borderRadius": 6,
-          "height": 12,
-          "marginRight": 4,
-          "width": 12,
-        },
-        false,
-        false,
-        {
-          "backgroundColor": "#FCBF6F",
-        },
-        false,
-      ]
-    }
-  />
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 11,
-              "lineHeight": 17.9,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      3u45
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test time-tracker text has color when a color is given as property 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "borderRadius": 6,
-          "height": 12,
-          "marginRight": 4,
-          "width": 12,
-        },
-        {
-          "backgroundColor": "#19216C",
-        },
-        false,
-        false,
-        false,
-      ]
-    }
-  />
-  <View>
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 11,
-              "lineHeight": 17.9,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      3u45
-    </Text>
-  </View>
-</View>
-`;

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.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.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();
-  });
-});