Skip to content

Commit 7492906

Browse files
justintempsjustintemps
committed
feat(twig/styles): stand-alone blockquote component with style tweaks
1 parent f264174 commit 7492906

File tree

8 files changed

+171
-152
lines changed

8 files changed

+171
-152
lines changed

‎.changeset/nice-turkeys-tie.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@ilo-org/twig": minor
3+
"@ilo-org/styles": patch
4+
---
5+
6+
**Blockquote:** Creates a new standalone component for the Blockquote which was already available as a styled element in **Richtext** but can now be used separately on its own. This also adjusts the styles of the Blockquote in line with design changes.

‎packages/styles/scss/components/_blockquote.scss

+88-81
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,117 @@
11
@use "../tokens" as *;
22
@use "../functions" as *;
33
@import "../mixins";
4+
@import "../config";
45

56
/**
6-
This mixin is used in _richtext.scss component to style blockquotes.
7-
It could eventually be used for a standalone blockquote component.
7+
This mixin is also used in _richtext.scss component to style blockquotes.
88
**/
99
@mixin blockquote {
10-
blockquote {
11-
background-color: $color-ux-background-highlight;
12-
background-position: right top;
13-
background-repeat: no-repeat;
14-
background-size: px-to-rem(72px) px-to-rem(40px);
15-
display: block;
16-
font-family: var(--ilo-fonts-display);
17-
padding: spacing(19) 0 spacing(9) spacing(8); // check
10+
background-color: var(--ilo-color-blue-lighter);
11+
background-position: right top;
12+
background-repeat: no-repeat;
13+
background-size: px-to-rem(72px) px-to-rem(40px);
14+
display: block;
15+
font-family: var(--ilo-fonts-display);
16+
padding: spacing(19) 0 spacing(9) spacing(8); // check
17+
position: relative;
18+
width: fit-content;
19+
border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
20+
@include cornercut(72px, 40px);
21+
22+
p {
23+
color: var(--ilo-color-purple);
24+
font-weight: 300;
25+
padding: 0 spacing(12) 0 0;
1826
position: relative;
19-
width: fit-content;
20-
@include cornercut(72px, 40px);
27+
@include font-styles("pull-quote-sm");
28+
29+
&:after {
30+
bottom: 0;
31+
content: "";
32+
display: inline-block;
33+
height: px-to-rem(20px);
34+
position: absolute;
35+
right: 0;
36+
transform: scaleX(-1);
37+
width: px-to-rem(26.5px);
38+
@include icon("quote", var(--ilo-color-purple));
39+
}
40+
}
41+
42+
cite {
43+
color: var(--ilo-color-gray-accessible);
44+
font-weight: 400;
45+
// @include font-styles("pull-quote-cite");
46+
font-size: var(--ilo-font-size-sm);
47+
line-height: 135%;
48+
letter-spacing: 0;
49+
font-style: normal;
50+
}
51+
52+
&:before {
53+
content: "";
54+
display: inline-block;
55+
height: px-to-rem(40px);
56+
left: 0;
57+
position: absolute;
58+
width: px-to-rem(53px);
59+
top: 0;
60+
@include icon("quote", var(--ilo-color-purple));
61+
}
62+
63+
@include breakpoint("md") {
64+
background-size: px-to-rem(86px) px-to-rem(48px);
65+
padding: spacing(16) 0 spacing(12) spacing(12);
66+
@include cornercut(86px, 48px);
2167

2268
p {
23-
color: $color-font-blockquote;
24-
font-weight: 300;
69+
margin-bottom: spacing(6);
2570
padding: 0 spacing(12) 0 0;
2671
position: relative;
27-
@include font-styles("pull-quote-sm");
72+
@include font-styles("pull-quote-lg");
2873

2974
&:after {
30-
bottom: 0;
31-
content: "";
32-
display: inline-block;
33-
height: px-to-rem(20px);
34-
position: absolute;
35-
right: 0;
36-
transform: scaleX(-1);
37-
width: px-to-rem(26.5px);
38-
@include icon("quote", var(--ilo-color-purple));
75+
height: px-to-rem(24px);
76+
width: px-to-rem(32px);
3977
}
4078
}
4179

42-
cite {
43-
color: $color-font-cite;
44-
font-weight: 400;
45-
@include font-styles("pull-quote-cite");
46-
}
47-
4880
&:before {
49-
content: "";
50-
display: inline-block;
51-
height: px-to-rem(40px);
52-
left: 0;
53-
position: absolute;
54-
width: px-to-rem(53px);
55-
top: 0;
56-
@include icon("quote", var(--ilo-color-purple));
57-
}
58-
59-
@include breakpoint("md") {
60-
background-size: px-to-rem(86px) px-to-rem(48px);
61-
padding: spacing(16) 0 spacing(12) spacing(12);
62-
@include cornercut(86px, 48px);
63-
64-
p {
65-
margin-bottom: spacing(6);
66-
padding: 0 spacing(12) 0 0;
67-
position: relative;
68-
@include font-styles("pull-quote-lg");
69-
70-
&:after {
71-
height: px-to-rem(24px);
72-
width: px-to-rem(32px);
73-
}
74-
}
75-
76-
&:before {
77-
height: px-to-rem(48px);
78-
width: px-to-rem(64px);
79-
}
81+
height: px-to-rem(48px);
82+
width: px-to-rem(64px);
8083
}
84+
}
8185

82-
[dir="rtl"] & {
83-
background-position: -1px -1px;
84-
padding: spacing(14) spacing(8) spacing(9) 0;
85-
@include cornercut(72px, 40px, "left");
86+
[dir="rtl"] & {
87+
background-position: -1px -1px;
88+
padding: spacing(14) spacing(8) spacing(9) 0;
89+
@include cornercut(72px, 40px, "left");
8690

87-
p {
88-
padding: 0 0 0 spacing(12);
91+
p {
92+
padding: 0 0 0 spacing(12);
8993

90-
&:after {
91-
left: 0;
92-
right: auto;
93-
transform: scaleX(1);
94-
}
94+
&:after {
95+
left: 0;
96+
right: auto;
97+
transform: scaleX(1);
9598
}
99+
}
96100

97-
&:before {
98-
left: auto;
99-
right: 0;
100-
transform: scaleX(-1);
101-
}
101+
&:before {
102+
left: auto;
103+
right: 0;
104+
transform: scaleX(-1);
105+
}
102106

103-
@include breakpoint("md") {
104-
padding: spacing(15) spacing(12) spacing(12) 0;
107+
@include breakpoint("md") {
108+
padding: spacing(15) spacing(12) spacing(12) 0;
105109

106-
@include cornercut(86px, 48px, "left");
107-
}
110+
@include cornercut(86px, 48px, "left");
108111
}
109112
}
110113
}
114+
115+
.ilo--blockquote {
116+
@include blockquote;
117+
}

‎packages/styles/scss/components/_richtext.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,9 @@
132132
}
133133

134134
// Blockquote styles
135-
@include blockquote;
135+
blockquote {
136+
@include blockquote;
137+
}
136138

137139
// List styles (invincible list)
138140
@include invincible-list;

‎packages/styles/scss/components/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "accordion";
2+
@use "blockquote";
23
@use "breadcrumb";
34
@use "button";
45
@use "callout";

‎packages/twig/cypress/e2e/content/blockquote.cy.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import fixture from "../../fixtures/blockquote.json";
2+
3+
const url = `/pattern-preview?id=blockquote&fields=${encodeURI(
4+
JSON.stringify(fixture)
5+
)}`;
6+
7+
describe("Blockquote", () => {
8+
beforeEach(() => {
9+
cy.visit(url);
10+
cy.get(".ilo--blockquote").as("blockquote");
11+
});
12+
13+
it("should render the correct quote and citation", () => {
14+
cy.get("@blockquote")
15+
.find("p")
16+
.should("exist")
17+
.and("contain", fixture.quote);
18+
19+
cy.get("@blockquote")
20+
.find("cite")
21+
.should("exist")
22+
.and("contain", fixture.cite);
23+
});
24+
25+
it("should show opening quote marks", () => {
26+
cy.get("@blockquote").then(($el) => {
27+
const before = window.getComputedStyle($el[0], "::before");
28+
expect(before.getPropertyValue("mask-image")).to.not.eq("none");
29+
});
30+
});
31+
32+
it("should show closing quote marks", () => {
33+
cy.get("@blockquote")
34+
.find("p")
35+
.then(($el) => {
36+
const after = window.getComputedStyle($el[0], "::after");
37+
expect(after.getPropertyValue("mask-image")).to.not.eq("none");
38+
});
39+
});
40+
});

‎packages/twig/cypress/fixtures/blockquote.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"quote": "This is a blockquote",
3+
"cite": "Author"
4+
}

‎packages/twig/src/components/blockquote/blockquote.component.yml

+13-70
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,17 @@
11
blockquote:
22
namespace: Components/Content
33
use: "@components/blockquote/blockquote.twig"
4-
label: Accordion
5-
description: The accordion component allows the user to show and hide sections of related content on a page. Items in the accordion can be expanded by default or scrollable if the content is very long.
6-
4+
label: Blockquote
5+
description: The Blockquote component is used to display quoted text with proper attribution, helping to highlight references and citations effectively.
76
fields:
8-
items:
9-
type: object
10-
label: Items
11-
description: The accordion items. Each item takes a label, content, and id. You can also set the defaultExpanded and scroll properties for each item.
12-
required: true
13-
preview:
14-
- label: Topics
15-
content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Employment Promotion and Job Creation</li><li>Social Protection</li><li>International Labour Standards</li><li>Social Dialogue and Tripartism</li><li>Occupational Safety and Health</li><li>Labor Migration</li><li>Child Labour and Forced Labour Elimination</li><li>Gender Equality and Non-Discrimination</li></ul></div>'
16-
id: item1
17-
defaultExpanded: false
18-
scroll: false
19-
- label: Sectors
20-
content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Agriculture, Forestry, and Fishing</li><li>Construction</li><li>Manufacturing</li><li>Transport and Storage</li><li>Wholesale and Retail Trade</li><li>Information and Communication</li><li>Finance and Insurance</li><li>Health and Social Work</li><li>Educational Services</li><li>Public Administration and Defense</li><li>Other Services</li></ul></div>'
21-
id: item2
22-
defaultExpanded: false
23-
scroll: false
24-
25-
settings:
26-
size:
27-
type: select
28-
label: Size
29-
description: The size of the accordion button.
30-
required: false
31-
options:
32-
small: Small
33-
large: Large
34-
preview: small
35-
allowMultipleExpanded:
36-
type: boolean
37-
label: Allow Multiple Expanded
38-
description: Allow multiple accordion items to be expandable at once.
39-
preview: true
40-
required: false
41-
variants:
42-
default:
43-
label: Default
44-
scrollable:
45-
label: "Scrollable"
46-
description: "You can make an accordion item scrollable simply by passing it scroll: true in the preview."
47-
fields:
48-
items:
49-
- label: Topics
50-
content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Employment Promotion and Job Creation</li><li>Social Protection</li><li>International Labour Standards</li><li>Social Dialogue and Tripartism</li><li>Occupational Safety and Health</li><li>Labor Migration</li><li>Child Labour and Forced Labour Elimination</li><li>Gender Equality and Non-Discrimination</li></ul></div>'
51-
id: item1
52-
defaultExpanded: false
53-
scroll: true
54-
- label: Sectors
55-
content: '<div style="padding: 20px"><ul class="ilo--list--unordered"><li>Agriculture, Forestry, and Fishing</li><li>Construction</li><li>Manufacturing</li><li>Transport and Storage</li><li>Wholesale and Retail Trade</li><li>Information and Communication</li><li>Finance and Insurance</li><li>Health and Social Work</li><li>Educational Services</li><li>Public Administration and Defense</li><li>Other Services</li></ul></div>'
56-
id: item2
57-
defaultExpanded: false
58-
scroll: true
59-
focus:
60-
label: "Focus elements"
61-
description: "This variant includes checkboxes inside the accordion item."
62-
fields:
63-
items:
64-
- label: User Preferences
65-
content: '<div style="padding: 20px"><form><input type="checkbox" id="option1" name="option1"><label for="option1">Option 1</label><br><input type="checkbox" id="option2" name="option2"><label for="option2">Option 2</label><br><input type="checkbox" id="option3" name="option3"><label for="option3">Option 3</label><br><input type="checkbox" id="option4" name="option4"><label for="option4">Option 4</label><br><input type="checkbox" id="option5" name="option5"><label for="option5">Option 5</label></form></div>'
66-
id: item1
67-
defaultExpanded: false
68-
scroll: false
69-
- label: More Preferences
70-
content: '<div style="padding: 20px"><form><input type="checkbox" id="option3" name="option3"><label for="option3">Option 3</label><br><input type="checkbox" id="option4" name="option4"><label for="option4">Option 4</label></form></div>'
71-
id: item2
72-
defaultExpanded: false
73-
scroll: false
74-
visibility: storybook
7+
quote:
8+
type: string
9+
label: Quote
10+
description: The main quoted text content.
11+
preview: "The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind."
12+
cite:
13+
type: string
14+
label: Citation
15+
description: The source or author of the quote.
16+
preview: ILO Director-General Gilbert F. Houngbo
17+
visibility: storybook

‎packages/twig/stories/blockquote.stories.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Blockquote from "../src/components/blockquote/blockquote.twig";
2+
import BlockquotePatterns from "../src/components/blockquote/blockquote.component.yml";
3+
import { Maestro } from "@ilo-org/maestro";
4+
5+
const story = Maestro.create(Blockquote, BlockquotePatterns);
6+
7+
const Meta = {
8+
title: "Components/Content/Blockquote",
9+
tags: ["autodocs"],
10+
...story.meta,
11+
};
12+
13+
const [Default] = story.stories;
14+
15+
export default Meta;
16+
export { Default };

0 commit comments

Comments
 (0)