Skip to content

Commit 85573d5

Browse files
MoizMasudMoizMasud
committed
Add tile links
Signed-off-by: Moiz Masud <[email protected]>
1 parent cc3c582 commit 85573d5

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

‎src/tiles/tiles.stories.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,16 @@ storiesOf("Components|Tiles", module)
8686
}))
8787
.add("Clickable", () => ({
8888
template: `
89+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22&#13;
90+
Clickable%20tile%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22&#13;
91+
clickable-tile%22%2C%22items%22%3A%5B%7B%22type%22%3A%22text%22%2C%22text%22&#13;
92+
%3A%22Click%20the%20tile%20to%20open%20the%20Carbon%20Design%20System%22%2C%22&#13;
93+
id%22%3A%223%22%2C%22codeContext%22%3A%7B%22name%22%3A%22text-3%22%7D%7D%5D%2C&#13;
94+
%22id%22%3A%222%22%2C%22codeContext%22%3A%7B%22name%22%3A%22clickable-tile-2%22&#13;
95+
%7D%7D%5D%2C%22id%22%3A1%7D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
96+
Edit on Carbon UI Builder
97+
</a>
98+
<br><br>
8999
<ibm-clickable-tile href="https://www.carbondesignsystem.com/" target="_blank">
90100
Click the tile to open the Carbon Design System
91101
</ibm-clickable-tile>
@@ -104,6 +114,17 @@ storiesOf("Components|Tiles", module)
104114
}))
105115
.add("Selectable", () => ({
106116
template: `
117+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22&#13;
118+
Selectable%20tile%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22&#13;
119+
selectable-tile%22%2C%22standalone%22%3Atrue%2C%22disabled%22%3Afalse%2C%22&#13;
120+
selected%22%3Afalse%2C%22items%22%3A%5B%7B%22type%22%3A%22text%22%2C%22text%22&#13;
121+
%3A%22Selectable%20tile%22%2C%22id%22%3A%223%22%2C%22codeContext%22%3A%7B%22&#13;
122+
name%22%3A%22text-3%22%7D%7D%5D%2C%22id%22%3A%222%22%2C%22codeContext%22%3A%7B%22&#13;
123+
name%22%3A%22selectable-tile-2%22%7D%7D%5D%2C%22id%22%3A1%7D%2C%22&#13;
124+
allCssClasses%22%3A%5B%5D%7D" target="_blank">
125+
Edit on Carbon UI Builder
126+
</a>
127+
<br><br>
107128
<ibm-tile-group (selected)="selected($event)" [multiple]="false">
108129
<ibm-selection-tile value="tile1" [selected]="true">Selectable Tile</ibm-selection-tile>
109130
<ibm-selection-tile value="tile2">Selectable Tile</ibm-selection-tile>
@@ -116,6 +137,30 @@ storiesOf("Components|Tiles", module)
116137
}))
117138
.add("Multi-select", () => ({
118139
template: `
140+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22&#13;
141+
%3A%22Multi%20select%20tiles%20%22%2C%22data%22%3A%7B%22items%22%3A%5B&#13;
142+
%7B%22type%22%3A%22selectable-tile-group%22%2C%22tileGroup%22%3Atrue%2C&#13;
143+
%22items%22%3A%5B%7B%22type%22%3A%22selectable-tile%22%2C%22codeContext%22&#13;
144+
%3A%7B%22value%22%3A%22Tile%201%22%2C%22name%22%3A%22selectable-tile-3%22%2C&#13;
145+
%22formItemName%22%3A%22selectable-tile-group-2%22%7D%2C%22standalone%22%3Afalse&#13;
146+
%2C%22selected%22%3Afalse%2C%22items%22%3A%5B%7B%22type%22%3A%22text%22%2C%22text&#13;
147+
%22%3A%22Selectable%20tile%22%2C%22id%22%3A%226%22%2C%22codeContext%22%3A%7B%22&#13;
148+
name%22%3A%22text-6%22%7D%7D%5D%2C%22id%22%3A%223%22%7D%2C%7B%22type%22%3A%22&#13;
149+
selectable-tile%22%2C%22codeContext%22%3A%7B%22value%22%3A%22Tile%202%22%2C%22&#13;
150+
name%22%3A%22selectable-tile-4%22%2C%22formItemName%22%3A%22selectable-tile-group-2&#13;
151+
%22%7D%2C%22standalone%22%3Afalse%2C%22selected%22%3Afalse%2C%22items%22%3A%5B%7B%22&#13;
152+
type%22%3A%22text%22%2C%22text%22%3A%22Selectable%20tile%22%2C%22id%22%3A%227%22%2C%22&#13;
153+
codeContext%22%3A%7B%22name%22%3A%22text-7%22%7D%7D%5D%2C%22id%22%3A%224%22%7D%2C%7B%22&#13;
154+
type%22%3A%22selectable-tile%22%2C%22codeContext%22%3A%7B%22value%22%3A%22Tile&#13;
155+
%203%22%2C%22name%22%3A%22selectable-tile-5%22%2C%22formItemName%22%3A%22selectable-tile-group-2&#13;
156+
%22%7D%2C%22standalone%22%3Afalse%2C%22selected%22%3Afalse%2C%22items%22%3A%5B%7B%22type%22%3A%22&#13;
157+
text%22%2C%22text%22%3A%22Selectable%20tile%22%2C%22id%22%3A%228%22%2C%22codeContext%22%3A%7B%22name&#13;
158+
%22%3A%22text-8%22%7D%7D%5D%2C%22id%22%3A%225%22%7D%5D%2C%22id%22%3A%222%22%2C%22codeContext&#13;
159+
%22%3A%7B%22name%22%3A%22selectable-tile-group-2%22%7D%7D%5D%2C%22id%22%3A1%2C%22codeContext&#13;
160+
%22%3A%7B%22name%22%3A%22undefined-1%22%7D%7D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
161+
Edit on Carbon UI Builder
162+
</a>
163+
<br><br>
119164
<ibm-tile-group (selected)="selected($event)" [multiple]="true">
120165
<ibm-selection-tile value="tile1" [selected]="true">Selectable Tile</ibm-selection-tile>
121166
<ibm-selection-tile value="tile2">Selectable Tile</ibm-selection-tile>
@@ -128,6 +173,10 @@ storiesOf("Components|Tiles", module)
128173
}))
129174
.add("Expandable", () => ({
130175
template: `
176+
<a href="https://builder.carbondesignsystem.com/from-json/%7B%22title%22%3A%22Expandable%20tile%22%2C%22data%22%3A%7B%22items%22%3A%5B%7B%22type%22%3A%22expandable-tile%22%2C%22light%22%3Afalse%2C%22expanded%22%3Atrue%2C%22outline%22%3Afalse%2C%22items%22%3A%5B%7B%22type%22%3A%22text%22%2C%22text%22%3A%22Above%20fold%22%2C%22id%22%3A%223%22%2C%22codeContext%22%3A%7B%22name%22%3A%22text-3%22%7D%7D%2C%7B%22type%22%3A%22tile-fold%22%2C%22items%22%3A%5B%7B%22type%22%3A%22text%22%2C%22text%22%3A%22Below%20fold%22%2C%22id%22%3A%225%22%2C%22codeContext%22%3A%7B%22name%22%3A%22text-5%22%7D%7D%5D%2C%22id%22%3A%224%22%2C%22codeContext%22%3A%7B%22name%22%3A%22tile-fold-4%22%7D%7D%5D%2C%22id%22%3A%222%22%2C%22codeContext%22%3A%7B%22name%22%3A%22expandable-tile-2%22%7D%7D%5D%2C%22id%22%3A1%7D%2C%22allCssClasses%22%3A%5B%5D%7D" target="_blank">
177+
Edit on Carbon UI Builder
178+
</a>
179+
<br><br>
131180
<ibm-expandable-tile>
132181
<span class="bx--tile-content__above-the-fold" style="height: 200px">Above the fold content here</span>
133182
<span class="bx--tile-content__below-the-fold" style="height: 400px">Below the fold content here</span>

0 commit comments

Comments
 (0)