https://paragon-openedx.netlify.app/component---src-templates-comp…src-stack-readme-md-32eaa1e1f4682aa8fc11.js

1"use strict";(self.webpackChunkparagon_pattern_library_documentation=self.webpackChunkparagon_pattern_library_documentation||[]).push([[4726],{6697:function(e,t,n){n.d(t,{Am:function(){return a.A}});n(48515),n(70207);var a=n(51876);n(55517)},48521:function(e,t,n){var a=n(63696),r=n(33049),l=n(93636),c=n(6697);const o=Array(5).fill({variableName:a.createElement(r.A,null),computedValue:a.createElement(r.A,null)});t.A=function({rawStylesheet:e}){const{0:t,1:n}=(0,a.useState)(o),r=(0,c.Am)();return(0,a.useEffect)(()=>{setTimeout(()=>{const t=getComputedStyle(document.body),r=e.filter(e=>e.match(/var\((\w|-|_)*\)/g)).map(e=>{const n=e.trim(),r=n.match(/(?<=var?\()(.*)(?=\))/g),l=r?t.getPropertyValue(r[0]):"";return{variableName:a.createElement("code",null,n),computedValue:a.createElement("code",null,l)}});n(r)},1e3)},[e,r.name]),a.createElement(l.A,{data:t,itemCount:t.length,columns:[{Header:"CSS Variable",accessor:"variableName"},{Header:"Computed Value",accessor:"computedValue"}]},a.createElement(l.A.Table,null))}},87071:function(e,t,n){n.r(t),n.d(t,{default:function(){return j}});var a=n(43023),r=n(63696);function l(e){const t=Object.assign({p:"p",a:"a",h2:"h2",span:"span",pre:"pre",code:"code",ul:"ul",li:"li",strong:"strong"},(0,a.RP)(),e.components);return r.createElement(r.Fragment,null,r.createElement(t.p,null,"Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. Similar to the ",r.createElement(t.a,{href:"https://react-bootstrap.github.io/docs/layout/stack/"},"Bootstrap Stack")," component."),"\n",r.createElement(t.h2,{id:"basic-usage"},"Basic Usage",r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#basic-usage"},r.createElement(t.span,{className:"pgn-doc__anchor"},"#"))),"\n",r.createElement(t.h2,{id:"vertical-direction"},"Vertical direction",r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#vertical-direction"},r.createElement(t.span,{className:"pgn-doc__anchor"},"#"))),"\n",r.createElement(t.p,null,"Stacks are vertical by default and stacked items are full-width by default. Watch this pull request to see more details about the ",r.createElement(t.a,{href:"https://github.com/openedx/paragon/pull/1188"},"auto stretching behavior"),"."),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-jsx",live:!0},"<Stack gap={3}>\n  <Button>first button</Button>\n  <Button>second button</Button>\n  <Button>third button</Button>\n</Stack>\n")),"\n",r.createElement(t.h2,{id:"horizontal-direction"},"Horizontal direction",r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#horizontal-direction"},r.createElement(t.span,{className:"pgn-doc__anchor"},"#"))),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-jsx",live:!0},'<Stack direction="horizontal" gap={3}>\n  <div className="border p-2">first block</div>\n  <div className="border p-2">second block</div>\n  <div className="border p-2">third block</div>\n</Stack>\n')),"\n",r.createElement(t.h2,{id:"reversed-props"},"Reversed props",r.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#reversed-props"},r.createElement(t.span,{className:"pgn-doc__anchor"},"#"))),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Vertical")," with ",r.createElement(t.code,null,"reversed")," prop"),"\n"),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-jsx",live:!0},"<Stack gap={3} reversed>\n  <Button>first button</Button>\n  <Button>second button</Button>\n  <Button>third button</Button>\n</Stack>\n")),"\n",r.createElement(t.ul,null,"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Horizontal")," with ",r.createElement(t.code,null,"reversed")," prop"),"\n"),"\n",r.createElement(t.pre,null,r.createElement(t.code,{className:"language-jsx",live:!0},'<Stack direction="horizontal" gap={3} reversed>\n  <div className="border p-2">first block</div>\n  <div className="border p-2">second block</div>\n  <div className="border p-2">third block</div>\n</Stack>\n')))}var c=function(e={}){const{wrapper:t}=Object.assign({},(0,a.RP)(),e.components);return t?r.createElement(t,e,r.createElement(l,e)):l(e)},o=n(69215),s=n(4452),i=n.n(s),m=n(89715),d=n(70420),u=n(85091),p=n(40481),h=n(90731),E=n(68147),g=n(29845),b=n(11399),v=n(53704),f=n(43268),N=n(72042),A=n(38442),_=n(22757),k=n(77663),S=n(48521);const x={h2:e=>r.createElement(N.A,Object.assign({h:"2"},e)),h3:e=>r.createElement(N.A,Object.assign({h:"3"},e)),h4:e=>r.createElement(N.A,Object.assign({h:"4"},e)),h5:e=>r.createElement(N.A,Object.assign({h:"5"},e)),h6:e=>r.createElement(N.A,Object.assign({h:"6"},e)),pre:e=>

1r.createElement("div",e),code:g.A,Link:o.Link};function y({data:{mdx:e,components:t},pageContext:{cssVariablesData:n,componentsUsageInsights:l,githubEditPath:c},children:o}){var s,g,N,y;const j=(0,m.Ub)({maxWidth:d.A.large.maxWidth}),{0:w,1:B}=(0,r.useState)(!1),{settings:C}=(0,r.useContext)(E.SettingsContext),O=t.nodes.reduce((e,t)=>(e[t.displayName]=t,e),{}),z="Theme Variables",P="theme-variables",V="Props API",I="props-api",$="Usage Insights",H="usage-insights",T=(null===(s=e.frontmatter)||void 0===s?void 0:s.components)||[],U=l.map(e=>e.replace(/\./g,"")),W=T.some(e=>U.includes(e)),J=(null===(g=e.frontmatter)||void 0===g||null===(N=g.status)||void 0===N?void 0:N.toLowerCase().includes("deprecate"))||!1;return(0,r.useEffect)(()=>B(!!j),[j]),r.createElement(v.A,{showMinimizedTitle:w,isMdx:!0,tocData:(()=>{var t,a;const r=JSON.parse(JSON.stringify(e.tableOfContents));var l,c;null==n||!n.length||null!==(t=r.items)&&void 0!==t&&t.includes()||(null===(l=r.items)||void 0===l||l.push({title:z,url:`#${P}`}));(null===(a=r.items)||void 0===a||a.push({title:V,url:`#${I}`}),W)&&(null===(c=r.items)||void 0===c||c.push({title:$,url:`#${H}`}));return r})(),githubEditPath:c},r.createElement(f.A,{title:e.frontmatter.title}),r.createElement(u.A,{size:C.containerWidth,className:"py-5"},J&&r.createElement(p.A,{variant:"warning"},r.createElement(p.A.Heading,null,"This component will be removed soon."),r.createElement("p",{className:"small mb-0"},e.frontmatter.notes)),r.createElement(h.A,{className:i()("justify-content-between",{"flex-column-reverse align-items-start":j}),direction:"horizontal"},r.createElement("h1",null,e.frontmatter.title),r.createElement(h.A,{className:i()("mb-2",{"justify-content-end":j}),direction:"horizontal",gap:2},r.createElement(k.A,{githubEditPath:c}),r.createElement(_.A,null))),r.createElement(a.xA,{components:x},o),!(null==n||!n.length)&&r.createElement("div",{className:"mb-5"},r.createElement("h2",{className:"mb-4 pgn-doc__heading",id:P},z,r.createElement("a",{href:`#${P}`,"aria-label":"Jump to CSS variables"},r.createElement("span",{className:"pgn-doc__anchor"},"#"))),r.createElement(S.A,{rawStylesheet:n})),(null===(y=O[T[0]])||void 0===y?void 0:y.props)&&r.createElement("h2",{className:"mb-5 pgn-doc__heading",id:I},V,r.createElement("a",{href:`#${I}`,"aria-label":"Props API"},r.createElement("span",{className:"pgn-doc__anchor"},"#"))),"string"!=typeof T&&(null==T?void 0:T.map(e=>{const t=O[e];return t?r.createElement(b.A,Object.assign({key:t.displayName},t)):null})),W&&r.createElement(r.Fragment,null,r.createElement("h2",{className:"pgn-doc__heading m-0",id:H},$,r.createElement("a",{href:`#${H}`,"aria-label":"Usage Insights"},r.createElement("span",{className:"pgn-doc__anchor"},"#"))),r.createElement(A.A,{data:T}))))}function j(e){return r.createElement(y,e,r.createElement(c,e))}}}]);
2//# sourceMappingURL=component---src-templates-component-page-template-tsx-content-file-path-src-stack-readme-md-32eaa1e1f4682aa8fc11.js.map