@alma-oss/spirit-web-react 4.2.1 → 4.4.2

package/DEPRECATIONS.md

@@ -0,0 +1,69 @@
+# Deprecations List
+
+This document lists all deprecations that will be removed in the next major version of the _spirit-web-react_ package.
+
+> Please follow the migration guides to safely upgrade your design system components.
+
+## Deprecations
+
+👉 [What are deprecations?][readme-deprecations]
+
+### UncontrolledCollapse `isDisposable`
+
+The `hideOnCollapse` prop was removed, please use `isDisposable` instead.
+
+#### Migration Guide
+
+We are providing a [codemod][codemod-collapse] to assist with this change.
+
+- `<UncontrolledCollapse id="collapse" renderTrigger={…} hideOnCollapse … />` → `<UncontrolledCollapse id="collapse" renderTrigger={…} isDisposable … />`
+
+### Flex
+
+The direction values `row` and `column` were removed, please use `horizontal` and `vertical` instead.
+
+#### Migration Guide
+
+We are providing a [codemod][codemod-flex] to assist with this change.
+
+- `<Flex direction="row" />` → ` <Flex direction="horizontal" />`
+- `<Flex direction="column" />` → `<Flex direction="vertical" />`
+- `<Flex direction={{ mobile: 'column', tablet: 'row' }} />` → `<Flex direction={{ mobile: 'vertical', tablet: 'horizontal' }} />`
+
+### Header
+
+The `Header` component is deprecated, please use the `UNSTABLE_Header` component instead.
+
+### Stack
+
+If you are using the `Stack` component with dividers, you must wrap each item inside the `Stack` component with a `StackItem` component.
+
+#### Migration Guide
+
+```jsx
+<Stack hasIntermediateDividers>
+  <>Item</>
+  <>Item</>
+</Stack>
+```
+
+↓
+
+```jsx
+<Stack hasIntermediateDividers>
+  <StackItem>Item</StackItem>
+  <StackItem>Item</StackItem>
+</Stack>
+```
+
+### Button and ButtonLink
+
+The `isBlock` property will be removed in the next major version.
+
+For more information, see documentation for [Button][button] and [ButtonLink][button-link] components.
+
+[button]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/Button/README.md#how-to-make-a-fluid-button
+[button-link]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/ButtonLink/README.md#how-to-make-a-fluid-buttonlink
+[codemod-collapse]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/codemods/src/transforms/v4/web-react/README.md#v4web-reactcollapse-isdisposable-prop--uncontrolledcollapse-hideoncollapse-to-isdisposable-prop-change
+[codemod-flex]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/codemods/src/transforms/v4/web-react/README.md#v4web-reactflex-direction-values---flex-direction-prop-values-row-to-horizontal-and-column-to-vertical
+[readme-deprecations]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/README.md#deprecations

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Alma Career Czechia s.r.o., formerly LMC s.r.o.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/MIGRATIONS.md

@@ -0,0 +1,14 @@
+# Migration Guides
+
+The migration guides for new versions of this package are located in the root of the repository
+in the `docs/migrations/web-react` directory.
+
+You can find the migration guide for a specific version by following the links below:
+
+- [Migration Guide to version 1][migration-guide-v1]
+- [Migration Guide to version 2][migration-guide-v2]
+- [Migration Guide to version 3][migration-guide-v3]
+
+[migration-guide-v1]: https://github.com/alma-oss/spirit-design-system/blob/main/docs/migrations/web-react/migration-v1.md
+[migration-guide-v2]: https://github.com/alma-oss/spirit-design-system/blob/main/docs/migrations/web-react/migration-v2.md
+[migration-guide-v3]: https://github.com/alma-oss/spirit-design-system/blob/main/docs/migrations/web-react/migration-v3.md

package/README.md

@@ -8,6 +8,18 @@
 
 > React implementation of Spirit Design System components.
 
