@agregio-solutions/design-system 1.102.5 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/design-system.cjs +544 -629
  2. package/dist/design-system.js +7772 -27711
  3. package/dist/packages/components/Button/doc.md +33 -2
  4. package/dist/packages/components/Combobox/Combobox.d.ts +2 -2
  5. package/dist/packages/components/Combobox/doc.md +0 -4
  6. package/dist/packages/components/DataTable/DataTable.d.ts +15 -6
  7. package/dist/packages/components/DataTable/DataTableRow/DataTableRow.d.ts +1 -6
  8. package/dist/packages/components/DataTable/doc.md +495 -389
  9. package/dist/packages/components/DatePicker/DatePicker.d.ts +2 -2
  10. package/dist/packages/components/DatePicker/doc.md +0 -1
  11. package/dist/packages/components/DateRangePicker/DateRangePicker.d.ts +2 -2
  12. package/dist/packages/components/DateRangePicker/doc.md +0 -1
  13. package/dist/packages/components/Drawer/Drawer.d.ts +7 -24
  14. package/dist/packages/components/Drawer/doc.md +136 -106
  15. package/dist/packages/components/Dropdown/Dropdown.d.ts +1 -7
  16. package/dist/packages/components/Dropdown/doc.md +2 -29
  17. package/dist/packages/components/FileUpload/doc.md +0 -2
  18. package/dist/packages/components/Filter/Filter.d.ts +24 -10
  19. package/dist/packages/components/Filter/doc.md +31 -1
  20. package/dist/packages/components/Modal/doc.md +1 -2
  21. package/dist/packages/components/Navigation/Navigation.d.ts +2 -1
  22. package/dist/packages/components/Navigation/doc.md +14 -9
  23. package/dist/packages/components/NavigationItem/NavigationItem.d.ts +4 -0
  24. package/dist/packages/components/NavigationItem/doc.md +15 -3
  25. package/dist/packages/components/PageLayout/doc.md +190 -149
  26. package/dist/packages/components/Select/Select.d.ts +1 -1
  27. package/dist/packages/components/Select/doc.md +0 -9
  28. package/dist/packages/components/Slider/Slider.d.ts +3 -9
  29. package/dist/packages/components/Slider/doc.md +1 -4
  30. package/dist/packages/components/Tabs/Tab/Tab.d.ts +0 -5
  31. package/dist/packages/components/TextInput/TextInput.d.ts +2 -2
  32. package/dist/packages/components/TextInput/doc.md +0 -22
  33. package/dist/packages/components/TimeField/TimeField.d.ts +2 -2
  34. package/dist/packages/components/TimeField/doc.md +0 -1
  35. package/dist/packages/components/TimePicker/TimePicker.d.ts +2 -2
  36. package/dist/packages/components/Timeline/Timeline.styled.d.ts +15 -20
  37. package/dist/packages/components/Timeline/components/BlockLineContainer/BlockLineContainer.styled.d.ts +23 -27
  38. package/dist/packages/components/Timeline/components/GroupLineContainer/GroupLineContainer.styled.d.ts +3 -4
  39. package/dist/packages/components/Timeline/components/TimelineRange/TimelineRange.styled.d.ts +12 -16
  40. package/dist/packages/components/Timeline/doc.md +38 -1
  41. package/dist/packages/components/YearMonthPicker/YearMonthPicker.d.ts +2 -2
  42. package/dist/packages/components/YearMonthPicker/doc.md +0 -1
  43. package/dist/packages/ds-design-tokens/index.d.ts +1 -2
  44. package/dist/packages/ds-design-tokens/src/tokens.style.d.ts +138 -135
  45. package/dist/packages/index.d.ts +3 -4
  46. package/dist/packages/internal-components/FormGroupWrapper/FormGroupWrapper.d.ts +0 -12
  47. package/dist/public_docs/index.md +4 -1
  48. package/dist/public_docs/migration-guide-v2.md +444 -0
  49. package/package.json +6 -8
  50. package/dist/packages/ds-design-tokens/src/fontSize.style.d.ts +0 -60
  51. package/dist/packages/mui/mui-theme.d.ts +0 -3
