1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[67802],{13384:(e,t,r)=>{"use strict";r.d(t,{p:()=>i});var a=r(28398),s=r(71055);class n{nativeEvent;target;currentTarget;relatedTarget;bubbles;cancelable;defaultPrevented;eventPhase;isTrusted;timeStamp;type;constructor(e,t){this.nativeEvent=t,this.target=t.target,this.currentTarget=t.currentTarget,this.relatedTarget=t.relatedTarget,this.bubbles=t.bubbles,this.cancelable=t.cancelable,this.defaultPrevented=t.defaultPrevented,this.eventPhase=t.eventPhase,this.isTrusted=t.isTrusted,this.timeStamp=t.timeStamp,this.type=e}isDefaultPrevented(){return this.nativeEvent.defaultPrevented}preventDefault(){this.defaultPrevented=!0,this.nativeEvent.preventDefault()}stopPropagation(){this.nativeEvent.stopPropagation(),this.isPropagationStopped=()=>!0}isPropagationStopped(){return!1}persist(){}}var o=r(61546);function i(e,t){let r=e===o.Ru.Focus,{isHovered:i,hoverProps:l}=(0,a.A)(t?.hover??{}),{isFocused:u,focusProps:c}=function(e){var t;let r,a,o,{isDisabled:i,onFocus:l,onBlur:u,onFocusChange:c}=e,{0:d,1:g}=(0,s.useState)(!1),p=(0,s.useCallback)(e=>{e.target===e.currentTarget&&(u?.(e),c?.(!1),g(!1))},[u,c]),m=(r=(0,s.useRef)({isFocused:!1,mutationObserver:null}),(0,s.useLayoutEffect)(()=>{let e=r.current;return()=>{e.mutationObserver&&(e.mutationObserver.disconnect(),e.mutationObserver=null)}},[]),t=e=>{p?.(e)},a=(0,s.useRef)(t),(0,s.useLayoutEffect)(()=>{a.current=t},[t]),o=(0,s.useCallback)((...e)=>(0,a.current)(...e),[]),(0,s.useCallback)(e=>{if(e.target instanceof HTMLButtonElement||e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement||e.target instanceof HTMLSelectElement){r.current.isFocused=!0;let t=e.target;t.addEventListener("focusout",e=>{r.current.isFocused=!1,t.disabled&&o(new n("blur",e)),r.current.mutationObserver&&(r.current.mutationObserver.disconnect(),r.current.mutationObserver=null)},{once:!0}),r.current.mutationObserver=new MutationObserver(()=>{if(r.current.isFocused&&t.disabled){r.current.mutationObserver?.disconnect();let e=t===document.activeElement?null:document.activeElement;t.dispatchEvent(new FocusEvent("blur",{relatedTarget:e})),t.dispatchEvent(new FocusEvent("focusout",{bubbles:!0,relatedTarget:e}))}}),r.current.mutationObserver.observe(t,{attributes:!0,attributeFilter:["disabled"]})}},[])),h=(0,s.useCallback)(e=>{e.target===e.currentTarget&&document.activeElement===e.target&&(l?.(e),c?.(!0),m(e),g(!0))},[c,l,m]);return{isFocused:d,focusProps:{onFocus:i?void 0:h,onBlur:i?void 0:p}}}(t?.focus??{});return{isSecondaryImage:r?u:i,secondaryImageProps:r?c:l}}},28398:(e,t,r)=>{"use strict";r.d(t,{A:()=>u});var a=r(71055);let s=!1,n=0;function o(){s=!0,setTimeout(()=>{s=!1},50)}function i(e){"touch"===e.pointerType&&o()}function l(){return"u">typeof PointerEvent?document.addEventListener("pointerup",i):document.addEventListener("touchend",o),n+=1,()=>{(n-=1)>0||("u">typeof PointerEvent?document.removeEventListener("pointerup",i):document.removeEventListener("touchend",o))}}function u({onHoverStart:e=null,onHoverChange:t=null,onHoverEnd:r=null,isDisabled:n=!1}){let{0:o,1:i}=(0,a.useState)(!1),c=(0,a.useRef)({isHovered:!1,ignoreEmulatedMouseEvents:!1,pointerType:"",target:null}).current;(0,a.useEffect)(l,[]);let{hoverProps:d,triggerHoverEnd:g}=(0,a.useMemo)(()=>{let a=(r,a)=>{if(c.pointerType=a,n||"touch"===a||c.isHovered||!r.currentTarget.contains(r.target))return;c.isHovered=!0;let s=r.currentTarget;c.target=s,e?.({type:"hoverstart",target:s,pointerType:a}),t?.(!0),i(!0)},o={};return!n&&"u">typeof PointerEvent?(o.onPointerEnter=e=>{s&&"mouse"===e.pointerType||a(e,e.pointerType)},o.onPointerLeave=e=>{!n&&e.currentTarget.contains(e.target)&&g(e,e.pointerType)}):n||(o.onTouchStart=()=>{c.ignoreEmulatedMouseEvents=!0},o.onMouseEnter=e=>{c.ignoreEmulatedMouseEvents||s||a(e,"mouse"),c.ignoreEmulatedMouseEvents=!1},o.onMouseLeave=e=>{e.currentTarget.contains(e.target)&&g(e,"mouse")}),{hoverProps:o,triggerHoverEnd:(e,a)=>{if(c.pointerType="",c.target=null,"touch"===a||!c.isHovered)return;c.isHovered=!1;let s=e.currentTarget;r?.({type:"hoverend",target:s,pointerType:a}),t?.(!1),i(!1)}}},[e,t,r,n,c]);return(0,a.useEffect)(()=>{n&&g({currentTarget:c.target},c.pointerType)},[n,g,c.pointerType,c.target]),{hoverProps:d,isHovered:o}}},31209:(e,t,r)=>{"use strict";r.r(t),r.d(t,{__N_SSP:()=>k,default:()=>z});var a=r(1873),s=r(38536),n=r(68014),o=r.n(n),i=r(40561),l=r(9954),u=r(34220),c=r(61546),d=r(28270),g=r(71055),p=r(13384),m=r(71055);let h=o()(()=>Promise.resolve().then(r.bind(r,64781)),{id:"cd06a20",loadableGenerated:{webpack:()=>[64781]}}),v={colors:{brandLogoHeader:"magenta",brandLogoPrimary:"green",stylizedBaseImage:"turquoise",stylizedSecondaryImage:"maroon"},styles:{main:{padding:"2rem"},label:{"margin-right":"1rem"},input:{margin:"0.5rem"},button:{"background-color":"black",padding:"50px"},'button[data-state="visible"]':{background:"whitesmoke"},"svg:last-of-type:hover":{"--primary":"rebeccapurple"},"svg:last-of-type:focus":{"--primary":"darkgreen"}}},y=(0,l.i7)` 2 0% { transform: rotate(0); } 3 100% {transform: rotate(360deg);} 4`,b=(0,s.A)(function(e){return(0,l.Y)(h,(0,a.A)({type:c.PV.Embeddable,relativeUrl:"/static/icons/loading.svg"},e))},{target:"eeh0eqd0"})((0,d.Ay)({animation:`${y} 1.5s linear infinite`,height:"var(--_size-48)",width:"var(--_size-48)",primary:"var(--_palette-blue-60)"}),"");function f(){return(0,l.Y)(m.Fragment,null,(0,l.Y)("h2",null,"Embeddable (High Priority)"),(0,l.Y)("p",null,"The high priority logo renders with a use tag with an href that is immediately fetched."),(0,l.Y)(b,{priority:"high"}),(0,l.Y)("pre",{className:"language-jsx"},(0,l.Y)("code",{className:"language-jsx"},` 5 function Loading(props) { 6 const path = '/static/icons/loading.svg'; 7 return ( 8 <DynamicSvg type={DYNAMIC_SVG_TYPES.Embeddable} relativeUrl={path} {...props} /> 9 ); 10 } 11 12 const spinMotion = keyframes' 13 0% { transform: rotate(0); } 14 100% {transform: rotate(360deg);} 15 '; 16 17 const LoadingIcon = styled(Loading)( 18 sx({ 19 animation: spinMotion 1.5s linear infinite, 20 height: 'var(--_size-48)', 21 width: 'var(--_size-48)', 22 primary: 'var(--_palette-blue-60)' 23 }) 24 ); 25 26 <LoadingIcon priority="high" /> 27`)),(0,l.Y)("h2",null,"Embeddable (Low/Default Priority)"),(0,l.Y)("p",null,"The low or default priority logo renders with a use tag with a data-href that is updated to an href once the comonent is in view. This prevents unnecessary resource fetching on page load."),
27(0,l.Y)(b,null),(0,l.Y)("pre",{className:"language-jsx"},(0,l.Y)("code",{className:"language-jsx"},` 28 function Loading(props) { 29 const path = '/static/icons/loading.svg'; 30 return ( 31 <DynamicSvg type={DYNAMIC_SVG_TYPES.Embeddable} relativeUrl={path} {...props} /> 32 ); 33 } 34 35 const spinMotion = keyframes' 36 0% { transform: rotate(0); } 37 100% {transform: rotate(360deg);} 38 '; 39 40 const LoadingIcon = styled(Loading)( 41 sx({ 42 animation: spinMotion 1.5s linear infinite, 43 height: 'var(--_size-48)', 44 width: 'var(--_size-48)', 45 primary: 'var(--_palette-blue-60)' 46 }) 47 ); 48 49 <LoadingIcon /> 50 `)))}function Y(){let e="/static/images/logos/logo.svg";return(0,l.Y)(m.Fragment,null,(0,l.Y)("h2",null,"Stylized (With Query Param)"),(0,l.Y)("p",null,"This svg is rendered with a primary query param that overrides a default primary css variable in the original svg."),(0,l.Y)(h,{type:c.PV.Stylized,primary:"colors.brandLogoPrimary",height:"150",width:"300",alt:"svg",relativeUrl:e}),(0,l.Y)("pre",{className:"language-jsx"},(0,l.Y)("code",{className:"language-jsx"},` 51 const theme = { 52 colors: { 53 brandLogoPrimary: 'green' 54 } 55 }; 56 const path = '/static/icons/demo-svg.svg'; 57 const primary = 'colors.brandLogoPrimary'; 58 <DynamicSvg 59 type="stylized" 60 primary={primary} 61 height="150" 62 width="300" 63 alt="" 64 relativeUrl={path} 65 /> 66 `)),(0,l.Y)("h2",null,"Stylized (Static/Without Query Params)"),(0,l.Y)("p",null,"This returns an optimized image, with no dynamic style overrides"),(0,l.Y)(h,{type:c.PV.Stylized,height:"150",width:"300",alt:"svg",relativeUrl:e}),(0,l.Y)("pre",{className:"language-jsx"},(0,l.Y)("code",{className:"language-jsx"},` 67 68 const path = '/static/icons/demo-svg.svg'; 69 <DynamicSvg 70 type="stylized" 71 height="150" 72 width="300" 73 alt="" 74 relativeUrl={path} 75 /> 76 `)))}let S=(0,l.Y)("pre",{className:"language-jsx"},(0,l.Y)("code",{className:"language-jsx"},` 77 const theme = { 78 colors: { 79 stylizedBaseImage: 'turquoise', 80 stylizedSecondaryImage: 'maroon', 81 }, 82 }; 83 84 <DynamicSvg 85 type={DYNAMIC_SVG_TYPES.Stylized} 86 eventType={eventType} 87 primary={['colors.stylizedBaseImage', 'colors.stylizedSecondaryImage']} 88 height="150" 89 width="300" 90 alt="stylized logo" 91 scopedUrl="/_assets/design-tokens/latest/cosmopolitan/static/images/logos/logo.svg" 92 /> 93`)),T=(0,l.Y)("pre",{className:"language-jsx"},(0,l.Y)("code",{className:"language-jsx"},` 94 const theme = { 95 styles: { 96 'svg:last-of-type:hover': { 97 '--primary': 'rebeccapurple', 98 }, 99 'svg:last-of-type:focus': { 100 '--primary': 'darkgreen', 101 }, 102 }, 103 }; 104 105 <DynamicSvg 106 type={DYNAMIC_SVG_TYPES.Embeddable} 107 height="150" 108 width="300" 109 alt="embeddable logo" 110 scopedUrl="/_assets/design-tokens/latest/seventeen/static/images/logos/logo.svg" 111 tabIndex={0} 112 /> 113`)),E=(0,l.Y)("pre",{className:"language-jsx"},(0,l.Y)("code",{className:"language-jsx"},` 114 import { useHover } from '@media-platforms/hooks/hover'; 115 116 const theme = { 117 const theme = { 118 colors: { 119 stylizedBaseImage: 'turquoise', 120 stylizedSecondaryImage: 'maroon', 121 }, 122 styles: { 123 button: { 124 'background-color': 'black', 125 padding: '50px', 126 }, 127 'button[data-state="visible"]': { 128 background: 'whitesmoke', 129 }, 130 } 131 }; 132 }; 133 134 function Button({ eventType }) { 135 const { isSecondaryImage, secondaryImageProps } = useSecondaryImage(eventType);
136 const ref = useRef(null); 137 return ( 138 <button type="button" ref={ref} {...secondaryImageProps}> 139 <DynamicSvg 140 type={DYNAMIC_SVG_TYPES.Stylized} 141 displaySecondaryImage={isSecondaryImage} 142 eventType={eventType} 143 primary={['colors.stylizedBaseImage', 'colors.stylizedSecondaryImage']} 144 height="150" 145 width="300" 146 alt="stylized logo" 147 scopedUrl="/_assets/design-tokens/latest/cosmopolitan/static/images/logos/logo.svg" 148 containerRef={ref} 149 /> 150 </button> 151 ); 152 } 153`));function P({eventType:e}){let{isSecondaryImage:t,secondaryImageProps:r}=(0,p.p)(e),s=(0,g.useRef)(null);return(0,l.Y)("button",(0,a.A)({type:"button",ref:s},r),(0,l.Y)(h,{type:c.PV.Stylized,displaySecondaryImage:t,eventType:e,primary:["colors.stylizedBaseImage","colors.stylizedSecondaryImage"],height:"150",width:"300",alt:"stylized logo",scopedUrl:"/_assets/design-tokens/latest/cosmopolitan/static/images/logos/logo.svg",containerRef:s}))}function w(){let{0:e,1:t}=(0,g.useState)(c.Ru.Hover),r=e=>t(e.target.value);return(0,l.Y)(m.Fragment,null,(0,l.Y)("h2",null,"Hover States"),(0,l.Y)("p",null,"Hover states can be achieved using embeddable or stylized svgs. If various styles will be needed for focus, hover, or active states, it is best to use an embeddable type. If only a hover or focus state is required, it is best to use a stylized type and provide an eventType (hover or focus)."),(0,l.Y)("h3",null,"Stylized Hover State Example"),(0,l.Y)("p",null,"Depending on the selected event type, the stylized svg shown below will render a secondary state on hover or focus."),(0,l.Y)("div",{onChange:r},(0,l.Y)("label",{htmlFor:c.Ru.hover},"Hover",(0,l.Y)("input",{id:c.Ru.Hover,type:"radio",value:c.Ru.Hover,checked:e===c.Ru.Hover})),(0,l.Y)("label",{htmlFor:c.Ru.Focus},"Focus",(0,l.Y)("input",{id:c.Ru.Focus,type:"radio",value:c.Ru.Focus,checked:e===c.Ru.Focus}))),(0,l.Y)(h,{type:c.PV.Stylized,eventType:e,primary:["colors.stylizedBaseImage","colors.stylizedSecondaryImage"],height:"150",width:"300",alt:"stylized logo",scopedUrl:"/_assets/design-tokens/latest/cosmopolitan/static/images/logos/logo.svg"}),(0,l.Y)("p",null,"The reference code looks like this:"),S,(0,l.Y)("h3",null,"Stylized Hover State Controlled by Parent Element"),(0,l.Y)("p",null,'Given the need to render a hover image based on the parents hover state, the useSecondaryImage hook can be used. Depending on the selected event type, the stylized svg shown below will render a secondary state on hover or focus. If you need to sync parent styles to when the secondary image loads/displays, be sure to pass a ref to the parent element and the as a prop, containerRef, for DynamicSvg. Target the secondary image related styles with [data-state="visible"].'),(0,l.Y)("div",{onChange:r},(0,l.Y)("label",{htmlFor:c.Ru.hover},"Hover",(0,l.Y)("input",{id:c.Ru.Hover,type:"radio",value:c.Ru.Hover,checked:e===c.Ru.Hover})),(0,l.Y)("label",{htmlFor:c.Ru.Focus},"Focus",(0,l.Y)("input",{id:c.Ru.Focus,type:"radio",value:c.Ru.Focus,checked:e===c.Ru.Focus}))),(0,l.Y)(P,{eventType:e}),(0,l.Y)("p",null,"The reference code looks like this:"),E,(0,l.Y)("h3",null,"Embeddable Hover State Example"),(0,l.Y)("p",null,"This svg has hover and focus states applied using CSS"),(0,l.Y)(h,{type:c.PV.Embeddable,height:"150",width:"300",alt:"embeddable logo",scopedUrl:"/_assets/design-tokens/latest/seventeen/static/images/logos/logo.svg",tabIndex:0}),(0,l.Y)("p",null,"The reference code looks like this:"),T)}var k=!0;function z(){return(0,l.Y)(u.A,{theme:v,pageId:"demos/dynamic-svgs"},(0,l.Y)(l.mL,{styles:v.styles}),(0,l.Y)("main",null,(0,l.Y)(i.A,null,(0,l.Y)("link",{href:"https://unpkg.com/[email protected]/build/style.css",rel:"stylesheet"}),(0,l.Y)("script",{defer:!0,src:"https://unpkg.com/[email protected]/components/prism-core.min.js"}),(0,l.Y)("script",{defer:!0,src:"https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js"})),(0,l.Y)("h1",null,"Dynamic SVGS"),(0,l.Y)("p",null,"An example of using dynamic svgs with types embeddable and stylized."),(0,l.Y)(Y,null),(0,l.Y)(f,null),(0,l.Y)(w,null)))}},34220:(e,t,r)=>{"use strict";r.d(t,{A:()=>m});var a=r(93682),s=r(53520),n=r(7751),o=r(93225),i=r(71055),l=r(37717),u=r(68014),c=r.n(u);let d=["children","theme","pageId","useFocus"];function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,a)}return r}let p=c()(()=>r.e(80429).then(r.bind(r,80429)),{id:"c38b8c0",loadableGenerated:{webpack:()=>[80429]}}),m=function(e){let{children:t,theme:r,pageId:u="default",useFocus:c=()=>({focusModal:()=>{},unfocusModal:()=>{}})}=e,m=(0,s.A)(e,d),h=(0,l.o)(),v=h?.get("themeEditor");h?.get("localTheme");let y=v||""===v,{0:b,1:f}=(0,i.useState)(y?r:null),Y=y&&b||r;if(!Y)throw Error("Theme is empty. Please check the theming service. Falling back to default would cause unstyled pages");return(0,n.FD)(n.FK,{children:[y?(0,n.Y)(p,function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};
153t%2?g(Object(r),!0).forEach(function(t){(0,a.A)(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({pageId:u,themeConfigs:r?.details??{},onSetTheme:f,theme:r,filter:v,useFocus:c},m)):null,(0,n.Y)(o.a,{theme:Y,children:t})]})}},40561:(e,t,r)=>{"use strict";r.d(t,{A:()=>s});var a=r(45111);let s=r.n(a)()},45111:(e,t,r)=>{e.exports=r(80049)},91941:(e,t,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/dynamic-svgs",function(){return r(31209)}])}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=91941)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.