@crystallize/design-system 1.19.2 → 1.20.0
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/CHANGELOG.md +12 -0
- package/dist/index.css +58 -6
- package/dist/index.d.ts +17 -5
- package/dist/index.js +1497 -1294
- package/dist/index.mjs +1390 -1187
- package/package.json +1 -1
- package/src/dialog/dialog.css +1 -1
- package/src/iconography/document-shortcut.tsx +40 -0
- package/src/iconography/folder-shortcut.tsx +44 -0
- package/src/iconography/folder.tsx +12 -8
- package/src/iconography/index.ts +8 -0
- package/src/iconography/paths.tsx +33 -0
- package/src/iconography/product-shortcut.tsx +60 -0
- package/src/input-with-label/input-with-label.css +5 -1
- package/src/input-with-label/input-with-label.tsx +12 -7
- package/src/tooltip/tooltip.css +31 -3
- package/src/tooltip/tooltip.tsx +29 -13
- package/src/iconography/triangle.tsx +0 -27
package/package.json
CHANGED
package/src/dialog/dialog.css
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { forwardRef, SVGProps } from 'react';
|
|
2
|
+
|
|
3
|
+
type DocumentShortcutProps = SVGProps<SVGSVGElement>;
|
|
4
|
+
|
|
5
|
+
type DocumentShortcutRef = SVGSVGElement;
|
|
6
|
+
|
|
7
|
+
export const DocumentShortcut = forwardRef<DocumentShortcutRef, DocumentShortcutProps>((delegated, ref) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
|
|
10
|
+
<path
|
|
11
|
+
d="M5.6 19h10.8a.6.6 0 00.6-.6V6.649a.6.6 0 00-.176-.425l-3.048-3.048A.6.6 0 0013.35 3H5.6a.6.6 0 00-.6.6v14.8a.6.6 0 00.6.6z"
|
|
12
|
+
fill="#BFF6F8"
|
|
13
|
+
/>
|
|
14
|
+
<path
|
|
15
|
+
fillRule="evenodd"
|
|
16
|
+
clipRule="evenodd"
|
|
17
|
+
d="M16.824 6.224l.424-.424a1.2 1.2 0 01.352.849V18.4a1.2 1.2 0 01-1.2 1.2H5.6a1.2 1.2 0 01-1.2-1.2V3.6a1.2 1.2 0 011.2-1.2h7.752a1.2 1.2 0 01.848.352L17.249 5.8l-.425.424zM16.4 19H5.6a.6.6 0 01-.6-.6V3.6a.6.6 0 01.6-.6h7.752a.6.6 0 01.424.176l3.048 3.048A.6.6 0 0117 6.65V18.4a.6.6 0 01-.6.6z"
|
|
18
|
+
fill="#528693"
|
|
19
|
+
/>
|
|
20
|
+
<path
|
|
21
|
+
fillRule="evenodd"
|
|
22
|
+
clipRule="evenodd"
|
|
23
|
+
d="M13.7 2.8v2.6a.7.7 0 00.7.7h3v.6h-3a1.3 1.3 0 01-1.3-1.3V2.8h.6z"
|
|
24
|
+
fill="#528693"
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M20.695 1.67a.572.572 0 01.616.613l-.376 6.053c-.033.533-.685.804-1.051.437l-.67-.67-.669-.668L7.65 18.33s-2.239 1.962-3.46 1.574c-1.197-.38-1.738-1.34-1.701-2.699.069-2.57 1.886-3.277 1.886-3.277l.008 1.758L15.683 4.573l-.805-.806-.651-.65c-.366-.367-.097-1.017.435-1.052l6.033-.396z"
|
|
28
|
+
fill="#FFDE99"
|
|
29
|
+
/>
|
|
30
|
+
<path
|
|
31
|
+
fillRule="evenodd"
|
|
32
|
+
clipRule="evenodd"
|
|
33
|
+
d="M4.382 15.688L15.683 4.572l-1.456-1.457c-.366-.366-.097-1.016.435-1.051l6.033-.396a.572.572 0 01.616.614l-.376 6.053c-.033.533-.685.804-1.051.437l-1.339-1.338L7.65 18.33s-2.239 1.962-3.46 1.574c-1.197-.38-1.738-1.34-1.701-2.699.042-1.586.752-2.463 1.288-2.902.332-.271.598-.375.598-.375l.008 1.758zm-.008-1.759c-.217-.56-.218-.559-.218-.559l-.002.001-.004.002-.01.003a1.701 1.701 0 00-.107.05 2.96 2.96 0 00-.26.144c-.209.13-.482.33-.756.625-.556.599-1.09 1.555-1.129 2.995-.02.759.119 1.462.476 2.046.364.593.923 1.012 1.644 1.241.485.154 1.001.06 1.43-.086a6.3 6.3 0 001.256-.618 11.322 11.322 0 001.32-.964l.022-.019.006-.005.002-.002-.395-.452.396.451.015-.013L18.545 8.283l.914.915c.777.776 2.014.16 2.075-.825l.376-6.053a1.172 1.172 0 00-1.255-1.25l-6.032.396c-.983.065-1.596 1.3-.82 2.075l1.028 1.028-9.855 9.693-.006-1.209-.814.317.218.559z"
|
|
34
|
+
fill="#528693"
|
|
35
|
+
/>
|
|
36
|
+
</svg>
|
|
37
|
+
);
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
DocumentShortcut.displayName = 'DocumentShortcutIcon';
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { forwardRef, SVGProps } from 'react';
|
|
2
|
+
|
|
3
|
+
type FolderShortcutProps = SVGProps<SVGSVGElement>;
|
|
4
|
+
|
|
5
|
+
type FolderShortcutRef = SVGSVGElement;
|
|
6
|
+
|
|
7
|
+
export const FolderShortcut = forwardRef<FolderShortcutRef, FolderShortcutProps>((delegated, ref) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
|
|
10
|
+
<path
|
|
11
|
+
d="M2.567 4.108v13.146a.6.6 0 00.6.6h11.969c.59 0 1.166-.255 1.428-.784 1.375-2.77 1.643-8.38 1.167-10.692-.115-.555-.706-.927-1.273-.927l-7.09.067-2-1.41h-4.8z"
|
|
12
|
+
fill="#BFF6F8"
|
|
13
|
+
/>
|
|
14
|
+
<path
|
|
15
|
+
fillRule="evenodd"
|
|
16
|
+
clipRule="evenodd"
|
|
17
|
+
d="M1.967 4.146a.6.6 0 01.6-.6h4.8a.6.6 0 01.414.165L9.607 4.96h6.87c.722 0 1.592.36 1.786 1.303l-.588.12c-.114-.554-.631-.823-1.198-.823h-7.11l-2-1.414h-4.8v13.108a.6.6 0 00.6.6h11.969c.59 0 1.166-.255 1.428-.784 1.375-2.77 1.587-8.373 1.111-10.686l.588-.121c.254 1.236.316 2.9.149 5.085-.167 2.178-.57 4.495-1.31 5.989-.395.794-1.225 1.117-1.966 1.117H3.167a1.2 1.2 0 01-1.2-1.2V4.146z"
|
|
18
|
+
fill="#528693"
|
|
19
|
+
/>
|
|
20
|
+
<path
|
|
21
|
+
d="M4.622 10.021L3.465 17.17a.6.6 0 00.594.685h12.076c.591 0 1.164-.254 1.461-.765 1.418-2.445 2.065-6 1.764-7.956-.085-.56-.616-.829-1.183-.829H6.602a2 2 0 00-1.98 1.717z"
|
|
22
|
+
fill="#BFF6F8"
|
|
23
|
+
/>
|
|
24
|
+
<path
|
|
25
|
+
fillRule="evenodd"
|
|
26
|
+
clipRule="evenodd"
|
|
27
|
+
d="M2.871 17.084l1.157-7.11A2.6 2.6 0 016.602 7.74h11.575c.704 0 1.625.35 1.777 1.338.164 1.073.065 1.776-.24 3.48-.308 1.708-.84 3.522-1.599 4.83-.43.74-1.23 1.065-1.98 1.065H4.06a1.2 1.2 0 01-1.188-1.37zm.594.085l1.157-7.111a2 2 0 011.98-1.717h11.575c.567 0 1.098.268 1.183.829.3 1.956-.346 5.474-1.764 7.919-.297.51-.87.765-1.46.765H4.059a.6.6 0 01-.594-.685z"
|
|
28
|
+
fill="#528693"
|
|
29
|
+
/>
|
|
30
|
+
<path
|
|
31
|
+
d="M19.85 1.37a.57.57 0 01.616.613l-.404 6.08c-.036.536-.691.812-1.058.445l-.67-.67-.668-.668L6.673 18.162S4.49 20.125 2.89 19.504c-1.184-.46-1.924-1.154-1.881-2.518.08-2.582 2.395-3.231 2.395-3.231l-.381 2.173 11.781-11.62-.805-.806-.651-.651c-.366-.366-.092-1.02.442-1.058l6.06-.424z"
|
|
32
|
+
fill="#FFDE99"
|
|
33
|
+
/>
|
|
34
|
+
<path
|
|
35
|
+
fillRule="evenodd"
|
|
36
|
+
clipRule="evenodd"
|
|
37
|
+
d="M3.022 15.928l11.781-11.62-1.456-1.457c-.366-.366-.092-1.02.442-1.058l6.06-.424a.57.57 0 01.617.614l-.404 6.08c-.036.536-.691.812-1.058.445L17.666 7.17 6.673 18.162S4.49 20.125 2.89 19.504c-1.184-.46-1.924-1.154-1.881-2.518.052-1.674 1.043-2.535 1.734-2.934a3.2 3.2 0 01.661-.297l-.381 2.173zm.381-2.173l-.162-.578h-.002l-.004.002-.01.003a3.791 3.791 0 00-.437.17 4.368 4.368 0 00-.934.587c-.695.573-1.399 1.533-1.446 3.028-.025.804.183 1.466.616 1.996.42.515 1.008.852 1.648 1.1 1.071.416 2.236-.05 3-.472a8.48 8.48 0 001.37-.954l.022-.02.007-.006.002-.002c.001 0 .001-.001-.4-.447l.4.447.013-.012 10.58-10.579.914.914c.383.384.909.414 1.31.245.398-.167.736-.553.77-1.073l.405-6.081A1.17 1.17 0 0019.808.77l-6.06.424c-.52.036-.905.374-1.071.773-.168.4-.137.925.246 1.307l1.03 1.03-10.016 9.877.222-1.262-.918.257.162.578zm.165.577z"
|
|
38
|
+
fill="#528693"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
);
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
FolderShortcut.displayName = 'FolderShortcutIcon';
|
|
@@ -6,21 +6,25 @@ type FolderRef = SVGSVGElement;
|
|
|
6
6
|
|
|
7
7
|
export const Folder = forwardRef<FolderRef, FolderProps>((delegated, ref) => {
|
|
8
8
|
return (
|
|
9
|
-
<svg ref={ref} width="
|
|
9
|
+
<svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
|
|
10
10
|
<path
|
|
11
|
-
d="
|
|
12
|
-
fill="#
|
|
11
|
+
d="M2.604 4.108v13.146a.6.6 0 00.6.6h11.968c.59 0 1.166-.255 1.429-.784 1.374-2.77 1.642-8.38 1.166-10.692-.114-.555-.706-.927-1.272-.927l-7.091.067-2-1.41h-4.8z"
|
|
12
|
+
fill="#BFF6F8"
|
|
13
13
|
/>
|
|
14
14
|
<path
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
fillRule="evenodd"
|
|
16
|
+
clipRule="evenodd"
|
|
17
|
+
d="M2.004 4.146a.6.6 0 01.6-.6h4.8a.6.6 0 01.413.165L9.644 4.96h6.87c.722 0 1.591.36 1.785 1.303l-.587.12c-.114-.554-.632-.823-1.199-.823H9.404l-2-1.414h-4.8v13.108a.6.6 0 00.6.6h11.968c.59 0 1.166-.255 1.429-.784 1.374-2.77 1.587-8.373 1.11-10.686l.588-.121c.255 1.236.317 2.9.15 5.085-.167 2.178-.57 4.495-1.31 5.989-.395.794-1.225 1.117-1.967 1.117H3.204a1.2 1.2 0 01-1.2-1.2V4.146z"
|
|
18
|
+
fill="#528693"
|
|
17
19
|
/>
|
|
18
20
|
<path
|
|
19
|
-
d="
|
|
20
|
-
fill="#
|
|
21
|
+
d="M4.659 10.021L3.502 17.17a.6.6 0 00.594.685h12.076c.59 0 1.164-.254 1.46-.765 1.419-2.445 2.065-6 1.765-7.956-.086-.56-.617-.829-1.184-.829H6.64a2 2 0 00-1.98 1.717z"
|
|
22
|
+
fill="#BFF6F8"
|
|
21
23
|
/>
|
|
22
24
|
<path
|
|
23
|
-
|
|
25
|
+
fillRule="evenodd"
|
|
26
|
+
clipRule="evenodd"
|
|
27
|
+
d="M2.908 17.084l1.157-7.11A2.6 2.6 0 016.639 7.74h11.574c.704 0 1.626.35 1.777 1.338.165 1.073.066 1.776-.24 3.48-.307 1.708-.84 3.522-1.599 4.83-.429.74-1.23 1.065-1.979 1.065H4.096a1.2 1.2 0 01-1.188-1.37zm.594.085l1.157-7.111a2 2 0 011.98-1.717h11.574c.567 0 1.098.268 1.184.829.3 1.956-.346 5.474-1.764 7.919-.297.51-.87.765-1.46.765H4.095a.6.6 0 01-.594-.685z"
|
|
24
28
|
fill="#528693"
|
|
25
29
|
/>
|
|
26
30
|
</svg>
|
package/src/iconography/index.ts
CHANGED
|
@@ -23,6 +23,7 @@ import { Customers } from './customers';
|
|
|
23
23
|
import { Dashboard } from './dashboard';
|
|
24
24
|
import { Date } from './date';
|
|
25
25
|
import { Document } from './document';
|
|
26
|
+
import { DocumentShortcut } from './document-shortcut';
|
|
26
27
|
import { Download } from './download';
|
|
27
28
|
import { DragHandle } from './drag-handle';
|
|
28
29
|
import { Edit } from './edit';
|
|
@@ -34,6 +35,7 @@ import { FileUpload } from './file-upload';
|
|
|
34
35
|
import { Filename } from './filename';
|
|
35
36
|
import { FixedPropertyTable } from './fixed-property-table';
|
|
36
37
|
import { Folder } from './folder';
|
|
38
|
+
import { FolderShortcut } from './folder-shortcut';
|
|
37
39
|
import { Frontends } from './frontends';
|
|
38
40
|
import { Fulfilment } from './fulfilment';
|
|
39
41
|
import { Glasses } from './glasses';
|
|
@@ -58,6 +60,7 @@ import { Numeric } from './numeric';
|
|
|
58
60
|
import { Order } from './order';
|
|
59
61
|
import { ParagraphCollection } from './paragraph-collection';
|
|
60
62
|
import { Particle } from './particle';
|
|
63
|
+
import { Paths } from './paths';
|
|
61
64
|
import { People } from './people';
|
|
62
65
|
import { Percentage } from './percentage';
|
|
63
66
|
import { Pin } from './pin';
|
|
@@ -67,6 +70,7 @@ import { Plug } from './plug';
|
|
|
67
70
|
import { PriceList } from './price-list';
|
|
68
71
|
import { PriceTag } from './price-tag';
|
|
69
72
|
import { Product } from './product';
|
|
73
|
+
import { ProductShortcut } from './product-shortcut';
|
|
70
74
|
import { PropertyTable } from './property-table';
|
|
71
75
|
import { Relation } from './relation';
|
|
72
76
|
import { Renew } from './renew';
|
|
@@ -114,12 +118,14 @@ export const Icon = {
|
|
|
114
118
|
Customers,
|
|
115
119
|
Dashboard,
|
|
116
120
|
Document,
|
|
121
|
+
DocumentShortcut,
|
|
117
122
|
Download,
|
|
118
123
|
DragHandle,
|
|
119
124
|
Edit,
|
|
120
125
|
EyeClosed,
|
|
121
126
|
EyeOpen,
|
|
122
127
|
Folder,
|
|
128
|
+
FolderShortcut,
|
|
123
129
|
Frontends,
|
|
124
130
|
Fulfilment,
|
|
125
131
|
Glasses,
|
|
@@ -138,6 +144,7 @@ export const Icon = {
|
|
|
138
144
|
Mushroom,
|
|
139
145
|
NailPolish,
|
|
140
146
|
Order,
|
|
147
|
+
Paths,
|
|
141
148
|
People,
|
|
142
149
|
Percentage,
|
|
143
150
|
Pin,
|
|
@@ -146,6 +153,7 @@ export const Icon = {
|
|
|
146
153
|
PriceList,
|
|
147
154
|
PriceTag,
|
|
148
155
|
Product,
|
|
156
|
+
ProductShortcut,
|
|
149
157
|
PipelineDashed,
|
|
150
158
|
RestrictedCatalogue,
|
|
151
159
|
Renew,
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { forwardRef, SVGProps } from 'react';
|
|
2
|
+
|
|
3
|
+
type PathsProps = SVGProps<SVGSVGElement>;
|
|
4
|
+
type PathsRef = SVGSVGElement;
|
|
5
|
+
|
|
6
|
+
export const Paths = forwardRef<PathsRef, PathsProps>((delegated, ref) => {
|
|
7
|
+
return (
|
|
8
|
+
<svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
|
|
9
|
+
<path
|
|
10
|
+
d="M12.742 13.88a7.265 7.265 0 00-7.266-7.265V5.36a.313.313 0 00-.507-.245L1.305 8.018a.313.313 0 00.005.495l3.665 2.768a.313.313 0 00.501-.25V9.924a3.778 3.778 0 013.779 3.779v5.856c0 .173.14.313.312.313h2.945a.23.23 0 00.23-.23v-5.76z"
|
|
11
|
+
fill="#fff"
|
|
12
|
+
/>
|
|
13
|
+
<path
|
|
14
|
+
fillRule="evenodd"
|
|
15
|
+
clipRule="evenodd"
|
|
16
|
+
d="M5.789 5.36a.626.626 0 00-1.014-.49L1.111 7.773a.626.626 0 00.01.99l3.665 2.768a.626.626 0 001.003-.5v-.78a3.466 3.466 0 013.153 3.45v5.857c0 .345.28.625.625.625h2.945c.3 0 .542-.242.542-.542v-5.76A7.578 7.578 0 005.79 6.308V5.36zm-4.29 2.903L5.163 5.36v1.568h.313a6.952 6.952 0 016.953 6.952v5.678H9.567v-5.856a4.091 4.091 0 00-4.09-4.091h-.314v1.42L1.5 8.264z"
|
|
17
|
+
fill="#528693"
|
|
18
|
+
/>
|
|
19
|
+
<path
|
|
20
|
+
d="M9.259 10.963a7.265 7.265 0 017.265-7.265V2.443c0-.262.302-.408.507-.245L20.695 5.1a.313.313 0 01-.005.495l-3.665 2.768a.313.313 0 01-.501-.25V7.006a3.778 3.778 0 00-3.779 3.778v8.668c0 .173-.14.313-.312.313H9.537a.279.279 0 01-.278-.279v-8.523z"
|
|
21
|
+
fill="#BFF6F8"
|
|
22
|
+
/>
|
|
23
|
+
<path
|
|
24
|
+
fillRule="evenodd"
|
|
25
|
+
clipRule="evenodd"
|
|
26
|
+
d="M16.211 2.443a.626.626 0 011.014-.49l3.665 2.903a.625.625 0 01-.012.99l-3.664 2.768a.626.626 0 01-1.003-.5v-.781a3.466 3.466 0 00-3.153 3.452v8.668c0 .345-.28.625-.625.625H9.537a.591.591 0 01-.591-.591v-8.524a7.578 7.578 0 017.265-7.571v-.949zm4.29 2.903l-3.664-2.903v1.568h-.313a6.952 6.952 0 00-6.953 6.952v8.49h2.862v-8.668a4.091 4.091 0 014.09-4.091h.314v1.42L20.5 5.347z"
|
|
27
|
+
fill="#528693"
|
|
28
|
+
/>
|
|
29
|
+
</svg>
|
|
30
|
+
);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
Paths.displayName = 'PathsIcon';
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { forwardRef, SVGProps } from 'react';
|
|
2
|
+
|
|
3
|
+
type ProductShortcutProps = SVGProps<SVGSVGElement>;
|
|
4
|
+
|
|
5
|
+
type ProductShortcutRef = SVGSVGElement;
|
|
6
|
+
|
|
7
|
+
export const ProductShortcut = forwardRef<ProductShortcutRef, ProductShortcutProps>((delegated, ref) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
|
|
10
|
+
<path
|
|
11
|
+
d="M8.362 6.062c0 1.691-1.266 3.062-2.827 3.062-1.56 0-2.826-1.37-2.826-3.062C2.709 4.371 3.974 3 5.535 3c1.561 0 2.827 1.371 2.827 3.062z"
|
|
12
|
+
fill="#BFF6F8"
|
|
13
|
+
/>
|
|
14
|
+
<path
|
|
15
|
+
fillRule="evenodd"
|
|
16
|
+
clipRule="evenodd"
|
|
17
|
+
d="M8.962 6.062c0 1.977-1.49 3.662-3.427 3.662S2.11 8.04 2.11 6.062c0-1.976 1.49-3.662 3.426-3.662 1.937 0 3.427 1.686 3.427 3.662zM5.535 9.124c1.561 0 2.827-1.37 2.827-3.062C8.362 4.371 7.096 3 5.535 3 3.975 3 2.71 4.371 2.71 6.062c0 1.691 1.265 3.062 2.826 3.062z"
|
|
18
|
+
fill="#528693"
|
|
19
|
+
/>
|
|
20
|
+
<path
|
|
21
|
+
d="M17.595 11.762c0 4.163-3.163 7.538-7.066 7.538s-7.067-3.375-7.067-7.538c0-4.162 3.164-7.537 7.067-7.537s7.066 3.375 7.066 7.537z"
|
|
22
|
+
fill="#BFF6F8"
|
|
23
|
+
/>
|
|
24
|
+
<path
|
|
25
|
+
fillRule="evenodd"
|
|
26
|
+
clipRule="evenodd"
|
|
27
|
+
d="M18.195 11.762c0 4.458-3.396 8.138-7.666 8.138-4.27 0-7.667-3.68-7.667-8.137 0-4.458 3.397-8.138 7.667-8.138s7.666 3.68 7.666 8.137zM10.53 19.3c3.903 0 7.066-3.375 7.066-7.538 0-4.162-3.163-7.537-7.066-7.537S3.462 7.6 3.462 11.762c0 4.163 3.164 7.538 7.067 7.538z"
|
|
28
|
+
fill="#528693"
|
|
29
|
+
/>
|
|
30
|
+
<path
|
|
31
|
+
d="M19.291 8.04c0 1.692-1.265 3.063-2.826 3.063-1.561 0-2.827-1.371-2.827-3.062 0-1.691 1.266-3.062 2.827-3.062 1.56 0 2.826 1.37 2.826 3.062z"
|
|
32
|
+
fill="#BFF6F8"
|
|
33
|
+
/>
|
|
34
|
+
<path
|
|
35
|
+
fillRule="evenodd"
|
|
36
|
+
clipRule="evenodd"
|
|
37
|
+
d="M19.891 8.04c0 1.977-1.49 3.663-3.426 3.663-1.937 0-3.427-1.686-3.427-3.662 0-1.977 1.49-3.662 3.427-3.662 1.936 0 3.426 1.685 3.426 3.662zm-3.426 3.063c1.56 0 2.826-1.371 2.826-3.062 0-1.691-1.265-3.062-2.826-3.062-1.561 0-2.827 1.37-2.827 3.062 0 1.69 1.266 3.062 2.827 3.062zM10.28 11.896l-.007.013a2.64 2.64 0 00-.113.35c-.065.26-.132.66-.132 1.2a.3.3 0 11-.6 0c0-.591.074-1.04.15-1.345a3.24 3.24 0 01.158-.472l.004-.009.001-.003h.001s0-.002.266.13l-.266-.132a.3.3 0 01.537.268zM7.557 14.675a.3.3 0 01.22.362c-.073.3-.2.535-.38.694a.807.807 0 01-.624.205c-.415-.042-.765-.385-.87-.803a.3.3 0 01.583-.146c.052.21.221.339.348.352A.208.208 0 007 15.28c.062-.054.14-.167.194-.387a.3.3 0 01.363-.22z"
|
|
38
|
+
fill="#528693"
|
|
39
|
+
/>
|
|
40
|
+
<path
|
|
41
|
+
fillRule="evenodd"
|
|
42
|
+
clipRule="evenodd"
|
|
43
|
+
d="M7.495 14.666a.3.3 0 00-.3.3c0 .36.114.655.307.873.19.214.441.335.689.382.246.046.504.022.724-.072.219-.094.424-.273.492-.545a.3.3 0 00-.582-.145c-.01.041-.048.096-.147.139a.666.666 0 01-.376.033.619.619 0 01-.352-.19c-.086-.098-.155-.247-.155-.475a.3.3 0 00-.3-.3z"
|
|
44
|
+
fill="#528693"
|
|
45
|
+
/>
|
|
46
|
+
<path
|
|
47
|
+
d="M20.378 1.185a.558.558 0 01.616.614l-.51 6.188c-.046.544-.717.835-1.083.468l-.67-.67-.669-.668L6.708 18.472s-2.013 1.701-3.251 1.33c-1.215-.363-1.778-1.33-1.681-2.72.072-1.04 1.442-2.824 1.442-2.824l.562 1.285L15.2 4.255l-.805-.805-.651-.651c-.366-.366-.078-1.036.466-1.083l6.168-.531z"
|
|
48
|
+
fill="#FFDE99"
|
|
49
|
+
/>
|
|
50
|
+
<path
|
|
51
|
+
fillRule="evenodd"
|
|
52
|
+
clipRule="evenodd"
|
|
53
|
+
d="M3.78 15.543L15.2 4.255l-1.456-1.456c-.366-.366-.078-1.036.466-1.083l6.168-.531a.558.558 0 01.616.614l-.51 6.188c-.046.544-.717.835-1.083.468l-1.339-1.338L6.708 18.472s-2.013 1.701-3.251 1.33c-1.215-.363-1.778-1.33-1.681-2.72.046-.667.627-1.64 1.037-2.253.229-.341.405-.57.405-.57l.562 1.284zm-.562-1.284l-.476-.366-.002.002-.004.005-.013.017a7.77 7.77 0 00-.21.29c-.136.191-.317.458-.501.76a8.725 8.725 0 00-.53.993c-.148.337-.28.718-.305 1.081-.054.781.073 1.503.435 2.098.367.604.942 1.02 1.673 1.239.467.14.956.072 1.372-.052a5.677 5.677 0 001.189-.53 9.483 9.483 0 001.22-.842l.02-.017.006-.005.002-.001v-.001l-.386-.458.387.458.02-.016L18.061 7.966l.914.914c.392.391.928.405 1.325.233.396-.171.737-.557.78-1.077l.511-6.188a1.157 1.157 0 00-1.265-1.26l-6.168.53a1.293 1.293 0 00-1.074.782c-.171.397-.157.932.234 1.323l1.03 1.03-10.37 10.25-.619-1.415-.618.805.476.365z"
|
|
54
|
+
fill="#528693"
|
|
55
|
+
/>
|
|
56
|
+
</svg>
|
|
57
|
+
);
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
ProductShortcut.displayName = 'ProductShortcutIcon';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
|
|
2
2
|
import { cva, cx, VariantProps } from 'class-variance-authority';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { Icon } from '../iconography';
|
|
5
5
|
import { Input } from '../input';
|
|
6
6
|
import { Label } from '../label';
|
|
7
7
|
import { Tooltip } from '../tooltip';
|
|
@@ -15,6 +15,7 @@ const inputWithLabelStyles = cva(['c-input-with-label'], {
|
|
|
15
15
|
},
|
|
16
16
|
status: {
|
|
17
17
|
error: 'c-input-with-label--error',
|
|
18
|
+
warning: 'c-input-with-label--warning',
|
|
18
19
|
},
|
|
19
20
|
},
|
|
20
21
|
defaultVariants: {},
|
|
@@ -23,16 +24,20 @@ const inputWithLabelStyles = cva(['c-input-with-label'], {
|
|
|
23
24
|
type InputWithLabelStylesProps = VariantProps<typeof inputWithLabelStyles>;
|
|
24
25
|
|
|
25
26
|
export type InputWithLabelProps = InputWithLabelStylesProps & {
|
|
26
|
-
label
|
|
27
|
+
label?: string;
|
|
27
28
|
append?: ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* @deprecated Use statusMessage instead
|
|
31
|
+
*/
|
|
28
32
|
errorMessage?: string;
|
|
33
|
+
statusMessage?: string;
|
|
29
34
|
labelProps?: ComponentPropsWithoutRef<'label'>;
|
|
30
35
|
} & ComponentPropsWithRef<'input'>;
|
|
31
36
|
|
|
32
37
|
export type InputWithLabelRef = HTMLInputElement;
|
|
33
38
|
|
|
34
39
|
export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>(
|
|
35
|
-
({ className, label, append, errorMessage, status, variant, id, labelProps, ...delegated }, ref) => {
|
|
40
|
+
({ className, label, append, errorMessage, status, statusMessage, variant, id, labelProps, ...delegated }, ref) => {
|
|
36
41
|
const { className: labelClassName, ...labelPropsRest } = labelProps ?? {};
|
|
37
42
|
|
|
38
43
|
return (
|
|
@@ -45,10 +50,10 @@ export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>
|
|
|
45
50
|
{label}
|
|
46
51
|
<span className="c-input-with-label-input-wrap">
|
|
47
52
|
<Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
|
|
48
|
-
{!!errorMessage ? (
|
|
49
|
-
<Tooltip content={errorMessage}>
|
|
50
|
-
<div data-testid="input-with-label-
|
|
51
|
-
<
|
|
53
|
+
{!!(errorMessage ?? statusMessage) ? (
|
|
54
|
+
<Tooltip content={errorMessage ?? statusMessage} variant={status}>
|
|
55
|
+
<div data-testid="input-with-label-status-message" className="c-input-with-label-append">
|
|
56
|
+
{status === 'error' ? <Icon.Error width={20} height={20} /> : <Icon.Warning width={20} height={20} />}
|
|
52
57
|
</div>
|
|
53
58
|
</Tooltip>
|
|
54
59
|
) : (
|
package/src/tooltip/tooltip.css
CHANGED
|
@@ -1,7 +1,35 @@
|
|
|
1
1
|
.c-tooltip-content {
|
|
2
|
-
@apply z-[100] select-none rounded-md
|
|
2
|
+
@apply z-[100] select-none rounded-md px-4 py-2 text-xs font-medium italic leading-none shadow-tooltip transition;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.c-tooltip-
|
|
6
|
-
@apply
|
|
5
|
+
.c-tooltip-success {
|
|
6
|
+
@apply border border-solid border-cyan-300-600 bg-cyan-100-800 text-green-600-300;
|
|
7
|
+
|
|
8
|
+
.c-tooltip-arrow {
|
|
9
|
+
@apply fill-cyan-100-800;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.c-tooltip-error {
|
|
14
|
+
@apply border border-solid border-pink-200-700 bg-pink-100-800 text-pink-700-200;
|
|
15
|
+
|
|
16
|
+
.c-tooltip-arrow {
|
|
17
|
+
@apply fill-pink-100-800;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.c-tooltip-warning {
|
|
22
|
+
@apply border border-solid border-orange-200-700 bg-orange-100-800 text-green-600-300;
|
|
23
|
+
|
|
24
|
+
.c-tooltip-arrow {
|
|
25
|
+
@apply fill-orange-100-800;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.c-tooltip-info {
|
|
30
|
+
@apply border border-solid border-purple-200-700 bg-white text-green-600-300;
|
|
31
|
+
|
|
32
|
+
.c-tooltip-arrow {
|
|
33
|
+
@apply fill-white;
|
|
34
|
+
}
|
|
7
35
|
}
|
package/src/tooltip/tooltip.tsx
CHANGED
|
@@ -1,15 +1,36 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
import { cva, VariantProps } from 'class-variance-authority';
|
|
2
3
|
import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
3
4
|
|
|
4
|
-
type
|
|
5
|
-
|
|
6
|
-
content:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
type TooltipStylesProps = VariantProps<typeof tooltipStyles>;
|
|
6
|
+
const tooltipStyles = cva(
|
|
7
|
+
'c-tooltip-content data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade',
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
info: 'c-tooltip-info',
|
|
12
|
+
warning: 'c-tooltip-warning',
|
|
13
|
+
error: 'c-tooltip-error',
|
|
14
|
+
success: 'c-tooltip-success',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
variant: 'info',
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
type TooltipProps = TooltipStylesProps &
|
|
24
|
+
Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> & {
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
content: ReactNode;
|
|
27
|
+
delayDuration?: number;
|
|
28
|
+
align?: 'start' | 'center' | 'end';
|
|
29
|
+
defaultOpen?: boolean;
|
|
30
|
+
};
|
|
11
31
|
|
|
12
32
|
export function Tooltip({
|
|
33
|
+
variant,
|
|
13
34
|
children,
|
|
14
35
|
content,
|
|
15
36
|
side = 'top',
|
|
@@ -22,12 +43,7 @@ export function Tooltip({
|
|
|
22
43
|
<RadixTooltip.Root defaultOpen={defaultOpen}>
|
|
23
44
|
<RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
|
|
24
45
|
<RadixTooltip.Portal>
|
|
25
|
-
<RadixTooltip.Content
|
|
26
|
-
align={align}
|
|
27
|
-
className="c-tooltip-content data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade"
|
|
28
|
-
sideOffset={5}
|
|
29
|
-
side={side}
|
|
30
|
-
>
|
|
46
|
+
<RadixTooltip.Content align={align} sideOffset={5} side={side} className={tooltipStyles({ variant })}>
|
|
31
47
|
<RadixTooltip.Arrow className="c-tooltip-arrow" />
|
|
32
48
|
{content}
|
|
33
49
|
</RadixTooltip.Content>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import { forwardRef, SVGProps } from 'react';
|
|
3
|
-
|
|
4
|
-
type TriangleProps = SVGProps<SVGSVGElement> & {
|
|
5
|
-
width?: number;
|
|
6
|
-
height?: number;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
type TriangleRef = SVGSVGElement;
|
|
10
|
-
|
|
11
|
-
export const Triangle = forwardRef<TriangleRef, TriangleProps>((delegated, ref) => {
|
|
12
|
-
const { width = 20, height = 20, ...rest } = delegated;
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<svg
|
|
16
|
-
viewBox="0 0 17 15"
|
|
17
|
-
width={width}
|
|
18
|
-
height={height}
|
|
19
|
-
ref={ref}
|
|
20
|
-
fill="none"
|
|
21
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
22
|
-
{...rest}
|
|
23
|
-
>
|
|
24
|
-
<path d="M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z" stroke="currentColor" strokeWidth={2.4} />
|
|
25
|
-
</svg>
|
|
26
|
-
);
|
|
27
|
-
});
|