@guardian/stand 0.0.31 → 0.0.32
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/dist/components/date-picker/DatePicker.cjs +166 -0
- package/dist/components/date-picker/DatePicker.js +126 -0
- package/dist/components/date-picker/styles.cjs +199 -0
- package/dist/components/date-picker/styles.js +187 -0
- package/dist/components/form/types.cjs +2 -1
- package/dist/components/form/types.js +3 -2
- package/dist/components/select/Select.cjs +1 -1
- package/dist/components/select/Select.js +7 -1
- package/dist/date-picker.cjs +9 -0
- package/dist/date-picker.js +2 -0
- package/dist/index.cjs +2 -0
- package/dist/index.js +1 -0
- package/dist/styleD/build/css/component/datePicker.css +120 -0
- package/dist/styleD/build/css/component/templateComponent.css +8 -0
- package/dist/styleD/build/typescript/component/datePicker.cjs +185 -0
- package/dist/styleD/build/typescript/component/datePicker.js +183 -0
- package/dist/types/components/date-picker/DatePicker.d.ts +2 -0
- package/dist/types/components/date-picker/sandbox.d.ts +2 -0
- package/dist/types/components/date-picker/styles.d.ts +11 -0
- package/dist/types/components/date-picker/types.d.ts +21 -0
- package/dist/types/components/form/types.d.ts +1 -1
- package/dist/types/date-picker.d.ts +21 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/styleD/build/typescript/component/datePicker.d.ts +185 -0
- package/dist/types/styleD/build/typescript/component/templateComponent.d.ts +10 -0
- package/dist/types/templates/component/TemplateComponent.d.ts +2 -0
- package/dist/types/templates/component/sandbox.d.ts +5 -0
- package/dist/types/templates/component/styles.d.ts +7 -0
- package/dist/types/templates/component/types.d.ts +5 -0
- package/package.json +17 -2
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
export declare const componentDatePicker: {
|
|
5
|
+
picker: {
|
|
6
|
+
shared: {
|
|
7
|
+
display: string;
|
|
8
|
+
width: string;
|
|
9
|
+
justifyContent: string;
|
|
10
|
+
alignItems: string;
|
|
11
|
+
height: string;
|
|
12
|
+
borderRadius: string;
|
|
13
|
+
border: string;
|
|
14
|
+
backgroundColor: string;
|
|
15
|
+
gap: string;
|
|
16
|
+
padding: {
|
|
17
|
+
top: string;
|
|
18
|
+
right: string;
|
|
19
|
+
bottom: string;
|
|
20
|
+
left: string;
|
|
21
|
+
};
|
|
22
|
+
disabled: {
|
|
23
|
+
cursor: string;
|
|
24
|
+
backgroundColor: string;
|
|
25
|
+
color: string;
|
|
26
|
+
};
|
|
27
|
+
focusVisible: {
|
|
28
|
+
outline: string;
|
|
29
|
+
};
|
|
30
|
+
invalid: {
|
|
31
|
+
border: string;
|
|
32
|
+
};
|
|
33
|
+
button: {
|
|
34
|
+
flex: string;
|
|
35
|
+
backgroundColor: string;
|
|
36
|
+
border: string;
|
|
37
|
+
padding: {
|
|
38
|
+
top: string;
|
|
39
|
+
right: string;
|
|
40
|
+
bottom: string;
|
|
41
|
+
left: string;
|
|
42
|
+
};
|
|
43
|
+
margin: {
|
|
44
|
+
top: string;
|
|
45
|
+
right: string;
|
|
46
|
+
bottom: string;
|
|
47
|
+
left: string;
|
|
48
|
+
};
|
|
49
|
+
display: string;
|
|
50
|
+
alignItems: string;
|
|
51
|
+
justifyContent: string;
|
|
52
|
+
color: string;
|
|
53
|
+
cursor: string;
|
|
54
|
+
disabled: {
|
|
55
|
+
color: string;
|
|
56
|
+
cursor: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
segment: {
|
|
62
|
+
shared: {
|
|
63
|
+
placeholder: {
|
|
64
|
+
color: string;
|
|
65
|
+
focusVisible: {
|
|
66
|
+
outline: string;
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
popover: {
|
|
72
|
+
shared: {
|
|
73
|
+
offset: number;
|
|
74
|
+
containerPadding: number;
|
|
75
|
+
backgroundColor: string;
|
|
76
|
+
padding: {
|
|
77
|
+
top: string;
|
|
78
|
+
right: string;
|
|
79
|
+
bottom: string;
|
|
80
|
+
left: string;
|
|
81
|
+
};
|
|
82
|
+
boxShadow: string;
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
calendar: {
|
|
86
|
+
header: {
|
|
87
|
+
shared: {
|
|
88
|
+
display: string;
|
|
89
|
+
alignItems: string;
|
|
90
|
+
justifyContent: string;
|
|
91
|
+
typography: {
|
|
92
|
+
font: string;
|
|
93
|
+
letterSpacing: string;
|
|
94
|
+
fontWidth: number;
|
|
95
|
+
};
|
|
96
|
+
button: {
|
|
97
|
+
backgroundColor: string;
|
|
98
|
+
border: string;
|
|
99
|
+
padding: {
|
|
100
|
+
top: string;
|
|
101
|
+
right: string;
|
|
102
|
+
bottom: string;
|
|
103
|
+
left: string;
|
|
104
|
+
};
|
|
105
|
+
margin: {
|
|
106
|
+
top: string;
|
|
107
|
+
right: string;
|
|
108
|
+
bottom: string;
|
|
109
|
+
left: string;
|
|
110
|
+
};
|
|
111
|
+
display: string;
|
|
112
|
+
alignItems: string;
|
|
113
|
+
justifyContent: string;
|
|
114
|
+
color: string;
|
|
115
|
+
cursor: string;
|
|
116
|
+
width: string;
|
|
117
|
+
height: string;
|
|
118
|
+
aspectRatio: string;
|
|
119
|
+
hovered: {
|
|
120
|
+
backgroundColor: string;
|
|
121
|
+
};
|
|
122
|
+
pressed: {
|
|
123
|
+
backgroundColor: string;
|
|
124
|
+
};
|
|
125
|
+
selected: {
|
|
126
|
+
backgroundColor: string;
|
|
127
|
+
};
|
|
128
|
+
focusVisible: {
|
|
129
|
+
outline: string;
|
|
130
|
+
};
|
|
131
|
+
disabled: {
|
|
132
|
+
cursor: string;
|
|
133
|
+
color: string;
|
|
134
|
+
};
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
grid: {
|
|
139
|
+
shared: {
|
|
140
|
+
typography: {
|
|
141
|
+
font: string;
|
|
142
|
+
letterSpacing: string;
|
|
143
|
+
fontWidth: number;
|
|
144
|
+
};
|
|
145
|
+
borderCollapse: string;
|
|
146
|
+
borderSpacing: string;
|
|
147
|
+
th: {
|
|
148
|
+
width: string;
|
|
149
|
+
height: string;
|
|
150
|
+
verticalAlign: string;
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
};
|
|
154
|
+
cell: {
|
|
155
|
+
shared: {
|
|
156
|
+
width: string;
|
|
157
|
+
aspectRatio: string;
|
|
158
|
+
display: string;
|
|
159
|
+
alignItems: string;
|
|
160
|
+
justifyContent: string;
|
|
161
|
+
cursor: string;
|
|
162
|
+
outsideMonth: {
|
|
163
|
+
display: string;
|
|
164
|
+
};
|
|
165
|
+
hovered: {
|
|
166
|
+
backgroundColor: string;
|
|
167
|
+
};
|
|
168
|
+
pressed: {
|
|
169
|
+
backgroundColor: string;
|
|
170
|
+
};
|
|
171
|
+
selected: {
|
|
172
|
+
backgroundColor: string;
|
|
173
|
+
};
|
|
174
|
+
focusVisible: {
|
|
175
|
+
outline: string;
|
|
176
|
+
};
|
|
177
|
+
disabled: {
|
|
178
|
+
cursor: string;
|
|
179
|
+
color: string;
|
|
180
|
+
};
|
|
181
|
+
};
|
|
182
|
+
};
|
|
183
|
+
};
|
|
184
|
+
};
|
|
185
|
+
export type ComponentDatePicker = typeof componentDatePicker;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const componentName = "TemplateComponent";
|
|
2
|
+
export declare const componentTsx = "import { TemplateComponent } from '@guardian/stand/template-component';\n\nexport const Component = () => (\n\t<>\n\t\t{/* default example */}\n\t\t<TemplateComponent />\n\n\t\t{/* custom message example */}\n\t\t<TemplateComponent message=\"hi there\" />\n\n);\n\n";
|
|
3
|
+
export declare const componentCss = "\n/* import the templateComponent styles */\n@import '@guardian/stand/component/templateComponent.css';\n/* import the icon styles if using the icon variant of the templateComponent component */\n@import \"@guardian/stand/component/icon.css\";\n\n/* example setup of templateComponent style */\n.stand-template-component {\n\tbackground-color: var(--component-template-component-color-background);\n\tdisplay: var(--component-template-component-display);\n\talign-items: var(--component-template-component-align-items);\n\tjustify-content: var(--component-template-component-justify-content);\n\twidth: var(--component-template-component-size);\n\theight: var(--component-template-component-size);\n\tuser-select: var(--component-template-component-user-select);\n\tcolor: var(--component-template-component-color-text);\n\tfont: var(--component-template-component-typography-font);\n\tletter-spacing: var(--component-template-component-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-template-component-typography-font-width);\n}\n\n.stand-template-component-icon {\n\tdisplay: var(--component-icon-shared-display);\n\tuser-select: var(--component-icon-shared-user-select);\n\tfont-size: var(--component-icon-md-size);\n}\n\n.stand-template-component-icon-color-svg > svg {\n\twidth: var(--component-icon-md-size);\n\theight: var(--component-icon-md-size);\n\tfill: var(--component-template-component-color-text);\n}\n\n/* example setup for templateComponent image */\n.stand-template-component > img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n";
|
|
4
|
+
export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-template-component\">C</div>\n <div class=\"stand-template-component\">\n\t\t<span class=\"material-symbols stand-template-component-icon\">raven</span>\n </div>\n <div class=\"stand-template-component\">\n <span class=\"stand-template-component-icon stand-template-component-icon-color-svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"/></svg></span>\n </div>\n <div class=\"stand-template-component\">\n \t<img src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n </div>\n</div>\n";
|
|
5
|
+
export declare const componentJs = "\t// for ts/js\n\t\timport { componentTemplateComponent, componentIcon } from \"@guardian/stand\";\n\nconst templateComponentStyles = `\n background-color: ${componentTemplateComponent.color.background};\n display: ${componentTemplateComponent.display};\n align-items: ${componentTemplateComponent[\"align-items\"]};\n justify-content: ${componentTemplateComponent[\"justify-content\"]};\n width: ${componentTemplateComponent.size};\n height: ${componentTemplateComponent.size};\n user-select: ${componentTemplateComponent[\"user-select\"]};\n`;\n\nconst typographyStyle = `\n color: ${componentTemplateComponent.color.text};\n font: ${componentTemplateComponent.typography.font};\n letter-spacing: ${componentTemplateComponent.typography.letterSpacing};\n font-variation-settings: 'wdth' ${componentTemplateComponent.typography.fontWidth};\n`;\n\nconst imgStyle = `\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nconst iconStyles = `\n display: ${componentIcon.shared.display};\n user-select: ${componentIcon.shared[\"user-select\"]};\n font-size: ${componentIcon.md.size};\n color: ${componentTemplateComponent.color.text};\n`;\n\nconst iconSvgStyles = `\n width: ${componentIcon.md.size};\n height: ${componentIcon.md.size};\n fill: ${componentTemplateComponent.color.text};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n <div style=\"${templateComponentStyles}${typographyStyle}\">C</div>\n <div style=\"${templateComponentStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n </div>\n <div style=\"${templateComponentStyles}\">\n <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgStyles}\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"/></svg></span>\n </div>\n <div style=\"${templateComponentStyles}\">\n <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n </div>\n`;\n";
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { SerializedStyles } from '@emotion/react';
|
|
2
|
+
import { type ComponentTemplateComponent } from '../../styleD/build/typescript/component/templateComponent';
|
|
3
|
+
import type { DeepPartial, Prettify } from '../../util/types';
|
|
4
|
+
export type TemplateComponentTheme = Prettify<ComponentTemplateComponent>;
|
|
5
|
+
export type PartialTemplateComponentTheme = Prettify<DeepPartial<TemplateComponentTheme>>;
|
|
6
|
+
export declare const defaultTemplateComponentTheme: TemplateComponentTheme;
|
|
7
|
+
export declare const templateComponentStyles: (theme: TemplateComponentTheme) => SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@guardian/stand",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.32",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
|
|
6
6
|
"exports": {
|
|
@@ -109,6 +109,11 @@
|
|
|
109
109
|
"import": "./dist/alert-banner.js",
|
|
110
110
|
"require": "./dist/alert-banner.cjs"
|
|
111
111
|
},
|
|
112
|
+
"./date-picker": {
|
|
113
|
+
"types": "./dist/types/date-picker.d.ts",
|
|
114
|
+
"import": "./dist/date-picker.js",
|
|
115
|
+
"require": "./dist/date-picker.cjs"
|
|
116
|
+
},
|
|
112
117
|
"./byline": {
|
|
113
118
|
"types": "./dist/types/byline.d.ts",
|
|
114
119
|
"import": "./dist/byline.js",
|
|
@@ -161,7 +166,8 @@
|
|
|
161
166
|
"./component/radioGroup.css": "./dist/styleD/build/css/component/radioGroup.css",
|
|
162
167
|
"./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
|
|
163
168
|
"./component/textArea.css": "./dist/styleD/build/css/component/textArea.css",
|
|
164
|
-
"./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css"
|
|
169
|
+
"./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
|
|
170
|
+
"./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css"
|
|
165
171
|
},
|
|
166
172
|
"//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
|
|
167
173
|
"typesVersions": {
|
|
@@ -237,6 +243,9 @@
|
|
|
237
243
|
],
|
|
238
244
|
"alert-banner": [
|
|
239
245
|
"./dist/types/alert-banner.d.ts"
|
|
246
|
+
],
|
|
247
|
+
"date-picker": [
|
|
248
|
+
"./dist/types/date-picker.d.ts"
|
|
240
249
|
]
|
|
241
250
|
}
|
|
242
251
|
},
|
|
@@ -259,6 +268,7 @@
|
|
|
259
268
|
"@guardian/prettier": "10.0.0",
|
|
260
269
|
"@guardian/prosemirror-invisibles": "3.1.1",
|
|
261
270
|
"@guardian/tsconfig": "1.0.1",
|
|
271
|
+
"@internationalized/date": "3.12.1",
|
|
262
272
|
"@material-design-icons/svg": "^0.14.15",
|
|
263
273
|
"@playwright/experimental-ct-react17": "^1.59.1",
|
|
264
274
|
"@rollup/plugin-commonjs": "29.0.2",
|
|
@@ -306,6 +316,7 @@
|
|
|
306
316
|
"peerDependencies": {
|
|
307
317
|
"@emotion/react": ">=11.11.4 <=11.14.0",
|
|
308
318
|
"@guardian/prosemirror-invisibles": "3.1.1",
|
|
319
|
+
"@internationalized/date": "^3.12.1",
|
|
309
320
|
"prosemirror-dropcursor": "1.8.2",
|
|
310
321
|
"prosemirror-history": "1.4.1",
|
|
311
322
|
"prosemirror-keymap": "1.2.2",
|
|
@@ -324,6 +335,9 @@
|
|
|
324
335
|
"@guardian/prosemirror-invisibles": {
|
|
325
336
|
"optional": true
|
|
326
337
|
},
|
|
338
|
+
"@internationalized/date": {
|
|
339
|
+
"optional": true
|
|
340
|
+
},
|
|
327
341
|
"prosemirror-dropcursor": {
|
|
328
342
|
"optional": true
|
|
329
343
|
},
|
|
@@ -368,6 +382,7 @@
|
|
|
368
382
|
"test": "jest",
|
|
369
383
|
"test:setup-e2e": "playwright install --with-deps",
|
|
370
384
|
"test:e2e": "playwright test -c playwright-ct.config.ts",
|
|
385
|
+
"create-component": "npx ts-node ./scripts/create-component.ts",
|
|
371
386
|
"test:react-matrix": "./scripts/test-deps-matrix.sh"
|
|
372
387
|
}
|
|
373
388
|
}
|