Skip to content

Commit b0e94aa

Browse files
author
Samuel Gomis
committed
feat(API-1945): Add pre-requisite block for App workflow + add link to tag in guided tuto
1 parent e329fef commit b0e94aa

File tree

8 files changed

+173
-20
lines changed

8 files changed

+173
-20
lines changed

‎components/block-welcome.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.block-welcome {
2+
position: relative;
3+
background-color: #F1F4F9;
4+
padding: 30px 50px;
5+
6+
font-size: 16px;
7+
line-height: 24px;
8+
9+
color: #677688;
10+
}
11+
12+
.block-welcome img {
13+
position: absolute;
14+
width: 110px;
15+
right: 73px;
16+
top: 24px;
17+
}
18+
19+
.block-welcome-row {
20+
display: flex;
21+
align-items: center;
22+
}
23+
24+
.block-welcome-title {
25+
font-family: 'Lato';
26+
font-style: normal;
27+
font-weight: 500;
28+
font-size: 22px;
29+
line-height: 26px;
30+
display: flex;
31+
align-items: center;
32+
33+
color: #677688;
34+
}
35+
36+
.block-welcome-text {
37+
font-family: 'Lato';
38+
font-style: normal;
39+
font-weight: 400;
40+
font-size: 16px;
41+
line-height: 19px;
42+
margin-top: 30px;
43+
44+
color: #677688;
45+
}
46+
47+
.block-welcome-row .block-welcome-text {
48+
width: 68.5%;
49+
}
50+
51+
.bold {
52+
font-weight: bold;
53+
}

‎components/block-welcome.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="block-welcome">
2+
<div class="block-welcome-title">Welcome!</div>
3+
<div class="block-welcome-row">
4+
<div class="block-welcome-text">
5+
This pre-requisite section will follow you all along the tutorials
6+
marked with the use case <span class="bold">"App workflow"</span>.
7+
</div>
8+
<img src="../content/img/illustrations/illus--Attributegroup.svg" width="140px">
9+
</div>
10+
<div class="block-welcome-text">
11+
The workflow starts with this tutorial that will guide you through the creation of a draft App.
12+
At the end of this tutorial, your draft App will receive an <span class="bold">access token and will be able to call
13+
the REST API.</span>
14+
</div>
15+
<div class="block-welcome-text">
16+
Let's start!
17+
</div>
18+
</div>

