@eyesee/ui-components 0.15.0 → 0.15.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.
|
@@ -1,13 +1,124 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* @callback EditImageIconClickHandler
|
|
3
|
+
* @returns {void}
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
7
|
+
*
|
|
8
|
+
* @typedef {object} EditImageIconProps
|
|
9
|
+
*
|
|
10
|
+
* @property {import('./constants').IconSize} [iconSize='m']
|
|
11
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
12
|
+
* @property {EditImageIconClickHandler} [onClick=null]
|
|
13
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
14
|
+
* @property {string} [fill='none']
|
|
15
|
+
* SVG fill colour. Default `'none'`.
|
|
16
|
+
* @property {string} [strokeColor='currentColor']
|
|
17
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
18
|
+
* @property {string} [strokeColorOnHover]
|
|
19
|
+
* Stroke colour applied on hover.
|
|
20
|
+
* @property {string} [fillOnHover]
|
|
21
|
+
* Fill colour applied on hover.
|
|
22
|
+
* @property {boolean} [disabled]
|
|
23
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
24
|
+
* @property {boolean} [animated=false]
|
|
25
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
26
|
+
* @property {number} [viewBoxSize]
|
|
27
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
28
|
+
*
|
|
29
|
+
* @see {@link IconProps}
|
|
30
|
+
*/
|
|
31
|
+
/**
|
|
32
|
+
* SVG edit image icon (framed landscape photo with a pencil badge)
|
|
33
|
+
* used for editing images or other media.
|
|
34
|
+
* Source: Design System Figma `icon-imageedit`, `size=xxl` (32×32) variant.
|
|
35
|
+
*
|
|
36
|
+
* ## Props
|
|
37
|
+
*
|
|
38
|
+
* All optional.
|
|
39
|
+
*
|
|
40
|
+
* **iconSize** `'s' | 'm' | 'l' | 'xl' | 'xxl' | '4xl'` — default `'m'`
|
|
41
|
+
* T-shirt size token. Controls `width`/`height` and stroke width.
|
|
42
|
+
*
|
|
43
|
+
* **onClick** `() => void` — default `null`
|
|
44
|
+
* Click handler. When set the icon is clickable.
|
|
45
|
+
*
|
|
46
|
+
* **fill** `string` — default `'none'`
|
|
47
|
+
* SVG fill colour.
|
|
3
48
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
49
|
+
* **strokeColor** `string` — default `'currentColor'`
|
|
50
|
+
* SVG stroke colour. Accepts any valid CSS colour.
|
|
51
|
+
*
|
|
52
|
+
* **strokeColorOnHover** `string` — no default
|
|
53
|
+
* Stroke colour applied on hover.
|
|
54
|
+
*
|
|
55
|
+
* **fillOnHover** `string` — no default
|
|
56
|
+
* Fill colour applied on hover.
|
|
57
|
+
*
|
|
58
|
+
* **disabled** `boolean` — no default
|
|
59
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
60
|
+
*
|
|
61
|
+
* **animated** `boolean` — default `false`
|
|
62
|
+
* When `true`, applies the spinner animation class.
|
|
63
|
+
*
|
|
64
|
+
* **viewBoxSize** `number` — no default
|
|
65
|
+
* Custom viewBox size for icons that are not 32×32. Omit → `0 0 32 32`.
|
|
66
|
+
*
|
|
67
|
+
* @param {EditImageIconProps} props
|
|
68
|
+
* @returns {import('react').ReactElement}
|
|
69
|
+
*
|
|
70
|
+
* @example <caption>Playground</caption>
|
|
71
|
+
* import { EditImageIcon } from '@eyesee/ui-components/icons';
|
|
72
|
+
*
|
|
73
|
+
* <EditImageIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
74
|
+
*
|
|
75
|
+
* @example <caption>Gallery</caption>
|
|
76
|
+
* import { EditImageIcon } from '@eyesee/ui-components/icons';
|
|
77
|
+
*
|
|
78
|
+
* <EditImageIcon iconSize="s" strokeColor="#333333" fill="none" />
|
|
79
|
+
* <EditImageIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
80
|
+
* <EditImageIcon iconSize="l" strokeColor="#333333" fill="none" />
|
|
12
81
|
*/
|
|
13
82
|
export const EditImageIcon: (props: IconProps) => import("react").JSX.Element;
|
|
83
|
+
export type EditImageIconClickHandler = () => void;
|
|
84
|
+
/**
|
|
85
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
86
|
+
*/
|
|
87
|
+
export type EditImageIconProps = {
|
|
88
|
+
/**
|
|
89
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
90
|
+
*/
|
|
91
|
+
iconSize?: import("./constants").IconSize;
|
|
92
|
+
/**
|
|
93
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
94
|
+
*/
|
|
95
|
+
onClick?: EditImageIconClickHandler;
|
|
96
|
+
/**
|
|
97
|
+
* SVG fill colour. Default `'none'`.
|
|
98
|
+
*/
|
|
99
|
+
fill?: string;
|
|
100
|
+
/**
|
|
101
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
102
|
+
*/
|
|
103
|
+
strokeColor?: string;
|
|
104
|
+
/**
|
|
105
|
+
* Stroke colour applied on hover.
|
|
106
|
+
*/
|
|
107
|
+
strokeColorOnHover?: string;
|
|
108
|
+
/**
|
|
109
|
+
* Fill colour applied on hover.
|
|
110
|
+
*/
|
|
111
|
+
fillOnHover?: string;
|
|
112
|
+
/**
|
|
113
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
114
|
+
*/
|
|
115
|
+
disabled?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
118
|
+
*/
|
|
119
|
+
animated?: boolean;
|
|
120
|
+
/**
|
|
121
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
122
|
+
*/
|
|
123
|
+
viewBoxSize?: number;
|
|
124
|
+
};
|
|
@@ -3,7 +3,7 @@ import { createIcon as t } from "./createIcon.js";
|
|
|
3
3
|
const L = t(({ strokeColor: C, strokeWidth: o }) => /* @__PURE__ */ r(
|
|
4
4
|
"path",
|
|
5
5
|
{
|
|
6
|
-
d: "M20
|
|
6
|
+
d: "M20 10.6667H20.0133M16.6667 28H8C6.93913 28 5.92172 27.5786 5.17157 26.8284C4.42143 26.0783 4 25.0609 4 24V8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4H24C25.0609 4 26.0783 4.42143 26.8284 5.17157C27.5786 5.92172 28 6.93913 28 8V16.6667M4 21.3334L10.6667 14.6668C11.904 13.4761 13.4293 13.4761 14.6667 14.6668L20 20.0001M18.6667 18.6666L20 17.3333C20.8933 16.4746 21.9333 16.2346 22.9093 16.6133M25.56 21.8201C25.82 21.5601 26.1287 21.3539 26.4684 21.2131C26.8082 21.0724 27.1723 21 27.54 21C27.9077 21 28.2718 21.0724 28.6116 21.2131C28.9513 21.3539 29.26 21.5601 29.52 21.8201C29.78 22.0802 29.9863 22.3888 30.127 22.7286C30.2677 23.0683 30.3401 23.4324 30.3401 23.8001C30.3401 24.1679 30.2677 24.532 30.127 24.8717C29.9863 25.2114 29.78 25.5201 29.52 25.7801L25 30.3401H21V26.3401L25.56 21.8201Z",
|
|
7
7
|
stroke: C,
|
|
8
8
|
strokeWidth: o,
|
|
9
9
|
strokeLinecap: "round",
|
|
@@ -1,15 +1,124 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @callback ImageStarIconClickHandler
|
|
3
|
+
* @returns {void}
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
7
|
+
*
|
|
8
|
+
* @typedef {object} ImageStarIconProps
|
|
9
|
+
*
|
|
10
|
+
* @property {import('./constants').IconSize} [iconSize='m']
|
|
11
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
12
|
+
* @property {ImageStarIconClickHandler} [onClick=null]
|
|
13
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
14
|
+
* @property {string} [fill='none']
|
|
15
|
+
* SVG fill colour. Default `'none'`.
|
|
16
|
+
* @property {string} [strokeColor='currentColor']
|
|
17
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
18
|
+
* @property {string} [strokeColorOnHover]
|
|
19
|
+
* Stroke colour applied on hover.
|
|
20
|
+
* @property {string} [fillOnHover]
|
|
21
|
+
* Fill colour applied on hover.
|
|
22
|
+
* @property {boolean} [disabled]
|
|
23
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
24
|
+
* @property {boolean} [animated=false]
|
|
25
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
26
|
+
* @property {number} [viewBoxSize]
|
|
27
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
28
|
+
*
|
|
29
|
+
* @see {@link IconProps}
|
|
30
|
+
*/
|
|
1
31
|
/**
|
|
2
32
|
* SVG image-with-star icon (framed photo with a star badge) used for
|
|
3
33
|
* Visual Brand Alignment and similar media-rating contexts.
|
|
34
|
+
* Source: Design System Figma `icon-imagestar`, `size=xxl` (32×32) variant.
|
|
35
|
+
*
|
|
36
|
+
* ## Props
|
|
37
|
+
*
|
|
38
|
+
* All optional.
|
|
39
|
+
*
|
|
40
|
+
* **iconSize** `'s' | 'm' | 'l' | 'xl' | 'xxl' | '4xl'` — default `'m'`
|
|
41
|
+
* T-shirt size token. Controls `width`/`height` and stroke width.
|
|
42
|
+
*
|
|
43
|
+
* **onClick** `() => void` — default `null`
|
|
44
|
+
* Click handler. When set the icon is clickable.
|
|
45
|
+
*
|
|
46
|
+
* **fill** `string` — default `'none'`
|
|
47
|
+
* SVG fill colour.
|
|
4
48
|
*
|
|
5
|
-
*
|
|
49
|
+
* **strokeColor** `string` — default `'currentColor'`
|
|
50
|
+
* SVG stroke colour. Accepts any valid CSS colour.
|
|
6
51
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
52
|
+
* **strokeColorOnHover** `string` — no default
|
|
53
|
+
* Stroke colour applied on hover.
|
|
54
|
+
*
|
|
55
|
+
* **fillOnHover** `string` — no default
|
|
56
|
+
* Fill colour applied on hover.
|
|
57
|
+
*
|
|
58
|
+
* **disabled** `boolean` — no default
|
|
59
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
60
|
+
*
|
|
61
|
+
* **animated** `boolean` — default `false`
|
|
62
|
+
* When `true`, applies the spinner animation class.
|
|
63
|
+
*
|
|
64
|
+
* **viewBoxSize** `number` — no default
|
|
65
|
+
* Custom viewBox size for icons that are not 32×32. Omit → `0 0 32 32`.
|
|
66
|
+
*
|
|
67
|
+
* @param {ImageStarIconProps} props
|
|
68
|
+
* @returns {import('react').ReactElement}
|
|
69
|
+
*
|
|
70
|
+
* @example <caption>Playground</caption>
|
|
71
|
+
* import { ImageStarIcon } from '@eyesee/ui-components/icons';
|
|
72
|
+
*
|
|
73
|
+
* <ImageStarIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
74
|
+
*
|
|
75
|
+
* @example <caption>Gallery</caption>
|
|
76
|
+
* import { ImageStarIcon } from '@eyesee/ui-components/icons';
|
|
77
|
+
*
|
|
78
|
+
* <ImageStarIcon iconSize="s" strokeColor="#333333" fill="none" />
|
|
79
|
+
* <ImageStarIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
80
|
+
* <ImageStarIcon iconSize="l" strokeColor="#333333" fill="none" />
|
|
14
81
|
*/
|
|
15
82
|
export const ImageStarIcon: (props: IconProps) => import("react").JSX.Element;
|
|
83
|
+
export type ImageStarIconClickHandler = () => void;
|
|
84
|
+
/**
|
|
85
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
86
|
+
*/
|
|
87
|
+
export type ImageStarIconProps = {
|
|
88
|
+
/**
|
|
89
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
90
|
+
*/
|
|
91
|
+
iconSize?: import("./constants").IconSize;
|
|
92
|
+
/**
|
|
93
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
94
|
+
*/
|
|
95
|
+
onClick?: ImageStarIconClickHandler;
|
|
96
|
+
/**
|
|
97
|
+
* SVG fill colour. Default `'none'`.
|
|
98
|
+
*/
|
|
99
|
+
fill?: string;
|
|
100
|
+
/**
|
|
101
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
102
|
+
*/
|
|
103
|
+
strokeColor?: string;
|
|
104
|
+
/**
|
|
105
|
+
* Stroke colour applied on hover.
|
|
106
|
+
*/
|
|
107
|
+
strokeColorOnHover?: string;
|
|
108
|
+
/**
|
|
109
|
+
* Fill colour applied on hover.
|
|
110
|
+
*/
|
|
111
|
+
fillOnHover?: string;
|
|
112
|
+
/**
|
|
113
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
114
|
+
*/
|
|
115
|
+
disabled?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
118
|
+
*/
|
|
119
|
+
animated?: boolean;
|
|
120
|
+
/**
|
|
121
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
122
|
+
*/
|
|
123
|
+
viewBoxSize?: number;
|
|
124
|
+
};
|
|
@@ -3,7 +3,7 @@ import { createIcon as r } from "./createIcon.js";
|
|
|
3
3
|
const n = r(({ strokeColor: C, strokeWidth: o }) => /* @__PURE__ */ L(
|
|
4
4
|
"path",
|
|
5
5
|
{
|
|
6
|
-
d: "
|
|
6
|
+
d: "M20 10.6667H20.0133M14.6667 28H8C6.93913 28 5.92172 27.5786 5.17157 26.8284C4.42143 26.0783 4 25.0609 4 24V8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4H24C25.0609 4 26.0783 4.42143 26.8284 5.17157C27.5786 5.92172 28 6.93913 28 8V15.3333M4 21.3334L10.6667 14.6668C11.904 13.4761 13.4293 13.4761 14.6667 14.6668L17.3333 17.3334M23.7336 27.756L20.8377 29.2733C20.7517 29.318 20.655 29.338 20.5584 29.331C20.4618 29.3239 20.369 29.2902 20.2904 29.2335C20.2119 29.1768 20.1506 29.0993 20.1135 29.0098C20.0764 28.9203 20.0649 28.8223 20.0803 28.7266L20.6337 25.512L18.291 23.236C18.2211 23.1684 18.1715 23.0825 18.1481 22.9881C18.1247 22.8937 18.1282 22.7946 18.1584 22.7022C18.1886 22.6097 18.2441 22.5276 18.3187 22.4652C18.3933 22.4028 18.484 22.3626 18.5803 22.3493L21.8177 21.88L23.2656 18.956C23.309 18.8689 23.3757 18.7956 23.4584 18.7444C23.5411 18.6932 23.6364 18.666 23.7336 18.666C23.8309 18.666 23.9262 18.6932 24.0089 18.7444C24.0916 18.7956 24.1583 18.8689 24.2016 18.956L25.6496 21.88L28.887 22.3493C28.983 22.3631 29.0733 22.4035 29.1476 22.466C29.2219 22.5284 29.2772 22.6104 29.3073 22.7027C29.3374 22.7949 29.3411 22.8938 29.3179 22.988C29.2948 23.0823 29.2457 23.1682 29.1763 23.236L26.8336 25.512L27.3856 28.7253C27.4022 28.8211 27.3916 28.9197 27.355 29.0098C27.3183 29.0998 27.2572 29.1778 27.1784 29.2349C27.0997 29.292 27.0065 29.3258 26.9095 29.3326C26.8125 29.3394 26.7156 29.3189 26.6297 29.2733L23.7336 27.756Z",
|
|
7
7
|
stroke: C,
|
|
8
8
|
strokeWidth: o,
|
|
9
9
|
strokeLinecap: "round",
|