@homefile/components-v2 2.25.0 → 2.25.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 (38) hide show
  1. package/dist/assets/images/shine/gutter-cleaning.png +0 -0
  2. package/dist/assets/images/shine/holiday-lights.png +0 -0
  3. package/dist/assets/images/shine/home-cleaning.png +0 -0
  4. package/dist/assets/images/shine/pressure.png +0 -0
  5. package/dist/assets/images/shine/roof-cleaning.png +0 -0
  6. package/dist/assets/images/shine/window.png +0 -0
  7. package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.js +1 -1
  8. package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.tsx +1 -1
  9. package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.js +1 -1
  10. package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.tsx +3 -1
  11. package/dist/components/forms/dynamicForm/fields/uiFields/TileCta.js +1 -1
  12. package/dist/components/forms/dynamicForm/fields/uiFields/TileCta.tsx +1 -1
  13. package/dist/components/forms/dynamicForm/fields/uiFields/VerticalIcon.js +1 -1
  14. package/dist/components/forms/dynamicForm/fields/uiFields/VerticalIcon.tsx +8 -2
  15. package/dist/components/partner/PartnerFooter.js +1 -1
  16. package/dist/components/partner/PartnerImage.js +2 -2
  17. package/dist/components/partner/ShortPartnerTile.d.ts +1 -1
  18. package/dist/components/partner/ShortPartnerTile.js +4 -5
  19. package/dist/mocks/partner/dynamicTileForm.mock.d.ts +330 -1
  20. package/dist/mocks/partner/dynamicTileForm.mock.js +1210 -62
  21. package/dist/stories/partner/DynamicTile.stories.d.ts +1 -2
  22. package/dist/stories/partner/DynamicTile.stories.js +9 -20
  23. package/package.json +1 -1
  24. package/src/assets/images/shine/gutter-cleaning.png +0 -0
  25. package/src/assets/images/shine/holiday-lights.png +0 -0
  26. package/src/assets/images/shine/home-cleaning.png +0 -0
  27. package/src/assets/images/shine/pressure.png +0 -0
  28. package/src/assets/images/shine/roof-cleaning.png +0 -0
  29. package/src/assets/images/shine/window.png +0 -0
  30. package/src/components/forms/dynamicForm/fields/uiFields/TileBody.tsx +1 -1
  31. package/src/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.tsx +3 -1
  32. package/src/components/forms/dynamicForm/fields/uiFields/TileCta.tsx +1 -1
  33. package/src/components/forms/dynamicForm/fields/uiFields/VerticalIcon.tsx +8 -2
  34. package/src/components/partner/PartnerFooter.tsx +2 -2
  35. package/src/components/partner/PartnerImage.tsx +2 -1
  36. package/src/components/partner/ShortPartnerTile.tsx +18 -12
  37. package/src/mocks/partner/dynamicTileForm.mock.ts +1221 -64
  38. package/src/stories/partner/DynamicTile.stories.tsx +24 -24
Binary file
@@ -14,5 +14,5 @@ import { Box, Stack } from '@chakra-ui/react';
14
14
  import { PartnerFooter, TileBodyFields, TileFooterFields, TileHeaderFields, } from '../../../..';
