diff --git a/.storybook/components/ColorSwatches/index.ts b/.storybook/components/ColorSwatches/index.ts deleted file mode 100644 index a000fa8a9b..0000000000 --- a/.storybook/components/ColorSwatches/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ColorSwatches } from "./ColorSwatches"; diff --git a/.storybook/components/ColorSwatches/ColorSwatches.module.css b/.storybook/components/StorybookColorSwatches/StorybookColorSwatches.module.css similarity index 100% rename from .storybook/components/ColorSwatches/ColorSwatches.module.css rename to .storybook/components/StorybookColorSwatches/StorybookColorSwatches.module.css diff --git a/.storybook/components/ColorSwatches/ColorSwatches.module.css.d.ts b/.storybook/components/StorybookColorSwatches/StorybookColorSwatches.module.css.d.ts similarity index 100% rename from .storybook/components/ColorSwatches/ColorSwatches.module.css.d.ts rename to .storybook/components/StorybookColorSwatches/StorybookColorSwatches.module.css.d.ts diff --git a/.storybook/components/ColorSwatches/ColorSwatches.tsx b/.storybook/components/StorybookColorSwatches/StorybookColorSwatches.tsx similarity index 89% rename from .storybook/components/ColorSwatches/ColorSwatches.tsx rename to .storybook/components/StorybookColorSwatches/StorybookColorSwatches.tsx index fbe3977375..68864bf207 100644 --- a/.storybook/components/ColorSwatches/ColorSwatches.tsx +++ b/.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 ( {colors.map((color: string) => ( diff --git a/.storybook/components/StorybookColorSwatches/index.ts b/.storybook/components/StorybookColorSwatches/index.ts new file mode 100644 index 0000000000..09af4538fd --- /dev/null +++ b/.storybook/components/StorybookColorSwatches/index.ts @@ -0,0 +1 @@ +export { StorybookColorSwatches } from "./StorybookColorSwatches"; diff --git a/docs/components/Chip/Chip.stories.mdx b/docs/components/Chip/Chip.stories.mdx index 72ebb596f4..b4129e4904 100644 --- a/docs/components/Chip/Chip.stories.mdx +++ b/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 diff --git a/docs/components/Chips/Chips.stories.mdx b/docs/components/Chips/Chips.stories.mdx index d74ba6f8ee..cb9cf61473 100644 --- a/docs/components/Chips/Chips.stories.mdx +++ b/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`, ``, `` `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"; +... + + + + +``` + +#### ❌ Don't + +``` +import { Chip, Chips } from "@jobber/components"; + +... + + + ... + + +``` diff --git a/docs/components/Chips/Web.stories.tsx b/docs/components/Chips/Web.stories.tsx index 40f8528a6c..d2b10e3800 100644 --- a/docs/components/Chips/Web.stories.tsx +++ b/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 = args => { You are {selected ? selected : "_______"} - - } - label="Amazing" - value="Amazing" - /> - } - label="Wonderful" - value="Wonderful" - /> - } - label="Brilliant" - value="Brilliant" - /> + + + + @@ -97,6 +88,7 @@ const SelectionTemplate: ComponentStory = args => { return ( { setCallbackCallCount(callbackCallCount + 1); }); - return

I am the AlertMountedComponent and my callback has been called {callbackCallCount} time

; + return ( +

+ I am the AlertMountedComponent and my callback has been called{" "} + {callbackCallCount} time +

+ ); } const [shouldMount, setShouldMount] = useState(false); let component = <>; diff --git a/package-lock.json b/package-lock.json index 240fa77bc3..d62af85c1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38046,7 +38046,7 @@ }, "packages/components": { "name": "@jobber/components", - "version": "5.37.1", + "version": "5.40.2", "license": "MIT", "dependencies": { "@jobber/formatters": "^0.3.0", @@ -38120,7 +38120,7 @@ }, "packages/components-native": { "name": "@jobber/components-native", - "version": "0.72.2", + "version": "0.72.3", "license": "MIT", "dependencies": { "@react-native-clipboard/clipboard": "^1.11.2", @@ -39020,7 +39020,7 @@ }, "packages/design": { "name": "@jobber/design", - "version": "0.65.1", + "version": "0.66.0", "license": "MIT", "devDependencies": { "@rollup/plugin-commonjs": "^26.0.1", @@ -39312,7 +39312,7 @@ }, "packages/docx": { "name": "@jobber/docx", - "version": "0.3.1", + "version": "0.4.0", "license": "MIT" }, "packages/eslint-config": { diff --git a/packages/components-native/CHANGELOG.md b/packages/components-native/CHANGELOG.md index 4b00789970..7cad4a83f6 100644 --- a/packages/components-native/CHANGELOG.md +++ b/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/components-native@0.72.2...@jobber/components-native@0.72.3) (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/components-native@0.72.1...@jobber/components-native@0.72.2) (2024-09-24) **Note:** Version bump only for package @jobber/components-native diff --git a/packages/components-native/package.json b/packages/components-native/package.json index c38300d806..2050506872 100644 --- a/packages/components-native/package.json +++ b/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": { diff --git a/packages/components-native/src/Typography/Typography.tsx b/packages/components-native/src/Typography/Typography.tsx index 021d6dfd4c..73c371a2fe 100644 --- a/packages/components-native/src/Typography/Typography.tsx +++ b/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 diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5ad1733e45..4cf7ad7acd 100644 --- a/packages/components/CHANGELOG.md +++ b/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/components@5.40.1...@jobber/components@5.40.2) (2024-10-08) + +**Note:** Version bump only for package @jobber/components + + + + + +## [5.40.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@5.40.0...@jobber/components@5.40.1) (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/components@5.39.1...@jobber/components@5.40.0) (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/components@5.39.0...@jobber/components@5.39.1) (2024-10-02) + +**Note:** Version bump only for package @jobber/components + + + + + +# [5.39.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@5.38.0...@jobber/components@5.39.0) (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/components@5.37.1...@jobber/components@5.38.0) (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/components@5.37.0...@jobber/components@5.37.1) (2024-09-30) diff --git a/packages/components/package.json b/packages/components/package.json index 20a5c49c52..9f4dd24697 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/AtlantisThemeContext/AtlantisThemeContext.css b/packages/components/src/AtlantisThemeContext/AtlantisThemeContext.module.css similarity index 100% rename from packages/components/src/AtlantisThemeContext/AtlantisThemeContext.css rename to packages/components/src/AtlantisThemeContext/AtlantisThemeContext.module.css diff --git a/packages/components/src/AtlantisThemeContext/AtlantisThemeContext.css.d.ts b/packages/components/src/AtlantisThemeContext/AtlantisThemeContext.module.css.d.ts similarity index 100% rename from packages/components/src/AtlantisThemeContext/AtlantisThemeContext.css.d.ts rename to packages/components/src/AtlantisThemeContext/AtlantisThemeContext.module.css.d.ts diff --git a/packages/components/src/AtlantisThemeContext/AtlantisThemeContext.tsx b/packages/components/src/AtlantisThemeContext/AtlantisThemeContext.tsx index b7c3b67542..7cd06aa9ed 100644 --- a/packages/components/src/AtlantisThemeContext/AtlantisThemeContext.tsx +++ b/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", diff --git a/packages/components/src/Autocomplete/Autocomplete.css b/packages/components/src/Autocomplete/Autocomplete.module.css similarity index 100% rename from packages/components/src/Autocomplete/Autocomplete.css rename to packages/components/src/Autocomplete/Autocomplete.module.css diff --git a/packages/components/src/Autocomplete/Autocomplete.css.d.ts b/packages/components/src/Autocomplete/Autocomplete.module.css.d.ts similarity index 100% rename from packages/components/src/Autocomplete/Autocomplete.css.d.ts rename to packages/components/src/Autocomplete/Autocomplete.module.css.d.ts diff --git a/packages/components/src/Autocomplete/Autocomplete.tsx b/packages/components/src/Autocomplete/Autocomplete.tsx index 9ac40c8c7c..e83a18f666 100644 --- a/packages/components/src/Autocomplete/Autocomplete.tsx +++ b/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"; diff --git a/packages/components/src/Autocomplete/Menu.tsx b/packages/components/src/Autocomplete/Menu.tsx index dc45ed16cd..0ed69b8601 100644 --- a/packages/components/src/Autocomplete/Menu.tsx +++ b/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"; diff --git a/packages/components/src/Avatar/Avatar.css b/packages/components/src/Avatar/Avatar.module.css similarity index 100% rename from packages/components/src/Avatar/Avatar.css rename to packages/components/src/Avatar/Avatar.module.css diff --git a/packages/components/src/Avatar/Avatar.css.d.ts b/packages/components/src/Avatar/Avatar.module.css.d.ts similarity index 100% rename from packages/components/src/Avatar/Avatar.css.d.ts rename to packages/components/src/Avatar/Avatar.module.css.d.ts diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx index e5c238b354..77cbe0711a 100644 --- a/packages/components/src/Avatar/Avatar.tsx +++ b/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"; diff --git a/packages/components/src/Banner/Banner.css b/packages/components/src/Banner/Banner.module.css similarity index 100% rename from packages/components/src/Banner/Banner.css rename to packages/components/src/Banner/Banner.module.css diff --git a/packages/components/src/Banner/Banner.css.d.ts b/packages/components/src/Banner/Banner.module.css.d.ts similarity index 100% rename from packages/components/src/Banner/Banner.css.d.ts rename to packages/components/src/Banner/Banner.module.css.d.ts diff --git a/packages/components/src/Banner/Banner.tsx b/packages/components/src/Banner/Banner.tsx index 6c00d9dfb4..aa4bd548a9 100644 --- a/packages/components/src/Banner/Banner.tsx +++ b/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"; diff --git a/packages/components/src/Banner/components/BannerIcon/BannerIcon.css b/packages/components/src/Banner/components/BannerIcon/BannerIcon.module.css similarity index 100% rename from packages/components/src/Banner/components/BannerIcon/BannerIcon.css rename to packages/components/src/Banner/components/BannerIcon/BannerIcon.module.css diff --git a/packages/components/src/Banner/components/BannerIcon/BannerIcon.css.d.ts b/packages/components/src/Banner/components/BannerIcon/BannerIcon.module.css.d.ts similarity index 100% rename from packages/components/src/Banner/components/BannerIcon/BannerIcon.css.d.ts rename to packages/components/src/Banner/components/BannerIcon/BannerIcon.module.css.d.ts diff --git a/packages/components/src/Banner/components/BannerIcon/BannerIcon.tsx b/packages/components/src/Banner/components/BannerIcon/BannerIcon.tsx index 8d1a7a0ba3..d3fdc8999d 100644 --- a/packages/components/src/Banner/components/BannerIcon/BannerIcon.tsx +++ b/packages/components/src/Banner/components/BannerIcon/BannerIcon.tsx @@ -1,8 +1,8 @@ import React from "react"; import { IconNames } from "@jobber/design"; import classNames from "classnames"; -import iconStyles from "./BannerIcon.css"; -import bannerStyles from "../../Banner.css"; +import iconStyles from "./BannerIcon.module.css"; +import bannerStyles from "../../Banner.module.css"; import { Icon } from "../../../Icon"; import { BannerType } from "../../Banner.types"; diff --git a/packages/components/src/Box/Box.tsx b/packages/components/src/Box/Box.tsx index 49a2fdbb01..2d848373fb 100644 --- a/packages/components/src/Box/Box.tsx +++ b/packages/components/src/Box/Box.tsx @@ -14,9 +14,9 @@ import { getPaddingVars, } from "./utils/getBoxSpaces"; import type { BoxProps } from "./Box.types"; -import styles from "./styles/Box.css"; -import gapStyles from "./styles/BoxGap.css"; -import radiusStyles from "./styles/BoxRadius.css"; +import styles from "./styles/Box.module.css"; +import gapStyles from "./styles/BoxGap.module.css"; +import radiusStyles from "./styles/BoxRadius.module.css"; export function Box({ alignItems, diff --git a/packages/components/src/Box/styles/Box.css b/packages/components/src/Box/styles/Box.module.css similarity index 100% rename from packages/components/src/Box/styles/Box.css rename to packages/components/src/Box/styles/Box.module.css diff --git a/packages/components/src/Box/styles/Box.css.d.ts b/packages/components/src/Box/styles/Box.module.css.d.ts similarity index 100% rename from packages/components/src/Box/styles/Box.css.d.ts rename to packages/components/src/Box/styles/Box.module.css.d.ts diff --git a/packages/components/src/Box/styles/BoxBorder.css b/packages/components/src/Box/styles/BoxBorder.module.css similarity index 100% rename from packages/components/src/Box/styles/BoxBorder.css rename to packages/components/src/Box/styles/BoxBorder.module.css diff --git a/packages/components/src/Box/styles/BoxBorder.css.d.ts b/packages/components/src/Box/styles/BoxBorder.module.css.d.ts similarity index 100% rename from packages/components/src/Box/styles/BoxBorder.css.d.ts rename to packages/components/src/Box/styles/BoxBorder.module.css.d.ts diff --git a/packages/components/src/Box/styles/BoxDimension.css b/packages/components/src/Box/styles/BoxDimension.module.css similarity index 100% rename from packages/components/src/Box/styles/BoxDimension.css rename to packages/components/src/Box/styles/BoxDimension.module.css diff --git a/packages/components/src/Box/styles/BoxDimension.css.d.ts b/packages/components/src/Box/styles/BoxDimension.module.css.d.ts similarity index 100% rename from packages/components/src/Box/styles/BoxDimension.css.d.ts rename to packages/components/src/Box/styles/BoxDimension.module.css.d.ts diff --git a/packages/components/src/Box/styles/BoxGap.css b/packages/components/src/Box/styles/BoxGap.module.css similarity index 100% rename from packages/components/src/Box/styles/BoxGap.css rename to packages/components/src/Box/styles/BoxGap.module.css diff --git a/packages/components/src/Box/styles/BoxGap.css.d.ts b/packages/components/src/Box/styles/BoxGap.module.css.d.ts similarity index 100% rename from packages/components/src/Box/styles/BoxGap.css.d.ts rename to packages/components/src/Box/styles/BoxGap.module.css.d.ts diff --git a/packages/components/src/Box/styles/BoxMargin.css b/packages/components/src/Box/styles/BoxMargin.module.css similarity index 100% rename from packages/components/src/Box/styles/BoxMargin.css rename to packages/components/src/Box/styles/BoxMargin.module.css diff --git a/packages/components/src/Box/styles/BoxMargin.css.d.ts b/packages/components/src/Box/styles/BoxMargin.module.css.d.ts similarity index 100% rename from packages/components/src/Box/styles/BoxMargin.css.d.ts rename to packages/components/src/Box/styles/BoxMargin.module.css.d.ts diff --git a/packages/components/src/Box/styles/BoxPadding.css b/packages/components/src/Box/styles/BoxPadding.module.css similarity index 100% rename from packages/components/src/Box/styles/BoxPadding.css rename to packages/components/src/Box/styles/BoxPadding.module.css diff --git a/packages/components/src/Box/styles/BoxPadding.css.d.ts b/packages/components/src/Box/styles/BoxPadding.module.css.d.ts similarity index 100% rename from packages/components/src/Box/styles/BoxPadding.css.d.ts rename to packages/components/src/Box/styles/BoxPadding.module.css.d.ts diff --git a/packages/components/src/Box/styles/BoxRadius.css b/packages/components/src/Box/styles/BoxRadius.module.css similarity index 100% rename from packages/components/src/Box/styles/BoxRadius.css rename to packages/components/src/Box/styles/BoxRadius.module.css diff --git a/packages/components/src/Box/styles/BoxRadius.css.d.ts b/packages/components/src/Box/styles/BoxRadius.module.css.d.ts similarity index 100% rename from packages/components/src/Box/styles/BoxRadius.css.d.ts rename to packages/components/src/Box/styles/BoxRadius.module.css.d.ts diff --git a/packages/components/src/Box/utils/getBoxConfig.ts b/packages/components/src/Box/utils/getBoxConfig.ts index baa6888058..9a978d0490 100644 --- a/packages/components/src/Box/utils/getBoxConfig.ts +++ b/packages/components/src/Box/utils/getBoxConfig.ts @@ -1,5 +1,5 @@ import classnames from "classnames"; -import borderStyles from "../styles/BoxBorder.css"; +import borderStyles from "../styles/BoxBorder.module.css"; // Borders export const getBorderClassNames = (size: T) => diff --git a/packages/components/src/Box/utils/getBoxDimension.ts b/packages/components/src/Box/utils/getBoxDimension.ts index 3326a99de4..20c36df263 100644 --- a/packages/components/src/Box/utils/getBoxDimension.ts +++ b/packages/components/src/Box/utils/getBoxDimension.ts @@ -1,5 +1,5 @@ import type { BoxDimension } from "../Box.types"; -import styles from "../styles/BoxDimension.css"; +import styles from "../styles/BoxDimension.module.css"; export const getHeightClassName = (value: BoxDimension) => getClassName(value, "height"); diff --git a/packages/components/src/Box/utils/getBoxSpaces.ts b/packages/components/src/Box/utils/getBoxSpaces.ts index aceee35a42..ae60a144d3 100644 --- a/packages/components/src/Box/utils/getBoxSpaces.ts +++ b/packages/components/src/Box/utils/getBoxSpaces.ts @@ -1,7 +1,7 @@ import classNames from "classnames"; import type { BoxProps, Sizes } from "../Box.types"; -import marginStyles from "../styles/BoxMargin.css"; -import paddingStyles from "../styles/BoxPadding.css"; +import marginStyles from "../styles/BoxMargin.module.css"; +import paddingStyles from "../styles/BoxPadding.module.css"; type Size = BoxProps["padding"] | BoxProps["margin"]; diff --git a/packages/components/src/Button/Button.css b/packages/components/src/Button/Button.module.css similarity index 100% rename from packages/components/src/Button/Button.css rename to packages/components/src/Button/Button.module.css diff --git a/packages/components/src/Button/Button.css.d.ts b/packages/components/src/Button/Button.module.css.d.ts similarity index 100% rename from packages/components/src/Button/Button.css.d.ts rename to packages/components/src/Button/Button.module.css.d.ts diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx index 043dd093d4..bdc045c092 100644 --- a/packages/components/src/Button/Button.tsx +++ b/packages/components/src/Button/Button.tsx @@ -3,7 +3,7 @@ import classnames from "classnames"; import { XOR } from "ts-xor"; import { Link, LinkProps } from "react-router-dom"; import { IconNames } from "@jobber/design"; -import styles from "./Button.css"; +import styles from "./Button.module.css"; import { Icon } from "../Icon"; import { Typography } from "../Typography"; diff --git a/packages/components/src/Card/Card.css b/packages/components/src/Card/Card.module.css similarity index 100% rename from packages/components/src/Card/Card.css rename to packages/components/src/Card/Card.module.css diff --git a/packages/components/src/Card/Card.css.d.ts b/packages/components/src/Card/Card.module.css.d.ts similarity index 100% rename from packages/components/src/Card/Card.css.d.ts rename to packages/components/src/Card/Card.module.css.d.ts diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx index 041a5625ee..83696e524d 100644 --- a/packages/components/src/Card/Card.tsx +++ b/packages/components/src/Card/Card.tsx @@ -1,8 +1,8 @@ import React from "react"; import classnames from "classnames"; import { XOR } from "ts-xor"; -import styles from "./Card.css"; -import colors from "./cardcolors.css"; +import styles from "./Card.module.css"; +import colors from "./cardcolors.module.css"; import { CardClickable } from "./CardClickable"; import { CardHeader } from "./CardHeader"; import { CardProps } from "./types"; diff --git a/packages/components/src/Card/CardHeader.tsx b/packages/components/src/Card/CardHeader.tsx index 580e5e010d..2f090a952b 100644 --- a/packages/components/src/Card/CardHeader.tsx +++ b/packages/components/src/Card/CardHeader.tsx @@ -1,6 +1,6 @@ import React from "react"; import { ActionProps, CardProps } from "./types"; -import styles from "./Card.css"; +import styles from "./Card.module.css"; import { Heading } from "../Heading"; import { Button, ButtonProps } from "../Button"; import { Menu, MenuProps } from "../Menu"; diff --git a/packages/components/src/Card/cardcolors.css b/packages/components/src/Card/cardcolors.module.css similarity index 100% rename from packages/components/src/Card/cardcolors.css rename to packages/components/src/Card/cardcolors.module.css diff --git a/packages/components/src/Card/cardcolors.css.d.ts b/packages/components/src/Card/cardcolors.module.css.d.ts similarity index 100% rename from packages/components/src/Card/cardcolors.css.d.ts rename to packages/components/src/Card/cardcolors.module.css.d.ts diff --git a/packages/components/src/Card/types.ts b/packages/components/src/Card/types.ts index 866c5f1d23..81fcbc2221 100644 --- a/packages/components/src/Card/types.ts +++ b/packages/components/src/Card/types.ts @@ -1,5 +1,5 @@ import { ReactElement, ReactNode } from "react"; -import colors from "./cardcolors.css"; +import colors from "./cardcolors.module.css"; import { ButtonProps } from "../Button"; import { MenuProps } from "../Menu"; diff --git a/packages/components/src/Checkbox/Checkbox.css b/packages/components/src/Checkbox/Checkbox.module.css similarity index 100% rename from packages/components/src/Checkbox/Checkbox.css rename to packages/components/src/Checkbox/Checkbox.module.css diff --git a/packages/components/src/Checkbox/Checkbox.css.d.ts b/packages/components/src/Checkbox/Checkbox.module.css.d.ts similarity index 100% rename from packages/components/src/Checkbox/Checkbox.css.d.ts rename to packages/components/src/Checkbox/Checkbox.module.css.d.ts diff --git a/packages/components/src/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox.tsx index 95321d44e8..b92b336d8a 100644 --- a/packages/components/src/Checkbox/Checkbox.tsx +++ b/packages/components/src/Checkbox/Checkbox.tsx @@ -8,7 +8,7 @@ import React, { import classnames from "classnames"; import { XOR } from "ts-xor"; import { Controller, useForm, useFormContext } from "react-hook-form"; -import styles from "./Checkbox.css"; +import styles from "./Checkbox.module.css"; import { Icon } from "../Icon"; import { Text } from "../Text"; diff --git a/packages/components/src/Chip/Chip.css b/packages/components/src/Chip/Chip.module.css similarity index 53% rename from packages/components/src/Chip/Chip.css rename to packages/components/src/Chip/Chip.module.css index fcb088d3e4..e2f95c0b66 100644 --- a/packages/components/src/Chip/Chip.css +++ b/packages/components/src/Chip/Chip.module.css @@ -1,28 +1,39 @@ +:root { + --public-chip-base-bg-color: var(--color-surface--background); + --public-chip-base-hover-bg-color: var(--color-surface--background--hover); + --public-chip-base-content-color: var(--color-heading); +} + .chip { - --chip--gradient-color-variation: var(--chip-base-bg); - --chip--gradient-color-variation--hover: var(--chip-base--hover); + --chip-base-bg-color: var(--public-chip-base-bg-color); + --chip-base-hover-bg-color: var(--public-chip-base-hover-bg-color); + --chip-base-content-color: var(--public-chip-base-content-color); + --chip-border-color: transparent; --chip-height: 40px; --chip-radius: 20px; - --chip-base-bg: var(--color-surface--background); - --chip-base--hover: var(--color-surface--background--hover); - display: flex; + display: inline-flex; position: relative; height: var(--chip-height); min-width: 0; - padding: var(--space-small) var(--base-unit); - border: var(--border-base) solid transparent; + box-sizing: border-box; + padding: 0 var(--base-unit); + border: var(--border-base) solid var(--chip-border-color); border-radius: var(--chip-radius); color: var(--color-heading); text-align: left; + background-color: var(--chip-base-bg-color); cursor: pointer; transition: all var(--timing-base); align-items: center; } +.chip:hover, .chip:focus, .chip:focus-visible, .clickableSuffix:focus-visible { + border: var(--border-base) solid var(--chip-border-color); outline: transparent; + background-color: var(--chip-base-hover-bg-color); } .chip .clickableSuffix { @@ -81,79 +92,59 @@ background-color: var(--color-surface); } -.base { - border: var(--border-base) solid transparent; - color: var(--color-heading); - background-color: var(--chip-base-bg); - --chip--gradient-color-variation: var(--chip-base-bg); +.base, +.base p { + color: var(--chip-base-content-color); } -.base:hover, -.base:focus-visible { - background-color: var(--chip-base--hover); - --chip--gradient-color-variation--hover: var(--chip-base--hover); +.base .chipBar { + background-color: var(--chip-base-content-color); } .invalid, -.invalid:hover, -.invalid:focus-visible, -.subtle.invalid, -.subtle.invalid:hover, -.subtle.invalid:focus-visible { - border: var(--border-base) solid var(--color-critical); - background-color: var(--color-critical--surface); - --chip--gradient-color-variation: var(--color-critical--surface); - --chip--gradient-color-variation--hover: var(--color-critical--surface); +.subtle.invalid { + --chip-border-color: var(--color-critical); + --chip-base-bg-color: var(--color-critical--surface); } +/* If these change, please update InternalChip.css focus-visible rules */ .invalid:hover, .invalid:focus-visible, .subtle.invalid:hover, .subtle.invalid:focus-visible { - background-color: var(--color-surface--background--hover); - --chip--gradient-color-variation: var(--color-surface--background--hover); - --chip--gradient-color-variation--hover: var( - --color-surface--background--hover - ); + --chip-border-color: var(--color-critical); + --chip-base-hover-bg-color: var(--color-surface--background--hover); } .subtle { - border: var(--border-base) solid var(--color-border--interactive); - background-color: var(--color-surface); - --chip--gradient-color-variation: var(--color-surface); -} - -/* CAUTION: Order is important here since -* there is are different styles for subtle:focus and subtle:hover -* and we want hover to take priority -*/ - -.subtle:focus-visible { - --chip--gradient-color-variation--hover: var(--color-surface); + --chip-border-color: var(--color-border--interactive); + --chip-base-bg-color: var(--color-surface); } +/* If these change, please update InternalChip.css focus-visible rules */ +.subtle:focus-visible, .subtle:hover { - border: var(--border-base) solid var(--chip-base-bg); - background-color: var(--chip-base-bg); - --chip--gradient-color-variation--hover: var(--chip-base-bg); + --chip-border-color: var(--chip-base-bg-color); + --chip-base-hover-bg-color: var(--color-surface--background); } .invalid.disabled, .invalid.disabled:hover, .invalid.disabled:focus-visible { - background-color: var(--color-disabled--secondary); - cursor: auto; + --chip-base-bg-color: var(--color-disabled--secondary); + --chip-base-hover-bg-color: var(--color-disabled--secondary); + cursor: not-allowed; } +/* If these change, please update InternalChip.css focus-visible rules */ .disabled, .disabled:hover, .disabled:focus-visible { - border: var(--border-base) solid var(--color-disabled--secondary); + --chip-border-color: var(--color-disabled--secondary); color: var(--color-disabled); - background-color: var(--color-disabled--secondary); - cursor: auto; - --chip--gradient-color-variation: var(--color-disabled--secondary); - --chip--gradient-color-variation--hover: var(--color-disabled--secondary); + --chip-base-bg-color: var(--color-disabled--secondary); + --chip-base-hover-bg-color: var(--color-disabled--secondary); + cursor: not-allowed; } .disabled .chipBar { @@ -192,16 +183,17 @@ height: 100%; background: linear-gradient( to left, - var(--chip--gradient-color-variation) 5%, + var(--chip-base-bg-color) 5%, rgba(255, 255, 255, 0) ); + transition: all var(--timing-base); } .chip:focus-visible .truncateGradient, .chip:hover .truncateGradient { background: linear-gradient( to left, - var(--chip--gradient-color-variation--hover) 5%, + var(--chip-base-hover-bg-color) 5%, rgba(255, 255, 255, 0) ); } diff --git a/packages/components/src/Chip/Chip.css.d.ts b/packages/components/src/Chip/Chip.module.css.d.ts similarity index 100% rename from packages/components/src/Chip/Chip.css.d.ts rename to packages/components/src/Chip/Chip.module.css.d.ts diff --git a/packages/components/src/Chip/Chip.test.tsx b/packages/components/src/Chip/Chip.test.tsx index 8b05b28bdf..132afa8955 100644 --- a/packages/components/src/Chip/Chip.test.tsx +++ b/packages/components/src/Chip/Chip.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { fireEvent, render } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { Chip } from "./Chip"; -import styles from "./Chip.css"; +import styles from "./Chip.module.css"; import { Avatar } from "../Avatar"; let mockIsInView = jest.fn(() => true); @@ -49,13 +49,14 @@ describe("Chip", () => { it("should have a role of button when role not provided", () => { const { getByRole } = render(); - expect(getByRole("button")).toBeInstanceOf(HTMLButtonElement); + expect(getByRole("button")).toBeInstanceOf(HTMLDivElement); }); it("should have a tabIndex of zero if one is not provided", () => { const { getByRole } = render(); expect(getByRole("button")).toHaveAttribute("tabIndex", "0"); + expect(getByRole("button")).toBeInstanceOf(HTMLDivElement); }); it("should set aria-label if one is provided", () => { @@ -65,12 +66,6 @@ describe("Chip", () => { expect(getByRole("button")).toHaveAttribute("aria-label", "Test Label"); }); - - it("should default aria-label to provided label if not provided", () => { - const { getByRole } = render(); - - expect(getByRole("button")).toHaveAttribute("aria-label", "Test Chip"); - }); }); describe("Chip Children", () => { diff --git a/packages/components/src/Chip/Chip.tsx b/packages/components/src/Chip/Chip.tsx index 6e55418010..1633c56a7d 100644 --- a/packages/components/src/Chip/Chip.tsx +++ b/packages/components/src/Chip/Chip.tsx @@ -1,7 +1,7 @@ import React from "react"; import classnames from "classnames"; import { useInView } from "@jobber/hooks/useInView"; -import styles from "./Chip.css"; +import styles from "./Chip.module.css"; import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix"; import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix"; import { ChipProps } from "./Chip.types"; @@ -16,6 +16,7 @@ export const Chip = ({ invalid, label, value, + testID, onClick, onKeyDown, children, @@ -41,19 +42,21 @@ export const Chip = ({ label, heading, ); + const Tag = onClick ? "button" : "div"; return ( - - + ); }; diff --git a/packages/components/src/Chip/Chip.types.d.ts b/packages/components/src/Chip/Chip.types.d.ts index f6d0d66b00..ac36469bc3 100644 --- a/packages/components/src/Chip/Chip.types.d.ts +++ b/packages/components/src/Chip/Chip.types.d.ts @@ -6,6 +6,11 @@ export interface ChipProps extends PropsWithChildren { */ readonly ariaLabel?: string; + /** + * The testing id for the chip if necessary. + */ + testID?: string; + /** * Disables both mouse and keyboard functionality, and updates the visual style of the Chip to appear disabled. */ @@ -53,13 +58,15 @@ export interface ChipProps extends PropsWithChildren { */ readonly onClick?: ( value: string | number | undefined, - ev: React.MouseEvent, + ev: React.MouseEvent, ) => void; /** * Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed. */ - readonly onKeyDown?: (ev: React.KeyboardEvent) => void; + readonly onKeyDown?: ( + ev: React.KeyboardEvent, + ) => void; } export type ChipVariations = "subtle" | "base"; diff --git a/packages/components/src/Chip/components/ChipPrefix/Chip.Prefix.tsx b/packages/components/src/Chip/components/ChipPrefix/Chip.Prefix.tsx index b78e2c99fb..4a55874812 100644 --- a/packages/components/src/Chip/components/ChipPrefix/Chip.Prefix.tsx +++ b/packages/components/src/Chip/components/ChipPrefix/Chip.Prefix.tsx @@ -3,7 +3,7 @@ import classNames from "classnames"; import { Avatar } from "@jobber/components/Avatar"; import { Icon } from "@jobber/components/Icon"; import { useChildComponent } from "../../hooks/index"; -import styles from "../../Chip.css"; +import styles from "../../Chip.module.css"; export function ChipPrefix({ children }: PropsWithChildren) { const avatarOrIcon = useChildComponent( diff --git a/packages/components/src/Chip/components/ChipSelectable/ChipSelectable.tsx b/packages/components/src/Chip/components/ChipSelectable/ChipSelectable.tsx index acb524df7f..91f3f852b1 100644 --- a/packages/components/src/Chip/components/ChipSelectable/ChipSelectable.tsx +++ b/packages/components/src/Chip/components/ChipSelectable/ChipSelectable.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Icon } from "@jobber/components/Icon"; import { Chip } from "../../Chip"; import { ChipSelectableProps } from "../../Chip.types"; -import styles from "../../Chip.css"; +import styles from "../../Chip.module.css"; export function ChipSelectable({ selected, ...rest }: ChipSelectableProps) { return ( @@ -11,7 +11,7 @@ export function ChipSelectable({ selected, ...rest }: ChipSelectableProps) { diff --git a/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.test.tsx b/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.test.tsx index 192e3c384e..51961ae466 100644 --- a/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.test.tsx +++ b/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { render } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { Chip } from "../../Chip"; -import styles from "../../Chip.css"; +import styles from "../../Chip.module.css"; import { Avatar } from "../../../Avatar"; import { Icon } from "../../../Icon"; diff --git a/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.tsx b/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.tsx index 30888c00db..a4641b9ee9 100644 --- a/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.tsx +++ b/packages/components/src/Chip/components/ChipSuffix/Chip.Suffix.tsx @@ -1,8 +1,9 @@ import React, { PropsWithChildren } from "react"; import classNames from "classnames"; import { Icon } from "@jobber/components/Icon"; +import { InternalChipButton } from "@jobber/components/Chips/InternalChipButton"; import { useChildComponent } from "../../hooks"; -import styles from "../../Chip.css"; +import styles from "../../Chip.module.css"; export function ChipSuffix({ children, @@ -11,7 +12,10 @@ export function ChipSuffix({ testID, ariaLabel, }: ChipSuffixProps) { - let singleChild = useChildComponent(children, d => d.type === Icon); + let singleChild = useChildComponent( + children, + d => d.type === Icon || d.type == InternalChipButton, + ); const handleClick = ( event: @@ -26,7 +30,9 @@ export function ChipSuffix({ onClick(event); }; - if (!allowedSuffixIcons.includes(singleChild?.props?.name)) { + const iconName = singleChild?.props?.name || singleChild?.props?.icon; + + if (!allowedSuffixIcons.includes(iconName)) { singleChild = undefined; } @@ -60,4 +66,10 @@ export interface ChipSuffixProps extends PropsWithChildren { ) => void; } -export const allowedSuffixIcons = ["cross", "add", "checkmark", "arrowDown"]; +export const allowedSuffixIcons = [ + "cross", + "add", + "checkmark", + "remove", + "arrowDown", +]; diff --git a/packages/components/src/Chips/ChipsTypes.tsx b/packages/components/src/Chips/ChipsTypes.tsx index 69cabc3fb0..a16232d313 100644 --- a/packages/components/src/Chips/ChipsTypes.tsx +++ b/packages/components/src/Chips/ChipsTypes.tsx @@ -1,5 +1,4 @@ import { MouseEvent, ReactElement } from "react"; -import { XOR } from "ts-xor"; import { ChipProps } from "./Chip"; interface ChipFoundationProps { @@ -38,6 +37,11 @@ interface ChipFoundationProps { export interface ChipSingleSelectProps extends ChipFoundationProps { readonly type?: "singleselect"; readonly selected?: string; + /** + * Show the checkmark suffix on the selected Chip(s) + * defaults to true + */ + readonly showSelectedSuffix?: boolean; onChange(value?: string): void; /** @@ -51,6 +55,11 @@ export interface ChipSingleSelectProps extends ChipFoundationProps { export interface ChipMultiSelectProps extends ChipFoundationProps { readonly type: "multiselect"; readonly selected: string[]; + /** + * Show the checkmark suffix on the selected Chip(s) + * defaults to true + */ + readonly showSelectedSuffix?: boolean; onChange(value: string[]): void; } @@ -96,7 +105,6 @@ export interface ChipDismissibleProps extends ChipFoundationProps { onLoadMore?(searchValue: string): void; } -export type ChipsProps = XOR< - ChipSingleSelectProps, - XOR ->; +export type ChipsProps = + | ChipSingleSelectProps + | (ChipMultiSelectProps | ChipDismissibleProps); diff --git a/packages/components/src/Chips/InternalChip.css b/packages/components/src/Chips/InternalChip.css deleted file mode 100644 index fae9f28489..0000000000 --- a/packages/components/src/Chips/InternalChip.css +++ /dev/null @@ -1,157 +0,0 @@ -/** - * Used in the wrapping chips component: - * - InternalChipSingleSelect - * - InternalChipMultiSelect - */ - -.wrapper { - display: flex; - gap: var(--space-small); - flex-wrap: wrap; - align-items: center; -} - -.chip { - display: inline-grid; - position: relative; - max-width: 100%; - box-sizing: border-box; - padding: var(--space-small); - border: var(--border-base) solid var(--color-border--interactive); - border-radius: var(--radius-larger); - color: var(--color-text--secondary); - text-align: left; - vertical-align: middle; - background-color: var(--color-surface); - transition: var(--timing-base) ease-in-out; - transition-property: background-color, box-shadow, color; - grid-template-columns: max-content; - align-items: center; - gap: var(--space-small); -} - -.hasPrefix, -.hasSuffix { - padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small); -} - -.hasPrefix { - grid-template-columns: min-content 1fr; -} - -.hasSuffix { - grid-template-columns: 1fr min-content; -} - -.hasPrefix.hasSuffix { - grid-template-columns: min-content 1fr min-content; -} - -.clickable, -.input ~ .chip { - box-shadow: var(--shadow-base); - cursor: pointer; - appearance: none; -} - -/** - * Interaction - */ - -.chip:focus, -.input:focus ~ .chip { - box-shadow: var(--shadow-focus); - outline: none; -} - -.clickable:hover, -.input ~ .chip:not(.active):hover, -.input:focus ~ .chip:not(.active) { - background-color: var(--color-surface--hover); -} - -/** - * States - */ - -.chip.active { - border-color: var(--color-surface--reverse); - color: var(--color-text--reverse); - background-color: var(--color-surface--reverse); -} - -.chip.invalid { - border-color: var(--color-critical--onSurface); - color: var(--color-critical--onSurface); - background-color: var(--color-critical--surface); -} - -.chip.disabled { - border-color: var(--color-disabled--secondary); - color: var(--color-disabled); - background-color: var(--color-disabled--secondary); -} - -.active.disabled { - border-color: var(--color-disabled); - color: var(--color-white); - background-color: var(--color-disabled); -} - -.invalid.disabled { - border-color: var(--color-critical); -} - -/** - * Input checkbox/radio - * - * Hide checkbox on UI but not screen readers and still allow focus state - */ - -.input { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0 0 0 0); - clip-path: inset(100%); - white-space: nowrap; -} - -/** - * Button - */ - -.button { - display: flex; - border-radius: var(--radius-base); - cursor: pointer; - transition: background-color 200ms ease; -} - -.button:hover, -.button:focus { - background-color: var(--color-surface--hover); -} - -.button:focus, -.clickable .button:hover { - box-shadow: var(--shadow-focus); - outline: none; -} - -/** - * Override icon default colors. - * - * NOTE: This is a workaround since some icons have default colors that we don't - * want to override until the component color prop overrides it. - * DO NOT COPY! - */ - -.icon > svg { - fill: var(--color-interactive--subtle); -} - -.icon { - display: flex; -} diff --git a/packages/components/src/Chips/InternalChip.module.css b/packages/components/src/Chips/InternalChip.module.css new file mode 100644 index 0000000000..9e69d77b29 --- /dev/null +++ b/packages/components/src/Chips/InternalChip.module.css @@ -0,0 +1,94 @@ +/** + * Used in the wrapping chips component: + * - InternalChipSingleSelect + * - InternalChipMultiSelect + */ + +.wrapper { + display: flex; + gap: var(--space-small); + flex-wrap: wrap; + align-items: center; +} + +/** + * Interaction + * + * NOTE: + * Since the Chip component is not being focused, rather it's the input + * We are copying the styles from the Chip component to ensure the same experience + */ + +.input:focus-visible ~ div[role="option"], +.input:focus-visible ~ div[role="button"] { + box-shadow: var(--shadow-focus); + outline: none; +} + +.input.inactive:focus-visible ~ div[role="option"], +.input.inactive:focus-visible ~ div[role="button"] { + background-color: var(--color-surface--background); +} + +.input.invalid:focus-visible ~ div[role="option"], +.input.invalid:focus-visible ~ div[role="button"] { + background-color: var(--color-surface--background--hover); +} + +.input.disabled:focus-visible ~ div[role="option"], +.input.disabled:focus-visible ~ div[role="button"] { + background-color: var(--color-disabled--secondary); +} + +/** + * Input checkbox/radio + * + * Hide checkbox on UI but not screen readers and still allow focus state + */ + +.input { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + clip-path: inset(100%); + white-space: nowrap; +} + +/** + * Button + */ + +.button { + display: flex; + border-radius: var(--radius-base); + cursor: pointer; + transition: background-color 200ms ease; +} + +.button:hover, +.button:focus { + background-color: var(--color-surface--hover); +} + +.button:focus { + box-shadow: var(--shadow-focus); + outline: none; +} + +/** + * Override icon default colors. + * + * NOTE: This is a workaround since some icons have default colors that we don't + * want to override until the component color prop overrides it. + * DO NOT COPY! + */ + +.icon > svg { + fill: var(--color-interactive--subtle); +} + +.icon { + display: flex; +} diff --git a/packages/components/src/Chips/InternalChip.css.d.ts b/packages/components/src/Chips/InternalChip.module.css.d.ts similarity index 59% rename from packages/components/src/Chips/InternalChip.css.d.ts rename to packages/components/src/Chips/InternalChip.module.css.d.ts index d127c62f85..deda9c5b74 100644 --- a/packages/components/src/Chips/InternalChip.css.d.ts +++ b/packages/components/src/Chips/InternalChip.module.css.d.ts @@ -1,11 +1,7 @@ declare const styles: { readonly "wrapper": string; - readonly "chip": string; - readonly "hasPrefix": string; - readonly "hasSuffix": string; - readonly "clickable": string; readonly "input": string; - readonly "active": string; + readonly "inactive": string; readonly "invalid": string; readonly "disabled": string; readonly "button": string; diff --git a/packages/components/src/Chips/InternalChip.tsx b/packages/components/src/Chips/InternalChip.tsx index d4e93bc20f..6fd5b8aa3d 100644 --- a/packages/components/src/Chips/InternalChip.tsx +++ b/packages/components/src/Chips/InternalChip.tsx @@ -1,10 +1,6 @@ -import React, { useState } from "react"; -import classnames from "classnames"; -import styles from "./InternalChip.css"; +import React from "react"; import { InternalChipProps } from "./ChipTypes"; -import { InternalChipAffix } from "./InternalChipAffix"; -import { Typography } from "../Typography"; -import { Tooltip } from "../Tooltip"; +import { Chip } from "../Chip"; export function InternalChip({ label, @@ -18,43 +14,21 @@ export function InternalChip({ onClick, onKeyDown, }: InternalChipProps) { - const [truncateRef, setTruncateRef] = useState(); - const isClickable = onClick && !disabled; - const classNames = classnames(styles.chip, { - [styles.clickable]: isClickable, - [styles.active]: active, - [styles.disabled]: disabled, - [styles.invalid]: invalid, - [styles.hasPrefix]: prefix, - [styles.hasSuffix]: suffix, - }); - const affixProps = { active, invalid, disabled }; - const Tag = onClick ? "button" : "div"; - - const chip = ( - onClick(ev) : undefined} + label={label} > - - - {label} - - - + {prefix && {prefix}} + {suffix && {suffix}} + ); - - return isTruncated() ? {chip} : chip; - - function isTruncated() { - const truncateParentHeight = truncateRef?.parentElement?.offsetHeight || 0; - const truncateChildHeight = truncateRef?.offsetHeight || 0; - - return truncateChildHeight >= truncateParentHeight * 2; - } } diff --git a/packages/components/src/Chips/InternalChipAffix.tsx b/packages/components/src/Chips/InternalChipAffix.tsx index 80478c9414..99d300eae1 100644 --- a/packages/components/src/Chips/InternalChipAffix.tsx +++ b/packages/components/src/Chips/InternalChipAffix.tsx @@ -1,7 +1,7 @@ import React, { ReactElement } from "react"; import { useAssert } from "@jobber/hooks/useAssert"; import { ChipButtonProps, InternalChipButton } from "./InternalChipButton"; -import styles from "./InternalChip.css"; +import styles from "./InternalChip.module.css"; import { InternalChipProps } from "./ChipTypes"; import { Avatar, AvatarProps } from "../Avatar"; import { Icon, IconProps } from "../Icon"; diff --git a/packages/components/src/Chips/InternalChipButton.tsx b/packages/components/src/Chips/InternalChipButton.tsx index ec14caeb37..4d78323569 100644 --- a/packages/components/src/Chips/InternalChipButton.tsx +++ b/packages/components/src/Chips/InternalChipButton.tsx @@ -5,7 +5,7 @@ import React, { useRef, } from "react"; import { IconNames } from "@jobber/design"; -import styles from "./InternalChip.css"; +import styles from "./InternalChip.module.css"; import { Icon } from "../Icon"; export interface ChipButtonProps { @@ -39,7 +39,7 @@ export function InternalChipButton({ aria-disabled={disabled} data-testid="remove-chip-button" > - + ); @@ -64,7 +64,7 @@ export function InternalChipButton({ if (disabled) return "disabled"; if (invalid) return "critical"; - return "greyBlue"; + return "interactiveSubtle"; } function handleClick(event: MouseEvent) { diff --git a/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.css b/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.module.css similarity index 100% rename from packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.css rename to packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.module.css diff --git a/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.css.d.ts b/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.module.css.d.ts similarity index 100% rename from packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.css.d.ts rename to packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.module.css.d.ts diff --git a/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.tsx b/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.tsx index 1661cf085d..9a988f045e 100644 --- a/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.tsx +++ b/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissible.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./InternalChipDismissible.css"; +import styles from "./InternalChipDismissible.module.css"; import { useInternalChipDismissible } from "./hooks"; import { InternalChipDismissibleInput } from "./InternalChipDismissibleInput"; import { InternalChipDismissibleProps } from "./InternalChipDismissibleTypes"; diff --git a/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissibleInput.tsx b/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissibleInput.tsx index 039dd5fa78..05f2e427a9 100644 --- a/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissibleInput.tsx +++ b/packages/components/src/Chips/InternalChipDismissible/InternalChipDismissibleInput.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import debounce from "lodash/debounce"; import classNames from "classnames"; -import styles from "./InternalChipDismissible.css"; +import styles from "./InternalChipDismissible.module.css"; import { ChipDismissibleInputProps } from "./InternalChipDismissibleTypes"; import { useInView, diff --git a/packages/components/src/Chips/InternalChipDismissible/__tests__/InternalChipDismissible.test.tsx b/packages/components/src/Chips/InternalChipDismissible/__tests__/InternalChipDismissible.test.tsx index ebb4e0355a..c5c4e63b79 100644 --- a/packages/components/src/Chips/InternalChipDismissible/__tests__/InternalChipDismissible.test.tsx +++ b/packages/components/src/Chips/InternalChipDismissible/__tests__/InternalChipDismissible.test.tsx @@ -162,7 +162,7 @@ describe("Basic interaction", () => { describe("left and right arrow keys via keyboard", () => { it("should focus on the correct element when left or right arrow down", async () => { - const chipWrappers = screen.getAllByTestId("chip-wrapper"); + const chipWrappers = screen.getAllByTestId("ATL-InternalChip"); const first = chipWrappers[0]; await userEvent.tab(); diff --git a/packages/components/src/Chips/InternalChipMultiSelect.tsx b/packages/components/src/Chips/InternalChipMultiSelect.tsx index 4a73441546..eb2d92f355 100644 --- a/packages/components/src/Chips/InternalChipMultiSelect.tsx +++ b/packages/components/src/Chips/InternalChipMultiSelect.tsx @@ -1,31 +1,41 @@ import React, { MouseEvent } from "react"; -import styles from "./InternalChip.css"; +import classNames from "classnames"; +import styles from "./InternalChip.module.css"; import { InternalChip } from "./InternalChip"; import { ChipMultiSelectProps } from "./ChipsTypes"; -import { Icon } from "../Icon"; +import { useInternalChips } from "./hooks/useInternalChip"; type InternalChipChoiceMultipleProps = Pick< ChipMultiSelectProps, - "selected" | "onChange" | "children" | "onClick" + "selected" | "onChange" | "children" | "onClick" | "showSelectedSuffix" >; export function InternalChipMultiSelect({ children, selected, + showSelectedSuffix = true, onChange, onClick, }: InternalChipChoiceMultipleProps) { + const { getSuffixProps } = useInternalChips(); + return (
{React.Children.map(children, chip => { const isChipActive = isChipSelected(chip.props.value); + const suffixProps = getSuffixProps(isChipActive, showSelectedSuffix); + const classes = classNames(styles.input, { + [styles.disabled]: chip.props.disabled, + [styles.invalid]: chip.props.invalid, + [styles.inactive]: !isChipActive, + }); return ( ); @@ -69,15 +80,4 @@ export function InternalChipMultiSelect({ const newVal = values.filter(val => val !== value); onChange(newVal); } - - function checkmarkIcon(show: boolean) { - // Ideally, we should be returning a fragment `<>` when a function - // returns a component / element. However, this one needs to return nothing - // to prevent it from randomly rendering a suffix. - // - // DO NOT COPY! - if (!show) return; - - return ; - } } diff --git a/packages/components/src/Chips/InternalChipSingleSelect.tsx b/packages/components/src/Chips/InternalChipSingleSelect.tsx index 2d29667748..fe216e5f3f 100644 --- a/packages/components/src/Chips/InternalChipSingleSelect.tsx +++ b/packages/components/src/Chips/InternalChipSingleSelect.tsx @@ -1,31 +1,47 @@ import React, { KeyboardEvent, MouseEvent, useId } from "react"; -import styles from "./InternalChip.css"; +import classNames from "classnames"; +import styles from "./InternalChip.module.css"; import { InternalChip } from "./InternalChip"; import { ChipSingleSelectProps } from "./ChipsTypes"; +import { useInternalChips } from "./hooks/useInternalChip"; type InternalChipChoiceProps = Pick< ChipSingleSelectProps, - "selected" | "onChange" | "children" | "onClick" | "name" + | "selected" + | "onChange" + | "children" + | "onClick" + | "name" + | "showSelectedSuffix" >; export function InternalChipSingleSelect({ children, selected, name = useId(), + showSelectedSuffix = true, onChange, onClick, }: InternalChipChoiceProps) { + const { getSuffixProps } = useInternalChips(); + return (
{React.Children.map(children, child => { const isSelected = child.props.value === selected; + const suffixProps = getSuffixProps(isSelected, showSelectedSuffix); + const classes = classNames(styles.input, { + [styles.disabled]: child.props.disabled, + [styles.invalid]: child.props.invalid, + [styles.inactive]: !isSelected, + }); return ( ); })} diff --git a/packages/components/src/Chips/hooks/useInternalChip.tsx b/packages/components/src/Chips/hooks/useInternalChip.tsx new file mode 100644 index 0000000000..7184cd2dc7 --- /dev/null +++ b/packages/components/src/Chips/hooks/useInternalChip.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Icon } from "@jobber/components/Icon"; + +interface UseInternalChips { + getSuffixProps: ( + isChipActive: boolean, + showSelectedSuffix: boolean, + ) => Record; +} + +const getSuffixProps = (isChipActive: boolean, showSelectedSuffix: boolean) => { + if (isChipActive) { + return showSelectedSuffix + ? { + suffix: ( + + ), + } + : {}; + } + + return {}; +}; + +export function useInternalChips(): UseInternalChips { + return { + getSuffixProps, + }; +} diff --git a/packages/components/src/Chips/tests/InternalChip.test.tsx b/packages/components/src/Chips/tests/InternalChip.test.tsx index 0db9dc67cf..8087c587e0 100644 --- a/packages/components/src/Chips/tests/InternalChip.test.tsx +++ b/packages/components/src/Chips/tests/InternalChip.test.tsx @@ -6,49 +6,27 @@ import { Icon } from "../../Icon"; it("should render a div chip when onClick is not present", () => { render(); - expect(screen.getByTestId("chip-wrapper")).toBeInstanceOf(HTMLDivElement); + expect(screen.getByTestId("ATL-InternalChip")).toBeInstanceOf(HTMLDivElement); }); it("should render a button chip when onClick is not present", () => { render(); - expect(screen.getByTestId("chip-wrapper")).toBeInstanceOf(HTMLButtonElement); + expect(screen.getByTestId("ATL-InternalChip")).toBeInstanceOf( + HTMLButtonElement, + ); }); it("should fire the callback when it's clicked", async () => { const handleClick = jest.fn(); render(); - await userEvent.click(screen.getByTestId("chip-wrapper")); + await userEvent.click(screen.getByTestId("ATL-InternalChip")); expect(handleClick).toHaveBeenCalledTimes(1); }); describe("Chip icon colors depending on state", () => { - it("should be red when it's invalid", () => { - expect(mockChip({ invalid: true })).toHaveStyle({ - fill: "var(--color-critical)", - }); - }); - - it("should be red when it's invalid and active", () => { - expect(mockChip({ invalid: true, active: true })).toHaveStyle({ - fill: "var(--color-critical)", - }); - }); - - it("should be grey when it's disabled", () => { - expect(mockChip({ disabled: true })).toHaveStyle({ - fill: "var(--color-disabled)", - }); - }); - - it("should be grey when it's disabled and invalid", () => { - expect(mockChip({ disabled: true, invalid: true })).toHaveStyle({ - fill: "var(--color-disabled)", - }); - }); - - it("should be white when it's active", () => { + it("should be green when it's active", () => { expect(mockChip({ active: true })).toHaveStyle({ - fill: "var(--color-white)", + fill: "var(--color-success)", }); }); @@ -63,37 +41,16 @@ describe("Chip icon colors depending on state", () => { disabled = false, active = false, }: MockChipProps) { - render( + const { getByTestId } = render( } + prefix={} label="Yo!" />, ); - return screen.getByTestId("checkbox").querySelector("path"); + return getByTestId("checkmark").querySelector("path"); } }); - -// TODO: Figure out why this is always passing - -describe.skip("When the chip is disabled and invalid", () => { - it("should still look disabled but have a border of red", () => { - render(); - expect(screen.getByTestId("chip-wrapper")).toHaveStyle({ - borderColor: "var(--color-critical)", - backgroundColor: "var(--color-disabled--secondary)", - }); - }); -}); - -describe.skip("When the chip is disabled and active", () => { - it("should be a darker chip but still grey", async () => { - render(); - expect(screen.getByTestId("chip-wrapper")).toHaveStyle(` - background-color: var(--color-disabled); - `); - }); -}); diff --git a/packages/components/src/Chips/tests/InternalChipMultiSelect.test.tsx b/packages/components/src/Chips/tests/InternalChipMultiSelect.test.tsx index 06a3718b33..eef5e1800c 100644 --- a/packages/components/src/Chips/tests/InternalChipMultiSelect.test.tsx +++ b/packages/components/src/Chips/tests/InternalChipMultiSelect.test.tsx @@ -9,57 +9,82 @@ let handleClickChip: jest.Mock; const chips = ["Amazing", "Fabulous", "Magical"]; const selectedChips = ["Amazing"]; -beforeEach(() => { - handleChange = jest.fn(value => value); - handleClickChip = jest.fn((_, value) => value); +describe("with showSelectedSuffix true", () => { + beforeEach(() => { + handleChange = jest.fn(value => value); + handleClickChip = jest.fn((_, value) => value); - render( - - {chips.map(chip => ( - - ))} - , - ); -}); + renderInternalChipMultiSelect(handleChange, handleClickChip); + }); -it("should have a label and a checkbox", () => { - const component = screen.getByTestId("multiselect-chips"); - expect(component.querySelectorAll("label")).toHaveLength(chips.length); - expect(component.querySelectorAll("input[type=checkbox]")).toHaveLength( - chips.length, - ); -}); + it("should have a label and a checkbox", () => { + const component = screen.getByTestId("multiselect-chips"); + expect(component.querySelectorAll("label")).toHaveLength(chips.length); + expect(component.querySelectorAll("input[type=checkbox]")).toHaveLength( + chips.length, + ); + expect(screen.getByTestId("checkmark")).toBeInTheDocument(); + }); -it("should show a checkmark on the selected chip", () => { - expect(screen.queryAllByTestId("checkmark")).toHaveLength( - selectedChips.length, - ); -}); + it("should show a checkmark on the selected chip", () => { + expect(screen.queryAllByTestId("checkmark")).toHaveLength( + selectedChips.length, + ); + }); + + describe("onChange", () => { + it("should trigger the onChange selecting a chip", async () => { + const target = chips[1]; + await userEvent.click(screen.getByLabelText(target)); + expect(handleChange).toHaveBeenCalledTimes(1); + expect(handleChange).toHaveReturnedWith([...selectedChips, target]); + }); -describe("onChange", () => { - it("should trigger the onChange selecting a chip", async () => { - const target = chips[1]; - await userEvent.click(screen.getByLabelText(target)); - expect(handleChange).toHaveBeenCalledTimes(1); - expect(handleChange).toHaveReturnedWith([...selectedChips, target]); + it("should trigger the onChange deselecting a chip", async () => { + await userEvent.click(screen.getByLabelText(selectedChips[0])); + expect(handleChange).toHaveBeenCalledTimes(1); + expect(handleChange).toHaveReturnedWith([]); + }); }); - it("should trigger the onChange deselecting a chip", async () => { - await userEvent.click(screen.getByLabelText(selectedChips[0])); - expect(handleChange).toHaveBeenCalledTimes(1); - expect(handleChange).toHaveReturnedWith([]); + describe("onClick", () => { + it("should trigger the chip onClick", async () => { + const target = chips[2]; + await userEvent.click(screen.getByLabelText(target)); + expect(handleClickChip).toHaveBeenCalledTimes(1); + expect(handleClickChip).toHaveReturnedWith(target); + }); }); }); -describe("onClick", () => { - it("should trigger the chip onClick", async () => { - const target = chips[2]; - await userEvent.click(screen.getByLabelText(target)); - expect(handleClickChip).toHaveBeenCalledTimes(1); - expect(handleClickChip).toHaveReturnedWith(target); +describe("with showSelectedSuffix false", () => { + beforeEach(() => { + handleChange = jest.fn(value => value); + handleClickChip = jest.fn((_, value) => value); + + renderInternalChipMultiSelect(handleChange, handleClickChip, false); + }); + + it("should not show the checkmark", () => { + expect(screen.queryByTestId("checkmark")).toBeNull(); }); }); + +function renderInternalChipMultiSelect( + changeHandler: jest.Mock, + clickHandler: jest.Mock, + showSelectedSuffix?: boolean, +) { + return render( + + {chips.map(chip => ( + + ))} + , + ); +} diff --git a/packages/components/src/Chips/tests/InternalChipSingleSelect.test.tsx b/packages/components/src/Chips/tests/InternalChipSingleSelect.test.tsx index 4f962ca2d2..b6b3dfb71b 100644 --- a/packages/components/src/Chips/tests/InternalChipSingleSelect.test.tsx +++ b/packages/components/src/Chips/tests/InternalChipSingleSelect.test.tsx @@ -15,66 +15,95 @@ let handleClickChip: jest.Mock; const chips = ["Amazing", "Fabulous", "Magical"]; const selectedChip = "Amazing"; -beforeEach(() => { - handleChange = jest.fn(value => value); - handleClickChip = jest.fn((_, value) => value); +describe("with showSelectedSuffix true", () => { + beforeEach(() => { + handleChange = jest.fn(value => value); + handleClickChip = jest.fn((_, value) => value); - render( - - {chips.map(chip => ( - - ))} - , - ); -}); - -it("should have a label and a checkbox", () => { - const component = screen.getByTestId("singleselect-chips"); - expect(component.querySelectorAll("label")).toHaveLength(chips.length); - expect(component.querySelectorAll("input[type=radio]")).toHaveLength( - chips.length, - ); -}); - -describe("onChange", () => { - it("should trigger the onChange selecting a chip", async () => { - const target = chips[1]; - await userEvent.click(screen.getByLabelText(target)); - expect(handleChange).toHaveBeenCalledTimes(1); - expect(handleChange).toHaveReturnedWith(target); + renderInternalChipSingleSelect(handleChange, handleClickChip); }); - it("should trigger the onChange deselecting a chip", async () => { - await userEvent.click(screen.getByLabelText(selectedChip)); - expect(handleChange).toHaveBeenCalledTimes(1); - expect(handleChange).toHaveReturnedWith(undefined); + it("should have a label and a checkbox", () => { + const component = screen.getByTestId("singleselect-chips"); + expect(component.querySelectorAll("label")).toHaveLength(chips.length); + expect(component.querySelectorAll("input[type=radio]")).toHaveLength( + chips.length, + ); }); -}); -describe("onClick", () => { - it("should trigger the chip onClick", async () => { - const target = chips[2]; - await userEvent.click(screen.getByLabelText(target)); - expect(handleClickChip).toHaveBeenCalledTimes(1); - expect(handleClickChip).toHaveReturnedWith(target); + it("should have a checkmark on the selected chip", () => { + expect(screen.queryAllByTestId("checkmark")).toHaveLength(1); }); -}); -describe("On space bar press", () => { - it("should deselect the selected chip", async () => { - const element = within( - screen.getByLabelText(selectedChip).closest("label"), - ).getByRole("radio"); - fireEvent.keyUp(element, { key: " " }); + describe("onChange", () => { + it("should trigger the onChange selecting a chip", async () => { + const target = chips[1]; + await userEvent.click(screen.getByLabelText(target)); + expect(handleChange).toHaveBeenCalledTimes(1); + expect(handleChange).toHaveReturnedWith(target); + }); - // Wait for next tick - await waitFor(() => { + it("should trigger the onChange deselecting a chip", async () => { + await userEvent.click(screen.getByLabelText(selectedChip)); expect(handleChange).toHaveBeenCalledTimes(1); expect(handleChange).toHaveReturnedWith(undefined); }); }); + + describe("onClick", () => { + it("should trigger the chip onClick", async () => { + const target = chips[2]; + await userEvent.click(screen.getByLabelText(target)); + expect(handleClickChip).toHaveBeenCalledTimes(1); + expect(handleClickChip).toHaveReturnedWith(target); + }); + }); + + describe("On space bar press", () => { + it("should deselect the selected chip", async () => { + const element = within( + screen.getByLabelText(selectedChip).closest("label"), + ).getByRole("radio"); + fireEvent.keyUp(element, { key: " " }); + + // Wait for next tick + await waitFor(() => { + expect(handleChange).toHaveBeenCalledTimes(1); + expect(handleChange).toHaveReturnedWith(undefined); + }); + }); + }); +}); + +describe("with showSelectedSuffix false", () => { + beforeEach(() => { + handleChange = jest.fn(value => value); + handleClickChip = jest.fn((_, value) => value); + + renderInternalChipSingleSelect(handleChange, handleClickChip, false); + }); + + it("should not render the suffix icon", () => { + screen.logTestingPlaygroundURL(); + expect(screen.queryByTestId("checkmark")).toBeNull(); + }); }); + +function renderInternalChipSingleSelect( + changeHandler: jest.Mock, + clickHandler: jest.Mock, + showSelectedSuffix?: boolean, +) { + return render( + + {chips.map(chip => ( + + ))} + , + ); +} diff --git a/packages/components/src/Combobox/Combobox.css b/packages/components/src/Combobox/Combobox.module.css similarity index 100% rename from packages/components/src/Combobox/Combobox.css rename to packages/components/src/Combobox/Combobox.module.css diff --git a/packages/components/src/Combobox/Combobox.css.d.ts b/packages/components/src/Combobox/Combobox.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/Combobox.css.d.ts rename to packages/components/src/Combobox/Combobox.module.css.d.ts diff --git a/packages/components/src/Combobox/Combobox.tsx b/packages/components/src/Combobox/Combobox.tsx index ce63809211..6cbbe15e69 100644 --- a/packages/components/src/Combobox/Combobox.tsx +++ b/packages/components/src/Combobox/Combobox.tsx @@ -5,7 +5,7 @@ import { ComboboxAction } from "./components/ComboboxAction"; import { ComboboxContextProvider } from "./ComboboxProvider"; import { ComboboxTrigger } from "./components/ComboboxTrigger"; import { ComboboxOption as ComboboxOptionComponent } from "./components/ComboboxOption/ComboboxOption"; -import styles from "./Combobox.css"; +import styles from "./Combobox.module.css"; import { useCombobox } from "./hooks/useCombobox"; import { ComboboxActivator } from "./components/ComboboxActivator"; import { useComboboxValidation } from "./hooks/useComboboxValidation"; diff --git a/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.css b/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.module.css similarity index 100% rename from packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.css rename to packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.module.css diff --git a/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.css.d.ts b/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.css.d.ts rename to packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.module.css.d.ts diff --git a/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.tsx b/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.tsx index e84508c00f..461ab30daa 100644 --- a/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.tsx +++ b/packages/components/src/Combobox/components/ComboboxAction/ComboboxAction.tsx @@ -1,5 +1,5 @@ import React, { useContext } from "react"; -import styles from "./ComboboxAction.css"; +import styles from "./ComboboxAction.module.css"; import { Typography } from "../../../Typography"; import { ComboboxActionProps } from "../../Combobox.types"; import { ComboboxContext } from "../../ComboboxProvider"; diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.css b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.module.css similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.css rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.module.css diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.css.d.ts b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.css.d.ts rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.module.css.d.ts diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.tsx b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.tsx index c045c2364e..dfa84b9206 100644 --- a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.tsx +++ b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContent.tsx @@ -1,7 +1,7 @@ import React from "react"; import classnames from "classnames"; import ReactDOM from "react-dom"; -import styles from "./ComboboxContent.css"; +import styles from "./ComboboxContent.module.css"; import { ComboboxContentSearch } from "./ComboboxContentSearch"; import { ComboboxContentList } from "./ComboboxContentList"; import { ComboboxContentHeader } from "./ComboboxContentHeader"; diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.css b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.module.css similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.css rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.module.css diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.css.d.ts b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.css.d.ts rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.module.css.d.ts diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.tsx b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.tsx index 91a27d1329..c9899447bd 100644 --- a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.tsx +++ b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Typography } from "@jobber/components/Typography"; import { Button } from "@jobber/components/Button"; -import styles from "./ComboboxContentHeader.css"; +import styles from "./ComboboxContentHeader.module.css"; import { ComboboxHeaderProps } from "../../../Combobox.types"; export function ComboboxContentHeader(props: ComboboxHeaderProps): JSX.Element { diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.css b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.module.css similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.css rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.module.css diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.css.d.ts b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.css.d.ts rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.module.css.d.ts diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.tsx b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.tsx index f1d339d7d0..9f7c0c8e9e 100644 --- a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.tsx +++ b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.tsx @@ -4,7 +4,7 @@ import { Text } from "@jobber/components/Text"; import { Glimmer } from "@jobber/components/Glimmer"; import { Spinner } from "@jobber/components/Spinner"; import { AnimatedPresence } from "@jobber/components/AnimatedPresence"; -import styles from "./ComboboxContentList.css"; +import styles from "./ComboboxContentList.module.css"; import { ComboboxListProps, ComboboxOption as ComboboxOptionType, diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.css b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.module.css similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.css rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.module.css diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.css.d.ts b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.css.d.ts rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.module.css.d.ts diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.tsx b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.tsx index c73e225c39..62c5e6716e 100644 --- a/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.tsx +++ b/packages/components/src/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from "react"; import { Icon } from "@jobber/components/Icon"; -import styles from "./ComboboxContentSearch.css"; +import styles from "./ComboboxContentSearch.module.css"; import { ComboboxSearchProps } from "../../../Combobox.types"; export function ComboboxContentSearch(props: ComboboxSearchProps): JSX.Element { diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.css b/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.module.css similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.css rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.module.css diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.css.d.ts b/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.css.d.ts rename to packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.module.css.d.ts diff --git a/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.tsx b/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.tsx index a103c51077..4699443670 100644 --- a/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.tsx +++ b/packages/components/src/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { useInView } from "@jobber/hooks/useInView"; -import styles from "./ComboboxLoadMore.css"; +import styles from "./ComboboxLoadMore.module.css"; interface ComboboxLoadMoreProps { readonly onLoadMore: () => void; diff --git a/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.css b/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.module.css similarity index 100% rename from packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.css rename to packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.module.css diff --git a/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.css.d.ts b/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.module.css.d.ts similarity index 100% rename from packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.css.d.ts rename to packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.module.css.d.ts diff --git a/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.tsx b/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.tsx index 5958ad9d6d..eba555581e 100644 --- a/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.tsx +++ b/packages/components/src/Combobox/components/ComboboxOption/ComboboxOption.tsx @@ -2,7 +2,7 @@ import React, { useContext } from "react"; import classnames from "classnames"; import { Icon } from "@jobber/components/Icon"; import { Flex } from "@jobber/components/Flex"; -import styles from "./ComboboxOption.css"; +import styles from "./ComboboxOption.module.css"; import { ComboboxContext } from "../../ComboboxProvider"; export interface ComboboxOptionProps { diff --git a/packages/components/src/Content/Content.css b/packages/components/src/Content/Content.module.css similarity index 100% rename from packages/components/src/Content/Content.css rename to packages/components/src/Content/Content.module.css diff --git a/packages/components/src/Content/Content.css.d.ts b/packages/components/src/Content/Content.module.css.d.ts similarity index 100% rename from packages/components/src/Content/Content.css.d.ts rename to packages/components/src/Content/Content.module.css.d.ts diff --git a/packages/components/src/Content/Content.tsx b/packages/components/src/Content/Content.tsx index c11076e1d0..d85b262fa1 100644 --- a/packages/components/src/Content/Content.tsx +++ b/packages/components/src/Content/Content.tsx @@ -1,7 +1,7 @@ import { ReactNode, createElement } from "react"; import classnames from "classnames"; -import spacings from "./Spacing.css"; -import styles from "./Content.css"; +import spacings from "./Spacing.module.css"; +import styles from "./Content.module.css"; interface ContentProps { readonly children: ReactNode | ReactNode[]; diff --git a/packages/components/src/Content/Spacing.css b/packages/components/src/Content/Spacing.module.css similarity index 100% rename from packages/components/src/Content/Spacing.css rename to packages/components/src/Content/Spacing.module.css diff --git a/packages/components/src/Content/Spacing.css.d.ts b/packages/components/src/Content/Spacing.module.css.d.ts similarity index 100% rename from packages/components/src/Content/Spacing.css.d.ts rename to packages/components/src/Content/Spacing.module.css.d.ts diff --git a/packages/components/src/DataList/DataList.css b/packages/components/src/DataList/DataList.module.css similarity index 100% rename from packages/components/src/DataList/DataList.css rename to packages/components/src/DataList/DataList.module.css diff --git a/packages/components/src/DataList/DataList.css.d.ts b/packages/components/src/DataList/DataList.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/DataList.css.d.ts rename to packages/components/src/DataList/DataList.module.css.d.ts diff --git a/packages/components/src/DataList/DataList.tsx b/packages/components/src/DataList/DataList.tsx index 25a77c96e5..ceffcf49b0 100644 --- a/packages/components/src/DataList/DataList.tsx +++ b/packages/components/src/DataList/DataList.tsx @@ -1,6 +1,6 @@ /* eslint-disable max-statements */ import React, { useMemo, useRef, useState } from "react"; -import styles from "./DataList.css"; +import styles from "./DataList.module.css"; import { DataListTotalCount } from "./components/DataListTotalCount"; import { DataListLoadingState } from "./components/DataListLoadingState"; import { DataListLayout } from "./components/DataListLayout"; diff --git a/packages/components/src/DataList/components/DataListAction/DataListAction.css b/packages/components/src/DataList/components/DataListAction/DataListAction.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListAction/DataListAction.css rename to packages/components/src/DataList/components/DataListAction/DataListAction.module.css diff --git a/packages/components/src/DataList/components/DataListAction/DataListAction.css.d.ts b/packages/components/src/DataList/components/DataListAction/DataListAction.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListAction/DataListAction.css.d.ts rename to packages/components/src/DataList/components/DataListAction/DataListAction.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListAction/DataListAction.tsx b/packages/components/src/DataList/components/DataListAction/DataListAction.tsx index 65fe0f1c42..8279b54a6a 100644 --- a/packages/components/src/DataList/components/DataListAction/DataListAction.tsx +++ b/packages/components/src/DataList/components/DataListAction/DataListAction.tsx @@ -6,7 +6,7 @@ import { import { Typography } from "@jobber/components/Typography"; import { Icon } from "@jobber/components/Icon"; import { useDataListLayoutActionsContext } from "@jobber/components/DataList/components/DataListLayoutActions/DataListLayoutContext"; -import styles from "./DataListAction.css"; +import styles from "./DataListAction.module.css"; export function DataListAction({ label, diff --git a/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.css b/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.css rename to packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.module.css diff --git a/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.css.d.ts b/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.css.d.ts rename to packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.tsx b/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.tsx index de9d12b077..0bd322052a 100644 --- a/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.tsx +++ b/packages/components/src/DataList/components/DataListActionsMenu/DataListActionsMenu.tsx @@ -11,7 +11,7 @@ import { useOnKeyDown } from "@jobber/hooks/useOnKeyDown"; import { createPortal } from "react-dom"; import { tokens } from "@jobber/design"; import { useIsMounted } from "@jobber/hooks/useIsMounted"; -import styles from "./DataListActionsMenu.css"; +import styles from "./DataListActionsMenu.module.css"; import { TRANSITION_DELAY_IN_SECONDS } from "../../DataList.const"; interface DataListActionsMenuProps { diff --git a/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.css b/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.css rename to packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.module.css diff --git a/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.css.d.ts b/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.css.d.ts rename to packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.tsx b/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.tsx index cc8e357d72..3b68994fd5 100644 --- a/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.tsx +++ b/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./DataListBulkActions.css"; +import styles from "./DataListBulkActions.module.css"; import { BULK_ACTIONS_CONTAINER_TEST_ID } from "./DataListBulkActions.const"; import { DataListBulkActionsProps } from "../../DataList.types"; import { useDataListContext } from "../../context/DataListContext"; diff --git a/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.css b/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.css rename to packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.module.css diff --git a/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.css.d.ts b/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.css.d.ts rename to packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.tsx b/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.tsx index 37e01412c0..7d34860789 100644 --- a/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.tsx +++ b/packages/components/src/DataList/components/DataListEmptyState/DataListEmptyState.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, cloneElement, useContext } from "react"; -import styles from "./DataListEmptyState.css"; +import styles from "./DataListEmptyState.module.css"; import { DataListContext } from "../../context/DataListContext"; import { DataListEmptyStateProps } from "../../DataList.types"; import { Text } from "../../../Text"; diff --git a/packages/components/src/DataList/components/DataListFilters/DataListFilters.css.d.ts b/packages/components/src/DataList/components/DataListFilters/DataListFilters.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListFilters/DataListFilters.css.d.ts rename to packages/components/src/DataList/components/DataListFilters/DataListFilters.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListHeader/DataListHeader.tsx b/packages/components/src/DataList/components/DataListHeader/DataListHeader.tsx index e97a3d1f8e..fce2e2c4d6 100644 --- a/packages/components/src/DataList/components/DataListHeader/DataListHeader.tsx +++ b/packages/components/src/DataList/components/DataListHeader/DataListHeader.tsx @@ -9,7 +9,7 @@ import { useResponsiveSizing } from "@jobber/components/DataList/hooks/useRespon import { DataListHeaderCheckbox } from "./DataListHeaderCheckbox"; import { useActiveLayout } from "../../hooks/useActiveLayout"; import { useBatchSelect } from "../../hooks/useBatchSelect"; -import styles from "../../DataList.css"; +import styles from "../../DataList.module.css"; export function DataListHeader() { const breakpoints = useResponsiveSizing(); diff --git a/packages/components/src/DataList/components/DataListHeader/DataListHeaderCheckbox.tsx b/packages/components/src/DataList/components/DataListHeader/DataListHeaderCheckbox.tsx index 796f593b3f..f87941411b 100644 --- a/packages/components/src/DataList/components/DataListHeader/DataListHeaderCheckbox.tsx +++ b/packages/components/src/DataList/components/DataListHeader/DataListHeaderCheckbox.tsx @@ -6,7 +6,7 @@ import { Text } from "../../../Text"; import { Button } from "../../../Button"; import { Checkbox } from "../../../Checkbox"; import { useDataListContext } from "../../context/DataListContext"; -import styles from "../../DataList.css"; +import styles from "../../DataList.module.css"; import { InternalDataListBulkActions } from "../DataListBulkActions"; import { useResponsiveSizing } from "../../hooks/useResponsiveSizing"; import { useBatchSelect } from "../../hooks/useBatchSelect"; diff --git a/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.css b/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.css rename to packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.module.css diff --git a/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.css.d.ts b/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.css.d.ts rename to packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.tsx b/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.tsx index 99c2300f53..ce17e7dd4b 100644 --- a/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.tsx +++ b/packages/components/src/DataList/components/DataListHeaderTile/DataListHeaderTile.tsx @@ -3,7 +3,7 @@ import React, { useRef, useState } from "react"; import classnames from "classnames"; import { useFocusTrap } from "@jobber/hooks/useFocusTrap"; import { useRefocusOnActivator } from "@jobber/hooks/useRefocusOnActivator"; -import styles from "./DataListHeaderTile.css"; +import styles from "./DataListHeaderTile.module.css"; import { DataListSortingArrows } from "./DataListSortingArrows"; import { DataListSortingOptions } from "./components/DataListSortingOptions"; import { Text } from "../../../Text"; diff --git a/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.css b/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.css rename to packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.module.css diff --git a/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.css.d.ts b/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.css.d.ts rename to packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.tsx b/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.tsx index 24074a096f..6c10f287b5 100644 --- a/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.tsx +++ b/packages/components/src/DataList/components/DataListHeaderTile/DataListSortingArrows.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./DataListSortingArrows.css"; +import styles from "./DataListSortingArrows.module.css"; interface DataListSortingArrowsProps { readonly order?: "asc" | "desc" | "none"; diff --git a/packages/components/src/DataList/components/DataListHeaderTile/SortingArrows.css.d.ts b/packages/components/src/DataList/components/DataListHeaderTile/SortingArrows.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListHeaderTile/SortingArrows.css.d.ts rename to packages/components/src/DataList/components/DataListHeaderTile/SortingArrows.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.css b/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.css rename to packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.module.css diff --git a/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.css.d.ts b/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.css.d.ts rename to packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.tsx b/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.tsx index 4257562b89..690ba61a71 100644 --- a/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.tsx +++ b/packages/components/src/DataList/components/DataListHeaderTile/components/DataListSortingOptions.tsx @@ -2,7 +2,7 @@ import React, { KeyboardEvent, useEffect } from "react"; import { useOnKeyDown } from "@jobber/hooks/useOnKeyDown"; import { useRefocusOnActivator } from "@jobber/hooks/useRefocusOnActivator"; import { Icon } from "@jobber/components/Icon"; -import styles from "./DataListSortingOptions.css"; +import styles from "./DataListSortingOptions.module.css"; import { DataListSorting, SortableOptions } from "../../../DataList.types"; interface DataListSortingOptionsProps { diff --git a/packages/components/src/DataList/components/DataListItem/DataListItem.tsx b/packages/components/src/DataList/components/DataListItem/DataListItem.tsx index 84d6c2ab7f..db83b5c086 100644 --- a/packages/components/src/DataList/components/DataListItem/DataListItem.tsx +++ b/packages/components/src/DataList/components/DataListItem/DataListItem.tsx @@ -12,7 +12,7 @@ import { DataListLayoutActionsContext } from "@jobber/components/DataList/compon import { generateListItemElement } from "@jobber/components/DataList/DataList.utils"; import { DataListItemInternal } from "./DataListItemInternal"; import { DataListItemClickable } from "./components/DataListItemClickable"; -import styles from "../../DataList.css"; +import styles from "../../DataList.module.css"; import { useGetItemActions } from "../../hooks/useGetItemActions"; interface DataListItem { diff --git a/packages/components/src/DataList/components/DataListItem/DataListItemInternal.tsx b/packages/components/src/DataList/components/DataListItem/DataListItemInternal.tsx index ff315e356a..294dce1429 100644 --- a/packages/components/src/DataList/components/DataListItem/DataListItemInternal.tsx +++ b/packages/components/src/DataList/components/DataListItem/DataListItemInternal.tsx @@ -3,7 +3,7 @@ import classNames from "classnames"; import { Checkbox } from "@jobber/components/Checkbox"; import { DataListObject } from "@jobber/components/DataList/DataList.types"; import { useBatchSelect } from "@jobber/components/DataList/hooks/useBatchSelect"; -import styles from "../../DataList.css"; +import styles from "../../DataList.module.css"; interface ListItemInternalProps { readonly children: JSX.Element; diff --git a/packages/components/src/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickableInternal.tsx b/packages/components/src/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickableInternal.tsx index f2c21fc4ae..2f63479c1a 100644 --- a/packages/components/src/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickableInternal.tsx +++ b/packages/components/src/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickableInternal.tsx @@ -4,7 +4,7 @@ import { DataListItemActionsProps, DataListObject, } from "@jobber/components/DataList/DataList.types"; -import styles from "../../../../DataList.css"; +import styles from "../../../../DataList.module.css"; import { useDataListLayoutActionsContext } from "../../../DataListLayoutActions/DataListLayoutContext"; export function DataListItemClickableInternal({ diff --git a/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.css b/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListItemActions/DataListItemActions.css rename to packages/components/src/DataList/components/DataListItemActions/DataListItemActions.module.css diff --git a/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.css.d.ts b/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListItemActions/DataListItemActions.css.d.ts rename to packages/components/src/DataList/components/DataListItemActions/DataListItemActions.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.tsx b/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.tsx index de38fc2341..4371f9bdb9 100644 --- a/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.tsx +++ b/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.tsx @@ -1,6 +1,6 @@ import React, { MouseEvent, ReactElement } from "react"; import { Variants, motion } from "framer-motion"; -import styles from "./DataListItemActions.css"; +import styles from "./DataListItemActions.module.css"; import { DataListActionProps, DataListItemActionsProps, diff --git a/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.css b/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.css rename to packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.module.css diff --git a/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.css.d.ts b/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.css.d.ts rename to packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.tsx b/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.tsx index 83ef37a251..6c86fd9730 100644 --- a/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.tsx +++ b/packages/components/src/DataList/components/DataListLayoutActions/DataListLayoutActions.tsx @@ -8,7 +8,7 @@ import { useDataListContext } from "@jobber/components/DataList/context/DataList import { useDataListLayoutContext } from "@jobber/components/DataList/context/DataListLayoutContext"; import { DataListItemActionsOverflow } from "@jobber/components/DataList/components/DataListItemActionsOverflow"; import { Glimmer } from "@jobber/components/Glimmer"; -import styles from "./DataListLayoutActions.css"; +import styles from "./DataListLayoutActions.module.css"; export function DataListLayoutActions() { const { itemActionComponent, loadingState } = useDataListContext(); diff --git a/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.css b/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.css rename to packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.module.css diff --git a/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.css.d.ts b/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.css.d.ts rename to packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.tsx b/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.tsx index b385b1686d..dc49aecc96 100644 --- a/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.tsx +++ b/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMore.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./DataListLoadMore.css"; +import styles from "./DataListLoadMore.module.css"; import { DataListLoadMoreTrigger } from "./DataListLoadMoreTrigger"; import { useDataListContext } from "../../context/DataListContext"; import { DATA_LIST_LOADING_MORE_SPINNER_TEST_ID } from "../../DataList.const"; diff --git a/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMoreTrigger.tsx b/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMoreTrigger.tsx index 4bfa8554c4..c0531e08ed 100644 --- a/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMoreTrigger.tsx +++ b/packages/components/src/DataList/components/DataListLoadMore/DataListLoadMoreTrigger.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { useInView } from "@jobber/hooks/useInView"; -import styles from "./DataListLoadMore.css"; +import styles from "./DataListLoadMore.module.css"; import { useDataListContext } from "../../context/DataListContext"; import { DATA_LOAD_MORE_TEST_ID } from "../../DataList.const"; diff --git a/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.css b/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.css rename to packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.module.css diff --git a/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.css.d.ts b/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.css.d.ts rename to packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.tsx b/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.tsx index 088e62ad15..efd8e22931 100644 --- a/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.tsx +++ b/packages/components/src/DataList/components/DataListLoadingState/DataListLoadingState.tsx @@ -6,7 +6,7 @@ import { } from "@jobber/components/DataList/DataList.types"; import { useDataListContext } from "@jobber/components/DataList/context/DataListContext"; import { useActiveLayout } from "@jobber/components/DataList/hooks/useActiveLayout"; -import styles from "./DataListLoadingState.css"; +import styles from "./DataListLoadingState.module.css"; export const LOADING_STATE_LIMIT_ITEMS = 10; export const DATALIST_LOADINGSTATE_ROW_TEST_ID = diff --git a/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.css b/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.css rename to packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.module.css diff --git a/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.css.d.ts b/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.css.d.ts rename to packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.tsx b/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.tsx index a7d3f27823..3bc10818e1 100644 --- a/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.tsx +++ b/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useInView } from "@jobber/hooks/useInView"; import classNames from "classnames"; import { CONTAINER_TEST_ID } from "./DataListOverflowFade.const"; -import styles from "./DataListOverflowFade.css"; +import styles from "./DataListOverflowFade.module.css"; interface DataListOverflowFadeProps { readonly children: React.ReactNode; diff --git a/packages/components/src/DataList/components/DataListSearch/DataListSearch.css b/packages/components/src/DataList/components/DataListSearch/DataListSearch.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListSearch/DataListSearch.css rename to packages/components/src/DataList/components/DataListSearch/DataListSearch.module.css diff --git a/packages/components/src/DataList/components/DataListSearch/DataListSearch.css.d.ts b/packages/components/src/DataList/components/DataListSearch/DataListSearch.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListSearch/DataListSearch.css.d.ts rename to packages/components/src/DataList/components/DataListSearch/DataListSearch.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx b/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx index 713e218cc9..003aebe699 100644 --- a/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx +++ b/packages/components/src/DataList/components/DataListSearch/DataListSearch.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from "react"; import debounce from "lodash/debounce"; import classNames from "classnames"; import { tokens } from "@jobber/design"; -import styles from "./DataListSearch.css"; +import styles from "./DataListSearch.module.css"; import { InputText, InputTextRef } from "../../../InputText"; import { useDataListContext } from "../../context/DataListContext"; import { SEARCH_DEBOUNCE_DELAY } from "../../DataList.const"; diff --git a/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.css b/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.css rename to packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.module.css diff --git a/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.css.d.ts b/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.css.d.ts rename to packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.tsx b/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.tsx index b81ff75d70..cb470b2825 100644 --- a/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.tsx +++ b/packages/components/src/DataList/components/DataListStickyHeader/DataListStickyHeader.tsx @@ -6,7 +6,7 @@ import React, { useRef, useState, } from "react"; -import styles from "./DataListStickyHeader.css"; +import styles from "./DataListStickyHeader.module.css"; import { DATA_LIST_STICKY_HEADER_TEST_ID } from "../../DataList.const"; export function DataListStickyHeader({ children }: PropsWithChildren) { diff --git a/packages/components/src/DataList/components/DataListTags/DataListTags.css b/packages/components/src/DataList/components/DataListTags/DataListTags.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListTags/DataListTags.css rename to packages/components/src/DataList/components/DataListTags/DataListTags.module.css diff --git a/packages/components/src/DataList/components/DataListTags/DataListTags.css.d.ts b/packages/components/src/DataList/components/DataListTags/DataListTags.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListTags/DataListTags.css.d.ts rename to packages/components/src/DataList/components/DataListTags/DataListTags.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListTags/DataListTags.tsx b/packages/components/src/DataList/components/DataListTags/DataListTags.tsx index f92aa45686..5fb51f5758 100644 --- a/packages/components/src/DataList/components/DataListTags/DataListTags.tsx +++ b/packages/components/src/DataList/components/DataListTags/DataListTags.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from "react"; import classNames from "classnames"; -import styles from "./DataListTags.css"; +import styles from "./DataListTags.module.css"; import { InlineLabel } from "../../../InlineLabel"; import { Text } from "../../../Text"; diff --git a/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.css b/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.module.css similarity index 100% rename from packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.css rename to packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.module.css diff --git a/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.css.d.ts b/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.module.css.d.ts similarity index 100% rename from packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.css.d.ts rename to packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.module.css.d.ts diff --git a/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.tsx b/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.tsx index e421f2a7c4..66200df4de 100644 --- a/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.tsx +++ b/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./DataListTotalCount.css"; +import styles from "./DataListTotalCount.module.css"; import { Text } from "../../../Text"; import { Glimmer } from "../../../Glimmer"; diff --git a/packages/components/src/DataTable/Body.tsx b/packages/components/src/DataTable/Body.tsx index 7cfe1b1239..fec54bda99 100644 --- a/packages/components/src/DataTable/Body.tsx +++ b/packages/components/src/DataTable/Body.tsx @@ -1,7 +1,7 @@ import { Row, Table, flexRender } from "@tanstack/react-table"; import classNames from "classnames"; import React, { ReactNode, useCallback } from "react"; -import styles from "./DataTable.css"; +import styles from "./DataTable.module.css"; import { BodyLoading } from "./BodyLoading"; interface BodyProps { diff --git a/packages/components/src/DataTable/DataTable.css b/packages/components/src/DataTable/DataTable.module.css similarity index 100% rename from packages/components/src/DataTable/DataTable.css rename to packages/components/src/DataTable/DataTable.module.css diff --git a/packages/components/src/DataTable/DataTable.css.d.ts b/packages/components/src/DataTable/DataTable.module.css.d.ts similarity index 100% rename from packages/components/src/DataTable/DataTable.css.d.ts rename to packages/components/src/DataTable/DataTable.module.css.d.ts diff --git a/packages/components/src/DataTable/DataTable.tsx b/packages/components/src/DataTable/DataTable.tsx index 7088dd684a..0d11d4b852 100644 --- a/packages/components/src/DataTable/DataTable.tsx +++ b/packages/components/src/DataTable/DataTable.tsx @@ -7,7 +7,7 @@ import { } from "@jobber/hooks/useResizeObserver"; import { Body } from "./Body"; import { createTableSettings } from "./createTableSettings"; -import styles from "./DataTable.css"; +import styles from "./DataTable.module.css"; import { Pagination } from "./Pagination"; import { PaginationType, SortingType } from "./types"; import { Footer } from "./Footer"; diff --git a/packages/components/src/DataTable/Footer.css b/packages/components/src/DataTable/Footer.module.css similarity index 100% rename from packages/components/src/DataTable/Footer.css rename to packages/components/src/DataTable/Footer.module.css diff --git a/packages/components/src/DataTable/Footer.css.d.ts b/packages/components/src/DataTable/Footer.module.css.d.ts similarity index 100% rename from packages/components/src/DataTable/Footer.css.d.ts rename to packages/components/src/DataTable/Footer.module.css.d.ts diff --git a/packages/components/src/DataTable/Footer.tsx b/packages/components/src/DataTable/Footer.tsx index 7118acf765..a5db55ece8 100644 --- a/packages/components/src/DataTable/Footer.tsx +++ b/packages/components/src/DataTable/Footer.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Table, flexRender } from "@tanstack/react-table"; -import styles from "./Footer.css"; +import styles from "./Footer.module.css"; export type ViewType = "desktop" | "handheld"; diff --git a/packages/components/src/DataTable/Header.tsx b/packages/components/src/DataTable/Header.tsx index a627c2e57f..17d3fb03e0 100644 --- a/packages/components/src/DataTable/Header.tsx +++ b/packages/components/src/DataTable/Header.tsx @@ -2,7 +2,7 @@ import { Row, Table, flexRender } from "@tanstack/react-table"; import classNames from "classnames"; import React from "react"; import { SortDirection, SortIcon } from "./SortIcon"; -import styles from "./DataTable.css"; +import styles from "./DataTable.module.css"; import { SortingType } from "./types"; interface HeaderProps { diff --git a/packages/components/src/DataTable/Pagination.css b/packages/components/src/DataTable/Pagination.module.css similarity index 100% rename from packages/components/src/DataTable/Pagination.css rename to packages/components/src/DataTable/Pagination.module.css diff --git a/packages/components/src/DataTable/Pagination.css.d.ts b/packages/components/src/DataTable/Pagination.module.css.d.ts similarity index 100% rename from packages/components/src/DataTable/Pagination.css.d.ts rename to packages/components/src/DataTable/Pagination.module.css.d.ts diff --git a/packages/components/src/DataTable/Pagination.tsx b/packages/components/src/DataTable/Pagination.tsx index ca14815412..ee12191f28 100644 --- a/packages/components/src/DataTable/Pagination.tsx +++ b/packages/components/src/DataTable/Pagination.tsx @@ -1,6 +1,6 @@ import { Table } from "@tanstack/react-table"; import React, { useMemo } from "react"; -import styles from "./Pagination.css"; +import styles from "./Pagination.module.css"; import { Option, Select } from "../Select"; import { Button } from "../Button"; import { Text } from "../Text"; diff --git a/packages/components/src/DataTable/SortIcon.css b/packages/components/src/DataTable/SortIcon.module.css similarity index 100% rename from packages/components/src/DataTable/SortIcon.css rename to packages/components/src/DataTable/SortIcon.module.css diff --git a/packages/components/src/DataTable/SortIcon.css.d.ts b/packages/components/src/DataTable/SortIcon.module.css.d.ts similarity index 100% rename from packages/components/src/DataTable/SortIcon.css.d.ts rename to packages/components/src/DataTable/SortIcon.module.css.d.ts diff --git a/packages/components/src/DataTable/SortIcon.tsx b/packages/components/src/DataTable/SortIcon.tsx index 84f07d7f32..c1a5688305 100644 --- a/packages/components/src/DataTable/SortIcon.tsx +++ b/packages/components/src/DataTable/SortIcon.tsx @@ -1,6 +1,6 @@ import classNames from "classnames"; import React from "react"; -import styles from "./SortIcon.css"; +import styles from "./SortIcon.module.css"; export enum SortDirection { ascending, diff --git a/packages/components/src/DatePicker/DatePicker.css b/packages/components/src/DatePicker/DatePicker.module.css similarity index 100% rename from packages/components/src/DatePicker/DatePicker.css rename to packages/components/src/DatePicker/DatePicker.module.css diff --git a/packages/components/src/DatePicker/DatePicker.css.d.ts b/packages/components/src/DatePicker/DatePicker.module.css.d.ts similarity index 100% rename from packages/components/src/DatePicker/DatePicker.css.d.ts rename to packages/components/src/DatePicker/DatePicker.module.css.d.ts diff --git a/packages/components/src/DatePicker/DatePicker.tsx b/packages/components/src/DatePicker/DatePicker.tsx index 9c43f46203..eac94e48e9 100644 --- a/packages/components/src/DatePicker/DatePicker.tsx +++ b/packages/components/src/DatePicker/DatePicker.tsx @@ -3,7 +3,7 @@ import classnames from "classnames"; import ReactDatePicker from "react-datepicker"; import { XOR } from "ts-xor"; import { useRefocusOnActivator } from "@jobber/hooks/useRefocusOnActivator"; -import styles from "./DatePicker.css"; +import styles from "./DatePicker.module.css"; import { DatePickerCustomHeader } from "./DatePickerCustomHeader"; import { DatePickerActivator, diff --git a/packages/components/src/DatePicker/DatePickerCustomHeader.tsx b/packages/components/src/DatePicker/DatePickerCustomHeader.tsx index 30d2887bec..f5afe92d8e 100644 --- a/packages/components/src/DatePicker/DatePickerCustomHeader.tsx +++ b/packages/components/src/DatePicker/DatePickerCustomHeader.tsx @@ -1,6 +1,6 @@ import React from "react"; import { ReactDatePickerCustomHeaderProps } from "react-datepicker"; -import styles from "./DatePicker.css"; +import styles from "./DatePicker.module.css"; import { Typography } from "../Typography"; import { Button } from "../Button"; diff --git a/packages/components/src/DescriptionList/DescriptionList.css b/packages/components/src/DescriptionList/DescriptionList.module.css similarity index 100% rename from packages/components/src/DescriptionList/DescriptionList.css rename to packages/components/src/DescriptionList/DescriptionList.module.css diff --git a/packages/components/src/DescriptionList/DescriptionList.css.d.ts b/packages/components/src/DescriptionList/DescriptionList.module.css.d.ts similarity index 100% rename from packages/components/src/DescriptionList/DescriptionList.css.d.ts rename to packages/components/src/DescriptionList/DescriptionList.module.css.d.ts diff --git a/packages/components/src/DescriptionList/DescriptionList.tsx b/packages/components/src/DescriptionList/DescriptionList.tsx index 5135100676..9d0140cab7 100644 --- a/packages/components/src/DescriptionList/DescriptionList.tsx +++ b/packages/components/src/DescriptionList/DescriptionList.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from "react"; -import styles from "./DescriptionList.css"; +import styles from "./DescriptionList.module.css"; import { Typography } from "../Typography"; interface DescriptionListProps { diff --git a/packages/components/src/Disclosure/Disclosure.css b/packages/components/src/Disclosure/Disclosure.module.css similarity index 100% rename from packages/components/src/Disclosure/Disclosure.css rename to packages/components/src/Disclosure/Disclosure.module.css diff --git a/packages/components/src/Disclosure/Disclosure.css.d.ts b/packages/components/src/Disclosure/Disclosure.module.css.d.ts similarity index 100% rename from packages/components/src/Disclosure/Disclosure.css.d.ts rename to packages/components/src/Disclosure/Disclosure.module.css.d.ts diff --git a/packages/components/src/Disclosure/Disclosure.tsx b/packages/components/src/Disclosure/Disclosure.tsx index bdfff4d63b..1b0e9e1168 100644 --- a/packages/components/src/Disclosure/Disclosure.tsx +++ b/packages/components/src/Disclosure/Disclosure.tsx @@ -4,7 +4,7 @@ import { useResizeObserver, } from "@jobber/hooks/useResizeObserver"; import classnames from "classnames"; -import styles from "./Disclosure.css"; +import styles from "./Disclosure.module.css"; import { Icon } from "../Icon"; import { Typography } from "../Typography"; diff --git a/packages/components/src/Divider/Divider.css b/packages/components/src/Divider/Divider.module.css similarity index 100% rename from packages/components/src/Divider/Divider.css rename to packages/components/src/Divider/Divider.module.css diff --git a/packages/components/src/Divider/Divider.css.d.ts b/packages/components/src/Divider/Divider.module.css.d.ts similarity index 100% rename from packages/components/src/Divider/Divider.css.d.ts rename to packages/components/src/Divider/Divider.module.css.d.ts diff --git a/packages/components/src/Divider/Divider.tsx b/packages/components/src/Divider/Divider.tsx index 7f16798bd6..22c5455196 100644 --- a/packages/components/src/Divider/Divider.tsx +++ b/packages/components/src/Divider/Divider.tsx @@ -1,6 +1,6 @@ import React from "react"; import classnames from "classnames"; -import styles from "./Divider.css"; +import styles from "./Divider.module.css"; interface DividerProps { /** diff --git a/packages/components/src/Drawer/Drawer.css b/packages/components/src/Drawer/Drawer.module.css similarity index 100% rename from packages/components/src/Drawer/Drawer.css rename to packages/components/src/Drawer/Drawer.module.css diff --git a/packages/components/src/Drawer/Drawer.css.d.ts b/packages/components/src/Drawer/Drawer.module.css.d.ts similarity index 100% rename from packages/components/src/Drawer/Drawer.css.d.ts rename to packages/components/src/Drawer/Drawer.module.css.d.ts diff --git a/packages/components/src/Drawer/Drawer.tsx b/packages/components/src/Drawer/Drawer.tsx index bca2898c7f..eacb935365 100644 --- a/packages/components/src/Drawer/Drawer.tsx +++ b/packages/components/src/Drawer/Drawer.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import classnames from "classnames"; -import styles from "./Drawer.css"; +import styles from "./Drawer.module.css"; import { Heading } from "../Heading"; import { ButtonDismiss } from "../ButtonDismiss"; diff --git a/packages/components/src/FeatureSwitch/FeatureSwitch.css b/packages/components/src/FeatureSwitch/FeatureSwitch.module.css similarity index 100% rename from packages/components/src/FeatureSwitch/FeatureSwitch.css rename to packages/components/src/FeatureSwitch/FeatureSwitch.module.css diff --git a/packages/components/src/FeatureSwitch/FeatureSwitch.css.d.ts b/packages/components/src/FeatureSwitch/FeatureSwitch.module.css.d.ts similarity index 100% rename from packages/components/src/FeatureSwitch/FeatureSwitch.css.d.ts rename to packages/components/src/FeatureSwitch/FeatureSwitch.module.css.d.ts diff --git a/packages/components/src/FeatureSwitch/FeatureSwitch.tsx b/packages/components/src/FeatureSwitch/FeatureSwitch.tsx index fe52d8eeec..3cbd5d276b 100644 --- a/packages/components/src/FeatureSwitch/FeatureSwitch.tsx +++ b/packages/components/src/FeatureSwitch/FeatureSwitch.tsx @@ -1,7 +1,7 @@ import React, { ReactNode, useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import classnames from "classnames"; -import styles from "./FeatureSwitch.css"; +import styles from "./FeatureSwitch.module.css"; import { Heading } from "../Heading"; import { Text } from "../Text"; import { Content } from "../Content"; diff --git a/packages/components/src/Flex/Flex.css b/packages/components/src/Flex/Flex.module.css similarity index 100% rename from packages/components/src/Flex/Flex.css rename to packages/components/src/Flex/Flex.module.css diff --git a/packages/components/src/Flex/Flex.css.d.ts b/packages/components/src/Flex/Flex.module.css.d.ts similarity index 100% rename from packages/components/src/Flex/Flex.css.d.ts rename to packages/components/src/Flex/Flex.module.css.d.ts diff --git a/packages/components/src/Flex/Flex.tsx b/packages/components/src/Flex/Flex.tsx index 66b6a09ed7..dbb830b475 100644 --- a/packages/components/src/Flex/Flex.tsx +++ b/packages/components/src/Flex/Flex.tsx @@ -2,7 +2,7 @@ import React, { CSSProperties, PropsWithChildren } from "react"; // import chunk from "lodash/chunk"; import classnames from "classnames"; import { ColumnKeys, Direction, Spacing } from "./Flex.types"; -import styles from "./Flex.css"; +import styles from "./Flex.module.css"; interface FlexProps extends PropsWithChildren { /** diff --git a/packages/components/src/FormField/FormField.css b/packages/components/src/FormField/FormField.module.css similarity index 99% rename from packages/components/src/FormField/FormField.css rename to packages/components/src/FormField/FormField.module.css index feef1a7bcb..47dcca1ee9 100644 --- a/packages/components/src/FormField/FormField.css +++ b/packages/components/src/FormField/FormField.module.css @@ -72,7 +72,6 @@ display: flex; height: var(--field--height); flex: 1; - align-items: center; } .textarea.safari .horizontalWrapper { diff --git a/packages/components/src/FormField/FormField.css.d.ts b/packages/components/src/FormField/FormField.module.css.d.ts similarity index 100% rename from packages/components/src/FormField/FormField.css.d.ts rename to packages/components/src/FormField/FormField.module.css.d.ts diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx index 9a6d05f74f..130b81ea54 100644 --- a/packages/components/src/FormField/FormField.tsx +++ b/packages/components/src/FormField/FormField.tsx @@ -8,7 +8,7 @@ import React, { } from "react"; import { useController, useForm, useFormContext } from "react-hook-form"; import { FormFieldProps } from "./FormFieldTypes"; -import styles from "./FormField.css"; +import styles from "./FormField.module.css"; import { FormFieldWrapper } from "./FormFieldWrapper"; import { FormFieldPostFix } from "./FormFieldPostFix"; import { mergeRefs } from "../utils/mergeRefs"; diff --git a/packages/components/src/FormField/FormFieldAffix.tsx b/packages/components/src/FormField/FormFieldAffix.tsx index fd2e1644dd..1196f5dd78 100644 --- a/packages/components/src/FormField/FormFieldAffix.tsx +++ b/packages/components/src/FormField/FormFieldAffix.tsx @@ -2,7 +2,7 @@ import classnames from "classnames"; import React, { RefObject } from "react"; import { XOR } from "ts-xor"; import { Affix, FormFieldProps, Suffix } from "./FormFieldTypes"; -import styles from "./FormField.css"; +import styles from "./FormField.module.css"; import { Button } from "../Button"; import { Icon } from "../Icon"; diff --git a/packages/components/src/FormField/FormFieldDescription.tsx b/packages/components/src/FormField/FormFieldDescription.tsx index b4b21fca3d..906f8d78d5 100644 --- a/packages/components/src/FormField/FormFieldDescription.tsx +++ b/packages/components/src/FormField/FormFieldDescription.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./FormField.css"; +import styles from "./FormField.module.css"; import { Text } from "../Text"; interface FormFieldDescriptionProps { diff --git a/packages/components/src/FormField/FormFieldPostFix.tsx b/packages/components/src/FormField/FormFieldPostFix.tsx index 115f980ec8..190642cccf 100644 --- a/packages/components/src/FormField/FormFieldPostFix.tsx +++ b/packages/components/src/FormField/FormFieldPostFix.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./FormField.css"; +import styles from "./FormField.module.css"; import { Icon } from "../Icon"; import { Spinner } from "../Spinner"; diff --git a/packages/components/src/FormField/FormFieldWrapper.tsx b/packages/components/src/FormField/FormFieldWrapper.tsx index 3132bd0395..e65a3e606c 100644 --- a/packages/components/src/FormField/FormFieldWrapper.tsx +++ b/packages/components/src/FormField/FormFieldWrapper.tsx @@ -10,7 +10,7 @@ import { Clearable, useShowClear } from "@jobber/hooks/useShowClear"; import { AnimatePresence, motion } from "framer-motion"; import { tokens } from "@jobber/design"; import { FormFieldProps } from "./FormFieldTypes"; -import styles from "./FormField.css"; +import styles from "./FormField.module.css"; import { AffixIcon, AffixLabel } from "./FormFieldAffix"; import { FormFieldDescription } from "./FormFieldDescription"; import { ClearAction } from "./components/ClearAction"; diff --git a/packages/components/src/FormField/components/ClearAction.css b/packages/components/src/FormField/components/ClearAction.module.css similarity index 95% rename from packages/components/src/FormField/components/ClearAction.css rename to packages/components/src/FormField/components/ClearAction.module.css index bbbc8e52ad..660a2d65e2 100644 --- a/packages/components/src/FormField/components/ClearAction.css +++ b/packages/components/src/FormField/components/ClearAction.module.css @@ -12,6 +12,7 @@ cursor: pointer; justify-content: center; align-items: center; + transform: translateY(50%); } .clearInput:focus { diff --git a/packages/components/src/FormField/components/ClearAction.css.d.ts b/packages/components/src/FormField/components/ClearAction.module.css.d.ts similarity index 100% rename from packages/components/src/FormField/components/ClearAction.css.d.ts rename to packages/components/src/FormField/components/ClearAction.module.css.d.ts diff --git a/packages/components/src/FormField/components/ClearAction.tsx b/packages/components/src/FormField/components/ClearAction.tsx index 0e37ac13d5..1b0e9c9732 100644 --- a/packages/components/src/FormField/components/ClearAction.tsx +++ b/packages/components/src/FormField/components/ClearAction.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./ClearAction.css"; +import styles from "./ClearAction.module.css"; import { Icon } from "../../Icon"; interface ClearActionProps { diff --git a/packages/components/src/FormatEmail/FormatEmail.css b/packages/components/src/FormatEmail/FormatEmail.module.css similarity index 100% rename from packages/components/src/FormatEmail/FormatEmail.css rename to packages/components/src/FormatEmail/FormatEmail.module.css diff --git a/packages/components/src/FormatEmail/FormatEmail.css.d.ts b/packages/components/src/FormatEmail/FormatEmail.module.css.d.ts similarity index 100% rename from packages/components/src/FormatEmail/FormatEmail.css.d.ts rename to packages/components/src/FormatEmail/FormatEmail.module.css.d.ts diff --git a/packages/components/src/FormatEmail/FormatEmail.tsx b/packages/components/src/FormatEmail/FormatEmail.tsx index 72dd2ba66b..e665096513 100644 --- a/packages/components/src/FormatEmail/FormatEmail.tsx +++ b/packages/components/src/FormatEmail/FormatEmail.tsx @@ -1,6 +1,6 @@ import React from "react"; import classnames from "classnames"; -import styles from "./FormatEmail.css"; +import styles from "./FormatEmail.module.css"; interface FormatEmailProps { /** diff --git a/packages/components/src/FormatFile/FormatFile.css b/packages/components/src/FormatFile/FormatFile.module.css similarity index 100% rename from packages/components/src/FormatFile/FormatFile.css rename to packages/components/src/FormatFile/FormatFile.module.css diff --git a/packages/components/src/FormatFile/FormatFile.css.d.ts b/packages/components/src/FormatFile/FormatFile.module.css.d.ts similarity index 100% rename from packages/components/src/FormatFile/FormatFile.css.d.ts rename to packages/components/src/FormatFile/FormatFile.module.css.d.ts diff --git a/packages/components/src/FormatFile/FormatFile.tsx b/packages/components/src/FormatFile/FormatFile.tsx index 19a833ec6b..ca5c38b0d4 100644 --- a/packages/components/src/FormatFile/FormatFile.tsx +++ b/packages/components/src/FormatFile/FormatFile.tsx @@ -1,7 +1,7 @@ import React from "react"; import classnames from "classnames"; import getHumanReadableFileSize from "filesize"; -import styles from "./FormatFile.css"; +import styles from "./FormatFile.module.css"; import { FormatFileDeleteButton } from "./FormatFileDeleteButton"; import { InternalThumbnail } from "./InternalThumbnail"; import { FileUpload } from "../InputFile"; diff --git a/packages/components/src/FormatFile/FormatFileDeleteButton.tsx b/packages/components/src/FormatFile/FormatFileDeleteButton.tsx index 7f7f3f0976..ed18934eb7 100644 --- a/packages/components/src/FormatFile/FormatFileDeleteButton.tsx +++ b/packages/components/src/FormatFile/FormatFileDeleteButton.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import styles from "./FormatFile.css"; +import styles from "./FormatFile.module.css"; import { Button } from "../Button"; import { ConfirmationModal } from "../ConfirmationModal"; diff --git a/packages/components/src/FormatFile/InternalThumbnail.css b/packages/components/src/FormatFile/InternalThumbnail.module.css similarity index 100% rename from packages/components/src/FormatFile/InternalThumbnail.css rename to packages/components/src/FormatFile/InternalThumbnail.module.css diff --git a/packages/components/src/FormatFile/InternalThumbnail.css.d.ts b/packages/components/src/FormatFile/InternalThumbnail.module.css.d.ts similarity index 100% rename from packages/components/src/FormatFile/InternalThumbnail.css.d.ts rename to packages/components/src/FormatFile/InternalThumbnail.module.css.d.ts diff --git a/packages/components/src/FormatFile/InternalThumbnail.tsx b/packages/components/src/FormatFile/InternalThumbnail.tsx index c1d4ed1efc..7e6b545f7a 100644 --- a/packages/components/src/FormatFile/InternalThumbnail.tsx +++ b/packages/components/src/FormatFile/InternalThumbnail.tsx @@ -1,6 +1,6 @@ import React from "react"; import classNames from "classnames"; -import styles from "./InternalThumbnail.css"; +import styles from "./InternalThumbnail.module.css"; import { InternalThumbnailImage } from "./InternalThumbnailImage"; import { Icon, IconNames } from "../Icon"; import { FileUpload } from "../InputFile"; diff --git a/packages/components/src/FormatFile/InternalThumbnailImage.css b/packages/components/src/FormatFile/InternalThumbnailImage.module.css similarity index 100% rename from packages/components/src/FormatFile/InternalThumbnailImage.css rename to packages/components/src/FormatFile/InternalThumbnailImage.module.css diff --git a/packages/components/src/FormatFile/InternalThumbnailImage.css.d.ts b/packages/components/src/FormatFile/InternalThumbnailImage.module.css.d.ts similarity index 100% rename from packages/components/src/FormatFile/InternalThumbnailImage.css.d.ts rename to packages/components/src/FormatFile/InternalThumbnailImage.module.css.d.ts diff --git a/packages/components/src/FormatFile/InternalThumbnailImage.tsx b/packages/components/src/FormatFile/InternalThumbnailImage.tsx index 67d5c9ddc4..2d6139ff53 100644 --- a/packages/components/src/FormatFile/InternalThumbnailImage.tsx +++ b/packages/components/src/FormatFile/InternalThumbnailImage.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import classNames from "classnames"; -import styles from "./InternalThumbnailImage.css"; +import styles from "./InternalThumbnailImage.module.css"; import { FileUpload } from "../InputFile"; import { Glimmer } from "../Glimmer"; diff --git a/packages/components/src/Gallery/Gallery.css b/packages/components/src/Gallery/Gallery.module.css similarity index 100% rename from packages/components/src/Gallery/Gallery.css rename to packages/components/src/Gallery/Gallery.module.css diff --git a/packages/components/src/Gallery/Gallery.css.d.ts b/packages/components/src/Gallery/Gallery.module.css.d.ts similarity index 100% rename from packages/components/src/Gallery/Gallery.css.d.ts rename to packages/components/src/Gallery/Gallery.module.css.d.ts diff --git a/packages/components/src/Gallery/Gallery.tsx b/packages/components/src/Gallery/Gallery.tsx index e24751b9eb..76c0449bee 100644 --- a/packages/components/src/Gallery/Gallery.tsx +++ b/packages/components/src/Gallery/Gallery.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import classNames from "classnames"; -import styles from "./Gallery.css"; +import styles from "./Gallery.module.css"; import { File, GalleryProps } from "./GalleryTypes"; import { LightBox } from "../LightBox"; import { FormatFile } from "../FormatFile"; diff --git a/packages/components/src/Glimmer/Glimmer.css b/packages/components/src/Glimmer/Glimmer.module.css similarity index 100% rename from packages/components/src/Glimmer/Glimmer.css rename to packages/components/src/Glimmer/Glimmer.module.css diff --git a/packages/components/src/Glimmer/Glimmer.css.d.ts b/packages/components/src/Glimmer/Glimmer.module.css.d.ts similarity index 100% rename from packages/components/src/Glimmer/Glimmer.css.d.ts rename to packages/components/src/Glimmer/Glimmer.module.css.d.ts diff --git a/packages/components/src/Glimmer/Glimmer.tsx b/packages/components/src/Glimmer/Glimmer.tsx index 3bea0d4bd3..3acfc2b9ee 100644 --- a/packages/components/src/Glimmer/Glimmer.tsx +++ b/packages/components/src/Glimmer/Glimmer.tsx @@ -1,10 +1,10 @@ import React from "react"; import classnames from "classnames"; -import styles from "./Glimmer.css"; +import styles from "./Glimmer.module.css"; /* eslint-disable import/no-internal-modules */ -import sizes from "./style/Sizes.css"; -import shapes from "./style/Shape.css"; -import timings from "./style/Timing.css"; +import sizes from "./style/Sizes.module.css"; +import shapes from "./style/Shape.module.css"; +import timings from "./style/Timing.module.css"; /* eslint-enable import/no-internal-modules */ import { Content } from "../Content"; diff --git a/packages/components/src/Glimmer/style/Shape.css b/packages/components/src/Glimmer/style/Shape.module.css similarity index 100% rename from packages/components/src/Glimmer/style/Shape.css rename to packages/components/src/Glimmer/style/Shape.module.css diff --git a/packages/components/src/Glimmer/style/Shape.css.d.ts b/packages/components/src/Glimmer/style/Shape.module.css.d.ts similarity index 100% rename from packages/components/src/Glimmer/style/Shape.css.d.ts rename to packages/components/src/Glimmer/style/Shape.module.css.d.ts diff --git a/packages/components/src/Glimmer/style/Sizes.css b/packages/components/src/Glimmer/style/Sizes.module.css similarity index 100% rename from packages/components/src/Glimmer/style/Sizes.css rename to packages/components/src/Glimmer/style/Sizes.module.css diff --git a/packages/components/src/Glimmer/style/Sizes.css.d.ts b/packages/components/src/Glimmer/style/Sizes.module.css.d.ts similarity index 100% rename from packages/components/src/Glimmer/style/Sizes.css.d.ts rename to packages/components/src/Glimmer/style/Sizes.module.css.d.ts diff --git a/packages/components/src/Glimmer/style/Timing.css b/packages/components/src/Glimmer/style/Timing.module.css similarity index 100% rename from packages/components/src/Glimmer/style/Timing.css rename to packages/components/src/Glimmer/style/Timing.module.css diff --git a/packages/components/src/Glimmer/style/Timing.css.d.ts b/packages/components/src/Glimmer/style/Timing.module.css.d.ts similarity index 100% rename from packages/components/src/Glimmer/style/Timing.css.d.ts rename to packages/components/src/Glimmer/style/Timing.module.css.d.ts diff --git a/packages/components/src/Grid/Grid.css b/packages/components/src/Grid/Grid.module.css similarity index 100% rename from packages/components/src/Grid/Grid.css rename to packages/components/src/Grid/Grid.module.css diff --git a/packages/components/src/Grid/Grid.css.d.ts b/packages/components/src/Grid/Grid.module.css.d.ts similarity index 100% rename from packages/components/src/Grid/Grid.css.d.ts rename to packages/components/src/Grid/Grid.module.css.d.ts diff --git a/packages/components/src/Grid/Grid.test.tsx b/packages/components/src/Grid/Grid.test.tsx index 320104535d..8b3ff50e7e 100644 --- a/packages/components/src/Grid/Grid.test.tsx +++ b/packages/components/src/Grid/Grid.test.tsx @@ -1,7 +1,7 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import { GRID_TEST_ID, Grid } from "."; -import alignments from "./GridAlign.css"; +import alignments from "./GridAlign.module.css"; const children = [ diff --git a/packages/components/src/Grid/Grid.tsx b/packages/components/src/Grid/Grid.tsx index d9981ed649..94e40771d7 100644 --- a/packages/components/src/Grid/Grid.tsx +++ b/packages/components/src/Grid/Grid.tsx @@ -1,8 +1,8 @@ import React, { ReactElement } from "react"; import classNames from "classnames"; import { GridCellProps, InternalGridCell } from "./InternalGridCell"; -import styles from "./Grid.css"; -import alignments from "./GridAlign.css"; +import styles from "./Grid.module.css"; +import alignments from "./GridAlign.module.css"; import { GridCell } from "./GridCell"; interface GridProps { diff --git a/packages/components/src/Grid/GridAlign.css b/packages/components/src/Grid/GridAlign.module.css similarity index 100% rename from packages/components/src/Grid/GridAlign.css rename to packages/components/src/Grid/GridAlign.module.css diff --git a/packages/components/src/Grid/GridAlign.css.d.ts b/packages/components/src/Grid/GridAlign.module.css.d.ts similarity index 100% rename from packages/components/src/Grid/GridAlign.css.d.ts rename to packages/components/src/Grid/GridAlign.module.css.d.ts diff --git a/packages/components/src/Grid/InternalGridCell/InternalGridCell.css b/packages/components/src/Grid/InternalGridCell/InternalGridCell.module.css similarity index 100% rename from packages/components/src/Grid/InternalGridCell/InternalGridCell.css rename to packages/components/src/Grid/InternalGridCell/InternalGridCell.module.css diff --git a/packages/components/src/Grid/InternalGridCell/InternalGridCell.css.d.ts b/packages/components/src/Grid/InternalGridCell/InternalGridCell.module.css.d.ts similarity index 100% rename from packages/components/src/Grid/InternalGridCell/InternalGridCell.css.d.ts rename to packages/components/src/Grid/InternalGridCell/InternalGridCell.module.css.d.ts diff --git a/packages/components/src/Grid/InternalGridCell/InternalGridCell.tsx b/packages/components/src/Grid/InternalGridCell/InternalGridCell.tsx index e8c7f64822..cb226ca4b1 100644 --- a/packages/components/src/Grid/InternalGridCell/InternalGridCell.tsx +++ b/packages/components/src/Grid/InternalGridCell/InternalGridCell.tsx @@ -1,5 +1,5 @@ import React, { PropsWithChildren } from "react"; -import styles from "./InternalGridCell.css"; +import styles from "./InternalGridCell.module.css"; /** * Breakpoints that we support diff --git a/packages/components/src/InlineLabel/InlineLabel.css b/packages/components/src/InlineLabel/InlineLabel.module.css similarity index 100% rename from packages/components/src/InlineLabel/InlineLabel.css rename to packages/components/src/InlineLabel/InlineLabel.module.css diff --git a/packages/components/src/InlineLabel/InlineLabel.css.d.ts b/packages/components/src/InlineLabel/InlineLabel.module.css.d.ts similarity index 100% rename from packages/components/src/InlineLabel/InlineLabel.css.d.ts rename to packages/components/src/InlineLabel/InlineLabel.module.css.d.ts diff --git a/packages/components/src/InlineLabel/InlineLabel.tsx b/packages/components/src/InlineLabel/InlineLabel.tsx index bc5c8c7443..67a934caea 100644 --- a/packages/components/src/InlineLabel/InlineLabel.tsx +++ b/packages/components/src/InlineLabel/InlineLabel.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import classnames from "classnames"; -import styles from "./InlineLabel.css"; +import styles from "./InlineLabel.module.css"; import { Typography } from "../Typography"; export type InlineLabelColors = diff --git a/packages/components/src/InputAvatar/InputAvatar.css b/packages/components/src/InputAvatar/InputAvatar.module.css similarity index 100% rename from packages/components/src/InputAvatar/InputAvatar.css rename to packages/components/src/InputAvatar/InputAvatar.module.css diff --git a/packages/components/src/InputAvatar/InputAvatar.css.d.ts b/packages/components/src/InputAvatar/InputAvatar.module.css.d.ts similarity index 100% rename from packages/components/src/InputAvatar/InputAvatar.css.d.ts rename to packages/components/src/InputAvatar/InputAvatar.module.css.d.ts diff --git a/packages/components/src/InputAvatar/InputAvatar.tsx b/packages/components/src/InputAvatar/InputAvatar.tsx index 57409a86a6..d4a41b0989 100644 --- a/packages/components/src/InputAvatar/InputAvatar.tsx +++ b/packages/components/src/InputAvatar/InputAvatar.tsx @@ -1,5 +1,5 @@ import React, { PropsWithChildren, useState } from "react"; -import styles from "./InputAvatar.css"; +import styles from "./InputAvatar.module.css"; import { Avatar, AvatarProps } from "../Avatar"; import { FileUpload, InputFile, UploadParams } from "../InputFile"; import { ProgressBar } from "../ProgressBar"; diff --git a/packages/components/src/InputFile/InputFile.css b/packages/components/src/InputFile/InputFile.module.css similarity index 100% rename from packages/components/src/InputFile/InputFile.css rename to packages/components/src/InputFile/InputFile.module.css diff --git a/packages/components/src/InputFile/InputFile.css.d.ts b/packages/components/src/InputFile/InputFile.module.css.d.ts similarity index 100% rename from packages/components/src/InputFile/InputFile.css.d.ts rename to packages/components/src/InputFile/InputFile.module.css.d.ts diff --git a/packages/components/src/InputFile/InputFile.tsx b/packages/components/src/InputFile/InputFile.tsx index f5ff8988dd..fec1f72c62 100644 --- a/packages/components/src/InputFile/InputFile.tsx +++ b/packages/components/src/InputFile/InputFile.tsx @@ -2,7 +2,7 @@ import React, { SyntheticEvent, useCallback } from "react"; import classnames from "classnames"; import { DropzoneOptions, FileError, useDropzone } from "react-dropzone"; import axios, { AxiosRequestConfig } from "axios"; -import styles from "./InputFile.css"; +import styles from "./InputFile.module.css"; import { BASIC_IMAGE_TYPES, convertToMimeTypes, diff --git a/packages/components/src/InputGroup/InputGroup.css b/packages/components/src/InputGroup/InputGroup.module.css similarity index 100% rename from packages/components/src/InputGroup/InputGroup.css rename to packages/components/src/InputGroup/InputGroup.module.css diff --git a/packages/components/src/InputGroup/InputGroup.css.d.ts b/packages/components/src/InputGroup/InputGroup.module.css.d.ts similarity index 100% rename from packages/components/src/InputGroup/InputGroup.css.d.ts rename to packages/components/src/InputGroup/InputGroup.module.css.d.ts diff --git a/packages/components/src/InputGroup/InputGroup.tsx b/packages/components/src/InputGroup/InputGroup.tsx index 41cf3156d0..a6484a6cc9 100644 --- a/packages/components/src/InputGroup/InputGroup.tsx +++ b/packages/components/src/InputGroup/InputGroup.tsx @@ -1,6 +1,6 @@ import React, { ReactElement } from "react"; import classnames from "classnames"; -import styles from "./InputGroup.css"; +import styles from "./InputGroup.module.css"; interface InputGroupProps { readonly children: ReactElement | ReactElement[]; diff --git a/packages/components/src/InputPhoneNumber/InputMask.css b/packages/components/src/InputPhoneNumber/InputMask.module.css similarity index 100% rename from packages/components/src/InputPhoneNumber/InputMask.css rename to packages/components/src/InputPhoneNumber/InputMask.module.css diff --git a/packages/components/src/InputPhoneNumber/InputMask.css.d.ts b/packages/components/src/InputPhoneNumber/InputMask.module.css.d.ts similarity index 100% rename from packages/components/src/InputPhoneNumber/InputMask.css.d.ts rename to packages/components/src/InputPhoneNumber/InputMask.module.css.d.ts diff --git a/packages/components/src/InputPhoneNumber/InputMask.tsx b/packages/components/src/InputPhoneNumber/InputMask.tsx index dbabea601b..b09c21ab48 100644 --- a/packages/components/src/InputPhoneNumber/InputMask.tsx +++ b/packages/components/src/InputPhoneNumber/InputMask.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, cloneElement, useState } from "react"; -import styles from "./InputMask.css"; +import styles from "./InputMask.module.css"; import { FormFieldProps } from "../FormField"; export interface InputMaskProps { diff --git a/packages/components/src/InputValidation/InputValidation.css b/packages/components/src/InputValidation/InputValidation.module.css similarity index 100% rename from packages/components/src/InputValidation/InputValidation.css rename to packages/components/src/InputValidation/InputValidation.module.css diff --git a/packages/components/src/InputValidation/InputValidation.css.d.ts b/packages/components/src/InputValidation/InputValidation.module.css.d.ts similarity index 100% rename from packages/components/src/InputValidation/InputValidation.css.d.ts rename to packages/components/src/InputValidation/InputValidation.module.css.d.ts diff --git a/packages/components/src/InputValidation/InputValidation.tsx b/packages/components/src/InputValidation/InputValidation.tsx index b4efea4b08..f4aa5ceda0 100644 --- a/packages/components/src/InputValidation/InputValidation.tsx +++ b/packages/components/src/InputValidation/InputValidation.tsx @@ -1,6 +1,6 @@ import React from "react"; import { AnimatePresence, motion } from "framer-motion"; -import styles from "./InputValidation.css"; +import styles from "./InputValidation.module.css"; import { Text } from "../Text"; import { Icon } from "../Icon"; diff --git a/packages/components/src/LightBox/LightBox.css b/packages/components/src/LightBox/LightBox.module.css similarity index 100% rename from packages/components/src/LightBox/LightBox.css rename to packages/components/src/LightBox/LightBox.module.css diff --git a/packages/components/src/LightBox/LightBox.css.d.ts b/packages/components/src/LightBox/LightBox.module.css.d.ts similarity index 100% rename from packages/components/src/LightBox/LightBox.css.d.ts rename to packages/components/src/LightBox/LightBox.module.css.d.ts diff --git a/packages/components/src/LightBox/LightBox.tsx b/packages/components/src/LightBox/LightBox.tsx index 845965d779..9d295e7079 100644 --- a/packages/components/src/LightBox/LightBox.tsx +++ b/packages/components/src/LightBox/LightBox.tsx @@ -7,7 +7,7 @@ import { useRefocusOnActivator } from "@jobber/hooks/useRefocusOnActivator"; import { useOnKeyDown } from "@jobber/hooks/useOnKeyDown"; import { useFocusTrap } from "@jobber/hooks/useFocusTrap"; import { useIsMounted } from "@jobber/hooks/useIsMounted"; -import styles from "./LightBox.css"; +import styles from "./LightBox.module.css"; import { ButtonDismiss } from "../ButtonDismiss"; import { Button } from "../Button"; diff --git a/packages/components/src/Link/Link.css b/packages/components/src/Link/Link.module.css similarity index 100% rename from packages/components/src/Link/Link.css rename to packages/components/src/Link/Link.module.css diff --git a/packages/components/src/Link/Link.css.d.ts b/packages/components/src/Link/Link.module.css.d.ts similarity index 100% rename from packages/components/src/Link/Link.css.d.ts rename to packages/components/src/Link/Link.module.css.d.ts diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx index 6f2890c2c6..de27c09646 100644 --- a/packages/components/src/Link/Link.tsx +++ b/packages/components/src/Link/Link.tsx @@ -1,5 +1,5 @@ import React, { PropsWithChildren } from "react"; -import styles from "./Link.css"; +import styles from "./Link.module.css"; export interface LinkProps { readonly url: string; diff --git a/packages/components/src/List/List.css b/packages/components/src/List/List.module.css similarity index 100% rename from packages/components/src/List/List.css rename to packages/components/src/List/List.module.css diff --git a/packages/components/src/List/List.css.d.ts b/packages/components/src/List/List.module.css.d.ts similarity index 100% rename from packages/components/src/List/List.css.d.ts rename to packages/components/src/List/List.module.css.d.ts diff --git a/packages/components/src/List/List.tsx b/packages/components/src/List/List.tsx index e972f58e6b..bcbcf71f55 100644 --- a/packages/components/src/List/List.tsx +++ b/packages/components/src/List/List.tsx @@ -2,8 +2,8 @@ import React from "react"; import classnames from "classnames"; import get from "lodash/get"; import groupBy from "lodash/groupBy"; -import styles from "./List.css"; -import sectionStyles from "./SectionHeader.css"; +import styles from "./List.module.css"; +import sectionStyles from "./SectionHeader.module.css"; import { ListItem, ListItemProps } from "./ListItem"; import { Typography } from "../Typography"; diff --git a/packages/components/src/List/ListItem.css b/packages/components/src/List/ListItem.module.css similarity index 100% rename from packages/components/src/List/ListItem.css rename to packages/components/src/List/ListItem.module.css diff --git a/packages/components/src/List/ListItem.css.d.ts b/packages/components/src/List/ListItem.module.css.d.ts similarity index 100% rename from packages/components/src/List/ListItem.css.d.ts rename to packages/components/src/List/ListItem.module.css.d.ts diff --git a/packages/components/src/List/ListItem.tsx b/packages/components/src/List/ListItem.tsx index 28a53d71a4..af5638b557 100644 --- a/packages/components/src/List/ListItem.tsx +++ b/packages/components/src/List/ListItem.tsx @@ -1,7 +1,7 @@ import React from "react"; import classnames from "classnames"; import { IconColorNames, IconNames } from "@jobber/design"; -import styles from "./ListItem.css"; +import styles from "./ListItem.module.css"; import { Icon } from "../Icon"; import { Text } from "../Text"; import { Heading } from "../Heading"; diff --git a/packages/components/src/List/SectionHeader.css b/packages/components/src/List/SectionHeader.module.css similarity index 100% rename from packages/components/src/List/SectionHeader.css rename to packages/components/src/List/SectionHeader.module.css diff --git a/packages/components/src/List/SectionHeader.css.d.ts b/packages/components/src/List/SectionHeader.module.css.d.ts similarity index 100% rename from packages/components/src/List/SectionHeader.css.d.ts rename to packages/components/src/List/SectionHeader.module.css.d.ts diff --git a/packages/components/src/Menu/Menu.css b/packages/components/src/Menu/Menu.module.css similarity index 100% rename from packages/components/src/Menu/Menu.css rename to packages/components/src/Menu/Menu.module.css diff --git a/packages/components/src/Menu/Menu.css.d.ts b/packages/components/src/Menu/Menu.module.css.d.ts similarity index 100% rename from packages/components/src/Menu/Menu.css.d.ts rename to packages/components/src/Menu/Menu.module.css.d.ts diff --git a/packages/components/src/Menu/Menu.tsx b/packages/components/src/Menu/Menu.tsx index 488b03f641..d3b726f65a 100644 --- a/packages/components/src/Menu/Menu.tsx +++ b/packages/components/src/Menu/Menu.tsx @@ -16,7 +16,7 @@ import { usePopper } from "react-popper"; import { useIsMounted } from "@jobber/hooks/useIsMounted"; import ReactDOM from "react-dom"; import { useFocusTrap } from "@jobber/hooks/useFocusTrap"; -import styles from "./Menu.css"; +import styles from "./Menu.module.css"; import { Button } from "../Button"; import { Typography } from "../Typography"; import { Icon } from "../Icon"; diff --git a/packages/components/src/Modal/Modal.css b/packages/components/src/Modal/Modal.module.css similarity index 100% rename from packages/components/src/Modal/Modal.css rename to packages/components/src/Modal/Modal.module.css diff --git a/packages/components/src/Modal/Modal.css.d.ts b/packages/components/src/Modal/Modal.module.css.d.ts similarity index 100% rename from packages/components/src/Modal/Modal.css.d.ts rename to packages/components/src/Modal/Modal.module.css.d.ts diff --git a/packages/components/src/Modal/Modal.test.tsx b/packages/components/src/Modal/Modal.test.tsx index f9a9cfd719..a7e57d7fa4 100644 --- a/packages/components/src/Modal/Modal.test.tsx +++ b/packages/components/src/Modal/Modal.test.tsx @@ -1,7 +1,7 @@ import React from "react"; import { fireEvent, render } from "@testing-library/react"; import { Modal } from "."; -import styles from "./Modal.css"; +import styles from "./Modal.module.css"; it('modal contains aria role of "dialog"', async () => { const { findByRole } = render(Content); diff --git a/packages/components/src/Modal/Modal.tsx b/packages/components/src/Modal/Modal.tsx index 31ceac30c3..7821566371 100644 --- a/packages/components/src/Modal/Modal.tsx +++ b/packages/components/src/Modal/Modal.tsx @@ -5,8 +5,8 @@ import { AnimatePresence, motion } from "framer-motion"; import { useRefocusOnActivator } from "@jobber/hooks/useRefocusOnActivator"; import { useOnKeyDown } from "@jobber/hooks/useOnKeyDown"; import { useFocusTrap } from "@jobber/hooks/useFocusTrap"; -import styles from "./Modal.css"; -import sizes from "./ModalSizes.css"; +import styles from "./Modal.module.css"; +import sizes from "./ModalSizes.module.css"; import { Heading } from "../Heading"; import { Button, ButtonProps } from "../Button"; import { ButtonDismiss } from "../ButtonDismiss"; diff --git a/packages/components/src/Modal/ModalSizes.css b/packages/components/src/Modal/ModalSizes.module.css similarity index 100% rename from packages/components/src/Modal/ModalSizes.css rename to packages/components/src/Modal/ModalSizes.module.css diff --git a/packages/components/src/Modal/ModalSizes.css.d.ts b/packages/components/src/Modal/ModalSizes.module.css.d.ts similarity index 100% rename from packages/components/src/Modal/ModalSizes.css.d.ts rename to packages/components/src/Modal/ModalSizes.module.css.d.ts diff --git a/packages/components/src/MultiSelect/DropDownMenu.css b/packages/components/src/MultiSelect/DropDownMenu.module.css similarity index 100% rename from packages/components/src/MultiSelect/DropDownMenu.css rename to packages/components/src/MultiSelect/DropDownMenu.module.css diff --git a/packages/components/src/MultiSelect/DropDownMenu.css.d.ts b/packages/components/src/MultiSelect/DropDownMenu.module.css.d.ts similarity index 100% rename from packages/components/src/MultiSelect/DropDownMenu.css.d.ts rename to packages/components/src/MultiSelect/DropDownMenu.module.css.d.ts diff --git a/packages/components/src/MultiSelect/DropDownMenu.tsx b/packages/components/src/MultiSelect/DropDownMenu.tsx index df63fcc0d1..1e2e91dd7e 100644 --- a/packages/components/src/MultiSelect/DropDownMenu.tsx +++ b/packages/components/src/MultiSelect/DropDownMenu.tsx @@ -9,7 +9,7 @@ import React, { useState, } from "react"; import classNames from "classnames"; -import styles from "./DropDownMenu.css"; +import styles from "./DropDownMenu.module.css"; import { Option, Options } from "./types"; import { Checkbox } from "../Checkbox"; diff --git a/packages/components/src/MultiSelect/MultiSelect.css b/packages/components/src/MultiSelect/MultiSelect.module.css similarity index 100% rename from packages/components/src/MultiSelect/MultiSelect.css rename to packages/components/src/MultiSelect/MultiSelect.module.css diff --git a/packages/components/src/MultiSelect/MultiSelect.css.d.ts b/packages/components/src/MultiSelect/MultiSelect.module.css.d.ts similarity index 100% rename from packages/components/src/MultiSelect/MultiSelect.css.d.ts rename to packages/components/src/MultiSelect/MultiSelect.module.css.d.ts diff --git a/packages/components/src/MultiSelect/MultiSelect.tsx b/packages/components/src/MultiSelect/MultiSelect.tsx index 9a02bfc840..d80eaf622e 100644 --- a/packages/components/src/MultiSelect/MultiSelect.tsx +++ b/packages/components/src/MultiSelect/MultiSelect.tsx @@ -7,7 +7,7 @@ import React, { useState, } from "react"; import classNames from "classnames"; -import styles from "./MultiSelect.css"; +import styles from "./MultiSelect.module.css"; import { DropDownMenu } from "./DropDownMenu"; import { Options } from "./types"; import { Text } from "../Text"; diff --git a/packages/components/src/Page/Page.css b/packages/components/src/Page/Page.module.css similarity index 100% rename from packages/components/src/Page/Page.css rename to packages/components/src/Page/Page.module.css diff --git a/packages/components/src/Page/Page.css.d.ts b/packages/components/src/Page/Page.module.css.d.ts similarity index 100% rename from packages/components/src/Page/Page.css.d.ts rename to packages/components/src/Page/Page.module.css.d.ts diff --git a/packages/components/src/Page/Page.tsx b/packages/components/src/Page/Page.tsx index 5a6ba28a67..37a1d3447e 100644 --- a/packages/components/src/Page/Page.tsx +++ b/packages/components/src/Page/Page.tsx @@ -5,7 +5,7 @@ import { Breakpoints, useResizeObserver, } from "@jobber/hooks/useResizeObserver"; -import styles from "./Page.css"; +import styles from "./Page.module.css"; import { Heading } from "../Heading"; import { Text } from "../Text"; import { Content } from "../Content"; diff --git a/packages/components/src/Popover/Popover.css b/packages/components/src/Popover/Popover.module.css similarity index 100% rename from packages/components/src/Popover/Popover.css rename to packages/components/src/Popover/Popover.module.css diff --git a/packages/components/src/Popover/Popover.css.d.ts b/packages/components/src/Popover/Popover.module.css.d.ts similarity index 100% rename from packages/components/src/Popover/Popover.css.d.ts rename to packages/components/src/Popover/Popover.module.css.d.ts diff --git a/packages/components/src/Popover/Popover.tsx b/packages/components/src/Popover/Popover.tsx index 8656ef2f38..ce5901038e 100644 --- a/packages/components/src/Popover/Popover.tsx +++ b/packages/components/src/Popover/Popover.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { usePopper } from "react-popper"; import { useRefocusOnActivator } from "@jobber/hooks/useRefocusOnActivator"; -import classes from "./Popover.css"; +import classes from "./Popover.module.css"; import { ButtonDismiss } from "../ButtonDismiss"; export interface PopoverProps { diff --git a/packages/components/src/ProgressBar/ProgressBar.css b/packages/components/src/ProgressBar/ProgressBar.module.css similarity index 100% rename from packages/components/src/ProgressBar/ProgressBar.css rename to packages/components/src/ProgressBar/ProgressBar.module.css diff --git a/packages/components/src/ProgressBar/ProgressBar.css.d.ts b/packages/components/src/ProgressBar/ProgressBar.module.css.d.ts similarity index 100% rename from packages/components/src/ProgressBar/ProgressBar.css.d.ts rename to packages/components/src/ProgressBar/ProgressBar.module.css.d.ts diff --git a/packages/components/src/ProgressBar/ProgressBar.tsx b/packages/components/src/ProgressBar/ProgressBar.tsx index 180b894a7a..b73873fae7 100644 --- a/packages/components/src/ProgressBar/ProgressBar.tsx +++ b/packages/components/src/ProgressBar/ProgressBar.tsx @@ -1,7 +1,7 @@ import React from "react"; import classnames from "classnames"; -import styles from "./ProgressBar.css"; -import sizes from "./ProgressBarSizes.css"; +import styles from "./ProgressBar.module.css"; +import sizes from "./ProgressBarSizes.module.css"; import { ProgressBarStepped } from "./ProgressBarStepped"; interface ProgressBarProps { diff --git a/packages/components/src/ProgressBar/ProgressBarSizes.css b/packages/components/src/ProgressBar/ProgressBarSizes.module.css similarity index 100% rename from packages/components/src/ProgressBar/ProgressBarSizes.css rename to packages/components/src/ProgressBar/ProgressBarSizes.module.css diff --git a/packages/components/src/ProgressBar/ProgressBarSizes.css.d.ts b/packages/components/src/ProgressBar/ProgressBarSizes.module.css.d.ts similarity index 100% rename from packages/components/src/ProgressBar/ProgressBarSizes.css.d.ts rename to packages/components/src/ProgressBar/ProgressBarSizes.module.css.d.ts diff --git a/packages/components/src/ProgressBar/ProgressBarStepped.tsx b/packages/components/src/ProgressBar/ProgressBarStepped.tsx index 40b8f53b06..1def36c563 100644 --- a/packages/components/src/ProgressBar/ProgressBarStepped.tsx +++ b/packages/components/src/ProgressBar/ProgressBarStepped.tsx @@ -1,7 +1,7 @@ import React from "react"; import classnames from "classnames"; -import styles from "./ProgressBar.css"; -import sizes from "./ProgressBarSizes.css"; +import styles from "./ProgressBar.module.css"; +import sizes from "./ProgressBarSizes.module.css"; interface ProgressBarSteppedProps { readonly currentStep: number; diff --git a/packages/components/src/RadioGroup/RadioGroup.css b/packages/components/src/RadioGroup/RadioGroup.module.css similarity index 100% rename from packages/components/src/RadioGroup/RadioGroup.css rename to packages/components/src/RadioGroup/RadioGroup.module.css diff --git a/packages/components/src/RadioGroup/RadioGroup.css.d.ts b/packages/components/src/RadioGroup/RadioGroup.module.css.d.ts similarity index 100% rename from packages/components/src/RadioGroup/RadioGroup.css.d.ts rename to packages/components/src/RadioGroup/RadioGroup.module.css.d.ts diff --git a/packages/components/src/RadioGroup/RadioGroup.tsx b/packages/components/src/RadioGroup/RadioGroup.tsx index c30be5fe98..cc83a3f6c0 100644 --- a/packages/components/src/RadioGroup/RadioGroup.tsx +++ b/packages/components/src/RadioGroup/RadioGroup.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, useId } from "react"; import { InternalRadioOption } from "./RadioOption"; -import styles from "./RadioGroup.css"; +import styles from "./RadioGroup.module.css"; interface RadioGroupProps { readonly children: ReactElement | ReactElement[]; diff --git a/packages/components/src/RadioGroup/RadioOption.tsx b/packages/components/src/RadioGroup/RadioOption.tsx index ec0da84631..d1dfe63729 100644 --- a/packages/components/src/RadioGroup/RadioOption.tsx +++ b/packages/components/src/RadioGroup/RadioOption.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, useId } from "react"; import { XOR } from "ts-xor"; -import styles from "./RadioGroup.css"; +import styles from "./RadioGroup.module.css"; import { Text } from "../Text"; interface BaseRadioOptionProps { diff --git a/packages/components/src/RecurringSelect/DateCellCheckbox.css b/packages/components/src/RecurringSelect/DateCellCheckbox.module.css similarity index 100% rename from packages/components/src/RecurringSelect/DateCellCheckbox.css rename to packages/components/src/RecurringSelect/DateCellCheckbox.module.css diff --git a/packages/components/src/RecurringSelect/DateCellCheckbox.css.d.ts b/packages/components/src/RecurringSelect/DateCellCheckbox.module.css.d.ts similarity index 100% rename from packages/components/src/RecurringSelect/DateCellCheckbox.css.d.ts rename to packages/components/src/RecurringSelect/DateCellCheckbox.module.css.d.ts diff --git a/packages/components/src/RecurringSelect/RecurringSelect.css b/packages/components/src/RecurringSelect/RecurringSelect.module.css similarity index 100% rename from packages/components/src/RecurringSelect/RecurringSelect.css rename to packages/components/src/RecurringSelect/RecurringSelect.module.css diff --git a/packages/components/src/RecurringSelect/RecurringSelect.css.d.ts b/packages/components/src/RecurringSelect/RecurringSelect.module.css.d.ts similarity index 100% rename from packages/components/src/RecurringSelect/RecurringSelect.css.d.ts rename to packages/components/src/RecurringSelect/RecurringSelect.module.css.d.ts diff --git a/packages/components/src/RecurringSelect/RecurringSelect.tsx b/packages/components/src/RecurringSelect/RecurringSelect.tsx index 53e5141899..bfdccf4af5 100644 --- a/packages/components/src/RecurringSelect/RecurringSelect.tsx +++ b/packages/components/src/RecurringSelect/RecurringSelect.tsx @@ -1,7 +1,7 @@ import React from "react"; import { MonthlySelect } from "./components"; import { CurrentRecurrenceComponent } from "./CurrentRecurrenceComponent"; -import styles from "./RecurringSelect.css"; +import styles from "./RecurringSelect.module.css"; import { DurationPeriod, RecurrenceRule, diff --git a/packages/components/src/RecurringSelect/components/DayOfMonthSelect.css b/packages/components/src/RecurringSelect/components/DayOfMonthSelect.module.css similarity index 100% rename from packages/components/src/RecurringSelect/components/DayOfMonthSelect.css rename to packages/components/src/RecurringSelect/components/DayOfMonthSelect.module.css diff --git a/packages/components/src/RecurringSelect/components/DayOfMonthSelect.css.d.ts b/packages/components/src/RecurringSelect/components/DayOfMonthSelect.module.css.d.ts similarity index 100% rename from packages/components/src/RecurringSelect/components/DayOfMonthSelect.css.d.ts rename to packages/components/src/RecurringSelect/components/DayOfMonthSelect.module.css.d.ts diff --git a/packages/components/src/RecurringSelect/components/DayOfMonthSelect.tsx b/packages/components/src/RecurringSelect/components/DayOfMonthSelect.tsx index 82df083901..3bb4a7a5c9 100644 --- a/packages/components/src/RecurringSelect/components/DayOfMonthSelect.tsx +++ b/packages/components/src/RecurringSelect/components/DayOfMonthSelect.tsx @@ -1,6 +1,6 @@ import React, { useId } from "react"; -import styles from "./DayOfMonthSelect.css"; -import checkboxStyles from "../DateCellCheckbox.css"; +import styles from "./DayOfMonthSelect.module.css"; +import checkboxStyles from "../DateCellCheckbox.module.css"; import { DayOfMonth } from "../types"; interface DayOfMonthSelectProps { diff --git a/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.css b/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.module.css similarity index 100% rename from packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.css rename to packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.module.css diff --git a/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.css.d.ts b/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.module.css.d.ts similarity index 100% rename from packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.css.d.ts rename to packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.module.css.d.ts diff --git a/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.tsx b/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.tsx index 3e9f5bd94e..5d7000c1cb 100644 --- a/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.tsx +++ b/packages/components/src/RecurringSelect/components/MonthlyDayOfWeekSelect.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./MonthlyDayOfWeekSelect.css"; +import styles from "./MonthlyDayOfWeekSelect.module.css"; import { WeeklySelect } from "./WeeklySelect"; import { Text } from "../../Text"; import { WeekDay } from "../types"; diff --git a/packages/components/src/RecurringSelect/components/MonthlySelect.css b/packages/components/src/RecurringSelect/components/MonthlySelect.module.css similarity index 100% rename from packages/components/src/RecurringSelect/components/MonthlySelect.css rename to packages/components/src/RecurringSelect/components/MonthlySelect.module.css diff --git a/packages/components/src/RecurringSelect/components/MonthlySelect.css.d.ts b/packages/components/src/RecurringSelect/components/MonthlySelect.module.css.d.ts similarity index 100% rename from packages/components/src/RecurringSelect/components/MonthlySelect.css.d.ts rename to packages/components/src/RecurringSelect/components/MonthlySelect.module.css.d.ts diff --git a/packages/components/src/RecurringSelect/components/MonthlySelect.tsx b/packages/components/src/RecurringSelect/components/MonthlySelect.tsx index 5e87c22721..ad379ce663 100644 --- a/packages/components/src/RecurringSelect/components/MonthlySelect.tsx +++ b/packages/components/src/RecurringSelect/components/MonthlySelect.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./MonthlySelect.css"; +import styles from "./MonthlySelect.module.css"; import { DurationPeriod } from "../types"; import { RadioGroup, RadioOption } from "../../RadioGroup"; diff --git a/packages/components/src/RecurringSelect/components/WeeklySelect.css b/packages/components/src/RecurringSelect/components/WeeklySelect.module.css similarity index 100% rename from packages/components/src/RecurringSelect/components/WeeklySelect.css rename to packages/components/src/RecurringSelect/components/WeeklySelect.module.css diff --git a/packages/components/src/RecurringSelect/components/WeeklySelect.css.d.ts b/packages/components/src/RecurringSelect/components/WeeklySelect.module.css.d.ts similarity index 100% rename from packages/components/src/RecurringSelect/components/WeeklySelect.css.d.ts rename to packages/components/src/RecurringSelect/components/WeeklySelect.module.css.d.ts diff --git a/packages/components/src/RecurringSelect/components/WeeklySelect.tsx b/packages/components/src/RecurringSelect/components/WeeklySelect.tsx index 8196873c84..f448409425 100644 --- a/packages/components/src/RecurringSelect/components/WeeklySelect.tsx +++ b/packages/components/src/RecurringSelect/components/WeeklySelect.tsx @@ -1,6 +1,6 @@ import React, { useId } from "react"; -import styles from "./WeeklySelect.css"; -import checkboxStyles from "../DateCellCheckbox.css"; +import styles from "./WeeklySelect.module.css"; +import checkboxStyles from "../DateCellCheckbox.module.css"; import { WeekDay } from "../types"; interface WeeklySelectProps { diff --git a/packages/components/src/SideDrawer/SideDrawer.css b/packages/components/src/SideDrawer/SideDrawer.module.css similarity index 100% rename from packages/components/src/SideDrawer/SideDrawer.css rename to packages/components/src/SideDrawer/SideDrawer.module.css diff --git a/packages/components/src/SideDrawer/SideDrawer.css.d.ts b/packages/components/src/SideDrawer/SideDrawer.module.css.d.ts similarity index 100% rename from packages/components/src/SideDrawer/SideDrawer.css.d.ts rename to packages/components/src/SideDrawer/SideDrawer.module.css.d.ts diff --git a/packages/components/src/SideDrawer/SideDrawer.tsx b/packages/components/src/SideDrawer/SideDrawer.tsx index 16e16922e8..30b330b0fe 100644 --- a/packages/components/src/SideDrawer/SideDrawer.tsx +++ b/packages/components/src/SideDrawer/SideDrawer.tsx @@ -12,7 +12,7 @@ import { SideDrawerActions } from "./SideDrawerActions"; import { RegisteredComponents, SideDrawerContext } from "./SideDrawerContext"; import { SideDrawerTitle } from "./SideDrawerTitle"; import { SideDrawerToolbar } from "./SideDrawerToolbar"; -import styles from "./SideDrawer.css"; +import styles from "./SideDrawer.module.css"; import { SideDrawerBackButton } from "./SideDrawerBackButton"; import { SideDrawerFooter } from "./SideDrawerFooter"; import { Button } from "../Button"; diff --git a/packages/components/src/Spinner/Spinner.css b/packages/components/src/Spinner/Spinner.module.css similarity index 100% rename from packages/components/src/Spinner/Spinner.css rename to packages/components/src/Spinner/Spinner.module.css diff --git a/packages/components/src/Spinner/Spinner.css.d.ts b/packages/components/src/Spinner/Spinner.module.css.d.ts similarity index 100% rename from packages/components/src/Spinner/Spinner.css.d.ts rename to packages/components/src/Spinner/Spinner.module.css.d.ts diff --git a/packages/components/src/Spinner/Spinner.tsx b/packages/components/src/Spinner/Spinner.tsx index 5ba714d2fe..70d78ad900 100644 --- a/packages/components/src/Spinner/Spinner.tsx +++ b/packages/components/src/Spinner/Spinner.tsx @@ -1,6 +1,6 @@ import React from "react"; import classnames from "classnames"; -import styles from "./Spinner.css"; +import styles from "./Spinner.module.css"; interface SpinnerProps { /** diff --git a/packages/components/src/StatusIndicator/StatusIndicator.css b/packages/components/src/StatusIndicator/StatusIndicator.module.css similarity index 100% rename from packages/components/src/StatusIndicator/StatusIndicator.css rename to packages/components/src/StatusIndicator/StatusIndicator.module.css diff --git a/packages/components/src/StatusIndicator/StatusIndicator.css.d.ts b/packages/components/src/StatusIndicator/StatusIndicator.module.css.d.ts similarity index 100% rename from packages/components/src/StatusIndicator/StatusIndicator.css.d.ts rename to packages/components/src/StatusIndicator/StatusIndicator.module.css.d.ts diff --git a/packages/components/src/StatusIndicator/StatusIndicator.tsx b/packages/components/src/StatusIndicator/StatusIndicator.tsx index 033b1e6580..5b99bd7917 100644 --- a/packages/components/src/StatusIndicator/StatusIndicator.tsx +++ b/packages/components/src/StatusIndicator/StatusIndicator.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./StatusIndicator.css"; +import styles from "./StatusIndicator.module.css"; import { StatusIndicatorType } from "./StatusIndicator.type"; interface StatusIndicatorProps { diff --git a/packages/components/src/StatusLabel/StatusLabel.css b/packages/components/src/StatusLabel/StatusLabel.module.css similarity index 100% rename from packages/components/src/StatusLabel/StatusLabel.css rename to packages/components/src/StatusLabel/StatusLabel.module.css diff --git a/packages/components/src/StatusLabel/StatusLabel.css.d.ts b/packages/components/src/StatusLabel/StatusLabel.module.css.d.ts similarity index 100% rename from packages/components/src/StatusLabel/StatusLabel.css.d.ts rename to packages/components/src/StatusLabel/StatusLabel.module.css.d.ts diff --git a/packages/components/src/StatusLabel/StatusLabel.tsx b/packages/components/src/StatusLabel/StatusLabel.tsx index e0b02f0956..f7d3f883f4 100644 --- a/packages/components/src/StatusLabel/StatusLabel.tsx +++ b/packages/components/src/StatusLabel/StatusLabel.tsx @@ -1,6 +1,6 @@ import React from "react"; import classnames from "classnames"; -import styles from "./StatusLabel.css"; +import styles from "./StatusLabel.module.css"; import { StatusIndicatorType } from "../StatusIndicator/StatusIndicator.type"; import { Typography } from "../Typography"; import { StatusIndicator } from "../StatusIndicator/StatusIndicator"; diff --git a/packages/components/src/Switch/Switch.css b/packages/components/src/Switch/Switch.module.css similarity index 100% rename from packages/components/src/Switch/Switch.css rename to packages/components/src/Switch/Switch.module.css diff --git a/packages/components/src/Switch/Switch.css.d.ts b/packages/components/src/Switch/Switch.module.css.d.ts similarity index 100% rename from packages/components/src/Switch/Switch.css.d.ts rename to packages/components/src/Switch/Switch.module.css.d.ts diff --git a/packages/components/src/Switch/Switch.tsx b/packages/components/src/Switch/Switch.tsx index 45bb96ba41..eca6494cf2 100644 --- a/packages/components/src/Switch/Switch.tsx +++ b/packages/components/src/Switch/Switch.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import classnames from "classnames"; -import styles from "./Switch.css"; +import styles from "./Switch.module.css"; import { Typography } from "../Typography"; interface SwitchProps { diff --git a/packages/components/src/Table/Cells/Cell.css b/packages/components/src/Table/Cells/Cell.module.css similarity index 100% rename from packages/components/src/Table/Cells/Cell.css rename to packages/components/src/Table/Cells/Cell.module.css diff --git a/packages/components/src/Table/Cells/Cell.css.d.ts b/packages/components/src/Table/Cells/Cell.module.css.d.ts similarity index 100% rename from packages/components/src/Table/Cells/Cell.css.d.ts rename to packages/components/src/Table/Cells/Cell.module.css.d.ts diff --git a/packages/components/src/Table/Cells/Cell.tsx b/packages/components/src/Table/Cells/Cell.tsx index 8bbc23d3c7..391da1ec2a 100644 --- a/packages/components/src/Table/Cells/Cell.tsx +++ b/packages/components/src/Table/Cells/Cell.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import classnames from "classnames"; -import styles from "./Cell.css"; +import styles from "./Cell.module.css"; interface CellProps { readonly children?: ReactNode | ReactNode[]; diff --git a/packages/components/src/Table/Cells/CellNumeric.tsx b/packages/components/src/Table/Cells/CellNumeric.tsx index 2bd26d84a2..e04c7042ae 100644 --- a/packages/components/src/Table/Cells/CellNumeric.tsx +++ b/packages/components/src/Table/Cells/CellNumeric.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./Cell.css"; +import styles from "./Cell.module.css"; import { Cell } from "./Cell"; export interface CellNumericProps { diff --git a/packages/components/src/Table/Footer.tsx b/packages/components/src/Table/Footer.tsx index 66c1402d84..5f9b809511 100644 --- a/packages/components/src/Table/Footer.tsx +++ b/packages/components/src/Table/Footer.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from "react"; -import styles from "./Table.css"; +import styles from "./Table.module.css"; import { Row } from "./Row"; interface FooterProps { diff --git a/packages/components/src/Table/Header.tsx b/packages/components/src/Table/Header.tsx index 528d0ff7d7..4c99f7a051 100644 --- a/packages/components/src/Table/Header.tsx +++ b/packages/components/src/Table/Header.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from "react"; -import styles from "./Table.css"; +import styles from "./Table.module.css"; import { Row } from "./Row"; interface HeaderProps { diff --git a/packages/components/src/Table/Row.tsx b/packages/components/src/Table/Row.tsx index f4acb6b44b..827b90b272 100644 --- a/packages/components/src/Table/Row.tsx +++ b/packages/components/src/Table/Row.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from "react"; -import styles from "./Table.css"; +import styles from "./Table.module.css"; interface RowProps { readonly children: ReactElement | ReactElement[]; diff --git a/packages/components/src/Table/Table.css b/packages/components/src/Table/Table.module.css similarity index 100% rename from packages/components/src/Table/Table.css rename to packages/components/src/Table/Table.module.css diff --git a/packages/components/src/Table/Table.css.d.ts b/packages/components/src/Table/Table.module.css.d.ts similarity index 100% rename from packages/components/src/Table/Table.css.d.ts rename to packages/components/src/Table/Table.module.css.d.ts diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx index 6277f5d138..8ac39ecc82 100644 --- a/packages/components/src/Table/Table.tsx +++ b/packages/components/src/Table/Table.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from "react"; -import styles from "./Table.css"; +import styles from "./Table.module.css"; interface TableProps { readonly children: ReactElement | ReactElement[]; diff --git a/packages/components/src/Tabs/Tabs.css b/packages/components/src/Tabs/Tabs.module.css similarity index 100% rename from packages/components/src/Tabs/Tabs.css rename to packages/components/src/Tabs/Tabs.module.css diff --git a/packages/components/src/Tabs/Tabs.css.d.ts b/packages/components/src/Tabs/Tabs.module.css.d.ts similarity index 100% rename from packages/components/src/Tabs/Tabs.css.d.ts rename to packages/components/src/Tabs/Tabs.module.css.d.ts diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx index 47e5ec4551..3ee061279b 100644 --- a/packages/components/src/Tabs/Tabs.tsx +++ b/packages/components/src/Tabs/Tabs.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, ReactNode, useEffect, useState } from "react"; import classnames from "classnames"; -import styles from "./Tabs.css"; +import styles from "./Tabs.module.css"; import { useTabsOverflow } from "./hooks/useTabsOverflow"; import { Typography } from "../Typography"; diff --git a/packages/components/src/Toast/Toast.css b/packages/components/src/Toast/Toast.module.css similarity index 100% rename from packages/components/src/Toast/Toast.css rename to packages/components/src/Toast/Toast.module.css diff --git a/packages/components/src/Toast/Toast.css.d.ts b/packages/components/src/Toast/Toast.module.css.d.ts similarity index 100% rename from packages/components/src/Toast/Toast.css.d.ts rename to packages/components/src/Toast/Toast.module.css.d.ts diff --git a/packages/components/src/Toast/Toast.tsx b/packages/components/src/Toast/Toast.tsx index 5950de5063..cc4d6163da 100644 --- a/packages/components/src/Toast/Toast.tsx +++ b/packages/components/src/Toast/Toast.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { XOR } from "ts-xor"; -import styles from "./Toast.css"; +import styles from "./Toast.module.css"; import { Icon, IconColorNames, IconNames } from "../Icon"; import { Button } from "../Button"; import { Typography } from "../Typography"; diff --git a/packages/components/src/Toast/showToast.tsx b/packages/components/src/Toast/showToast.tsx index 2b4ac58adf..e8ebe85d14 100644 --- a/packages/components/src/Toast/showToast.tsx +++ b/packages/components/src/Toast/showToast.tsx @@ -12,7 +12,7 @@ import React, { // eslint-disable-next-line import/no-internal-modules import { Root, createRoot } from "react-dom/client"; import { Toast, ToastProps, ToastRef } from "./Toast"; -import styles from "./Toast.css"; +import styles from "./Toast.module.css"; const targetId = "atlantis-toast-element"; let root: Root | undefined; diff --git a/packages/components/src/Tooltip/Tooltip.css b/packages/components/src/Tooltip/Tooltip.module.css similarity index 100% rename from packages/components/src/Tooltip/Tooltip.css rename to packages/components/src/Tooltip/Tooltip.module.css diff --git a/packages/components/src/Tooltip/Tooltip.css.d.ts b/packages/components/src/Tooltip/Tooltip.module.css.d.ts similarity index 100% rename from packages/components/src/Tooltip/Tooltip.css.d.ts rename to packages/components/src/Tooltip/Tooltip.module.css.d.ts diff --git a/packages/components/src/Tooltip/Tooltip.tsx b/packages/components/src/Tooltip/Tooltip.tsx index 83840fe34e..0a92f07f18 100644 --- a/packages/components/src/Tooltip/Tooltip.tsx +++ b/packages/components/src/Tooltip/Tooltip.tsx @@ -4,7 +4,7 @@ import ReactDOM from "react-dom"; import { motion } from "framer-motion"; import { useSafeLayoutEffect } from "@jobber/hooks/useSafeLayoutEffect"; import { useIsMounted } from "@jobber/hooks/useIsMounted"; -import styles from "./Tooltip.css"; +import styles from "./Tooltip.module.css"; import { useTooltipPositioning } from "./useTooltipPositioning"; import { Placement } from "./Tooltip.types"; @@ -24,12 +24,15 @@ interface TooltipProps { * @default 'top' */ readonly preferredPlacement?: Placement; + + readonly setTabIndex?: boolean; } export function Tooltip({ message, children, preferredPlacement = "top", + setTabIndex = true, }: TooltipProps) { const [show, setShow] = useState(false); @@ -107,7 +110,10 @@ export function Tooltip({ // This is to avoid having to add those attribute as a prop on every // component we have. activator.setAttribute("aria-description", message); - activator.setAttribute("tabindex", "0"); // enable focus + + if (setTabIndex) { + activator.setAttribute("tabindex", "0"); // enable focus + } } }; diff --git a/packages/components/src/Typography/Typography.tsx b/packages/components/src/Typography/Typography.tsx index 5634e4b237..3c505f060d 100644 --- a/packages/components/src/Typography/Typography.tsx +++ b/packages/components/src/Typography/Typography.tsx @@ -1,16 +1,16 @@ /* eslint-disable import/no-internal-modules */ import React, { CSSProperties, ReactNode } from "react"; import classnames from "classnames"; -import styles from "./css/Typography.css"; -import fontSizes from "./css/FontSizes.css"; -import fontWeights from "./css/FontWeights.css"; -import textCases from "./css/TextCases.css"; -import textColors from "./css/TextColors.css"; -import emphasis from "./css/Emphasis.css"; -import truncate from "./css/Truncate.css"; -import alignment from "./css/TextAlignment.css"; -import fontFamilies from "./css/FontFamilies.css"; -import underlineStyles from "./css/Underline.css"; +import styles from "./css/Typography.module.css"; +import fontSizes from "./css/FontSizes.module.css"; +import fontWeights from "./css/FontWeights.module.css"; +import textCases from "./css/TextCases.module.css"; +import textColors from "./css/TextColors.module.css"; +import emphasis from "./css/Emphasis.module.css"; +import truncate from "./css/Truncate.module.css"; +import alignment from "./css/TextAlignment.module.css"; +import fontFamilies from "./css/FontFamilies.module.css"; +import underlineStyles from "./css/Underline.module.css"; import { UnderlineStyle, UnderlineStyleWithColor } from "./types"; interface TypographyProps { diff --git a/packages/components/src/Typography/css/Emphasis.css b/packages/components/src/Typography/css/Emphasis.module.css similarity index 100% rename from packages/components/src/Typography/css/Emphasis.css rename to packages/components/src/Typography/css/Emphasis.module.css diff --git a/packages/components/src/Typography/css/Emphasis.css.d.ts b/packages/components/src/Typography/css/Emphasis.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/Emphasis.css.d.ts rename to packages/components/src/Typography/css/Emphasis.module.css.d.ts diff --git a/packages/components/src/Typography/css/FontFamilies.css b/packages/components/src/Typography/css/FontFamilies.module.css similarity index 100% rename from packages/components/src/Typography/css/FontFamilies.css rename to packages/components/src/Typography/css/FontFamilies.module.css diff --git a/packages/components/src/Typography/css/FontFamilies.css.d.ts b/packages/components/src/Typography/css/FontFamilies.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/FontFamilies.css.d.ts rename to packages/components/src/Typography/css/FontFamilies.module.css.d.ts diff --git a/packages/components/src/Typography/css/FontSizes.css b/packages/components/src/Typography/css/FontSizes.module.css similarity index 100% rename from packages/components/src/Typography/css/FontSizes.css rename to packages/components/src/Typography/css/FontSizes.module.css diff --git a/packages/components/src/Typography/css/FontSizes.css.d.ts b/packages/components/src/Typography/css/FontSizes.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/FontSizes.css.d.ts rename to packages/components/src/Typography/css/FontSizes.module.css.d.ts diff --git a/packages/components/src/Typography/css/FontWeights.css b/packages/components/src/Typography/css/FontWeights.module.css similarity index 100% rename from packages/components/src/Typography/css/FontWeights.css rename to packages/components/src/Typography/css/FontWeights.module.css diff --git a/packages/components/src/Typography/css/FontWeights.css.d.ts b/packages/components/src/Typography/css/FontWeights.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/FontWeights.css.d.ts rename to packages/components/src/Typography/css/FontWeights.module.css.d.ts diff --git a/packages/components/src/Typography/css/TextAlignment.css b/packages/components/src/Typography/css/TextAlignment.module.css similarity index 100% rename from packages/components/src/Typography/css/TextAlignment.css rename to packages/components/src/Typography/css/TextAlignment.module.css diff --git a/packages/components/src/Typography/css/TextAlignment.css.d.ts b/packages/components/src/Typography/css/TextAlignment.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/TextAlignment.css.d.ts rename to packages/components/src/Typography/css/TextAlignment.module.css.d.ts diff --git a/packages/components/src/Typography/css/TextCases.css b/packages/components/src/Typography/css/TextCases.module.css similarity index 100% rename from packages/components/src/Typography/css/TextCases.css rename to packages/components/src/Typography/css/TextCases.module.css diff --git a/packages/components/src/Typography/css/TextCases.css.d.ts b/packages/components/src/Typography/css/TextCases.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/TextCases.css.d.ts rename to packages/components/src/Typography/css/TextCases.module.css.d.ts diff --git a/packages/components/src/Typography/css/TextColors.css b/packages/components/src/Typography/css/TextColors.module.css similarity index 100% rename from packages/components/src/Typography/css/TextColors.css rename to packages/components/src/Typography/css/TextColors.module.css diff --git a/packages/components/src/Typography/css/TextColors.css.d.ts b/packages/components/src/Typography/css/TextColors.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/TextColors.css.d.ts rename to packages/components/src/Typography/css/TextColors.module.css.d.ts diff --git a/packages/components/src/Typography/css/Truncate.css b/packages/components/src/Typography/css/Truncate.module.css similarity index 100% rename from packages/components/src/Typography/css/Truncate.css rename to packages/components/src/Typography/css/Truncate.module.css diff --git a/packages/components/src/Typography/css/Truncate.css.d.ts b/packages/components/src/Typography/css/Truncate.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/Truncate.css.d.ts rename to packages/components/src/Typography/css/Truncate.module.css.d.ts diff --git a/packages/components/src/Typography/css/Typography.css b/packages/components/src/Typography/css/Typography.module.css similarity index 100% rename from packages/components/src/Typography/css/Typography.css rename to packages/components/src/Typography/css/Typography.module.css diff --git a/packages/components/src/Typography/css/Typography.css.d.ts b/packages/components/src/Typography/css/Typography.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/Typography.css.d.ts rename to packages/components/src/Typography/css/Typography.module.css.d.ts diff --git a/packages/components/src/Typography/css/Underline.css b/packages/components/src/Typography/css/Underline.module.css similarity index 100% rename from packages/components/src/Typography/css/Underline.css rename to packages/components/src/Typography/css/Underline.module.css diff --git a/packages/components/src/Typography/css/Underline.css.d.ts b/packages/components/src/Typography/css/Underline.module.css.d.ts similarity index 100% rename from packages/components/src/Typography/css/Underline.css.d.ts rename to packages/components/src/Typography/css/Underline.module.css.d.ts diff --git a/packages/design/CHANGELOG.md b/packages/design/CHANGELOG.md index 7a8d6f41db..ef0f5c05c6 100644 --- a/packages/design/CHANGELOG.md +++ b/packages/design/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.66.0](https://github.com/GetJobber/atlantis/compare/@jobber/design@0.65.1...@jobber/design@0.66.0) (2024-10-07) + + +### Features + +* **design:** Add new colors into base palette [JOB-105102] ([#2044](https://github.com/GetJobber/atlantis/issues/2044)) ([0e3ce4d](https://github.com/GetJobber/atlantis/commit/0e3ce4d09fa00f34572fe25f2697cede178a22ac)) + + + + + ## [0.65.1](https://github.com/GetJobber/atlantis/compare/@jobber/design@0.65.0...@jobber/design@0.65.1) (2024-09-17) diff --git a/packages/design/package.json b/packages/design/package.json index 7ffc386ab9..21b4ad0936 100644 --- a/packages/design/package.json +++ b/packages/design/package.json @@ -1,6 +1,6 @@ { "name": "@jobber/design", - "version": "0.65.1", + "version": "0.66.0", "description": "Design foundation for the Jobber Atlantis Design System", "license": "MIT", "type": "module", diff --git a/packages/design/src/tokens/baseColor.tokens.json b/packages/design/src/tokens/baseColor.tokens.json index d6a34da538..8346dac2ed 100644 --- a/packages/design/src/tokens/baseColor.tokens.json +++ b/packages/design/src/tokens/baseColor.tokens.json @@ -293,34 +293,98 @@ }, "orange-": { "100": { - "$value": "hsl(36, 71%, 97%)" + "$value": "hsl(31, 71%, 97%)" }, "200": { - "$value": "hsl(34, 76%, 92%)" + "$value": "hsl(31, 74%, 93%)" }, "300": { - "$value": "hsl(32, 78%, 84%)" + "$value": "hsl(31, 72%, 85%)" }, "400": { - "$value": "hsl(33, 77%, 63%)" + "$value": "hsl(31, 83%, 64%)" }, "500": { - "$value": "hsl(33, 71%, 48%)" + "$value": "hsl(31, 80%, 48%)" }, "600": { - "$value": "hsl(33, 71%, 38%)" + "$value": "hsl(31, 90%, 37%)" }, "700": { - "$value": "hsl(33, 71%, 29%)" + "$value": "hsl(31, 100%, 27%)" }, "800": { - "$value": "hsl(33, 72%, 20%)" + "$value": "hsl(31, 100%, 18%)" }, "900": { - "$value": "hsl(33, 72%, 13%)" + "$value": "hsl(31, 90%, 12%)" }, "1000": { - "$value": "hsl(33, 70%, 9%)" + "$value": "hsl(31, 79%, 9%)" + } + }, + "teal-": { + "100": { + "$value": "hsl(190, 63%, 97%)" + }, + "200": { + "$value": "hsl(190, 63%, 92%)" + }, + "300": { + "$value": "hsl(190, 63%, 81%)" + }, + "400": { + "$value": "hsl(190, 63%, 60%)" + }, + "500": { + "$value": "hsl(190, 80%, 42%)" + }, + "600": { + "$value": "hsl(190, 80%, 33%)" + }, + "700": { + "$value": "hsl(190, 78%, 25%)" + }, + "800": { + "$value": "hsl(190, 75%, 17%)" + }, + "900": { + "$value": "hsl(190, 85%, 10%)" + }, + "1000": { + "$value": "hsl(190, 50%, 9%)" + } + }, + "purple-": { + "100": { + "$value": "hsl(253, 50%, 97%)" + }, + "200": { + "$value": "hsl(253, 50%, 94%)" + }, + "300": { + "$value": "hsl(253, 50%, 90%)" + }, + "400": { + "$value": "hsl(253, 50%, 79%)" + }, + "500": { + "$value": "hsl(253, 52%, 69%)" + }, + "600": { + "$value": "hsl(253, 50%, 59%)" + }, + "700": { + "$value": "hsl(253, 50%, 50%)" + }, + "800": { + "$value": "hsl(253, 50%, 34%)" + }, + "900": { + "$value": "hsl(253, 50%, 23%)" + }, + "1000": { + "$value": "hsl(253, 50%, 16%)" } } }, @@ -363,30 +427,30 @@ }, "purple-": { "light": { - "$value": "rgb(172, 155, 214)" + "$value": "{color.base.purple-.400}" }, "lighter": { - "$value": "rgb(207, 198, 231)" + "$value": "{color.base.purple-.300}" }, "lightest": { - "$value": "rgb(237, 234, 246)" + "$value": "{color.base.purple-.100}" } }, "teal": { - "$value": "rgb(62, 173, 146)" + "$value": "{color.base.teal-.500}" }, "teal-": { "light": { - "$value": "rgb(120, 198, 179)" + "$value": "{color.base.teal-.400}" }, "lighter": { - "$value": "rgb(178, 222, 211)" + "$value": "{color.base.teal-.300}" }, "lightest": { - "$value": "rgb(226, 243, 239)" + "$value": "{color.base.teal-.200}" }, "dark": { - "$value": "rgb(40, 112, 95)" + "$value": "{color.base.teal-.700}" } } } diff --git a/packages/design/src/tokens/dark.tokens.json b/packages/design/src/tokens/dark.tokens.json index ca600f9509..e303319af8 100644 --- a/packages/design/src/tokens/dark.tokens.json +++ b/packages/design/src/tokens/dark.tokens.json @@ -11,7 +11,7 @@ "$value": "hsl(197, 18%, 25%)" }, "900": { - "$value": "hsl(197, 15%, 18%)" + "$value": "hsl(197, 15%, 16%)" }, "1000": { "$value": "hsl(197, 10%, 10%)" diff --git a/packages/docx/CHANGELOG.md b/packages/docx/CHANGELOG.md index 993670eefe..20f9185c52 100644 --- a/packages/docx/CHANGELOG.md +++ b/packages/docx/CHANGELOG.md @@ -1,8 +1,19 @@ -# Changelog +# Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.4.0](https://github.com/GetJobber/atlantis/compare/@jobber/docx@0.3.1...@jobber/docx@0.4.0) (2024-10-08) + + +### Features + +* Upgrade to Node 18 [Feature Branch][JOB-62820] ([#1141](https://github.com/GetJobber/atlantis/issues/1141)) ([8b766cd](https://github.com/GetJobber/atlantis/commit/8b766cd1ebb215610ff3b0babe5d1f05540872b6)), closes [#1142](https://github.com/GetJobber/atlantis/issues/1142) [#1149](https://github.com/GetJobber/atlantis/issues/1149) [#1150](https://github.com/GetJobber/atlantis/issues/1150) + + + + + ## [0.3.1](https://github.com/GetJobber/atlantis/compare/@jobber/docx@0.3.0...@jobber/docx@0.3.1) (2023-02-28) **Note:** Version bump only for package @jobber/docx diff --git a/packages/docx/package.json b/packages/docx/package.json index e1d23494c5..6e67789b3c 100644 --- a/packages/docx/package.json +++ b/packages/docx/package.json @@ -1,6 +1,6 @@ { "name": "@jobber/docx", - "version": "0.3.1", + "version": "0.4.0", "private": true, "description": "Internal Docs components.", "license": "MIT", diff --git a/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.css b/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.module.css similarity index 100% rename from packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.css rename to packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.module.css diff --git a/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.css.d.ts b/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.module.css.d.ts similarity index 100% rename from packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.css.d.ts rename to packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.module.css.d.ts diff --git a/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.tsx b/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.tsx index 077520bad8..8ba062cd5b 100644 --- a/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.tsx +++ b/packages/docx/src/ColorSwatches/ColorSwatch/ColorSwatch.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./ColorSwatch.css"; +import styles from "./ColorSwatch.module.css"; interface ColorSwatchProps { readonly name: string; diff --git a/packages/docx/src/ColorSwatches/ColorSwatches.css b/packages/docx/src/ColorSwatches/ColorSwatches.module.css similarity index 100% rename from packages/docx/src/ColorSwatches/ColorSwatches.css rename to packages/docx/src/ColorSwatches/ColorSwatches.module.css diff --git a/packages/docx/src/ColorSwatches/ColorSwatches.css.d.ts b/packages/docx/src/ColorSwatches/ColorSwatches.module.css.d.ts similarity index 100% rename from packages/docx/src/ColorSwatches/ColorSwatches.css.d.ts rename to packages/docx/src/ColorSwatches/ColorSwatches.module.css.d.ts diff --git a/packages/docx/src/ColorSwatches/ColorSwatches.tsx b/packages/docx/src/ColorSwatches/ColorSwatches.tsx index bd70052f3b..eed7390071 100644 --- a/packages/docx/src/ColorSwatches/ColorSwatches.tsx +++ b/packages/docx/src/ColorSwatches/ColorSwatches.tsx @@ -1,6 +1,6 @@ import React from "react"; import { ColorSwatch } from "./ColorSwatch"; -import styles from "./ColorSwatches.css"; +import styles from "./ColorSwatches.module.css"; interface Color { readonly name: string; diff --git a/packages/docx/src/ComponentStatus/StatusShield/StatusShield.css b/packages/docx/src/ComponentStatus/StatusShield/StatusShield.module.css similarity index 100% rename from packages/docx/src/ComponentStatus/StatusShield/StatusShield.css rename to packages/docx/src/ComponentStatus/StatusShield/StatusShield.module.css diff --git a/packages/docx/src/ComponentStatus/StatusShield/StatusShield.css.d.ts b/packages/docx/src/ComponentStatus/StatusShield/StatusShield.module.css.d.ts similarity index 100% rename from packages/docx/src/ComponentStatus/StatusShield/StatusShield.css.d.ts rename to packages/docx/src/ComponentStatus/StatusShield/StatusShield.module.css.d.ts diff --git a/packages/docx/src/ComponentStatus/StatusShield/StatusShield.tsx b/packages/docx/src/ComponentStatus/StatusShield/StatusShield.tsx index 7f492998bb..0c484f4ea8 100644 --- a/packages/docx/src/ComponentStatus/StatusShield/StatusShield.tsx +++ b/packages/docx/src/ComponentStatus/StatusShield/StatusShield.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./StatusShield.css"; +import styles from "./StatusShield.module.css"; const statusColor = { fail: "ef5733",