@okta/odyssey-react-mui 1.47.0 → 1.48.0

package/dist/assets/Typography.stories-CitS-iTX.js

@@ -0,0 +1,73 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{M as s,a as T,b as L}from"./Typography-CQfngSjD.js";import{O as B}from"./OdysseyStorybookThemeDecorator-CGH8visK.js";import{W}from"./WorkflowsComponentsStorybookThemeDecorator-DJR9iMBt.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./emotion-react-jsx-runtime.browser.esm-Cn-06VTs.js";import"./OdysseyThemeProvider-BykOaJq8.js";import"./Typography-CSpPZFTF.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-BPLFYiwr.js";import"./i18next-7SyOfhCu.js";const o={maxWidth:"400px",border:"1px dashed #ccc",padding:"16px"},M={title:"Resource Access Policy Components/Typography",component:s,decorators:[B,W],tags:["autodocs"],argTypes:{children:{control:"text",description:"The text content of the component."},clampLines:{control:"number",description:"Limits the text to a specified number of lines, adding ellipsis when content overflows.",table:{type:{summary:"number"}}},wordBreak:{control:"select",options:["normal","break-all","keep-all","break-word"],description:"Controls how text should break within the element.",table:{type:{summary:"string"}}}},args:{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."},parameters:{docs:{description:{component:"Demonstrates the `wordBreak` and `clampLines` props for controlling text overflow behavior in Typography components."}}}},r={render:()=>e.jsx("div",{style:o,children:e.jsx(s,{wordBreak:"break-all",children:"ThisIsAVeryLongWordWithoutSpacesThatNeedsToBeHandledProperly_AnExampleOfURLOrIdentifier"})}),parameters:{docs:{description:{story:"Use `wordBreak` to control how long words or URLs should break within the container. Useful for preventing overflow from long unbroken strings."}}}},n={render:()=>e.jsx("div",{style:o,children:e.jsx(s,{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."})}),parameters:{docs:{description:{story:"Use `clampLines` to limit the number of visible lines and add ellipsis when content overflows. Great for truncating long text in cards or lists."}}}},t={render:()=>e.jsx("div",{style:o,children:e.jsx(s,{clampLines:2,wordBreak:"break-word",children:"ThisIsAVeryLongWordWithoutSpaces_FollowedByMoreText_AndEvenMoreText_ThatWillDemonstrateHowBothPropsWorkTogether. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})}),parameters:{docs:{description:{story:"Combine `wordBreak` and `clampLines` to handle long words while limiting the number of visible lines. This ensures content fits within the container both horizontally and vertically."}}}},i={render:()=>e.jsx("div",{style:o,children:e.jsx(T,{clampLines:2,children:"This Is A Very Long Heading That Should Be Clamped To Two Lines And Show Ellipsis When It Overflows The Container"})}),parameters:{docs:{description:{story:"Example of using `clampLines` with a heading component to prevent long titles from taking up too much space."}}}},a={render:()=>e.jsx("div",{style:o,children:e.jsx(L,{wordBreak:"break-all",children:"https://example.com/very-long-url-path/that-would-normally-overflow/the-container/without-proper-word-breaking"})}),parameters:{docs:{description:{story:"Example of using `wordBreak` with a paragraph to handle long URLs that would otherwise overflow the container."}}}};var l,d,p;r.parameters={...r.parameters,docs:{...(l=r.parameters)==null?void 0:l.docs,source:{originalSource:`{
+  render: () => <div style={containerStyle}>
+      <Typography wordBreak="break-all">
+        ThisIsAVeryLongWordWithoutSpacesThatNeedsToBeHandledProperly_AnExampleOfURLOrIdentifier
+      </Typography>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Use \`wordBreak\` to control how long words or URLs should break within the container. Useful for preventing overflow from long unbroken strings."
+      }
+    }
+  }
+}`,...(p=(d=r.parameters)==null?void 0:d.docs)==null?void 0:p.source}}};var c,m,h;n.parameters={...n.parameters,docs:{...(c=n.parameters)==null?void 0:c.docs,source:{originalSource:`{
+  render: () => <div style={containerStyle}>
+      <Typography 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.
+      </Typography>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Use \`clampLines\` to limit the number of visible lines and add ellipsis when content overflows. Great for truncating long text in cards or lists."
+      }
+    }
+  }
+}`,...(h=(m=n.parameters)==null?void 0:m.docs)==null?void 0:h.source}}};var u,g,y;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  render: () => <div style={containerStyle}>
+      <Typography clampLines={2} wordBreak="break-word">
+        ThisIsAVeryLongWordWithoutSpaces_FollowedByMoreText_AndEvenMoreText_ThatWillDemonstrateHowBothPropsWorkTogether.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </Typography>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Combine \`wordBreak\` and \`clampLines\` to handle long words while limiting the number of visible lines. This ensures content fits within the container both horizontally and vertically."
+      }
+    }
+  }
+}`,...(y=(g=t.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};var w,f,v;i.parameters={...i.parameters,docs:{...(w=i.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  render: () => <div style={containerStyle}>
+      <Heading2 clampLines={2}>
+        This Is A Very Long Heading That Should Be Clamped To Two Lines And Show
+        Ellipsis When It Overflows The Container
+      </Heading2>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Example of using \`clampLines\` with a heading component to prevent long titles from taking up too much space."
+      }
+    }
+  }
+}`,...(v=(f=i.parameters)==null?void 0:f.docs)==null?void 0:v.source}}};var b,k,x;a.parameters={...a.parameters,docs:{...(b=a.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  render: () => <div style={containerStyle}>
+      <Paragraph wordBreak="break-all">
+        https://example.com/very-long-url-path/that-would-normally-overflow/the-container/without-proper-word-breaking
+      </Paragraph>
+    </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: "Example of using \`wordBreak\` with a paragraph to handle long URLs that would otherwise overflow the container."
+      }
+    }
+  }
+}`,...(x=(k=a.parameters)==null?void 0:k.docs)==null?void 0:x.source}}};const R=["WordBreak","LineClamp","CombinedWordBreakAndClamp","HeadingWithClamp","ParagraphWithWordBreak"];export{t as CombinedWordBreakAndClamp,i as HeadingWithClamp,n as LineClamp,a as ParagraphWithWordBreak,r as WordBreak,R as __namedExportsOrder,M as default};

package/dist/assets/Typography.stories-dzT0O_H3.js

@@ -0,0 +1,139 @@
+import{j as a}from"./jsx-runtime-CnH95YSl.js";import{r as ur}from"./index-NdkWRN8K.js";import{a as e}from"./axeRun-B-LchFqf.js";import{O as Tr}from"./OdysseyStorybookThemeDecorator-CGH8visK.js";import{t as T,M as Sr,h as S,d as or,c as sr,i as tr,e as ir,a as n,j as pr,f as dr,b as cr,g as yr,k as gr,l as hr}from"./Typography-B7ktrxCD.js";const xr={h1:hr,h2:gr,h3:yr,h4:cr,h5:dr,h6:pr,body:n,legend:ir,overline:tr,subordinate:sr,support:or},vr={component:Sr,decorators:[Tr],parameters:{docs:{description:""}},argTypes:{ariaDescribedBy:{description:"The ID of the element that describes the component.",table:{type:{summary:"string"}}},ariaLabel:{control:"text",description:"The ARIA label for the component.",table:{type:{summary:"string"}}},ariaLabelledBy:{description:"The ID of the element that labels the component.",table:{type:{summary:"string"}}},children:{control:"text",description:"The text content of the component.",table:{type:{summary:"ReactNode"}},type:{required:!0,name:"string"}},color:{options:T,control:{type:"select"},description:"The color of the text.",table:{type:{summary:T.join(" | ")}}},component:{description:"The HTML element the component should render, if different from the default",table:{type:{summary:"ElementType"}}},variant:{options:Object.keys(S),control:{type:"select"},description:"The variant of Typography to render.",table:{type:{summary:Object.keys(S).join(" | ")}}}},args:{children:"Spice is vital for space travel."}},o={name:"Generic Typography",args:{children:"This is standard text.",variant:"body"},render:r=>{const{variant:lr,...mr}=r;return ur.createElement(xr[lr],mr)}},s={name:"Heading 1",args:{children:"Heading 1",variant:"h1"},render:r=>a.jsx(hr,{...r})},t={name:"Heading 2",args:{children:"Heading 2",variant:"h2"},render:r=>a.jsx(gr,{...r})},i={name:"Heading 3",args:{children:"Heading 3",variant:"h3"},render:r=>a.jsx(yr,{...r}),play:async()=>{await e("Typography h3")}},p={name:"Heading 4",args:{children:"Heading 4",variant:"h4"},render:r=>a.jsx(cr,{...r}),play:async()=>{await e("Typography h4")}},d={name:"Heading 5",args:{children:"Heading 5",variant:"h5"},render:r=>a.jsx(dr,{...r}),play:async()=>{await e("Typography h5")}},c={name:"Heading 6",args:{children:"Heading 6",variant:"h6"},render:r=>a.jsx(pr,{...r}),play:async()=>{await e("Typography h6")}},y={name:"Paragraph",args:{children:"This is body copy.",variant:"body"},render:r=>a.jsx(n,{...r}),play:async()=>{await e("Typography body")}},g={name:"Legend",args:{children:"This is a legend",variant:"legend"},render:r=>a.jsx(ir,{...r}),play:async()=>{await e("Typography legend")}},h={name:"Overline",args:{children:"This is an Overline",variant:"overline"},render:r=>a.jsx(tr,{...r}),play:async()=>{await e("Typography Overline")}},l={name:"Subordinate",args:{children:"This is subordinate text.",variant:"subordinate"},render:r=>a.jsx(sr,{...r}),play:async()=>{await e("Typography subordinate")}},m={name:"Support",args:{children:"This is support text.",variant:"support"},render:r=>a.jsx(or,{...r}),play:async()=>{await e("Typography support")}},u={name:"Color",render:()=>a.jsxs(a.Fragment,{children:[a.jsx(n,{color:"primary",children:"This is a primary color."}),a.jsx(n,{color:"textPrimary",children:"This is a textPrimary color."}),a.jsx(n,{color:"secondary",children:"This is a secondary color."}),a.jsx(n,{color:"textSecondary",children:"This is a textSecondary color."}),a.jsx(n,{color:"error",children:"This is a error color."})]})};var x,v,H;o.parameters={...o.parameters,docs:{...(x=o.parameters)==null?void 0:x.docs,source:{originalSource:`{
+  name: "Generic Typography",
+  args: {
+    children: "This is standard text.",
+    variant: "body"
+  },
+  render: args => {
+    const {
+      variant,
+      ...props
+    } = args;
+    return createElement(variantMapping[variant as TypographyVariantValue], props as TypographyProps);
+  }
+}`,...(H=(v=o.parameters)==null?void 0:v.docs)==null?void 0:H.source}}};var b,j,w;s.parameters={...s.parameters,docs:{...(b=s.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  name: "Heading 1",
+  args: {
+    children: "Heading 1",
+    variant: "h1"
+  },
+  render: args => <Heading1 {...args} />
+  // h1 & h2 stories throw the "Incomplete" accessibility violation on color-contrast. Even though the contrast is correct,
+  // disabling it for now as the typography color- contrast test is covered by other headings below.
+  // play: async () => {
+  //   await axeRun('Typography h1');
+  // },
+}`,...(w=(j=s.parameters)==null?void 0:j.docs)==null?void 0:w.source}}};var f,P,M;t.parameters={...t.parameters,docs:{...(f=t.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  name: "Heading 2",
+  args: {
+    children: "Heading 2",
+    variant: "h2"
+  },
+  render: args => <Heading2 {...args} />
+  // play: async () => {
+  //   await axeRun('Typography h2');
+  // },
+}`,...(M=(P=t.parameters)==null?void 0:P.docs)==null?void 0:M.source}}};var O,R,z;i.parameters={...i.parameters,docs:{...(O=i.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  name: "Heading 3",
+  args: {
+    children: "Heading 3",
+    variant: "h3"
+  },
+  render: args => <Heading3 {...args} />,
+  play: async () => {
+    await axeRun("Typography h3");
+  }
+}`,...(z=(R=i.parameters)==null?void 0:R.docs)==null?void 0:z.source}}};var L,E,_;p.parameters={...p.parameters,docs:{...(L=p.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  name: "Heading 4",
+  args: {
+    children: "Heading 4",
+    variant: "h4"
+  },
+  render: args => <Heading4 {...args} />,
+  play: async () => {
+    await axeRun("Typography h4");
+  }
+}`,...(_=(E=p.parameters)==null?void 0:E.docs)==null?void 0:_.source}}};var k,C,B;d.parameters={...d.parameters,docs:{...(k=d.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  name: "Heading 5",
+  args: {
+    children: "Heading 5",
+    variant: "h5"
+  },
+  render: args => <Heading5 {...args} />,
+  play: async () => {
+    await axeRun("Typography h5");
+  }
+}`,...(B=(C=d.parameters)==null?void 0:C.docs)==null?void 0:B.source}}};var D,I,V;c.parameters={...c.parameters,docs:{...(D=c.parameters)==null?void 0:D.docs,source:{originalSource:`{
+  name: "Heading 6",
+  args: {
+    children: "Heading 6",
+    variant: "h6"
+  },
+  render: args => <Heading6 {...args} />,
+  play: async () => {
+    await axeRun("Typography h6");
+  }
+}`,...(V=(I=c.parameters)==null?void 0:I.docs)==null?void 0:V.source}}};var A,G,q;y.parameters={...y.parameters,docs:{...(A=y.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  name: "Paragraph",
+  args: {
+    children: "This is body copy.",
+    variant: "body"
+  },
+  render: args => <Paragraph {...args} />,
+  play: async () => {
+    await axeRun("Typography body");
+  }
+}`,...(q=(G=y.parameters)==null?void 0:G.docs)==null?void 0:q.source}}};var F,N,J;g.parameters={...g.parameters,docs:{...(F=g.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  name: "Legend",
+  args: {
+    children: "This is a legend",
+    variant: "legend"
+  },
+  render: args => <Legend {...args} />,
+  play: async () => {
+    await axeRun("Typography legend");
+  }
+}`,...(J=(N=g.parameters)==null?void 0:N.docs)==null?void 0:J.source}}};var K,Q,U;h.parameters={...h.parameters,docs:{...(K=h.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  name: "Overline",
+  args: {
+    children: "This is an Overline",
+    variant: "overline"
+  },
+  render: args => <Overline {...args} />,
+  play: async () => {
+    await axeRun("Typography Overline");
+  }
+}`,...(U=(Q=h.parameters)==null?void 0:Q.docs)==null?void 0:U.source}}};var W,X,Y;l.parameters={...l.parameters,docs:{...(W=l.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  name: "Subordinate",
+  args: {
+    children: "This is subordinate text.",
+    variant: "subordinate"
+  },
+  render: args => <Subordinate {...args} />,
+  play: async () => {
+    await axeRun("Typography subordinate");
+  }
+}`,...(Y=(X=l.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};var Z,$,rr;m.parameters={...m.parameters,docs:{...(Z=m.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  name: "Support",
+  args: {
+    children: "This is support text.",
+    variant: "support"
+  },
+  render: args => <Support {...args} />,
+  play: async () => {
+    await axeRun("Typography support");
+  }
+}`,...(rr=($=m.parameters)==null?void 0:$.docs)==null?void 0:rr.source}}};var ar,er,nr;u.parameters={...u.parameters,docs:{...(ar=u.parameters)==null?void 0:ar.docs,source:{originalSource:`{
+  name: "Color",
+  render: () => {
+    return <>
+        <Paragraph color="primary">This is a primary color.</Paragraph>
+        <Paragraph color="textPrimary">This is a textPrimary color.</Paragraph>
+        <Paragraph color="secondary">This is a secondary color.</Paragraph>
+        <Paragraph color="textSecondary">
+          This is a textSecondary color.
+        </Paragraph>
+        <Paragraph color="error">This is a error color.</Paragraph>
+      </>;
+  }
+}`,...(nr=(er=u.parameters)==null?void 0:er.docs)==null?void 0:nr.source}}};const Hr=["TypographyStory","Heading1Story","Heading2Story","Heading3Story","Heading4Story","Heading5Story","Heading6Story","BodyStory","LegendStory","OverlineStory","SubordinateStory","SupportStory","ColorStory"],Mr=Object.freeze(Object.defineProperty({__proto__:null,BodyStory:y,ColorStory:u,Heading1Story:s,Heading2Story:t,Heading3Story:i,Heading4Story:p,Heading5Story:d,Heading6Story:c,LegendStory:g,OverlineStory:h,SubordinateStory:l,SupportStory:m,TypographyStory:o,__namedExportsOrder:Hr,default:vr},Symbol.toStringTag,{value:"Module"}));export{Mr as T};