woocommerce/packages/js/components
Moon fdc2401fcc
Fix badge size issue when a number larger than 3 digits is used (#40624)
* Fix badge design issue for big numbers

* Add changefile(s) from automation for the following project(s): @woocommerce/components

* Update packages/js/components/src/badge/style.scss

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
2023-10-17 12:30:41 -07:00
..
changelog Fix badge size issue when a number larger than 3 digits is used (#40624) 2023-10-17 12:30:41 -07:00
src Fix badge size issue when a number larger than 3 digits is used (#40624) 2023-10-17 12:30:41 -07:00
typings Add PhoneNumberInput component – cooldown (#40335) 2023-10-16 10:19:36 +02:00
.eslintrc.js Update the @woocommerce/eslint-plugin and fix bugs (#36988) 2023-03-02 11:36:38 +13:00
.gitignore Update JS packages changelogs (#33412) 2022-06-16 10:06:31 +12:00
.npmrc Moved WCA Packages 2022-03-18 14:25:26 -07:00
CHANGELOG.md Manually prepare packages for release (#40826) 2023-10-17 16:32:20 +02:00
PREVIOUS_CHANGELOG.md @woocommerce/components: Prep changelog for release (#33359) 2022-06-14 14:21:02 +12:00
README.md Remove link to outdated information in Components package documentation (#40015) 2023-09-18 16:14:08 +08:00
babel.config.js Update/unify jest@27 across all packages (#34322) 2022-09-06 09:29:45 -05:00
composer.json Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
composer.lock Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
jest.config.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
package.json Manually prepare packages for release (#40826) 2023-10-17 16:32:20 +02:00
tsconfig-cjs.json Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
tsconfig.json Fix TypeScript Incremental Build Regression (#37432) 2023-03-24 12:07:49 -07:00
webpack.config.js Emit error on webpack build when invalid export name used in import for JS (#37195) 2023-03-26 21:42:33 -04:00

README.md

Components

This packages includes a library of components that can be used to create pages in the WooCommerce dashboard and reports pages.

Installation

Install the module

pnpm install @woocommerce/components --save

Usage

/**
 * Woocommerce dependencies
 */
import { Card } from '@woocommerce/components';

export default function MyCard() {
  return (
    <Card title="Store Performance" description="Key performance metrics">
      <p>Your stuff in a Card.</p>
    </Card>
  );
}

Many components include CSS to add style, you will need to add in order to appear correctly. Within WooCommerce, add the wc-components stylesheet as a dependency of your plugin's stylesheet. See wp_enqueue_style documentation for how to specify dependencies.

In non-WordPress projects, link to the build-style/card/style.css file directly, it is located at node_modules/@woocommerce/components/build-style/<component_name>/style.css.

Usage with tests

If you are using these components in a project that uses Jest for testing, you may get an error that looks like this:

Cannot find module '@woocommerce/settings' from 'node_modules/@woocommerce/experimental/node_modules/@woocommerce/navigation/build/index.js'

To fix this, you will need to mock the @woocommerce/settings because it's an alias that points to the window.wcSettings, which in turn comes from and is maintained by the WC Blocks package, the front-end code for this is located here.

This can be done by adding the following to your Jest config:

module.exports = {
  moduleNameMapper: {
    '@woocommerce/settings': path.resolve(
      __dirname,
      './mock/woocommerce-settings'
    ),
  }
  setupFiles: [
    path.resolve( __dirname, 'build/setup-globals.js' ),
  ],
  // ...other config
}

Then, you will need to create the following files:

  1. Create a new file called woocommerce-settings.js in the ./mock directory. You can find the content for this file here.
  2. Next, create a file named setup-globals.js. You can find the content for this file here. The purpose of this file is to mock the wcSettings global variable.