@sonardigital/carbon-ui 1.1.70 → 1.1.72

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/layout/accordions/Accordions.tsx +3 -3
  3. package/src/components/layout/index.ts +1 -0
  4. package/src/components/layout/scolling-cards/ScrollingCards.tsx +95 -0
  5. package/src/theme/constants/components.ts +76 -1
  6. package/src/theme/theme.ts +0 -76
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sonardigital/carbon-ui",
3
- "version": "1.1.70",
3
+ "version": "1.1.72",
4
4
  "description": "",
5
5
  "main": "src/index.ts",
6
6
  "files": [
package/src/components/layout/accordions/Accordions.tsx CHANGED
@@ -10,7 +10,7 @@ import { useState } from 'react';
10
10
  interface AccordionsProps {
11
11
  items: {
12
12
  title: string;
13
- descriptions: string;
13
+ description: string;
14
14
  }[];
15
15
  }
16
16
 
@@ -18,7 +18,7 @@ export function Accordions({ items }: AccordionsProps): React.ReactElement {
18
18
  const [index, setIndex] = useState(0);
19
19
 
20
20
  return (
21
- <Stack gap={2}>
21
+ <Stack spacing="sm">
22
22
  {items?.map((a, i) => (
23
23
  <Accordion
24
24
  key={i}
@@ -35,7 +35,7 @@ export function Accordions({ items }: AccordionsProps): React.ReactElement {
35
35
  variant="body2"
36
36
  style={{ fontWeight: 400, opacity: 0.6 }}
37
37
  >
38
- {a.descriptions}
38
+ {a.description}
39
39
  </Typography>
40
40
  </AccordionDetails>
41
41
  </Accordion>
package/src/components/layout/index.ts CHANGED
@@ -7,3 +7,4 @@ export * from './modal';
7
7
  export * from './bottom-navigation/BottomNavigation';
8
8
  export * from './multisteps';
9
9
  export * from './accordions/Accordions';
10
+ export * from './scolling-cards/ScrollingCards';
package/src/components/layout/scolling-cards/ScrollingCards.tsx ADDED
@@ -0,0 +1,95 @@
1
+ import {
2
+ ButtonBase,
3
+ Grid,
4
+ Stack,
5
+ Tooltip,
6
+ Typography,
7
+ useTheme,
8
+ } from '@mui/material';
9
+ import React from 'react';
10
+ import { Card } from '@mui/material';
11
+
12
+ // eslint-disable-next-line
13
+ interface ScrollingCardsProps {
14
+ items: {
15
+ title: string;
16
+ description: string;
17
+ color: string;
18
+ bgcolor: string;
19
+ tooltip: string;
20
+ icon: React.ReactNode;
21
+ onClick: () => void;
22
+ }[];
23
+ }
24
+
25
+ export function ScrollingCards({
26
+ items,
27
+ }: ScrollingCardsProps): React.ReactElement {
28
+ const theme = useTheme();
29
+
30
+ return (
31
+ <Grid container spacing={2}>
32
+ {items?.map(contact => (
33
+ <Grid size={{ xs: 12, sm: 4 }}>
34
+ <Tooltip title={contact.tooltip} sx={{ width: '100%' }}>
35
+ <ButtonBase
36
+ sx={{
37
+ width: '100%',
38
+ height: '100%',
39
+ borderRadius: 1.5,
40
+ }}
41
+ onClick={() => contact.onClick()}
42
+ >
43
+ <Card
44
+ sx={{
45
+ ...theme.components?.MuiCard?.defaultProps?.sx,
46
+ height: 230,
47
+ width: '100%',
48
+ cursor: 'pointer',
49
+ '&:hover': {
50
+ backgroundColor: contact.bgcolor,
51
+ },
52
+ }}
53
+ >
54
+ <Stack
55
+ sx={{
56
+ width: '100%',
57
+ flexDirection: 'column',
58
+ height: '100%',
59
+ alignItems: 'flex-start',
60
+ justifyContent: 'space-between',
61
+ boxSizing: 'border-box',
62
+ padding: 2.5,
63
+ }}
64
+ >
65
+ <Card
66
+ // eslint-disable-next-line
67
+ // @ts-ignore
68
+ variant="numeric"
69
+ sx={{
70
+ marginBottom: 1,
71
+ bgcolor: 'white',
72
+ }}
73
+ >
74
+ {contact.icon}
75
+ </Card>
76
+ <Stack sx={{ alignItems: 'flex-start' }}>
77
+ <Typography variant="h6" color={contact.color}>
78
+ {contact.title}
79
+ </Typography>
80
+ <Typography
81
+ variant="body1"
82
+ sx={{ textAlign: 'left' }}
83
+ >
84
+ {contact.description}
85
+ </Typography>
86
+ </Stack>
87
+ </Stack>
88
+ </Card>
89
+ </ButtonBase>
90
+ </Tooltip>
91
+ </Grid>
92
+ ))}
93
+ </Grid>
94
+ );
95
+ }
package/src/theme/constants/components.ts CHANGED
@@ -78,7 +78,82 @@ export const components: Components<
78
78
  spacing: 'xxs',
79
79
  },
80
80
  },
81
-
81
+ MuiContainer: {
82
+ variants: [
83
+ {
84
+ props: { className: 'xs' },
85
+ style: {
86
+ paddingTop: 22.5,
87
+ paddingBottom: 22.5,
88
+ paddingLeft: 22.5,
89
+ paddingRight: 22.5,
90
+ },
91
+ },
92
+ {
93
+ props: { className: 'sm' },
94
+ style: ({ theme }) => ({
95
+ paddingTop: 35,
96
+ paddingBottom: 35,
97
+ paddingLeft: 22.5,
98
+ paddingRight: 22.5,
99
+ [theme.breakpoints.down('sm')]: {
100
+ paddingTop: 30,
101
+ paddingBottom: 30,
102
+ },
103
+ }),
104
+ },
105
+ {
106
+ props: { className: 'md' },
107
+ style: ({ theme }) => ({
108
+ paddingTop: 50,
109
+ paddingBottom: 50,
110
+ paddingLeft: 22.5,
111
+ paddingRight: 22.5,
112
+ [theme.breakpoints.down('sm')]: {
113
+ paddingTop: 40,
114
+ paddingBottom: 40,
115
+ },
116
+ }),
117
+ },
118
+ {
119
+ props: { className: 'lg' },
120
+ style: ({ theme }) => ({
121
+ paddingTop: 80,
122
+ paddingBottom: 80,
123
+ paddingLeft: 22.5,
124
+ paddingRight: 22.5,
125
+ [theme.breakpoints.down('sm')]: {
126
+ paddingTop: 70,
127
+ paddingBottom: 70,
128
+ },
129
+ }),
130
+ },
131
+ {
132
+ props: { className: 'xl' },
133
+ style: ({ theme }) => ({
134
+ paddingTop: 100,
135
+ paddingBottom: 100,
136
+ paddingLeft: 22.5,
137
+ paddingRight: 22.5,
138
+ [theme.breakpoints.down('sm')]: {
139
+ paddingTop: 90,
140
+ paddingBottom: 90,
141
+ },
142
+ }),
143
+ },
144
+ ],
145
+ defaultProps: {
146
+ sx: {
147
+ paddingY: { xs: 11, md: 12.5 },
148
+ paddingX: { xs: 3 },
149
+ },
150
+ style: {
151
+ height: '100%',
152
+ alignItems: 'center',
153
+ justifyContent: 'center',
154
+ },
155
+ },
156
+ },
82
157
  MuiAutocomplete: {
83
158
  defaultProps: {
84
159
  slotProps: {
package/src/theme/theme.ts CHANGED
@@ -99,82 +99,6 @@ export const darkTheme = createTheme({
99
99
  },
100
100
  },
101
101
  },
102
- MuiContainer: {
103
- variants: [
104
- {
105
- props: { className: 'xs' },
106
- style: {
107
- paddingTop: 22.5,
108
- paddingBottom: 22.5,
109
- paddingLeft: 22.5,
110
- paddingRight: 22.5,
111
- },
112
- },
113
- {
114
- props: { className: 'sm' },
115
- style: ({ theme }: { theme: Theme }) => ({
116
- paddingTop: 35,
117
- paddingBottom: 35,
118
- paddingLeft: 22.5,
119
- paddingRight: 22.5,
120
- [theme.breakpoints.down('sm')]: {
121
- paddingTop: 30,
122
- paddingBottom: 30,
123
- },
124
- }),
125
- },
126
- {
127
- props: { className: 'md' },
128
- style: ({ theme }: { theme: Theme }) => ({
129
- paddingTop: 50,
130
- paddingBottom: 50,
131
- paddingLeft: 22.5,
132
- paddingRight: 22.5,
133
- [theme.breakpoints.down('sm')]: {
134
- paddingTop: 40,
135
- paddingBottom: 40,
136
- },
137
- }),
138
- },
139
- {
140
- props: { className: 'lg' },
141
- style: ({ theme }: { theme: Theme }) => ({
142
- paddingTop: 80,
143
- paddingBottom: 80,
144
- paddingLeft: 22.5,
145
- paddingRight: 22.5,
146
- [theme.breakpoints.down('sm')]: {
147
- paddingTop: 70,
148
- paddingBottom: 70,
149
- },
150
- }),
151
- },
152
- {
153
- props: { className: 'xl' },
154
- style: ({ theme }: { theme: Theme }) => ({
155
- paddingTop: 100,
156
- paddingBottom: 100,
157
- paddingLeft: 22.5,
158
- paddingRight: 22.5,
159
- [theme.breakpoints.down('sm')]: {
160
- paddingTop: 90,
161
- paddingBottom: 90,
162
- },
163
- }),
164
- },
165
- ],
166
- defaultProps: {
167
- sx: {
168
- paddingY: { xs: 11, md: 12.5 },
169
- paddingX: { xs: 3 },
170
- },
171
- style: {
172
- height: '100%',
173
- alignItems: 'center',
174
- justifyContent: 'center',
175
- },
176
- },
177
- },
178
102
  MuiAccordionDetails: {
179
103
  defaultProps: {
180
104
  sx: {