@redsift/design-system 11.5.0-muiv5 → 11.6.0-alpha.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.
- package/_internal/Alert2.js +197 -0
- package/_internal/Alert2.js.map +1 -0
- package/_internal/AppBar.js +248 -0
- package/_internal/AppBar.js.map +1 -0
- package/_internal/AppContainer.js +142 -0
- package/_internal/AppContainer.js.map +1 -0
- package/_internal/AppContent.js +92 -0
- package/_internal/AppContent.js.map +1 -0
- package/_internal/Badge2.js +142 -0
- package/_internal/Badge2.js.map +1 -0
- package/_internal/BreadcrumbItem.js +91 -0
- package/_internal/BreadcrumbItem.js.map +1 -0
- package/_internal/Breadcrumbs2.js +94 -0
- package/_internal/Breadcrumbs2.js.map +1 -0
- package/_internal/Button2.js +91 -0
- package/_internal/Button2.js.map +1 -0
- package/_internal/ButtonGroup.js +181 -0
- package/_internal/ButtonGroup.js.map +1 -0
- package/_internal/ButtonLink.js +84 -0
- package/_internal/ButtonLink.js.map +1 -0
- package/_internal/Card2.js +157 -0
- package/_internal/Card2.js.map +1 -0
- package/_internal/CardActions.js +44 -0
- package/_internal/CardActions.js.map +1 -0
- package/_internal/CardBody.js +42 -0
- package/_internal/CardBody.js.map +1 -0
- package/_internal/CardHeader.js +83 -0
- package/_internal/CardHeader.js.map +1 -0
- package/_internal/Checkbox2.js +244 -0
- package/_internal/Checkbox2.js.map +1 -0
- package/_internal/CheckboxGroup.js +188 -0
- package/_internal/CheckboxGroup.js.map +1 -0
- package/_internal/ConditionalWrapper.js +13 -0
- package/_internal/ConditionalWrapper.js.map +1 -0
- package/_internal/DetailedCard.js +6916 -0
- package/_internal/DetailedCard.js.map +1 -0
- package/_internal/DetailedCardCollapsibleSectionItems.js +64 -0
- package/_internal/DetailedCardCollapsibleSectionItems.js.map +1 -0
- package/_internal/DetailedCardHeader.js +67 -0
- package/_internal/DetailedCardHeader.js.map +1 -0
- package/_internal/DetailedCardSection.js +172 -0
- package/_internal/DetailedCardSection.js.map +1 -0
- package/_internal/DetailedCardSectionItem.js +94 -0
- package/_internal/DetailedCardSectionItem.js.map +1 -0
- package/_internal/Flexbox2.js +93 -0
- package/_internal/Flexbox2.js.map +1 -0
- package/_internal/Grid2.js +95 -0
- package/_internal/Grid2.js.map +1 -0
- package/_internal/GridItem.js +40 -0
- package/_internal/GridItem.js.map +1 -0
- package/_internal/Heading2.js +113 -0
- package/_internal/Heading2.js.map +1 -0
- package/_internal/Icon2.js +211 -0
- package/_internal/Icon2.js.map +1 -0
- package/_internal/IconButton.js +80 -0
- package/_internal/IconButton.js.map +1 -0
- package/_internal/IconButtonLink.js +75 -0
- package/_internal/IconButtonLink.js.map +1 -0
- package/_internal/Item2.js +399 -0
- package/_internal/Item2.js.map +1 -0
- package/_internal/Link2.js +67 -0
- package/_internal/Link2.js.map +1 -0
- package/_internal/LinkButton.js +66 -0
- package/_internal/LinkButton.js.map +1 -0
- package/_internal/Listbox2.js +274 -0
- package/_internal/Listbox2.js.map +1 -0
- package/_internal/Number2.js +111 -0
- package/_internal/Number2.js.map +1 -0
- package/_internal/NumberField.js +3974 -0
- package/_internal/NumberField.js.map +1 -0
- package/_internal/Pill2.js +405 -0
- package/_internal/Pill2.js.map +1 -0
- package/_internal/ProgressBar.js +69 -0
- package/_internal/ProgressBar.js.map +1 -0
- package/_internal/Radio2.js +237 -0
- package/_internal/Radio2.js.map +1 -0
- package/_internal/RadioGroup.js +176 -0
- package/_internal/RadioGroup.js.map +1 -0
- package/_internal/Shield2.js +225 -0
- package/_internal/Shield2.js.map +1 -0
- package/_internal/SideNavigationMenu.js +591 -0
- package/_internal/SideNavigationMenu.js.map +1 -0
- package/_internal/SideNavigationMenuItem.js +304 -0
- package/_internal/SideNavigationMenuItem.js.map +1 -0
- package/_internal/Skeleton2.js +42 -0
- package/_internal/Skeleton2.js.map +1 -0
- package/_internal/SkeletonCircle.js +58 -0
- package/_internal/SkeletonCircle.js.map +1 -0
- package/_internal/SkeletonText.js +77 -0
- package/_internal/SkeletonText.js.map +1 -0
- package/_internal/Spinner2.js +333 -0
- package/_internal/Spinner2.js.map +1 -0
- package/_internal/Switch2.js +320 -0
- package/_internal/Switch2.js.map +1 -0
- package/_internal/SwitchGroup.js +188 -0
- package/_internal/SwitchGroup.js.map +1 -0
- package/_internal/Text2.js +51 -0
- package/_internal/Text2.js.map +1 -0
- package/_internal/TextArea.js +444 -0
- package/_internal/TextArea.js.map +1 -0
- package/_internal/TextField.js +473 -0
- package/_internal/TextField.js.map +1 -0
- package/_internal/_rollupPluginBabelHelpers.js +133 -0
- package/_internal/_rollupPluginBabelHelpers.js.map +1 -0
- package/_internal/alert.js +2 -0
- package/_internal/alert.js.map +1 -0
- package/_internal/app-bar.js +2 -0
- package/_internal/app-bar.js.map +1 -0
- package/_internal/app-container.js +3 -0
- package/_internal/app-container.js.map +1 -0
- package/_internal/app-content.js +2 -0
- package/_internal/app-content.js.map +1 -0
- package/_internal/app-side-panel.js +3 -0
- package/_internal/app-side-panel.js.map +1 -0
- package/_internal/badge.js +2 -0
- package/_internal/badge.js.map +1 -0
- package/_internal/breadcrumb-item.js +2 -0
- package/_internal/breadcrumb-item.js.map +1 -0
- package/_internal/breadcrumbs.js +2 -0
- package/_internal/breadcrumbs.js.map +1 -0
- package/_internal/button-group.js +2 -0
- package/_internal/button-group.js.map +1 -0
- package/_internal/button-link.js +2 -0
- package/_internal/button-link.js.map +1 -0
- package/_internal/button.js +3 -0
- package/_internal/button.js.map +1 -0
- package/_internal/card-actions.js +2 -0
- package/_internal/card-actions.js.map +1 -0
- package/_internal/card-body.js +2 -0
- package/_internal/card-body.js.map +1 -0
- package/_internal/card-header.js +2 -0
- package/_internal/card-header.js.map +1 -0
- package/_internal/card.js +2 -0
- package/_internal/card.js.map +1 -0
- package/_internal/checkbox-group.js +2 -0
- package/_internal/checkbox-group.js.map +1 -0
- package/_internal/checkbox.js +2 -0
- package/_internal/checkbox.js.map +1 -0
- package/_internal/colors.js +98 -0
- package/_internal/colors.js.map +1 -0
- package/_internal/conditional-wrapper.js +2 -0
- package/_internal/conditional-wrapper.js.map +1 -0
- package/_internal/context.js +6 -0
- package/_internal/context.js.map +1 -0
- package/_internal/context2.js +300 -0
- package/_internal/context2.js.map +1 -0
- package/_internal/context3.js +6 -0
- package/_internal/context3.js.map +1 -0
- package/_internal/context4.js +6 -0
- package/_internal/context4.js.map +1 -0
- package/_internal/context5.js +6 -0
- package/_internal/context5.js.map +1 -0
- package/_internal/detailed-card-collapsible-section-items.js +2 -0
- package/_internal/detailed-card-collapsible-section-items.js.map +1 -0
- package/_internal/detailed-card-header.js +2 -0
- package/_internal/detailed-card-header.js.map +1 -0
- package/_internal/detailed-card-section-item.js +2 -0
- package/_internal/detailed-card-section-item.js.map +1 -0
- package/_internal/detailed-card-section.js +2 -0
- package/_internal/detailed-card-section.js.map +1 -0
- package/_internal/detailed-card.js +2 -0
- package/_internal/detailed-card.js.map +1 -0
- package/_internal/filterComponents.js +24 -0
- package/_internal/filterComponents.js.map +1 -0
- package/_internal/flexbox.js +2 -0
- package/_internal/flexbox.js.map +1 -0
- package/_internal/focus-within-group.js +3 -0
- package/_internal/focus-within-group.js.map +1 -0
- package/_internal/fonts.js +10 -0
- package/_internal/fonts.js.map +1 -0
- package/_internal/gradient-border.js +38 -0
- package/_internal/gradient-border.js.map +1 -0
- package/_internal/grid-item.js +2 -0
- package/_internal/grid-item.js.map +1 -0
- package/_internal/grid.js +2 -0
- package/_internal/grid.js.map +1 -0
- package/_internal/heading.js +3 -0
- package/_internal/heading.js.map +1 -0
- package/_internal/icon-button-link.js +2 -0
- package/_internal/icon-button-link.js.map +1 -0
- package/_internal/icon-button.js +3 -0
- package/_internal/icon-button.js.map +1 -0
- package/_internal/icon.js +2 -0
- package/_internal/icon.js.map +1 -0
- package/_internal/isComponent.js +15 -0
- package/_internal/isComponent.js.map +1 -0
- package/_internal/item.js +2 -0
- package/_internal/item.js.map +1 -0
- package/_internal/link-button.js +2 -0
- package/_internal/link-button.js.map +1 -0
- package/_internal/link.js +3 -0
- package/_internal/link.js.map +1 -0
- package/_internal/listbox.js +3 -0
- package/_internal/listbox.js.map +1 -0
- package/_internal/number-field.js +2 -0
- package/_internal/number-field.js.map +1 -0
- package/_internal/number.js +2 -0
- package/_internal/number.js.map +1 -0
- package/_internal/partitionComponents.js +26 -0
- package/_internal/partitionComponents.js.map +1 -0
- package/_internal/pill.js +2 -0
- package/_internal/pill.js.map +1 -0
- package/_internal/progress-bar.js +2 -0
- package/_internal/progress-bar.js.map +1 -0
- package/_internal/radio-group.js +2 -0
- package/_internal/radio-group.js.map +1 -0
- package/_internal/radio.js +2 -0
- package/_internal/radio.js.map +1 -0
- package/_internal/redsift-design-tokens.js +1391 -0
- package/_internal/redsift-design-tokens.js.map +1 -0
- package/_internal/shared.js +2 -0
- package/_internal/shared.js.map +1 -0
- package/_internal/shield.js +2 -0
- package/_internal/shield.js.map +1 -0
- package/_internal/side-navigation-menu-bar.js +3 -0
- package/_internal/side-navigation-menu-bar.js.map +1 -0
- package/_internal/side-navigation-menu-item.js +2 -0
- package/_internal/side-navigation-menu-item.js.map +1 -0
- package/_internal/side-navigation-menu.js +2 -0
- package/_internal/side-navigation-menu.js.map +1 -0
- package/_internal/skeleton-circle.js +2 -0
- package/_internal/skeleton-circle.js.map +1 -0
- package/_internal/skeleton-text.js +3 -0
- package/_internal/skeleton-text.js.map +1 -0
- package/_internal/skeleton.js +2 -0
- package/_internal/skeleton.js.map +1 -0
- package/_internal/spinner.js +2 -0
- package/_internal/spinner.js.map +1 -0
- package/_internal/styles.js +235 -0
- package/_internal/styles.js.map +1 -0
- package/_internal/styles2.js +47 -0
- package/_internal/styles2.js.map +1 -0
- package/_internal/styles3.js +145 -0
- package/_internal/styles3.js.map +1 -0
- package/_internal/styles4.js +250 -0
- package/_internal/styles4.js.map +1 -0
- package/_internal/styles5.js +143 -0
- package/_internal/styles5.js.map +1 -0
- package/_internal/styles6.js +84 -0
- package/_internal/styles6.js.map +1 -0
- package/_internal/switch-group.js +2 -0
- package/_internal/switch-group.js.map +1 -0
- package/_internal/switch.js +2 -0
- package/_internal/switch.js.map +1 -0
- package/_internal/text-area.js +2 -0
- package/_internal/text-area.js.map +1 -0
- package/_internal/text-field.js +2 -0
- package/_internal/text-field.js.map +1 -0
- package/_internal/text.js +3 -0
- package/_internal/text.js.map +1 -0
- package/_internal/theme.js +2 -0
- package/_internal/theme.js.map +1 -0
- package/_internal/types.js +15 -0
- package/_internal/types.js.map +1 -0
- package/_internal/types2.js +26 -0
- package/_internal/types2.js.map +1 -0
- package/_internal/types3.js +20 -0
- package/_internal/types3.js.map +1 -0
- package/_internal/useAppSidePanel.js +337 -0
- package/_internal/useAppSidePanel.js.map +1 -0
- package/_internal/useFocusOnList.js +541 -0
- package/_internal/useFocusOnList.js.map +1 -0
- package/_internal/useFocusOnListItem.js +203 -0
- package/_internal/useFocusOnListItem.js.map +1 -0
- package/_internal/useFocusRing.js +669 -0
- package/_internal/useFocusRing.js.map +1 -0
- package/_internal/useId.js +42 -0
- package/_internal/useId.js.map +1 -0
- package/_internal/useIsLoaded.js +14 -0
- package/_internal/useIsLoaded.js.map +1 -0
- package/_internal/useListboxItem.js +129 -0
- package/_internal/useListboxItem.js.map +1 -0
- package/_internal/useMessageFormatter.js +143 -0
- package/_internal/useMessageFormatter.js.map +1 -0
- package/_internal/useNumberFormatter.js +239 -0
- package/_internal/useNumberFormatter.js.map +1 -0
- package/_internal/useSideNavigationMenuBar.js +373 -0
- package/_internal/useSideNavigationMenuBar.js.map +1 -0
- package/_internal/useTheme.js +15 -0
- package/_internal/useTheme.js.map +1 -0
- package/_internal/warnIfNoAccessibleLabelFound.js +20 -0
- package/_internal/warnIfNoAccessibleLabelFound.js.map +1 -0
- package/index.js +315 -24243
- package/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import styled, { css } from 'styled-components';
|
|
5
|
+
import { i as baseStyling, g as baseFlexbox } from './styles4.js';
|
|
6
|
+
import { i as isComponent } from './isComponent.js';
|
|
7
|
+
import { u as useTheme } from './useTheme.js';
|
|
8
|
+
import { B as ButtonsColorPalette } from './colors.js';
|
|
9
|
+
import { f as filterComponents } from './filterComponents.js';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Component variant.
|
|
13
|
+
*/
|
|
14
|
+
const ButtonGroupVariant = {
|
|
15
|
+
primary: 'primary',
|
|
16
|
+
secondary: 'secondary',
|
|
17
|
+
unstyled: 'unstyled'
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Component color.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Component props.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Component style.
|
|
30
|
+
*/
|
|
31
|
+
const StyledButtonGroup = styled.div`
|
|
32
|
+
display: ${_ref => {
|
|
33
|
+
let {
|
|
34
|
+
inline
|
|
35
|
+
} = _ref;
|
|
36
|
+
return inline ? 'inline-flex' : 'flex';
|
|
37
|
+
}};
|
|
38
|
+
|
|
39
|
+
${baseStyling}
|
|
40
|
+
${baseFlexbox}
|
|
41
|
+
|
|
42
|
+
${_ref2 => {
|
|
43
|
+
let {
|
|
44
|
+
$color,
|
|
45
|
+
$variant,
|
|
46
|
+
$theme
|
|
47
|
+
} = _ref2;
|
|
48
|
+
return css`
|
|
49
|
+
${$variant === ButtonGroupVariant.secondary ? css`
|
|
50
|
+
.first-button {
|
|
51
|
+
border-top-right-radius: 0;
|
|
52
|
+
border-bottom-right-radius: 0;
|
|
53
|
+
border-right-color: transparent;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.middle-button {
|
|
57
|
+
border-top-left-radius: 0;
|
|
58
|
+
border-bottom-left-radius: 0;
|
|
59
|
+
margin-left: -1px;
|
|
60
|
+
border-top-right-radius: 0;
|
|
61
|
+
border-bottom-right-radius: 0;
|
|
62
|
+
border-right-color: transparent;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.last-button {
|
|
66
|
+
border-top-left-radius: 0;
|
|
67
|
+
border-bottom-left-radius: 0;
|
|
68
|
+
margin-left: -1px;
|
|
69
|
+
}
|
|
70
|
+
` : $variant === ButtonGroupVariant.unstyled ? css`
|
|
71
|
+
.first-button {
|
|
72
|
+
border-top-right-radius: 0;
|
|
73
|
+
border-bottom-right-radius: 0;
|
|
74
|
+
border-right: 1px solid rgba(0, 0, 0, 0.23);
|
|
75
|
+
border-color: ${`var(
|
|
76
|
+
--redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
|
|
77
|
+
)`};
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.middle-button {
|
|
81
|
+
border-top-left-radius: 0;
|
|
82
|
+
border-bottom-left-radius: 0;
|
|
83
|
+
border-top-right-radius: 0;
|
|
84
|
+
border-bottom-right-radius: 0;
|
|
85
|
+
border-right: 1px solid rgba(0, 0, 0, 0.23);
|
|
86
|
+
border-color: ${`var(
|
|
87
|
+
--redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default
|
|
88
|
+
)`};
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.last-button {
|
|
92
|
+
border-top-left-radius: 0;
|
|
93
|
+
border-bottom-left-radius: 0;
|
|
94
|
+
}
|
|
95
|
+
` : css`
|
|
96
|
+
.first-button {
|
|
97
|
+
border-top-right-radius: 0;
|
|
98
|
+
border-bottom-right-radius: 0;
|
|
99
|
+
border-right: 1px solid #bdbdbd;
|
|
100
|
+
border-color: ${`var(
|
|
101
|
+
--redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
|
|
102
|
+
)`};
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.middle-button {
|
|
106
|
+
border-top-left-radius: 0;
|
|
107
|
+
border-bottom-left-radius: 0;
|
|
108
|
+
border-top-right-radius: 0;
|
|
109
|
+
border-bottom-right-radius: 0;
|
|
110
|
+
border-right: 1px solid #bdbdbd;
|
|
111
|
+
border-color: ${`var(
|
|
112
|
+
--redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover
|
|
113
|
+
)`};
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.last-button {
|
|
117
|
+
border-top-left-radius: 0;
|
|
118
|
+
border-bottom-left-radius: 0;
|
|
119
|
+
}
|
|
120
|
+
`}
|
|
121
|
+
`;
|
|
122
|
+
}};
|
|
123
|
+
`;
|
|
124
|
+
|
|
125
|
+
const _excluded = ["children", "className", "color", "theme", "variant"];
|
|
126
|
+
const COMPONENT_NAME = 'ButtonGroup';
|
|
127
|
+
const CLASSNAME = 'redsift-button-group';
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* The ButtonGroup component.
|
|
131
|
+
*/
|
|
132
|
+
const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
|
|
133
|
+
const {
|
|
134
|
+
children,
|
|
135
|
+
className,
|
|
136
|
+
color: propsColor,
|
|
137
|
+
theme: propsTheme,
|
|
138
|
+
variant: propsVariant
|
|
139
|
+
} = props,
|
|
140
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
141
|
+
const theme = useTheme(propsTheme);
|
|
142
|
+
const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
|
|
143
|
+
const variant = Object.values(ButtonGroupVariant).includes(propsVariant) ? propsVariant : 'primary';
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Create an array containing only valid children being either Button, IconButton, ButtonLink, MenuButton or Select.
|
|
147
|
+
*/
|
|
148
|
+
const childArray = filterComponents(['Button', 'IconButton', 'ButtonLink', 'MenuButton', 'Select', 'Dialog', 'Popover', 'Tooltip'])(children);
|
|
149
|
+
const buttons = childArray.map((child, index) => {
|
|
150
|
+
var _key;
|
|
151
|
+
if (isComponent('MenuButton')(child) || isComponent('Select')(child) || isComponent('Dialog')(child) || isComponent('Popover')(child) || isComponent('Tooltip')(child)) {
|
|
152
|
+
var _child$key;
|
|
153
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
154
|
+
color,
|
|
155
|
+
theme,
|
|
156
|
+
variant,
|
|
157
|
+
key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
|
|
158
|
+
triggerClassName: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
162
|
+
color,
|
|
163
|
+
theme,
|
|
164
|
+
variant,
|
|
165
|
+
key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
|
|
166
|
+
className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button'
|
|
167
|
+
});
|
|
168
|
+
});
|
|
169
|
+
return /*#__PURE__*/React__default.createElement(StyledButtonGroup, _extends({}, forwardedProps, {
|
|
170
|
+
className: classNames(ButtonGroup.className, className),
|
|
171
|
+
ref: ref,
|
|
172
|
+
$color: color,
|
|
173
|
+
$variant: variant,
|
|
174
|
+
$theme: theme
|
|
175
|
+
}), buttons);
|
|
176
|
+
});
|
|
177
|
+
ButtonGroup.className = CLASSNAME;
|
|
178
|
+
ButtonGroup.displayName = COMPONENT_NAME;
|
|
179
|
+
|
|
180
|
+
export { ButtonGroupVariant as B, ButtonGroup as a };
|
|
181
|
+
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sources":["../../src/components/button-group/types.ts","../../src/components/button-group/styles.ts","../../src/components/button-group/ButtonGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { FlexLayoutProps, ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\n\n/**\n * Component variant.\n */\nexport const ButtonGroupVariant = {\n primary: 'primary',\n secondary: 'secondary',\n unstyled: 'unstyled',\n} as const;\nexport type ButtonGroupVariant = ValueOf<typeof ButtonGroupVariant>;\n\n/**\n * Component color.\n */\nexport type ButtonGroupColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface ButtonGroupProps extends ComponentProps<'div'>, StylingProps, FlexLayoutProps {\n /** Button color. */\n color?: ButtonGroupColor;\n /** Button variant. */\n variant?: ButtonGroupVariant;\n /** Theme. */\n theme?: Theme;\n}\n\nexport type StyledButtonGroupProps = ButtonGroupProps & {\n $color: ButtonGroupProps['color'];\n $variant: ButtonGroupProps['variant'];\n $theme: ButtonGroupProps['theme'];\n};\n","import styled, { css } from 'styled-components';\nimport { baseFlexbox, baseStyling } from '../shared';\nimport { ButtonGroupVariant, StyledButtonGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledButtonGroup = styled.div<StyledButtonGroupProps>`\n display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};\n\n ${baseStyling}\n ${baseFlexbox}\n\n ${({ $color, $variant, $theme }) => css`\n ${$variant === ButtonGroupVariant.secondary\n ? css`\n .first-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right-color: transparent;\n }\n\n .middle-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right-color: transparent;\n }\n\n .last-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px;\n }\n `\n : $variant === ButtonGroupVariant.unstyled\n ? css`\n .first-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: 1px solid rgba(0, 0, 0, 0.23);\n border-color: ${`var(\n --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n )`};\n }\n\n .middle-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: 1px solid rgba(0, 0, 0, 0.23);\n border-color: ${`var(\n --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-text-default\n )`};\n }\n\n .last-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n `\n : css`\n .first-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: 1px solid #bdbdbd;\n border-color: ${`var(\n --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n )`};\n }\n\n .middle-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: 1px solid #bdbdbd;\n border-color: ${`var(\n --redsift-color-${$theme}-components-buttons-${$variant}-button-${$color}-background-hover\n )`};\n }\n\n .last-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n `}\n `};\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { StyledButtonGroup } from './styles';\nimport { ButtonGroupProps, ButtonGroupVariant } from './types';\nimport { filterComponents, isComponent } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'ButtonGroup';\nconst CLASSNAME = 'redsift-button-group';\n\n/**\n * The ButtonGroup component.\n */\nexport const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, color: propsColor, theme: propsTheme, variant: propsVariant, ...forwardedProps } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(ButtonGroupVariant).includes(propsVariant!) ? propsVariant : 'primary';\n\n /**\n * Create an array containing only valid children being either Button, IconButton, ButtonLink, MenuButton or Select.\n */\n const childArray = filterComponents([\n 'Button',\n 'IconButton',\n 'ButtonLink',\n 'MenuButton',\n 'Select',\n 'Dialog',\n 'Popover',\n 'Tooltip',\n ])(children);\n const buttons = childArray.map((child, index) => {\n if (\n isComponent('MenuButton')(child) ||\n isComponent('Select')(child) ||\n isComponent('Dialog')(child) ||\n isComponent('Popover')(child) ||\n isComponent('Tooltip')(child)\n ) {\n return React.cloneElement(child, {\n color,\n theme,\n variant,\n key: child.key ?? index,\n triggerClassName:\n index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button',\n });\n }\n return React.cloneElement(child, {\n color,\n theme,\n variant,\n key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n className: index === 0 ? 'first-button' : index === childArray.length - 1 ? 'last-button' : 'middle-button',\n });\n });\n\n return (\n <StyledButtonGroup\n {...forwardedProps}\n className={classNames(ButtonGroup.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $color={color}\n $variant={variant}\n $theme={theme}\n >\n {buttons}\n </StyledButtonGroup>\n );\n});\nButtonGroup.className = CLASSNAME;\nButtonGroup.displayName = COMPONENT_NAME;\n"],"names":["ButtonGroupVariant","primary","secondary","unstyled","StyledButtonGroup","styled","div","_ref","inline","baseStyling","baseFlexbox","_ref2","$color","$variant","$theme","css","COMPONENT_NAME","CLASSNAME","ButtonGroup","forwardRef","props","ref","children","className","color","propsColor","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","childArray","filterComponents","buttons","map","child","index","_key","isComponent","_child$key","React","cloneElement","key","triggerClassName","length","createElement","_extends","classNames","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { StyledGradientBorder } from './gradient-border.js';
|
|
5
|
+
import { B as ButtonVariant, S as StyledButton } from './styles.js';
|
|
6
|
+
import { u as useTheme } from './useTheme.js';
|
|
7
|
+
import { B as ButtonsColorPalette } from './colors.js';
|
|
8
|
+
import { C as ConditionalWrapper } from './ConditionalWrapper.js';
|
|
9
|
+
import { a as Icon } from './Icon2.js';
|
|
10
|
+
|
|
11
|
+
const _excluded = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "target", "theme", "variant"];
|
|
12
|
+
const COMPONENT_NAME = 'ButtonLink';
|
|
13
|
+
const CLASSNAME = 'redsift-button-link';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* The ButtonLink is a semantic link that looks like a button.
|
|
17
|
+
*
|
|
18
|
+
* For a semantic button that looks like a button, please use the Button component.
|
|
19
|
+
* For a semantic link that looks like a link, please use the Link component.
|
|
20
|
+
* For a semantic button that looks like a link, please use the LinkButton component.
|
|
21
|
+
*/
|
|
22
|
+
const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
23
|
+
const {
|
|
24
|
+
as,
|
|
25
|
+
children,
|
|
26
|
+
className,
|
|
27
|
+
color: propsColor,
|
|
28
|
+
href,
|
|
29
|
+
isActive,
|
|
30
|
+
isDisabled,
|
|
31
|
+
isHovered,
|
|
32
|
+
leftIcon,
|
|
33
|
+
leftIconProps,
|
|
34
|
+
rightIcon,
|
|
35
|
+
rightIconProps,
|
|
36
|
+
target,
|
|
37
|
+
theme: propsTheme,
|
|
38
|
+
variant: propsVariant
|
|
39
|
+
} = props,
|
|
40
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
41
|
+
const theme = useTheme(propsTheme);
|
|
42
|
+
const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
|
|
43
|
+
const variant = Object.values(ButtonVariant).includes(propsVariant) ? propsVariant : 'primary';
|
|
44
|
+
const isGradient = color === ButtonsColorPalette.radar;
|
|
45
|
+
return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
|
|
46
|
+
condition: isGradient && variant === ButtonVariant.secondary,
|
|
47
|
+
wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
|
|
48
|
+
$color: color,
|
|
49
|
+
$isActive: isActive,
|
|
50
|
+
$isDisabled: isDisabled,
|
|
51
|
+
$isHovered: isHovered,
|
|
52
|
+
$theme: theme
|
|
53
|
+
}, children)
|
|
54
|
+
}, /*#__PURE__*/React__default.createElement(StyledButton, _extends({
|
|
55
|
+
as: as || 'a',
|
|
56
|
+
role: "link",
|
|
57
|
+
tabIndex: !isDisabled ? 0 : undefined
|
|
58
|
+
}, forwardedProps, {
|
|
59
|
+
$color: color,
|
|
60
|
+
$isActive: isActive,
|
|
61
|
+
$isDisabled: isDisabled,
|
|
62
|
+
$isHovered: isHovered,
|
|
63
|
+
$isGradient: isGradient,
|
|
64
|
+
$theme: theme,
|
|
65
|
+
$variant: variant,
|
|
66
|
+
className: classNames(ButtonLink.className, className),
|
|
67
|
+
href: !isDisabled ? href : undefined,
|
|
68
|
+
ref: ref,
|
|
69
|
+
target: target
|
|
70
|
+
}), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
|
|
71
|
+
icon: leftIcon,
|
|
72
|
+
"aria-hidden": "true",
|
|
73
|
+
className: "left"
|
|
74
|
+
}, leftIconProps)) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
|
|
75
|
+
icon: rightIcon,
|
|
76
|
+
"aria-hidden": "true",
|
|
77
|
+
className: "right"
|
|
78
|
+
}, rightIconProps)) : null));
|
|
79
|
+
});
|
|
80
|
+
ButtonLink.className = CLASSNAME;
|
|
81
|
+
ButtonLink.displayName = COMPONENT_NAME;
|
|
82
|
+
|
|
83
|
+
export { ButtonLink as B };
|
|
84
|
+
//# sourceMappingURL=ButtonLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonLink.js","sources":["../../src/components/button-link/ButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { ButtonVariant, StyledButton } from '../button';\nimport { ButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'ButtonLink';\nconst CLASSNAME = 'redsift-button-link';\n\n/**\n * The ButtonLink is a semantic link that looks like a button.\n *\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n children,\n className,\n color: propsColor,\n href,\n isActive,\n isDisabled,\n isHovered,\n leftIcon,\n leftIconProps,\n rightIcon,\n rightIconProps,\n target,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(ButtonVariant).includes(propsVariant!) ? propsVariant : 'primary';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === ButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledButton\n as={(as || 'a') as any}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $isGradient={isGradient}\n $theme={theme}\n $variant={variant}\n className={classNames(ButtonLink.className, className)}\n href={!isDisabled ? href : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n target={target}\n >\n {leftIcon ? <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" {...leftIconProps} /> : null}\n <span>{children}</span>\n {rightIcon ? <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" {...rightIconProps} /> : null}\n </StyledButton>\n </ConditionalWrapper>\n );\n});\nButtonLink.className = CLASSNAME;\nButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","ButtonLink","forwardRef","props","ref","as","children","className","color","propsColor","href","isActive","isDisabled","isHovered","leftIcon","leftIconProps","rightIcon","rightIconProps","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","ButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","icon","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef, useState, useEffect, useCallback } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
|
|
5
|
+
import styled, { css } from 'styled-components';
|
|
6
|
+
import { i as baseStyling } from './styles4.js';
|
|
7
|
+
import { T as Theme } from './colors.js';
|
|
8
|
+
import { p as partitionComponents } from './partitionComponents.js';
|
|
9
|
+
import { i as isComponent } from './isComponent.js';
|
|
10
|
+
import { C as CardHeader } from './CardHeader.js';
|
|
11
|
+
import { C as CardBody } from './CardBody.js';
|
|
12
|
+
import { C as CardActions } from './CardActions.js';
|
|
13
|
+
import { u as useMessageFormatter } from './useMessageFormatter.js';
|
|
14
|
+
import { u as useTheme, a as ThemeProvider } from './useTheme.js';
|
|
15
|
+
import { I as IconButton } from './IconButton.js';
|
|
16
|
+
|
|
17
|
+
var collapse$1 = "Collapse";
|
|
18
|
+
var expand$1 = "Expand";
|
|
19
|
+
var enUS = {
|
|
20
|
+
collapse: collapse$1,
|
|
21
|
+
expand: expand$1
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
var collapse = "Réduire";
|
|
25
|
+
var expand = "Développer";
|
|
26
|
+
var frFR = {
|
|
27
|
+
collapse: collapse,
|
|
28
|
+
expand: expand
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
var intlMessages = {
|
|
32
|
+
'en-US': enUS,
|
|
33
|
+
'fr-FR': frFR
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Component style.
|
|
38
|
+
*/
|
|
39
|
+
const StyledCard = styled.div`
|
|
40
|
+
${baseStyling}
|
|
41
|
+
|
|
42
|
+
${_ref => {
|
|
43
|
+
let {
|
|
44
|
+
$theme
|
|
45
|
+
} = _ref;
|
|
46
|
+
return css`
|
|
47
|
+
color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
|
|
48
|
+
`;
|
|
49
|
+
}}
|
|
50
|
+
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
|
|
54
|
+
.redsift-card__header {
|
|
55
|
+
align-items: flex-start;
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: space-between;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.redsift-card-header__icon-button {
|
|
61
|
+
margin-top: 8px;
|
|
62
|
+
margin-left: auto;
|
|
63
|
+
margin-right: 8px;
|
|
64
|
+
|
|
65
|
+
[dir='rtl'] & {
|
|
66
|
+
margin-left: 8px;
|
|
67
|
+
margin-right: auto;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.redsift-card__content {
|
|
72
|
+
visibility: ${_ref2 => {
|
|
73
|
+
let {
|
|
74
|
+
$isCollapsed
|
|
75
|
+
} = _ref2;
|
|
76
|
+
return !$isCollapsed ? 'visible' : 'hidden';
|
|
77
|
+
}};
|
|
78
|
+
overflow: ${_ref3 => {
|
|
79
|
+
let {
|
|
80
|
+
$isCollapsed
|
|
81
|
+
} = _ref3;
|
|
82
|
+
return !$isCollapsed ? 'visible' : 'hidden';
|
|
83
|
+
}};
|
|
84
|
+
height: ${_ref4 => {
|
|
85
|
+
let {
|
|
86
|
+
$isCollapsed
|
|
87
|
+
} = _ref4;
|
|
88
|
+
return !$isCollapsed ? 'auto' : '0px';
|
|
89
|
+
}};
|
|
90
|
+
}
|
|
91
|
+
`;
|
|
92
|
+
|
|
93
|
+
const _excluded = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse", "theme"];
|
|
94
|
+
const COMPONENT_NAME = 'Card';
|
|
95
|
+
const CLASSNAME = 'redsift-card';
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* The Card component.
|
|
99
|
+
*/
|
|
100
|
+
const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
|
|
101
|
+
const {
|
|
102
|
+
children,
|
|
103
|
+
className,
|
|
104
|
+
defaultCollapsed,
|
|
105
|
+
isCollapsed: propsIsCollapsed,
|
|
106
|
+
isCollapsible,
|
|
107
|
+
onCollapse,
|
|
108
|
+
theme: propsTheme
|
|
109
|
+
} = props,
|
|
110
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
111
|
+
const theme = useTheme(propsTheme);
|
|
112
|
+
const format = useMessageFormatter(intlMessages);
|
|
113
|
+
const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
|
|
114
|
+
useEffect(() => {
|
|
115
|
+
setIsCollapsed(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
|
|
116
|
+
}, [propsIsCollapsed, defaultCollapsed]);
|
|
117
|
+
const handleCollapse = useCallback(collapsed => {
|
|
118
|
+
if (onCollapse) {
|
|
119
|
+
onCollapse(collapsed);
|
|
120
|
+
}
|
|
121
|
+
if (propsIsCollapsed === undefined || propsIsCollapsed === null) {
|
|
122
|
+
setIsCollapsed(collapsed);
|
|
123
|
+
}
|
|
124
|
+
}, [onCollapse]);
|
|
125
|
+
const [[header], [body], [actions]] = partitionComponents(React__default.Children.toArray(children), [isComponent('CardHeader'), isComponent('CardBody'), isComponent('CardActions')]);
|
|
126
|
+
return /*#__PURE__*/React__default.createElement(ThemeProvider, {
|
|
127
|
+
value: {
|
|
128
|
+
theme
|
|
129
|
+
}
|
|
130
|
+
}, /*#__PURE__*/React__default.createElement(StyledCard, _extends({}, forwardedProps, {
|
|
131
|
+
className: classNames(BaseCard.className, className),
|
|
132
|
+
ref: ref,
|
|
133
|
+
$isCollapsed: isCollapsed,
|
|
134
|
+
$theme: theme
|
|
135
|
+
}), header || isCollapsible ? /*#__PURE__*/React__default.createElement("div", {
|
|
136
|
+
className: `${BaseCard.className}__header`
|
|
137
|
+
}, header && isComponent('CardHeader')(header) ? header : null, isCollapsible ? /*#__PURE__*/React__default.createElement(IconButton, {
|
|
138
|
+
theme: theme,
|
|
139
|
+
"aria-label": format(isCollapsed ? 'expand' : 'collapse'),
|
|
140
|
+
className: `${BaseCard.className}-header__icon-button`,
|
|
141
|
+
color: "grey",
|
|
142
|
+
icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
|
|
143
|
+
onClick: () => handleCollapse(!isCollapsed)
|
|
144
|
+
}) : null) : null, body || actions ? /*#__PURE__*/React__default.createElement("div", {
|
|
145
|
+
className: `${BaseCard.className}__content`
|
|
146
|
+
}, body && isComponent('CardBody')(body) ? body : null, actions && isComponent('CardActions')(actions) ? actions : null) : null));
|
|
147
|
+
});
|
|
148
|
+
BaseCard.className = CLASSNAME;
|
|
149
|
+
BaseCard.displayName = COMPONENT_NAME;
|
|
150
|
+
const Card = Object.assign(BaseCard, {
|
|
151
|
+
Header: CardHeader,
|
|
152
|
+
Body: CardBody,
|
|
153
|
+
Actions: CardActions
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
export { Card as C };
|
|
157
|
+
//# sourceMappingURL=Card2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card2.js","sources":["../../src/components/card/intl/index.ts","../../src/components/card/styles.ts","../../src/components/card/Card.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n 'en-US': enUS,\n 'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledCardProps } from './types';\nimport { Theme } from '@redsift/design-system/types';\n\n/**\n * Component style.\n */\nexport const StyledCard = styled.div<StyledCardProps>`\n ${baseStyling}\n\n ${({ $theme }) => css`\n color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n `}\n\n display: flex;\n flex-direction: column;\n\n .redsift-card__header {\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n }\n\n .redsift-card-header__icon-button {\n margin-top: 8px;\n margin-left: auto;\n margin-right: 8px;\n\n [dir='rtl'] & {\n margin-left: 8px;\n margin-right: auto;\n }\n }\n\n .redsift-card__content {\n visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n }\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiChevronDown, mdiChevronUp } from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { Comp } from '../../types';\nimport { StyledCard } from './styles';\nimport { CardProps } from './types';\nimport { partitionComponents } from '../../utils/partitionComponents';\nimport { isComponent } from '../../utils/isComponent';\nimport { CardHeader } from '../card-header';\nimport { CardBody } from '../card-body';\nimport { CardActions } from '../card-actions';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Card';\nconst CLASSNAME = 'redsift-card';\n\n/**\n * The Card component.\n */\nconst BaseCard: Comp<CardProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n defaultCollapsed,\n isCollapsed: propsIsCollapsed,\n isCollapsible,\n onCollapse,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n const format = useMessageFormatter(intlMessages);\n\n const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed ?? defaultCollapsed);\n\n useEffect(() => {\n setIsCollapsed(propsIsCollapsed ?? defaultCollapsed);\n }, [propsIsCollapsed, defaultCollapsed]);\n\n const handleCollapse = useCallback(\n (collapsed: boolean) => {\n if (onCollapse) {\n onCollapse(collapsed);\n }\n if (propsIsCollapsed === undefined || propsIsCollapsed === null) {\n setIsCollapsed(collapsed);\n }\n },\n [onCollapse]\n );\n\n const [[header], [body], [actions]] = partitionComponents(React.Children.toArray(children), [\n isComponent('CardHeader'),\n isComponent('CardBody'),\n isComponent('CardActions'),\n ]);\n\n return (\n <ThemeProvider value={{ theme }}>\n <StyledCard\n {...forwardedProps}\n className={classNames(BaseCard.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $isCollapsed={isCollapsed}\n $theme={theme}\n >\n {header || isCollapsible ? (\n <div className={`${BaseCard.className}__header`}>\n {header && isComponent('CardHeader')(header) ? header : null}\n\n {isCollapsible ? (\n <IconButton\n theme={theme}\n aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n className={`${BaseCard.className}-header__icon-button`}\n color=\"grey\"\n icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n onClick={() => handleCollapse(!isCollapsed)}\n />\n ) : null}\n </div>\n ) : null}\n\n {body || actions ? (\n <div className={`${BaseCard.className}__content`}>\n {body && isComponent('CardBody')(body) ? body : null}\n {actions && isComponent('CardActions')(actions) ? actions : null}\n </div>\n ) : null}\n </StyledCard>\n </ThemeProvider>\n );\n});\nBaseCard.className = CLASSNAME;\nBaseCard.displayName = COMPONENT_NAME;\n\nexport const Card = Object.assign(BaseCard, {\n Header: CardHeader,\n Body: CardBody,\n Actions: CardActions,\n});\n"],"names":["enUS","frFR","StyledCard","styled","div","baseStyling","_ref","$theme","css","Theme","dark","_ref2","$isCollapsed","_ref3","_ref4","COMPONENT_NAME","CLASSNAME","BaseCard","forwardRef","props","ref","children","className","defaultCollapsed","isCollapsed","propsIsCollapsed","isCollapsible","onCollapse","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","useEffect","handleCollapse","useCallback","collapsed","undefined","header","body","actions","partitionComponents","React","Children","toArray","isComponent","createElement","ThemeProvider","value","_extends","classNames","IconButton","color","icon","mdiChevronDown","mdiChevronUp","onClick","displayName","Card","Object","assign","Header","CardHeader","Body","CardBody","Actions","CardActions"],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import { j as baseContainer } from './styles4.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Component style.
|
|
9
|
+
*/
|
|
10
|
+
const StyledCardActions = styled.div`
|
|
11
|
+
${baseContainer}
|
|
12
|
+
|
|
13
|
+
margin-top: 8px;
|
|
14
|
+
margin-bottom: 8px;
|
|
15
|
+
`;
|
|
16
|
+
|
|
17
|
+
const _excluded = ["children", "className", "display", "flexDirection"];
|
|
18
|
+
const COMPONENT_NAME = 'CardActions';
|
|
19
|
+
const CLASSNAME = 'redsift-card-actions';
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* The CardActions component.
|
|
23
|
+
*/
|
|
24
|
+
const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
|
|
25
|
+
const {
|
|
26
|
+
children,
|
|
27
|
+
className,
|
|
28
|
+
display = 'flex',
|
|
29
|
+
flexDirection = 'row'
|
|
30
|
+
} = props,
|
|
31
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
32
|
+
return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends({
|
|
33
|
+
display: display,
|
|
34
|
+
flexDirection: flexDirection
|
|
35
|
+
}, forwardedProps, {
|
|
36
|
+
className: classNames(CardActions.className, className),
|
|
37
|
+
ref: ref
|
|
38
|
+
}), children);
|
|
39
|
+
});
|
|
40
|
+
CardActions.className = CLASSNAME;
|
|
41
|
+
CardActions.displayName = COMPONENT_NAME;
|
|
42
|
+
|
|
43
|
+
export { CardActions as C };
|
|
44
|
+
//# sourceMappingURL=CardActions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardActions.js","sources":["../../src/components/card-actions/styles.ts","../../src/components/card-actions/CardActions.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledCardActionsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCardActions = styled.div<StyledCardActionsProps>`\n ${baseContainer}\n\n margin-top: 8px;\n margin-bottom: 8px;\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { StyledCardActions } from './styles';\nimport { CardActionsProps } from './types';\n\nconst COMPONENT_NAME = 'CardActions';\nconst CLASSNAME = 'redsift-card-actions';\n\n/**\n * The CardActions component.\n */\nexport const CardActions: Comp<CardActionsProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, display = 'flex', flexDirection = 'row', ...forwardedProps } = props;\n\n return (\n <StyledCardActions\n display={display}\n flexDirection={flexDirection}\n {...forwardedProps}\n className={classNames(CardActions.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n >\n {children}\n </StyledCardActions>\n );\n});\nCardActions.className = CLASSNAME;\nCardActions.displayName = COMPONENT_NAME;\n"],"names":["StyledCardActions","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","CardActions","forwardRef","props","ref","children","className","display","flexDirection","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;;AAIA;AACA;AACA;AACO,MAAMA,iBAAiB,GAAGC,MAAM,CAACC,GAA4B,CAAA;AACpE,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA,CAAC;;;ACLD,MAAMC,cAAc,GAAG,aAAa,CAAA;AACpC,MAAMC,SAAS,GAAG,sBAAsB,CAAA;;AAExC;AACA;AACA;AACO,MAAMC,WAAmD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5F,MAAM;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,OAAO,GAAG,MAAM;AAAEC,MAAAA,aAAa,GAAG,KAAA;AAAyB,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;AAEjG,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAAClB,iBAAiB,EAAAmB,QAAA,CAAA;AAChBP,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,EACzBC,cAAc,EAAA;IAClBH,SAAS,EAAES,UAAU,CAACd,WAAW,CAACK,SAAS,EAAEA,SAAS,CAAE;AACxDF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCC,QACgB,CAAC,CAAA;AAExB,CAAC,EAAC;AACFJ,WAAW,CAACK,SAAS,GAAGN,SAAS,CAAA;AACjCC,WAAW,CAACe,WAAW,GAAGjB,cAAc;;;;"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import { j as baseContainer } from './styles4.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Component style.
|
|
9
|
+
*/
|
|
10
|
+
const StyledCardBody = styled.div`
|
|
11
|
+
${baseContainer}
|
|
12
|
+
|
|
13
|
+
font-family: var(--redsift-typography-body-font-family);
|
|
14
|
+
font-size: var(--redsift-typography-body-font-size);
|
|
15
|
+
font-weight: var(--redsift-typography-body-font-weight);
|
|
16
|
+
line-height: var(--redsift-typography-body-line-height);
|
|
17
|
+
padding: 16px 0px;
|
|
18
|
+
`;
|
|
19
|
+
|
|
20
|
+
const _excluded = ["children", "className"];
|
|
21
|
+
const COMPONENT_NAME = 'CardBody';
|
|
22
|
+
const CLASSNAME = 'redsift-card-body';
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* The CardBody component.
|
|
26
|
+
*/
|
|
27
|
+
const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
|
|
28
|
+
const {
|
|
29
|
+
children,
|
|
30
|
+
className
|
|
31
|
+
} = props,
|
|
32
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
33
|
+
return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends({}, forwardedProps, {
|
|
34
|
+
className: classNames(CardBody.className, className),
|
|
35
|
+
ref: ref
|
|
36
|
+
}), children);
|
|
37
|
+
});
|
|
38
|
+
CardBody.className = CLASSNAME;
|
|
39
|
+
CardBody.displayName = COMPONENT_NAME;
|
|
40
|
+
|
|
41
|
+
export { CardBody as C };
|
|
42
|
+
//# sourceMappingURL=CardBody.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardBody.js","sources":["../../src/components/card-body/styles.ts","../../src/components/card-body/CardBody.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledCardBodyProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCardBody = styled.div<StyledCardBodyProps>`\n ${baseContainer}\n\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n padding: 16px 0px;\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { StyledCardBody } from './styles';\nimport { CardBodyProps } from './types';\n\nconst COMPONENT_NAME = 'CardBody';\nconst CLASSNAME = 'redsift-card-body';\n\n/**\n * The CardBody component.\n */\nexport const CardBody: Comp<CardBodyProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <StyledCardBody\n {...forwardedProps}\n className={classNames(CardBody.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n >\n {children}\n </StyledCardBody>\n );\n});\nCardBody.className = CLASSNAME;\nCardBody.displayName = COMPONENT_NAME;\n"],"names":["StyledCardBody","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","CardBody","forwardRef","props","ref","children","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;;AAIA;AACA;AACA;AACO,MAAMA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;ACRD,MAAMC,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,mBAAmB,CAAA;;AAErC;AACA;AACA;AACO,MAAMC,QAA6C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;MAAEC,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,KAAK;AAAxBI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA,CAAA,CAAA;EAExD,oBACEC,cAAA,CAAAC,aAAA,CAAChB,cAAc,EAAAiB,QAAA,KACTL,cAAc,EAAA;IAClBD,SAAS,EAAEO,UAAU,CAACZ,QAAQ,CAACK,SAAS,EAAEA,SAAS,CAAE;AACrDF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCC,QACa,CAAC,CAAA;AAErB,CAAC,EAAC;AACFJ,QAAQ,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC9BC,QAAQ,CAACa,WAAW,GAAGf,cAAc;;;;"}
|