Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove the deprecated Card component (https://github.com/woocommerce/woocommerce-admin/pull/7114)

This commit is contained in:
Sam Seay 2021-06-04 07:43:56 +12:00 committed by GitHub
parent a417a72ce4
commit c07a5d77a6
12 changed files with 14 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/global-prices.js
View File

@ -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();

8
plugins/woocommerce-admin/package-lock.json generated
View File

@ -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": {

1
plugins/woocommerce-admin/packages/components/CHANGELOG.md
View File

@ -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

10
plugins/woocommerce-admin/packages/components/README.md
View File

@ -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 (
<Card title="Store Performance" description="Key performance metrics">
<p>Your stuff in a Card.</p>
</Card>
);
export default function MyBadge() {
return <Badge count={ 15 } />;
}
```

28
plugins/woocommerce-admin/packages/components/src/card/README.md
View File

@ -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

111
plugins/woocommerce-admin/packages/components/src/card/index.js
View File

@ -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;

25
plugins/woocommerce-admin/packages/components/src/card/stories/index.js
View File

@ -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,
};

74
plugins/woocommerce-admin/packages/components/src/card/style.scss
View File

@ -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;
}

26
plugins/woocommerce-admin/packages/components/src/card/test/__snapshots__/index.js.snap
View File

@ -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>
`;

28
plugins/woocommerce-admin/packages/components/src/card/test/index.js
View File

@ -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 );
} );
} );

1
plugins/woocommerce-admin/packages/components/src/index.js
View File

@ -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';

1
plugins/woocommerce-admin/packages/components/src/style.scss
View File

@ -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';