Update Chromatic instructions

.storybook/config.js

@@ -7,7 +7,7 @@ import {
  loadFontsForStorybook,
  styles,
 } from '@storybook/design-system';
-import 'storybook-chromatic';
+import 'chromatic';
 
 const { GlobalStyle } = designSystemGlobal;
 
@@ -37,21 +37,21 @@ global.___loader = {
 global.__PATH_PREFIX__ = '';
 
 // This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
-window.___navigate = pathname => {
+window.___navigate = (pathname) => {
  action('NavigateTo:')(pathname);
 };
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../src', true, /\.stories\.js$/);
 function loadStories() {
- req.keys().forEach(filename => req(filename));
+ req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);
 
 addDecorator(withA11y);
 
-addDecorator(story => (
+addDecorator((story) => (
  <>
  <GlobalStyle />
  {story()}

content/design-systems-for-developers/react/en/distribute.md

@@ -246,7 +246,7 @@ Now, when we run `yarn release`, we’ll step through all the steps we ran above
 ```
 # ...
 - run: yarn test
-- run: yarn chromatic test -a 2wix88i1ziu
+- run: npx chromatic --project-token=2wix88i1ziu
 - run: |
  if [ $CIRCLE_BRANCH = "master" ]
  then

content/design-systems-for-developers/react/en/introduction.md

@@ -58,7 +58,7 @@ Storybook powers the design systems for [Uber](https://github.com/uber-web/baseu
 
 - 🚥 [CircleCI](https://circleci.com/) for continuous integration
 - 📐 [ESLint](https://eslint.org/) for JavaScript linting
-- ✅ [Chromatic](https://chromaticqa.com) to catch visual bugs in components (by Storybook maintainers)
+- ✅ [Chromatic](https://chromatic.com) to catch visual bugs in components (by Storybook maintainers)
 - 🃏 [Jest](https://jestjs.io/) for unit testing components
 - 📦 [npm](https://npmjs.com) for distributing the library
 - 🛠 [Auto](https://github.com/intuit/auto) for release management workflow

content/design-systems-for-developers/react/en/test.md

@@ -39,24 +39,24 @@ Visual tests capture an image of every UI component in a consistent browser envi
 
 If you’re building a modern UI, visual testing saves your frontend team from time-consuming manual review and prevents expensive UI regressions. We’ll demo visual testing using Chromatic, an industrial-grade service by the Storybook maintainers.
 
-First, go to [ChromaticQA.com](https://chromaticqa.com) and sign up with your GitHub account.
+First, go to [chromatic.com](https://chromatic.com) and sign up with your GitHub account.
 
 ![Signing up at Chromatic](/design-systems-for-developers/chromatic-signup.png)
 
 From there choose your design system repo. Behind the scenes, this will sync access permissions and instrument the PR checks.
 
 ![Creating a project at Chromatic](/design-systems-for-developers/chromatic-create-project.png)
 
-Install the [storybook-chromatic](https://www.npmjs.com/package/storybook-chromatic) package via npm.
+Install the [chromatic](https://www.npmjs.com/package/chromatic) package via npm.
 
 ```bash
-yarn add --dev storybook-chromatic
+yarn add --dev chromatic
 ```
 
 Open up your command line and navigate to the `design-system` directory. Then run your first test to establish your visual test baselines (you'll need to use the app code that Chromatic supplies on the website)
 
 ```bash
-yarn chromatic test --app-code=<app-code>
+npx chromatic --project-token=<project-token>
 ```
 
 ![Result of our first Chromatic build](/design-systems-for-developers/chromatic-first-build.png)
@@ -78,7 +78,7 @@ export const typography = {
 Run the test command again.
 
 ```bash
-yarn chromatic test --app-code=<app-code>
+npx chromatic --project-token=<project-token>
 ```
 
 Yikes! That small tweak resulted in a flood of UI changes.
@@ -114,7 +114,7 @@ jobs:
  key: v1-dependencies-{{ checksum "package.json" }}
 
  - run: yarn test
- - run: yarn chromatic test --app-code=<app-code> --exit-zero-on-changes
+ - run: npx chromatic --project-token=<project-token> --exit-zero-on-changes
 ```
 
 Save and `git commit`. Congratulations you just set up visual testing in CI!

content/design-systems-for-developers/react/pt/distribute.md

@@ -15,7 +15,7 @@ Este capítulo ilustra como distribuir sistemas de design, desde empacotamento d
 
 As organizações possuem milhares de componentes de IU espalhados por inúmeras aplicações. Anteriormente extraímos os componentes comuns para o sistema de design. Agora é necessário reintroduzi-los de volta nas aplicações
 
-O nosso sistema de design usa o gestor de pacotes npm para Javascript, para lidar com a gestão de dependências, distribuição e controlo de versões. 
+O nosso sistema de design usa o gestor de pacotes npm para Javascript, para lidar com a gestão de dependências, distribuição e controlo de versões.
 
 Existem muitas outros métodos válidos para empacotar os sistemas de design. Dê uma olhadela aos sistemas de design da Lonely Planet, Auth0, Salesforce, GitHub e Microsoft para ver a diversidade de abordagens. Alguns lançam cada componente como um pacote separado. Outros lançam todos os componentes num só pacote.
 
@@ -93,7 +93,6 @@ dist
 
 Finalmente, vamos fazer algumas alterações adicionais ao ficheiro `package.json`, de forma a garantir que todos os consumidores do pacote, obtenham todas as informações necessárias. A forma mais simples para isto é executar `yarn init`: um comando que inicializa o pacote para ser publicado:
 
-
 ```bash
 yarn init
 
@@ -223,7 +222,7 @@ git push --follow-tags origin master
 yarn auto release
 ```
 
-Parabéns! Publicámos com sucesso o nosso pacote para o npm e criámos uma versão 
+Parabéns! Publicámos com sucesso o nosso pacote para o npm e criámos uma versão
 de lançamento no GitHub (com muita sorte!).
 
 ![Pacote publicado no npm](/design-systems-for-developers/npm-published-package.png)
@@ -249,16 +248,15 @@ Agora, quando for executado o `yarn release`, irão ser percorridos quase todos
 ```yml
 # ...
 - run: yarn test
-- run: yarn chromatic test -a 2wix88i1ziu
+- run: npx chromatic --project-token=2wix88i1ziu
 - run: |
  if [ $CIRCLE_BRANCH = "master" ]
  then
  yarn release
  fi
 ```
 
-Será também necessário adicionar os tokens npm e GitHub ao ambiente CircleCI associado ao vosso projeto, mais exatamente no website do CircleCI (https://circleci.com/gh/<your-username>/learnstorybook-design-system/edit#env-vars): 
-
+Será também necessário adicionar os tokens npm e GitHub ao ambiente CircleCI associado ao vosso projeto, mais exatamente no website do CircleCI (https://circleci.com/gh/<your-username>/learnstorybook-design-system/edit#env-vars):
 
 ![Definir variáveis de ambiente no CircleCI](/design-systems-for-developers/circleci-set-env-vars.png)
 
@@ -340,7 +338,7 @@ No vosso editor, abram o ficheiro UserItem.js. Mas procurem também pelo UserIte
 Importe o componente Avatar.
 
 ```javascript
-import { Avatar } from '<your-username>-learnstorybook-design-system'
+import { Avatar } from '<your-username>-learnstorybook-design-system';
 ```
 
 Como queremos renderizar o Avatar lado a lado com o username, faça a seguinte alteração.

content/design-systems-for-developers/react/pt/introduction.md

@@ -1,20 +1,20 @@
 ---
-title: "Introdução aos sistemas de design"
-tocTitle: "Introdução"
-description: "Um guia para as ferramentas mais recentes orientadas para sistemas de design prontas para produção"
+title: 'Introdução aos sistemas de design'
+tocTitle: 'Introdução'
+description: 'Um guia para as ferramentas mais recentes orientadas para sistemas de design prontas para produção'
 ---
 
 <div class="aside">Este guia é orientado para <b>programadores profissionais</b> que pretendem aprender a construir sistemas de design. É recomendado possuír conhecimentos intermédios em Javascript, Git e integração contínua. É também conveniente saber o básico sobre o funcionamento do Storybook, tal como escrever uma estória, ou editar ficheiros de configuração (O guia <a href="/intro-to-storybook">Introdução ao Storybook</a> ensina o básico).
 </div>
 
 <br/>
 
-Os sistemas de design estão a explodir em termos de popularidade. Desde gigantes da tecnologia tal como a Airbnb até às startups emergentes, organizações de todos os tipos estão a reutilizar padrões de interface de utilizador (IU) de forma a economizar tempo e dinheiro. 
+Os sistemas de design estão a explodir em termos de popularidade. Desde gigantes da tecnologia tal como a Airbnb até às startups emergentes, organizações de todos os tipos estão a reutilizar padrões de interface de utilizador (IU) de forma a economizar tempo e dinheiro.
 Mas existe um fosso bem grande entre os sistemas de design criados pela Airbnb, Uber ou a Microsoft e os sistemas de design criados pela maioria dos programadores.
 
-Porque é que as equipas na vanguarda dos sistemas de design usam as ferramentas e as técnicas que usam? Eu e o meu co-autor Tom fizemos uma pesquisa com base na comunidade Storybook sobre quais seriam as características para um sistema de design bem sucedido, de forma a identificar as melhores práticas. 
+Porque é que as equipas na vanguarda dos sistemas de design usam as ferramentas e as técnicas que usam? Eu e o meu co-autor Tom fizemos uma pesquisa com base na comunidade Storybook sobre quais seriam as características para um sistema de design bem sucedido, de forma a identificar as melhores práticas.
 
-Este guia passo a passo apresenta quais as ferramentas automatizadas e os fluxos de trabalho bastante  cuidadosos, que são usados em sistemas de design de produção em larga escala. Iremos percorrer os passos necessários em como construir um sistema de design a partir de bibliotecas de componentes existentes e em seguida como configurar os serviços essenciais e fluxos de trabalho.
+Este guia passo a passo apresenta quais as ferramentas automatizadas e os fluxos de trabalho bastante cuidadosos, que são usados em sistemas de design de produção em larga escala. Iremos percorrer os passos necessários em como construir um sistema de design a partir de bibliotecas de componentes existentes e em seguida como configurar os serviços essenciais e fluxos de trabalho.
 
 ![Visão geral do sistema de design](/design-systems-for-developers/design-system-overview.jpg)
 
@@ -40,7 +40,7 @@ Estas partes irão ser empacotadas, com versões e distribuídas através de um
 
 ## Será que precisa de um sistema de design?
 
-Apesar do furor, um sistema de design não é uma solução infalível. Se trabalha com uma equipa modesta numa única aplicação, fica mais bem servido com uma pasta ou  diretório de componentes de interface de utilizador (IU), ao invés de implementar toda a infraestrutura associada ao sistema de design. Para projetos pequenos o custo de manutenção, integração e ferramentas associadas supera em larga escala todos e quaisquer benefícios de produtividade poderá observar.
+Apesar do furor, um sistema de design não é uma solução infalível. Se trabalha com uma equipa modesta numa única aplicação, fica mais bem servido com uma pasta ou diretório de componentes de interface de utilizador (IU), ao invés de implementar toda a infraestrutura associada ao sistema de design. Para projetos pequenos o custo de manutenção, integração e ferramentas associadas supera em larga escala todos e quaisquer benefícios de produtividade poderá observar.
 
 A economia de escala associada a um sistema de design funciona a seu favor quando se partilham os componentes de IU por diversos projetos. Se dá por si a copiar e colar os mesmos componentes em diversas aplicações ou equipas, então este guia é para você.
 
@@ -59,7 +59,7 @@ O Storybook alimenta os sistemas de design da [Uber](https://github.com/uber-web
 
 - 🚥 [CircleCI](https://circleci.com/) para integração contínua
 - 📐 [ESLint](https://eslint.org/) para o linting de JavaScript
-- ✅ [Chromatic](https://chromaticqa.com) para capturar erros visuais nos componentes (pela equipa de manutenção do Storybook)
+- ✅ [Chromatic](https://chromatic.com) para capturar erros visuais nos componentes (pela equipa de manutenção do Storybook)
 - 🃏 [Jest](https://jestjs.io/) para testes unitários dos componentes
 - 📦 [npm](https://npmjs.com) para distribuição da biblioteca
 - 🛠 [Auto](https://github.com/intuit/auto) para gestão do fluxo de trabalho associado ao lançamento de versões
@@ -69,7 +69,7 @@ O Storybook alimenta os sistemas de design da [Uber](https://github.com/uber-web
 - ♿ [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y) para verificar problemas de acessibilidade durante o desenvolvimento
 - 💥 [Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions) para oferecer uma garantia de qualidade nas interações de click e tap
 - 🎛 [Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) para ajustar os adereços (props na forma original) de forma interativa para ser possível fazer experiências com os componentes
-- 📝 [Storysource](https://github.com/storybookjs/storybook/tree/master/addons/storysource) para visualizar o código fonte da estória e copiá-lo para o projeto. 
+- 📝 [Storysource](https://github.com/storybookjs/storybook/tree/master/addons/storysource) para visualizar o código fonte da estória e copiá-lo para o projeto.
 - 📕 [Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs) para geração automática de documentação a partir das estórias
 
 ![Fluxo do sistema de design](/design-systems-for-developers/design-system-workflow.jpg)
@@ -88,7 +88,7 @@ Desenvolvimento de IU é um desporto de equipa que requer um alinhamento entre p
 
 #### Testar para evitar bugs IU
 
-Os sistemas de design são uma única fonte de verdade, mas também um ponto único de falhanço. Erros pequenos em componentes básicos do IU  podem rapidamente originar incidentes ao nível empresarial. Vamos automatizar um conjunto de testes que o irão ajudar a mitigar erros inevitáveis, de forma a ser possível lançar componentes de IU duradouros e acessíveis com confiança.
+Os sistemas de design são uma única fonte de verdade, mas também um ponto único de falhanço. Erros pequenos em componentes básicos do IU podem rapidamente originar incidentes ao nível empresarial. Vamos automatizar um conjunto de testes que o irão ajudar a mitigar erros inevitáveis, de forma a ser possível lançar componentes de IU duradouros e acessíveis com confiança.
 
 #### Documentação de forma a acelerar a adoção
 

content/design-systems-for-developers/react/pt/test.md

@@ -39,24 +39,24 @@ Os testes visuais capturam uma imagem de cada componente do IU, num ambiente con
 
 Se está a construir um interface de utilizador moderno, os testes visuais irão poupar a sua equipa de frontend de revisões manuais dispendiosas em termos de tempo e prevenir regressões no IU que podem ser também dispendiosas. Vai ser usado o Chromatic, um serviço de nível industrial mantido pela equipa por detrás do Storybook, para demonstrar testes visuais.
 
-Primeiro, vá a [ChromaticQA.com](https://chromaticqa.com) e registe-se usando a sua conta GitHub.
+Primeiro, vá a [chromatic.com](https://chromatic.com) e registe-se usando a sua conta GitHub.
 
 ![Registo na Chromatic](/design-systems-for-developers/chromatic-signup.png)
 
 A partir daí, escolha o seu repositório que contêm o sistema de design. Nos bastidores, as permissões de acesso irão ser sincronizadas e serão instrumentalizadas as verificações associadas ao pull request (PR).
 
 ![Criar um projeto no Chromatic](/design-systems-for-developers/chromatic-create-project.png)
 
-Instale o pacote [storybook-chromatic](https://www.npmjs.com/package/storybook-chromatic) package via npm.
+Instale o pacote [chromatic](https://www.npmjs.com/package/chromatic) package via npm.
 
 ```bash
-yarn add --dev storybook-chromatic
+yarn add --dev chromatic
 ```
 
 Abra uma nova consola e navegue até à pasta ou diretório do `design-system`. Em seguida execute o seu primeiro teste para gerar uma linha de base para os seus testes visuais posteriores (não se esqueça que terá que usar o app code fornecido pelo site da Chromatic)
 
 ```bash
-yarn chromatic test --app-code=<app-code>
+npx chromatic --project-token=<project-token>
 ```
 
 ![Resultado da primeira compilação do Chromatic](/design-systems-for-developers/chromatic-first-build.png)
@@ -78,7 +78,7 @@ export const typography = {
 Execute o comando de testes de novo.
 
 ```bash
-yarn chromatic test --app-code=<app-code>
+npx chromatic --project-token=<project-token>
 ```
 
 Chiça! Esta alteração minúscula gerou num número gigantesco de alterações do IU.
@@ -114,7 +114,7 @@ jobs:
  key: v1-dependencies-{{ checksum "package.json" }}
 
  - run: yarn test
- - run: yarn chromatic test --app-code=<app-code> --exit-zero-on-changes
+ - run: npx chromatic --project-token=<project-token> --exit-zero-on-changes
 ```
 
 Guarde as alterações e execute o comando `git commit` para submeter as alterações feitas. Parabéns, acabou de configurar testes visuais na integração contínua (IC)!
@@ -204,7 +204,7 @@ Em seguida adicione o decorador `withA11y` no ficheiro `.storybook/config.js`:
 import React from 'react';
 import { configure, addDecorator } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
-import 'storybook-chromatic';
+import 'chromatic';
 
 import { GlobalStyle } from '../src/shared/global';
 

content/intro-to-storybook/angular/en/conclusion.md

@@ -19,7 +19,7 @@ Want to dive deeper? Here are helpful resources.
 
 - [**The Delightful Storybook Workflow**](https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07) highlights workflow best practices used by high-velocity teams at Squarespace, Major League Soccer, Discovery Network, and Apollo GraphQL.
 
-- [**Visual Testing Handbook**](https://www.chromaticqa.com/book/visual-testing-handbook) dives deep into using Storybook to visual test components. Free 31-page ebook.
+- [**Visual Testing Handbook**](https://www.chromatic.com/book/visual-testing-handbook) dives deep into using Storybook to visual test components. Free 31-page ebook.
 
 - [**Storybook Discord chat**](https://discord.gg/UUt2PJb) puts you in contact with the Storybook community. Get and give help to other Storybook users.
 

content/intro-to-storybook/angular/en/screen.md

@@ -162,7 +162,6 @@ export class PureInboxScreenComponent implements OnInit {
 Then we can create the container, which like before, grabs the data for `PureInboxScreenComponent`. In a new file called `inbox-screen.component.ts`:
 
 ```typescript
-
 // src/app/components/inbox-screen.component.ts
 
 import { Component, OnInit } from '@angular/core';
@@ -277,7 +276,7 @@ One way to sidestep this problem is to never render container components anywher
 However, developers **will** inevitably need to render containers further down the component hierarchy. If we want to render most or all of the app in Storybook (we do!), we need a solution to this issue.
 
 <div class="aside">
-As an aside, passing data down the hierarchy is a legitimate approach, especially when using <a href="http:https://graphql.org/">GraphQL</a>. It’s how we have built <a href="https://www.chromaticqa.com">Chromatic</a> alongside 800+ stories.
+As an aside, passing data down the hierarchy is a legitimate approach, especially when using <a href="http:https://graphql.org/">GraphQL</a>. It’s how we have built <a href="https://www.chromatic.com">Chromatic</a> alongside 800+ stories.
 </div>
 
 ## Supplying context with decorators