Merge branch 'master' into improve-disclosure-interaction-states

GetJobber · Sep 19, 2024 · 65b7a19 · 65b7a19
2 parents d3f5b4f + ca6f400
commit 65b7a19
Show file tree

Hide file tree

Showing 60 changed files with 1,071 additions and 393 deletions.
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -53,15 +53,15 @@ export const darkTheme = create({
   barSelectedColor: tokens["color-base-blue--100"],
 
  // UI
- appBg: '#ddffff',
- appContentBg: 'var(--color-surface)',
- appPreviewBg: 'var(--color-surface)',
- appBorderColor: '#585C6D',
- appBorderRadius: 4,
+  appBg: tokens["color-base-blue--1000"],
+  appContentBg: tokens["color-base-blue--900"],
+  appPreviewBg: tokens["color-base-blue--900"],
+  appBorderColor: tokens["color-base-blue--700"],
+  appBorderRadius: tokens["radius-base"],
 
 
   /**
    * Brand Identity
    */
   brandTitle: "🔱 Atlantis",
-})
+})
diff --git a/docs/components/Chip/Chip.stories.mdx b/docs/components/Chip/Chip.stories.mdx
@@ -8,31 +8,37 @@ import { Flex } from "@jobber/components/Flex";
 
 # Chip
 
-Chip is a flexible component that can be used for 
+Chip is a flexible component that can be used for
+
 - inline single- or multi-selection of items
-- triggering filtering and selection components like [Combobox](../?path=/docs/components-selections-combobox--docs)
+- triggering filtering and selection components like
+  [Combobox](../?path=/docs/components-selections-combobox--docs)
 - presenting grouped items that can be added or removed
 
 <Canvas>
   <Chip label="Gavin Messina">
     <Chip.Prefix>
-      <Avatar size="small" imageUrl="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <Avatar
+        size="small"
+        imageUrl="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
     </Chip.Prefix>
     <Chip.Suffix>
       <Icon name="cross" size="small" />
-    </Chip.Suffix> 
+    </Chip.Suffix>
   </Chip>
 </Canvas>
 
 ## Usage guidelines
 
-See the [Comparison story](../?path=/story/components-selections-chip-web-comparisons--all) 
+See the
+[Comparison story](../?path=/story/components-selections-chip-web-comparisons--all)
 for a full overview of potential Chip variants.
 
 ### Variations
 
-The base variation of Chip should be used in most cases. When a lighter-weight approach
-is desired, use the subtle variation.
+The base variation of Chip should be used in most cases. When a lighter-weight
+approach is desired, use the subtle variation.
 
 <Canvas>
   <Flex template={["shrink", "shrink"]} direction="row" gap="small">
@@ -43,9 +49,9 @@ is desired, use the subtle variation.
 
 ### Selection
 
-Chip allows users to make selections in scenarios where space
-is at a premium. It has three high-level usages: single-select, multi-select,
-and add/dismiss selection.
+Chip allows users to make selections in scenarios where space is at a premium.
+It has three high-level usages: single-select, multi-select, and add/dismiss
+selection.
 
 #### Single-select
 
@@ -61,12 +67,16 @@ selected single-select Chip can be de-selected by the user, leaving all
 selections blank.
 
 <Canvas>
-  <Flex template={["shrink", "shrink", "shrink", "shrink"]} direction="row" gap="small">
+  <Flex
+    template={["shrink", "shrink", "shrink", "shrink"]}
+    direction="row"
+    gap="small"
+  >
     <Chip label="Option 1" variation="subtle" />
     <Chip label="Option 2">
       <Chip.Suffix>
         <Icon name="checkmark" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
     <Chip label="Option 3" variation="subtle" />
     <Chip label="Option 4" variation="subtle" />
@@ -88,31 +98,35 @@ Similar to Checkbox, a selected multi-select Chip can be de-selected by the
 user, leaving all selections blank.
 
 <Canvas>
-  <Flex template={["shrink", "shrink", "shrink", "shrink"]} direction="row" gap="small">
+  <Flex
+    template={["shrink", "shrink", "shrink", "shrink"]}
+    direction="row"
+    gap="small"
+  >
     <Chip label="Option 1">
       <Chip.Suffix>
         <Icon name="checkmark" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
     <Chip label="Option 2">
       <Chip.Suffix>
         <Icon name="checkmark" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
     <Chip label="Option 3" variation="subtle" />
-    <Chip label="Option 4" >
+    <Chip label="Option 4">
       <Chip.Suffix>
         <Icon name="checkmark" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
   </Flex>
 </Canvas>
 
 #### Add/dismiss selection
 
 When the user will be selecting one or more items by inputting their own Chip
