@thecb/components 10.6.5-beta.3 → 10.6.5-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "10.6.5-beta.3",
3
+ "version": "10.6.5-beta.4",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
@@ -17,7 +17,8 @@ const WalletName = ({
17
17
  disableAction = false,
18
18
  linkButtonExtraStyles = "", // hyperlinked text extraStyles
19
19
  isLoading = false, // shows a spinner on the left when true
20
- dataQa = null
20
+ dataQa = null,
21
+ preventNewLineOnMobile = false
21
22
  }) => {
22
23
  const { isMobile } = useContext(ThemeContext);
23
24
 
@@ -50,7 +51,7 @@ const WalletName = ({
50
51
  mainText && <Text>{mainText}</Text>
51
52
  )}
52
53
  </Box>
53
- {!isMobile && (
54
+ {(!isMobile || preventNewLineOnMobile) && (
54
55
  <Box padding="0">
55
56
  {text && <Text variant="pXS">{text}</Text>}
56
57
  {(text || actionText) && <>&nbsp;</>}
@@ -73,7 +74,7 @@ const WalletName = ({
73
74
  )}
74
75
  </Cluster>
75
76
  </Module>
76
- {isMobile && (
77
+ {isMobile && !preventNewLineOnMobile && (
77
78
  <Cluster
78
79
  align="center"
79
80
  justify={text || actionText ? "flex-end" : "flex-start"}
@@ -16,6 +16,20 @@ export const walletName = () => {
16
16
  );
17
17
  };
18
18
 
19
+ export const walletNameWithOverrides = () => {
20
+ return (
21
+ <WalletName
22
+ mainText={text("mainText", "Firstname Lastname", "props")}
23
+ action={object("action", () => window.alert("action fired!"), "props")}
24
+ actionText={text("actionText", "Check out as a guest", "props")}
25
+ text={text("text", "Not you?", "props")}
26
+ disableAction={boolean("disableAction", false, "props")}
27
+ isLoading={boolean("isLoading", false, "props")}
28
+ preventNewLineOnMobile={boolean("preventNewLineOnMobile", true, "props")}
29
+ />
30
+ );
31
+ };
32
+
19
33
  const story = page({
20
34
  title: "Components|Atoms/WalletName",
21
35
  component: WalletName