v0.1.6

Author: jwoo0122

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

package.json

@@ -4,7 +4,9 @@ import { withKnobs, select, color, number } from '@storybook/addon-knobs'
 import styled from 'styled-components'
 
 /* Internal dependencies */
-import Pallette from '../../styling/Palette'
+import { Text } from '../Text'
+import { ThemeProvider, LightTheme } from '../../styling/Theme'
+import Palette from '../../styling/Palette'
 import icons, { IconName } from './generated'
 import Icon from './Icon'
 
@@ -38,10 +40,10 @@ const Name = styled.p`
 
 export const AllIcons = () => {
   const size = select('size', IconSize, IconSize.Normal)
-  const selectedColor = color('color', Pallette.grey700)
+  const selectedColor = color('color', Palette.grey700)
 
   return (
-    <>
+    <ThemeProvider theme={LightTheme}>
       { iconList.map((iconName) => (
         <IconInfo key={iconName}>
           <Icon
@@ -52,14 +54,14 @@ export const AllIcons = () => {
           <Name>{ iconName }</Name>
         </IconInfo>
       )) }
-    </>
+    </ThemeProvider>
   )
 }
 
 export const Primary = () => (
   <Icon
     name={select('name', iconList, 'zoyi') as IconName}
-    color={color('color', Pallette.grey700)}
+    color={color('color', Palette.grey700)}
     size={select('size', IconSize, IconSize.Normal)}
     marginTop={number('marginTop', 0)}
     marginRight={number('marginRight', 0)}
@@ -69,16 +71,19 @@ export const Primary = () => (
 )
 
 export const WithText = () => (
-  <h1>
+  <Text
+    style={{
+      color: color('color', Palette.grey700),
+    }}
+  >
     <Icon
       name={select('name', iconList, 'zoyi') as IconName}
-      color={color('color', Pallette.grey700)}
       size={select('size', IconSize, IconSize.Normal)}
       marginTop={number('marginTop', 0)}
       marginRight={number('marginRight', 0)}
       marginBottom={number('marginBottom', 0)}
       marginLeft={number('marginLeft', 0)}
     />
     Hello World!
-  </h1>
+  </Text>
 )

src/components/Icon/Icon.stories.tsx

@@ -14,7 +14,7 @@ function getMargin({
 }
 
 const Icon = styled.svg<IconStyledProps>`
