@digigov/react-core 0.10.2 → 0.11.0

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 (17) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/Card/__snapshots__/index.test.tsx.snap +118 -0
  3. package/Card/index.d.ts +4 -2
  4. package/Card/index.js +4 -2
  5. package/Card/index.test.js +65 -3
  6. package/Grid/index.d.ts +1 -1
  7. package/Grid/index.js +1 -1
  8. package/es/Card/__snapshots__/index.test.tsx.snap +118 -0
  9. package/es/Card/index.js +4 -2
  10. package/es/Card/index.test.js +65 -3
  11. package/es/Grid/index.js +1 -1
  12. package/esm/Card/__snapshots__/index.test.tsx.snap +118 -0
  13. package/esm/Card/index.js +4 -2
  14. package/esm/Card/index.test.js +65 -3
  15. package/esm/Grid/index.js +1 -1
  16. package/esm/index.js +1 -1
  17. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,6 +1,13 @@
1
1
  # Change Log - @digigov/react-core
2
2
 
3
- This log was last generated on Mon, 18 Apr 2022 13:00:33 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 20 Apr 2022 12:11:46 GMT and should not be manually modified.
4
+
5
+ ## 0.11.0
6
+ Wed, 20 Apr 2022 12:11:46 GMT
7
+
8
+ ### Minor changes
9
+
10
+ - add more props at Card component
4
11
 
5
12
  ## 0.10.2
6
13
  Mon, 18 Apr 2022 13:00:33 GMT
package/Card/__snapshots__/index.test.tsx.snap CHANGED
@@ -1,5 +1,21 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`renders the Card with callToActon props 1`] = `
4
+ <ForwardRef(Card)
5
+ callToAction={true}
6
+ >
7
+ <div
8
+ className="govgr-card--cta govgr-card"
9
+ >
10
+ <div
11
+ className="govgr-card__body"
12
+ >
13
+ hello
14
+ </div>
15
+ </div>
16
+ </ForwardRef(Card)>
17
+ `;
18
+
3
19
  exports[`renders the Card with no props 1`] = `
4
20
  <ForwardRef(Card)>
5
21
  <div
@@ -14,6 +30,40 @@ exports[`renders the Card with no props 1`] = `
14
30
  </ForwardRef(Card)>
15
31
  `;
16
32
 
33
+ exports[`renders the Card with variant="border" and borderColor="dark" props 1`] = `
34
+ <ForwardRef(Card)
35
+ borderColor="dark"
36
+ variant="border"
37
+ >
38
+ <div
39
+ className="govgr-card--border govgr-card--border-dark govgr-card"
40
+ >
41
+ <div
42
+ className="govgr-card__body"
43
+ >
44
+ hello
45
+ </div>
46
+ </div>
47
+ </ForwardRef(Card)>
48
+ `;
49
+
50
+ exports[`renders the Card with variant="border" and borderColor="gray" props 1`] = `
51
+ <ForwardRef(Card)
52
+ borderColor="gray"
53
+ variant="border"
54
+ >
55
+ <div
56
+ className="govgr-card--border govgr-card--border-gray govgr-card"
57
+ >
58
+ <div
59
+ className="govgr-card__body"
60
+ >
61
+ hello
62
+ </div>
63
+ </div>
64
+ </ForwardRef(Card)>
65
+ `;
66
+
17
67
  exports[`renders the Card with variant="border" props 1`] = `
18
68
  <ForwardRef(Card)
19
69
  variant="border"
@@ -30,6 +80,74 @@ exports[`renders the Card with variant="border" props 1`] = `
30
80
  </ForwardRef(Card)>
31
81
  `;
32
82
 
