@moda/om 17.0.0 → 17.2.1

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/CHANGELOG.md +21 -0
  2. package/dist/index.cjs.js +19 -12
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.esm.js +19 -12
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/src/components/ColorSwatch/ColorSwatch.d.ts +2 -2
  7. package/dist/src/components/Expandable/Expandable.d.ts +1 -0
  8. package/package.json +1 -1
  9. package/src/components/ColorSwatch/ColorSwatch.tsx +17 -9
  10. package/src/components/Expandable/Expandable.tsx +6 -1
package/dist/src/components/ColorSwatch/ColorSwatch.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare type ColorSwatchProps = Omit<Omit<React.ButtonHTMLAttributes<HTML
11
11
  selected?: boolean;
12
12
  soldOut?: boolean;
13
13
  onSale?: boolean;
14
- onClick?(color: string): void;
15
- onMouseEnter?(color: string): void;
14
+ onClick?(color: string, title?: string): void;
15
+ onMouseEnter?(color: string, title?: string): void;
16
16
  };
17
17
  export declare const ColorSwatch: React.FC<ColorSwatchProps>;
package/dist/src/components/Expandable/Expandable.d.ts CHANGED
@@ -8,5 +8,6 @@ export declare type ExpandableProps = React.HTMLAttributes<HTMLDivElement> & {
8
8
  icon?: 'chevron' | 'plus-minus';
9
9
  virtual?: boolean;
10
10
  'data-testid'?: string;
11
+ onToggle?: () => void;
11
12
  };
12
13
  export declare const Expandable: React.FC<ExpandableProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moda/om",
3
- "version": "17.0.0",
3
+ "version": "17.2.1",
4
4
  "description": "Moda Operandi design system",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
package/src/components/ColorSwatch/ColorSwatch.tsx CHANGED
@@ -18,8 +18,8 @@ export type ColorSwatchProps = Omit<
18
18
  selected?: boolean;
19
19
  soldOut?: boolean;
20
20
  onSale?: boolean;
21
- onClick?(color: string): void;
22
- onMouseEnter?(color: string): void;
21
+ onClick?(color: string, title?: string): void;
22
+ onMouseEnter?(color: string, title?: string): void;
23
23
  };
24
24
 
25
25
  export const ColorSwatch: React.FC<ColorSwatchProps> = ({
@@ -35,26 +35,33 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
35
35
  onClick,
36
36
  onMouseEnter,
37
37
  disabled,
38
+ title,
38
39
  ...rest
39
40
  }) => {
40
41
  const handleClick = useCallback(
41
42
  (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
42
- onClick && onClick(color);
43
+ onClick && onClick(color, title);
43
44
  },
44
- [color, onClick]
45
+ [color, title, onClick]
45
46
  );
46
47
 
47
48
  const handleMouseEnter = useCallback(
48
49
  (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
49
- onMouseEnter && onMouseEnter(color);
50
+ onMouseEnter && onMouseEnter(color, title);
50
51
  },
51
- [color, onMouseEnter]
52
+ [color, title, onMouseEnter]
52
53
  );
53
54
 
54
- const backgroundColor = SKU_COLORS[color as SkuColor];
55
+ const backgroundColor = SKU_COLORS[color as SkuColor] ?? color;
56
+
57
+ const isWhite =
58
+ !backgroundUrl &&
59
+ (!backgroundColor.startsWith('#') ||
60
+ backgroundColor.toLowerCase() === '#fff' ||
61
+ backgroundColor.toLowerCase() === '#ffffff');
55
62
 
56
63
  const styles: React.CSSProperties = {
57
- backgroundColor: backgroundColor ?? color,
64
+ backgroundColor,
58
65
  ...(backgroundUrl
59
66
  ? {
60
67
  backgroundImage: `url(${backgroundUrl})`,
@@ -68,7 +75,7 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
68
75
  className={classNames(
69
76
  `ColorSwatch`,
70
77
  {
71
- 'ColorSwatch--light': !backgroundColor || backgroundColor === '#fff',
78
+ 'ColorSwatch--light': isWhite,
72
79
  'ColorSwatch--small': size === 'small',
73
80
  'ColorSwatch--hover': hover,
74
81
  'ColorSwatch--focus': focus,
@@ -81,6 +88,7 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
81
88
  onClick={handleClick}
82
89
  onMouseEnter={handleMouseEnter}
83
90
  disabled={disabled}
91
+ title={title}
84
92
  {...rest}
85
93
  >
86
94
  <div className="ColorSwatch__chip" style={styles} />
package/src/components/Expandable/Expandable.tsx CHANGED
@@ -13,6 +13,7 @@ export type ExpandableProps = React.HTMLAttributes<HTMLDivElement> & {
13
13
  icon?: 'chevron' | 'plus-minus';
14
14
  virtual?: boolean;
15
15
  'data-testid'?: string;
16
+ onToggle?: () => void;
16
17
  };
17
18
 
18
19
  export const Expandable: React.FC<ExpandableProps> = ({
@@ -25,6 +26,7 @@ export const Expandable: React.FC<ExpandableProps> = ({
25
26
  defaultExpanded = false,
26
27
  // eslint-disable-next-line @typescript-eslint/naming-convention
27
28
  expanded: __expanded__,
29
+ onToggle,
28
30
  ...rest
29
31
  }) => {
30
32
  const [expanded, setExpanded] = useState(defaultExpanded);
@@ -33,7 +35,10 @@ export const Expandable: React.FC<ExpandableProps> = ({
33
35
  if (__expanded__ != null && __expanded__ !== expanded) setExpanded(__expanded__);
34
36
  }, [expanded, __expanded__]);
35
37
 
36
- const handleClick = useCallback(() => setExpanded(expanded => !expanded), []);
38
+ const handleClick = useCallback(() => {
39
+ setExpanded(expanded => !expanded);
40
+ onToggle?.();
41
+ }, [onToggle]);
37
42
 
38
43
  return (
39
44
  <div