Skip to content

Commit 54abbfa

Browse files
mikemai2awesomemikemai2awesome
committed
fix: docs and small design details
1 parent 0e8d18d commit 54abbfa

15 files changed

+590
-369
lines changed

‎apps/pattern-lab/src/_patterns/02-components/text/00-text-docs.twig

Lines changed: 27 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,37 @@
11
{% set schema = get_data("@bolt-components-text/text.schema.yml") %}
2-
{% set code %}
3-
{% verbatim %}
4-
{% include "@bolt-components-text/text.twig" with {
5-
text: "Eyebrow text",
6-
eyebrow: true
7-
} only %}
82

9-
{% include "@bolt-components-text/text.twig" with {
10-
text: "Headline example text",
11-
headline: true
12-
} only %}
3+
{% set code %}{% verbatim %}{% include "@bolt-components-text/text.twig" with {
4+
text: "This is an Eyebrow",
5+
eyebrow: true
6+
} only %}
137

14-
{% include "@bolt-components-text/text.twig" with {
15-
text: "Subheadline text goes here",
16-
subheadline: true
17-
} only %}
8+
{% include "@bolt-components-text/text.twig" with {
9+
text: "This is a Headline",
10+
headline: true
11+
} only %}
1812

19-
{% include "@bolt-components-text/text.twig" with {
20-
text: "Here is some text with utility classes.",
21-
tag: "div",
22-
weight: "bold",
23-
fontSize: "xlarge",
24-
util: [
25-
'width-1/1',
26-
'another-class',
27-
'one-more-class'
28-
]
29-
} only %}
30-
{% endverbatim %}
13+
{% include "@bolt-components-text/text.twig" with {
14+
text: "This is a Subheadline",
15+
subheadline: true
16+
} only %}
3117

32-
{# {% include "@bolt-components-text/text.twig" with {
33-
text: "Here is some text with an icon",
34-
tag: "div",
35-
weight: "bold",
36-
fontSize: "xlarge",
37-
icon: {
38-
name: "user",
39-
background: "circle",
40-
size: "xlarge",
41-
color: "blue",
42-
valign: "center",
43-
align: "right"
44-
},
45-
util: [
46-
'width-1/1',
47-
'another-class',
48-
'one-more-class'
49-
]
50-
} only %} #}
51-
{% endset %}
18+
{% include "@bolt-components-text/text.twig" with {
19+
text: "This is regular text.",
20+
} only %}
21+
22+
{% include "@bolt-components-text/text.twig" with {
23+
text: "This is regular text with customized options and utility classes.",
24+
tag: "div",
25+
fontSize: "xlarge",
26+
weight: "bold",
27+
util: [
28+
'margin-bottom-large',
29+
'color-indigo'
30+
]
31+
} only %}{% endverbatim %}{% endset %}
5232

5333
{% include "@utils/docs.twig" with {
5434
schema: schema,
5535
code: code,
5636
readmeFile: "@bolt-components-text/README.md",
57-
} only %}
37+
} only %}

‎apps/pattern-lab/src/_patterns/02-components/text/05-text.twig