83
+ exports[`renders the Card with variant="border-top" and borderColor="dark" callToAction props 1`] = `
84
+ <ForwardRef(Card)
85
+ borderColor="dark"
86
+ callToAction={true}
87
+ variant="border-top"
88
+ >
89
+ <div
90
+ className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
91
+ >
92
+ <div
93
+ className="govgr-card__body"
94
+ >
95
+ hello
96
+ </div>
97
+ </div>
98
+ </ForwardRef(Card)>
99
+ `;
100
+
101
+ exports[`renders the Card with variant="border-top" and borderColor="dark" props 1`] = `
102
+ <ForwardRef(Card)
103
+ borderColor="dark"
104
+ variant="border-top"
105
+ >
106
+ <div
107
+ className="govgr-card--border-top govgr-card--border-dark govgr-card"
108
+ >
109
+ <div
110
+ className="govgr-card__body"
111
+ >
112
+ hello
113
+ </div>
114
+ </div>
115
+ </ForwardRef(Card)>
116
+ `;
117
+
118
+ exports[`renders the Card with variant="border-top" and borderColor="gray" props 1`] = `
119
+ <ForwardRef(Card)
120
+ borderColor="gray"
121
+ variant="border-top"
122
+ >
123
+ <div
124
+ className="govgr-card--border-top govgr-card--border-gray govgr-card"
125
+ >
126
+ <div
127
+ className="govgr-card__body"
128
+ >
129
+ hello
130
+ </div>
131
+ </div>
132
+ </ForwardRef(Card)>
133
+ `;
134
+
135
+ exports[`renders the Card with variant="border-top" props 1`] = `
136
+ <ForwardRef(Card)
137
+ variant="border-top"
138
+ >
139
+ <div
140
+ className="govgr-card--border-top govgr-card"
141
+ >
142
+ <div
143
+ className="govgr-card__body"
144
+ >
145
+ hello
146
+ </div>
147
+ </div>
148
+ </ForwardRef(Card)>
149
+ `;
150
+
33
151
  exports[`renders the Card with variant="divider" props 1`] = `
34
152
  <ForwardRef(Card)
35
153
  variant="divider"
package/Card/index.d.ts CHANGED
@@ -6,12 +6,14 @@ export interface CardProps extends DivElementAttributes {
6
6
  * divider
7
7
  * `variant` property is optional.
8
8
  */
9
- variant?: "border" | "divider";
9
+ variant?: "border" | "divider" | "border-top";
10
+ borderColor?: "gray" | "dark";
11
+ callToAction?: boolean;
10
12
  }
11
13
  /**
12
14
  * Cards can be used to divide and organise interface content for better understandability and readability.
13
15
  * Cards can help your users to scan through vast amounts of information quicker.
14
16
  * Use Card as parent component to wrap CardHeading, CardText and CartAction components
15
17
  */
16
- export declare const Card: React.ForwardRefExoticComponent<Pick<CardProps, "className" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant"> & React.RefAttributes<HTMLDivElement>>;
18
+ export declare const Card: React.ForwardRefExoticComponent<Pick<CardProps, "className" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "borderColor" | "callToAction"> & React.RefAttributes<HTMLDivElement>>;
17
19
  export default Card;
package/Card/index.js CHANGED
@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
15
15
 
16
16
  var _clsx = _interopRequireDefault(require("clsx"));
17
17
 
18
- var _excluded = ["variant", "style", "className", "children"];
18
+ var _excluded = ["variant", "borderColor", "callToAction", "style", "className", "children"];
19
19
 
20
20
  /**
21
21
  * Cards can be used to divide and organise interface content for better understandability and readability.
@@ -24,13 +24,15 @@ var _excluded = ["variant", "style", "className", "children"];
24
24
  */
25
25
  var Card = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref, ref) {
26
26
  var variant = _ref.variant,
27
+ borderColor = _ref.borderColor,
28
+ callToAction = _ref.callToAction,
27
29
  style = _ref.style,
28
30
  className = _ref.className,
29
31
  children = _ref.children,
30
32
  props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
31
33
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
32
34
  ref: ref,
33
- className: (0, _clsx["default"])(className, variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', true && 'govgr-card')
35
+ className: (0, _clsx["default"])(className, variant === "border-top" && 'govgr-card--border-top', variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', borderColor === "gray" && 'govgr-card--border-gray', borderColor === "dark" && 'govgr-card--border-dark', callToAction && 'govgr-card--cta', true && 'govgr-card')
34
36
  }, props), /*#__PURE__*/_react["default"].createElement("div", {
35
37
  className: (0, _clsx["default"])(true && 'govgr-card__body')
36
38
  }, children));
package/Card/index.test.js CHANGED
@@ -15,17 +15,79 @@ it('renders the Card with no props', function () {
15
15
  });
16
16
 
17
17
  var _ref2 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
18
- variant: "border"
18
+ callToAction: true
19
19
  }, "hello");
20
20
 
21
- it('renders the Card with variant="border" props', function () {
21
+ it('renders the Card with callToActon props', function () {
22
22
  expect((0, _enzyme.mount)(_ref2)).toMatchSnapshot();
23
23
  });
24
24
 
25
25
  var _ref3 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
26
+ variant: "border"
27
+ }, "hello");
28
+
29
+ it('renders the Card with variant="border" props', function () {
30
+ expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
31
+ });
32
+
33
+ var _ref4 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
26
34
  variant: "divider"
27
35
  }, "hello");
28
36
 
29
37
  it('renders the Card with variant="divider" props', function () {
30
- expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
38
+ expect((0, _enzyme.mount)(_ref4)).toMatchSnapshot();
39
+ });
40
+
41
+ var _ref5 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
42
+ variant: "border-top"
43
+ }, "hello");
44
+
45
+ it('renders the Card with variant="border-top" props', function () {
46
+ expect((0, _enzyme.mount)(_ref5)).toMatchSnapshot();
47
+ });
48
+
49
+ var _ref6 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
50
+ variant: "border",
51
+ borderColor: "dark"
52
+ }, "hello");
53
+
54
+ it('renders the Card with variant="border" and borderColor="dark" props', function () {
55
+ expect((0, _enzyme.mount)(_ref6)).toMatchSnapshot();
56
+ });
57
+
58
+ var _ref7 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
59
+ variant: "border",
60
+ borderColor: "gray"
61
+ }, "hello");
62
+
63
+ it('renders the Card with variant="border" and borderColor="gray" props', function () {
64
+ expect((0, _enzyme.mount)(_ref7)).toMatchSnapshot();
65
+ });
66
+
67
+ var _ref8 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
68
+ variant: "border-top",
69
+ borderColor: "dark"
70
+ }, "hello");
71
+
72
+ it('renders the Card with variant="border-top" and borderColor="dark" props', function () {
73
+ expect((0, _enzyme.mount)(_ref8)).toMatchSnapshot();
74
+ });
75
+
76
+ var _ref9 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
77
+ variant: "border-top",
78
+ borderColor: "gray"
79
+ }, "hello");
80
+
81
+ it('renders the Card with variant="border-top" and borderColor="gray" props', function () {
82
+ expect((0, _enzyme.mount)(_ref9)).toMatchSnapshot();
83
+ });
84
+
85
+ var _ref10 = /*#__PURE__*/_react["default"].createElement(_Card["default"], {
86
+ variant: "border-top",
87
+ borderColor: "dark",
88
+ callToAction: true
89
+ }, "hello");
90
+
91
+ it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', function () {
92
+ expect((0, _enzyme.mount)(_ref10)).toMatchSnapshot();
31
93
  });
package/Grid/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface GridProps extends DivElementAttributes {
6
6
  container?: boolean;
7
7
  item?: boolean;
8
8
  inline?: boolean;
9
- spacing?: 1 | 2 | 4 | 6;
9
+ spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
10
10
  xs?: GridValues;
11
11
  sm?: GridValues;
12
12
  md?: GridValues;
package/Grid/index.js CHANGED
@@ -37,7 +37,7 @@ var Grid = /*#__PURE__*/_react["default"].forwardRef(function Grid(_ref, ref) {
37
37
  props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
38
38
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
39
39
  ref: ref,
40
- className: (0, _clsx["default"])(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
40
+ className: (0, _clsx["default"])(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 10 && "govgr-grid__gap-10", spacing === 12 && "govgr-grid__gap-12", spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6", spacing === 8 && "govgr-grid__gap-8"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
41
41
  }, props), children);
42
42
  });
43
43
 
package/es/Card/__snapshots__/index.test.tsx.snap CHANGED
@@ -1,5 +1,21 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`renders the Card with callToActon props 1`] = `
4
+ <ForwardRef(Card)
5
+ callToAction={true}
6
+ >
7
+ <div
8
+ className="govgr-card--cta govgr-card"
9
+ >
10
+ <div
11
+ className="govgr-card__body"
12
+ >
13
+ hello
14
+ </div>
15
+ </div>
16
+ </ForwardRef(Card)>
17
+ `;
18
+
3
19
  exports[`renders the Card with no props 1`] = `
