Merge pull request #440 from kufu/fix-base

 Extend Base component

src/components/Base/Base.stories.tsx

@@ -8,31 +8,35 @@ storiesOf('Base', module).add('all', () => (
   <List>
     <li>
       <Base radius="s">
-        <Txt>radius s</Txt>
+        <Txt>
+          If radius props is specified as <Bold>s</Bold>, border-radius becomes <Bold>6px</Bold>.
+        </Txt>
       </Base>
     </li>
     <li>
       <Base radius="m">
-        <Txt>radius m</Txt>
+        <Txt>
+          If radius props is specified as <Bold>m</Bold>, border-radius becomes <Bold>8px</Bold>.
+        </Txt>
       </Base>
     </li>
-    <li>
-      <CustomBase radius="m">
-        <Txt>custom base</Txt>
-      </CustomBase>
-    </li>
   </List>
 ))
 
 const List = styled.ul`
-  padding: 8px 24px;
+  margin: 0;
+  padding: 24px;
+  background-color: #eee;
   list-style: none;
-`
 
+  & > li:not(:first-child) {
+    margin-top: 24px;
+  }
+`
 const Txt = styled.p`
-  padding: 8px;
+  margin: 0;
+  padding: 24px;
 `
-
-const CustomBase = styled(Base)`
-  border: solid 1px;
+const Bold = styled.span`
+  font-weight: bold;
 `

src/components/Base/Base.tsx

@@ -1,39 +1,26 @@
-import * as React from 'react'
+import React, { ReactNode, forwardRef } from 'react'
 import styled, { css } from 'styled-components'
 
-type Radius = 's' | 'm'
-
-interface Props {
-  radius?: Radius
-  children?: React.ReactNode
+type Props = {
+  children: ReactNode
+  radius?: 's' | 'm'
   className?: string
 }
 
-const BaseComponent: React.FC<Props> = ({ radius = 'm', children, className = '' }) => {
+export const Base = forwardRef<HTMLDivElement, Props>(({ radius = 'm', ...props }, ref) => {
   const radiusMap = {
     s: '6px',
     m: '8px',
   }
+  return <Wrapper radius={radiusMap[radius]} ref={ref} {...props} />
+})
 
-  return (
-    <Wrapper radius={radiusMap[radius]} className={className}>
-      {children}
-    </Wrapper>
-  )
-}
-
-interface WrapperProps {
-  radius: string
-}
-
-const Wrapper = styled.div`
-  ${({ radius }: WrapperProps) => {
+const Wrapper = styled.div<{ radius: string }>`
+  ${({ radius }) => {
     return css`
       border-radius: ${radius};
       box-shadow: rgba(51, 51, 51, 0.3) 1px 1px 4px 0;
-      overflow: hidden;
+      background-color: #fff;
     `
   }}
 `
-
-export const Base = BaseComponent

src/components/Base/README.md

@@ -0,0 +1,13 @@
+# Base
+
+```tsx
+import { Base } from 'smarthr-ui'
+
+<Base radius="m">text</Base>
+```
+
+## props
+
+| Name   | Required | Type                           | DefaultValue | Description         |
+| ------ | -------- | ------------------------------ | ------------ | ------------------- |
+| radius | -        | **string** <br> 's' &#124; 'm' | 'm'          | border-radius size. |