import {Meta, Story, Canvas} from '@storybook/addon-docs'; # August 2022 StyleGuide newsletter Combined update notes, summarising changes in the style guide since the last newsletter (since the StyleGuide v213.3.0). Some of the key highlights include: - [Storybook as an official documentation](#-storybook-as-an-official-documentation) - [Beta releases](#-beta-releases) - [Transition component](#-transition-component) - [Reduced motion support](#-reduced-motion-support) - [Buttons rebranding](#-buttons-rebranding) - [Colors CSS variables](#-colors-css-variables) - [New Checkbox, Radio and RadioGroup components](#-new-checkbox-radio-and-radiogroup-components) - [Components updates](#-components-updates) ## 🚀 Storybook as an official documentation We have fully switched to Storybook, so from now on it's one and only source of truth about the StyleGuide! Our new docs are line with brand guidelines and provide better experience. ![storybook documentation](./newsletter-assets/2022-august/storybook-documentation.png) ## 🚀 Beta releases Did you ever want to try some new feature out, before making changes to the whole StyleGuide? Now you can! You can release the StyleGuide as a beta version, which also includes assets. To release a beta version, you need to change the version in the package.json and add a git tag. The version has to contain `-beta.0` at the end. So it should, for example, look like this: `219.0.1-beta.0`. When you want to publish next version of beta, increment the `.0` to `.1` and so on. To update the `package.json` and git tag in one go run such command: ``` npm version 219.0.1-beta.0 ``` To publish the beta version to npm just run the following command: ``` npm publish --tag beta ``` ## 🪄 Transition component You can now use Transition component to easily introduce CSS transitions and animations on a React component when it enters or leaves the DOM. There's a bunch of predefined effects, such as: `fade`, `scaleFade`, `slideUpFade`, `slideDownFade`, `slideLeftFade` and `slideRightFade`. ![predefined effects](./newsletter-assets/2022-august/transition-predefined.gif) You can also find more sophisticated examples of movements and transitions. Curved movement: ![transition curved movement](./newsletter-assets/2022-august/transition-curved.gif) Shared axis: ![transition shared axis](./newsletter-assets/2022-august/transition-axis.gif) List: ![transition list](./newsletter-assets/2022-august/transition-list.gif) Transition component fully supports reduced motion. Please see [full documentation](https://styleguide.brainly.com/219.0.1/docs/?path=/docs/components-transition--default-story) to find more examples, including code samples. ## 😵‍💫 Reduced motion support We've added a `useReducedMotion` hook, that detects the user motion preference. When user prefers seeing reduced motion on their screen, you should adjust animations accordingly. See [documentation](https://styleguide.brainly.com/219.0.1/docs/?path=/story/utilities-usereducedmotion--page). ## 🛎 Buttons rebranding We changed our buttons not only as a result of rebranding, but also to increase accessibility and make product CTA's more intuitive. New system for buttons was created, with updated colors, limited styles and clear guidelines of usage. ![buttons change](./newsletter-assets/2022-august/buttons-change.png) ## 🎨 Colors CSS variables All StyleGuide colors are now accessible as CSS variables as well! We removed colors declaration from the `_config.scss` file and generate CSS and SASS color variables during build process from `src/components/colors/colors.js` file. Thanks to this change, there's now only one source of truth for all colors in the StyleGuide. ## 🔘 New Checkbox, Radio and RadioGroup components We have created accessible [Checkbox](https://styleguide.brainly.com/219.0.1/docs/?path=/story/components-form-checkbox--default-story), [Radio](https://styleguide.brainly.com/219.0.1/docs/?path=/story/components-form-radio--default-story) and [RadioGroup](https://styleguide.brainly.com/219.0.1/docs/?path=/story/components-form-radio-group--default-story) components. New features include: light and dark color types, custom themes, error messages, descriptions, UX motion and custom wrappers support! ![checkbox radio animations](./newsletter-assets/2022-august/checkbox-radio-animations.gif) ## 📦 Components updates ### SkipLink A keyboard-functional "skip" link was created to allow keyboard users to navigate directly to the main content, as it rarely comes first in a typical layout. Before users can arrive at the main content, they must skip past features like the website's logo, navigation and branding. ![skip link](./newsletter-assets/2022-august/skiplink.png) ### Input New size S was added to the Input component. ![input size s](./newsletter-assets/2022-august/input-size-s.png) ### Select New size S was added to the Select component. ![select size s](./newsletter-assets/2022-august/select-size-s.png) ### Counter Counter accessibility was improved, including darkening colors for better contrast ratio. ![counter](./newsletter-assets/2022-august/counter.png) ### Label `