), - ), -})); +jest.mock('@sumup-oss/circuit-ui', () => ({ + ...jest.requireActual('@sumup-oss/circuit-ui'), + ActionMenu: jest.fn().mockImplementation(() =>

), + ), +})); - const StyledPopover = styled(Popover)` + const StyledPopover = styled(ActionMenu)` ``` -------------------------------- ### Migrating Input Component Optional Label v5 to v6 Source: https://github.com/sumup-oss/circuit-ui/blob/main/MIGRATION.md Shows the migration path for labels that included additional content like an 'Optional' indicator. In v6, the `label` prop only accepts a string, and the `optionalLabel` prop should be used for such indicators to improve accessibility. ```diff - const optionalStyles = (theme) => css` - color: ${theme.colors.n700}; - `; Address line 2 (Optional)} + label="Address line 2" + optionalLabel="Optional" />; ``` -------------------------------- ### Using Style Mixins with Emotion TSX Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/styles/style-mixins.mdx Demonstrates how to apply Circuit UI style mixins using Emotion's `css` prop and `styled` components. Shows examples of passing mixins directly, providing options, using them within style functions, and combining them with styled components. ```tsx import { clearfix, spacing } from '@sumup-oss/circuit-ui'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; // Pass the style mixin directly to the `css` prop const Basic = () =>

; // Some style mixins accept options const Options = () =>

; // Style mixins can also be used in a style function... const someStyles = ({ theme }) => css` &:focus { ${focusOutline()}; } `; // ...or passed to a styled component directly const StyledComponent = styled.div(someStyles, clearfix); ``` -------------------------------- ### Using Utility Classes with clsx Helper in React Source: https://github.com/sumup-oss/circuit-ui/blob/main/MIGRATION.md Demonstrates how to use the new string utility classes exported by Circuit UI with the `clsx` helper function to conditionally apply multiple classes to a React component. This is useful for applications not using Emotion.js. ```tsx import { clsx, utilClasses } from '@sumup/circuit-ui'; function Component() { return

; } ``` -------------------------------- ### Using spacing Style Mixin TSX Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/styles/style-mixins.mdx Demonstrates practical examples of using the `spacing` style mixin. It shows how to apply uniform spacing to all sides, specify different spacing for individual sides using an object, and use the 'auto' value for horizontal centering. ```tsx // A single spacing string is applied to all sides const AllSides = () =>

