@times-design-system/components-wordpress 0.4.0 → 0.7.2-alpha.2
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/BLOCK_CREATION_CHECKLIST.md +160 -0
- package/BUILD.md +411 -0
- package/CHANGELOG.md +22 -0
- package/LICENSE +29 -0
- package/README.md +972 -5
- package/TRANSFORMATION_GUIDE.md +635 -0
- package/block.json +10 -0
- package/dist/block.json +10 -0
- package/dist/blocks/ad-container/block.json +28 -0
- package/dist/blocks/ad-container/edit.js +42 -0
- package/dist/blocks/ad-container/index.js +10 -0
- package/dist/blocks/ad-container/save.js +16 -0
- package/dist/blocks/ad-container/style-editor.css +4 -0
- package/dist/blocks/ad-container/style.css +27 -0
- package/dist/blocks/button/block.json +89 -0
- package/dist/blocks/button/edit.js +187 -0
- package/dist/blocks/button/index.js +11 -0
- package/dist/blocks/button/save.js +52 -0
- package/dist/blocks/button/style-editor.css +15 -0
- package/dist/blocks/button/style.css +37 -0
- package/dist/blocks/chip/block.json +57 -0
- package/dist/blocks/chip/edit.js +113 -0
- package/dist/blocks/chip/index.js +10 -0
- package/dist/blocks/chip/save.js +36 -0
- package/dist/blocks/chip/style-editor.css +5 -0
- package/dist/blocks/chip/style.css +48 -0
- package/dist/blocks/divider/block.json +31 -0
- package/dist/blocks/divider/edit.js +42 -0
- package/dist/blocks/divider/index.js +10 -0
- package/dist/blocks/divider/save.js +18 -0
- package/dist/blocks/divider/style-editor.css +4 -0
- package/dist/blocks/divider/style.css +25 -0
- package/dist/blocks/flag/block.json +48 -0
- package/dist/blocks/flag/edit.js +82 -0
- package/dist/blocks/flag/index.js +10 -0
- package/dist/blocks/flag/save.js +25 -0
- package/dist/blocks/flag/style-editor.css +5 -0
- package/dist/blocks/flag/style.css +45 -0
- package/dist/blocks/icon-button/block.json +43 -0
- package/dist/blocks/icon-button/edit.js +82 -0
- package/dist/blocks/icon-button/index.js +10 -0
- package/dist/blocks/icon-button/save.js +29 -0
- package/dist/blocks/icon-button/style-editor.css +5 -0
- package/dist/blocks/icon-button/style.css +32 -0
- package/dist/blocks/input/block.json +47 -0
- package/dist/blocks/input/edit.js +78 -0
- package/dist/blocks/input/index.js +10 -0
- package/dist/blocks/input/save.js +27 -0
- package/dist/blocks/input/style-editor.css +8 -0
- package/dist/blocks/input/style.css +30 -0
- package/dist/blocks/link/block.json +71 -0
- package/dist/blocks/link/edit.js +151 -0
- package/dist/blocks/link/index.js +10 -0
- package/dist/blocks/link/save.js +46 -0
- package/dist/blocks/link/style-editor.css +5 -0
- package/dist/blocks/link/style.css +66 -0
- package/dist/blocks/text/block.json +32 -0
- package/dist/blocks/text/edit.js +56 -0
- package/dist/blocks/text/index.js +10 -0
- package/dist/blocks/text/save.js +18 -0
- package/dist/blocks/text/style-editor.css +4 -0
- package/dist/blocks/text/style.css +20 -0
- package/dist/blocks/toast/block.json +39 -0
- package/dist/blocks/toast/edit.js +85 -0
- package/dist/blocks/toast/index.js +10 -0
- package/dist/blocks/toast/save.js +29 -0
- package/dist/blocks/toast/style-editor.css +4 -0
- package/dist/blocks/toast/style.css +51 -0
- package/dist/index.cjs +2232 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -0
- package/dist/index.js +2196 -255
- package/dist/index.js.map +1 -1
- package/dist/plugin.php +79 -0
- package/dist/utils/classBuilder.js +53 -0
- package/package.json +39 -7
- package/plugin.php +79 -0
- package/rollup.config.js +39 -22
- package/scripts/build-plugin.cjs +121 -0
- package/scripts/create-block.sh +141 -0
- package/src/blocks/ad-container/block.json +28 -0
- package/src/blocks/ad-container/edit.js +42 -0
- package/src/blocks/ad-container/index.js +10 -0
- package/src/blocks/ad-container/save.js +16 -0
- package/src/blocks/ad-container/style-editor.css +4 -0
- package/src/blocks/ad-container/style.css +27 -0
- package/src/blocks/button/block.json +89 -0
- package/src/blocks/button/edit.js +187 -0
- package/src/blocks/button/index.js +11 -0
- package/src/blocks/button/save.js +52 -0
- package/src/blocks/button/style-editor.css +15 -0
- package/src/blocks/button/style.css +37 -0
- package/src/blocks/chip/block.json +57 -0
- package/src/blocks/chip/edit.js +113 -0
- package/src/blocks/chip/index.js +10 -0
- package/src/blocks/chip/save.js +36 -0
- package/src/blocks/chip/style-editor.css +5 -0
- package/src/blocks/chip/style.css +48 -0
- package/src/blocks/divider/block.json +31 -0
- package/src/blocks/divider/edit.js +42 -0
- package/src/blocks/divider/index.js +10 -0
- package/src/blocks/divider/save.js +18 -0
- package/src/blocks/divider/style-editor.css +4 -0
- package/src/blocks/divider/style.css +25 -0
- package/src/blocks/flag/block.json +48 -0
- package/src/blocks/flag/edit.js +82 -0
- package/src/blocks/flag/index.js +10 -0
- package/src/blocks/flag/save.js +25 -0
- package/src/blocks/flag/style-editor.css +5 -0
- package/src/blocks/flag/style.css +45 -0
- package/src/blocks/icon-button/block.json +43 -0
- package/src/blocks/icon-button/edit.js +82 -0
- package/src/blocks/icon-button/index.js +10 -0
- package/src/blocks/icon-button/save.js +29 -0
- package/src/blocks/icon-button/style-editor.css +5 -0
- package/src/blocks/icon-button/style.css +32 -0
- package/src/blocks/input/block.json +47 -0
- package/src/blocks/input/edit.js +78 -0
- package/src/blocks/input/index.js +10 -0
- package/src/blocks/input/save.js +27 -0
- package/src/blocks/input/style-editor.css +8 -0
- package/src/blocks/input/style.css +30 -0
- package/src/blocks/link/block.json +71 -0
- package/src/blocks/link/edit.js +151 -0
- package/src/blocks/link/index.js +10 -0
- package/src/blocks/link/save.js +46 -0
- package/src/blocks/link/style-editor.css +5 -0
- package/src/blocks/link/style.css +66 -0
- package/src/blocks/text/block.json +32 -0
- package/src/blocks/text/edit.js +56 -0
- package/src/blocks/text/index.js +10 -0
- package/src/blocks/text/save.js +18 -0
- package/src/blocks/text/style-editor.css +4 -0
- package/src/blocks/text/style.css +20 -0
- package/src/blocks/toast/block.json +39 -0
- package/src/blocks/toast/edit.js +85 -0
- package/src/blocks/toast/index.js +10 -0
- package/src/blocks/toast/save.js +29 -0
- package/src/blocks/toast/style-editor.css +4 -0
- package/src/blocks/toast/style.css +51 -0
- package/src/index.js +15 -12
- package/src/utils/classBuilder.js +53 -0
- package/tsconfig.json +4 -4
- package/__tests__/wordpress.test.js +0 -0
- package/dist/AdContainer/AdContainer.d.ts +0 -9
- package/dist/Article/ArticleMetaContainer/ArticleMetaContainer.d.ts +0 -8
- package/dist/Article/UpNextArticles/UpNextArticles.d.ts +0 -13
- package/dist/Button/Button.d.ts +0 -15
- package/dist/CommentsDisabled/CommentsDisabled.d.ts +0 -10
- package/dist/CommentsDisabled/CommentsDisabled.stories.d.ts +0 -44
- package/dist/CommentsDisabled/index.d.ts +0 -2
- package/dist/Divider/Divider.d.ts +0 -15
- package/dist/Input/Input.d.ts +0 -25
- package/dist/Link/Link.d.ts +0 -18
- package/dist/Text/Text.d.ts +0 -14
- package/dist/index.cjs.js +0 -299
- package/dist/index.cjs.js.map +0 -1
- package/dist/styles.css +0 -151
- package/dist/typographyStyles.css +0 -30
- package/dist/utils/cn.d.ts +0 -1
- package/dist/utils/hooks.d.ts +0 -8
- package/src/AdContainer/AdContainer.tsx +0 -31
- package/src/AdContainer/styles.css +0 -58
- package/src/Article/ArticleMetaContainer/ArticleMetaContainer.tsx +0 -14
- package/src/Article/ArticleMetaContainer/styles.css +0 -151
- package/src/Article/UpNextArticles/UpNextArticles.tsx +0 -69
- package/src/Article/UpNextArticles/styles.css +0 -151
- package/src/Button/Button.tsx +0 -36
- package/src/Button/styles.css +0 -30
- package/src/CommentsDisabled/CommentsDisabled.stories.tsx +0 -178
- package/src/CommentsDisabled/CommentsDisabled.tsx +0 -63
- package/src/CommentsDisabled/IMPLEMENTATION_SUMMARY.md +0 -305
- package/src/CommentsDisabled/README.md +0 -284
- package/src/CommentsDisabled/TOKEN_MAPPING.md +0 -269
- package/src/CommentsDisabled/index.ts +0 -2
- package/src/CommentsDisabled/styles.css +0 -82
- package/src/Divider/Divider.tsx +0 -41
- package/src/Divider/styles.css +0 -80
- package/src/Input/Input.tsx +0 -62
- package/src/Input/styles.css +0 -69
- package/src/Link/Link.tsx +0 -49
- package/src/Link/styles.css +0 -111
- package/src/Text/Text.tsx +0 -38
- package/src/Text/styles.css +0 -30
- package/src/Text/typographyStyles.css +0 -30
- package/src/utils/cn.js +0 -3
- package/src/utils/cn.tsx +0 -3
- package/src/utils/hooks.ts +0 -34
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,2232 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var blocks = require('@wordpress/blocks');
|
|
4
|
+
var blockEditor = require('@wordpress/block-editor');
|
|
5
|
+
var components = require('@wordpress/components');
|
|
6
|
+
|
|
7
|
+
function _defineProperty(e, r, t) {
|
|
8
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
9
|
+
value: t,
|
|
10
|
+
enumerable: !0,
|
|
11
|
+
configurable: !0,
|
|
12
|
+
writable: !0
|
|
13
|
+
}) : e[r] = t, e;
|
|
14
|
+
}
|
|
15
|
+
function _extends() {
|
|
16
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
17
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
18
|
+
var t = arguments[e];
|
|
19
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
20
|
+
}
|
|
21
|
+
return n;
|
|
22
|
+
}, _extends.apply(null, arguments);
|
|
23
|
+
}
|
|
24
|
+
function ownKeys(e, r) {
|
|
25
|
+
var t = Object.keys(e);
|
|
26
|
+
if (Object.getOwnPropertySymbols) {
|
|
27
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
28
|
+
r && (o = o.filter(function (r) {
|
|
29
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
30
|
+
})), t.push.apply(t, o);
|
|
31
|
+
}
|
|
32
|
+
return t;
|
|
33
|
+
}
|
|
34
|
+
function _objectSpread2(e) {
|
|
35
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
36
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
37
|
+
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
38
|
+
_defineProperty(e, r, t[r]);
|
|
39
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
40
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
return e;
|
|
44
|
+
}
|
|
45
|
+
function _toPrimitive(t, r) {
|
|
46
|
+
if ("object" != typeof t || !t) return t;
|
|
47
|
+
var e = t[Symbol.toPrimitive];
|
|
48
|
+
if (void 0 !== e) {
|
|
49
|
+
var i = e.call(t, r || "default");
|
|
50
|
+
if ("object" != typeof i) return i;
|
|
51
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
52
|
+
}
|
|
53
|
+
return ("string" === r ? String : Number)(t);
|
|
54
|
+
}
|
|
55
|
+
function _toPropertyKey(t) {
|
|
56
|
+
var i = _toPrimitive(t, "string");
|
|
57
|
+
return "symbol" == typeof i ? i : i + "";
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Build className string for Button component based on attributes.
|
|
62
|
+
* Maps component properties to TDS (Times Design System) SCSS classes.
|
|
63
|
+
*
|
|
64
|
+
* @param {Object} options - Button configuration options
|
|
65
|
+
* @param {string} options.intent - Visual style variant (primary, secondary, negative)
|
|
66
|
+
* @param {string} options.size - Button size (small, medium, large)
|
|
67
|
+
* @param {string} options.behaviour - Width behaviour (hug, full)
|
|
68
|
+
* @param {string} options.state - Interaction state (base, hover, pressed, loading, disabled, focus)
|
|
69
|
+
* @param {boolean} options.disabled - Whether button is disabled
|
|
70
|
+
* @returns {string} Complete className string
|
|
71
|
+
*/
|
|
72
|
+
function buildButtonClass(_ref) {
|
|
73
|
+
var _ref$intent = _ref.intent,
|
|
74
|
+
intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
|
|
75
|
+
_ref$size = _ref.size,
|
|
76
|
+
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
77
|
+
_ref$behaviour = _ref.behaviour,
|
|
78
|
+
behaviour = _ref$behaviour === void 0 ? 'hug' : _ref$behaviour,
|
|
79
|
+
_ref$state = _ref.state,
|
|
80
|
+
state = _ref$state === void 0 ? 'base' : _ref$state,
|
|
81
|
+
_ref$disabled = _ref.disabled,
|
|
82
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
83
|
+
var classes = ['tds-button', "tds-button--intent-".concat(intent), "tds-button--size-".concat(size), "tds-button--behaviour-".concat(behaviour), "tds-button--state-".concat(state)];
|
|
84
|
+
if (disabled) {
|
|
85
|
+
classes.push('tds-button--disabled');
|
|
86
|
+
}
|
|
87
|
+
return classes.join(' ');
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
function Edit(_ref) {
|
|
91
|
+
var attributes = _ref.attributes,
|
|
92
|
+
setAttributes = _ref.setAttributes;
|
|
93
|
+
var label = attributes.label,
|
|
94
|
+
intent = attributes.intent,
|
|
95
|
+
size = attributes.size,
|
|
96
|
+
behaviour = attributes.behaviour,
|
|
97
|
+
state = attributes.state,
|
|
98
|
+
disabled = attributes.disabled,
|
|
99
|
+
href = attributes.href,
|
|
100
|
+
target = attributes.target,
|
|
101
|
+
rel = attributes.rel,
|
|
102
|
+
type = attributes.type,
|
|
103
|
+
iconLeft = attributes.iconLeft,
|
|
104
|
+
iconRight = attributes.iconRight,
|
|
105
|
+
ariaLabel = attributes.ariaLabel;
|
|
106
|
+
var blockProps = blockEditor.useBlockProps({
|
|
107
|
+
className: 'tds-button-wrapper'
|
|
108
|
+
});
|
|
109
|
+
var buttonClass = buildButtonClass({
|
|
110
|
+
intent: intent,
|
|
111
|
+
size: size,
|
|
112
|
+
behaviour: behaviour,
|
|
113
|
+
state: state,
|
|
114
|
+
disabled: disabled
|
|
115
|
+
});
|
|
116
|
+
var Element = href ? 'a' : 'button';
|
|
117
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", blockProps, /*#__PURE__*/React.createElement(Element, {
|
|
118
|
+
className: buttonClass,
|
|
119
|
+
disabled: !href && disabled,
|
|
120
|
+
href: href,
|
|
121
|
+
target: target,
|
|
122
|
+
rel: rel,
|
|
123
|
+
type: !href ? type : undefined,
|
|
124
|
+
"aria-label": ariaLabel
|
|
125
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
126
|
+
className: "tds-button__label-container"
|
|
127
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
128
|
+
className: "tds-button__label"
|
|
129
|
+
}, label)))), /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
130
|
+
title: "Button Settings"
|
|
131
|
+
}, /*#__PURE__*/React.createElement(components.TextControl, {
|
|
132
|
+
label: "Label",
|
|
133
|
+
value: label,
|
|
134
|
+
onChange: function onChange(value) {
|
|
135
|
+
return setAttributes({
|
|
136
|
+
label: value
|
|
137
|
+
});
|
|
138
|
+
},
|
|
139
|
+
help: "The text displayed inside the button"
|
|
140
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
141
|
+
label: "Intent (Style)",
|
|
142
|
+
value: intent,
|
|
143
|
+
options: [{
|
|
144
|
+
label: 'Primary',
|
|
145
|
+
value: 'primary'
|
|
146
|
+
}, {
|
|
147
|
+
label: 'Secondary',
|
|
148
|
+
value: 'secondary'
|
|
149
|
+
}, {
|
|
150
|
+
label: 'Negative',
|
|
151
|
+
value: 'negative'
|
|
152
|
+
}],
|
|
153
|
+
onChange: function onChange(value) {
|
|
154
|
+
return setAttributes({
|
|
155
|
+
intent: value
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
159
|
+
label: "Size",
|
|
160
|
+
value: size,
|
|
161
|
+
options: [{
|
|
162
|
+
label: 'Small',
|
|
163
|
+
value: 'small'
|
|
164
|
+
}, {
|
|
165
|
+
label: 'Medium',
|
|
166
|
+
value: 'medium'
|
|
167
|
+
}, {
|
|
168
|
+
label: 'Large',
|
|
169
|
+
value: 'large'
|
|
170
|
+
}],
|
|
171
|
+
onChange: function onChange(value) {
|
|
172
|
+
return setAttributes({
|
|
173
|
+
size: value
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
177
|
+
label: "Behaviour",
|
|
178
|
+
value: behaviour,
|
|
179
|
+
options: [{
|
|
180
|
+
label: 'Hug Content',
|
|
181
|
+
value: 'hug'
|
|
182
|
+
}, {
|
|
183
|
+
label: 'Full Width',
|
|
184
|
+
value: 'full'
|
|
185
|
+
}],
|
|
186
|
+
onChange: function onChange(value) {
|
|
187
|
+
return setAttributes({
|
|
188
|
+
behaviour: value
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
192
|
+
label: "State",
|
|
193
|
+
value: state,
|
|
194
|
+
options: [{
|
|
195
|
+
label: 'Base',
|
|
196
|
+
value: 'base'
|
|
197
|
+
}, {
|
|
198
|
+
label: 'Hover',
|
|
199
|
+
value: 'hover'
|
|
200
|
+
}, {
|
|
201
|
+
label: 'Pressed',
|
|
202
|
+
value: 'pressed'
|
|
203
|
+
}, {
|
|
204
|
+
label: 'Loading',
|
|
205
|
+
value: 'loading'
|
|
206
|
+
}, {
|
|
207
|
+
label: 'Disabled',
|
|
208
|
+
value: 'disabled'
|
|
209
|
+
}, {
|
|
210
|
+
label: 'Focus',
|
|
211
|
+
value: 'focus'
|
|
212
|
+
}],
|
|
213
|
+
onChange: function onChange(value) {
|
|
214
|
+
return setAttributes({
|
|
215
|
+
state: value
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
219
|
+
label: "Disabled",
|
|
220
|
+
checked: disabled,
|
|
221
|
+
onChange: function onChange(value) {
|
|
222
|
+
return setAttributes({
|
|
223
|
+
disabled: value
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
})), /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
227
|
+
title: "Link Settings",
|
|
228
|
+
initialOpen: false
|
|
229
|
+
}, /*#__PURE__*/React.createElement(components.TextControl, {
|
|
230
|
+
label: "URL",
|
|
231
|
+
value: href,
|
|
232
|
+
onChange: function onChange(value) {
|
|
233
|
+
return setAttributes({
|
|
234
|
+
href: value
|
|
235
|
+
});
|
|
236
|
+
},
|
|
237
|
+
placeholder: "https://example.com"
|
|
238
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
239
|
+
label: "Link Target",
|
|
240
|
+
value: target,
|
|
241
|
+
options: [{
|
|
242
|
+
label: 'Same Window',
|
|
243
|
+
value: '_self'
|
|
244
|
+
}, {
|
|
245
|
+
label: 'New Window',
|
|
246
|
+
value: '_blank'
|
|
247
|
+
}, {
|
|
248
|
+
label: 'Parent Window',
|
|
249
|
+
value: '_parent'
|
|
250
|
+
}, {
|
|
251
|
+
label: 'Top Window',
|
|
252
|
+
value: '_top'
|
|
253
|
+
}],
|
|
254
|
+
onChange: function onChange(value) {
|
|
255
|
+
return setAttributes({
|
|
256
|
+
target: value
|
|
257
|
+
});
|
|
258
|
+
}
|
|
259
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
260
|
+
label: "Link Rel",
|
|
261
|
+
value: rel,
|
|
262
|
+
onChange: function onChange(value) {
|
|
263
|
+
return setAttributes({
|
|
264
|
+
rel: value
|
|
265
|
+
});
|
|
266
|
+
},
|
|
267
|
+
placeholder: "noopener noreferrer"
|
|
268
|
+
})), /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
269
|
+
title: "Advanced",
|
|
270
|
+
initialOpen: false
|
|
271
|
+
}, /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
272
|
+
label: "Button Type",
|
|
273
|
+
value: type,
|
|
274
|
+
options: [{
|
|
275
|
+
label: 'Button',
|
|
276
|
+
value: 'button'
|
|
277
|
+
}, {
|
|
278
|
+
label: 'Submit',
|
|
279
|
+
value: 'submit'
|
|
280
|
+
}, {
|
|
281
|
+
label: 'Reset',
|
|
282
|
+
value: 'reset'
|
|
283
|
+
}],
|
|
284
|
+
onChange: function onChange(value) {
|
|
285
|
+
return setAttributes({
|
|
286
|
+
type: value
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
290
|
+
label: "Aria Label",
|
|
291
|
+
value: ariaLabel,
|
|
292
|
+
onChange: function onChange(value) {
|
|
293
|
+
return setAttributes({
|
|
294
|
+
ariaLabel: value
|
|
295
|
+
});
|
|
296
|
+
},
|
|
297
|
+
help: "Accessible name for icon-only buttons"
|
|
298
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
299
|
+
label: "Icon Left",
|
|
300
|
+
value: iconLeft,
|
|
301
|
+
onChange: function onChange(value) {
|
|
302
|
+
return setAttributes({
|
|
303
|
+
iconLeft: value
|
|
304
|
+
});
|
|
305
|
+
},
|
|
306
|
+
placeholder: "Icon name"
|
|
307
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
308
|
+
label: "Icon Right",
|
|
309
|
+
value: iconRight,
|
|
310
|
+
onChange: function onChange(value) {
|
|
311
|
+
return setAttributes({
|
|
312
|
+
iconRight: value
|
|
313
|
+
});
|
|
314
|
+
},
|
|
315
|
+
placeholder: "Icon name"
|
|
316
|
+
}))));
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
function Save(_ref) {
|
|
320
|
+
var attributes = _ref.attributes;
|
|
321
|
+
var label = attributes.label,
|
|
322
|
+
intent = attributes.intent,
|
|
323
|
+
size = attributes.size,
|
|
324
|
+
behaviour = attributes.behaviour,
|
|
325
|
+
state = attributes.state,
|
|
326
|
+
disabled = attributes.disabled,
|
|
327
|
+
href = attributes.href,
|
|
328
|
+
target = attributes.target,
|
|
329
|
+
rel = attributes.rel,
|
|
330
|
+
type = attributes.type;
|
|
331
|
+
attributes.iconLeft;
|
|
332
|
+
attributes.iconRight;
|
|
333
|
+
var ariaLabel = attributes.ariaLabel;
|
|
334
|
+
var blockProps = blockEditor.useBlockProps.save({
|
|
335
|
+
className: 'tds-button-wrapper'
|
|
336
|
+
});
|
|
337
|
+
var buttonClass = buildButtonClass({
|
|
338
|
+
intent: intent,
|
|
339
|
+
size: size,
|
|
340
|
+
behaviour: behaviour,
|
|
341
|
+
state: state,
|
|
342
|
+
disabled: disabled
|
|
343
|
+
});
|
|
344
|
+
var Element = href ? 'a' : 'button';
|
|
345
|
+
return /*#__PURE__*/React.createElement("div", blockProps, /*#__PURE__*/React.createElement(Element, {
|
|
346
|
+
className: buttonClass,
|
|
347
|
+
disabled: !href && disabled,
|
|
348
|
+
href: href,
|
|
349
|
+
target: target,
|
|
350
|
+
rel: rel,
|
|
351
|
+
type: !href ? type : undefined,
|
|
352
|
+
"aria-label": ariaLabel
|
|
353
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
354
|
+
className: "tds-button__label-container"
|
|
355
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
356
|
+
className: "tds-button__label"
|
|
357
|
+
}, label))));
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
var $schema$9 = "https://schemas.wp.org/trunk/block.json";
|
|
361
|
+
var apiVersion$9 = 3;
|
|
362
|
+
var name$9 = "times/button";
|
|
363
|
+
var title$9 = "Button";
|
|
364
|
+
var category$9 = "common";
|
|
365
|
+
var description$9 = "A customizable button component for user interactions";
|
|
366
|
+
var icon$9 = "admin-generic";
|
|
367
|
+
var supports$9 = {
|
|
368
|
+
html: false,
|
|
369
|
+
spacing: {
|
|
370
|
+
margin: true,
|
|
371
|
+
padding: false
|
|
372
|
+
},
|
|
373
|
+
align: true,
|
|
374
|
+
customClassName: true
|
|
375
|
+
};
|
|
376
|
+
var textdomain = "times-design-system";
|
|
377
|
+
var attributes$9 = {
|
|
378
|
+
label: {
|
|
379
|
+
type: "string",
|
|
380
|
+
"default": "Button label",
|
|
381
|
+
description: "The text label displayed inside the button"
|
|
382
|
+
},
|
|
383
|
+
intent: {
|
|
384
|
+
type: "string",
|
|
385
|
+
"enum": [
|
|
386
|
+
"primary",
|
|
387
|
+
"secondary",
|
|
388
|
+
"negative"
|
|
389
|
+
],
|
|
390
|
+
"default": "primary",
|
|
391
|
+
description: "Visual style variant"
|
|
392
|
+
},
|
|
393
|
+
size: {
|
|
394
|
+
type: "string",
|
|
395
|
+
"enum": [
|
|
396
|
+
"small",
|
|
397
|
+
"medium",
|
|
398
|
+
"large"
|
|
399
|
+
],
|
|
400
|
+
"default": "large",
|
|
401
|
+
description: "Controls the overall dimensions of the button"
|
|
402
|
+
},
|
|
403
|
+
behaviour: {
|
|
404
|
+
type: "string",
|
|
405
|
+
"enum": [
|
|
406
|
+
"hug",
|
|
407
|
+
"full"
|
|
408
|
+
],
|
|
409
|
+
"default": "hug",
|
|
410
|
+
description: "Controls the width behaviour"
|
|
411
|
+
},
|
|
412
|
+
state: {
|
|
413
|
+
type: "string",
|
|
414
|
+
"enum": [
|
|
415
|
+
"base",
|
|
416
|
+
"hover",
|
|
417
|
+
"pressed",
|
|
418
|
+
"loading",
|
|
419
|
+
"disabled",
|
|
420
|
+
"focus"
|
|
421
|
+
],
|
|
422
|
+
"default": "base",
|
|
423
|
+
description: "The interaction state"
|
|
424
|
+
},
|
|
425
|
+
disabled: {
|
|
426
|
+
type: "boolean",
|
|
427
|
+
"default": false,
|
|
428
|
+
description: "Whether the button is disabled"
|
|
429
|
+
},
|
|
430
|
+
href: {
|
|
431
|
+
type: "string",
|
|
432
|
+
description: "Optional href to render as a link"
|
|
433
|
+
},
|
|
434
|
+
target: {
|
|
435
|
+
type: "string",
|
|
436
|
+
"enum": [
|
|
437
|
+
"_blank",
|
|
438
|
+
"_self",
|
|
439
|
+
"_parent",
|
|
440
|
+
"_top"
|
|
441
|
+
],
|
|
442
|
+
description: "Optional target attribute for links"
|
|
443
|
+
},
|
|
444
|
+
rel: {
|
|
445
|
+
type: "string",
|
|
446
|
+
description: "Optional rel attribute for links"
|
|
447
|
+
},
|
|
448
|
+
type: {
|
|
449
|
+
type: "string",
|
|
450
|
+
"enum": [
|
|
451
|
+
"button",
|
|
452
|
+
"submit",
|
|
453
|
+
"reset"
|
|
454
|
+
],
|
|
455
|
+
"default": "button",
|
|
456
|
+
description: "Button type"
|
|
457
|
+
},
|
|
458
|
+
iconLeft: {
|
|
459
|
+
type: "string",
|
|
460
|
+
description: "Icon name to display on the left side of the label"
|
|
461
|
+
},
|
|
462
|
+
iconRight: {
|
|
463
|
+
type: "string",
|
|
464
|
+
description: "Icon name to display on the right side of the label"
|
|
465
|
+
},
|
|
466
|
+
ariaLabel: {
|
|
467
|
+
type: "string",
|
|
468
|
+
description: "Accessible name for icon-only buttons"
|
|
469
|
+
}
|
|
470
|
+
};
|
|
471
|
+
var editorScript = "file:./index.js";
|
|
472
|
+
var editorStyle = "file:./style-editor.css";
|
|
473
|
+
var style = "file:./style.css";
|
|
474
|
+
var metadata$9 = {
|
|
475
|
+
$schema: $schema$9,
|
|
476
|
+
apiVersion: apiVersion$9,
|
|
477
|
+
name: name$9,
|
|
478
|
+
title: title$9,
|
|
479
|
+
category: category$9,
|
|
480
|
+
description: description$9,
|
|
481
|
+
icon: icon$9,
|
|
482
|
+
supports: supports$9,
|
|
483
|
+
textdomain: textdomain,
|
|
484
|
+
attributes: attributes$9,
|
|
485
|
+
editorScript: editorScript,
|
|
486
|
+
editorStyle: editorStyle,
|
|
487
|
+
style: style
|
|
488
|
+
};
|
|
489
|
+
|
|
490
|
+
blocks.registerBlockType(metadata$9.name, _objectSpread2(_objectSpread2({}, metadata$9), {}, {
|
|
491
|
+
edit: Edit,
|
|
492
|
+
save: Save
|
|
493
|
+
}));
|
|
494
|
+
|
|
495
|
+
var $schema$8 = "https://schemas.wp.org/trunk/block.json";
|
|
496
|
+
var apiVersion$8 = 3;
|
|
497
|
+
var name$8 = "times/divider";
|
|
498
|
+
var title$8 = "Divider";
|
|
499
|
+
var category$8 = "common";
|
|
500
|
+
var description$8 = "A horizontal line divider component";
|
|
501
|
+
var icon$8 = "minus";
|
|
502
|
+
var supports$8 = {
|
|
503
|
+
html: false,
|
|
504
|
+
spacing: {
|
|
505
|
+
margin: true
|
|
506
|
+
},
|
|
507
|
+
align: [
|
|
508
|
+
"wide",
|
|
509
|
+
"full"
|
|
510
|
+
]
|
|
511
|
+
};
|
|
512
|
+
var attributes$8 = {
|
|
513
|
+
isDashed: {
|
|
514
|
+
type: "boolean",
|
|
515
|
+
"default": false
|
|
516
|
+
},
|
|
517
|
+
isVertical: {
|
|
518
|
+
type: "boolean",
|
|
519
|
+
"default": false
|
|
520
|
+
},
|
|
521
|
+
padding: {
|
|
522
|
+
type: "boolean",
|
|
523
|
+
"default": false
|
|
524
|
+
}
|
|
525
|
+
};
|
|
526
|
+
var example$8 = {
|
|
527
|
+
};
|
|
528
|
+
var metadata$8 = {
|
|
529
|
+
$schema: $schema$8,
|
|
530
|
+
apiVersion: apiVersion$8,
|
|
531
|
+
name: name$8,
|
|
532
|
+
title: title$8,
|
|
533
|
+
category: category$8,
|
|
534
|
+
description: description$8,
|
|
535
|
+
icon: icon$8,
|
|
536
|
+
supports: supports$8,
|
|
537
|
+
attributes: attributes$8,
|
|
538
|
+
example: example$8
|
|
539
|
+
};
|
|
540
|
+
|
|
541
|
+
var edit$8 = function edit(_ref) {
|
|
542
|
+
var attributes = _ref.attributes,
|
|
543
|
+
setAttributes = _ref.setAttributes;
|
|
544
|
+
var isDashed = attributes.isDashed,
|
|
545
|
+
isVertical = attributes.isVertical,
|
|
546
|
+
padding = attributes.padding;
|
|
547
|
+
var blockProps = blockEditor.useBlockProps();
|
|
548
|
+
var buildDividerClass = function buildDividerClass() {
|
|
549
|
+
var classes = ['tds-divider'];
|
|
550
|
+
if (isDashed) classes.push('tds-divider--dashed');
|
|
551
|
+
if (isVertical) classes.push('tds-divider--vertical');
|
|
552
|
+
if (padding) classes.push('tds-divider--padding');
|
|
553
|
+
return classes.join(' ');
|
|
554
|
+
};
|
|
555
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
556
|
+
title: "Divider Settings"
|
|
557
|
+
}, /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
558
|
+
label: "Dashed",
|
|
559
|
+
checked: isDashed,
|
|
560
|
+
onChange: function onChange(val) {
|
|
561
|
+
return setAttributes({
|
|
562
|
+
isDashed: val
|
|
563
|
+
});
|
|
564
|
+
}
|
|
565
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
566
|
+
label: "Vertical",
|
|
567
|
+
checked: isVertical,
|
|
568
|
+
onChange: function onChange(val) {
|
|
569
|
+
return setAttributes({
|
|
570
|
+
isVertical: val
|
|
571
|
+
});
|
|
572
|
+
}
|
|
573
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
574
|
+
label: "Padding",
|
|
575
|
+
checked: padding,
|
|
576
|
+
onChange: function onChange(val) {
|
|
577
|
+
return setAttributes({
|
|
578
|
+
padding: val
|
|
579
|
+
});
|
|
580
|
+
}
|
|
581
|
+
}))), /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
582
|
+
className: buildDividerClass()
|
|
583
|
+
})));
|
|
584
|
+
};
|
|
585
|
+
|
|
586
|
+
var save$8 = function save(_ref) {
|
|
587
|
+
var attributes = _ref.attributes;
|
|
588
|
+
var isDashed = attributes.isDashed,
|
|
589
|
+
isVertical = attributes.isVertical,
|
|
590
|
+
padding = attributes.padding;
|
|
591
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
592
|
+
var buildDividerClass = function buildDividerClass() {
|
|
593
|
+
var classes = ['tds-divider'];
|
|
594
|
+
if (isDashed) classes.push('tds-divider--dashed');
|
|
595
|
+
if (isVertical) classes.push('tds-divider--vertical');
|
|
596
|
+
if (padding) classes.push('tds-divider--padding');
|
|
597
|
+
return classes.join(' ');
|
|
598
|
+
};
|
|
599
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
600
|
+
className: buildDividerClass()
|
|
601
|
+
}));
|
|
602
|
+
};
|
|
603
|
+
|
|
604
|
+
blocks.registerBlockType(metadata$8.name, _objectSpread2(_objectSpread2({}, metadata$8), {}, {
|
|
605
|
+
edit: edit$8,
|
|
606
|
+
save: save$8
|
|
607
|
+
}));
|
|
608
|
+
|
|
609
|
+
var $schema$7 = "https://schemas.wp.org/trunk/block.json";
|
|
610
|
+
var apiVersion$7 = 3;
|
|
611
|
+
var name$7 = "times/text";
|
|
612
|
+
var title$7 = "Text";
|
|
613
|
+
var category$7 = "common";
|
|
614
|
+
var description$7 = "Typography component for displaying text with style variants";
|
|
615
|
+
var icon$7 = "editor-paragraph";
|
|
616
|
+
var supports$7 = {
|
|
617
|
+
html: false,
|
|
618
|
+
spacing: {
|
|
619
|
+
margin: true,
|
|
620
|
+
padding: false
|
|
621
|
+
}
|
|
622
|
+
};
|
|
623
|
+
var attributes$7 = {
|
|
624
|
+
as: {
|
|
625
|
+
type: "string",
|
|
626
|
+
"default": "p",
|
|
627
|
+
"enum": [
|
|
628
|
+
"p",
|
|
629
|
+
"span",
|
|
630
|
+
"h1",
|
|
631
|
+
"h2",
|
|
632
|
+
"h3",
|
|
633
|
+
"h4",
|
|
634
|
+
"h5"
|
|
635
|
+
]
|
|
636
|
+
},
|
|
637
|
+
typographyStyle: {
|
|
638
|
+
type: "string",
|
|
639
|
+
"default": "body-standard"
|
|
640
|
+
},
|
|
641
|
+
content: {
|
|
642
|
+
type: "string",
|
|
643
|
+
"default": ""
|
|
644
|
+
}
|
|
645
|
+
};
|
|
646
|
+
var example$7 = {
|
|
647
|
+
};
|
|
648
|
+
var metadata$7 = {
|
|
649
|
+
$schema: $schema$7,
|
|
650
|
+
apiVersion: apiVersion$7,
|
|
651
|
+
name: name$7,
|
|
652
|
+
title: title$7,
|
|
653
|
+
category: category$7,
|
|
654
|
+
description: description$7,
|
|
655
|
+
icon: icon$7,
|
|
656
|
+
supports: supports$7,
|
|
657
|
+
attributes: attributes$7,
|
|
658
|
+
example: example$7
|
|
659
|
+
};
|
|
660
|
+
|
|
661
|
+
var edit$7 = function edit(_ref) {
|
|
662
|
+
var attributes = _ref.attributes,
|
|
663
|
+
setAttributes = _ref.setAttributes;
|
|
664
|
+
var as = attributes.as,
|
|
665
|
+
typographyStyle = attributes.typographyStyle,
|
|
666
|
+
content = attributes.content;
|
|
667
|
+
var blockProps = blockEditor.useBlockProps();
|
|
668
|
+
var tagName = as || 'p';
|
|
669
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
670
|
+
title: "Text Settings"
|
|
671
|
+
}, /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
672
|
+
label: "Tag",
|
|
673
|
+
value: as,
|
|
674
|
+
options: [{
|
|
675
|
+
label: 'Paragraph',
|
|
676
|
+
value: 'p'
|
|
677
|
+
}, {
|
|
678
|
+
label: 'Span',
|
|
679
|
+
value: 'span'
|
|
680
|
+
}, {
|
|
681
|
+
label: 'Heading 1',
|
|
682
|
+
value: 'h1'
|
|
683
|
+
}, {
|
|
684
|
+
label: 'Heading 2',
|
|
685
|
+
value: 'h2'
|
|
686
|
+
}, {
|
|
687
|
+
label: 'Heading 3',
|
|
688
|
+
value: 'h3'
|
|
689
|
+
}, {
|
|
690
|
+
label: 'Heading 4',
|
|
691
|
+
value: 'h4'
|
|
692
|
+
}, {
|
|
693
|
+
label: 'Heading 5',
|
|
694
|
+
value: 'h5'
|
|
695
|
+
}],
|
|
696
|
+
onChange: function onChange(val) {
|
|
697
|
+
return setAttributes({
|
|
698
|
+
as: val
|
|
699
|
+
});
|
|
700
|
+
}
|
|
701
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
702
|
+
label: "Typography Style",
|
|
703
|
+
value: typographyStyle,
|
|
704
|
+
options: [{
|
|
705
|
+
label: 'Body Standard',
|
|
706
|
+
value: 'body-standard'
|
|
707
|
+
}, {
|
|
708
|
+
label: 'Body Small',
|
|
709
|
+
value: 'body-small'
|
|
710
|
+
}, {
|
|
711
|
+
label: 'Headline',
|
|
712
|
+
value: 'headline'
|
|
713
|
+
}],
|
|
714
|
+
onChange: function onChange(val) {
|
|
715
|
+
return setAttributes({
|
|
716
|
+
typographyStyle: val
|
|
717
|
+
});
|
|
718
|
+
}
|
|
719
|
+
}))), /*#__PURE__*/React.createElement(blockEditor.RichText, _extends({}, blockProps, {
|
|
720
|
+
tagName: tagName,
|
|
721
|
+
value: content,
|
|
722
|
+
onChange: function onChange(val) {
|
|
723
|
+
return setAttributes({
|
|
724
|
+
content: val
|
|
725
|
+
});
|
|
726
|
+
},
|
|
727
|
+
className: "tds-text tds-text--".concat(typographyStyle),
|
|
728
|
+
placeholder: "Enter text..."
|
|
729
|
+
})));
|
|
730
|
+
};
|
|
731
|
+
|
|
732
|
+
var save$7 = function save(_ref) {
|
|
733
|
+
var attributes = _ref.attributes;
|
|
734
|
+
var as = attributes.as,
|
|
735
|
+
typographyStyle = attributes.typographyStyle,
|
|
736
|
+
content = attributes.content;
|
|
737
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
738
|
+
var tagName = as || 'p';
|
|
739
|
+
return /*#__PURE__*/React.createElement(blockEditor.RichText.Content, _extends({}, blockProps, {
|
|
740
|
+
tagName: tagName,
|
|
741
|
+
value: content,
|
|
742
|
+
className: "tds-text tds-text--".concat(typographyStyle)
|
|
743
|
+
}));
|
|
744
|
+
};
|
|
745
|
+
|
|
746
|
+
blocks.registerBlockType(metadata$7.name, _objectSpread2(_objectSpread2({}, metadata$7), {}, {
|
|
747
|
+
edit: edit$7,
|
|
748
|
+
save: save$7
|
|
749
|
+
}));
|
|
750
|
+
|
|
751
|
+
var $schema$6 = "https://schemas.wp.org/trunk/block.json";
|
|
752
|
+
var apiVersion$6 = 3;
|
|
753
|
+
var name$6 = "times/input";
|
|
754
|
+
var title$6 = "Input";
|
|
755
|
+
var category$6 = "common";
|
|
756
|
+
var description$6 = "Form input field component";
|
|
757
|
+
var icon$6 = "text";
|
|
758
|
+
var supports$6 = {
|
|
759
|
+
html: false,
|
|
760
|
+
spacing: {
|
|
761
|
+
margin: true
|
|
762
|
+
}
|
|
763
|
+
};
|
|
764
|
+
var attributes$6 = {
|
|
765
|
+
label: {
|
|
766
|
+
type: "string",
|
|
767
|
+
"default": ""
|
|
768
|
+
},
|
|
769
|
+
placeholder: {
|
|
770
|
+
type: "string",
|
|
771
|
+
"default": ""
|
|
772
|
+
},
|
|
773
|
+
type: {
|
|
774
|
+
type: "string",
|
|
775
|
+
"default": "text",
|
|
776
|
+
"enum": [
|
|
777
|
+
"text",
|
|
778
|
+
"email",
|
|
779
|
+
"password",
|
|
780
|
+
"number",
|
|
781
|
+
"tel",
|
|
782
|
+
"url"
|
|
783
|
+
]
|
|
784
|
+
},
|
|
785
|
+
disabled: {
|
|
786
|
+
type: "boolean",
|
|
787
|
+
"default": false
|
|
788
|
+
},
|
|
789
|
+
required: {
|
|
790
|
+
type: "boolean",
|
|
791
|
+
"default": false
|
|
792
|
+
},
|
|
793
|
+
name: {
|
|
794
|
+
type: "string",
|
|
795
|
+
"default": ""
|
|
796
|
+
},
|
|
797
|
+
id: {
|
|
798
|
+
type: "string",
|
|
799
|
+
"default": ""
|
|
800
|
+
}
|
|
801
|
+
};
|
|
802
|
+
var example$6 = {
|
|
803
|
+
};
|
|
804
|
+
var metadata$6 = {
|
|
805
|
+
$schema: $schema$6,
|
|
806
|
+
apiVersion: apiVersion$6,
|
|
807
|
+
name: name$6,
|
|
808
|
+
title: title$6,
|
|
809
|
+
category: category$6,
|
|
810
|
+
description: description$6,
|
|
811
|
+
icon: icon$6,
|
|
812
|
+
supports: supports$6,
|
|
813
|
+
attributes: attributes$6,
|
|
814
|
+
example: example$6
|
|
815
|
+
};
|
|
816
|
+
|
|
817
|
+
var edit$6 = function edit(_ref) {
|
|
818
|
+
var attributes = _ref.attributes,
|
|
819
|
+
setAttributes = _ref.setAttributes;
|
|
820
|
+
var label = attributes.label,
|
|
821
|
+
placeholder = attributes.placeholder,
|
|
822
|
+
type = attributes.type,
|
|
823
|
+
disabled = attributes.disabled,
|
|
824
|
+
required = attributes.required,
|
|
825
|
+
name = attributes.name,
|
|
826
|
+
id = attributes.id;
|
|
827
|
+
var blockProps = blockEditor.useBlockProps();
|
|
828
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
829
|
+
title: "Input Settings"
|
|
830
|
+
}, /*#__PURE__*/React.createElement(components.TextControl, {
|
|
831
|
+
label: "Label",
|
|
832
|
+
value: label,
|
|
833
|
+
onChange: function onChange(val) {
|
|
834
|
+
return setAttributes({
|
|
835
|
+
label: val
|
|
836
|
+
});
|
|
837
|
+
}
|
|
838
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
839
|
+
label: "Placeholder",
|
|
840
|
+
value: placeholder,
|
|
841
|
+
onChange: function onChange(val) {
|
|
842
|
+
return setAttributes({
|
|
843
|
+
placeholder: val
|
|
844
|
+
});
|
|
845
|
+
}
|
|
846
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
847
|
+
label: "Type",
|
|
848
|
+
value: type,
|
|
849
|
+
options: [{
|
|
850
|
+
label: 'Text',
|
|
851
|
+
value: 'text'
|
|
852
|
+
}, {
|
|
853
|
+
label: 'Email',
|
|
854
|
+
value: 'email'
|
|
855
|
+
}, {
|
|
856
|
+
label: 'Password',
|
|
857
|
+
value: 'password'
|
|
858
|
+
}, {
|
|
859
|
+
label: 'Number',
|
|
860
|
+
value: 'number'
|
|
861
|
+
}, {
|
|
862
|
+
label: 'Tel',
|
|
863
|
+
value: 'tel'
|
|
864
|
+
}, {
|
|
865
|
+
label: 'URL',
|
|
866
|
+
value: 'url'
|
|
867
|
+
}],
|
|
868
|
+
onChange: function onChange(val) {
|
|
869
|
+
return setAttributes({
|
|
870
|
+
type: val
|
|
871
|
+
});
|
|
872
|
+
}
|
|
873
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
874
|
+
label: "Name",
|
|
875
|
+
value: name,
|
|
876
|
+
onChange: function onChange(val) {
|
|
877
|
+
return setAttributes({
|
|
878
|
+
name: val
|
|
879
|
+
});
|
|
880
|
+
}
|
|
881
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
882
|
+
label: "ID",
|
|
883
|
+
value: id,
|
|
884
|
+
onChange: function onChange(val) {
|
|
885
|
+
return setAttributes({
|
|
886
|
+
id: val
|
|
887
|
+
});
|
|
888
|
+
}
|
|
889
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
890
|
+
label: "Required",
|
|
891
|
+
checked: required,
|
|
892
|
+
onChange: function onChange(val) {
|
|
893
|
+
return setAttributes({
|
|
894
|
+
required: val
|
|
895
|
+
});
|
|
896
|
+
}
|
|
897
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
898
|
+
label: "Disabled",
|
|
899
|
+
checked: disabled,
|
|
900
|
+
onChange: function onChange(val) {
|
|
901
|
+
return setAttributes({
|
|
902
|
+
disabled: val
|
|
903
|
+
});
|
|
904
|
+
}
|
|
905
|
+
}))), /*#__PURE__*/React.createElement("div", blockProps, label && /*#__PURE__*/React.createElement("label", {
|
|
906
|
+
className: "tds-input__label"
|
|
907
|
+
}, label), /*#__PURE__*/React.createElement("input", {
|
|
908
|
+
type: type,
|
|
909
|
+
placeholder: placeholder,
|
|
910
|
+
disabled: disabled,
|
|
911
|
+
required: required,
|
|
912
|
+
name: name,
|
|
913
|
+
id: id,
|
|
914
|
+
className: "tds-input"
|
|
915
|
+
})));
|
|
916
|
+
};
|
|
917
|
+
|
|
918
|
+
var save$6 = function save(_ref) {
|
|
919
|
+
var attributes = _ref.attributes;
|
|
920
|
+
var label = attributes.label,
|
|
921
|
+
placeholder = attributes.placeholder,
|
|
922
|
+
type = attributes.type,
|
|
923
|
+
disabled = attributes.disabled,
|
|
924
|
+
required = attributes.required,
|
|
925
|
+
name = attributes.name,
|
|
926
|
+
id = attributes.id;
|
|
927
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
928
|
+
return /*#__PURE__*/React.createElement("div", blockProps, label && /*#__PURE__*/React.createElement("label", {
|
|
929
|
+
htmlFor: id,
|
|
930
|
+
className: "tds-input__label"
|
|
931
|
+
}, label), /*#__PURE__*/React.createElement("input", {
|
|
932
|
+
type: type,
|
|
933
|
+
placeholder: placeholder,
|
|
934
|
+
disabled: disabled,
|
|
935
|
+
required: required,
|
|
936
|
+
name: name,
|
|
937
|
+
id: id,
|
|
938
|
+
className: "tds-input"
|
|
939
|
+
}));
|
|
940
|
+
};
|
|
941
|
+
|
|
942
|
+
blocks.registerBlockType(metadata$6.name, _objectSpread2(_objectSpread2({}, metadata$6), {}, {
|
|
943
|
+
edit: edit$6,
|
|
944
|
+
save: save$6
|
|
945
|
+
}));
|
|
946
|
+
|
|
947
|
+
var $schema$5 = "https://schemas.wp.org/trunk/block.json";
|
|
948
|
+
var apiVersion$5 = 3;
|
|
949
|
+
var name$5 = "times/icon-button";
|
|
950
|
+
var title$5 = "Icon Button";
|
|
951
|
+
var category$5 = "common";
|
|
952
|
+
var description$5 = "Button component displaying only an icon";
|
|
953
|
+
var icon$5 = "button";
|
|
954
|
+
var supports$5 = {
|
|
955
|
+
html: false,
|
|
956
|
+
spacing: {
|
|
957
|
+
margin: true
|
|
958
|
+
}
|
|
959
|
+
};
|
|
960
|
+
var attributes$5 = {
|
|
961
|
+
iconName: {
|
|
962
|
+
type: "string",
|
|
963
|
+
"default": ""
|
|
964
|
+
},
|
|
965
|
+
round: {
|
|
966
|
+
type: "boolean",
|
|
967
|
+
"default": false
|
|
968
|
+
},
|
|
969
|
+
href: {
|
|
970
|
+
type: "string",
|
|
971
|
+
"default": ""
|
|
972
|
+
},
|
|
973
|
+
target: {
|
|
974
|
+
type: "string",
|
|
975
|
+
"default": "_self",
|
|
976
|
+
"enum": [
|
|
977
|
+
"_self",
|
|
978
|
+
"_blank",
|
|
979
|
+
"_parent",
|
|
980
|
+
"_top"
|
|
981
|
+
]
|
|
982
|
+
},
|
|
983
|
+
rel: {
|
|
984
|
+
type: "string",
|
|
985
|
+
"default": ""
|
|
986
|
+
},
|
|
987
|
+
ariaLabel: {
|
|
988
|
+
type: "string",
|
|
989
|
+
"default": ""
|
|
990
|
+
}
|
|
991
|
+
};
|
|
992
|
+
var example$5 = {
|
|
993
|
+
};
|
|
994
|
+
var metadata$5 = {
|
|
995
|
+
$schema: $schema$5,
|
|
996
|
+
apiVersion: apiVersion$5,
|
|
997
|
+
name: name$5,
|
|
998
|
+
title: title$5,
|
|
999
|
+
category: category$5,
|
|
1000
|
+
description: description$5,
|
|
1001
|
+
icon: icon$5,
|
|
1002
|
+
supports: supports$5,
|
|
1003
|
+
attributes: attributes$5,
|
|
1004
|
+
example: example$5
|
|
1005
|
+
};
|
|
1006
|
+
|
|
1007
|
+
var edit$5 = function edit(_ref) {
|
|
1008
|
+
var attributes = _ref.attributes,
|
|
1009
|
+
setAttributes = _ref.setAttributes;
|
|
1010
|
+
var iconName = attributes.iconName,
|
|
1011
|
+
round = attributes.round,
|
|
1012
|
+
href = attributes.href,
|
|
1013
|
+
target = attributes.target,
|
|
1014
|
+
rel = attributes.rel,
|
|
1015
|
+
ariaLabel = attributes.ariaLabel;
|
|
1016
|
+
var blockProps = blockEditor.useBlockProps();
|
|
1017
|
+
var buildClass = function buildClass() {
|
|
1018
|
+
var classes = ['tds-icon-button'];
|
|
1019
|
+
if (round) classes.push('tds-icon-button--round');
|
|
1020
|
+
return classes.join(' ');
|
|
1021
|
+
};
|
|
1022
|
+
var Element = href ? 'a' : 'button';
|
|
1023
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
1024
|
+
title: "Icon Button Settings"
|
|
1025
|
+
}, /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1026
|
+
label: "Icon Name",
|
|
1027
|
+
value: iconName,
|
|
1028
|
+
onChange: function onChange(val) {
|
|
1029
|
+
return setAttributes({
|
|
1030
|
+
iconName: val
|
|
1031
|
+
});
|
|
1032
|
+
},
|
|
1033
|
+
placeholder: "e.g., arrow-right"
|
|
1034
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
1035
|
+
label: "Round",
|
|
1036
|
+
checked: round,
|
|
1037
|
+
onChange: function onChange(val) {
|
|
1038
|
+
return setAttributes({
|
|
1039
|
+
round: val
|
|
1040
|
+
});
|
|
1041
|
+
}
|
|
1042
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1043
|
+
label: "URL (Leave empty for button)",
|
|
1044
|
+
value: href,
|
|
1045
|
+
onChange: function onChange(val) {
|
|
1046
|
+
return setAttributes({
|
|
1047
|
+
href: val
|
|
1048
|
+
});
|
|
1049
|
+
}
|
|
1050
|
+
}), href && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1051
|
+
label: "Target",
|
|
1052
|
+
value: target,
|
|
1053
|
+
options: [{
|
|
1054
|
+
label: 'Same window',
|
|
1055
|
+
value: '_self'
|
|
1056
|
+
}, {
|
|
1057
|
+
label: 'New window',
|
|
1058
|
+
value: '_blank'
|
|
1059
|
+
}, {
|
|
1060
|
+
label: 'Parent',
|
|
1061
|
+
value: '_parent'
|
|
1062
|
+
}, {
|
|
1063
|
+
label: 'Top',
|
|
1064
|
+
value: '_top'
|
|
1065
|
+
}],
|
|
1066
|
+
onChange: function onChange(val) {
|
|
1067
|
+
return setAttributes({
|
|
1068
|
+
target: val
|
|
1069
|
+
});
|
|
1070
|
+
}
|
|
1071
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1072
|
+
label: "Rel",
|
|
1073
|
+
value: rel,
|
|
1074
|
+
onChange: function onChange(val) {
|
|
1075
|
+
return setAttributes({
|
|
1076
|
+
rel: val
|
|
1077
|
+
});
|
|
1078
|
+
}
|
|
1079
|
+
})), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1080
|
+
label: "Aria Label",
|
|
1081
|
+
value: ariaLabel,
|
|
1082
|
+
onChange: function onChange(val) {
|
|
1083
|
+
return setAttributes({
|
|
1084
|
+
ariaLabel: val
|
|
1085
|
+
});
|
|
1086
|
+
}
|
|
1087
|
+
}))), /*#__PURE__*/React.createElement(Element, _extends({}, blockProps, {
|
|
1088
|
+
className: buildClass(),
|
|
1089
|
+
href: href || undefined,
|
|
1090
|
+
target: href ? target : undefined,
|
|
1091
|
+
rel: href && rel ? rel : undefined,
|
|
1092
|
+
"aria-label": ariaLabel
|
|
1093
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
1094
|
+
className: "tds-icon-button__icon"
|
|
1095
|
+
}, iconName)));
|
|
1096
|
+
};
|
|
1097
|
+
|
|
1098
|
+
var save$5 = function save(_ref) {
|
|
1099
|
+
var attributes = _ref.attributes;
|
|
1100
|
+
var iconName = attributes.iconName,
|
|
1101
|
+
round = attributes.round,
|
|
1102
|
+
href = attributes.href,
|
|
1103
|
+
target = attributes.target,
|
|
1104
|
+
rel = attributes.rel,
|
|
1105
|
+
ariaLabel = attributes.ariaLabel;
|
|
1106
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
1107
|
+
var buildClass = function buildClass() {
|
|
1108
|
+
var classes = ['tds-icon-button'];
|
|
1109
|
+
if (round) classes.push('tds-icon-button--round');
|
|
1110
|
+
return classes.join(' ');
|
|
1111
|
+
};
|
|
1112
|
+
var Element = href ? 'a' : 'button';
|
|
1113
|
+
return /*#__PURE__*/React.createElement(Element, _extends({}, blockProps, {
|
|
1114
|
+
className: buildClass(),
|
|
1115
|
+
href: href || undefined,
|
|
1116
|
+
target: href ? target : undefined,
|
|
1117
|
+
rel: href && rel ? rel : undefined,
|
|
1118
|
+
"aria-label": ariaLabel
|
|
1119
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
1120
|
+
className: "tds-icon-button__icon"
|
|
1121
|
+
}, iconName));
|
|
1122
|
+
};
|
|
1123
|
+
|
|
1124
|
+
blocks.registerBlockType(metadata$5.name, _objectSpread2(_objectSpread2({}, metadata$5), {}, {
|
|
1125
|
+
edit: edit$5,
|
|
1126
|
+
save: save$5
|
|
1127
|
+
}));
|
|
1128
|
+
|
|
1129
|
+
var $schema$4 = "https://schemas.wp.org/trunk/block.json";
|
|
1130
|
+
var apiVersion$4 = 3;
|
|
1131
|
+
var name$4 = "times/chip";
|
|
1132
|
+
var title$4 = "Chip";
|
|
1133
|
+
var category$4 = "common";
|
|
1134
|
+
var description$4 = "Small component for displaying labels, tags, or filter options";
|
|
1135
|
+
var icon$4 = "tag";
|
|
1136
|
+
var supports$4 = {
|
|
1137
|
+
html: false,
|
|
1138
|
+
spacing: {
|
|
1139
|
+
margin: true
|
|
1140
|
+
}
|
|
1141
|
+
};
|
|
1142
|
+
var attributes$4 = {
|
|
1143
|
+
content: {
|
|
1144
|
+
type: "string",
|
|
1145
|
+
"default": ""
|
|
1146
|
+
},
|
|
1147
|
+
intent: {
|
|
1148
|
+
type: "string",
|
|
1149
|
+
"default": "secondary",
|
|
1150
|
+
"enum": [
|
|
1151
|
+
"primary",
|
|
1152
|
+
"secondary",
|
|
1153
|
+
"negative"
|
|
1154
|
+
]
|
|
1155
|
+
},
|
|
1156
|
+
size: {
|
|
1157
|
+
type: "string",
|
|
1158
|
+
"default": "medium",
|
|
1159
|
+
"enum": [
|
|
1160
|
+
"small",
|
|
1161
|
+
"medium",
|
|
1162
|
+
"large"
|
|
1163
|
+
]
|
|
1164
|
+
},
|
|
1165
|
+
state: {
|
|
1166
|
+
type: "string",
|
|
1167
|
+
"default": "base",
|
|
1168
|
+
"enum": [
|
|
1169
|
+
"base",
|
|
1170
|
+
"hover",
|
|
1171
|
+
"pressed",
|
|
1172
|
+
"disabled"
|
|
1173
|
+
]
|
|
1174
|
+
},
|
|
1175
|
+
channel: {
|
|
1176
|
+
type: "boolean",
|
|
1177
|
+
"default": false
|
|
1178
|
+
},
|
|
1179
|
+
toggle: {
|
|
1180
|
+
type: "boolean",
|
|
1181
|
+
"default": false
|
|
1182
|
+
},
|
|
1183
|
+
iconLeft: {
|
|
1184
|
+
type: "string",
|
|
1185
|
+
"default": ""
|
|
1186
|
+
},
|
|
1187
|
+
iconRight: {
|
|
1188
|
+
type: "string",
|
|
1189
|
+
"default": ""
|
|
1190
|
+
},
|
|
1191
|
+
ariaLabel: {
|
|
1192
|
+
type: "string",
|
|
1193
|
+
"default": ""
|
|
1194
|
+
}
|
|
1195
|
+
};
|
|
1196
|
+
var example$4 = {
|
|
1197
|
+
};
|
|
1198
|
+
var metadata$4 = {
|
|
1199
|
+
$schema: $schema$4,
|
|
1200
|
+
apiVersion: apiVersion$4,
|
|
1201
|
+
name: name$4,
|
|
1202
|
+
title: title$4,
|
|
1203
|
+
category: category$4,
|
|
1204
|
+
description: description$4,
|
|
1205
|
+
icon: icon$4,
|
|
1206
|
+
supports: supports$4,
|
|
1207
|
+
attributes: attributes$4,
|
|
1208
|
+
example: example$4
|
|
1209
|
+
};
|
|
1210
|
+
|
|
1211
|
+
var edit$4 = function edit(_ref) {
|
|
1212
|
+
var attributes = _ref.attributes,
|
|
1213
|
+
setAttributes = _ref.setAttributes;
|
|
1214
|
+
var content = attributes.content,
|
|
1215
|
+
intent = attributes.intent,
|
|
1216
|
+
size = attributes.size,
|
|
1217
|
+
state = attributes.state,
|
|
1218
|
+
channel = attributes.channel,
|
|
1219
|
+
toggle = attributes.toggle,
|
|
1220
|
+
iconLeft = attributes.iconLeft,
|
|
1221
|
+
iconRight = attributes.iconRight,
|
|
1222
|
+
ariaLabel = attributes.ariaLabel;
|
|
1223
|
+
var blockProps = blockEditor.useBlockProps();
|
|
1224
|
+
var buildClass = function buildClass() {
|
|
1225
|
+
var classes = ['tds-chip'];
|
|
1226
|
+
classes.push("tds-chip--intent-".concat(intent));
|
|
1227
|
+
classes.push("tds-chip--size-".concat(size));
|
|
1228
|
+
classes.push("tds-chip--state-".concat(state));
|
|
1229
|
+
if (channel) classes.push('tds-chip--channel');
|
|
1230
|
+
if (toggle) classes.push('tds-chip--toggle');
|
|
1231
|
+
return classes.join(' ');
|
|
1232
|
+
};
|
|
1233
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
1234
|
+
title: "Chip Settings"
|
|
1235
|
+
}, /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1236
|
+
label: "Intent",
|
|
1237
|
+
value: intent,
|
|
1238
|
+
options: [{
|
|
1239
|
+
label: 'Primary',
|
|
1240
|
+
value: 'primary'
|
|
1241
|
+
}, {
|
|
1242
|
+
label: 'Secondary',
|
|
1243
|
+
value: 'secondary'
|
|
1244
|
+
}, {
|
|
1245
|
+
label: 'Negative',
|
|
1246
|
+
value: 'negative'
|
|
1247
|
+
}],
|
|
1248
|
+
onChange: function onChange(val) {
|
|
1249
|
+
return setAttributes({
|
|
1250
|
+
intent: val
|
|
1251
|
+
});
|
|
1252
|
+
}
|
|
1253
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1254
|
+
label: "Size",
|
|
1255
|
+
value: size,
|
|
1256
|
+
options: [{
|
|
1257
|
+
label: 'Small',
|
|
1258
|
+
value: 'small'
|
|
1259
|
+
}, {
|
|
1260
|
+
label: 'Medium',
|
|
1261
|
+
value: 'medium'
|
|
1262
|
+
}, {
|
|
1263
|
+
label: 'Large',
|
|
1264
|
+
value: 'large'
|
|
1265
|
+
}],
|
|
1266
|
+
onChange: function onChange(val) {
|
|
1267
|
+
return setAttributes({
|
|
1268
|
+
size: val
|
|
1269
|
+
});
|
|
1270
|
+
}
|
|
1271
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1272
|
+
label: "State",
|
|
1273
|
+
value: state,
|
|
1274
|
+
options: [{
|
|
1275
|
+
label: 'Base',
|
|
1276
|
+
value: 'base'
|
|
1277
|
+
}, {
|
|
1278
|
+
label: 'Hover',
|
|
1279
|
+
value: 'hover'
|
|
1280
|
+
}, {
|
|
1281
|
+
label: 'Pressed',
|
|
1282
|
+
value: 'pressed'
|
|
1283
|
+
}, {
|
|
1284
|
+
label: 'Disabled',
|
|
1285
|
+
value: 'disabled'
|
|
1286
|
+
}],
|
|
1287
|
+
onChange: function onChange(val) {
|
|
1288
|
+
return setAttributes({
|
|
1289
|
+
state: val
|
|
1290
|
+
});
|
|
1291
|
+
}
|
|
1292
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
1293
|
+
label: "Channel",
|
|
1294
|
+
checked: channel,
|
|
1295
|
+
onChange: function onChange(val) {
|
|
1296
|
+
return setAttributes({
|
|
1297
|
+
channel: val
|
|
1298
|
+
});
|
|
1299
|
+
}
|
|
1300
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
1301
|
+
label: "Toggle",
|
|
1302
|
+
checked: toggle,
|
|
1303
|
+
onChange: function onChange(val) {
|
|
1304
|
+
return setAttributes({
|
|
1305
|
+
toggle: val
|
|
1306
|
+
});
|
|
1307
|
+
}
|
|
1308
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1309
|
+
label: "Left Icon",
|
|
1310
|
+
value: iconLeft,
|
|
1311
|
+
onChange: function onChange(val) {
|
|
1312
|
+
return setAttributes({
|
|
1313
|
+
iconLeft: val
|
|
1314
|
+
});
|
|
1315
|
+
}
|
|
1316
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1317
|
+
label: "Right Icon",
|
|
1318
|
+
value: iconRight,
|
|
1319
|
+
onChange: function onChange(val) {
|
|
1320
|
+
return setAttributes({
|
|
1321
|
+
iconRight: val
|
|
1322
|
+
});
|
|
1323
|
+
}
|
|
1324
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1325
|
+
label: "Aria Label",
|
|
1326
|
+
value: ariaLabel,
|
|
1327
|
+
onChange: function onChange(val) {
|
|
1328
|
+
return setAttributes({
|
|
1329
|
+
ariaLabel: val
|
|
1330
|
+
});
|
|
1331
|
+
}
|
|
1332
|
+
}))), /*#__PURE__*/React.createElement("button", _extends({}, blockProps, {
|
|
1333
|
+
className: buildClass(),
|
|
1334
|
+
"aria-label": ariaLabel
|
|
1335
|
+
}), iconLeft && /*#__PURE__*/React.createElement("span", {
|
|
1336
|
+
className: "tds-chip__icon-left"
|
|
1337
|
+
}, iconLeft), /*#__PURE__*/React.createElement(blockEditor.RichText, {
|
|
1338
|
+
value: content,
|
|
1339
|
+
onChange: function onChange(val) {
|
|
1340
|
+
return setAttributes({
|
|
1341
|
+
content: val
|
|
1342
|
+
});
|
|
1343
|
+
},
|
|
1344
|
+
placeholder: "Chip text",
|
|
1345
|
+
className: "tds-chip__content"
|
|
1346
|
+
}), iconRight && /*#__PURE__*/React.createElement("span", {
|
|
1347
|
+
className: "tds-chip__icon-right"
|
|
1348
|
+
}, iconRight)));
|
|
1349
|
+
};
|
|
1350
|
+
|
|
1351
|
+
var save$4 = function save(_ref) {
|
|
1352
|
+
var attributes = _ref.attributes;
|
|
1353
|
+
var content = attributes.content,
|
|
1354
|
+
intent = attributes.intent,
|
|
1355
|
+
size = attributes.size,
|
|
1356
|
+
state = attributes.state,
|
|
1357
|
+
channel = attributes.channel,
|
|
1358
|
+
toggle = attributes.toggle,
|
|
1359
|
+
iconLeft = attributes.iconLeft,
|
|
1360
|
+
iconRight = attributes.iconRight,
|
|
1361
|
+
ariaLabel = attributes.ariaLabel;
|
|
1362
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
1363
|
+
var buildClass = function buildClass() {
|
|
1364
|
+
var classes = ['tds-chip'];
|
|
1365
|
+
classes.push("tds-chip--intent-".concat(intent));
|
|
1366
|
+
classes.push("tds-chip--size-".concat(size));
|
|
1367
|
+
classes.push("tds-chip--state-".concat(state));
|
|
1368
|
+
if (channel) classes.push('tds-chip--channel');
|
|
1369
|
+
if (toggle) classes.push('tds-chip--toggle');
|
|
1370
|
+
return classes.join(' ');
|
|
1371
|
+
};
|
|
1372
|
+
return /*#__PURE__*/React.createElement("button", _extends({}, blockProps, {
|
|
1373
|
+
className: buildClass(),
|
|
1374
|
+
"aria-label": ariaLabel
|
|
1375
|
+
}), iconLeft && /*#__PURE__*/React.createElement("span", {
|
|
1376
|
+
className: "tds-chip__icon-left"
|
|
1377
|
+
}, iconLeft), /*#__PURE__*/React.createElement(blockEditor.RichText.Content, {
|
|
1378
|
+
value: content,
|
|
1379
|
+
className: "tds-chip__content"
|
|
1380
|
+
}), iconRight && /*#__PURE__*/React.createElement("span", {
|
|
1381
|
+
className: "tds-chip__icon-right"
|
|
1382
|
+
}, iconRight));
|
|
1383
|
+
};
|
|
1384
|
+
|
|
1385
|
+
blocks.registerBlockType(metadata$4.name, _objectSpread2(_objectSpread2({}, metadata$4), {}, {
|
|
1386
|
+
edit: edit$4,
|
|
1387
|
+
save: save$4
|
|
1388
|
+
}));
|
|
1389
|
+
|
|
1390
|
+
var $schema$3 = "https://schemas.wp.org/trunk/block.json";
|
|
1391
|
+
var apiVersion$3 = 3;
|
|
1392
|
+
var name$3 = "times/flag";
|
|
1393
|
+
var title$3 = "Flag";
|
|
1394
|
+
var category$3 = "common";
|
|
1395
|
+
var description$3 = "Badge or status indicator component";
|
|
1396
|
+
var icon$3 = "flag";
|
|
1397
|
+
var supports$3 = {
|
|
1398
|
+
html: false,
|
|
1399
|
+
spacing: {
|
|
1400
|
+
margin: true
|
|
1401
|
+
}
|
|
1402
|
+
};
|
|
1403
|
+
var attributes$3 = {
|
|
1404
|
+
label: {
|
|
1405
|
+
type: "string",
|
|
1406
|
+
"default": ""
|
|
1407
|
+
},
|
|
1408
|
+
content: {
|
|
1409
|
+
type: "string",
|
|
1410
|
+
"default": ""
|
|
1411
|
+
},
|
|
1412
|
+
intent: {
|
|
1413
|
+
type: "string",
|
|
1414
|
+
"default": "secondary",
|
|
1415
|
+
"enum": [
|
|
1416
|
+
"primary",
|
|
1417
|
+
"secondary",
|
|
1418
|
+
"negative",
|
|
1419
|
+
"positive"
|
|
1420
|
+
]
|
|
1421
|
+
},
|
|
1422
|
+
size: {
|
|
1423
|
+
type: "string",
|
|
1424
|
+
"default": "medium",
|
|
1425
|
+
"enum": [
|
|
1426
|
+
"small",
|
|
1427
|
+
"medium",
|
|
1428
|
+
"large"
|
|
1429
|
+
]
|
|
1430
|
+
},
|
|
1431
|
+
iconLeft: {
|
|
1432
|
+
type: "string",
|
|
1433
|
+
"default": ""
|
|
1434
|
+
},
|
|
1435
|
+
iconRight: {
|
|
1436
|
+
type: "string",
|
|
1437
|
+
"default": ""
|
|
1438
|
+
},
|
|
1439
|
+
ariaLabel: {
|
|
1440
|
+
type: "string",
|
|
1441
|
+
"default": ""
|
|
1442
|
+
}
|
|
1443
|
+
};
|
|
1444
|
+
var example$3 = {
|
|
1445
|
+
};
|
|
1446
|
+
var metadata$3 = {
|
|
1447
|
+
$schema: $schema$3,
|
|
1448
|
+
apiVersion: apiVersion$3,
|
|
1449
|
+
name: name$3,
|
|
1450
|
+
title: title$3,
|
|
1451
|
+
category: category$3,
|
|
1452
|
+
description: description$3,
|
|
1453
|
+
icon: icon$3,
|
|
1454
|
+
supports: supports$3,
|
|
1455
|
+
attributes: attributes$3,
|
|
1456
|
+
example: example$3
|
|
1457
|
+
};
|
|
1458
|
+
|
|
1459
|
+
var edit$3 = function edit(_ref) {
|
|
1460
|
+
var attributes = _ref.attributes,
|
|
1461
|
+
setAttributes = _ref.setAttributes;
|
|
1462
|
+
var label = attributes.label,
|
|
1463
|
+
content = attributes.content,
|
|
1464
|
+
intent = attributes.intent,
|
|
1465
|
+
size = attributes.size,
|
|
1466
|
+
iconLeft = attributes.iconLeft,
|
|
1467
|
+
iconRight = attributes.iconRight,
|
|
1468
|
+
ariaLabel = attributes.ariaLabel;
|
|
1469
|
+
var blockProps = blockEditor.useBlockProps();
|
|
1470
|
+
var buildClass = function buildClass() {
|
|
1471
|
+
var classes = ['tds-flag'];
|
|
1472
|
+
classes.push("tds-flag--intent-".concat(intent));
|
|
1473
|
+
classes.push("tds-flag--size-".concat(size));
|
|
1474
|
+
return classes.join(' ');
|
|
1475
|
+
};
|
|
1476
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
1477
|
+
title: "Flag Settings"
|
|
1478
|
+
}, /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1479
|
+
label: "Label",
|
|
1480
|
+
value: label,
|
|
1481
|
+
onChange: function onChange(val) {
|
|
1482
|
+
return setAttributes({
|
|
1483
|
+
label: val
|
|
1484
|
+
});
|
|
1485
|
+
}
|
|
1486
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1487
|
+
label: "Intent",
|
|
1488
|
+
value: intent,
|
|
1489
|
+
options: [{
|
|
1490
|
+
label: 'Primary',
|
|
1491
|
+
value: 'primary'
|
|
1492
|
+
}, {
|
|
1493
|
+
label: 'Secondary',
|
|
1494
|
+
value: 'secondary'
|
|
1495
|
+
}, {
|
|
1496
|
+
label: 'Negative',
|
|
1497
|
+
value: 'negative'
|
|
1498
|
+
}, {
|
|
1499
|
+
label: 'Positive',
|
|
1500
|
+
value: 'positive'
|
|
1501
|
+
}],
|
|
1502
|
+
onChange: function onChange(val) {
|
|
1503
|
+
return setAttributes({
|
|
1504
|
+
intent: val
|
|
1505
|
+
});
|
|
1506
|
+
}
|
|
1507
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1508
|
+
label: "Size",
|
|
1509
|
+
value: size,
|
|
1510
|
+
options: [{
|
|
1511
|
+
label: 'Small',
|
|
1512
|
+
value: 'small'
|
|
1513
|
+
}, {
|
|
1514
|
+
label: 'Medium',
|
|
1515
|
+
value: 'medium'
|
|
1516
|
+
}, {
|
|
1517
|
+
label: 'Large',
|
|
1518
|
+
value: 'large'
|
|
1519
|
+
}],
|
|
1520
|
+
onChange: function onChange(val) {
|
|
1521
|
+
return setAttributes({
|
|
1522
|
+
size: val
|
|
1523
|
+
});
|
|
1524
|
+
}
|
|
1525
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1526
|
+
label: "Left Icon",
|
|
1527
|
+
value: iconLeft,
|
|
1528
|
+
onChange: function onChange(val) {
|
|
1529
|
+
return setAttributes({
|
|
1530
|
+
iconLeft: val
|
|
1531
|
+
});
|
|
1532
|
+
}
|
|
1533
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1534
|
+
label: "Right Icon",
|
|
1535
|
+
value: iconRight,
|
|
1536
|
+
onChange: function onChange(val) {
|
|
1537
|
+
return setAttributes({
|
|
1538
|
+
iconRight: val
|
|
1539
|
+
});
|
|
1540
|
+
}
|
|
1541
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1542
|
+
label: "Aria Label",
|
|
1543
|
+
value: ariaLabel,
|
|
1544
|
+
onChange: function onChange(val) {
|
|
1545
|
+
return setAttributes({
|
|
1546
|
+
ariaLabel: val
|
|
1547
|
+
});
|
|
1548
|
+
}
|
|
1549
|
+
}))), /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
1550
|
+
className: buildClass(),
|
|
1551
|
+
"aria-label": ariaLabel
|
|
1552
|
+
}), label && /*#__PURE__*/React.createElement("div", {
|
|
1553
|
+
className: "tds-flag__label"
|
|
1554
|
+
}, label), iconLeft && /*#__PURE__*/React.createElement("span", {
|
|
1555
|
+
className: "tds-flag__icon-left"
|
|
1556
|
+
}, iconLeft), /*#__PURE__*/React.createElement(blockEditor.RichText, {
|
|
1557
|
+
value: content,
|
|
1558
|
+
onChange: function onChange(val) {
|
|
1559
|
+
return setAttributes({
|
|
1560
|
+
content: val
|
|
1561
|
+
});
|
|
1562
|
+
},
|
|
1563
|
+
placeholder: "Flag content",
|
|
1564
|
+
className: "tds-flag__content"
|
|
1565
|
+
}), iconRight && /*#__PURE__*/React.createElement("span", {
|
|
1566
|
+
className: "tds-flag__icon-right"
|
|
1567
|
+
}, iconRight)));
|
|
1568
|
+
};
|
|
1569
|
+
|
|
1570
|
+
var save$3 = function save(_ref) {
|
|
1571
|
+
var attributes = _ref.attributes;
|
|
1572
|
+
var label = attributes.label,
|
|
1573
|
+
content = attributes.content,
|
|
1574
|
+
intent = attributes.intent,
|
|
1575
|
+
size = attributes.size,
|
|
1576
|
+
iconLeft = attributes.iconLeft,
|
|
1577
|
+
iconRight = attributes.iconRight,
|
|
1578
|
+
ariaLabel = attributes.ariaLabel;
|
|
1579
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
1580
|
+
var buildClass = function buildClass() {
|
|
1581
|
+
var classes = ['tds-flag'];
|
|
1582
|
+
classes.push("tds-flag--intent-".concat(intent));
|
|
1583
|
+
classes.push("tds-flag--size-".concat(size));
|
|
1584
|
+
return classes.join(' ');
|
|
1585
|
+
};
|
|
1586
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
1587
|
+
className: buildClass(),
|
|
1588
|
+
"aria-label": ariaLabel
|
|
1589
|
+
}), label && /*#__PURE__*/React.createElement("div", {
|
|
1590
|
+
className: "tds-flag__label"
|
|
1591
|
+
}, label), iconLeft && /*#__PURE__*/React.createElement("span", {
|
|
1592
|
+
className: "tds-flag__icon-left"
|
|
1593
|
+
}, iconLeft), /*#__PURE__*/React.createElement(blockEditor.RichText.Content, {
|
|
1594
|
+
value: content,
|
|
1595
|
+
className: "tds-flag__content"
|
|
1596
|
+
}), iconRight && /*#__PURE__*/React.createElement("span", {
|
|
1597
|
+
className: "tds-flag__icon-right"
|
|
1598
|
+
}, iconRight));
|
|
1599
|
+
};
|
|
1600
|
+
|
|
1601
|
+
blocks.registerBlockType(metadata$3.name, _objectSpread2(_objectSpread2({}, metadata$3), {}, {
|
|
1602
|
+
edit: edit$3,
|
|
1603
|
+
save: save$3
|
|
1604
|
+
}));
|
|
1605
|
+
|
|
1606
|
+
var $schema$2 = "https://schemas.wp.org/trunk/block.json";
|
|
1607
|
+
var apiVersion$2 = 3;
|
|
1608
|
+
var name$2 = "times/toast";
|
|
1609
|
+
var title$2 = "Toast";
|
|
1610
|
+
var category$2 = "common";
|
|
1611
|
+
var description$2 = "Notification toast component";
|
|
1612
|
+
var icon$2 = "bell";
|
|
1613
|
+
var supports$2 = {
|
|
1614
|
+
html: false,
|
|
1615
|
+
spacing: {
|
|
1616
|
+
margin: true
|
|
1617
|
+
}
|
|
1618
|
+
};
|
|
1619
|
+
var attributes$2 = {
|
|
1620
|
+
label: {
|
|
1621
|
+
type: "string",
|
|
1622
|
+
"default": ""
|
|
1623
|
+
},
|
|
1624
|
+
intent: {
|
|
1625
|
+
type: "string",
|
|
1626
|
+
"default": "info",
|
|
1627
|
+
"enum": [
|
|
1628
|
+
"info",
|
|
1629
|
+
"success",
|
|
1630
|
+
"warning",
|
|
1631
|
+
"error"
|
|
1632
|
+
]
|
|
1633
|
+
},
|
|
1634
|
+
link: {
|
|
1635
|
+
type: "boolean",
|
|
1636
|
+
"default": false
|
|
1637
|
+
},
|
|
1638
|
+
linkLabel: {
|
|
1639
|
+
type: "string",
|
|
1640
|
+
"default": ""
|
|
1641
|
+
},
|
|
1642
|
+
timeout: {
|
|
1643
|
+
type: "number",
|
|
1644
|
+
"default": 5000
|
|
1645
|
+
}
|
|
1646
|
+
};
|
|
1647
|
+
var example$2 = {
|
|
1648
|
+
};
|
|
1649
|
+
var metadata$2 = {
|
|
1650
|
+
$schema: $schema$2,
|
|
1651
|
+
apiVersion: apiVersion$2,
|
|
1652
|
+
name: name$2,
|
|
1653
|
+
title: title$2,
|
|
1654
|
+
category: category$2,
|
|
1655
|
+
description: description$2,
|
|
1656
|
+
icon: icon$2,
|
|
1657
|
+
supports: supports$2,
|
|
1658
|
+
attributes: attributes$2,
|
|
1659
|
+
example: example$2
|
|
1660
|
+
};
|
|
1661
|
+
|
|
1662
|
+
var edit$2 = function edit(_ref) {
|
|
1663
|
+
var attributes = _ref.attributes,
|
|
1664
|
+
setAttributes = _ref.setAttributes;
|
|
1665
|
+
var label = attributes.label,
|
|
1666
|
+
intent = attributes.intent,
|
|
1667
|
+
link = attributes.link,
|
|
1668
|
+
linkLabel = attributes.linkLabel,
|
|
1669
|
+
timeout = attributes.timeout;
|
|
1670
|
+
var blockProps = blockEditor.useBlockProps();
|
|
1671
|
+
var buildClass = function buildClass() {
|
|
1672
|
+
var classes = ['tds-toast'];
|
|
1673
|
+
classes.push("tds-toast--intent-".concat(intent));
|
|
1674
|
+
return classes.join(' ');
|
|
1675
|
+
};
|
|
1676
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
1677
|
+
title: "Toast Settings"
|
|
1678
|
+
}, /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1679
|
+
label: "Label",
|
|
1680
|
+
value: label,
|
|
1681
|
+
onChange: function onChange(val) {
|
|
1682
|
+
return setAttributes({
|
|
1683
|
+
label: val
|
|
1684
|
+
});
|
|
1685
|
+
}
|
|
1686
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1687
|
+
label: "Intent",
|
|
1688
|
+
value: intent,
|
|
1689
|
+
options: [{
|
|
1690
|
+
label: 'Info',
|
|
1691
|
+
value: 'info'
|
|
1692
|
+
}, {
|
|
1693
|
+
label: 'Success',
|
|
1694
|
+
value: 'success'
|
|
1695
|
+
}, {
|
|
1696
|
+
label: 'Warning',
|
|
1697
|
+
value: 'warning'
|
|
1698
|
+
}, {
|
|
1699
|
+
label: 'Error',
|
|
1700
|
+
value: 'error'
|
|
1701
|
+
}],
|
|
1702
|
+
onChange: function onChange(val) {
|
|
1703
|
+
return setAttributes({
|
|
1704
|
+
intent: val
|
|
1705
|
+
});
|
|
1706
|
+
}
|
|
1707
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
1708
|
+
label: "Show Link",
|
|
1709
|
+
checked: link,
|
|
1710
|
+
onChange: function onChange(val) {
|
|
1711
|
+
return setAttributes({
|
|
1712
|
+
link: val
|
|
1713
|
+
});
|
|
1714
|
+
}
|
|
1715
|
+
}), link && /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1716
|
+
label: "Link Label",
|
|
1717
|
+
value: linkLabel,
|
|
1718
|
+
onChange: function onChange(val) {
|
|
1719
|
+
return setAttributes({
|
|
1720
|
+
linkLabel: val
|
|
1721
|
+
});
|
|
1722
|
+
}
|
|
1723
|
+
}), /*#__PURE__*/React.createElement(components.NumberControl, {
|
|
1724
|
+
label: "Timeout (ms)",
|
|
1725
|
+
value: timeout,
|
|
1726
|
+
onChange: function onChange(val) {
|
|
1727
|
+
return setAttributes({
|
|
1728
|
+
timeout: val || 0
|
|
1729
|
+
});
|
|
1730
|
+
},
|
|
1731
|
+
min: 0,
|
|
1732
|
+
step: 1000
|
|
1733
|
+
}))), /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
1734
|
+
className: buildClass(),
|
|
1735
|
+
role: "status",
|
|
1736
|
+
"aria-live": "polite"
|
|
1737
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
1738
|
+
className: "tds-toast__content"
|
|
1739
|
+
}, /*#__PURE__*/React.createElement(blockEditor.RichText, {
|
|
1740
|
+
value: label,
|
|
1741
|
+
onChange: function onChange(val) {
|
|
1742
|
+
return setAttributes({
|
|
1743
|
+
label: val
|
|
1744
|
+
});
|
|
1745
|
+
},
|
|
1746
|
+
placeholder: "Toast message",
|
|
1747
|
+
className: "tds-toast__label"
|
|
1748
|
+
})), link && /*#__PURE__*/React.createElement("button", {
|
|
1749
|
+
className: "tds-toast__link"
|
|
1750
|
+
}, linkLabel)));
|
|
1751
|
+
};
|
|
1752
|
+
|
|
1753
|
+
var save$2 = function save(_ref) {
|
|
1754
|
+
var attributes = _ref.attributes;
|
|
1755
|
+
var label = attributes.label,
|
|
1756
|
+
intent = attributes.intent,
|
|
1757
|
+
link = attributes.link,
|
|
1758
|
+
linkLabel = attributes.linkLabel,
|
|
1759
|
+
timeout = attributes.timeout;
|
|
1760
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
1761
|
+
var buildClass = function buildClass() {
|
|
1762
|
+
var classes = ['tds-toast'];
|
|
1763
|
+
classes.push("tds-toast--intent-".concat(intent));
|
|
1764
|
+
return classes.join(' ');
|
|
1765
|
+
};
|
|
1766
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
1767
|
+
className: buildClass(),
|
|
1768
|
+
role: "status",
|
|
1769
|
+
"aria-live": "polite",
|
|
1770
|
+
"data-timeout": timeout
|
|
1771
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
1772
|
+
className: "tds-toast__content"
|
|
1773
|
+
}, /*#__PURE__*/React.createElement(blockEditor.RichText.Content, {
|
|
1774
|
+
value: label,
|
|
1775
|
+
className: "tds-toast__label"
|
|
1776
|
+
})), link && /*#__PURE__*/React.createElement("button", {
|
|
1777
|
+
className: "tds-toast__link"
|
|
1778
|
+
}, linkLabel));
|
|
1779
|
+
};
|
|
1780
|
+
|
|
1781
|
+
blocks.registerBlockType(metadata$2.name, _objectSpread2(_objectSpread2({}, metadata$2), {}, {
|
|
1782
|
+
edit: edit$2,
|
|
1783
|
+
save: save$2
|
|
1784
|
+
}));
|
|
1785
|
+
|
|
1786
|
+
var $schema$1 = "https://schemas.wp.org/trunk/block.json";
|
|
1787
|
+
var apiVersion$1 = 3;
|
|
1788
|
+
var name$1 = "times/link";
|
|
1789
|
+
var title$1 = "Link";
|
|
1790
|
+
var category$1 = "common";
|
|
1791
|
+
var description$1 = "Styled link component with variants and states";
|
|
1792
|
+
var icon$1 = "link";
|
|
1793
|
+
var supports$1 = {
|
|
1794
|
+
html: false,
|
|
1795
|
+
spacing: {
|
|
1796
|
+
margin: true
|
|
1797
|
+
}
|
|
1798
|
+
};
|
|
1799
|
+
var attributes$1 = {
|
|
1800
|
+
href: {
|
|
1801
|
+
type: "string",
|
|
1802
|
+
"default": ""
|
|
1803
|
+
},
|
|
1804
|
+
content: {
|
|
1805
|
+
type: "string",
|
|
1806
|
+
"default": ""
|
|
1807
|
+
},
|
|
1808
|
+
intent: {
|
|
1809
|
+
type: "string",
|
|
1810
|
+
"default": "primary",
|
|
1811
|
+
"enum": [
|
|
1812
|
+
"primary",
|
|
1813
|
+
"secondary",
|
|
1814
|
+
"negative"
|
|
1815
|
+
]
|
|
1816
|
+
},
|
|
1817
|
+
sentiment: {
|
|
1818
|
+
type: "string",
|
|
1819
|
+
"default": "neutral",
|
|
1820
|
+
"enum": [
|
|
1821
|
+
"neutral",
|
|
1822
|
+
"positive",
|
|
1823
|
+
"negative"
|
|
1824
|
+
]
|
|
1825
|
+
},
|
|
1826
|
+
size: {
|
|
1827
|
+
type: "string",
|
|
1828
|
+
"default": "medium",
|
|
1829
|
+
"enum": [
|
|
1830
|
+
"small",
|
|
1831
|
+
"medium",
|
|
1832
|
+
"large"
|
|
1833
|
+
]
|
|
1834
|
+
},
|
|
1835
|
+
state: {
|
|
1836
|
+
type: "string",
|
|
1837
|
+
"default": "base",
|
|
1838
|
+
"enum": [
|
|
1839
|
+
"base",
|
|
1840
|
+
"hover",
|
|
1841
|
+
"visited",
|
|
1842
|
+
"focus",
|
|
1843
|
+
"disabled"
|
|
1844
|
+
]
|
|
1845
|
+
},
|
|
1846
|
+
iconLeft: {
|
|
1847
|
+
type: "string",
|
|
1848
|
+
"default": ""
|
|
1849
|
+
},
|
|
1850
|
+
iconRight: {
|
|
1851
|
+
type: "string",
|
|
1852
|
+
"default": ""
|
|
1853
|
+
},
|
|
1854
|
+
inline: {
|
|
1855
|
+
type: "boolean",
|
|
1856
|
+
"default": true
|
|
1857
|
+
},
|
|
1858
|
+
ariaLabel: {
|
|
1859
|
+
type: "string",
|
|
1860
|
+
"default": ""
|
|
1861
|
+
},
|
|
1862
|
+
target: {
|
|
1863
|
+
type: "string",
|
|
1864
|
+
"default": "_self",
|
|
1865
|
+
"enum": [
|
|
1866
|
+
"_self",
|
|
1867
|
+
"_blank",
|
|
1868
|
+
"_parent",
|
|
1869
|
+
"_top"
|
|
1870
|
+
]
|
|
1871
|
+
},
|
|
1872
|
+
rel: {
|
|
1873
|
+
type: "string",
|
|
1874
|
+
"default": ""
|
|
1875
|
+
}
|
|
1876
|
+
};
|
|
1877
|
+
var example$1 = {
|
|
1878
|
+
};
|
|
1879
|
+
var metadata$1 = {
|
|
1880
|
+
$schema: $schema$1,
|
|
1881
|
+
apiVersion: apiVersion$1,
|
|
1882
|
+
name: name$1,
|
|
1883
|
+
title: title$1,
|
|
1884
|
+
category: category$1,
|
|
1885
|
+
description: description$1,
|
|
1886
|
+
icon: icon$1,
|
|
1887
|
+
supports: supports$1,
|
|
1888
|
+
attributes: attributes$1,
|
|
1889
|
+
example: example$1
|
|
1890
|
+
};
|
|
1891
|
+
|
|
1892
|
+
var edit$1 = function edit(_ref) {
|
|
1893
|
+
var attributes = _ref.attributes,
|
|
1894
|
+
setAttributes = _ref.setAttributes;
|
|
1895
|
+
var href = attributes.href,
|
|
1896
|
+
content = attributes.content,
|
|
1897
|
+
intent = attributes.intent,
|
|
1898
|
+
sentiment = attributes.sentiment,
|
|
1899
|
+
size = attributes.size,
|
|
1900
|
+
state = attributes.state,
|
|
1901
|
+
iconLeft = attributes.iconLeft,
|
|
1902
|
+
iconRight = attributes.iconRight,
|
|
1903
|
+
inline = attributes.inline,
|
|
1904
|
+
ariaLabel = attributes.ariaLabel,
|
|
1905
|
+
target = attributes.target,
|
|
1906
|
+
rel = attributes.rel;
|
|
1907
|
+
var blockProps = blockEditor.useBlockProps();
|
|
1908
|
+
var buildClass = function buildClass() {
|
|
1909
|
+
var classes = ['tds-link'];
|
|
1910
|
+
classes.push("tds-link--intent-".concat(intent));
|
|
1911
|
+
classes.push("tds-link--sentiment-".concat(sentiment));
|
|
1912
|
+
classes.push("tds-link--size-".concat(size));
|
|
1913
|
+
classes.push("tds-link--state-".concat(state));
|
|
1914
|
+
if (!inline) classes.push('tds-link--block');
|
|
1915
|
+
return classes.join(' ');
|
|
1916
|
+
};
|
|
1917
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
1918
|
+
title: "Link Settings"
|
|
1919
|
+
}, /*#__PURE__*/React.createElement(components.TextControl, {
|
|
1920
|
+
label: "URL",
|
|
1921
|
+
value: href,
|
|
1922
|
+
onChange: function onChange(val) {
|
|
1923
|
+
return setAttributes({
|
|
1924
|
+
href: val
|
|
1925
|
+
});
|
|
1926
|
+
},
|
|
1927
|
+
type: "url"
|
|
1928
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1929
|
+
label: "Intent",
|
|
1930
|
+
value: intent,
|
|
1931
|
+
options: [{
|
|
1932
|
+
label: 'Primary',
|
|
1933
|
+
value: 'primary'
|
|
1934
|
+
}, {
|
|
1935
|
+
label: 'Secondary',
|
|
1936
|
+
value: 'secondary'
|
|
1937
|
+
}, {
|
|
1938
|
+
label: 'Negative',
|
|
1939
|
+
value: 'negative'
|
|
1940
|
+
}],
|
|
1941
|
+
onChange: function onChange(val) {
|
|
1942
|
+
return setAttributes({
|
|
1943
|
+
intent: val
|
|
1944
|
+
});
|
|
1945
|
+
}
|
|
1946
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1947
|
+
label: "Sentiment",
|
|
1948
|
+
value: sentiment,
|
|
1949
|
+
options: [{
|
|
1950
|
+
label: 'Neutral',
|
|
1951
|
+
value: 'neutral'
|
|
1952
|
+
}, {
|
|
1953
|
+
label: 'Positive',
|
|
1954
|
+
value: 'positive'
|
|
1955
|
+
}, {
|
|
1956
|
+
label: 'Negative',
|
|
1957
|
+
value: 'negative'
|
|
1958
|
+
}],
|
|
1959
|
+
onChange: function onChange(val) {
|
|
1960
|
+
return setAttributes({
|
|
1961
|
+
sentiment: val
|
|
1962
|
+
});
|
|
1963
|
+
}
|
|
1964
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1965
|
+
label: "Size",
|
|
1966
|
+
value: size,
|
|
1967
|
+
options: [{
|
|
1968
|
+
label: 'Small',
|
|
1969
|
+
value: 'small'
|
|
1970
|
+
}, {
|
|
1971
|
+
label: 'Medium',
|
|
1972
|
+
value: 'medium'
|
|
1973
|
+
}, {
|
|
1974
|
+
label: 'Large',
|
|
1975
|
+
value: 'large'
|
|
1976
|
+
}],
|
|
1977
|
+
onChange: function onChange(val) {
|
|
1978
|
+
return setAttributes({
|
|
1979
|
+
size: val
|
|
1980
|
+
});
|
|
1981
|
+
}
|
|
1982
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
1983
|
+
label: "State",
|
|
1984
|
+
value: state,
|
|
1985
|
+
options: [{
|
|
1986
|
+
label: 'Base',
|
|
1987
|
+
value: 'base'
|
|
1988
|
+
}, {
|
|
1989
|
+
label: 'Hover',
|
|
1990
|
+
value: 'hover'
|
|
1991
|
+
}, {
|
|
1992
|
+
label: 'Visited',
|
|
1993
|
+
value: 'visited'
|
|
1994
|
+
}, {
|
|
1995
|
+
label: 'Focus',
|
|
1996
|
+
value: 'focus'
|
|
1997
|
+
}, {
|
|
1998
|
+
label: 'Disabled',
|
|
1999
|
+
value: 'disabled'
|
|
2000
|
+
}],
|
|
2001
|
+
onChange: function onChange(val) {
|
|
2002
|
+
return setAttributes({
|
|
2003
|
+
state: val
|
|
2004
|
+
});
|
|
2005
|
+
}
|
|
2006
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
2007
|
+
label: "Left Icon",
|
|
2008
|
+
value: iconLeft,
|
|
2009
|
+
onChange: function onChange(val) {
|
|
2010
|
+
return setAttributes({
|
|
2011
|
+
iconLeft: val
|
|
2012
|
+
});
|
|
2013
|
+
}
|
|
2014
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
2015
|
+
label: "Right Icon",
|
|
2016
|
+
value: iconRight,
|
|
2017
|
+
onChange: function onChange(val) {
|
|
2018
|
+
return setAttributes({
|
|
2019
|
+
iconRight: val
|
|
2020
|
+
});
|
|
2021
|
+
}
|
|
2022
|
+
}), /*#__PURE__*/React.createElement(components.ToggleControl, {
|
|
2023
|
+
label: "Inline",
|
|
2024
|
+
checked: inline,
|
|
2025
|
+
onChange: function onChange(val) {
|
|
2026
|
+
return setAttributes({
|
|
2027
|
+
inline: val
|
|
2028
|
+
});
|
|
2029
|
+
}
|
|
2030
|
+
}), /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
2031
|
+
label: "Target",
|
|
2032
|
+
value: target,
|
|
2033
|
+
options: [{
|
|
2034
|
+
label: 'Same window',
|
|
2035
|
+
value: '_self'
|
|
2036
|
+
}, {
|
|
2037
|
+
label: 'New window',
|
|
2038
|
+
value: '_blank'
|
|
2039
|
+
}, {
|
|
2040
|
+
label: 'Parent',
|
|
2041
|
+
value: '_parent'
|
|
2042
|
+
}, {
|
|
2043
|
+
label: 'Top',
|
|
2044
|
+
value: '_top'
|
|
2045
|
+
}],
|
|
2046
|
+
onChange: function onChange(val) {
|
|
2047
|
+
return setAttributes({
|
|
2048
|
+
target: val
|
|
2049
|
+
});
|
|
2050
|
+
}
|
|
2051
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
2052
|
+
label: "Rel",
|
|
2053
|
+
value: rel,
|
|
2054
|
+
onChange: function onChange(val) {
|
|
2055
|
+
return setAttributes({
|
|
2056
|
+
rel: val
|
|
2057
|
+
});
|
|
2058
|
+
}
|
|
2059
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
2060
|
+
label: "Aria Label",
|
|
2061
|
+
value: ariaLabel,
|
|
2062
|
+
onChange: function onChange(val) {
|
|
2063
|
+
return setAttributes({
|
|
2064
|
+
ariaLabel: val
|
|
2065
|
+
});
|
|
2066
|
+
}
|
|
2067
|
+
}))), /*#__PURE__*/React.createElement("a", _extends({}, blockProps, {
|
|
2068
|
+
href: href || '#',
|
|
2069
|
+
className: buildClass(),
|
|
2070
|
+
"aria-label": ariaLabel,
|
|
2071
|
+
target: target,
|
|
2072
|
+
rel: rel
|
|
2073
|
+
}), iconLeft && /*#__PURE__*/React.createElement("span", {
|
|
2074
|
+
className: "tds-link__icon-left"
|
|
2075
|
+
}, iconLeft), /*#__PURE__*/React.createElement(blockEditor.RichText, {
|
|
2076
|
+
value: content,
|
|
2077
|
+
onChange: function onChange(val) {
|
|
2078
|
+
return setAttributes({
|
|
2079
|
+
content: val
|
|
2080
|
+
});
|
|
2081
|
+
},
|
|
2082
|
+
placeholder: "Link text",
|
|
2083
|
+
className: "tds-link__content"
|
|
2084
|
+
}), iconRight && /*#__PURE__*/React.createElement("span", {
|
|
2085
|
+
className: "tds-link__icon-right"
|
|
2086
|
+
}, iconRight)));
|
|
2087
|
+
};
|
|
2088
|
+
|
|
2089
|
+
var save$1 = function save(_ref) {
|
|
2090
|
+
var attributes = _ref.attributes;
|
|
2091
|
+
var href = attributes.href,
|
|
2092
|
+
content = attributes.content,
|
|
2093
|
+
intent = attributes.intent,
|
|
2094
|
+
sentiment = attributes.sentiment,
|
|
2095
|
+
size = attributes.size,
|
|
2096
|
+
state = attributes.state,
|
|
2097
|
+
iconLeft = attributes.iconLeft,
|
|
2098
|
+
iconRight = attributes.iconRight,
|
|
2099
|
+
inline = attributes.inline,
|
|
2100
|
+
ariaLabel = attributes.ariaLabel,
|
|
2101
|
+
target = attributes.target,
|
|
2102
|
+
rel = attributes.rel;
|
|
2103
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
2104
|
+
var buildClass = function buildClass() {
|
|
2105
|
+
var classes = ['tds-link'];
|
|
2106
|
+
classes.push("tds-link--intent-".concat(intent));
|
|
2107
|
+
classes.push("tds-link--sentiment-".concat(sentiment));
|
|
2108
|
+
classes.push("tds-link--size-".concat(size));
|
|
2109
|
+
classes.push("tds-link--state-".concat(state));
|
|
2110
|
+
if (!inline) classes.push('tds-link--block');
|
|
2111
|
+
return classes.join(' ');
|
|
2112
|
+
};
|
|
2113
|
+
return /*#__PURE__*/React.createElement("a", _extends({}, blockProps, {
|
|
2114
|
+
href: href,
|
|
2115
|
+
className: buildClass(),
|
|
2116
|
+
"aria-label": ariaLabel,
|
|
2117
|
+
target: target !== '_self' ? target : undefined,
|
|
2118
|
+
rel: rel || undefined
|
|
2119
|
+
}), iconLeft && /*#__PURE__*/React.createElement("span", {
|
|
2120
|
+
className: "tds-link__icon-left"
|
|
2121
|
+
}, iconLeft), /*#__PURE__*/React.createElement(blockEditor.RichText.Content, {
|
|
2122
|
+
value: content,
|
|
2123
|
+
className: "tds-link__content"
|
|
2124
|
+
}), iconRight && /*#__PURE__*/React.createElement("span", {
|
|
2125
|
+
className: "tds-link__icon-right"
|
|
2126
|
+
}, iconRight));
|
|
2127
|
+
};
|
|
2128
|
+
|
|
2129
|
+
blocks.registerBlockType(metadata$1.name, _objectSpread2(_objectSpread2({}, metadata$1), {}, {
|
|
2130
|
+
edit: edit$1,
|
|
2131
|
+
save: save$1
|
|
2132
|
+
}));
|
|
2133
|
+
|
|
2134
|
+
var $schema = "https://schemas.wp.org/trunk/block.json";
|
|
2135
|
+
var apiVersion = 3;
|
|
2136
|
+
var name = "times/ad-container";
|
|
2137
|
+
var title = "Ad Container";
|
|
2138
|
+
var category = "common";
|
|
2139
|
+
var description = "Advertising container placeholder";
|
|
2140
|
+
var icon = "image";
|
|
2141
|
+
var supports = {
|
|
2142
|
+
html: false,
|
|
2143
|
+
spacing: {
|
|
2144
|
+
margin: true,
|
|
2145
|
+
padding: true
|
|
2146
|
+
}
|
|
2147
|
+
};
|
|
2148
|
+
var attributes = {
|
|
2149
|
+
type: {
|
|
2150
|
+
type: "string",
|
|
2151
|
+
"default": "inline",
|
|
2152
|
+
"enum": [
|
|
2153
|
+
"header",
|
|
2154
|
+
"inline"
|
|
2155
|
+
]
|
|
2156
|
+
},
|
|
2157
|
+
slotID: {
|
|
2158
|
+
type: "string",
|
|
2159
|
+
"default": ""
|
|
2160
|
+
}
|
|
2161
|
+
};
|
|
2162
|
+
var example = {
|
|
2163
|
+
};
|
|
2164
|
+
var metadata = {
|
|
2165
|
+
$schema: $schema,
|
|
2166
|
+
apiVersion: apiVersion,
|
|
2167
|
+
name: name,
|
|
2168
|
+
title: title,
|
|
2169
|
+
category: category,
|
|
2170
|
+
description: description,
|
|
2171
|
+
icon: icon,
|
|
2172
|
+
supports: supports,
|
|
2173
|
+
attributes: attributes,
|
|
2174
|
+
example: example
|
|
2175
|
+
};
|
|
2176
|
+
|
|
2177
|
+
var edit = function edit(_ref) {
|
|
2178
|
+
var attributes = _ref.attributes,
|
|
2179
|
+
setAttributes = _ref.setAttributes;
|
|
2180
|
+
var type = attributes.type,
|
|
2181
|
+
slotID = attributes.slotID;
|
|
2182
|
+
var blockProps = blockEditor.useBlockProps();
|
|
2183
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(blockEditor.InspectorControls, null, /*#__PURE__*/React.createElement(components.PanelBody, {
|
|
2184
|
+
title: "Ad Container Settings"
|
|
2185
|
+
}, /*#__PURE__*/React.createElement(components.SelectControl, {
|
|
2186
|
+
label: "Type",
|
|
2187
|
+
value: type,
|
|
2188
|
+
options: [{
|
|
2189
|
+
label: 'Header',
|
|
2190
|
+
value: 'header'
|
|
2191
|
+
}, {
|
|
2192
|
+
label: 'Inline',
|
|
2193
|
+
value: 'inline'
|
|
2194
|
+
}],
|
|
2195
|
+
onChange: function onChange(val) {
|
|
2196
|
+
return setAttributes({
|
|
2197
|
+
type: val
|
|
2198
|
+
});
|
|
2199
|
+
}
|
|
2200
|
+
}), /*#__PURE__*/React.createElement(components.TextControl, {
|
|
2201
|
+
label: "Slot ID",
|
|
2202
|
+
value: slotID,
|
|
2203
|
+
onChange: function onChange(val) {
|
|
2204
|
+
return setAttributes({
|
|
2205
|
+
slotID: val
|
|
2206
|
+
});
|
|
2207
|
+
},
|
|
2208
|
+
placeholder: "e.g., /123456789/section/article-top"
|
|
2209
|
+
}))), /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
2210
|
+
className: "tds-ad-container tds-ad-container--".concat(type),
|
|
2211
|
+
"data-slot-id": slotID
|
|
2212
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
2213
|
+
className: "tds-ad-container__placeholder"
|
|
2214
|
+
}, /*#__PURE__*/React.createElement("p", null, "Ad Slot: ", slotID || '(not configured)'))));
|
|
2215
|
+
};
|
|
2216
|
+
|
|
2217
|
+
var save = function save(_ref) {
|
|
2218
|
+
var attributes = _ref.attributes;
|
|
2219
|
+
var type = attributes.type,
|
|
2220
|
+
slotID = attributes.slotID;
|
|
2221
|
+
var blockProps = blockEditor.useBlockProps.save();
|
|
2222
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, blockProps, {
|
|
2223
|
+
className: "tds-ad-container tds-ad-container--".concat(type),
|
|
2224
|
+
"data-slot-id": slotID
|
|
2225
|
+
}));
|
|
2226
|
+
};
|
|
2227
|
+
|
|
2228
|
+
blocks.registerBlockType(metadata.name, _objectSpread2(_objectSpread2({}, metadata), {}, {
|
|
2229
|
+
edit: edit,
|
|
2230
|
+
save: save
|
|
2231
|
+
}));
|
|
2232
|
+
//# sourceMappingURL=index.cjs.map
|