@jobber/components 8.6.0 → 8.7.1

package/dist/docs/Form/Form.md

@@ -1,106 +0,0 @@
-# Form
-
-The Form component is a wrapper component that handles the submission and
-validation of forms.
-
-For more information about `validations` using any of the Input components, see
-the [InputText](../InputText/InputText.md) documentation.
-
-## Design & usages guidelines
-
-The Form component has a lot of built-in features which rely on its internal
-state. To take advantage of these features, do not bypass the Form's internal
-state — the fields or inputs within the Form must have a `name` prop and **NOT**
-have a `value` and `onChange` prop.
-
-## Content guidelines
-
-### Inputs
-
-Form can accept various inputs and selection elements such as (but not limited
-to) [InputText](../InputText/InputText.md), [Select](../Select/Select.md),
-[Switch](../Switch/Switch.md), [Checkbox](../Checkbox/Checkbox.md), and
-[Chips](../Chips/Chips.md). They should be placed [Cards](../Card/Card.md) to
-indicate grouping when relevant, and groups of Cards can be spaced appropriately
-using ContentSection.
-
-### Save Button label
-
-The `saveButtonLabel` property defaults to "Save", but should be made more
-verbose to add context for the user. Use the format "Save {object}", such as
-"Save Job". This helps clarify to the user that tapping the Save Button is not
-saving the single input they are editing, but the entire object.
-
-### Form errors
-
-All error messaging should follow our
-[Product Vocabulary.](/content/product-vocabulary)
-
-## Setup (mobile)
-
-Consuming apps using the mobile Form must wrap their app root with
-`KeyboardProvider` from `react-native-keyboard-controller`.
-
-## Accessibility (mobile)
-
-The individual inputs are responsible for accessibility concerns such as the
-labels, types, values, and error messages of each input.
-
-
-## Platform considerations
-
-#### iOS
-
-On iOS, the save button will be fixed to the bottom of the viewport until the
-keyboard is opened.
-
-Once the keyboard is open, the save button will be inline beneath the Form's
-inputs, unless the Form is so short that it does not scroll. In this case, the
-save button will remain fixed above the keyboard.
-
-This prevents the user from accidentally submitting the Form before they have
-completed entering all the relevant information for their work, especially since
-many data points in Jobber cannot be edited once saved.
-
-#### Android
-
-On Android, the save button will always be inline with the contents of the Form.
-
-### Error handling
-
-#### Server-side errors
-
-Server-side error messages will be displayed in a banner at the top the Form
-upon a failed submission attempt. These are errors where something has gone
-wrong with the data either on the way to, or on the way back from, our servers.
-If the user can address the errors, inform them how to do so in the banner.
-Otherwise, a generic message informing the user that something went wrong is an
-appropriate fallback.
-
-Note: When a server-side error happens, inside the `onSubmit` function, an error
-must be thrown. Throwing an error inside the `onSubmit` function will ensure
-that your `onSubmitError` function is called instead of your `onSubmitSuccess`.
-
-#### Client-side errors
-
-Client-side errors are issues that we can catch and inform the user of before
-they attempt to submit the Form, such as a required field left blank or an
-incorrect email address format.
-
-Error messages for individual inputs should appear inline on each impacted
-input. Form will automatically scroll to the first invalid (has an error)
-element and display the error message.
-
-When an error occurs, either server-side or client-side, Form will announce the
-message to screen-readers and set focus to the impacted portion of the Form.
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `onStateChange` | `(formState: { isDirty: boolean; isValid: boolean; }) => void` | No | — |  |
-| `onSubmit` | `() => void` | No | — | Callback for when the form has been sucessfully submitted. |
-| `ref` | `Ref<FormRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |

package/dist/docs/FormField/FormField.md

@@ -1,92 +0,0 @@
-# Form Field
-
-FormField is a helper component that allows other components to use form logic.
-Interacting with a component wrapped in a FormField will automatically update
-the form value for the field used by the component.
-
-## Related components
-
-Refer to the [Form](../Form/Form.md) documentation to learn more about inputs
-within a form.
-
-
-## Configuration
-
-### Mobile
-
-FormField should not be used to wrap separate instances of a given input
-component, it should be done at the component level. For example, say you had
-four SpecialInput components on a given form. Instead of the four SpecialInput
-components in FormField, it would be better to go to the SpecialInput component
-where it is exported and wrap it there.
-
-```ts
-// The SpecialInput implementation, without any form logic
-function SpecialInputInternal(props) {
-  ...
-}
-
-// This is what would be exported and used by other views or components
-export function SpecialInput(props) {
-  return (
-    <FormField name={props.name}>
-      {(field) => {
-        return (
-          <SpecialInput
-            ...props
-            onChange={field.onChange}
-            value={field.value}
-          />
-        );
-      }}
-    </FormField>
-  );
-}
-```
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `actionsRef` | `RefObject<FieldActionsRef>` | No | — |  |
-| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
-| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
-| `autofocus` | `boolean` | No | — | Determines if the input should be auto-focused, using the HTML attribute |
-| `children` | `ReactNode` | No | — | If you need to pass in a children. For example, `<options>` inside `<select>`. |
-| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
-| `defaultValue` | `Date | string` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
-| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
-| `disabled` | `boolean` | No | — | Disable the input |
-| `id` | `string` | No | — | A unique identifier for the input. |
-| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
-| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
-| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `keyboard` | `"decimal" | "numeric"` | No | — | Determines what kind of keyboard appears on mobile web. |
-| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
-| `max` | `number` | No | — | Specifies the maximum numerical or date value that a user can type |
-| `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
-| `min` | `number` | No | — | Specifies the minimum numerical or date value that a user can type |
-| `name` | `string` | No | — | Name of the input. |
-| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
-| `onChange` | `(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void` | No | — | onChange handler that provides the new value (or event) @param newValue @param event |
-| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
-| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
-| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — |  |
-| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
-| `pattern` | `string` | No | — | Pattern is currently only used for the InputPhone type it is used to determine the format of the phone number and the... |
-| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
-| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
-| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
-| `rows` | `number` | No | — | Exclusively for textareas. Specifies the visible height of a textarea. |
-| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
-| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
-| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
-| `toolbar` | `ReactNode` | No | — | Toolbar to render content below the input. |
-| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Determines the visibility of the toolbar. |
-| `type` | `FormFieldTypes` | No | — | Determines what kind of form field should the component give you. |
-| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
-| `value` | `Date | number | string` | No | — | Set the component to the given value. |
-| `wrapperRef` | `RefObject<HTMLDivElement>` | No | — |  |

