@jobber/components 9.16.4 → 9.16.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/ActivityIndicator/ActivityIndicator.d.ts +4 -3
  2. package/dist/ActivityIndicator-cjs.js +1 -1
  3. package/dist/ActivityIndicator-es.js +1 -1
  4. package/dist/docs/ActivityIndicator/ActivityIndicator.md +53 -75
  5. package/dist/docs/Icon/Icon.md +1 -0
  6. package/package.json +3 -3
package/dist/ActivityIndicator/ActivityIndicator.d.ts CHANGED
@@ -8,8 +8,9 @@ export interface ActivityIndicatorProps {
8
8
  */
9
9
  readonly size?: "small" | "base";
10
10
  /**
11
- * Accessible label exposed via `aria-label` on the root element. Override
12
- * to localize or to describe the specific activity (e.g. "Uploading file").
11
+ * Accessible label exposed via `aria-label` on the root element. Defaults
12
+ * to the localized "Loading" message. Override it to describe the specific
13
+ * activity (e.g. "Uploading file").
13
14
  *
14
15
  * @default "Loading"
15
16
  */
@@ -30,7 +31,7 @@ export interface ActivityIndicatorProps {
30
31
  * external system.
31
32
  *
32
33
  * For determinate progress (a known fraction completed), use
33
- * `ProgressIndicator` instead (forthcoming).
34
+ * `ProgressIndicator` instead.
34
35
  *
35
36
  * For now, the legacy `Spinner` component also remains available; new code
36
37
  * should prefer `ActivityIndicator`.
package/dist/ActivityIndicator-cjs.js CHANGED
@@ -14,7 +14,7 @@ var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","smal
14
14
  * external system.
15
15
  *
16
16
  * For determinate progress (a known fraction completed), use
17
- * `ProgressIndicator` instead (forthcoming).
17
+ * `ProgressIndicator` instead.
18
18
  *
19
19
  * For now, the legacy `Spinner` component also remains available; new code
20
20
  * should prefer `ActivityIndicator`.
package/dist/ActivityIndicator-es.js CHANGED
@@ -12,7 +12,7 @@ var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","smal
12
12
  * external system.
13
13
  *
14
14
  * For determinate progress (a known fraction completed), use
15
- * `ProgressIndicator` instead (forthcoming).
15
+ * `ProgressIndicator` instead.
16
16
  *
17
17
  * For now, the legacy `Spinner` component also remains available; new code
18
18
  * should prefer `ActivityIndicator`.
package/dist/docs/ActivityIndicator/ActivityIndicator.md CHANGED
@@ -5,101 +5,79 @@ directly control or measure — loading, fetching, or waiting on an external
5
5
  system.
6
6
 
7
7
  Use `ActivityIndicator` when the loading time or fraction of progress is
8
- unknown. If you know the fraction of progress (for example, "3 of 4 files
9
- uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
10
- will subsume `ProgressBar` under the new Indicators naming is forthcoming.
8
+ unknown. When the amount completed is known, use `ProgressIndicator` instead.
11
9
 
12
10
  ## Design & usage guidelines
13
11
 
14
- The default `ActivityIndicator` size is `base` (44px) and can be used in most
15
- cases. The `small` size (28px) should be used on individual elements of an
16
- interface (e.g. inside a `Button` or `Card`) or when sitting next to short
17
- inline text.
12
+ Web and mobile share the same visual language: a non-interactive ring with a
13
+ muted track and an animated foreground arc. The platform implementations use
14
+ different sizes and motion timing so each reads appropriately in its context.
18
15
 
19
- Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
20
- `inline` prop. Place it inside your own flex / inline-block container, or pass a
21
- `style`, to control surrounding layout.
22
-
23
- ## Accessibility
24
-
25
- `ActivityIndicator` announces itself to assistive technology on every platform:
16
+ ### Web
26
17
 
27
- * `accessibilityRole="progressbar"` and `accessibilityState={{ busy: true }}`
28
- mark the component as an ongoing indeterminate activity.
29
- * `accessibilityLabel` defaults to a localized `"Loading"` string via
30
- `useAtlantisI18n("loading")`. Pass a custom `accessibilityLabel` to describe
31
- the specific activity (e.g. `accessibilityLabel="Uploading file"`).
32
- * On mount and whenever the label changes, the component calls
33
- `AccessibilityInfo.announceForAccessibility` so VoiceOver and TalkBack
34
- announce the label once.
35
-
36
- The indicator is not focusable and is not in the accessibility navigation order
37
- beyond the mount-time announcement.
38
-
39
- ### Reduced motion
40
-
41
- When the operating system reports the Reduce Motion accessibility setting, the
42
- indicator hides the rocking and rotating layers, repaints a single static ring
43
- in the icon foreground colour, and gently pulses its opacity so the indicator
44
- still reads as "busy" without rotational motion. Detection is reactive — the
45
- component responds to OS toggles without requiring a remount.
46
-
47
- ## Cross-platform parity
48
-
49
- `ActivityIndicator` renders the same Material Design 3 three-layer indeterminate
50
- ring on iOS, Android, and web (`@jobber/components`). The visual identity,
51
- sizes, motion durations, and reduced-motion fallback are unified across
52
- platforms. Public prop names diverge to follow each platform's native
53
- conventions (`accessibilityLabel` here vs `ariaLabel` on web; `style` here vs
54
- `className` + `style` on web).
18
+ The default `base` size is 32px. Use the 16px `small` size beside short text or
19
+ inside compact interface elements such as buttons.
55
20
 
56
- Use `ActivityIndicator` when the loading time or fraction of progress is
57
- unknown. If you know the fraction of progress (for example, "3 of 4 files
58
- uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
59
- will subsume `ProgressBar` under the new naming is forthcoming.
21
+ Layout is the consumer's responsibility. Place the indicator in a suitable
22
+ container, or use `className` and `style`, to control alignment and spacing.
60
23
 
61
- ## Design & usage guidelines
24
+ ### Mobile
62
25
 
63
- The default `ActivityIndicator` size is `base` (32px) and can be used in most
64
- cases. The `small` size (16px) should be used on individual elements of an
65
- interface (e.g. inside a `Button` or `Card`) or when sitting next to short
66
- inline text.
26
+ The default `base` size is 44px. Use the 28px `small` size for compact mobile
27
+ interfaces. Layout is controlled by the surrounding `View` or by passing
28
+ `style`.
67
29
 
68
- Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
69
- `inline` prop. Place it inside your own flex / inline-block container, or pass a
70
- `className` / `style`, to control surrounding layout.
30
+ Both implementations use `color-text--secondary` for the active arc and
31
+ `color-surface--active` for the track, allowing the indicator to adapt across
32
+ supported themes and surfaces.
71
33
 
72
34
  ## Accessibility
73
35
 
74
- `ActivityIndicator` announces itself politely to assistive technology:
36
+ ### Web
75
37
 
76
- * `role="status"` marks the element as a polite live region, appropriate for a
77
- non-urgent loading state.
78
- * `aria-label` defaults to the literal English string `"Loading"`. Pass a custom
79
- `ariaLabel` to localize or to describe the specific activity (e.g.
80
- `ariaLabel="Uploading file"`).
38
+ * `role="status"` creates a polite live region for non-urgent loading states.
39
+ * `ariaLabel` defaults to the localized `"Loading"` message. Override it when a
40
+ more specific description is helpful, such as `"Uploading file"`.
41
+ * Visually hidden label text ensures the status is announced when it mounts.
81
42
 
82
43
  The indicator does not participate in the keyboard tab order.
83
44
 
84
- ### Reduced motion
45
+ ### Mobile
85
46
 
86
- When the user's operating system reports
87
- [`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
88
- the indicator hides its rocking and rotating layers, repaints a single static
89
- ring in the icon foreground colour, and gently pulses its opacity so the
90
- indicator still reads as "busy" without rotational motion.
47
+ * `accessibilityRole="progressbar"` and `accessibilityState={{ busy: true }}`
48
+ identify an ongoing indeterminate activity.
49
+ * `accessibilityLabel` defaults to the localized `"Loading"` message. Override
50
+ it to describe a specific activity.
51
+ * The resolved label is announced when the indicator mounts and whenever the
52
+ label changes.
91
53
 
92
- ## Relationship to Spinner
54
+ The indicator is non-interactive. It exposes one accessible progress element and
55
+ does not require an action from the user.
56
+
57
+ ## Reduced motion
58
+
59
+ The indicator automatically follows the operating system's reduced-motion
60
+ preference. Web reads `prefers-reduced-motion`; mobile reacts to the iOS Reduce
61
+ Motion or Android Remove Animations setting.
93
62
 
94
- The legacy [Spinner](../Spinner/Spinner.md) component remains available and
95
- unchanged. New code should prefer `ActivityIndicator`. A follow-up change is
96
- expected to deprecate `Spinner` in favour of `ActivityIndicator`.
63
+ With reduced motion enabled, the rotating and rocking layers are replaced by a
64
+ single static ring that gently pulses its opacity. This preserves the busy state
65
+ without rotational motion.
97
66
 
98
- ## Mobile
67
+ ## Cross-platform behavior
68
+
69
+ | Aspect | Web | Mobile |
70
+ | ---------------- | ----------------------- | --------------------------------------- |
71
+ | Sizes | 16px small, 32px base | 28px small, 44px base |
72
+ | Accessible label | `ariaLabel` | `accessibilityLabel` |
73
+ | Default label | Localized `"Loading"` | Localized `"Loading"` |
74
+ | Styling | `className` and `style` | `style` |
75
+ | Reduced motion | CSS media query | Operating-system setting via Reanimated |
76
+
77
+ ## Relationship to Spinner
99
78
 
100
- On mobile (`@jobber/components-native`), `ActivityIndicator` uses the
101
- [ActivityIndicator](https://reactnative.dev/docs/activityIndicator) core
102
- component from React Native.
79
+ The legacy [Spinner](../Spinner/Spinner.md) remains available during migration but
80
+ is deprecated. New code should use `ActivityIndicator`.
103
81
 
104
82
  ## Mockup
105
83
 
@@ -110,7 +88,7 @@ component from React Native.
110
88
 
111
89
  | Prop | Type | Required | Default | Description |
112
90
  |------|------|----------|---------|-------------|
113
- | `ariaLabel` | `string` | No | `"Loading"` | Accessible label exposed via `aria-label` on the root element. Override to localize or to describe the specific activ... |
91
+ | `ariaLabel` | `string` | No | `"Loading"` | Accessible label exposed via `aria-label` on the root element. Defaults to the localized "Loading" message. Override ... |
114
92
  | `className` | `string` | No | — | Custom class name merged onto the root element alongside the component's own classes. |
115
93
  | `size` | `"base" | "small"` | No | `base` | Visual size. `base` renders at 32px, `small` renders at 16px. |
116
94
  | `style` | `CSSProperties` | No | — | Custom inline styles applied to the root element. |
package/dist/docs/Icon/Icon.md CHANGED
@@ -305,6 +305,7 @@ export function IconSizesExample() {
305
305
  | | `smsProgress` |
306
306
  | | `snoozeRecommendations` |
307
307
  | | `webchat` |
308
+ | | `webchatInbound` |
308
309
  | | `webchatProgress` |
309
310
 
310
311
  ### User
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "9.16.4",
3
+ "version": "9.16.6",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -501,7 +501,7 @@
501
501
  "devDependencies": {
502
502
  "@apollo/client": "^3.7.10",
503
503
  "@csstools/postcss-global-data": "^1.0.3",
504
- "@jobber/design": "0.120.0",
504
+ "@jobber/design": "0.121.0",
505
505
  "@jobber/hooks": "2.21.1",
506
506
  "@rollup/plugin-alias": "^5.1.0",
507
507
  "@rollup/plugin-commonjs": "^25.0.7",
@@ -553,5 +553,5 @@
553
553
  "> 1%",
554
554
  "IE 10"
555
555
  ],
556
- "gitHead": "df5ca5cd691c56be40fad67fae7ea644724656cc"
556
+ "gitHead": "8efe7ed48c2c677ef66802b64d945c259f22a343"
557
557
  }