@okta/odyssey-react-mui 1.52.0 → 1.53.0

package/dist/assets/PageHeader.stories-xG6qoBox.js

@@ -0,0 +1,364 @@
+import{j as e}from"./iframe-CQjT1fxh.js";import{P as r}from"./PageHeader-DHtVYyb-.js";import{O as Se}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{W as Ce}from"./WpComponentsStorybookThemeDecorator-Db3wSJC0.js";import{B as n}from"./Breadcrumbs-DlF1RjAJ.js";import{M as Ae}from"./MenuButton-BffESdH9.js";import{M as j}from"./MenuItem-Cmq8TfUJ.js";import{M as a}from"./Button-0PI4ljbj.js";import{M as Le}from"./Sync-Bo0k4rYZ.js";import{M as We}from"./Notification-CqbysXIb.js";import{M as Ie}from"./Link-BKNciOfr.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyProvider-PxeTd-wx.js";import"./tableRowClasses-Bk1uFtwh.js";import"./i18next-7SyOfhCu.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Link-thynTosX.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./Typography-Jr4Brrb5.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./Menu-DB2s3Jn0.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./isHostComponent-DVu5iVWx.js";import"./index-5Qx3hCfP.js";import"./Grow-DvH-Xu1P.js";import"./utils-D-QCjykO.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-C5P7v6Gt.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Fade-ZBabHGDm.js";import"./Paper-vUVrw-QB.js";import"./MenuList-D3GSt85L.js";import"./List-D0N4Xybp.js";import"./MuiPropsContext-Df02xyKB.js";import"./Chip-BgPaZbUf.js";import"./createSvgIcon-CaWcxZng.js";import"./Box--NDTewyO.js";import"./Box-CnVllI1S.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./Typography-CjpHjc10.js";import"./Group-BJr9nAnt.js";import"./User-BEFwQRGi.js";import"./MenuItem-CpMFWgaz.js";import"./Home-D8RWt2JU.js";import"./BaseMenuButton-BXkyi9Y-.js";import"./Box-B3rdnavX.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./BaseButton-C9tiChQu.js";import"./MuiPropsContext-D6i6qZME.js";import"./Tooltip-B-PXZNTK.js";import"./Tooltip-yxN-KFjL.js";import"./useControlled-BUhC7uWK.js";import"./Popper-CISS1LuJ.js";import"./Button-Dug4qNr3.js";import"./MenuContext-UsOwIWpO.js";import"./More-BAN0OFVF.js";const{action:t}=__STORYBOOK_MODULE_ACTIONS__,v=["Metadata A","Metadata B","Metadata C"],Fr={component:r,decorators:[Se,Ce],tags:["autodocs"]},i={render:Me=>e.jsxs(r,{testId:Me.testId,children:[e.jsxs(r.Breadcrumbs,{homeHref:"#",children:[e.jsx(n,{href:"#",onClick:t("Page Title click"),children:"Page Title"},"page1"),e.jsx(n,{children:"Current Page"},"current")]}),e.jsx(r.Image,{children:e.jsx("span",{style:{fontSize:48},children:"👤"})}),e.jsx(r.Title,{overline:"OVERLINE",status:{label:"BETA",severity:"info"},children:"Page title"}),e.jsx(r.Metadata,{items:v}),e.jsx(r.Description,{children:"Optional brief description about the section or page you are about to encounter below."}),e.jsx(r.Documentation,{href:"#",children:"Documentation"}),e.jsxs(r.Actions,{children:[e.jsx(Ae,{buttonLabel:"Secondary",children:e.jsx(j,{onClick:t("Action click"),children:"Action"})}),e.jsx(a,{label:"Primary",onClick:t("primary click"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates the composable API with all features. Components are automatically organized into the correct layout sections regardless of their order in the JSX."}}}},o={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsx(r.Description,{children:"Optional brief description about the section or page you are about to encounter below."})]})},s={render:()=>e.jsxs(r,{children:[e.jsxs(r.Breadcrumbs,{homeHref:"#",children:[e.jsx(n,{href:"#",onClick:t("Page Title click"),children:"Page Title"},"page1"),e.jsx(n,{children:"Current Page"},"current")]}),e.jsx(r.Title,{children:"Page title"})]})},c={render:()=>e.jsxs(r,{children:[e.jsx(r.BackLink,{href:"#",onClick:t("Back to list click"),children:"Back to list"}),e.jsx(r.Title,{children:"Page title"})]}),parameters:{docs:{description:{story:"Uses the simple backLink variant (no breadcrumbs or custom navigation provided)."}}}},d={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{status:{label:"BETA",severity:"info"},children:"Page title"}),e.jsx(r.Metadata,{items:v.slice(0,2)})]})},l={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsx(r.Documentation,{href:"#",children:"Documentation"})]}),parameters:{docs:{description:{story:"Shows the documentation link in the top-right corner."}}}},m={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsxs(r.Actions,{children:[e.jsx(a,{label:"Secondary",onClick:t("secondary click"),variant:"secondary"}),e.jsx(a,{label:"Primary",onClick:t("primary click"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates the actions area with React element buttons."}}}},p={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsxs(r.Actions,{children:[e.jsxs(Ae,{buttonLabel:"Menu",buttonVariant:"secondary",children:[e.jsx(j,{onClick:t("Option 1 click"),children:"Option 1"}),e.jsx(j,{onClick:t("Option 2 click"),children:"Option 2"})]}),e.jsx(a,{label:"Save",onClick:t("save click"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates mixing different types of React elements (MenuButton and Button) in the actions array."}}}},u={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Page title"}),e.jsxs(r.Actions,{children:[e.jsx(a,{label:"Action 1",onClick:t("action 1"),variant:"secondary"}),e.jsx(a,{label:"Action 2",onClick:t("action 2"),variant:"secondary"}),e.jsx(a,{label:"Action 3",onClick:t("action 3"),variant:"secondary"}),e.jsx(a,{label:"Action 4",onClick:t("action 4"),variant:"primary"}),e.jsx(a,{label:"Action 5",onClick:t("action 5"),variant:"primary"})]})]}),parameters:{docs:{description:{story:"Demonstrates that only the first 3 actions are rendered when more than 3 actions are provided. Actions 4 and 5 are ignored."}}}},h={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{status:{label:"ACTIVE",severity:"success"},children:"Page title"}),e.jsx(r.Metadata,{items:v}),e.jsx(r.Image,{children:e.jsx("span",{style:{fontSize:48},children:"👤"})})]})},g={render:()=>e.jsxs(r,{children:[e.jsx(r.Actions,{children:e.jsx(a,{label:"Action First",variant:"primary"})}),e.jsx(r.Title,{children:"Title comes after actions in code"}),e.jsxs(r.Breadcrumbs,{homeHref:"#",children:[e.jsx(n,{href:"#",children:"Parent"},"parent"),e.jsx(n,{children:"Current"},"current")]}),e.jsx(r.Documentation,{href:"#",children:"Help"})]}),parameters:{docs:{description:{story:"Demonstrates that component order in JSX doesn't matter - they are automatically organized into the correct layout sections."}}}},P={render:()=>e.jsxs(r,{children:[e.jsx(r.Metadata,{items:["Created: 2024","Updated: 2025","Version: 1.0"]}),e.jsx(r.Title,{children:"Title Always Appears First"}),e.jsx(r.Description,{children:"Even when metadata is declared before the title in JSX, the title will always render first."})]}),parameters:{docs:{description:{story:"Demonstrates that title always renders before metadata, regardless of their order in JSX. This ensures consistent visual hierarchy."}}}},y={render:()=>e.jsx(r,{children:e.jsx(r.Title,{children:"Minimal Page"})}),parameters:{docs:{description:{story:"Minimal example with just a title."}}}},x={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{clampLines:2,children:"This Is A Very Long Page Title That Should Be Clamped To Two Lines And Show Ellipsis When It Overflows The Container Width"}),e.jsx(r.Description,{children:"Description text appears below the clamped title."})]})}),parameters:{docs:{description:{story:"Demonstrates using `clampLines` on the title to limit it to 2 lines with ellipsis overflow."}}}},b={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{wordBreak:"break-all",children:"ThisIsAnExtremelyLongWordWithoutSpacesThatWouldNormallyOverflowTheContainer_LikeAVeryLongIdentifierOrURL"}),e.jsx(r.Description,{children:"The title above uses wordBreak to handle long unbroken strings."})]})}),parameters:{docs:{description:{story:"Demonstrates using `wordBreak` on the title to handle long words or identifiers without spaces."}}}},H={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{children:"Resource Details"}),e.jsx(r.Description,{clampLines:3,children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident."}),e.jsx(r.Actions,{children:e.jsx(a,{label:"View More",variant:"secondary"})})]})}),parameters:{docs:{description:{story:"Demonstrates using `clampLines` on the description to truncate long text after 3 lines."}}}},T={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{children:"API Endpoint"}),e.jsx(r.Description,{wordBreak:"break-all",children:"Endpoint URL: https://api.example.com/v1/resources/very-long-resource-identifier/sub-resources/another-long-identifier/actions"})]})}),parameters:{docs:{description:{story:"Demonstrates using `wordBreak` on the description to handle long URLs or paths."}}}},k={render:()=>e.jsx("div",{style:{maxWidth:"600px"},children:e.jsxs(r,{children:[e.jsx(r.Title,{clampLines:1,wordBreak:"break-word",children:"VeryLongResourceName_WithUnderscores_ThatNeedsToBeHandledProperly"}),e.jsx(r.Metadata,{items:["Created: 2024","Status: Active"]}),e.jsx(r.Description,{clampLines:2,wordBreak:"break-word",children:"This resource has a very long description with URLs like https://example.com/very-long-path/to/resource that need to wrap properly. The description will be clamped to 2 lines with ellipsis."}),e.jsx(r.Actions,{children:e.jsx(a,{label:"Edit",variant:"primary"})})]})}),parameters:{docs:{description:{story:"Demonstrates combining `wordBreak` and `clampLines` on both title and description to handle complex overflow scenarios."}}}},f={render:()=>e.jsxs(r,{children:[e.jsx(r.Title,{children:"Default policy"}),e.jsx(r.Metadata,{items:[{text:"Staged branch created",icon:e.jsx(Le,{})},{text:"Monitoring staged branch",icon:e.jsx(We,{}),status:{label:"ENABLED",severity:"success"}},{text:"Connection: con_DM5TbREdm8tDPR",icon:e.jsx(Ie,{})}]}),e.jsx(r.Description,{children:"Demonstrates metadata with icons, status badges, and mixed content types."})]}),parameters:{docs:{description:{story:"Shows how metadata can include Odyssey icons, status badges, and mixed content. Icons provide visual context and help users quickly identify different types of information."}}}};var B,D,w;i.parameters={...i.parameters,docs:{...(B=i.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  render: args => <PageHeader testId={args.testId}>
+      <PageHeader.Breadcrumbs homeHref="#">
+        <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
+          Page Title
+        </Breadcrumb>
+        <Breadcrumb key="current">Current Page</Breadcrumb>
+      </PageHeader.Breadcrumbs>
+      <PageHeader.Image>
+        <span style={{
+        fontSize: 48
+      }}>👤</span>
+      </PageHeader.Image>
+      <PageHeader.Title overline="OVERLINE" status={{
+      label: "BETA",
+      severity: "info"
+    }}>
+        Page title
+      </PageHeader.Title>
+      <PageHeader.Metadata items={sampleMetadata} />
+      <PageHeader.Description>
+        Optional brief description about the section or page you are about to
+        encounter below.
+      </PageHeader.Description>
+      <PageHeader.Documentation href="#">
+        Documentation
+      </PageHeader.Documentation>
+      <PageHeader.Actions>
+        <MenuButton buttonLabel="Secondary">
+          <MenuItem onClick={action("Action click")}>Action</MenuItem>
+        </MenuButton>
+        <Button label="Primary" onClick={action("primary click")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates the composable API with all features. Components are automatically organized into the correct layout sections regardless of their order in the JSX."
+      }
+    }
+  }
+}`,...(w=(D=i.parameters)==null?void 0:D.docs)==null?void 0:w.source}}};var A,M,S;o.parameters={...o.parameters,docs:{...(A=o.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Description>
+        Optional brief description about the section or page you are about to
+        encounter below.
+      </PageHeader.Description>
+    </PageHeader>
+}`,...(S=(M=o.parameters)==null?void 0:M.docs)==null?void 0:S.source}}};var C,L,W;s.parameters={...s.parameters,docs:{...(C=s.parameters)==null?void 0:C.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Breadcrumbs homeHref="#">
+        <Breadcrumb href="#" key="page1" onClick={action("Page Title click")}>
+          Page Title
+        </Breadcrumb>
+        <Breadcrumb key="current">Current Page</Breadcrumb>
+      </PageHeader.Breadcrumbs>
+      <PageHeader.Title>Page title</PageHeader.Title>
+    </PageHeader>
+}`,...(W=(L=s.parameters)==null?void 0:L.docs)==null?void 0:W.source}}};var I,O,E;c.parameters={...c.parameters,docs:{...(I=c.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.BackLink href="#" onClick={action("Back to list click")}>
+        Back to list
+      </PageHeader.BackLink>
+      <PageHeader.Title>Page title</PageHeader.Title>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Uses the simple backLink variant (no breadcrumbs or custom navigation provided)."
+      }
+    }
+  }
+}`,...(E=(O=c.parameters)==null?void 0:O.docs)==null?void 0:E.source}}};var R,U,V;d.parameters={...d.parameters,docs:{...(R=d.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title status={{
+      label: "BETA",
+      severity: "info"
+    }}>
+        Page title
+      </PageHeader.Title>
+      <PageHeader.Metadata items={sampleMetadata.slice(0, 2)} />
+    </PageHeader>
+}`,...(V=(U=d.parameters)==null?void 0:U.docs)==null?void 0:V.source}}};var _,z,N;l.parameters={...l.parameters,docs:{...(_=l.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Documentation href="#">
+        Documentation
+      </PageHeader.Documentation>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows the documentation link in the top-right corner."
+      }
+    }
+  }
+}`,...(N=(z=l.parameters)==null?void 0:z.docs)==null?void 0:N.source}}};var q,J,X;m.parameters={...m.parameters,docs:{...(q=m.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Actions>
+        <Button label="Secondary" onClick={action("secondary click")} variant="secondary" />
+        <Button label="Primary" onClick={action("primary click")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates the actions area with React element buttons."
+      }
+    }
+  }
+}`,...(X=(J=m.parameters)==null?void 0:J.docs)==null?void 0:X.source}}};var F,K,Y;p.parameters={...p.parameters,docs:{...(F=p.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Actions>
+        <MenuButton buttonLabel="Menu" buttonVariant="secondary">
+          <MenuItem onClick={action("Option 1 click")}>Option 1</MenuItem>
+          <MenuItem onClick={action("Option 2 click")}>Option 2</MenuItem>
+        </MenuButton>
+        <Button label="Save" onClick={action("save click")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates mixing different types of React elements (MenuButton and Button) in the actions array."
+      }
+    }
+  }
+}`,...(Y=(K=p.parameters)==null?void 0:K.docs)==null?void 0:Y.source}}};var G,Q,Z;u.parameters={...u.parameters,docs:{...(G=u.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Page title</PageHeader.Title>
+      <PageHeader.Actions>
+        <Button label="Action 1" onClick={action("action 1")} variant="secondary" />
+        <Button label="Action 2" onClick={action("action 2")} variant="secondary" />
+        <Button label="Action 3" onClick={action("action 3")} variant="secondary" />
+        <Button label="Action 4" onClick={action("action 4")} variant="primary" />
+        <Button label="Action 5" onClick={action("action 5")} variant="primary" />
+      </PageHeader.Actions>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates that only the first 3 actions are rendered when more than 3 actions are provided. Actions 4 and 5 are ignored."
+      }
+    }
+  }
+}`,...(Z=(Q=u.parameters)==null?void 0:Q.docs)==null?void 0:Z.source}}};var $,ee,re;h.parameters={...h.parameters,docs:{...($=h.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title status={{
+      label: "ACTIVE",
+      severity: "success"
+    }}>
+        Page title
+      </PageHeader.Title>
+      <PageHeader.Metadata items={sampleMetadata} />
+      <PageHeader.Image>
+        <span style={{
+        fontSize: 48
+      }}>👤</span>
+      </PageHeader.Image>
+    </PageHeader>
+}`,...(re=(ee=h.parameters)==null?void 0:ee.docs)==null?void 0:re.source}}};var te,ae,ne;g.parameters={...g.parameters,docs:{...(te=g.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      {/* Actions declared first but will appear in sidebar */}
+      <PageHeader.Actions>
+        <Button label="Action First" variant="primary" />
+      </PageHeader.Actions>
+
+      {/* Title declared second but will appear in main content */}
+      <PageHeader.Title>Title comes after actions in code</PageHeader.Title>
+
+      {/* Breadcrumbs declared last but will appear at top */}
+      <PageHeader.Breadcrumbs homeHref="#">
+        <Breadcrumb href="#" key="parent">
+          Parent
+        </Breadcrumb>
+        <Breadcrumb key="current">Current</Breadcrumb>
+      </PageHeader.Breadcrumbs>
+
+      {/* Documentation also in sidebar */}
+      <PageHeader.Documentation href="#">Help</PageHeader.Documentation>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates that component order in JSX doesn't matter - they are automatically organized into the correct layout sections."
+      }
+    }
+  }
+}`,...(ne=(ae=g.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var ie,oe,se;P.parameters={...P.parameters,docs:{...(ie=P.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      {/* Metadata declared before title in JSX */}
+      <PageHeader.Metadata items={["Created: 2024", "Updated: 2025", "Version: 1.0"]} />
+
+      {/* But title will still render first */}
+      <PageHeader.Title>Title Always Appears First</PageHeader.Title>
+
+      <PageHeader.Description>
+        Even when metadata is declared before the title in JSX, the title will
+        always render first.
+      </PageHeader.Description>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates that title always renders before metadata, regardless of their order in JSX. This ensures consistent visual hierarchy."
+      }
+    }
+  }
+}`,...(se=(oe=P.parameters)==null?void 0:oe.docs)==null?void 0:se.source}}};var ce,de,le;y.parameters={...y.parameters,docs:{...(ce=y.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Minimal Page</PageHeader.Title>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Minimal example with just a title."
+      }
+    }
+  }
+}`,...(le=(de=y.parameters)==null?void 0:de.docs)==null?void 0:le.source}}};var me,pe,ue;x.parameters={...x.parameters,docs:{...(me=x.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title clampLines={2}>
+          This Is A Very Long Page Title That Should Be Clamped To Two Lines And
+          Show Ellipsis When It Overflows The Container Width
+        </PageHeader.Title>
+        <PageHeader.Description>
+          Description text appears below the clamped title.
+        </PageHeader.Description>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`clampLines\` on the title to limit it to 2 lines with ellipsis overflow."
+      }
+    }
+  }
+}`,...(ue=(pe=x.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};var he,ge,Pe;b.parameters={...b.parameters,docs:{...(he=b.parameters)==null?void 0:he.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title wordBreak="break-all">
+          ThisIsAnExtremelyLongWordWithoutSpacesThatWouldNormallyOverflowTheContainer_LikeAVeryLongIdentifierOrURL
+        </PageHeader.Title>
+        <PageHeader.Description>
+          The title above uses wordBreak to handle long unbroken strings.
+        </PageHeader.Description>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`wordBreak\` on the title to handle long words or identifiers without spaces."
+      }
+    }
+  }
+}`,...(Pe=(ge=b.parameters)==null?void 0:ge.docs)==null?void 0:Pe.source}}};var ye,xe,be;H.parameters={...H.parameters,docs:{...(ye=H.parameters)==null?void 0:ye.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title>Resource Details</PageHeader.Title>
+        <PageHeader.Description clampLines={3}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident.
+        </PageHeader.Description>
+        <PageHeader.Actions>
+          <Button label="View More" variant="secondary" />
+        </PageHeader.Actions>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`clampLines\` on the description to truncate long text after 3 lines."
+      }
+    }
+  }
+}`,...(be=(xe=H.parameters)==null?void 0:xe.docs)==null?void 0:be.source}}};var He,Te,ke;T.parameters={...T.parameters,docs:{...(He=T.parameters)==null?void 0:He.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title>API Endpoint</PageHeader.Title>
+        <PageHeader.Description wordBreak="break-all">
+          Endpoint URL:
+          https://api.example.com/v1/resources/very-long-resource-identifier/sub-resources/another-long-identifier/actions
+        </PageHeader.Description>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates using \`wordBreak\` on the description to handle long URLs or paths."
+      }
+    }
+  }
+}`,...(ke=(Te=T.parameters)==null?void 0:Te.docs)==null?void 0:ke.source}}};var fe,je,ve;k.parameters={...k.parameters,docs:{...(fe=k.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+  render: () => <div style={{
+    maxWidth: "600px"
+  }}>
+      <PageHeader>
+        <PageHeader.Title clampLines={1} wordBreak="break-word">
+          VeryLongResourceName_WithUnderscores_ThatNeedsToBeHandledProperly
+        </PageHeader.Title>
+        <PageHeader.Metadata items={["Created: 2024", "Status: Active"]} />
+        <PageHeader.Description clampLines={2} wordBreak="break-word">
+          This resource has a very long description with URLs like
+          https://example.com/very-long-path/to/resource that need to wrap
+          properly. The description will be clamped to 2 lines with ellipsis.
+        </PageHeader.Description>
+        <PageHeader.Actions>
+          <Button label="Edit" variant="primary" />
+        </PageHeader.Actions>
+      </PageHeader>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates combining \`wordBreak\` and \`clampLines\` on both title and description to handle complex overflow scenarios."
+      }
+    }
+  }
+}`,...(ve=(je=k.parameters)==null?void 0:je.docs)==null?void 0:ve.source}}};var Be,De,we;f.parameters={...f.parameters,docs:{...(Be=f.parameters)==null?void 0:Be.docs,source:{originalSource:`{
+  render: () => <PageHeader>
+      <PageHeader.Title>Default policy</PageHeader.Title>
+      <PageHeader.Metadata items={[{
+      text: "Staged branch created",
+      icon: <SyncIcon />
+    }, {
+      text: "Monitoring staged branch",
+      icon: <NotificationIcon />,
+      status: {
+        label: "ENABLED",
+        severity: "success"
+      }
+    }, {
+      text: "Connection: con_DM5TbREdm8tDPR",
+      icon: <LinkIcon />
+    }]} />
+      <PageHeader.Description>
+        Demonstrates metadata with icons, status badges, and mixed content
+        types.
+      </PageHeader.Description>
+    </PageHeader>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows how metadata can include Odyssey icons, status badges, and mixed content. Icons provide visual context and help users quickly identify different types of information."
+      }
+    }
+  }
+}`,...(we=(De=f.parameters)==null?void 0:De.docs)==null?void 0:we.source}}};const Kr=["AllFeatures","Default","WithBreadcrumbs","WithBackLink","WithStatus","WithDocumentation","WithActions","WithMixedActions","WithTooManyActions","WithImage","OrderIndependent","MetadataBeforeTitle","Minimal","TitleWithClampLines","TitleWithWordBreak","DescriptionWithClampLines","DescriptionWithWordBreak","CombinedTitleAndDescriptionOverflow","WithRichMetadata"];export{i as AllFeatures,k as CombinedTitleAndDescriptionOverflow,o as Default,H as DescriptionWithClampLines,T as DescriptionWithWordBreak,P as MetadataBeforeTitle,y as Minimal,g as OrderIndependent,x as TitleWithClampLines,b as TitleWithWordBreak,m as WithActions,c as WithBackLink,s as WithBreadcrumbs,l as WithDocumentation,h as WithImage,p as WithMixedActions,f as WithRichMetadata,d as WithStatus,u as WithTooManyActions,Kr as __namedExportsOrder,Fr as default};

