Remove the deprecated Card component (https://github.com/woocommerce/woocommerce-admin/pull/7114)
This commit is contained in:
Sam Seay
GitHub
parent
a417a72ce4
commit
c07a5d77a6
|
|
@ -6,7 +6,8 @@ import moment from 'moment';
|
||||||
/**
|
/**
|
||||||
* WooCommerce dependencies
|
* WooCommerce dependencies
|
||||||
*/
|
*/
|
||||||
import { Card, Chart } from '@woocommerce/components';
|
import { Card } from '@wordpress/components';
|
||||||
|
import { Chart } from '@woocommerce/components';
|
||||||
import Currency from '@woocommerce/currency';
|
import Currency from '@woocommerce/currency';
|
||||||
|
|
||||||
const storeCurrency = Currency();
|
const storeCurrency = Currency();
|
||||||
|
|
|
||||||
|
|
@ -12907,6 +12907,14 @@
|
||||||
"@wordpress/element": "^2.19.0",
|
"@wordpress/element": "^2.19.0",
|
||||||
"@wordpress/warning": "^1.3.0",
|
"@wordpress/warning": "^1.3.0",
|
||||||
"core-js": "^3.6.4"
|
"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": {
|
"@wordpress/eslint-plugin": {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
- Fix styling of the advanced filter operator selection. #7005
|
- Fix styling of the advanced filter operator selection. #7005
|
||||||
- Remove the use of Dashicons and replace with @wordpress/icons or gridicons #7020
|
- Remove the use of Dashicons and replace with @wordpress/icons or gridicons #7020
|
||||||
- Add tree shaking support to this package. #7034
|
- Add tree shaking support to this package. #7034
|
||||||
|
- Remove the long deprecated Card component (use Card from `@wordpress/components` instead). #7114
|
||||||
|
|
||||||
# 6.2.0
|
# 6.2.0
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,14 +18,10 @@ View [the full Component documentation](https://woocommerce.github.io/woocommerc
|
||||||
/**
|
/**
|
||||||
* Woocommerce dependencies
|
* Woocommerce dependencies
|
||||||
*/
|
*/
|
||||||
import { Card } from '@woocommerce/components';
|
import { Badge } from '@woocommerce/components';
|
||||||
|
|
||||||
export default function MyCard() {
|
export default function MyBadge() {
|
||||||
return (
|
return <Badge count={ 15 } />;
|
||||||
<Card title="Store Performance" description="Key performance metrics">
|
|
||||||
<p>Your stuff in a Card.</p>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
<div>
|
|
||||||
<Card title="Store Performance" description="Key performance metrics">
|
|
||||||
<p>Your stuff in a Card.</p>
|
|
||||||
</Card>
|
|
||||||
<Card title="Inactive Card" isInactive>
|
|
||||||
<p>This Card is grayed out and has no box-shadow.</p>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 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
|
|
||||||
|
|
@ -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 (
|
|
||||||
<div className={ className }>
|
|
||||||
{ title && (
|
|
||||||
<div className="woocommerce-card__header">
|
|
||||||
<div className="woocommerce-card__title-wrapper">
|
|
||||||
<H className="woocommerce-card__title woocommerce-card__header-item">
|
|
||||||
{ title }
|
|
||||||
</H>
|
|
||||||
{ description && (
|
|
||||||
<H className="woocommerce-card__description woocommerce-card__header-item">
|
|
||||||
{ description }
|
|
||||||
</H>
|
|
||||||
) }
|
|
||||||
</div>
|
|
||||||
{ action && (
|
|
||||||
<div className="woocommerce-card__action woocommerce-card__header-item">
|
|
||||||
{ action }
|
|
||||||
</div>
|
|
||||||
) }
|
|
||||||
{ menu && (
|
|
||||||
<div className="woocommerce-card__menu woocommerce-card__header-item">
|
|
||||||
{ menu }
|
|
||||||
</div>
|
|
||||||
) }
|
|
||||||
</div>
|
|
||||||
) }
|
|
||||||
<Section className="woocommerce-card__body">
|
|
||||||
{ children }
|
|
||||||
</Section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import { Card } from '@woocommerce/components';
|
|
||||||
|
|
||||||
export const Basic = () => (
|
|
||||||
<>
|
|
||||||
<Card title="Store Performance" description="Key performance metrics">
|
|
||||||
<p>Your stuff in a Card.</p>
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Inactive = () => (
|
|
||||||
<>
|
|
||||||
<Card title="Inactive Card" isInactive>
|
|
||||||
<p>This Card is grayed out and has no box-shadow.</p>
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'WooCommerce Admin/components/Card',
|
|
||||||
component: Card,
|
|
||||||
};
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Card it renders correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="woocommerce-card"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="woocommerce-card__header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="woocommerce-card__title-wrapper"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
class="woocommerce-card__title woocommerce-card__header-item"
|
|
||||||
>
|
|
||||||
A Card Example
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="woocommerce-card__body"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
@ -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(
|
|
||||||
<Card title="A Card Example" />
|
|
||||||
);
|
|
||||||
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 );
|
|
||||||
} );
|
|
||||||
} );
|
|
||||||
|
|
@ -2,7 +2,6 @@ export { default as AdvancedFilters } from './advanced-filters';
|
||||||
export { default as AnimationSlider } from './animation-slider';
|
export { default as AnimationSlider } from './animation-slider';
|
||||||
export { default as Chart } from './chart';
|
export { default as Chart } from './chart';
|
||||||
export { default as ChartPlaceholder } from './chart/placeholder';
|
export { default as ChartPlaceholder } from './chart/placeholder';
|
||||||
export { default as Card } from './card';
|
|
||||||
export { default as Count } from './count';
|
export { default as Count } from './count';
|
||||||
export { CompareButton, CompareFilter } from './compare-filter';
|
export { CompareButton, CompareFilter } from './compare-filter';
|
||||||
export { default as Date } from './date';
|
export { default as Date } from './date';
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
* Internal Dependencies
|
* Internal Dependencies
|
||||||
*/
|
*/
|
||||||
@import 'calendar/style.scss';
|
@import 'calendar/style.scss';
|
||||||
@import 'card/style.scss';
|
|
||||||
@import 'chart/style.scss';
|
@import 'chart/style.scss';
|
||||||
@import 'chart/d3chart/style.scss';
|
@import 'chart/d3chart/style.scss';
|
||||||
@import 'chart/d3chart/d3base/style.scss';
|
@import 'chart/d3chart/d3base/style.scss';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue