@atom-learning/components 2.0.0 → 2.2.0

package/dist/docs/CheckboxField.mdx

@@ -1,7 +1,7 @@
 ---
 title: Checkbox Field
 component: CheckboxField
-description: Combines a Checkbox with a Label and ValidationError
+description: Combines a Checkbox with a Label and InlineMessage
 category: Form fields
 ---
 

package/dist/docs/DateField.mdx

@@ -1,7 +1,7 @@
 ---
 title: Date Field
 component: DateField
-description: DateField renders a field composed of an DateInput, a Label and a ValidationError
+description: DateField renders a field composed of an DateInput, a Label and a InlineMessage
 category: Form fields
 ---
 
@@ -11,7 +11,7 @@ In addition to text `Label` (required) and a validation error (optional), `DateF
 `DateField`’s `css` prop will be applied to a containing `Box`—the styling of the individual components inside `DateField` cannot be altered.
 
 Err on the side of using consistent form fields, but if you really need something with different styling then consider composing your own field from the
-`DateInput`, `Label` and `ValidationError` components.
+`DateInput`, `Label` and `InlineMessage` components.
 
 ```tsx preview
 <Form>

package/dist/docs/FieldWrapper.mdx

@@ -5,7 +5,7 @@ description: A utility component to help with composing consistent form fields
 category: Form primitives
 ---
 
-`FieldWrapper` renders a `Label` and (when applicable) a `ValidationError`. Use it to wrap any type of input to create a consistent set of form fields.
+`FieldWrapper` renders a `Label` and (when applicable) a `InlineMessage`. Use it to wrap any type of input to create a consistent set of form fields.
 
 ```tsx preview
 <FieldWrapper label="Example Field" fieldId="example">

package/dist/docs/Form.mdx

@@ -174,7 +174,7 @@ Here's an example using the `persist` prop:
 
 ## Composing form field components
 
-It’s easy to compose your own custom form fields from the low-level components in this library (`Input`, `Label`, `ValidationError` etc) but there are some requirements that your new
+It’s easy to compose your own custom form fields from the low-level components in this library (`Input`, `Label`, `InlineMessage` etc) but there are some requirements that your new
 field must meet in order to be fully compatible with our `Form`.
 
 ### Props
@@ -183,7 +183,7 @@ Your custom form field component must take the props specified in [General](#Gen
 
 #### error
 
-`error` should be displayed in a `ValidationError` when present. You don’t need to pass `error` to your component manually; the `Form` will pass it in automatically when appropriate.
+`error` should be displayed in a `InlineMessage` when present. You don’t need to pass `error` to your component manually; the `Form` will pass it in automatically when appropriate.
 
 To properly retrieve the error in both static and dynamic fields it is necessary to use the `useFieldError` hook stored in the form directory, that accepts a field name parameter.
 
@@ -258,7 +258,7 @@ const EmailField = ({ css, name, validation, required, ...rest }) => {
         error={error}
         {...rest}
       />
-      {error && <ValidationError css={{ mt: '$1' }}>{error}</ValidationError>}
+      {error && <InlineMessage css={{ mt: '$1' }}>{error}</InlineMessage>}
     </FieldWrapper>
   )
 }

package/dist/docs/InlineMessage.mdx

@@ -0,0 +1,52 @@
+---
+title: Inline Message
+component: InlineMessage
+description: Inline feedback message with an optional icon
+category: Feedback
+---
+
+Inline messages consist of an inline feedback message in the form of simple text that inform the user of relevant information, revealed in context.
+
+```tsx preview
+<InlineMessage>This is an Inline Message</InlineMessage>
+```
+
+## Theme
+
+These are the available `theme`s for this component: `success`, `warning`, `error`, `neutral` and `info`. The default is `error` (due to most frequent context).
+
+```tsx preview
+<>
+  <InlineMessage theme="error">This is an error Inline Message</InlineMessage>
+  <InlineMessage theme="warning">
+    This is a warning Inline Message
+  </InlineMessage>
+  <InlineMessage theme="success">
+    This is a success Inline Message
+  </InlineMessage>
+  <InlineMessage theme="info">This is an info Inline Message</InlineMessage>
+  <InlineMessage theme="neutral">
+    This is a neutral Inline Message
+  </InlineMessage>
+</>
+```
+
+## Size
+
+These are the available `size`s for this component: `xs`, `sm` and `md`. The default is `sm`
+
+```tsx preview
+<>
+  <InlineMessage size="xs">This is an xs Inline Message</InlineMessage>
+  <InlineMessage size="sm">This is a sm Inline Message</InlineMessage>
+  <InlineMessage size="md">This is a md Inline Message</InlineMessage>
+</>
+```
+
+## Icon
+
+Each theme has a specific icon it should export, so showing or hiding an icon is simply done using the `showIcon` prop. Default is `true`.
+
+```tsx preview
+<InlineMessage showIcon={false}>This is an Inline Message</InlineMessage>
+```

package/dist/docs/InputField.mdx

@@ -1,7 +1,7 @@
 ---
 title: Input Field
 component: InputField
-description: InputField renders a field composed of an Input, a Label and a ValidationError
+description: InputField renders a field composed of an Input, a Label and a InlineMessage
 category: Form fields
 ---
 
@@ -11,7 +11,7 @@ In addition to text `Label` (required) and a validation error (optional), `Input
 `InputField`’s `css` prop will be applied to a containing `Box`—the styling of the individual components inside `InputField` cannot be altered.
 
 Err on the side of using consistent form fields, but if you really need something with different styling then consider composing your own field from the
