@jobber/components-native 0.101.5 → 0.101.6

package/dist/docs/FormatFile/FormatFile.md

@@ -0,0 +1,56 @@
+# Format File
+
+FormatFile will take a file object and display it in a number of lifecycle
+states. It can be used to display a file that has been uploaded, or to display a
+file that is about to be uploaded, as indicated by the progress indicator.
+
+## Design & usage guidelines
+
+When contributing to, or consuming the FormatFile component, consider the
+following:
+
+* FormatFile components should take up the full width of the parent container (1
+  or 2 files per row)
+* The delete button will only be displayed if the callback function is passed in
+
+When using FormatFile for web, files can be displayed as either expanded or
+compact. A compact FormatFile is used to display a cropped version of a file or
+image, while expanded is used to display a file alongside its metadata.
+
+## Related components
+
+* For a thumbnail representation of a user, use [Avatar](/components/Avatar).
+
+
+## Props
+
+### Mobile
+
+#### FormatFileContent
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `file` | `FormattedFile` | Yes | — |  |
+| `isMedia` | `boolean` | Yes | — |  |
+| `onUploadComplete` | `() => void` | Yes | — |  |
+| `showOverlay` | `boolean` | Yes | — |  |
+| `styleInGrid` | `boolean` | Yes | — |  |
+| `accessibilityLabel` | `string` | No | — |  |
+| `onMediaLoadEnd` | `() => void` | No | — | * @internal A function to be called when the media has loaded. This is only used in FormatFileThumbnail. |
+| `skipContainerStyles` | `boolean` | No | `false` | @internal When true, the component skips its container wrapper entirely (no border, background, or dimension styles).... |
+
+#### FormatFile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `file` | `File | FileUpload` | Yes | — | File upload details object. Can be a File or a FileUpload |
+| `accessibilityHint` | `string` | No | — | Accessibility hint |
+| `accessibilityLabel` | `string` | No | — | Accessibility label |
+| `bottomSheetOptionsSuffix` | `BottomSheetOptionsSuffix` | No | — | A file type to show at Bottom Sheet options |
+| `createThumbnail` | `CreateThumbnail` | No | — |  |
+| `onPreviewPress` | `(formattedFile: FormattedFile) => void` | No | — | Handler for the "Preview" Bottom Sheet Option press |
+| `onRemove` | `() => void` | No | — | A function to be called on "Remove" Bottom Sheet Option press |
+| `onTap` | `(file: T) => void` | No | — | A function which handles the onTap event. |
+| `showFileTypeIndicator` | `boolean` | No | `true` | Set false to hide the filetype icon |
+| `styleInGrid` | `boolean` | No | `false` | Uses a grid layout when multi-file upload is supported |
+| `testID` | `string` | No | — | A reference to the element in the rendered output |

package/dist/docs/Glimmer/Glimmer.md

