@am92/react-design-system 2.9.9 → 2.9.10

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 (10) hide show
  1. package/dist/Components/DsAutocomplete/DsAutocomplete.Types.js +1 -1
  2. package/dist/Components/DsBottomSheet/DsBottomSheet.Component.js +14 -8
  3. package/dist/Components/DsBottomSheet/DsBottomSheet.Types.d.ts +2 -0
  4. package/dist/Components/DsDialog/DsDialog.Component.js +23 -18
  5. package/dist/Components/DsDialog/DsDialog.Types.d.ts +2 -0
  6. package/dist/Components/DsDialogActions/DsDialogActions.Overrides.d.ts +1 -1
  7. package/dist/Components/DsDialogActions/DsDialogActions.Overrides.js +1 -1
  8. package/dist/Theme/componentOverrides.d.ts +1 -1
  9. package/dist/Theme/rules.js +1 -1
  10. package/package.json +1 -1
package/dist/Components/DsAutocomplete/DsAutocomplete.Types.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { DsRemixIcon } from '../DsRemixIcon';
3
3
  export const DsAutocompleteDefaultProps = {
4
4
  popupIcon: _jsx(DsRemixIcon, { className: "ri-arrow-down-s-line" }),
5
- clearIcon: _jsx(DsRemixIcon, { color: "secondary", className: "ri-close-line" }),
5
+ clearIcon: _jsx(DsRemixIcon, { className: "ri-close-fill" }),
6
6
  multiple: false,
7
7
  disableClearable: false,
8
8
  freeSolo: false,
package/dist/Components/DsBottomSheet/DsBottomSheet.Component.js CHANGED
@@ -23,7 +23,7 @@ export const DsBottomSheet = (inProps) => {
23
23
  onClose(event, 'backdropClick');
24
24
  }
25
25
  };
26
- const { kicker, title, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, ...DrawerProps } = props;
26
+ const { kicker, title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, ContainerProps, KickerProps, DescriptionProps, TitleProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, onClose, ...DrawerProps } = props;
27
27
  const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
28
28
  const isFlushed = primaryButtonText &&
29
29
  !secondaryButtonText &&
@@ -36,11 +36,12 @@ export const DsBottomSheet = (inProps) => {
36
36
  if (kicker) {
37
37
  accessibilityProps['aria-describedby'] = kicker;
38
38
  }
39
- return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: "bottom", PaperProps: {
39
+ return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: 'bottom', PaperProps: {
40
40
  ...PaperProps,
41
41
  sx: {
42
42
  background: 'transparent',
43
43
  maxHeight: 'var(--ds-rules-bottomSheetWorkingAreaHeight)',
44
+ // top: 'var(--ds-spacing-bitterCold)',
44
45
  ...PaperProps?.sx
45
46
  }
46
47
  }, onClose: handleDrawerClose, children: [showClose && (_jsx(DsIconButton, { onClick: handleCloseClick, ...CloseIconButtonProps, sx: {
@@ -52,17 +53,16 @@ export const DsBottomSheet = (inProps) => {
52
53
  p: 'var(--ds-spacing-glacial)',
53
54
  mb: 'var(--ds-spacing-bitterCold)',
54
55
  ...CloseIconButtonProps?.sx
55
- }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), _jsxs(DsPaper, { ...ContainerProps, sx: {
56
+ }, children: _jsx(DsRemixIcon, { className: 'ri-close-line', ...CloseIconProps }) })), _jsxs(DsPaper, { ...ContainerProps, sx: {
56
57
  minHeight: 0,
57
58
  display: 'flex',
58
59
  flexDirection: 'column',
59
60
  flexGrow: 1,
60
- pt: 'var(--ds-spacing-mild)',
61
+ pt: 'var(--ds-spacing-bitterCold)',
61
62
  borderTopLeftRadius: 'var(--ds-radius-bitterCold)',
62
63
  borderTopRightRadius: 'var(--ds-radius-bitterCold)',
63
- pb: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
64
64
  ...ContainerProps?.sx
65
- }, children: [kicker && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "text.tertiary", ...KickerProps, sx: {
65
+ }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'text.tertiary', ...KickerProps, sx: {
66
66
  px: 'var(--ds-spacing-bitterCold)',
67
67
  mb: 'var(--ds-spacing-quickFreeze)',
68
68
  textTransform: 'uppercase',
@@ -71,12 +71,18 @@ export const DsBottomSheet = (inProps) => {
71
71
  mb: 'var(--ds-spacing-zero)',
72
72
  px: 'var(--ds-spacing-bitterCold)',
73
73
  ...TitleProps?.sx
74
- }, children: title })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
74
+ }, children: title })), description && (_jsx(DsTypography, { variant: 'bodyRegularMedium', color: 'text.secondary', ...DescriptionProps, sx: {
75
+ px: 'var(--ds-spacing-bitterCold)',
76
+ mt: 'var(--ds-spacing-quickFreeze)',
77
+ ...DescriptionProps?.sx
78
+ }, children: description })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
75
79
  px: 'var(--ds-spacing-bitterCold)',
76
80
  marginTop: 'var(--ds-spacing-mild)',
77
81
  ...ContentProps?.sx
78
82
  }, children: children })), actionsAvailable && (_jsxs(DsDialogActions, { ...ActionsProps, sx: {
79
83
  px: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
84
+ mt: 'var(--ds-spacing-bitterCold)',
85
+ py: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
80
86
  ...ActionsProps?.sx
81
- }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "large", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "large", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] })] }));
87
+ }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: 'secondary', size: 'large', fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: 'large', fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] })] }));
82
88
  };
