@tactics/toddle-styleguide 5.3.1 → 5.4.0

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

@@ -1,652 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test button component should render a button component 1`] = `
-<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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#19216C",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#E0E8F9",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Test button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a button component that is disabled 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#515F6C",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Button without icon
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a button component with a clock icon, since regular is the default the icon will be outlined 1`] = `
-<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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#19216C",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "marginRight": 12,
-        }
-      }
-    >
-      <RNSVGSvgView
-        align="xMidYMid"
-        bbHeight="24"
-        bbWidth="24"
-        fill="none"
-        focusable={false}
-        height={24}
-        meetOrSlice={0}
-        minX={0}
-        minY={0}
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "borderWidth": 0,
-            },
-            {
-              "flex": 0,
-              "height": 24,
-              "width": 24,
-            },
-          ]
-        }
-        vbHeight={22}
-        vbWidth={23}
-        width={24}
-      >
-        <RNSVGGroup
-          fill={null}
-          propList={
-            [
-              "fill",
-            ]
-          }
-        >
-          <RNSVGPath
-            d="M11.5 6.66667V11L14.875 14.25M21.625 11C21.625 16.3848 17.0919 20.75 11.5 20.75C5.90812 20.75 1.375 16.3848 1.375 11C1.375 5.61522 5.90812 1.25 11.5 1.25C17.0919 1.25 21.625 5.61522 21.625 11Z"
-            fill={
-              {
-                "payload": 4278190080,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "stroke",
-                "strokeWidth",
-                "strokeLinecap",
-                "strokeLinejoin",
-              ]
-            }
-            stroke={
-              {
-                "payload": 4292929785,
-                "type": 0,
-              }
-            }
-            strokeLinecap={1}
-            strokeLinejoin={1}
-            strokeWidth="2"
-          />
-        </RNSVGGroup>
-      </RNSVGSvgView>
-    </View>
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#E0E8F9",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Button with icon
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a button component with a solid icon named eye-off but is also disabled 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#E5E8EB",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "marginRight": 12,
-        }
-      }
-    >
-      <RNSVGSvgView
-        align="xMidYMid"
-        bbHeight="24"
-        bbWidth="24"
-        fill="none"
-        focusable={false}
-        height={24}
-        meetOrSlice={0}
-        minX={0}
-        minY={0}
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "borderWidth": 0,
-            },
-            {
-              "flex": 0,
-              "height": 24,
-              "width": 24,
-            },
-          ]
-        }
-        vbHeight={18}
-        vbWidth={22}
-        width={24}
-      >
-        <RNSVGGroup
-          fill={null}
-          propList={
-            [
-              "fill",
-            ]
-          }
-        >
-          <RNSVGPath
-            clipRule={0}
-            d="M4.07779 0.522134C3.64822 0.092557 2.95174 0.092557 2.52216 0.522134C2.09258 0.95171 2.09258 1.64819 2.52216 2.07777L17.9222 17.4778C18.3517 17.9073 19.0482 17.9073 19.4778 17.4778C19.9074 17.0482 19.9074 16.3517 19.4778 15.9221L17.8573 14.3016C19.5486 12.9516 20.8329 11.1132 21.4966 8.99991C20.0949 4.53712 15.9256 1.29995 11.0002 1.29995C9.21429 1.29995 7.52776 1.72556 6.03654 2.48088L4.07779 0.522134ZM8.76492 5.20926L10.4302 6.87453C10.612 6.82588 10.8031 6.79995 11.0003 6.79995C12.2153 6.79995 13.2003 7.78492 13.2003 8.99995C13.2003 9.19711 13.1743 9.3882 13.1257 9.57002L14.791 11.2353C15.1781 10.5802 15.4003 9.81601 15.4003 8.99995C15.4003 6.5699 13.4303 4.59995 11.0003 4.59995C10.1842 4.59995 9.42002 4.82211 8.76492 5.20926Z"
-            fill={
-              {
-                "payload": 4283522924,
-                "type": 0,
-              }
-            }
-            fillRule={0}
-            propList={
-              [
-                "fill",
-                "fillRule",
-              ]
-            }
-          />
-          <RNSVGPath
-            d="M13.6995 16.3663L10.7246 13.3915C8.51412 13.2548 6.74539 11.4861 6.60875 9.27561L2.56839 5.23525C1.65067 6.3294 0.941981 7.60481 0.503784 8.99999C1.90549 13.4628 6.0748 16.6999 11.0002 16.6999C11.9315 16.6999 12.8358 16.5842 13.6995 16.3663Z"
-            fill={
-              {
-                "payload": 4283522924,
-                "type": 0,
-              }
-            }
-            propList={
-              [
-                "fill",
-              ]
-            }
-          />
-        </RNSVGGroup>
-      </RNSVGSvgView>
-    </View>
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#515F6C",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Button with icon
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a light button component 1`] = `
-<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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#515F6C",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Light button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render a success button component 1`] = `
-<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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#67C14E",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Success button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`test button component should render an error button component 1`] = `
-<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={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#D25E5E",
-        "borderRadius": 50,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "paddingHorizontal": 24,
-        "paddingVertical": 12,
-      }
-    }
-  >
-    <View>
-      <Text
-        style={
-          [
-            [
-              {
-                "fontFamily": "SourceSansPro",
-                "fontSize": 16,
-                "lineHeight": 22.4,
-              },
-            ],
-            {
-              "color": "#FFFFFF",
-              "textAlign": "center",
-              "width": "100%",
-            },
-            undefined,
-          ]
-        }
-      >
-        Error button
-      </Text>
-    </View>
-  </View>
-</View>
-`;

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import render from 'react-test-renderer';
-import {Button} from './button.component';
-
-describe('test button component', () => {
-  it('should render a button component', function () {
-    const tree = render.create(<Button label="Test button" />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a success button component', function () {
-    const tree = render
-      .create(<Button type={'success'} label="Success button" />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render an error button component', function () {
-    const tree = render
-      .create(<Button type={'error'} label="Error button" />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a light button component', function () {
-    const tree = render
-      .create(<Button type={'light'} label="Light button" />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a button component that is disabled', () => {
-    const tree = render
-      .create(<Button label="Button without icon" disabled={true} />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a button component with a clock icon, since regular is the default the icon will be outlined', () => {
-    const tree = render
-      .create(
-        <Button label="Button with icon" icon={true} iconName={'clock'} />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a button component with a solid icon named eye-off but is also disabled', () => {
-    const tree = render
-      .create(
-        <Button
-          label="Button with icon"
-          icon={true}
-          iconStyle={'solid'}
-          iconName={'eye-off'}
-          disabled={true}
-        />
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});