"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[7260],{"../../node_modules/@mdx-js/react/lib/index.js":function(b,x,l){l.d(x,{BN:function(){return s},RP:function(){return j},gz:function(){return m},xA:function(){return f}});var p=l("../../node_modules/react/index.js");const s=p.createContext({});function m(i){return c;function c(o){const h=j(o.components);return p.createElement(i,{...o,allComponents:h})}}function j(i){const c=p.useContext(s);return p.useMemo(()=>typeof i=="function"?i(c):{...c,...i},[c,i])}const e={};function f({components:i,children:c,disableParentContext:o}){let h;return o?h=typeof i=="function"?i({}):i||e:h=j(i),p.createElement(s.Provider,{value:h},c)}},"./src/components/Layout/Layout.story.tsx":function(b,x,l){l.r(x),l.d(x,{Horizontal:function(){return L},Vertical:function(){return w},default:function(){return I}});var p=l("../../node_modules/react/index.js"),s=l("./src/components/Layout/Layout.tsx"),m=l("./src/components/Button/Button.tsx"),j=l("./src/utils/storybook/withStoryContainer.tsx"),e=l("../../node_modules/react/jsx-runtime.js"),f=l("../../node_modules/@mdx-js/react/lib/index.js"),i=l("../../node_modules/@storybook/blocks/dist/index.mjs"),c=l("./src/components/Select/Select.tsx");function o(d){const r=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",h3:"h3"},(0,f.RP)(),d.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r.h1,{id:"layout",children:"Layout"}),`
`,(0,e.jsx)(r.h2,{id:"generic",children:"Generic"}),`
`,(0,e.jsx)(r.p,{children:"Used for aligning items in specified orientation. Useful for multiple elements that need to be arranged in rows or columns."}),`
`,(0,e.jsxs)(r.p,{children:["Expects multiple elements as ",(0,e.jsx)(r.code,{children:"children"})," prop. This is the base for more specialised ",(0,e.jsx)(r.code,{children:"Horizontal-"})," and ",(0,e.jsx)(r.code,{children:"VerticalGroup"})," components."]}),`
`,(0,e.jsx)(r.h3,{id:"props",children:"Props"}),`
`,(0,e.jsx)(i.ov,{of:s.PE}),`
`,(0,e.jsx)(r.h2,{id:"horizontal",children:"Horizontal"}),`
`,(0,e.jsx)(r.p,{children:"Used for horizontally aligning several elements (e.g. Button, Select) with a predefined spacing between them."}),`
`,(0,e.jsx)(i.lN,{children:(0,e.jsxs)(s.Gy,{children:[(0,e.jsx)(m.$n,{children:"Button 1"}),(0,e.jsx)(m.$n,{children:"Button 2"}),(0,e.jsx)(m.$n,{children:"Button 3"})]})}),`
`,(0,e.jsx)(i.lN,{children:(0,e.jsxs)(s.Gy,{children:[(0,e.jsx)(c.l6,{width:25,onChange:()=>{},options:[{value:1,label:"Option 1"},{value:2,label:"Option 2"}]}),(0,e.jsx)(c.l6,{width:25,onChange:()=>{},options:[{value:1,label:"Option 1"},{value:2,label:"Option 2"}]}),(0,e.jsx)(c.l6,{width:25,onChange:()=>{},options:[{value:1,label:"Option 1"},{value:2,label:"Option 2"}]})]})}),`
`,(0,e.jsx)(r.h2,{id:"vertical",children:"Vertical"}),`
`,(0,e.jsx)(r.p,{children:"Used for vertically aligning several elements (e.g. Button, Select) with a predefined spacing between them."}),`
`,(0,e.jsx)(i.lN,{children:(0,e.jsxs)(s.gW,{children:[(0,e.jsx)(m.$n,{children:"Button 1"}),(0,e.jsx)(m.$n,{children:"Button 2"}),(0,e.jsx)(m.$n,{children:"Button 3"})]})}),`
`,(0,e.jsx)(i.lN,{children:(0,e.jsxs)(s.gW,{justify:"center",children:[(0,e.jsx)(c.l6,{width:25,onChange:()=>{},options:[{value:1,label:"Option 1"},{value:2,label:"Option 2"}]}),(0,e.jsx)(c.l6,{width:25,onChange:()=>{},options:[{value:1,label:"Option 1"},{value:2,label:"Option 2"}]}),(0,e.jsx)(c.l6,{width:25,onChange:()=>{},options:[{value:1,label:"Option 1"},{value:2,label:"Option 2"}]})]})})]})}function h(d={}){const{wrapper:r}=Object.assign({},(0,f.RP)(),d.components);return r?(0,e.jsx)(r,Object.assign({},d,{children:(0,e.jsx)(o,d)})):o(d)}var y=h,g=Object.defineProperty,O=Object.defineProperties,E=Object.getOwnPropertyDescriptors,P=Object.getOwnPropertySymbols,T=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable,R=(d,r,S)=>r in d?g(d,r,{enumerable:!0,configurable:!0,writable:!0,value:S}):d[r]=S,n=(d,r)=>{for(var S in r||(r={}))T.call(r,S)&&R(d,S,r[S]);if(P)for(var S of P(r))V.call(r,S)&&R(d,S,r[S]);return d},t=(d,r)=>O(d,E(r)),a,u,v,_,C,B,I={title:"Layout/Groups",component:s.PE,decorators:[j.d],subcomponents:{HorizontalGroup:s.Gy,VerticalGroup:s.gW},parameters:{docs:{page:y},controls:{exclude:["orientation"]}},args:{justify:"flex-start",spacing:"sm",align:"center",wrap:!1,width:"100%",containerWidth:300,containerHeight:0,showBoundaries:!1},argTypes:{containerWidth:{control:{type:"range",min:100,max:500,step:10}},containerHeight:{control:{type:"range",min:100,max:500,step:10}},justify:{control:{type:"select",options:["flex-start","flex-end","space-between","center"]}},align:{control:{type:"select",options:["flex-start","flex-end","center","normal"]}},spacing:{control:{type:"select",options:["xs","sm","md","lg"]}}}};const L=d=>p.createElement(s.Gy,n({},d),p.createElement(m.$n,null,"Save"),p.createElement(m.$n,null,"Cancel")),w=d=>p.createElement(s.gW,n({},d),p.createElement(m.$n,null,"Save"),p.createElement(m.$n,null,"Cancel"));L.parameters=t(n({},L.parameters),{docs:t(n({},(a=L.parameters)==null?void 0:a.docs),{source:n({originalSource:`args => {
  return <HorizontalGroup {...args}>
      <Button>Save</Button>
      <Button>Cancel</Button>
    </HorizontalGroup>;
}`},(v=(u=L.parameters)==null?void 0:u.docs)==null?void 0:v.source)})}),w.parameters=t(n({},w.parameters),{docs:t(n({},(_=w.parameters)==null?void 0:_.docs),{source:n({originalSource:`args => {
  return <VerticalGroup {...args}>
      <Button>Save</Button>
      <Button>Cancel</Button>
    </VerticalGroup>;
}`},(B=(C=w.parameters)==null?void 0:C.docs)==null?void 0:B.source)})})},"./src/components/Layout/Layout.tsx":function(b,x,l){l.d(x,{Gy:function(){return O},PE:function(){return g},gW:function(){return E}});var p=l("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=l("../../node_modules/react/index.js"),m=l("./src/themes/ThemeContext.tsx"),j=Object.defineProperty,e=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,c=(n,t,a)=>t in n?j(n,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[t]=a,o=(n,t)=>{for(var a in t||(t={}))f.call(t,a)&&c(n,a,t[a]);if(e)for(var a of e(t))i.call(t,a)&&c(n,a,t[a]);return n},h=(n,t)=>{var a={};for(var u in n)f.call(n,u)&&t.indexOf(u)<0&&(a[u]=n[u]);if(n!=null&&e)for(var u of e(n))t.indexOf(u)<0&&i.call(n,u)&&(a[u]=n[u]);return a},y=(n=>(n[n.Horizontal=0]="Horizontal",n[n.Vertical=1]="Vertical",n))(y||{});const g=n=>{var t=n,{children:a,orientation:u=0,spacing:v="sm",justify:_="flex-start",align:C="normal",wrap:B=!1,width:A="100%",height:I="100%"}=t,L=h(t,["children","orientation","spacing","justify","align","wrap","width","height"]);const w=(0,m.of)(T,u,v,_,C,B);return s.createElement("div",o({className:w.layout,style:{width:A,height:I}},L),s.Children.toArray(a).filter(Boolean).map((d,r)=>s.createElement("div",{className:w.childWrapper,key:r},d)))},O=({children:n,spacing:t,justify:a,align:u="center",wrap:v,width:_,height:C})=>s.createElement(g,{spacing:t,justify:a,orientation:0,align:u,width:_,height:C,wrap:v},n),E=({children:n,spacing:t,justify:a,align:u,width:v,height:_})=>s.createElement(g,{spacing:t,justify:a,orientation:1,align:u,width:v,height:_},n),P=({children:n,padding:t,margin:a,grow:u,shrink:v})=>{const _=useStyles2(R,t,a);return React.createElement("div",{className:cx(_.wrapper,u!==void 0&&css({flexGrow:u}),v!==void 0&&css({flexShrink:v}))},n)},T=(n,t,a,u,v,_)=>{const C=a!=="none"?n.spacing(V[a]):0,B=t===0&&!_||t===1?0:`-${C}`,A=t===1?"vertical-group":"horizontal-group";return{layout:(0,p.AH)({label:A,display:"flex",flexDirection:t===1?"column":"row",flexWrap:_?"wrap":"nowrap",justifyContent:u,alignItems:v,height:"100%",maxWidth:"100%",marginBottom:B}),childWrapper:(0,p.AH)({label:"layoutChildrenWrapper",marginBottom:t===0&&!_?0:C,marginRight:t===0?C:0,display:"flex",alignItems:v,"&:last-child":{marginBottom:t===1?0:void 0,marginRight:t===0?0:void 0}})}},V={none:0,xs:.5,sm:1,md:2,lg:3},R=(n,t,a)=>{const u=t&&t!=="none"&&n.spacing(V[t])||0,v=a&&a!=="none"&&n.spacing(V[a])||0;return{wrapper:css({label:"container",margin:v,padding:u})}};try{g.displayName="Layout",g.__docgenInfo={description:"",displayName:"Layout",props:{orientation:{defaultValue:{value:"Orientation.Horizontal"},description:"",name:"orientation",required:!1,type:{name:"enum",value:[{value:"0"},{value:"1"}]}},spacing:{defaultValue:{value:"sm"},description:"",name:"spacing",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},justify:{defaultValue:{value:"flex-start"},description:"",name:"justify",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"space-between"'}]}},align:{defaultValue:{value:"center"},description:"",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"normal"'}]}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"string"}},wrap:{defaultValue:{value:"false"},description:"",name:"wrap",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#Layout"]={docgenInfo:g.__docgenInfo,name:"Layout",path:"src/components/Layout/Layout.tsx#Layout"})}catch{}try{O.displayName="HorizontalGroup",O.__docgenInfo={description:"",displayName:"HorizontalGroup",props:{width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"string"}},wrap:{defaultValue:{value:"false"},description:"",name:"wrap",required:!1,type:{name:"boolean"}},align:{defaultValue:{value:"center"},description:"",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"normal"'}]}},spacing:{defaultValue:{value:"sm"},description:"",name:"spacing",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},justify:{defaultValue:{value:"flex-start"},description:"",name:"justify",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"space-between"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#HorizontalGroup"]={docgenInfo:O.__docgenInfo,name:"HorizontalGroup",path:"src/components/Layout/Layout.tsx#HorizontalGroup"})}catch{}try{E.displayName="VerticalGroup",E.__docgenInfo={description:"",displayName:"VerticalGroup",props:{width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"string"}},align:{defaultValue:{value:"center"},description:"",name:"align",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"normal"'}]}},spacing:{defaultValue:{value:"sm"},description:"",name:"spacing",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},justify:{defaultValue:{value:"flex-start"},description:"",name:"justify",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"flex-start"'},{value:'"flex-end"'},{value:'"space-between"'}]}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#VerticalGroup"]={docgenInfo:E.__docgenInfo,name:"VerticalGroup",path:"src/components/Layout/Layout.tsx#VerticalGroup"})}catch{}try{P.displayName="Container",P.__docgenInfo={description:"",displayName:"Container",props:{padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},margin:{defaultValue:null,description:"",name:"margin",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"none"'}]}},grow:{defaultValue:null,description:"",name:"grow",required:!1,type:{name:"number"}},shrink:{defaultValue:null,description:"",name:"shrink",required:!1,type:{name:"number"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Layout.tsx#Container"]={docgenInfo:P.__docgenInfo,name:"Container",path:"src/components/Layout/Layout.tsx#Container"})}catch{}},"./src/utils/storybook/withStoryContainer.tsx":function(b,x,l){l.d(x,{d:function(){return j}});var p=l("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=l("../../node_modules/react/index.js");const m=({width:e,height:f,showBoundaries:i,children:c})=>{const o="#f0f0f0",h=e?`${e}px`:"100%",y=f!==0?`${f}px`:"auto",g=i&&(0,p.AH)({backgroundColor:"white",backgroundSize:"30px 30px",backgroundPosition:"0 0, 15px 15px",backgroundImage:`linear-gradient(
          45deg,
          ${o} 25%,
          transparent 25%,
          transparent 75%,
          ${o} 75%,
          ${o}
        ),
        linear-gradient(45deg, ${o} 25%, transparent 25%, transparent 75%, ${o} 75%, ${o})`});return s.createElement("div",{className:(0,p.cx)((0,p.AH)({width:h,height:y}),g)},c)},j=(e,f)=>s.createElement(m,{width:f.args.containerWidth,height:f.args.containerHeight,showBoundaries:f.args.showBoundaries},e())},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(b,x,l){/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var p=l("../../node_modules/react/index.js"),s=Symbol.for("react.element"),m=Symbol.for("react.fragment"),j=Object.prototype.hasOwnProperty,e=p.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,f={key:!0,ref:!0,__self:!0,__source:!0};function i(c,o,h){var y,g={},O=null,E=null;h!==void 0&&(O=""+h),o.key!==void 0&&(O=""+o.key),o.ref!==void 0&&(E=o.ref);for(y in o)j.call(o,y)&&!f.hasOwnProperty(y)&&(g[y]=o[y]);if(c&&c.defaultProps)for(y in o=c.defaultProps,o)g[y]===void 0&&(g[y]=o[y]);return{$$typeof:s,type:c,key:O,ref:E,props:g,_owner:e.current}}x.Fragment=m,x.jsx=i,x.jsxs=i},"../../node_modules/react/jsx-runtime.js":function(b,x,l){b.exports=l("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
