@moduk/frontend 1.3.0 → 1.4.0

package/src/react/input/__examples__/with-error.tsx

@@ -0,0 +1,14 @@
+import { ErrorMessage, Hint, Input, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Input
+    errorMessage={<ErrorMessage>Enter an event name</ErrorMessage>}
+    hint={<Hint>The name you’ll use on promotional material</Hint>}
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        What is the name of the event?
+      </Label>
+    }
+    name='event-name-with-error'
+  />
+)

package/src/react/input/__examples__/with-fixed-width.tsx

@@ -0,0 +1,36 @@
+import { Input, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <div>
+    <Input
+      className='govuk-input--width-20'
+      label={<Label>20 character width</Label>}
+      name='width-20'
+    />
+    <Input
+      className='govuk-input--width-10'
+      label={<Label>10 character width</Label>}
+      name='width-10'
+    />
+    <Input
+      className='govuk-input--width-5'
+      label={<Label>5 character width</Label>}
+      name='width-5'
+    />
+    <Input
+      className='govuk-input--width-4'
+      label={<Label>4 character width</Label>}
+      name='width-4'
+    />
+    <Input
+      className='govuk-input--width-3'
+      label={<Label>3 character width</Label>}
+      name='width-3'
+    />
+    <Input
+      className='govuk-input--width-2'
+      label={<Label>2 character width</Label>}
+      name='width-2'
+    />
+  </div>
+)

package/src/react/input/__examples__/with-fluid-width.tsx

@@ -0,0 +1,36 @@
+import { Input, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <div>
+    <Input
+      className='govuk-!-width-full'
+      label={<Label>Full width</Label>}
+      name='full'
+    />
+    <Input
+      className='govuk-!-width-three-quarters'
+      label={<Label>Three-quarters width</Label>}
+      name='three-quarters'
+    />
+    <Input
+      className='govuk-!-width-two-thirds'
+      label={<Label>Two-thirds width</Label>}
+      name='two-thirds'
+    />
+    <Input
+      className='govuk-!-width-one-half'
+      label={<Label>One-half width</Label>}
+      name='one-half'
+    />
+    <Input
+      className='govuk-!-width-one-third'
+      label={<Label>One-third width</Label>}
+      name='one-third'
+    />
+    <Input
+      className='govuk-!-width-one-quarter'
+      label={<Label>One-quarter width</Label>}
+      name='one-quarter'
+    />
+  </div>
+)

package/src/react/input/__examples__/with-hint.tsx

@@ -0,0 +1,13 @@
+import { Hint, Input, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Input
+    hint={<Hint>The name you’ll use on promotional material</Hint>}
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        What is the name of the event?
+      </Label>
+    }
+    name='event-name-with-hint'
+  />
+)

package/src/react/input/__examples__/with-numeric.tsx

@@ -0,0 +1,16 @@
+import { Hint, Input, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Input
+    className='govuk-input--width-10'
+    hint={<Hint>Must be between 6 and 8 digits long</Hint>}
+    inputMode='numeric'
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        What is your account number?
+      </Label>
+    }
+    name='account-number-with-numeric'
+    spellCheck={false}
+  />
+)

package/src/react/input/__examples__/with-prefix-and-suffix-error.tsx

@@ -0,0 +1,17 @@
+import { ErrorMessage, Input, InputPrefix, InputSuffix, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Input
+    className='govuk-input--width-5'
+    errorMessage={<ErrorMessage>Enter a cost per item, in pounds</ErrorMessage>}
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        What is the cost per item, in pounds?
+      </Label>
+    }
+    name='cost-per-item-with-prefix-and-suffix-error'
+    prefix={<InputPrefix>£</InputPrefix>}
+    suffix={<InputSuffix>per item</InputSuffix>}
+    spellCheck={false}
+  />
+)

package/src/react/input/__examples__/with-prefix-and-suffix.tsx

@@ -0,0 +1,16 @@
+import { Input, InputPrefix, InputSuffix, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Input
+    className='govuk-input--width-5'
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        What is the cost per item, in pounds?
+      </Label>
+    }
+    name='cost-per-item-with-prefix-and-suffix'
+    prefix={<InputPrefix>£</InputPrefix>}
+    suffix={<InputSuffix>per item</InputSuffix>}
+    spellCheck={false}
+  />
+)

package/src/react/input/__examples__/with-prefix.tsx

