@itcase/ui 1.9.8 → 1.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 (5) hide show
  1. package/dist/cjs/components/Warning.js +36 -10
  2. package/dist/components/Warning.js +36 -10
  3. package/dist/types/components/Warning/Warning.appearance.d.ts +22 -0
  4. package/dist/types/components/Warning/appearance/warningShape.d.ts +25 -0
  5. package/package.json +1 -1
package/dist/cjs/components/Warning.js CHANGED
@@ -3,22 +3,18 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var React = require('react');
5
5
  var clsx = require('clsx');
6
- var Icon = require('../../Icon_cjs_NpWSQezS.js');
7
- var Text = require('../../Text_cjs_BhnGHF2T.js');
8
6
  var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
9
7
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
10
8
  var useStyles = require('../hooks/useStyles/useStyles.js');
9
+ var Icon = require('../../Icon_cjs_NpWSQezS.js');
10
+ var Text = require('../../Text_cjs_BhnGHF2T.js');
11
11
  var _default = require('@itcase/icons/default');
12
- require('react-inlinesvg');
13
- require('../hoc/urlWithAssetPrefix.js');
14
- require('@itcase/common');
15
- require('../context/UrlAssetPrefix.js');
16
- require('../../Link_cjs_qKXVfU8e.js');
17
12
  require('lodash/camelCase');
18
13
  require('lodash/castArray');
19
14
  require('lodash/upperFirst');
20
15
  require('../context/Notifications.js');
21
16
  require('uuid');
17
+ require('@itcase/common');
22
18
  require('../context/UIContext.js');
23
19
  require('../hooks/useMediaQueries/useMediaQueries.js');
24
20
  require('react-responsive');
@@ -26,6 +22,10 @@ require('../utils/setViewportProperty.js');
26
22
  require('../hooks.js');
27
23
  require('../hooks/useStyles/styleAttributes.js');
28
24
  require('lodash/maxBy');
25
+ require('react-inlinesvg');
26
+ require('../hoc/urlWithAssetPrefix.js');
27
+ require('../context/UrlAssetPrefix.js');
28
+ require('../../Link_cjs_qKXVfU8e.js');
29
29
 
