Merge pull request #29654 from overleaf/ac-ciam-confirm-email-storybook

[web] CIAM design for Email confirmation form

GitOrigin-RevId: 3e66c45fe20073eb0600b8243761dbe82d7dc6b2

services/web/frontend/stories/shared/ds-button.stories.tsx

@@ -26,7 +26,7 @@ const meta: Meta<typeof DSButton> = {
   },
   parameters: {
     controls: {
-      include: ['children', 'disabled', 'size', 'variant'],
+      include: ['children', 'disabled', 'isLoading', 'size', 'variant'],
     },
     ...figmaDesignUrl(
       'https://www.figma.com/design/aJQlecvqCS9Ry8b6JA1lQN/DS---Components?node-id=4565-2932&m=dev'

services/web/frontend/stories/shared/ds-six-digits-input.stories.tsx

@@ -0,0 +1,44 @@
+import { ComponentProps, useEffect, useState } from 'react'
+import { Meta } from '@storybook/react'
+import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url'
+import DSFormGroup from '@/shared/components/ds/ds-form-group'
+import DSFormLabel from '@/shared/components/ds/ds-form-label'
+import CIAMSixDigitsInput from '@/features/settings/components/emails/ciam-six-digits-input'
+
+type Args = ComponentProps<typeof CIAMSixDigitsInput>
+
+export const SixDigitsInput = ({ value, ...args }: Args) => {
+  const [state, setState] = useState(value)
+  useEffect(() => setState(value), [value])
+  return (
+    <div className="ciam-enabled">
+      <DSFormGroup controlId="form-control-id">
+        <DSFormLabel>Form input label</DSFormLabel>
+        <CIAMSixDigitsInput
+          id="form-control-id"
+          {...args}
+          value={state}
+          onChange={e => setState(e.target.value)}
+        />
+      </DSFormGroup>
+    </div>
+  )
+}
+
+const meta: Meta<typeof SixDigitsInput> = {
+  title: 'Shared / DS Components',
+  component: SixDigitsInput,
+  argTypes: {
+    value: { control: 'text' },
+  },
+  parameters: {
+    controls: {
+      include: ['value'],
+    },
+    ...figmaDesignUrl(
+      'https://www.figma.com/design/aJQlecvqCS9Ry8b6JA1lQN/DS---Components?node-id=6318-428&t=pcx9KKzhlzpRmA4S-0'
+    ),
+  },
+}
+
+export default meta