15
15
  export const TileBody = (_a) => {
16
16
  var { callback, fields, websiteUrl = '', menuItems } = _a, props = __rest(_a, ["callback", "fields", "websiteUrl", "menuItems"]);
17
- return (_jsx(Box, { display: "flex", flexGrow: 1, flexDir: "column", bg: "neutral.white", boxShadow: "lg", children: _jsxs(Stack, { spacing: "0", flex: "1", justify: "space-between", children: [_jsx(Box, { children: _jsx(TileHeaderFields, { fields: fields, menuItems: menuItems }) }), _jsx(TileBodyFields, { fields: fields }), _jsxs(Stack, { spacing: "0", bg: "lightBlue.1", pt: "base", children: [_jsx(TileFooterFields, { callback: callback, fields: fields }), _jsx(PartnerFooter, Object.assign({}, props, { websiteUrl: websiteUrl }))] })] }) }));
17
+ return (_jsx(Box, { display: "flex", flexGrow: 1, flexDir: "column", bg: "neutral.white", boxShadow: "lg", children: _jsxs(Stack, { spacing: "0", flex: "1", justify: "space-between", children: [_jsx(Box, { children: _jsx(TileHeaderFields, { fields: fields, menuItems: menuItems }) }), _jsx(TileBodyFields, { fields: fields }), _jsxs(Stack, { spacing: "0", bg: "lightBlue.1", children: [_jsx(TileFooterFields, { callback: callback, fields: fields }), _jsx(PartnerFooter, Object.assign({}, props, { websiteUrl: websiteUrl }))] })] }) }));
18
18
  };
@@ -27,7 +27,7 @@ export const TileBody = ({
27
27
  <TileHeaderFields fields={fields} menuItems={menuItems} />
28
28
  </Box>
29
29
  <TileBodyFields fields={fields} />
30
- <Stack spacing="0" bg="lightBlue.1" pt="base">
30
+ <Stack spacing="0" bg="lightBlue.1">
31
31
  <TileFooterFields callback={callback} fields={fields} />
32
32
  <PartnerFooter {...props} websiteUrl={websiteUrl} />
33
33
  </Stack>
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Box, Text } from '@chakra-ui/react';
3
3
  export const TileBodyHeader = ({ value = '' }) => {
4
- return (_jsx(Box, { p: "base", children: _jsx(Text, { fontWeight: "semibold", children: value }) }));
4
+ return (_jsx(Box, { p: "base", children: _jsx(Text, { fontWeight: "semibold", textAlign: "center", children: value }) }));
5
5
  };
@@ -3,7 +3,9 @@ import { Box, Text } from '@chakra-ui/react'
3
3
  export const TileBodyHeader = ({ value = '' }) => {
4
4
  return (
5
5
  <Box p="base">
6
- <Text fontWeight="semibold">{value}</Text>
6
+ <Text fontWeight="semibold" textAlign="center">
7
+ {value}
8
+ </Text>
7
9
  </Box>
8
10
  )
9
11
  }
@@ -14,5 +14,5 @@ import { Button } from '@chakra-ui/react';
14
14
  export const TileCta = (_a) => {
15
15
  var { callback } = _a, props = __rest(_a, ["callback"]);
16
16
  const { type, value } = props;
17
- return (_jsx(Button, { onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({}, props)), variant: type === 'primary-cta' ? 'primary' : 'secondary', fontSize: "sm", textTransform: "capitalize", px: "none", bg: type === 'primary-cta' ? '' : 'neutral.white', children: value }));
17
+ return (_jsx(Button, { onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({}, props)), variant: type === 'primary-cta' ? 'primary' : 'secondary', textTransform: "capitalize", fontWeight: type === 'primary-cta' ? 'semibold' : 'regular', px: "none", bg: type === 'primary-cta' ? '' : 'neutral.white', children: value }));
18
18
  };
