Skip to content

Commit ca94075

Browse files
edjannooedjannoo
authored
Merge pull request #4 from hmrc/APIS-3472
APIS-3472 - Change styling to GOV.UK or create bespoke
2 parents 4009e0c + e543074 commit ca94075

File tree

10 files changed

+156
-142
lines changed

10 files changed

+156
-142
lines changed

‎app/uk/gov/hmrc/apidocumentation/views/helpers/Helpers.scala‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -148,11 +148,12 @@ object Markdown {
148148
.forceExtentedProfile
149149
.registerPlugins(new YumlPlugin, new WebSequencePlugin, new IncludePlugin)
150150
.setDecorator(new ExtDecorator()
151-
.addStyleClass("bullets", "ul")
152-
.addStyleClass("code--slim", "code")
153-
.addStyleClass("heading-xlarge", "h1")
154-
.addStyleClass("heading-large", "h2")
155-
.addStyleClass("heading-medium", "h3")
151+
.addStyleClass("list list-bullet", "ul")
152+
.addStyleClass("list list-number", "ol")
153+
.addStyleClass("code", "code")
154+
.addStyleClass("heading-large", "h1")
155+
.addStyleClass("heading-medium", "h2")
156+
.addStyleClass("heading-small", "h3")
156157
.addStyleClass("heading-small", "h4"))
157158
.setCodeBlockEmitter(new CodeBlockEmitter)
158159

‎app/uk/gov/hmrc/apidocumentation/views/raml/fields.scala.html‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@
1919
@(fields: Seq[RequestResponseField], caption: String, fieldOptionalityKnown: Boolean)
2020

2121
@if(fields.nonEmpty) {
22-
<table class="table--align-top">
23-
<caption class="table__caption--low-vis">
24-
<div class="visuallyhidden">@caption</div>
22+
<table>
23+
<caption>
24+
<div class="visually-hidden">@caption</div>
2525
</caption>
26+
<col width="50%"/>
27+
<col width="50%"/>
2628
<thead>
27-
<tr class="table__row--desktop-heading">
28-
<th class="table__col--1-2">Name</th>
29+
<tr>
30+
<th>Name</th>
2931
<th>Description</th>
3032
</tr>
3133
</thead>
@@ -34,7 +36,7 @@
3436
<tr class="table__row--responsive
3537
@if(field.depth == 0 || field.`type` == "object") {table__row--parent}
3638
@if(field.depth > 0) {table__row--nested-@{field.depth}}">
37-
<td data-heading="Name" class="table__detail--responsive table__col--1-2">
39+
<td data-heading="Name" class="table__detail--responsive">
3840
<div class="table__cell-contents--responsive">
3941
<div class="parameter-name">@{field.name}</div>
4042
<div class="parameter-type">@if(field.isArray) {array} else {@{field.`type`}}</div>
@@ -52,12 +54,12 @@
5254
@if(field.description.nonEmpty) {<p>@{field.description}</p>}
5355

5456
@field.typeId match {
55-
case "full-date" => { <p>Date in the format <code class="code--slim">YYYY-MM-DD</code></p> }
56-
case "tax-year" => { <p>Tax year in the format <code class="code--slim">YYYY-YY</code></p> }
57+
case "full-date" => { <p>Date in the format <code class="code">YYYY-MM-DD</code></p> }
58+
case "tax-year" => { <p>Tax year in the format <code class="code">YYYY-YY</code></p> }
5759
case _ => {
5860
@if(field.pattern.nonEmpty) {
59-
<p class="parameter-pattern">
60-
Must conform to the regular expression <code class="code--slim">@{field.pattern}</code>
61+
<p>
62+
Must conform to the regular expression <code class="code">@{field.pattern}</code>
6163
</p>
6264
}
6365
}
@@ -70,15 +72,15 @@
7072
<div>
7173
@for(enumValue <- field.enumValues) {
7274
<div>
73-
<code class="code--slim">@{enumValue.name}</code>
75+
<code class="code">@{enumValue.name}</code>
7476
@if(enumValue.description.isDefined) { - @{enumValue.description} }
7577
</div>
7678
}
7779
</div>
7880
} else {
7981
@if(field.example.nonEmpty) {
80-
<p class="parameter-example">
81-
For example: <code class="code--slim">@{field.example}</code>
82+
<p>
83+
For example: <code class="code">@{field.example}</code>
8284
</p>
8385
}
8486
}

‎app/uk/gov/hmrc/apidocumentation/views/raml/headers.scala.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
@(headers: Seq[TypeDeclaration], version: String, caption: String, required: String)
2121

2222
@if(headers.nonEmpty) {
23-
<section id="request-headers" class="section flush--bottom">
24-
<h4 class="heading-small first">@caption</h4>
25-
<table class="table--align-top">
26-
<caption class="table__caption--low-vis">
27-
<div class="visuallyhidden">@caption Table</div>
23+
<section id="request-headers" class="section">
24+
<h4 class="heading-small">@caption</h4>
25+
<table>
26+
<caption>
27+
<div class="visually-hidden">@caption Table</div>
2828
</caption>
2929
<thead>
30-
<tr class="table__row--desktop-heading">
30+
<tr>
3131
<th>Name</th>
3232
<th>Value</th>
3333
<th>Description</th>

‎app/uk/gov/hmrc/apidocumentation/views/raml/main.scala.html‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -22,58 +22,56 @@
2222

2323
@(raml: RAML, schemas: Map[String, JsonSchema], maybeVersion: Option[ExtendedAPIVersion])(implicit applicationConfig: ApplicationConfig)
2424

25-
<div data-spy="scroll" data-sticky-left-nav data-state="subsection" class="browse-panes section hard--top" aria-busy="false">
26-
<div class="pane with-sort" id="section">
27-
<div class="pane-inner">
28-
<h1 id="title" class="heading-xlarge flush--top">
29-
@Val(raml.title) API
30-
</h1>
25+
<div data-spy="scroll" data-sticky-left-nav data-state="subsection" class="section" aria-busy="false">
26+
<div id="section">
27+
<h1 id="title" class="heading-xlarge">
28+
@Val(raml.title) API
29+
</h1>
3130

32-
@for(version <- maybeVersion) {
33-
<table>
34-
<col width="50%" />
35-
<col width="50%" />
36-
<tr><th><span class="bold-small">Version</span></th><td>@version.version</td></tr>
37-
<tr><th><span class="bold-small">Status</span></th><td>@version.displayedStatus</td></tr>
38-
@if(applicationConfig.showSandboxAvailability) {
39-
<tr><th><span class="bold-small">Available in Sandbox</span></th><td>@EndpointsAvailable(version.sandboxAvailability)</td></tr>
40-
}
41-
@if(applicationConfig.showProductionAvailability) {
42-
<tr><th><span class="bold-small">Available in Production</span></th><td>@EndpointsAvailable(version.productionAvailability)</td></tr>
43-
}
44-
</table>
45-
}
46-
47-
@for(doc <- raml.documentation){
48-
<div class="section">
49-
<h2 id="@Slugify(doc.title)" class="heading-large">
50-
@Val(doc.title)
51-
</h2>
31+
@for(version <- maybeVersion) {
32+
<table>
33+
<col width="50%" />
34+
<col width="50%" />
35+
<tr><th><span class="bold-small">Version</span></th><td>@version.version</td></tr>
36+
<tr><th><span class="bold-small">Status</span></th><td>@version.displayedStatus</td></tr>
37+
@if(applicationConfig.showSandboxAvailability) {
38+
<tr><th><span class="bold-small">Available in Sandbox</span></th><td>@EndpointsAvailable(version.sandboxAvailability)</td></tr>
39+
}
40+
@if(applicationConfig.showProductionAvailability) {
41+
<tr><th><span class="bold-small">Available in Production</span></th><td>@EndpointsAvailable(version.productionAvailability)</td></tr>
42+
}
43+
</table>
44+
}
5245

53-
<div>
54-
@Markdown(doc.content)
55-
</div>
46+
@for(doc <- raml.documentation){
47+
<div class="section">
48+
<h2 id="@Slugify(doc.title)" class="heading-large">
49+
@Val(doc.title)
50+
</h2>
5651

52+
<div>
53+
@Markdown(doc.content)
5754
</div>
58-
}
59-
<div class="back_to_top font-xsmall">
60-
<a href="#">
61-
Back to top
62-
</a>
55+
6356
</div>
57+
}
58+
<div class="bold-small float--right">
59+
<a href="#">
60+
Back to top
61+
</a>
62+
</div>
6463

65-
<div class="section">
66-
<h2 id="resources" class="heading-large">
67-
Resources
68-
</h2>
64+
<div class="section">
65+
<h2 id="resources" class="heading-large">
66+
Resources
67+
</h2>
6968

70-
@for(resourceGroup <- GroupedResources(raml.resources)) {
71-
@resource_group(resourceGroup, raml, schemas)
72-
}
73-
</div>
69+
@for(resourceGroup <- GroupedResources(raml.resources)) {
70+
@resource_group(resourceGroup, raml, schemas)
71+
}
7472
</div>
7573

76-
<div class="back_to_top">
74+
<div class="bold-small float--right">
7775
<a href="#">
7876
Back to top
7977
</a>

‎app/uk/gov/hmrc/apidocumentation/views/raml/method_params.scala.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
@for(param <- params){
2222
<tr class="table__row--responsive">
23-
<td data-heading="Name" class="table__detail--responsive table__col--1-3">
23+
<td data-heading="Name" class="table__detail--responsive>
2424
<div class="table__cell-contents--responsive">
2525
<div class="parameter-name">@param.name</div>
2626
<div class="parameter-type">@{param.baseTypeName}</div>
@@ -36,29 +36,29 @@
3636
@Markdown(param.description)
3737

3838
@param.typeName match {
39-
case "date" => { <p>Date in the format <code class="code--slim">YYYY-MM-DD</code></p> }
40-
case "taxYear" => { <p>Tax year in the format <code class="code--slim">YYYY-YY</code></p> }
39+
case "date" => { <p>Date in the format <code class="code">YYYY-MM-DD</code></p> }
40+
case "taxYear" => { <p>Tax year in the format <code class="code">YYYY-YY</code></p> }
4141
case _ => {
4242
@for(pattern <- param.pattern) {
43-
<p class="parameter-pattern">
44-
Must conform to the regular expression <code class="code--slim">@{pattern}</code>
43+
<p>
44+
Must conform to the regular expression <code class="code">@{pattern}</code>
4545
</p>
4646
}
4747
}
4848
}
4949

5050
@if(param.enumValues.nonEmpty) {
51-
<div class="section hard--ends ">
51+
<div class="section">
5252
<p>
5353
Limited to the following possible values:
5454
</p>
5555
@for(enumValue <- param.enumValues) {
56-
<div><code class="code--slim">@{enumValue}</code></div>
56+
<div><code class="code">@{enumValue}</code></div>
5757
}
5858
</div>
5959
} else {
60-
<p class="parameter-example">
61-
@if(Val(param.example).nonEmpty) {For example: <code class="code--slim">@Val(param.example)</code>}
60+
<p>
61+
@if(Val(param.example).nonEmpty) {For example: <code class="code">@Val(param.example)</code>}
6262
</p>
6363
}
6464
</div>

‎app/uk/gov/hmrc/apidocumentation/views/raml/resource_content.scala.html‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,17 @@
2525

2626
@defining(UriParams(res, raml)) { params =>
2727
@if(params.nonEmpty) {
28-
<section id="request-parameters_@contentID" class="section flush--bottom">
29-
<h4 class="heading-small first">Path parameters</h4>
30-
<table class="table--align-top">
31-
<caption class="table__caption--low-vis">
32-
<div class="visuallyhidden">Path parameters table</div>
28+
<section id="request-parameters_@contentID" class="section">
29+
<h4 class="heading-small">Path parameters</h4>
30+
<table>
31+
<caption>
32+
<div class="visually-hidden">Path parameters table</div>
3333
</caption>
34+
<col width="33%"/>
35+
<col width="67%"/>
3436
<thead>
35-
<tr class="table__row--desktop-heading">
36-
<th class="table__col--1-3">Name</th>
37+
<tr>
38+
<th>Name</th>
3739
<th>Description</th>
3840
</tr>
3941
</thead>
@@ -47,15 +49,17 @@ <h4 class="heading-small first">Path parameters</h4>
4749

4850
@defining(QueryParams(meth, raml)) { params =>
4951
@if(params.nonEmpty) {
50-
<section id="query-parameters_@contentID" class="section flush--bottom">
52+
<section id="query-parameters_@contentID" class="section">
5153
<h4 class="heading-small first">Query parameters</h4>
52-
<table class="table--align-top">
53-
<caption class="table__caption--low-vis">
54-
<div class="visuallyhidden">Query parameters table</div>
54+
<table>
55+
<caption>
56+
<div class="visually-hidden">Query parameters table</div>
5557
</caption>
58+
<col width="33%"/>
59+
<col width="67%"/>
5660
<thead>
57-
<tr class="table__row--desktop-heading">
58-
<th class="table__col--1-3">Name</th>
61+
<tr>
62+
<th>Name</th>
5963
<th>Description</th>
6064
</tr>
6165
</thead>
@@ -71,8 +75,8 @@ <h4 class="heading-small first">Query parameters</h4>
7175
@headers(meth.headers.toSeq, raml.version.value, "Request headers", "required")
7276
}
7377

74-
<section id="authorisation_@contentID" class="section flush-bottom">
75-
<h4 class="heading-small first">Authorisation</h4>
78+
<section id="authorisation_@contentID" class="section">
79+
<h4 class="heading-small">Authorisation</h4>
7680
@{
7781
val userRestrictedUrl = routes.DocumentationController.authorisationPage().url + "#user-restricted"
7882
val appRestrictedUrl = routes.DocumentationController.authorisationPage().url + "#application-restricted"
@@ -81,14 +85,14 @@ <h4 class="heading-small first">Authorisation</h4>
8185
<p>
8286
This resource is
8387
<a href = "/api-documentation/docs/authorisation/user-restricted-endpoints">user-restricted</a>
84-
- it requires an Authorization header containing an OAuth 2.0 Bearer Token with the <code class="code--slim">{scope}</code> scope.
88+
- it requires an Authorization header containing an OAuth 2.0 Bearer Token with the <code class="code">{scope}</code> scope.
8589
</p>
8690
}
8791
case ("application", _) => {
8892
<p>
8993
This resource is
9094
<a href = "/api-documentation/docs/authorisation/application-restricted-endpoints">application-restricted</a>
91-
- it requires an Authorization header containing a <code class="code--slim">server_token</code> or an OAuth 2.0 Bearer Token.
95+
- it requires an Authorization header containing a <code class="code">server_token</code> or an OAuth 2.0 Bearer Token.
9296
</p>
9397
}
9498
case _ => {
@@ -101,33 +105,33 @@ <h4 class="heading-small first">Authorisation</h4>
101105
</section>
102106

103107
@for(body <- meth.body) {
104-
<section id="sample-request_@contentID" class="section flush--bottom">
108+
<section id="sample-request_@contentID" class="section">
105109
<h4 class="heading-small">Request</h4>
106110
@for(example <- BodyExamples(body)) {
107-
<section class="subsection">
111+
<section>
108112
@if(example.description().isDefined){<strong>Scenario: @example.description()</strong>}
109113
@if(example.documentation().isDefined){<p>@Markdown(example.documentation.get)</p>}
110-
<pre class="code--block">@example.value()</pre>
114+
<pre class="code">@example.value()</pre>
111115
</section>
112116
}
113117
</section>
114118
}
115119
@fields(RequestFields(meth, schemas), "Request table", !Annotation.exists(raml, "(fieldOptionalityUnknown)"))
116120

117121
@for(resp <- Responses.success(meth)) {
118-
<section id="sample-response_@contentID" class="section flush--bottom">
122+
<section id="sample-response_@contentID" class="section">
119123
@if(resp.headers().nonEmpty) {
120124
@headers(resp.headers.toSeq, raml.version.value, "Response headers", "")
121125
}
122126

123127
<h4 class="heading-small">Response</h4>
124-
<p>HTTP status: <code class="code--slim">@HttpStatus(Val(resp.code))</code></p>
128+
<p>HTTP status: <code class="code">@HttpStatus(Val(resp.code))</code></p>
125129
@for(body <- resp.body) {
126130
@for(example <- BodyExamples(body)) {
127-
<section class="subsection">
131+
<section>
128132
@if(example.description().isDefined){@example.description()}
129133
@if(example.documentation().isDefined){<p>@Markdown(example.documentation.get)</p>}
130-
<pre class="code--block">@example.value()</pre>
134+
<pre class="code">@example.value()</pre>
131135
</section>
132136
}
133137
}
@@ -137,14 +141,14 @@ <h4 class="heading-small">Response</h4>
137141

138142
@defining(ErrorScenarios(meth)) { errorScenarios =>
139143
@if(errorScenarios.nonEmpty) {
140-
<section id="error-responses_@contentID" class="section flush--bottom">
144+
<section id="error-responses_@contentID" class="section">
141145
<h4 class="heading-small">Error scenarios</h4>
142-
<table class="table--align-top">
143-
<caption class="table__caption--low-vis">
144-
<div class="visuallyhidden">Error scenarios table</div>
146+
<table>
147+
<caption>
148+
<div class="visually-hidden">Error scenarios table</div>
145149
</caption>
146150
<thead>
147-
<tr class="table__row--desktop-heading">
151+
<tr>
148152
<th>Scenario</th>
149153
<th>HTTP status</th>
150154
<th>Code</th>
@@ -179,7 +183,7 @@ <h4 class="heading-small">Error scenarios</h4>
179183

180184
@defining(Annotation(meth, "(sandboxData)")) { sandboxData =>
181185
@if(sandboxData.nonEmpty) {
182-
<section id="sandbox-data_@contentID" class="section flush--bottom sandbox-data">
186+
<section id="sandbox-data_@contentID" class="section">
183187
<h4 class="heading-small">Test data</h4>
184188
@Markdown(sandboxData)
185189
</section>

0 commit comments

Comments
 (0)