@thecb/components 8.4.0-beta.6 → 8.4.0-beta.7

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 (8) hide show
  1. package/dist/index.cjs.js +21 -15
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +21 -15
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/molecules/link-card/LinkCard.js +47 -39
  7. package/src/components/molecules/link-card/LinkCard.stories.js +4 -1
  8. package/src/components/molecules/link-card/LinkCard.theme.js +6 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "8.4.0-beta.6",
3
+ "version": "8.4.0-beta.7",
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
@@ -5,7 +5,7 @@ import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
5
5
  import { Box, Stack } from "../../atoms/layouts";
6
6
  import { themeComponent } from "../../../util/themeUtils";
7
7
  import { fallbackValues } from "./LinkCard.theme";
8
- import { LINK_WATER, MOON_RAKER } from "../../../constants/colors";
8
+ import { CORNFLOWER_BLUE, MOON_RAKER } from "../../../constants/colors";
9
9
 
10
10
  const LinkCard = ({
11
11
  variant = "default",
@@ -20,19 +20,13 @@ const LinkCard = ({
20
20
  extraStyles = "",
21
21
  extraHoverStyles = ""
22
22
  }) => {
23
- const activeHoverStyles = `
23
+ const activeAndHoverStyles = `cursor: pointer;
24
24
  border-radius: 8px;
25
- cursor: pointer;
26
25
  border: 1px solid ${themeValues.color};
27
- background: ${LINK_WATER};
28
- /* Primitives/New Shadow/3-Pressed-New */
29
- box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);
30
- ${extraHoverStyles}
31
- `;
32
-
26
+ background-color: ${CORNFLOWER_BLUE};
27
+ box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);`;
33
28
  return (
34
29
  <Box
35
- background={LINK_WATER}
36
30
  border={`1px solid ${MOON_RAKER};`}
37
31
  borderRadius="8px"
38
32
  dataQa={`link-card-${title}`}
@@ -45,28 +39,51 @@ const LinkCard = ({
45
39
  display: flex;
46
40
  flex-direction: column;
47
41
  align-items: flex-start;
42
+ width: 100%;
48
43
  gap: 40px;
49
44
  flex-shrink: 0;
50
45
  align-self: stretch;
51
46
  ${extraStyles}
52
47
  `}
53
- hoverStyles={activeHoverStyles}
54
- activeStyles={activeHoverStyles}
48
+ hoverStyles={`${activeAndHoverStyles}
49
+ ${extraHoverStyles}
50
+ `}
51
+ activeStyles={`${activeAndHoverStyles}
52
+ ${extraHoverStyles}
53
+ `}
55
54
  onClick={onClick}
56
55
  >
57
- <Stack childGap={0} bottomItem={3} fullHeight>
58
- <Box padding={0}>
56
+ <Stack
57
+ childGap={0}
58
+ bottomItem={3}
59
+ justify="space-between"
60
+ style={{ width: "100%" }}
61
+ fullHeight
62
+ >
63
+ <Box padding={0} width="100%">
59
64
  <Heading
60
65
  variant="h6"
61
66
  weight={FONT_WEIGHT_SEMIBOLD}
62
67
  color={themeValues.color}
63
68
  margin={0}
64
- 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%;"
69
+ extraStyles={`display: -webkit-box;
70
+ -webkit-box-orient: vertical;
71
+ -webkit-line-clamp: 2;
72
+ align-self: stretch;
73
+ overflow: hidden;
74
+ text-overflow: ellipsis;
75
+ font-family: Public Sans;
76
+ font-size: 16px;
77
+ font-style: normal;
78
+ font-weight: 600;
79
+ line-height: 150%;
80
+ ${extraStyles}
81
+ `}
65
82
  >
66
83
  {title}
67
84
  </Heading>
68
85
  </Box>
69
- <Box padding={"0 0 40px"}>
86
+ <Box padding={"0 0 40px"} width="100%">
70
87
  <Paragraph
71
88
  variant="pS"
72
89
  color={themeValues.color}
@@ -88,29 +105,20 @@ const LinkCard = ({
88
105
  {subtitle}
89
106
  </Paragraph>
90
107
  </Box>
91
- <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
92
- <Stack direction="row" justify="space-between">
93
- <Stack direction="row" childGap="6px">
94
- {showLeft && leftContent}
95
- {showRight && rightContent}
96
- </Stack>
97
-
98
- {/* <Stack direction="row" childGap="6px">
99
- <Text
100
- variant="pS"
101
- color={themeValues.color}
102
- extraStyles="text-align: right; color: transparent;"
103
- className="show-on-hover"
104
- >
105
- {workflowActionName}
106
- </Text>
107
- {workflowActionName === "Find" && (
108
- <PlusCircleIcon color={themeValues.color} />
109
- )}
110
- {workflowActionName === "Pay" && (
111
- <ArrowRightIcon color={themeValues.color} />
112
- )}
113
- </Stack> */}
108
+ <Box
109
+ background="transparent"
110
+ borderWidthOverride="0 0 0 0"
111
+ padding="0"
112
+ width="100%"
113
+ >
114
+ <Stack
115
+ direction="row"
116
+ childGap="6px"
117
+ justify="space-between"
118
+ extraStyles={`width: 100%; justify-content: space-between`}
119
+ >
120
+ {showLeft && leftContent}
121
+ {showRight && rightContent}
114
122
  </Stack>
115
123
  </Box>
116
124
  </Stack>
package/src/components/molecules/link-card/LinkCard.stories.js CHANGED
@@ -8,7 +8,7 @@ import { text } from "@storybook/addon-knobs";
8
8
  import Badge from "../../atoms/badge/Badge";
9
9
  import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
10
10
  import AutopayIcon from "../../atoms/icons/AutopayIcon";
11
- import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
11
+ import { ROYAL_BLUE_VIVID, CORNFLOWER_BLUE } from "../../../constants/colors";
12
12
 
13
13
  const groupId = "props";
14
14
 
@@ -37,6 +37,9 @@ export const linkCard = () => (
37
37
  <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
38
38
  </Stack>
39
39
  }
40
+ extraHoverStyles={`
41
+ .show-on-hover {color: ${ROYAL_BLUE_VIVID};}
42
+ `}
40
43
  />
41
44
  );
42
45
 
package/src/components/molecules/link-card/LinkCard.theme.js CHANGED
@@ -1,6 +1,10 @@
1
- import { ROYAL_BLUE_VIVID, WHITE } from "../../../constants/colors";
1
+ import {
2
+ CORNFLOWER_BLUE,
3
+ ROYAL_BLUE_VIVID,
4
+ WHITE
5
+ } from "../../../constants/colors";
2
6
 
3
- const background = { default: `${WHITE}` };
7
+ const background = { default: `${WHITE}`, hover: `${CORNFLOWER_BLUE}` };
4
8
  const color = { default: `${ROYAL_BLUE_VIVID}` };
5
9
 
6
10
  export const fallbackValues = {