@hazelcast/ui 1.3.3-next.20 → 1.3.3-next.21

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 (5) hide show
  1. package/lib/Card.d.ts +2 -0
  2. package/lib/Card.js +3 -2
  3. package/lib/Card.js.map +1 -1
  4. package/lib/Card.module.scss +42 -10
  5. package/package.json +3 -3
package/lib/Card.d.ts CHANGED
@@ -5,8 +5,10 @@ export type CardProps = {
5
5
  headingIcon?: IconProps['icon'];
6
6
  caption?: ReactNode;
7
7
  title?: string;
8
+ titleTagName?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
8
9
  headingContent?: ReactNode;
9
10
  separator?: boolean;
11
+ variant?: 'bordered' | 'default';
10
12
  children: ReactNode;
11
13
  className?: string;
12
14
  iconClassName?: string;
package/lib/Card.js CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Icon } from './Icon';
4
4
  import styles from './Card.module.scss';
5
+ const Title = ({ as: Tag, ...props }) => React.createElement(Tag, { "data-test": "card-heading-title", ...props });
5
6
  /**
6
7
  * ### Purpose
7
8
  * Card components define content hierarchy (visual and logical), separating content into "groups".
@@ -9,11 +10,11 @@ import styles from './Card.module.scss';
9
10
  * ### General Info
10
11
  * - Card can be rendered with an optional separator and/or icon.
11
12
  */
12
- export const Card = ({ headingIcon, title, headingContent, separator = false, 'data-test': dataTest, children, className, iconClassName, titleClassName, contentClassName, headerClassName, caption, }) => (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'card-wrapper', className: cn(styles.wrapper, { [styles.noTitle]: !title }, className) },
13
+ export const Card = ({ headingIcon, title, headingContent, separator = false, variant = 'default', 'data-test': dataTest, children, titleTagName = 'h2', className, iconClassName, titleClassName, contentClassName, headerClassName, caption, }) => (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'card-wrapper', className: cn(styles.wrapper, { [styles.noTitle]: !title, [styles.bordered]: variant === 'bordered' }, className) },
13
14
  caption && React.createElement("div", { className: styles.caption }, caption),
14
15
  (title || headingContent || headingIcon) && (React.createElement("div", { "data-test": "card-heading", className: cn(styles.heading, headerClassName) },
15
16
  headingIcon && React.createElement(Icon, { "data-test": "card-heading-icon", icon: headingIcon, className: cn(styles.icon, iconClassName), ariaHidden: true }),
16
- title && (React.createElement("h3", { "data-test": "card-heading-title", className: cn(styles.title, { [styles.space]: !!headingContent }, titleClassName) }, title)),
17
+ title && (React.createElement(Title, { as: titleTagName, className: cn(styles.title, { [styles.space]: !!headingContent }, titleClassName) }, title)),
17
18
  headingContent)),
18
19
  separator && React.createElement("div", { "data-test": "card-separator", className: styles.separator }),
19
20
  children && (React.createElement("div", { "data-test": "card-content", className: cn(styles.content, contentClassName) }, children))));