Lines changed: 157 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,157 @@
1-
{% include "@bolt-components-text/text.twig" with {
2-
text: "This is eyebrow text",
3-
eyebrow: true
4-
} only %}
5-
{% include "@bolt-components-text/text.twig" with {
6-
text: "Headline: Here is some text",
7-
headline: true
8-
} only %}
9-
{% include "@bolt-components-text/text.twig" with {
10-
text: "Here is some subheadline text",
11-
subheadline: true
12-
} only %}
13-
{% include "@bolt-components-text/text.twig" with {
14-
text: "This is simple text for a simple example"
15-
} only %}
1+
{% set schema = bolt.data.components['@bolt-components-text'].schema %}
2+
3+
<div style="max-width: 66ch;">
4+
5+
<h3>Headlines</h3>
6+
7+
{% set headlines %}
8+
{% include "@bolt-components-text/text.twig" with {
9+
text: "This Is the XXXLarge Headline",
10+
headline: true,
11+
fontSize: "xxxlarge"
12+
} only %}
13+
{% include "@bolt-components-text/text.twig" with {
14+
text: "This Is the XXLarge Headline",
15+
headline: true,
16+
fontSize: "xxlarge"
17+
} only %}
18+
{% include "@bolt-components-text/text.twig" with {
19+
text: "This Is the XLarge Headline",
20+
headline: true,
21+
fontSize: "xlarge"
22+
} only %}
23+
{% include "@bolt-components-text/text.twig" with {
24+
text: "This Is the Large Headline",
25+
headline: true,
26+
fontSize: "large"
27+
} only %}
28+
{% include "@bolt-components-text/text.twig" with {
29+
text: "This Is the Small Headline",
30+
headline: true,
31+
fontSize: "small"
32+
} only %}
33+
{% include "@bolt-components-text/text.twig" with {
34+
text: "This Is the XSmall Headline",
35+
headline: true,
36+
fontSize: "xsmall",
37+
transform: "uppercase",
38+
letterSpacing: "wide"
39+
} only %}
40+
{% endset %}
41+
42+
<figure class="u-bolt-margin-bottom-medium">
43+
{% include "@bolt-components-band/band.twig" with {
44+
theme: "xlight",
45+
size: "small",
46+
fullBleed: false,
47+
content: headlines
48+
} only %}
49+
</figure>
50+
51+
52+
<h3>Subheadlines</h3>
53+
54+
{% set subheadlines %}
55+
{% include "@bolt-components-text/text.twig" with {
56+
text: "This Is the XXLarge Subheadline",
57+
subheadline: true,
58+
fontSize: "xxlarge"
59+
} only %}
60+
{% include "@bolt-components-text/text.twig" with {
61+
text: "This Is the XLarge Subheadline",
62+
subheadline: true,
63+
fontSize: "xlarge"
64+
} only %}
65+
{% include "@bolt-components-text/text.twig" with {
66+
text: "This Is the Large Subheadline",
67+
subheadline: true,
68+
fontSize: "large"
69+
} only %}
70+
{% endset %}
71+
72+
<figure class="u-bolt-margin-bottom-medium">
73+
{% include "@bolt-components-band/band.twig" with {
74+
theme: "xlight",
75+
size: "small",
76+
fullBleed: false,
77+
content: subheadlines
78+
} only %}
79+
</figure>
80+
81+
82+
<h3>Eyebrow</h3>
83+
84+
{% set eyebrow %}
85+
{% include "@bolt-components-text/text.twig" with {
86+
text: "This Is the Eyebrow",
87+
eyebrow: true
88+
} only %}
89+
{% endset %}
90+
91+
<figure class="u-bolt-margin-bottom-medium">
92+
{% include "@bolt-components-band/band.twig" with {
93+
theme: "xlight",
94+
size: "small",
95+
fullBleed: false,
96+
content: eyebrow
97+
} only %}
98+
</figure>
99+
100+
101+
<h3>Paragraph</h3>
102+
103+
{% set paragraph %}
104+
{% include "@bolt-components-text/text.twig" with {
105+
text: "This is regular text in a paragraph. You can make a word <em>italic</em> or <strong>bold</strong>, because text can be displayed inline or block."
106+
} only %}
107+
{% include "@bolt-components-text/text.twig" with {
108+
text: "The entire paragraph can be italic.",
109+
italic: true
110+
} only %}
111+
{% include "@bolt-components-text/text.twig" with {
112+
text: "The entire paragraph can be bold.",
113+
fontWeight: "bold"
114+
} only %}
115+
{% endset %}
116+
117+
<figure class="u-bolt-margin-bottom-medium">
118+
{% include "@bolt-components-band/band.twig" with {
119+
theme: "xlight",
120+
size: "small",
121+
fullBleed: false,
122+
content: paragraph
123+
} only %}
124+
</figure>
125+
126+
127+
<h3>Example Lockup</h3>
128+
129+
{% set exampleLockup %}
130+
{% include "@bolt-components-text/text.twig" with {
131+
text: "This is an eyebrow",
132+
eyebrow: true
133+
} only %}
134+
{% include "@bolt-components-text/text.twig" with {
135+
text: "This is a headline",
136+
headline: true,
137+
fontSize: "xxxlarge"
138+
} only %}
139+
{% include "@bolt-components-text/text.twig" with {
140+
text: "This is a subheadline",
141+
subheadline: true,
142+
fontSize: "xxlarge"
143+
} only %}
144+
{% include "@bolt-components-text/text.twig" with {
145+
text: "This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante."
146+
} only %}
147+
{% endset %}
148+
149+
<figure>
150+
{% include "@bolt-components-band/band.twig" with {
151+
theme: "light",
152+
fullBleed: false,
153+
content: exampleLockup
154+
} only %}
155+
</figure>
156+
157+
</div>

