Merge pull request #183 from omnifed/174-docs-use-pagetabs-in-field-m…

…essage-page

docs: update Field Message to use PageTabs

docs/app/react/field-message/a11y.mdx

@@ -0,0 +1,19 @@
+---
+---
+
+import {
+  WhenToUseAdmonition
+} from '@/app/components/Admonition'
+import OverviewList from '@/app/components/OverviewList'
+
+## Use Cases
+
+<OverviewList intro="Users should be able to:" rules={[
+  'Receive and understand supporting text and error messages',
+]} />
+
+## Labeling Elements
+
+If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
+
+It can be useful to provide a descriptive identifier for the field message - like `help:first_name` - to help users navigate to the field message with assistive technology.

docs/app/react/field-message/doc.mdx → docs/app/react/field-message/dev.mdx

@@ -7,9 +7,7 @@ source: 'components/FieldMessage.tsx'
 recipe: 'fieldMesage.ts'
 ---
 
-import {
-  WhenToUseAdmonition
-} from '@/app/components/Admonition'
+import { NoteAdmonition } from '@/app/components/Admonition'
 import CodePreview from '@/app/components/CodePreview'
 import {
   FieldMessageBasicPreview,
@@ -21,8 +19,6 @@ import {
 import { Field, FieldMessage } from '@cerberus-design/react'
 ```
 
-<WhenToUseAdmonition description="When you need extra context for an Input component (valid or error state)." />
-
 ## Usage
 
 <CodePreview preview={<FieldMessageBasicPreview />}>
@@ -98,6 +94,19 @@ function FieldMessageCustomPreview() {
 
 ## API
 
+<NoteAdmonition description="The Label component must be used within a Field provider." />
+
+```ts showLineNumbers=false
+export interface FieldProps {
+  disabled?: boolean
+  invalid?: boolean
+  required?: boolean
+  readOnly?: boolean
+}
+
+define function Field(props: PropsWithChildren<FieldProps>): ReactNode | null
+```
+
 ```ts showLineNumbers=false
 export interface FieldMessageProps
   extends HTMLAttributes<HTMLParagraphElement> {

docs/app/react/field-message/guidelines.mdx

@@ -0,0 +1,35 @@
+---
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import OverviewList from '@/app/components/OverviewList'
+import {
+  WhenToUseAdmonition,
+  WhenNotToUseAdmonition,
+} from '@/app/components/Admonition'
+import {
+  FieldMessageBasicPreview,
+  FieldMessageInvalidPreview
+} from '@/app/react/field-message/components/field-message-preview'
+
+## Usage
+
+<WhenToUseAdmonition description="Use a field message to provide more context of an associated input." />
+
+## Standard Input
+
+<CodePreview preview={<FieldMessageBasicPreview />} />
+
+<WhenToUseAdmonition description="When you need to add more context for the user." />
+
+## Invalid Message
+
+<CodePreview preview={<FieldMessageInvalidPreview />} />
+
+<WhenToUseAdmonition description="When you need to tell the user why the input used is invalid." />
+
+## Responsive Layout
+
+As layouts adapt to larger screens and different window sizes, apply flexible container dimensions to text fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.
+
+Text fields can span the full width of the display on compact window sizes, but should be bounded by flexible margins or other containers on medium and expanded window sizes.

docs/app/react/field-message/overview.mdx

@@ -0,0 +1,26 @@
+---
+---
+
+import CodePreview from '@/app/components/CodePreview'
+import OverviewList from '@/app/components/OverviewList'
+import {
+  FieldMessageBasicPreview,
+  FieldMessageInvalidPreview
+} from '@/app/react/field-message/components/field-message-preview'
+
+<OverviewList rules={[
+  'Make sure the field message is close to the input field',
+  "The field message's state (standard or error) should be visible at a glance",
+  'Keep descriptors and error messages brief and easy to act on'
+]} />
+
+## Example
+
+<CodePreview preview={<FieldMessageBasicPreview />} />
+<CodePreview preview={<FieldMessageInvalidPreview />} />
+
+## Resources
+
+| Name     | Resource | Status                                               |
+| -------- | -------- | ---------------------------------------------------- |
+| Figma    | [Design Kit (Figma)](https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?m=auto&node-id=0-1)      |                         Private                      |

docs/app/react/field-message/page.tsx

@@ -1,11 +1,16 @@
 import ApiLinks from '@/app/components/ApiLinks'
 import OnThisPage from '../../components/OnThisPage'
 import { PageMainContent, PageSections } from '../../components/PageLayout'
-import Doc, { frontmatter } from './doc.mdx'
 import FeatureHeader from '@/app/components/FeatureHeader'
 import type { MatchFeatureKind } from '@/app/components/MatchFeatureImg'
+import PageTabs from '@/app/components/PageTabs'
 
-export default function FieldMessagePage() {
+import Overview from './overview.mdx'
+import Guidelines from './guidelines.mdx'
+import Dev, { frontmatter } from './dev.mdx'
+import A11y from './a11y.mdx'
+
+export default function InputPage() {
   return (
     <>
       <PageMainContent>
@@ -14,10 +19,19 @@ export default function FieldMessagePage() {
           description={frontmatter.description}
           a11y={frontmatter.a11y as MatchFeatureKind}
         />
-        <ApiLinks {...frontmatter} />
-        <main>
-          <Doc />
-        </main>
+
+        <PageTabs
+          description="Tabs component details"
+          overview={<Overview />}
+          guidelines={<Guidelines />}
+          dev={
+            <main>
+              <ApiLinks {...frontmatter} />
+              <Dev />
+            </main>
+          }
+          a11y={<A11y />}
+        />
       </PageMainContent>
 
       <PageSections>

docs/app/react/input/a11y.mdx

@@ -15,10 +15,6 @@ import OverviewList from '@/app/components/OverviewList'
   'Navigate to and select interactive icons',
 ]} />
 
-## Interaction & Style
-
-The containers for both filled and outlined text fields provide the same functionality. Changes to color and thickness of stroke help provide clear visual cues for interaction.
-
 ## Keyboard Navigation
 
 | Keys     | Actions                                                         |

docs/app/react/input/overview.mdx

@@ -12,7 +12,7 @@ import {
 
 <OverviewList rules={[
   'Make sure text fields look interactive',
-  'The text field’s state (blank, with input, error, etc) should be visible at a glance',
+  "The text field's state (blank, with input, error, etc) should be visible at a glance",
   'Keep labels and error messages brief and easy to act on',
   'Text fields commonly appear in forms and dialogs'
 ]} />