@jobber/components-native 0.101.5 → 0.101.6

package/dist/docs/Icon/Icon.md

@@ -0,0 +1,585 @@
+# Icon
+
+Icons are used to visually represent an idea or action. They can act as
+wayfinding tools to orient users in the product, and identify common
+interactions.
+
+> **NOTICE:** Looking to add a new Icon to Atlantis? Read the [Adding an
+> icon](../guides/adding-an-icon) guide before you get started.
+
+## Design & usage guidelines
+
+Icons should generally be paired with a label to help users understand the
+meaning. If you want to use an Icon without a label, test with users to ensure
+it's clear what the Icon represents.
+
+In cases where a label may not be feasible space-wise, use a Tooltip to provide
+contextual support.
+
+```tsx
+import React from "react";
+import { Icon } from "@jobber/components/Icon";
+import { Tooltip } from "@jobber/components/Tooltip";
+
+export function IconTooltipExample() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--space-large)",
+      }}
+    >
+      <Tooltip message="Search">
+        <Icon name="search" />
+      </Tooltip>
+      <Tooltip message="Support">
+        <Icon name="help" />
+      </Tooltip>
+      <Tooltip message="Settings">
+        <Icon name="cog" />
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Status
+
+Icons are commonly paired with status messages to help the user quickly
+understand the state of the application.
+
+```tsx
+import React from "react";
+import { Icon } from "@jobber/components/Icon";
+import { Content } from "@jobber/components/Content";
+import { Text } from "@jobber/components/Text";
+
+export function IconStatusExample() {
+  return (
+    <Content spacing="larger">
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-small)",
+        }}
+      >
+        <Icon name="alert" color="critical" />
+        <Content spacing="smallest">
+          <Text variation="error">Something has gone wrong</Text>
+        </Content>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-small)",
+        }}
+      >
+        <Icon name="warning" color="warning" />
+        <Content spacing="smallest">
+          <Text variation="warn">Something could go wrong</Text>
+        </Content>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-small)",
+        }}
+      >
+        <Icon name="info" color="informative" />
+        <Content spacing="smallest">
+          <Text variation="info">Something is happening</Text>
+        </Content>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-small)",
+        }}
+      >
+        <Icon name="checkmark" />
+        <Content spacing="smallest">
+          <Text variation="success">Something succeeded</Text>
+        </Content>
+      </div>
+    </Content>
+  );
+}
+```
+
+### Sizes
+
+```tsx
+import React from "react";
+import { Icon } from "@jobber/components/Icon";
+import { Content } from "@jobber/components/Content";
+import { Text } from "@jobber/components/Text";
+
+export function IconSizesExample() {
+  return (
+    <Content spacing="larger">
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-large)",
+        }}
+      >
+        <Icon name="search" size="small" />
+        <Content spacing="smallest">
+          <Text>Small</Text>
+          <Text size="small" variation="subdued">
+            When space is severely constrained
+          </Text>
+        </Content>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-base)",
+        }}
+      >
+        <Icon name="search" />
+        <Content spacing="smallest">
+          <Text>Base</Text>
+          <Text size="small" variation="subdued">
+            For most icon usage
+          </Text>
+        </Content>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-small)",
+        }}
+      >
+        <Icon name="search" size="large" />
+        <Content spacing="smallest">
+          <Text>Large</Text>
+          <Text size="small" variation="subdued">
+            When the icon is prominently featured in the interface
+          </Text>
+        </Content>
+      </div>
+    </Content>
+  );
+}
+```
+
+## Related components
+
+* [Button](../Button/Button.md)
+* [IconButton](../IconButton/IconButton.md) (mobile-only)
+* [Banner](../Banner/Banner.md)
+
+## Accessibility
+
+* Icons are a visual supplement, so they should not be used as the only means of
+  conveying information
+  * Ensure icons are paired with a label if they are used as a standalone
+    element
+  * When used in an icon-only Button, provide an aria-label and use a Tooltip
+
+## Available icons
+
+### Arrows
+
+| Icon | `Name`             |
+| :--- | :----------------- |
+|      | `arrowDown`        |
+|      | `arrowLeft`        |
+|      | `arrowRight`       |
+|      | `arrowUp`          |
+|      | `longArrowDown`    |
+|      | `longArrowLeft`    |
+|      | `longArrowRight`   |
+|      | `longArrowUp`      |
+|      | `longArrowUpRight` |
+
+### Calendar & scheduling
+
+| Icon | `Name`                  |
+| :--- | :---------------------- |
+|      | `afterDate`             |
+|      | `availability`          |
+|      | `beforeDate`            |
+|      | `calendar`              |
+|      | `clearFilters`          |
+|      | `event`                 |
+|      | `onlineBooking`         |
+|      | `orientationHorizontal` |
+|      | `orientationVertical`   |
+|      | `schedule`              |
+|      | `task`                  |
+|      | `timeline`              |
+|      | `today`                 |
+|      | `userConfirmed`         |
+|      | `recurring`             |
+|      | `sliderStart`           |
+|      | `sliderCenter`          |
+
+### Files
+
+| Icon | `Name`      |
+| :--- | :---------- |
+|      | `addNote`   |
+|      | `archive`   |
+|      | `excel`     |
+|      | `file`      |
+|      | `note`      |
+|      | `pdf`       |
+|      | `video`     |
+|      | `word`      |
+|      | `upload`    |
+|      | `image`     |
+|      | `paperclip` |
+
+### Forms
+
+| Icon | `Name`         |
+| :--- | :------------- |
+|      | `checkbox`     |
+|      | `checklist`    |
+|      | `edit`         |
+|      | `editDisabled` |
+|      | `radioButton`  |
+|      | `star`         |
+|      | `starHalf`     |
+|      | `starFill`     |
+|      | `text`         |
+|      | `textBox`      |
+|      | `textField`    |
+|      | `toggle`       |
+|      | `dropdown`     |
+|      | `trash`        |
+
+### Status and support
+
+| Icon | `Name`    |
+| :--- | :-------- |
+|      | `alert`   |
+|      | `warning` |
+|      | `info`    |
+|      | `help`    |
+|      | `knot`    |
+
+### Map
+
+| Icon | `Name`       |
+| :--- | :----------- |
+|      | `address`    |
+|      | `moveMarker` |
+|      | `property`   |
+|      | `directions` |
+|      | `map`        |
+
+### Messaging
+
+| Icon | `Name`        |
+| :--- | :------------ |
+|      | `chat`        |
+|      | `email`       |
+|      | `markSent`    |
+|      | `reminder`    |
+|      | `sms`         |
+|      | `sms2`        |
+|      | `sendMessage` |
+|      | `compose`     |
+|      | `marketing`   |
+
+### User
+
+| Icon | `Name`                |
+| :--- | :-------------------- |
+|      | `clients`             |
+|      | `person`              |
+|      | `company`             |
+|      | `franchiseIndividual` |
+|      | `franchiseGroup`      |
+|      | `user`                |
+|      | `userSwitch`          |
+|      | `userUnassigned`      |
+|      | `vcard`               |
+
+### Social media
+
+| Icon | `Name`       |
+| :--- | :----------- |
+|      | `angieslist` |
+|      | `facebook`   |
+|      | `googlePlay` |
+|      | `google`     |
+|      | `instagram`  |
+|      | `linkedIn`   |
+|      | `twitter`    |
+|      | `yelp`       |
+|      | `youtube`    |
+|      | `embed`      |
+
+### Transaction
+
+| Icon | `Name`               |
+| :--- | :------------------- |
+|      | `bank`               |
+|      | `payment`            |
+|      | `percent`            |
+|      | `wallet`             |
+|      | `money`              |
+|      | `transfer`           |
+|      | `jobberCardReader`   |
+|      | `contactlessPayment` |
+|      | `cheque`             |
+|      | `cash`               |
+
+### Work
+
+| Icon | `Name`         |
+| :--- | :------------- |
+|      | `break`        |
+|      | `chemical`     |
+|      | `clockIn`      |
+|      | `clockOut`     |
+|      | `expense`      |
+|      | `office`       |
+|      | `supplies`     |
+|      | `timer`        |
+|      | `work`         |
+|      | `runningTimer` |
+
+### Request
+
+| Icon | `Name`    |
+| :--- | :-------- |
+|      | `request` |
+
+### Quote
+
+| Icon | `Name`  |
+| :--- | :------ |
+|      | `quote` |
+
+### Job
+
+| Icon | `Name`       |
+| :--- | :----------- |
+|      | `job`        |
+|      | `jobOnHold`  |
+|      | `moveVisits` |
+|      | `visit`      |
+
+### Invoice
+
+| Icon | `Name`         |
+| :--- | :------------- |
+|      | `badInvoice`   |
+|      | `invoice`      |
+|      | `invoiceLater` |
+|      | `paidInvoice`  |
+|      | `sendInvoice`  |
+
+### Fleet management
+
+| Icon | `Name`    |
+| :--- | :-------- |
+|      | `truck`   |
+|      | `speed`   |
+|      | `wheel`   |
+|      | `battery` |
+|      | `fuel`    |
+|      | `engine`  |
+
+### System actions
+
+| Icon | `Name`           |
+| :--- | :--------------- |
+|      | `add`            |
+|      | `addTag`         |
+|      | `automate`       |
+|      | `batch`          |
+|      | `condition`      |
+|      | `copy`           |
+|      | `customize`      |
+|      | `download`       |
+|      | `drag`           |
+|      | `dragHorizontal` |
+|      | `embed`          |
+|      | `export`         |
+|      | `filter`         |
+|      | `future`         |
+|      | `import`         |
+|      | `redo`           |
+|      | `remove`         |
+|      | `search`         |
+|      | `sort`           |
+|      | `sync`           |
+|      | `syncAlert`      |
+|      | `tag`            |
+|      | `updateStatus`   |
+
+### Other
+
+| Icon | `Name`            |
+| :--- | :---------------- |
+|      | `apps`            |
+|      | `at`              |
+|      | `camera`          |
+|      | `checkmark`       |
+|      | `checkmarkCircle` |
+|      | `circle`          |
+|      | `cog`             |
+|      | `dashboard`       |
+|      | `desktop`         |
+|      | `website`         |
+|      | `eye`             |
+|      | `eyeCrossed`      |
+|      | `flash`           |
+|      | `flashAuto`       |
+|      | `flashOff`        |
+|      | `gift`            |
+|      | `grid`            |
+|      | `happyFace`       |
+|      | `headset`         |
+|      | `home`            |
+|      | `link`            |
+|      | `loadingCheck`    |
+|      | `lock`            |
+|      | `logout`          |
+|      | `measurement`     |
+|      | `menu`            |
+|      | `microphone`      |
+|      | `microphoneMuted` |
+|      | `mobile`          |
+|      | `more`            |
+|      | `number`          |
+|      | `offline`         |
+|      | `phone`           |
+|      | `pinned`          |
+|      | `presentation`    |
+|      | `priceTag`        |
+|      | `quickbooks`      |
+|      | `reports`         |
+|      | `shape`           |
+|      | `sidebar`         |
+|      | `signature`       |
+|      | `sneaker`         |
+|      | `sparkles`        |
+|      | `sprout`          |
+|      | `starburst`       |
+|      | `sun`             |
+|      | `tableColumns`    |
+|      | `thumbsDown`      |
+|      | `thumbsUp`        |
+|      | `unPinned`        |
+|      | `xero`            |
+
+### Legacy
+
+| Icon | `Name`   |
+| :--- | :------- |
+|      | `apple`  |
+|      | `cross`  |
+|      | `list`   |
+|      | `minus`  |
+|      | `minus2` |
+|      | `plus`   |
+|      | `plus2`  |
+
+
+## Component customization
+
+### UNSAFE\_ props (advanced usage)
+
+General information for using `UNSAFE_` props can be found
+[here](../customizing-components/customizing-components.md).
+
+**Note**: Use of `UNSAFE_` props is **at your own risk** and should be
+considered a **last resort**. Future Icon updates may lead to unintended
+breakages.
+
+Icon has two elements that can be targeted with classes or styles:
+
+* `svg`: The container element of the icon
+* `path`: The actual shape and color of the icon
+
+#### UNSAFE\_className (web)
+
+Use `UNSAFE_className` to apply custom classes to the Icon. This can be useful
+for applying styles via CSS Modules.
+
+```tsx
+// Icon.tsx
+UNSAFE_className={{
+  svg: styles.iconContainer,
+  path: styles.iconPath,
+}}
+
+// Icon.module.css
+.iconContainer {
+  padding: var(--space-small);
+  border-radius: var(--radius-large);
+  background-color: var(--color-purple);
+}
+
+.iconPath {
+  fill: var(--color-orange);
+}
+```
+
+Using `UNSAFE_className` for modifying the icon's dimensions (width, height) may
+not work as expected. For size modifications, use `UNSAFE_style.svg` instead.
+
+#### UNSAFE\_style (web)
+
+The `UNSAFE_style` prop provides granular control over the icon's appearance
+through inline styles, allowing you to modify the dimensions and colors
+independently.
+
+```tsx
+<Icon
+  name="arrowDown"
+  UNSAFE_style={{
+    svg: {
+      width: "48px",
+      height: "48px",
+      backgroundColor: "var(--color-purple)",
+      padding: "var(--space-small)",
+      borderRadius: "var(--radius-large)",
+    },
+    path: {
+      fill: "orange",
+    },
+  }}
+/>
+```
+
+##### Key styling notes:
+
+* To modify icon dimensions, use `UNSAFE_style.svg` with both `width` and
+  `height`
+* To override an icon's color, use `fill` in the `path` styles, instead of
+  `color`
+* Container styling (background, padding, border) should be applied to the `svg`
+  styles
+
+Remember that the standard `size` prop is the recommended way to control icon
+dimensions. Only use `UNSAFE_style.svg` for custom sizing when absolutely
+necessary.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `name` | `IconNames` | Yes | — | The icon to show. |
+| `color` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour like quotes, jobs, and in... |
+| `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
+| `size` | `"small" | "base" | "large"` | No | `base` | Changes the size to small or large. |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/IconButton/IconButton.md

