Elevation-stories-mdx.0958698a.iframe.bundle.js

"use strict";(self.webpackChunk_haaretz_a_tm_sg=self.webpackChunk_haaretz_a_tm_sg||[]).push([[83],{"../../../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/Elevation.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__page:()=>__page,default:()=>Elevation_stories});var react=__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"),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"),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"),SelectSite=__webpack_require__("../s-ds-stories/src/SelectSite.tsx");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 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:"bKjKUN",paddingRight:"gcnSZS",paddingBottom:"eayRfw",paddingLeft:"hHZVWs",textAlign:"hgpJrQ"},value:{backgroundColor:"fozssY",fontFamily:"bZywAt",paddingTop:"kMKXDC",paddingRight:"cVJMrm",paddingBottom:"jOeduE",paddingLeft:"JxWnH",fontSize:"hmImpX",lineHeight:"bwFuZl"},example:{borderTopLeftRadius:"gQJVfF",borderTopRightRadius:"bnguzQ",borderBottomRightRadius:"fBfCSu",borderBottomLeftRadius:"bzskLL",backgroundColor:"hXoEex",height:"dvPYPU",width:"kwVoFT"}};function elevationToShadows(elevation){return elevation.filter.split(") ").map(((shadowString,_,arr)=>"none"===shadowString||arr.at(-1)===shadowString?shadowString:`${shadowString})`))}function Elevations(_ref){let{site="htz"}=_ref;const{0:currentSite,1:setSite}=(0,react.useState)(site),elevations={flat:elevationToShadows({filter:"none"}),low:elevationToShadows({filter:"drop-shadow(0 1px 1.2px rgba(var(--c-shadow),0.15)) drop-shadow(0 1.1px 2px rgba(var(--c-shadow),0.1)) drop-shadow(0 5px 8px rgba(var(--c-shadow),0.05))"}),medium:elevationToShadows({filter:"drop-shadow(0 2px 2px rgba(var(--c-shadow),0.15)) drop-shadow(0 3px 4px rgba(var(--c-shadow),0.1)) drop-shadow(0 4.5px 8px rgba(var(--c-shadow),0.05))"}),high:elevationToShadows({filter:"drop-shadow(0 3px 4px rgba(var(--c-shadow),0.15)) drop-shadow(0 4.5px 8px rgba(var(--c-shadow),0.1)) drop-shadow(0 6.75px 16px rgba(var(--c-shadow),0.05))"}),xHigh:elevationToShadows({filter:"drop-shadow(0 3px 6px rgba(var(--c-shadow),0.15)) drop-shadow(0 4.5px 8px rgba(var(--c-shadow),0.15)) drop-shadow(0 6.75px 16px rgba(var(--c-shadow),0.1)) drop-shadow(0 10.125px 32px rgba(var(--c-shadow),0.05))"})};return(0,jsx_runtime.jsxs)(react.Fragment,{children:[(0,jsx_runtime.jsx)(SelectSite.Z,{currentSite,setSite}),(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)("th",{className:(0,style9.Z)(classes.cell,classes.head),children:"Example"})]})}),(0,jsx_runtime.jsx)("tbody",{children:Object.entries(elevations).map((_ref2=>{let[elevationLevel,shadows]=_ref2;return(0,jsx_runtime.jsxs)("tr",{children:[(0,jsx_runtime.jsx)("th",{className:(0,style9.Z)(classes.cell,classes.rowHead),children:elevationLevel}),(0,jsx_runtime.jsx)("td",{className:(0,style9.Z)(classes.cell),children:shadows.map(((shadowString,i)=>i===shadows.length-1?(0,jsx_runtime.jsx)(ShadowString,{value:shadowString},shadowString):(0,jsx_runtime.jsxs)(react.Fragment,{children:[(0,jsx_runtime.jsx)(ShadowString,{value:shadowString}),(0,jsx_runtime.jsx)("br",{})]},shadowString)))}),(0,jsx_runtime.jsx)("td",{className:(0,style9.Z)(classes.cell),children:(0,jsx_runtime.jsx)("div",{className:(0,style9.Z)(classes.example),style:_objectSpread({filter:shadows.join(" ")},"flat"===elevationLevel?{backgroundColor:"rgb(var(--c-neutral200))"}:{})})})]},elevationLevel)}))})]})]})}function ShadowString(_ref3){let{value=""}=_ref3;return(0,jsx_runtime.jsx)("code",{className:(0,style9.Z)(classes.value),children:value})}try{Elevation.displayName="Elevation",Elevation.__docgenInfo={description:"",displayName:"Elevation",props:{site:{defaultValue:{value:"htz"},description:"",name:"site",required:!1,type:{name:"enum",value:[{value:'"hdc"'},{value:'"htz"'},{value:'"tm"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../s-ds-stories/src/Elevation.tsx#Elevation"]={docgenInfo:Elevation.__docgenInfo,name:"Elevation",path:"../s-ds-stories/src/Elevation.tsx#Elevation"})}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:"elevations",children:"Elevations"}),"\n","\n","\n",(0,jsx_runtime.jsx)(dist.h_,{title:"Tokens/Elevations"}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"overview",children:"Overview"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"The Haaretz Design System uses shadow to create a sense of elevation and\nhierarchy within the UI."}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"To create a coherent experience, virtual light is always treated as if it comes\nfrom the top and directly in front, so that shadows are always cast with a\nconsistent light source, like in real life."}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["The idiomatic way to use elevation tokens is through the ",(0,jsx_runtime.jsx)(_components.code,{children:"shadow"})," function from\n",(0,jsx_runtime.jsx)(_components.code,{children:"@haaretz/l-shadow.macro"}),":"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-js",children:"import shadow from '@haaretz/l-shadow.macro';\n\nexport const elevated = shadow('high');\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["In order to create shadows that are smoother and more performant, the shadow of\neach elevation level multiple is actually made up of several ",(0,jsx_runtime.jsx)(_components.code,{children:"drop-shadow"}),"s (the\nSVG filter, not CSS ",(0,jsx_runtime.jsx)(_components.code,{children:"box-shadow"}),"), each one with decreasing opacity and\nincreasing blur radius."]}),"\n",(0,jsx_runtime.jsx)(Elevations,{site:"tm"})]})}const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Tokens/Elevations",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 Elevation_stories=componentMeta},"../s-ds-stories/src/SelectSite.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>SelectSite});var 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");const src_isSite=function isSite(candidate){if(!candidate)return!1;if("string"!=typeof candidate)return!1;switch(candidate){case"htz":case"tm":case"hdc":return!0;default:return!1}};var style9=__webpack_require__("../../../node_modules/.pnpm/style9@0.18.2_rollup@2.79.1_webpack@5.88.2/node_modules/style9/index.mjs");const c={fieldset:{borderTopColor:"hJnbij",borderRightColor:"inkqsI",borderBottomColor:"iUJTlr",borderLeftColor:"itSVRh",borderTopLeftRadius:"dJnzRg",borderTopRightRadius:"gALPBo",borderBottomRightRadius:"hAAOrm",borderBottomLeftRadius:"hXmGrK",color:"hBVYrM",display:"gSBWlu",columnGap:"hmmyz",fontFamily:"lffHhj",paddingBottom:"dPFrWx",paddingLeft:"iDuqPI",paddingRight:"ftIldC",width:"efDQIp","@media all and (min-width:64em)":{fontSize:"jYpfGj",lineHeight:"dXCjGe"}},legend:{borderTopLeftRadius:"dJnzRg",borderTopRightRadius:"gALPBo",borderBottomRightRadius:"hAAOrm",borderBottomLeftRadius:"hXmGrK",letterSpacing:"hzIFrK",marginInlineStart:"BkTRv",paddingTop:"kVZHcH",paddingRight:"cVJMrm",paddingBottom:"iATxZH",paddingLeft:"JxWnH",fontWeight:"iLdtFu"},input:{appearance:"cBRpiW"}},options=["htz","tm","hdc"];function SelectSite(_ref){let{currentSite,setSite}=_ref;return(0,jsx_runtime.jsx)("form",{onChange:function handleChange(evt){const value=evt.target.value;src_isSite(value)&&setSite(value)},dir:"ltr",children:(0,jsx_runtime.jsxs)("fieldset",{className:(0,style9.Z)(c.fieldset),children:[(0,jsx_runtime.jsx)("legend",{className:(0,style9.Z)(c.legend),children:"Select site"}),options.map((siteName=>(0,jsx_runtime.jsxs)("label",{children:[(0,jsx_runtime.jsx)("input",{type:"radio",checked:currentSite===siteName,value:siteName,className:(0,style9.Z)(c.input),id:`method-radio--${siteName}`}),` ${siteName}`]},siteName)))]})})}try{SelectSite.displayName="SelectSite",SelectSite.__docgenInfo={description:"",displayName:"SelectSite",props:{currentSite:{defaultValue:null,description:"",name:"currentSite",required:!0,type:{name:"enum",value:[{value:'"hdc"'},{value:'"htz"'},{value:'"tm"'}]}},setSite:{defaultValue:null,description:"",name:"setSite",required:!0,type:{name:"Dispatch<SetStateAction<Site>>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../s-ds-stories/src/SelectSite.tsx#SelectSite"]={docgenInfo:SelectSite.__docgenInfo,name:"SelectSite",path:"../s-ds-stories/src/SelectSite.tsx#SelectSite"})}catch(__react_docgen_typescript_loader_error){}},"../../../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")}}}]);