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

Surface: Convert component to TypeScript #41212

Merged
merged 4 commits into from
May 31, 2022
Merged
Show file tree
Hide file tree
Changes from all 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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
- `DateTimePicker`: Update `moment` to 2.26.0 and update `react-date` typings ([#41266](https://github.com/WordPress/gutenberg/pull/41266)).
- `TextareaControl`: Convert to TypeScript ([#41215](https://github.com/WordPress/gutenberg/pull/41215)).
- `BoxControl`: Update unit tests to use `@testing-library/user-event` ([#41422](https://github.com/WordPress/gutenberg/pull/41422)).
- `Surface`: Convert to TypeScript ([#41212](https://github.com/WordPress/gutenberg/pull/41212)).

### Experimental

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/card/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { CSSProperties } from 'react';
/**
* Internal dependencies
*/
import type { Props as SurfaceProps } from '../surface/types';
import type { SurfaceProps } from '../surface/types';

type DeprecatedSizeOptions = 'extraSmall';
export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';
Expand Down
30 changes: 15 additions & 15 deletions packages/components/src/surface/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ In the example below, notice how the `Surface` renders in white (or dark gray if
```jsx
import {
__experimentalSurface as Surface,
__experimentalText as Text
__experimentalText as Text,
} from '@wordpress/components';

function Example() {
Expand All @@ -27,46 +27,46 @@ function Example() {

## Props

### `backgroundSize`: number
### `backgroundSize`: `number`

- Required: No
- Default: `12`
- Required: No
- Default: `12`

Determines the grid size for "dotted" and "grid" variants.

### `borderBottom`: `boolean`

- Required: No
- Default: `false`
- Required: No
- Default: `false`

Renders a bottom border.

### `borderLeft`: `boolean`

- Required: No
- Default: `false`
- Required: No
- Default: `false`

Renders a left border.

### `borderRight`: `boolean`

- Required: No
- Default: `false`
- Required: No
- Default: `false`

Renders a right border.

### `borderTop`: `boolean`

- Required: No
- Default: `false`
- Required: No
- Default: `false`

Renders a top border.

### `variant`: `string`

- Required: No
- Default: `false`
- Allowed values: `primary`, `secondary`, `tertiary`, `dotted`, `grid`
- Required: No
- Default: `false`
- Allowed values: `primary`, `secondary`, `tertiary`, `dotted`, `grid`

Modifies the background color of `Surface`.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
/**
* External dependencies
*/
import type { ForwardedRef } from 'react';

/**
* Internal dependencies
*/
import { contextConnect } from '../ui/context';
import { View } from '../view';
import { useSurface } from './hook';
import type { SurfaceProps } from './types';
import type { WordPressComponentProps } from '../ui/context';

/**
* @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
* @param {import('react').ForwardedRef<any>} forwardedRef
*/
function Surface( props, forwardedRef ) {
function UnconnectedSurface(
props: WordPressComponentProps< SurfaceProps, 'div' >,
forwardedRef: ForwardedRef< any >
) {
const surfaceProps = useSurface( props );

return <View { ...surfaceProps } ref={ forwardedRef } />;
Expand All @@ -35,6 +41,6 @@ function Surface( props, forwardedRef ) {
* }
* ```
*/
const ConnectedSurface = contextConnect( Surface, 'Surface' );
export const Surface = contextConnect( UnconnectedSurface, 'Surface' );

export default ConnectedSurface;
export default Surface;
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ import { useMemo } from '@wordpress/element';
import { useContextSystem } from '../ui/context';
import * as styles from './styles';
import { useCx } from '../utils/hooks/use-cx';
import type { SurfaceProps } from './types';
import type { WordPressComponentProps } from '../ui/context';

/**
* @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
*/
export function useSurface( props ) {
export function useSurface(
props: WordPressComponentProps< SurfaceProps, 'div' >
) {
const {
backgroundSize = 12,
borderBottom = false,
Expand All @@ -28,14 +29,14 @@ export function useSurface( props ) {
const cx = useCx();

const classes = useMemo( () => {
const sx = {};

sx.borders = styles.getBorders( {
borderBottom,
borderLeft,
borderRight,
borderTop,
} );
const sx = {
borders: styles.getBorders( {
borderBottom,
borderLeft,
borderRight,
borderTop,
} ),
};

return cx(
styles.Surface,
Expand Down
46 changes: 0 additions & 46 deletions packages/components/src/surface/stories/index.js

This file was deleted.

40 changes: 40 additions & 0 deletions packages/components/src/surface/stories/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* External dependencies
*/
import type { ComponentMeta, ComponentStory } from '@storybook/react';

/**
* Internal dependencies
*/
import { Surface } from '..';
import { Text } from '../../text';

const meta: ComponentMeta< typeof Surface > = {
component: Surface,
title: 'Components (Experimental)/Surface',
argTypes: {
children: { control: { type: null } },
as: { control: { type: 'text' } },
},
parameters: {
controls: {
expanded: true,
},
docs: { source: { state: 'open' } },
},
};
export default meta;

const Template: ComponentStory< typeof Surface > = ( args ) => {
return (
<Surface
{ ...args }
style={ { padding: 20, maxWidth: 400, margin: '20vh auto' } }
>
<Text>Code is Poetry</Text>
</Surface>
);
};

export const Default: ComponentStory< typeof Surface > = Template.bind( {} );
Default.args = {};
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { css } from '@emotion/react';
* Internal dependencies
*/
import { CONFIG, COLORS } from '../utils';
import type { SurfaceVariant, SurfaceProps } from './types';

export const Surface = css`
background-color: ${ CONFIG.surfaceColor };
Expand All @@ -18,19 +19,15 @@ export const background = css`
background-color: ${ CONFIG.surfaceBackgroundColor };
`;

/**
* @param {Object} props
* @param {boolean} [props.borderBottom]
* @param {boolean} [props.borderLeft]
* @param {boolean} [props.borderRight]
* @param {boolean} [props.borderTop]
*/
export function getBorders( {
borderBottom,
borderLeft,
borderRight,
borderTop,
} ) {
}: Pick<
SurfaceProps,
'borderBottom' | 'borderLeft' | 'borderRight' | 'borderTop'
> ) {
const borderStyle = `1px solid ${ CONFIG.surfaceBorderColor }`;

return css( {
Expand All @@ -51,16 +48,10 @@ export const tertiary = css`
background: ${ CONFIG.surfaceBackgroundTertiaryColor };
`;

/**
* @param {string} surfaceBackgroundSize
*/
const customBackgroundSize = ( surfaceBackgroundSize ) =>
const customBackgroundSize = ( surfaceBackgroundSize: string ) =>
[ surfaceBackgroundSize, surfaceBackgroundSize ].join( ' ' );

/**
* @param {string} surfaceBackgroundSizeDotted
*/
const dottedBackground1 = ( surfaceBackgroundSizeDotted ) =>
const dottedBackground1 = ( surfaceBackgroundSizeDotted: string ) =>
[
'90deg',
[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(
Expand All @@ -69,21 +60,15 @@ const dottedBackground1 = ( surfaceBackgroundSizeDotted ) =>
'transparent 1%',
].join( ',' );

/**
* @param {string} surfaceBackgroundSizeDotted
*/
const dottedBackground2 = ( surfaceBackgroundSizeDotted ) =>
const dottedBackground2 = ( surfaceBackgroundSizeDotted: string ) =>
[
[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(
' '
),
'transparent 1%',
].join( ',' );

/**
* @param {string} surfaceBackgroundSizeDotted
*/
const dottedBackgroundCombined = ( surfaceBackgroundSizeDotted ) =>
const dottedBackgroundCombined = ( surfaceBackgroundSizeDotted: string ) =>
[
`linear-gradient( ${ dottedBackground1(
surfaceBackgroundSizeDotted
Expand All @@ -94,14 +79,9 @@ const dottedBackgroundCombined = ( surfaceBackgroundSizeDotted ) =>
CONFIG.surfaceBorderBoldColor,
].join( ',' );

/**
*
* @param {string} surfaceBackgroundSize
* @param {string} surfaceBackgroundSizeDotted
*/
export const getDotted = (
surfaceBackgroundSize,
surfaceBackgroundSizeDotted
surfaceBackgroundSize: string,
surfaceBackgroundSizeDotted: string
) => css`
background: ${ dottedBackgroundCombined( surfaceBackgroundSizeDotted ) };
background-size: ${ customBackgroundSize( surfaceBackgroundSize ) };
Expand All @@ -123,27 +103,18 @@ const gridBackgroundCombined = [
`linear-gradient( ${ gridBackground2 } )`,
].join( ',' );

/**
* @param {string} surfaceBackgroundSize
* @return {import('@emotion/react').SerializedStyles} CSS.
*/
export const getGrid = ( surfaceBackgroundSize ) => {
export const getGrid = ( surfaceBackgroundSize: string ) => {
return css`
background: ${ CONFIG.surfaceBackgroundColor };
background-image: ${ gridBackgroundCombined };
background-size: ${ customBackgroundSize( surfaceBackgroundSize ) };
`;
};

/**
* @param {'dotted' | 'grid' | 'primary' | 'secondary' | 'tertiary'} variant
* @param {string} surfaceBackgroundSize
* @param {string} surfaceBackgroundSizeDotted
*/
export const getVariant = (
variant,
surfaceBackgroundSize,
surfaceBackgroundSizeDotted
variant: SurfaceVariant,
surfaceBackgroundSize: string,
surfaceBackgroundSizeDotted: string
) => {
switch ( variant ) {
case 'dotted': {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
* External dependencies
*/
import { render } from '@testing-library/react';
import type { RenderResult } from '@testing-library/react';

/**
* Internal dependencies
*/
import { Surface } from '../index';

describe( 'props', () => {
let base;
let base: RenderResult;
beforeEach( () => {
base = render( <Surface>Surface</Surface> );
} );
Expand Down
Loading