@moduk/frontend 1.6.0 → 1.7.1

package/react/internal/Link/Link.d.ts

@@ -1,5 +1,11 @@
 import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ComponentType, type ElementType, type JSX } from 'react';
 type LinkProps<T extends ElementType> = {
+    /**
+     * The component to use for links (for example, a Link component
+     * from a routing library).
+     *
+     * Defaults to an anchor tag.
+     */
     component?: T;
 } & ComponentPropsWithoutRef<T>;
 type LinksComponentType = Extract<ElementType, 'a' | ComponentType>;

package/react/internal/Link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/react/internal/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,WAAW,EAEhB,KAAK,GAAG,EACT,MAAM,OAAO,CAAA;AAEd,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI;IACtC,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAE/B,KAAK,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,GAAG,aAAa,CAAC,CAAA;AAEnE,MAAM,WAAW,aAAa,CAAC,KAAK,GAAG,MAAM;IAC3C,CAAC,CAAC,SAAS,kBAAkB,GAAG,GAAG,EACjC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;KAAE,GAAG,KAAK,GACtE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,aAOrB,CAAA"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/react/internal/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,WAAW,EAEhB,KAAK,GAAG,EACT,MAAM,OAAO,CAAA;AAEd,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI;IACtC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAE/B,KAAK,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,GAAG,aAAa,CAAC,CAAA;AAEnE,MAAM,WAAW,aAAa,CAAC,KAAK,GAAG,MAAM;IAC3C,CAAC,CAAC,SAAS,kBAAkB,GAAG,GAAG,EACjC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;KAAE,GAAG,KAAK,GACtE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,aAOrB,CAAA"}

package/react/notification-banner/NotificationBanner.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface NotificationBannerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * The content for the notification banner.
+     *
+     * If `children` is a string, the text is automatically wrapped
+     * in a `<p className='govuk-notification-banner__heading'>`
+     * element.
+     *
+     * If `children` contains React elements, you should use
+     * the `govuk-notification-banner__heading` class with <p> or
+     * heading tags such as <h3>. Some examples of this are provided.
+     */
+    children: ReactNode;
+    /**
+     * Whether to disable automatic focusing of the notification
+     * banner when type is `success` or role is otherwise `alert`.
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Overrides the value of the role attribute for the
+     * notification banner. Defaults to `region`. If you set
+     * type to `success`, role defaults to `alert`.
+     */
+    role?: ComponentPropsWithoutRef<'div'>['role'];
+    /**
+     * The title for the banner. By default, this is "Important"
+     * when type is unset, and "Success" when type is `success`.
+     */
+    title?: ReactNode;
+    /**
+     * HTML heading tag to use for the title.
+     */
+    titleHeadingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * A custom ID for the title.
+     */
+    titleId?: string;
+    /**
+     * The type of notification to render. You can use only the
+     * success or null values with this option. If you set type
+     * to success, the notification banner sets role to alert.
+     * JavaScript then moves the keyboard focus to the notification
+     * banner when the page loads. If you do not set type, the
+     * notification banner sets role to region.
+     */
+    type?: 'success';
+}
+/**
+ * Notification banner.
+ *
+ * @experimental React components are in alpha and subject to change.
+ *
+ * @example
+ * <NotificationBanner>
+ *   There may be a delay in processing your application because of the coronavirus outbreak.
+ * </NotificationBanner>
+ *
+ * @example
+ * <NotificationBanner type='success'>
+ *   <h3 className='govuk-notification-banner__heading'>
+ *     Training outcome recorded and trainee withdrawn
+ *   </h3>
+ *   <p className='govuk-body'>
+ *     Contact <a className='govuk-notification-banner__link' href='#'>example@department.gov.uk</a>
+ *     {' if you think there’s a problem.'}
+ *   </p>
+ * </NotificationBanner>
+ */
+export declare const NotificationBanner: import("react").ForwardRefExoticComponent<NotificationBannerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=NotificationBanner.d.ts.map

package/react/notification-banner/NotificationBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBanner.d.ts","sourceRoot":"","sources":["../../../src/react/notification-banner/NotificationBanner.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,wBAAwB,EAI7B,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAad,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAC7F;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB,oHA6D7B,CAAA"}

package/react/notification-banner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NotificationBanner';
+//# sourceMappingURL=index.d.ts.map

package/react/notification-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/notification-banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/react/textarea/Textarea.d.ts