4
20
  <ForwardRef(Card)>
5
21
  <div
@@ -14,6 +30,40 @@ exports[`renders the Card with no props 1`] = `
14
30
  </ForwardRef(Card)>
15
31
  `;
16
32
 
33
+ exports[`renders the Card with variant="border" and borderColor="dark" props 1`] = `
34
+ <ForwardRef(Card)
35
+ borderColor="dark"
36
+ variant="border"
37
+ >
38
+ <div
39
+ className="govgr-card--border govgr-card--border-dark govgr-card"
40
+ >
41
+ <div
42
+ className="govgr-card__body"
43
+ >
44
+ hello
45
+ </div>
46
+ </div>
47
+ </ForwardRef(Card)>
48
+ `;
49
+
50
+ exports[`renders the Card with variant="border" and borderColor="gray" props 1`] = `
51
+ <ForwardRef(Card)
52
+ borderColor="gray"
53
+ variant="border"
54
+ >
55
+ <div
56
+ className="govgr-card--border govgr-card--border-gray govgr-card"
57
+ >
58
+ <div
59
+ className="govgr-card__body"
60
+ >
61
+ hello
62
+ </div>
63
+ </div>
64
+ </ForwardRef(Card)>
65
+ `;
66
+
17
67
  exports[`renders the Card with variant="border" props 1`] = `
18
68
  <ForwardRef(Card)
19
69
  variant="border"
@@ -30,6 +80,74 @@ exports[`renders the Card with variant="border" props 1`] = `
30
80
  </ForwardRef(Card)>