package/dist/assets/PageTemplate-BUVvgcIj.js

@@ -0,0 +1,21 @@
+import{s as r}from"./tableRowClasses-Bk1uFtwh.js";import{r as o,j as i}from"./iframe-CQjT1fxh.js";import{u as k}from"./OdysseyThemeProvider-BA0_xP7N.js";import{b as j,a as D}from"./Typography-CjpHjc10.js";import{u as M}from"./useMountLifecycleEffect-BNByHT_g.js";import{L as P}from"./Link-thynTosX.js";import{M as F}from"./Documentation-nAJnZGCK.js";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const H="data-unified-ui-shell",L=()=>{const[e,s]=o.useState(!1);return o.useEffect(()=>{s(!!document.querySelector(`[${H}]`))},[]),e},b=({children:e,href:s,icon:n,target:a})=>i.jsxs(P,{href:s,target:a,children:[n&&i.jsx("span",{className:"Link-icon",children:n}),e]}),g=o.memo(b);g.displayName="DocumentationLink";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const v=r("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"&&e!=="hasUiShell"&&e!=="isFullWidth"})(({hasUiShell:e,isFullWidth:s,odysseyDesignTokens:n})=>({maxWidth:s?"100%":`calc(1440px + ${n.Spacing6} + ${n.Spacing6})`,marginInline:s&&!e?n.Spacing6:"auto",padding:e?0:n.Spacing6})),R=r("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:e.Spacing4})),w=r("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({maxWidth:e.TypographyLineLengthMax,".MuiTypography-root:last-child":{marginBlockEnd:"0"}})),z=r("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({alignItems:"flex-end",display:"flex",flexDirection:"column",gap:e.Spacing4,minHeight:e.Spacing7,justifyContent:"center",whiteSpace:"nowrap"})),C=r("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({display:"flex",gap:e.Spacing2})),E=r("div",{shouldForwardProp:e=>!["drawerVariant","isDrawerOpen","isFirstRender","odysseyDesignTokens"].includes(e)})(({drawerVariant:e,isDrawerOpen:s,isFirstRender:n,odysseyDesignTokens:a})=>({"@keyframes animate-drawer-open":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 0"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 360px"}},"@keyframes animate-drawer-close":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 360px"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 0"}},display:"grid",gridGap:e==="persistent"&&!s?0:a.Spacing4,gap:e==="persistent"&&!s?0:a.Spacing4,marginBlock:a.Spacing4,gridTemplateColumns:e==="persistent"?s?"minmax(0, 1fr) 360px":"minmax(0, 1fr) 0":"minmax(0, 1fr)",animation:e==="persistent"&&(!n||s)?`animate-drawer-${s?"open":"close"} 225ms cubic-bezier(0, 0, 0.2, 1)`:void 0})),U=({children:e,description:s,documentationLink:n,documentationText:a,drawer:l,isFullWidth:f=!1,primaryCallToActionComponent:m,secondaryCallToActionComponent:d,tertiaryCallToActionComponent:c,title:p})=>{const t=k(),{isOpen:h,variant:x}=(l==null?void 0:l.props)??{},y=L(),u=o.useRef(!0),S=u.current,T=o.useCallback(()=>{u.current=!1},[]);return M({onMount:T}),i.jsxs(v,{hasUiShell:y,isFullWidth:f,odysseyDesignTokens:t,children:[i.jsxs(R,{odysseyDesignTokens:t,children:[i.jsxs(w,{odysseyDesignTokens:t,children:[p&&i.jsx(j,{children:p}),s&&i.jsx(D,{children:s})]}),i.jsxs(z,{odysseyDesignTokens:t,children:[n&&i.jsx(g,{href:n,icon:i.jsx(F,{}),target:"_blank",children:a}),(m||d||c)&&i.jsxs(C,{odysseyDesignTokens:t,children:[c,d,m]})]})]}),i.jsxs(E,{drawerVariant:x,isDrawerOpen:h,isFirstRender:S,odysseyDesignTokens:t,children:[e,l]})]})},B=o.memo(U);B.displayName="PageTemplate";export{B as M,H as u};