@@ -0,0 +1,15 @@
+import { Input, InputPrefix, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Input
+    className='govuk-input--width-5'
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        What is the cost in pounds?
+      </Label>
+    }
+    name='cost-with-prefix'
+    prefix={<InputPrefix>£</InputPrefix>}
+    spellCheck={false}
+  />
+)

package/src/react/input/__examples__/with-suffix.tsx

@@ -0,0 +1,15 @@
+import { Input, InputSuffix, Label } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Input
+    className='govuk-input--width-5'
+    label={
+      <Label className='govuk-label--l' isPageHeading>
+        What is the weight in kilograms?
+      </Label>
+    }
+    name='weight-with-suffix'
+    suffix={<InputSuffix>kg</InputSuffix>}
+    spellCheck={false}
+  />
+)

package/src/react/phase-banner/__examples__/beta.tsx

@@ -0,0 +1,7 @@
+import { PhaseBanner, PhaseTag } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <PhaseBanner phaseTag={<PhaseTag>beta</PhaseTag>}>
+    This is a new service – your <a className='govuk-link' href='#'>feedback</a> will help us to improve it.
+  </PhaseBanner>
+)

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

@@ -0,0 +1,7 @@
+import { PhaseBanner, PhaseTag } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <PhaseBanner phaseTag={<PhaseTag>alpha</PhaseTag>}>
+    This is a new service – your <a className='govuk-link' href='#'>feedback</a> will help us to improve it.
+  </PhaseBanner>
+)

package/src/react/phase-banner/__examples__/with-tag-override.tsx

@@ -0,0 +1,7 @@
+import { PhaseBanner, PhaseTag } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <PhaseBanner phaseTag={<PhaseTag className='govuk-tag--grey'>beta</PhaseTag>}>
+    This is a new service – your <a className='govuk-link' href='#'>feedback</a> will help us to improve it.
+  </PhaseBanner>
+)

package/src/react/phase-banner/__examples__/with-text.tsx

@@ -0,0 +1,7 @@
+import { PhaseBanner, PhaseTag } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <PhaseBanner phaseTag={<PhaseTag>beta</PhaseTag>}>
+    This is a new service
+  </PhaseBanner>
+)

package/src/react/summary-list/__examples__/cards-with-action.tsx

@@ -0,0 +1,88 @@
+import {
+  SummaryCardActions,
+  SummaryCardTitle,
+  SummaryList,
+  SummaryListActionLink,
+  SummaryListKey,
+  SummaryListValue,
+  VisuallyHiddenText,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <div>
+    <SummaryList
+      card={{
+        title: <SummaryCardTitle>University of Gloucestershire</SummaryCardTitle>,
+        actions: (
+          <SummaryCardActions>
+            <SummaryListActionLink href='#'>
+              Delete choice <VisuallyHiddenText>of University of Gloucestershire</VisuallyHiddenText>
+            </SummaryListActionLink>
+            <SummaryListActionLink href='#'>
+              Withdraw <VisuallyHiddenText>from University of Gloucestershire</VisuallyHiddenText>
+            </SummaryListActionLink>
+          </SummaryCardActions>
+        ),
+      }}
+      rows={[
+        {
+          key: <SummaryListKey>Course</SummaryListKey>,
+          value: (
+            <SummaryListValue>
+              English (3DMD)
+              <br />
+              PGCE with QTS full time
+            </SummaryListValue>
+          ),
+        },
+        {
+          key: <SummaryListKey>Location</SummaryListKey>,
+          value: (
+            <SummaryListValue>
+              School name
+              <br />
+              Road, City, SW1 1AA
+            </SummaryListValue>
+          ),
+        },
+      ]}
+    />
+    <SummaryList
+      card={{
+        title: <SummaryCardTitle>University of Bristol</SummaryCardTitle>,
+        actions: (
+          <SummaryCardActions>
+            <SummaryListActionLink href='#'>
+              Delete choice <VisuallyHiddenText>of University of Bristol</VisuallyHiddenText>
+            </SummaryListActionLink>
+            <SummaryListActionLink href='#'>
+              Withdraw <VisuallyHiddenText>from University of Bristol</VisuallyHiddenText>
+            </SummaryListActionLink>
+          </SummaryCardActions>
+        ),
+      }}
+      rows={[
+        {
+          key: <SummaryListKey>Course</SummaryListKey>,
+          value: (
+            <SummaryListValue>
+              English (Q3X1)
+              <br />
+              PGCE with QTS full time
+            </SummaryListValue>
+          ),
+        },
+        {
+          key: <SummaryListKey>Location</SummaryListKey>,
+          value: (
+            <SummaryListValue>
+              School name
+              <br />
+              Road, City, SW2 1AA
+            </SummaryListValue>
+          ),
+        },
+      ]}
+    />
+  </div>
+)