31
81
  `;
32
82
 
83
+ exports[`renders the Card with variant="border-top" and borderColor="dark" callToAction props 1`] = `
84
+ <ForwardRef(Card)
85
+ borderColor="dark"
86
+ callToAction={true}
87
+ variant="border-top"
88
+ >
89
+ <div
90
+ className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
91
+ >
92
+ <div
93
+ className="govgr-card__body"
94
+ >
95
+ hello
96
+ </div>
97
+ </div>
98
+ </ForwardRef(Card)>
99
+ `;
100
+
101
+ exports[`renders the Card with variant="border-top" and borderColor="dark" props 1`] = `
102
+ <ForwardRef(Card)
103
+ borderColor="dark"
104
+ variant="border-top"
105
+ >
106
+ <div
107
+ className="govgr-card--border-top govgr-card--border-dark govgr-card"
108
+ >
109
+ <div
110
+ className="govgr-card__body"
111
+ >
112
+ hello
113
+ </div>
114
+ </div>
115
+ </ForwardRef(Card)>
116
+ `;
117
+
118
+ exports[`renders the Card with variant="border-top" and borderColor="gray" props 1`] = `
119
+ <ForwardRef(Card)
120
+ borderColor="gray"
121
+ variant="border-top"
122
+ >
123
+ <div
124
+ className="govgr-card--border-top govgr-card--border-gray govgr-card"
125
+ >
126
+ <div
127
+ className="govgr-card__body"
128
+ >
129
+ hello
130
+ </div>
131
+ </div>
132
+ </ForwardRef(Card)>
133
+ `;
134
+
135
+ exports[`renders the Card with variant="border-top" props 1`] = `
136
+ <ForwardRef(Card)
137
+ variant="border-top"
138
+ >
139
+ <div
140
+ className="govgr-card--border-top govgr-card"
141
+ >
142
+ <div
143
+ className="govgr-card__body"
144
+ >
145
+ hello
146
+ </div>
147
+ </div>
148
+ </ForwardRef(Card)>
149
+ `;
150
+
33
151
  exports[`renders the Card with variant="divider" props 1`] = `
34
152
  <ForwardRef(Card)
35
153
  variant="divider"
package/es/Card/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["variant", "style", "className", "children"];
3
+ var _excluded = ["variant", "borderColor", "callToAction", "style", "className", "children"];
4
4
  import React from 'react';
5
5
  import clsx from 'clsx';
6
6
 
@@ -11,6 +11,8 @@ import clsx from 'clsx';
11
11
  */
12
12
  export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
13
13
  var variant = _ref.variant,
14
+ borderColor = _ref.borderColor,
15
+ callToAction = _ref.callToAction,
14
16
  style = _ref.style,
15
17
  className = _ref.className,
16
18
  children = _ref.children,
@@ -18,7 +20,7 @@ export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
18
20
 
