diff --git a/plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/global-prices.js b/plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/global-prices.js index 2eb555fbcd2..40c176fd74a 100644 --- a/plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/global-prices.js +++ b/plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/global-prices.js @@ -6,7 +6,8 @@ import moment from 'moment'; /** * WooCommerce dependencies */ -import { Card, Chart } from '@woocommerce/components'; +import { Card } from '@wordpress/components'; +import { Chart } from '@woocommerce/components'; import Currency from '@woocommerce/currency'; const storeCurrency = Currency(); diff --git a/plugins/woocommerce-admin/package-lock.json b/plugins/woocommerce-admin/package-lock.json index 4156c7bf5d3..6b9211c7097 100644 --- a/plugins/woocommerce-admin/package-lock.json +++ b/plugins/woocommerce-admin/package-lock.json @@ -12907,6 +12907,14 @@ "@wordpress/element": "^2.19.0", "@wordpress/warning": "^1.3.0", "core-js": "^3.6.4" + }, + "dependencies": { + "@wordpress/browserslist-config": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.7.0.tgz", + "integrity": "sha512-pB45JlfmHuEigNFZ1X+CTgIsOT3/TTb9iZxw1DHXge/7ytY8FNhtcNwTfF9IgnS6/xaFRZBqzw4DyH4sP1Lyxg==", + "dev": true + } } }, "@wordpress/eslint-plugin": { diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index b9f027982c8..9c4de22e7b7 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -4,6 +4,7 @@ - Fix styling of the advanced filter operator selection. #7005 - Remove the use of Dashicons and replace with @wordpress/icons or gridicons #7020 - Add tree shaking support to this package. #7034 +- Remove the long deprecated Card component (use Card from `@wordpress/components` instead). #7114 # 6.2.0 diff --git a/plugins/woocommerce-admin/packages/components/README.md b/plugins/woocommerce-admin/packages/components/README.md index 1982ee802bd..12df806b788 100644 --- a/plugins/woocommerce-admin/packages/components/README.md +++ b/plugins/woocommerce-admin/packages/components/README.md @@ -18,14 +18,10 @@ View [the full Component documentation](https://woocommerce.github.io/woocommerc /** * Woocommerce dependencies */ -import { Card } from '@woocommerce/components'; +import { Badge } from '@woocommerce/components'; -export default function MyCard() { - return ( - -

Your stuff in a Card.

- - ); +export default function MyBadge() { + return ; } ``` diff --git a/plugins/woocommerce-admin/packages/components/src/card/README.md b/plugins/woocommerce-admin/packages/components/src/card/README.md deleted file mode 100644 index 2fef18e870f..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/card/README.md +++ /dev/null @@ -1,28 +0,0 @@ -Card -=== - -A basic card component with a header. The header can contain a title, an action, and an `EllipsisMenu` menu. - -## Usage - -```jsx -
- -

Your stuff in a Card.

- - -

This Card is grayed out and has no box-shadow.

