Skip to content

Commit bbb4ffe

Browse files
shilmanndelangen
authored andcommitted
Merge pull request #32286 from storybookjs/shilman/configure-utm
Onboarding: Add ref=configure to Configure.mdx links (cherry picked from commit 7615c69)
1 parent 0f86613 commit bbb4ffe

File tree

5 files changed

+55
-55
lines changed

5 files changed

+55
-55
lines changed

code/frameworks/nextjs-vite/template/cli/js/Configure.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
5252
<h4 className="sb-section-item-heading">Add styling and CSS</h4>
5353
<p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
5454
<a
55-
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
55+
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
5656
target="_blank"
5757
>Learn more<RightArrow /></a>
5858
</div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
6767
<h4 className="sb-section-item-heading">Provide context and mocking</h4>
6868
<p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
6969
<a
70-
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
70+
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
7171
target="_blank"
7272
>Learn more<RightArrow /></a>
7373
</div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
8585
`staticDirs` configuration option to specify folders to load when
8686
starting Storybook.</p>
8787
<a
88-
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
88+
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
8989
target="_blank"
9090
>Learn more<RightArrow /></a>
9191
</div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
113113
<p className="sb-section-item-paragraph">Auto-generate living,
114114
interactive reference documentation from your components and stories.</p>
115115
<a
116-
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
116+
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
117117
target="_blank"
118118
>Learn more<RightArrow /></a>
119119
</div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
128128
<h4 className="sb-section-item-heading">Publish to Chromatic</h4>
129129
<p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
130130
<a
131-
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
131+
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
132132
target="_blank"
133133
>Learn more<RightArrow /></a>
134134
</div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
144144
<p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
145145
implementation in one place.</p>
146146
<a
147-
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
147+
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
148148
target="_blank"
149149
>Learn more<RightArrow /></a>
150150
</div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
160160
<p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
161161
complex.</p>
162162
<a
163-
href="https://storybook.js.org/docs/writing-tests/?renderer=react"
163+
href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
164164
target="_blank"
165165
>Learn more<RightArrow /></a>
166166
</div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
175175
<h4 className="sb-section-item-heading">Accessibility</h4>
176176
<p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
177177
<a
178-
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
178+
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
179179
target="_blank"
180180
>Learn more<RightArrow /></a>
181181
</div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
190190
<h4 className="sb-section-item-heading">Theming</h4>
191191
<p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
192192
<a
193-
href="https://storybook.js.org/docs/configure/theming/?renderer=react"
193+
href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
194194
target="_blank"
195195
>Learn more<RightArrow /></a>
196196
</div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
202202
<h4>Addons</h4>
203203
<p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
204204
<a
205-
href="https://storybook.js.org/addons/"
205+
href="https://storybook.js.org/addons/?ref=configure"
206206
target="_blank"
207207
>Discover all addons<RightArrow /></a>
208208
</div>
@@ -281,7 +281,7 @@ export const RightArrow = () => <svg
281281
<p>Follow guided walkthroughs on for key workflows.</p>
282282

283283
<a
284-
href="https://storybook.js.org/tutorials/"
284+
href="https://storybook.js.org/tutorials/?ref=configure"
285285
target="_blank"
286286
>Discover tutorials<RightArrow /></a>
287287
</div>

