Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addon-docs/Angular: Add unique id to Angular stories #15501

Merged
merged 1 commit into from
Jul 9, 2021
Merged

Addon-docs/Angular: Add unique id to Angular stories #15501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions addons/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
"js-string-escape": "^1.0.1",
"loader-utils": "^2.0.0",
"lodash": "^4.17.20",
"nanoid": "^3.1.23",
"p-limit": "^3.1.0",
"prettier": "~2.2.1",
"prop-types": "^15.7.2",
Expand Down
3 changes: 2 additions & 1 deletion addons/docs/src/frameworks/angular/prepareForInline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import pLimit from 'p-limit';
import { nanoid } from 'nanoid';

import { IStory, StoryContext } from '@storybook/angular';
import { rendererFactory } from '@storybook/angular/renderer';
Expand All @@ -18,7 +19,7 @@ export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: S
}

return limit(async () => {
const renderer = await rendererFactory.getRendererInstance(id, node);
const renderer = await rendererFactory.getRendererInstance(`${id}-${nanoid(10)}`, node);
await renderer.render({
forced: false,
parameters,
Expand Down
22 changes: 22 additions & 0 deletions examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Addons/Docs/DuplicateStories Basic 1`] = `
<storybook-wrapper>
<my-button
ng-reflect-is-disabled="false"
ng-reflect-label="Args test"
>
<button
class="btn-secondary btn-medium"
ng-reflect-ng-class="btn-secondary,btn-medium"
>
<img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
width="100"
/>
Args test

</button>
</my-button>
</storybook-wrapper>
`;
21 changes: 21 additions & 0 deletions examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import {Story, Meta, Canvas} from '@storybook/addon-docs';
import {DocButtonComponent} from "./doc-button/doc-button.component";
import * as stories from './doc-button/doc-button.stories';

<Meta title="Addons/Docs/DuplicateStories" component={DocButtonComponent} />

# Duplicate stories

Using the same component more than once. Note the imported story can only be used once and thereafter the links have to be used

<Canvas>
<Story story={stories.Basic}/>
</Canvas>

<Canvas>
<Story id="addons-docs-duplicatestories--basic" />
</Canvas>

<Canvas>
<Story id="addons-docs-duplicatestories--basic" />
</Canvas>
10 changes: 10 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5707,6 +5707,7 @@ __metadata:
lit-html: ^2.0.0-rc.3
loader-utils: ^2.0.0
lodash: ^4.17.20
nanoid: ^3.1.23
p-limit: ^3.1.0
prettier: ~2.2.1
prop-types: ^15.7.2
Expand Down Expand Up @@ -30639,6 +30640,15 @@ fsevents@^1.2.7:
languageName: node
linkType: hard

"nanoid@npm:^3.1.23":
version: 3.1.23
resolution: "nanoid@npm:3.1.23"
bin:
nanoid: bin/nanoid.cjs
checksum: a3207f946e2db59f8095118d5c57615f217e7f8a743bdb83212e222bd263516dbd83db226675d9b8634ed928ff2019db96ca06825a391af4256b02f7bec4b443
languageName: node
linkType: hard

"nanomatch@npm:^1.2.9":
version: 1.2.13
resolution: "nanomatch@npm:1.2.13"
Expand Down