@tactics/toddle-styleguide 5.3.1 → 5.3.3

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

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

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

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

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

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

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

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

package/src/components/atoms/image-bubble/__snapshots__/image-bubble.test.js.snap

@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test image-bubble given the bubbleAlignment is SENT return a text-bubble with right-bottom tip 1`] = `
-<View>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "borderRadius": 24,
-          "justifyContent": "center",
-          "maxWidth": "80%",
-          "overflow": "hidden",
-        },
-        false,
-        {
-          "borderBottomLeftRadius": 32,
-          "borderBottomRightRadius": 8,
-          "marginLeft": 48,
-          "marginRight": 16,
-        },
-      ]
-    }
-  >
-    <Image
-      style={
-        {
-          "resizeMode": "cover",
-        }
-      }
-    />
-  </View>
-</View>
-`;
-
-exports[`test image-bubble given the visualState is RECEIVE return a text-bubble with left-bottom tip 1`] = `
-<View>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "borderRadius": 24,
-          "justifyContent": "center",
-          "maxWidth": "80%",
-          "overflow": "hidden",
-        },
-        {
-          "borderBottomLeftRadius": 8,
-          "borderBottomRightRadius": 32,
-          "marginLeft": 16,
-          "marginRight": 48,
-        },
-        false,
-      ]
-    }
-  >
-    <Image
-      style={
-        {
-          "resizeMode": "cover",
-        }
-      }
-    />
-  </View>
-</View>
-`;

package/src/components/atoms/image-bubble/image-bubble.test.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {ImageBubble} from './image-bubble.component';
-
-describe('test image-bubble', () => {
-  it('given the bubbleAlignment is SENT return a text-bubble with right-bottom tip', () => {
-    const tree = renderer
-      .create(<ImageBubble bubbleAlignment="SENT" />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visualState is RECEIVE return a text-bubble with left-bottom tip', () => {
-    const tree = renderer
-      .create(<ImageBubble bubbleAlignment="RECEIVE" />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/atoms/increment-input/__snapshots__/increment-input.test.js.snap

@@ -1,269 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Increment input test renders an increment input component 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "flexDirection": "row",
-      "width": "100%",
-    }
-  }
->
-  <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]}
-    style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#19216C",
-        "borderRadius": 50,
-        "height": 32,
-        "justifyContent": "center",
-        "width": 32,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="18"
-      bbWidth="18"
-      fill="none"
-      focusable={false}
-      height={18}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 18,
-            "width": 18,
-          },
-        ]
-      }
-      vbHeight={3}
-      vbWidth={16}
-      width={18}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M14.5 1.5H1.5"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4294967295,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#FFFFFF",
-        "borderColor": "#E5E8EB",
-        "borderRadius": 8,
-        "borderStyle": "solid",
-        "borderWidth": 1,
-        "display": "flex",
-        "height": 48,
-        "justifyContent": "center",
-        "marginLeft": 8,
-        "marginRight": 8,
-        "width": 48,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": "center",
-            "width": "100%",
-          },
-          {
-            "alignItems": "center",
-            "display": "flex",
-            "justifyContent": "center",
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      0
-    </Text>
-  </View>
-  <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]}
-    style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#19216C",
-        "borderRadius": 50,
-        "height": 32,
-        "justifyContent": "center",
-        "width": 32,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="18"
-      bbWidth="18"
-      fill="none"
-      focusable={false}
-      height={18}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 18,
-            "width": 18,
-          },
-        ]
-      }
-      vbHeight={17}
-      vbWidth={17}
-      width={18}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M8.5 1.75V8.5M8.5 8.5V15.25M8.5 8.5H15.25M8.5 8.5L1.75 8.5"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4294967295,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;

package/src/components/atoms/increment-input/increment-input.test.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {IncrementInput} from './increment-input.component';
-
-describe('Increment input test', () => {
-  it('renders an increment input component', function () {
-    const tree = render
-      .create(
-        <IncrementInput value={0} onPress={() => console.log('change value')} />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});