HtzPicture-stories.7b4253c5.iframe.bundle.js

"use strict";(self.webpackChunk_haaretz_a_htz_sg=self.webpackChunk_haaretz_a_htz_sg||[]).push([[5051],{"../../../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)}},"../../ds-atoms/s-htz-picture/src/HtzPicture.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Overview:()=>Overview,default:()=>HtzPicture_stories});var defineProperty=__webpack_require__("../../../node_modules/.pnpm/@babel+runtime@7.22.10/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),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"),style9=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs"),src_HtzPicture=__webpack_require__("../../ds-atoms/s-htz-picture/src/HtzPicture.tsx"),lib=(__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"),__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");function _createMdxContent(props){const _components=Object.assign({h1:"h1",h2:"h2",p:"p",strong:"strong",code:"code",pre:"pre",h3:"h3"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(_components.h1,{id:"htzpicture",children:"HtzPicture"}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n","\n","\n","\n",(0,jsx_runtime.jsx)(_components.h2,{id:"installation",children:"Installation"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsxs)(_components.strong,{children:["Make sure the package you use ",(0,jsx_runtime.jsx)(_components.code,{children:"HtzPicture"})," in has ",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/s-htz-picture"}),"\nlisted in its ",(0,jsx_runtime.jsx)(_components.code,{children:"package.json"}),"'s ",(0,jsx_runtime.jsx)(_components.code,{children:"dependencies"})," field:"]})}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:'// package.json\n{\n  // ...\n  "dependencies": {\n    "@haaretz/s-htz-picture": "workspace:*"\n    // ...\n  }\n}\n'})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Because internal monorepo packages are wired up using TypeScript's path aliases\nfeature in dev mode, importing ",(0,jsx_runtime.jsx)(_components.code,{children:"HtzPicture"})," without listing it as a dependency\nwill work in dev mode, but will fail in production. There should be a\n",(0,jsx_runtime.jsx)(_components.code,{children:"import/no-unresolved"})," eslint error when trying to import it when it is not\nlisted as a dependency."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"You can then import it like this:"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:"import HtzPicture from '@haaretz/s-htz-picture';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["A wrapper around the HTML ",(0,jsx_runtime.jsx)(_components.code,{children:"<picture>"})," element which can be used of art-direction\nof images based on media conditions (i.e., media queries). The most common use\ncase is displaying an image in different aspect-ratios at different breakpoints."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"It additionally allows us to easily opt-in to optimizations such as priority\npreloading (the correct source for the media query the screen is at) and lazy\nloading."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:[(0,jsx_runtime.jsx)(_components.code,{children:"HtzPicture"})," takes server data and an array of objects describing the properties\nof the fallback image (first item of the array), and the ",(0,jsx_runtime.jsx)(_components.code,{children:"<source>"})," elements to\nrender."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{withToolbar:!0,children:(0,jsx_runtime.jsx)(dist.oG,{id:"atoms-htzpicture--overview"})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"props",children:"Props"}),"\n",(0,jsx_runtime.jsx)(dist.$4,{story:"^"})]})}const HtzPicture_doc=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)};var _Overview$parameters,_Overview$parameters2,HtzPicture_mock=__webpack_require__("../../ds-atoms/s-htz-picture/src/HtzPicture.mock.ts");function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,defineProperty.Z)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const c={base:{display:"gSBWlu",flexDirection:"iMkoWi",maxWidth:"eZmTZZ"},text:{paddingTop:"gBVNXm",paddingBottom:"GenHa"},code:{fontFamily:"bZywAt"},picture:{width:"cDoNfi","@media all and (min-width:37.5em)":{width:"hMVBgl"},"@media all and (min-width:64em)":{width:"hWpLws"}}},Wrapper=function(args){return(0,jsx_runtime.jsxs)("div",{className:(0,style9.Z)(c.base),children:[(0,jsx_runtime.jsxs)("p",{className:(0,style9.Z)(c.text),children:["An image presented at differnt aspect ratios, on different breakpoints:",(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("strong",{children:"defualt:"})," ",(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(c.code),children:" headline"}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("strong",{children:"s & m"})," ",(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(c.code),children:"square"}),(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("strong",{children:"l, xl & xxl"})," ",(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(c.code),children:"vertical"}),(0,jsx_runtime.jsx)("br",{})]}),(0,jsx_runtime.jsx)(src_HtzPicture.Z,_objectSpread(_objectSpread({},args),{},{styleExtend:[c.picture]}))]})},HtzPicture_stories={component:src_HtzPicture.Z,title:"Atoms/HtzPicture",args:{inlineStyle:{},styleExtend:[],sources:HtzPicture_mock._,imgData:HtzPicture_mock.p.files[0],alt:HtzPicture_mock.p.alt,contentId:HtzPicture_mock.p.contentId,credit:null===HtzPicture_mock.p||void 0===HtzPicture_mock.p?void 0:HtzPicture_mock.p.credit},argTypes:{styleExtend:{control:!1}},parameters:{docs:{page:HtzPicture_doc}}},Overview=args=>(0,jsx_runtime.jsx)(Wrapper,_objectSpread({},args));Overview.parameters=_objectSpread(_objectSpread({},Overview.parameters),{},{docs:_objectSpread(_objectSpread({},null===(_Overview$parameters=Overview.parameters)||void 0===_Overview$parameters?void 0:_Overview$parameters.docs),{},{source:_objectSpread({originalSource:"args => <Wrapper {...args} />"},null===(_Overview$parameters2=Overview.parameters)||void 0===_Overview$parameters2||null===(_Overview$parameters2=_Overview$parameters2.docs)||void 0===_Overview$parameters2?void 0:_Overview$parameters2.source)})})},"../../ds-atoms/s-htz-picture/src/HtzPicture.mock.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{_:()=>mockSources,p:()=>mockPicture});const mockPicture={__typename:"htz_image_Image",contentId:"00000180-7041-da8e-abc7-fe411da90001",alt:"אלוף בן",link:null,photographer:null,type:"image",credit:null,caption:null,files:[{__typename:"ImageViewModel_ImageFile",height:200,path:"50/5f/a428ee424c3fbd1ee99ee37e3d8e/2995150400.png?cmsstage",width:200,crops:{__typename:"ImageCrops",square:{__typename:"ImageCrop",height:348,width:348,x:138,y:0},headline:{__typename:"ImageCrop",height:200,width:400,x:138,y:0},vertical:{__typename:"ImageCrop",height:400,width:340,x:138,y:0}}}]},mockSources=[{aspect:"headline",widths:[327],sizes:[{size:"327px"}]},{widths:[348],aspect:"square",sizes:[{size:"348px"}],from:"s"},{widths:[340],aspect:"vertical",from:"l",sizes:[{size:"340px"}]}]},"../../../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")}},"../../../node_modules/.pnpm/@swc+helpers@0.5.2/node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs":(__unused_webpack_module,exports)=>{function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}exports._=exports._interop_require_wildcard=function _interop_require_wildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}}}]);