@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_patterns-shadow-docs.md

@@ -0,0 +1,195 @@
+Shadow
+======
+
+Overview
+--------
+
+The shadow pattern allows you to wrap your content in the shadow DOM, allowing you to isolate your styles from the rest of the application. This is useful when you want to create a component that has its own styles, without affecting the rest of the application (such as microfrontends).
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+[](./iframe.html?id=patterns-shadow--shadow)
+
+```
+
+<IressShadow\>
+  <IressPanel\>
+    Content inside shadow DOM  </IressPanel\>
+</IressShadow\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Children to be rendered inside the shadow DOM
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV(Component, { ...restProps, className: cx(className, GlobalCSSClass.Panel) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Panel/Panel.tsx", lineNumber: 26, columnNumber: 1 }, this)
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| fontFaceUrls | 
+
+Optional array of font URLs to be included in the parent document head. By default it will include the default fonts from `@iress-oss/ids-tokens` (e.g., \['[https://fonts.googleapis.com/css?family=Roboto](https://fonts.googleapis.com/css?family=Roboto)'\]
+
+string\[\]
+
+ | \[...defaultFonts\] | Set object |
+| noIcons | 
+
+If true, the Iress icon stylesheet will not be included in the shadow DOM and the head.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| stylesheetContents | 
+
+Optional array of stylesheet contents to be included in the shadow DOM (e.g. { styleId: '.my-class { color: red; }' })
+
+Record<string, string>
+
+ | { } | Set object |
+| stylesheetUrls | 
+
+Optional array of stylesheet URLs to be included in the shadow DOM (e.g., \['[https://example.com/style.css](https://example.com/style.css)'\])
+
+string\[\]
+
+ | \[\] | Set object |
+
+Usage
+-----
+
+This is a simple component that is an alternative to the `IressProvider`. To use it, simply wrap your content in the `IressShadow` component.
+
+It has similar props to the `IressProvider`, however it will apply the styles to the correct area depending on where its needed.
+
+*   Font faces are injected into the document head, as they cannot be injected into the shadow DOM
+*   The IDS styles are injected into the shadow DOM
+*   The icon stylesheet is injected into both the document head and the shadow DOM, as the icon stylesheet includes both font face and icon styles
+
+**Note:** The `IressShadow` component does not create a custom element, it simply creates a shadow root on a `div` element.
+
+[](./iframe.html?id=patterns-shadow--shadow)
+
+```
+
+<IressShadow\>
+  <IressPanel\>
+    Content inside shadow DOM  </IressPanel\>
+</IressShadow\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Children to be rendered inside the shadow DOM
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV(Component, { ...restProps, className: cx(className, GlobalCSSClass.Panel) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Panel/Panel.tsx", lineNumber: 26, columnNumber: 1 }, this)
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| fontFaceUrls | 
+
+Optional array of font URLs to be included in the parent document head. By default it will include the default fonts from `@iress-oss/ids-tokens` (e.g., \['[https://fonts.googleapis.com/css?family=Roboto](https://fonts.googleapis.com/css?family=Roboto)'\]
+
+string\[\]
+
+ | \[...defaultFonts\] | Set object |
+| noIcons | 
+
+If true, the Iress icon stylesheet will not be included in the shadow DOM and the head.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| stylesheetContents | 
+
+Optional array of stylesheet contents to be included in the shadow DOM (e.g. { styleId: '.my-class { color: red; }' })
+
+Record<string, string>
+
+ | { } | Set object |
+| stylesheetUrls | 
+
+Optional array of stylesheet URLs to be included in the shadow DOM (e.g., \['[https://example.com/style.css](https://example.com/style.css)'\])
+
+string\[\]
+
+ | \[\] | Set object |

package/generated/docs/components_resources-code-katas-docs.md

@@ -0,0 +1,25 @@
+Code Katas
+==========
+
+A code kata is an exercise in programming that helps a programmer hone their skills through practice and repetition. Code katas are a great way to learn a new language, practice a new technique, or just to keep your skills fresh. They are also a great way to get a team to practice working together.
+
+In our case, we will be using code katas to help you practice using the Iress Design System (IDS) components.
+
+1.  Lightsaber Order Form: This code kata was created specifically to introduce version five to Iress product engineering teams. It allows you to practice using the latest `IressForm` and its controlled elements, as well as practice writing tests efficiently using React Testing Library out-of-the-box.
+2.  Pizza Ordering: This is an older kata that is great for practicing UI in general.
+
+The code katas can be found in the Code Katas repository.
+
+Want more code katas?
+---------------------
+
+If you want to do some more code katas, check out the following resources. You can even use IDS for the UI based ones to put in some more practice.
+
+*   Iress code katas
+*   [Codurance](https://www.codurance.com/katas)
+*   [TDD Buddy](https://tddbuddy.com/katas.html)
+*   [Code Kata](http://codekata.com/)
+*   [Awesome Katas](https://github.com/gamontal/awesome-katas)
+*   [CSS Battle](https://cssbattle.dev/)
+*   [Code Chef](https://www.codechef.com/)
+*   [Project Euler](https://projecteuler.net/)

package/generated/docs/components_resources-introduction-docs.md

@@ -0,0 +1,28 @@
+Resources
+=========
+
+These are additional resources to help you make the most of the Iress Design System.
+
+Migration guides
+----------------
+
+These guides help you transition from previous versions of the Iress Design System to the latest version. They provide step-by-step instructions and highlight the changes made in each version.
+
+1.  [Version 5 to 6](https://docs.google.com/document/d/17K81rHBZjjF_tsrC8QFrSsmjrC0IJu_bpU4sB2N7PSQ/edit?usp=sharing)
+2.  [Version 4 to 5](/docs/resources-migration-guides-from-v4-to-v5--docs)
+
+MCP Server
+----------
+
+The MCP Server provides AI agents with contextual information about the Iress Design System (IDS) components, allowing them to assist with development tasks such as writing code and UIs consistently, generating documentation, and answering questions about the design system, and all according to best practice.
+
+[View MCP Server](/?path=/docs/resources-mcp-server--docs)
+
+Code katas
+----------
+
+These are exercises to help you practice and improve your skills with the Iress Design System. They cover various components and patterns, providing a hands-on way to learn.
+
+You can even try using the [MCP Server](/?path=/docs/resources-mcp-server--docs) to help you complete the code katas by asking questions about the components and patterns.
+
+[View code katas](/?path=/docs/resources-code-katas--docs)

package/generated/docs/components_resources-mcp-server-docs.md

@@ -0,0 +1,23 @@
+MCP Server
+==========
+
+The MCP Server provides AI agents with contextual information about the Iress Design System (IDS) components, allowing them to assist with development tasks such as writing code and UIs consistently, generating documentation, and answering questions about the design system, and all according to best practice.
+
+[
+
+View MCP Server on NPM
+
+](https://www.npmjs.com/package/@iress-oss/ids-mcp-server)
+
+* * *
+
+Installation
+------------
+
+[
+
+Install on Visual Studio Code
+
+](vscode:mcp/install?%7B%22name%22%3A%22iress-design-system%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40iress-oss%2Fids-mcp-server%22%5D%7D)
+
+For other MCP clients or manual configuration, check the [MCP Server README](https://www.npmjs.com/package/@iress-oss/ids-mcp-server)

package/generated/docs/components_resources-migration-guides-from-v4-to-v5-docs.md

@@ -0,0 +1,142 @@
+Migration from v4 to v5
+=======================
+
+This is a step-by-step guide for upgrading your application from IDS v4 to v5.
+
+Updating your dependencies
+--------------------------
+
+### Upgrade IDS and themes
+
+Update your dependencies in your `package.json` file to the following:
+
+or run:
+
+### Upgrade React
+
+The minimum required version of React is 17. If you are using an older version of React, you will need to update it.
+
+Updating imports
+----------------
+
+### Changing components
+
+Update your imports to the new package name:
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressButton } from '@iress/components-react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressButton } from '@iress-oss/ids-components';</pre></td></tr></tbody></table>
+
+You can run both packages together, so you can migrate components one by one.
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressModal, IressButton } from '@iress/components-react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressModal } from '@iress/components-react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressButton } from '@iress-oss/ids-components';</pre></td></tr></tbody></table>
+
+### Importing component styles
+
+IDS v5 no longer injects CSS into the DOM. You will need to import the stylesheet directly into your application.
+
+Update Jest configuration
+-------------------------
+
+If you are using Jest, you will need to update your Jest configuration to add the new IDS package to your `transformIgnorePatterns`.
+
+**Note:** If you are using version 4 and version 5 in parallel, you will need to keep the old IDS packages in your `transformIgnorePatterns` until you have completely migrated over your components.
+
+If you are mocking CSS files for your tests, you'll also need to make sure the new stylesheet is matched by your `moduleNameMapper`:
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  "moduleNameMapper": {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    "^.+\.(scss|less)$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    "ids-web-components.css$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    "global.css$": "&lt;rootDir&gt;/test/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    "global.css$": "&lt;rootDir&gt;/test/style-mock.ts",</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    "@iress-oss/ids-components/(.*).css": "&lt;rootDir&gt;/test/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  },</pre></td></tr></tbody></table>
+
+Handling breaking changes
+-------------------------
+
+### Components
+
+Since the move to React, the majority of the components have been simplified to improve developer experience. We have listed the changes in this google doc by component, so you can attend to each component separately.
+
+[Google doc](https://docs.google.com/document/d/1H3-zFDftCHDjwaFkwFxVo1uziPsOj8qJn7p3NFG3aUg/edit)
+
+### Testing
+
+Components are no longer loaded asynchronously, so you can test them as you would any other React component. The testing utilities have been removed from the package, so you will need to update your tests to use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) or another testing library.
+
+Below is an example of a changed test using React Testing Library.
+
+Diff
+
+Old
+
+New
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { render } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { render, fireEvent } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { idsFireEvent } from '@iress/ids-react-test-utils';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">test('login form', () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">test('login form', async () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    const loginMock = jest.fn();</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    const screen = render(&lt;LoginForm loginUser={loginMock}/&gt;);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    const usernameInput = await screen.findByTestId('username__input');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    const usernameInput = screen.getByRole('textbox', { name: 'Username' });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    const passwordInput = await screen.findByTestId('password__input');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    const passwordInput = screen.getByRole('textbox', { name: 'Password' });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    const submitBtn = await screen.findByTestId('submit-btn__button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    const submitBtn = screen.getByRole('button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    idsFireEvent.change(usernameInput, { target: { value: 'joe.bloggs' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    fireEvent.change(usernameInput, { target: { value: 'joe.bloggs' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    idsFireEvent.change(passwordInput, { target: { value: '1234' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    fireEvent.change(passwordInput, { target: { value: '1234' }});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    idsFireEvent.click(submitBtn);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    fireEvent.click(submitBtn);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    expect(loginMock).toHaveBeenCalledWith("joe.bloggs", "1234");</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">});</pre></td></tr></tbody></table>
+
+#### Component specific testing
+
+Some components have additional testing requirements. The changed testing requirements will be listed on each component's docs page.
+
+These include:
+
+*   [Form](/docs/components-form--docs#testing)
+*   [Modal](/docs/components-modal--docs#testing)
+*   [Slideout](/docs/components-slideout--docs#testing)
+
+### Styling
+
+The original CSS framework used for IDS was based on the Stencil library. It was lightly scoped (no shadow DOM) using CSS classes like: `sc-iress-radio-h sc-iress-radio-s`.
+
+These classes have been removed from version 5. If you are targeting components using these classes, it will be good for you review if you should adapt the CSS in a different way (ie. using design tokens/CSS variables instead, which should work no matter the class name, or adding custom classes to the IDS components). If targeting elements is still required, the new classes will be formatted as: `.ids-radio-${ids-version}`, and nested elements will use a modified BEM naming convention: `.ids-radio--label-${ids-version}`. The version number will be exposed; you can import it via Javascript, SASS and CSS module values to make future upgrades easier.
+
+#### Option 1: Use design tokens and custom classes
+
+This is the recommended approach. You can use design tokens and custom classes to style the components.
+
+#### Option 2: Target the new classes
+
+This option is **not recommended** and should be used as a last resort, as the class names can change in future, in which case your stylesheet will no longer have any effect. It is recommended to use design tokens or custom classes instead.
+
+### Theme tokens
+
+There are a few token changes that have changed (though this has been relatively minor). The version 5 themes have been updated to use the new design tokens, however if you are using version 4 in parallel with version 5, you may notice that the version 4 styles can no longer find the removed/changed tokens.
+
+To fix this issue, please backfill the tokens in your application until you have finished your migration.
+
+AG grid theme
+-------------
+
+As of version 5, we only support the lite AG grid theme, which is used in conjunction with the default alpine theme. In version 5, its imports have changed slightly.
+
+Run the following command to install the AG grid lite theme:
+
+Then you can import the AG Grid theme CSS, import the relevant IDS theme, and hook up the styles by setting a class of ag-theme-alpine ag-theme-iress-lite on your grid wrapper.
+
+Diff
+
+Old
+
+New
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">import "@iress/themes/build/css/iress-theme-dark.css";</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import "@iress/themes/global.css";</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">import 'ag-grid-community/styles/ag-grid.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">import 'ag-grid-community/styles/ag-theme-alpine.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import '@iress/ag-grid-theme/dist/lite/css/all.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import '@iress/ag-grid-theme/dist/ag-theme-iress-lite.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">// You can also include variables, styles and utilities separately for easy debugging</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/lite/css/variables.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/css/variables.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/lite/css/styles.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/css/styles.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/lite/css/utilities.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">// import '@iress/ag-grid-theme/dist/css/utilities.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">&lt;div className="ag-theme-alpine ag-theme-iress-lite"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  &lt;AgGridReact /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">&lt;/div&gt;</pre></td></tr></tbody></table>
+
+Removing version 4
+------------------
+
+Version 5 and version 4 can be run in parallel, but it is recommended to remove version 4 to avoid any conflicts once you have completely migrated over your components.
+
+Run the following to remove version 4 and its related packages:
+
+### Remove `global.css`
+
+The `global.css` file has been removed, it is now recommended to include the Roboto font directly using Google Fonts.
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import '@iress/themes/global.css';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">&lt;link</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&amp;display=swap"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  rel="stylesheet"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">/&gt;</pre></td></tr></tbody></table>
+
+### Remove from Jest configuration
+
+If you are using Jest, you will need to update your Jest configuration to remove the old IDS packages from your `transformIgnorePatterns`.
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">"transformIgnorePatterns": [</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  "node_modules/(?!(@iress/components-react|@iress/components|@iress/components-react-custom-elements|@stencil/core)/)"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  "/node_modules/(?!@iress-oss/ids-components)"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">]</pre></td></tr></tbody></table>
+
+You can also remove the `mockLazyLoadedComponents` function from your Jest setup.
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { mockLazyLoadedComponents } from '@iress/ids-react-test-utils/dist/react-test-utils/src/mocks/mockLazyLoadedComponents';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">mockLazyLoadedComponents();</pre></td></tr></tbody></table>
+
+You should also be able to remove the style mocks from your Jest configuration's `moduleNameMapper`, unless you are using CSS-in-JS, as IDS no longer injects CSS into the DOM.
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">"moduleNameMapper": {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  "\.css$": "&lt;rootDir&gt;/PATH/TO/style-mock.ts"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">}</pre></td></tr></tbody></table>

package/generated/docs/components_styling-props-colour-docs.md

@@ -0,0 +1,91 @@
+Colour
+======
+
+These are all styling props related to changing the foreground and background colours of a component.
+
+`bg`
+----
+
+The `bg` prop allows you to change the background of any component to the value of a colour token. It should be used sparingly, and usually alongside the `color` prop to ensure accessibility.
+
+Below is an example of a component using `bg` and `color` to create a featured panel that changes colour depending on the theme.
+
+[](./iframe.html?id=styling-props-colour--bg)
+
+##### Featured panel
+
+This is a featured panel, in case you want to highlight something important or draw attention to a specific piece of content.
+
+```
+
+<IressPanel
+  bg\="colour.primary.fill"
+  color\="colour.primary.onFill"
+\>
+  <h5\>
+    Featured panel  </h5\>
+  <p\>
+    This is a featured panel, in case you want to highlight something important or draw attention to a specific piece of content.  </p\>
+</IressPanel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| bg | 
+string
+
+
+
+ | \- | colour.primary.fill |
+| color | 
+
+string
+
+
+
+ | \- | 
+
+ |
+
+`color`
+-------
+
+The `color` prop allows you to change the foreground of any component to the value of a colour token. It should be used sparingly, and usually alongside the `bg` prop to ensure accessibility.
+
+Below is an example of using the `color` prop to highlight text throughout a component.
+
+[](./iframe.html?id=styling-props-colour--color)
+
+Sometimes actions are **successful**, and sometimes they are **dangerous**.
+
+```
+
+<IressPanel\>
+  <p\>
+    Sometimes actions are{' '}
+    <IressText
+      color\="colour.system.success.text"
+      element\="strong"
+    \>
+      successful    </IressText\>
+    , and sometimes they are{' '}
+    <IressText
+      color\="colour.system.danger.text"
+      element\="strong"
+    \>
+      dangerous    </IressText\>
+    .  </p\>
+</IressPanel\>
+
+```
+
+#### Props
+
+Args table with interactive controls couldn't be auto-generated
+
+Controls give you an easy to use interface to test your components. Set your story args and you'll see controls appearing here automatically.
+
+[Learn how to set that up](https://storybook.js.org/docs/essentials/controls?ref=ui)

package/generated/docs/components_styling-props-elevation-docs.md

@@ -0,0 +1,69 @@
+Elevation
+=========
+
+These are all styling props related to changing the elevation of a component to help guide visual hierarchy.
+
+`layerStyle`
+------------
+
+The `layerStyle` prop allows you to draw attention to certain parts of the screen, making a screen easier to scan. The following styles are available:
+
+*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
+*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
+*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
+
+[](./iframe.html?id=styling-props-elevation--layer-style)
+
+This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
+
+```
+
+<IressPanel layerStyle\="elevation.raised"\>
+  This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
+</IressPanel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| layerStyle | 
+string
+
+
+
+ | \- | elevation.raised |
+
+`focusable`
+-----------
+
+The `focusable` prop allows you to set the focus state of a component. This is useful for components that need to be interactive via keyboard, but are not necessarily a button or input.
+
+It can be set to `true` to enable focus styles when the element is focused using keyboard navigation, or `within` to show focus styles when an element within is focused.
+
+[](./iframe.html?id=styling-props-elevation--focusable)
+
+This element will have focus styles applied when it is focused. This is useful for accessibility and keyboard navigation.
+
+```
+
+<IressPanel
+  focusable\="true"
+  tabIndex\={0}
+\>
+  This element will have focus styles applied when it is focused. This is useful for accessibility and keyboard navigation.
+</IressPanel\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| focusable | 
+string
+
+
+
+ | \- | true |