+- [Install](#install)
+- [Usage](#usage)
+- [Additional Attributes](#additional-attributes)
+- [Testing](#testing)
+- [Styling](#styling)
+- [Types Generated From Design Tokens](#types-generated-from-design-tokens)
+- [Controlled vs Uncontrolled Components](#controlled-vs-uncontrolled-components)
+- [Deprecations](#deprecations)
+- [Examples](#examples)
+- [Implementing from Figma](#implementing-from-figma)
+- [License](#license)
+
 ## Install
 
 Expecting you have `react` and `react-dom` installed in your app, run:
@@ -77,11 +89,9 @@ Most components also accept native HTML attributes based on the component's elem
 
 ## Testing
 
-### Accessibility Testing
+### End-to-End Testing
 
-- Accessibility tests live alongside component specs under `src/components/**/__tests__/*accessibility.test.tsx`.
-- Use `runAxe` from `@local/tests` and assert with `expect(results).toHaveNoAxeViolations()` to guard against regressions.
-- Detailed authoring guidance is available in [`docs/contribution/accessibility-testing.md`][accessibility-testing].
+For detailed information about E2E tests including visual regression and accessibility testing, please refer to [`docs/contribution/e2e-testing.md`][e2e-testing] and [`docs/contribution/accessibility-testing.md`][accessibility-testing].
 
 ## Styling
 
@@ -190,7 +200,7 @@ You can use the `Uncontrolled` variant for faster development.
 This package uses the deprecation warnings for props, functions and components that will be removed or replaced in the next major release.
 Check your browser console to see if you are using any of the deprecated functionality.
 
-![Deprecations in the Browser's console](https://github.com/lmc-eu/spirit-design-system/blob/main/static/deprecations-browser-console.png?raw=true)
+![Deprecations in the Browser's console][deprecations-console-img]
 
 👉 [See the DEPRECATIONS file][all-deprecations] for the list of all deprecations.
 
@@ -226,16 +236,61 @@ afterEach(() => {
 
 👀 See [examples][examples] for a live demo.
 
+## Implementing From Figma
+
+If you are implementing Spirit components from Figma designs — with or without AI assistance — we provide and recommend
+the following tools to help you.
+
+### Figma Code Connect
+
+[Figma Code Connect][figma-code-connect] links Figma components to code snippets. Use it to see how each design component
+is written in code and which props to use (e.g. `size`, `iconName`, `textColor`) when implementing. With Figma Dev Mode
+you can read the snippets directly in Figma in the "Code" tab.
+
+![Figma Code Connect][figma-code-connect-image]
+
+### AI-Assisted Implementation
+
+If you use AI-powered tools to implement UI from Figma, the following help the agent produce accurate Spirit code.
+
+**Figma MCP** — [Figma MCP][figma-mcp] (Model Context Protocol) lets the AI read your Figma files: design context,
+screenshots, and metadata for selected nodes. With the Figma desktop app open and the Figma MCP server configured
+in your tool, the agent can use tools such as `get_design_context` and `get_screenshot`.
+See [Figma MCP documentation][figma-mcp] for more information.
+
+**Figma-to-Spirit skill** — We also provide an agent skill [Figma to Spirit][figma-skill] that teaches your AI-powered
+tool how to convert Figma designs into React using Spirit Web React components (layout, typography, cards, and rules
+for reading props from Figma and Code Connect). Install it with:
+
+```bash
+npx skills add https://github.com/alma-oss/spirit-design-system --skill figma-to-spirit
+```
+
+To learn more about skills, see [Skills documentation][skills-docs].
+
+### Summary
+
+- In Figma, use Figma Code Connect to see and copy the code for the component you are implementing.
+- If you use AI, install the Figma MCP and Figma-to-Spirit skill and then prompt the agent to implement the UI from Figma.
+
 ## License
 
-See the [LICENSE](LICENSE.md) file for information.
+See the [LICENSE][license] file for information.
 
-[accessibility-testing]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/contribution/accessibility-testing.md
-[all-deprecations]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/DEPRECATIONS.md
-[dictionary-breakpoint]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#breakpoint
+[accessibility-testing]: https://github.com/alma-oss/spirit-design-system/tree/main/docs/contribution/accessibility-testing.md
+[all-deprecations]: https://github.com/alma-oss/spirit-design-system/tree/main/packages/web-react/DEPRECATIONS.md
+[deprecations-console-img]: https://github.com/alma-oss/spirit-design-system/blob/main/static/deprecations-browser-console.png?raw=true
+[dictionary-breakpoint]: https://github.com/alma-oss/spirit-design-system/blob/main/docs/DICTIONARIES.md#breakpoint
+[e2e-testing]: https://github.com/alma-oss/spirit-design-system/tree/main/docs/contribution/e2e-testing.md
 [examples]: https://spirit-design-system-storybook.netlify.app
+[figma-code-connect]: https://developers.figma.com/docs/code-connect/
+[figma-code-connect-image]: https://github.com/alma-oss/spirit-design-system/blob/main/static/figma-code-connect.png?raw=true
+[figma-mcp]: https://developers.figma.com/docs/figma-mcp-server/
+[figma-skill]: https://skills.sh/alma-oss/spirit-design-system/figma-to-spirit
+[license]: LICENSE.md
 [react-controlled]: https://reactjs.org/docs/forms.html#controlled-components
 [react-uncontrolled]: https://reactjs.org/docs/uncontrolled-components.html
-[web-docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#readme
-[web-pkg-rebrand]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#rebranding
-[web-pkg-prefixes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#prefixing-css-class-names
+[skills-docs]: https://skills.sh/docs
+[web-docs]: https://github.com/alma-oss/spirit-design-system/tree/main/packages/web#readme
+[web-pkg-prefixes]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web/README.md#prefixing-css-class-names
+[web-pkg-rebrand]: https://github.com/alma-oss/spirit-design-system/tree/main/packages/web#rebranding