@@ -7,8 +7,8 @@ export const TileCta = ({ callback, ...props }: TileCtaI) => {
7
7
  <Button
8
8
  onClick={() => callback?.({ ...props })}
9
9
  variant={type === 'primary-cta' ? 'primary' : 'secondary'}
10
- fontSize="sm"
11
10
  textTransform="capitalize"
11
+ fontWeight={type === 'primary-cta' ? 'semibold' : 'regular'}
12
12
  px="none"
13
13
  bg={type === 'primary-cta' ? '' : 'neutral.white'}
14
14
  >
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Box, Center, Image, Text } from '@chakra-ui/react';
3
3
  export const VerticalIcon = ({ icon, value }) => {
4
- return (_jsxs(Box, { bg: "neutral.white", borderRadius: "md", border: "1px solid", borderColor: "lightBlue.6", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minH: "110px", children: [_jsx(Box, { h: "46px", display: "flex", alignItems: "center", children: _jsx(Image, { src: icon, alt: value, w: "auto", h: "80%" }) }), _jsx(Center, { pb: "2", children: _jsx(Text, { fontWeight: "semibold", textAlign: "center", fontSize: "13px", lineHeight: "14px", w: "85%", children: value }) })] }));
4
+ return (_jsxs(Box, { bg: "neutral.white", borderRadius: "md", border: "1px solid", borderColor: "lightBlue.6", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minH: "110px", children: [_jsx(Box, { h: "46px", w: "46px", display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Image, { src: icon, alt: value, w: "34px", h: "34px", objectFit: "contain" }) }), _jsx(Center, { pb: "2", children: _jsx(Text, { fontWeight: "semibold", textAlign: "center", fontSize: "13px", lineHeight: "14px", w: "85%", children: value }) })] }));
5
5
  };
@@ -14,8 +14,14 @@ export const VerticalIcon = ({ icon, value }: VerticalIconI) => {
14
14
  justifyContent="center"
15
15
  minH="110px"
16
16
  >
17
- <Box h="46px" display="flex" alignItems="center">
18
- <Image src={icon} alt={value} w="auto" h="80%" />
17
+ <Box
18
+ h="46px"
19
+ w="46px"
20
+ display="flex"
21
+ alignItems="center"
22
+ justifyContent="center"
23
+ >
24
+ <Image src={icon} alt={value} w="34px" h="34px" objectFit="contain" />
19
25
  </Box>
20
26
  <Center pb="2">
21
27
  <Text
@@ -10,5 +10,5 @@ export const PartnerFooter = ({ socialLinks = [], websiteUrl, urlText, }) => {
10
10
  return;
11
11
  window.open(url, '_blank');
12
12
  };
13
- return (_jsxs(Flex, { align: "center", justify: "space-between", p: "base", children: [_jsx(Link, { href: websiteUrl, isExternal: true, children: _jsx(Text, { fontSize: "xs", color: "blue.3", children: urlText !== null && urlText !== void 0 ? urlText : cleanedWebsiteUrl }) }), hasSocialLinks && (_jsx(Flex, { align: "center", gap: "1", children: socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(({ name, link }) => (_jsx(IconButton, { variant: "unstyled", w: "fit-content", "aria-label": "Instagram", icon: SocialIcons({ size: 20, name }), onClick: () => handleSocialClick(link) }, name))) }))] }));
13
+ return (_jsxs(Flex, { align: "center", justify: "space-between", px: "base", minH: "46px", children: [_jsx(Link, { href: websiteUrl, isExternal: true, children: _jsx(Text, { fontSize: "xs", color: "blue.3", fontFamily: "primary", children: urlText !== null && urlText !== void 0 ? urlText : cleanedWebsiteUrl }) }), hasSocialLinks && (_jsx(Flex, { align: "center", gap: "1", children: socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(({ name, link }) => (_jsx(IconButton, { variant: "unstyled", w: "fit-content", "aria-label": "Instagram", icon: SocialIcons({ size: 20, name }), onClick: () => handleSocialClick(link) }, name))) }))] }));
14
14
  };
@@ -3,6 +3,6 @@ import { t } from 'i18next';
3
3
  import { Center, Image, Text } from '@chakra-ui/react';
4
4
  export const PartnerImage = ({ imageUrl, partnerName }) => {
5
5
  if (imageUrl)
6
- return (_jsx(Image, { src: imageUrl, minH: "154px", h: "full", w: "full", objectFit: "cover", alt: partnerName }));
7
- return (_jsx(Center, { bg: "gray.3", minH: "154px", h: "full", children: _jsx(Text, { color: "neutral.white", fontSize: "xxs", children: t('partner.needImage') }) }));
6
+ return (_jsx(Image, { src: imageUrl, minH: "154px", maxH: "300px", h: "full", w: "full", objectFit: "cover", alt: partnerName }));
7
+ return (_jsx(Center, { bg: "gray.3", w: "full", minH: "154px", children: _jsx(Text, { color: "neutral.white", fontSize: "xxs", children: t('partner.needImage') }) }));
8
8
  };
