@agregio-solutions/design-system 1.94.0 → 1.95.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/dist/design-system.cjs +308 -278
- package/dist/design-system.js +6784 -6764
- package/dist/packages/components/Accordion/doc.md +20 -0
- package/dist/packages/components/Card/Card.d.ts +35 -0
- package/dist/packages/components/Card/doc.md +202 -0
- package/dist/packages/index.d.ts +2 -1
- package/dist/public_docs/components.md +1 -0
- package/package.json +1 -1
|
@@ -168,6 +168,26 @@ export const WithTitleContentLeftAndRight: Story = {
|
|
|
168
168
|
await canvas.findByText("I'm a tag!");
|
|
169
169
|
},
|
|
170
170
|
};
|
|
171
|
+
|
|
172
|
+
export const WithConstrainedWidth: Story = {
|
|
173
|
+
args: {
|
|
174
|
+
...WithTitleContentLeftAndRight.args,
|
|
175
|
+
},
|
|
176
|
+
decorators: [
|
|
177
|
+
(Story) => (
|
|
178
|
+
<div style={{ width: "220px" }}>
|
|
179
|
+
<I18nProvider locale="en">
|
|
180
|
+
<Story />
|
|
181
|
+
</I18nProvider>
|
|
182
|
+
</div>
|
|
183
|
+
),
|
|
184
|
+
],
|
|
185
|
+
play: async ({ canvasElement, args }) => {
|
|
186
|
+
const canvas = within(canvasElement);
|
|
187
|
+
await canvas.findByText(args.title);
|
|
188
|
+
await canvas.findByText("I'm a tag!");
|
|
189
|
+
},
|
|
190
|
+
};
|
|
171
191
|
```
|
|
172
192
|
|
|
173
193
|
## How to test this component
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type Props = {
|
|
3
|
+
/**
|
|
4
|
+
* Content of the card.
|
|
5
|
+
*/
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Size of the card (i.e. to manage its padding)
|
|
9
|
+
* @default 'md'
|
|
10
|
+
*/
|
|
11
|
+
size?: "sm" | "md" | "lg" | "no-padding";
|
|
12
|
+
/**
|
|
13
|
+
* Border radius of the card.
|
|
14
|
+
* @default 'full'
|
|
15
|
+
*/
|
|
16
|
+
radius?: "minimal" | "rounded" | "full";
|
|
17
|
+
/**
|
|
18
|
+
* Additional class name.
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Additional style.
|
|
23
|
+
*/
|
|
24
|
+
style?: React.CSSProperties;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* A simple card container.
|
|
28
|
+
*
|
|
29
|
+
* This component does not aim to cover every possible Card use case: it is
|
|
30
|
+
* impossible to anticipate every design (with or without a background, widely
|
|
31
|
+
* different internal layouts, etc.). Instead, it provides a base that covers
|
|
32
|
+
* the classic cases and can be extended by overriding its styles on the
|
|
33
|
+
* consumer side (via `className` or `style`).
|
|
34
|
+
*/
|
|
35
|
+
export default function Card({ children, size, radius, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
# Card
|
|
2
|
+
|
|
3
|
+
## Props
|
|
4
|
+
|
|
5
|
+
The complete Props documentation with JS doc for this component is available at this path:
|
|
6
|
+
|
|
7
|
+
node_modules/@agregio-solutions/design-system/dist/packages/components/Card/Card.d.ts
|
|
8
|
+
|
|
9
|
+
## Example usage
|
|
10
|
+
|
|
11
|
+
Here are the Storybook Stories.
|
|
12
|
+
|
|
13
|
+
Base stories:
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Meta, StoryObj } from "@storybook/react-vite";
|
|
17
|
+
import { within, expect } from "storybook/test";
|
|
18
|
+
import Card from "./Card";
|
|
19
|
+
import Button from "../Button/Button";
|
|
20
|
+
import Icon from "../Icon/Icon";
|
|
21
|
+
|
|
22
|
+
const meta: Meta<typeof Card> = {
|
|
23
|
+
component: Card,
|
|
24
|
+
tags: ["autodocs"],
|
|
25
|
+
argTypes: {
|
|
26
|
+
children: { control: false },
|
|
27
|
+
},
|
|
28
|
+
parameters: {
|
|
29
|
+
layout: "centered",
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
export default meta;
|
|
33
|
+
|
|
34
|
+
type Story = StoryObj<typeof meta>;
|
|
35
|
+
|
|
36
|
+
const defaultArgs: Story["args"] = {
|
|
37
|
+
children: <div>Card content</div>,
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const getCard = (canvasElement: HTMLElement) =>
|
|
41
|
+
within(canvasElement)
|
|
42
|
+
.getByText("Card content")
|
|
43
|
+
.closest('[data-design-system-component="Card"]');
|
|
44
|
+
|
|
45
|
+
export const Playground: Story = {
|
|
46
|
+
args: defaultArgs,
|
|
47
|
+
play: async ({ canvasElement }) => {
|
|
48
|
+
const canvas = within(canvasElement);
|
|
49
|
+
await canvas.findByText("Card content");
|
|
50
|
+
await expect(getCard(canvasElement)).toHaveAttribute("data-size", "md");
|
|
51
|
+
await expect(getCard(canvasElement)).toHaveAttribute("data-radius", "full");
|
|
52
|
+
},
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export const NoPadding: Story = {
|
|
56
|
+
args: { ...defaultArgs, size: "no-padding" },
|
|
57
|
+
play: async ({ canvasElement }) => {
|
|
58
|
+
await within(canvasElement).findByText("Card content");
|
|
59
|
+
await expect(getCard(canvasElement)).not.toHaveAttribute("data-size");
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export const PaddingSm: Story = {
|
|
64
|
+
args: { ...defaultArgs, size: "sm" },
|
|
65
|
+
play: async ({ canvasElement }) => {
|
|
66
|
+
await within(canvasElement).findByText("Card content");
|
|
67
|
+
await expect(getCard(canvasElement)).toHaveAttribute("data-size", "sm");
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export const PaddingLg: Story = {
|
|
72
|
+
args: { ...defaultArgs, size: "lg" },
|
|
73
|
+
play: async ({ canvasElement }) => {
|
|
74
|
+
await within(canvasElement).findByText("Card content");
|
|
75
|
+
await expect(getCard(canvasElement)).toHaveAttribute("data-size", "lg");
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
export const RadiusMinimal: Story = {
|
|
80
|
+
args: { ...defaultArgs, radius: "minimal" },
|
|
81
|
+
play: async ({ canvasElement }) => {
|
|
82
|
+
await within(canvasElement).findByText("Card content");
|
|
83
|
+
await expect(getCard(canvasElement)).toHaveAttribute(
|
|
84
|
+
"data-radius",
|
|
85
|
+
"minimal",
|
|
86
|
+
);
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export const RadiusRounded: Story = {
|
|
91
|
+
args: { ...defaultArgs, radius: "rounded" },
|
|
92
|
+
play: async ({ canvasElement }) => {
|
|
93
|
+
await within(canvasElement).findByText("Card content");
|
|
94
|
+
await expect(getCard(canvasElement)).toHaveAttribute(
|
|
95
|
+
"data-radius",
|
|
96
|
+
"rounded",
|
|
97
|
+
);
|
|
98
|
+
},
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* A richer example that keeps the default padding: a title, a paragraph and a
|
|
103
|
+
* primary action pushed to the bottom-right corner of the card.
|
|
104
|
+
*/
|
|
105
|
+
export const WithTitleAndAction: Story = {
|
|
106
|
+
args: {
|
|
107
|
+
style: { maxWidth: 360 },
|
|
108
|
+
children: (
|
|
109
|
+
<div
|
|
110
|
+
style={{
|
|
111
|
+
display: "flex",
|
|
112
|
+
flexDirection: "column",
|
|
113
|
+
gap: "var(--spacing-sm)",
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
<h3
|
|
117
|
+
style={{
|
|
118
|
+
margin: 0,
|
|
119
|
+
color: "var(--color-content-neutral-primary)",
|
|
120
|
+
}}
|
|
121
|
+
>
|
|
122
|
+
Card title
|
|
123
|
+
</h3>
|
|
124
|
+
<p
|
|
125
|
+
style={{
|
|
126
|
+
margin: 0,
|
|
127
|
+
color: "var(--color-content-neutral-secondary)",
|
|
128
|
+
}}
|
|
129
|
+
>
|
|
130
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
|
131
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
132
|
+
</p>
|
|
133
|
+
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
|
134
|
+
<Button text="Voir plus" onClick={() => {}} />
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
),
|
|
138
|
+
},
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* A fully custom layout. The card removes its own padding (`no-padding`) so the
|
|
143
|
+
* children can control everything: a colored header with a white title, and a
|
|
144
|
+
* body with its own padding, a pale bottom-heavy gradient and a decorative icon
|
|
145
|
+
* sitting in the background. `overflow: hidden` keeps the header and gradient
|
|
146
|
+
* clipped to the card radius.
|
|
147
|
+
*/
|
|
148
|
+
export const CustomHeaderAndBackground: Story = {
|
|
149
|
+
args: {
|
|
150
|
+
size: "no-padding",
|
|
151
|
+
style: { maxWidth: 360, overflow: "hidden" },
|
|
152
|
+
children: (
|
|
153
|
+
<>
|
|
154
|
+
<div
|
|
155
|
+
style={{
|
|
156
|
+
background: "var(--color-content-action-action)",
|
|
157
|
+
color: "var(--color-content-neutral-primary-reversed)",
|
|
158
|
+
padding: "var(--spacing-md)",
|
|
159
|
+
}}
|
|
160
|
+
>
|
|
161
|
+
<h3 style={{ margin: 0 }}>Consommation</h3>
|
|
162
|
+
</div>
|
|
163
|
+
<div
|
|
164
|
+
style={{
|
|
165
|
+
position: "relative",
|
|
166
|
+
overflow: "hidden",
|
|
167
|
+
padding: "var(--spacing-md)",
|
|
168
|
+
display: "flex",
|
|
169
|
+
flexDirection: "column",
|
|
170
|
+
gap: "var(--spacing-sm)",
|
|
171
|
+
background:
|
|
172
|
+
"linear-gradient(180deg, var(--color-background-neutral-overground) 0%, var(--color-content-action-action-lighter) 100%)",
|
|
173
|
+
color: "var(--color-content-neutral-primary)",
|
|
174
|
+
}}
|
|
175
|
+
>
|
|
176
|
+
<Icon
|
|
177
|
+
name="bolt"
|
|
178
|
+
style={{
|
|
179
|
+
position: "absolute",
|
|
180
|
+
right: "-12px",
|
|
181
|
+
bottom: "0",
|
|
182
|
+
width: 120,
|
|
183
|
+
height: 120,
|
|
184
|
+
color: "var(--color-content-action-action)",
|
|
185
|
+
opacity: 0.15,
|
|
186
|
+
pointerEvents: "none",
|
|
187
|
+
}}
|
|
188
|
+
/>
|
|
189
|
+
<p style={{ margin: 0, position: "relative" }}>
|
|
190
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suivi de
|
|
191
|
+
votre consommation en temps réel.
|
|
192
|
+
</p>
|
|
193
|
+
<p style={{ margin: 0, position: "relative" }}>
|
|
194
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suivi de
|
|
195
|
+
votre consommation en temps réel.
|
|
196
|
+
</p>
|
|
197
|
+
</div>
|
|
198
|
+
</>
|
|
199
|
+
),
|
|
200
|
+
},
|
|
201
|
+
};
|
|
202
|
+
```
|
package/dist/packages/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { default as Badge } from './components/Badge/Badge';
|
|
|
3
3
|
import { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
|
|
4
4
|
import { default as Button } from './components/Button/Button';
|
|
5
5
|
import { default as Calendar, CalendarCell } from './components/Calendar/Calendar';
|
|
6
|
+
import { default as Card } from './components/Card/Card';
|
|
6
7
|
import { default as ChartLegend } from './components/ChartLegend/ChartLegend';
|
|
7
8
|
import { default as ChartTooltip } from './components/ChartTooltip/ChartTooltip';
|
|
8
9
|
import { default as Checkbox } from './components/Checkbox/Checkbox';
|
|
@@ -73,5 +74,5 @@ import { default as createMuiTheme } from './mui/mui-theme.ts';
|
|
|
73
74
|
import { tokens, fontSize, lineHeight } from './ds-design-tokens/index';
|
|
74
75
|
import { I18nProvider } from 'react-aria';
|
|
75
76
|
import { toast } from 'sonner';
|
|
76
|
-
export { Accordion, Badge, Breadcrumbs, Button, Calendar, CalendarCell, ChartLegend, ChartTooltip, Checkbox, CheckboxGroup, Chip, Combobox, createMuiTheme, DataTable, DataTableCell, DataTableHeader, DataTableRoot, DataTableRow, DatePicker, DateRangePicker, Drawer, Dropdown, DropdownListItem, EmptyState, FileUpload, Filter, fontSize, Header, I18nProvider, Icon, Label, LinearProgressBar, lineHeight, Link, List, Loader, Menu, MenuItem, Message, Modal, ModalContent, ModalActions, ModalForm, Navigation, NavigationItem, Notifications, NotificationCard, NumberField, PageLayout, Pagination, Popover, PopoverTrigger, Radio, RouterProvider, SearchBar, SegmentedControl, SegmentedControlButton, SegmentedControlList, SegmentedControlPanel, Select, SelectItem, Skeleton, Slider, Stepper, Step, Switch, Tab, TabList, TabPanel, Tabs, Tag, TextInput, TimeField, TimePicker, Timeline, toast, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, tokens, YearMonthPicker, };
|
|
77
|
+
export { Accordion, Badge, Breadcrumbs, Button, Calendar, CalendarCell, Card, ChartLegend, ChartTooltip, Checkbox, CheckboxGroup, Chip, Combobox, createMuiTheme, DataTable, DataTableCell, DataTableHeader, DataTableRoot, DataTableRow, DatePicker, DateRangePicker, Drawer, Dropdown, DropdownListItem, EmptyState, FileUpload, Filter, fontSize, Header, I18nProvider, Icon, Label, LinearProgressBar, lineHeight, Link, List, Loader, Menu, MenuItem, Message, Modal, ModalContent, ModalActions, ModalForm, Navigation, NavigationItem, Notifications, NotificationCard, NumberField, PageLayout, Pagination, Popover, PopoverTrigger, Radio, RouterProvider, SearchBar, SegmentedControl, SegmentedControlButton, SegmentedControlList, SegmentedControlPanel, Select, SelectItem, Skeleton, Slider, Stepper, Step, Switch, Tab, TabList, TabPanel, Tabs, Tag, TextInput, TimeField, TimePicker, Timeline, toast, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, tokens, YearMonthPicker, };
|
|
77
78
|
export type { TypeTableColumnWithFilter };
|
|
@@ -9,6 +9,7 @@ title: Exhaustive list of all the Design System Components and their props
|
|
|
9
9
|
- [Breadcrumbs](node_modules/@agregio-solutions/design-system/dist/packages/components/Breadcrumbs/doc.md) : A hierarchical navigation path showing the current location in a site structure with collapsible middle items for long paths — use it to help users understand where they are and navigate back to parent sections.
|
|
10
10
|
- [Button](node_modules/@agregio-solutions/design-system/dist/packages/components/Button/doc.md) : An interactive clickable element supporting multiple modes (primary, secondary, tertiary), sizes, and optional icons/badges — use it for form submissions, actions, navigation, or triggering dialogs.
|
|
11
11
|
- [Calendar](node_modules/@agregio-solutions/design-system/dist/packages/components/Calendar/doc.md) : A date picker supporting single selection, date ranges, or multiple selections with customizable constraints and cell rendering — use it to let users visually select one or more dates within an optional date range.
|
|
12
|
+
- [Card](node_modules/@agregio-solutions/design-system/dist/packages/components/Card/doc.md) : A simple container surface with configurable padding size and border radius, extensible via className/style — use it as a base wrapper to group related content into a bounded, elevated block.
|
|
12
13
|
- [ChartLegend](node_modules/@agregio-solutions/design-system/dist/packages/components/ChartLegend/doc.md) : A labeled color bullet (circle, square, or custom shape) optionally clickable to toggle chart series — use it to identify and optionally filter data series in charts.
|
|
13
14
|
- [ChartTooltip](node_modules/@agregio-solutions/design-system/dist/packages/components/ChartTooltip/doc.md) : A structured tooltip with title, colored legend items, optional body section, and footer slot for displaying chart data details — use it to show detailed context when hovering over chart elements.
|
|
14
15
|
- [Checkbox](node_modules/@agregio-solutions/design-system/dist/packages/components/Checkbox/doc.md) : A single checkbox input with optional label, supporting indeterminate state and form submissions — use it for binary on/off selections or as part of a CheckboxGroup for multiple options.
|
package/package.json
CHANGED