Skip to content

Commit

Permalink
Merge pull request #565 from DFE-Digital/SFSW-2541-Create-Quote-box-c…
Browse files Browse the repository at this point in the history
…omponent

Sfsw 2541 create quote box component
  • Loading branch information
mattb-hippo authored Nov 22, 2024
2 parents 34168b6 + 77a7611 commit d0f22d2
Show file tree
Hide file tree
Showing 15 changed files with 266 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ public class EntityResolverTests
[TestCase("pageContents", typeof(PageContents))]
[TestCase("pageContentsItem", typeof(PageContentsItem))]
[TestCase("pdfFileResource", typeof(PdfFileResource))]
[TestCase("quoteBox", typeof(QuoteBox))]
[TestCase("richTextBlock", typeof(RichTextBlock))]
[TestCase("roleList", typeof(RoleList))]
[TestCase("navigationMenu", typeof(NavigationMenu))]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ public partial class PartialsFactoryTests
new object[] { new PageContents(), "_PageContents" },
new object[] { new PageContentsItem(), "_PageContentsItem" },
new object[] { new PdfFileResource(), "_PdfFileResource" },
new object[] { new QuoteBox(), "_QuoteBox" },
new object[] { new RichTextBlock(), "_RichTextBlock" },
new object[] { new RoleList(), "_RoleList" },
new object[] { new TextBlock(), "_TextBlock" },
Expand Down
1 change: 1 addition & 0 deletions Childrens-Social-Care-CPD/Contentful/EntityResolver.cs
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ public Type Resolve(string contentTypeId)
"pageContents" => typeof(PageContents),
"pageContentsItem" => typeof(PageContentsItem),
"pdfFileResource" => typeof(PdfFileResource),
"quoteBox" => typeof(QuoteBox),
"richTextBlock" => typeof(RichTextBlock),
"roleList" => typeof(RoleList),
"navigationMenu" => typeof(NavigationMenu),
Expand Down
9 changes: 9 additions & 0 deletions Childrens-Social-Care-CPD/Contentful/Models/QuoteBox.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
using Contentful.Core.Models;

namespace Childrens_Social_Care_CPD.Contentful.Models;

public class QuoteBox : IContent
{
public string Name { get; set; }
public Document QuoteText { get; set; }
}
1 change: 1 addition & 0 deletions Childrens-Social-Care-CPD/Contentful/PartialsFactory.cs
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ public static string GetPartialFor(IContent item)
PageContents => "_PageContents",
PageContentsItem => "_PageContentsItem",
PdfFileResource => "_PdfFileResource",
QuoteBox => "_QuoteBox",
RichTextBlock => "_RichTextBlock",
RoleList => "_RoleList",
NavigationMenu => "_NavigationMenu",
Expand Down
6 changes: 3 additions & 3 deletions Childrens-Social-Care-CPD/Views/Shared/_InfoBox.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,18 @@
switch (Model.Type) {
case InfoBoxType.GreenI:
css = "infobox infobox-green-i";
svg = "<svg aria-describedby=\"info icon\" class=\"svg-inline--fa fa-info fa-green fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 192 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z\"></path></svg>";
svg = "<svg aria-label=\"info icon\" class=\"svg-inline--fa fa-info fa-green fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"info\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 192 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z\"></path></svg>";
break;

case InfoBoxType.GreenBrain:
css = "infobox infobox-green-brain";
svg = "<svg aria-describedby=\"brain icon\" class=\"svg-inline--fa fa-green fa-brain fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"brain\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M184 0c30.9 0 56 25.1 56 56l0 400c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56l0-400c0-30.9 25.1-56 56-56z\"></path></svg>";
svg = "<svg aria-label=\"brain icon\" class=\"svg-inline--fa fa-green fa-brain fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"brain\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M184 0c30.9 0 56 25.1 56 56l0 400c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56l0-400c0-30.9 25.1-56 56-56z\"></path></svg>";
break;

case InfoBoxType.BlueI:
default:
css = "infobox";
svg = "<svg aria-describedby=\"info icon\" class=\"svg-inline--fa fa-circle-info fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"circle-info\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\"></path></svg>";
svg = "<svg aria-label=\"info icon\" class=\"svg-inline--fa fa-circle-info fa-2x\" aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"circle-info\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" data-fa-i2svg=\"\"><path fill=\"currentColor\" d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\"></path></svg>";
break;
}
}
Expand Down
14 changes: 14 additions & 0 deletions Childrens-Social-Care-CPD/Views/Shared/_QuoteBox.cshtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@using Childrens_Social_Care_CPD.Contentful.Models;
@using Childrens_Social_Care_CPD.Contentful;
@using Childrens_Social_Care_CPD.Contentful.Renderers;

@model QuoteBox


<div class="blockquote-container">
<blockquote class="quote">
@{
await Html.RenderPartialAsync("_RichText", Model.QuoteText);
}
</blockquote>
</div>
51 changes: 51 additions & 0 deletions Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss
Original file line number Diff line number Diff line change
Expand Up @@ -394,4 +394,55 @@ div#page-feedback a {
font-weight: 400;
font-size: 19px;
line-height: 1.1429;
}

