diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx index 0f939860..aa072e65 100644 --- a/src/components/ComponentConfiguration.stories.tsx +++ b/src/components/ComponentConfiguration.stories.tsx @@ -1706,6 +1706,13 @@ export const Address: Story = { required: false, }, }, + builderInfo: { + title: 'Address Field', + icon: 'gome', + group: 'basic', + weight: 10, + schema: {}, + }, }, play: async ({canvasElement, args}) => { @@ -1729,7 +1736,7 @@ export const Address: Story = { expect(await preview.findByText('Updated preview label')); const previewInput = preview.getByText('Updated preview label'); - await expect(previewInput).toHaveDisplayValue(''); + await expect(previewInput).toBeVisible(); // Ensure that the manually entered key is kept instead of derived from the label, // even when key/label components are not mounted. @@ -1737,8 +1744,6 @@ export const Address: Story = { // fireEvent is deliberate, as userEvent.clear + userEvent.type briefly makes the field // not have any value, which triggers the generate-key-from-label behaviour. fireEvent.change(keyInput, {target: {value: 'customKey'}}); - await userEvent.click(canvas.getByRole('tab', {name: 'Location'})); - await userEvent.click(canvas.getByRole('tab', {name: 'Basic'})); await userEvent.clear(canvas.getByLabelText('Label')); await userEvent.type(canvas.getByLabelText('Label'), 'Other label', {delay: 50}); await expect(canvas.getByLabelText('Property Name')).toHaveDisplayValue('customKey'); diff --git a/src/components/formio/fieldset.stories.tsx b/src/components/formio/fieldset.stories.tsx new file mode 100644 index 00000000..9bd78925 --- /dev/null +++ b/src/components/formio/fieldset.stories.tsx @@ -0,0 +1,69 @@ +import {expect} from '@storybook/jest'; +import {Meta, StoryFn, StoryObj} from '@storybook/react'; +import {within} from '@storybook/testing-library'; + +import {withFormik} from '@/sb-decorators'; + +import Fieldset from './fieldset'; + +export default { + title: 'Formio/Containers/Fieldset', + component: Fieldset, + decorators: [withFormik], + parameters: { + modal: {noModal: true}, + // https://github.com/bbbtech/storybook-formik/issues/51#issuecomment-1136668271 + docs: { + inlineStories: false, + iframeHeight: 150, + }, + }, + args: { + type: 'textfield', + }, +} as Meta; + +type Story = StoryObj; + +const Template: StoryFn = args => ( +
+
{args.children || ''}
+
+); + +export const WithoutLabel: Story = { + render: Template, + + args: { + label: '', + }, +}; + +export const WithToolTip: Story = { + render: Template, + + args: { + label: 'With tooltip', + tooltip: 'Hiya!', + }, +}; + +export const WithErrors: Story = Template.bind([]); +WithErrors.parameters = { + formik: { + initialValues: {someField: ''}, + initialErrors: {someField: 'Some error'}, + }, +}; +WithErrors.args = { + label: 'Errors must be displayed', + children: , + field: 'someField', +}; +WithErrors.argTypes = { + children: {table: {disable: true}}, +}; +WithErrors.play = async ({canvasElement}) => { + const canvas = within(canvasElement); + await expect(canvas.queryByText('Some error')).toBeInTheDocument(); +}; diff --git a/src/components/formio/fieldset.tsx b/src/components/formio/fieldset.tsx index dd19bed5..d06cf72f 100644 --- a/src/components/formio/fieldset.tsx +++ b/src/components/formio/fieldset.tsx @@ -1,48 +1,21 @@ -import {css} from '@emotion/css'; import clsx from 'clsx'; import React from 'react'; -import {AnyComponentSchema} from '@/types'; import {useValidationErrors} from '@/utils/errors'; import {ErrorList} from '@/utils/errors'; import Tooltip from './tooltip'; export interface FieldsetProps { - // XXX: eventually (most) of these literals will be included in AnyComponentType - type: AnyComponentSchema['type'] | 'datagrid' | 'datamap' | 'select' | 'columns' | 'textarea'; field?: string; - required?: boolean; label?: React.ReactNode; tooltip?: string; - htmlId?: string; children: React.ReactNode; } -// Fix the overlapping icons/text when the error icon is shown. -// XXX: once we've moved away from bootstrap/formio 'component library', this fix and -// @emotion/css can be removed again. -const PAD_ERROR_ICON = css` - .form-control.is-invalid { - padding-inline-end: calc(1.5em + 0.75rem); - } -`; - -const Fieldset: React.FC = ({ - type, - field = '', - required = false, - label, - tooltip = '', - children, -}) => { +const Fieldset: React.FC = ({field = '', label, tooltip = '', children}) => { const {errors} = useValidationErrors(field); - const className = clsx('form-group', 'has-feedback', 'formio-component', PAD_ERROR_ICON, { - [`formio-component-${type}`]: type, - 'has-error': field && errors.length > 0, - required: required, - }); - // const labelClassName = clsx('col-form-label', {'field-required': required}); + const className = clsx('field-group'); return (
diff --git a/src/registry/address/edit.tsx b/src/registry/address/edit.tsx index e7604a20..5e5d1797 100644 --- a/src/registry/address/edit.tsx +++ b/src/registry/address/edit.tsx @@ -53,14 +53,12 @@ const EditForm: EditFormDefinition = () => { 'key', 'description', 'tooltip', - 'showInSummary', - 'showInEmail', - 'showInPDF', - 'multiple', 'hidden', 'clearOnHide', 'isSensitiveData', - 'defaultValue' + 'showInSummary', + 'showInEmail', + 'showInPDF' )} /> diff --git a/src/registry/address/index.ts b/src/registry/address/index.ts index f636dcf3..61bcc793 100644 --- a/src/registry/address/index.ts +++ b/src/registry/address/index.ts @@ -6,5 +6,10 @@ export default { edit: EditForm, editSchema: validationSchema, preview: Preview, - defaultValue: '', + defaultValue: { + postcode: '', + houseNumber: '', + houseLetter: '', + houseNumberAddition: '', + }, }; diff --git a/src/registry/address/preview.tsx b/src/registry/address/preview.tsx index ae0e399a..f464858d 100644 --- a/src/registry/address/preview.tsx +++ b/src/registry/address/preview.tsx @@ -17,14 +17,7 @@ const Preview: React.FC> = ({compo const {required = false} = validate; return ( -
+
{description && }