@jobber/components-native 0.105.3 → 0.105.4-addeditor-cab44cf.11

package/dist/docs/Form/Form.md

@@ -34,7 +34,7 @@ saving the single input they are editing, but the entire object.
 ### Form errors
 
 All error messaging should follow our
-[Product Vocabulary.](/content/product-vocabulary)
+[Product Vocabulary.](../product-vocabulary/product-vocabulary.md)
 
 ## Setup
 

package/dist/docs/InputText/InputText.md

@@ -151,7 +151,7 @@ but minimizes the need for it as the user should be set up for success by proper
 guidance pre-submission before any "bad" data gets to the server.
 
 Follow the
-[product vocabulary](/content/product-vocabulary#component-view-general-phrasing)
+[product vocabulary](../product-vocabulary/product-vocabulary.md#component-view-general-phrasing)
 for guidance on writing helpful error messages.
 
 ```tsx

package/dist/docs/Toast/Toast.md

@@ -41,7 +41,7 @@ The Toast label should be clear and concise, and should not take up more than
 one line.
 
 Use the pattern "action + subject" to maintain
-[active voice](/content/voice-and-tone). The subject should be specific without
+[active voice](../voice-and-tone/voice-and-tone.md). The subject should be specific without
 overloading too much detail for the user to parse at a quick glance.
 
 | ✅ Do              | ❌ Don't                                            |
@@ -54,7 +54,7 @@ overloading too much detail for the user to parse at a quick glance.
   * Examples of action labels: `Undo`, `View`, `Refresh`
 * Toast's label does not require a period
 * Use sentence case, and only capitalize
-  ["branded"](/content/product-vocabulary) Jobber features
+  ["branded"](../product-vocabulary/product-vocabulary.md) Jobber features
 
 | ✅ Do       | ❌ Don't                 |
 | ---------- | ----------------------- |

package/dist/docs/errors/errors.md

@@ -25,8 +25,8 @@ First and foremost: design to avoid the possibility of errors!
 
 #### Effective content
 
-Follow the guidance in our [product vocabulary](../content/product-vocabulary)
-and [voice & tone](../content/voice-and-tone) guides to help you craft effective
+Follow the guidance in our [product vocabulary](../product-vocabulary/product-vocabulary.md)
+and [voice & tone](../voice-and-tone/voice-and-tone.md) guides to help you craft effective
 error messages.
 
 #### Validation and form inputs

package/dist/docs/formatting/formatting.md

@@ -0,0 +1,245 @@
+# GrammarThis page defines the grammar and punctuation rules for writing at Jobber. These
+rules ensure our content is consistent, clear, and easy to scan across the
+product.## CapitalizationUse sentence case for almost all product content, with the exception of
+instances where all-caps is a stylistic decision (i.e. MON WED TUE as calendar
+weekday headers). Additionally, as outlined in the Buttons section, button
+labels are title cased.This means in general, capitalize only the first letter of the content unless
+there is a proper noun (such as a person's name) involved. This applies to:- Headings and titles
+- Body copy
+- Card headers
+- Menu options
+- List itemsJobber features such as jobs, quotes and invoices don't count as proper nouns.
+They shouldn't be capitalized.### NamesRespect user input for names and do not force capitalization. For example, names
+like “LaGrange”, “DeAndre”, and “dos Santos” all carry meaning, and we should
+not impose a standardized structure that omits these nuances.### ButtonsButton labels should be title-cased. This means in general, capitalize all words
+with the exception of:- Articles (a, an, the)
+- Coordinating conjunctions (but, for)
+- Prepositions (at, by, to, etc.)| ✅ **Do**             | ❌ **Don't**          |
+| -------------------- | -------------------- |
+| Approve and Schedule | Approve and schedule |
+| Create a Quote       | Create A Quote       |## ContractionsContractions help keep Jobber's tone conversational, and make our content easier
+to scan for SPs. They should be used.| ✅ **Do**                      | ❌ **Don't**                        |
+| ----------------------------- | ---------------------------------- |
+| Can't, couldn't, you're, it's | Can not, could not, you are, it is |## HeadingsHeadings and subheadings are titles and subtitles that can refer to specific
+sections.When writing a heading, try to keep it short. SPs are busy, and need to
+understand the content of a page or section quickly. Don't try to communicate
+technical details in the headline, leave that to the body copy.Start by addressing the general thought, then post-headline, move on to the
+particulars.#### Start with the general ideaUse the heading to name the **section** or **task**. Save specifics for the body
+copy. This improves scanning and makes screens easier to reuse.| ✅ **Do**         | ❌ **Don't**                          |
+| ---------------- | ------------------------------------ |
+| Invoice details  | Invoice for Anna Smith, May 14, $620 |
+| Schedule options | Schedule the job for next Thursday   |
+| Payment history  | Payments received this month         |#### Be clearHeadings should be easy to understand at a glance. Avoid vague, overly friendly,
+or conversational phrases — they slow people down.| ✅ **Do**         | ❌ **Don't**            |
+| ---------------- | ---------------------- |
+| Job history      | Where you've been      |
+| Add a new client | Let’s get you set up!  |
+| Quote overview   | Ready to win the work? |#### Keep it short and scannableHeadings should be easy to read on mobile and in motion. Avoid repeating screen
+names, filler phrases, or full sentences.| ✅ **Do**              | ❌ **Don't**                                 |
+| --------------------- | ------------------------------------------- |
+| Create invoice        | This screen lets you create an invoice      |
+| Upcoming appointments | Your upcoming appointments are listed below |
+| Add line item         | Add a line item to the quote                |### SubheadingsSubheadings can be useful when a heading requires further context. They should
+always offer real help, not filler. Just because a layout has a subheading, it
+doesn't mean it should be used.Only use subheadings when they:- Clarify something that’s not obvious from the heading
+- Add meaningful guidance to a task or section
+- Help reduce the need for extra body copy**Example**:If you were introducing the concept of reviews for SPs, where Jobber can
+automate asking SPs for a review upon a completion of a job, you wouldn't put
+the technical aspect of automation in the heading, that would be saved for the
+subheading. Heading: Ask your clients for reviews 
+Subheading: Jobber can ask your clients for reviews on your behalf, at a time
+of your choice For more guidance on how to structure headings and subheadings, you can view the
+[structure of content video.](https://us02web.zoom.us/clips/share/ExCgjrtsR4GZje6y5di2rA)## ListsUse lists to make instructions or content easy to scan. SPs often work in
+fast-moving situations, so these rules have been added with keeping lists clear
+and readable in mind.The two main ways to organise lists in Jobber are with bullet points or numbers.
+In some instances there are also sentenced based lists. Follow these rules to
+achieve consistency when adding or editing a list.### Bullet point listUse a bullet point list when the list items don't require a specific order.
+Bullet point lists should be introduced with a colon. Don't put periods at the
+end of items if every item is one sentence.**Example** where periods are not required:All Connect features plus:- Advanced quote customization
+- Track costs with job costing
+- Automated quote follow-upsIf one or more of the items is more than one sentence long, all items should end
+with a period.**Example** where periods are required:Here’s what a client sees after accepting a quote:- A confirmation message. It tells them you'll be in touch to schedule the job.
+- A payment summary with any required deposit.
+- A prompt to create a client account, if they haven't already.### Numbered listUse numbered lists when **order matters**, such as creating an invoice from a
+completed job. Follow the same rules on colons and periods as bullet point list.**Example**:To create an invoice from the job page:1) Tap more actions and select create invoice
+2) Review the line items and costs
+3) Tap send to email it to the client### Sentence listOccasionally you may want to structure a list with a sentence. These are rarer
+than bullet point and numbered lists, but they can be useful in describing a
+sequence or laying out the impact of an action.Try to limit the amount of items in a sentence list, if it becomes hard to scan
+consider a bullet point or numbered list.Use an oxford comma to help communicate that the last two items of the list are
+seperate.| ✅ **Do**                                        | ❌ **Don't**                                    |
+| ----------------------------------------------- | ---------------------------------------------- |
+| Change images, tagline, and contact information | Change images, tagline and contact information |## PronounsDefault to addressing SPs with "you", we don;t usually speak on their behalf
+with "I" or "my".| ✅ **Do**               | ❌ **Don't**          |
+| ---------------------- | -------------------- |
+| Your average job value | My average job value |Use "I" when SPs need to declare something, this is usually related to a legal
+requirement.| ✅ **Do**                            | ❌ **Don't**                           |
+| ----------------------------------- | ------------------------------------- |
+| I agree to the terms and conditions | You agree to the terms and conditions |When referring to Jobber, feel free to use "we" and "we're". Avoid using
+"Jobber" wherever possible, we should be happy to take ownership rather than
+talking in the third person.| ✅ **Do**                                       | ❌ **Don't**                            |
+| ---------------------------------------------- | -------------------------------------- |
+| We've made improvements to your scheduled view | Jobber has improved your schedule view |## PunctuationThese rules are in place so that punctuation can be applied consistently across
+Jobber. Consistent use of punctuation will make the product feel more cohesive
+for SPs.## AmpersandsDon't use ampersands in the product. They don't save much space, don't look
+great, and they draw attention to the most irrelevant part of the sentence.| ✅ **Do**             | ❌ **Don't**        |
+| -------------------- | ------------------ |
+| Review and Send      | Review & Send      |
+| Approve and Schedule | Approve & Schedule |## CommasAs stated with sentence lists, we use oxford commas at Jobber to help establish
+that the last two items are separate. They should be used in lists of three
+items or more, unless you're doing a bullet point list or a numbered list.## Exclamation marksAvoid exclamation marks in nearly all scenarios. There should be an extremely
+high threshold for the use of exclamation marks to ensure the genuine moments of
+excitement aren't diluted.Most of Jobber is not exclamation worthy. Even when a user completes something
+important, like:- Sending a quote or invoice
+- Scheduling a job
+- Collecting a deposit
+- Turning on Jobber Payments
+- Signing up for Marketing SuiteThese are normal workflows, not celebrations. They should be acknowledged
+professionally, not enthusiastically.| ✅ **Do**         | ❌ **Don't**         |
+| ---------------- | ------------------- |
+| Quote sent       | You sent the quote! |
+| Job scheduled    | Your job is booked! |
+| Payment received | You got paid!       |There are more experimental areas such as trial where exclamation marks may be
+used to try and generate excitement and enthusiasm for Jobber. Even in these
+cases, they should be limited to one per page to focus the excitement on one
+specific area.## Hyphens, en dashes, and em dashesUse dashes thoughtfully. Each has a specific role, and misusing them can make
+content harder to scan or understand for SPs.| **Type**    | **Use for**               | **Example**                                      |
+| ----------- | ------------------------- | ------------------------------------------------ |
+| Hyphen (-)  | Compound modifiers        | Full-service job                                 |
+| En dash (–) | Ranges and numeric spans  | Jan 2–Jan 5                                      |
+| Em dash (—) | Last-resort clarification | Payment failed — update your billing information |### HyphensUse hyphens to join words that act as a single modifier before a noun. They help
+clarify meaning and reduce ambiguity.| ✅ **Do**           | ❌ **Don't**        |
+| ------------------ | ------------------ |
+| Full-service job   | Full service job   |
+| One-time cleanup   | One time cleanup   |
+| Real-time tracking | Real time tracking |Do not use hyphens when the compound comes **after** the noun.> ✅ This job is full service.\
+> ❌ This job is full-service.### En dashes ( – )Use en dashes for **ranges** especially in time, date, and dollar amounts. No
+spaces on either side.| ✅ **Do**        | ❌ **Don't**     |
+| --------------- | --------------- |
+| Jan 2–Jan 5     | Jan 2 - Jan 5   |
+| 2:00 PM–4:00 PM | 2:00PM - 4:00PM |
+| $200–$500       | $200 - $500     |En dashes are also used when **expressing a relationship** between values.> The visit window is 8:00 AM–12:00 PM.\
+> The client–contractor agreement includes scope and payment terms.### Em dashes ( — )Use em dashes **only when absolutely necessary**, typically as a last resort to
+break up a sentence for readability or emphasis. As AI (over)uses the Em dash,
+it's important to ensure all content produced by AI has been reviewed. Otherwise
+Jobber content will look and sound like it has been purely AI generated.They should **not** be your go-to for style or tone. Often, a clearer option is
+to split the sentence.| ✅ **Do**                                              | ❌ **Don't**                                            |
+| ----------------------------------------------------- | ------------------------------------------------------ |
+| The quote was approved. You can now schedule the job. | The quote was approved — you can now schedule the job. |## MultiplicationUse the `×` symbol to indicate multiplication whenever possible, rather than an
+`x`.| **✅ Do**    | **❌ Don't** |
+| ----------- | ----------- |
+| 12 × $48.00 | 12 x $48.00 |## ParenthesesRestrict to when you need to communicate that some information or tasks are
+optional, or if you want to highlight a particular action is recommended. In
+these cases, just use the word, rather than overload SPs with information.| ✅ **Do**                      | ❌ **Don't**                                             |
+| ----------------------------- | ------------------------------------------------------- |
+| Ask for reviews (recommended) | Ask for reviews (recommended for businesses like yours) |## PeriodsDon't use a period in microcopy such as error messages, list items, or form
+instructions. Headings don't need a period as they should be restricted to one
+sentence. In microcopy generally, don't use a period unless what you're writing
+is more than one sentence long.| ✅ **Do**         | ❌ **Don't**       |
+| ---------------- | ----------------- |
+| Enter your email | Enter your email. |## Question marksQuestion marks should be avoided. They create uncertainty, take up space, and
+increase decision-making effort for SPs, especially in fast-moving contexts like
+job scheduling, invoicing, or follow-ups.#### Don’t use question marks in confirmation modalsConfirmation modals should state what’s about to happen, not ask for permission.
+Framing the action as a question forces us into over long and confusing button
+labels like “Yes, do the action”.| ✅ **Do**         | ❌ **Don't**                                |
+| ---------------- | ------------------------------------------ |
+| Archive this job | Are you sure you want to archive this job? |
+| Delete client    | Delete this client?                        |#### Don’t use them in headlines or body copyHeadlines and hero copy should be clear and declarative, not speculative or
+“salesy.” Avoid phrases like “Ready to…” or “Want to…”.| ✅ **Do**                     | ❌ **Don't**                           |
+| ---------------------------- | ------------------------------------- |
+| Cut down on admin work       | Ready to cut down on your admin work? |
+| Track time from anywhere     | Want to track time from the field?    |
+| Book more jobs automatically | Need to book more jobs?               |#### Say what’s happening rather than what might happenEven if you’re presenting a choice, **state the outcome**. This helps SPs make
+quick, confident decisions, and keeps button text clear and specific.| ✅ **Modal heading**              | ❌ **Modal heading**              |
+| -------------------------------- | -------------------------------- |
+| Cancel this visit                | Are you sure you want to cancel? |
+| Remove team member from schedule | Remove this team member?         |## Quotation marksQuotation marks can be helpful to clearly identify exact text that came from a
+client, user, or file. This could include job notes, filenames, custom inputs,
+or copied phrases.#### Where to use quotation marks in JobberUse quotation marks when you're referencing exact input, especially in:- File and attachment names
+- Client-submitted phrases#### Use quotes for client input, filenames, or copied phrasesOnly use quotation marks when you’re showing exactly what the user or client
+entered. Not to add emphasis.| ✅ **Do**                                      | ❌ **Don't**                                 |
+| --------------------------------------------- | ------------------------------------------- |
+| The client wrote: “Please use the back door.” | The client wrote: Please use the back door. |
+| File uploaded: “invoice\_1023.pdf”            | File uploaded: invoice\_1023.pdf            |#### Use curly quotes, not straight quotesFor the sake of consistency, always use smart (typographic) quotation marks — “
+and ” — in all content. Avoid straight quotes (" or ').| ✅ **Do**                    | ❌ **Don't**                 |
+| --------------------------- | --------------------------- |
+| “Approved by client”        | "Approved by client"        |
+| “Please avoid the driveway” | 'Please avoid the driveway' |#### Punctuation goes inside the quotesIn most cases, place periods and commas **inside** the quotation marks. This
+keeps the sentence flowing and avoids awkward phrasing.| ✅ **Do**                                  | ❌ **Don't**                               |
+| ----------------------------------------- | ----------------------------------------- |
+| The client said: “We’ll be home after 5.” | The client said: “We’ll be home after 5”. |## SpellingWe use American spelling in Jobber as this is where most of our SPs are based.| ✅ **Do**  | ❌ **Don't** |
+| --------- | ----------- |
+| Labor     | Labour      |
+| Customize | Customise   |
+| Canceled  | Cancelled   |## NumbersUse numbers, don't spell them out.| ✅ **Do**                        | ❌ **Don't**                        |
+| ------------------------------- | ---------------------------------- |
+| 14                              | Fourteen                           |
+| You have 5 jobs scheduled today | You have five jobs scheduled today |#### Use commas| ✅ **Do** | ❌ **Don't** |
+| -------- | ----------- |
+| 140,000  | 140 k       |#### Use the En dash ( – )As stated in the hyphens section, use an En dash when you want to show a
+numerical range and don't use a space.| ✅ **Do**      | ❌ **Don't**     |
+| ------------- | --------------- |
+| Between 10-15 | Between 10 - 15 |#### AbbreviationDon't abbreviate numbers when there's a decimal place involved. It's unlikely
+within Jobber, a platform that deals in quotes and invoices, that the numbers
+after a decimal place are going to be irrelevant. There is no need to put a
+decimal place if the post decimal place value is zero (.00).As stated, don't use shorteners such as "k", this makes Jobber seem less focused
+on accuracy.| ✅ **Do**  | ❌ **Don't** |
+| --------- | ----------- |
+| $3,345.34 | $3,345      |
+| $32,000   | $32 k       |#### HyphensUse a hyphen with phone numbers. Don't use spaces.| ✅ **Do**     | ❌ **Don't**    |
+| ------------ | -------------- |
+| 912-790-5542 | (912) 790-5542 |## TimeSPs can choose between 12 hour and 24 hour time formats in their settings, so
+this guidance isn't based on which one Jobber prefers. Respect the user's
+locale and product settings, and use existing localized time formatters when
+available instead of building time strings by hand.Examples in this guide assume en-US. The localized formatter may produce
+different output in other locales - trust it over hand-built strings.If you're implementing a new surface, first look for existing
+internationalization or formatting helpers in that product.For both formats, use a colon (:) rather than a period when the localized
+format uses numeric times. Example: `11:40`### 12 HourWhen the localized format uses 12 hour time, include AM or PM using the
+formatter's localized output.- Include a space between the last number "Scheduled for 11:40 AM"
+- Use the En dash for ranges, and make sure AM or PM is included in both times
+  "10:00 AM–11:40 AM"| ✅ **Do**          | ❌ **Don't**         |
+| ----------------- | ------------------- |
+| 2:00 PM           | 2 pm                |
+| 11:40 AM          | 11.40 AM            |
+| 11:40 AM–12:20 PM | 11.40 A.M–12.20 P.M |### 24 HourWhen the localized format uses 24 hour time, there is no need to add AM or PM.
+Remember that times before 10:00 require a zero at the start "09:59"| ✅ **Do** | ❌ **Don't** |
+| -------- | ----------- |
+| 02:00    | 2:00 AM     |
+| 19:40    | 19:40 PM    |### Time durationDisplay hours, minutes and seconds when a timer is actively running.| ✅ **Do** | ❌ **Don't** |
+| -------- | ----------- |
+| 0:04:31  | 0:04        |Display hours and minutes rounded up when referring to a record of time.| ✅ **Do**    | ❌ **Don't** |
+| ----------- | ----------- |
+| 1 hr 21 min | 1:21:21     |### Time unit standardsUse these time unit abbreviations based on available space and context. Keep
+styling consistent across a screen or component.| **Unit** | **Full** | **Abbreviated** | **Condensed** |
+| -------- | -------- | --------------- | ------------- |
+| Seconds  | seconds  | sec             | s             |
+| Minutes  | minutes  | min             | m             |
+| Hours    | hours    | hr              | h             |
+| Days     | days     | days            | d             |#### General rules- Use **full words** when space allows
+
+  > 4 hours and 12 minutes.
+
+- Use **abbreviated form** in dense UIs or mobile
+
+  > 4 hr 12 min
+
+- Don’t mix styles within the same string
+  > ✅ 2 hr 10 min ❌ 2 h 10 min#### ✅ Time range formattingUse standard punctuation and spacing for time unit standards.| ✅ **Do**    | ❌ **Don't**                          |
+| ----------- | ------------------------------------ |
+| 1 hr 15 min | 1hr 15minutes                        |
+| 45 minutes  | 45 min *(if space allows full word)* |## DatesDates and date-times should respect the user's locale and product settings. Do
+not enforce a single punctuation style, month length, or date-part order across
+all surfaces.Examples in this guide assume en-US. Localized formatters may produce different
+punctuation, abbreviations, and ordering in other locales, so trust them over
+hand-built strings.When a localized formatter is available, use it rather than building date
+strings by hand. This applies to punctuation, month abbreviations, whether the
+year is shown, and the order of date and time values.If you're implementing a new surface, first look for existing
+internationalization or formatting helpers in that product.Avoid custom shorthand that overrides the localized format.| ✅ **Do**        | ❌ **Don't**    |
+| --------------- | -------------- |
+| December 5 2025 | December 5 '25 |
+| Oct 15          | Oct 15th       |When communicating a date range, preserve the localized date format on both
+sides of the range and use the En dash ( – ) between the start and end values.
+If the range overlaps a year, it needs to be indicated.| ✅ **Do**                                   | ❌ **Don't**                          |
+| ------------------------------------------ | ------------------------------------ |
+| Dec 31 2022, 2:00 PM – Jan 1 2023, 3:00 PM | Dec 31, 2:00 PM, 2022 Jan 1, 3:00 PM |
+| October 12 – November 17                   | October 12-November 17               |

package/dist/docs/index.md

@@ -28,6 +28,7 @@
 [Flex](./Flex/Flex.md)
 [Form](./Form/Form.md)
 [FormatFile](./FormatFile/FormatFile.md)
+[formatting](./formatting/formatting.md)
 [FormField](./FormField/FormField.md)
 [Glimmer](./Glimmer/Glimmer.md)
 [Heading](./Heading/Heading.md)
@@ -46,6 +47,7 @@
 [interaction](./interaction/interaction.md)
 [Opacity](./Opacity/Opacity.md)
 [page-layouts](./page-layouts/page-layouts.md)
+[product-vocabulary](./product-vocabulary/product-vocabulary.md)
 [ProgressBar](./ProgressBar/ProgressBar.md)
 [Radii](./Radii/Radii.md)
 [ResponsiveBreakpoint](./ResponsiveBreakpoint/ResponsiveBreakpoint.md)
@@ -62,3 +64,4 @@
 [Typography](./Typography/Typography.md)
 [Typography](./Typography/Typography.md)
 [usage-guidelines](./usage-guidelines/usage-guidelines.md)
+[voice-and-tone](./voice-and-tone/voice-and-tone.md)