boxons/components/shared/__tests__/__snapshots__/Button.test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`[Component] Button Color variations renders with different colors 1`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#3AC26E",
      "borderColor": "#3AC26E",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="white"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#FFFFFF",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Color variations renders with different colors 2`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FF4141",
      "borderColor": "#FF4141",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="white"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#FFFFFF",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Color variations renders with different colors 3`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#F9F9F9",
      "borderColor": "#F9F9F9",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="black"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#000000",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Disabled state renders correctly 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}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="black"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#000000",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Icon rendering renders icon only without label 1`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="black"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#000000",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
  <View
    pointerEvents="none"
    style={
      [
        {
          "width": 8,
        },
        undefined,
      ]
    }
    widthUnits={2}
  />
  <View
    style={
      [
        {
          "alignItems": "center",
          "aspectRatio": 1,
          "height": 24,
          "justifyContent": "center",
        },
        undefined,
      ]
    }
  >
    <div
      data-testid="mock-icon"
    />
  </View>
</View>
`;

exports[`[Component] Button Icon rendering renders with icon on the left 1`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <View
    style={
      [
        {
          "alignItems": "center",
          "aspectRatio": 1,
          "height": 24,
          "justifyContent": "center",
        },
        undefined,
      ]
    }
  >
    <div
      data-testid="mock-icon"
    />
  </View>
  <View
    pointerEvents="none"
    style={
      [
        {
          "width": 8,
        },
        undefined,
      ]
    }
    widthUnits={2}
  />
  <Text
    color="black"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#000000",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Icon rendering renders with icon on the right 1`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="black"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#000000",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
  <View
    pointerEvents="none"
    style={
      [
        {
          "width": 8,
        },
        undefined,
      ]
    }
    widthUnits={2}
  />
  <View
    style={
      [
        {
          "alignItems": "center",
          "aspectRatio": 1,
          "height": 24,
          "justifyContent": "center",
        },
        undefined,
      ]
    }
  >
    <div
      data-testid="mock-icon"
    />
  </View>
</View>
`;

exports[`[Component] Button Loading state renders correctly 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}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="black"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#000000",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Ready state renders correctly 1`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": 6,
      "borderWidth": 0,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    color="black"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#000000",
            "fontSize": 16,
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Secondary button renders correctly 1`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": 6,
      "borderWidth": 1,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    bgColor="white"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#FFFFFF",
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;

exports[`[Component] Button Secondary button with different colors 1`] = `
<View
  accessibilityState={
    {
      "busy": undefined,
      "checked": undefined,
      "disabled": false,
      "expanded": undefined,
      "selected": undefined,
    }
  }
  accessibilityValue={
    {
      "max": undefined,
      "min": undefined,
      "now": undefined,
      "text": undefined,
    }
  }
  accessible={true}
  collapsable={false}
  focusable={true}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={
    {
      "alignItems": "center",
      "backgroundColor": "#3AC26E",
      "borderColor": "#3AC26E",
      "borderRadius": 6,
      "borderWidth": 1,
      "flexDirection": "row",
      "height": 48,
      "justifyContent": "center",
      "opacity": 1,
      "paddingHorizontal": 16,
    }
  }
>
  <Text
    bgColor="green"
    style={
      [
        {
          "color": "#000000",
        },
        [
          {
            "color": "#3AC26E",
            "fontWeight": "semibold",
          },
          undefined,
        ],
      ]
    }
  >
    Press me
  </Text>
</View>
`;