@tactics/toddle-styleguide 5.3.1 → 5.3.3

package/src/components/atoms/calendar/calendar.test.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {Calendar} from './calendar.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-
-const testDate = ToddleDateTime.fromISO('2022-05-25T09:08:34.123', {
-  locale: 'en-GB',
-});
-
-describe('Test for the calendar component', () => {
-  it('renders a calendar where you can select a day', function () {
-    const tree = render
-      .create(
-        <Calendar
-          selected={testDate}
-          onDayPress={() => console.log('pressed day')}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders a calendar where you can select a day, and give a starting-, end-date for the calendar', function () {
-    const tree = render
-      .create(
-        <Calendar
-          selected={testDate}
-          onDayPress={() => console.log('pressed day')}
-          minDate={'2022-01-01'}
-          maxDate={'2022-12-31'}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/atoms/check-switch/__snapshots__/check-switch.test.js.snap

@@ -1,84 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test check switch should render a check switch component 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-      "justifyContent": "center",
-    }
-  }
->
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-  >
-    <View
-      style={
-        {
-          "backgroundColor": "#647ACB",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "paddingLeft": 4,
-          "paddingRight": 4,
-          "width": 65,
-        }
-      }
-    >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderRadius": 50,
-            "elevation": 4,
-            "height": 30,
-            "shadowColor": "#1F2933",
-            "shadowOffset": {
-              "height": 2,
-              "width": 0,
-            },
-            "shadowOpacity": 0.8,
-            "shadowRadius": 2,
-            "transform": [
-              {
-                "translateX": 0,
-              },
-            ],
-            "width": 30,
-          }
-        }
-      />
-    </View>
-  </View>
-</View>
-`;

package/src/components/atoms/check-switch/check-switch.test.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Check} from './check-switch.component';
-
-describe('test check switch', () => {
-  it('should render a check switch component', () => {
-    const tree = renderer
-      .create(<Check value={true} onToggle={() => console.log('test')} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/atoms/heading-components/all-caps-heading/__snapshots__/all-caps-heading.test.js.snap

@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test for the all caps heading component should render an all caps heading component, huge font, bold, a custom color and only accepts strings as children 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "textAlignVertical": "bottom",
-          "textTransform": "uppercase",
-        },
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 13,
-          "lineHeight": 20.4,
-        },
-      ],
-      {
-        "color": "#888888",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  All caps heading bold with a specified color
-</Text>
-`;
-
-exports[`Test for the all caps heading component should render an all caps heading component, huge font, bold, and only accepts strings as children 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "textAlignVertical": "bottom",
-          "textTransform": "uppercase",
-        },
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 13,
-          "lineHeight": 20.4,
-        },
-      ],
-      {
-        "color": "#1F2933",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  All caps heading bold
-</Text>
-`;
-
-exports[`Test for the all caps heading component should render an all caps heading component, huge font, not bold, and only accepts strings as children 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "textAlignVertical": "bottom",
-          "textTransform": "uppercase",
-        },
-        {
-          "fontFamily": "Montserrat",
-          "fontSize": 13,
-          "lineHeight": 20.4,
-        },
-      ],
-      {
-        "color": "#1F2933",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  All caps heading
-</Text>
-`;
-
-exports[`Test for the all caps heading component should render an all caps heading component, huge font, not bold, only accepts strings as children and gets another color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "textAlignVertical": "bottom",
-          "textTransform": "uppercase",
-        },
-        {
-          "fontFamily": "Montserrat",
-          "fontSize": 13,
-          "lineHeight": 20.4,
-        },
-      ],
-      {
-        "color": "#c2c2c2",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  All caps heading with a specified color
-</Text>
-`;

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.test.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {AllCapsHeading} from './all-caps-heading.component';
-
-describe('Test for the all caps heading component', () => {
-  it('should render an all caps heading component, huge font, not bold, and only accepts strings as children', function () {
-    const tree = renderer
-      .create(<AllCapsHeading>All caps heading</AllCapsHeading>)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render an all caps heading component, huge font, not bold, only accepts strings as children and gets another color', function () {
-    const tree = renderer
-      .create(
-        <AllCapsHeading textColor={'#c2c2c2'}>
-          All caps heading with a specified color
-        </AllCapsHeading>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render an all caps heading component, huge font, bold, and only accepts strings as children', function () {
-    const tree = renderer
-      .create(
-        <AllCapsHeading bold={true}>All caps heading bold</AllCapsHeading>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render an all caps heading component, huge font, bold, a custom color and only accepts strings as children', function () {
-    const tree = renderer
-      .create(
-        <AllCapsHeading bold={true} textColor={'#888888'}>
-          All caps heading bold with a specified color
-        </AllCapsHeading>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/atoms/heading-components/heading1/__snapshots__/heading1.test.js.snap

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test for Heading1 should render a Heading 1 component, huge font, bold 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansProBold",
-          "fontSize": 38,
-          "lineHeight": 47.8,
-        },
-      ],
-      {
-        "color": "#1F2933",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 1 bold
-</Text>
-`;
-
-exports[`Test for Heading1 should render a Heading 1 component, huge font, bold and a custom color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansProBold",
-          "fontSize": 38,
-          "lineHeight": 47.8,
-        },
-      ],
-      {
-        "color": "#888888",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 1 bold with a specified color
-</Text>
-`;
-
-exports[`Test for Heading1 should render a Heading 1 component, huge font, bold and a custom color and its alignment is justified 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansProBold",
-          "fontSize": 38,
-          "lineHeight": 47.8,
-        },
-      ],
-      {
-        "color": "#888888",
-        "textAlign": "justify",
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 1 bold with a specified color
-</Text>
-`;
-
-exports[`Test for Heading1 should render a Heading 1 component, huge font, not bold 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansPro",
-          "fontSize": 38,
-          "lineHeight": 47.8,
-        },
-      ],
-      {
-        "color": "#1F2933",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 1 
-</Text>
-`;
-
-exports[`Test for Heading1 should render a Heading 1 component, huge font, not bold and gets another color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansPro",
-          "fontSize": 38,
-          "lineHeight": 47.8,
-        },
-      ],
-      {
-        "color": "#c2c2c2",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 1 with a specified color
-</Text>
-`;

package/src/components/atoms/heading-components/heading1/heading1.test.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Heading1} from './heading1.component';
-
-describe('Test for Heading1', () => {
-  it('should render a Heading 1 component, huge font, not bold', function () {
-    const tree = renderer.create(<Heading1>Heading 1 </Heading1>).toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 1 component, huge font, not bold and gets another color', function () {
-    const tree = renderer
-      .create(
-        <Heading1 textColor={'#c2c2c2'}>
-          Heading 1 with a specified color
-        </Heading1>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 1 component, huge font, bold', function () {
-    const tree = renderer
-      .create(<Heading1 bold={true}>Heading 1 bold</Heading1>)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 1 component, huge font, bold and a custom color', function () {
-    const tree = renderer
-      .create(
-        <Heading1 bold={true} textColor={'#888888'}>
-          Heading 1 bold with a specified color
-        </Heading1>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 1 component, huge font, bold and a custom color and its alignment is justified', function () {
-    const tree = renderer
-      .create(
-        <Heading1 bold={true} textColor={'#888888'} textAlign={'justify'}>
-          Heading 1 bold with a specified color
-        </Heading1>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/atoms/heading-components/heading2/__snapshots__/heading2.test.js.snap

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test for Heading2 should render a Heading 2 component, big font, bold 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansProBold",
-          "fontSize": 24,
-          "lineHeight": 30.2,
-        },
-      ],
-      {
-        "color": "#1F2933",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 2 bold
-</Text>
-`;
-
-exports[`Test for Heading2 should render a Heading 2 component, big font, bold, a custom color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansProBold",
-          "fontSize": 24,
-          "lineHeight": 30.2,
-        },
-      ],
-      {
-        "color": "#888888",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 2 bold with a specified color
-</Text>
-`;
-
-exports[`Test for Heading2 should render a Heading 2 component, big font, bold, a custom color and aligned center 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansProBold",
-          "fontSize": 24,
-          "lineHeight": 30.2,
-        },
-      ],
-      {
-        "color": "#888888",
-        "textAlign": "center",
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 2 bold with a specified color
-</Text>
-`;
-
-exports[`Test for Heading2 should render a Heading 2 component, big font, not bold 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansPro",
-          "fontSize": 24,
-          "lineHeight": 30.2,
-        },
-      ],
-      {
-        "color": "#1F2933",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 2
-</Text>
-`;
-
-exports[`Test for Heading2 should render a Heading 2 component, big font, not bold and gets another color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "SourceSansPro",
-          "fontSize": 24,
-          "lineHeight": 30.2,
-        },
-      ],
-      {
-        "color": "#c2c2c2",
-        "textAlign": undefined,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
->
-  Heading 2 with a specified color
-</Text>
-`;

package/src/components/atoms/heading-components/heading2/heading2.test.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Heading2} from './heading2.component';
-
-describe('Test for Heading2', () => {
-  it('should render a Heading 2 component, big font, not bold', function () {
-    const tree = renderer.create(<Heading2>Heading 2</Heading2>).toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 2 component, big font, not bold and gets another color', function () {
-    const tree = renderer
-      .create(
-        <Heading2 textColor={'#c2c2c2'}>
-          Heading 2 with a specified color
-        </Heading2>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 2 component, big font, bold', function () {
-    const tree = renderer
-      .create(<Heading2 bold={true}>Heading 2 bold</Heading2>)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 2 component, big font, bold, a custom color', function () {
-    const tree = renderer
-      .create(
-        <Heading2 bold={true} textColor={'#888888'}>
-          Heading 2 bold with a specified color
-        </Heading2>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a Heading 2 component, big font, bold, a custom color and aligned center', function () {
-    const tree = renderer
-      .create(
-        <Heading2 bold={true} textColor={'#888888'} textAlign={'center'}>
-          Heading 2 bold with a specified color
-        </Heading2>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});