Merge remote-tracking branch 'origin/master' into CLEANUP/bumps-deps-…

…attempt2

.storybook/components/ColorSwatches/ColorSwatches.tsx → .storybook/components/StorybookColorSwatches/StorybookColorSwatches.tsx

@@ -5,14 +5,14 @@ import { Flex } from "@jobber/components/Flex";
 import { Text } from "@jobber/components/Text";
 import { Content } from "@jobber/components/Content";
 import { showToast } from "@jobber/components/Toast";
-import styles from "./ColorSwatches.module.css";
+import styles from "./StorybookColorSwatches.module.css";
 
-interface ColorSwatchesProps {
+interface StorybookColorSwatchesProps {
   readonly colors: string[];
   readonly description?: string;
 }
 
-export function ColorSwatches({ colors }: ColorSwatchesProps) {
+export function StorybookColorSwatches({ colors }: StorybookColorSwatchesProps) {
   return (
     <Content>
       {colors.map((color: string) => (

.storybook/components/StorybookColorSwatches/index.ts

@@ -0,0 +1 @@
+export { StorybookColorSwatches } from "./StorybookColorSwatches";

docs/components/Chip/Chip.stories.mdx

@@ -241,6 +241,18 @@ 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.
 
+## Base Chip Color Overrides
+
+If you wish to modify the colors of the Base variant, you may do so with CSS
+custom properties (variables).
+
+For the resting background color: `--public-chip-base-bg-color`
+
+For the hover/focused background color: `--public-chip-base-hover-bg-color`
+
+For the text content and miscellaneous content such as the line separator
+between the `label` and `heading`: `--public-chip-base-content-color`
+
 ## Notes
 
 Chip is in the process of being applied to the more opinionated Chips

docs/components/Chips/Chips.stories.mdx

@@ -139,8 +139,37 @@ out of view in a single row, depending on your use case.
 
 ## Notes
 
-There was some consideration to bring the ability to "accent" Chips with certain
-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.
+To override the appearance of the selected Chip(s) you may use
+[Base Chip Color Overrides](../?path=/docs/components-selections-chip--docs#base-chip-color-overrides)
+since the selected Chip is a Base Chip.
+
+### Chips composition with standalone Chip
+
+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`.
+
+#### ✅ Do
+
+```
+import { Chip, Chips } from "@jobber/components/Chips";
+...
+
+<Chips>
+  <Chip prefix="thumbsUp"/>
+</Chips>
+```
+
+#### ❌ Don't
+
+```
+import { Chip, Chips } from "@jobber/components";
+
+...
+<Chips>
+  <Chip>
+    <Chip.Prefix>...</Chip.Prefix>
+  </Chip>
+</Chips>
+```

docs/components/Chips/Web.stories.tsx

@@ -2,9 +2,7 @@ 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 {
@@ -32,22 +30,15 @@ const BasicTemplate: ComponentStory<typeof Chips> = args => {
       <Text>
         You are <u>{selected ? selected : "_______"}</u>
       </Text>
-      <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"
-        />
+      <Chips
+        {...args}
+        selected={selected}
+        onChange={setSelected}
+        type="singleselect"
+      >
+        <Chip label="Amazing" value="Amazing" />
+        <Chip label="Wonderful" value="Wonderful" />
+        <Chip label="Brilliant" value="Brilliant" />
         <Chip label="Magnificent" value="Magnificent" />
       </Chips>
     </Content>
@@ -97,6 +88,7 @@ const SelectionTemplate: ComponentStory<typeof Chips> = args => {
   return (
     <Chips
       {...args}
+      type="dismissible"
       selected={selected}
       onChange={handleSelect}
       onCustomAdd={handleCustomAdd}

docs/design/Colors.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
-import { ColorSwatches as Swatch } from "mdxUtils/ColorSwatches";
+import { StorybookColorSwatches as Swatch } from "mdxUtils/StorybookColorSwatches";
 import { Disclosure } from "@jobber/components/Disclosure";
 import { Text } from "@jobber/components/Text";
 import { ColorSwatches } from "@jobber/docx";
@@ -376,6 +376,16 @@ caution, it’s _bright!_
       "--color-base-green--800",
       "--color-base-green--900",
       "--color-base-green--1000",
+      "--color-base-teal--100",
+      "--color-base-teal--200",
+      "--color-base-teal--300",
+      "--color-base-teal--400",
+      "--color-base-teal--500",
+      "--color-base-teal--600",
+      "--color-base-teal--700",
+      "--color-base-teal--800",
+      "--color-base-teal--900",
+      "--color-base-teal--1000",
       "--color-base-lightBlue--100",
       "--color-base-lightBlue--200",
       "--color-base-lightBlue--300",
@@ -386,6 +396,16 @@ caution, it’s _bright!_
       "--color-base-lightBlue--800",
       "--color-base-lightBlue--900",
       "--color-base-lightBlue--1000",
+      "--color-base-purple--100",
+      "--color-base-purple--200",
+      "--color-base-purple--300",
+      "--color-base-purple--400",
+      "--color-base-purple--500",
+      "--color-base-purple--600",
+      "--color-base-purple--700",
+      "--color-base-purple--800",
+      "--color-base-purple--900",
+      "--color-base-purple--1000",
       "--color-base-blue--100",
       "--color-base-blue--200",
       "--color-base-blue--300",

docs/hooks/useOnMount.stories.mdx

@@ -7,9 +7,9 @@ import * as hooks from "@atlantis/packages/hooks/src";
 
 # UseOnMount
 
-`useOnMount` should be used to perform a callback once a component mounts. 
-Useful for emitting analytics events, fetching data, or other side effects 
-that should only occur once.
+`useOnMount` should be used to perform a callback once a component mounts.
+Useful for emitting analytics events, fetching data, or other side effects that
+should only occur once.
 
 ```tsx
 import { useOnMount } from "@jobber/hooks/useOnMount";
@@ -23,7 +23,12 @@ import { useOnMount } from "@jobber/hooks/useOnMount";
         hooks.useOnMount(() => {
           setCallbackCallCount(callbackCallCount + 1);
         });
-        return <h4>I am the AlertMountedComponent and my callback has been called {callbackCallCount} time</h4>;
+        return (
+          <h4>
+            I am the AlertMountedComponent and my callback has been called{" "}
+            {callbackCallCount} time
+          </h4>
+        );
       }
       const [shouldMount, setShouldMount] = useState(false);
       let component = <></>;

packages/components-native/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.72.3](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-10-04)
+
+
+### Bug Fixes
+
+* **components-native:** Restore success Text variation type ([#2059](https://github.com/GetJobber/atlantis/issues/2059)) ([f29667f](https://github.com/GetJobber/atlantis/commit/f29667f616a5c9e5bbb0458fbe29ae2a04ebe050))
+
+
+
+
+
 ## [0.72.2](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-09-24)
 
 **Note:** Version bump only for package @jobber/components-native

packages/components-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.72.2",
+  "version": "0.72.3",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {

packages/components-native/src/Typography/Typography.tsx

@@ -356,7 +356,6 @@ export type TextColor =
   | "informative"
   | "informativeSurface"
   | "informativeOnSurface"
-  | "success"
   | "successSurface"
   | "successOnSurface"
 
@@ -414,6 +413,7 @@ export type TextVariation =
 
   // Deprecated
   | "base" // Use "text" instead
+  | "success" // Use "successOnSurface" instead (except for when reverseTheme=true)
   | "subdued" // Use "textSecondary" instead
   | "error" // Use "critical" instead
   | "warn" // Use "warningOnSurface" instead

packages/components/CHANGELOG.md

@@ -3,6 +3,66 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.40.2](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-10-08)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+## [5.40.1](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-10-03)
+
+
+### Bug Fixes
+
+* **components:** Remove center alignment in FormField ([#2057](https://github.com/GetJobber/atlantis/issues/2057)) ([7259a09](https://github.com/GetJobber/atlantis/commit/7259a09e191fab94d25e011b8840bbb3458aaf38))
+
+
+
+
+
+# [5.40.0](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-10-02)
+
+
+### Features
+
+* **components:** Make Suffix Optional on Single and Multi Select Chips ([#2047](https://github.com/GetJobber/atlantis/issues/2047)) ([e4b9e06](https://github.com/GetJobber/atlantis/commit/e4b9e064126d9ec6747060afd35770cb2274930c)), closes [#2028](https://github.com/GetJobber/atlantis/issues/2028)
+
+
+
+
+
+## [5.39.1](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-10-02)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+# [5.39.0](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-10-02)
+
+
+### Features
+
+* **components:** Re-separate Chip from Chips w/Background Color Fixes ([#2035](https://github.com/GetJobber/atlantis/issues/2035)) ([7e7d6a6](https://github.com/GetJobber/atlantis/commit/7e7d6a61429609f77f9fe2351252b10217ccf940)), closes [#2028](https://github.com/GetJobber/atlantis/issues/2028)
+
+
+
+
+
+# [5.38.0](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-10-02)
+
+
+### Features
+
+* **deps:** Update storybook to the latest patch version (7.6.20) ([#2049](https://github.com/GetJobber/atlantis/issues/2049)) ([52b1458](https://github.com/GetJobber/atlantis/commit/52b145833ec3d5452b5d1cf5e2f536a222fc3f1f))
+
+
+
+
+
 ## [5.37.1](https://github.com/GetJobber/atlantis/compare/@jobber/[email protected]...@jobber/[email protected]) (2024-09-30)
 
 

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "5.37.1",
+  "version": "5.40.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",

packages/components/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -15,7 +15,7 @@ import {
   Theme,
   ThemeChangeDetails,
 } from "./types";
-import styles from "./AtlantisThemeContext.css";
+import styles from "./AtlantisThemeContext.module.css";
 
 export const atlantisThemeContextDefaultValues: AtlantisThemeContextValue = {
   theme: "light",

packages/components/src/Autocomplete/Autocomplete.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, forwardRef, useEffect, useRef, useState } from "react";
 import { XOR } from "ts-xor";
-import styles from "./Autocomplete.css";
+import styles from "./Autocomplete.module.css";
 import { Menu } from "./Menu";
 import { AnyOption, GroupOption, Option } from "./Option";
 import { InputText, InputTextRef } from "../InputText";

packages/components/src/Autocomplete/Menu.tsx

@@ -6,7 +6,7 @@ import { useOnKeyDown } from "@jobber/hooks/useOnKeyDown";
 import { useSafeLayoutEffect } from "@jobber/hooks/useSafeLayoutEffect";
 import { useIsMounted } from "@jobber/hooks/useIsMounted";
 import { AnyOption, Option } from "./Option";
-import styles from "./Autocomplete.css";
+import styles from "./Autocomplete.module.css";
 import { Text } from "../Text";
 import { Icon } from "../Icon";
 import { Heading } from "../Heading";

packages/components/src/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from "react";
 import classnames from "classnames";
 import { XOR } from "ts-xor";
-import styles from "./Avatar.css";
+import styles from "./Avatar.module.css";
 import { isDark } from "./utilities";
 import { Icon } from "../Icon";
 

packages/components/src/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useState } from "react";
 import classnames from "classnames";
 import { IconNames } from "@jobber/design";
 import { useResizeObserver } from "@jobber/hooks/useResizeObserver";
-import styles from "./Banner.css";
+import styles from "./Banner.module.css";
 import { BannerIcon } from "./components/BannerIcon";
 import { BannerType } from "./Banner.types";
 import { Text } from "../Text";