; // Specify spacing for individual sides in an object const IndividualSides = () => (

); // The `spacing` mixin supports the special values `0` and `auto`, // this can be useful to horizontally center an element const HorizontallyCentered = () => (

); ``` -------------------------------- ### Replacing Tracking Prop with Event Handlers and Collector Hook Source: https://github.com/sumup-oss/circuit-ui/blob/main/MIGRATION.md Illustrates the migration from the deprecated `tracking` prop on Circuit UI components to using standard event handlers (`onClick`) and the `useClickTrigger` hook from `@sumup/collector` to dispatch tracking events. An ESLint rule can help identify deprecated prop usage. ```diff import { Button } from '@sumup/circuit-ui'; +import { useClickTrigger } from '@sumup/collector'; function Component() { + const dispatch = useClickTrigger(); + + const handleClick = () => { + dispatch({ + component: 'button', + label: 'track-button', + customParameters: { key: 'value' }, + }); + // ...other logic + } return ( ); } ``` -------------------------------- ### Using Dialog in Modal Mode (TSX) Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/Dialog/Dialog.mdx Illustrates how to render the Dialog component as a modal overlay by setting the `isModal` prop to `true`. This example also uses React state to manage the dialog's visibility. ```tsx import { Dialog, Body, Button, Heading } from "@sumup-oss/circuit-ui"; import { useState } from "react"; function Component() { const [open, setOpen] = useState(false); return ( <> ); } ``` -------------------------------- ### Updating Text Component Prop Usage Source: https://github.com/sumup-oss/circuit-ui/blob/main/MIGRATION.md This snippet demonstrates the updated way to pass configuration values to components like Text after the removal of static properties. Instead of using static properties (e.g., Text.KILO), string literals are now used (e.g., "kilo"). This change is part of the migration to TypeScript, which provides type checking and autocomplete. ```diff import { Text } from '@sumup/circuit-ui'; const Hello = () => ( - Hello + Hello ); ``` -------------------------------- ### Migrating Design Tokens to CSS Custom Properties Source: https://github.com/sumup-oss/circuit-ui/blob/main/MIGRATION.md Shows the change from using the deprecated JavaScript `theme` object property for border radius to the new CSS custom property `--cui-border-radius.circle`. This migration is recommended and can be automated with an ESLint rule. ```diff -${theme.borderRadius.circle} +var(--cui-border-radius.circle) ``` -------------------------------- ### Creating Production Build Source: https://github.com/sumup-oss/circuit-ui/blob/main/templates/nextjs/README.md Generates an optimized production build of the Next.js application. The output is placed in the `.next/` folder and is ready for deployment. ```shell npm run build ``` -------------------------------- ### Building Production Site Source: https://github.com/sumup-oss/circuit-ui/blob/main/templates/astro/README.md Builds the Astro project for production, generating static assets in the ./dist/ directory. ```npm npm run build ``` -------------------------------- ### Using HTML Description Lists (`dl`) Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/List/List.mdx Illustrates the usage of HTML description lists (`

`) for name-value pairs, such as terms and definitions, metadata, or questions and answers. ```html

Circuit: A closed, usually circular line that goes around an object or area.
Account number: 12345
How do I find my account number?: You can find your account number under "Profile details".

``` -------------------------------- ### Enter Changeset Prerelease Mode (bash) Source: https://github.com/sumup-oss/circuit-ui/blob/main/docs/contributing/4-release-process.mdx To initiate a prerelease for a specific branch (`next` or `canary`), first switch to the desired branch, then run the `npx changeset pre enter` command with the channel name. This creates a `pre.json` file to signal prerelease mode. ```bash git checkout next # or `canary` npx changeset pre enter next # or `canary` ``` -------------------------------- ### Building Packages npm Shell Source: https://github.com/sumup-oss/circuit-ui/blob/main/CONTRIBUTING.md Runs the build script to build all packages once. ```Shell npm run build ``` -------------------------------- ### Preload Font File - HTML Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/design-tokens/README.md Add a preload link in the global `` element to speed up font loading. Choose the appropriate subset based on supported languages. ```html ``` -------------------------------- ### Running Linting and Formatting (bash) Source: https://github.com/sumup-oss/circuit-ui/blob/main/docs/contributing/3-testing.mdx Use these commands to manually run linting and formatting checks. The second command attempts to automatically fix identifiable issues using Prettier and ESLint. ```bash npm run lint # Automatically fix (some) issues npm run lint:fix ``` -------------------------------- ### Correct imports using new scope Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/eslint-plugin-circuit-ui/renamed-package-scope/README.md Examples of import statements that use the new `@sumup-oss` package scope, which is the correct usage according to this ESLint rule. ```TypeScript import { Input } from '@sumup-oss/circuit-ui'; import { Search } from '@sumup-oss/icons'; import '@sumup-oss/design-tokens/light.css'; ``` -------------------------------- ### Configuring Circuit UI Stylelint Rules (JSON) Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/stylelint-plugin-circuit-ui/README.md This JSON snippet illustrates how to enable and configure specific rules provided by the @sumup-oss/stylelint-plugin-circuit-ui within the 'rules' section of your Stylelint configuration. ```json { "rules": { "circuit-ui/": true } } ``` -------------------------------- ### Loading Icon from URL (HTML) Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/icons/README.md Demonstrates how to load an icon directly from the library's CDN using a standard HTML tag. The 'src' attribute points to the specific icon file URL. ```html checkmark

``` -------------------------------- ### Linting Code with ESLint Source: https://github.com/sumup-oss/circuit-ui/blob/main/templates/nextjs/README.md Runs the ESLint linter configured by Foundry to check the project's code for potential problems and style violations. Includes automatic fixes where possible. ```shell npm run lint ``` -------------------------------- ### Incorrect imports using old scope Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/eslint-plugin-circuit-ui/renamed-package-scope/README.md Examples of import statements that use the old `@sumup` package scope, which this ESLint rule flags as incorrect and can automatically fix. ```TypeScript import { Input } from '@sumup/circuit-ui'; import { Search } from '@sumup/icons'; import '@sumup/design-tokens/light.css'; ``` -------------------------------- ### Importing Documentation Components and Stories Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/ButtonGroup/ButtonGroup.mdx Imports necessary components from the Storybook documentation helper library and the component's stories file to render the documentation page. ```JavaScript import { Meta, Status, Props, Story } from '../../../../.storybook/components'; import * as Stories from './ButtonGroup.stories'; ``` -------------------------------- ### Importing Documentation Components (JavaScript) Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/Hr/Hr.mdx Imports necessary components (`Meta`, `Status`, `Props`, `Story`) from the storybook documentation helper path for use in the documentation file. ```javascript import { Meta, Status, Props, Story } from '../../../../.storybook/components'; ``` -------------------------------- ### Importing Storybook Documentation Components Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/Select/Select.mdx Imports essential components (Meta, Status, Props, Story) from the Storybook components library, typically used for structuring and rendering documentation pages. ```JavaScript import { Meta, Status, Props, Story } from '../../../../.storybook/components'; ``` -------------------------------- ### Implementing Uncontrolled CheckboxGroup in React Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.mdx Shows how to use the CheckboxGroup component as an uncontrolled component in React. It utilizes `useRef` to potentially access checkbox elements directly, although the example primarily uses `defaultValue`. ```tsx import { useRef } from 'react'; import { CheckboxGroup } from '@sumup-oss/circuit-ui'; function Uncontrolled() { const checkboxRefs = useRef({}); const setCheckboxRef = (input: HTMLInputElement) => { checkboxRefs.current[input.value] = input; }; const options = [ { label: 'Apple', value: 'apple', ref: setCheckboxRef, }, ]; return ( ); } ``` -------------------------------- ### Triggering Notification Toast with Hook (TSX) Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx Illustrates how to use the `useNotificationToast` hook within a component to programmatically display a notification toast. It shows how to get the `setToast` function and call it with configuration options like `variant` and `body`. ```tsx import { useNotificationToast, Button } from '@sumup-oss/circuit-ui'; export function App({}) { const { setToast } = useNotificationToast(); const handleClick = () => { setToast({ variant: 'success', body: 'This is a toast message', }); }; return ; } ``` -------------------------------- ### Using Storybook Components in Documentation Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/circuit-ui/components/SkipLink/SkipLink.mdx Demonstrates how to use Storybook components like Meta, Status, Story, and Props within the documentation file to link to stories, display status, and render props tables. ```JSX ``` -------------------------------- ### Update PlainDateRange Selection - Calendar - TSX Source: https://github.com/sumup-oss/circuit-ui/blob/main/MIGRATION.md Demonstrates how to use the `updatePlainDateRange` helper function with the Calendar component's `onSelect` prop. This is necessary because the `PlainDateRange` type changed from an array to an object, affecting how selections are managed. ```tsx import { useState } from 'react'; import { Calendar, updatePlainDateRange } from '@sumup-oss/circuit-ui'; function Component() { const [selection, setSelection] = useState({}); return ( updatePlainDateRange(prevSelection, date) )} /> ); } ``` -------------------------------- ### Incorrect Usage of Invalid Circuit UI Custom Property (CSS) Source: https://github.com/sumup-oss/circuit-ui/blob/main/packages/eslint-plugin-circuit-ui/no-invalid-custom-properties/README.md This code snippet demonstrates an example of using an invalid Circuit UI custom property (`--cui-invalid-property`) which will be flagged as an error by the `no-invalid-custom-properties` lint rule. ```css color: var(--cui-invalid-property); ```