19
21
  return /*#__PURE__*/React.createElement("div", _extends({
20
22
  ref: ref,
21
- className: clsx(className, variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', true && 'govgr-card')
23
+ className: clsx(className, variant === "border-top" && 'govgr-card--border-top', variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', borderColor === "gray" && 'govgr-card--border-gray', borderColor === "dark" && 'govgr-card--border-dark', callToAction && 'govgr-card--cta', true && 'govgr-card')
22
24
  }, props), /*#__PURE__*/React.createElement("div", {
23
25
  className: clsx(true && 'govgr-card__body')
24
26
  }, children));
package/es/Card/index.test.js CHANGED
@@ -9,17 +9,79 @@ it('renders the Card with no props', function () {
9
9
  });
10
10
 
11
11
  var _ref2 = /*#__PURE__*/React.createElement(Card, {
12
- variant: "border"
12
+ callToAction: true
13
13
  }, "hello");
14
14
 
15
- it('renders the Card with variant="border" props', function () {
15
+ it('renders the Card with callToActon props', function () {
16
16
  expect(mount(_ref2)).toMatchSnapshot();
17
17
  });
18
18
 
19
19
  var _ref3 = /*#__PURE__*/React.createElement(Card, {
20
+ variant: "border"
21
+ }, "hello");
22
+
23
+ it('renders the Card with variant="border" props', function () {
24
+ expect(mount(_ref3)).toMatchSnapshot();
25
+ });
26
+
27
+ var _ref4 = /*#__PURE__*/React.createElement(Card, {
20
28
  variant: "divider"
21
29
  }, "hello");
22
30
 
23
31
  it('renders the Card with variant="divider" props', function () {
24
- expect(mount(_ref3)).toMatchSnapshot();
32
+ expect(mount(_ref4)).toMatchSnapshot();
33
+ });
34
+
35
+ var _ref5 = /*#__PURE__*/React.createElement(Card, {
36
+ variant: "border-top"
37
+ }, "hello");
38
+
39
+ it('renders the Card with variant="border-top" props', function () {
40
+ expect(mount(_ref5)).toMatchSnapshot();
41
+ });
42
+
43
+ var _ref6 = /*#__PURE__*/React.createElement(Card, {
44
+ variant: "border",
45
+ borderColor: "dark"
46
+ }, "hello");
47
+
48
+ it('renders the Card with variant="border" and borderColor="dark" props', function () {
49
+ expect(mount(_ref6)).toMatchSnapshot();
50
+ });
51
+
52
+ var _ref7 = /*#__PURE__*/React.createElement(Card, {
53
+ variant: "border",
54
+ borderColor: "gray"
55
+ }, "hello");
56
+
57
+ it('renders the Card with variant="border" and borderColor="gray" props', function () {
58
+ expect(mount(_ref7)).toMatchSnapshot();
59
+ });
60
+
61
+ var _ref8 = /*#__PURE__*/React.createElement(Card, {
62
+ variant: "border-top",
63
+ borderColor: "dark"
64
+ }, "hello");
65
+
66
+ it('renders the Card with variant="border-top" and borderColor="dark" props', function () {
67
+ expect(mount(_ref8)).toMatchSnapshot();
68
+ });
69
+
70
+ var _ref9 = /*#__PURE__*/React.createElement(Card, {
71
+ variant: "border-top",
72
+ borderColor: "gray"
73
+ }, "hello");
74
+
75
+ it('renders the Card with variant="border-top" and borderColor="gray" props', function () {
76
+ expect(mount(_ref9)).toMatchSnapshot();
77
+ });
78
+
79
+ var _ref10 = /*#__PURE__*/React.createElement(Card, {
80
+ variant: "border-top",
81
+ borderColor: "dark",
82
+ callToAction: true
83
+ }, "hello");
84
+
85
+ it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', function () {
86
+ expect(mount(_ref10)).toMatchSnapshot();
25
87
  });
package/es/Grid/index.js CHANGED
@@ -25,7 +25,7 @@ export var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
25
25
 
26
26
  return /*#__PURE__*/React.createElement("div", _extends({
27
27
  ref: ref,
28
- className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
28
+ className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 10 && "govgr-grid__gap-10", spacing === 12 && "govgr-grid__gap-12", spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6", spacing === 8 && "govgr-grid__gap-8"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
29
29
  }, props), children);
30
30
  });
31
31
  export default Grid;
package/esm/Card/__snapshots__/index.test.tsx.snap CHANGED
@@ -1,5 +1,21 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`renders the Card with callToActon props 1`] = `
4
+ <ForwardRef(Card)
5
+ callToAction={true}
6
+ >
7
+ <div
8
+ className="govgr-card--cta govgr-card"
9
+ >
10
+ <div
11
+ className="govgr-card__body"
12
+ >
13
+ hello
14
+ </div>
15
+ </div>
16
+ </ForwardRef(Card)>
17
+ `;
18
+
3
19
  exports[`renders the Card with no props 1`] = `
4
20
  <ForwardRef(Card)>
5
21
  <div
@@ -14,6 +30,40 @@ exports[`renders the Card with no props 1`] = `
14
30
  </ForwardRef(Card)>
