@hero-design/rn 7.2.2 → 7.3.2

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -0,0 +1,895 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledButtonContainer has basic-transparent style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#ffffff",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="basic-transparent"
+/>
+`;
+
+exports[`StyledButtonContainer has filled-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#7622d7",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-primary"
+/>
+`;
+
+exports[`StyledButtonContainer has filled-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#4568fb",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-secondary"
+/>
+`;
+
+exports[`StyledButtonContainer has outlined-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#7622d7",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-primary"
+/>
+`;
+
+exports[`StyledButtonContainer has outlined-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#4568fb",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-secondary"
+/>
+`;
+
+exports[`StyledButtonContainer has pressed with the correct variant basic-transparent style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#ffffff",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 0.6,
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="basic-transparent"
+/>
+`;
+
+exports[`StyledButtonContainer has pressed with the correct variant filled-primary style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#c8a7ef",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-primary"
+/>
+`;
+
+exports[`StyledButtonContainer has pressed with the correct variant filled-secondary style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#d1d9fe",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-secondary"
+/>
+`;
+
+exports[`StyledButtonContainer has pressed with the correct variant outlined-primary style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#c8a7ef",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-primary"
+/>
+`;
+
+exports[`StyledButtonContainer has pressed with the correct variant outlined-secondary style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderColor": "#d1d9fe",
+        "borderRadius": 32,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 14,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-secondary"
+/>
+`;
+
+exports[`StyledButtonContainer renders disabled correctly 1`] = `
+<View
+  disabled={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ccced1",
+        "borderRadius": 32,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-primary"
+/>
+`;
+
+exports[`StyledButtonIcon has basic-transparent style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has filled-primary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has filled-secondary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has outlined-primary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#7622d7",
+          "fontSize": 18,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has outlined-secondary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#4568fb",
+          "fontSize": 18,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has pressed with the correct variant basic-transparent style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has pressed with the correct variant filled-primary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has pressed with the correct variant filled-secondary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has pressed with the correct variant outlined-primary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#c8a7ef",
+          "fontSize": 18,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has pressed with the correct variant outlined-secondary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#d1d9fe",
+          "fontSize": 18,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon renders disabled correctly 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 20,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIconWrapper has left style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "paddingRight": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="left"
+/>
+`;
+
+exports[`StyledButtonIconWrapper has right style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "paddingLeft": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="right"
+/>
+`;
+
+exports[`StyledButtonText has basic-transparent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="basic-transparent"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has filled-primary style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled-primary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has filled-secondary style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled-secondary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has outlined-primary style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#7622d7",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="outlined-primary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has outlined-secondary style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#4568fb",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="outlined-secondary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has pressed with the correct variant basic-transparent style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="basic-transparent"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has pressed with the correct variant filled-primary style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled-primary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has pressed with the correct variant filled-secondary style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled-secondary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has pressed with the correct variant outlined-primary style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#c8a7ef",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="outlined-primary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has pressed with the correct variant outlined-secondary style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#d1d9fe",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="outlined-secondary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText renders disabled correctly 1`] = `
+<Text
+  disabled={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled-primary"
+>
+  Example
+</Text>
+`;