@@ -1,2 +1,2 @@
1
1
  import { ShortPartnerTileI } from '../../interfaces';
2
- export declare const ShortPartnerTile: ({ buttonText, description, imageUrl, logo, menuItems, minimized, onClick, socialLinks, partnerName, websiteUrl, urlText }: ShortPartnerTileI) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const ShortPartnerTile: ({ buttonText, description, imageUrl, logo, menuItems, minimized, onClick, socialLinks, partnerName, websiteUrl, urlText, }: ShortPartnerTileI) => import("react/jsx-runtime").JSX.Element;
@@ -1,10 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Box, Flex } from '@chakra-ui/react';
3
- import { Fader, PartnerCallToAction, PartnerFooter, PartnerHeader, PartnerImage, PartnerTileWrapper, } from '..';
4
- export const ShortPartnerTile = ({ buttonText, description, imageUrl, logo, menuItems, minimized, onClick, socialLinks, partnerName, websiteUrl, urlText }) => {
5
- const callToAction = { description, buttonText, onClick };
2
+ import { Box, Flex, Stack } from '@chakra-ui/react';
3
+ import { PartnerFooter, PartnerHeader, PartnerImage, PartnerTileWrapper, TileCta, } from '..';
4
+ export const ShortPartnerTile = ({ buttonText, description, imageUrl, logo, menuItems, minimized, onClick, socialLinks, partnerName, websiteUrl, urlText, }) => {
6
5
  const header = { logo, menuItems, partnerName };
7
6
  const image = { imageUrl, partnerName };
8
7
  const footer = { socialLinks, websiteUrl, urlText };
9
- return (_jsxs(PartnerTileWrapper, { children: [_jsx(PartnerHeader, Object.assign({}, header)), !minimized && (_jsx(Fader, { children: _jsxs(Flex, { flexDir: "column", h: "400px", justifyContent: "space-between", children: [_jsx(PartnerImage, Object.assign({}, image)), _jsxs(Box, { children: [_jsx(PartnerCallToAction, Object.assign({}, callToAction)), _jsx(PartnerFooter, Object.assign({}, footer))] })] }) }))] }));
8
+ return (_jsxs(PartnerTileWrapper, { children: [_jsx(PartnerHeader, Object.assign({}, header)), !minimized && (_jsxs(Stack, { spacing: "0", justify: "space-between", h: "full", children: [_jsx(Flex, { w: "full", h: "full", children: _jsx(PartnerImage, Object.assign({}, image)) }), _jsxs(Box, { children: [_jsx(Box, { p: "base", children: _jsx(TileCta, { id: `tile-cta-${partnerName}`, callback: onClick, description: description, type: "primary-cta", value: buttonText }) }), _jsx(PartnerFooter, Object.assign({}, footer))] })] }))] }));
10
9
  };
@@ -1,2 +1,331 @@
1
- import { ReportI } from "../../interfaces";
1
+ import { ReportI } from '../../interfaces';
2
2
  export declare const dynamicTileFormMock: ReportI[];
3
+ export declare const dynamicTilesMock: ({
4
+ buttonText: string;
5
+ description: string;
6
+ logo: string;
7
+ partnerName: string;
8
+ websiteUrl: string;
9
+ form: never[];
10
+ onClick: import("@storybook/addon-actions").HandlerFunction;
11
+ socialLinks: {
12
+ name: string;
13
+ link: string;
14
+ }[];
15
+ _id: string;
16
+ menuItems: {
17
+ label: string;
18
+ handleClick: import("@storybook/addon-actions").HandlerFunction;
19
+ }[];
20
+ imageUrl?: undefined;
21
+ type?: undefined;
22
+ } | {
23
+ buttonText: string;
24
+ description: string;
25
+ logo: string;
26
+ partnerName: string;
27
+ onClick: import("@storybook/addon-actions").HandlerFunction;
28
+ websiteUrl: string;
29
+ imageUrl: string;
30
+ socialLinks: never[];
31
+ _id: string;
32
+ menuItems: {
33
+ label: string;
34
+ handleClick: import("@storybook/addon-actions").HandlerFunction;
35
+ }[];
36
+ type: string;
37
+ form: ({
38
+ id: string;
39
+ name: string;
40
+ description: string;
41
+ comments: string;
42
+ value: string;
43
+ type: string;
44
+ visible: boolean;
45
+ children: ({
46
+ id: string;
47
+ name: string;
48
+ description: string;
49
+ comments: string;
50
+ value: string;
51
+ type: string;
52
+ children?: undefined;
53
+ } | {
54
+ id: string;
55
+ name: string;
56
+ description: string;
57
+ comments: string;
58
+ value: string;
59
+ type: string;
60
+ children: {
61
+ id: string;
62
+ name: string;
63
+ description: string;
64
+ comments: string;
65
+ value: string;
66
+ type: string;
67
+ icon: string;
68
+ }[];
69
+ } | {
70
+ id: string;
71
+ name: string;
72
+ description: string;
73
+ comments: string;
74
+ value: string;
75
+ type: string;
76
+ children: {
77
+ id: string;
78
+ name: string;
79
+ description: string;
80
+ comments: string;
81
+ value: string;
82
+ type: string;
83
+ link: string;
84
+ }[];
85
+ })[];
86
+ icon?: undefined;
87
+ } | {
88
+ id: string;
89
+ name: string;
90
+ description: string;
91
+ comments: string;
92
+ value: string;
93
+ type: string;
94
+ visible: boolean;
95
+ children: ({
96
+ id: string;
97
+ name: string;
98
+ description: string;
99
+ comments: string;
100
+ value: string;
101
+ options: string;
102
+ type: string;
103
+ children: {
104
+ id: string;
105
+ name: string;
106
+ description: string;
107
+ comments: string;
108
+ value: boolean;
109
+ visible: boolean;
110
+ type: string;
111
+ }[];
112
+ icon: string;
113
+ } | {
114
+ id: string;
115
+ name: string;
116
+ description: string;
117
+ comments: string;
118
+ value: string;
119
+ icon: string;
120
+ type: string;
121
+ options?: undefined;
122
+ children?: undefined;
123
+ } | {
124
+ id: string;
125
+ name: string;
126
+ description: string;
127
+ comments: string;
128
+ value: string;
129
+ icon: string;
130
+ type: string;
131
+ options: string[];
132
+ children?: undefined;
133
+ } | {
134
+ id: string;
135
+ icon: string;
136
+ name: string;
137
+ description: string;
138
+ comments: string;
139
+ value: string;
140
+ type: string;
141
+ children: ({
142
+ id: string;
143
+ name: string;
144
+ description: string;
145
+ comments: string;
146
+ value: string;
147
+ type: string;
148
+ icon: string;
149
+ } | {
150
+ id: string;
151
+ name: string;
152
+ description: string;
153
+ comments: string;
154
+ value: string;
155
+ type: string;
156
+ icon?: undefined;
157
+ })[];
158
+ options?: undefined;
159
+ })[];
160
+ icon: string;
161
+ })[];
162
+ } | {
163
+ buttonText: string;
164
+ description: string;
165
+ logo: string;
166
+ partnerName: string;
167
+ websiteUrl: string;
168
+ imageUrl: string;
169
+ socialLinks: {
170
+ link: string;
171
+ name: string;
172
+ }[];
173
+ _id: string;
174
+ menuItems: {
175
+ label: string;
176
+ handleClick: import("@storybook/addon-actions").HandlerFunction;
177
+ }[];
178
+ type: string;
179
+ form: ({
180
+ id: string;
181
+ name: string;
182
+ description: string;
183
+ comments: string;
184
+ value: string;
185
+ type: string;
186
+ visible: boolean;
187
+ children: ({
188
+ id: string;
189
+ name: string;
190
+ description: string;
191
+ comments: string;
192
+ value: string;
193
+ type: string;
194
+ children?: undefined;
195
+ } | {
196
+ id: string;
197
+ name: string;
198
+ description: string;
199
+ comments: string;
200
+ value: string;
201
+ type: string;
202
+ children: {
203
+ id: string;
204
+ name: string;
205
+ description: string;
206
+ comments: string;
207
+ value: string;
208
+ type: string;
209
+ icon: string;
210
+ }[];
211
+ } | {
212
+ id: string;
213
+ name: string;
214
+ description: string;
215
+ comments: string;
216
+ value: string;
217
+ type: string;
218
+ children: {
219
+ id: string;
220
+ name: string;
221
+ description: string;
222
+ comments: string;
223
+ value: string;
224
+ type: string;
225
+ link: string;
226
+ }[];
227
+ })[];
228
+ icon?: undefined;
229
+ } | {
230
+ id: string;
231
+ name: string;
232
+ description: string;
233
+ comments: string;
234
+ value: string;
235
+ type: string;
236
+ visible: boolean;
237
+ children: ({
238
+ id: string;
239
+ name: string;
240
+ description: string;
241
+ comments: string;
242
+ value: string;
243
+ options: string;
244
+ type: string;
245
+ children: {
246
+ id: string;
247
+ name: string;
248
+ placeholder: string;
249
+ description: string;
250
+ comments: string;
251
+ value: boolean;
252
+ visible: boolean;
253
+ type: string;
254
+ }[];
255
+ icon: string;
256
+ placeholder?: undefined;
257
+ } | {
258
+ id: string;
259
+ name: string;
260
+ placeholder: string;
261
+ description: string;
262
+ comments: string;
263
+ value: string;
264
+ icon: string;
265
+ type: string;
266
+ options?: undefined;
267
+ children?: undefined;
268
+ } | {
269
+ id: string;
270
+ name: string;
271
+ placeholder: string;
272
+ description: string;
273
+ comments: string;
274
+ value: string;
275
+ icon: string;
276
+ type: string;
277
+ options: string[];
278
+ children?: undefined;
279
+ } | {
280
+ id: string;
281
+ icon: string;
282
+ name: string;
283
+ placeholder: string;
284
+ description: string;
285
+ comments: string;
286
+ value: string;
287
+ type: string;
288
+ children: ({
289
+ id: string;
290
+ name: string;
291
+ placeholder: string;
292
+ description: string;
293
+ comments: string;
294
+ value: string;
295
+ type: string;
296
+ icon: string;
297
+ } | {
298
+ id: string;
299
+ name: string;
300
+ placeholder: string;
301
+ description: string;
302
+ comments: string;
303
+ value: string;
304
+ type: string;
305
+ icon?: undefined;
306
+ })[];
307
+ options?: undefined;
308
+ })[];
309
+ icon: string;
310
+ })[];
311
+ onClick?: undefined;
312
+ } | {
313
+ buttonText: string;
314
+ description: string;
315
+ logo: string;
316
+ partnerName: string;
317
+ websiteUrl: string;
318
+ imageUrl: string;
319
+ form: never[];
320
+ onClick: import("@storybook/addon-actions").HandlerFunction;
321
+ socialLinks: {
322
+ name: string;
323
+ link: string;
324
+ }[];
325
+ _id: string;
326
+ menuItems: {
327
+ label: string;
328
+ handleClick: import("@storybook/addon-actions").HandlerFunction;
329
+ }[];
330
+ type?: undefined;
331
+ })[];