diff --git a/.changeset/giant-bees-sleep.md b/.changeset/giant-bees-sleep.md
new file mode 100644
index 0000000000..dda72cf0e1
--- /dev/null
+++ b/.changeset/giant-bees-sleep.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added an invalid message for the card-control component and an icon in the invalid message of the checkbox and radio button
diff --git a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
index 846ded9bef..9646d4ad34 100644
--- a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
@@ -2,7 +2,7 @@ import type { Args, StoryContext, StoryFn } from '@storybook/web-components';
import { useArgs, useState } from '@storybook/preview-api';
import { nothing } from 'lit';
import { html } from 'lit/static-html.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { mapClasses } from '@/utils';
import { MetaComponent } from '@root/types';
import { parse } from '@/utils/sass-export';
import scss from '../card-control.module.scss';
@@ -30,7 +30,7 @@ const meta: MetaComponent = {
checked: false,
disabled: false,
validation: 'null',
- groupValidation: 'null',
+ groupValidation: false,
},
argTypes: {
type: {
@@ -108,18 +108,9 @@ const meta: MetaComponent = {
},
},
groupValidation: {
- name: 'Group Validation',
- description: 'Set validation status for the whole group of choice cards',
+ name: 'GroupValidation',
control: {
- type: 'radio',
- labels: {
- 'null': 'Default',
- 'is-invalid': 'Invalid',
- },
- },
- options: ['null', 'is-invalid'],
- table: {
- category: 'General',
+ type: 'boolean',
},
},
},
@@ -154,14 +145,14 @@ export const Default = {
const [_, updateArgs] = useArgs();
// Conditional classes
- const cardClasses = classMap({
+ const cardClasses = mapClasses({
'checked': args.checked,
'disabled': args.disabled,
'is-invalid': args.validation === 'is-invalid',
'checkbox-button-card': args.type === 'checkbox',
'radio-button-card': args.type === 'radio',
});
- const inputClasses = classMap({
+ const inputClasses = mapClasses({
'form-check-input': true,
'is-invalid': args.validation === 'is-invalid',
});
@@ -170,6 +161,7 @@ export const Default = {
const controlId = `CardControl_${id}`;
const description = html`${args.description}`;
const icon = html` `;
+ const invalidFeedback = html`Invalid feedback
`;
return html`
@@ -189,6 +181,7 @@ export const Default = {
${args.icon !== 'none' ? icon : nothing}
+ ${args.validation === 'is-invalid' && !args.GroupValidation ? invalidFeedback : nothing}
`;
},
};
@@ -238,7 +231,8 @@ function col(label: string, args: Args, useState: useStateFn) {
label,
inputName: args.type === 'radio' ? 'group' : `control-${id}`,
checked: false,
- validation: args.groupValidation,
+ GroupValidation: true,
+ validation: args.validation,
})}
`;
@@ -247,19 +241,19 @@ function col(label: string, args: Args, useState: useStateFn) {
export const Group = {
parameters: {
controls: {
- include: ['Type', 'Group Validation'],
+ include: ['Type', 'Validation'],
},
},
render: (args: Args) => {
- const error = html`
- Invalid choice
+ const invalidFeedback = html`
+ Invalid choice
`;
return html`
`;
},
diff --git a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
index 89e9a1c5cc..0a08220489 100644
--- a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
@@ -36,6 +36,7 @@ const meta: MetaComponent = {
'slots-icon': '',
'event-postInput': '',
'event-postChange': '',
+ 'groupValidation': false,
},
argTypes: {
'type': {
@@ -80,6 +81,12 @@ const meta: MetaComponent = {
disable: true,
},
},
+ 'groupValidation': {
+ name: 'groupValidation',
+ control: {
+ type: 'boolean',
+ },
+ },
},
};
@@ -88,11 +95,21 @@ export default meta;
type Story = StoryObj;
export const Default: Story = {
+ parameters: {
+ docs: {
+ controls: {
+ exclude: ['groupValidation'],
+ },
+ },
+ },
render: (args: Args) => {
const [, updateArgs] = useArgs();
const content = html`${unsafeHTML(args['slots-default'])}`;
const icon = html`${unsafeHTML(args['slots-icon'])}`;
+ const invalidFeedback = html`
+ Invalid feedback
+
`;
return html`
${args['slots-default'] ? content : null} ${args['slots-icon'] ? icon : null}
+ ${args.validity === 'false' && !args.disabled ? invalidFeedback : nothing}
`;
},
};
@@ -160,18 +178,18 @@ export const FormIntegration: Story = {
parameters: {
docs: {
controls: {
- include: ['disabled fieldset', 'value', 'disabled'],
+ include: ['disabled fieldset', 'value', 'disabled', 'validity', 'group validity'],
},
},
},
args: {
name: 'checkbox',
checkboxFieldset: false,
- validity: 'null',
radioValue: '',
radioDisabled: '',
radioFieldset: false,
radioValidity: 'null',
+ groupValidation: true,
},
argTypes: {
value: {
@@ -264,10 +282,7 @@ export const FormIntegration: Story = {
render: (args: Args, context: StoryContext) => {
const [_, updateArgs] = useArgs();
- const invalidFeedback = html`
+ const invalidFeedback = html`
Invalid feedback
`;
@@ -281,7 +296,7 @@ export const FormIntegration: Story = {
${Default.render?.(args, context)}