code/frameworks/nextjs-vite/template/cli/ts/Configure.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
5252
<h4 className="sb-section-item-heading">Add styling and CSS</h4>
5353
<p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
5454
<a
55-
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
55+
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
5656
target="_blank"
5757
>Learn more<RightArrow /></a>
5858
</div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
6767
<h4 className="sb-section-item-heading">Provide context and mocking</h4>
6868
<p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
6969
<a
70-
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
70+
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
7171
target="_blank"
7272
>Learn more<RightArrow /></a>
7373
</div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
8585
`staticDirs` configuration option to specify folders to load when
8686
starting Storybook.</p>
8787
<a
88-
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
88+
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
8989
target="_blank"
9090
>Learn more<RightArrow /></a>
9191
</div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
113113
<p className="sb-section-item-paragraph">Auto-generate living,
114114
interactive reference documentation from your components and stories.</p>
115115
<a
116-
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
116+
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
117117
target="_blank"
118118
>Learn more<RightArrow /></a>
119119
</div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
128128
<h4 className="sb-section-item-heading">Publish to Chromatic</h4>
129129
<p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
130130
<a
131-
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
131+
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
132132
target="_blank"
133133
>Learn more<RightArrow /></a>
134134
</div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
144144
<p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
145145
implementation in one place.</p>
146146
<a
147-
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
147+
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
148148
target="_blank"
149149
>Learn more<RightArrow /></a>
150150
</div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
160160
<p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
161161
complex.</p>
162162
<a
163-
href="https://storybook.js.org/docs/writing-tests/?renderer=react"
163+
href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
164164
target="_blank"
165165
>Learn more<RightArrow /></a>
166166
</div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
175175
<h4 className="sb-section-item-heading">Accessibility</h4>
176176
<p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
177177
<a
178-
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
178+
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
179179
target="_blank"
180180
>Learn more<RightArrow /></a>
181181
</div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
190190
<h4 className="sb-section-item-heading">Theming</h4>
191191
<p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
192192
<a
193-
href="https://storybook.js.org/docs/configure/theming/?renderer=react"
193+
href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
194194
target="_blank"
195195
>Learn more<RightArrow /></a>
196196
</div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
202202
<h4>Addons</h4>
203203
<p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
204204
<a
205-
href="https://storybook.js.org/addons/"
205+
href="https://storybook.js.org/addons/?ref=configure"
206206
target="_blank"
207207
>Discover all addons<RightArrow /></a>
208208
</div>
@@ -281,7 +281,7 @@ export const RightArrow = () => <svg
281281
<p>Follow guided walkthroughs on for key workflows.</p>
282282

283283
<a
284-
href="https://storybook.js.org/tutorials/"
284+
href="https://storybook.js.org/tutorials/?ref=configure"
285285
target="_blank"
286286
>Discover tutorials<RightArrow /></a>
287287
</div>

code/frameworks/nextjs/template/cli/js/Configure.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
5252
<h4 className="sb-section-item-heading">Add styling and CSS</h4>
5353
<p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
5454
<a
55-
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
55+
href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
5656
target="_blank"
5757
>Learn more<RightArrow /></a>
5858
</div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
6767
<h4 className="sb-section-item-heading">Provide context and mocking</h4>
6868
<p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
6969
<a
70-
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
70+
href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
7171
target="_blank"
7272
>Learn more<RightArrow /></a>
7373
</div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
8585
`staticDirs` configuration option to specify folders to load when
8686
starting Storybook.</p>
8787
<a
88-
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
88+
href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
8989
target="_blank"
9090
>Learn more<RightArrow /></a>
9191
</div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
113113
<p className="sb-section-item-paragraph">Auto-generate living,
114114
interactive reference documentation from your components and stories.</p>
115115
<a
116-
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
116+
href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
117117
target="_blank"
118118
>Learn more<RightArrow /></a>
119119
</div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
128128
<h4 className="sb-section-item-heading">Publish to Chromatic</h4>
129129
<p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
130130
<a
131-
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
131+
href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
132132
target="_blank"
133133
>Learn more<RightArrow /></a>
134134
</div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
144144
<p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
145145
implementation in one place.</p>
146146
<a
147-
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
147+
href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
148148
target="_blank"
149149
>Learn more<RightArrow /></a>
150150
</div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
160160
<p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
161161
complex.</p>
162162
<a
163-
href="https://storybook.js.org/docs/writing-tests/?renderer=react"
163+
href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
164164
target="_blank"
165165
>Learn more<RightArrow /></a>
166166
</div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
175175
<h4 className="sb-section-item-heading">Accessibility</h4>
176176
<p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
177177
<a
178-
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
178+
href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
179179
target="_blank"
180180
>Learn more<RightArrow /></a>
181181
</div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
190190
<h4 className="sb-section-item-heading">Theming</h4>
191191
<p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
192192
<a
193-
href="https://storybook.js.org/docs/configure/theming/?renderer=react"
193+
href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
194194
target="_blank"
195195
>Learn more<RightArrow /></a>
196196
</div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
202202
<h4>Addons</h4>
203203
<p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
204204
<a
205-
href="https://storybook.js.org/addons/"
205+
href="https://storybook.js.org/addons/?ref=configure"
206206
target="_blank"
207207
>Discover all addons<RightArrow /></a>
208208
</div>
@@ -281,7 +281,7 @@ export const RightArrow = () => <svg
281281
<p>Follow guided walkthroughs on for key workflows.</p>
282282

283283
<a
284-
href="https://storybook.js.org/tutorials/"
284+
href="https://storybook.js.org/tutorials/?ref=configure"
285285
target="_blank"
286286
>Discover tutorials<RightArrow /></a>
287287
</div>

0 commit comments

Comments
 (0)