‎components/components.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@import "tile.css";
2-
@import "search-bar.css";
3-
41
/** Default pim-api-doc CSS **/
52
body {
63
width: 740px;
@@ -101,6 +98,7 @@ button {
10198

10299
color: #677688;
103100
}
101+
104102
.block-next-steps img {
105103
margin-right: 50px;
106104
}

‎components/components.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
<head>
33
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
44
<link rel="stylesheet" href="components.css">
5+
<link rel="stylesheet" href="tile.css">
6+
<link rel="stylesheet" href="block-welcome.css">
57
</head>
68
<body>
79
<div>
@@ -90,4 +92,9 @@
9092
<iframe src="./tile.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
9193

9294
</body>
95+
96+
<hr>
97+
98+
<iframe src="./block-welcome.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
99+
93100
</html>

‎content/tutorials/guides/how-to-get-your-app-token.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,33 @@ Implement the required parts of the App activation process and receive an App ac
1313
<tr>
1414
<td>Use case:</td>
1515
<td>
16-
<button aria-pressed="false" class="tag-selectable">
16+
<div class="tag-not-selectable">
1717
<div class="tag-color tag-color-light-blue"></div>
1818
<div class="tag-label">App Workflow</div>
19-
</button>
19+
</div>
2020
</td>
2121
</tr>
2222
</table>
2323

24+
<div class="block-welcome">
25+
<div class="block-welcome-title">Welcome!</div>
26+
<div class="block-welcome-row">
27+
<div class="block-welcome-text">
28+
This pre-requisite section will follow you all along the tutorials
29+
marked with the use case <b>"App workflow"</b>.
30+
</div>
31+
<img src="../../img/illustrations/illus--Attributegroup.svg" width="140px">
32+
</div>
33+
<div class="block-welcome-text">
34+
The workflow starts with this tutorial that will guide you through the creation of a draft App.
35+
At the end of this tutorial, your draft App will receive an <b>access token and will be able to call
36+
the REST API.</b>
37+
</div>
38+
<div class="block-welcome-text">
39+
Let's start!
40+
</div>
41+
</div>
42+
2443
## What you will learn
2544
In this tutorial, we provide a guide on how to implement the required parts of your App for the activation process based on OAuth 2.0 with Authorization Code.
2645
At the end of this tutorial, your App will receive an Access Token and will be able to call the REST API of a PXM Studio.

‎content/tutorials/guides/how-to-retrieve-pim-structure.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Retrieve the PIM structure through a channel resource. This is usually the requi
1313
<tr>
1414
<td>Use case:</td>
1515
<td>
16-
<div aria-pressed="false" class="tag-selectable">
16+
<div class="tag-not-selectable">
1717
<div class="tag-color tag-color-light-blue"></div>
1818
<div class="tag-label">App Workflow</div>
1919
</div>
@@ -22,7 +22,7 @@ Retrieve the PIM structure through a channel resource. This is usually the requi
2222
<tr>
2323
<td>PIM Features:</td>
2424
<td>
25-
<div aria-pressed="false" class="tag-selectable">
25+
<div class="tag-not-selectable">
2626
<div class="tag-color tag-color-red"></div>
2727
<div class="tag-label">Channel</div>
2828
</div>

‎src/partials/guided-tutorials-homepage.handlebars

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,24 @@
5151
</div>
5252
<script type="text/javascript">
5353
let filtersActivated = [];
54-
let $filtered = $('.filtered-result');
54+
const $filtered = $('.filtered-result');
5555
$filtered.hide();
5656
5757
$.expr[':'].textEquals = function(a, i, m) {
5858
return $(a).text().match("^" + m[3] + "$");
5959
}
6060
61+
const $grid = $('.tile-list').isotope({
62+
initLayout: false
63+
});
64+
$grid.isotope( 'on', 'arrangeComplete', function(filteredItems) {
65+
for (let label in filtersActivated) {
66+
if (filtersActivated[label]) {
67+
return $filtered.text('Filtered results (' + filteredItems.length + ')').show();
68+
}
69+
}
70+
});
71+
6172
$(window).on('hashchange', onHashchange);
6273
onHashchange();
6374
@@ -91,7 +102,7 @@
91102
}
92103
}
93104
94-
var $grid = $('.tile-list').isotope({
105+
$grid.isotope({
95106
itemSelector: '.tile',
96107
layoutMode: 'fitRows',
97108
filter: function () {
@@ -106,16 +117,8 @@
106117
}
107118
});
108119
109-
$grid.on('arrangeComplete', function (event, filteredItems) {
110-
for (let label in filtersActivated) {
111-
if (filtersActivated[label]) {
112-
return $filtered.text('Filtered results (' + filteredItems.length + ')').show();
113-
}
114-
}
115-
});
116-
117120
if (!hasFilter) {
118-
$('.tile-list').isotope({
121+
$grid.isotope({
119122
filter: '*'
120123
});
121124
$filtered.hide()

‎styles/guided-tutorial.less

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,12 +133,12 @@
133133
font-weight: 500;
134134
}
135135
.tag-container-xs td:first-child {
136-
width: 90px;
136+
width: 75px;
137137
font-size: 15px;
138138
font-weight: 500;
139139
}
140140

141-
.tag-selectable {
141+
.tag-selectable, .tag-not-selectable {
142142
box-sizing: border-box;
143143

144144
display: flex;
@@ -217,6 +217,7 @@
217217
.tag-selectable:hover {
218218
background-color: #E6E6E7;
219219
cursor: pointer;
220+
text-decoration: none;
220221
}
221222

222223
.tag-selected {
@@ -371,3 +372,57 @@
371372
ul.nav.nav-stacked {
372373
margin-top: 30px;
373374
}
375+
376+
/******************** BLOCK WELCOME ***********************/
377+
378+
.block-welcome {
379+
position: relative;
380+
background-color: #F1F4F9;
381+
padding: 30px 46px;
382+
margin-top: 27px;
383+
384+
font-size: 16px;
385+
line-height: 24px;
386+
387+
color: #677688;
388+
border-radius: 5px;
389+
}
390+
391+
.block-welcome img {
392+
position: absolute;
393+
width: 110px;
394+
right: 73px;
395+
top: 24px;
396+
}
397+
398+
.block-welcome-row {
399+
display: flex;
400+
align-items: center;
401+
}
402+
403+
.block-welcome-title {
404+
font-family: 'Lato';
405+
font-style: normal;
406+
font-weight: 500;
407+
font-size: 22px;
408+
line-height: 26px;
409+
display: flex;
410+
align-items: center;
411+
412+
color: #677688;
413+
}
414+
415+
.block-welcome-text {
416+
font-family: 'Lato';
417+
font-style: normal;
418+
font-weight: 400;
419+
font-size: 16px;
420+
line-height: 19px;
421+
margin-top: 30px;
422+
423+
color: #677688;
424+
}
425+
426+
.block-welcome-row .block-welcome-text {
427+
width: 68.5%;
428+
}

0 commit comments

Comments
 (0)