-options, use a dismissible Chip. Think of a case like team assignment, where
-the user can add multiple users represented as Chips, and click on the dismiss
+options, use a dismissible Chip. Think of a case like team assignment, where the
+user can add multiple users represented as Chips, and click on the dismiss
 suffix of the Chip to remove a user.
 
 The dismissible Chip allows them to remove previous selections from the Chips.
@@ -122,75 +136,91 @@ would be far too many Chip options to present in one group, and would be
 overwhelming for the user to interpret.
 
 <Canvas>
-  <Flex template={["shrink", "shrink", "shrink", "shrink", "shrink"]} direction="row" gap="small">
+  <Flex
+    template={["shrink", "shrink", "shrink", "shrink", "shrink"]}
+    direction="row"
+    gap="small"
+  >
     <Chip label="Add" variation="subtle">
       <Chip.Suffix>
         <Icon name="add" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
     <Chip label="Option 1">
       <Chip.Suffix>
         <Icon name="cross" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
     <Chip label="Option 2">
       <Chip.Suffix>
         <Icon name="cross" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
-    <Chip label="Option 3"  >
+    <Chip label="Option 3">
       <Chip.Suffix>
         <Icon name="cross" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
-    <Chip label="Option 4" >
+    <Chip label="Option 4">
       <Chip.Suffix>
         <Icon name="cross" size="small" color="interactiveSubtle" />
-      </Chip.Suffix> 
+      </Chip.Suffix>
     </Chip>
   </Flex>
 </Canvas>
 
 ### Invalid
 
-If something goes awry with a selection or you otherwise need to convey to the user
-that something's gone wrong in relation to the Chip, you can use the invalid state.
+If something goes awry with a selection or you otherwise need to convey to the
+user that something's gone wrong in relation to the Chip, you can use the
+invalid state.
 
 <Canvas>
   <Chip label="Select team" invalid>
     <Chip.Prefix>
       <Icon name="alert" size="small" />
-    </Chip.Prefix> 
+    </Chip.Prefix>
   </Chip>
 </Canvas>
 
+## Sub Components
+
+### Chip.Prefix
+
+When `Chip.Prefix` is provided an Icon or Avatar as the immediate child or
+children, some extra markup and styles will automatically be added. If these
+styles and markup are not desired, you may wrap the Avatar(s) or Icon(s) in any
+other element and provide your own layout.
+
 ## Related components
 
-- [Chips](../?path=/docs/components-selections-chips--docs) is a convenience wrapper
-  that offers the single-select, multi-select, and add/dismiss functionality "out of the box"
-- [Combobox](../?path=/docs/components-selections-combobox--docs) is most commonly
-  triggered by a Chip, but is a separate component
-- [Select](../?path=/docs/components-selections-select--docs) is a simpler single-select
-  "dropdown" that presents as a form element and should be preferred in forms
+- [Chips](../?path=/docs/components-selections-chips--docs) is a convenience
+  wrapper that offers the single-select, multi-select, and add/dismiss
+  functionality "out of the box"
+- [Combobox](../?path=/docs/components-selections-combobox--docs) is most
+  commonly triggered by a Chip, but is a separate component
+- [Select](../?path=/docs/components-selections-select--docs) is a simpler
+  single-select "dropdown" that presents as a form element and should be
+  preferred in forms
 - [RadioGroup](../?path=/docs/components-forms-and-inputs-radiogroup--docs)
   should be used to allow the user to select "one-of-many" items (single-select)
   and the labels for the items are longer than 1 or 2 words.
 - [Checkbox](../?path=/docs/components-selections-checkbox--docs) should be used
   to allow the user to select "one-or-more-of-many" items (multi-select) and the
   labels for the items are longer than 1 or 2 words.
 - [InlineLabel](../?path=/docs/components-status-and-feedback-inlinelabel--docs)
-  should be used when you just need a rounded-rectangular element that displays 
+  should be used when you just need a rounded-rectangular element that displays
   metadata about an element
 
 ## Content guidelines
 
-Chip headings and labels for single- or multi-select should be succinct - ideally 1–2 words. 
-If any of the options in the group may have longer labels, consider Checkbox or Radio as necessary 
-for your selection type.
+Chip headings and labels for single- or multi-select should be succinct -
+ideally 1–2 words. If any of the options in the group may have longer labels,
+consider Checkbox or Radio as necessary for your selection type.
 
-In cases where a Chip displays name of its selections, such as when used to trigger 
-a Combobox or a date range selector, use the heading to identify the "category" and 
-the label to identify the selected items.
+In cases where a Chip displays name of its selections, such as when used to
+trigger a Combobox or a date range selector, use the heading to identify the
+"category" and the label to identify the selected items.
 
 ## Accessibility
 
@@ -202,7 +232,6 @@ dealing with a checkbox or radio button.
 If Chips is set for add/dismiss selections, the dismiss button should notify the
 user that they will "dismiss \{label name\}" upon press.
 
-
 ## Responsiveness
 
 The Chips themselves will take up as much space as their container allows, and