package/src/react/summary-list/__examples__/cards-with-single-action.tsx

@@ -0,0 +1,46 @@
+import {
+  SummaryCardActions,
+  SummaryCardTitle,
+  SummaryList,
+  SummaryListActionLink,
+  SummaryListKey,
+  SummaryListValue,
+  VisuallyHiddenText,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <SummaryList
+    card={{
+      title: <SummaryCardTitle>University of Gloucestershire</SummaryCardTitle>,
+      actions: (
+        <SummaryCardActions>
+          <SummaryListActionLink href='#'>
+            Withdraw <VisuallyHiddenText>from University of Gloucestershire</VisuallyHiddenText>
+          </SummaryListActionLink>
+        </SummaryCardActions>
+      ),
+    }}
+    rows={[
+      {
+        key: <SummaryListKey>Course</SummaryListKey>,
+        value: (
+          <SummaryListValue>
+            English (3DMD)
+            <br />
+            PGCE with QTS full time
+          </SummaryListValue>
+        ),
+      },
+      {
+        key: <SummaryListKey>Location</SummaryListKey>,
+        value: (
+          <SummaryListValue>
+            School name
+            <br />
+            Road, City, SW1 1AA
+          </SummaryListValue>
+        ),
+      },
+    ]}
+  />
+)

package/src/react/summary-list/__examples__/cards.tsx

