chore(styles): update tokens for form hint (#4086)

Co-authored-by: Alizé Debray <[email protected]>

.changeset/warm-drinks-prove.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Created a documentation page for the form hints.

packages/documentation/cypress/e2e/components/hint.cy.ts

@@ -0,0 +1,13 @@
+describe('Hint', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--hint');
+      cy.get('.hint', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/documentation/cypress/snapshots/components/hint.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Hint', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--hint');
+    cy.get('hint', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Hint', { widths: [400] });
+  });
+});

packages/documentation/src/stories/components/forms/hint/hint.docs.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as HintStories from './hint.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={HintStories} />
+
+<div className="docs-title">
+  # Form hint
+
+  <nav>
+    <link-design of={JSON.stringify(HintStories)}></link-design>
+  </nav>
+</div>
+
+<div className="lead">
+  Form hint or assistive text is used under a form element to give guidance to users on how to best
+  fill in fields.
+</div>
+
+<Canvas sourceState="shown" of={HintStories.Default} />
+<div className="hide-col-default">
+  <Controls of={HintStories.Default} />
+</div>
+
+<StylesPackageImport components={['form-hint']} />

packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts

@@ -0,0 +1,31 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { renderHint } from './hint.stories';
+import { html } from 'lit';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Hint: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <div class="hint">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div
+              class="${bg} d-flex gap-16 flex-column p-16"
+              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
+            >
+              ${renderHint({ ..._args }, context, 'example-input-' + bg)}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};

packages/documentation/src/stories/components/forms/hint/hint.stories.ts

@@ -0,0 +1,54 @@
+import { MetaComponent } from '@root/types';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+const meta: MetaComponent = {
+  id: '43525c38-d00c-4632-8cc5-0fb8a0f2a741',
+  title: 'Components/Forms/Hint',
+  tags: ['package:HTML'],
+  render: renderHint,
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=577-14546&t=sNKFtH6EhW6hwHAq-4',
+    },
+  },
+  args: {
+    hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
+  },
+  argTypes: {
+    hint: {
+      name: 'Helper Text',
+      description: 'Text to place in the help text area of the component.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export function renderHint(args: Args, context: StoryContext, id: string = 'example-input') {
+  return html`
+    <div class="form-floating">
+      <input
+        id="${id}"
+        class="form-control"
+        type="text"
+        placeholder="Placeholder"
+        aria-describedby="form-hint-${id}"
+      />
+      <label class="form-label" for="${id}">Label</label>
+      <p id="form-hint-${id}" class="form-hint">${args.hint}</p>
+    </div>
+  `;
+}
+
+export const Default: Story = {};

packages/styles/src/components/form-hint.scss

@@ -1,16 +1,16 @@
 @use './../functions/tokens';
 @use './../tokens/components';
 
-tokens.$default-map: components.$post-text-input;
+tokens.$default-map: components.$post-assist;
 
 .form-hint {
-  color: tokens.get('input-color-enabled-fg');
-  padding-inline: tokens.get('input-padding-inline-assist');
-  padding-block: tokens.get('input-padding-block-assist');
-  font-size: tokens.get('input-assist-font-size');
+  color: tokens.get('assist-enabled-fg');
+  padding-inline: tokens.get('assist-padding-inline');
+  padding-block: tokens.get('assist-padding-block');
+  font-size: tokens.get('assist-font-size');
   margin-block-start: 0;
 }
 
 .form-control:disabled .form-hint {
-  color: tokens.get('input-color-disabled-fg');
+  color: tokens.get('assist-disabled-fg');
 }