30
30
  const warningAppearanceAccent = {
31
31
  accentMutedPrimary: {
@@ -96,6 +96,31 @@ const warningAppearanceInfo = {
96
96
  },
97
97
  };
98
98
 
99
+ const warningAppearanceShape = {
100
+ circular: {
101
+ shape: 'circular',
102
+ },
103
+ rounded: {
104
+ shape: 'rounded',
105
+ },
106
+ roundedXL: {
107
+ shape: 'rounded',
108
+ shapeStrength: '2m',
109
+ },
110
+ roundedL: {
111
+ shape: 'rounded',
112
+ shapeStrength: '1_5m',
113
+ },
114
+ roundedM: {
115
+ shape: 'rounded',
116
+ shapeStrength: '1m',
117
+ },
118
+ roundedS: {
119
+ shape: 'rounded',
120
+ shapeStrength: '0_5m',
121
+ },
122
+ };
123
+
99
124
  const warningAppearanceSize = {
100
125
  sizeL: {
101
126
  size: 'l',
@@ -151,6 +176,7 @@ const warningAppearance = {
151
176
  ...warningAppearanceInfo,
152
177
  ...warningAppearanceStyle,
153
178
  ...warningAppearanceSize,
179
+ ...warningAppearanceShape,
154
180
  };
155
181
 
156
182
  const warningConfig = {
@@ -160,14 +186,14 @@ const warningConfig = {
160
186
  },
161
187
  };
162
188
  function Warning(props) {
163
- const { className, appearance, label, description, shape, isSkeleton } = props;
189
+ const { appearance, className, label, description, isSkeleton } = props;
164
190
  const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, warningConfig);
165
191
  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
166
- const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, sizeClass, } = propsGenerator;
192
+ const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
167
193
  // @ts-ignore
168
194
  const { styles: warningStyles } = useStyles.useStyles(props);
169
195
  const [isVisible, setIsVisible] = React.useState(true);
170
- return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shape && `warning_shape_${shape}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(Text.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
196
+ return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(Text.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
171
197
  }
172
198
 
173
199
  exports.Warning = Warning;
package/dist/components/Warning.js CHANGED
@@ -1,22 +1,18 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useState, Fragment } from 'react';
3
3
  import clsx from 'clsx';
4
- import { I as Icon } from '../Icon_es_CJuX1p1_.js';
5
- import { T as Text } from '../Text_es_C1kfpokr.js';
6
4
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
7
5
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
8
6
  import { useStyles } from '../hooks/useStyles/useStyles.js';
7
+ import { I as Icon } from '../Icon_es_CJuX1p1_.js';
8
+ import { T as Text } from '../Text_es_C1kfpokr.js';
9
9
  import { icons16 } from '@itcase/icons/default';
10
- import 'react-inlinesvg';
11
- import '../hoc/urlWithAssetPrefix.js';
12
- import '@itcase/common';
13
- import '../context/UrlAssetPrefix.js';
14
- import '../Link_es_P2b6ya7P.js';
15
10
  import 'lodash/camelCase';
16
11
  import 'lodash/castArray';
17
12
  import 'lodash/upperFirst';
18
13
  import '../context/Notifications.js';
19
14
  import 'uuid';
15
+ import '@itcase/common';
20
16
  import '../context/UIContext.js';
21
17
  import '../hooks/useMediaQueries/useMediaQueries.js';
22
18
  import 'react-responsive';
@@ -24,6 +20,10 @@ import '../utils/setViewportProperty.js';
24
20
  import '../hooks.js';
25
21
  import '../hooks/useStyles/styleAttributes.js';
26
22
  import 'lodash/maxBy';
23
+ import 'react-inlinesvg';
24
+ import '../hoc/urlWithAssetPrefix.js';
25
+ import '../context/UrlAssetPrefix.js';
26
+ import '../Link_es_P2b6ya7P.js';
27
27
 
28
28
  const warningAppearanceAccent = {
29
29
  accentMutedPrimary: {
@@ -94,6 +94,31 @@ const warningAppearanceInfo = {
94
94
  },
95
95
  };
96
96
 
97
+ const warningAppearanceShape = {
98
+ circular: {
99
+ shape: 'circular',
100
+ },
101
+ rounded: {
102
+ shape: 'rounded',
103
+ },
104
+ roundedXL: {
105
+ shape: 'rounded',
106
+ shapeStrength: '2m',
107
+ },
108
+ roundedL: {
109
+ shape: 'rounded',
110
+ shapeStrength: '1_5m',
111
+ },
112
+ roundedM: {
113
+ shape: 'rounded',
114
+ shapeStrength: '1m',
115
+ },
116
+ roundedS: {
117
+ shape: 'rounded',
118
+ shapeStrength: '0_5m',
119
+ },
120
+ };
121
+
97
122
  const warningAppearanceSize = {
98
123
  sizeL: {
99
124
  size: 'l',
@@ -149,6 +174,7 @@ const warningAppearance = {
149
174
  ...warningAppearanceInfo,
150
175
  ...warningAppearanceStyle,
151
176
  ...warningAppearanceSize,
177
+ ...warningAppearanceShape,
152
178
  };
153
179
 
154
180
  const warningConfig = {
@@ -158,14 +184,14 @@ const warningConfig = {
158
184
  },
159
185
  };
160
186
  function Warning(props) {
161
- const { className, appearance, label, description, shape, isSkeleton } = props;
187
+ const { appearance, className, label, description, isSkeleton } = props;
162
188
  const appearanceConfig = useAppearanceConfig(appearance, warningConfig);
163
189
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
164
- const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, sizeClass, } = propsGenerator;
190
+ const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
165
191
  // @ts-ignore
166
192
  const { styles: warningStyles } = useStyles(props);
167
193
  const [isVisible, setIsVisible] = useState(true);
168
- return (jsx(Fragment, { children: isVisible && (jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shape && `warning_shape_${shape}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: 'warning__content', children: [label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsx(Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
194
+ return (jsx(Fragment, { children: isVisible && (jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: 'warning__content', children: [label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsx(Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
169
195
  }
170
196
 
171
197
  export { Warning, warningAppearance, warningConfig };
package/dist/types/components/Warning/Warning.appearance.d.ts CHANGED
@@ -1,4 +1,26 @@
1
1
  export declare const warningAppearance: {
2
+ circular: {
3
+ shape: string;
4
+ };
5
+ rounded: {
6
+ shape: string;
7
+ };
8
+ roundedXL: {
9
+ shape: string;
10
+ shapeStrength: string;
11
+ };
12
+ roundedL: {
13
+ shape: string;
14
+ shapeStrength: string;
15
+ };
16
+ roundedM: {
17
+ shape: string;
18
+ shapeStrength: string;
19
+ };
20
+ roundedS: {
21
+ shape: string;
22
+ shapeStrength: string;
23
+ };
2
24
  sizeL: {
3
25
  size: string;
4
26
  labelTextSize: string;
package/dist/types/components/Warning/appearance/warningShape.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ declare const warningAppearanceShape: {
2
+ circular: {
3
+ shape: string;
4
+ };
5
+ rounded: {
6
+ shape: string;
7
+ };
8
+ roundedXL: {
9
+ shape: string;
10
+ shapeStrength: string;
11
+ };
12
+ roundedL: {
13
+ shape: string;
14
+ shapeStrength: string;
15
+ };
16
+ roundedM: {
17
+ shape: string;
18
+ shapeStrength: string;
19
+ };
20
+ roundedS: {
21
+ shape: string;
22
+ shapeStrength: string;
23
+ };
24
+ };
25
+ export { warningAppearanceShape };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.9.8",
3
+ "version": "1.9.10",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",