@thecb/components 8.4.0-beta.0 → 8.4.0-beta.1

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.
Files changed (7) hide show
  1. package/dist/index.cjs.js +13 -8
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +13 -8
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/molecules/link-card/LinkCard.js +28 -16
  7. package/src/components/molecules/link-card/LinkCard.stories.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "8.4.0-beta.0",
3
+ "version": "8.4.0-beta.1",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/molecules/link-card/LinkCard.js CHANGED
@@ -15,7 +15,7 @@ const LinkCard = ({
15
15
  variant = "default",
16
16
  workflowName = "Test Workflow",
17
17
  workflowDescription = "Link your benefit plan",
18
- workflowActionName = "Find",
18
+ workflowActionName = "Link an account",
19
19
  themeValues,
20
20
  slug
21
21
  }) => {
@@ -61,13 +61,13 @@ const LinkCard = ({
61
61
  variant="h6"
62
62
  weight={FONT_WEIGHT_SEMIBOLD}
63
63
  color={themeValues.color}
64
- margin={"0 0 0.5rem 0"}
64
+ margin={0}
65
65
  extraStyles="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; font-family: Public Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%;"
66
66
  >
67
67
  {workflowName}
68
68
  </Heading>
69
69
  </Box>
70
- <Box padding={"0 1rem 1rem"} minHeight={"4.25rem"}>
70
+ <Box padding={"0 1rem 0"} minHeight={"4.25rem"}>
71
71
  <Paragraph
72
72
  variant="pS"
73
73
  color={themeValues.color}
@@ -92,7 +92,7 @@ const LinkCard = ({
92
92
  <Box
93
93
  background="transparent"
94
94
  borderWidthOverride="0 0 0 0"
95
- padding="1.5rem 0 1.5rem 1rem"
95
+ padding="0 1rem 1rem 1rem"
96
96
  >
97
97
  <Stack direction="row" justify="space-between">
98
98
  <Box
@@ -103,19 +103,31 @@ const LinkCard = ({
103
103
  <Badge label="Autopay Available" Icon={AutopayIcon} />
104
104
  </Box>
105
105
  <Stack direction="row" childGap="6px">
106
- <Text
107
- variant="pS"
108
- color={themeValues.color}
109
- extraStyles="text-align: right; color: transparent;"
110
- className="show-on-hover"
111
- >
112
- {workflowActionName}
113
- </Text>
114
- {workflowActionName === "Find" && (
115
- <PlusCircleIcon color={themeValues.color} />
106
+ {workflowActionName === "Link an account" && (
107
+ <>
108
+ <Text
109
+ variant="pS"
110
+ color={themeValues.color}
111
+ extraStyles="text-align: right; color: transparent;"
112
+ className="show-on-hover"
113
+ >
114
+ Find
115
+ </Text>
116
+ <PlusCircleIcon color={themeValues.color} />
117
+ </>
116
118
  )}
117
- {workflowActionName === "Pay" && (
118
- <ArrowRightIcon color={themeValues.color} />
119
+ {workflowActionName === "Pay now" && (
120
+ <>
121
+ <Text
122
+ variant="pS"
123
+ color={themeValues.color}
124
+ extraStyles="text-align: right; color: transparent;"
125
+ className="show-on-hover"
126
+ >
127
+ Pay
128
+ </Text>
129
+ <ArrowRightIcon color={themeValues.color} />
130
+ </>
119
131
  )}
120
132
  </Stack>
121
133
  </Stack>
package/src/components/molecules/link-card/LinkCard.stories.js CHANGED
@@ -13,7 +13,7 @@ export const linkCard = () => (
13
13
  "Workflow description",
14
14
  groupId
15
15
  )}
16
- workflowActionName={text("workflowActionName", "Find", "props")}
16
+ workflowActionName={text("workflowActionName", "Link an account", "props")}
17
17
  slug={text("slug", "animal-care-and-control", "props")}
18
18
  />
19
19
  );