diff --git a/Readme.md b/Readme.md index de06d2f1..4d5d93b9 100644 --- a/Readme.md +++ b/Readme.md @@ -1,42 +1,44 @@ # BoxUK WP Packages Mono Repo -This is the BoxUK mono-repo for our WordPress packages. The [WordPress Skeleton](https://github.com/boxuk/wp-project-skeleton) uses these packages to add functionality. +This is the BoxUK mono-repo for our WordPress packages. The [WordPress Skeleton](https://github.com/boxuk/wp-project-skeleton) uses these packages to add functionality. ## How to use -This mono repo allows you to develop any of the packages. To start a WordPress development environment to test against, just run `docker-compose up -d wordpress` and you'll be able to access WordPress at [http://localhost:8000](http://localhost:8000). +This mono repo allows you to develop any of the packages. To start a WordPress development environment to test against, just run `docker compose up -d wordpress` and you'll be able to access WordPress at [http://localhost:8000](http://localhost:8000). -We use [Monorepo Builder](https://github.com/symplify/monorepo-builder) tools to manage the mono-repo dependancies. +We use [Monorepo Builder](https://github.com/symplify/monorepo-builder) tools to manage the mono-repo dependancies. + +If setting it up for the first time run this `mkdir -p ./docker/wordpress/themes`. ## Structure -Each of the packages within the `packages` directory is an individual package. These should be standalone, and any dependancies they have (with another package or external) should be loaded via composer. +Each of the packages within the `packages` directory is an individual package. These should be standalone, and any dependancies they have (with another package or external) should be loaded via composer. ## Adding Dependancies -Dependancies for each package should be defined in the package's `composer.json` file. Once the file has been altered, from the root of the project run the following commands: +Dependancies for each package should be defined in the package's `composer.json` file. Once the file has been altered, from the root of the project run the following commands: ```sh # Merge the dependancy tree -bin/composer run mono:merge +bin/composer run mono:merge # Install your package bin/composer install ``` ## Adding a package -To create a package, you can run `bin/create-package ` and this will scaffold out all the necessary changes needed. In order for your package to be published, you'll also need to modify `/.github/workflows/packages.yml` to configure the package name and the target repository for publishing. This will automate pushing changes of the package out to the target repository, but you may need further work to ensure that repository is available via `composer` in your projects. +To create a package, you can run `bin/create-package ` and this will scaffold out all the necessary changes needed. In order for your package to be published, you'll also need to modify `/.github/workflows/packages.yml` to configure the package name and the target repository for publishing. This will automate pushing changes of the package out to the target repository, but you may need further work to ensure that repository is available via `composer` in your projects. ## Tests -All packages need to have 100% test coverage. During CI they will be tested for this capability. +All packages need to have 100% test coverage. During CI they will be tested for this capability. ## Javascript -If your package requires javascript, you can also setup a `package.json` file in the root of the package. Much like `composer.json`, this will be merged automatically at the root level. +If your package requires javascript, you can also setup a `package.json` file in the root of the package. Much like `composer.json`, this will be merged automatically at the root level. -To run `npm` commands directly in your package run `bin/npm -w packages/` with your command. For example `bin/npm -w packages/iconography run test` would run tests specifically in the iconography package. +To run `npm` commands directly in your package run `bin/npm -w packages/` with your command. For example `bin/npm -w packages/iconography run test` would run tests specifically in the iconography package. -Commands can also be run globally across all packages using `turbo`. This is setup so that if you run `bin/npm run test` it will run test in every package that has a `package.json` file with a `test` script. You should try to keep naming consistent across packages to support this work. All currently supported scripts in `turbo` are listed in the `turbo.json` file at the root. +Commands can also be run globally across all packages using `turbo`. This is setup so that if you run `bin/npm run test` it will run test in every package that has a `package.json` file with a `test` script. You should try to keep naming consistent across packages to support this work. All currently supported scripts in `turbo` are listed in the `turbo.json` file at the root. -During CI, the `lint`, `test` and `build` NPM scripts are run to validate the package quality. You should ensure your package supports these. \ No newline at end of file +During CI, the `lint`, `test` and `build` NPM scripts are run to validate the package quality. You should ensure your package supports these. diff --git a/packages/iconography/src/shared/IconModal.tsx b/packages/iconography/src/shared/IconModal.tsx index 3d76c207..1c9695cc 100644 --- a/packages/iconography/src/shared/IconModal.tsx +++ b/packages/iconography/src/shared/IconModal.tsx @@ -29,7 +29,7 @@ export const IconModal = ( { return ( diff --git a/packages/iconography/src/shared/IconPanel.tsx b/packages/iconography/src/shared/IconPanel.tsx index 2c0b675d..74fa6239 100644 --- a/packages/iconography/src/shared/IconPanel.tsx +++ b/packages/iconography/src/shared/IconPanel.tsx @@ -2,10 +2,7 @@ import React from 'react'; /* WordPress Dependencies */ import { __ } from '@wordpress/i18n'; -import { - Button, - __experimentalGrid as Grid, // eslint-disable-line @wordpress/no-unsafe-wp-apis -- experimental package, but we know the risks! -} from '@wordpress/components'; +import { Button, Flex, FlexItem } from '@wordpress/components'; /* Internal Dependencies */ import { generateRichTextFormat } from '../utils'; @@ -36,22 +33,28 @@ export const IconPanel = ( { : iconGroup.options; return ( - + { filteredIcons.map( ( Icon ) => ( - + + + ) ) } - + ); };