gistfile1.txt

[
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/79cd8c-before-you-begin",
    "text": "BEFORE YOU BEGIN",
    "content": "## BEFORE YOU BEGINFeaturesTypeScriptTo provide a better application development experience for developers in IAG we migrated our Chroma Bit Component library from React with Javascript to React and Typescript. Typescript prevents many of the bugs in your app. It detects common bugs at the compile stage, it makes the code more predictable and you get autocompletion in your React components. It is also like a self documentation for your codewe build chroma based on latest stable version of Typecsript (>=4.0.0) so please make sure your project dependency matches itTailwindcssChroma has a core set of React components that can be used to build applications and can be optionally extended with Tailwindcss to enable easy rapid development of layouts and custom patterns. VersionsChroma Bit releases are announced in our #chroma-dev channel on Slack.Get started developingIf you're new to Chroma, you'll find detailed instructions in our Get started developing section. "
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/834696-install-chroma",
    "text": "Install Chroma",
    "content": "## Install ChromaReact ApplicationWe recommend using Create React App, however you can use whatever build setup you require.If you already have a preferred build setup (that works with React apps), feel free to use that method for your Chroma apps. Install create-react-appInstallation instructions are available on the Create React App site. We’ve included the NPM installation details below. Create React AppInstall Guide    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npx create-react-app my-appcd my-appnpm start    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLOnce you’ve installed the Create React App, you can add styling (strictly optional) or jump straight to installing components. Need more help installing Chroma? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/834696-install-chroma/b/039171",
    "text": "Setup build",
    "content": "## Setup buildReact ApplicationWe recommend using Create React App, however you can use whatever build setup you require.If you already have a preferred build setup (that works with React apps), feel free to use that method for your Chroma apps. Install create-react-appInstallation instructions are available on the Create React App site. We’ve included the NPM installation details below. Create React AppInstall Guide    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npx create-react-app my-appcd my-appnpm start    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLOnce you’ve installed the Create React App, you can add styling (strictly optional) or jump straight to installing components. Need more help installing Chroma? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/834696-install-chroma/b/657498",
    "text": "Add styling",
    "content": "## Add stylingAdd styling with Tailwind CSSWe recommend Tailwind CSS for styling.Note!Adding your own styling is optional. Chroma components already have styling attached to them. Tailwind CSS lets you easily integrate the brand- specific CSS variables via the configuration file to output useful utility classes that will manage the styling of your application. Step 1: Install Tailwind CSSTailwind CSSCreate React App install guideInstall tailwindcss and its peer dependencies via npm. Then run the init command to generate both  tailwind.config.js and postcss.config.js.     Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLStep 2: Configure your template pathsAdd the paths to all of your template files in yourtailwind.config.js file.tailwind.config.js    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  module.exports = {  content: [    \"./src/**/*.{js,jsx,ts,tsx}\",  ],  theme: {    extend: {},  },  plugins: [],}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptStep 3: Add the Tailwind directives to your CSSAdd the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.index.css    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  @tailwind base;@tailwind components;@tailwind utilities;    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          SCSSStep 4: Run your build processRun your build process withnpm run start.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npm run start    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLStep 5: Start using Tailwind in your projectStart using Tailwind’s utility classes to style your content.App.js    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  export default function App() {  return (    <h1 className=\"text-3xl font-bold underline\">      Hello world!    </h1>  )}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)Now that you’ve added your styling, you’re ready to start installing components. Need more help adding styling with Tailwind CSS? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/834696-install-chroma/b/103972",
    "text": "Install components",
    "content": "## Install componentsInstall Chroma componentsCheck our component overview on this site, or use the links below.Installation guideGet your build setup and install your first componentBit.devList of all available Chroma ComponentsSee also:Overview of componentsBit components and Chroma.Need more help with components? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/834696-install-chroma/b/11dd5c",
    "text": "Apply branding",
    "content": "## Apply brandingApply brandingYou can apply a brand directly within your application via the BrandProvider component.Brand Provider Manages branding in your appNeed more help with BrandProvider? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/834696-install-chroma/b/483c19",
    "text": "Starter repo",
    "content": "## Starter repoStarter RepositoriesUse the link below to access the Chroma starter kit using create-react-app, Chroma design tokens & Tailwindcss v3.Starter BuildStarter application built using CRA + Tailwind CSS + Chroma components."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/002a49-access-repos",
    "text": "Access repos",
    "content": "## Access reposAccess Chroma repos on GitHubFor a list of our repos, click on the Chroma repos tab on this page.Instructions for setting up your access are below.Before you beginTo access Chroma repos in the Chroma Organisation on GitHub, you'll need:A GitHub Enterprise accountAccess to the Chroma Organisation on GitHubDetails of the Chroma team you'll be working with.Step 1: Setup a GitHub Enterprise AccountCheck our Confluence page for directions on setting up a Github Enterprise account.Enterprise AccountSetup new enterprise accountStep 2: Request access to Chroma Org on GitHubSend us a request via our#chroma-devSlack channel by posting your S number and team name so we can add you to Chroma Org. #chroma-devRequest permisson to the Chroma OrganisationStep 3: Include your team details in your Chroma Org request Your team membership will determine which repos you have access to. Can't find your team?If your team hasn't been created in Chroma Org yet, you can request a new team setup via our #chroma-devSlack channel.         Chroma Org teamsAs an example of team access, take a look at the list of repos available to thesimpsons-devsteam:        Simpsons team repos(Note that some repos are set to read only access.)Need more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/002a49-access-repos/b/89f81c",
    "text": "Get access",
    "content": "## Get accessAccess Chroma repos on GitHubFor a list of our repos, click on the Chroma repos tab on this page.Instructions for setting up your access are below.Before you beginTo access Chroma repos in the Chroma Organisation on GitHub, you'll need:A GitHub Enterprise accountAccess to the Chroma Organisation on GitHubDetails of the Chroma team you'll be working with.Step 1: Setup a GitHub Enterprise AccountCheck our Confluence page for directions on setting up a Github Enterprise account.Enterprise AccountSetup new enterprise accountStep 2: Request access to Chroma Org on GitHubSend us a request via our#chroma-devSlack channel by posting your S number and team name so we can add you to Chroma Org. #chroma-devRequest permisson to the Chroma OrganisationStep 3: Include your team details in your Chroma Org request Your team membership will determine which repos you have access to. Can't find your team?If your team hasn't been created in Chroma Org yet, you can request a new team setup via our #chroma-devSlack channel.         Chroma Org teamsAs an example of team access, take a look at the list of repos available to thesimpsons-devsteam:        Simpsons team repos(Note that some repos are set to read only access.)Need more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/002a49-access-repos/b/9169c7",
    "text": "Chroma repos",
    "content": "## Chroma reposChroma repos in GitHubNew to Chroma? You'll need a GitHub Enterprise account to access Chroma repos. Check the Get access tab on this page for setup instructions.You'll find all our repos in the Chroma organisation in GitHub. React StarterStarter application built using CRA + Tailwind CSS + Chroma components.React UIGlobal set of Chroma components.Brand TokensContains brand definitions and generates CSS variables for styling.Brand AssetsContains all brand specific assets like icons, typography and logos.Depending which Chroma Org team you're in, you'll also see repos specific to your team. If you can't find the repos you're expecting, contact us via our#chroma-devSlack channel.An explanation of Chroma reposOur core list of repos is available to all Chroma Org members, and includes:React-ui repo: all the official Chroma components, which we've documented in our Chroma Bit Storybook. Brand-tokens repo: all the design tokens relating to Chroma brands. Read the Adding and updating tokens page for info about working with tokens.Brand-assets repo: includes all brand-related assets used within the Chroma Design System and deployed to AWS.React-starter repo: a CRA App that utilises Tailwindcss to map our Chroma design tokens into util classes. Orbit-UI (reference repo): an example of how teams can extend our Bit components by creating their own custom collection of components that reference brand tokens.Need more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/866e68-migrate-chroma-library",
    "text": "Migrate Chroma library",
    "content": "## Migrate Chroma libraryMigrate to Chroma Bit from Chroma LegacyIt is possible when migrating to the new Chroma Bit library to actually upgrade one component at a time as our new components are published and versioned individually.Example pleaseIf you were to look at something simple like an Input component. If the app you are currently working with chroma-react  you would import and use the component like so:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { Input } from '@iag-packages/chroma-react/lib/components'<Input  onChange={() => {}}  placeholder=\"placeholder text\"  value=\"Elliot Alderson\"  name=\"fullname\"/>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)To migrate this component over to our new Bit component is as simple as this:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { Input } from '@iag/chroma-react-ui.input'<Input  onChange={() => {}}  placeholder=\"placeholder text\"  value=\"Elliot Alderson\"  name=\"fullname\"/>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)There are however some components that do not exist in Chroma Bit (this may change in the future) such as the <Text />  component as the decision was made to simplify the library and, where possible, use native DOM elements and extend them with classes. See the table below for a full list of components and equivalents or deprecations. Chroma advocate using Tailwind as a styling library due to the way it can be configured to reference css variables. Our design tokens are exported as css variables and therefore make this an appealing solution. This means that when combined with Tailwind, rather than setting a font size via a prop in the <Text />  you can instead use <p className=\"text-lg\"/>  or if you were to use a tailwind config to reference our font sizes (css variable --font-size-600  you could instead set a fontSize object in the tailwind config:fontSize: { 600: 'var(--font-size--600)' }  and reference it as a class <p className=\"text-600\">  Install componentsAs mentioned above the first thing you will need to do to migrate is to install the components and access the documentation for each component. To begin, head over to our UI Library.Once you have installed the component(s), wrap your application with the Chroma BrandProvider. This is necessary so you can apply branding to the Bit components.That looks too simple, what's the catch?Well, for starters there is a different way to apply the brand styles using the BrandProvider component but there are going to be some differences with certain components and some no longer exist. For example the <Input />  component in chroma-react  has a size  prop which does not exist in the new Bit based component which is instead set to 100% width controlled by the containing element.  Below is a list of components with both the chroma-react (Legacy) and Bit names. As you will see, some components were removed from the Bit component library as they can easily be created use html & css classes, others have markup examples using css and Tailwindcss classes which could be converted into custom components in your application.The Bit and Legacy component comparison tablechroma-react (Legacy)Bit packageNotes & examplesAccordion@iag/chroma-react-ui.accordionAccordion WrapperN/AAlert@iag/chroma-react-ui.alertAnchored BannerN/AUse HTML and Tailwind CSS classes to buildAutocomplete@iag/chroma-react-ui.autocompleteBadge@iag/chroma-react-ui.badgeBannerN/Ahttps://bit.chromadesignsystem.com/?path=/docs/patterns-banner--simple-bannerBoxN/AUse HTML and Tailwind CSS classes to buildButton Group@iag/chroma-react-ui.button-groupButton@iag/chroma-react-ui.buttonCardN/Ahttps://bit.chromadesignsystem.com/?path=/docs/patterns-card--imageCheckbox@iag/chroma-react-ui.checkboxConditional DisplayN/AContainer@iag/chroma-react-ui.containerContent Switcherhttps://bit.chromadesignsystem.com/?path=/docs/patterns-content-switcher--basicChroma ProviderN/AColumn@iag/chroma-react-ui-tailwind.columnDate Formatiag/chroma-react-ui.dateformatDatepicker@iag/chroma-react-ui.datepickerDividerN/Ahttps://bit.chromadesignsystem.com/?path=/docs/patterns-divider--basicFieldsetN/AUse HTML and Tailwind CSS classes to build <fieldset>FlexN/AUse HTML and Tailwind CSS classes to buildFormN/AUse semantic HTMLForm Grouphttps://bit.chromadesignsystem.com/?path=/docs/patterns-form-group--basicFooter@iag/chroma-react-ui.footerHeader@iag/chroma-react-ui.headerHeadingUse semantic HTML <h1>, <h2>, <h3> etc...IconN/AUse semantic HTML <i> and set the correct class as per Icon documentation https://bit.chromadesignsystem.com/?path=/docs/assets-icons-chroma--pageImageUse semantic HTML <img>Input@iag/chroma-react-ui.inputInput Format@iag/chroma-react-ui.input-formatInput Group@iag/chroma-react-ui.input-groupLabel@iag/chroma-react-ui.labelLegend@iag/chroma-react-ui.legendLicence PlateN/Ahttps://bit.chromadesignsystem.com/?path=/docs/patterns-number-plate--simpleLink@iag/chroma-react-ui.linkListsN/Ahttps://bit.chromadesignsystem.com/?path=/docs/patterns-lists--default-storyLoaders@iag/chroma-react-ui.spinnerSpinner is a standalone component that you can use to construct the loaders that you needLogo@iag/chroma-react-ui.logoMainN/AMessage@iag/chroma-react-ui.messageModal@iag/chroma-react-ui.modalNavigationN/APassword@iag/chroma-react-ui.passwordPriceN/Ahttps://bit.chromadesignsystem.com/?path=/docs/patterns-price--basicProgress LoaderN/AUse HTML and Tailwind CSS classes to buildRadio@iag/chroma-react-ui.radioRadio Block@iag/chroma-react-ui.radio-blockRequired FieldsN/AUse HTML and Tailwind CSS classes to buildRow@iag/chroma-react-ui-tailwind.gridSegmented Control@iag/chroma-react-ui.segmented-controlSelect@iag/chroma-react-ui.selectStickyN/AUse HTML and Tailwind CSS classes to buildTab@iag/chroma-react-ui.tabTextN/AUse semantic HTML <p>Textarea@iag/chroma-react-ui.textareaTimepickerN/A\tUse HTML and Tailwind CSS classes to buildToggle ContentN/A"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/939db1-migrate-chroma-react-v9-to-v10",
    "text": "Migrate chroma-react v9 to v10",
    "content": "## Migrate chroma-react v9 to v10What's changed and why?Version 10 of chroma-react is a breaking change because of the underlying changes in chroma-core v5. In v4 and below,chroma-coreis the engine that is responsible for building each brand css file and deploying it to the CDN. This has been working okay for over 4 years now but it doesn't scale particularly well.We refactored chroma-core for alignment with BitSince we developed a way to abstract the brand attributes into a separate build (chroma brand-tokens repo) using design tokens (output as css variables), we decided it would be a good idea to refactorchroma-core to align our legacy version of Chroma with our new React Bit components.We made monochroma the base brandIn doing this refactor, we were able to remove all of the current brands in chroma-coreleaving justmonochromaas a base set of scss files. Within the scss, we then updated our brand config references to instead use the latest monochromabrand-tokensusing css variables. Now that the brand attributes are set with css vars it is possible to load in the brand specific tokens to inherit the values. This was done using our new <BrandProvider /> component. We built the BrandProvider componentThe BrandProvider component loads the brand-tokens css for the defined brand (and version). These variables are then inherited by the compiled chroma-core css. Basically, we are setting up the styles with default values and then overriding them per brand. So that we can deploy a single css fileThis offers a much leaner build by only defining a single default brand. It also means we only deploy a single css file for applications to load, which will look something like this:https://tags.iag.com.au/chroma/chroma-core-s3/v5.0.0-alpha.4/css/theme/monochroma/main.css.gzTo make life easier, we have also included the code to load this file in our <ChromaProvider /> component. There may be some visual differencesDue to the underlying architecture changes the branding in chroma-react@10 should be aligned with the latest Chroma Bit components. chroma-react@v9 has a completely different styling build system as mentioned above and it is difficult to maintain perfect parity between v9 & v10. Therefore we advise checking your upgraded application against the component styles in the v10 Storybook documentation to ensure that the styling matches this version.In conclusionSo now by wrapping your application with our two providers you can easily apply a brand.You can remove any old references to the brandmain.css.gz that you have in your application. For example in our test app, we usereact-helmet and a Chroma css util function, like so:// this code is no longer neededimport { getCssUrl } from './components/Chroma' <Helmet>    <link href={getCssUrl(brand)} rel=\"stylesheet\" /></Helmet>Take a look at the steps to migrate for more detailed guidance."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/939db1-migrate-chroma-react-v9-to-v10/b/185fd5",
    "text": "What's new",
    "content": "## What's newWhat's changed and why?Version 10 of chroma-react is a breaking change because of the underlying changes in chroma-core v5. In v4 and below,chroma-coreis the engine that is responsible for building each brand css file and deploying it to the CDN. This has been working okay for over 4 years now but it doesn't scale particularly well.We refactored chroma-core for alignment with BitSince we developed a way to abstract the brand attributes into a separate build (chroma brand-tokens repo) using design tokens (output as css variables), we decided it would be a good idea to refactorchroma-core to align our legacy version of Chroma with our new React Bit components.We made monochroma the base brandIn doing this refactor, we were able to remove all of the current brands in chroma-coreleaving justmonochromaas a base set of scss files. Within the scss, we then updated our brand config references to instead use the latest monochromabrand-tokensusing css variables. Now that the brand attributes are set with css vars it is possible to load in the brand specific tokens to inherit the values. This was done using our new <BrandProvider /> component. We built the BrandProvider componentThe BrandProvider component loads the brand-tokens css for the defined brand (and version). These variables are then inherited by the compiled chroma-core css. Basically, we are setting up the styles with default values and then overriding them per brand. So that we can deploy a single css fileThis offers a much leaner build by only defining a single default brand. It also means we only deploy a single css file for applications to load, which will look something like this:https://tags.iag.com.au/chroma/chroma-core-s3/v5.0.0-alpha.4/css/theme/monochroma/main.css.gzTo make life easier, we have also included the code to load this file in our <ChromaProvider /> component. There may be some visual differencesDue to the underlying architecture changes the branding in chroma-react@10 should be aligned with the latest Chroma Bit components. chroma-react@v9 has a completely different styling build system as mentioned above and it is difficult to maintain perfect parity between v9 & v10. Therefore we advise checking your upgraded application against the component styles in the v10 Storybook documentation to ensure that the styling matches this version.In conclusionSo now by wrapping your application with our two providers you can easily apply a brand.You can remove any old references to the brandmain.css.gz that you have in your application. For example in our test app, we usereact-helmet and a Chroma css util function, like so:// this code is no longer neededimport { getCssUrl } from './components/Chroma' <Helmet>    <link href={getCssUrl(brand)} rel=\"stylesheet\" /></Helmet>Take a look at the steps to migrate for more detailed guidance."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/939db1-migrate-chroma-react-v9-to-v10/b/539145",
    "text": "Steps to migrate",
    "content": "## Steps to migrateSteps to migrate Upgrade your package version and apply the BrandProvider component to migrate your Chroma installation.Step 1: Upgrade package versionThe chroma-react v10 package is a breaking release in terms of build changes only. There should be minimal impact to the actual visible component styling within your application. The changes have primarily been to sync the component styling to the css variables generated via the brand-tokens repository. This alpha package will ensure both component libraries (chroma-react and bit) will align in terms of available brands and brand specific styling.Installationnpm i -D @iag-packages/chroma-react@10.0.0Or update the package.json version\"@iag-packages/chroma-react\": \"10.0.0\",Step 2: Apply BrandProviderThe brand provider provides the link to the brand specific css variables needed to manages the component styling.  https://bit.cloud/iag/chroma-react-ui-utils/brand-providerInstallationnpm i -D @iag/chroma-react-ui-utils.brand-providerUsageWrap the root of your React application with the <BrandProvider>   in order to set and manage the brand tokens.Important!!As of \"v10.0.0\" the order in which you set the providers for Chroma has changed in order to simplify issues with classes needed and MFEs.import { ChromaProvider } from '@iag-packages/chroma-react/lib/components'import { BrandProvider } from '@iag/chroma-react-ui-utils.brand-provider' <BrandProvider brand={brand}>    <ChromaProvider>        <App />    </ChromaProvider></BrandProvider>The <ChromaProvider /> will load the base monochroma css file and apply to the head of your document.The <BrandProvider /> will then load the tokens css file in the <head> which will apply the css variables to create your brand styling. BrandProvider installation issuesIf the BrandProvider install errors please check our page on working with components for information on how to setup your repo to work with Bit. "
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/939db1-migrate-chroma-react-v9-to-v10/b/95c450",
    "text": "Specific changes",
    "content": "## Specific changesSpecific changesHere's what you need to know about working with some of the specific changes between v9 and v10.Heading marginsIn v9 of Chroma the <Heading> component had a bottom margin hard-coded in the css. However, we felt that it would be better to remove this margin and allow developers to set the margin via Tailwind classes in our new build.That's why you'll need to add a margin prop to Headings in chroma-react so your layouts match:<Heading size={2} margin={{ bottom: 3 }}>Excess owing for your motor claim</Heading>Icon marginsSimilar to the Headings, Icons now have no margins by default. So you may need to add a right or left margin if used with headings, list items etc. <Icon name=\"userCircle\" fontSize={32} color=\"primary\" margin={{ right:2 }} />Sticky Footer issuesIn order to make the Footer sticky, you must have the providers in the correct order and add a new prop `maxHeight` to `<Main>` like so:<BrandProvider brand={brand}>    <ChromaProvider>      <>        <Header />        <Main maxHeight>Content</Main>        <Footer />      </>    </ChromaProvider></BrandProvider>"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/97639b-build-with-components",
    "text": "BUILD WITH COMPONENTS",
    "content": "## BUILD WITH COMPONENTSQuicklinks for Chroma componentsReact UIChroma ComponentsReact DocsComponent documentationRelated readingUse Bit components"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/43b556-overview-of-components",
    "text": "Overview of components",
    "content": "## Overview of componentsThe full UI library of Chroma components is available here and sourced from our Bit Storybook.Each Chroma Bit component is published to npm. Instructions for installing each component can be found in the UI Library available on this site."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/43b556-overview-of-components/b/33cd8f",
    "text": "Overview",
    "content": "## OverviewThe full UI library of Chroma components is available here and sourced from our Bit Storybook.Each Chroma Bit component is published to npm. Instructions for installing each component can be found in the UI Library available on this site."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/43b556-overview-of-components/b/371f05",
    "text": "Core components",
    "content": "## Core componentsCore componentsChroma's core components are available for use by any application or brand.Components are reusable snippets of code which combine elements built in HTML, CSS, and Javascript. Each component includes encapsulated functionality which you can pass in properties.React UIChroma ComponentsGot a question about components? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/43b556-overview-of-components/b/872c40",
    "text": "Custom components",
    "content": "## Custom componentsCustom componentsWe've been creating custom components by extending Chroma's core components using custom CSS classes or Tailwind classes.You can build and customise your own components the same way, by utilising brand tokens via CSS classes.If you wish to create your own css you will need to reference the design token css variables by inspecting the files directly. Change the brand in the following url:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  https://tokens.chromadesignsystem.com/latest/css/brands/chroma/web/base.css.gz    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLGot a question about components? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/668f37-work-with-components",
    "text": "Work with components",
    "content": "## Work with componentsBefore you beginConfigure your registryChroma components are all available via Nexus and we have setup our own Chroma repo within Nexus so you will need to update your.npmrc file in your application:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  registry=https://nexus3.auiag.corp/repos/repository/chroma/// If you have issues with npm complaining about different versions of react set legacy-peer-depslegacy-peer-deps=true    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          ShellNeed more help with components? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/668f37-work-with-components/b/18229e",
    "text": "Before you begin",
    "content": "## Before you beginBefore you beginConfigure your registryChroma components are all available via Nexus and we have setup our own Chroma repo within Nexus so you will need to update your.npmrc file in your application:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  registry=https://nexus3.auiag.corp/repos/repository/chroma/// If you have issues with npm complaining about different versions of react set legacy-peer-depslegacy-peer-deps=true    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          ShellNeed more help with components? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/668f37-work-with-components/b/37b6a8",
    "text": "Install a component",
    "content": "## Install a componentInstall a componentUse npm to install and work with your components.Step 1: Install your first component with npmNow you're ready to install your very first Chroma component.As an example, let's add an alert component to our build with the npm command below.Example: add an Alert component    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npm i --save-dev @iag/chroma-react-ui.alert    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          ShellStep 2: Work with your installed componentOnce, installed, you can work with a Chroma Bit component the same you'd make use of any other npm package.Example: work with your installed Alert component    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { Alert } from '@iag/chroma-react-ui.alert'const App = () => (<Alert variant=\"information\">\t<h3>Information Alert</h3>    <p>Information alert content</p></Alert>)export default App    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)Need more help with components? Let us know in our #chroma-bit channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/32bab7-apply-brands",
    "text": "Apply brands",
    "content": "## Apply brandsBefore you beginFor new brands, contact the Chroma Core team to have your brand repo added.Once you've added a new brand or updated an existing brand with your token changes, you're ready to release your tokens.The way to do that is to:push your branch to thebrand-tokens repo in Github Enterprisethen create a PR to master with a full explanation of your changes. Note!Every token change can potentially impact a lot of production apps. Make sure you include as much information as possible about proposed brand changes, so the Chroma team can review risks and impacts.Before releasing the tokens to production, the Chroma team (or the development team) should release a staging version of the tokens. Workflow for staging components can be found here. Once we approve your changes, we'll deploy the new token set to AWS. On release, the <BrandProvider /> component can then be used to load either a specific token version or the latest tokens.There's more about the BrandProvider component in our UI Library documentation."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/141f0d-work-with-brand-tokens",
    "text": "Work with brand tokens",
    "content": "## Work with brand tokensChroma uses design tokens to set each brand's specified design elements (like primary colour). We refer to these as the brand tokens. Add brand tokensBefore you beginYou need access to the brand-tokens repo in GitHub in order to work with the design tokens that have been established for your brand. See the Chroma repos section if you're new to Chroma.Or learn more about design tokens on our site.Once you have access to thebrand-tokensrepo, you'll either update an existing brand token file or add your brand (if it doesn't exist already). Add your brand to the GitHub repoIf your brand isn't in thebrand-tokensrepo, you can add it using the following steps:Go to the brand-tokensrepo in GitHubCreate a new feature branch from themasterbranchAdd your brand as a new directory undersrc/tokens/brands  Create a global.json fileAdd { \"brand\": \"your brand name\" }  Add in the updated brand objects that you need to override.Example brand token updateLet's say you want to update the primary colour for your brand. First open the src/tokens/base/color/global.json file and copy the entire primary object:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // src/tokens/base/color/global.json{  \"color\": {    \"global\": {      \"brand\": {        \"primary\": {          \"50\": { \"value\": \"#f2f9f8\" },          \"100\": { \"value\": \"#cce6e3\" },          \"200\": { \"value\": \"#99cdc8\" },          \"300\": { \"value\": \"#66b5ac\" },          \"400\": { \"value\": \"#339c91\" },          \"500\": { \"value\": \"#008375\" },          \"600\": { \"value\": \"#00695e\" },          \"700\": { \"value\": \"#004f46\" },          \"800\": { \"value\": \"#00342f\" },          \"900\": { \"value\": \"#001a17\" },          \"950\": { \"value\": \"#000706\" }        }      }    }  }}// apply your new colors in// src/tokens/brands/your-brand/global.json{  \"color\": {    \"global\": {      \"brand\": {        \"primary\": {          \"50\": { \"value\": \"#fff2ff\" },          \"100\": { \"value\": \"#ffccff\" },          \"200\": { \"value\": \"#ff99ff\" },          \"300\": { \"value\": \"#ff66ff\" },          \"400\": { \"value\": \"#ff33ff\" },          \"500\": { \"value\": \"#ff00ff\" },          \"600\": { \"value\": \"#cc00cc\" },          \"700\": { \"value\": \"#990099\" },          \"800\": { \"value\": \"#660066\" },          \"900\": { \"value\": \"#330033\" },          \"950\": { \"value\": \"#0d000d\" }        }      }    }  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptNow simply update the values to match the values from your brand guidelines, or as stated in the Figma files as per the 2nd example above.You can use this method to override global tokens or component-specific tokens -- whatever you need for your brand.Example token useHere's an example of overriding the background colour for an Information Alert:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // src/tokens/brands/your-brand/global.json{  \"alert\": {    \"information\": {\t  \"backgroundColor\": {\t    \"value\": \"#ff00ff\"\t  }\t}  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptNeed more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/141f0d-work-with-brand-tokens/b/39004d",
    "text": "Add tokens",
    "content": "## Add tokensChroma uses design tokens to set each brand's specified design elements (like primary colour). We refer to these as the brand tokens. Add brand tokensBefore you beginYou need access to the brand-tokens repo in GitHub in order to work with the design tokens that have been established for your brand. See the Chroma repos section if you're new to Chroma.Or learn more about design tokens on our site.Once you have access to thebrand-tokensrepo, you'll either update an existing brand token file or add your brand (if it doesn't exist already). Add your brand to the GitHub repoIf your brand isn't in thebrand-tokensrepo, you can add it using the following steps:Go to the brand-tokensrepo in GitHubCreate a new feature branch from themasterbranchAdd your brand as a new directory undersrc/tokens/brands  Create a global.json fileAdd { \"brand\": \"your brand name\" }  Add in the updated brand objects that you need to override.Example brand token updateLet's say you want to update the primary colour for your brand. First open the src/tokens/base/color/global.json file and copy the entire primary object:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // src/tokens/base/color/global.json{  \"color\": {    \"global\": {      \"brand\": {        \"primary\": {          \"50\": { \"value\": \"#f2f9f8\" },          \"100\": { \"value\": \"#cce6e3\" },          \"200\": { \"value\": \"#99cdc8\" },          \"300\": { \"value\": \"#66b5ac\" },          \"400\": { \"value\": \"#339c91\" },          \"500\": { \"value\": \"#008375\" },          \"600\": { \"value\": \"#00695e\" },          \"700\": { \"value\": \"#004f46\" },          \"800\": { \"value\": \"#00342f\" },          \"900\": { \"value\": \"#001a17\" },          \"950\": { \"value\": \"#000706\" }        }      }    }  }}// apply your new colors in// src/tokens/brands/your-brand/global.json{  \"color\": {    \"global\": {      \"brand\": {        \"primary\": {          \"50\": { \"value\": \"#fff2ff\" },          \"100\": { \"value\": \"#ffccff\" },          \"200\": { \"value\": \"#ff99ff\" },          \"300\": { \"value\": \"#ff66ff\" },          \"400\": { \"value\": \"#ff33ff\" },          \"500\": { \"value\": \"#ff00ff\" },          \"600\": { \"value\": \"#cc00cc\" },          \"700\": { \"value\": \"#990099\" },          \"800\": { \"value\": \"#660066\" },          \"900\": { \"value\": \"#330033\" },          \"950\": { \"value\": \"#0d000d\" }        }      }    }  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptNow simply update the values to match the values from your brand guidelines, or as stated in the Figma files as per the 2nd example above.You can use this method to override global tokens or component-specific tokens -- whatever you need for your brand.Example token useHere's an example of overriding the background colour for an Information Alert:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // src/tokens/brands/your-brand/global.json{  \"alert\": {    \"information\": {\t  \"backgroundColor\": {\t    \"value\": \"#ff00ff\"\t  }\t}  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptNeed more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/141f0d-work-with-brand-tokens/b/822e3b",
    "text": "Configure",
    "content": "## ConfigureConfigure brand tokensDesign tokens can be changed to create or update a brand's Chroma theme. Note!When you make changes to design tokens at the brand level, your changes will apply brand-wide.Steps to configure tokensTo configure tokens:Work with your designers to decide how you'd like the look and feel to change. Use the chroma tokens documentation to translate those visual changes into token changes for your components.Get hold of your latest tokens config from GitHub.Make the necessary changes to your tokens.Submit a pull request to update the main branch for your brand.Steps to update tokensUpdating tokens requires almost identical steps to the initial configuration (above).All you need to do is: Identify the tokens you need to update from the global or base tokens in the repo. Add those tokens to your brandglobal.json file.Once added or updated, the next step is to stage or release them.Need more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/141f0d-work-with-brand-tokens/b/40c0a6",
    "text": "Stage",
    "content": "## StageStage tokensStaging token releases is a useful way to test token changes in your application before you push to production.There's a 5-step process to releasing a Chroma app into a staging environment.Step 1: TagMake sure you includestagingat the beginning of your git tag (e.g. staging.chroma-chr-2722). Step 2: PushPush the tag, which will trigger a Github action that deploys the tokens to AWS. Step 3: ConfirmCheck our Slack channel to make sure Github has posted the push message. Go to:#chroma-tokens-staging Step 4: CopyCopy the 'temporary staging url' from the Slack message. It will be something similar to: https://tokens.chromadesignsystem.com/staging/10183/ Step 5: Use BrandProviderYou can now use that url in conjunction with the BrandProvider utility, like this:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <BrandProvider  brand=\"chroma\"  stagingUrl=\"https://tokens.chromadesignsystem.com/staging/10183/\">  <App /></BrandProvider>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLNeed more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/141f0d-work-with-brand-tokens/b/38908d",
    "text": "Release",
    "content": "## ReleaseRelease brand tokensOnce you've added a new brand or updated an existing brand with your token changes, you're ready to release your tokens.The way to do that is to:Push your branch to thebrand-tokensrepo in Github EnterpriseCreate a PR to master, adding a full explanation for your changes. Note!Every token change can potentially impact a lot of production apps. The Chroma team reviews likely impacts and risks before approving any token change.Make sure you include as much information as possible in your explanation so we can do a thorough assessment.Once your changes are approved, the Chroma team will deploy the new token set to AWS. We'll let you know when the token set is available for use. Once the token set is released, you can use the <BrandProvider />component to load either:a specific token version, orthe latest tokens.Read more about the BrandProvider component in our Storybook.Need more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/66ddf9-style-with-tailwind-css",
    "text": "Style with Tailwind CSS",
    "content": "## Style with Tailwind CSSWithin our react-starteris an initial configuration to use the un-opinionated, utility-first CSS framework called Tailwind CSS. Tailwind CSS is optionalCore Chroma Bit components are completely independent of Tailwind and can be used with just our brand tokens import via the <BrandProvider /> component.Tailwind CSS is a utility-first frameworkThe idea of utility classes is that developers are able to choose from a predefined set of options for each utility which creates better consistency company wide.While potentially confronting to many frontend developers, the idea with Tailwind CSS is to use their utility classes inline. When you're building React components, this doesn't feel quite so bad -- but within a page, it can seem like you are going against best practices. Try it before you dismiss the idea. If you still feel totally against it, Tailwind does also allow the use of its utility classes in your own custom CSS classes via their @apply directive -- but that comes down to personal preference.Tailwind is highly customisableThe Chromareact-starterapp includes a custom Tailwind config file tailwind.config.js that overrides the default Tailwind configuration and enables us to reference the Chroma design tokens. These tokens consist of a colour palette that completely replaces the default Tailwind colour palettes to ensure that only approved brand colours are used in your application. The configuration also includes a set of utility objects that extend the default Tailwind settings with the token naming conventions used in Chroma.For example, rather than setting a font-weight with the classfont-bold, the Chroma token is mapped to the classfont-700.The !important stuffYou may notice that as part of the tailwind configuration in the react-starter repo is an attribute important: true. As the name suggests, this adds !importantto all the CSS rules in a Tailwindcss class. You may well think this goes against best practices in CSS. However, as Tailwind classes are always meant to be applied when included, it's sometimes a necessary evil in order to override the CSS modules code in the Chroma components.Including this configuration attribute means you can ensure that Tailwind CSS classes will always work as expected.Tailwind and design system propertiesStyle properties such as typography, spacing, shadows, colours are identical to the utility-classes from Tailwind CSS.For example, an element in Figma may have a box shadow. When you inspect the style, you'll see a token in Figma called --box-shadow-100 which can then be applied in Tailwind using a class ofshadow-100.Colour propertiesColour tokens (spelled color, ahem) in Chroma consist of a palette of global colours that are then distilled down to a palette of foundation colours. These are the colours that are mapped in the tailwind.config.jsfile. These tokens can be accessed from a number of Tailwind CSS utility classes, such asbg, text and border. Below is an example of the colour object and its usage:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // excerpt from tailwind.config.jstheme: {  colors: {    primary: {      lighter: 'var(--color-foundation-primary-lighter)',      light: 'var(--color-foundation-primary-light)',      DEFAULT: 'var(--color-foundation-primary-default)',      dark: 'var(--color-foundation-primary-dark)',      darker: 'var(--color-foundation-primary-darker)'    }  }}// usage<div class=\"bg-primary\"> // note the DEFAULT value simply references the color name<p class=\"text-primary-dark\"><div class=\"border-primary-light\">    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptTypography propertiesChroma has extended Typography utilities rather than completely replace them. This means the Tailwind CSS docs examples will work as expected.However, our own design tokens are also available if referenced in the Figma files. Below are some examples of using the tailwindcss typography utils with and without Chroma design tokens.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // regular tailwind font sizing<p class=\"text-xl font-bold leading-6\"> // font-size:20px, line-height: 24px, font-weight: 700// Chroma font sizing<p class=\"text-500 font-700 leading-1\"> // font-size: 20px, line-height: 25px, font-weight: 700    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLMore information on working with Typography in TailwindcssSpacing propertiesBy default, the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins. That means you can do m-100, w-100, height-100 , and so on.Layout propertiesTailwind has a number of utility classes to help create layouts using CSS Grid Template Columns and Flex Basis. We've also created a Grid and Column component to replicate the old chroma-react components using Tailwind classes. That means Tailwind is a dependency for these specific components.Responsive DesignAll utility classes in Tailwind can be applied to different media breakpoints by using the Tailwind class prefixing method:<div class=\"w-8 md:w-16 lg:w-32\" />Read more about creating responsive layouts with Tailwind on their site. The Just-In-Time (JIT) compilerAs part of Tailwind CSS v3, their JIT compiler became the default compilation method. The JIT compiler uses a combination of technologies (mainly purgecss and postcss) to ensure that only the classes used in your application are compiled into the css. The content attribute in the tailwind.config.jsfile is critical to this compilation step, so make sure you check that the glob pattern matches the files you need purgecss to inspect.The last word: Tailwind and development speedTailwind provides almost all the tools you need to build out a site, so you rarely need to write any custom CSS. Using Tailwind CSS means you don't need to worry about naming classes, specificity and cascading classes in the correct order. You also don't need to switch between .jsx and .css.All of which speeds up your development rate Using Tailwind for first time might feel strange at first, but when you get used to it you'll probably come to love it.Related readingUnderstand CSS ModulesNeed more help with Tailwind CSS? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/66ddf9-style-with-tailwind-css/b/4616f6",
    "text": "Tailwind overview",
    "content": "## Tailwind overviewWithin our react-starteris an initial configuration to use the un-opinionated, utility-first CSS framework called Tailwind CSS. Tailwind CSS is optionalCore Chroma Bit components are completely independent of Tailwind and can be used with just our brand tokens import via the <BrandProvider /> component.Tailwind CSS is a utility-first frameworkThe idea of utility classes is that developers are able to choose from a predefined set of options for each utility which creates better consistency company wide.While potentially confronting to many frontend developers, the idea with Tailwind CSS is to use their utility classes inline. When you're building React components, this doesn't feel quite so bad -- but within a page, it can seem like you are going against best practices. Try it before you dismiss the idea. If you still feel totally against it, Tailwind does also allow the use of its utility classes in your own custom CSS classes via their @apply directive -- but that comes down to personal preference.Tailwind is highly customisableThe Chromareact-starterapp includes a custom Tailwind config file tailwind.config.js that overrides the default Tailwind configuration and enables us to reference the Chroma design tokens. These tokens consist of a colour palette that completely replaces the default Tailwind colour palettes to ensure that only approved brand colours are used in your application. The configuration also includes a set of utility objects that extend the default Tailwind settings with the token naming conventions used in Chroma.For example, rather than setting a font-weight with the classfont-bold, the Chroma token is mapped to the classfont-700.The !important stuffYou may notice that as part of the tailwind configuration in the react-starter repo is an attribute important: true. As the name suggests, this adds !importantto all the CSS rules in a Tailwindcss class. You may well think this goes against best practices in CSS. However, as Tailwind classes are always meant to be applied when included, it's sometimes a necessary evil in order to override the CSS modules code in the Chroma components.Including this configuration attribute means you can ensure that Tailwind CSS classes will always work as expected.Tailwind and design system propertiesStyle properties such as typography, spacing, shadows, colours are identical to the utility-classes from Tailwind CSS.For example, an element in Figma may have a box shadow. When you inspect the style, you'll see a token in Figma called --box-shadow-100 which can then be applied in Tailwind using a class ofshadow-100.Colour propertiesColour tokens (spelled color, ahem) in Chroma consist of a palette of global colours that are then distilled down to a palette of foundation colours. These are the colours that are mapped in the tailwind.config.jsfile. These tokens can be accessed from a number of Tailwind CSS utility classes, such asbg, text and border. Below is an example of the colour object and its usage:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // excerpt from tailwind.config.jstheme: {  colors: {    primary: {      lighter: 'var(--color-foundation-primary-lighter)',      light: 'var(--color-foundation-primary-light)',      DEFAULT: 'var(--color-foundation-primary-default)',      dark: 'var(--color-foundation-primary-dark)',      darker: 'var(--color-foundation-primary-darker)'    }  }}// usage<div class=\"bg-primary\"> // note the DEFAULT value simply references the color name<p class=\"text-primary-dark\"><div class=\"border-primary-light\">    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptTypography propertiesChroma has extended Typography utilities rather than completely replace them. This means the Tailwind CSS docs examples will work as expected.However, our own design tokens are also available if referenced in the Figma files. Below are some examples of using the tailwindcss typography utils with and without Chroma design tokens.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // regular tailwind font sizing<p class=\"text-xl font-bold leading-6\"> // font-size:20px, line-height: 24px, font-weight: 700// Chroma font sizing<p class=\"text-500 font-700 leading-1\"> // font-size: 20px, line-height: 25px, font-weight: 700    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLMore information on working with Typography in TailwindcssSpacing propertiesBy default, the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins. That means you can do m-100, w-100, height-100 , and so on.Layout propertiesTailwind has a number of utility classes to help create layouts using CSS Grid Template Columns and Flex Basis. We've also created a Grid and Column component to replicate the old chroma-react components using Tailwind classes. That means Tailwind is a dependency for these specific components.Responsive DesignAll utility classes in Tailwind can be applied to different media breakpoints by using the Tailwind class prefixing method:<div class=\"w-8 md:w-16 lg:w-32\" />Read more about creating responsive layouts with Tailwind on their site. The Just-In-Time (JIT) compilerAs part of Tailwind CSS v3, their JIT compiler became the default compilation method. The JIT compiler uses a combination of technologies (mainly purgecss and postcss) to ensure that only the classes used in your application are compiled into the css. The content attribute in the tailwind.config.jsfile is critical to this compilation step, so make sure you check that the glob pattern matches the files you need purgecss to inspect.The last word: Tailwind and development speedTailwind provides almost all the tools you need to build out a site, so you rarely need to write any custom CSS. Using Tailwind CSS means you don't need to worry about naming classes, specificity and cascading classes in the correct order. You also don't need to switch between .jsx and .css.All of which speeds up your development rate Using Tailwind for first time might feel strange at first, but when you get used to it you'll probably come to love it.Related readingUnderstand CSS ModulesNeed more help with Tailwind CSS? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/66ddf9-style-with-tailwind-css/b/941050",
    "text": "Install Tailwind",
    "content": "## Install TailwindInstall Tailwind CSS with Create React AppTailwind CSSCreate React App install guideInstall Tailwind CSSInstall tailwindcss and its peer dependencies via npm, and then run the init command to generate init command to generate both tailwind.config.js and postcss.config.js.     Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLConfigure your template pathsAdd the paths to all of your template files in your tailwind.config.js file.tailwind.config.js    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  module.exports = {  content: [    \"./src/**/*.{js,jsx,ts,tsx}\",  ],  theme: {    extend: {},  },  plugins: [],}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptAdd the Tailwind directives to your CSSAdd the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.index.css    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  @tailwind base;@tailwind components;@tailwind utilities;    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          SCSSStart your build processRun your build process with npm run start.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npm run start    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLStart using Tailwind in your projectStart using Tailwind’s utility classes to style your content.App.js    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  export default function App() {  return (    <h1 className=\"text-3xl font-bold underline\">      Hello world!    </h1>  )}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTML"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/850aef-work-with-icons",
    "text": "Work with icons",
    "content": "## Work with iconsIcons in Chroma are generally used for decoration. Decorative icons should be hidden from screenreaders. They don't need to be announced to users who are navigating your site or app aurally. If you are using an icon to convey meaning, make sure you provide text-based alternatives for assistive technologies. ExampleIn this example, an icon is used to indicate that the link will open an external site:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <a href=\"https://google.com\" rel=\"external\">  <i class=\"i-product-external-link\" aria-hidden=\"true\" />  <span class=\"sr-only\">Opens an external site</span></a>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTML"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/850aef-work-with-icons/b/2703dd",
    "text": "Overview",
    "content": "## OverviewIcons in Chroma are generally used for decoration. Decorative icons should be hidden from screenreaders. They don't need to be announced to users who are navigating your site or app aurally. If you are using an icon to convey meaning, make sure you provide text-based alternatives for assistive technologies. ExampleIn this example, an icon is used to indicate that the link will open an external site:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <a href=\"https://google.com\" rel=\"external\">  <i class=\"i-product-external-link\" aria-hidden=\"true\" />  <span class=\"sr-only\">Opens an external site</span></a>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTML"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/850aef-work-with-icons/b/87570c",
    "text": "Core icons",
    "content": "## Core icons    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  https://bit.chromadesignsystem.com/?path=/docs/assets-icons-chroma--page    Syntax"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/850aef-work-with-icons/b/64976c",
    "text": "Product icons",
    "content": "## Product iconsProduct icons: coming soon."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/6969b2-accessibility",
    "text": "ACCESSIBILITY",
    "content": "## ACCESSIBILITYAll Chroma components have been designed and built to meet WCAG 2.1 AA standard accessibility. In some cases it is the usage of the component rather than the component itself that ensures your application is compliant, please follow the advice and patterns that we have documented as well as general accessibility patterns such as associating labels and inputs or using alt tags on images etc.What is WCAG?The World Wide Web Consortium (W3C) is an international community that develops the open standards for the Web. The W3C produces specifications on a wide range of web-related topics including HTML, CSS and Accessibility.Within the W3C, there is a sub-group called the Web Accessibility Initiative (WAI) Working Group. This group has been responsible for developing the Web Content Accessibility Guidelines (WCAG).The WCAG guidelines provide a standard for web content accessibility. WCAG 2.1 became a W3C Recommendation in June 2018. The next iteration, 2.2, is scheduled for release in December 2022.Assistive technologiesAssistive technologies are products, equipment and systems that enhance activities for people with disabilities. Here are a some examples of assistive devices in use:          Embed links from these tools          and more          Embed links from these tools          and moreTypes of disabilityA disability is any continuing condition that restricts everyday activities such as using IAG's online services and content.Disabilities are often broken down into the following four broad categories:VisualAuditoryMotor skillsCognitiveYale University have compiled a comprehensive list of the types of disabilities that affect our website and application users Legal requirementsAll Australian websites and mobile applications must comply with the World Wide Web Access: Disability Discrimination Act 1992.The relevant Advisory Note states:\"All existing non-government websites and web content should comply with WCAG 2.0 to a minimum level of AA conformance by December 31, 2013.\"This means more than just websites and applications; it means all content that is presented to users - including Word files, PDF files and much more.For more information and to see how IAG is implementing accessibility measures you can visit the accessibility hub."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/765541-accessibility-testing",
    "text": "Accessibility testing",
    "content": "## Accessibility testingAccessibility isn’t something that you should be thinking about when a project is nearing completion or once in production, this is simply going to cause a lot of technical debt to accumulate and become more difficult to fix the underlying issues. By continuously testing for accessibility issues during development the overall time spent addressing audit results will be greatly reduced.Here are some of the ways that accessibility tools can help.Development toolsHere are the tools that we recommend in order of ease of access:Google LighthouseDeque axe accessibility linter for VS CodeDeque axe devToolsjest-axeAQAGoogle LighthouseLighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.Because you can run Lighthouse in Chrome DevTools this becomes a very useful first port of call tool while developing an application. Simply open Chrome DevTools for the page you would like to test, click on the Lighthouse tab and choose the Accessibility category before clicking the \"Analyze page load\" button. The results will show any glaringly obvious accessibility issues with an informative description including screenshots and classes to affected elements in your page.Deque Systems toolsaxe Accessibility LinterFor those of you using VS Code for your IDE there is an excellent extension from Deque Systems called axe Accessibility Linter which will will aid in avoiding common issues as you code. If you are using IntelliJ there is also a linter available based on axe-core by Fabian Bucher called Accessibility Linter.axe devToolsWhile you are testing your code in a browser another useful tool is the free version of https://www.deque.com/axe/devtools/ which can run over a page and find any obvious mistakes.jest-axeOur Chroma components have a basic accessibility testing CLI tool integrated into our unit tests called jest-axe which, when run, will check for accessibility violations in the component DOM and report these violations in the terminal or cause your CI pipeline to fail and report the error:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { axe, toHaveNoViolations } from 'jest-axe'expect.extend(toHaveNoViolations)it('should have no axe violations', async () => {  const { container } = render(<InformationAlert />)  const results = await axe(container)  expect(results).toHaveNoViolations()})    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptAQAOur preferred accessibility testing tool is AQA by UsableNet. You will need to be assigned an IAG license to use this software (please contact Lloyd Thomas for more information), but once you are setup it is a very powerful tool that can audit your entire application and report issues and allow batch exporting issues to Jira. Test flows are easy to setup for technical and non-technical users, it is as simple as clicking through an application which will record each step in order for the flow to be saved and rerun once issues have been addressed.AQA also allows for predefined test flows to be run as part of an application CI/CD pipeline to ensure that testing is ongoing."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/91b1ac-form-validation",
    "text": "Form Validation",
    "content": "## Form Validation\"On-blur\" form field validation\"On-blur\" or \"inline\" form field validation is where individual form fields are validated immediately after focus has shifted out of the form field.The Design Centre view is that \"On-blur\" form field validation should be avoided.If there is a user-scenario where \"On-blur\" form field validation will have a significant UX benefit, it may be considered. However, this would require a review of the user case with supporting evidence.\"On-submit\" form validation\"On-submit\" form validation is where the entire form is validated as a user attempts to submit the form.\"On-submit\" form validation should be used as the primary method of form validation, regardless of whether \"On-blur\" form field validation is used.When \"On-submit\" form validation is used, the following must occur when the user attempts to submit a form with invalid fields:Above the formAn error message must be presented above the form.Focus must be taken to the error message.The error message should list all errors in the form below.The list should be displayed as links, so users can navigate directly to each error.Links should have an hrefvalue that associates it with the idof the question <Label> that is in error. See the code example below the image.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // Validation Alert message:<Alert variant=\"error\">  <p><strong>Validation Errors!</strong></p>  <p className=\"mb-4\">    There is 1 field that need to be fixed before you can continue  </p>  <ul className=\"mr-4 p-0 list-none\">    <li className=\"mb-4\">      <Link href=\"#email-address\">Email address is invalid</Link>    </li>  </ul></Alert>// The question on the page:<Label id=\"email-address\">Please enter your email address</Label>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)With each invalid fieldEach invalid form fields must be flagged as invalid with a visual indication of the error.Each invalid form fields must present an error message that is descriptive and contextual.Each invalid form fields must be given the \"invalid\" boolean attribute.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <Label className=\"mb-2\" htmlFor=\"inputWithErrorText\">Label</Label><Input  error  id=\"inputWithErrorText\"  value={value}  onChange={handleChange}  aria-describedby=\"inputErrorText\"  required  aria-invalid={true}/><Message id=\"inputErrorText\" className=\"mt-2\" variant=\"error\">  Error message</Message>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/68b753-required-fields",
    "text": "Required fields",
    "content": "## Required fieldsRequired fields for IAG formsIAG forms generally:have all or most fields defined as requiredpresent a single question or small set of questions per page rather than presenting all questions on a single pageFor these types of IAG forms, a statement must be displayed above the form on the first step in the form process. The statement must read:\"All fields throughout this application are required except when marked as (Optional)\"Required and optional fieldsAll required fields must be assigned the boolean \"required\" attributes. All optional fields need to be identified as optional. This is achieved with two stepsThe wording \"(Optional)\" must be added within the label contentEnsure that the form field does not have the required  prop set to trueAccessibility requirementsWCAG 2.1 Accessibility Guidelines require that all required form fields must be visibly identifiable for sighted users. There are two methods that can be used:If only some fields are required, a visual identification method must be displayed with each of the required fieldsIf all or most fields are required, a statement must be displayed above the form to informing users that all/most fields are required unless marks optional.The relevant WCAG Success Criteria include:3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)4.1.2 Name, Role, Value: For all user interface components, the name and role can be programmatically determined (Level A)"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/934e18-radio-checkbox-and-segmentedcontrol",
    "text": "Radio, Checkbox and SegmentedControl",
    "content": "## Radio, Checkbox and SegmentedControlBasic rules of useProblemSolution1 optionUse the <Checkbox />   component2+ non-mutually exclusive optionsUse the <Checkbox />   component2-5 mutually exclusive optionsUse the <Radio />   component, or in specific circumstances, one of the following (see usage below):the <SegmentedControl />   component (in specific instances)the <RadioBlock />   component (in specific instances)6+ mutually exclusive optionsUse the <Select />   componentRadios are ideal for surfacing the options to choose from in a quickly scannable manner, however, UX research around vertical scan-ability being easier for users to read information has led to the decision that inline Radio lists are no longer supported in Chroma.Using the SegmentedControlUsed as an alternative to the <Radio> only when there is a need to reduce the vertical spacing of a page.Can only be used when all of the following conditions are met:there are 2-3 mutually exclusive optionsthe options are closely related conceptuallythe labels can be expressed in 1-2 short wordsUsing the RadioBlockUsed as an alternative to the <Radio> only when the addition of an icon demonstrably helps communicate meaning faster than a text label on its own.Can only be used when all of the following conditions are met:there are 2-5 mutually exclusive optionsthe iconography is understandable to end users (may need testing)Checkbox usageFor single checkboxes, the `legend` must be provided but can be visually hidden if the purpose of the checkbox is clearly defined by the checkbox label.For groups of checkboxes, the `legend` must be provided but can be visually hidden if the purpose of the checkboxes is able to be understood by the labels and surrounding context.Checkbox labels should be succinct to make choosing the correct option a simple task. Adding excessive amounts of text in checkbox labels can impact certain users, especially screen reader users, who will have to listen to each option."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/53d4f1-headings",
    "text": "Headings",
    "content": "## HeadingsUsing headingsHTML defines six levels of headings, and these heading elements are H1, H2, H3, H4, H5, and H6. The H1 element is the highest rank, and the H6 element is the lowest rank.These different heading levels help to communicate the organization and hierarchy of the content on a page. For example, headings with an equal or higher ranking indicate the start of a new section, and headings with a lower rank indicate the start of a new subsection that is part of a higher-ranked section.Heading markup will allow assistive technologies to present the heading status of text to a user. For example, screen reader users can recognize heading markup, and announce the text as a heading, along with a heading level. Screen readers also allow users to navigate web pages via heading levels. This allows users to quickly find the content of interest.Heading level 1All pages must start with an H1 heading. There must be only one H1 heading per page.IAG web applicationsIn the case of IAG web applications, generally the H1 should be positioned in the header, and state the name of the product. The page title should be an H2 element.        Image showing heading level 1 and 2 in positionSkipping heading levelsSkipping heading levels, for example, jumping from an H1 to an H3, can be confusing for some types of users, and should be avoided where possible. For example, it's generally not considered a good practice to have an H4 heading directly after an H2 heading.However, it's acceptable to skip heading levels when closing a subsection. For example, an H2 element can begin a new section directly after an H4, which was the last subsection within the previous section.Headings should be meaningfulAll headings should be descriptive and meaningful. Headings should describe the content within that section.Avoid content styled to look like headingsAuthors should avoid adding classes to non-heading elements and then style these elements to look like headings. These elements often have no semantic meaning, and are not treated as heading elements by assistive technologies.Headings should not be emptyThere should be no empty heading elements on a page. This can cause confusion for assistive technologies, especially those who are navigating via headings. Every page should have a heading, starting with an H1. Every page should have headings to help to find sections of content, and every page should have headings that follow a logical sequence.Avoid all-cap headingsAuthors should avoid headings that are written in all caps, as these can present issues for some assistive technology users when the heading content is announced. CSS can be used to visually represent the content in capitalised form.Avoid long headingsIdeally heading content should be under 100 characters in length, as otherwise, they are too long, and this can cause issues for assistive technology users who navigate via headings."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/28f1f2-buttons",
    "text": "Buttons",
    "content": "## ButtonsButtons vs linksLinks and buttons have different purposes. Buttons should be used trigger some sort of action, and links should be used to send the user to a new URL. Buttons and links also operate differently for keyboard-only users. While both can receive focus using the TAB key, links can only be triggered using the ENTER key, buttons can be triggered using the ENTER or SPACEBAR keys.Button usageWithin IAG web applications, if two buttons are presented in a group they should be placed inside the ButtonGroup component. This will align both buttons to the left, and provide spacing between the buttons. In the ButtonGroup, the highest order button should always be positioned at the right.Button rulesThe content of the button should be meaningful. The purpose of the button can be determined from the button text alone.Buttons must be keyboard accessibleButton text should not refer to device dependent handlers (eg. click)Button text should not refer to 'more' without additional informationButton content must not be written in all-caps as it can present accessibility barriers for some types of users.There must be a sufficient color contrast between foreground and background."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/46d7e4-learn",
    "text": "LEARN",
    "content": "## LEARNWant to know a little something extra about working with Chroma? Masterclasses are an in-depth look at the history and build for Chroma, as well as how it fits into the IAG landscape."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/04da17-understand-design-tokens",
    "text": "Understand design tokens",
    "content": "## Understand design tokensDesign tokens store UI valuesDesign token TL;DRDesign tokens are named entities that store visual design attributes (aka UI information). They represent small, repeatable design decisions, and they avoid hardcoding or static values (like, for example, hex values). Design tokens store repeatable visual design elementsDesign tokens are the visual design atoms of the system, and cover items like:ColoursTypographyComponent stylingSpacingAnimation.Design tokens streamline design and developmentDesign tokens can ensure the same style values are used across design files and code, which helps to streamline design and development. Design tokens:Ensure consistency wherever values in components must be matchedMake your app brand-agnosticCreate flexibility for branding work.Related readingWhat are design tokens? (Robin Rendle, 3 April 2019, css-tricks)What the #&%$ are Design Tokens? (2020) (UX Lord, 30 July 2020, Medium)Need more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/04da17-understand-design-tokens/b/03936d",
    "text": "Overview",
    "content": "## OverviewDesign tokens store UI valuesDesign token TL;DRDesign tokens are named entities that store visual design attributes (aka UI information). They represent small, repeatable design decisions, and they avoid hardcoding or static values (like, for example, hex values). Design tokens store repeatable visual design elementsDesign tokens are the visual design atoms of the system, and cover items like:ColoursTypographyComponent stylingSpacingAnimation.Design tokens streamline design and developmentDesign tokens can ensure the same style values are used across design files and code, which helps to streamline design and development. Design tokens:Ensure consistency wherever values in components must be matchedMake your app brand-agnosticCreate flexibility for branding work.Related readingWhat are design tokens? (Robin Rendle, 3 April 2019, css-tricks)What the #&%$ are Design Tokens? (2020) (UX Lord, 30 July 2020, Medium)Need more support? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/04da17-understand-design-tokens/b/19320a",
    "text": "Token types",
    "content": "## Token typesFour categories of design tokensDesign tokens can be categorised into:GlobalAliasComponentBrand.Global TokensGlobal tokens include baseline colour tokens which get set across all channels and brands.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  {  \"global\": {    \"brand\": {      \"primary\": {        \"50\": { \"value\": \"#F5F5F6\" },        \"100\": { \"value\": \"#D7D8DA\" },        \"200\": { \"value\": \"#AFB2B4\" },        \"300\": { \"value\": \"#888B8F\" },        \"400\": { \"value\": \"#606569\" },        \"500\": { \"value\": \"#383E44\" },        \"600\": { \"value\": \"#2D3236\" },        \"700\": { \"value\": \"#222529\" },        \"800\": { \"value\": \"#16191B\" },        \"900\": { \"value\": \"#0B0C0E\" },        \"950\": { \"value\": \"#030303\" }      },\t  \"secondary\": {\t\t...\t  },\t  \"accent\": {\t\t...\t  }, \t  \"link\": {\t\t...\t  }   }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptAlias TokensAlias tokens define roles and provide context for global-based token sets.An example of this are the tokens that are used for the individual component properties:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // Alert component{  \"alert\": {    \"color\": { \"value\": \"{typography.body.color}\" }  }}// which is referencing the base/typography.json{  \"typography\": {    \"body\": {      \"color\": { \"value\": \"{color.foundation.neutral.black}\" }    }  }}/* and the typography object is referencing the foundation colour tokens, which in turn reference the global system colours */{  \"color\": {    \"foundation\": {      \"neutral\": {        \"black\": {          \"value\": \"{color.global.system.black}\"        }      }    }  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScript"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/04da17-understand-design-tokens/b/878cc6",
    "text": "Token use",
    "content": "## Token useHow we use tokensWhen we run our brand-tokens build the token json files are converted to css vars using style-dictionary and published to an AWS S3 bucket which we then reference in our components. Once the <BrandProvider />  loads the tokens the css variables will be available in the browser, if not it will fall back to the default value set.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // tokens json{  \"alert\": {    \"color\": { \"value\": \"{typography.body.color}\" }  }}// output--alert-color: #121212;// alert.module.css.alert {  color: var(--alert-color, #121212); // all token references have a default fallback value set}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptDesign tokens in ChromaWe explain how to use design tokens in Chroma in our Storybook introduction pages: https://bit.chromadesignsystem.com/?path=/docs/introduction-about--pagehttps://bit.chromadesignsystem.com/?path=/docs/introduction-development-guide--page"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/4601b4-understand-css-modules",
    "text": "Understand CSS Modules",
    "content": "## Understand CSS ModulesWhat are CSS Modules?Chroma Bit components use CSS Modules as a method of locally scoping class names to ensure there are no unwanted cascade issues in components or an application. Bit components are exported uncompiled so this does mean that there may be a small configuration step for CSS Modules to work in your application.If you use Create React App or Nextjs, CSS Modules will work out of the box. If you are creating an app without one of these frameworks, an update to the css-loader in webpack is necessary for CSS Modules to work. Enable the modules parameter in the options object as below and set the localIdentName.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  rules: [  {    test: /\\.css$/,    use: [      {        loader: 'style-loader',      },      {        loader: 'css-loader',        options: {          sourceMap: true,          modules: true,          localIdentName: '[name]_[local]_[hash:base64:5]'        }      }    ],  }]    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptServer-side and static websitesPostCSS-Modules allows to use CSS Modules for static builds and server side.But what does it do?When you write css with CSS Modules you do so as you normally would in a file called something like: alert.module.css  and then import that file into your React component. This is where the process differs as you need to refer to the styles as a javascript object like so:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // alert.module.css.alert {  position: relative;  display: flex;  font-size: var(--alert-font-size, 1rem);  align-items: flex-start;  color: var(--alert-color, #121212);  padding: var(--alert-padding, 16px);}.alert--information {  background-color: var(--alert-information-background-color, #f4f8fa);}// alert.tsximport styles from './alert.module.css'return (  <div className={styles.alert}></div>)/* here is an example of how we use css modules with the `classnames` npm package */import classnames from 'classnames'const alertClass = classnames(  styles.alert,  {    [styles['alert--information']]: variant === 'information',  })return (  <div className={alertClass)></div>)    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/328592-apply-a-brand-to-your-app",
    "text": "Apply a brand to your app",
    "content": "## Apply a brand to your appOnce a brand has been defined and published in our brand-tokens repo, a set of design token CSS files are deployed to AWS. NoteThe set of design token CSS files contain the set of design tokens as CSS variables, along with a CSS reset and some typography configuration.When you load the CSS files, the variables will apply the specified brand styles to your Chroma components. They can also be referenced as custom CSS classes in your applications. Need more help with applying a brand? Let us know in our dedicated #brand-tokens channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/328592-apply-a-brand-to-your-app/b/871334",
    "text": "Overview",
    "content": "## OverviewOnce a brand has been defined and published in our brand-tokens repo, a set of design token CSS files are deployed to AWS. NoteThe set of design token CSS files contain the set of design tokens as CSS variables, along with a CSS reset and some typography configuration.When you load the CSS files, the variables will apply the specified brand styles to your Chroma components. They can also be referenced as custom CSS classes in your applications. Need more help with applying a brand? Let us know in our dedicated #brand-tokens channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/328592-apply-a-brand-to-your-app/b/84514e",
    "text": "BrandProvider",
    "content": "## BrandProviderApply a brand using Chroma BrandProviderThe easiest way to import and apply these design token CSS variables is to use the Chroma BrandProvider component. BrandProvider will append the file to the <head> of your document and de-dupe instances if needed (for example, if you're working with MFEs and multiple applications are using Chroma Bit components). Check out the BrandProvider documentation for more information on the available props for this component, such as brand, stagingUrl and version.If you're creating a custom component or need to access the CSS variables for custom styles in your application, the easiest method is still to use the BrandProvider and then inspect the<head> of your page to get the CSS file. For example: https://tokens.chromadesignsystem.com/latest/css/brands/chroma/web/base.css.gz     Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // example of css variables output for the Chroma brand--color-background-primary: #240046;--color-background-primary-light: #f4f2f6;--color-background-secondary: #eb5e55;--color-background-secondary-light: #fef7f6;--color-background-accent: #8a8a8a;--color-background-accent-light: #f9f9f9;--color-background-error: #da0000;--color-background-error-light: #fdf2f2;--color-background-warning: #e96a20;--color-background-warning-light: #f2a679;--color-background-success: #47810e;--color-background-success-light: #f6f9f3;--color-background-information: #2d799f;--color-background-information-light: #81afc5;    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          SCSSIf you need to reference these design tokens, you can create a custom class.An example of a custom classLet's say you're creating a Card component and you want to set the background colour to secondary light:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  .my-card {  background-color: var(--color-background-secondary-light);}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          SCSSIn this example, the background will have the secondary light token value for the selected brand applied. If you then choose to switch to another brand it will immediately update to the token value for the new brand.Need more help with applying a brand? Let us know in our dedicated #brand-tokens channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/328592-apply-a-brand-to-your-app/b/59e1de",
    "text": "CSS reset",
    "content": "## CSS resetCSS reset and global configurationThe tokens file imported via the<BrandProvider /> includes some CSS reset, font and assets imports and typography configuration.Here's a sample of the global heading tag styles which reference the Chroma design tokens.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700;900&display=swap');h1,h2,h3,h4,h5,h6 {  font-family: var(--typography-heading-font-family, 'Overpass', sans-serif);  font-weight: var(--typography-heading-font-weight, 600);  color: var(--typography-heading-color, #121212);  line-height: var(--typography-heading-line-height, 1.25);}h1 {  font-size: var(--typography-heading-h1-font-size-xs, 1.625rem);  line-height: var(--typography-heading-h1-line-height-xs, 1.23);}h2 {  font-size: var(--typography-heading-h2-font-size-xs, 1.375rem);  line-height: var(--typography-heading-h2-line-height-xs, 1.272);}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          SCSSBy including the primary and secondary font url as a token in the brand json file, we're able to convert that value into an@import statement to ensure your brand tokens can reference the correct font -- and more importantly, that the value exists in your application. The typography-specific tokens referenced above can be overridden in the brand global.json file.Need more help with applying a brand? Let us know in our dedicated #brand-tokens channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/50404d-use-bit-components",
    "text": "Use Bit components",
    "content": "## Use Bit componentsThe Chroma team made the decision to move to Bit component development because it offers several key advantages over other development approaches.TL;DRChroma uses Bit components because they minimise code conflicts and make versioned component releases simple.A bit about BitFrom the Bit website:Bit is an open-source tool for composing component-driven software.Effectively, Bit development offers a way to build, deploy and version completely self contained and composable components. When each component can be individually deployed and versioned, tasks like fixing bugs or adding features to the component are easier for app teams to update and test.Chroma Bit components are standaloneEach Chroma Bit component is developed as a fully encapsulated, standalone React component that can be optionally customised using CSS modules. This mitigates risks of CSS collisions, and makes it possible to do component-by-component releases. This is a crucial mitigation for risks that arise from parallel development (for example, in the case of MFE architecture) and applications with a very long expected shelf life.Chroma Bit components are deployed to collections hosted in our Bit Cloud library. Once deployed, the component is added to the Bit Storybook documentation page and its install path is included as an npm link. Our Bit Storybook includes pages for all core Chroma components, along with examples and patterns made up of components and CSS markup. We've used Tailwind CSS for markup.Note that Chroma Bit components can also import other Chroma components as a dependency. Chroma Bit components use CSS modulesIn a nutshell, CSS Modules are written just like normal CSS files, but they allow you to use locally-scoped class names. This avoids problems inherent with global scope in CSS:CSS modules avoid class name collisions in your applicationsBEM naming conventions don't apply to CSS modules.The reason we can avoid these problems is that the compiler processes styles into a unique string of characters during the build phase.For instance, you can create a button class called .button without fear that it might clash with another class of the same name from another css file in an application. To apply the class name in a react component or file, use the following:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import styles from 'alert.module.css'const Alert = () => {  <div className={styles.alert} />}// rendered output will be something like:<div class=\"alert-module__alert__3DkRY\" />    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptRead more about CSS Modules hereChroma Bit components are branded at runtimeWhen a brand is created for Chroma and deployed via ourbrand-tokens repo, a set of CSS variables is made available via AWS which can be imported into components and applications. These CSS variables can be used to set values and a default fallback value so  the component can be easily branded at runtime. Our  as one of our defined brands from thebrand-tokensrepo (such as NRMA, Coles, ASB, and so on) by importing a brand tokens (CSS variables) file via our util component <BrandProvider />.  Here's an example of CSS used to help define an Information Alert component:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  .alert--information {  background-color: var(--alert-information-background-color, #f4f8fa);}.alert--information .icon {  color: var(--alert-information-icon-color, #2d799f);}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          SCSS--alert-information-background-color is a css variable version of the token object that lives in our brand-tokens repo,  which is represented in json as:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  {  \"alert\": {    \"information\": {      \"backgroundColor\": {        \"value\": \"{color.foundation.information.lighter}\"      },      \"icon\": {        \"color\": {          \"value\": \"{color.foundation.information.default}\"        }      }    },  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptAs the brand-tokens repo uses Amazon Style Dictionary under the hood we are able to reference other json definitions in the system, the {color.foundation.information.lighter} for example is defined in a global color file called base/color/foundation.json . This token referencing model helps create consistency throughout the Chroma Design System.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { Alert } from '@iag/chroma-react-ui.alert'const App = () => (<Alert variant=\"information\">\t<h3>Information Alert</h3>    <p>Information alert content</p></Alert>)export default App    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLNeed more help with Bit? Check our dedicated #bit channel on Slack. "
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/50404d-use-bit-components/b/1068a4",
    "text": "Overview",
    "content": "## OverviewThe Chroma team made the decision to move to Bit component development because it offers several key advantages over other development approaches.TL;DRChroma uses Bit components because they minimise code conflicts and make versioned component releases simple.A bit about BitFrom the Bit website:Bit is an open-source tool for composing component-driven software.Effectively, Bit development offers a way to build, deploy and version completely self contained and composable components. When each component can be individually deployed and versioned, tasks like fixing bugs or adding features to the component are easier for app teams to update and test.Chroma Bit components are standaloneEach Chroma Bit component is developed as a fully encapsulated, standalone React component that can be optionally customised using CSS modules. This mitigates risks of CSS collisions, and makes it possible to do component-by-component releases. This is a crucial mitigation for risks that arise from parallel development (for example, in the case of MFE architecture) and applications with a very long expected shelf life.Chroma Bit components are deployed to collections hosted in our Bit Cloud library. Once deployed, the component is added to the Bit Storybook documentation page and its install path is included as an npm link. Our Bit Storybook includes pages for all core Chroma components, along with examples and patterns made up of components and CSS markup. We've used Tailwind CSS for markup.Note that Chroma Bit components can also import other Chroma components as a dependency. Chroma Bit components use CSS modulesIn a nutshell, CSS Modules are written just like normal CSS files, but they allow you to use locally-scoped class names. This avoids problems inherent with global scope in CSS:CSS modules avoid class name collisions in your applicationsBEM naming conventions don't apply to CSS modules.The reason we can avoid these problems is that the compiler processes styles into a unique string of characters during the build phase.For instance, you can create a button class called .button without fear that it might clash with another class of the same name from another css file in an application. To apply the class name in a react component or file, use the following:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import styles from 'alert.module.css'const Alert = () => {  <div className={styles.alert} />}// rendered output will be something like:<div class=\"alert-module__alert__3DkRY\" />    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptRead more about CSS Modules hereChroma Bit components are branded at runtimeWhen a brand is created for Chroma and deployed via ourbrand-tokens repo, a set of CSS variables is made available via AWS which can be imported into components and applications. These CSS variables can be used to set values and a default fallback value so  the component can be easily branded at runtime. Our  as one of our defined brands from thebrand-tokensrepo (such as NRMA, Coles, ASB, and so on) by importing a brand tokens (CSS variables) file via our util component <BrandProvider />.  Here's an example of CSS used to help define an Information Alert component:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  .alert--information {  background-color: var(--alert-information-background-color, #f4f8fa);}.alert--information .icon {  color: var(--alert-information-icon-color, #2d799f);}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          SCSS--alert-information-background-color is a css variable version of the token object that lives in our brand-tokens repo,  which is represented in json as:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  {  \"alert\": {    \"information\": {      \"backgroundColor\": {        \"value\": \"{color.foundation.information.lighter}\"      },      \"icon\": {        \"color\": {          \"value\": \"{color.foundation.information.default}\"        }      }    },  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptAs the brand-tokens repo uses Amazon Style Dictionary under the hood we are able to reference other json definitions in the system, the {color.foundation.information.lighter} for example is defined in a global color file called base/color/foundation.json . This token referencing model helps create consistency throughout the Chroma Design System.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { Alert } from '@iag/chroma-react-ui.alert'const App = () => (<Alert variant=\"information\">\t<h3>Information Alert</h3>    <p>Information alert content</p></Alert>)export default App    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLNeed more help with Bit? Check our dedicated #bit channel on Slack. "
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/50404d-use-bit-components/b/757a75",
    "text": "Using Bit components",
    "content": "## Using Bit componentsUsing Chroma Bit componentsWhen Chroma deploys a component to a Bit collection, the component is also added to the Bit Storybook documentation page and each component page includes the install path (as an npm link). Before you can install a Chroma Bit component locally, make sure you've configured@iag as a scoped registry by running the following command:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npm config set '@iag:registry' https://node.bit.cloud    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          ShellYou'll also need to add an.npmrc file to your application in order to install the components as part of your CI/CD with the following contents:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  @iag:registry=https://node.bit.cloud    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          ShellOnce you've completed the installation steps, using a Chroma Bit component should be the same as using any other npm package:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { Alert } from '@iag/chroma-react-ui.alert'const App = () => (<Alert variant=\"information\">\t<h3>Information Alert</h3>    <p>Information alert content</p></Alert>)export default App    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLNeed more help with Bit? Check our dedicated #bit channel on Slack. "
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/60dca8-work-with-mfes",
    "text": "Work with MFEs",
    "content": "## Work with MFEsOverview of working with Micro frontends and ChromaShould you use MFEs?The decision to use Micro frontends in your app belongs to your domain architect, who'll make the call on a project-by-project basis.  IAG has moved to a micro frontend (MFE) architecture for some application development. In response, the Chroma team has worked hard to resolve any risks that could arise from parallel use of MFEs and Chroma components, specifically in the way tokens are applied.Want to know more? Join the conversation in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/60dca8-work-with-mfes/b/09c09b",
    "text": "Overview",
    "content": "## OverviewOverview of working with Micro frontends and ChromaShould you use MFEs?The decision to use Micro frontends in your app belongs to your domain architect, who'll make the call on a project-by-project basis.  IAG has moved to a micro frontend (MFE) architecture for some application development. In response, the Chroma team has worked hard to resolve any risks that could arise from parallel use of MFEs and Chroma components, specifically in the way tokens are applied.Want to know more? Join the conversation in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/60dca8-work-with-mfes/b/60118c",
    "text": "Main risks",
    "content": "## Main risksMain risks for working with Chroma and MFEsThere were two main risks we had to resolve in order to keep Chroma applications healthy and functioning.Risk 1: Potential CSS collisionsThe first risk we identified was potential CSS collisions. Applications that use a MFE architecture can load load both our legacy ‘chroma-react’ component library and our new Bit based component library in parallel into a host application. This parallel import of css could lead to collisions in the CSS which could cause applications to experience rendering issues and inconsistencies.To address this risk, we worked to ensure the new component CSS was completely encapsulated, with no possibility of inheritance from our legacy main.cssfile. Read our risk mitigations to find out how, specifically, we did that.Risk 2: Release updates and production appsThe second risk was around what happens to applications when a new update is released.Applications in production aren’t necessarily updated for each new release, and may not be updated at all for a long time. This leaves a gap during which time Chroma tokens may potentially change. This can lead to unexpected visual behaviour.To address this second risk, we implemented versioning for token releases. This means a live app will continue to use the set of tokens that are compatible with the version of Bit components that were initially used. The app won't be affected by future token releases. There were two main risks we had to resolve in order to keep Chroma applications healthy and functioning.Need more help with MFEs? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/60dca8-work-with-mfes/b/86c65b",
    "text": "Risk mitigations",
    "content": "## Risk mitigationsRisk mitigations we employedTo build a robust compatibility between Chroma components and MFEs, we  used two valuable mitigations. 1. We refactored core components to use  CSS Modules Remembering that our first risk was around CSS collisions, we made the decision to use CSS Modules.CSS Modules generate locally-scoped class names for your application at build time. That means no two apps have the same class names applied, even if they're using the same components. Which further means that by using CSS Modules, we ensured there could be no no risk of collisions between class names that could affect component rendering.This approach is particularly useful if the MFE host is loading an application that uses legacy Chroma components, even if that legacy component is being consumed by an MFE. It makes it possible for legacy apps to include identical component class names with completely different styles applied. CSS Modules also make it possible to reference different versions of the tokens in the same application, which enabled us to take the second step. Read more about CSS Modules on the github site. 2. We built the BrandProvider component The BrandProvider component can be used to load specific branded versions of Chroma design tokens as a file containing CSS variables. The file is injected into the <head> of the document so the variables can be referenced by Chroma Bit components within that application.  Specifying different branded versions of the design tokens enables the host application to load these files at runtime and de-dupe any files it needs to. Note that we recommend that each MFE has its own BrandProvider, rather than setting it in the host application. Read more about the BrandProvider component in our Storybook documentation.Need more help with MFEs? Let us know in our #chroma-dev channel on Slack."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/22506d-brand-configuration-object",
    "text": "Brand Configuration Object",
    "content": "## Brand Configuration ObjectChroma Styling vs ConfigurationChroma controls the styling of components across all brands in the system to make it easier to build multi-branded applications. However some brands may require additional changes which means modifying your existing code to enable that. In order to avoid conditional logic littered throughout your application we suggest using the \"brand config object\" to manage this in a simpler way.Multi-brand ProblemsLet's take a look at a the header component as an example of the potential brand issues which may occur. The example below shows a basic header component with a logo and primary button attached.  As you can see both header components include the same code, however the styling of Bendigo Bank makes the primary button blend into the background, which makes it display more like a link than a button.        Expected result: NAC Insurance Header example with a Primary Button        Unexpected result: Bendigo Bank Header example with a Primary Button that has no background colour and incorrectly looks like a linkThere are a few ways that this can be fixed, one is to add conditional logic throughout your application for every brand that has this issue however it will pollute your code and need to be updated each time a new brand is added which is not a scalable solution.Another way it could be addressed is for Chroma to define any primary buttons within the header component should be styled as something different, again not a great solution and could differ per brand which would require new versions of the header component over time.A Better SolutionWith the brand configuration the styling decision is abstracted away from the application page or component code and instead defined in a JSON object that can be shared and referenced via a custom react hook across applications.In the example above the problem occurs because the button variant is defined as \"primary\", if we use the brand configuration object to control this prop instead a reference to the object can be used such as config.header.button  and then in the config object a header object such as: header: { button: 'primary' }  can be created.How to Use?The configuration is provided directly via the <BrandProvider /> component. To use, target the config object via the extendBrandConfig   anduseBrandProvider() functions as per the example below.The config object will retrieve the branded object based off the brand passed into the <BrandProvider /> component, in the case below it will retrieve the bendigo-bank object. If the BrandProvider brand was switched to another brand it would reference the default object value.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import {  BrandProvider,  extendBrandConfig,} from '@iag/chroma-react-ui-utils.brand-provider'const brandConfig = extendBrandConfig({  default: {    header: {      button: {        variant: 'primary',      },    },  },  'bendigo-bank': {    header: {      button: {        variant: 'secondary'      }    }  }})const Header = () => {  const { config } = useBrandProvider()  return (    <header>      <Button variant={config?.header?.button?.variant}>Button</Button>    </header>  )}const BrandProviderConfig = () => (  <BrandProvider brand=\"bendigo-bank\" config={brandConfig}>    <Header />  </BrandProvider>)    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)The result of the code above is a Header that, for Bendigo Bank, will use the \"secondary\" variant and therefore present a Button that is visible against the primary coloured background.        Bendigo Bank using a Header with a config object that sets the button variant to secondaryObject TypesThere are two object types defined within the config, these are:default, andbrandDefault ObjectThe default object sets the global definition for all brands.  So it's best to apply global changes in this way below.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  const brandConfig = extendBrandConfig({  default: {    header: {      button: {        variant: 'primary',      },      h1: {        className: \"text-white\",      }    },  },})    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)Brand ObjectThe brand object is where you can override the default setting for each brand within the application.  In this example we are overriding the default header button variant and heading class for Bendigo Bank.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  const brandConfig = extendBrandConfig({  default: {    header: {      button: {        variant: 'primary',      },      h1: {        className: \"text-black\",      }    },  },  'bendigo-bank': {    header: {      button: {        variant: 'secondary'      },      h1: {        className: \"text-white\",      }    }  } })    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)What is the object definition?The brand configuration object was originally intended to manage component variants.  However, it could also be extended to manage class names, assets and text if required, like the example below.     Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  const brandConfig = extendBrandConfig({  default: {    header: {      button: {        variant: 'primary',        text: 'Login',        icon: 'i-user'      },      h1: {        className: \"text-white\",        text: \"Online Accounts\"      }    },  },})    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)When should I use the Brand Configuration Object?The brand config should be for the exceptional cases that would be difficult to solve with simple CSS in the system. When making a decision on whether to use the brand config to customise your application there are a couple of things to consider:Is this a brand styling issue? If the default components are not displaying correctly for a brand then it should be solved globally in the brand tokens by the Chroma team? If so please contact Chroma.Are you creating a configuration item that can be used across multiple applications in order to create visual consistency?The Header example above is a great case study because instead of reinventing the wheel the brand config is simply used as a way to select a default Button prop to apply and then override objects that apply to certain brands where the default Button style doesn't work against the Header background. It is being used as a Button variant selector.Typescript issues and how to fix themThe Brand Provider Context config prop is set as type NestedObject and as we don't specify what the object values have to be in order to make it as flexible as possible. The issue which you may experience in your applications is that if you use a string as a value Typescript will complain. In the following example TS will complain that type 'NestedObject' is not assignable to string:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <h1 className={ config?.header?.h1?.className }>Heading</h1>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)You will need to handle these Typescript errors in your application, for example:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  const classString = config?.header?.h1?.className as unknown as string<h1 className={classString}>Heading</h1>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)"
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/058a2e-bugs-and-requests",
    "text": "Bugs and requests",
    "content": "## Bugs and requestsRaise a bug with the Chroma teamYou can raise a bug using our Jira request form.Step 1: Create a new Jira requestOur Jira request form is the best place to raise a bug.This form will generate a Jira ticket which we will triage the following day.Please include as much information as possible so that we can properly investigate the issue. Step 2: Triage and trackOnce a request has been raised in Jira, we will review the ticket at our next standup. Then we'll allocate the ticket to a sprint. You can track our progress via your Jira ticket.Step 3: Release and updateDepending on the issue, there may be different release processes.Your Jira request will be updated with the relevant release information. We will also let you know what you need to do to update your build."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/058a2e-bugs-and-requests/b/90ab64",
    "text": "Raise a bug",
    "content": "## Raise a bugRaise a bug with the Chroma teamYou can raise a bug using our Jira request form.Step 1: Create a new Jira requestOur Jira request form is the best place to raise a bug.This form will generate a Jira ticket which we will triage the following day.Please include as much information as possible so that we can properly investigate the issue. Step 2: Triage and trackOnce a request has been raised in Jira, we will review the ticket at our next standup. Then we'll allocate the ticket to a sprint. You can track our progress via your Jira ticket.Step 3: Release and updateDepending on the issue, there may be different release processes.Your Jira request will be updated with the relevant release information. We will also let you know what you need to do to update your build."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/058a2e-bugs-and-requests/b/460180",
    "text": "Request a feature",
    "content": "## Request a featureRequest a feature for ChromaWhen considering a new feature request, the best place to begin is the  #chroma-dev channel in Slack. This will start a discussion with the Chroma community of devs. There might be another solution via either development or design.If you get the all-clear from the Chroma Core team, then all feature requests can be made using our Jira request form, just like raising a bug."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/80026a-analytics",
    "text": "ANALYTICS",
    "content": "## ANALYTICSSite tracking schemaAnalytics events in Chroma componentsIn order to aid developers with reporting tracking events Chroma has some built in functionality to automate the process from our components. The tracking events that are sent from Chroma components all follow the same event schema based on the site tracking schema link above. Chroma component based analytic events are not a substitute for programmatic tracking events generated in your application by functions, workflow events or page eventsOnly basic information can be tracked from Chroma components, this is not meant as a replacement for more advanced tracking functionality in your application but rather to work in parallel as additional information.Below is an example of the tracking schema applied to a Chroma Button that would be sent automatically onClick.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  // Button analytics event exampleconst analyticsEvent = {  interaction: 'click',  element: {    type: 'button',    subtype: 'primary',    name: 'retrieve-quote',    value: 'Get quote'  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptA Chroma component will always have an interaction  value such as click,  input,  show,  hide,  erroretc. and an element  object that has a type,  optional subtype,  nameand value  These attributes will use the best available information from the information passed into the component props.The Analytics ProviderChroma component site tracking is dependent on the IAG Analytics Provider, if your application or MFE is not wrapped with this provider the components will not be able to report the tracking events to Adobe Analytics."
  },
  {
    "url": "https://docs.chromadesignsystem.com/145e8394a/p/8061a5-chroma-analytics",
    "text": "Chroma Analytics",
    "content": "## Chroma AnalyticsGetting startedThis page covers the current existing analytics solution. There is a new analytics solution currently in development by the Chroma/Pegasus and Sitetracking teams and the docs will be updated as soon as this solution is readyThe first step to using Chroma Analytics is to install the @iag-packages/sitetracking npm package:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  npm install @iag-packages/sitetracking    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptThis package can then be used to setup the initial event payload data that you want included with each request. The setup can work either per application or per page/flow by running the ChromaAnalytics init() method, note this can be run multiple times and it will use the latest call to set the data object to attach per event request.    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  import { init as AnalyticsInit } from '@iag-packages/chroma-react/lib/utils/chromaAnalytics'import { chromaTracking, ReactSiteTracking } from '@iag-packages/sitetracking'    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptTo run the analytics init method on app or specific page load a useEffect or useLayoutEffect React hook can be utilised. In initial tests useLayoutEffectseemed to work better as this runs synchronously once React has performed all DOM mutations similar to the old componentDidMount method.The Object inside the init method can contain any meta data and will passed along with any future events such as a button click:You must pass in the imported chromaTracking function into the init function    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  useLayoutEffect(() => {  AnalyticsInit({    chromaTracking,    chromaReactVersion: 'x.x.x',    chromaCoreDependency: 'x.x.x',    chromaAssetsDependency: 'x.x.x',    formName: 'PayExcess'  })}, [])    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)The following code:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <Button primary id=\"primaryButton\">Next</Button>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          HTMLwould therefore emit the following event to the chroma-analytics package:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  {  chromaReactVersion: 'x.x.x',  chromaCoreDependency: 'x.x.x',  chromaAssetsDependency: 'x.x.x',  formName: 'PayExcess',  event: {    action: 'click',    componentType: 'Button',    tagName: {      class: 'c-btn--primary',      id: 'primaryButton',      label: 'Next',      name: 'Next button',      type: 'button'    }  }}    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptAnalytics enhanced component listzFor a list of all of the chroma-react components that currently support the new analytics enhanced behaviour there is a Confluence page documenting the event requests: Table of analytics enhanced chroma components.Site tracking codeFor this solution to work correctly your application must be configured to use some additional Site Tracking configuration. To make developers lives easier I will include that information below as it is to be used in conjunction with the Chroma solution.The IAG VPN is necessary for this to workInclude the following script in your index.html to begin with:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <script>  window.iagDataLayer = window.iagDataLayer || [];  window.load = window.load || {};  window.load.config = window.load.config || {};  window.load.config.dataLayerName = 'iagDataLayer';  window.load.config.brand = 'nrma'; // Brand/Tealium Profile NAME  window.load.config.apptype = 'chroma'; // eg. Journey , Brochureware, ssc  window.load.config.appname = 'chroma';  // Application name, eg mrj-la, prj-la, boat, car  window.load.config.chromaTracking = true;</script><script src=\"https://dev.tags.iagdev.net/load/load.js\"></script> // contact site tracking team for UAT/Prod urls    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JavaScriptNext you will need to wrap your app in the imported sitetracking package component:    Not displaying?      See common problems    Show add-ons      Enter some code below to render it here      Enter Story URL above to display it here        If your Storybook is private, only people with access will see this preview      Preprocessor  <ReactSiteTracking  name=\"development\"  brand=\"nrma\"  environment=\"dev\"  product=\"QUOTE_CREATED\"  basePageId=\"/all/chroma\"  initialData={{ appNameVersion: 'local-chroma-tracking|version-1' }}  shouldReset>  <App /></ReactSiteTracking>    Syntax          C, C++, C#          CoffeeScript          CSS          Dockerfile          diff          Dart          Go          Groovy          HAML          Handlebars          HTML templates (Rails, ASP.NET)          HTML          HTTP          Java          JavaScript          JSX (React)          Kotlin          LESS          Objective C          Perl          PHP          Pug          Puppet          Python          Ruby          Rust          Sass          Scala          SCSS          Shell          SQL          Swift          Typescript          TSX          Vue.js          XML          YAML          JSX (React)Update props with your application details and again ensure that you are using the IAG VPN to test."
  }
]