@moduk/frontend 1.3.0 → 1.4.0

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

@@ -0,0 +1,38 @@
+import { SummaryList, SummaryListKey, SummaryListValue } from '@moduk/frontend/react'
+
+export const Example = () => (
+  <SummaryList
+    className='govuk-summary-list--no-border'
+    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>
+        ),
+      },
+    ]}
+  />
+)

package/src/react/tag/__examples__/blue.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--blue'>Pending</Tag>

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

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag>Completed</Tag>

package/src/react/tag/__examples__/green.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--green'>New</Tag>

package/src/react/tag/__examples__/grey.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--grey'>Inactive</Tag>

package/src/react/tag/__examples__/orange.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--orange'>Declined</Tag>

package/src/react/tag/__examples__/pink.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--pink'>Sent</Tag>

package/src/react/tag/__examples__/purple.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--purple'>Received</Tag>

package/src/react/tag/__examples__/red.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--red'>Rejected</Tag>

package/src/react/tag/__examples__/turquoise.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--turquoise'>Active</Tag>

package/src/react/tag/__examples__/yellow.tsx

@@ -0,0 +1,3 @@
+import { Tag } from '@moduk/frontend/react'
+
+export const Example = () => <Tag className='govuk-tag--yellow'>Delayed</Tag>