15
31
  `;
16
32
 
33
+ exports[`renders the Card with variant="border" and borderColor="dark" props 1`] = `
34
+ <ForwardRef(Card)
35
+ borderColor="dark"
36
+ variant="border"
37
+ >
38
+ <div
39
+ className="govgr-card--border govgr-card--border-dark govgr-card"
40
+ >
41
+ <div
42
+ className="govgr-card__body"
43
+ >
44
+ hello
45
+ </div>
46
+ </div>
47
+ </ForwardRef(Card)>
48
+ `;
49
+
50
+ exports[`renders the Card with variant="border" and borderColor="gray" props 1`] = `
51
+ <ForwardRef(Card)
52
+ borderColor="gray"
53
+ variant="border"
54
+ >
55
+ <div
56
+ className="govgr-card--border govgr-card--border-gray govgr-card"
57
+ >
58
+ <div
59
+ className="govgr-card__body"
60
+ >
61
+ hello
62
+ </div>
63
+ </div>
64
+ </ForwardRef(Card)>
65
+ `;
66
+
17
67
  exports[`renders the Card with variant="border" props 1`] = `
18
68
  <ForwardRef(Card)
19
69
  variant="border"
@@ -30,6 +80,74 @@ exports[`renders the Card with variant="border" props 1`] = `
30
80
  </ForwardRef(Card)>
31
81
  `;
32
82
 