@@ -1,8 +1,13 @@
-import { type ComponentPropsWithoutRef, type ReactElement } from 'react';
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';
 import type { ErrorMessageProps } from '../error-message';
 import type { HintProps } from '../hint';
 import type { LabelProps } from '../label';
 export interface TextareaProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'children'> {
+    /**
+     * Additional content to be displayed below the <textarea>,
+     * within the form group.
+     */
+    children?: ReactNode;
     /**
      * Optional error message. This should be an instance of ErrorMessage.
      */

package/react/textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/react/textarea/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,KAAK,YAAY,EAAS,MAAM,OAAO,CAAA;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IAC3F;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;IAC9C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IAC9B;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;CACpD;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,+GAqCnB,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/react/textarea/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,KAAK,YAAY,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAA;AAC3G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IAC3F;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;IAC9C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IAC9B;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;CACpD;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,+GAuCnB,CAAA"}

package/src/react/character-count/__examples__/default.tsx

@@ -0,0 +1,14 @@
+import { CharacterCount, Hint, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <CharacterCount
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        Can you provide more detail?
+      </Label>
+    }
+    hint={<Hint>Do not include personal information like your service number.</Hint>}
+    maxLength={200}
+    name='with-hint'
+  />
+)

package/src/react/character-count/__examples__/not-as-page-heading.tsx

@@ -0,0 +1,13 @@
+import { CharacterCount, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <CharacterCount
+    label={
+      <Label>
+        Describe the nature of your event
+      </Label>
+    }
+    maxLength={200}
+    name='not-as-page-heading'
+  />
+)

package/src/react/character-count/__examples__/with-custom-messages.tsx

@@ -0,0 +1,24 @@
+import { CharacterCount, Hint, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <CharacterCount
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        Can you provide more detail?
+      </Label>
+    }
+    hint={<Hint>Do not include personal information like your service number.</Hint>}
+    charactersAtLimitText='characters at limit'
+    charactersOverLimitText={{
+      one: 'characters over limit, one, %{count}',
+      other: 'characters over limit, other, %{count}',
+    }}
+    charactersUnderLimitText={{
+      one: 'characters under limit, one, %{count}',
+      other: 'characters under limit, other, %{count}',
+    }}
+    textareaDescriptionText='description text, %{count}'
+    maxLength={200}
+    name='with-custom-messages'
+  />
+)

package/src/react/character-count/__examples__/with-error-message.tsx

@@ -0,0 +1,16 @@
+import { CharacterCount, ErrorMessage, Hint, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <CharacterCount
+    defaultValue='I would like to request my service record and have a question about what proof of address is acceptable. The guidance doesn’t say if a digital bank statement will be accepted. Can someone please confirm if'
+    errorMessage={<ErrorMessage>Detail must be 200 characters or less</ErrorMessage>}
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        Can you provide more detail?
+      </Label>
+    }
+    hint={<Hint>Do not include personal information like your service number.</Hint>}
+    maxLength={200}
+    name='exceeding'
+  />
+)

package/src/react/character-count/__examples__/with-threshold.tsx

@@ -0,0 +1,15 @@
+import { CharacterCount, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <CharacterCount
+    defaultValue='Type another letter into this field after this message to see the threshold feature'
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        Can you provide more detail?
+      </Label>
+    }
+    maxLength={112}
+    name='with-hint'
+    threshold={0.75}
+  />
+)

package/src/react/character-count/__examples__/with-word-count-custom-messages.tsx

@@ -0,0 +1,18 @@
+import { CharacterCount, Hint, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <CharacterCount
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        Can you provide more detail?
+      </Label>
+    }
+    hint={<Hint>Do not include personal information like your service number.</Hint>}
+    wordsAtLimitText='words at limit'
+    wordsOverLimitText={{ one: 'words over limit, one, %{count}', other: 'words over limit, other, %{count}' }}
+    wordsUnderLimitText={{ one: 'words under limit, one, %{count}', other: 'words under limit, other, %{count}' }}
+    textareaDescriptionText='description text, %{count}'
+    maxWords={5}
+    name='with-custom-messages-word-count'
+  />
+)

package/src/react/character-count/__examples__/word-count.tsx

@@ -0,0 +1,13 @@
+import { CharacterCount, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <CharacterCount
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        Enter a job description
+      </Label>
+    }
+    maxWords={150}
+    name='word-count'
+  />
+)

package/src/react/details/__examples__/default.tsx

@@ -0,0 +1,7 @@
+import { Details } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Details summary='Help with organisation'>
+    We need to know the organisation you work for so we can forward your request to the correct team.
+  </Details>
+)

package/src/react/details/__examples__/open.tsx