@@ -0,0 +1,143 @@
+# Glimmer
+
+Glimmer is a foundational component that is used to build Skeleton (*coming
+soon*) or other components that invoke loading such as an image waiting to load
+on [FormatFile](../FormatFile/FormatFile.md).
+
+## Colors
+
+Glimmers adapts to the background you put it in. If you have a grey background,
+the `Glimmer` will automatically darken itself so it's still noticeable.
+
+```tsx
+import React from "react";
+import { Glimmer } from "@jobber/components/Glimmer";
+import { Text } from "@jobber/components/Text";
+
+export function GlimmerBasicExample() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--space-small)",
+          padding: "var(--space-base)",
+          backgroundColor: "var(--color-surface)",
+        }}
+      >
+        <Text size="small" variation="subdued">
+          On surface
+        </Text>
+        <Glimmer shape="rectangle" size="base" timing="base" />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--space-small)",
+          padding: "var(--space-base)",
+          backgroundColor: "var(--color-surface--background",
+        }}
+      >
+        <Text size="small" variation="subdued">
+          On surface--background
+        </Text>
+        <Glimmer shape="rectangle" size="base" timing="base" />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--space-small)",
+          padding: "var(--space-base)",
+          backgroundColor: "var(--color-surface--background--subtle)",
+        }}
+      >
+        <Text size="small" variation="subdued">
+          On surface--background--subtle
+        </Text>
+        <Glimmer shape="rectangle" size="base" timing="base" />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--space-small)",
+          padding: "var(--space-base)",
+          backgroundColor: "var(--color-surface--reverse)",
+        }}
+      >
+        <Text size="small" variation="subdued">
+          On surface--reverse (toggle reverseTheme prop)
+        </Text>
+        <Glimmer shape="rectangle" size="base" timing="base" />
+      </div>
+    </div>
+  );
+}
+```
+
+If the Glimmer sits on a `reverse` background (dark in light mode, light in dark
+mode), you can toggle the `reverseTheme` prop to switch the colors so it's still
+noticeable.
+
+```tsx
+import React from "react";
+import type { ComponentProps } from "react";
+import { Glimmer } from "@jobber/components/Glimmer";
+import { Box } from "@jobber/components/Box";
+
+export function GlimmerReverseThemeExample(
+  props: Partial<ComponentProps<typeof Glimmer>>,
+) {
+  return (
+    <Box background="surface--reverse" padding="base">
+      <Glimmer reverseTheme {...props} />
+    </Box>
+  );
+}
+```
+
+## Semantic blocks
+
+A pre-made block can be used to indicate a certain component.
+
+```tsx
+import React from "react";
+import { Glimmer } from "@jobber/components/Glimmer";
+import { Tab, Tabs } from "@jobber/components/Tabs";
+
+export function GlimmerSemanticBlocksExample() {
+  return (
+    <Tabs>
+      <Tab label={"Glimmer.Header"}>
+        <Glimmer.Header />
+      </Tab>
+      <Tab label={"Glimmer.Text"}>
+        <Glimmer.Text />
+      </Tab>
+      <Tab label={"Glimmer.Button"}>
+        <Glimmer.Button />
+      </Tab>
+    </Tabs>
+  );
+}
+```
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `shape` | `"rectangle" | "square" | "circle"` | No | `rectangle` | Sets the size of the glimmer. |
+| `size` | `"small" | "base" | "large" | "larger" | "largest"` | No | `base` | Sets the shape of the glimmer.  If you need a specific width, use the `width` prop. |
+| `timing` | `GlimmerTimings` | No | `base` | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
+| `width` | `number | `${number}%`` | No | — | Adjust the width of the glimmer in px or % values. |

package/dist/docs/Heading/Heading.md

@@ -0,0 +1,132 @@
+# Heading
+
+Headings are used as the titles of each major section of a page in the
+interface. Reserved for short and important text, Headings create a visual
+hierarchy for the user.
+
+## Design & usage guidelines
+
+### Web
+
+| Level                   | Use case                                                                                                                                                                                                                                |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<Heading level={1} />` | Should explain the main subject of the page. There should only be one `level={1}` Heading on a page                                                                                                                                     |
+| `<Heading level={2} />` | Used to categorize large groups of content. For example, there are two main categories when creating a new client: client details and property details. This heading can be skipped if there are no large groups that need breaking up. |
+| `<Heading level={3} />` | Used to group content and forms on a single topic.                                                                                                                                                                                      |
+| `<Heading level={4} />` | Used to group contents after a `level={3}` Heading or inside a card component.                                                                                                                                                          |
+| `<Heading level={5} />` | `level={5}` is used to group contents after a `level={4}` Heading.                                                                                                                                                                      |
+| `<Heading level={6} />` | Used to group contents after a `level={5}` Heading or to group small lists of content.                                                                                                                                                  |
+
+### Mobile
+
+| Level                              | Use case                                                                                                                                                      |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<Heading level={"title"} />`      | Should explain the main subject of the page. There should only be one `title` Heading on a page.                                                              |
+| `<Heading level={"subtitle"} />`   | Used to categorize large groups of content.                                                                                                                   |
+| `<Heading level={"heading"} />`    | Used to group content and forms on a single topic. Like `title` and `subtitle`, `heading` uses [Jobber Pro](../Typography/Typography.md#component-view-font-families). |
+| `<Heading level={"subHeading"} />` | Used to group small lists of content, `subHeading` uses the [Inter](../Typography/Typography.md#component-view-font-families) font.                                    |
+
+## Content guidelines
+
+The only content that should be used in a Heading is text. Use sentence-case for
+headings. The exception is `Heading 6` in the web Headings, which is capitalized
+as a stylistic reference to the
+[eyebrow typographic pattern.](https://app.uxcel.com/lessons/basics-ii-588#eyebrow-headline-8095)
+
+| ✅ Do                        | ❌ Don't                     |
+| --------------------------- | --------------------------- |
+| Job #21 for Nathaniel Lewis | Job #21 For Nathaniel Lewis |
+| Save job and...             | Save Job And...             |
+| Push notification settings  | Push Notification Settings  |
+
+## Related components
+
+For introductory text after a page title, or paragraph text for body copy, use
+[Text](../Text/Text.md).
+
+## Accessibility
+
+In the web, HTML heading levels (h1, h2, h3, etc) correspond with document
+structure for assistive technology. Designers should strive to use the right
+level of heading visually to create an appropriate hierarchy, but in cases where
+this is not desired you can still specify the correct semantic level of Heading
+using the `element` property.
+
+In mobile, assistive technology only picks up on whether or not a typographic
+element is a heading or not, so the `element` property is not exposed.
+
+## Platform considerations
+
+There are a few caveats around copying text on Android and iOS that you can read
+under the [Typography](../Typography/Typography.md) documentation.
+
+
+## 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.
+
+#### UNSAFE\_props (web)
+
+### UNSAFE\_className
+
+Use `UNSAFE_className` to apply custom classes to the Heading component. This can be
+useful for applying styles via CSS Modules.
+
+```tsx
+<Heading level={1} UNSAFE_className={{ textStyle: styles.customHeading }}>
+  Test with custom class name
+</Heading>
+
+// YourComponent.module.css
+.customHeading {
+  color: var(--color-red);
+}
+```
+
+### UNSAFE\_style
+
+Use `UNSAFE_style` to apply inline custom styles to the Heading component.
+
+```tsx
+<Heading level={1} UNSAFE_style={{ textStyle: { color: "red" } }}>
+  Test with custom style
+</Heading>
+```
+
+### Using the id prop
+
+#### Do:
+
+* ✅ Navigation anchors: Link directly to a specific section of the page (e.g.
+  /docs#getting-started).
+* ✅ Accessible regions: Provide an `id` so page regions (like `<section>`,
+  `<fieldset>`, or form groups) can reference the heading via `aria-labelledby`,
+  ensuring clear announcements without duplication.
+
+#### Don't:
+
+* ❌ CSS styling: Use design system props or `UNSAFE_className`/`UNSAFE_style`
+  instead.
+
+
+## Props
+
+### Mobile
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | Text to display. Supports nesting text elements. |
+| `align` | `TextAlign` | No | — | Alignment of heading |
+| `allowFontScaling` | `boolean` | No | `true` | Allow text to be resized based on user's device display scale |
+| `level` | `HeadingLevel` | No | — | The type of heading, e.g., "Title" |
+| `maxLines` | `TruncateLength` | No | `unlimited` | The maximum amount of lines the text can occupy before being truncated with "...". Uses predefined string values that... |
+| `reverseTheme` | `boolean` | No | `false` | Uses the reverse variant of the text color for the heading |
+| `selectable` | `boolean` | No | `true` | Lets the user select text, to use the native copy and paste functionality. WARNING: if true, this prevents ellipsis f... |
+| `variation` | `HeadingColor` | No | `heading` | The text color of heading |