@@ -0,0 +1,25 @@
+# Icon Button
+
+IconButtons are used to create pressable components (buttons) that render an
+Icon. IconButtons are used for navigation between different screens or
+performing core actions.
+
+Please read the [Icon](../Icon/Icon.md) documentation for more information
+regarding which icons to use.
+
+## Mockup
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityLabel` | `string` | Yes | — | Accessibilty label for the component. It's also used for testing |
+| `name` | `IconNames` | Yes | — | The icon to show. |
+| `badge` | `ReactNode` | No | — | a component that would render over the icon e.g. the number of notifications over the activity feed icon |
+| `color` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour like quotes, jobs, and in... |
+| `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
+| `onPress` | `() => void` | No | — | Press handler |
+| `testID` | `string` | No | — | Used to locate this button in tests |

package/dist/docs/InputCurrency/InputCurrency.md

@@ -0,0 +1,61 @@
+# Input Currency
+
+InputCurrency is a component that displays a currency input field with a
+currency symbol.
+
+## Design & usage guidelines
+
+InputCurrency defaults to displaying a minimum of two decimal places and a
+maximum of five decimal places. If a user continues to try and enter numbers
+beyond the `maxDecimalPlaces` default or set number, the component will
+automatically round the value to the nearest two decimal places.
+
+By setting `showCurrencySymbol` to true, the users currency prefix will be
+displayed to them.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
+| `assistiveText` | `string` | No | — | Text that helps the user understand the input |
+| `autoCapitalize` | `"characters" | "words" | "sentences" | "none"` | No | — | Determines where to autocapitalize |
+| `autoComplete` | `"name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
+| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
+| `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... |
+| `decimalPlaces` | `number` | No | — | The minimum decimal places for the currency number Default value is 2 |
+| `defaultValue` | `number` | No | — |  |
+| `disabled` | `boolean` | No | — | Disable the input |
+| `invalid` | `string | boolean` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
+| `keyboard` | `"decimal-pad" | "numbers-and-punctuation"` | No | — |  |
+| `loading` | `boolean` | No | — | Show loading indicator. |
+| `loadingType` | `"spinner" | "glimmer"` | No | — | Change the type of loading indicator to spinner or glimmer. |
+| `maxDecimalPlaces` | `number` | No | — | The maximum decimal places for the currency number Default value is 5 |
+| `maxLength` | `number` | No | — | The maximum length of the input Default value is 10 |
+| `multiline` | `boolean` | No | — | Determines if inputText will span multiple lines. Default is `false`  https://reactnative.dev/docs/textinput#multiline |
+| `name` | `string` | No | — | Name of the input. |
+| `onBlur` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is blurred |
+| `onChange` | `(newValue?: string | number) => void` | No | — |  |
+| `onFocus` | `(event?: FocusEvent) => void` | No | — | Callback that is called when the text input is focused @param event |
+| `onSubmitEditing` | `(event?: SyntheticEvent<Element, Event>) => void` | No | — | Callback that is called when the text input's submit button is pressed @param event |
+| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
+| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
+| `readonly` | `boolean` | No | — | Makes the input read-only |
+| `secureTextEntry` | `boolean` | No | — | Use secure text entry |
+| `showCurrencySymbol` | `boolean` | No | — | Whether to display the user's currency symbol or not Default value is true |
+| `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... |
+| `spellCheck` | `boolean` | No | — | Determines whether spell check is used. Turn it off to hide empty autoCorrect suggestions when autoCorrect is off.  *... |
+| `styleOverride` | `InputTextStyleOverride` | No | — | Custom styling to override default style of the input text |
+| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
+| `textContentType` | `"name" | "none" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | ... 33 more ... | "shipmentTrackingNumber"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `none` which disables auto complete ... |
+| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
+| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Change the behaviour of when the toolbar becomes visible. |
+| `transform` | `{ input?: (v: any) => string; output?: (v: string) => any; }` | No | — | transform object is used to transform the internal TextInput value It's useful for components like InputNumber where ... |
+| `validations` | `RegisterOptions` | No | — | Shows an error message below the field and highlight the field red when value is invalid |
+| `value` | `number` | No | — |  |