diff --git a/core-Bases-Breakpoints-__storybook__-index-stories.6a74cf03.iframe.bundle.js b/core-Bases-Breakpoints-__storybook__-index-stories.6a74cf03.iframe.bundle.js new file mode 100644 index 000000000..57607cc1f --- /dev/null +++ b/core-Bases-Breakpoints-__storybook__-index-stories.6a74cf03.iframe.bundle.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_czi_sds_monorepo=self.webpackChunk_czi_sds_monorepo||[]).push([[7344],{"./packages/components/src/core/Bases/Breakpoints/__storybook__/index.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>index_stories});var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),storybookBadges=__webpack_require__("./packages/components/src/common/storybook/storybookBadges.ts");const StyledBreakpointsWrapper=(0,__webpack_require__("./node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js").A)("div",{target:"ed93reg0"})("max-width:100%;");var Table=__webpack_require__("./packages/components/src/core/Table/index.tsx"),TableHeader=__webpack_require__("./packages/components/src/core/TableHeader/index.tsx"),CellHeader=__webpack_require__("./packages/components/src/core/CellHeader/index.tsx"),TableRow=__webpack_require__("./packages/components/src/core/TableRow/index.tsx"),CellComponent=__webpack_require__("./packages/components/src/core/CellComponent/index.tsx"),CellBasic=__webpack_require__("./packages/components/src/core/CellBasic/index.tsx"),utils=__webpack_require__("./packages/components/src/core/Bases/utils.ts"),style=__webpack_require__("./packages/components/src/core/Bases/style.ts");const BREAKPOINTS_USAGE={lg:"Large breakpoint can be used for all large displays ( > 1024px).",md:"Medium breakpoint will work for small laptops and large-screened tablets (512px - 1023px).",sm:"Small breakpoint will work for mobile devices and small-screened tablets (0px - 511px)."};var useTheme=__webpack_require__("./node_modules/@mui/material/styles/useTheme.js"),styles=__webpack_require__("./packages/components/src/core/styles/index.ts");const Template=()=>{const theme=(0,useTheme.A)(),breakpoints=(0,styles.BQ)({theme})?.values;if(breakpoints){const TableBodyContent=Object.entries(breakpoints).sort(((a,b)=>b[1]-a[1])).map((([key,value])=>((size,name)=>{const sassVariable="$sds-breakpoint-"+name,cssVariable="--sds-breakpoint-"+name;return(0,jsx_runtime.jsxs)(TableRow.A,{hover:!1,children:[(0,jsx_runtime.jsx)(CellComponent.A,{verticalAlign:"center",horizontalAlign:"left",children:(0,jsx_runtime.jsx)("strong",{children:name})}),(0,jsx_runtime.jsxs)(CellComponent.A,{verticalAlign:"center",children:[(0,jsx_runtime.jsx)(style.k,{onClick:()=>(0,utils.lW)(sassVariable),type:"sass",children:sassVariable}),(0,jsx_runtime.jsx)(style.k,{onClick:()=>(0,utils.lW)(cssVariable),type:"css",children:cssVariable})]}),(0,jsx_runtime.jsx)(CellComponent.A,{verticalAlign:"center",children:`${size}px`}),(0,jsx_runtime.jsx)(CellBasic.A,{verticalAlign:"center",primaryText:BREAKPOINTS_USAGE[name],shouldShowTooltipOnHover:!1})]},name)})(value,key)));return(0,jsx_runtime.jsxs)(Table.A,{children:[(0,jsx_runtime.jsxs)(TableHeader.A,{children:[(0,jsx_runtime.jsx)(CellHeader.A,{hideSortIcon:!0,style:{width:30},children:"Breakpoint"}),(0,jsx_runtime.jsx)(CellHeader.A,{hideSortIcon:!0,style:{width:50},children:"Variables"}),(0,jsx_runtime.jsx)(CellHeader.A,{hideSortIcon:!0,style:{width:30},children:"Value"}),(0,jsx_runtime.jsx)(CellHeader.A,{hideSortIcon:!0,children:"Usage"})]}),(0,jsx_runtime.jsx)("tbody",{children:TableBodyContent})]})}};Template.__docgenInfo={description:"",methods:[],displayName:"Template"};const index_stories={parameters:{badges:[storybookBadges.y.STABLE]},title:"Bases/Breakpoints"},Default={render:()=>(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:(0,jsx_runtime.jsx)(StyledBreakpointsWrapper,{children:(0,jsx_runtime.jsx)(Template,{})})})},__namedExportsOrder=["Default"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n render: () => <>\n \n