"use strict";(self.webpackChunk_pfct_purple=self.webpackChunk_pfct_purple||[]).push([[4528],{"./src/components/Button/SingleButton/index.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{MainButton:function(){return MainButton},SubButton:function(){return SubButton},__namedExportsOrder:function(){return __namedExportsOrder}});__webpack_require__("./node_modules/react/index.js");var ___WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/Button/SingleButton/index.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const meta={title:"Component/Button/SingleButton",component:___WEBPACK_IMPORTED_MODULE_1__.S,tags:["autodocs"],parameters:{docs:{description:{component:'updated 230523\n\n<a href="https://www.notion.so/fdb21779528c4474ba7e5e500388bf3e?pvs=4" target="_blank">노션페이지</a>\n<br/>\n**Pattern**\n\n정보 영역에서 선택사항이 한 가지일 경우 사용합니다.\n\n**Hierarchy**\n\n컬러 스타일에 따라 두 가지의 스타일로 나누어서 사용합니다. 이 때 반드시 버튼의 중요도에 따른 위계를 구분하여 사용해야 합니다.'}}}};__webpack_exports__.default=meta;const MainButton={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(___WEBPACK_IMPORTED_MODULE_1__.S,{...props}),args:{colorType:"gray",purpose:"main",children:"버튼"},argTypes:{onClick:{action:"clicked"}},parameters:{docs:{description:{story:"흰 텍스트가 잘 보이도록 버튼 영역에 색을 채운 버튼입니다.<br/>배경에 강한 컬러를 사용하기 때문에 한 화면에 최대 1개만 사용해야 합니다."}}}},SubButton={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(___WEBPACK_IMPORTED_MODULE_1__.S,{...props,children:"버튼"})}),args:{colorType:"gray",purpose:"sub",children:"버튼"},argTypes:{onClick:{action:"clicked"}},parameters:{docs:{description:{story:"텍스트와 버튼 영역 모두 색을 사용하고, 텍스트가 잘 보이도록 옅은 배경색을 사용합니다.<br/>한 화면 내에서 여러 개를 사용할 수 있습니다."}}}};MainButton.parameters={...MainButton.parameters,docs:{...MainButton.parameters?.docs,source:{originalSource:"{\n  render: props => <SingleButton {...props} />,\n  args: {\n    colorType: 'gray',\n    purpose: 'main',\n    children: '버튼'\n  },\n  argTypes: {\n    onClick: {\n      action: 'clicked'\n    }\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '흰 텍스트가 잘 보이도록 버튼 영역에 색을 채운 버튼입니다.<br/>배경에 강한 컬러를 사용하기 때문에 한 화면에 최대 1개만 사용해야 합니다.'\n      }\n    }\n  }\n}",...MainButton.parameters?.docs?.source}}},SubButton.parameters={...SubButton.parameters,docs:{...SubButton.parameters?.docs,source:{originalSource:"{\n  render: props => <>\n            <SingleButton {...props}>버튼</SingleButton>\n        </>,\n  args: {\n    colorType: 'gray',\n    purpose: 'sub',\n    children: '버튼'\n  },\n  argTypes: {\n    onClick: {\n      action: 'clicked'\n    }\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '텍스트와 버튼 영역 모두 색을 사용하고, 텍스트가 잘 보이도록 옅은 배경색을 사용합니다.<br/>한 화면 내에서 여러 개를 사용할 수 있습니다.'\n      }\n    }\n  }\n}",...SubButton.parameters?.docs?.source}}};const __namedExportsOrder=["MainButton","SubButton"]}}]);