@synerise/ds-card 1.2.0 → 1.2.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.
- package/CHANGELOG.md +355 -1217
- package/README.md +26 -27
- package/dist/Card/Card.d.ts +1 -1
- package/dist/Card/Card.js +2 -2
- package/dist/Card/Card.styles.d.ts +1 -1
- package/dist/Card/Card.styles.js +12 -4
- package/dist/Card/Card.types.d.ts +1 -1
- package/dist/CardBadge/CardBadge.d.ts +1 -1
- package/dist/CardBadge/CardBadge.styles.d.ts +1 -1
- package/dist/CardBadge/CardBadge.styles.js +0 -2
- package/dist/CardBadge/CardBadge.types.d.ts +1 -1
- package/dist/CardGroup/CardGroup.d.ts +1 -1
- package/dist/CardGroup/CardGroup.styles.js +0 -2
- package/dist/CardGroup/CardGroup.types.d.ts +1 -1
- package/dist/CardSummary/CardSummary.d.ts +1 -1
- package/dist/CardSummary/CardSummary.styles.d.ts +1 -1
- package/dist/CardSummary/CardSummary.styles.js +1 -1
- package/dist/CardSummary/CardSummary.types.d.ts +1 -1
- package/dist/CardSummary/CardSummaryItem.d.ts +1 -1
- package/dist/CardSummary/CardSummaryItem.js +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -70,32 +70,32 @@ yarn add @synerise/ds-card
|
|
|
70
70
|
|
|
71
71
|
### Properties
|
|
72
72
|
|
|
73
|
-
| Property
|
|
74
|
-
|
|
|
75
|
-
| background
|
|
76
|
-
| children
|
|
77
|
-
| renderBadge
|
|
78
|
-
| className
|
|
79
|
-
| compactHeader
|
|
80
|
-
| description
|
|
81
|
-
| disabled
|
|
82
|
-
| headerBorderBottom
|
|
83
|
-
| headerSideChildren
|
|
84
|
-
| staticContent
|
|
85
|
-
| hideContent
|
|
86
|
-
| icon
|
|
87
|
-
| iconColor
|
|
88
|
-
| avatar
|
|
89
|
-
| lively
|
|
90
|
-
| raised
|
|
91
|
-
| style
|
|
92
|
-
| size
|
|
93
|
-
| title
|
|
94
|
-
| titleTag
|
|
95
|
-
| withHeader
|
|
96
|
-
| withoutPadding
|
|
97
|
-
| showSideChildrenWhenHeaderHidden
|
|
98
|
-
| defaultHeaderBackgroundColor
|
|
73
|
+
| Property | Description | Type | Default |
|
|
74
|
+
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------- |
|
|
75
|
+
| background | Background of Card container | `white` / `white-shadow` / `grey` / `grey-shadow` / `outline` | `white` |
|
|
76
|
+
| children | Defines if the button casts a shadow when the cursor is hovered over | React.ReactNode | - |
|
|
77
|
+
| renderBadge | Custom slot content for badge icon | React.ReactNode? | - |
|
|
78
|
+
| className | Defines the class name of the container | string | - |
|
|
79
|
+
| compactHeader | Set as `true`, displays the description next to the header. Set as `false`, displays the description below the header | boolean | - |
|
|
80
|
+
| description | Defines the content of the card description (in the header) | React.ReactNode | string |
|
|
81
|
+
| disabled | Defines if the state of the component is disabled | boolean | - |
|
|
82
|
+
| headerBorderBottom | Show line under CardHeader | boolean | `false` |
|
|
83
|
+
| headerSideChildren | Defines if the container includes a button (in the header) | React.ReactNode | - |
|
|
84
|
+
| staticContent | Defines content that's visible even if hideContent is `true` | React.ReactNode | - |
|
|
85
|
+
| hideContent | Defines the initial visibility of the content | boolean | `false` |
|
|
86
|
+
| icon | Icon of CardBadge, if defined then avatar prop gets ignored | React.ReactNode | - |
|
|
87
|
+
| iconColor | Defines the color of the icon | string | - |
|
|
88
|
+
| avatar | Avatar for CardBadge | React.ReactNode | - |
|
|
89
|
+
| lively | Defines if the container casts a shadow when the cursor is hovered over | boolean | - |
|
|
90
|
+
| raised | Defines if the container casts a shadow on the background | boolean | - |
|
|
91
|
+
| style | Defines the CSS of the container | React.CSSProperties | - |
|
|
92
|
+
| size | Defines the width of the container (the container width is set to 100% when this property is not passed). | `small` (472px) / `medium` (588px) / `large` (966px) / `extraLarge` (1232px) | - |
|
|
93
|
+
| title | Defines the title of the card (in the header) | string | - |
|
|
94
|
+
| titleTag | an optional status tag next to title | ReactElement | - |
|
|
95
|
+
| withHeader | Defines if the header is shown | boolean | - |
|
|
96
|
+
| withoutPadding | Reset padding of ContentContainer | boolean | `false` |
|
|
97
|
+
| showSideChildrenWhenHeaderHidden | Show headerSideChildren on the bottom when header is scrolled out of view | boolean | `false` |
|
|
98
|
+
| defaultHeaderBackgroundColor | Defines if header should have default white color | boolean | `false` |
|
|
99
99
|
|
|
100
100
|
#### CardBadge
|
|
101
101
|
|
|
@@ -113,7 +113,6 @@ Renders a summary in a bulletted list form. Can be assigned to Card.staticConten
|
|
|
113
113
|
| title | Otional title rendered above bulletted list | `React.ReactNode` | - |
|
|
114
114
|
| items | Defines the color of badge and icon | `CardSummaryItemProps[]` | - |
|
|
115
115
|
|
|
116
|
-
|
|
117
116
|
#### CardSummaryItemProps
|
|
118
117
|
|
|
119
118
|
| Property | Description | Type | Default |
|
package/dist/Card/Card.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { CardProps } from './Card.types';
|
|
2
|
+
import { type CardProps } from './Card.types';
|
|
3
3
|
declare const Card: ({ children, raised, disabled, style, className, lively, withHeader, defaultHeaderBackgroundColor, title, description, compactHeader, icon, avatar, renderBadge, iconColor, headerSideChildren, onHeaderClick, withoutPadding, headerBorderBottom, background, hideContent, staticContent, titleTag, showSideChildrenWhenHeaderHidden, ...props }: CardProps) => React.JSX.Element;
|
|
4
4
|
export default Card;
|
package/dist/Card/Card.js
CHANGED
|
@@ -2,11 +2,11 @@ var _excluded = ["children", "raised", "disabled", "style", "className", "lively
|
|
|
2
2
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
import React, { useState } from 'react';
|
|
5
|
-
import Icon from '@synerise/ds-icon';
|
|
6
5
|
import AnimateHeight from 'react-animate-height';
|
|
7
6
|
import VisibilitySensor from 'react-visibility-sensor';
|
|
8
|
-
import
|
|
7
|
+
import Icon from '@synerise/ds-icon';
|
|
9
8
|
import { ANIMATION_DURATION } from '../constants';
|
|
9
|
+
import * as S from './Card.styles';
|
|
10
10
|
var Card = function Card(_ref) {
|
|
11
11
|
var children = _ref.children,
|
|
12
12
|
raised = _ref.raised,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { MouseEventHandler, ReactNode } from 'react';
|
|
2
|
-
import { Backgrounds } from './Card.types';
|
|
2
|
+
import { type Backgrounds } from './Card.types';
|
|
3
3
|
export declare const HeaderSideChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {
|
|
5
5
|
compact?: boolean | undefined;
|
package/dist/Card/Card.styles.js
CHANGED
|
@@ -6,13 +6,21 @@ var greyBg = ['grey', 'grey-shadow'];
|
|
|
6
6
|
var withBoxShadow = ['white-shadow', 'grey-shadow'];
|
|
7
7
|
var withOutline = ['outline'];
|
|
8
8
|
var backgroundColor = function backgroundColor(props) {
|
|
9
|
-
if (whiteBg.includes(props.background))
|
|
10
|
-
|
|
9
|
+
if (whiteBg.includes(props.background)) {
|
|
10
|
+
return props.theme.palette.white;
|
|
11
|
+
}
|
|
12
|
+
if (greyBg.includes(props.background)) {
|
|
13
|
+
return props.theme.palette['grey-050'];
|
|
14
|
+
}
|
|
11
15
|
return props.theme.palette.transparent;
|
|
12
16
|
};
|
|
13
17
|
var boxShadow = function boxShadow(props) {
|
|
14
|
-
if (withBoxShadow.includes(props.background))
|
|
15
|
-
|
|
18
|
+
if (withBoxShadow.includes(props.background)) {
|
|
19
|
+
return "0 4px 12px 0 rgba(35, 41, 54, 0.04)";
|
|
20
|
+
}
|
|
21
|
+
if (withOutline.includes(props.background)) {
|
|
22
|
+
return props.theme.palette['grey-200'] + " 0px 0px 0px 1px inset";
|
|
23
|
+
}
|
|
16
24
|
return 'none';
|
|
17
25
|
};
|
|
18
26
|
export var HeaderSideChildren = styled.div.withConfig({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type CSSProperties, type ReactNode, type SyntheticEvent } from 'react';
|
|
2
2
|
export type Backgrounds = 'white' | 'white-shadow' | 'grey' | 'grey-shadow' | 'outline';
|
|
3
3
|
export interface CardProps {
|
|
4
4
|
raised?: boolean;
|
|
@@ -14,8 +14,6 @@ var color = {
|
|
|
14
14
|
var boxShadow = function boxShadow(props) {
|
|
15
15
|
return props.status === 'default' ? props.theme.palette['grey-400'] + " 0px 0px 0px 1.5px inset" : 'none';
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
// eslint-disable-next-line import/prefer-default-export
|
|
19
17
|
export var CardBadge = styled.div.withConfig({
|
|
20
18
|
displayName: "CardBadgestyles__CardBadge",
|
|
21
19
|
componentId: "sc-1xcnpyh-0"
|
|
@@ -7,7 +7,7 @@ export declare const ValueButtonWrapper: import("styled-components").StyledCompo
|
|
|
7
7
|
export declare const CardSummaryItemDetailsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
8
|
export declare const CardSummaryItemDetails: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
9
|
export declare const CardSummaryItemLabelValueWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
10
|
-
export declare const CardSummaryItemLabel: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
|
|
10
|
+
export declare const CardSummaryItemLabel: import("styled-components").StyledComponent<({ size, className, children, ellipsis, }: {
|
|
11
11
|
size?: import("@synerise/ds-typography").TextSize | undefined;
|
|
12
12
|
ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
|
|
13
13
|
children?: import("react").ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { Title, Text, macro } from '@synerise/ds-typography';
|
|
3
2
|
import DSIcon from '@synerise/ds-icon';
|
|
4
3
|
import { Tag } from '@synerise/ds-tag/dist/Tag.styles';
|
|
4
|
+
import { Text, Title, macro } from '@synerise/ds-typography';
|
|
5
5
|
export var CardSummaryWrapper = styled.div.withConfig({
|
|
6
6
|
displayName: "CardSummarystyles__CardSummaryWrapper",
|
|
7
7
|
componentId: "sc-1yj41os-0"
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { CardSummaryItemProps } from './CardSummary.types';
|
|
2
|
+
import { type CardSummaryItemProps } from './CardSummary.types';
|
|
3
3
|
export declare const CardSummaryItem: ({ label, value, summaryRowObjects, valueButton, ...rest }: CardSummaryItemProps) => React.JSX.Element;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
var _excluded = ["label", "value", "summaryRowObjects", "valueButton"];
|
|
2
2
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
3
3
|
import React, { useState } from 'react';
|
|
4
|
-
import { v4 as uuid } from 'uuid';
|
|
5
4
|
import AnimateHeight from 'react-animate-height';
|
|
5
|
+
import { v4 as uuid } from 'uuid';
|
|
6
6
|
import { AngleDownS } from '@synerise/ds-icon';
|
|
7
|
-
import * as S from './CardSummary.styles';
|
|
8
7
|
import { ANIMATION_DURATION } from '../constants';
|
|
8
|
+
import * as S from './CardSummary.styles';
|
|
9
9
|
export var CardSummaryItem = function CardSummaryItem(_ref) {
|
|
10
10
|
var label = _ref.label,
|
|
11
11
|
value = _ref.value,
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as MainCardStyles from './Card/Card.styles';
|
|
2
|
-
import * as CardGroupStyles from './CardGroup/CardGroup.styles';
|
|
3
2
|
import * as CardBadgeStyles from './CardBadge/CardBadge.styles';
|
|
3
|
+
import * as CardGroupStyles from './CardGroup/CardGroup.styles';
|
|
4
4
|
export { default } from './Card/Card';
|
|
5
5
|
export { default as CardGroup } from './CardGroup/CardGroup';
|
|
6
6
|
export { default as CardBadge } from './CardBadge/CardBadge';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as MainCardStyles from './Card/Card.styles';
|
|
2
|
-
import * as CardGroupStyles from './CardGroup/CardGroup.styles';
|
|
3
2
|
import * as CardBadgeStyles from './CardBadge/CardBadge.styles';
|
|
3
|
+
import * as CardGroupStyles from './CardGroup/CardGroup.styles';
|
|
4
4
|
export { default } from './Card/Card';
|
|
5
5
|
export { default as CardGroup } from './CardGroup/CardGroup';
|
|
6
6
|
export { default as CardBadge } from './CardBadge/CardBadge';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-card",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Card UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-avatar": "^1.0.
|
|
38
|
-
"@synerise/ds-icon": "^1.5.
|
|
39
|
-
"@synerise/ds-tag": "^1.1.
|
|
40
|
-
"@synerise/ds-typography": "^1.0.
|
|
41
|
-
"@synerise/ds-utils": "^1.3.
|
|
37
|
+
"@synerise/ds-avatar": "^1.0.13",
|
|
38
|
+
"@synerise/ds-icon": "^1.5.4",
|
|
39
|
+
"@synerise/ds-tag": "^1.1.12",
|
|
40
|
+
"@synerise/ds-typography": "^1.0.13",
|
|
41
|
+
"@synerise/ds-utils": "^1.3.1",
|
|
42
42
|
"react-animate-height": "^2.0.23",
|
|
43
43
|
"react-visibility-sensor": "^5.1.1",
|
|
44
44
|
"uuid": "^8.3.2"
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"react": ">=16.9.0 <= 18.3.1",
|
|
50
50
|
"styled-components": "^5.3.3"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "4512641033ba3581a3df208143c547fcfed45895"
|
|
53
53
|
}
|