@storybook/addon-onboarding 0.0.36-canary.59.a5dbb09.0 → 0.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/manager.mjs +8 -3
- package/package.json +1 -1
package/dist/manager.mjs
CHANGED
|
@@ -32,7 +32,7 @@ var Ao=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var jo=(t,o)=>{f
|
|
|
32
32
|
align-items: center;
|
|
33
33
|
justify-content: center;
|
|
34
34
|
padding: 0 0.75rem;
|
|
35
|
-
background: ${({theme:t,variant:o})=>o==="primary"?t.color.secondary:o==="secondary"?t.
|
|
35
|
+
background: ${({theme:t,variant:o})=>o==="primary"?t.color.secondary:o==="secondary"?t.color.lighter:o==="outline"?"transparent":t.color.secondary};
|
|
36
36
|
color: ${({theme:t,variant:o})=>o==="primary"?t.color.lightest:o==="secondary"||o==="outline"?t.darkest:t.color.lightest};
|
|
37
37
|
box-shadow: ${({variant:t})=>t==="primary"?"none":t==="secondary"||t==="outline"?"#D9E8F2 0 0 0 1px inset":"none"};
|
|
38
38
|
height: 32px;
|
|
@@ -52,7 +52,7 @@ var Ao=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var jo=(t,o)=>{f
|
|
|
52
52
|
box-shadow: ${({variant:t})=>t==="primary"?"inset 0 0 0 1px rgba(0, 0, 0, 0.2)":t==="secondary"||t==="outline"?"inset 0 0 0 1px #0b94eb":"inset 0 0 0 2px rgba(0, 0, 0, 0.1)"};
|
|
53
53
|
}
|
|
54
54
|
`,m=forwardRef(({children:t,onClick:o,variant:r="primary",...n},i)=>e.createElement(qo,{ref:i,onClick:o,variant:r,...n},t));});var Jo,Ro,te,oe,ee,rt,nt=a(()=>{N();Jo=styled.div`
|
|
55
|
-
background:
|
|
55
|
+
background: ${({theme:t})=>t.base==="dark"?"#292A2C":t.color.lightest};
|
|
56
56
|
width: 260px;
|
|
57
57
|
padding: 15px;
|
|
58
58
|
border-radius: 5px;
|
|
@@ -74,7 +74,7 @@ var Ao=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var jo=(t,o)=>{f
|
|
|
74
74
|
display: flex;
|
|
75
75
|
justify-content: flex-end;
|
|
76
76
|
margin-top: 15px;
|
|
77
|
-
`,rt=({step:t,primaryProps:o,tooltipProps:r})=>e.createElement(Jo,{...r},e.createElement(Ro,null,t.title&&e.createElement(te,null,t.title),e.createElement(oe,null,t.content)),!t.hideNextButton&&e.createElement(ee,{id:"buttonNext"},e.createElement(m,{...o,...t.onNextButtonClick?{onClick:t.onNextButtonClick}:{}},"Next")));});function it({api:t,isFinalStep:o,onFirstTourDone:r,onLastTourDone:n}){let[i,s]=useState(),p=useTheme();return useEffect(()=>{t.once(UPDATE_STORY_ARGS,()=>{s(3);});},[]),e.createElement(ie,{steps:o?[{target:"#example-button--warning",title:"Congratulations!",content:e.createElement(e.Fragment,null,"You just created your first story. You nailed the basics. ",e.createElement("br",null),"Continue setting up your project and start writing stories for your components."),placement:"right",disableOverlay:!0,disableBeacon:!0,floaterProps:{disableAnimation:!0},onNextButtonClick(){n();}}]:[{target:"#storybook-explorer-tree > div",title:"Storybook is built from stories",content:"Storybook stories represent the key states of each of your components. For example, this Button component has four stories.",placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",title:"Storybook previews are interactive",content:"Whenever you modify code or stories, Storybook automatically updates how it previews your components.",placement:"bottom"},{target:"#root div[role=main]",title:"Interactive story playground",content:e.createElement(e.Fragment,null,"See how a story renders with different data and state without touching code.",e.createElement("br",null),e.createElement("br",null),"Try it out by pressing this button.",e.createElement(tt,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},hideNextButton:!0},{target:"#control-primary",title:"Congratulations!",content:e.createElement(e.Fragment,null,"You've learned how to control your stories interactively. Now let's explore how to write your first story.",e.createElement(z,{numberOfPieces:800,recycle:!1,tweenDuration:2e4})),placement:"right",disableOverlay:!0}],continuous:!0,stepIndex:i,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:l=>{!o&&l.status===STATUS.FINISHED&&r();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:p.base==="light"?"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))":"drop-shadow(
|
|
77
|
+
`,rt=({step:t,primaryProps:o,tooltipProps:r})=>e.createElement(Jo,{...r},e.createElement(Ro,null,t.title&&e.createElement(te,null,t.title),e.createElement(oe,null,t.content)),!t.hideNextButton&&e.createElement(ee,{id:"buttonNext"},e.createElement(m,{...o,...t.onNextButtonClick?{onClick:t.onNextButtonClick}:{}},"Next")));});function it({api:t,isFinalStep:o,onFirstTourDone:r,onLastTourDone:n}){let[i,s]=useState(),p=useTheme();return useEffect(()=>{t.once(UPDATE_STORY_ARGS,()=>{s(3);});},[]),e.createElement(ie,{steps:o?[{target:"#example-button--warning",title:"Congratulations!",content:e.createElement(e.Fragment,null,"You just created your first story. You nailed the basics. ",e.createElement("br",null),"Continue setting up your project and start writing stories for your components."),placement:"right",disableOverlay:!0,disableBeacon:!0,floaterProps:{disableAnimation:!0},onNextButtonClick(){n();}}]:[{target:"#storybook-explorer-tree > div",title:"Storybook is built from stories",content:"Storybook stories represent the key states of each of your components. For example, this Button component has four stories.",placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",title:"Storybook previews are interactive",content:"Whenever you modify code or stories, Storybook automatically updates how it previews your components.",placement:"bottom"},{target:"#root div[role=main]",title:"Interactive story playground",content:e.createElement(e.Fragment,null,"See how a story renders with different data and state without touching code.",e.createElement("br",null),e.createElement("br",null),"Try it out by pressing this button.",e.createElement(tt,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},hideNextButton:!0},{target:"#control-primary",title:"Congratulations!",content:e.createElement(e.Fragment,null,"You've learned how to control your stories interactively. Now let's explore how to write your first story.",e.createElement(z,{numberOfPieces:800,recycle:!1,tweenDuration:2e4})),placement:"right",disableOverlay:!0}],continuous:!0,stepIndex:i,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:l=>{!o&&l.status===STATUS.FINISHED&&r();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,filter:p.base==="light"?"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))":"drop-shadow(#fff5 0px 0px 0.5px) drop-shadow(#fff5 0px 0px 0.5px)"}}},tooltipComponent:rt,styles:{spotlight:{border:"solid 2px #004c7c"},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},options:{zIndex:1e4,primaryColor:p.color.secondary,arrowColor:p.base==="dark"?"#292A2C":p.color.lightest}}})}var st=a(()=>{ot();H();nt();});var lt,de,dt,mt=a(()=>{lt=styled.div`
|
|
78
78
|
background-color: rgba(27, 28, 29, 0.48);
|
|
79
79
|
position: fixed;
|
|
80
80
|
inset: 0px;
|
|
@@ -362,6 +362,11 @@ var Ao=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var jo=(t,o)=>{f
|
|
|
362
362
|
padding-left: 15px;
|
|
363
363
|
padding-right: 15px;
|
|
364
364
|
padding-top: 6px;
|
|
365
|
+
border-left: ${({theme:t})=>t.base==="dark"?1:0}px solid #fff2;
|
|
366
|
+
border-bottom: ${({theme:t})=>t.base==="dark"?1:0}px solid #fff2;
|
|
367
|
+
border-top: ${({theme:t})=>t.base==="dark"?1:0}px solid #fff2;
|
|
368
|
+
border-radius: 6px 0 0 6px;
|
|
369
|
+
overflow: hidden;
|
|
365
370
|
|
|
366
371
|
&& {
|
|
367
372
|
pre {
|