https://www.pepsico.com/_next/static/chunks/pages/preview-featured-links-tabs-colors-8323a88de75fc7e9.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[623],{3346:function(e,l,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/preview-featured-links-tabs-colors",function(){return n(8923)}])},8923:function(e,l,n){"use strict";n.r(l),n.d(l,{__N_SSG:function(){return C},default:function(){return j}});var a=n(5893);n(7294);var i=n(1201),r=n(7051),t=n(5157),o=n(3276),s=n(4457),d=n(5231);let u={sitecore:{context:{pageEditing:!1},route:{name:"preview",fields:{Color:{fields:{Name:{value:"Default"}}}}}}},c=[t.HS.blue,t.HS.green,t.HS.yellow,t.HS.violet,t.HS.red,t.HS.teal,t.HS.coreBlue,t.HS.coreYellow],m=[t.HS.violet,t.HS.red,t.HS.teal,t.HS.coreBlue,t.HS.coreYellow],p={[t.HS.blue]:"Blue",[t.HS.green]:"Green",[t.HS.yellow]:"Yellow",[t.HS.violet]:"Violet",[t.HS.red]:"Red",[t.HS.teal]:"Teal",[t.HS.coreBlue]:"Core Blue",[t.HS.coreYellow]:"Core Yellow"},v=e=>({id:"color-".concat(e),url:"/en/sitecore/content/Global-Settings/Themes/".concat(e),name:e,displayName:e,fields:{Name:{value:e}}}),f=[{color:t.HS.blue,extendedColor:t.HS.violet},{color:t.HS.green,extendedColor:t.HS.red},{color:t.HS.yellow,extendedColor:t.HS.teal}],x=e=>({componentName:e,dataSource:"mock"}),b={id:"preview-tab-1",url:"/preview/tab-1",name:"Preview Tab",displayName:"Preview Tab",fields:{TabTitle:{value:"Tab 1"},PillLinks:[{id:"pill-1",url:"/preview/pill-1",name:"Pill 1",displayName:"Pill 1",fields:{TabTitle:{value:"2025"},Links:[{id:"link-1",url:"/preview/link-1",name:"Link 1",displayName:"Link 1",fields:{Label:{value:"Annual Report 2025"},Link:{value:{href:"#",linktype:"external",url:"#"}}}},{id:"link-2",url:"/preview/link-2",name:"Link 2",displayName:"Link 2",fields:{Label:{value:"Sustainability Report"},Link:{value:{href:"#",linktype:"external",url:"#"}}}}],Label:{value:"View all"},Link:{value:{href:"#",linktype:"external",url:"#"}}}},{id:"pill-2",url:"/preview/pill-2",name:"Pill 2",displayName:"Pill 2",fields:{TabTitle:{value:"2024"},Links:[{id:"link-3",url:"/preview/link-3",name:"Link 3",displayName:"Link 3",fields:{Label:{value:"Annual Report 2024"},Link:{value:{href:"#",linktype:"external",url:"#"}}}},{id:"link-4",url:"/preview/link-4",name:"Link 4",displayName:"Link 4",fields:{Label:{value:"ESG Report 2024"},Link:{value:{href:"#",linktype:"external",url:"#"}}}}],Label:{value:"View all"},Link:{value:{href:"#",linktype:"external",url:"#"}}}}],Description:{value:"<p><strong>Find key insights</strong>, reports, and tools to stay connected to our performance and strategy driving long-term growth.</p>"},Image:{value:{src:"/images/homepage_hero/pepsico_05_3.png",alt:"Innovation preview",width:"1116",height:"590"}},BadgeLinks:[],AnchorName:{value:"preview-anchor"},Size:{id:"size-default",url:"/en/sitecore/content/Global-Settings/Headline-Sizes/Default",name:"Default",displayName:"Default",fields:{Value:{value:"Default"}}},ImageAlignment:{id:"align-left",url:"/en/sitecore/content/Global-Settings/Image-Alignment/Image-Left",name:"Image Left",displayName:"Image Left",fields:{Value:{value:o.o.leftImage}}},Headline:{value:"Lorem Ipsum\r\nDolor Sit"},IsSingleLine:{value:!1},InitialColorStyle:{value:t.Zc.dark},DisableAlternatingColor:{value:!1}}};function g(e){let{title:l,subtitle:n}=e;return(0,a.jsxs)("div",{className:"mx-6 md:mx-12 mt-16 mb-6",children:[(0,a.jsx)("h2",{className:"typo-h-2 text-blue-500",children:l}),n&&(0,a.jsx)("p",{className:"typo-p-4 text-gray-300 mt-1",children:n}),(0,a.jsx)("hr",{className:"border-gray-100 mt-3"})]})}function k(e){var l;let{color:n}=e;return(0,a.jsx)("p",{className:"mx-6 md:mx-12 mb-2 typo-p-3 font-bold text-gray-500",children:null!==(l=p[n])&&void 0!==l?l:n})}function h(e){let{color:l}=e,n={...b,fields:{...b.fields,Color:v(l)}};return(0,a.jsxs)("div",{className:"mb-2",children:[(0,a.jsx)(k,{color:l}),(0,a.jsx)(s.default,{rendering:x("FeaturedLinksWithTabNav"),params:{},fields:{Tabs:[n],BackgroundColor:{value:"White"}}})]})}function w(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g,{title:"Existing Color Variants (8)",subtitle:"Blue, Green, Yellow, Violet, Red, Teal, Core Blue, Core Yellow — light background"}),c.map(e=>(0,a.jsx)(h,{color:e},e))]})}function S(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g,{title:"Innovation Color Variants (5 new)",subtitle:"Inno Violet, Inno Red, Inno Teal, Inno Core Blue, Inno Core Yellow — dark background"}),m.map(e=>(0,a.jsx)(h,{color:e},e))]})}function y(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g,{title:"ExtendedColor Override (3 examples)",subtitle:"Color field is set to a light color, but ExtendedColor overrides it with a dark Innovation variant"}),f.map(e=>{let{color:l,extendedColor:n}=e,i={...b,fields:{...b.fields,Color:v(l),ExtendedColor:v(n)}};return(0,a.jsxs)("div",{className:"mb-2",children:[(0,a.jsxs)("p",{className:"mx-6 md:mx-12 mb-2 typo-p-3 font-bold text-gray-500",children:["Color: ",p[l]," → ExtendedColor: ",p[n]]}),(0,a.jsx)(s.default,{rendering:x("FeaturedLinksWithTabNav"),params:{}

