@automattic/vip-design-system 1.3.2 → 1.3.3

package/README.md

@@ -1,9 +1,24 @@
 # VIP Design System
 
-Design system components used throughout VIP.
+![GitHub Actions](https://github.com/Automattic/vip-design-system/actions/workflows/ci.yml/badge.svg)
 
-[Storybook Components](https://vip-design-system-components.netlify.app/)
+This is the main repository to store Design system tokens and components used throughout VIP projects.
 
-## Contributing
+- [React Components Website](https://vip-design-system-components.netlify.app/)
+- [Figma Productive Components](https://www.figma.com/file/jcGe2KIAlh2PxaAZ5liYWi/Productive-Components?type=design&node-id=7378-4230&mode=design&t=QUgpLoxTpJvAfTiN-0)
 
-See [CONTRIBUTING.md](https://github.com/Automattic/vip-design-system/blob/trunk/CONTRIBUTING.md) for details on development, testing, publishing, etc.
+## Further documentation
+
+- [SETUP.md](https://github.com/Automattic/vip-design-system/blob/trunk/docs/SETUP.md) for installation and setup instructions, basic usage and environmental variables.
+- [ARCHITECTURE.md](https://github.com/Automattic/vip-design-system/blob/trunk/docs/ARCHITECTURE.md) for information on architecture, code structure, data storage and security.
+- [CONTRIBUTING.md](https://github.com/Automattic/vip-design-system/blob/trunk/docs/CONTRIBUTING.md) for information on how to contribute patches and features, also issue and pull request labels.
+- [TESTING.md](https://github.com/Automattic/vip-design-system/blob/trunk/docs/TESTING.md) for details on testing the software and individual tasks.
+- [RELEASING.md](https://github.com/Automattic/vip-design-system/blob/trunk/docs/RELEASING.md) for details on deploying a new release.
+
+## Health, logs and monitoring
+
+- TBD
+
+## Links to historical documents
+
+- TBD

package/build/system/Notice/Notice.js

@@ -23,8 +23,7 @@ var NoticeIcon = function NoticeIcon(_ref) {
     variant = _ref.variant;
   var sx = {
     color: color,
-    flex: '0 0 auto',
-    mt: 0
+    flex: '0 0 auto'
   };
   var size = 20;
   switch (variant) {
@@ -102,9 +101,9 @@ var Notice = exports.Notice = /*#__PURE__*/_react["default"].forwardRef(function
       children: [(0, _jsxRuntime.jsx)(_.Flex, {
         sx: {
           mr: 3,
-          mt: 0,
+          mt: title ? 2 : 0,
           flexShrink: 0,
-          alignSelf: 'center'
+          alignSelf: title ? undefined : 'center'
         },
         children: (0, _jsxRuntime.jsx)(NoticeIcon, {
           color: "notice.icon." + variant,

package/build/system/index.d.ts

@@ -48,4 +48,4 @@ import { Validation } from './Form';
 import { Wizard } from './Wizard';
 import { WizardStep } from './Wizard';
 import theme from './theme';
-export { Accordion, Avatar, Badge, Box, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, NewConfirmationDialog, Grid, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Validation, Wizard, WizardStep, WizardStepHorizontal, theme };
+export { Accordion, Avatar, Badge, Box, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, NewConfirmationDialog, Grid, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Validation, Wizard, WizardStep, theme };

package/build/system/index.js

@@ -48,7 +48,7 @@ import { OptionRow } from './OptionRow';
 import { Table, TableRow, TableCell } from './Table';
 import { Text } from './Text';
 import theme from './theme';
-import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
+import { Wizard, WizardStep } from './Wizard';
 import { Tabs, TabsList, TabsContent, TabsTrigger } from './Tabs';
 
 export {
@@ -101,6 +101,5 @@ export {
 	Validation,
 	Wizard,
 	WizardStep,
-	WizardStepHorizontal,
 	theme,
 };

package/docs/ARCHITECTURE.md

@@ -0,0 +1,88 @@
+# Architecture
+
+## Basic functionality
+
+`vip-design-system` is a React component released in the NPM registry. It's a [public package](https://www.npmjs.com/package/@automattic/vip-design-system) that anyone can install.
+
+## Languages & coding standard
+
+Both JavaScript and TypeScript are used to implement the software.
+
+We require that the WPVIP defined coding style to be used, defined in [.eslintrc.js](https://github.com/Automattic/vip-design-system/blob/trunk/.eslintrc.js).
+
+We also use [.prettierrc](https://github.com/Automattic/vip-design-system/blob/trunk/.prettierrc) to have a standard on coding formatting. It's recommended to set your Editor to apply "Format on Save".
+
+[JEST](https://github.com/Automattic/vip-design-system/blob/readme-update/package.json#L16-L17) is the test-runnner used in this application.
+
+## Code structure
+
+The code is structured in the following way:
+
+- [.github/](https://github.com/Automattic/vip-design-system/tree/trunk/.github) — configuration and templates for GitHub actions.
+- [.storybook/](https://github.com/Automattic/vip-design-system/tree/trunk/.storybook) — configuration files for Storybook
+- [src/](https://github.com/Automattic/vip-design-system/tree/trunk/src) — Javascript and Typescript react component files + Theme configuration + Components tests (on each component folder).
+- [test/](https://github.com/Automattic/vip-design-system/tree/trunk/test) — Test utilities, mocks or configuration for the test suite.
+- [tokens/](https://github.com/Automattic/vip-design-system/tree/trunk/test) — VIP Design Sytem tokens exported using [Figma Studio](https://docs.tokens.studio/). This is the source of truth for the Design team tokens, variables, etc.
+
+### Components structure
+
+Components lives under the `src/system/ComponentName` directory. Each component folder contains a similar set of files. Let's use the [Avatar](https://github.com/Automattic/vip-design-system/tree/trunk/src/system/Avatar) component as an example:
+
+- **Avatar.stories.tsx**: This is the documentation file of the component. The `*.stories` is related to the Storybook story files.
+- **Avatar.test.tsx**: This is the test file for this component. We run `jest` as a runner in this application.
+- **Avatar.tsx**: This is the TypeScript component itself.
+- **index.ts**: Some components has a index file to export different files. This is not recommended anymore.
+
+### Theme UI & Radix UI Primitives
+
+Most of our components are based on [https://theme-ui.com/](https://theme-ui.com/) components. We try to write our own components as much as we can. Other components are based on [Radix UI Primitives](https://www.radix-ui.com/primitives) components. Radix usually has some solid and accessible components that we can use as a base.
+
+## Updating the Theme with VIP Design System Tokens
+
+You need to update the tokens once the VIP Design System updates the core files. The Figma Studio plugin will push files into the [tokens/](https://github.com/Automattic/vip-design-system/tree/trunk/tokens) folder. Once these files are there, you can run the following:
+
+```bash
+npm run theme-update
+```
+
+to have an updated json theme under [src/system/theme/generated/](https://github.com/Automattic/vip-design-system/tree/trunk/src/system/theme/generated).
+
+### How the theming works
+
+We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push files to the [tokens/](https://github.com/Automattic/vip-design-system/tree/trunk/tokens) directory.
+
+By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-product-core`, and the dark theme is called `wpvip-product-dark`.
+
+Once the new file is updated, we need to generate a custom theme file in [src/system/theme/generated/valet-theme-light.json](https://github.com/Automattic/vip-design-system/blob/trunk/src/system/theme/generated/valet-theme-light.json). It will also generate a Dark theme version. This operation generates JSON files with the colors we need already filled in.
+
+Once the theme is updated, the file [src/system/theme/index.js](https://github.com/Automattic/vip-design-system/blob/trunk/src/system/theme/index.js) reads the colors and apply to all components.
+
+Use the section below to run the script and update the theme.
+
+_Important:_ If you change the `generated/valet-theme-light.json` or the `generated/valet-theme-dark.json`, or changes will be overwritten once someone runs `npm run theme-update` again.
+
+### Update theme script
+
+Run this command to update the VIP Valet Theme with the latest `tokens/**` files.
+
+```bash
+npm run theme-update
+```
+
+## Feature flags
+
+No feature flags are currently in use.
+
+## Database
+
+This project has no database storage.
+
+## Dependencies
+
+This is a standalone NPM package. Currently there's no API communication. All the code dependencies are listed in the [package.json](https://github.com/Automattic/vip-design-system/blob/trunk/package.json) file of this project.
+
+Major dependencies of this project are:
+
+- Storybook — Dev dependency for previewing our components and documentation
+- Theme UI — Base theme and components structure
+- Radix — React primitives components used to build some of our custom components

package/docs/CONTRIBUTING.md

@@ -0,0 +1,29 @@
+# Contributing
+
+## Pull requests & issues
+
+We welcome any contributions to this project.
+
+If you have a small bugfix and already have the code available, feel free to [create a pull request](https://github.com/Automattic/vip-design-system/compare). If you have a feature suggestion, please [create an issue](https://github.com/Automattic/vip-design-system/issues/new). Please follow the instructions provided. Please assign a priority to the issue/pull request according to the definitions found below.
+
+Before writing a patch or a larger chunk of code, please ensure to study the [ARCHITECTURE.md](ARCHITECTURE.md) and [TESTING.md](TESTING.md) files. Ensure that all tests pass before asking for a review of your pull request.
+
+## Watching for changes
+
+You can build it continuously so that every time you make a change, build files are automatically updated:
+
+```bash
+npm run watch
+```
+
+## Troubleshooting
+
+### Dialog + Dropdown usage
+
+If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
+
+```css
+div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
+	opacity: 0;
+}
+```

package/docs/RELEASING.md

@@ -0,0 +1,70 @@
+# Releasing
+
+This package is published to [NPM](https://www.npmjs.com/package/@automattic/vip-design-system). The process to release to NPM should be started when all pull requests intended for publishing have been merged and the software has been fully tested for publication. You can release either using GitHub Actions or locally.
+
+## Versioning Guidelines
+
+- `patch`: for non-breaking changes/bugfixes and small updates.
+- `minor`: for some new features, bug fixes, and other non-breaking changes.
+- `major`: for breaking changes.
+
+## Note on NPM token
+
+Publishing via the GitHub Action requires that the `NPM_TOKEN` be set correctly in [GitHub Actions secrets](https://github.com/Automattic/vip-design-system/settings/secrets/actions). This should be an npm token generated for a bot user on [the npm @automattic org](https://www.npmjs.com/settings/automattic) that has publish access to this repo.
+
+## Release Methods
+
+### GitHub Actions (Preferred)
+
+This is the preferred method for pushing out the latest release. The workflow runs a bunch of validations, generates a build, bump versions + tags, pushes out to npm, and bumps to the next dev version.
+
+1. Initiate the [release process here](https://github.com/Automattic/vip-design-system/actions/workflows/npm-prepare-release.yml).
+1. On the right-hand side, select "Run Workflow".
+1. Pick your preferred version bump.
+1. Click `Run Workflow`.
+1. Wait for a pull request to appear. The pull request will update the version number and shall be assigned to you.
+1. When ready, merge the pull request. This will lead to a new version to be [published on npmjs.com](https://www.npmjs.com/package/@automattic/vip-design-system).
+1. Another pull request will be created to bump to a development version, also assigned to you. Merge it to finish the process.
+
+### Local
+
+Follow these steps to publish locally:
+
+1. Make sure you have NPM access to our @Automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
+2. Pull all the changes to your local `trunk` branch. Make sure you have the latest changes (`git pull`).
+3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
+
+```bash
+npm version major|minor|patch
+```
+
+4. You should see a version bump in the [package.json](https://github.com/Automattic/vip-design-system/blob/trunk/package.json) file.
+5. Build the application:
+
+```bash
+npm run build
+```
+
+6. Publish the application
+
+```bash
+npm publish
+```
+
+Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process. You can also add `--otp=CODE` to the `npm publish` command if you already have the code.
+
+7. Push the tags to the repository and trunk updates.
+
+```bash
+git push --tags
+git push origin trunk
+```
+
+8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
+
+Ps: Add a `BREAKING CHANGES` section to the release. This will avoid folks trying to figure out why their code is not working on the VIP Dashboard or any other system.
+
+## In case of problems
+
+If you released a broken version, ensure to inform in the GitHub release entry about the breaking change, and follow the instructions provided by NPM in: [Deprecating and undeprecating packages or package versions
+](https://docs.npmjs.com/deprecating-and-undeprecating-packages-or-package-versions).

package/docs/SETUP.md

@@ -0,0 +1,68 @@
+# Setup
+
+## Language & requirements
+
+- Implemented in JavaScript and TypeScript.
+- Requirements are:
+  - Node, see version in [package.json](https://github.com/Automattic/vip-design-system/blob/trunk/package.json)
+  - A few NPM packages are needed, those are listed in the same file.
+  - The software is fairly lightweight, no special hardware requirements.
+  - Network access.
+
+## Installation & setup instructions
+
+### Fetching & installing
+
+This will fetch the package and install all dependencies:
+
+```bash
+git clone git@github.com:Automattic/vip-design-system.git && \
+cd vip-design-system && npm install
+```
+
+### Building
+
+This will build all TypeScript files so they can be executed:
+
+```bash
+cd vip-design-system && \
+npm run build
+```
+
+## Usage
+
+The best experience is to use Storybook preview for set up and development.
+
+### Starting up locally
+
+Run:
+
+```bash
+npm run dev
+```
+
+You can then visit [http://localhost:60006/](http://localhost:60006/) to view.
+
+## Updating dependencies
+
+Dependencies should be updated by merging [pull requests from dependabot](https://github.com/Automattic/vip-design-system/pulls/app%2Fdependabot). However, great care should be taken before merging as updating dependencies can cause errors with the `vip-design-system` components. There can also be effects to the [RELEASING](https://github.com/Automattic/vip-design-system/blob/trunk/docs/RELEASING.md) process. This can happen silently.
+
+### Before merging
+
+Consider removing the dependency. Can the functionality needed from the dependency be implemented directly into `vip-design-system` or our own common libraries? If not, evaluate the following:
+
+1. If the dependency is one of the [development dependencies](https://github.com/Automattic/vip-design-system/blob/trunk/package.json) (`devDependencies`), and/or only used by one of those, the likelihood of customer-impacting failure is low.
+2. Is the package used in the [RELEASING](https://github.com/Automattic/vip-design-system/blob/trunk/docs/RELEASING.md) process? If it is, evaluate if any failure is likely to be silent. If that seems not to be the case, the risk of customer-impacting failure is low.
+3. Is the package used in one or more [components](https://github.com/Automattic/vip-design-system/blob/trunk/src/system)? If it is, evaluate if any failure is likely to be silent. Take a look at the [TESTING](https://github.com/Automattic/vip-design-system/blob/trunk/docs/RELEASING.md) strategies to ensure the update is good.
+
+#### Low risk dependencies
+
+If the risk of merging is low, you can go a head and merge without doing anything further (given that all tests succeed).
+
+#### Higher risk dependencies
+
+For higher risk dependencies, the jobs using the dependency [will have to be tested locally](https://github.com/Automattic/vip-design-system/blob/trunk/docs/TESTING.md#locally) and the results verified. You can [run it locally](https://github.com/Automattic/vip-design-system/blob/trunk/docs/SETUP.md#starting-up-locally) and verify that all affected components are working normally.
+
+### After merging
+
+Test any [external Applications tests](https://github.com/Automattic/vip-design-system/blob/trunk/docs/TESTING.md#external-applications-tests) using the `vip-design-system` as a dependency, for example, [the VIP Dashboard](https://github.com/automattic/vip-dashboard).

package/docs/TESTING.md

@@ -0,0 +1,63 @@
+# Testing
+
+Testing is an integral part of creating new features and maintaining the software.
+
+## Automated testing
+
+A [few actions](https://github.com/Automattic/vip-design-system/tree/trunk/.github/workflows) are automatically run via Github Actions when a pull request is created or updated.
+
+### Linting
+
+We run the following checks:
+
+- linting (`npm run lint`)
+- format checking (`npm run format:check`)
+- type checks (`npm run check-types`)
+
+### Dependency checks
+
+We use the [dependaban action](https://github.com/Automattic/vip-actions/tree/trunk/dependaban) from [Automattic/vip-actions](https://github.com/Automattic/vip-actions/) to verify that no dependencies have install scripts.
+
+### Unit tests
+
+The tests are located inside of of each component. For example: [src/system/Accordion/Accordion.test.tsx](https://github.com/Automattic/vip-design-system/tree/trunk/src/system/Accordion/Accordion.test.tsx).
+
+We recommend you to write tests close to the component implementation.
+
+#### Adding new unit tests
+
+When creating a new component, please consider adding a new unit test. Please ensure that the file name of the test matches the file name of the job. Example: `Button.test.tsx`. Put the test in the same folder as the component.
+
+### Manual tests
+
+We can test three ways:
+
+**Storybook**
+
+For components that include storybooks, we can run `npm run dev` to view the components in a sandbox-ed storybook environment.
+
+**Pull Request Preview (Easy and recommended)**
+
+Once you create a Pull request, a netlify bot will add a comment to your Pull Request with a preview link of the Storybook preview. This is helpful to share with other folks.
+
+### External Applications tests
+
+**npm link (not reliable)**
+
+1. Run `npm link` in your checkout of this repo.
+2. Spin up a local copy of [the VIP Dashboard](https://github.com/automattic/vip-dashboard) and navigate to a page using the linked components from `@automattic/vip-design-system`
+
+Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
+
+**Manual Github Commit (More work, but reliable)**
+
+1. Create your local changes and push to origin a new branch.
+2. In a local copy of the [the VIP Dashboard](https://github.com/automattic/vip-dashboard) edit the vip-design-system line inside of the `package.json` file. Change the line with this:
+
+```bash
+"@automattic/vip-design-system": "github:automattic/vip-design-system#YOUR_PUSHED_COMMIT_HASH",
+```
+
+3. Run `npm install` in the vip-dashboard
+4. Run `npm run dev`
+5. You should have your changes available.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Notice/Notice.tsx

@@ -30,7 +30,7 @@ export interface NoticeProps {
 type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
 
 const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {
-	const sx = { color, flex: '0 0 auto', mt: 0 };
+	const sx = { color, flex: '0 0 auto' };
 	const size = 20;
 
 	switch ( variant ) {
@@ -97,9 +97,9 @@ export const Notice = React.forwardRef< HTMLDivElement, NoticeProps >(
 					<Flex
 						sx={ {
 							mr: 3,
-							mt: 0,
+							mt: title ? 2 : 0,
 							flexShrink: 0,
-							alignSelf: 'center',
+							alignSelf: title ? undefined : 'center',
 						} }
 					>
 						<NoticeIcon color={ `notice.icon.${ variant }` } variant={ variant } />

package/src/system/index.js

@@ -48,7 +48,7 @@ import { OptionRow } from './OptionRow';
 import { Table, TableRow, TableCell } from './Table';
 import { Text } from './Text';
 import theme from './theme';
-import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
+import { Wizard, WizardStep } from './Wizard';
 import { Tabs, TabsList, TabsContent, TabsTrigger } from './Tabs';
 
 export {
@@ -101,6 +101,5 @@ export {
 	Validation,
 	Wizard,
 	WizardStep,
-	WizardStepHorizontal,
 	theme,
 };

package/CONTRIBUTING.md

@@ -1,138 +0,0 @@
-## Development
-
-### Prerequisites
-
-Make sure you have [node.js](https://nodejs.org/) and [NPM](https://docs.npmjs.com/getting-started/what-is-npm) installed. Here's a [handy installer](https://nodejs.org/download/) for Windows, Mac, and Linux.
-
-### Install
-
-To get setup run the following command in the `vip-design-system` directory:
-
-```
-npm install
-```
-
-### Watching for changes
-
-You can build it continuously so that every time you make a change, build files are automatically updated:
-
-```
-npm run watch
-```
-
-### Testing
-
-We can test two ways:
-
-**Storybook**
-
-For components that include storybooks, we can run `npm run storybook` to view the components in a sandbox-ed storybook environment.
-
-**npm link**
-
-1. Run `npm link` in your checkout of this repo.
-2. Spin up a local copy of [the VIP Dashboard](https://github.com/automattic/vip-ui) and navigate to a page using the linked components from `@automattic/vip-design-system`
-
-Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
-
-### Updating the Theme with VIP Design System Tokens
-
-You need to update the tokens once the VIP Design System updates the core files.
-
-#### How the theming works
-
-We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
-
-By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-product-core`, and the dark theme is called `wpvip-product-dark`.
-
-Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme-light.json`. This operation generates a small json file with the colors we need already filled in.
-
-Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
-
-Use the section below to run the script and update the theme.
-
-_Important:_ If you change the `generated/valet-theme.json`, make it sure to open a new pull request with these changes and release a new version if needed.
-
-#### Update theme script
-
-Run this command to update the VIP Valet Theme with the latest `tokens/**` files.
-
-```bash
-npm run theme-update
-```
-
-## Publishing new version
-
-The process to release to npm should be started when all pull requests intended for publishing have been merged and the software has been fully tested for publication. You can release either using GitHub Actions or locally.
-
-### Versioning Guidelines
-
-- `patch`: for non-breaking changes/bugfixes and small updates.
-- `minor`: for some new features, bug fixes, and other non-breaking changes.
-- `major`: for breaking changes.
-
-### Note on NPM token
-
-Publishing via the GitHub Action requires that the `NPM_TOKEN` be set correctly in GitHub Actions secrets. This should be an npm token generated for a bot user on [the npm @automattic org](https://www.npmjs.com/settings/automattic) that has publish access to this repo.
-
-### GitHub Actions (Preferred)
-
-This is the preferred method for pushing out the latest release. The workflow runs a bunch of validations, generates a build, bump versions + tags, pushes out to npm, and bumps to the next dev version.
-
-1. Initiate the [release process here](https://github.com/Automattic/vip-design-system/actions/workflows/npm-prepare-release.yml).
-1. On the right-hand side, select "Run Workflow".
-1. Pick your preferred version bump.
-1. Click `Run Workflow`.
-1. Wait for a pull request to appear. The pull request will update the version number and shall be assigned to you.
-1. When ready, merge the pull request. This will lead to a new version to be [published on npmjs.com](https://www.npmjs.com/package/@automattic/vip-design-system).
-1. Another pull request will be created to bump to a development version, also assigned to you. Merge it to finish the process.
-
-### Local
-
-Follow these steps to publish locally:
-
-1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
-2. Pull all the changes to your local trunk. Make sure you have the latest trunk locally.
-3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
-
-```bash
-npm version major|minor|patch
-```
-
-4. You should see a version bump in the `package.json` file.
-5. Build the application:
-
-```bash
-npm run build
-```
-
-6. Publish the application
-
-```
-npm publish
-```
-
-Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process. You can also add `--otp=CODE` to the `npm publish` command if you already have the code.
-
-7. Push the tags to the repository and trunk updates.
-
-```
-git push --tags
-git push origin trunk
-```
-
-8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
-
-Ps: Add a `BREAKING CHANGES` section to the release. This will avoid folks trying to figure out why their code is not working on the VIP Dashboard or any other system.
-
-## Troubleshooting
-
-### Dialog + Dropdown usage
-
-If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
-
-```css
-div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
-	opacity: 0;
-}
-```