@@ -24,7 +24,6 @@ const meta: Meta<typeof Slider> = {
24
24
  argTypes: {
25
25
  label: { control: "text" },
26
26
  value: { control: "text" },
27
- description: { control: "text" },
28
27
  helperText: { control: "text" },
29
28
  errorHelperText: { control: "text" },
30
29
  successHelperText: { control: "text" },
@@ -67,8 +66,7 @@ export const Playground: Story = {
67
66
  isDisabled: false,
68
67
  labelIconRight: "help_outline",
69
68
  labelIconRightTooltip: "Additional information",
70
- description: "Select the number of participants",
71
- helperText: "This is a helper text",
69
+ helperText: "Select the number of participants",
72
70
  helperTextIcon: "help_outline",
73
71
  errorHelperTextIcon: "error_outline",
74
72
  style: {
@@ -79,7 +77,6 @@ export const Playground: Story = {
79
77
  const canvas = within(canvasElement);
80
78
  await canvas.findByText("Participants");
81
79
  await canvas.findByLabelText("Number of participants");
82
- await canvas.findByText("This is a helper text");
83
80
  await canvas.findByText("Select the number of participants");
84
81
  await expect(
85
82
  canvas.getByLabelText("Value for Number of participants"),
@@ -27,11 +27,6 @@ export type Props = {
27
27
  * A URL to link to.
28
28
  */
29
29
  href?: string;
30
- /**
31
- * Show a little dot right of the Tab label.
32
- * @deprecated Use `badgeProps` instead.
33
- */
34
- hasNotification?: boolean;
35
30
  /**
36
31
  * Props to pass to the Badge component.
37
32
  * If not provided, no badge will be displayed.
@@ -2,7 +2,7 @@ import { default as React } from 'react';
2
2
  import { IconName } from '../Icon/Icon';
3
3
  import { Props as LabelProps } from '../Label/Label';
4
4
  import { Props as FormGroupWrapperProps } from '../../internal-components/FormGroupWrapper/FormGroupWrapper';
5
- export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
5
+ export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
6
6
  /**
7
7
  * Whether to render the component as a textarea or an input.
8
8
  * @default "input"
@@ -46,7 +46,7 @@ export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> &
46
46
  */
47
47
  rows?: number;
48
48
  };
49
- declare const TextInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
49
+ declare const TextInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
50
50
  /**
51
51
  * Whether to render the component as a textarea or an input.
52
52
  * @default "input"
@@ -24,7 +24,6 @@ const meta: Meta<typeof TextInput> = {
24
24
  tags: ["autodocs"],
25
25
  argTypes: {
26
26
  label: { control: { type: "text" } },
27
- description: { control: { type: "text" } },
28
27
  helperText: { control: { type: "text" } },
29
28
  errorHelperText: { control: { type: "text" } },
30
29
  successHelperText: { control: { type: "text" } },
@@ -47,7 +46,6 @@ export const Playground: StoryObj<typeof TextInput> = {
47
46
  label: "[Insert label]",
48
47
  labelIconRight: "help_outline",
49
48
  labelIconRightTooltip: "Additional information",
50
- description: "[Insert description]",
51
49
  characterCounter: true,
52
50
  maxLength: 60,
53
51
  helperText: "[Insert helper]",
@@ -137,7 +135,6 @@ export const Focus: StoryObj<typeof TextInput> = {
137
135
  export const Horizontal: StoryObj<typeof TextInput> = {
138
136
  args: {
139
137
  ...Playground.args,
140
- description: undefined,
141
138
  orientation: "horizontal",
142
139
  },
143
140
  };
@@ -200,7 +197,6 @@ const meta: Meta<typeof TextInput> = {
200
197
  component: TextInput,
201
198
  argTypes: {
202
199
  label: { control: { type: "text" } },
203
- description: { control: { type: "text" } },
204
200
  helperText: { control: { type: "text" } },
205
201
  inputIcon: {
206
202
  options: ["", ...ICON_NAMES_ARRAY],
@@ -442,20 +438,12 @@ export const OnlyCharacterCounter: StoryObj<typeof TextInput> = {
442
438
  ...Playground.args,
443
439
  characterCounter: true,
444
440
  value: "New value",
445
- description: undefined,
446
441
  helperText: undefined,
447
442
  errorHelperText: undefined,
448
443
  successHelperText: undefined,
449
444
  },
450
445
  };
451
446
 
452
- export const CharacterCounterAndDescription: StoryObj<typeof TextInput> = {
453
- args: {
454
- ...OnlyCharacterCounter.args,
455
- description: "Description",
456
- },
457
- };
458
-
459
447
  export const CharacterCounterAndHelperText: StoryObj<typeof TextInput> = {
460
448
  args: {
461
449
  ...OnlyCharacterCounter.args,
@@ -477,14 +465,4 @@ export const CharacterCounterAndSuccessHelperText: StoryObj<typeof TextInput> =
477
465
  successHelperText: "Success helper text",
478
466
  },
479
467
  };
480
-
481
- export const CharacterCounterAndDescriptionAndHelperText: StoryObj<
482
- typeof TextInput
483
- > = {
484
- args: {
485
- ...OnlyCharacterCounter.args,
486
- description: "Description",
487
- helperText: "Helper text",
488
- },
489
- };
490
468
  ```
@@ -1,7 +1,7 @@
1
1
  import { Props as FormGroupWrapperProps } from '../../internal-components/FormGroupWrapper/FormGroupWrapper';
2
2
  import { default as React } from 'react';
3
3
  import { Props as LabelProps } from '../Label/Label';
4
- export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
4
+ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
5
5
  /**
6
6
  * Required id, used mainly to link the label to the field.
7
7
  */
@@ -76,7 +76,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
76
76
  */
77
77
  fullWidth?: boolean;
78
78
  };
79
- declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
79
+ declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
80
80
  /**
81
81
  * Required id, used mainly to link the label to the field.
82
82
  */
@@ -23,7 +23,6 @@ const meta: Meta<typeof TimeField> = {
23
23
  argTypes: {
24
24
  label: { control: "text" },
25
25
  value: { control: false },
26
- description: { control: "text" },
27
26
  helperText: { control: "text" },
28
27
  errorHelperText: { control: "text" },
29
28
  successHelperText: { control: "text" },
@@ -6,7 +6,7 @@ export type TimePickerValue = {
6
6
  minutes?: string;
7
7
  seconds?: string;
8
8
  };
9
- export type Props = Omit<FormGroupWrapperProps, "children" | "description" | "className" | "style" | "characterCounter" | "htmlForId"> & {
9
+ export type Props = Omit<FormGroupWrapperProps, "children" | "className" | "style" | "characterCounter" | "htmlForId"> & {
10
10
  /**
11
11
  * The controlled value: an object with optional `hours`, `minutes`, `seconds` keys, each as a 2-digit padded
12
12
  * string (e.g. `{ hours: "08", minutes: "34" }`). Use `null` for the initial empty state before any selection.
@@ -52,7 +52,7 @@ export type Props = Omit<FormGroupWrapperProps, "children" | "description" | "cl
52
52
  */
53
53
  "aria-label"?: string;
54
54
  };
55
- declare const TimePicker: React.ForwardRefExoticComponent<Omit<FormGroupWrapperProps, "className" | "style" | "children" | "description" | "htmlForId" | "characterCounter"> & {
55
+ declare const TimePicker: React.ForwardRefExoticComponent<Omit<FormGroupWrapperProps, "className" | "style" | "children" | "htmlForId" | "characterCounter"> & {
56
56
  /**
57
57
  * The controlled value: an object with optional `hours`, `minutes`, `seconds` keys, each as a 2-digit padded
58
58
  * string (e.g. `{ hours: "08", minutes: "34" }`). Use `null` for the initial empty state before any selection.
@@ -1,24 +1,19 @@
1
- export declare const Root: import('@emotion/styled').StyledComponent<{
2
- theme?: import('@emotion/react').Theme;
3
- as?: React.ElementType;
4
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
- export declare const TimelineAndBlockContainer: import('@emotion/styled').StyledComponent<{
6
- theme?: import('@emotion/react').Theme;
7
- as?: React.ElementType;
8
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
9
- export declare const LinesContainer: import('@emotion/styled').StyledComponent<{
10
- theme?: import('@emotion/react').Theme;
11
- as?: React.ElementType;
12
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1
+ export declare const Root: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
2
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
3
+ }> & string;
4
+ export declare const TimelineAndBlockContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
5
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
6
+ }> & string;
7
+ export declare const LinesContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
8
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
9
+ }> & string;
13
10
  /**
14
11
  * Overlays the plotting area only — the names column is excluded, so its width
15
12
  * matches the one every line positions its blocks against.
16
13
  */
17
- export declare const GridLines: import('@emotion/styled').StyledComponent<{
18
- theme?: import('@emotion/react').Theme;
19
- as?: React.ElementType;
20
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
21
- export declare const GridLine: import('@emotion/styled').StyledComponent<{
22
- theme?: import('@emotion/react').Theme;
23
- as?: React.ElementType;
24
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
14
+ export declare const GridLines: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
15
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
16
+ }> & string;
17
+ export declare const GridLine: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
18
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
19
+ }> & string;
@@ -1,31 +1,27 @@
1
- export declare const Root: import('@emotion/styled').StyledComponent<{
2
- theme?: import('@emotion/react').Theme;
3
- as?: React.ElementType;
4
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
- export declare const OneLineContainer: import('@emotion/styled').StyledComponent<{
6
- theme?: import('@emotion/react').Theme;
7
- as?: React.ElementType;
8
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
9
- export declare const GroupContainer: import('@emotion/styled').StyledComponent<{
10
- theme?: import('@emotion/react').Theme;
11
- as?: React.ElementType;
12
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1
+ export declare const Root: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
2
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
3
+ }> & string;
4
+ export declare const OneLineContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
5
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
6
+ }> & string;
7
+ export declare const GroupContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
8
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
9
+ }> & string;
13
10
  /**
14
11
  * One visual row of an overlap group. Its blocks are absolutely positioned
15
12
  * inside it, so blocks that don't overlap can share a row.
16
13
  */
17
- export declare const LaneContainer: import('@emotion/styled').StyledComponent<{
18
- theme?: import('@emotion/react').Theme;
19
- as?: React.ElementType;
20
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
21
- export declare const Overlay: import('@emotion/styled').StyledComponent<{
22
- theme?: import('@emotion/react').Theme;
23
- as?: React.ElementType;
24
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
25
- export declare const LineNow: import('@emotion/styled').StyledComponent<{
26
- theme?: import('@emotion/react').Theme;
27
- as?: React.ElementType;
28
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
29
- export declare const CustomHoverTooltip: import('@emotion/styled').StyledComponent<import('react-aria-components').TooltipProps & import('react').RefAttributes<HTMLDivElement> & {
30
- theme?: import('@emotion/react').Theme;
31
- }, {}, {}>;
14
+ export declare const LaneContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
15
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
16
+ }> & string;
17
+ export declare const Overlay: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
18
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
19
+ }> & string;
20
+ export declare const LineNow: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
21
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
22
+ }> & string;
23
+ export declare const CustomHoverTooltip: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react-aria-components').TooltipProps & import('react').RefAttributes<HTMLDivElement>, "style"> & {
24
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | ((values: import('react-aria-components').TooltipRenderProps & {
25
+ defaultStyle: import('react').CSSProperties;
26
+ }) => import('react').CSSProperties | undefined) | undefined;
27
+ }> & string & Omit<(props: import('react-aria-components').TooltipProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import('react').Component<any, {}, any>>;
@@ -1,4 +1,3 @@
1
- export declare const Root: import('@emotion/styled').StyledComponent<{
2
- theme?: import('@emotion/react').Theme;
3
- as?: React.ElementType;
4
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1
+ export declare const Root: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
2
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
3
+ }> & string;
@@ -1,16 +1,12 @@
1
- export declare const TimelineContainerStyle: import('@emotion/styled').StyledComponent<{
2
- theme?: import('@emotion/react').Theme;
3
- as?: React.ElementType;
4
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
- export declare const Hour: import('@emotion/styled').StyledComponent<{
6
- theme?: import('@emotion/react').Theme;
7
- as?: React.ElementType;
8
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
9
- export declare const HourDot: import('@emotion/styled').StyledComponent<{
10
- theme?: import('@emotion/react').Theme;
11
- as?: React.ElementType;
12
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
13
- export declare const Day: import('@emotion/styled').StyledComponent<{
14
- theme?: import('@emotion/react').Theme;
15
- as?: React.ElementType;
16
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1
+ export declare const TimelineContainerStyle: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
2
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
3
+ }> & string;
4
+ export declare const Hour: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
5
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
6
+ }> & string;
7
+ export declare const HourDot: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
8
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
9
+ }> & string;
10
+ export declare const Day: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
11
+ style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
12
+ }> & string;
@@ -312,9 +312,14 @@ export const HoursUnit: Story = {
312
312
  },
313
313
  ],
314
314
  },
315
- play: async ({ mount }) => {
315
+ play: async ({ canvasElement, mount }) => {
316
316
  MockDate.set("2024-01-01T08:00:00.000Z");
317
317
  await mount();
318
+ const canvas = within(canvasElement);
319
+
320
+ // 08:00 falls inside the range: one past overlay and one "now" line per line.
321
+ expect(canvas.getAllByTestId("timeline-past-overlay")).toHaveLength(2);
322
+ expect(canvas.getAllByTestId("timeline-now-line")).toHaveLength(2);
318
323
  },
319
324
  };
320
325
 
@@ -1533,6 +1538,38 @@ export const GridLinesMonth: Story = {
1533
1538
  ).toBeLessThanOrEqual(1);
1534
1539
  },
1535
1540
  };
1541
+
1542
+ /**
1543
+ * On a past day the whole range is behind us: nothing marks a boundary, so
1544
+ * neither the overlay nor the line is drawn.
1545
+ */
1546
+ export const NowAfterRange: Story = {
1547
+ args: HoursUnit.args,
1548
+ play: async ({ canvasElement, mount }) => {
1549
+ MockDate.set("2024-01-05T13:00:00.000Z");
1550
+ await mount();
1551
+ const canvas = within(canvasElement);
1552
+
1553
+ await expectNotPresent(() => canvas.queryByTestId("timeline-past-overlay"));
1554
+ await expectNotPresent(() => canvas.queryByTestId("timeline-now-line"));
1555
+ },
1556
+ };
1557
+
1558
+ /**
1559
+ * Same on a future day, where the clamped overlay used to collapse and the
1560
+ * line used to stick to the left edge.
1561
+ */
1562
+ export const NowBeforeRange: Story = {
1563
+ args: HoursUnit.args,
1564
+ play: async ({ canvasElement, mount }) => {
1565
+ MockDate.set("2023-12-28T13:00:00.000Z");
1566
+ await mount();
1567
+ const canvas = within(canvasElement);
1568
+
1569
+ await expectNotPresent(() => canvas.queryByTestId("timeline-past-overlay"));
1570
+ await expectNotPresent(() => canvas.queryByTestId("timeline-now-line"));
1571
+ },
1572
+ };
1536
1573
  ```
1537
1574
 
1538
1575
  ## Developer notes
@@ -13,7 +13,7 @@ export type YearMonthPickerValue = {
13
13
  */
14
14
  year?: string | null;
15
15
  };
16
- export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
16
+ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
17
17
  /**
18
18
  * Should the picker show year, month or both.
19
19
  */
@@ -85,7 +85,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
85
85
  */
86
86
  tallDropdown?: boolean;
87
87
  };
88
- declare const YearMonthPicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
88
+ declare const YearMonthPicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
89
89
  /**
90
90
  * Should the picker show year, month or both.
91
91
  */
@@ -30,7 +30,6 @@ const meta: Meta<typeof YearMonthPicker> = {
30
30
  argTypes: {
31
31
  label: { control: "text" },
32
32
  value: { control: false },
33
- description: { control: "text" },
34
33
  helperText: { control: "text" },
35
34
  errorHelperText: { control: "text" },
36
35
  successHelperText: { control: "text" },
@@ -1,3 +1,2 @@
1
1
  import { tokens } from './src/tokens.style.js';
2
- import { fontSize, lineHeight } from './src/fontSize.style.js';
3
- export { tokens, fontSize, lineHeight };
2
+ export { tokens };