Breakpoints-stories-mdx.3e7c7ca8.iframe.bundle.js

"use strict";(self.webpackChunk_haaretz_a_htz_sg=self.webpackChunk_haaretz_a_htz_sg||[]).push([[1722],{"../../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{NF:()=>withMDXComponents,Zo:()=>MDXProvider,ah:()=>useMDXComponents,pC:()=>MDXContext});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"../s-ds-stories/src/Breakpoints.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__page:()=>__page,default:()=>Breakpoints_stories});__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/index.js");var lib=__webpack_require__("../../../node_modules/.pnpm/@mdx-js+react@2.3.0_react@18.2.0/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("../../../node_modules/.pnpm/@storybook+addon-docs@7.4.6_@types+react-dom@18.2.11_@types+react@18.2.25_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/addon-docs/dist/index.mjs"),jsx_runtime=__webpack_require__("../../../node_modules/.pnpm/next@13.5.4_@babel+core@7.22.10_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react/jsx-runtime.js"),l_theme_shared_dist=__webpack_require__("../../theme/l-theme-shared/dist/index.js"),style9=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs");const classes={table:{borderTopWidth:"izykGz",borderRightWidth:"ikqruN",borderBottomWidth:"ctibpX",borderLeftWidth:"kzDapR",borderTopStyle:"FwRrA",borderRightStyle:"cDIyHz",borderBottomStyle:"hpBjJb",borderLeftStyle:"ycSPk",borderTopColor:"mZPxF",borderRightColor:"fCajuQ",borderBottomColor:"jywRBN",borderLeftColor:"fUryUI",fontFamily:"bnyhBV",marginTop:"EKhXX",tableLayout:"MPjSO",width:"cRUUAa"},head:{borderBottomColor:"fWjQS"},rowHead:{width:"lksDzB"},cell:{borderTopWidth:"izykGz",borderRightWidth:"ikqruN",borderBottomWidth:"ctibpX",borderLeftWidth:"kzDapR",borderTopStyle:"FwRrA",borderRightStyle:"cDIyHz",borderBottomStyle:"hpBjJb",borderLeftStyle:"ycSPk",borderTopColor:"mZPxF",borderRightColor:"fCajuQ",borderBottomColor:"jywRBN",borderLeftColor:"fUryUI",paddingTop:"kMKXDC",paddingRight:"gcnSZS",paddingBottom:"jOeduE",paddingLeft:"hHZVWs",textAlign:"hgpJrQ"},value:{backgroundColor:"fozssY",borderTopLeftRadius:"gQJVfF",borderTopRightRadius:"bnguzQ",borderBottomRightRadius:"fBfCSu",borderBottomLeftRadius:"bzskLL",fontFamily:"bZywAt",paddingTop:"kMKXDC",paddingRight:"cVJMrm",paddingBottom:"jOeduE",paddingLeft:"JxWnH",fontSize:"hmImpX",lineHeight:"bwFuZl"}},widthbpNames=Object.keys(l_theme_shared_dist.widthBps),miscbpNames=Object.keys(l_theme_shared_dist.miscBps);function Bps(_ref){let{isMisc=!1}=_ref;return isMisc?(0,jsx_runtime.jsxs)("table",{dir:"ltr",className:(0,style9.Z)(classes.table),children:[(0,jsx_runtime.jsx)("thead",{children:(0,jsx_runtime.jsxs)("tr",{children:[(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.rowHead,classes.head),children:"Name"}),(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.head),children:"Value"})]})}),(0,jsx_runtime.jsx)("tbody",{children:miscbpNames.map((bp=>(0,jsx_runtime.jsxs)("tr",{children:[(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.rowHead),children:bp}),(0,jsx_runtime.jsx)("td",{className:(0,style9.Z)(classes.cell),children:(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(classes.value),children:l_theme_shared_dist.miscBps[bp]})})]},bp)))})]}):(0,jsx_runtime.jsxs)("table",{dir:"ltr",className:(0,style9.Z)(classes.table),children:[(0,jsx_runtime.jsx)("thead",{children:(0,jsx_runtime.jsxs)("tr",{children:[(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.rowHead,classes.head),children:"Name"}),(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.head),children:"From"}),(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.head),children:"Until"})]})}),(0,jsx_runtime.jsxs)("tbody",{children:[(0,jsx_runtime.jsxs)("tr",{children:[(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.rowHead),children:"default"}),(0,jsx_runtime.jsx)("td",{className:(0,style9.Z)(classes.cell),children:(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(classes.value),children:"-"})}),(0,jsx_runtime.jsx)("td",{className:(0,style9.Z)(classes.cell),children:(0,jsx_runtime.jsxs)("code",{className:(0,style9.Z)(classes.value),children:[l_theme_shared_dist.widthBps[widthbpNames[0]],"px"]})})]}),widthbpNames.map(((bp,i)=>{const nextBp=widthbpNames[i+1],from=`${l_theme_shared_dist.widthBps[bp]}px`,until=l_theme_shared_dist.widthBps[nextBp]?l_theme_shared_dist.widthBps[nextBp]-1+"px":"-";return(0,jsx_runtime.jsxs)("tr",{children:[(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.rowHead),children:bp}),(0,jsx_runtime.jsx)("td",{className:(0,style9.Z)(classes.cell),children:(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(classes.value),children:from})}),(0,jsx_runtime.jsx)("td",{className:(0,style9.Z)(classes.cell),children:(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(classes.value),children:until})})]},bp)}))]})]})}try{Breakpoints.displayName="Breakpoints",Breakpoints.__docgenInfo={description:"",displayName:"Breakpoints",props:{isMisc:{defaultValue:{value:"false"},description:"",name:"isMisc",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../s-ds-stories/src/Breakpoints.tsx#Breakpoints"]={docgenInfo:Breakpoints.__docgenInfo,name:"Breakpoints",path:"../s-ds-stories/src/Breakpoints.tsx#Breakpoints"})}catch(__react_docgen_typescript_loader_error){}function _createMdxContent(props){const _components=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",pre:"pre"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"breakpoints",children:"Breakpoints"}),"\n","\n","\n",(0,jsx_runtime.jsx)(dist.h_,{title:"Tokens/Breakpoints"}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Haaretz's responsive design employs a set of predefined width breakpoints and\nfeature queries. The idiomatic way to create media queries with them is by using\nthe ",(0,jsx_runtime.jsx)(_components.code,{children:"mq"})," function from ",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/l-mq.macro"}),":"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:"import mq from '@haaretz/l-mq.macro';\n\nexport const qualifiedStyles = {\n  ...mq({\n    from: 'm',\n    until: 'xl',\n    misc: 'landscape',\n    value: {\n      // styles\n    },\n  }),\n};\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"width-breakpoints",children:"Width Breakpoints"}),"\n",(0,jsx_runtime.jsx)(Bps,{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"miscellaneous-breakpoints",children:"Miscellaneous Breakpoints"}),"\n",(0,jsx_runtime.jsx)(Bps,{isMisc:!0})]})}const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Tokens/Breakpoints",tags:["stories-mdx"],includeStories:["__page"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const Breakpoints_stories=componentMeta},"../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{function merge(target,source){for(const key in source)"object"==typeof source[key]?target[key]=merge({...target[key]},source[key]):target[key]=source[key];return target}function getValues(obj){const values=[];for(const key in obj){const val=obj[key];"object"==typeof val?values.push(...getValues(val)):values.push(val)}return values}function style9(...styles){return getValues(styles.reduce(merge,{})).join(" ")}__webpack_require__.d(__webpack_exports__,{Z:()=>style9}),style9.create=()=>{throw new Error("style9.create calls should be compiled away")},style9.keyframes=()=>{throw new Error("style9.keyframes calls should be compiled away")}}}]);