@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
37 lines (36 loc) • 1.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { AriaLiveRegion } from '@workday/canvas-kit-react/common';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
import { FormField } from '@workday/canvas-kit-react/form-field';
import { Flex } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
import { TextInput } from '@workday/canvas-kit-react/text-input';
import { system } from '@workday/canvas-tokens-web';
import { createStyles, px2rem, calc } from '@workday/canvas-kit-styling';
const liveRegionStyle = createStyles({
border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
backgroundColor: system.color.bg.caution.softer,
padding: system.space.x4,
display: 'block',
marginBlockStart: system.space.x4,
marginBlockEnd: system.space.x4,
width: calc.multiply(system.space.x16, 7),
});
const flexGapStyles = createStyles({
gap: system.space.x4,
alignItems: 'center',
});
let liveRegionStr = 'This is an ARIA Live Region!';
export const VisibleLiveRegion = () => {
const [message, setMessage] = React.useState('');
function handleChange(e) {
setMessage(e.target.value);
}
function handleSendMessage(e) {
e.preventDefault();
liveRegionStr = message;
setMessage('');
}
return (_jsxs(_Fragment, { children: [_jsx(AriaLiveRegion, { children: _jsx(Text, { cs: liveRegionStyle, children: liveRegionStr }) }), _jsxs(Flex, { as: "form", "aria-label": "Visible Live Region", onSubmit: handleSendMessage, cs: flexGapStyles, children: [_jsxs(FormField, { children: [_jsx(FormField.Label, { children: "Type your message:" }), _jsx(FormField.Input, { as: TextInput, onChange: handleChange, value: message })] }), _jsx(PrimaryButton, { type: "submit", children: "Send Message" })] })] }));
};