/* quote box */
.blockquote-container {
padding-top: 10px;
padding-bottom: 10px;
}

.blockquote-container blockquote.quote {
position: relative;
border: 3px solid #0b0c0c;
padding: 20px;
margin: 16px 20px;
}

@media (min-width: 40.0625em) {
.blockquote-container blockquote.quote {
margin: 16px 40px;
}
}

.blockquote-container blockquote.quote p {
padding: 0 0 0 10px;
margin-top: 10px;
position: relative;
z-index: 9999;
border: none;
max-width: 100%;
}

@media (min-width: 40.0625em) {
.blockquote-container blockquote.quote p {
padding-left: 40px;
}
}

.blockquote-container blockquote.quote p::before {
content: none;
}

.blockquote-container blockquote.quote::before {
position: absolute;
content: "";
font-size: 8em;
margin-top: -0.4em;
background-color: #ffffff;
line-height: 0.9;
height: 50px;
padding-left: 10px;
padding-right: 10px;
font-family: serif;
}
49 changes: 49 additions & 0 deletions Childrens-Social-Care-CPD/wwwroot/css/application.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Childrens-Social-Care-CPD/wwwroot/css/application.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Childrens-Social-Care-CPD/wwwroot/css/application.min.css

Large diffs are not rendered by default.

Large diffs are not rendered by default.

131 changes: 131 additions & 0 deletions Contentful-Schema/migrations/0015-quote-box-component.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
module.exports = async function (migration, { makeRequest }) {

const quoteBox = migration
.createContentType("quoteBox")
.name("Quote Box")
.description("Allows display of quotes in a distinctive bordered box.")
.displayField("name");
quoteBox
.createField("name")
.name("Name")
.type("Symbol")
.localized(false)
.required(true)
.validations([])
.disabled(false)
.omitted(false);

quoteBox
.createField("quoteText")
.name("Quote Text")
.type("RichText")
.localized(false)
.required(false)
.validations([
{
enabledMarks: [
"bold",
"italic",
"underline",
"code",
"superscript",
"subscript"
],

message:
"Only bold, italic, underline, code, superscript, subscript, and strikethrough marks are allowed",
},
{
enabledNodeTypes: [
"heading-1",
"heading-2",
"heading-3",
"heading-4",
"heading-5",
"heading-6",
"ordered-list",
"unordered-list",
"hr",
"blockquote",
"embedded-entry-block",
"embedded-asset-block",
"table",
"asset-hyperlink",
"embedded-entry-inline",
"entry-hyperlink",
"hyperlink",
],

message:
"Only heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, ordered list, unordered list, horizontal rule, quote, block entry, asset, table, link to asset, inline entry, link to entry, and link to Url nodes are allowed",
},
{
nodes: {},
},
])
.disabled(false)
.omitted(false);

quoteBox.changeFieldControl("name", "builtin", "singleLine", {});
quoteBox.changeFieldControl("quoteText", "builtin", "richTextEditor", {});


/*
* Add quoteBox to list of content types allowed in content pages
*/
var contentTypeId = "content",
linkingFieldId = "items",
quoteBoxTypeId = "quoteBox";

var response = await makeRequest({
method: "GET",
url: `/content_types?sys.id[in]=${contentTypeId}`,
});

var validations = response.items[0].fields
.filter((field) => field.id == linkingFieldId)[0]
.items.validations.map((rule) => {
if (
rule.linkContentType &&
!rule.linkContentType.includes(quoteBoxTypeId)
) {
rule.linkContentType.push(quoteBoxTypeId);
}
return rule;
});

migration.editContentType(contentTypeId).editField(linkingFieldId).items({
type: "Link",
linkType: "Entry",
validations: validations,
});

/*
* Add quoteBox to list of content types allowed in accordion sections
*/
contentTypeId = "accordionSection";
linkingFieldId = "content";

response = await makeRequest({
method: "GET",
url: `/content_types?sys.id[in]=${contentTypeId}`,
});

validations = response.items[0].fields
.filter((field) => field.id == linkingFieldId)[0]
.items.validations.map((rule) => {
if (
rule.linkContentType &&
!rule.linkContentType.includes(quoteBoxTypeId)
) {
rule.linkContentType.push(quoteBoxTypeId);
}
return rule;
});

migration.editContentType(contentTypeId).editField(linkingFieldId).items({
type: "Link",
linkType: "Entry",
validations: validations,
});
};
3 changes: 2 additions & 1 deletion Contentful-Schema/migrations/manifest.txt
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@
0011-create-agency-standards-page-category.cjs
0012-credit-block-component.cjs
0013-print-page-component.cjs
0014-add-type-field-to-infobox-component.cjs
0014-add-type-field-to-infobox-component.cjs
0015-quote-box-component.cjs
Binary file modified Contentful-Schema/migrations/migrations.tar.gz
Binary file not shown.

0 comments on commit d0f22d2

Please sign in to comment.