Skip to content

Commit a4b0b80

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #2416 from MoizMasud/issue#2415
feat: Add Edit on Carbon UI builder buttons to storybook
2 parents 842778a + 075d280 commit a4b0b80

File tree

21 files changed

+307
-1
lines changed

21 files changed

+307
-1
lines changed

‎src/accordion/accordion.stories.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ storiesOf("Components|Accordion", module)
1717
.addDecorator(withKnobs)
1818
.add("Basic", () => ({
1919
template: `
20+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22Accordion%22&#13;
21+
%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22accordion%22%2C%22align%22%3A%22&#13;
22+
end%22%2C%22size%22%3A%22md%22%2C%22items%22%3A%5B%7B%22type%22%3A%22accordion-item%22&#13;
23+
%2C%22title%22%3A%22Accordion%20item%22%2C%22items%22%3A%5B%5D%2C%22id%22%3A%223%22%2C&#13;
24+
%22codeContext%22%3A%7B%22name%22%3A%22accordion-item-3%22%7D%7D%5D%2C%22id%22%3A%222%&#13;
25+
22%2C%22codeContext%22%3A%7B%22name%22%3A%22accordion-2%22%7D%7D%5D%2C%22id%22%3A1%7D&#13;
26+
%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
27+
Edit on Carbon UI Builder
28+
</a>
29+
<br><br>
2030
<ibm-accordion [align]="align" [size]="size">
2131
<ibm-accordion-item title="Section 1 title" (selected)="selected($event)">Lorem ipsum dolor sit amet, \
2232
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \

‎src/breadcrumb/breadcrumb.stories.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,21 @@ storiesOf("Components|Breadcrumb", module)
3333
.addDecorator(withKnobs)
3434
.add("Basic", () => ({
3535
template: `
36+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22&#13;
37+
Breadcrumb%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22&#13;
38+
breadcrumb%22%2C%22noTrailingSlash%22%3Afalse%2C%22items%22%3A%5B%7B%22type%22%3A%22&#13;
39+
breadcrumb-item%22%2C%22label%22%3A%22Breadcrumb%201%22%2C%22href%22%3A%22%2F%22&#13;
40+
%2C%22id%22%3A%223%22%2C%22codeContext%22%3A%7B%22name%22%3A%22breadcrumb-item-3%22&#13;
41+
%7D%7D%2C%7B%22type%22%3A%22breadcrumb-item%22%2C%22label%22%3A%22Breadcrumb%202%22&#13;
42+
%2C%22href%22%3A%22%2F%22%2C%22id%22%3A%224%22%2C%22codeContext%22%3A%7B%22name%22&#13;
43+
%3A%22breadcrumb-item-4%22%7D%7D%2C%7B%22type%22%3A%22breadcrumb-item%22%2C%22&#13;
44+
label%22%3A%22Breadcrumb%203%22%2C%22href%22%3A%22%2F%22%2C%22id%22%3A%225%22&#13;
45+
%2C%22codeContext%22%3A%7B%22name%22%3A%22breadcrumb-item-5%22%7D%7D%5D%2C%22&#13;
46+
id%22%3A%222%22%2C%22codeContext%22%3A%7B%22name%22%3A%22breadcrumb-2%22&#13;
47+
%7D%7D%5D%2C%22id%22%3A1%7D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
48+
Edit on Carbon UI Builder
49+
</a>
50+
<br><br>
3651
<ibm-breadcrumb [noTrailingSlash]="noTrailingSlash">
3752
<ibm-breadcrumb-item href="#1">
3853
Breadcrumb 1

‎src/button/button.stories.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,14 @@ storiesOf("Components|Button", module)
1919
.addDecorator(withKnobs)
2020
.add("Basic", () => ({
2121
template: `
22+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22&#13;
23+
%3A%22Button%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22&#13;
24+
button%22%2C%22kind%22%3A%22primary%22%2C%22text%22%3A%22Button%22%2C%22&#13;
25+
size%22%3A%22%22%2C%22id%22%3A%222%22%2C%22codeContext%22%3A%7B%22name%22&#13;
26+
%3A%22button-2%22%7D%7D%5D%2C%22id%22%3A1%7D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
27+
Edit on Carbon UI Builder
28+
</a>
29+
<br><br>
2230
<button [ibmButton]="ibmButton" (click)="click($event)" [size]="size" [isExpressive]="isExpressive">Button</button>
2331
&nbsp;
2432
<button [ibmButton]="ibmButton" (click)="click($event)" [size]="size" [isExpressive]="isExpressive" disabled="true">Button</button>

‎src/checkbox/checkbox.stories.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,14 @@ storiesOf("Components|Checkbox", module).addDecorator(
6060
.addDecorator(withKnobs)
6161
.add("Basic", () => ({
6262
template: `
63+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22&#13;
64+
Checkbox%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22checkbox%22&#13;
65+
%2C%22label%22%3A%22Checkbox%22%2C%22id%22%3A%222%22%2C%22codeContext%22&#13;
66+
%3A%7B%22name%22%3A%22checkbox-2%22%7D%7D%5D%2C%22id%22%3A1%7D%2C%22&#13;
67+
allCssClasses%22%3A%5B%5D%7D" target="_blank">
68+
Edit on Carbon UI Builder
69+
</a>
70+
<br><br>
6371
<fieldset class="bx--fieldset">
6472
<legend class="bx--label">{{label}}</legend>
6573
<ibm-checkbox

‎src/code-snippet/code-snippet.stories.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,18 @@ storiesOf("Components|Code Snippet", module).addDecorator(
6666
)
6767
.addDecorator(withKnobs)
6868
.add("Basic", () => ({
69-
template: `<ibm-code-snippet display="single">{{singleCode}}</ibm-code-snippet>`,
69+
template: `
70+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22&#13;
71+
Code%20snippet%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22&#13;
72+
code-snippet%22%2C%22variant%22%3A%22single%22%2C%22code%22%3A%22import&#13;
73+
%20%7B%20UIShellModule%20%7D%20from%20%27carbon-components-angular%27%3B%20&#13;
74+
%2F%2F%20Single%20line%20of%20code%22%2C%22id%22%3A%222%22%2C%22codeContext&#13;
75+
%22%3A%7B%22name%22%3A%22code-snippet-2%22%7D%7D%5D%2C%22id%22&#13;
76+
%3A1%7D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
77+
Edit on Carbon UI Builder
78+
</a>
79+
<br><br>
80+
<ibm-code-snippet display="single">{{singleCode}}</ibm-code-snippet>`,
7081
props: {
7182
singleCode: singleLineOfCode
7283
}

‎src/combobox/combobox.stories.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,20 @@ storiesOf("Components|Combobox", module)
265265
.addDecorator(withKnobs)
266266
.add("Basic", () => ({
267267
template: `
268+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22&#13;
269+
%3A%22Combobox%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22&#13;
270+
combobox%22%2C%22placeholder%22%3A%22placeholder%22%2C%22isMulti&#13;
271+
%22%3Afalse%2C%22isInline%22%3Afalse%2C%22selectionFeedback%22%3A&#13;
272+
%22top-after-reopen%22%2C%22direction%22%3A%22bottom%22%2C%22size%22&#13;
273+
%3A%22md%22%2C%22label%22%3A%22Label%22%2C%22helperText%22%3A%22&#13;
274+
Optional%20helper%20text%20here%22%2C%22listItems%22%3A%5B%7B%22&#13;
275+
text%22%3A%22Text%22%7D%5D%2C%22id%22%3A%222%22%2C%22codeContext&#13;
276+
%22%3A%7B%22name%22%3A%22combobox-2%22%7D%2C%22cssClasses%22%3A%5B%5D&#13;
277+
%7D%5D%2C%22id%22%3A1%7D%2C%22cssClasses%22%3A%5B%5D%2C%22&#13;
278+
allCssClasses%22%3A%5B%5D%7D" target="_blank">
279+
Edit on Carbon UI Builder
280+
</a>
281+
<br><br>
268282
<ibm-combo-box
269283
[disabled]="disabled"
270284
[invalid]="invalid"

‎src/content-switcher/content-switcher.stories.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,24 @@ storiesOf("Components|Content Switcher", module)
1717
.addDecorator(withKnobs)
1818
.add("Basic", () => ({
1919
template: `
20+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22&#13;
21+
%3A%22Content%20switcher%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22&#13;
22+
type%22%3A%22content-switcher%22%2C%22size%22%3A%22sm%22%2C%22&#13;
23+
selectedIndex%22%3A0%2C%22items%22%3A%5B%7B%22name%22%3A%22&#13;
24+
first%22%2C%22text%22%3A%22First%20section%22%2C%22disabled%22%3Afalse%2C%22&#13;
25+
type%22%3A%22switch-item%22%2C%22id%22%3A%223%22%2C%22codeContext%22%3A%7B%22&#13;
26+
name%22%3A%22switch-item-3%22%7D%7D%2C%7B%22name%22%3A%22second%22%2C%22text%22&#13;
27+
%3A%22Second%20section%22%2C%22disabled%22%3Afalse%2C%22type%22%3A%22&#13;
28+
switch-item%22%2C%22id%22%3A%224%22%2C%22codeContext%22%3A%7B%22name%22%3A%22&#13;
29+
switch-item-4%22%7D%7D%2C%7B%22name%22%3A%22third%22%2C%22text%22%3A%22Third%20&#13;
30+
section%22%2C%22disabled%22%3Afalse%2C%22type%22%3A%22switch-item%22%2C%22id%22&#13;
31+
%3A%225%22%2C%22codeContext%22%3A%7B%22name%22%3A%22switch-item-5%22%7D%7D%5D%2C&#13;
32+
%22id%22%3A%222%22%2C%22codeContext%22%3A%7B%22name%22%3A%22content-switcher-2%22&#13;
33+
%7D%2C%22cssClasses%22%3A%5B%5D%7D%5D%2C%22id%22%3A1%7D%2C%22cssClasses%22&#13;
34+
%3A%5B%5D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
35+
Edit on Carbon UI Builder
36+
</a>
37+
<br><br>
2038
<ibm-content-switcher
2139
(selected)="selected($event)"
2240
[theme]="theme"

‎src/dialog/overflow-menu/overflow-menu.stories.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@ storiesOf("Components|Overflow Menu", module)
3838
.addDecorator(withKnobs)
3939
.add("Basic", () => ({
4040
template: `
41+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22&#13;
42+
%3A%22Overflow%20menu%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22&#13;
43+
flipped%22%3Afalse%2C%22placement%22%3A%22bottom%22%2C%22type%22%3A%22&#13;
44+
overflow-menu%22%2C%22items%22%3A%5B%7B%22type%22%3A%22overflow-menu-item%22&#13;
45+
%2C%22itemText%22%3A%22Option%201%22%2C%22disabled%22%3Afalse%2C%22isDelete%22&#13;
46+
%3Afalse%2C%22hasDivider%22%3Afalse%2C%22id%22%3A%223%22%2C%22codeContext%2&#13;
47+
2%3A%7B%22name%22%3A%22overflow-menu-item-3%22%7D%7D%2C%7B%22type%22%3A%22&#13;
48+
overflow-menu-item%22%2C%22itemText%22%3A%22Option%202%22%2C%22disabled%22&#13;
49+
%3Afalse%2C%22isDelete%22%3Afalse%2C%22hasDivider%22%3Afalse%2C%22id%22&#13;
50+
%3A%224%22%2C%22codeContext%22%3A%7B%22name%22%3A%22overflow-menu-item-4&#13;
51+
%22%7D%7D%5D%2C%22id%22%3A%222%22%2C%22codeContext%22%3A%7B%22name%22&#13;
52+
%3A%22overflow-menu-2%22%7D%7D%5D%2C%22id%22%3A1%7D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
53+
Edit on Carbon UI Builder
54+
</a>
55+
<br><br>
4156
<div>
4257
<h1 style="margin-bottom: 1rem">Bottom placement</h1>
4358
<ibm-overflow-menu

‎src/dropdown/dropdown.stories.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,18 @@ storiesOf("Components|Dropdown", module)
172172
.addDecorator(withKnobs)
173173
.add("Basic", () => ({
174174
template: `
175+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22&#13;
176+
%3A%22Dropdown%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22&#13;
177+
dropdown%22%2C%22placeholder%22%3A%22placeholder%22%2C%22isMulti%22%3A&#13;
178+
false%2C%22isInline%22%3Afalse%2C%22selectionFeedback%22%3A%22top-after-reopen&#13;
179+
%22%2C%22direction%22%3A%22bottom%22%2C%22size%22%3A%22md%22%2C%22label%22%3A%22&#13;
180+
Label%22%2C%22helperText%22%3A%22Optional%20helper%20text%22%2C%22listItems%22&#13;
181+
%3A%5B%7B%22text%22%3A%22Text%22%7D%5D%2C%22id%22%3A%223%22%2C%22codeContext%22&#13;
182+
%3A%7B%22name%22%3A%22dropdown-3%22%7D%7D%5D%2C%22id%22%3A1%7D%2C%22&#13;
183+
allCssClasses%22%3A%5B%5D%7D" target="_blank">
184+
Edit on Carbon UI Builder
185+
</a>
186+
<br><br>
175187
<div style="width: 300px">
176188
<ibm-dropdown
177189
[label]="label"

‎src/grid/grid.stories.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,21 @@ storiesOf("Components|Grid", module)
1414
.addDecorator(withKnobs)
1515
.add("Basic", () => ({
1616
template: `
17+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22Grid%22%2C%22data%22&#13;
18+
%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22grid%22%2C%22outline%22%3Atrue%2C%22items%22%3A%5B%7B%22&#13;
19+
type%22%3A%22row%22%2C%22items%22%3A%5B%7B%22type%22%3A%22column%22%2C%22items%22%3A%5B%5D%2C%22id&#13;
20+
%22%3A%224%22%2C%22codeContext%22%3A%7B%22name%22%3A%22column-4%22%7D%7D%2C%7B%22type%22%3A%22colu&#13;
21+
mn%22%2C%22items%22%3A%5B%5D%2C%22id%22%3A%225%22%2C%22codeContext%22%3A%7B%22name%22%3A%22column-5&#13;
22+
%22%7D%7D%5D%2C%22id%22%3A%223%22%2C%22codeContext%22%3A%7B%22name%22%3A%22row-3%22%7D%7D%2C%7B%22&#13;
23+
type%22%3A%22row%22%2C%22items%22%3A%5B%7B%22type%22%3A%22column%22%2C%22items%22%3A%5B%5D%2C%22id&#13;
24+
%22%3A%227%22%2C%22codeContext%22%3A%7B%22name%22%3A%22column-7%22%7D%7D%2C%7B%22type%22%3A%22colu&#13;
25+
mn%22%2C%22items%22%3A%5B%5D%2C%22id%22%3A%228%22%2C%22codeContext%22%3A%7B%22name%22%3A%22column-8&#13;
26+
%22%7D%7D%5D%2C%22id%22%3A%226%22%2C%22codeContext%22%3A%7B%22name%22%3A%22row-6%22%7D%7D%5D%2C%22&#13;
27+
id%22%3A%222%22%2C%22codeContext%22%3A%7B%22name%22%3A%22grid-2%22%7D%2C%22cssClasses%22%3A%5B%5D&#13;
28+
%7D%5D%2C%22id%22%3A1%7D%2C%22cssClasses%22%3A%5B%5D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
29+
Edit on Carbon UI Builder
30+
</a>
31+
<br><br>
1732
<div ibmGrid [condensed]="gridCondensed">
1833
<div
1934
ibmRow

0 commit comments

Comments
 (0)