@tactics/toddle-styleguide 5.3.1 → 5.3.3

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

@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test input texts show an input field with a border and placeholder text 1`] = `
-<TextInput
-  keyboardType="email-address"
-  onChangeText={[Function]}
-  placeholder="Text input field with a border"
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      {
-        "borderColor": "#E5E8EB",
-        "borderStyle": "solid",
-        "borderWidth": 1,
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test input texts show an input field with a border and without placeholder text 1`] = `
-<TextInput
-  keyboardType="email-address"
-  onChangeText={[Function]}
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      {
-        "borderColor": "#E5E8EB",
-        "borderStyle": "solid",
-        "borderWidth": 1,
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test input texts shows placeholder when provided 1`] = `
-<TextInput
-  keyboardType="default"
-  onChangeText={[Function]}
-  placeholder="dummy placeholder"
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
-/>
-`;
-
-exports[`test input texts text input field without placeholder text 1`] = `
-<TextInput
-  keyboardType="email-address"
-  onChangeText={[Function]}
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
-/>
-`;

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

@@ -1,59 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {TextInput} from './text-input.component';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-
-describe('test input texts', () => {
-  it('shows placeholder when provided', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.DEFAULT}
-          placeholder="dummy placeholder"
-          onChangeText={() => console.log('text changed')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('text input field without placeholder text', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onChangeText={() => console.log('text changed')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('show an input field with a border and without placeholder text', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onChangeText={() => console.log('text changed')}
-          border={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('show an input field with a border and placeholder text', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onChangeText={() => console.log('text changed')}
-          border={true}
-          placeholder={'Text input field with a border'}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test avatar given the isBlocked is true, and provide image source is empty return a red colored avatar  1`] = `
-<View
-  style={null}
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "backgroundColor": "#647ACB",
-          "justifyContent": "center",
-          "overflow": "hidden",
-        },
-        {
-          "borderRadius": 20,
-          "height": 40,
-          "width": 40,
-        },
-        false,
-        false,
-      ]
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansProBold",
-              "fontSize": 18,
-              "lineHeight": 22.6,
-            },
-          ],
-          {
-            "color": "#FFFFFF",
-            "textAlign": "center",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      JD
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test avatar renders correctly when provided image source is empty 1`] = `
-<View
-  style={null}
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "backgroundColor": "#647ACB",
-          "justifyContent": "center",
-          "overflow": "hidden",
-        },
-        {
-          "borderRadius": 20,
-          "height": 40,
-          "width": 40,
-        },
-        false,
-        false,
-      ]
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "SourceSansProBold",
-              "fontSize": 18,
-              "lineHeight": 22.6,
-            },
-          ],
-          {
-            "color": "#FFFFFF",
-            "textAlign": "center",
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      JD
-    </Text>
-  </View>
-</View>
-`;

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Avatar} from './avatar.component';
-import {Initials} from '../../../models/initials.model';
-import {Size} from '../../../types/size.enum';
-
-describe('test avatar', () => {
-  it('renders correctly when provided image source is empty', () => {
-    const tree = renderer
-      .create(<Avatar source={Initials.for('John', 'Doe')} size={Size.SMALL} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the isBlocked is true, and provide image source is empty return a red colored avatar ', () => {
-    const tree = renderer
-      .create(<Avatar source={Initials.for('John', 'Doe')} size={Size.SMALL} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/blocked-message/__snapshots__/blocked-message.test.js.snap

@@ -1,107 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Blocked message visual test renders a cancel link with label "cancel" that is pressable 1`] = `
-<View
-  style={
-    {
-      "alignItems": "center",
-      "backgroundColor": "#FBD9D9",
-      "borderRadius": 8,
-      "display": "flex",
-      "flexDirection": "row",
-      "paddingBottom": 24,
-      "paddingLeft": 24,
-      "paddingRight": 24,
-      "paddingTop": 24,
-    }
-  }
->
-  <RNSVGSvgView
-    align="xMidYMid"
-    bbHeight="26"
-    bbWidth="26"
-    fill="none"
-    focusable={false}
-    height={26}
-    meetOrSlice={0}
-    minX={0}
-    minY={0}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "borderWidth": 0,
-        },
-        {
-          "flex": 0,
-          "height": 26,
-          "width": 26,
-        },
-      ]
-    }
-    vbHeight={23}
-    vbWidth={22}
-    width={26}
-  >
-    <RNSVGGroup
-      fill={null}
-      propList={
-        [
-          "fill",
-        ]
-      }
-    >
-      <RNSVGPath
-        d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-        fill={
-          {
-            "payload": 4278190080,
-            "type": 0,
-          }
-        }
-        propList={
-          [
-            "stroke",
-            "strokeWidth",
-            "strokeLinecap",
-            "strokeLinejoin",
-          ]
-        }
-        stroke={
-          {
-            "payload": 4291976798,
-            "type": 0,
-          }
-        }
-        strokeLinecap={1}
-        strokeLinejoin={1}
-        strokeWidth="2"
-      />
-    </RNSVGGroup>
-  </RNSVGSvgView>
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "Montserrat",
-            "fontSize": 14,
-            "lineHeight": 22.4,
-          },
-        ],
-        {
-          "color": "#D25E5E",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        {
-          "flex": 1,
-          "marginLeft": 16,
-        },
-      ]
-    }
-  >
-    You shall not pass!!!!
-  </Text>
-</View>
-`;

package/src/components/molecules/blocked-message/blocked-message.test.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import render from 'react-test-renderer';
-import {BlockedMessage} from './blocked-message.component';
-
-describe('Blocked message visual test', () => {
-  it('renders a cancel link with label "cancel" that is pressable', function () {
-    const tree = render
-      .create(<BlockedMessage message={'You shall not pass!!!!'} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});