1,fields:{Tabs:[i],BackgroundColor:{value:"White"}}})]},n)})]})}function N(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g,{title:"With Pill Tabs — Innovation Colors",subtitle:"Pill tab navigation on dark background using Innovation colors"}),m.map(e=>{let l={...b,fields:{...b.fields,Color:v(e)}},n=d.D.Tabs.map(l=>({...l,fields:{...l.fields,Color:v(e)}}));return(0,a.jsxs)("div",{className:"mb-2",children:[(0,a.jsx)(k,{color:e}),(0,a.jsx)(s.default,{rendering:x("FeaturedLinksWithTabNav"),params:{},fields:{Tabs:[l,...n.slice(0,1)],BackgroundColor:{value:"White"}}})]},e)})]})}var C=!0;function j(){return(0,a.jsx)(i.Qb,{componentFactory:r.w9.getComponentFactory({}),layoutData:u,children:(0,a.jsxs)("main",{className:"flex flex-col pb-20",children:[(0,a.jsxs)("div",{className:"mx-6 md:mx-12 py-10",children:[(0,a.jsx)("h1",{className:"typo-h-1 text-blue-500",children:"Featured Links + Tabs — Color Variants"}),(0,a.jsx)("p",{className:"typo-p-3 text-gray-400 mt-2",children:"8 existing colors + 5 new Innovation Hub dark-background variants (Inno Violet, Inno Red, Inno Teal, Inno Core Blue, Inno Core Yellow)."})]}),(0,a.jsx)(w,{}),(0,a.jsx)(S,{}),(0,a.jsx)(y,{}),(0,a.jsx)(N,{})]})})}}},function(e){e.O(0,[802,894,183,51,231,888,774,179],function(){return e(e.s=3346)}),_N_E=e.O()}]);