@@ -212,9 +241,9 @@ out of view in a single row, depending on your use case.
 Chip can truncate if its' container is limited in space, but does not inherently
 cap its own width and will default to "hug" its contents.
 
-
 ## Notes
 
-Chip is in the process of being applied to the more opinionated Chips convenience wrapper,
-but by design does not carry the same level of "out of the box" functionality as it is a more
-"atomic" element that can be used outside of those more complex selection flows.
+Chip is in the process of being applied to the more opinionated Chips
+convenience wrapper, but by design does not carry the same level of "out of the
+box" functionality as it is a more "atomic" element that can be used outside of
+those more complex selection flows.
diff --git a/docs/components/Chips/Chips.stories.mdx b/docs/components/Chips/Chips.stories.mdx
@@ -83,8 +83,9 @@ In cases where the Chip is on an area whose background is
 
 ## Related components
 
-- [Chip](../?path=/docs/components-selections-chip--docs) is the building block that Chips is built on top of, and has more 
-  flexibility to be used in isolation.
+- [Chip](../?path=/docs/components-selections-chip--docs) is the building block
+  that Chips is built on top of, and has more flexibility to be used in
+  isolation.
 - [RadioGroup](../?path=/docs/components-forms-and-inputs-radiogroup--docs)
   should be used to allow the user to select "one-of-many" items (single-select)
   and the labels for the items are longer than 1 or 2 words.
@@ -143,34 +144,3 @@ colors for parity with Jobber's mobile platform, but we will not be implementing
 this is for the web components as of this first iteration of our web Chip. The
 mobile use-case is very specific to a filtering use case that we as of now do
 not anticipate will be required for the web.
-
-### Chips Composition with Standalone Chip (Web)
-
-Standalone Chip's `role`, `<Chip.Prefix>`, `<Chip.Suffix>` `heading` and
-`variation` will not work specifically when used within a `Chips`.
-
-If you wish to use a prefix, please use `Chip` from `Chips/Chip`.
-
-eg.
-
-```
-import { Chip, Chips } from "@jobber/components/Chips";
-...
-
-<Chips>
-  <Chip prefix="thumbsUp"/>
-</Chips>
-```
-
-Rather than using the standalone implementation.
-
-```
-import { Chip } from "@jobber/components";
-
-...
-<Chips>
-  <Chip>
-    <Chip.Prefix>...</Chip.Prefix>
-  </Chip>
-</Chips>
-```
diff --git a/docs/components/Chips/Web.stories.tsx b/docs/components/Chips/Web.stories.tsx
@@ -2,7 +2,9 @@ import React, { useState } from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Content } from "@jobber/components/Content";
 import { Chip, Chips } from "@jobber/components/Chips";
+import { Icon } from "@jobber/components/Icon";
 import { Text } from "@jobber/components/Text";
+import { Avatar } from "@jobber/components/Avatar";
 import { useFakeOptionQuery } from "./utils/storyUtils";
 
 export default {
@@ -30,15 +32,22 @@ const BasicTemplate: ComponentStory<typeof Chips> = args => {
       <Text>
         You are <u>{selected ? selected : "_______"}</u>
       </Text>
-      <Chips
-        {...args}
-        selected={selected}
-        onChange={setSelected}
-        type="singleselect"
-      >
-        <Chip label="Amazing" value="Amazing" />
-        <Chip label="Wonderful" value="Wonderful" />
-        <Chip label="Brilliant" value="Brilliant" />
+      <Chips {...args} selected={selected} onChange={setSelected}>
+        <Chip
+          prefix={<Avatar initials="AZ" />}
+          label="Amazing"
+          value="Amazing"
+        />
+        <Chip
+          prefix={<Icon name="video" />}
+          label="Wonderful"
+          value="Wonderful"
+        />
+        <Chip
+          prefix={<Icon name="starFill" />}
+          label="Brilliant"
+          value="Brilliant"
+        />
         <Chip label="Magnificent" value="Magnificent" />
       </Chips>
     </Content>
@@ -88,7 +97,6 @@ const SelectionTemplate: ComponentStory<typeof Chips> = args => {
   return (
     <Chips
       {...args}
-      type="dismissible"
       selected={selected}
       onChange={handleSelect}
       onCustomAdd={handleCustomAdd}

diff --git a/docs/components/InputFile/InputFile.stories.mdx b/docs/components/InputFile/InputFile.stories.mdx
@@ -81,6 +81,13 @@ function fileSizeValidator(file: File) {
 }
 ```
 
+### description
+
+The `description` prop is a string that can be used to provide additional
+information to the user. A common use case is to provide the accepted file types
+and maximum size for each file. With a helpful `description`, users are more
+aware of the limitations and requirements of the file upload.
+
 #### Notes
 
 If you would like to restrict specific file types, it is advised that you use