package/dist/docs/InputPassword/InputPassword.md

@@ -1,51 +0,0 @@
-# Input Password
-
-InputPassword is used to display a secure password input field.
-
-## Design & usage guidelines
-
-Use InputPassword for authentication flows where the user is required to enter a
-password.
-
-If you are building an experience for authentication that does not require
-character-masking or are looking for more information regarding `validations`,
-refer to [InputText](../InputText/InputText.md).
-
-## Clearable
-
-* **while-editing**: shows the clear button only while focused and when there is
-  a value. When focus leaves the field and its controls, the button is hidden.
-* **always**: shows the clear button whenever there is a value, even when
-  blurred. Never shown when the field is empty.
-* The clear button is not shown when the field is `disabled` or `readonly`.
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
-| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
-| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
-| `defaultValue` | `Date | string` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
-| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
-| `disabled` | `boolean` | No | — | Disable the input |
-| `hasVisibility` | `boolean` | No | `false` | Display toggle to change the visibility of the password input |
-| `id` | `string` | No | — | A unique identifier for the input. |
-| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
-| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
-| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
-| `name` | `string` | No | — | Name of the input. |
-| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
-| `onChange` | `(newValue: string) => void` | No | — | onChange handler that provides the new value (or event) |
-| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
-| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
-| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
-| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
-| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
-| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
-| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
-| `value` | `string` | No | — | Set the component to the given value. |