-  fill: ${props => props.color || props.theme?.colors?.iconBase};
+  color: ${props => props.color || 'inherit'};
   margin: ${getMargin};
 `
 

src/components/Icon/Icon.styled.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function SvgCloseWin(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="#A7A7AA"
+        fillRule="evenodd"
+        d="M16.5 6.793l.707.707-4.5 4.5 4.5 4.5-.707.707-4.5-4.5-4.5 4.5-.707-.707 4.5-4.5-4.5-4.5.707-.707 4.5 4.5 4.5-4.5z"
+      />
+    </svg>
+  )
+}
+
+export default SvgCloseWin

src/components/Icon/assets/close-win.svg

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function SvgEnlargeWin(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="#A7A7AA"
+        fillRule="evenodd"
+        d="M17 7v10H7V7h10zm-1 1H8v8h8V8z"
+      />
+    </svg>
+  )
+}
+
+export default SvgEnlargeWin

src/components/Icon/assets/enlarge-win.svg

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function SvgMinimizeWin(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path fill="#A7A7AA" fillRule="evenodd" d="M7 12h10v1H7z" />
+    </svg>
+  )
+}
+
+export default SvgMinimizeWin

src/components/Icon/assets/minimize-win.svg

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function SvgMoreWin(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M6 12h2v2H6zm10 0h2v2h-2zm-5 0h2v2h-2z"
+        fill="#A7A7AA"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgMoreWin

src/components/Icon/assets/more-win.svg

@@ -90,6 +90,7 @@ import ChevronUpDouble from './ChevronUpDouble'
 import ChevronUp from './ChevronUp'
 import Clip from './Clip'
 import Clock from './Clock'
+import CloseWin from './CloseWin'
 import CloudDownload from './CloudDownload'
 import CloudUpload from './CloudUpload'
 import Code from './Code'
@@ -109,6 +110,7 @@ import Edit from './Edit'
 import EmailUnread from './EmailUnread'
 import EmailUnsubscribed from './EmailUnsubscribed'
 import Email from './Email'
+import EnlargeWin from './EnlargeWin'
 import ErrorFilled from './ErrorFilled'
 import ErrorTriangleFilled from './ErrorTriangleFilled'
 import Error from './Error'
@@ -189,11 +191,13 @@ import MarkerPen from './MarkerPen'
 import Me from './Me'
 import Megaphone from './Megaphone'
 import Menu from './Menu'
+import MinimizeWin from './MinimizeWin'
 import MinusCircleFilled from './MinusCircleFilled'
 import MinusCircle from './MinusCircle'
 import Mobile from './Mobile'
 import MoonFilled from './MoonFilled'
 import MoreVertical from './MoreVertical'
+import MoreWin from './MoreWin'
 import More from './More'
 import Mouse from './Mouse'
 import Music from './Music'
@@ -412,6 +416,7 @@ const icons = {
   'chevron-up': ChevronUp,
   'clip': Clip,
   'clock': Clock,
+  'close-win': CloseWin,
   'cloud-download': CloudDownload,
   'cloud-upload': CloudUpload,
   'code': Code,
@@ -431,6 +436,7 @@ const icons = {
   'email-unread': EmailUnread,
   'email-unsubscribed': EmailUnsubscribed,
   'email': Email,
+  'enlarge-win': EnlargeWin,
   'error-filled': ErrorFilled,
   'error-triangle-filled': ErrorTriangleFilled,
   'error': Error,
@@ -511,11 +517,13 @@ const icons = {
   'me': Me,
   'megaphone': Megaphone,
   'menu': Menu,
+  'minimize-win': MinimizeWin,
   'minus-circle-filled': MinusCircleFilled,
   'minus-circle': MinusCircle,
   'mobile': Mobile,
   'moon-filled': MoonFilled,
   'more-vertical': MoreVertical,
+  'more-win': MoreWin,
   'more': More,
   'mouse': Mouse,
   'music': Music,

src/components/Icon/generated/CloseWin.tsx

@@ -12,25 +12,31 @@ export default {
   decorators: [withKnobs],
 }
 
-export const Primary = () => (<Text content={text('content', 'hello')} />)
+export const Primary = () => (<Text>{ text('content', 'hello') }</Text>)
 
 export const WithStyle = () => (
   <Text
-    content={text('content', 'hello')}
     style={object('style', { color: 'green' })}
-  />
+  >
+    Text
+  </Text>
 )
 
 export const AlternativeTag = () => (
   <Text
-    content={text('content', 'bye')}
     as={select('as', ['h1', 'h2', 'button'], 'button') as React.ElementType}
-  />
+  >
+    { text('content', 'bye') }
+  </Text>
 )
 
 export const WithTheme = () => (
   <ThemeProvider theme={DarkTheme}>
-    <Text content={text('content', 'hiiii')} />
+    <div style={{ backgroundColor: 'black' }}>
+      <Text>
+        { text('content', 'hiiii') }
+      </Text>
+    </div>
   </ThemeProvider>
 )
 
@@ -46,7 +52,9 @@ export const WithCustomTheme = () => {
 
   return (
     <ThemeProvider theme={customTheme}>
-      <Text content={text('content', 'hello, world')} />
+      <Text>
+        { text('content', 'hello, world') }
+      </Text>
     </ThemeProvider>
   )
 }

src/components/Icon/generated/EnlargeWin.tsx

@@ -3,25 +3,62 @@ import React from 'react'
 import { render } from '@testing-library/react'
 
 /* Internal dependencies */
-import Text from './Text'
+import Typography from '../../styling/Typography'
+import Text, { TEXT_TEST_ID } from './Text'
 import TextProps from './Text.types'
 
-describe('Text 컴포넌트 테스트 >', () => {
+describe('Text test >', () => {
   let props: TextProps
 
   beforeEach(() => {
     props = {
-      content: 'hello, world',
+      children: 'hello, world',
     }
   })
 
-  const renderComponent = () => render(<Text {...props} />)
+  const renderComponent = (optionProps?: TextProps) => render(<Text {...props} {...optionProps}/>)
 
-  it('props 가 제공되지 않을 경우 기본 style 을 가지고 있다', () => {
+  it('Text have default style', () => {
     const { getByTestId } = renderComponent()
 
-    const testComponent = getByTestId('text')
+    const renderedText = getByTestId(TEXT_TEST_ID)
 
-    expect(testComponent).toHaveStyle('font-size: 15px')
+    expect(renderedText).toHaveStyle('font-size: 15px;')
+    expect(renderedText).toHaveStyle('font-weight: normal;')
+    expect(renderedText).toHaveStyle('font-style: normal;')
+    expect(renderedText).toHaveStyle('color: black;')
+  })
+
+  it('Text recieves bold style', () => {
+    const { getByTestId } = renderComponent({ bold: true })
+
+    const renderedText = getByTestId(TEXT_TEST_ID)
+
+    expect(renderedText).toHaveStyle('font-weight: bold;')
+  })
+
+  it('Text recieves bold style', () => {
+    const { getByTestId } = renderComponent({ italic: true })
+
+    const renderedText = getByTestId(TEXT_TEST_ID)
+
+    expect(renderedText).toHaveStyle('font-style: italic;')
+  })
+
+  it('Text recieves style object', () => {
+    const { getByTestId } = renderComponent({ style: { color: 'skyblue' } })
+
+    const renderedText = getByTestId(TEXT_TEST_ID)
+
+    expect(renderedText).toHaveStyle('color: skyblue;')
+  })
+
+  it('Text recieves typo from styled component css', () => {
+    const { getByTestId } = renderComponent({ typo: Typography.Size24 })
+
+    const renderedText = getByTestId(TEXT_TEST_ID)
+
+    expect(renderedText).toHaveStyle('font-size: 24px;')
+    expect(renderedText).toHaveStyle('line-height: 32px;')
   })
 })

src/components/Icon/generated/MinimizeWin.tsx

@@ -6,15 +6,17 @@ import Typography from '../../styling/Typography'
 import TextProps from './Text.types'
 import TextView from './Text.styled'
 
+export const TEXT_TEST_ID = 'ch-design-system-text'
+
 function Text({
   as,
-  testId = 'text',
-  content,
+  testId = TEXT_TEST_ID,
   bold = false,
   italic = false,
   typo = Typography.Size15,
   style,
   className,
+  children,
 }: TextProps) {
   return (
     <TextView
@@ -26,7 +28,7 @@ function Text({
       typo={typo}
       data-testid={testId}
     >
-      { content }
+      { children }
     </TextView>
   )
 }

src/components/Icon/generated/MoreWin.tsx

@@ -2,9 +2,9 @@
 import { css } from 'styled-components'
 
 /* Internal dependencies */
-import { ContentComponentProps } from '../../types/ComponentProps'
+import { ChildrenComponentProps } from '../../types/ComponentProps'
 
-export default interface TextProps extends ContentComponentProps<string> {
+export default interface TextProps extends ChildrenComponentProps {
   bold?: boolean
   italic?: boolean
   typo?: ReturnType<typeof css>

src/components/Icon/generated/index.tsx

@@ -7,8 +7,10 @@ export * from './components/Text'
 /* Layout */
 export * from './layout/GNB'
 export * from './layout/Navigation'
+export * from './layout/GlobalHeader'
 
 /* Styling */
 export { default as Typography } from './styling/Typography'
 export * from './styling/Colors'
 export * from './styling/Theme'
+export { default as Palette } from './styling/Palette'