https://paragon-openedx.netlify.app/component---src-templates-comp…c-popover-readme-md-3596a80b0546d9e5123a.js

1"use strict";(self.webpackChunkparagon_pattern_library_documentation=self.webpackChunkparagon_pattern_library_documentation||[]).push([[789],{6697:function(e,t,n){n.d(t,{Am:function(){return a.A}});n(48515),n(70207);var a=n(51876);n(55517)},26343:function(e,t,n){n.r(t),n.d(t,{default:function(){return _}});var a=n(43023),o=n(63696);function r(e){const t=Object.assign({p:"p",code:"code",a:"a",h2:"h2",span:"span",pre:"pre"},(0,a.RP)(),e.components),{Link:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Link",!0),o.createElement(o.Fragment,null,o.createElement(t.p,null,"Popovers are small overlays that present additional content without cluttering the page."),"\n",o.createElement(t.p,null,"Note that from accessibility perspective ",o.createElement(t.code,null,"Popover")," is treated as a tooltip (the element has ",o.createElement(t.code,null,'role="tooltip"'),") which means that it\nshouldn't contain interactive elements (e.g, buttons, links, etc.), you can read more about tooltip specifications ",o.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role"},"here"),".\nTry using ",o.createElement(n,{to:"/components/modal/modal-popup/"},"ModalPopup")," instead if you want ",o.createElement(t.code,null,"Popover"),"'s behaviour with interactive elements."),"\n",o.createElement(t.h2,{id:"basic-usage"},"Basic Usage",o.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#basic-usage"},o.createElement(t.span,{className:"pgn-doc__anchor"},"#"))),"\n",o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx",live:!0},"<>\n  {['top', 'right', 'bottom', 'left'].map((placement) => (\n    <OverlayTrigger\n      trigger=\"click\"\n      key={placement}\n      placement={placement}\n      overlay={\n        <Popover id={`popover-positioned-${placement}`}>\n          <Popover.Title as=\"h3\">{`Popover ${placement}`}</Popover.Title>\n          <Popover.Content>\n            <strong>Holy guacamole!</strong> Check this info.\n          </Popover.Content>\n        </Popover>\n      }\n    >\n      <Button variant=\"secondary\" className=\"mr-2 mb-2\">Popover on {placement}</Button>\n    </OverlayTrigger>\n  ))}\n</>\n")),"\n",o.createElement(t.h2,{id:"state-variants"},"State variants",o.createElement(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#state-variants"},o.createElement(t.span,{className:"pgn-doc__anchor"},"#"))),"\n",o.createElement(t.pre,null,o.createElement(t.code,{className:"language-jsx",live:!0},'<>\n  <OverlayTrigger\n    trigger="click"\n    key="top-basic"\n    placement="top"\n    overlay={\n      <Popover className="popover-positioned-top">\n        <Popover.Title as="h5">Popover Basic</Popover.Title>\n        <Popover.Content>\n          <strong>Holy guacamole!</strong> Check this info.\n        </Popover.Content>\n      </Popover>\n    }\n  >\n    <Button variant="secondary" className="mr-2 mb-2">\n      Popover Basic\n    </Button>\n  </OverlayTrigger>\n  <OverlayTrigger\n    trigger="click"\n    key="top-success"\n    placement="top"\n    overlay={\n      <Popover className="popover-positioned-top" variant="success">\n        <Popover.Title as="h5"><Icon src={CheckCircle}/> Popover Success</Popover.Title>\n        <Popover.Content>\n          <strong>Holy guacamole!</strong> Check this info.\n        </Popover.Content>\n      </Popover>\n    }\n  >\n    <Button variant="secondary" className="mr-2 mb-2">\n      Popover Success\n    </Button>\n  </OverlayTrigger>\n  <OverlayTrigger\n    trigger="click"\n    key="top-warning"\n    placement="top"\n    overlay={\n      <Popover className="popover-positioned-top" variant="warning">\n        <Popover.Title as="h5"><Icon src={WarningFilled} /> Popover Warning</Popover.Title>\n        <Popover.Content>\n          <strong>Holy guacamole!</strong> Check this info.\n        </Popover.Content>\n      </Popover>\n    }\n  >\n    <Button variant="secondary" className="mr-2 mb-2">\n      Popover Warning\n    </Button>\n  </OverlayTrigger>\n  <OverlayTrigger\n    trigger="click"\n    key="top-danger"\n    placement="top"\n    overlay={\n      <Popover className="popover-positioned-top" variant="danger">\n        <Popover.Title as="h5"><Icon src={Info} /> Popover Danger</Popover.Title>\n        <Popover.Content>\n          <strong>Holy guacamole!</strong> Check this info.\n        </Popover.Content>\n      </Popover>\n    }\n  >\n    <Button variant="secondary" className="mr-2 mb-2">\n      Popover Danger\n    </Button>\n  </OverlayTrigger>\n</>\n')))}var l=function(e={}){const{wrapper:t}=Object.assign({},(0,a.RP)(),e.components);return t?o.createElement(t,e,o.createElement(r,e)):r(e)};var c=n(69215),s=n(4452),i=n.n(s),m=n(89715),p=n(70420),u=n(85091),g=n(40481),d=n(90731),v=n(68147),h=n(29845),E=n(11399),b=n(53704),y=n(43268),P=n(72042),f=n(38442),A=n(22757),N=n(77663),C=n(48521);const k={h2:e=>o.createElement(P.A,Object.assign({h:"2"},e)),h3:e=>o.createElement(P.A,Object.assign({h:"3"},e)),h4:e=>o.createElement(P.A,Object.assign({h:"4"},e)),h5:e=>o.createElement(P.A,Object.assign({h:"5"},e)),h6:e=>o.createElement(P.A,Object.assign({h:"6"},e)),pre:e=>

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