https://www.quotenet.nl/_assets/fre/scopes/hdm/_next/static/chunks/pages/demos/scopes-cddb4125522e15c1.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[81668],{34220:(e,t,s)=>{"use strict";s.d(t,{A:()=>g});var o=s(93682),a=s(53520),n=s(7751),l=s(93225),i=s(71055),r=s(37717),c=s(68014),u=s.n(c);let p=["children","theme","pageId","useFocus"];function m(e,t){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),s.push.apply(s,o)}return s}let d=u()(()=>s.e(80429).then(s.bind(s,80429)),{id:"c38b8c0",loadableGenerated:{webpack:()=>[80429]}}),g=function(e){let{children:t,theme:s,pageId:c="default",useFocus:u=()=>({focusModal:()=>{},unfocusModal:()=>{}})}=e,g=(0,a.A)(e,p),h=(0,r.o)(),f=h?.get("themeEditor");h?.get("localTheme");let Y=f||""===f,{0:b,1:y}=(0,i.useState)(Y?s:null),k=Y&&b||s;if(!k)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)(d,function(e){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{};t%2?m(Object(s),!0).forEach(function(t){(0,o.A)(e,t,s[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):m(Object(s)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(s,t))})}return e}({pageId:c,themeConfigs:s?.details??{},onSetTheme:y,theme:s,filter:f,useFocus:u},g)):null,(0,n.Y)(l.a,{theme:k,children:t})]})}},40561:(e,t,s)=>{"use strict";s.d(t,{A:()=>a});var o=s(45111);let a=s.n(o)()},45111:(e,t,s)=>{e.exports=s(80049)},58493:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/scopes",function(){return s(75651)}])},61929:(e,t,s)=>{var o={"./fre/import-scope.js":[41063,41063]};function a(e){if(!s.o(o,e))return Promise.resolve().then(()=>{var t=Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t});var t=o[e],a=t[0];return s.e(t[1]).then(()=>s(a))}a.keys=()=>Object.keys(o),a.id=61929,e.exports=a},75651:(e,t,s)=>{"use strict";s.r(t),s.d(t,{__N_SSP:()=>P,default:()=>T});var o=s(38536),a=s(68014),n=s.n(a),l=s(91617),i=s(33223),r=s(40561),c=s(80166),u=s(28270),p=s(34220),m=s(9954);let{RUNTIME_PUBLIC_IMAGE_HOSTNAME:d}=c.Ay,g=d?new URL(d).origin:"",h=n()((0,l.WO)(s(61929),{scopeOptions:{scope:l.qt}}),{}),f=(0,o.A)(h,{target:"eyrfrdl1"})({name:"1bftkdf",styles:"color:navy"});function Y(){return(0,m.Y)("section",null,(0,m.Y)("h2",null,"\uD83D\uDEA9 Dynamic Asset"),(0,m.Y)("h3",null,"Dynamic assets are assets compiled at build time."),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-jsx"},`
2	import { importScope, BRAND } from '@media-platforms/scope';
3	import styled from '@emotion/styled';
4
5	const Paragraph = dynamic(importScope('@media-platforms/examples/@scope/import-scope.js', { scope: BRAND }));
6
7	// Extending into a styled component
8	// This allows to hook the theme system (sx) props
9	const MyParagraph = styled(Paragraph)({
10		color: 'navy'
11	})
12
13	function MyComponent() {
14		return <MyParagraph />;
15	}
16					`)),(0,m.Y)(f,null))}function b(){let e=(0,l.gh)("/static/images/logos/logo.svg");return(0,m.Y)("section",null,(0,m.Y)("h2",null,"\uD83D\uDEA9 Scoped static asset (brand logo)"),(0,m.Y)("h3",null,"For brands without a logo, the Resin logo will appear."),(0,m.Y)("h3",null,"A prefix from a pull request in ",(0,m.Y)("i",null,"Design Tokens")," can be added with a query parameter:"," ",(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-bash"},"?assetPrefix=PR-[number]/[hash]"))),(0,m.Y)("h3",null,"NOTE: Providing a prefix value will override the current environment."),(0,m.Y)("h3",null,"Pull Requests on FRE will load the development environment by default."),(0,m.Y)("h3",null,"An empty string value in the query parameter will switch it to the production bucket."),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-jsx"},`
17	import { useScope } from '@media-platforms/scope';
18
19	function MyComponent() {
20		const logo = useScope('/static/images/logos/logo.svg');
21
22		return <Image imageUrl={logo} />;
23	}
24					`)),(0,m.Y)(i.default,{src:e,width:"100",height:"auto",alt:"scoped asset"}))}function y(){let e=(0,l.gh)("/static/images/logos/logo.svg",{scope:l.qt});return(0,m.Y)("section",null,(0,m.Y)("h2",null,"\uD83D\uDEA9 Brand static asset (without scope)"),(0,m.Y)("h3",null,"The default scoping functionality can be modified by providing scope options."),(0,m.Y)("h3",null,"If the file is missing in the provided scope(s), the last scope will be used as a default path."),(0,m.Y)("h3",null,"This is useful to identify required missing assets."),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-jsx"},`

