Divider component

src/components/Divider/index.scss

@@ -0,0 +1,89 @@
+@import '../../styles/colors.scss';
+@import '../../styles/spacing.scss';
+@import '../../styles/typography.scss';
+@import '../../styles/opacity.scss';
+@import '../../styles/variables.scss';
+
+$baseClass: 'vant-divider';
+
+$padding-base: 4px;
+$padding-md: $padding-base * 4;
+$gray-3: #ebedf0;
+$gray-6: #969799;
+$font-size-md: 14px;
+$border-color: $gray-3;
+$border-width-base: 1px;
+
+// Divider
+$divider-margin: $padding-md 0;
+$divider-text-color: $gray-6;
+$divider-font-size: $font-size-md;
+$divider-line-height: 24px;
+$divider-border-color: $border-color;
+$divider-content-padding: $padding-md;
+$divider-content-left-width: 10%;
+$divider-content-right-width: 10%;
+
+.#{$baseClass} {
+  display: flex;
+  align-items: center;
+  margin: $divider-margin;
+  color: $divider-text-color;
+  font-size: $divider-font-size;
+  line-height: $divider-line-height;
+  border-color: $divider-border-color;
+  border-style: solid;
+  border-width: 0;
+  width: 100%;
+
+  &::before,
+  &::after {
+    display: block;
+    flex: 1;
+    box-sizing: border-box;
+    height: 1px;
+    border-color: inherit;
+    border-style: inherit;
+    border-width: $border-width-base 0 0;
+  }
+
+  &::before {
+    content: '';
+  }
+
+  &__hairline {
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  &__dashed {
+    border-style: dashed;
+  }
+
+  &__content-center,
+  &__content-left,
+  &__content-right {
+    &::before {
+      margin-right: $divider-content-padding;
+    }
+
+    &::after {
+      margin-left: $divider-content-padding;
+      content: '';
+    }
+  }
+
+  &__content-left {
+    &::before {
+      max-width: $divider-content-left-width;
+    }
+  }
+
+  &__content-right {
+    &::after {
+      max-width: $divider-content-right-width;
+    }
+  }
+}

src/components/Divider/index.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Divider from '.';
+import '../../styles/stories.scss';
+
+export default {
+  title: 'Divier',
+  component: Divider
+};
+
+export const BasicUsage = () => (
+  <div className='storybook__container divider'>
+    <Divider />
+  </div>
+);
+
+export const WithText = () => (
+  <div className='storybook__container divider'>
+    <Divider>Text</Divider>
+  </div>
+);
+
+export const contentPosition = () => (
+  <div className='storybook__container divider divider__content-position'>
+    <div>
+      <Divider contentPosition='left'>Text</Divider>
+    </div>
+    <div>
+      <Divider contentPosition='right'>Text</Divider>
+    </div>
+  </div>
+);
+
+export const Dashed = () => (
+  <div className='storybook__container divider'>
+    <Divider dashed>Text</Divider>
+  </div>
+);
+
+export const CustomStyle = () => (
+  <div className='storybook__container divider'>
+    <Divider
+      style={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }}
+    >
+      Text
+    </Divider>
+  </div>
+);

src/components/Divider/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Props } from './types';
+
+import './index.scss';
+import classnames from '../../utils/classNames';
+
+const baseClass = 'vant-divider';
+
+export default function Divider({
+  dashed,
+  hairline = true,
+  contentPosition = 'center',
+  children,
+  style = {}
+}: Props) {
+  const props = {
+    className: classnames(`${baseClass}`, [
+      { dashed },
+      { hairline },
+      {
+        [`content-${contentPosition}`]: !!children
+      }
+    ]),
+    style
+  };
+  return (
+    <div role='separator' {...props}>
+      {children}
+    </div>
+  );
+}

src/components/Divider/types.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+
+export interface Props {
+  dashed?: boolean;
+  hairline?: boolean;
+  contentPosition?: 'left' | 'center' | 'right';
+  children?: string;
+  style?: CSSProperties;
+}

src/index.tsx

@@ -12,6 +12,7 @@ import Slider from './components/Slider';
 import Checkbox from './components/Checkbox';
 import Radio from './components/Radio';
 import Stepper from './components/Stepper';
+import Divider from './components/Divider';
 
 export { default as Button } from './components/Button';
 export { default as Icon } from './components/Icons';
@@ -27,6 +28,7 @@ export { default as Slider } from './components/Slider';
 export { default as Checkbox } from './components/Checkbox';
 export { default as Radio } from './components/Radio';
 export { default as Stepper } from './components/Stepper';
+export { default as Divider } from './components/Divider';
 
 const Vant = {
   Button,
@@ -42,7 +44,8 @@ const Vant = {
   Slider,
   Checkbox,
   Radio,
-  Stepper
+  Stepper,
+  Divider
 };
 
 export default Vant;

src/styles/stories.scss

@@ -62,6 +62,15 @@ body {
       height: 200px;
     }
   }
+
+  &.divider {
+    &.divider__content-position {
+      flex-direction: column;
+      >div {
+        width: 100%;
+      }
+    }
+  }
 }
 .slider-container {
   display: flex;