From c3c423bd94d5cffc5630bfeac7d7cce8189d5467 Mon Sep 17 00:00:00 2001 From: Luke Brennan Date: Fri, 8 Jul 2022 14:42:25 -0700 Subject: [PATCH 1/9] feat(divider): create divider component --- documentation-site/cheat-sheet.js | 72 +++++++++++++---------- src/divider/__tests__/divider.scenario.js | 64 ++++++++++++++++++++ src/divider/__tests__/divider.stories.js | 12 ++++ src/divider/constants.js | 12 ++++ src/divider/index.d.ts | 13 ++++ src/divider/index.js | 21 +++++++ src/divider/styled-components.js | 35 +++++++++++ src/divider/types.js | 16 +++++ 8 files changed, 214 insertions(+), 31 deletions(-) create mode 100644 src/divider/__tests__/divider.scenario.js create mode 100644 src/divider/__tests__/divider.stories.js create mode 100644 src/divider/constants.js create mode 100644 src/divider/index.d.ts create mode 100644 src/divider/index.js create mode 100644 src/divider/styled-components.js create mode 100644 src/divider/types.js diff --git a/documentation-site/cheat-sheet.js b/documentation-site/cheat-sheet.js index 9f4b182646..17959459ca 100644 --- a/documentation-site/cheat-sheet.js +++ b/documentation-site/cheat-sheet.js @@ -1257,6 +1257,13 @@ const outlines = [ { name: 'RangedCalendarBehaviorT', lineStart: 376, children: [] }, ], }, + { + file: 'src/divider/types.js', + definitions: [ + { name: 'SizeT', lineStart: 11, children: [] }, + { name: 'DividerPropsT', lineStart: 13, children: [{ name: '$size', lineStart: 15 }] }, + ], + }, { file: 'src/dnd-list/types.js', definitions: [ @@ -1408,44 +1415,47 @@ const outlines = [ { name: 'ProgressMessage', lineStart: 26 }, { name: 'ErrorMessage', lineStart: 27 }, { name: 'ButtonComponent', lineStart: 28 }, - { name: 'Spinner', lineStart: 29 }, + { name: 'CancelButtonComponent', lineStart: 29 }, + { name: 'RetryButtonComponent', lineStart: 30 }, + { name: 'Spinner', lineStart: 31 }, + { name: 'ProgressBar', lineStart: 32 }, ], }, { name: 'PropsT', - lineStart: 32, + lineStart: 35, children: [ - { name: 'accept', lineStart: 34 }, - { name: 'disableClick', lineStart: 36 }, - { name: 'disabled', lineStart: 37 }, - { name: 'getDataTransferItems', lineStart: 38 }, - { name: 'maxSize', lineStart: 39 }, - { name: 'minSize', lineStart: 40 }, - { name: 'multiple', lineStart: 41 }, - { name: 'name', lineStart: 42 }, - { name: 'onClick', lineStart: 43 }, - { name: 'onFocus', lineStart: 44 }, - { name: 'onBlur', lineStart: 45 }, - { name: 'onKeyDown', lineStart: 46 }, - { name: 'onDragStart', lineStart: 47 }, - { name: 'onDragEnter', lineStart: 48 }, - { name: 'onDragOver', lineStart: 49 }, - { name: 'onDragLeave', lineStart: 50 }, - { name: 'onDrop', lineStart: 51 }, - { name: 'onDropAccepted', lineStart: 52 }, - { name: 'onDropRejected', lineStart: 53 }, - { name: 'onFileDialogCancel', lineStart: 54 }, - { name: 'preventDropOnDocument', lineStart: 55 }, - { name: 'aria-describedby', lineStart: 56 }, - { name: 'errorMessage', lineStart: 59 }, - { name: 'onCancel', lineStart: 60 }, - { name: 'onRetry', lineStart: 61 }, - { name: 'overrides', lineStart: 62 }, - { name: 'progressAmount', lineStart: 63 }, - { name: 'progressMessage', lineStart: 64 }, + { name: 'accept', lineStart: 37 }, + { name: 'disableClick', lineStart: 39 }, + { name: 'disabled', lineStart: 40 }, + { name: 'getDataTransferItems', lineStart: 41 }, + { name: 'maxSize', lineStart: 42 }, + { name: 'minSize', lineStart: 43 }, + { name: 'multiple', lineStart: 44 }, + { name: 'name', lineStart: 45 }, + { name: 'onClick', lineStart: 46 }, + { name: 'onFocus', lineStart: 47 }, + { name: 'onBlur', lineStart: 48 }, + { name: 'onKeyDown', lineStart: 49 }, + { name: 'onDragStart', lineStart: 50 }, + { name: 'onDragEnter', lineStart: 51 }, + { name: 'onDragOver', lineStart: 52 }, + { name: 'onDragLeave', lineStart: 53 }, + { name: 'onDrop', lineStart: 54 }, + { name: 'onDropAccepted', lineStart: 55 }, + { name: 'onDropRejected', lineStart: 56 }, + { name: 'onFileDialogCancel', lineStart: 57 }, + { name: 'preventDropOnDocument', lineStart: 58 }, + { name: 'aria-describedby', lineStart: 59 }, + { name: 'errorMessage', lineStart: 62 }, + { name: 'onCancel', lineStart: 63 }, + { name: 'onRetry', lineStart: 64 }, + { name: 'overrides', lineStart: 65 }, + { name: 'progressAmount', lineStart: 66 }, + { name: 'progressMessage', lineStart: 67 }, ], }, - { name: 'DropFilesEventHandlerT', lineStart: 67, children: [] }, + { name: 'DropFilesEventHandlerT', lineStart: 70, children: [] }, ], }, { diff --git a/src/divider/__tests__/divider.scenario.js b/src/divider/__tests__/divider.scenario.js new file mode 100644 index 0000000000..67db065e8c --- /dev/null +++ b/src/divider/__tests__/divider.scenario.js @@ -0,0 +1,64 @@ +/* +Copyright (c) Uber Technologies, Inc. + +This source code is licensed under the MIT license found in the +LICENSE file in the root directory of this source tree. +*/ +// @flow + +import * as React from 'react'; + +import { StyledDivider, SIZE } from '../index.js'; + +export function Scenario() { + return ( +
+
+ Cell Divider +
+ + + +
+ Section Divider +
+ + + +
+ Module Divider +
+ + + +
+
+ ); +} diff --git a/src/divider/__tests__/divider.stories.js b/src/divider/__tests__/divider.stories.js new file mode 100644 index 0000000000..726a9e7bdc --- /dev/null +++ b/src/divider/__tests__/divider.stories.js @@ -0,0 +1,12 @@ +/* +Copyright (c) Uber Technologies, Inc. + +This source code is licensed under the MIT license found in the +LICENSE file in the root directory of this source tree. +*/ +// @flow + +import React from 'react'; +import { Scenario as DividerDivider } from './divider.scenario.js'; + +export const Divider = () => ; diff --git a/src/divider/constants.js b/src/divider/constants.js new file mode 100644 index 0000000000..3ab3f3d07c --- /dev/null +++ b/src/divider/constants.js @@ -0,0 +1,12 @@ +/* +Copyright (c) Uber Technologies, Inc. + +This source code is licensed under the MIT license found in the +LICENSE file in the root directory of this source tree. +*/ +// @flow +export const SIZE = { + cell: 'cell', + section: 'section', + module: 'module', +}; diff --git a/src/divider/index.d.ts b/src/divider/index.d.ts new file mode 100644 index 0000000000..597503466a --- /dev/null +++ b/src/divider/index.d.ts @@ -0,0 +1,13 @@ +import { StyletronComponent } from 'styletron-react'; + +export declare const SIZE: { + cell: 'cell'; + section: 'section'; + module: 'module'; +}; + +export interface DividerProps { + $size?: typeof SIZE[keyof typeof SIZE]; +} + +export declare const StyledDivider: StyletronComponent; diff --git a/src/divider/index.js b/src/divider/index.js new file mode 100644 index 0000000000..bd46e468f4 --- /dev/null +++ b/src/divider/index.js @@ -0,0 +1,21 @@ +/* +Copyright (c) Uber Technologies, Inc. + +This source code is licensed under the MIT license found in the +LICENSE file in the root directory of this source tree. +*/ +// @flow +import * as React from 'react'; +import { withWrapper } from '../styles/index.js'; + +import { StyledDivider as StyledDividerElement } from './styled-components.js'; + +export * from './constants.js'; + +export const StyledDivider = withWrapper( + StyledDividerElement, + (StyledComponent) => + function StyledDivider(props) { + return