storybook-react-geekshubs/dist/layout/Grid.stories.js

Creation and curation of hight quality react components.

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.responsiveByAutoFit=exports.responsiveByMediaQuery=exports.setGap=exports.setTemplate=exports.setColumns=exports.defaultGrid=exports.default=void 0;var _styledComponents=_interopRequireWildcard(require("styled-components"));var _react=_interopRequireDefault(require("react"));var _GridContainer=_interopRequireDefault(require("./GridContainer"));require("styled-components/macro");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(){if(typeof WeakMap!=="function")return null;var cache=new WeakMap;_getRequireWildcardCache=function _getRequireWildcardCache(){return cache};return cache}function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj}var cache=_getRequireWildcardCache();if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};if(obj!=null){var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}var _StyledSpan=_styledComponents.default.span.withConfig({displayName:"Gridstories___StyledSpan",componentId:"fpplsc-0"})(["background-color:BlueViolet;border:2px black solid;color:white;padding:0.5em;"]);var GridItem=function GridItem(p){return _react.default.createElement(_StyledSpan,p)};var _default={title:"Layout|Grid"};exports.default=_default;var generateArray=function generateArray(length,fn){return Array.from({length:length},fn)};var defaultGrid=function defaultGrid(){return _react.default.createElement(_GridContainer.default,null,generateArray(50,function(_,i){return _react.default.createElement(GridItem,{key:i},i)}))};exports.defaultGrid=defaultGrid;var setColumns=function setColumns(){return _react.default.createElement(_GridContainer.default,{columns:"10"},generateArray(50,function(_,i){return _react.default.createElement(GridItem,{key:i},i)}))};exports.setColumns=setColumns;var _StyledGridContainer=(0,_styledComponents.default)(_GridContainer.default).withConfig({displayName:"Gridstories___StyledGridContainer",componentId:"fpplsc-1"})(["background:grey;"]);var setTemplate=function setTemplate(){return _react.default.createElement(_StyledGridContainer,{template:"1fr / 1fr 200px 2fr"},generateArray(5,function(_,i){return _react.default.createElement(GridItem,{key:i},i)}),_react.default.createElement("a",{target:"_blank",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template"},"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template"))};exports.setTemplate=setTemplate;var setGap=function setGap(){return _react.default.createElement(_GridContainer.default,{gap:"10px 40px",columns:"4"},generateArray(16,function(_,i){return _react.default.createElement(GridItem,{key:i},i)}))};exports.setGap=setGap;var _StyledGridContainer2=(0,_styledComponents.default)(_GridContainer.default).withConfig({displayName:"Gridstories___StyledGridContainer2",componentId:"fpplsc-2"})(["@media (max-width:800px){grid-template-columns:repeat(4,1fr);}@media (max-width:600px){grid-template-columns:repeat(3,1fr);}@media (max-width:350px){grid-template-columns:repeat(1,1fr);}"]);var responsiveByMediaQuery=function responsiveByMediaQuery(){return _react.default.createElement(_StyledGridContainer2,{columns:"5"},generateArray(20,function(_,i){return _react.default.createElement(GridItem,{key:i},i)}))};exports.responsiveByMediaQuery=responsiveByMediaQuery;var responsiveByAutoFit=function responsiveByAutoFit(){return _react.default.createElement(_GridContainer.default,{template:"1fr / repeat(auto-fit, minmax(150px, 1fr))"},generateArray(20,function(_,i){return _react.default.createElement(GridItem,{key:i},i)}))};exports.responsiveByAutoFit=responsiveByAutoFit;