Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gutenboarding: Drop FSE reuse/use MediaCard #38456

Merged
merged 6 commits into from
Dec 17, 2019
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions client/landing/gutenboarding/components/card/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
# Card

Card provides a flexible and extensible content container.

## Usage

```jsx
import { Card, CardBody } from '@wordpress/components';

const Example = () => (
<Card>
<CardBody>...</CardBody>
</Card>
);
```

## Props

Name | Type | Default | Description
--- | --- | --- | ---
`isBorderless` | `boolean` | `false` | Determines the border style of the card.
`isElevated` | `boolean` | `false` | Determines the elevation style of the card.
`size` | `string` | `medium` | Determines the amount of padding within the card.

## Sub-Components

This component provides a collection of sub-component that can be used to compose various interfaces.

- [`<CardBody />`](./docs/body.md)
- [`<CardDivider />`](./docs/divider.md)
- [`<CardFooter />`](./docs/footer.md)
- [`<CardHeader />`](./docs/header.md)
- [`<CardMedia />`](./docs/media.md)

### Sub-Components Example

```jsx
import {
Card,
CardBody,
CardDivider,
CardFooter,
CardHeader,
CardMedia
} from '@wordpress/components';

const Example = () => (
<Card>
<CardHeader>
...
</CardHeader>
<CardBody>
...
<CardBody>
<CardDivider />
<CardBody>
...
<CardBody>
<CardMedia>
<img src="..." />
</CardMedia>
<CardHeader>
...
</CardHeader>
</Card>
);
```

### Context

`<Card />`'s sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.

In the following example, the `<CardBody />` will render with a size of `small`:

```jsx
import { Card, CardBody } from '@wordpress/components';

const Example = () => (
<Card size="small">
<CardBody>...</CardBody>
</Card>
);
```

These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render it's specified size:

```jsx
import { Card, CardBody } from '@wordpress/components';

const Example = () => (
<Card size="small">
<CardBody>...</CardBody>
<CardBody>...</CardBody>
<CardBody size="large">...</CardBody>
</Card>
);
```
33 changes: 33 additions & 0 deletions client/landing/gutenboarding/components/card/body.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/**
* External dependencies
*/
import React from 'react';
import classnames from 'classnames';

/**
* Internal dependencies
*/
import { BodyUI } from './styles/card-styles';
import { useCardContext } from './context';

export const defaultProps = {
isShady: false,
size: 'medium',
};

export function CardBody( props ) {
const { className, isShady, ...additionalProps } = props;
const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
const { size } = mergedProps;

const classes = classnames(
'components-card__body',
isShady && 'is-shady',
size && `is-size-${ size }`,
className
);

return <BodyUI { ...additionalProps } className={ classes } />;
}

export default CardBody;
7 changes: 7 additions & 0 deletions client/landing/gutenboarding/components/card/context.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* WordPress dependencies
*/
import { createContext, useContext } from '@wordpress/element';

export const CardContext = createContext( {} );
export const useCardContext = () => useContext( CardContext );
22 changes: 22 additions & 0 deletions client/landing/gutenboarding/components/card/divider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* External dependencies
*/
import React from 'react';
import classnames from 'classnames';

/**
* Internal dependencies
*/
import { DividerUI } from './styles/card-styles';

export function CardDivider( props ) {
const { className, ...additionalProps } = props;

const classes = classnames( 'components-card__divider', className );

return (
<DividerUI { ...additionalProps } children={ null } className={ classes } role="separator" />
);
}

export default CardDivider;
35 changes: 35 additions & 0 deletions client/landing/gutenboarding/components/card/footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* External dependencies
*/
import React from 'react';
import classnames from 'classnames';

/**
* Internal dependencies
*/
import { FooterUI } from './styles/card-styles';
import { useCardContext } from './context';

export const defaultProps = {
isBorderless: false,
isShady: false,
size: 'medium',
};

export function CardFooter( props ) {
const { className, isShady, ...additionalProps } = props;
const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
const { isBorderless, size } = mergedProps;

const classes = classnames(
'components-card__footer',
isBorderless && 'is-borderless',
isShady && 'is-shady',
size && `is-size-${ size }`,
className
);

return <FooterUI { ...additionalProps } className={ classes } />;
}

export default CardFooter;
35 changes: 35 additions & 0 deletions client/landing/gutenboarding/components/card/header.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* External dependencies
*/
import React from 'react';
import classnames from 'classnames';

/**
* Internal dependencies
*/
import { HeaderUI } from './styles/card-styles';
import { useCardContext } from './context';

export const defaultProps = {
isBorderless: false,
isShady: false,
size: 'medium',
};

export function CardHeader( props ) {
const { className, isShady, ...additionalProps } = props;
const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
const { isBorderless, size } = mergedProps;

const classes = classnames(
'components-card__header',
isBorderless && 'is-borderless',
isShady && 'is-shady',
size && `is-size-${ size }`,
className
);

return <HeaderUI { ...additionalProps } className={ classes } />;
}

export default CardHeader;
46 changes: 46 additions & 0 deletions client/landing/gutenboarding/components/card/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* External dependencies
*/
import React from 'react';
import classnames from 'classnames';

/**
* Internal dependencies
*/
import { CardContext } from './context';
import { CardUI } from './styles/card-styles';

export const defaultProps = {
isBorderless: false,
isElevated: false,
size: 'medium',
};

export function Card( props ) {
const { className, isBorderless, isElevated, size, ...additionalProps } = props;
const { Provider } = CardContext;

const contextProps = {
isBorderless,
isElevated,
size,
};

const classes = classnames(
'components-card',
isBorderless && 'is-borderless',
isElevated && 'is-elevated',
size && `is-size-${ size }`,
className
);

return (
<Provider value={ contextProps }>
<CardUI { ...additionalProps } className={ classes } />
</Provider>
);
}

Card.defaultProps = defaultProps;

export default Card;
20 changes: 20 additions & 0 deletions client/landing/gutenboarding/components/card/media.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* External dependencies
*/
import React from 'react';
import classnames from 'classnames';

/**
* Internal dependencies
*/
import { MediaUI } from './styles/card-styles';

export function CardMedia( props ) {
const { className, ...additionalProps } = props;

const classes = classnames( 'components-card__media', className );

return <MediaUI { ...additionalProps } className={ classes } />;
}

export default CardMedia;
Loading