package/dist/Components/DsBottomSheet/DsBottomSheet.Types.d.ts CHANGED
@@ -10,11 +10,13 @@ import { DsTypographyProps } from '../DsTypography';
10
10
  export interface DsBottomSheetProps extends Omit<DsDrawerProps, 'title'> {
11
11
  kicker?: string;
12
12
  title?: string;
13
+ description?: string;
13
14
  showClose?: boolean;
14
15
  primaryButtonText?: DsButtonProps['children'];
15
16
  secondaryButtonText?: DsButtonProps['children'];
16
17
  ContainerProps?: DsPaperProps;
17
18
  KickerProps?: DsTypographyProps;
19
+ DescriptionProps?: DsTypographyProps;
18
20
  TitleProps?: DsDialogTitleProps;
19
21
  CloseIconButtonProps?: DsIconButtonProps;
20
22
  CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;
package/dist/Components/DsDialog/DsDialog.Component.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { DsDialogDefaultProps } from './DsDialog.Types';
2
3
  import { DsDialogTitle } from '../DsDialogTitle';
3
4
  import { Dialog } from '@mui/material';
4
5
  import { DsIconButton } from '../DsIconButton';
@@ -7,20 +8,15 @@ import { DsTypography } from '../DsTypography';
7
8
  import { DsDialogContent } from '../DsDialogContent';
8
9
  import { DsDialogActions } from '../DsDialogActions';
9
10
  import { DsButton } from '../DsButton';
10
- export const DsDialog = (props) => {
11
- const handleDialogClose = (event, reason) => {
12
- const { onClose } = props;
13
- if (typeof onClose === 'function') {
14
- onClose(event, reason);
15
- }
16
- };
11
+ export const DsDialog = inProps => {
12
+ const props = { ...DsDialogDefaultProps, ...inProps };
17
13
  const handleCloseClick = (event) => {
18
14
  const { onClose } = props;
19
15
  if (typeof onClose === 'function') {
20
16
  onClose(event, 'backdropClick');
21
17
  }
22
18
  };
23
- const { title, description, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
19
+ const { title, description, kicker, showClose, primaryButtonText, primaryButtonProps, secondaryButtonText, secondaryButtonProps, PaperProps, TitleProps, DescriptionProps, CloseIconButtonProps, CloseIconProps, KickerProps, ContentProps, ActionsProps, children, ...DialogProps } = props;
24
20
  const actionsAvailable = !!(primaryButtonText || secondaryButtonText);
25
21
  const accessibilityProps = {};
26
22
  const isFlushed = primaryButtonText &&
@@ -36,26 +32,28 @@ export const DsDialog = (props) => {
36
32
  return (_jsxs(Dialog, { keepMounted: true, ...accessibilityProps, ...DialogProps, PaperProps: {
37
33
  ...PaperProps,
38
34
  sx: {
39
- pb: isFlushed
40
- ? undefined
41
- : {
42
- xs: 'var(--ds-spacing-bitterCold)',
43
- md: 'var(--ds-spacing-warm)'
44
- },
45
35
  pt: {
46
36
  xs: 'var(--ds-spacing-mild)',
47
37
  md: 'var(--ds-spacing-warm)'
48
38
  },
49
39
  ...PaperProps?.sx
50
40
  }
51
- }, children: [title && (_jsx(DsDialogTitle, { ...TitleProps, sx: {
41
+ }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoTertiary)', ...KickerProps, sx: {
42
+ px: {
43
+ xs: 'var(--ds-spacing-bitterCold)',
44
+ md: 'var(--ds-spacing-warm)'
45
+ },
46
+ mb: 'var(--ds-spacing-quickFreeze)',
47
+ textTransform: 'uppercase',
48
+ ...KickerProps?.sx
49
+ }, children: kicker })), title && (_jsx(DsDialogTitle, { ...TitleProps, sx: {
52
50
  width: showClose ? 'calc(100% - 44px)' : '100%',
53
51
  px: {
54
52
  xs: 'var(--ds-spacing-bitterCold)',
55
53
  md: 'var(--ds-spacing-warm)'
56
54
  },
57
55
  ...TitleProps?.sx
58
- }, children: title })), description && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "text.secondary", ...DescriptionProps, sx: {
56
+ }, children: title })), description && (_jsx(DsTypography, { variant: 'bodyRegularMedium', color: 'var(--ds-colour-typoSecondary)', ...DescriptionProps, sx: {
59
57
  px: {
60
58
  xs: 'var(--ds-spacing-bitterCold)',
61
59
  md: 'var(--ds-spacing-warm)'
@@ -74,7 +72,7 @@ export const DsDialog = (props) => {
74
72
  md: 'var(--ds-spacing-warm)'
75
73
  },
76
74
  ...CloseIconButtonProps?.sx
77
- }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
75
+ }, children: _jsx(DsRemixIcon, { className: 'ri-close-line', ...CloseIconProps }) })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
78
76
  px: {
79
77
  xs: 'var(--ds-spacing-bitterCold)',
80
78
  md: 'var(--ds-spacing-warm)'
@@ -88,6 +86,13 @@ export const DsDialog = (props) => {
88
86
  xs: 'var(--ds-spacing-bitterCold)',
89
87
  md: 'var(--ds-spacing-warm)'
90
88
  },
89
+ py: isFlushed
90
+ ? undefined
91
+ : {
92
+ xs: 'var(--ds-spacing-bitterCold)',
93
+ md: 'var(--ds-spacing-warm)'
94
+ },
95
+ mt: 'var(--ds-spacing-glacial)',
91
96
  ...ActionsProps?.sx
92
- }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "large", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "large", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
97
+ }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: 'secondary', size: 'medium', fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: 'medium', fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
93
98
  };
package/dist/Components/DsDialog/DsDialog.Types.d.ts CHANGED
@@ -9,12 +9,14 @@ import { DsButtonProps } from '../DsButton';
9
9
  export interface DsDialogProps extends DialogProps {
10
10
  title?: string;
11
11
  description?: string;
12
+ kicker?: string;
12
13
  showClose?: boolean;
13
14
  primaryButtonText?: DsButtonProps['children'];
14
15
  primaryButtonProps?: Omit<DsButtonProps, 'ref'>;
15
16
  secondaryButtonText?: DsButtonProps['children'];
16
17
  secondaryButtonProps?: Omit<DsButtonProps, 'ref'>;
17
18
  TitleProps?: DsDialogTitleProps;
19
+ KickerProps?: DsTypographyProps;
18
20
  DescriptionProps?: DsTypographyProps;
19
21
  CloseIconButtonProps?: DsIconButtonProps;
20
22
  CloseIconProps?: Omit<DsRemixIconProps, 'ref'>;
package/dist/Components/DsDialogActions/DsDialogActions.Overrides.d.ts CHANGED
@@ -2,7 +2,7 @@ export declare const DsDialogActionsOverrides: {
2
2
  MuiDialogActions: {
3
3
  styleOverrides: {
4
4
  root: {
5
- marginTop: string;
5
+ boxShadow: string;
6
6
  padding: string;
7
7
  '> *': {
8
8
  flex: number;
package/dist/Components/DsDialogActions/DsDialogActions.Overrides.js CHANGED
@@ -2,7 +2,7 @@ export const DsDialogActionsOverrides = {
2
2
  MuiDialogActions: {
3
3
  styleOverrides: {
4
4
  root: {
5
- marginTop: 'var(--ds-spacing-mild)',
5
+ boxShadow: 'var(--ds-elevation-1)',
6
6
  padding: 'var(--ds-spacing-zero)',
7
7
  '> *': {
8
8
  flex: 1
package/dist/Theme/componentOverrides.d.ts CHANGED
@@ -1084,7 +1084,7 @@ declare const componentOverrides: {
1084
1084
  MuiDialogActions: {
1085
1085
  styleOverrides: {
1086
1086
  root: {
1087
- marginTop: string;
1087
+ boxShadow: string;
1088
1088
  padding: string;
1089
1089
  '> *': {
1090
1090
  flex: number;
package/dist/Theme/rules.js CHANGED
@@ -8,7 +8,7 @@ const dsRules = {
8
8
  drawerWidth: '240px',
9
9
  drawerMiniWidth: '56px',
10
10
  dialogMdMaxWidth: '600px',
11
- bottomSheetWorkingAreaHeight: '68vh',
11
+ bottomSheetWorkingAreaHeight: 'calc(100vh - var(--ds-spacing-bitterCold))',
12
12
  avatarSSize: '24px',
13
13
  avatarMSize: '32px',
14
14
  avatarLSize: '40px',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@am92/react-design-system",
3
- "version": "2.9.9",
3
+ "version": "2.9.10",
4
4
  "description": "ReactJS Design System using Material UI",
5
5
  "sideEffects": false,
6
6
  "types": "dist/index.d.ts",