@joinskips/brand 5.0.0-develop.119 → 5.0.0-develop.121

package/chat/components/Welcome.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import { AccessibilityInfo, ActivityIndicator, Animated, Image, Pressable, Text, TextInput, View } from 'react-native';
 import { DOT_CYCLE_MS } from "../skipTyping.js";
 import { codeDigits, completesCode, EMAIL_MAX_LENGTH, givenEmail, givenName, NAME_MAX_LENGTH, RESEND_AFTER_MS, resendClock, } from "../welcome.js";
@@ -23,10 +23,16 @@ export function Choices({ items, question, sending, holding = false, failed, wor
                         onChoose(item);
                     } }, item.value))) }), failed ? (_jsx(Text, { role: "alert", className: "font-ui text-sm text-error-ink", children: words.choiceNotSent })) : null] }));
 }
+// The error under a field, as the field's description. React Native's types leave aria-describedby out, and
+// react-native-web reads it.
+function describedBy(errorId) {
+    return errorId === undefined ? {} : { 'aria-describedby': errorId };
+}
 // One thing asked of a new visitor: a field in focus and its button. What is typed is checked here and handed on.
 function StepField({ label, error, submitLabel, input, usable, onSubmit, initial = '', aside }) {
     const [typed, setTyped] = useState(initial);
     const [refused, setRefused] = useState(false);
+    const errorId = useId();
     const placeholder = useColor('ink-placeholder');
     const submit = () => {
         const value = usable(typed);
@@ -34,7 +40,7 @@ function StepField({ label, error, submitLabel, input, usable, onSubmit, initial
         if (value !== null)
             onSubmit(value);
     };
-    return (_jsxs(View, { className: "w-full max-w-[360px] gap-2 self-center", children: [aside ? (_jsx(View, { className: "self-center", children: _jsx(Pill, { label: aside.label, look: "flat", onPress: aside.onPress }) })) : null, _jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: label }), _jsx(TextInput, { autoFocus: true, value: typed, onChangeText: setTyped, onSubmitEditing: submit, accessibilityLabel: label, "aria-invalid": refused, placeholderTextColor: placeholder, className: `h-control rounded-control border bg-surface px-3 font-ui text-md text-ink ${refused ? 'border-error-ink' : 'border-line-control'}`, ...input }), refused ? (_jsx(Text, { role: "alert", className: "font-ui text-sm text-error-ink", children: error })) : null, _jsx(View, { className: "self-center", children: _jsx(Pill, { label: submitLabel, onPress: submit }) })] }));
+    return (_jsxs(View, { className: "w-full max-w-[360px] gap-2 self-center", children: [aside ? (_jsx(View, { className: "self-center", children: _jsx(Pill, { label: aside.label, look: "flat", onPress: aside.onPress }) })) : null, _jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: label }), _jsx(TextInput, { autoFocus: true, value: typed, onChangeText: setTyped, onSubmitEditing: submit, accessibilityLabel: label, "aria-invalid": refused, ...describedBy(refused ? errorId : undefined), placeholderTextColor: placeholder, className: `h-control rounded-control border bg-surface px-3 font-ui text-md text-ink ${refused ? 'border-error-ink' : 'border-line-control'}`, ...input }), refused ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "font-ui text-sm text-error-ink", children: error })) : null, _jsx(View, { className: "self-center", children: _jsx(Pill, { label: submitLabel, onPress: submit }) })] }));
 }
 /** The email asked for after Continue here, and again for a visitor changing it. */
 export function EmailStep({ words, onSubmit, initial, }) {
@@ -68,13 +74,24 @@ function NewCode({ waitMs, words, onResend }) {
  */
 export function CodeStep({ words, length, noMatch, ranOut, resendAfterMs = RESEND_AFTER_MS, onSubmit, onResend, onChangeEmail, }) {
     const [code, setCode] = useState('');
+    const [focused, setFocused] = useState(false);
+    const errorId = useId();
     const error = ranOut ? words.codeRanOut : noMatch ? words.codeNoMatch : null;
-    return (_jsxs(View, { className: "w-full max-w-[360px] items-center gap-3 self-center", children: [_jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: words.codeLabel }), _jsxs(View, { className: "relative", children: [_jsx(View, { "aria-hidden": true, className: "flex-row gap-2", children: Array.from({ length }, (_, box) => (_jsx(View, { className: `h-control w-11 items-center justify-center rounded-control border ${error ? 'border-error-ink' : 'border-line-control'}`, children: _jsx(Text, { className: "font-ui text-xl font-medium text-ink", children: code[box] ?? '' }) }, box))) }), _jsx(TextInput, { autoFocus: true, value: code, onChangeText: (typed) => {
+    // The box the next digit goes in, or the last once the code is whole.
+    const nextBox = Math.min(code.length, length - 1);
+    return (_jsxs(View, { className: "w-full max-w-[360px] items-center gap-3 self-center", children: [_jsx(Text, { className: "font-ui text-sm font-medium text-ink", children: words.codeLabel }), _jsxs(View, { className: "relative", children: [_jsx(View, { "aria-hidden": true, className: "flex-row gap-2", children: Array.from({ length }, (_, box) => (_jsx(View, { className: `h-control w-11 items-center justify-center rounded-control border ${focused && box === nextBox ? 'border-focus' : error ? 'border-error-ink' : 'border-line-control'}`, children: _jsx(Text, { className: "font-ui text-xl font-medium text-ink", children: code[box] ?? '' }) }, box))) }), _jsx(TextInput, { autoFocus: true, value: code, onChangeText: (typed) => {
                             const digits = codeDigits(typed, length);
                             setCode(digits);
                             if (completesCode(digits, code, length))
                                 onSubmit(digits);
-                        }, accessibilityLabel: words.codeLabel, "aria-invalid": error !== null, inputMode: "numeric", autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, className: "absolute inset-0 rounded-control text-transparent" })] }), error ? (_jsx(Text, { role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
+                        }, onFocus: () => {
+                            setFocused(true);
+                        }, onBlur: () => {
+                            setFocused(false);
+                        }, accessibilityLabel: words.codeLabel, "aria-invalid": error !== null, ...describedBy(error === null ? undefined : errorId), inputMode: "numeric", autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, 
+                        // Unseen, not just clear: the boxes draw the digits and the focus, and a checker would read clear text as
+                        // text with no contrast.
+                        className: "absolute inset-0 opacity-0" })] }), error ? (_jsx(Text, { nativeID: errorId, role: "alert", className: "text-center font-ui text-sm text-error-ink", children: error })) : null, _jsxs(View, { className: "flex-row flex-wrap items-center justify-center gap-2", children: [_jsx(Pill, { label: words.changeEmail, look: "flat", onPress: onChangeEmail }), _jsx(NewCode, { waitMs: resendAfterMs, words: words, onResend: onResend }), _jsx(Pill, { label: words.codeSubmit, disabled: code.length < length, onPress: () => {
                             onSubmit(code);
                         } })] })] }));
 }

package/manifest.json

@@ -409,6 +409,10 @@
       "sha256": "6606d135bbbd06103bacef4cb89bf4019e53e092dcd19b51278edcbab1786b9d",
       "bytes": 130031
     },
+    "logos/png-2048/skips-wordmark-dark-2048.png": {
+      "sha256": "286ed3c2b3d37b8559ab773a692eca07d04d843ae093820c94ce5bdadff78713",
+      "bytes": 46330
+    },
     "logos/png-2048/skips-wordmark-light-2048.png": {
       "sha256": "61da312bae3aec7dddef398494fa98d13de940c81b3ecdb038c6904d26d85506",
       "bytes": 59707

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joinskips/brand",
-  "version": "5.0.0-develop.119",
+  "version": "5.0.0-develop.121",
   "description": "Skips design tokens, Onest, logos, favicons, interface icons, member pictures and app icons.",
   "license": "UNLICENSED",
   "homepage": "https://brand.joinskips.com",