83
+ exports[`renders the Card with variant="border-top" and borderColor="dark" callToAction props 1`] = `
84
+ <ForwardRef(Card)
85
+ borderColor="dark"
86
+ callToAction={true}
87
+ variant="border-top"
88
+ >
89
+ <div
90
+ className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
91
+ >
92
+ <div
93
+ className="govgr-card__body"
94
+ >
95
+ hello
96
+ </div>
97
+ </div>
98
+ </ForwardRef(Card)>
99
+ `;
100
+
101
+ exports[`renders the Card with variant="border-top" and borderColor="dark" props 1`] = `
102
+ <ForwardRef(Card)
103
+ borderColor="dark"
104
+ variant="border-top"
105
+ >
106
+ <div
107
+ className="govgr-card--border-top govgr-card--border-dark govgr-card"
108
+ >
109
+ <div
110
+ className="govgr-card__body"
111
+ >
112
+ hello
113
+ </div>
114
+ </div>
115
+ </ForwardRef(Card)>
116
+ `;
117
+
118
+ exports[`renders the Card with variant="border-top" and borderColor="gray" props 1`] = `
119
+ <ForwardRef(Card)
120
+ borderColor="gray"
121
+ variant="border-top"
122
+ >
123
+ <div
124
+ className="govgr-card--border-top govgr-card--border-gray govgr-card"
125
+ >
126
+ <div
127
+ className="govgr-card__body"
128
+ >
129
+ hello
130
+ </div>
131
+ </div>
132
+ </ForwardRef(Card)>
133
+ `;
134
+
135
+ exports[`renders the Card with variant="border-top" props 1`] = `
136
+ <ForwardRef(Card)
137
+ variant="border-top"
138
+ >
139
+ <div
140
+ className="govgr-card--border-top govgr-card"
141
+ >
142
+ <div
143
+ className="govgr-card__body"
144
+ >
145
+ hello
146
+ </div>
147
+ </div>
148
+ </ForwardRef(Card)>
149
+ `;
150
+
33
151
  exports[`renders the Card with variant="divider" props 1`] = `
34
152
  <ForwardRef(Card)
35
153
  variant="divider"
package/esm/Card/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["variant", "style", "className", "children"];
3
+ var _excluded = ["variant", "borderColor", "callToAction", "style", "className", "children"];
4
4
  import React from 'react';
5
5
  import clsx from 'clsx';
6
6
 
@@ -11,6 +11,8 @@ import clsx from 'clsx';
11
11
  */
12
12
  export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
13
13
  var variant = _ref.variant,
14
+ borderColor = _ref.borderColor,
15
+ callToAction = _ref.callToAction,
14
16
  style = _ref.style,
15
17
  className = _ref.className,
16
18
  children = _ref.children,
@@ -18,7 +20,7 @@ export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref, ref) {
18
20
 
19
21
  return /*#__PURE__*/React.createElement("div", _extends({
20
22
  ref: ref,
21
- className: clsx(className, variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', true && 'govgr-card')
23
+ className: clsx(className, variant === "border-top" && 'govgr-card--border-top', variant === "divider" && 'govgr-card--divider', variant === "border" && 'govgr-card--border', borderColor === "gray" && 'govgr-card--border-gray', borderColor === "dark" && 'govgr-card--border-dark', callToAction && 'govgr-card--cta', true && 'govgr-card')
22
24
  }, props), /*#__PURE__*/React.createElement("div", {
23
25
  className: clsx(true && 'govgr-card__body')
24
26
  }, children));
package/esm/Card/index.test.js CHANGED
@@ -9,17 +9,79 @@ it('renders the Card with no props', function () {
9
9
  });
10
10
 
11
11
  var _ref2 = /*#__PURE__*/React.createElement(Card, {
12
- variant: "border"
12
+ callToAction: true
13
13
  }, "hello");
14
14
 
15
- it('renders the Card with variant="border" props', function () {
15
+ it('renders the Card with callToActon props', function () {
16
16
  expect(mount(_ref2)).toMatchSnapshot();
17
17
  });
18
18
 
19
19
  var _ref3 = /*#__PURE__*/React.createElement(Card, {
20
+ variant: "border"
21
+ }, "hello");
22
+
23
+ it('renders the Card with variant="border" props', function () {
24
+ expect(mount(_ref3)).toMatchSnapshot();
25
+ });
26
+
27
+ var _ref4 = /*#__PURE__*/React.createElement(Card, {
20
28
  variant: "divider"
21
29
  }, "hello");
22
30
 
23
31
  it('renders the Card with variant="divider" props', function () {
24
- expect(mount(_ref3)).toMatchSnapshot();
32
+ expect(mount(_ref4)).toMatchSnapshot();
33
+ });
34
+
35
+ var _ref5 = /*#__PURE__*/React.createElement(Card, {
36
+ variant: "border-top"
37
+ }, "hello");
38
+
39
+ it('renders the Card with variant="border-top" props', function () {
40
+ expect(mount(_ref5)).toMatchSnapshot();
41
+ });
42
+
43
+ var _ref6 = /*#__PURE__*/React.createElement(Card, {
44
+ variant: "border",
45
+ borderColor: "dark"
46
+ }, "hello");
47
+
48
+ it('renders the Card with variant="border" and borderColor="dark" props', function () {
49
+ expect(mount(_ref6)).toMatchSnapshot();
50
+ });
51
+
52
+ var _ref7 = /*#__PURE__*/React.createElement(Card, {
53
+ variant: "border",
54
+ borderColor: "gray"
55
+ }, "hello");
56
+
57
+ it('renders the Card with variant="border" and borderColor="gray" props', function () {
58
+ expect(mount(_ref7)).toMatchSnapshot();
59
+ });
60
+
61
+ var _ref8 = /*#__PURE__*/React.createElement(Card, {
62
+ variant: "border-top",
63
+ borderColor: "dark"
64
+ }, "hello");
65
+
66
+ it('renders the Card with variant="border-top" and borderColor="dark" props', function () {
67
+ expect(mount(_ref8)).toMatchSnapshot();
68
+ });
69
+
70
+ var _ref9 = /*#__PURE__*/React.createElement(Card, {
71
+ variant: "border-top",
72
+ borderColor: "gray"
73
+ }, "hello");
74
+
75
+ it('renders the Card with variant="border-top" and borderColor="gray" props', function () {
76
+ expect(mount(_ref9)).toMatchSnapshot();
77
+ });
78
+
79
+ var _ref10 = /*#__PURE__*/React.createElement(Card, {
80
+ variant: "border-top",
81
+ borderColor: "dark",
82
+ callToAction: true
83
+ }, "hello");
84
+
85
+ it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', function () {
86
+ expect(mount(_ref10)).toMatchSnapshot();
25
87
  });
package/esm/Grid/index.js CHANGED
@@ -25,7 +25,7 @@ export var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
25
25
 
26
26
  return /*#__PURE__*/React.createElement("div", _extends({
27
27
  ref: ref,
28
- className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
28
+ className: clsx(className, container === true && [inline === true && 'govgr-grid-inline', 'govgr-grid'], container && [spacing === 10 && "govgr-grid__gap-10", spacing === 12 && "govgr-grid__gap-12", spacing === 1 && "govgr-grid__gap-1", spacing === 2 && "govgr-grid__gap-2", spacing === 4 && "govgr-grid__gap-4", spacing === 6 && "govgr-grid__gap-6", spacing === 8 && "govgr-grid__gap-8"], item && [xs === 'auto' && "xs:govgr-grid__col-auto", sm === 'auto' && "sm:govgr-grid__col-auto", md === 'auto' && "md:govgr-grid__col-auto", lg === 'auto' && "lg:govgr-grid__col-auto", xl === 'auto' && "xl:govgr-grid__col-auto", xs === 10 && "xs:govgr-grid__col-span-10", xs === 11 && "xs:govgr-grid__col-span-11", xs === 12 && "xs:govgr-grid__col-span-12", sm === 10 && "sm:govgr-grid__col-span-10", sm === 11 && "sm:govgr-grid__col-span-11", sm === 12 && "sm:govgr-grid__col-span-12", md === 10 && "md:govgr-grid__col-span-10", md === 11 && "md:govgr-grid__col-span-11", md === 12 && "md:govgr-grid__col-span-12", lg === 10 && "lg:govgr-grid__col-span-10", lg === 11 && "lg:govgr-grid__col-span-11", lg === 12 && "lg:govgr-grid__col-span-12", xl === 10 && "xl:govgr-grid__col-span-10", xl === 11 && "xl:govgr-grid__col-span-11", xl === 12 && "xl:govgr-grid__col-span-12", xs === 1 && "xs:govgr-grid__col-span-1", xs === 2 && "xs:govgr-grid__col-span-2", xs === 3 && "xs:govgr-grid__col-span-3", xs === 4 && "xs:govgr-grid__col-span-4", xs === 5 && "xs:govgr-grid__col-span-5", xs === 6 && "xs:govgr-grid__col-span-6", xs === 7 && "xs:govgr-grid__col-span-7", xs === 8 && "xs:govgr-grid__col-span-8", xs === 9 && "xs:govgr-grid__col-span-9", sm === 1 && "sm:govgr-grid__col-span-1", sm === 2 && "sm:govgr-grid__col-span-2", sm === 3 && "sm:govgr-grid__col-span-3", sm === 4 && "sm:govgr-grid__col-span-4", sm === 5 && "sm:govgr-grid__col-span-5", sm === 6 && "sm:govgr-grid__col-span-6", sm === 7 && "sm:govgr-grid__col-span-7", sm === 8 && "sm:govgr-grid__col-span-8", sm === 9 && "sm:govgr-grid__col-span-9", md === 1 && "md:govgr-grid__col-span-1", md === 2 && "md:govgr-grid__col-span-2", md === 3 && "md:govgr-grid__col-span-3", md === 4 && "md:govgr-grid__col-span-4", md === 5 && "md:govgr-grid__col-span-5", md === 6 && "md:govgr-grid__col-span-6", md === 7 && "md:govgr-grid__col-span-7", md === 8 && "md:govgr-grid__col-span-8", md === 9 && "md:govgr-grid__col-span-9", lg === 1 && "lg:govgr-grid__col-span-1", lg === 2 && "lg:govgr-grid__col-span-2", lg === 3 && "lg:govgr-grid__col-span-3", lg === 4 && "lg:govgr-grid__col-span-4", lg === 5 && "lg:govgr-grid__col-span-5", lg === 6 && "lg:govgr-grid__col-span-6", lg === 7 && "lg:govgr-grid__col-span-7", lg === 8 && "lg:govgr-grid__col-span-8", lg === 9 && "lg:govgr-grid__col-span-9", xl === 1 && "xl:govgr-grid__col-span-1", xl === 2 && "xl:govgr-grid__col-span-2", xl === 3 && "xl:govgr-grid__col-span-3", xl === 4 && "xl:govgr-grid__col-span-4", xl === 5 && "xl:govgr-grid__col-span-5", xl === 6 && "xl:govgr-grid__col-span-6", xl === 7 && "xl:govgr-grid__col-span-7", xl === 8 && "xl:govgr-grid__col-span-8", xl === 9 && "xl:govgr-grid__col-span-9"])
29
29
  }, props), children);
30
30
  });
31
31
  export default Grid;
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license Digigov v0.10.2
1
+ /** @license Digigov v0.11.0
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digigov/react-core",
3
- "version": "0.10.2",
3
+ "version": "0.11.0",
4
4
  "description": "@digigov react core components",
5
5
  "author": "GRNET Developers <devs@lists.grnet.gr>",
6
6
  "license": "MIT",
@@ -11,7 +11,7 @@
11
11
  "directory": "dist"
12
12
  },
13
13
  "peerDependencies": {
14
- "@digigov/css": "0.20.1",
14
+ "@digigov/css": "0.21.0",
15
15
  "clsx": "1.1.1",
16
16
  "react": "16.14.0",
17
17
  "react-dom": "16.14.0"