package/dist/assets/PageTemplate-Dfm2PU1P.js

@@ -0,0 +1,8 @@
+import{j as o}from"./iframe-CQjT1fxh.js";import{useMDXComponents as p}from"./index-D5BUEpVX.js";import{M as e,T as n,S as s,D as a,a as c}from"./blocks-D521Uej3.js";import{P as i}from"./PageTemplate.stories-mpYXgZT4.js";import"./preload-helper-Dp1pzeXC.js";import"./index-C77ZwfYm.js";import"./index-5Qx3hCfP.js";import"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./tableRowClasses-Bk1uFtwh.js";import"./WarningFilled-DOHs-JmZ.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./personData-Bi-Gg5yH.js";import"./Status-DyDCzqET.js";import"./MuiPropsContext-D6i6qZME.js";import"./Chip-BgPaZbUf.js";import"./createSvgIcon-CaWcxZng.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./PageTemplate-BUVvgcIj.js";import"./Typography-CjpHjc10.js";import"./Typography-Jr4Brrb5.js";import"./useMountLifecycleEffect-BNByHT_g.js";import"./Link-thynTosX.js";import"./Documentation-nAJnZGCK.js";import"./Dialog-DiU8nQnH.js";import"./Button-0PI4ljbj.js";import"./BaseButton-C9tiChQu.js";import"./Tooltip-B-PXZNTK.js";import"./Tooltip-yxN-KFjL.js";import"./Grow-DvH-Xu1P.js";import"./utils-D-QCjykO.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-BUhC7uWK.js";import"./Popper-CISS1LuJ.js";import"./ownerDocument-DW-IO8s5.js";import"./Button-Dug4qNr3.js";import"./FullScreenOverlay-GJH3R5s4.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./DialogContent-C6DlqjnA.js";import"./Paper-vUVrw-QB.js";import"./Fade-ZBabHGDm.js";import"./Modal-C5P7v6Gt.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./ownerWindow-HkKU3E4x.js";import"./createChainedFunction-BO_9K8Jh.js";import"./dialogActionsClasses-J0iu7jYO.js";import"./DialogTitle-B_QxN4PO.js";import"./Surface-s9E2mDWU.js";import"./DataTable-B5iX_c6m.js";import"./index.esm-Bohtd3OQ.js";import"./debounce-Be36O1Ab.js";import"./ListItem-BNz1zv6N.js";import"./FormHelperText-CVc1kPQJ.js";import"./FormLabel-CWWbs_c2.js";import"./List-D0N4Xybp.js";import"./Stack-Duw-TXBf.js";import"./createStyled-BKWdp2xc.js";import"./useThemeProps-BCUqwy59.js";import"./Box-CnVllI1S.js";import"./CircularProgress-D6L1y9kt.js";import"./Menu-DB2s3Jn0.js";import"./MenuList-D3GSt85L.js";import"./colorManipulator-BYcVMQmD.js";import"./IconButton-BPR_sq0F.js";import"./Radio-C5-GzJtb.js";import"./SwitchBase-C_6ALR3v.js";import"./Checkbox-mRntsWEy.js";import"./useMobilePicker-DJQJ3D8W.js";import"./Select-DE0mojaE.js";import"./ArrowDropDown-BbLKA4fg.js";import"./InputBase-BYnzr12H.js";import"./useThemeProps-Bc2iWdri.js";import"./InputAdornment-Clfg5IS6.js";import"./visuallyHidden-Dan1xhjv.js";import"./MenuItem-CpMFWgaz.js";import"./Collapse-DULszxZp.js";import"./AlertTitle-UQV7DT5q.js";import"./useSlot-BMAKysxJ.js";import"./Close-CELHOmN_.js";import"./LinearProgress-Z53mwHnp.js";import"./Skeleton-DxFSebyW.js";import"./Divider-C7lvc1xB.js";import"./Autocomplete-BajR4gNT.js";import"./ListSubheader-Dwx7m0BA.js";import"./tableSortLabelClasses-i_d6KGQQ.js";import"./FormControlLabel-BG9mNqQc.js";import"./DateTimePicker-ByepBMwy.js";import"./Tabs-BPWnyCAU.js";import"./DatePicker-vZfA4IWy.js";import"./Box-B3rdnavX.js";import"./MenuButton-BffESdH9.js";import"./BaseMenuButton-BXkyi9Y-.js";import"./MenuContext-UsOwIWpO.js";import"./More-BAN0OFVF.js";import"./Callout-WJN7MCgu.js";import"./Link-Cg_KakDo.js";import"./ExternalLink-3_gWbh_U.js";import"./EmptyState-B1EvR4rn.js";import"./DataFilters-4og6bOFS.js";import"./Autocomplete-BwSwXNq_.js";import"./useAutocomplete-DG_kuhWb.js";import"./index.esm-Dvk_qjX0.js";import"./Field-CqIOaZfg.js";import"./ScreenReaderText-toqV93JE.js";import"./FieldHint-Cs73lQge.js";import"./inputUtils-BBH9ADKa.js";import"./Checkbox-3Yu84dfy.js";import"./Hint-BXue9c6p.js";import"./CheckboxGroup-Bris2fCF.js";import"./FormGroup-D8ZDwdpx.js";import"./Radio-BlxlCYZY.js";import"./RadioGroup-sL620ofZ.js";import"./RadioGroup-BcwUBGJo.js";import"./SearchField-DmDpB-Sd.js";import"./Search-0744_rm_.js";import"./Tag-CYK8pNzu.js";import"./TagList-CunLkaIS.js";import"./TextField-DF5R_omM.js";import"./Filter-XcwxIcdg.js";import"./ChevronRight-QYu5EQHS.js";import"./useScrollIndication-BGw7dgC5.js";import"./ArrowRight-C5USrGY5.js";import"./MenuItem-Cmq8TfUJ.js";import"./List-CZ2bN2bA.js";import"./Show-C6ORd-wr.js";import"./Drawer-CYAKZaWu.js";import"./Form-jEIBfmsN.js";import"./Layout-XY1MknZE.js";function m(r){const t={a:"a",code:"code",p:"p",...p(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(e,{of:i}),`
+`,o.jsx(n,{of:i}),`
+`,o.jsx(s,{of:i}),`
+`,o.jsx(a,{of:i}),`
+`,o.jsxs(t.p,{children:[o.jsx(t.code,{children:"PageTemplate"}),` is a multi-purpose container that enforces Odyssey layout conventions, ensuring that
+your screens look consistent without you doing extra work.`]}),`
+`,o.jsxs(t.p,{children:["If you're an Okta employee, you can see the ",o.jsx(t.a,{href:"https://www.figma.com/design/jMsVlc6QrA5dQXqPEEVT7S/%F0%9F%93%A6-Odyssey-Templates?node-id=1862-40643",rel:"nofollow",children:"Figma here"}),"."]}),`
+`,o.jsx(c,{})]})}function vt(r={}){const{wrapper:t}={...p(),...r.components};return t?o.jsx(t,{...r,children:o.jsx(m,{...r})}):m(r)}export{vt as default};