light-layout-component/storybook-static/stories-Grid-stories.c1b12963.iframe.bundle.js

easy and useful layout component

"use strict";(self.webpackChunklight_layout_component=self.webpackChunklight_layout_component||[]).push([[419],{"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}__webpack_require__.d(__webpack_exports__,{Z:function(){return _toConsumableArray}})},"./src/stories/Grid.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Example:function(){return Example},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return Grid_stories}});var _templateObject,_templateObject2,_Example$parameters,_Example$parameters2,_Example$parameters2$,objectSpread2=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),toConsumableArray=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),Container=(__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./src/lib/Container/index.tsx")),taggedTemplateLiteral=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),objectWithoutProperties=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["columns","isAutoFill"],Grid=function Grid(_ref){var columns=_ref.columns,isAutoFill=_ref.isAutoFill,props=(0,objectWithoutProperties.Z)(_ref,_excluded);return(0,jsx_runtime.jsx)(Div,(0,objectSpread2.Z)((0,objectSpread2.Z)({columns:isAutoFill?"auto-fill":columns},props),{},{children:props.children}))},GridCss=(0,styled_components_browser_esm.iv)(_templateObject||(_templateObject=(0,taggedTemplateLiteral.Z)(["\n  display: grid;\n  grid-template-columns: repeat(",", 1fr);\n  grid-template-rows: repeat(",", 1fr);\n  gap: ",";\n"])),(function(props){return props.columns}),(function(props){return props.rows}),(function(props){return props.gap})),Div=styled_components_browser_esm.zo.div(_templateObject2||(_templateObject2=(0,taggedTemplateLiteral.Z)(["\n  ","\n"])),GridCss),lib_Grid=Grid;try{Grid.displayName="Grid",Grid.__docgenInfo={description:"",displayName:"Grid",props:{isAutoFill:{defaultValue:null,description:"",name:"isAutoFill",required:!1,type:{name:"boolean"}},rows:{defaultValue:null,description:"",name:"rows",required:!0,type:{name:"string"}},columns:{defaultValue:null,description:"",name:"columns",required:!0,type:{name:"string"}},gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/Grid/index.tsx#Grid"]={docgenInfo:Grid.__docgenInfo,name:"Grid",path:"src/lib/Grid/index.tsx#Grid"})}catch(__react_docgen_typescript_loader_error){}var Grid_stories={title:"Grid",component:lib_Grid,tags:["autodocs"]},GridItem=function GridItem(){return(0,jsx_runtime.jsx)(Container.Z,{minWidth:"10px",maxWidth:"50px",background:"pink",children:"item"})},Example=function Template(props){return(0,jsx_runtime.jsx)(lib_Grid,(0,objectSpread2.Z)((0,objectSpread2.Z)({rows:"2",columns:"3"},props),{},{children:(0,toConsumableArray.Z)(Array(12)).map((function(){return(0,jsx_runtime.jsx)(GridItem,{})}))}))}.bind({});Example.parameters=(0,objectSpread2.Z)((0,objectSpread2.Z)({},Example.parameters),{},{docs:(0,objectSpread2.Z)((0,objectSpread2.Z)({},null===(_Example$parameters=Example.parameters)||void 0===_Example$parameters?void 0:_Example$parameters.docs),{},{source:(0,objectSpread2.Z)({originalSource:'props => <Grid rows={"2"} columns={"3"} {...props}>\n    {[...Array(12)].map(() => <GridItem />)}\n  </Grid>'},null===(_Example$parameters2=Example.parameters)||void 0===_Example$parameters2||null===(_Example$parameters2$=_Example$parameters2.docs)||void 0===_Example$parameters2$?void 0:_Example$parameters2$.source)})});var __namedExportsOrder=["Example"]},"./src/lib/Container/index.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js"),_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectSpread2.js"),_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),styled_components__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["as","mediaTarget","minWidth","maxWidth"],Container=function Container(_ref){var _ref$as=_ref.as,as=void 0===_ref$as?"div":_ref$as,mediaTarget=_ref.mediaTarget,minWidth=_ref.minWidth,maxWidth=_ref.maxWidth,props=(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_1__.Z)(_ref,_excluded),getMediaTargetMinWidth=function getMediaTargetMinWidth(){return mediaTarget?MEDIA_TARGET_WIDTH[mediaTarget].minWidth:minWidth},getMediaTargetMaxWidth=function getMediaTargetMaxWidth(){return mediaTarget?MEDIA_TARGET_WIDTH[mediaTarget].maxWidth:maxWidth};switch(as){case"div":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Div,(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)((0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)({minWidth:getMediaTargetMinWidth(),maxWidth:getMediaTargetMaxWidth()},props),{},{children:props.children}));case"main":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Main,(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)((0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)({minWidth:getMediaTargetMinWidth(),maxWidth:getMediaTargetMaxWidth()},props),{},{children:props.children}));case"header":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Header,(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)((0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)({minWidth:getMediaTargetMinWidth(),maxWidth:getMediaTargetMaxWidth()},props),{},{children:props.children}));case"footer":return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Footer,(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)((0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_2__.Z)({minWidth:getMediaTargetMinWidth(),maxWidth:getMediaTargetMaxWidth()},props),{},{children:props.children}))}},MEDIA_TARGET_WIDTH={mobile:{minWidth:"320px",maxWidth:"480px"},tablet:{minWidth:"768px",maxWidth:"1024px"},desktop:{minWidth:"1050px",maxWidth:"1680px"}},ContainerCss=(0,styled_components__WEBPACK_IMPORTED_MODULE_3__.iv)(_templateObject||(_templateObject=(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.Z)(["\n  min-width: ",";\n  max-width: ",";\n  min-height: ",";\n  max-height: ",";\n  padding: ",";\n  margin: ",";\n  background: ",";\n  border: ",";\n  border-radius: ",";\n  overflow: ",";\n"])),(function(props){return props.minWidth}),(function(props){return props.maxWidth}),(function(props){return props.minHeight}),(function(props){return props.maxHeight}),(function(props){return props.padding}),(function(props){return props.margin}),(function(props){return props.background}),(function(props){return props.border}),(function(props){return props.borderRadius}),(function(props){return props.overflow})),Div=styled_components__WEBPACK_IMPORTED_MODULE_3__.ZP.div(_templateObject2||(_templateObject2=(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.Z)(["\n  ","\n"])),ContainerCss),Main=styled_components__WEBPACK_IMPORTED_MODULE_3__.ZP.main(_templateObject3||(_templateObject3=(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.Z)(["\n  ","\n"])),ContainerCss),Header=styled_components__WEBPACK_IMPORTED_MODULE_3__.ZP.header(_templateObject4||(_templateObject4=(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.Z)(["\n  ","\n"])),ContainerCss),Footer=styled_components__WEBPACK_IMPORTED_MODULE_3__.ZP.footer(_templateObject5||(_templateObject5=(0,_Users_kang_yeongmin_layout_component_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral_js__WEBPACK_IMPORTED_MODULE_4__.Z)(["\n  ","\n"])),ContainerCss);__webpack_exports__.Z=Container;try{Container.displayName="Container",Container.__docgenInfo={description:"",displayName:"Container",props:{as:{defaultValue:{value:"div"},description:"",name:"as",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'}]}},mediaTarget:{defaultValue:null,description:"",name:"mediaTarget",required:!1,type:{name:"enum",value:[{value:'"mobile"'},{value:'"tablet"'},{value:'"desktop"'}]}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:"string"}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:"string"}},minHeight:{defaultValue:null,description:"",name:"minHeight",required:!1,type:{name:"string"}},maxHeight:{defaultValue:null,description:"",name:"maxHeight",required:!1,type:{name:"string"}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"string"}},margin:{defaultValue:null,description:"",name:"margin",required:!1,type:{name:"string"}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:"string"}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:"string"}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:"string"}},overflow:{defaultValue:null,description:"",name:"overflow",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/lib/Container/index.tsx#Container"]={docgenInfo:Container.__docgenInfo,name:"Container",path:"src/lib/Container/index.tsx#Container"})}catch(__react_docgen_typescript_loader_error){}}}]);