@@ -0,0 +1,156 @@
+import {
+  SummaryCardTitle,
+  SummaryList,
+  SummaryListActionLink,
+  SummaryListActions,
+  SummaryListKey,
+  SummaryListValue,
+  VisuallyHiddenText,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <div>
+    <SummaryList
+      card={{
+        title: <SummaryCardTitle>Lead tenant</SummaryCardTitle>,
+      }}
+      rows={[
+        {
+          key: <SummaryListKey>Age</SummaryListKey>,
+          value: <SummaryListValue>38</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>age</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Nationality</SummaryListKey>,
+          value: <SummaryListValue>UK national resident in UK</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>nationality</VisuallyHiddenText>
+              </SummaryListActionLink>,
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Working situation</SummaryListKey>,
+          value: <SummaryListValue>Part time – less than 30 hours a week</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>working situation</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+      ]}
+    />
+    <SummaryList
+      card={{
+        title: <SummaryCardTitle>Person 2</SummaryCardTitle>,
+      }}
+      rows={[
+        {
+          key: <SummaryListKey>Details known</SummaryListKey>,
+          value: <SummaryListValue>Yes</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>whether details are known</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Relationship to lead tenant</SummaryListKey>,
+          value: <SummaryListValue>Partner</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>relationship to lead tenant</VisuallyHiddenText>
+              </SummaryListActionLink>,
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Age</SummaryListKey>,
+          value: <SummaryListValue>42</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>age</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Working situation</SummaryListKey>,
+          value: <SummaryListValue>Unable to work because of long-term sickness or disability</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>working situation</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+      ]}
+    />
+    <SummaryList
+      card={{
+        title: <SummaryCardTitle>Person 3</SummaryCardTitle>,
+      }}
+      rows={[
+        {
+          key: <SummaryListKey>Details known</SummaryListKey>,
+          value: <SummaryListValue>Yes</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>whether details are known</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Relationship to lead tenant</SummaryListKey>,
+          value: <SummaryListValue>Child</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>relationship to lead tenant</VisuallyHiddenText>
+              </SummaryListActionLink>,
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Age</SummaryListKey>,
+          value: <SummaryListValue>7</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>age</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+        {
+          key: <SummaryListKey>Working situation</SummaryListKey>,
+          value: <SummaryListValue>Child under 16</SummaryListValue>,
+          actions: (
+            <SummaryListActions>
+              <SummaryListActionLink href='#'>
+                Change <VisuallyHiddenText>working situation</VisuallyHiddenText>
+              </SummaryListActionLink>
+            </SummaryListActions>
+          ),
+        },
+      ]}
+    />
+  </div>
+)

package/src/react/summary-list/__examples__/default.tsx

@@ -0,0 +1,72 @@
+import {
+  SummaryList,
+  SummaryListActionLink,
+  SummaryListActions,
+  SummaryListKey,
+  SummaryListValue,
+  VisuallyHiddenText,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <SummaryList
+    rows={[
+      {
+        key: <SummaryListKey>Name</SummaryListKey>,
+        value: <SummaryListValue>Sarah Philips</SummaryListValue>,
+        actions: (
+          <SummaryListActions>
+            <SummaryListActionLink href='#'>
+              Change <VisuallyHiddenText>name</VisuallyHiddenText>
+            </SummaryListActionLink>
+          </SummaryListActions>
+        ),
+      },
+      {
+        key: <SummaryListKey>Date of birth</SummaryListKey>,
+        value: <SummaryListValue>5 January 1978</SummaryListValue>,
+        actions: (
+          <SummaryListActions>
+            <SummaryListActionLink href='#'>
+              Change <VisuallyHiddenText>date of birth</VisuallyHiddenText>
+            </SummaryListActionLink>,
+          </SummaryListActions>
+        ),
+      },
+      {
+        key: <SummaryListKey>Address</SummaryListKey>,
+        value: (
+          <SummaryListValue>
+            72 Guild Street
+            <br />
+            London
+            <br />
+            SE23 6FH
+          </SummaryListValue>
+        ),
+        actions: (
+          <SummaryListActions>
+            <SummaryListActionLink href='#'>
+              Change <VisuallyHiddenText>address</VisuallyHiddenText>
+            </SummaryListActionLink>
+          </SummaryListActions>
+        ),
+      },
+      {
+        key: <SummaryListKey>Contact details</SummaryListKey>,
+        value: (
+          <SummaryListValue>
+            <p className='govuk-body'>07700 900457</p>
+            <p className='govuk-body'>sarah.phillips@example.com</p>
+          </SummaryListValue>
+        ),
+        actions: (
+          <SummaryListActions>
+            <SummaryListActionLink href='#'>
+              Change <VisuallyHiddenText>contact details</VisuallyHiddenText>
+            </SummaryListActionLink>
+          </SummaryListActions>
+        ),
+      },
+    ]}
+  />
+)

package/src/react/summary-list/__examples__/with-multiple-actions.tsx

@@ -0,0 +1,29 @@
+import {
+  SummaryList,
+  SummaryListActionLink,
+  SummaryListActions,
+  SummaryListKey,
+  SummaryListValue,
+  VisuallyHiddenText,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <SummaryList
+    rows={[
+      {
+        key: <SummaryListKey>Name</SummaryListKey>,
+        value: <SummaryListValue>Sarah Philips</SummaryListValue>,
+        actions: (
+          <SummaryListActions>
+            <SummaryListActionLink href='#'>
+              Change <VisuallyHiddenText>name</VisuallyHiddenText>
+            </SummaryListActionLink>
+            <SummaryListActionLink href='#'>
+              Remove <VisuallyHiddenText>name</VisuallyHiddenText>
+            </SummaryListActionLink>
+          </SummaryListActions>
+        ),
+      },
+    ]}
+  />
+)

package/src/react/summary-list/__examples__/with-no-actions.tsx

@@ -0,0 +1,37 @@
+import { SummaryList, SummaryListKey, SummaryListValue } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <SummaryList
+    rows={[
+      {
+        key: <SummaryListKey>Name</SummaryListKey>,
+        value: <SummaryListValue>Sarah Philips</SummaryListValue>,
+      },
+      {
+        key: <SummaryListKey>Date of birth</SummaryListKey>,
+        value: <SummaryListValue>5 January 1978</SummaryListValue>,
+      },
+      {
+        key: <SummaryListKey>Address</SummaryListKey>,
+        value: (
+          <SummaryListValue>
+            72 Guild Street
+            <br />
+            London
+            <br />
+            SE23 6FH
+          </SummaryListValue>
+        ),
+      },
+      {
+        key: <SummaryListKey>Contact details</SummaryListKey>,
+        value: (
+          <SummaryListValue>
+            <p className='govuk-body'>07700 900457</p>
+            <p className='govuk-body'>sarah.phillips@example.com</p>
+          </SummaryListValue>
+        ),
+      },
+    ]}
+  />
+)