Abdullah.
569d887d1e
Renaming the package so any further PRs directed to the website are targeted to the reworked code instead of diverging. Once merged, I will start preparing this for deployment to dev to test before releasing to prod. Any improvements will also be applied to this package. I avoided making significant changes to API routes so nothing breaks, but will test it thoroughly today to confirm. That said, everything is ported - double checked. Big diff PR, impossible to review, but last one! No more rebuilds.
54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { type ReactNode } from 'react';
|
|
|
|
import {
|
|
FONT_WEIGHT,
|
|
fontFamily,
|
|
semanticColor,
|
|
spacing,
|
|
typeRampDeclarations,
|
|
} from '@/tokens';
|
|
|
|
// A labelled wrapper around a control. Per-field errors surface as the control's
|
|
// own invalid state (a red border) plus the wizard's footer banner, so the
|
|
// field itself carries no inline error text — only an optional label and hint.
|
|
const FieldRoot = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& > * + * {
|
|
margin-top: ${spacing(1.5)};
|
|
}
|
|
`;
|
|
|
|
const Label = styled.span`
|
|
${typeRampDeclarations('bodyXs')}
|
|
color: ${semanticColor.ink};
|
|
font-family: ${fontFamily('sans')};
|
|
font-weight: ${FONT_WEIGHT.medium};
|
|
`;
|
|
|
|
const Hint = styled.span`
|
|
${typeRampDeclarations('bodyXs')}
|
|
color: ${semanticColor.inkMuted};
|
|
font-family: ${fontFamily('sans')};
|
|
`;
|
|
|
|
export function Field({
|
|
children,
|
|
hint,
|
|
label,
|
|
}: {
|
|
children: ReactNode;
|
|
hint?: string;
|
|
label?: string;
|
|
}) {
|
|
return (
|
|
<FieldRoot>
|
|
{label !== undefined ? <Label>{label}</Label> : null}
|
|
{children}
|
|
{hint !== undefined ? <Hint>{hint}</Hint> : null}
|
|
</FieldRoot>
|
|
);
|
|
}
|