@@ -0,0 +1,7 @@
+import { Details } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Details summary='Help with organisation' open>
+    We need to know the organisation you work for so we can forward your request to the correct team.
+  </Details>
+)

package/src/react/fieldset/__examples__/default.tsx

@@ -0,0 +1,31 @@
+import { Fieldset, FieldsetLegend, Input, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Fieldset>
+    <FieldsetLegend className='govuk-fieldset__legend--l' isPageHeading>
+      What is your address?
+    </FieldsetLegend>
+    <Input
+      autoComplete='address-line1'
+      label={<Label>Address line 1</Label>}
+      name='address-line-1'
+    />
+    <Input
+      autoComplete='address-line2'
+      label={<Label>Address line 2 (optional)</Label>}
+      name='address-line-2'
+    />
+    <Input
+      autoComplete='address-level2'
+      className='govuk-!-width-two-thirds'
+      label={<Label>Town or city</Label>}
+      name='address-town'
+    />
+    <Input
+      autoComplete='postal-code'
+      className='govuk-input--width-10'
+      label={<Label>Postcode</Label>}
+      name='address-postcode'
+    />
+  </Fieldset>
+)

package/src/react/fieldset/__examples__/not-as-page-heading.tsx

@@ -0,0 +1,31 @@
+import { Fieldset, FieldsetLegend, Input, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Fieldset>
+    <FieldsetLegend className='govuk-fieldset__legend--s'>
+      What is your address?
+    </FieldsetLegend>
+    <Input
+      autoComplete='address-line1'
+      label={<Label>Address line 1</Label>}
+      name='address-line-1'
+    />
+    <Input
+      autoComplete='address-line2'
+      label={<Label>Address line 2 (optional)</Label>}
+      name='address-line-2'
+    />
+    <Input
+      autoComplete='address-level2'
+      className='govuk-!-width-two-thirds'
+      label={<Label>Town or city</Label>}
+      name='address-town'
+    />
+    <Input
+      autoComplete='postal-code'
+      className='govuk-input--width-10'
+      label={<Label>Postcode</Label>}
+      name='address-postcode'
+    />
+  </Fieldset>
+)

package/src/react/notification-banner/__examples__/default.tsx

@@ -0,0 +1,7 @@
+import { NotificationBanner } from '../NotificationBanner'
+
+export const Example = () => (
+  <NotificationBanner>
+    There may be a delay in processing your application because of the coronavirus outbreak.
+  </NotificationBanner>
+)

package/src/react/notification-banner/__examples__/success.tsx

@@ -0,0 +1,13 @@
+import { NotificationBanner } from '../NotificationBanner'
+
+export const Example = () => (
+  <NotificationBanner type='success'>
+    <h3 className='govuk-notification-banner__heading'>
+      Training outcome recorded and trainee withdrawn
+    </h3>
+    <p className='govuk-body'>
+      Contact <a className='govuk-notification-banner__link' href='#'>example@department.gov.uk</a>
+      {' if you think there’s a problem.'}
+    </p>
+  </NotificationBanner>
+)

package/src/react/notification-banner/__examples__/with-custom-title.tsx

@@ -0,0 +1,7 @@
+import { NotificationBanner } from '../NotificationBanner'
+
+export const Example = () => (
+  <NotificationBanner title='Custom title'>
+    There may be a delay in processing your application because of the coronavirus outbreak.
+  </NotificationBanner>
+)

package/src/react/notification-banner/__examples__/with-disable-auto-focus.tsx

@@ -0,0 +1,7 @@
+import { NotificationBanner } from '../NotificationBanner'
+
+export const Example = () => (
+  <NotificationBanner disableAutoFocus>
+    There may be a delay in processing your application because of the coronavirus outbreak.
+  </NotificationBanner>
+)

package/src/react/notification-banner/__examples__/with-html.tsx

@@ -0,0 +1,10 @@
+import { NotificationBanner } from '../NotificationBanner'
+
+export const Example = () => (
+  <NotificationBanner>
+    <p className='govuk-notification-banner__heading'>
+      {'You have 7 days left to send your application. '}
+      <a className='govuk-notification-banner__link' href='#'>View application</a>.
+    </p>
+  </NotificationBanner>
+)

package/client/index.d.ts

@@ -1,2 +0,0 @@
-export * from 'govuk-frontend';
-//# sourceMappingURL=index.d.ts.map

package/client/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/client/index.d.ts

@@ -1,2 +0,0 @@
-export * from 'govuk-frontend';
-//# sourceMappingURL=index.d.ts.map

package/dist/client/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}