Divider component (uber#5027)

* feat(divider): create divider component * chore(divider): add docs * chore(divider): convert to typescript * chore(divider): more typescript migration changes * test(vrt): update visual snapshots for 20f5e60 [skip ci] (uber#5029) Co-authored-by: UberOpenSourceBot <[email protected]> * chore(divider): use long-hand properties for border styles * Update src/divider/types.js.flow Co-authored-by: Chase Starr <[email protected]> * Apply suggestions from code review Co-authored-by: Chase Starr <[email protected]> * chore(divider): fix typescript issue Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: Chase Starr <[email protected]>
imnotjames · Jul 14, 2022 · c6f8e7f · c6f8e7f
1 parent 58c6a32
commit c6f8e7f
Show file tree

Hide file tree

Showing 24 changed files with 435 additions and 0 deletions.
diff --git a/documentation-site/components/yard/config/divider.ts b/documentation-site/components/yard/config/divider.ts
@@ -0,0 +1,30 @@
+import { StyledDivider, SIZE } from 'baseui/divider';
+import { PropTypes } from 'react-view';
+import { TConfig } from '../types';
+
+const DividerConfig: TConfig = {
+  componentName: 'StyledDivider',
+  imports: {
+    'baseui/divider': {
+      named: ['StyledDivider'],
+    },
+  },
+  scope: { StyledDivider, SIZE },
+  theme: [],
+  props: {
+    $size: {
+      value: 'SIZE.section',
+      defaultValue: 'SIZE.section',
+      options: SIZE,
+      type: PropTypes.Enum,
+      description: 'Defines the height of the divider.',
+      imports: {
+        'baseui/divider': {
+          named: ['SIZE'],
+        },
+      },
+    },
+  },
+};
+
+export default DividerConfig;
diff --git a/documentation-site/examples/divider/basic.js b/documentation-site/examples/divider/basic.js
@@ -0,0 +1,57 @@
+// @flow
+
+import * as React from 'react';
+import {StyledDivider, SIZE} from 'baseui/divider';
+
+export default function Example() {
+  return (
+    <div
+      style={{
+        width: '400px',
+        border: '1px solid #E2E2E2',
+        borderRadius: '8px',
+      }}
+    >
+      <div
+        style={{
+          height: '50px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Cell Divider
+      </div>
+
+      <StyledDivider $size={SIZE.cell} />
+
+      <div
+        style={{
+          height: '80px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Section Divider
+      </div>
+
+      <StyledDivider $size={SIZE.section} />
+
+      <div
+        style={{
+          height: '160px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Module Divider
+      </div>
+
+      <StyledDivider $size={SIZE.module} />
+
+      <div style={{height: '160px'}}></div>
+    </div>
+  );
+}
diff --git a/documentation-site/examples/divider/basic.tsx b/documentation-site/examples/divider/basic.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {StyledDivider, SIZE} from 'baseui/divider';
+
+export default function Example() {
+  return (
+    <div
+      style={{
+        width: '400px',
+        border: '1px solid #E2E2E2',
+        borderRadius: '8px',
+      }}
+    >
+      <div
+        style={{
+          height: '50px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Cell Divider
+      </div>
+
+      <StyledDivider $size={SIZE.cell} />
+
+      <div
+        style={{
+          height: '80px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Section Divider
+      </div>
+
+      <StyledDivider $size={SIZE.section} />
+
+      <div
+        style={{
+          height: '160px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Module Divider
+      </div>
+
+      <StyledDivider $size={SIZE.module} />
+
+      <div style={{height: '160px'}}></div>
+    </div>
+  );
+}
diff --git a/documentation-site/pages/components/divider.mdx b/documentation-site/pages/components/divider.mdx
@@ -0,0 +1,35 @@
+<!--
+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.
+-->
+
+import Example from '../../components/example';
+import Layout from '../../components/layout';
+import Exports from '../../components/exports';
+
+import { StyledDivider } from 'baseui/divider';
+import * as DividerExports from 'baseui/divider';
+import DividerBasic from 'examples/divider/basic.js';
+
+export default Layout;
+
+# Divider
+
+Dividers are visual indicators used to separate sections of content. Divider is available in
+three sizes via the `size` prop:
+
+1. `cell`: 1px thick. Use to divide individual cells in List items.
+2. `section`: 2px thick. Use between groups of List items.
+3. `module`: 8px thick. Use to group larger clusters of related sections.
+
+## Examples
+
+<Example title="Basic" path="divider/basic.js">
+  <DividerBasic />
+</Example>
+
+## API
+
+<Exports component={DividerExports} title="Divider exports" path="baseui/divider" />
diff --git a/documentation-site/routes.js b/documentation-site/routes.js
@@ -361,6 +361,10 @@ const routes = [
             title: 'Block',
             itemId: '/components/block',
           },
+          {
+            title: 'Divider',
+            itemId: '/components/divider',
+          },
           {
             title: 'FlexGrid',
             itemId: '/components/flex-grid',

diff --git a/src/divider/__tests__/divider.scenario.tsx b/src/divider/__tests__/divider.scenario.tsx
@@ -0,0 +1,62 @@
+/*
+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.
+*/
+import * as React from 'react';
+
+import { StyledDivider, SIZE } from '../index';
+
+export function Scenario() {
+  return (
+    <div
+      style={{
+        width: '400px',
+        border: '1px solid #E2E2E2',
+        borderRadius: '8px',
+      }}
+    >
+      <div
+        style={{
+          height: '50px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Cell Divider
+      </div>
+
+      <StyledDivider $size={SIZE.cell} />
+
+      <div
+        style={{
+          height: '80px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Section Divider
+      </div>
+
+      <StyledDivider $size={SIZE.section} />
+
+      <div
+        style={{
+          height: '160px',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+        }}
+      >
+        Module Divider
+      </div>
+
+      <StyledDivider $size={SIZE.module} />
+
+      <div style={{ height: '160px' }}></div>
+    </div>
+  );
+}
diff --git a/src/divider/__tests__/divider.stories.tsx b/src/divider/__tests__/divider.stories.tsx
@@ -0,0 +1,10 @@
+/*
+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.
+*/
+import React from 'react';
+import { Scenario as DividerDivider } from './divider.scenario';
+
+export const Divider = () => <DividerDivider />;
diff --git a/src/divider/constants.js.flow b/src/divider/constants.js.flow
@@ -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/constants.ts b/src/divider/constants.ts
@@ -0,0 +1,11 @@
+/*
+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.
+*/
+export const SIZE = {
+  cell: 'cell',
+  section: 'section',
+  module: 'module',
+} as const;
diff --git a/src/divider/index.js.flow b/src/divider/index.js.flow
@@ -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 <StyledComponent aria-hidden="true" {...props} />;
+    }
+);
diff --git a/src/divider/index.tsx b/src/divider/index.tsx
@@ -0,0 +1,20 @@
+/*
+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.
+*/
+import * as React from 'react';
+import { withWrapper } from '../styles/index';
+
+import { StyledDivider as StyledDividerElement } from './styled-components';
+
+export * from './constants';
+
+export const StyledDivider = withWrapper(
+  StyledDividerElement,
+  (StyledComponent) =>
+    function StyledDivider(props) {
+      return <StyledComponent aria-hidden="true" {...props} />;
+    }
+);
diff --git a/src/divider/styled-components.js.flow b/src/divider/styled-components.js.flow
@@ -0,0 +1,41 @@
+/*
+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 { styled } from '../styles/index.js';
+import { SIZE } from './constants.js';
+import type { DividerProps } from './types.js';
+
+export const StyledDivider = styled<DividerProps>('hr', ({ $theme, $size = SIZE.section }) => {
+  const borderResetStyles = {
+    borderRightWidth: 0,
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+  };
+
+  if ($size === SIZE.cell) {
+    return {
+      ...borderResetStyles,
+      borderTopWidth: '1px',
+      borderTopColor: $theme.colors.borderOpaque,
+      borderTopStyle: 'solid',
+    };
+  }
+  if ($size === SIZE.module) {
+    return {
+      ...borderResetStyles,
+      borderTopWidth: '8px',
+      borderTopColor: $theme.colors.backgroundTertiary,
+      borderTopStyle: 'solid',
+    };
+  }
+  return {
+    ...borderResetStyles,
+    borderTopWidth: '2px',
+    borderTopColor: $theme.colors.borderOpaque,
+    borderTopStyle: 'solid',
+  };
+});