@redsift/design-system 12.0.0-muiv6 → 12.1.0-muiv5
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/DetailedCard.js +27 -4
- package/_internal/DetailedCard.js.map +1 -1
- package/_internal/DetailedCardSection.js +18 -3
- package/_internal/DetailedCardSection.js.map +1 -1
- package/index.d.ts +20 -20
- package/package.json +3 -3
- package/style/index.css +515 -19
- package/style/redsift-fonts.css +515 -19
- package/style/redsift.css +515 -19
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, { forwardRef, useState } from 'react';
|
|
2
|
+
import React__default, { forwardRef, useState, useEffect } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
|
|
5
5
|
import { i as isComponent } from './isComponent.js';
|
|
@@ -38,6 +38,10 @@ var intlMessages = {
|
|
|
38
38
|
const StyledDetailedCardSection = styled.div`
|
|
39
39
|
margin: 8px 0;
|
|
40
40
|
|
|
41
|
+
&:first-child {
|
|
42
|
+
margin-top: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
41
45
|
.redsift-detailed-card-section__header {
|
|
42
46
|
${_ref => {
|
|
43
47
|
let {
|
|
@@ -120,13 +124,23 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
120
124
|
className,
|
|
121
125
|
header,
|
|
122
126
|
isCollapsed: propsIsCollapsed,
|
|
123
|
-
isCollapsible: propsIsCollapsible
|
|
127
|
+
isCollapsible: propsIsCollapsible,
|
|
124
128
|
isLoading
|
|
125
129
|
} = props,
|
|
126
130
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
127
131
|
const format = useMessageFormatter(intlMessages);
|
|
128
|
-
|
|
132
|
+
|
|
133
|
+
// If isCollapsible is explicitly true/false, use that value
|
|
134
|
+
// If undefined, auto-detect based on whether children contain collapsible sections
|
|
135
|
+
const isCollapsible = propsIsCollapsible !== null && propsIsCollapsible !== void 0 ? propsIsCollapsible : hasCollapsibleChildren(children);
|
|
129
136
|
const [isCollapsed, setIsCollapsed] = useState(Boolean(propsIsCollapsed));
|
|
137
|
+
|
|
138
|
+
// Sync internal state with prop changes (for collapse all/expand all functionality)
|
|
139
|
+
useEffect(() => {
|
|
140
|
+
if (propsIsCollapsed !== undefined) {
|
|
141
|
+
setIsCollapsed(Boolean(propsIsCollapsed));
|
|
142
|
+
}
|
|
143
|
+
}, [propsIsCollapsed]);
|
|
130
144
|
return /*#__PURE__*/React__default.createElement(StyledDetailedCardSection, _extends({}, forwardedProps, {
|
|
131
145
|
className: classNames(DetailedCardSection.className, className),
|
|
132
146
|
ref: ref,
|
|
@@ -157,6 +171,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
157
171
|
}, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
|
|
158
172
|
marginLeft: "auto",
|
|
159
173
|
"aria-label": format(isCollapsed ? 'expand' : 'collapse'),
|
|
174
|
+
"aria-expanded": !isCollapsed,
|
|
160
175
|
className: `${DetailedCardSection.className}-header__collapse-button`,
|
|
161
176
|
color: "grey",
|
|
162
177
|
icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailedCardSection.js","sources":["../../src/components/detailed-card-section/intl/index.ts","../../src/components/detailed-card-section/styles.ts","../../src/components/detailed-card-section/DetailedCardSection.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 { StyledDetailedCardSectionProps } from './types';\nimport { NotificationsColorPalette, ProductColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardSection = styled.div<StyledDetailedCardSectionProps>`\n margin: 8px 0;\n\n .redsift-detailed-card-section__header {\n ${({ $color }) =>\n $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);\n `\n : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-product-${$color});\n `\n : css`\n border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};\n `}\n margin-bottom: 8px;\n }\n\n .redsift-detailed-card-section-header__title {\n font-size: 18px;\n font-weight: 500;\n lineheight: 22px;\n padding: 6px 0px;\n }\n\n .redsift-detailed-card-section-header__collapse-button {\n color: var(--redsift-color-neutral-x-dark-grey);\n }\n\n .redsift-detailed-card-collapsible-section-items {\n visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n ${({ $isCollapsed }) =>\n $isCollapsed\n ? css`\n margin: unset;\n padding: unset;\n `\n : ''};\n }\n`;\n","import React, { forwardRef, ReactNode, RefObject, 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 { Comp } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { DetailedCardSectionProps } from './types';\nimport { isComponent } from '../../utils/isComponent';\nimport { DetailedCardCollapsibleSectionItems } from '../detailed-card-collapsible-section-items';\nimport { StyledDetailedCardSection } from './styles';\nimport { Skeleton } from '../skeleton';\nimport { Text } from '../text';\nimport { Badge, BadgeVariant } from '../badge';\n\nconst COMPONENT_NAME = 'DetailedCardSection';\nconst CLASSNAME = 'redsift-detailed-card-section';\n\nconst hasCollapsibleChildren = (children: ReactNode): boolean => {\n let hasCollapsible = false;\n\n React.Children.map(children, (child) => {\n if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {\n hasCollapsible = true;\n }\n });\n\n return hasCollapsible;\n};\n\n/**\n * The DetailedCardSection component.\n */\nexport const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n badge,\n color,\n children,\n className,\n header,\n isCollapsed: propsIsCollapsed,\n isCollapsible: propsIsCollapsible = true,\n isLoading,\n ...forwardedProps\n } = props;\n\n const format = useMessageFormatter(intlMessages);\n\n const isCollapsible = propsIsCollapsible && hasCollapsibleChildren(children);\n\n const [isCollapsed, setIsCollapsed] = useState<boolean>(Boolean(propsIsCollapsed));\n\n return (\n <StyledDetailedCardSection\n {...forwardedProps}\n className={classNames(DetailedCardSection.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $color={color}\n $isCollapsed={isCollapsed}\n >\n <Flexbox justifyContent=\"space-between\" className={`${DetailedCardSection.className}__header`}>\n {header ? (\n <Skeleton.Text\n variant=\"body\"\n isLoaded={!isLoading}\n fontSize=\"18px\"\n lineHeight=\"22px\"\n marginTop=\"6px\"\n marginBottom=\"12px\"\n >\n <Flexbox alignItems=\"center\" gap=\"8px\">\n {typeof header === 'string' ? (\n <Text\n className={`${DetailedCardSection.className}-header__title`}\n color=\"black\"\n fontSize=\"18px\"\n lineHeight=\"22px\"\n >\n {header}\n </Text>\n ) : (\n <div className={`${DetailedCardSection.className}-header__title`}>{header}</div>\n )}\n {badge ? <Badge variant={BadgeVariant.standard} {...badge} /> : null}\n </Flexbox>\n </Skeleton.Text>\n ) : null}\n {isCollapsible && !isLoading ? (\n <IconButton\n marginLeft=\"auto\"\n aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n className={`${DetailedCardSection.className}-header__collapse-button`}\n color=\"grey\"\n icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n onClick={() => {\n setIsCollapsed((isCollapsed) => !isCollapsed);\n }}\n />\n ) : null}\n </Flexbox>\n\n {children}\n </StyledDetailedCardSection>\n );\n});\nDetailedCardSection.className = CLASSNAME;\nDetailedCardSection.displayName = COMPONENT_NAME;\n"],"names":["enUS","frFR","StyledDetailedCardSection","styled","div","_ref","$color","Object","keys","NotificationsColorPalette","indexOf","css","ProductColorPalette","_ref2","$isCollapsed","_ref3","_ref4","_ref5","COMPONENT_NAME","CLASSNAME","hasCollapsibleChildren","children","hasCollapsible","React","Children","map","child","isComponent","DetailedCardCollapsibleSectionItems","DetailedCardSection","forwardRef","props","ref","badge","color","className","header","isCollapsed","propsIsCollapsed","isCollapsible","propsIsCollapsible","isLoading","forwardedProps","_objectWithoutProperties","_excluded","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","Boolean","createElement","_extends","classNames","Flexbox","justifyContent","Skeleton","Text","variant","isLoaded","fontSize","lineHeight","marginTop","marginBottom","alignItems","gap","Badge","BadgeVariant","standard","IconButton","marginLeft","icon","mdiChevronDown","mdiChevronUp","onClick","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DetailedCardSection.js","sources":["../../src/components/detailed-card-section/intl/index.ts","../../src/components/detailed-card-section/styles.ts","../../src/components/detailed-card-section/DetailedCardSection.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 { StyledDetailedCardSectionProps } from './types';\nimport { NotificationsColorPalette, ProductColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardSection = styled.div<StyledDetailedCardSectionProps>`\n margin: 8px 0;\n\n &:first-child {\n margin-top: 0;\n }\n\n .redsift-detailed-card-section__header {\n ${({ $color }) =>\n $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);\n `\n : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-product-${$color});\n `\n : css`\n border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};\n `}\n margin-bottom: 8px;\n }\n\n .redsift-detailed-card-section-header__title {\n font-size: 18px;\n font-weight: 500;\n lineheight: 22px;\n padding: 6px 0px;\n }\n\n .redsift-detailed-card-section-header__collapse-button {\n color: var(--redsift-color-neutral-x-dark-grey);\n }\n\n .redsift-detailed-card-collapsible-section-items {\n visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n ${({ $isCollapsed }) =>\n $isCollapsed\n ? css`\n margin: unset;\n padding: unset;\n `\n : ''};\n }\n`;\n","import React, { forwardRef, ReactNode, RefObject, useState, useEffect } 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 { Comp } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { DetailedCardSectionProps } from './types';\nimport { isComponent } from '../../utils/isComponent';\nimport { DetailedCardCollapsibleSectionItems } from '../detailed-card-collapsible-section-items';\nimport { StyledDetailedCardSection } from './styles';\nimport { Skeleton } from '../skeleton';\nimport { Text } from '../text';\nimport { Badge, BadgeVariant } from '../badge';\n\nconst COMPONENT_NAME = 'DetailedCardSection';\nconst CLASSNAME = 'redsift-detailed-card-section';\n\nconst hasCollapsibleChildren = (children: ReactNode): boolean => {\n let hasCollapsible = false;\n\n React.Children.map(children, (child) => {\n if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {\n hasCollapsible = true;\n }\n });\n\n return hasCollapsible;\n};\n\n/**\n * The DetailedCardSection component.\n */\nexport const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n badge,\n color,\n children,\n className,\n header,\n isCollapsed: propsIsCollapsed,\n isCollapsible: propsIsCollapsible,\n isLoading,\n ...forwardedProps\n } = props;\n\n const format = useMessageFormatter(intlMessages);\n\n // If isCollapsible is explicitly true/false, use that value\n // If undefined, auto-detect based on whether children contain collapsible sections\n const isCollapsible = propsIsCollapsible ?? hasCollapsibleChildren(children);\n\n const [isCollapsed, setIsCollapsed] = useState<boolean>(Boolean(propsIsCollapsed));\n\n // Sync internal state with prop changes (for collapse all/expand all functionality)\n useEffect(() => {\n if (propsIsCollapsed !== undefined) {\n setIsCollapsed(Boolean(propsIsCollapsed));\n }\n }, [propsIsCollapsed]);\n\n return (\n <StyledDetailedCardSection\n {...forwardedProps}\n className={classNames(DetailedCardSection.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $color={color}\n $isCollapsed={isCollapsed}\n >\n <Flexbox justifyContent=\"space-between\" className={`${DetailedCardSection.className}__header`}>\n {header ? (\n <Skeleton.Text\n variant=\"body\"\n isLoaded={!isLoading}\n fontSize=\"18px\"\n lineHeight=\"22px\"\n marginTop=\"6px\"\n marginBottom=\"12px\"\n >\n <Flexbox alignItems=\"center\" gap=\"8px\">\n {typeof header === 'string' ? (\n <Text\n className={`${DetailedCardSection.className}-header__title`}\n color=\"black\"\n fontSize=\"18px\"\n lineHeight=\"22px\"\n >\n {header}\n </Text>\n ) : (\n <div className={`${DetailedCardSection.className}-header__title`}>{header}</div>\n )}\n {badge ? <Badge variant={BadgeVariant.standard} {...badge} /> : null}\n </Flexbox>\n </Skeleton.Text>\n ) : null}\n {isCollapsible && !isLoading ? (\n <IconButton\n marginLeft=\"auto\"\n aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n aria-expanded={!isCollapsed}\n className={`${DetailedCardSection.className}-header__collapse-button`}\n color=\"grey\"\n icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n onClick={() => {\n setIsCollapsed((isCollapsed) => !isCollapsed);\n }}\n />\n ) : null}\n </Flexbox>\n\n {children}\n </StyledDetailedCardSection>\n );\n});\nDetailedCardSection.className = CLASSNAME;\nDetailedCardSection.displayName = COMPONENT_NAME;\n"],"names":["enUS","frFR","StyledDetailedCardSection","styled","div","_ref","$color","Object","keys","NotificationsColorPalette","indexOf","css","ProductColorPalette","_ref2","$isCollapsed","_ref3","_ref4","_ref5","COMPONENT_NAME","CLASSNAME","hasCollapsibleChildren","children","hasCollapsible","React","Children","map","child","isComponent","DetailedCardCollapsibleSectionItems","DetailedCardSection","forwardRef","props","ref","badge","color","className","header","isCollapsed","propsIsCollapsed","isCollapsible","propsIsCollapsible","isLoading","forwardedProps","_objectWithoutProperties","_excluded","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","Boolean","useEffect","undefined","createElement","_extends","classNames","Flexbox","justifyContent","Skeleton","Text","variant","isLoaded","fontSize","lineHeight","marginTop","marginBottom","alignItems","gap","Badge","BadgeVariant","standard","IconButton","marginLeft","icon","mdiChevronDown","mdiChevronUp","onClick","displayName"],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -3463,26 +3463,6 @@ type StyledDetailedCardCollapsibleSectionItemsProps = Omit<DetailedCardCollapsib
|
|
|
3463
3463
|
*/
|
|
3464
3464
|
declare const DetailedCardCollapsibleSectionItems: Comp<DetailedCardCollapsibleSectionItemsProps, HTMLDivElement>;
|
|
3465
3465
|
|
|
3466
|
-
/**
|
|
3467
|
-
* Component props.
|
|
3468
|
-
*/
|
|
3469
|
-
interface DetailedCardHeaderProps extends ComponentProps<'div'> {
|
|
3470
|
-
/** Header. */
|
|
3471
|
-
header?: string;
|
|
3472
|
-
/** Heading props allowing to override the component rendered by the heading without changing its style. */
|
|
3473
|
-
headingProps?: Pick<HeadingProps, 'as' | 'noWrap'>;
|
|
3474
|
-
/** Whether the card is loading or not. */
|
|
3475
|
-
isLoading?: boolean;
|
|
3476
|
-
}
|
|
3477
|
-
type StyledDetailedCardHeaderProps = DetailedCardHeaderProps & {
|
|
3478
|
-
$theme: Theme;
|
|
3479
|
-
};
|
|
3480
|
-
|
|
3481
|
-
/**
|
|
3482
|
-
* The DetailedCardHeader component.
|
|
3483
|
-
*/
|
|
3484
|
-
declare const DetailedCardHeader: Comp<DetailedCardHeaderProps, HTMLDivElement>;
|
|
3485
|
-
|
|
3486
3466
|
/**
|
|
3487
3467
|
* Component props.
|
|
3488
3468
|
*/
|
|
@@ -3510,6 +3490,26 @@ type StyledDetailedCardSectionProps = Omit<DetailedCardSectionProps, 'color' | '
|
|
|
3510
3490
|
*/
|
|
3511
3491
|
declare const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement>;
|
|
3512
3492
|
|
|
3493
|
+
/**
|
|
3494
|
+
* Component props.
|
|
3495
|
+
*/
|
|
3496
|
+
interface DetailedCardHeaderProps extends ComponentProps<'div'> {
|
|
3497
|
+
/** Header. */
|
|
3498
|
+
header?: string;
|
|
3499
|
+
/** Heading props allowing to override the component rendered by the heading without changing its style. */
|
|
3500
|
+
headingProps?: Pick<HeadingProps, 'as' | 'noWrap'>;
|
|
3501
|
+
/** Whether the card is loading or not. */
|
|
3502
|
+
isLoading?: boolean;
|
|
3503
|
+
}
|
|
3504
|
+
type StyledDetailedCardHeaderProps = DetailedCardHeaderProps & {
|
|
3505
|
+
$theme: Theme;
|
|
3506
|
+
};
|
|
3507
|
+
|
|
3508
|
+
/**
|
|
3509
|
+
* The DetailedCardHeader component.
|
|
3510
|
+
*/
|
|
3511
|
+
declare const DetailedCardHeader: Comp<DetailedCardHeaderProps, HTMLDivElement>;
|
|
3512
|
+
|
|
3513
3513
|
declare const DetailedCard: Comp<DetailedCardProps, HTMLDivElement> & {
|
|
3514
3514
|
Header: Comp<DetailedCardHeaderProps, HTMLDivElement>;
|
|
3515
3515
|
Section: Comp<DetailedCardSectionProps, HTMLDivElement>;
|
package/package.json
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"version": "version-changelog ../../CHANGELOG.md && changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
|
|
34
34
|
},
|
|
35
35
|
"types": "index.d.ts",
|
|
36
|
-
"version": "12.
|
|
36
|
+
"version": "12.1.0-muiv5",
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@react-spring/web": "^9.7.1",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
@@ -94,10 +94,10 @@
|
|
|
94
94
|
"version-changelog": "^3.1.1"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|
|
97
|
-
"@redsift/icons": "^12.
|
|
97
|
+
"@redsift/icons": "^12.1.0-0",
|
|
98
98
|
"react": ">=17",
|
|
99
99
|
"react-dom": ">=17",
|
|
100
100
|
"styled-components": "6.1.19"
|
|
101
101
|
},
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "8c6919a946e7086d6e845e76d2f999bc2e98cfed"
|
|
103
103
|
}
|