@atom-learning/components 1.24.2 → 2.1.0

package/dist/docs/ActionIcon.mdx

@@ -10,34 +10,28 @@ category: Navigation
 ```tsx preview
 <>
   <ActionIcon label="Attach a file" appearance="simple">
-    <Icon is={Clip} size="sm" />
-  </ActionIcon>
-  <ActionIcon label="Attach a file" appearance="subtle">
-    <Icon is={Clip} size="sm" />
+    <Icon is={Clip} />
   </ActionIcon>
   <ActionIcon label="Attach a file" appearance="outline">
-    <Icon is={Clip} size="sm" />
+    <Icon is={Clip} />
   </ActionIcon>
   <ActionIcon label="Attach a file" appearance="solid">
-    <Icon is={Clip} size="sm" />
+    <Icon is={Clip} />
   </ActionIcon>
 </>
 ```
 
 ## Rounded Variant
 
-Setting `isRounded` makes the Action circular when paired with the options "subtle", "outline" and "solid" for the `appearance` prop
+Setting `isRounded` makes the Action circular when paired with the options "outline" and "solid" for the `appearance` prop
 
 ```tsx preview
 <>
-  <ActionIcon label="Attach a file" appearance="subtle" isRounded>
-    <Icon is={Bell} size="sm" />
-  </ActionIcon>
   <ActionIcon label="Attach a file" appearance="outline" isRounded>
-    <Icon is={Bell} size="sm" />
+    <Icon is={Bell} />
   </ActionIcon>
   <ActionIcon label="Attach a file" appearance="solid" isRounded>
-    <Icon is={Bell} size="sm" />
+    <Icon is={Bell} />
   </ActionIcon>
 </>
 ```
@@ -48,14 +42,14 @@ Passing `disabled` makes the Action Icon take a disabled appearance, where any c
 
 ```tsx preview
 <>
-  <ActionIcon label="Attach a file" appearance="subtle" disabled>
-    <Icon is={Bell} size="sm" />
+  <ActionIcon label="Attach a file" appearance="simple" disabled>
+    <Icon is={Bell} />
   </ActionIcon>
   <ActionIcon label="Attach a file" appearance="outline" disabled>
-    <Icon is={Bell} size="sm" />
+    <Icon is={Bell} />
   </ActionIcon>
   <ActionIcon label="Attach a file" appearance="solid" disabled>
-    <Icon is={Bell} size="sm" />
+    <Icon is={Bell} />
   </ActionIcon>
 </>
 ```
@@ -66,7 +60,7 @@ It is recommended to pair `ActionIcon` with `Tooltip` to provide a clear visual
 <Tooltip>
   <Tooltip.Trigger>
     <ActionIcon size="lg" label="Add to basket">
-      <Icon is={Basket} size="md" />
+      <Icon is={Basket} />
     </ActionIcon>
   </Tooltip.Trigger>
   <Tooltip.Content>Add to basket</Tooltip.Content>
@@ -79,12 +73,12 @@ The `ActionIcon` component supports polymorphism, therefore depending on whether
 
 ```tsx preview
 <ActionIcon label="Shuffle selection" onClick={() => console.log('clicked')}>
-  <Icon is={Shuffle} size="sm" />
+  <Icon is={Shuffle} />
 </ActionIcon>
 ```
 
 ```tsx preview
 <ActionIcon label="Add a new folder" href="/directory/add">
-  <Icon is={FolderAdd} size="sm" />
+  <Icon is={FolderAdd} />
 </ActionIcon>
 ```

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/Icon.mdx

@@ -25,6 +25,6 @@ import { Icon } from '@atom-learning/components'
 import { Brightness } from '@atom-learning/icons'
 
 const Component = () => (
-  <Icon is={Brightness} size="lg" css={{ color: '$primary' }} />
+  <Icon is={Brightness} size="md" css={{ color: '$primary' }} />
 )
 ```

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/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
 ---