mautourco-components 0.2.75 → 0.2.76

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/dist/components/molecules/FeatureRow/FeatureRow.css +4 -0
  2. package/dist/components/molecules/FeatureRow/FeatureRow.d.ts +2 -0
  3. package/dist/components/molecules/FeatureRow/FeatureRow.js +10 -4
  4. package/package.json +1 -1
  5. package/src/components/molecules/FeatureRow/FeatureRow.css +4 -0
  6. package/src/components/molecules/FeatureRow/FeatureRow.tsx +14 -3
package/dist/components/molecules/FeatureRow/FeatureRow.css CHANGED
@@ -53,4 +53,8 @@
53
53
  color: var(--color-text-default, #262626);
54
54
  letter-spacing: var(--font-tracking-tracking-normal, 0px);
55
55
  white-space: nowrap;
56
+ }
57
+
58
+ .feature-row__value-text--not-applicable {
59
+ color: var(--color-messaging-danger-foreground, #a01414);
56
60
  }
package/dist/components/molecules/FeatureRow/FeatureRow.d.ts CHANGED
@@ -10,6 +10,8 @@ export interface FeatureRowProps {
10
10
  icon?: IconName;
11
11
  /** Size of the icon */
12
12
  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
13
+ /** State variant: 'not-applicable' applies error/danger styling to the value */
14
+ state?: 'default' | 'not-applicable';
13
15
  /** Additional CSS classes */
14
16
  className?: string;
15
17
  }
package/dist/components/molecules/FeatureRow/FeatureRow.js CHANGED
@@ -1,11 +1,17 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import Icon from '../../atoms/Icon/Icon';
3
2
  import Divider from '../../atoms/Divider/Divider';
3
+ import Icon from '../../atoms/Icon/Icon';
4
4
  import './FeatureRow.css';
5
5
  var FeatureRow = function (_a) {
6
- var label = _a.label, value = _a.value, icon = _a.icon, _b = _a.iconSize, iconSize = _b === void 0 ? 'sm' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
6
+ var label = _a.label, value = _a.value, icon = _a.icon, _b = _a.iconSize, iconSize = _b === void 0 ? 'sm' : _b, _c = _a.state, state = _c === void 0 ? 'default' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
7
7
  var baseClass = 'feature-row';
8
- var classes = [baseClass, className].filter(Boolean).join(' ');
9
- return (_jsxs("div", { className: classes, children: [_jsx("div", { className: "feature-row__label", children: _jsx("span", { className: "feature-row__label-text", children: label }) }), _jsx(Divider, { orientation: "vertical", className: "feature-row__divider" }), _jsxs("div", { className: "feature-row__value", children: [icon && (_jsx(Icon, { name: icon, size: iconSize, className: "feature-row__value-icon" })), _jsx("span", { className: "feature-row__value-text", children: value })] })] }));
8
+ var classes = [
9
+ baseClass,
10
+ state === 'not-applicable' ? "".concat(baseClass, "--not-applicable") : '',
11
+ className,
12
+ ]
13
+ .filter(Boolean)
14
+ .join(' ');
15
+ return (_jsxs("div", { className: classes, children: [_jsx("div", { className: "feature-row__label", children: _jsx("span", { className: "feature-row__label-text", children: label }) }), _jsx(Divider, { orientation: "vertical", className: "feature-row__divider" }), _jsxs("div", { className: "feature-row__value", children: [icon && (_jsx(Icon, { name: icon, size: iconSize, className: "feature-row__value-icon" })), _jsx("span", { className: "feature-row__value-text ".concat(state === 'not-applicable' ? 'feature-row__value-text--not-applicable' : '').trim(), children: value })] })] }));
10
16
  };
11
17
  export default FeatureRow;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.75",
3
+ "version": "0.2.76",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/molecules/FeatureRow/FeatureRow.css CHANGED
@@ -51,3 +51,7 @@
51
51
  white-space: nowrap;
52
52
  }
53
53
 
54
+ .feature-row__value-text--not-applicable {
55
+ color: var(--color-messaging-danger-foreground, #a01414);
56
+ }
57
+
package/src/components/molecules/FeatureRow/FeatureRow.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import Icon, { IconName } from '../../atoms/Icon/Icon';
3
2
  import Divider from '../../atoms/Divider/Divider';
3
+ import Icon, { IconName } from '../../atoms/Icon/Icon';
4
4
  import './FeatureRow.css';
5
5
 
6
6
  export interface FeatureRowProps {
@@ -12,6 +12,8 @@ export interface FeatureRowProps {
12
12
  icon?: IconName;
13
13
  /** Size of the icon */
14
14
  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
15
+ /** State variant: 'not-applicable' applies error/danger styling to the value */
16
+ state?: 'default' | 'not-applicable';
15
17
  /** Additional CSS classes */
16
18
  className?: string;
17
19
  }
@@ -21,10 +23,17 @@ const FeatureRow: React.FC<FeatureRowProps> = ({
21
23
  value,
22
24
  icon,
23
25
  iconSize = 'sm',
26
+ state = 'default',
24
27
  className = '',
25
28
  }) => {
26
29
  const baseClass = 'feature-row';
27
- const classes = [baseClass, className].filter(Boolean).join(' ');
30
+ const classes = [
31
+ baseClass,
32
+ state === 'not-applicable' ? `${baseClass}--not-applicable` : '',
33
+ className,
34
+ ]
35
+ .filter(Boolean)
36
+ .join(' ');
28
37
 
29
38
  return (
30
39
  <div className={classes}>
@@ -36,7 +45,9 @@ const FeatureRow: React.FC<FeatureRowProps> = ({
36
45
  {icon && (
37
46
  <Icon name={icon} size={iconSize} className="feature-row__value-icon" />
38
47
  )}
39
- <span className="feature-row__value-text">{value}</span>
48
+ <span className={`feature-row__value-text ${state === 'not-applicable' ? 'feature-row__value-text--not-applicable' : ''}`.trim()}>
49
+ {value}
50
+ </span>
40
51
  </div>
41
52
  </div>
42
53
  );