- -
-``` - -### Props - -Name | Type | Default | Description ---- | --- | --- | --- -`action` | ReactNode | `null` | One "primary" action for this card, appears in the card header -`className` | String | `null` | Additional CSS classes -`description` | One of type: string, node | `null` | The description displayed beneath the title -`isInactive` | Boolean | `null` | Boolean representing whether the card is inactive or not -`menu` | (custom validator) | `null` | An `EllipsisMenu`, with filters used to control the content visible in this card -`title` | One of type: string, node | `null` | The title to use for this card diff --git a/plugins/woocommerce-admin/packages/components/src/card/index.js b/plugins/woocommerce-admin/packages/components/src/card/index.js deleted file mode 100644 index 6a86ff95421..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/card/index.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * External dependencies - */ -import { Component } from '@wordpress/element'; -import classnames from 'classnames'; -import deprecated from '@wordpress/deprecated'; -import PropTypes from 'prop-types'; - -/** - * Internal dependencies - */ -import EllipsisMenu from '../ellipsis-menu'; -import { H, Section } from '../section'; -import { validateComponent } from '../lib/proptype-validator'; - -/** - * A basic card component with a header. The header can contain a title, an action, and an `EllipsisMenu` menu. - * - * @deprecated - */ -class Card extends Component { - constructor() { - super(); - deprecated( 'Card', { - version: '5.2.0', - alternative: '@wordpress/components Card', - plugin: 'WooCommerce', - hint: 'Use `import { Card } from "@wordpress/components"`', - } ); - } - - render() { - const { - action, - children, - description, - isInactive, - menu, - title, - } = this.props; - const className = classnames( - 'woocommerce-card', - this.props.className, - { - 'has-menu': !! menu, - 'has-action': !! action, - 'is-inactive': !! isInactive, - } - ); - return ( -
- { title && ( -
-
- - { title } - - { description && ( - - { description } - - ) } -
- { action && ( -
- { action } -
- ) } - { menu && ( -
- { menu } -
- ) } -
- ) } -
- { children } -
-
- ); - } -} - -Card.propTypes = { - /** - * One "primary" action for this card, appears in the card header. - */ - action: PropTypes.node, - /** - * Additional CSS classes. - */ - className: PropTypes.string, - /** - * The description displayed beneath the title. - */ - description: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ), - /** - * Boolean representing whether the card is inactive or not. - */ - isInactive: PropTypes.bool, - /** - * An `EllipsisMenu`, with filters used to control the content visible in this card - */ - menu: validateComponent( EllipsisMenu ), - /** - * The title to use for this card. - */ - title: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ), -}; - -export default Card; diff --git a/plugins/woocommerce-admin/packages/components/src/card/stories/index.js b/plugins/woocommerce-admin/packages/components/src/card/stories/index.js deleted file mode 100644 index 9ad8230bc8b..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/card/stories/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * External dependencies - */ -import { Card } from '@woocommerce/components'; - -export const Basic = () => ( - <> - -

Your stuff in a Card.

- - -); - -export const Inactive = () => ( - <> - -

This Card is grayed out and has no box-shadow.

- - -); - -export default { - title: 'WooCommerce Admin/components/Card', - component: Card, -}; diff --git a/plugins/woocommerce-admin/packages/components/src/card/style.scss b/plugins/woocommerce-admin/packages/components/src/card/style.scss deleted file mode 100644 index be16c415eed..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/card/style.scss +++ /dev/null @@ -1,74 +0,0 @@ - - -.woocommerce-card { - margin-bottom: $gap-large; - background: $studio-white; - border-radius: 3px; - box-shadow: $muriel-box-shadow-1dp; - transition: box-shadow 0.2s cubic-bezier(0.4, 1, 0.4, 1); - - @include breakpoint( '<782px' ) { - margin-bottom: $gap-small; - width: auto; - } - - &.is-inactive { - background-color: $studio-gray-0; - box-shadow: none; - } -} - -.woocommerce-card__header { - padding: $gap; - display: grid; - align-items: center; - border-top-left-radius: 3px; - border-top-left-radius: 4px; - - .has-action & { - grid-template-columns: auto 1fr; - } - - .has-menu & { - grid-template-columns: auto 24px; - } - - .has-menu.has-action & { - grid-gap: $gap-small; - grid-template-columns: auto 1fr 24px; - } -} - -.woocommerce-card__header-item { - @include set-grid-item-position( 3, 3 ); - -ms-grid-row-align: center; -} - -.woocommerce-card__action, -.woocommerce-card__menu { - text-align: right; -} - -.woocommerce-card__body { - padding: $gap; -} - -.woocommerce-ellipsis-menu__toggle { - padding: 0; -} - -.woocommerce-card__title { - margin: 0; - @include font-size( 24 ); - line-height: 1.2; - font-weight: 400; -} - -.woocommerce-card__description { - @include font-size( 16 ); - line-height: 1.5; - color: $studio-gray-50; - margin-top: $gap-small; - margin-bottom: 0; - font-weight: 400; -} diff --git a/plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap deleted file mode 100644 index a8f300b1e76..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,26 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Card it renders correctly 1`] = ` -
-
-
-
-

- A Card Example -

-
-
-
-
-
-`; diff --git a/plugins/woocommerce-admin/packages/components/src/card/test/index.js b/plugins/woocommerce-admin/packages/components/src/card/test/index.js deleted file mode 100644 index 4f50e9862ec..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/card/test/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * External dependencies - */ -import { render } from '@testing-library/react'; - -/** - * Internal dependencies - */ -import Card from '../'; - -describe( 'Card', () => { - test( 'it renders correctly', () => { - const { container, getByRole } = render( - - ); - expect( container ).toMatchSnapshot(); - - // should have correct title - expect( - getByRole( 'heading', { name: 'A Card Example' } ) - ).toBeInTheDocument(); - - // should have correct class - expect( - container.getElementsByClassName( 'woocommerce-card' ) - ).toHaveLength( 1 ); - } ); -} ); diff --git a/plugins/woocommerce-admin/packages/components/src/index.js b/plugins/woocommerce-admin/packages/components/src/index.js index 847261ede41..0c86aae144f 100644 --- a/plugins/woocommerce-admin/packages/components/src/index.js +++ b/plugins/woocommerce-admin/packages/components/src/index.js @@ -2,7 +2,6 @@ export { default as AdvancedFilters } from './advanced-filters'; export { default as AnimationSlider } from './animation-slider'; export { default as Chart } from './chart'; export { default as ChartPlaceholder } from './chart/placeholder'; -export { default as Card } from './card'; export { default as Count } from './count'; export { CompareButton, CompareFilter } from './compare-filter'; export { default as Date } from './date'; diff --git a/plugins/woocommerce-admin/packages/components/src/style.scss b/plugins/woocommerce-admin/packages/components/src/style.scss index a23f334e60c..e423a206975 100644 --- a/plugins/woocommerce-admin/packages/components/src/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/style.scss @@ -2,7 +2,6 @@ * Internal Dependencies */ @import 'calendar/style.scss'; -@import 'card/style.scss'; @import 'chart/style.scss'; @import 'chart/d3chart/style.scss'; @import 'chart/d3chart/d3base/style.scss';