package/lib/Card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAgBvC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,0CAAgB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,SAAS,CAAC;IAC/G,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;IAC1D,CAAC,KAAK,IAAI,cAAc,IAAI,WAAW,CAAC,IAAI,CAC3C,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC;QACzE,WAAW,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,UAAU,SAAG;QAC9H,KAAK,IAAI,CACR,yCAAc,oBAAoB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,CAAC,IACjH,KAAK,CACH,CACN;QACA,cAAc,CACX,CACP;IAEA,SAAS,IAAI,0CAAe,gBAAgB,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;IAE5E,QAAQ,IAAI,CACX,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC1E,QAAQ,CACL,CACP,CACG,CACP,CAAA"}
1
+ {"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AAExC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAuBvC,MAAM,KAAK,GAAmB,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,GAAG,iBAAW,oBAAoB,KAAK,KAAK,GAAI,CAAA;AAE1G;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,WAAW,EACX,KAAK,EACL,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,SAAS,EACnB,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,0CACa,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,cAAc,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,EAAE,SAAS,CAAC;IAEhH,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;IAC1D,CAAC,KAAK,IAAI,cAAc,IAAI,WAAW,CAAC,IAAI,CAC3C,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,eAAe,CAAC;QACzE,WAAW,IAAI,oBAAC,IAAI,iBAAW,mBAAmB,EAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,UAAU,SAAG;QAC9H,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,cAAc,CAAC,IACvG,KAAK,CACA,CACT;QACA,cAAc,CACX,CACP;IAEA,SAAS,IAAI,0CAAe,gBAAgB,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;IAE5E,QAAQ,IAAI,CACX,0CAAe,cAAc,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAC1E,QAAQ,CACL,CACP,CACG,CACP,CAAA"}
package/lib/Card.module.scss CHANGED
@@ -3,16 +3,12 @@
3
3
  .wrapper {
4
4
  $padding: c.$grid * 5;
5
5
 
6
- padding: $padding;
7
- border-radius: c.$borderRadius;
8
6
  background: c.$colorNeutralWhite;
9
- border: c.$borderWidth solid c.$colorNeutral;
10
7
 
11
8
  .heading {
12
- @include c.typographyH3;
13
-
14
9
  display: flex;
15
10
  align-items: center;
11
+ margin-bottom: c.$grid * 5;
16
12
 
17
13
  .icon {
18
14
  margin-right: c.$grid * 2.5;
@@ -20,8 +16,6 @@
20
16
 
21
17
  .title {
22
18
  margin: 0;
23
- font-size: c.$fontSizeBodyNormal !important;
24
- line-height: c.$lineHeightBodyNormal !important;
25
19
 
26
20
  &.space {
27
21
  margin-right: c.$grid * 2.5;
@@ -37,9 +31,8 @@
37
31
  }
38
32
 
39
33
  .content {
34
+ padding-top: c.$grid * 6;
40
35
  @include c.typographyBodyNormal;
41
-
42
- margin-top: c.$grid * 4;
43
36
  }
44
37
 
45
38
  &.noTitle {
@@ -50,10 +43,49 @@
50
43
 
51
44
  .caption {
52
45
  display: flex;
53
- margin: (-$padding) (-$padding) $padding;
46
+ margin-bottom: $padding;
54
47
 
55
48
  & > * {
56
49
  flex: 1;
57
50
  }
58
51
  }
52
+
53
+ &.bordered {
54
+ padding: $padding;
55
+ border-radius: c.$borderRadius;
56
+ border: c.$borderWidth solid c.$colorNeutral;
57
+
58
+ .heading {
59
+ @include c.typographyH3;
60
+
61
+ display: flex;
62
+ align-items: center;
63
+ margin: 0;
64
+
65
+ .icon {
66
+ margin-right: c.$grid * 2.5;
67
+ }
68
+
69
+ .title {
70
+ margin: 0;
71
+ font-size: c.$fontSizeBodyNormal !important;
72
+ line-height: c.$lineHeightBodyNormal !important;
73
+
74
+ &.space {
75
+ margin-right: c.$grid * 2.5;
76
+ }
77
+ }
78
+ }
79
+
80
+ .content {
81
+ @include c.typographyBodyNormal;
82
+
83
+ margin-top: c.$grid * 4;
84
+ padding: 0;
85
+ }
86
+
87
+ .caption {
88
+ margin: (-$padding) (-$padding) $padding;
89
+ }
90
+ }
59
91
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hazelcast/ui",
3
- "version": "1.3.3-next.20+346d699",
3
+ "version": "1.3.3-next.21+7bd4b2d",
4
4
  "description": "Hazelcast design system components",
5
5
  "author": "",
6
6
  "homepage": "https://github.com/hazelcast/frontend-shared#readme",
@@ -75,7 +75,7 @@
75
75
  "use-persisted-state": "^0.3.3"
76
76
  },
77
77
  "devDependencies": {
78
- "@hazelcast/test-helpers": "^1.3.3-next.20+346d699",
78
+ "@hazelcast/test-helpers": "1.3.3-next.20",
79
79
  "@storybook/addon-docs": "^6.5.16",
80
80
  "@storybook/addons": "^6.5.16",
81
81
  "@storybook/builder-webpack5": "^6.5.16",
@@ -121,5 +121,5 @@
121
121
  "react": "^17 || ^18",
122
122
  "react-dom": "^17 || ^18"
123
123
  },
124
- "gitHead": "346d6998ad161601b2fd4a51fad60b787aa1e9ac"
124
+ "gitHead": "7bd4b2d5c7ba992f38edc66a640ec901cafd6fdd"
125
125
  }