@financial-times/qanda-ui 0.0.1-beta.30 → 0.0.1-beta.31
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.
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const jsx_runtime_1 = require("preact/jsx-runtime");
|
|
4
4
|
const qanda_1 = require("../../config/qanda");
|
|
5
5
|
const tracking_1 = require("../../utils/tracking");
|
|
6
|
-
function
|
|
6
|
+
function formatDate(date) {
|
|
7
7
|
return date.replace(/-|:|\.\d+/g, '');
|
|
8
8
|
}
|
|
9
9
|
const CalendarLink = ({ href, children, }) => {
|
|
@@ -17,7 +17,7 @@ const apps = [
|
|
|
17
17
|
{
|
|
18
18
|
name: 'Gmail',
|
|
19
19
|
icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsxs)("g", { transform: "translate(4, 3.36)", children: [(0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.8514 7.64502H8.16309V10.8162H12.5564C12.3672 11.841 11.792 12.7093 10.9275 13.2906V15.3476H13.5657C15.1093 13.9204 15.9998 11.8187 15.9998 9.32193C15.9998 8.7406 15.9479 8.18163 15.8514 7.64502Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16315 17.3339C10.3672 17.3339 12.2151 16.5998 13.5658 15.3477L10.9275 13.2907C10.1966 13.7826 9.26149 14.0733 8.16315 14.0733C6.037 14.0733 4.23737 12.6311 3.59544 10.6934H0.868164V12.8174C2.21139 15.4968 4.97206 17.3339 8.16315 17.3339Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.59555 10.6933C3.43228 10.2014 3.33952 9.67595 3.33952 9.13561C3.33952 8.59527 3.43228 8.06984 3.59555 7.57795V5.45386H0.868275C0.315399 6.56062 0 7.81272 0 9.13561C0 10.4585 0.315399 11.7106 0.868275 12.8174L3.59555 10.6933Z", fill: "black" }), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16316 4.19816C9.36167 4.19816 10.4377 4.6118 11.2837 5.42417L13.6251 3.07277C12.2114 1.74987 10.3635 0.9375 8.16316 0.9375C4.97206 0.9375 2.21139 2.77465 0.868164 5.45399L3.59544 7.57808C4.23737 5.64031 6.037 4.19816 8.16316 4.19816Z", fill: "black" })] }) })),
|
|
20
|
-
getLink: ({ title, startDateTime, endDateTime, url }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${startDateTime}/${endDateTime}&details=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
|
|
20
|
+
getLink: ({ title, startDateTime, endDateTime, url }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${formatDate(startDateTime)}/${formatDate(endDateTime)}&details=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
name: 'Outlook',
|
|
@@ -27,7 +27,7 @@ const apps = [
|
|
|
27
27
|
{
|
|
28
28
|
name: 'Yahoo',
|
|
29
29
|
icon: ((0, jsx_runtime_1.jsx)("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M15.3929 13.7528C15.3614 13.7513 15.3247 13.7506 15.2879 13.7506C13.8674 13.7506 12.7109 14.8793 12.6659 16.2886V16.2931C12.7049 17.6536 13.8172 18.7411 15.1837 18.7411C15.2182 18.7411 15.2519 18.7403 15.2857 18.7388H15.2812C15.3194 18.7411 15.3637 18.7418 15.4087 18.7418C16.8217 18.7418 17.9737 17.6228 18.0269 16.2226V16.2181C18.0037 14.8501 16.8892 13.7498 15.5174 13.7498C15.4739 13.7498 15.4304 13.7513 15.3869 13.7528H15.3929ZM0.75293 7.97933L5.57993 18.8138L3.84593 22.7221H8.09168L14.5214 7.97933H10.3042L7.67993 14.2868L5.08343 7.97933H0.75368H0.75293ZM18.4297 3.15308L14.1277 12.8161H18.9359L23.2469 3.15308H18.4297Z", fill: "black" }) })),
|
|
30
|
-
getLink: ({ title, startDateTime, endDateTime, url }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${
|
|
30
|
+
getLink: ({ title, startDateTime, endDateTime, url }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(url))}&in_loc=${encodeURIComponent(url)}`,
|
|
31
31
|
},
|
|
32
32
|
];
|
|
33
33
|
exports.default = apps.map(({ name, icon, getLink }) => ({
|
|
@@ -20,6 +20,8 @@ const user_1 = require("../../store/user");
|
|
|
20
20
|
const validate_display_name_1 = __importDefault(require("../../utils/validate-display-name"));
|
|
21
21
|
const messagesByUserType_1 = require("./messagesByUserType");
|
|
22
22
|
const tracking_1 = require("../../utils/tracking");
|
|
23
|
+
const MIN_QUESTION_LENGTH = 20;
|
|
24
|
+
const MAX_QUESTION_LENGTH = 300;
|
|
23
25
|
function QuestionForm() {
|
|
24
26
|
const dispatch = (0, react_redux_1.useDispatch)();
|
|
25
27
|
const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
|
|
@@ -39,7 +41,8 @@ function QuestionForm() {
|
|
|
39
41
|
}, [userDisplayNameError]);
|
|
40
42
|
(0, react_1.useEffect)(() => {
|
|
41
43
|
setSubmitEnabled(Boolean((profile?.token || (newDisplayName && newDisplayName.length > 0)) &&
|
|
42
|
-
question.length >=
|
|
44
|
+
question.length >= MIN_QUESTION_LENGTH &&
|
|
45
|
+
question.length <= MAX_QUESTION_LENGTH));
|
|
43
46
|
}, [profile?.token, newDisplayName, question]);
|
|
44
47
|
(0, react_1.useEffect)(() => {
|
|
45
48
|
// we want to clear the display name error unless the person has attempted
|
|
@@ -120,12 +123,26 @@ function QuestionForm() {
|
|
|
120
123
|
'o-forms-input--text',
|
|
121
124
|
{ 'o-forms-input--invalid': !!displayNameError },
|
|
122
125
|
]), children: [(0, jsx_runtime_1.jsx)("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
|
|
123
|
-
'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": (0, tracking_1.trackingNS)(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text",
|
|
126
|
+
'question_form__displayname-error-message' }), displayNameError && ((0, jsx_runtime_1.jsx)("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: (0, jsx_runtime_1.jsx)("span", { children: displayNameError }) }))] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "o-forms-field", children: (0, jsx_runtime_1.jsxs)("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": (0, tracking_1.trackingNS)(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), (0, jsx_runtime_1.jsx)("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), (0, jsx_runtime_1.jsxs)("label", { for: "question-text", className: "o-forms-field question-form__question__input", children: [(0, jsx_runtime_1.jsx)("span", { className: "o-forms-title", children: (0, jsx_runtime_1.jsx)("span", { className: "o3-type-body-highlight", children: "Enter your question" }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)([
|
|
127
|
+
'o-forms-input',
|
|
128
|
+
'o-forms-input--textarea',
|
|
129
|
+
'input-textarea__container',
|
|
130
|
+
{
|
|
131
|
+
'input-textarea__error': question.length > MAX_QUESTION_LENGTH,
|
|
132
|
+
},
|
|
133
|
+
]), children: [(0, jsx_runtime_1.jsx)("textarea", { id: "question-text", name: "question", className: "input-textarea", value: question, onChange: (e) => dispatch((0, questionSlice_1.updateQuestion)(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }), (0, jsx_runtime_1.jsx)("span", { className: "o3-type-detail input-textarea__counter", children: `${question.length}/${MAX_QUESTION_LENGTH}` })] })] }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)([
|
|
134
|
+
'o3-type-detail',
|
|
135
|
+
{
|
|
136
|
+
'input--textarea__error-message': question.length > MAX_QUESTION_LENGTH,
|
|
137
|
+
},
|
|
138
|
+
]), children: question.length > MAX_QUESTION_LENGTH
|
|
139
|
+
? `Questions must not exceed ${MAX_QUESTION_LENGTH} characters.`
|
|
140
|
+
: `Questions must be at least ${MIN_QUESTION_LENGTH} characters long.` }), (0, jsx_runtime_1.jsx)(o3_button_1.Button, { attributes: {
|
|
124
141
|
className: 'overlay__submit-button',
|
|
125
142
|
type: 'submit',
|
|
126
143
|
disabled: !submitEnabled,
|
|
127
|
-
ariaLabel: question.length <
|
|
128
|
-
?
|
|
144
|
+
ariaLabel: question.length < MIN_QUESTION_LENGTH
|
|
145
|
+
? `Submit button (disabled until question is at least ${MIN_QUESTION_LENGTH} characters)`
|
|
129
146
|
: isLoading
|
|
130
147
|
? 'Submitting...'
|
|
131
148
|
: 'Submit your question',
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
|
|
2
2
|
import { PRODUCT_NAME } from '../../config/qanda';
|
|
3
3
|
import { trackingNS } from '../../utils/tracking';
|
|
4
|
-
function
|
|
4
|
+
function formatDate(date) {
|
|
5
5
|
return date.replace(/-|:|\.\d+/g, '');
|
|
6
6
|
}
|
|
7
7
|
const CalendarLink = ({ href, children, }) => {
|
|
@@ -15,7 +15,7 @@ const apps = [
|
|
|
15
15
|
{
|
|
16
16
|
name: 'Gmail',
|
|
17
17
|
icon: (_jsx("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: _jsxs("g", { transform: "translate(4, 3.36)", children: [_jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.8514 7.64502H8.16309V10.8162H12.5564C12.3672 11.841 11.792 12.7093 10.9275 13.2906V15.3476H13.5657C15.1093 13.9204 15.9998 11.8187 15.9998 9.32193C15.9998 8.7406 15.9479 8.18163 15.8514 7.64502Z", fill: "black" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16315 17.3339C10.3672 17.3339 12.2151 16.5998 13.5658 15.3477L10.9275 13.2907C10.1966 13.7826 9.26149 14.0733 8.16315 14.0733C6.037 14.0733 4.23737 12.6311 3.59544 10.6934H0.868164V12.8174C2.21139 15.4968 4.97206 17.3339 8.16315 17.3339Z", fill: "black" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.59555 10.6933C3.43228 10.2014 3.33952 9.67595 3.33952 9.13561C3.33952 8.59527 3.43228 8.06984 3.59555 7.57795V5.45386H0.868275C0.315399 6.56062 0 7.81272 0 9.13561C0 10.4585 0.315399 11.7106 0.868275 12.8174L3.59555 10.6933Z", fill: "black" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.16316 4.19816C9.36167 4.19816 10.4377 4.6118 11.2837 5.42417L13.6251 3.07277C12.2114 1.74987 10.3635 0.9375 8.16316 0.9375C4.97206 0.9375 2.21139 2.77465 0.868164 5.45399L3.59544 7.57808C4.23737 5.64031 6.037 4.19816 8.16316 4.19816Z", fill: "black" })] }) })),
|
|
18
|
-
getLink: ({ title, startDateTime, endDateTime, url }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${startDateTime}/${endDateTime}&details=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
|
|
18
|
+
getLink: ({ title, startDateTime, endDateTime, url }) => `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${formatDate(startDateTime)}/${formatDate(endDateTime)}&details=${encodeURIComponent(description(url))}&location=${encodeURIComponent(url)}`,
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
name: 'Outlook',
|
|
@@ -25,7 +25,7 @@ const apps = [
|
|
|
25
25
|
{
|
|
26
26
|
name: 'Yahoo',
|
|
27
27
|
icon: (_jsx("svg", { className: "live-qa-calendar-icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", children: _jsx("path", { d: "M15.3929 13.7528C15.3614 13.7513 15.3247 13.7506 15.2879 13.7506C13.8674 13.7506 12.7109 14.8793 12.6659 16.2886V16.2931C12.7049 17.6536 13.8172 18.7411 15.1837 18.7411C15.2182 18.7411 15.2519 18.7403 15.2857 18.7388H15.2812C15.3194 18.7411 15.3637 18.7418 15.4087 18.7418C16.8217 18.7418 17.9737 17.6228 18.0269 16.2226V16.2181C18.0037 14.8501 16.8892 13.7498 15.5174 13.7498C15.4739 13.7498 15.4304 13.7513 15.3869 13.7528H15.3929ZM0.75293 7.97933L5.57993 18.8138L3.84593 22.7221H8.09168L14.5214 7.97933H10.3042L7.67993 14.2868L5.08343 7.97933H0.75368H0.75293ZM18.4297 3.15308L14.1277 12.8161H18.9359L23.2469 3.15308H18.4297Z", fill: "black" }) })),
|
|
28
|
-
getLink: ({ title, startDateTime, endDateTime, url }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${
|
|
28
|
+
getLink: ({ title, startDateTime, endDateTime, url }) => `https://calendar.yahoo.com/?v=60&title=${encodeURIComponent(title)}&st=${formatDate(startDateTime)}&et=${formatDate(endDateTime)}&desc=${encodeURIComponent(description(url))}&in_loc=${encodeURIComponent(url)}`,
|
|
29
29
|
},
|
|
30
30
|
];
|
|
31
31
|
export default apps.map(({ name, icon, getLink }) => ({
|
|
@@ -14,6 +14,8 @@ import { getUserProfile } from '../../store/user';
|
|
|
14
14
|
import validateDisplayName from '../../utils/validate-display-name';
|
|
15
15
|
import { getTitleByUser, getTextByUser } from './messagesByUserType';
|
|
16
16
|
import { trackEvent, trackingNS } from '../../utils/tracking';
|
|
17
|
+
const MIN_QUESTION_LENGTH = 20;
|
|
18
|
+
const MAX_QUESTION_LENGTH = 300;
|
|
17
19
|
export default function QuestionForm() {
|
|
18
20
|
const dispatch = useDispatch();
|
|
19
21
|
const { storyId, useStaging, commentsAPIUrl, maxQuestionLength } = useContext(QandaContext);
|
|
@@ -33,7 +35,8 @@ export default function QuestionForm() {
|
|
|
33
35
|
}, [userDisplayNameError]);
|
|
34
36
|
useEffect(() => {
|
|
35
37
|
setSubmitEnabled(Boolean((profile?.token || (newDisplayName && newDisplayName.length > 0)) &&
|
|
36
|
-
question.length >=
|
|
38
|
+
question.length >= MIN_QUESTION_LENGTH &&
|
|
39
|
+
question.length <= MAX_QUESTION_LENGTH));
|
|
37
40
|
}, [profile?.token, newDisplayName, question]);
|
|
38
41
|
useEffect(() => {
|
|
39
42
|
// we want to clear the display name error unless the person has attempted
|
|
@@ -114,12 +117,26 @@ export default function QuestionForm() {
|
|
|
114
117
|
'o-forms-input--text',
|
|
115
118
|
{ 'o-forms-input--invalid': !!displayNameError },
|
|
116
119
|
]), children: [_jsx("input", { className: "question-form__displayname__input__field o3-type-body-lg", id: "display-name", value: newDisplayName || '', onChange: (e) => setNewDisplayName(e.currentTarget.value), type: postAnonymously ? 'password' : 'text', "aria-invalid": displayNameError ? 'true' : 'false', "aria-errormessage": displayNameError ??
|
|
117
|
-
'question_form__displayname-error-message' }), displayNameError && (_jsx("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: _jsx("span", { children: displayNameError }) }))] })] }))] }), _jsx("div", { className: "o-forms-field", children: _jsxs("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [_jsx("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": trackingNS(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), _jsx("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), _jsxs("label", { for: "question-text",
|
|
120
|
+
'question_form__displayname-error-message' }), displayNameError && (_jsx("span", { className: "question-form__displayname__input__error o3-type-detail", id: "question_form__displayname-error-message", children: _jsx("span", { children: displayNameError }) }))] })] }))] }), _jsx("div", { className: "o-forms-field", children: _jsxs("label", { className: "o-forms-input o-forms-input--checkbox", htmlFor: "post-anonymously", children: [_jsx("input", { type: "checkbox", name: "post-anonymously", id: "post-anonymously", value: "true", onChange: handleHideDisplayName, "data-trackable-context-action": `Post anonymously ${postAnonymously ? 'off' : 'on'}`, "data-trackable": trackingNS(`question-form__post_anonymously-${postAnonymously ? 'off' : 'on'}`) }), _jsx("span", { className: "o-forms-input__label", children: "Post anonymously (optional)" })] }) }), _jsxs("label", { for: "question-text", className: "o-forms-field question-form__question__input", children: [_jsx("span", { className: "o-forms-title", children: _jsx("span", { className: "o3-type-body-highlight", children: "Enter your question" }) }), _jsxs("div", { className: classNames([
|
|
121
|
+
'o-forms-input',
|
|
122
|
+
'o-forms-input--textarea',
|
|
123
|
+
'input-textarea__container',
|
|
124
|
+
{
|
|
125
|
+
'input-textarea__error': question.length > MAX_QUESTION_LENGTH,
|
|
126
|
+
},
|
|
127
|
+
]), children: [_jsx("textarea", { id: "question-text", name: "question", className: "input-textarea", value: question, onChange: (e) => dispatch(updateQuestion(e.currentTarget.value)), "aria-label": "Your question", placeholder: "Type your question", maxLength: maxQuestionLength, "aria-invalid": error ? 'true' : undefined, "aria-errormessage": "question-form-error-message" }), _jsx("span", { className: "o3-type-detail input-textarea__counter", children: `${question.length}/${MAX_QUESTION_LENGTH}` })] })] }), _jsx("span", { className: classNames([
|
|
128
|
+
'o3-type-detail',
|
|
129
|
+
{
|
|
130
|
+
'input--textarea__error-message': question.length > MAX_QUESTION_LENGTH,
|
|
131
|
+
},
|
|
132
|
+
]), children: question.length > MAX_QUESTION_LENGTH
|
|
133
|
+
? `Questions must not exceed ${MAX_QUESTION_LENGTH} characters.`
|
|
134
|
+
: `Questions must be at least ${MIN_QUESTION_LENGTH} characters long.` }), _jsx(Button, { attributes: {
|
|
118
135
|
className: 'overlay__submit-button',
|
|
119
136
|
type: 'submit',
|
|
120
137
|
disabled: !submitEnabled,
|
|
121
|
-
ariaLabel: question.length <
|
|
122
|
-
?
|
|
138
|
+
ariaLabel: question.length < MIN_QUESTION_LENGTH
|
|
139
|
+
? `Submit button (disabled until question is at least ${MIN_QUESTION_LENGTH} characters)`
|
|
123
140
|
: isLoading
|
|
124
141
|
? 'Submitting...'
|
|
125
142
|
: 'Submit your question',
|
package/dist/qanda.scss
CHANGED
|
@@ -253,6 +253,7 @@ $app-header-color: #007acc;
|
|
|
253
253
|
padding: 2px var(--o3-spacing-5xs);
|
|
254
254
|
min-width: var(--o3-spacing-2xs);
|
|
255
255
|
text-align: center;
|
|
256
|
+
box-sizing: content-box;
|
|
256
257
|
}
|
|
257
258
|
|
|
258
259
|
/* ToDo: using an SVG for this icon until it becomes part of Origami */
|
|
@@ -668,6 +669,39 @@ $app-header-color: #007acc;
|
|
|
668
669
|
|
|
669
670
|
.question-form__question__input {
|
|
670
671
|
margin-bottom: var(--o3-spacing-4xs, 8px);
|
|
672
|
+
|
|
673
|
+
.input-textarea__container {
|
|
674
|
+
display: flex;
|
|
675
|
+
flex-direction: column;
|
|
676
|
+
background-color: var(--o3-color-palette-white);
|
|
677
|
+
border: 1.5px solid var(--o3-color-palette-black-50);
|
|
678
|
+
border-radius: 2px;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.input-textarea {
|
|
682
|
+
min-height: 180px;
|
|
683
|
+
background-color: transparent;
|
|
684
|
+
border: none;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.input-textarea:focus-visible {
|
|
688
|
+
box-shadow: none;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.input-textarea__error {
|
|
692
|
+
border-color: var(--o3-color-palette-crimson);
|
|
693
|
+
background-color: var(--o3-color-use-case-error-background);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.input-textarea__counter {
|
|
697
|
+
text-align: right;
|
|
698
|
+
padding: var(--o3-spacing-4xs);
|
|
699
|
+
color: var(--o3-color-palette-black-60);
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.input--textarea__error-message {
|
|
704
|
+
color: var(--o3-color-use-case-error-text);
|
|
671
705
|
}
|
|
672
706
|
}
|
|
673
707
|
|