Skip to content

Commit 9d74a9b

Browse files
ElisaShapiroElisaShapiro
authored
[PLAY-2509] Playbook Website: Accessibility Updates to new Tokens/Global Props pages (#5648)
**What does this PR do?** A clear and concise description with your runway ticket url. [PLAY-2509](https://runway.powerhrg.com/backlog_items/PLAY-2509) makes some Accessibility updates for some of our new Website pages. Accessibility evaluated with Firefox's accessibility tools, Safari's accessibility tools, and MacOS' VoiceOver Screenreader. This PR addresses: - Tokens and Global Props index page - removing Title surrounding arrow-right-long icon removed "headings should have visible text content" warning. - Colors Token Page - adding firstColumnBold=false removed a Heading “headings must be labeled” warning. - ExampleCodeCard - adjusting the logic here removed "generic: clickable elements must be focusable and should have interactive semantics" from copiable and non-copiable example segments while preserving their look (also makes the copiable ones keyboard interactive!) - Footer - Large Powergon no longer has "Text Labels and Names content with images must be labeled" warning. - /beta/kits page - added Aria to the React/Rails/Swift SVGs in the Nav/Search section to remove "Content with images must be labeled" warning Not easily solvable so left untouched: - Footer - the GitHub icon in the footer button still has a "Text Labels and Names content with images must be labeled" warning - unable to access this icon/add aria on it from the kit. - Dark Global Prop page - accessibility warnings on the Selectable Cards in the examples (related to the structure of the kit itself see [PLAY-2421](https://runway.powerhrg.com/backlog_items/PLAY-2421) not solvable now without using diff examples). - /beta/kits search bar - has a "Text Labels and Names Form elements should have a visible text label" - not fixable without a design update so did not touch here. **Screenshots:** Screenshots to visualize your addition/change <img width="205" height="202" alt="powergon resolved" src="https://github.com/user-attachments/assets/6a0f8095-4392-4e36-99d2-c0c35f42b11f" /> <img width="708" height="642" alt="arrow resolved" src="https://github.com/user-attachments/assets/96d245b6-31bb-4bef-9857-6137b30bc9df" /> <img width="869" height="711" alt="color resolved" src="https://github.com/user-attachments/assets/03e7fcb6-c62b-4e1e-b4b2-1d69a744d203" /> <img width="1624" height="530" alt="cursor values resolved" src="https://github.com/user-attachments/assets/8a3521b7-f2fa-4ca9-bdbf-f61da92baa10" /> <img width="1592" height="571" alt="cursor example resolved" src="https://github.com/user-attachments/assets/13292fae-b282-4411-ba3c-f769ed555fbc" /> <img width="895" height="390" alt="react icon resolved" src="https://github.com/user-attachments/assets/65241566-365c-497d-88ee-c5a83856e056" /> **How to test?** Steps to confirm the desired behavior: 1. Go to the Tokens index page in the review env in Firefox. Open accessibility tools and evaluate the page. See resolution of warnings compared to prod on the arrow icon and Powergon icon. Open in Safari and run accessibility check - only main warning should be the old sidebar Typeahead element. 2. Go to the Global Props index page and evaluate the same way as 1. 3. Go to the Colors Token page and evaluate the first column (ColorSwatch) vs. prod with accessibility tools. 4. Go to any Token or Global Prop page with ExampleCodeCard elements for Values, React/Rails Examples, or Responsive examples, and evaluate vs. prod with accessibility tools. 5. Go the /beta/kits page and #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. ~~- [ ] **TESTS** I have added test coverage to my code.~~ - [x] **SEMVER** I have added a `minor`, `major`, or `patch` label for release. - [x] **RC** I have added an `inactive RC` label if not an active RC.
1 parent 42f2036 commit 9d74a9b

8 files changed

Lines changed: 60 additions & 33 deletions

File tree

‎playbook-website/app/javascript/components/GlobalPropsAndTokens/ExamplesPage/Examples/Colors.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const Colors = () => {
3434
>
3535
<Title paddingTop="md" size={2}>Base Colors</Title>
3636
<PropsExamplesTable
37+
firstColumnBold={false}
3738
headers={["Color", "Token", "Value"]}
3839
rows={[
3940
[
@@ -110,6 +111,7 @@ const Colors = () => {
110111
/>
111112
<Title paddingTop="md" size={2}>Main Colors</Title>
112113
<PropsExamplesTable
114+
firstColumnBold={false}
113115
headers={["Color", "Token", "Value"]}
114116
rows={[
115117
[
@@ -131,6 +133,7 @@ const Colors = () => {
131133
/>
132134
<Title paddingTop="md" size={2}>UI Colors</Title>
133135
<PropsExamplesTable
136+
firstColumnBold={false}
134137
headers={["Color", "Token", "Value", "Use Case"]}
135138
rows={[
136139
[
@@ -193,6 +196,7 @@ const Colors = () => {
193196
/>
194197
<Title paddingTop="md" size={2}>Text Colors</Title>
195198
<PropsExamplesTable
199+
firstColumnBold={false}
196200
headers={["Color", "Token", "Value", "Use Case"]}
197201
rows={[
198202
[
@@ -271,6 +275,7 @@ const Colors = () => {
271275
/>
272276
<Title paddingTop="md" size={2}>State Colors</Title>
273277
<PropsExamplesTable
278+
firstColumnBold={false}
274279
headers={["Color", "Token", "Value", "Use Case"]}
275280
rows={[
276281
[
@@ -357,6 +362,7 @@ const Colors = () => {
357362
/>
358363
<Title paddingTop="md" size={2}>Utility Colors</Title>
359364
<PropsExamplesTable
365+
firstColumnBold={false}
360366
headers={["Color", "Token", "Value", "Use Case"]}
361367
rows={[
362368
[
@@ -403,6 +409,7 @@ const Colors = () => {
403409
/>
404410
<Title paddingTop="md" size={2}>Status Colors</Title>
405411
<PropsExamplesTable
412+
firstColumnBold={false}
406413
headers={["Color", "Token", "Value", "Use Case"]}
407414
rows={[
408415
[
@@ -545,6 +552,7 @@ const Colors = () => {
545552
/>
546553
<Title paddingTop="md" size={2}>Data Colors</Title>
547554
<PropsExamplesTable
555+
firstColumnBold={false}
548556
headers={["Color", "Token", "Value", "Use Case"]}
549557
rows={[
550558
[
@@ -615,6 +623,7 @@ const Colors = () => {
615623
/>
616624
<Title paddingTop="md" size={2}>Category Colors</Title>
617625
<PropsExamplesTable
626+
firstColumnBold={false}
618627
headers={["Color", "Token", "Value", "Use Case"]}
619628
rows={[
620629
[
@@ -789,6 +798,7 @@ const Colors = () => {
789798
/>
790799
<Title paddingTop="md" size={2}>Product Colors</Title>
791800
<PropsExamplesTable
801+
firstColumnBold={false}
792802
headers={["Color", "Token", "Value", "Use Case"]}
793803
rows={[
794804
[

‎playbook-website/app/javascript/components/GlobalPropsAndTokens/GlobalPropsIndex.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ const GlobalProps = () => {
5353

5454
<Flex justify="between" align="center" padding="sm">
5555
<Title size={4} color="link" text={title} />
56-
<Title size={4} color="link">
57-
<Icon icon="arrow-right-long" />
58-
</Title>
56+
<Icon
57+
aria={{ hidden: true }}
58+
color="link"
59+
icon="arrow-right-long"
60+
/>
5961
</Flex>
6062

6163
<Body

‎playbook-website/app/javascript/components/GlobalPropsAndTokens/Templates/Subcomponents/ExampleCodeCard.tsx‎

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useState } from "react";
1+
import { useState } from "react";
22
import { Card, Body, Icon, Flex, usePBCopy, Tooltip } from "playbook-ui";
33

44
type ExampleCodeCardTypes = {
@@ -7,6 +7,7 @@ type ExampleCodeCardTypes = {
77
copyIcon?: boolean;
88
marginBottom?: string;
99
};
10+
1011
const ExampleCodeCard = ({
1112
text,
1213
id,
@@ -23,38 +24,50 @@ const ExampleCodeCard = ({
2324
setTimeout(() => setShowTooltip(false), 1500);
2425
};
2526

26-
useEffect(() => {
27-
const el = document.getElementById(id);
28-
if (!el) return;
27+
const handleKeyDown = (e: React.KeyboardEvent) => {
28+
if (e.key === "Enter" || e.key === " ") {
29+
e.preventDefault();
30+
handleCopy();
31+
}
32+
};
2933

30-
el.addEventListener("click", handleCopy);
31-
return () => {
32-
el.removeEventListener("click", handleCopy);
33-
};
34-
}, [copyToClipboard]);
34+
if (!copyIcon) {
35+
return (
36+
<Flex alignItems="center" gap="xxs" marginBottom={marginBottom || undefined}>
37+
<Card background="light" borderNone borderRadius="sm" padding="xxs">
38+
<Body>{text}</Body>
39+
</Card>
40+
</Flex>
41+
);
42+
}
3543

3644
return (
3745
<Flex
38-
cursor={copyIcon ? "pointer" : "default"}
3946
alignItems="center"
47+
cursor="pointer"
4048
gap="xxs"
41-
htmlOptions={{ onClick: () => copyIcon && handleCopy() }}
42-
marginBottom={ marginBottom || undefined }
49+
htmlOptions={{
50+
"aria-label": `Copy ${text} to clipboard`,
51+
onClick: handleCopy,
52+
onKeyDown: handleKeyDown,
53+
role: "button",
54+
tabIndex: 0,
55+
}}
56+
inline="flex"
57+
marginBottom={marginBottom || undefined}
4358
>
4459
<Card borderRadius="sm" background="light" padding="xxs" borderNone>
4560
<Body id={id}>{text}</Body>
4661
</Card>
47-
{copyIcon && (
48-
<Tooltip
49-
delay={{ close: 1000 }}
50-
forceOpenTooltip={showTooltip}
51-
placement="top"
52-
showTooltip={false}
53-
text="Copied!"
54-
>
55-
<Icon icon="clipboard" color="light" />
56-
</Tooltip>
57-
)}
62+
<Tooltip
63+
delay={{ close: 1000 }}
64+
forceOpenTooltip={showTooltip}
65+
placement="top"
66+
showTooltip={false}
67+
text="Copied!"
68+
>
69+
<Icon aria={{ hidden: true }} color="light" icon="clipboard" />
70+
</Tooltip>
5871
</Flex>
5972
);
6073
};

‎playbook-website/app/javascript/components/GlobalPropsAndTokens/TokensIndex.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ const Tokens = () => {
5353

5454
<Flex justify="between" align="center" padding="sm">
5555
<Title size={4} color="link" text={title} />
56-
<Title size={4} color="link">
57-
<Icon icon="arrow-right-long" />
58-
</Title>
56+
<Icon
57+
aria={{ hidden: true }}
58+
color="link"
59+
icon="arrow-right-long"
60+
/>
5961
</Flex>
6062

6163
<Body

‎playbook-website/app/javascript/components/Website/src/components/KitFilter/RailsSVG.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const RailsSVG = ({ active }: RailsSVGProps) => {
99

1010
return (
1111
<div className="filter-icon">
12-
<svg width="18" height="16" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<svg width="18" height="16" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
1313
<path d="M15.2969 0L15.566 1.19979L17.4054 1.15843L17.2257 0.0829274L15.2969 0Z" fill={svgColor} />
1414
<path d="M11.1235 2.56303L10.0469 1.36345L11.5272 0.660156L12.6039 1.77702L11.1235 2.56303Z" fill={svgColor} />
1515
<path d="M2.64597 22.1289H14.5788C14.5788 22.1289 11.9321 16.5859 12.6048 11.4981C13.2779 6.41024 17.6291 4.09358 20.0964 3.84543C22.5635 3.59708 23.9095 5.00366 23.9095 5.00366L24.448 4.25902C24.448 4.25902 20.904 0.949771 16.4179 1.3222C11.9318 1.69442 8.83663 4.42444 6.90778 7.73369C4.97871 11.0431 3.85719 13.3594 3.09471 16.8341C2.33223 20.3087 2.64597 22.1289 2.64597 22.1289Z" fill={svgColor} />

‎playbook-website/app/javascript/components/Website/src/components/KitFilter/ReactSVG.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const ReactSVG = ({ active }: ReactSVGProps) => {
99

1010
return (
1111
<div className="filter-icon">
12-
<svg width="18" height="16" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<svg width="18" height="16" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
1313
<path d="M23.3594 8.23475C26.3125 9.21912 28.5 10.8597 28.5 12.5004C28.5 14.2504 26.2031 15.9457 23.0312 16.9847C22.8672 17.0394 22.7031 17.0941 22.5391 17.1488C22.5938 17.3676 22.6484 17.641 22.7031 17.8597C23.3047 21.0316 22.8125 23.6019 21.3359 24.4769C19.9141 25.2972 17.6172 24.4769 15.2656 22.4535C14.9922 22.2347 14.7734 22.016 14.5 21.7972C14.3359 21.9613 14.1172 22.1254 13.9531 22.2894C11.5469 24.4222 9.03125 25.2972 7.55469 24.4222C6.13281 23.6019 5.69531 21.1957 6.24219 18.1879C6.35156 17.8597 6.40625 17.5316 6.46094 17.2035C6.24219 17.1488 5.96875 17.0394 5.75 16.9847C2.6875 15.9457 0.5 14.1957 0.5 12.5004C0.5 10.8597 2.57812 9.27381 5.47656 8.23475C5.80469 8.12537 6.13281 8.016 6.51562 7.90662C6.40625 7.63318 6.35156 7.30506 6.29688 7.03162C5.69531 3.91443 6.13281 1.4535 7.55469 0.633184C9.03125 -0.241816 11.5469 0.687872 14.0625 2.87537C14.1719 3.03943 14.3359 3.14881 14.5 3.31287C14.7188 3.09412 14.9375 2.87537 15.1562 2.71131C17.5625 0.633184 19.9141 -0.241816 21.3359 0.578497C22.8125 1.4535 23.25 4.0785 22.5938 7.30506C22.5391 7.52381 22.4844 7.74256 22.4844 7.96131C22.7578 8.016 23.0312 8.12537 23.3594 8.23475ZM15.9219 3.58631C15.7031 3.75037 15.5391 3.96912 15.3203 4.13318C16.1406 5.06287 16.9062 6.04725 17.6172 7.08631C18.875 7.19568 20.0781 7.35975 21.3359 7.63318C21.3906 7.46912 21.3906 7.30506 21.4453 7.08631C22.0469 4.29725 21.6641 2.10975 20.7344 1.61756C19.8594 1.12537 18 1.78162 15.9219 3.58631ZM9.63281 15.3441C9.35938 14.8519 9.08594 14.4144 8.8125 13.9222C8.48438 14.7426 8.21094 15.5629 7.9375 16.3285C8.75781 16.5472 9.63281 16.6566 10.5078 16.766C10.1797 16.2738 9.90625 15.8363 9.63281 15.3441ZM7.9375 8.78162C8.21094 9.54725 8.48438 10.3129 8.8125 11.1332C9.08594 10.641 9.35938 10.2035 9.63281 9.71131C9.90625 9.27381 10.1797 8.78162 10.4531 8.34412C9.57812 8.4535 8.75781 8.56287 7.9375 8.78162ZM9.46875 12.5551C9.85156 13.266 10.2344 14.0316 10.6172 14.7426C11.0547 15.4535 11.4922 16.1644 11.9844 16.8754C12.8047 16.9301 13.625 16.9847 14.5 16.9847C15.3203 16.9847 16.1953 16.9301 17.0156 16.8754C17.4531 16.1644 17.8906 15.4535 18.3281 14.7426C18.7656 14.0316 19.1484 13.266 19.4766 12.5004C19.1484 11.7347 18.7109 11.0238 18.3281 10.3129C17.8906 9.60193 17.4531 8.891 16.9609 8.18006C16.1953 8.12537 15.3203 8.07068 14.5 8.07068C13.625 8.07068 12.8047 8.12537 11.9844 8.18006C11.4922 8.891 11.0547 9.60193 10.6172 10.3129C10.2344 11.0238 9.79688 11.7894 9.46875 12.5551ZM19.3125 15.3441C19.0391 15.7816 18.7656 16.2738 18.4922 16.7113C19.3672 16.6566 20.1875 16.4926 21.0625 16.2738C20.7891 15.4535 20.4609 14.6879 20.1328 13.8676C19.8594 14.3597 19.6406 14.8519 19.3125 15.3441ZM20.1328 11.1332C20.4609 10.3676 20.7344 9.60193 21.0078 8.78162C20.2422 8.61756 19.3672 8.4535 18.4922 8.34412C18.7656 8.78162 19.0391 9.27381 19.3125 9.71131C19.5859 10.2035 19.8594 10.641 20.1328 11.1332ZM14.5 5.00818C13.9531 5.60975 13.4062 6.266 12.8594 6.97693C13.9531 6.92225 15.0469 6.92225 16.0859 6.97693C15.5938 6.266 15.0469 5.60975 14.5 5.00818ZM8.15625 1.61756C7.28125 2.16443 6.95312 4.13318 7.44531 6.75818C7.5 7.08631 7.55469 7.35975 7.66406 7.63318C8.86719 7.35975 10.0703 7.19568 11.3281 7.08631C12.0391 6.04725 12.8047 5.06287 13.6797 4.13318C13.5156 4.02381 13.4062 3.91443 13.2422 3.75037C11.1094 1.891 9.08594 1.12537 8.15625 1.61756ZM6.78906 16.0551C7.17188 14.8519 7.60938 13.6488 8.15625 12.5551C7.66406 11.4066 7.17188 10.2582 6.84375 9.05506C6.51562 9.16443 6.1875 9.21912 5.85938 9.3285C3.39844 10.2035 1.64844 11.516 1.64844 12.5004C1.75781 13.1566 2.14062 13.7582 2.6875 14.141C3.61719 14.9066 4.98438 15.4535 6.13281 15.8363C6.35156 15.9457 6.57031 16.0004 6.78906 16.0551ZM13.1875 21.4144C13.3516 21.2504 13.5156 21.0863 13.6797 20.9222C12.8594 19.9926 12.0391 19.0082 11.3281 18.0238C10.0703 17.9144 8.86719 17.7504 7.60938 17.4769C7.55469 17.7504 7.5 18.0785 7.44531 18.4066C6.95312 20.9769 7.28125 22.891 8.15625 23.4379C8.8125 23.6566 9.46875 23.6566 10.0703 23.3285C11.2188 22.891 12.2578 22.2347 13.1875 21.4144ZM14.5 20.1019C15.1016 19.4457 15.6484 18.7894 16.1406 18.0785C15.5938 18.1332 15.0469 18.1332 14.5 18.1332C13.9531 18.1332 13.4062 18.1332 12.8594 18.0785C13.4062 18.8441 13.9531 19.5004 14.5 20.1019ZM21.6641 21.7426C21.8281 20.5394 21.7734 19.2816 21.5547 18.0785C21.5 17.8597 21.4453 17.641 21.3906 17.4222C20.1328 17.6957 18.9297 17.9144 17.6719 18.0238C16.9609 19.0629 16.1953 19.9926 15.3203 20.9222C15.5938 21.141 15.8125 21.3597 16.0312 21.5785C18.0547 23.2738 19.9141 23.9301 20.7891 23.4379C21.2812 23.0004 21.6094 22.3988 21.6641 21.7426ZM22.6484 15.8363C25.3828 14.9613 27.2969 13.5394 27.2969 12.5004C27.2969 11.516 25.4922 10.2035 22.9766 9.3285C22.7031 9.21912 22.4297 9.16443 22.1562 9.05506C21.7734 10.2582 21.3359 11.4066 20.7891 12.5004C21.3359 13.6488 21.8281 14.7972 22.2109 16.0004C22.375 15.9457 22.4844 15.891 22.6484 15.8363ZM14.5 15.016C13.0781 15.016 11.9844 13.9222 11.9844 12.5004C11.9844 11.1332 13.0781 10.0394 14.5 10.0394C15.8672 10.0394 16.9609 11.1332 16.9609 12.5004C16.9609 13.9222 15.8672 15.016 14.5 15.016Z" fill={svgColor} />
1414
</svg>
1515
</div>

‎playbook-website/app/javascript/components/Website/src/components/KitFilter/SwiftSVG.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const SwiftSVG = ({ active }: SwiftSVGProps) => {
99

1010
return (
1111
<div className="filter-icon">
12-
<svg width="18" height="16" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<svg width="18" height="16" viewBox="0 0 27 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
1313
<g clip-path="url(#clip0_4127_43623)">
1414
<path d="M24.6981 16.885C24.7611 16.759 24.7611 16.633 24.8241 16.508C26.3361 10.585 22.7441 3.65498 16.5701 0.000976562C18.5221 2.44698 19.7021 5.58298 19.7021 8.99598C19.7021 10.028 19.5941 11.034 19.3891 12.005L19.4061 11.91C19.3191 12.3 19.2111 12.638 19.0761 12.962L19.0911 12.921C18.8911 12.81 18.7261 12.706 18.5671 12.594L18.5861 12.606C13.8291 9.45698 9.6851 6.03098 5.9351 2.21698L5.9241 2.20598C8.3621 5.80798 10.8891 8.95598 13.6461 11.884L13.6101 11.845C9.4891 9.20498 5.9081 6.46698 2.5711 3.46398L2.6471 3.53098C3.1211 4.31498 3.6191 4.99398 4.1711 5.62398L4.1571 5.60698C7.4571 10.03 11.1471 13.879 15.2561 17.233L15.3731 17.325C12.1601 19.28 7.6861 19.405 3.1491 17.325C1.9461 16.755 0.913102 16.125 -0.0458984 15.402L0.000101563 15.435C2.0221 18.582 4.8801 21.036 8.2611 22.514L8.3811 22.561C10.0741 23.4 12.0681 23.892 14.1771 23.892C16.2861 23.892 18.2801 23.401 20.0511 22.527L19.9731 22.562H20.0371C20.1831 22.497 20.3081 22.412 20.4151 22.31H20.4141C21.9261 21.554 24.8881 20.737 26.5261 23.883C26.9661 24.765 27.7851 20.67 24.6991 16.889L24.6981 16.885Z" fill={svgColor} />
1515
</g>

‎playbook-website/app/views/layouts/_footer.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<%= pb_rails("flex", props: { justify: "center", margin: "lg"}) do %>
2828
<%= pb_rails("flex", props: { margin_x: { xs: "xl" }, classname: "link-container", justify: "between", max_width: "xl", flex_direction: { xs: "row" } }) do %>
2929
<%= pb_rails("flex", props: { max_width: "sm", padding_top: "xl", display: { xs: "none" } }) do %>
30-
<%= vite_image_tag("images/power-subtract-logo.svg") %>
30+
<%= vite_image_tag("images/power-subtract-logo.svg", alt: "Power Logo") %>
3131
<%= pb_rails("flex/flex_item", props: { align_self: "center" }) do %>
3232
<%= pb_rails("body", props: { dark: true, text: "As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.", color: "light", padding_left: "lg", display: { md: "none", sm: "none", xs: "none" }}) %>
3333
<% end %>

0 commit comments

Comments
 (0)