@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
36 lines (35 loc) • 1.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
import { AriaLiveRegion } from '@workday/canvas-kit-react/common';
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 { calc, createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const liveRegionStyle = createStyles({
border: `${px2rem(1)} solid ${system.color.brand.focus.caution.outer}`,
backgroundColor: system.color.brand.surface.caution.strong,
padding: system.padding.md,
display: 'block',
marginBlock: system.gap.md,
width: calc.multiply(system.size.xxl, 7),
});
const flexGapStyles = createStyles({
gap: system.gap.md,
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" })] })] }));
};