25	import { useScope, BRAND } from '@media-platforms/scope';
26
27	function MyComponent() {
28		const logo = useScope('/static/images/logos/logo.svg', { scope: BRAND });
29
30		return <Image imageUrl={logo} />;
31	}
32					`)),(0,m.Y)(i.default,{src:e,width:"100",height:"auto",alt:"brand asset"}))}function k(){let e=(0,l.gh)("/static/icons/checkmark-does-not-exist.svg",{scope:l.qt}),t=(0,l.gh)("/static/icons/x-circle.svg",{scope:l.uq});return(0,m.Y)("section",null,(0,m.Y)("h2",null,"\uD83D\uDEA9 Missing static asset with fallback"),(0,m.Y)("h3",null,"The defaulting functionality can be disabled. If the file is missing, an empty string is returned."),(0,m.Y)("h3",null,"This is useful to fallback to a different known asset (placeholder)."),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-jsx"},`
33	import { useScope, APP, BRAND } from '@media-platforms/scope';
34
35	function MyComponent() {
36		const checkmark = useScope('/static/icons/checkmark-does-not-exist.svg', { scope: BRAND });
37		const fallback = useScope('/static/icons/x-circle.svg', { scope: APP });
38
39		return {checkmark ? <Image imageUrl={checkmark} /> : <Image imageUrl={fallback} />};
40	}
41					`)),(0,m.Y)("h3",null,"Alternatively, a fallback option can be passed as a string or array."),(0,m.Y)("h3",null,"Enabling a fallback will automatically set defaults to false."),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-jsx"},`
42	import { useScope, APP, BRAND } from '@media-platforms/scope';
43
44	function MyComponent() {
45		const asset = useScope('/static/icons/checkmark-does-not-exist.svg', {
46			scope: BRAND,
47			fallback: ['/static/icons/x-circle.svg', { scope: APP }]
48		});
49
50		return <Image imageUrl={asset} />;
51	}
52					`)),e?(0,m.Y)(i.default,{src:e,width:"100",height:"auto",alt:"checkmark icon"}):(0,m.Y)(i.default,{src:t,width:"100",height:"auto",alt:"fallback icon"}))}function v(){let e=(0,l.gh)("/static/images/logos/logo-jsonld.png",{media:!0});return(0,m.Y)("section",null,(0,m.Y)("h2",null,"\uD83D\uDEA9 Media static asset"),(0,m.Y)("h3",null,"For assets supported by our image providers (jpg, png), a media option can be provided."),(0,m.Y)("h3",null,"These assets can also be served from an /_assets path, but will not be able to be resized/cropped."),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-jsx"},`
53	import { useScope } from '@media-platforms/scope';
54	import env from 'env/shared';
55
56	const { RUNTIME_PUBLIC_IMAGE_HOSTNAME } = env;
57	const imageHostname = RUNTIME_PUBLIC_IMAGE_HOSTNAME ? new URL(RUNTIME_PUBLIC_IMAGE_HOSTNAME).origin : '';
58
59	function MyComponent() {
60		const logo = useScope('static/images/logos/logo-jsonld.png', { media: true });
61
62		return <Image image={logo} default={{ hostname: imageHostname, crop: '2x1' }} />;
63	}
64					`)),(0,m.Y)(i.default,{image:e,default:{hostname:g,crop:"2x1"},width:"100",height:"auto",alt:"media asset"}))}let w={fontFamilies:{Saol:{src:["/static/fonts/Saol-Text-Regular.woff2"],variants:{"style:italic":{src:"/static/fonts/Saol-Text-Regular-Italic.woff2"}}}},fonts:{demo:"Saol, Helvetica, sans-serif"},styles:{demo:{fontFamily:"demo",fontSize:"1.5rem",paddingLeft:"2.2rem",backgroundImage:["/static/icons/checkmark-does-not-exist.svg",{scope:"@brand",fallback:["/static/icons/x-circle.svg",{scope:"@app"}]}],backgroundRepeat:"no-repeat",_defaults:!0}}},x=(0,o.A)("div",{target:"eyrfrdl0"})((0,u.Ay)("demo"),"");function S(){return(0,m.Y)("section",null,(0,m.Y)("h2",null,"\uD83D\uDEA9 Theme usage"),(0,m.Y)("h3",null,"Themes can take advantage of scoping behavior for font loading and background images."),(0,m.Y)("h3",null,"Background images are preferred for decorative purposes, and less critical assets."),(0,m.Y)("h3",null,"Theme Example"),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-json"},`
65{
66	"fontFamilies": {
67		"Saol": {
68			"src": ["/static/fonts/Saol-Text-Regular.woff2", { "defaults": false }],
69			"variants": {
70				"style:italic": {
71					"src": "/static/fonts/Saol-Text-Regular-Italic.woff2"
72				}
73			}
74		}
75	},
76	"fonts": {
77		"demo": "Saol, Helvetica, sans-serif"
78	},
79	"styles": {
80		"demo": {
81			"fontFamily": "demo",
82			"fontSize": "1.5rem",
83			"paddingLeft": "2.2rem",
84			"backgroundImage": [
85				"/static/icons/checkmark-does-not-exist.svg",
86				{
87					"scope": "@brand",
88					"defaults": false,
89					"fallback": ["/static/icons/x-circle.svg", { "scope": "@app" }]
90				}
91			],
92			"backgroundRepeat": "no-repeat"
93		}
94	}
95}`)),(0,m.Y)("h3",null,"Component Example"),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-jsx"},`
96	import styled from '@emotion/styled';
97	import sx from '@media-platforms/theme-system/core';
98
99	const Demo = styled.div(sx('demo'));
100
101	function MyComponent() {
102		return (
103			<Demo>
104				This is an example of{' '}
105				<Demo sx={{ fontStyle: 'italic', paddingLeft: null, backgroundImage: null }} as="span">
106					Font Loading
107				</Demo>
108			</Demo>
109		);
110	}
111					`)),(0,m.Y)("h3",null,"Output"),(0,m.Y)(p.A,{theme:w,pageId:"demo"},(0,m.Y)(x,null,"This is an example of"," ",(0,m.Y)(x,{sx:{fontStyle:"italic",paddingLeft:null,backgroundImage:null},as:"span"},"Font Loading"))))}var P=!0,N={name:"1v03bf2",styles:"padding:2rem"},A={name:"1jbp2en",styles:"background:lightblue;padding:2rem"};function T(){return(0,m.Y)("main",{css:N},(0,m.Y)(r.A,null,(0,m.Y)("link",{href:"https://unpkg.com/[email protected]/build/style.css",rel:"stylesheet"}),(0,m.Y)("script",{defer:!0,src:"https://unpkg.com/[email protected]/components/prism-core.min.js"}),(0,m.Y)("script",{defer:!0,src:"https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js"})),(0,m.Y)("h1",null,"Dynamic and static assets"),(0,m.Y)("hr",null),(0,m.Y)("section",{css:A},(0,m.Y)("h2",null,"TLDR"),(0,m.Y)("ul",null,(0,m.Y)("li",null,(0,m.Y)("h3",null,"Why?"),(0,m.Y)("h4",null,"Consolidating assets out of the application allows to build and upload once.")),(0,m.Y)("li",null,(0,m.Y)("h3",null,"Dynamic assets require a version change."),(0,m.Y)("pre",null,(0,m.Y)("code",{className:"language-bash"},"npm i @media-platforms/design-tokens@[version]")),(0,m.Y)("h4",null,"There are not currently any dynamically loaded assets using design-tokens, but if there were, you would replace [version] with the pr package version (e.g. @media-platforms/[email protected]) or the related tag (@media-platforms/design-tokens@PR-121-0b22452) for local testing, and a release tag (1.2.3) for production deployment. You can find all design tokens package versions here https://github.com/Media-Platforms/design-tokens/packages/1271060/versions.")),(0,m.Y)("li",null,(0,m.Y)("h3",null,"Static assets can be updated without a code release in the application.")))),(0,m.Y)(Y,null),(0,m.Y)("hr",null),(0,m.Y)(b,null),(0,m.Y)("hr",null),(0,m.Y)(y,null),(0,m.Y)("hr",null),(0,m.Y)(k,null),(0,m.Y)("hr",null),(0,m.Y)(v,null),(0,m.Y)("hr",null),(0,m.Y)(S,null))}}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=58493)),_N_E=e.O()}]);