-`Input`, `Label` and `ValidationError` components.
+`Input`, `Label` and `InlineMessage` components.
 
 ```tsx preview
 <Form>

package/dist/docs/NavigationMenu.mdx

@@ -0,0 +1,113 @@
+---
+title: NavigationMenu
+component: NavigationMenu,NavigationMenu.Link,NavigationMenu.Dropdown,NavigationMenu.DropdownContent,NavigationMenu.DropdownItem
+description: A collection of links for navigating apps.
+category: Navigation
+---
+
+`NavigationMenu` exports many components that combine to form a navigation menu.
+
+```tsx preview
+<NavigationMenu>
+  <NavigationMenu.Link href="/overview/introduction">
+    Introduction
+  </NavigationMenu.Link>
+  <NavigationMenu.Dropdown title="Theme">
+    <NavigationMenu.DropdownContent>
+      <NavigationMenu.DropdownItem href="/theme/colours">
+        Colours
+      </NavigationMenu.DropdownItem>
+      <NavigationMenu.DropdownItem href="/theme/effects">
+        Effects
+      </NavigationMenu.DropdownItem>
+      <NavigationMenu.DropdownItem href="/theme/icons">
+        Icons
+      </NavigationMenu.DropdownItem>
+    </NavigationMenu.DropdownContent>
+  </NavigationMenu.Dropdown>
+</NavigationMenu>
+```
+
+## With client side routing
+
+`NavigationMenu.Dropdown`, `NavigationMenu.DropdownItem` and `NavigationMenu.Link` can be passed an `active` prop for instances when you want to highlight the currently active route. See below for examples using client side routing with the `NavigationMenu.Link` component. The same method can be applied to `NavigationMenu.Dropdown` and `NavigationMenu.DropdownItem`.
+
+#### Example using React Router
+
+```tsx
+const Link = ({ href, ...props }) => {
+  const { pathname } = useLocation()
+  const isActive = path === href
+
+  return (
+    <NavigationMenu.Link active={isActive} {...props}>
+      Introduction
+    </NavigationMenu.Link>
+  )
+}
+```
+
+#### Example using Next JS
+
+```tsx
+const Link = ({ href, ...props }) => {
+  const router = useRouter()
+  const isActive = router.asPath === href
+
+  return (
+    <NavigationMenu.Link active={isActive} {...props}>
+      Introduction
+    </NavigationMenu.Link>
+  )
+}
+```
+
+## Changing the layout of the dropdown content
+
+By default, dropdown items inside of `NavigationMenu.DropdownContent` will stack.
+
+If you want to change the way items are displayed, you can add custom styling to `NavigationMenu.DropdownContent`.
+
+In the below example the styling of `NavigationMenu.DropdownContent` has been changed to allow a grid layout.
+
+```tsx preview
+<NavigationMenu>
+  <NavigationMenu.Link href="/overview/introduction">
+    Introduction
+  </NavigationMenu.Link>
+  <NavigationMenu.Dropdown title="Theme">
+    <NavigationMenu.DropdownContent
+      css={{
+        display: 'grid',
+        gap: '$1',
+        gridAutoFlow: 'column',
+        width: 500,
+        gridTemplateRows: 'repeat(2, 1fr)'
+      }}
+    >
+      {['colours', 'icons', 'effects', 'typography'].map((item) => (
+        <NavigationMenu.DropdownItem href={`/theme/${item}`}>
+          <Text
+            css={{
+              mb: '0.75rem',
+              textTransform: 'capitalize'
+            }}
+          >
+            {item}
+          </Text>
+          <Text
+            css={{
+              color: 'inherit',
+              lineHeight: 1.5,
+              fontWeight: 400,
+              fontSize: 14
+            }}
+          >
+            This is some example text about {item}
+          </Text>
+        </NavigationMenu.DropdownItem>
+      ))}
+    </NavigationMenu.DropdownContent>
+  </NavigationMenu.Dropdown>
+</NavigationMenu>
+```

package/dist/docs/RadioButtonField.mdx

@@ -1,11 +1,11 @@
 ---
 title: Radio Button Field
 component: RadioButtonField
-description: Combines a RadioButtonGroup and RadioButtons with a Label and ValidationError
+description: Combines a RadioButtonGroup and RadioButtons with a Label and InlineMessage
 category: Form fields
 ---
 
-`RadioButtonField` wraps a `RadioButtonGroup` to provide a legend and a `ValidationError`. `RadioButtonField.Item` renders an individual `RadioButton` with an inline `Label`.
+`RadioButtonField` wraps a `RadioButtonGroup` to provide a legend and a `InlineMessage`. `RadioButtonField.Item` renders an individual `RadioButton` with an inline `Label`.
 
 **Note**: a `RadioButtonField.Item`’s `value` **must** be a `string`.
 

package/dist/docs/SelectField.mdx

@@ -1,11 +1,11 @@
 ---
 title: Select Field
 component: SelectField
-description: Wraps a Select with a Label and ValidationError
+description: Wraps a Select with a Label and InlineMessage
 category: Form fields
 ---
 
-`SelectField` wraps a `Select` with a `Label` and a `ValidationError` to provide consistent behaviour and layout.
+`SelectField` wraps a `Select` with a `Label` and a `InlineMessage` to provide consistent behaviour and layout.
 
 ```tsx preview
 <Form>

package/dist/docs/TextareaField.mdx

@@ -1,7 +1,7 @@
 ---
 title: Textarea Field
 component: TextareaField
-description: TextareaField renders a field composed of a Textarea, a Label and a ValidationError
+description: TextareaField renders a field composed of a Textarea, a Label and a InlineMessage
 category: Form fields
 ---