@groupeactual/ui-kit 0.4.23 → 0.4.25
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/cjs/components/EmbbededNotification/EmbeddedNotification.d.ts +9 -0
- package/dist/cjs/components/EmbbededNotification/index.d.ts +1 -0
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/index.js +154 -111
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/EmbbededNotification/EmbeddedNotification.d.ts +9 -0
- package/dist/esm/components/EmbbededNotification/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/index.js +154 -112
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +28 -21
- package/package.json +3 -1
- package/src/components/EmbbededNotification/EmbeddedNotification.tsx +95 -0
- package/src/components/EmbbededNotification/index.ts +1 -0
- package/src/components/Form/TextField/TextField.tsx +1 -0
- package/src/components/Pagination/Pagination.tsx +7 -1
- package/src/components/index.ts +1 -0
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BoxProps } from '@mui/material';
|
|
3
|
+
interface Props extends BoxProps {
|
|
4
|
+
variant: 'warning' | 'error' | 'success' | 'infos';
|
|
5
|
+
title: string;
|
|
6
|
+
text?: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare const EmbeddedNotification: ({ title, text, variant, ...props }: Props) => JSX.Element;
|
|
9
|
+
export default EmbeddedNotification;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './EmbeddedNotification';
|
|
@@ -7,3 +7,4 @@ export { default as Accordion } from './Accordion';
|
|
|
7
7
|
export { default as IconProvider } from './Icon/Icon';
|
|
8
8
|
export { default as Pagination } from './Pagination';
|
|
9
9
|
export { default as Chip } from './Chip/Chip';
|
|
10
|
+
export { default as EmbeddedNotification } from './EmbbededNotification/EmbeddedNotification';
|
package/dist/cjs/index.js
CHANGED
|
@@ -52171,7 +52171,7 @@ var TextField = function (_a) {
|
|
|
52171
52171
|
setInternalValue(value);
|
|
52172
52172
|
}
|
|
52173
52173
|
}, [value]);
|
|
52174
|
-
return (jsxRuntime.jsx(MuiTextField, __assign$1({ id: label === placeholder ? 'text-field-mui' : 'test-field-ds', variant: "outlined", name: name, label: label, value: internalValue, placeholder: label === placeholder ? undefined : placeholder, FormHelperTextProps: { component: 'div' }, InputLabelProps: { shrink: label === placeholder ? undefined : true }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
|
|
52174
|
+
return (jsxRuntime.jsx(MuiTextField, __assign$1({ id: label === placeholder ? 'text-field-mui' : 'test-field-ds', className: "DsTextField", variant: "outlined", name: name, label: label, value: internalValue, placeholder: label === placeholder ? undefined : placeholder, FormHelperTextProps: { component: 'div' }, InputLabelProps: { shrink: label === placeholder ? undefined : true }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
|
|
52175
52175
|
setInternalValue(e.currentTarget.value);
|
|
52176
52176
|
if (onChange) {
|
|
52177
52177
|
onChange(e);
|
|
@@ -52321,7 +52321,13 @@ var Pagination = function (_a) {
|
|
|
52321
52321
|
setInternalLimit(limit);
|
|
52322
52322
|
}
|
|
52323
52323
|
}, [limit]);
|
|
52324
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Box$1, __assign$1({ display: "flex" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: "greyXDark", variant: "body1Bold", pt: "10px", pr: "16px" }, { children: totalString })), totalPages > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Divider$1, { orientation: "vertical", sx: { marginRight: '16px', color: 'greyXLight' } }), jsxRuntime.jsx(Select$1, __assign$1({ sx: {
|
|
52324
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Box$1, __assign$1({ display: "flex" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: "greyXDark", variant: "body1Bold", pt: "10px", pr: "16px" }, { children: totalString })), totalPages > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Divider$1, { orientation: "vertical", sx: { marginRight: '16px', color: 'greyXLight' } }), jsxRuntime.jsx(Select$1, __assign$1({ sx: {
|
|
52325
|
+
//@TODO replace by Select from ui-kit when ready
|
|
52326
|
+
height: '32px',
|
|
52327
|
+
width: '75px',
|
|
52328
|
+
fontSize: '14px',
|
|
52329
|
+
fontWeight: 400
|
|
52330
|
+
}, labelId: "select-label", id: "dac-select-label", value: internalLimit, onChange: function (event) {
|
|
52325
52331
|
var _a, _b;
|
|
52326
52332
|
setInternalLimit(Number((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value));
|
|
52327
52333
|
setLimit && setLimit(Number((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value));
|
|
@@ -52335,6 +52341,50 @@ var Chip = function (props) {
|
|
|
52335
52341
|
return jsxRuntime.jsx(ChipMUI, __assign$1({}, props));
|
|
52336
52342
|
};
|
|
52337
52343
|
|
|
52344
|
+
var faCircleExclamation = {
|
|
52345
|
+
prefix: 'fas',
|
|
52346
|
+
iconName: 'circle-exclamation',
|
|
52347
|
+
icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"]
|
|
52348
|
+
};
|
|
52349
|
+
var faCircleCheck = {
|
|
52350
|
+
prefix: 'fas',
|
|
52351
|
+
iconName: 'circle-check',
|
|
52352
|
+
icon: [512, 512, [61533, "check-circle"], "f058", "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"]
|
|
52353
|
+
};
|
|
52354
|
+
var faCircleInfo = {
|
|
52355
|
+
prefix: 'fas',
|
|
52356
|
+
iconName: 'circle-info',
|
|
52357
|
+
icon: [512, 512, ["info-circle"], "f05a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"]
|
|
52358
|
+
};
|
|
52359
|
+
var faCircleXmark = {
|
|
52360
|
+
prefix: 'fas',
|
|
52361
|
+
iconName: 'circle-xmark',
|
|
52362
|
+
icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
|
|
52363
|
+
};
|
|
52364
|
+
|
|
52365
|
+
var EmbeddedNotification = function (_a) {
|
|
52366
|
+
var title = _a.title, text = _a.text, _b = _a.variant, variant = _b === void 0 ? 'infos' : _b, props = __rest(_a, ["title", "text", "variant"]);
|
|
52367
|
+
var variantNotification = {
|
|
52368
|
+
warning: {
|
|
52369
|
+
color: 'orangeWarning',
|
|
52370
|
+
icon: faCircleExclamation
|
|
52371
|
+
},
|
|
52372
|
+
error: {
|
|
52373
|
+
color: 'redError',
|
|
52374
|
+
icon: faCircleXmark
|
|
52375
|
+
},
|
|
52376
|
+
success: {
|
|
52377
|
+
color: 'greenSuccess',
|
|
52378
|
+
icon: faCircleCheck
|
|
52379
|
+
},
|
|
52380
|
+
infos: {
|
|
52381
|
+
color: 'blueInfo',
|
|
52382
|
+
icon: faCircleInfo
|
|
52383
|
+
}
|
|
52384
|
+
};
|
|
52385
|
+
return (jsxRuntime.jsx(Box$1, __assign$1({ border: "1px solid", borderColor: variantNotification[variant].color, mt: "4px", p: "4px", borderRadius: "5px" }, props, { children: jsxRuntime.jsxs(Box$1, __assign$1({ display: "flex", alignItems: "center", pb: "2px" }, { children: [jsxRuntime.jsx(Box$1, __assign$1({ sx: { pl: '12px', pr: '16px', display: 'flex' } }, { children: jsxRuntime.jsx(Icon, { icon: variantNotification[variant].icon, color: variantNotification[variant].color }) })), jsxRuntime.jsxs(Box$1, { children: [jsxRuntime.jsx(Box$1, { children: jsxRuntime.jsx(Text, __assign$1({ align: "left", variant: "body1Bold", color: variantNotification[variant].color, display: "inline-block" }, { children: title })) }), text && (jsxRuntime.jsx(Box$1, { children: jsxRuntime.jsx(Text, __assign$1({ align: "left", variant: "body1Regular", color: "greyDark", display: "inline-block" }, { children: text })) }))] })] })) })));
|
|
52386
|
+
};
|
|
52387
|
+
|
|
52338
52388
|
/******************************************************************************
|
|
52339
52389
|
Copyright (c) Microsoft Corporation.
|
|
52340
52390
|
|
|
@@ -52701,122 +52751,114 @@ var getFontFamilies = function (themeName) {
|
|
|
52701
52751
|
/* eslint-disable @typescript-eslint/restrict-plus-operands */
|
|
52702
52752
|
var TextFieldCss = function (muiTokens) {
|
|
52703
52753
|
return {
|
|
52704
|
-
|
|
52754
|
+
MuiTextField: {
|
|
52705
52755
|
styleOverrides: {
|
|
52706
|
-
'@font-face': {
|
|
52707
|
-
fontFamily: 'Roboto'
|
|
52708
|
-
},
|
|
52709
52756
|
root: {
|
|
52710
|
-
|
|
52711
|
-
|
|
52712
|
-
marginLeft: '8px',
|
|
52713
|
-
marginRight: '8px',
|
|
52714
|
-
marginTop: '5px',
|
|
52715
|
-
lineHeight: '12px',
|
|
52716
|
-
color: muiTokens.palette.greyDark,
|
|
52717
|
-
'&.Mui-error': {
|
|
52718
|
-
color: muiTokens.palette.redError
|
|
52719
|
-
}
|
|
52720
|
-
}
|
|
52721
|
-
}
|
|
52722
|
-
},
|
|
52723
|
-
MuiOutlinedInput: {
|
|
52724
|
-
defaultProps: {},
|
|
52725
|
-
styleOverrides: {
|
|
52726
|
-
input: {
|
|
52727
|
-
fontSize: '14px',
|
|
52728
|
-
lineHeight: '18px',
|
|
52729
|
-
fontWeight: 400,
|
|
52730
|
-
padding: '12px 14px !important',
|
|
52731
|
-
height: '20px',
|
|
52732
|
-
color: muiTokens.palette.greyXDark,
|
|
52733
|
-
'&::placeholder': {
|
|
52734
|
-
color: "".concat(muiTokens.palette.greyDark, " !important"),
|
|
52735
|
-
opacity: 1 + ' !important',
|
|
52736
|
-
fontWeight: 400,
|
|
52737
|
-
lineHeight: '18px',
|
|
52738
|
-
fontSize: '14px'
|
|
52739
|
-
},
|
|
52740
|
-
'&.Mui-disabled': {
|
|
52741
|
-
backgroundColor: muiTokens.palette.greyXLight,
|
|
52742
|
-
color: muiTokens.palette.greyDark,
|
|
52743
|
-
borderColor: muiTokens.palette.greyLightDefaultborder,
|
|
52744
|
-
WebkitTextFillColor: muiTokens.palette.greyDark
|
|
52745
|
-
},
|
|
52746
|
-
'&#text-field-mui': {
|
|
52747
|
-
fontSize: '14px',
|
|
52748
|
-
lineHeight: '18px',
|
|
52749
|
-
fontWeight: 400,
|
|
52750
|
-
padding: '12px 14px !important',
|
|
52751
|
-
height: '20px',
|
|
52752
|
-
color: muiTokens.palette.greyXDark,
|
|
52753
|
-
'&::placeholder': {
|
|
52754
|
-
color: "".concat(muiTokens.palette.greyDark, " !important"),
|
|
52755
|
-
opacity: 1 + ' !important',
|
|
52757
|
+
'&.DsTextField': {
|
|
52758
|
+
'.MuiFormHelperText-root': {
|
|
52756
52759
|
fontWeight: 400,
|
|
52760
|
+
fontSize: '11px',
|
|
52761
|
+
marginLeft: '8px',
|
|
52762
|
+
marginRight: '8px',
|
|
52763
|
+
marginTop: '5px',
|
|
52764
|
+
lineHeight: '12px',
|
|
52765
|
+
color: muiTokens.palette.greyDark,
|
|
52766
|
+
'&.Mui-error': {
|
|
52767
|
+
color: muiTokens.palette.redError
|
|
52768
|
+
}
|
|
52769
|
+
},
|
|
52770
|
+
'.MuiOutlinedInput-input': {
|
|
52771
|
+
fontSize: '14px',
|
|
52757
52772
|
lineHeight: '18px',
|
|
52758
|
-
|
|
52773
|
+
fontWeight: 400,
|
|
52774
|
+
padding: '12px 14px !important',
|
|
52775
|
+
height: '20px',
|
|
52776
|
+
color: muiTokens.palette.greyXDark,
|
|
52777
|
+
'&::placeholder': {
|
|
52778
|
+
color: "".concat(muiTokens.palette.greyDark, " !important"),
|
|
52779
|
+
opacity: 1 + ' !important',
|
|
52780
|
+
fontWeight: 400,
|
|
52781
|
+
lineHeight: '18px',
|
|
52782
|
+
fontSize: '14px'
|
|
52783
|
+
},
|
|
52784
|
+
'&.Mui-disabled': {
|
|
52785
|
+
backgroundColor: muiTokens.palette.greyXLight,
|
|
52786
|
+
color: muiTokens.palette.greyDark,
|
|
52787
|
+
borderColor: muiTokens.palette.greyLightDefaultborder,
|
|
52788
|
+
WebkitTextFillColor: muiTokens.palette.greyDark
|
|
52789
|
+
},
|
|
52790
|
+
'&#text-field-mui': {
|
|
52791
|
+
fontSize: '14px',
|
|
52792
|
+
lineHeight: '18px',
|
|
52793
|
+
fontWeight: 400,
|
|
52794
|
+
padding: '12px 14px !important',
|
|
52795
|
+
height: '20px',
|
|
52796
|
+
color: muiTokens.palette.greyXDark,
|
|
52797
|
+
'&::placeholder': {
|
|
52798
|
+
color: "".concat(muiTokens.palette.greyDark, " !important"),
|
|
52799
|
+
opacity: 1 + ' !important',
|
|
52800
|
+
fontWeight: 400,
|
|
52801
|
+
lineHeight: '18px',
|
|
52802
|
+
fontSize: '14px'
|
|
52803
|
+
},
|
|
52804
|
+
'&.Mui-disabled': {
|
|
52805
|
+
backgroundColor: muiTokens.palette.greyXLight,
|
|
52806
|
+
color: muiTokens.palette.greyDark,
|
|
52807
|
+
borderColor: muiTokens.palette.greyLightDefaultborder,
|
|
52808
|
+
WebkitTextFillColor: muiTokens.palette.greyDark
|
|
52809
|
+
}
|
|
52810
|
+
}
|
|
52759
52811
|
},
|
|
52760
|
-
'
|
|
52761
|
-
|
|
52762
|
-
color: muiTokens.palette.greyDark,
|
|
52763
|
-
borderColor: muiTokens.palette.greyLightDefaultborder,
|
|
52764
|
-
WebkitTextFillColor: muiTokens.palette.greyDark
|
|
52765
|
-
}
|
|
52766
|
-
}
|
|
52767
|
-
},
|
|
52768
|
-
notchedOutline: {
|
|
52769
|
-
fontSize: '16px'
|
|
52770
|
-
},
|
|
52771
|
-
root: {
|
|
52772
|
-
padding: '0px !important',
|
|
52773
|
-
'&.Mui-error.MuiOutlinedInput-notchedOutline': {
|
|
52774
|
-
borderColor: muiTokens.palette.redError
|
|
52775
|
-
},
|
|
52776
|
-
'&.Mui-focused.MuiOutlinedInput-notchedOutline': {
|
|
52777
|
-
borderColor: muiTokens.palette.blueClickable
|
|
52778
|
-
},
|
|
52779
|
-
'&.Mui-hover.MuiOutlinedInput-notchedOutline': {
|
|
52780
|
-
borderColor: muiTokens.palette.greyDark
|
|
52781
|
-
},
|
|
52782
|
-
'.MuiSvgIcon-root': {
|
|
52783
|
-
marginLeft: '-22px'
|
|
52784
|
-
}
|
|
52785
|
-
}
|
|
52786
|
-
}
|
|
52787
|
-
},
|
|
52788
|
-
MuiInputLabel: {
|
|
52789
|
-
styleOverrides: {
|
|
52790
|
-
root: {
|
|
52791
|
-
fontWeight: 500,
|
|
52792
|
-
'&#text-field-mui-label': {
|
|
52793
|
-
fontSize: '14px',
|
|
52794
|
-
lineHeight: '18px',
|
|
52795
|
-
height: '16px',
|
|
52796
|
-
color: "".concat(muiTokens.palette.greyDark, " !important"),
|
|
52797
|
-
fontWeight: 400,
|
|
52798
|
-
marginTop: '-3px',
|
|
52799
|
-
'&.Mui-disabled': {
|
|
52800
|
-
color: muiTokens.palette.greyDark
|
|
52812
|
+
'.MuiOutlinedInput-notchedOutline': {
|
|
52813
|
+
fontSize: '16px'
|
|
52801
52814
|
},
|
|
52802
|
-
'
|
|
52803
|
-
|
|
52815
|
+
'.MuiOutlinedInput-root': {
|
|
52816
|
+
padding: '0px !important',
|
|
52817
|
+
'&.Mui-error.MuiOutlinedInput-notchedOutline': {
|
|
52818
|
+
borderColor: muiTokens.palette.redError
|
|
52819
|
+
},
|
|
52820
|
+
'&.Mui-focused.MuiOutlinedInput-notchedOutline': {
|
|
52821
|
+
borderColor: muiTokens.palette.blueClickable
|
|
52822
|
+
},
|
|
52823
|
+
'&.Mui-hover.MuiOutlinedInput-notchedOutline': {
|
|
52824
|
+
borderColor: muiTokens.palette.greyDark
|
|
52825
|
+
},
|
|
52826
|
+
'.MuiSvgIcon-root': {
|
|
52827
|
+
marginLeft: '-22px'
|
|
52828
|
+
}
|
|
52829
|
+
},
|
|
52830
|
+
'.MuiInputLabel-root': {
|
|
52804
52831
|
fontWeight: 500,
|
|
52805
|
-
|
|
52806
|
-
|
|
52807
|
-
|
|
52808
|
-
|
|
52809
|
-
|
|
52810
|
-
|
|
52811
|
-
|
|
52812
|
-
|
|
52813
|
-
|
|
52814
|
-
|
|
52815
|
-
|
|
52816
|
-
|
|
52817
|
-
|
|
52818
|
-
|
|
52819
|
-
|
|
52832
|
+
'&#text-field-mui-label': {
|
|
52833
|
+
fontSize: '14px',
|
|
52834
|
+
lineHeight: '18px',
|
|
52835
|
+
height: '16px',
|
|
52836
|
+
color: "".concat(muiTokens.palette.greyDark, " !important"),
|
|
52837
|
+
fontWeight: 400,
|
|
52838
|
+
marginTop: '-3px',
|
|
52839
|
+
'&.Mui-disabled': {
|
|
52840
|
+
color: muiTokens.palette.greyDark
|
|
52841
|
+
},
|
|
52842
|
+
'&.Mui-focused': {
|
|
52843
|
+
lineHeight: '16px',
|
|
52844
|
+
fontWeight: 500,
|
|
52845
|
+
fontSize: '16px',
|
|
52846
|
+
marginTop: 0,
|
|
52847
|
+
color: "".concat(muiTokens.palette.blueClickable, " !important"),
|
|
52848
|
+
transform: 'translate(14px, -7px) scale(0.75)'
|
|
52849
|
+
}
|
|
52850
|
+
},
|
|
52851
|
+
'&#text-field-ds-label': {
|
|
52852
|
+
fontSize: '16px',
|
|
52853
|
+
lineHeight: '16px',
|
|
52854
|
+
height: '16px',
|
|
52855
|
+
fontWeight: 500,
|
|
52856
|
+
transform: 'translate(14px, -7px) scale(0.75)',
|
|
52857
|
+
color: muiTokens.palette.greyXDark,
|
|
52858
|
+
'&.Mui-disabled': {
|
|
52859
|
+
color: muiTokens.palette.greyDark
|
|
52860
|
+
}
|
|
52861
|
+
}
|
|
52820
52862
|
}
|
|
52821
52863
|
}
|
|
52822
52864
|
}
|
|
@@ -53264,6 +53306,7 @@ exports.Checkbox = Checkbox;
|
|
|
53264
53306
|
exports.Chip = Chip;
|
|
53265
53307
|
exports.DesignSystemContext = DesignSystemContext;
|
|
53266
53308
|
exports.DesignSystemProvider = DesignSystemProvider;
|
|
53309
|
+
exports.EmbeddedNotification = EmbeddedNotification;
|
|
53267
53310
|
exports.IconProvider = Icon;
|
|
53268
53311
|
exports.Link = Link;
|
|
53269
53312
|
exports.Pagination = Pagination;
|