diff --git a/client/landing/gutenboarding/components/card/README.md b/client/landing/gutenboarding/components/card/README.md deleted file mode 100644 index 915f90f70e05..000000000000 --- a/client/landing/gutenboarding/components/card/README.md +++ /dev/null @@ -1,104 +0,0 @@ -# THIS IS TEMPORARY - -This is an unreleased component copied from -[`@wordpress/components`](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/card). - -_It should not be heavily modified, it will be replaced with the published component soon._ - -# Card - -Card provides a flexible and extensible content container. - -## Usage - -```jsx -import { Card, CardBody } from '@wordpress/components'; - -const Example = () => ( - - ... - -); -``` - -## 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. - -- [``](./docs/body.md) -- [``](./docs/divider.md) -- [``](./docs/footer.md) -- [``](./docs/header.md) -- [``](./docs/media.md) - -### Sub-Components Example - -```jsx -import { - Card, - CardBody, - CardDivider, - CardFooter, - CardHeader, - CardMedia -} from '@wordpress/components'; - -const Example = () => ( - - - ... - - - ... - - - - ... - - - - - - ... - - -); -``` - -### Context - -``'s sub-components are connected to `` 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 `` will render with a size of `small`: - -```jsx -import { Card, CardBody } from '@wordpress/components'; - -const Example = () => ( - - ... - -); -``` - -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 `` will render it's specified size: - -```jsx -import { Card, CardBody } from '@wordpress/components'; - -const Example = () => ( - - ... - ... - ... - -); -``` diff --git a/client/landing/gutenboarding/components/card/body.js b/client/landing/gutenboarding/components/card/body.js deleted file mode 100644 index 3949340c1434..000000000000 --- a/client/landing/gutenboarding/components/card/body.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * 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 ; -} - -export default CardBody; diff --git a/client/landing/gutenboarding/components/card/context.js b/client/landing/gutenboarding/components/card/context.js deleted file mode 100644 index 9cbe600ff435..000000000000 --- a/client/landing/gutenboarding/components/card/context.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * External dependencies - */ -import { createContext, useContext } from '@wordpress/element'; - -export const CardContext = createContext( {} ); -export const useCardContext = () => useContext( CardContext ); diff --git a/client/landing/gutenboarding/components/card/divider.js b/client/landing/gutenboarding/components/card/divider.js deleted file mode 100644 index d5ee214c2dff..000000000000 --- a/client/landing/gutenboarding/components/card/divider.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * 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 ( - - ); -} - -export default CardDivider; diff --git a/client/landing/gutenboarding/components/card/footer.js b/client/landing/gutenboarding/components/card/footer.js deleted file mode 100644 index e0dcc04eb27f..000000000000 --- a/client/landing/gutenboarding/components/card/footer.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * 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 ; -} - -export default CardFooter; diff --git a/client/landing/gutenboarding/components/card/header.js b/client/landing/gutenboarding/components/card/header.js deleted file mode 100644 index fd746a2ca29a..000000000000 --- a/client/landing/gutenboarding/components/card/header.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * 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 ; -} - -export default CardHeader; diff --git a/client/landing/gutenboarding/components/card/index.js b/client/landing/gutenboarding/components/card/index.js deleted file mode 100644 index ee4ed0607b7f..000000000000 --- a/client/landing/gutenboarding/components/card/index.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * 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 ( - - - - ); -} - -Card.defaultProps = defaultProps; - -export default Card; diff --git a/client/landing/gutenboarding/components/card/media.js b/client/landing/gutenboarding/components/card/media.js deleted file mode 100644 index c473b3f051b3..000000000000 --- a/client/landing/gutenboarding/components/card/media.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * 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 ; -} - -export default CardMedia; diff --git a/client/landing/gutenboarding/components/card/styles/card-styles.js b/client/landing/gutenboarding/components/card/styles/card-styles.js deleted file mode 100644 index db20cd46a2a8..000000000000 --- a/client/landing/gutenboarding/components/card/styles/card-styles.js +++ /dev/null @@ -1,167 +0,0 @@ -/** - * External dependencies - */ -import styled from '@emotion/styled'; - -/** - * Internal dependencies - */ -import { HorizontalRule } from '@wordpress/components'; - -export const styleProps = { - borderColor: color( 'lightGray.500' ), - borderRadius: '3px', - backgroundShady: color( 'lightGray.200' ), -}; - -const { borderColor, borderRadius, backgroundShady } = styleProps; - -export const CardUI = styled.div` - background: ${color( 'white' )}; - box-sizing: border-box; - border-radius: ${borderRadius}; - border: 1px solid ${borderColor}; - - ${handleBorderless}; - - &.is-elevated { - box-shadow: 0px 1px 3px 0px rgba( 0, 0, 0, 0.2 ), 0px 1px 1px 0px rgba( 0, 0, 0, 0.14 ), - 0px 2px 1px -1px rgba( 0, 0, 0, 0.12 ); - } -`; - -export const HeaderUI = styled.div` - border-bottom: 1px solid ${borderColor}; - border-top-left-radius: ${borderRadius}; - border-top-right-radius: ${borderRadius}; - box-sizing: border-box; - - &:last-child { - border-bottom: none; - } - - ${headerFooterSizes}; - ${handleBorderless}; - ${handleShady}; -`; - -export const MediaUI = styled.div` - box-sizing: border-box; - overflow: hidden; - - & > img, - & > iframe { - display: block; - height: auto; - max-width: 100%; - width: 100%; - } - - &:first-of-type { - border-top-left-radius: ${borderRadius}; - border-top-right-radius: ${borderRadius}; - } - - &:last-of-type { - border-bottom-left-radius: ${borderRadius}; - border-bottom-right-radius: ${borderRadius}; - } -`; - -export const BodyUI = styled.div` - box-sizing: border-box; - - ${bodySize}; - ${handleShady}; -`; - -export const FooterUI = styled.div` - border-top: 1px solid ${borderColor}; - border-bottom-left-radius: ${borderRadius}; - border-bottom-right-radius: ${borderRadius}; - box-sizing: border-box; - - &:first-of-type { - border-top: none; - } - - ${headerFooterSizes}; - ${handleBorderless}; - ${handleShady}; -`; - -export const DividerUI = styled( HorizontalRule )` - all: unset; - border-top: 1px solid ${borderColor}; - box-sizing: border-box; - display: block; - height: 0; - width: 100%; -`; - -export function bodySize() { - return ` - &.is-size { - &-large { - padding: 28px; - } - &-medium { - padding: 20px; - } - &-small { - padding: 12px; - } - &-extraSmall { - padding: 8px; - } - } - `; -} - -export function headerFooterSizes() { - return ` - &.is-size { - &-large { - padding: 20px 28px; - } - &-medium { - padding: 12px 20px; - } - &-small { - padding: 8px 12px; - } - &-extraSmall { - padding: 4px 8px; - } - } - `; -} - -export function handleBorderless() { - return ` - &.is-borderless { - border: none; - } - `; -} - -export function handleShady() { - return ` - &.is-shady { - background: ${ backgroundShady }; - } - `; -} - -// hack around https://github.com/WordPress/gutenberg/blob/master/packages/components/src/utils/colors.js -function color( value ) { - switch ( value ) { - case 'lightGray.500': - return '#e2e4e7'; - case 'lightGray.200': - return '#f3f4f5'; - case 'white': - return '#fff'; - } - return '#000'; -} diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/design-card.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/design-card.tsx index 11983218ce1a..adcff2049f35 100644 --- a/client/landing/gutenboarding/onboarding-block/design-selector/design-card.tsx +++ b/client/landing/gutenboarding/onboarding-block/design-selector/design-card.tsx @@ -8,8 +8,7 @@ import { addQueryArgs, removeQueryArgs } from '@wordpress/url'; /** * Internal dependencies */ -import { Card } from '../../components/card'; -import { CardMedia } from '../../components/card/media'; +import { Card, CardMedia } from '@wordpress/components'; const gridWidth = 960; const srcSet = ( src: string, widths: number[] ) => @@ -17,7 +16,7 @@ const srcSet = ( src: string, widths: number[] ) => interface Props { design: import('@automattic/data-stores').VerticalsTemplates.Template; - onClick: MouseEventHandler< HTMLDivElement >; + onClick: MouseEventHandler< HTMLButtonElement >; style?: CSSProperties; dialogId: string; } diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/page-layout-selector.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/page-layout-selector.tsx index 6e0d943c8da6..215dce3cbe7e 100644 --- a/client/landing/gutenboarding/onboarding-block/design-selector/page-layout-selector.tsx +++ b/client/landing/gutenboarding/onboarding-block/design-selector/page-layout-selector.tsx @@ -9,11 +9,8 @@ import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies */ -import Card from '../../components/card'; -import CardFooter from '../../components/card/footer'; -import CardMedia from '../../components/card/media'; +import { Card, CardFooter, CardMedia, Icon } from '@wordpress/components'; import { removeQueryArgs } from '@wordpress/url'; -import { Icon } from '@wordpress/components'; import { STORE_KEY as ONBOARD_STORE } from '../../stores/onboard'; type Template = import('@automattic/data-stores').VerticalsTemplates.Template;