Merge pull request #19 from stoplightio/SL-148/break-component

SL-148/break-component

README.md

@@ -29,12 +29,13 @@ TODO
   - [Extending a styled component](./docs/components.md#extending-a-component)
   - Component List
     - Box
+    - Break
+    - Button
     - Flex
-    - Text
     - Heading
     - List
-    - Button
     - Portal
+    - Text
     - Table
 
 ## Helpful Links

src/Box.tsx

@@ -3,6 +3,7 @@ import {
   borderColor,
   borderRadius,
   borders,
+  borderStyle,
   bottom,
   boxShadow,
   css,
@@ -29,6 +30,7 @@ import {
   zIndex,
 } from './utils';
 
+import { BorderStyleProperty } from 'csstype';
 import { BorderRadius, BorderWidth, BoxDimension, BoxShadow, FontSize, FontWeight, FullSpace } from './types';
 
 export interface IBoxProps {
@@ -70,6 +72,7 @@ export interface IBoxProps {
   borderRight?: BorderWidth;
   borderBottom?: BorderWidth;
   borderColor?: string;
+  borderStyle?: BorderStyleProperty;
   radius?: BorderRadius | string;
 
   cursor?:
@@ -140,6 +143,7 @@ export interface IBoxProps {
 export const Box = styled<IBoxProps, 'div'>('div')(
   borderRadius,
   borderColor,
+  borderStyle,
   bgColor,
   borders,
   bottom,

src/Break.tsx

@@ -0,0 +1,22 @@
+import { style } from 'styled-system';
+import { Box, IBoxProps } from './Box';
+import { getBorder, styled } from './utils';
+
+export const thickness = style({
+  prop: 'thickness',
+  cssProperty: 'borderTop',
+  transformValue: getBorder,
+});
+
+export interface IBreakProps extends IBoxProps {
+  thickness?: number;
+}
+
+export const Break = styled<IBreakProps, 'hr'>(Box as any)(thickness);
+
+Break.defaultProps = {
+  as: 'hr',
+  thickness: 1,
+  m: 'none',
+  borderColor: 'break.border',
+};

src/__tests__/Break.spec.tsx

@@ -0,0 +1,14 @@
+/**
+ * @jest-environment jsdom
+ */
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+import * as React from 'react';
+import { Break } from '../';
+
+describe('Break', () => {
+  // just a smoke test
+  it('does not require any props', () => {
+    expect(() => shallow(<Break />)).not.toThrow();
+  });
+});

src/index.tsx

@@ -4,6 +4,7 @@
  */
 
 export * from './Box';
+export * from './Break';
 export * from './Button';
 export * from './Flex';
 export * from './Heading';

src/utils/rules.ts

@@ -116,7 +116,7 @@ export const zIndex = style({
 });
 
 // @ts-ignore FIXME
-const getBorder = n => (num(n) && n > 0 ? n + 'px solid' : n);
+export const getBorder = n => (num(n) && n > 0 ? n + 'px solid' : n);
 
 export const border = style({
   prop: 'border',
@@ -152,6 +152,10 @@ export const borderColor = styleColor({
   prop: 'borderColor',
 });
 
+export const borderStyle = style({
+  prop: 'borderStyle',
+});
+
 export const borders = compose(
   border,
   borderTop,

stories/Break.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { NumberOptions, withKnobs } from '@storybook/addon-knobs';
+import { number } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+import { omitBy } from 'lodash';
+
+import { Break } from '../src/Break';
+
+export const breakKnobs = (tabName = 'Break'): any => {
+  return omitBy(
+    {
+      thickness: number('thickness', 10, { min: 0, max: Infinity } as NumberOptions, tabName),
+    },
+    val => !val
+  );
+};
+
+storiesOf('Break', module)
+  .addDecorator(withKnobs)
+  .add('with defaults', () => <Break {...breakKnobs()} />);

stories/index.ts

@@ -1,4 +1,5 @@
 import './Box';
+import './Break';
 import './Button';
 import './Checkbox';
 import './Flex';