‎apps/pattern-lab/src/_patterns/02-components/text/10-text-tag-variations.twig

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
1-
{% set headingExamples = {
2-
h1: "xxxlarge",
3-
h2: "xxlarge",
4-
h3: "xlarge",
5-
h4: "large",
6-
h5: "medium",
7-
h6: "small",
8-
p: "small",
9-
span: "xsmall",
10-
cite: "xsmall",
11-
div: "xsmall",
12-
} %}
1+
{% set schema = bolt.data.components['@bolt-components-text'].schema %}
132

14-
{% for tag, heading in headingExamples %}
15-
<p>{{ tag|upper }}</p>
16-
{% include "@bolt-components-text/text.twig" with {
17-
headline: true,
18-
text: "This is an example of " ~ tag|upper ~ " with " ~ heading ~ " font size",
19-
tag: tag,
20-
fontSize: heading
21-
} only %}
3+
{% for tag in schema.properties.tag.enum %}
4+
<p class="u-bolt-margin-bottom-xsmall"><code>{{ tag }}</code></p>
5+
<figure class="u-bolt-margin-bottom-medium">
6+
{% include "@bolt-components-text/text.twig" with {
7+
text: "This is regular text using " ~ tag ~ " tag",
8+
tag: tag
9+
} only %}
10+
</figure>
2211
{% endfor %}

‎apps/pattern-lab/src/_patterns/02-components/text/15-text-display-variations.twig

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% set schema = bolt.data.components['@bolt-components-text'].schema %}
2+
3+
<div style="max-width: 66ch;">
4+
5+
{% set inlineDisplay %}
6+
{% include "@bolt-components-text/text.twig" with {
7+
text: "inline display",
8+
display: "inline",
9+
italic: true
10+
} only %}
11+
{% endset %}
12+
13+
{% include "@bolt-components-text/text.twig" with {
14+
text: "This is block display (paragraph).",
15+
display: "block"
16+
} only %}
17+
18+
{% include "@bolt-components-text/text.twig" with {
19+
text: "This is another block display (paragraph), but the text can also be " ~ inlineDisplay ~ " so this paragraph has inline text inside a block of text.",
20+
display: "block"
21+
} only %}
22+
23+
</div>

‎apps/pattern-lab/src/_patterns/02-components/text/15-text-align-variations.twig renamed to ‎apps/pattern-lab/src/_patterns/02-components/text/20-text-align-variations.twig

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{% set schema = bolt.data.components['@bolt-components-text'].schema %}
22

33
{% for align in schema.properties.align.enum %}
4-
<p>Align: {{ align|capitalize }}</p>
54
{% include "@bolt-components-text/text.twig" with {
6-
text: "This is an example of align " ~ align,
7-
headline: true,
8-
tag: "h2",
9-
fontSize: "xxlarge",
5+
text: "This is regular text using " ~ align ~ " align",
106
align: align
117
} only %}
128
{% endfor %}

‎apps/pattern-lab/src/_patterns/02-components/text/25-text-link-variations.twig

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎apps/pattern-lab/src/_patterns/02-components/text/25-text-link.twig

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{% set schema = bolt.data.components['@bolt-components-text'].schema %}
2+
3+
{% include "@bolt-components-text/text.twig" with {
4+
text: "This eyebrow is a link",
5+
url: "https://www.google.com",
6+
eyebrow: true
7+
} only %}
8+
9+
{% include "@bolt-components-text/text.twig" with {
10+
text: "This headline is a link",
11+
url: "https://www.google.com",
12+
headline: true
13+
} only %}
14+
15+
{% include "@bolt-components-text/text.twig" with {
16+
text: "This subheadline is a link",
17+
url: "https://www.google.com",
18+
subheadline: true
19+
} only %}
20+
21+
{% include "@bolt-components-text/text.twig" with {
22+
text: "This regular text is a link",
23+
url: "https://www.google.com"
24+
} only %}
25+
26+
{# {% include "@bolt-components-text/text.twig" with {
27+
text: "This headline is also a link, without an Icon",
28+
headline: true,
29+
url: "https://www.google.com",
30+
icon: false
31+
} only %}
32+
33+
{% include "@bolt-components-text/text.twig" with {
34+
text: "This is a text link, with Defined Icon",
35+
url: "https://www.google.com",
36+
icon: {
37+
name: "search"
38+
}
39+
} only %} #}

‎apps/pattern-lab/src/_patterns/02-components/text/30-text-quoted-variation.twig renamed to ‎apps/pattern-lab/src/_patterns/02-components/text/30-text-quoted.twig

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
{% set schema = bolt.data.components['@bolt-components-text'].schema %}
2+
13
{% include "@bolt-components-text/text.twig" with {
24
text: "What we do at Pega is brilliant!",
35
headline: true,

0 commit comments

Comments
 (0)