Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DS-529: Pega.com: Add 'Download slides' CTA to PW Replays "Best Of" cards #2312

Merged
merged 12 commits into from
Sep 13, 2021
Merged

DS-529: Pega.com: Add 'Download slides' CTA to PW Replays "Best Of" cards #2312

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
807383b
DS-529: Add download slides cta
Sep 7, 2021
1564241
DS-529: Add detailed desc to a PDF cta
Sep 9, 2021
8680108
DS-529: Update cta in docs
Sep 9, 2021
01b139f
DS-529: Change request - update schema
Sep 10, 2021
bc888b7
DS-529: Change request - remove a11y amenities + rename props in twigs
Sep 10, 2021
e528c1c
DS-529: Change request - align action list to the left
Sep 10, 2021
9b5f870
DS-529: Change request - add CTA in BOC to all video items
Sep 10, 2021
7c694c9
DS-529: Change request - Remove all phases and keep one final version
Sep 10, 2021
bdbeaea
Updated the icon/text alignment in the action list and added a toolti…
bolt-bot Sep 10, 2021
dd38510
ds-529: fix icon alignment
mikemai2awesome Sep 10, 2021
d761838
DS-529: Update teaser Jest snapshot
danielamorse Sep 11, 2021
1025d74
DS-529: Switch tooltip in demo from WC to Twig, add to code snippet
danielamorse Sep 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 50 additions & 1 deletion ...te/src/pages/pattern-lab/_patterns/40-components/teaser/30-teaser-status-and-actions.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% set description %}
The <bolt-code-snippet display="inline">status</bolt-code-snippet> prop can be used to display status information about a resource such as locked and view count. Like and share buttons can be generated via the <bolt-code-snippet display="inline">actions</bolt-code-snippet> prop.
The <bolt-code-snippet display="inline">status</bolt-code-snippet> prop can be used to display status information about a resource such as locked and view count. Like, share and download buttons can be generated via the <bolt-code-snippet display="inline">actions</bolt-code-snippet> prop.
{% endset %}

{% set notes %}
Expand All @@ -8,6 +8,7 @@
<bolt-li>Locked status can be set via the <bolt-code-snippet display="inline">status.locked</bolt-code-snippet> prop. If this is set, a lock icon will appear with the signifier.</bolt-li>
<bolt-li>Pass a like button into the <bolt-code-snippet display="inline">like</bolt-code-snippet> prop. Example code snippet is shown below.</bolt-li>
<bolt-li>Pass a share popover menu into the <bolt-code-snippet display="inline">share</bolt-code-snippet> prop. Boundary is required on the popover. Example code snippet is shown below.</bolt-li>
<bolt-li>Pass a download cta button into the <bolt-code-snippet display="inline">download_cta</bolt-code-snippet> prop. Example code snippet is shown below.</bolt-li>
</bolt-ol>
{% endset %}

Expand Down Expand Up @@ -95,6 +96,29 @@
boundary: '.js-bolt-target-teaser',
} only %}
{% endset %}
{% set download_cta %}
{% set icon_download %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'download',
} only %}
{% endset %}
{% set sr_only %}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not needed. The visible text is already descriptive enough. Also, I do not see in the ticket's Definition of Done that says include (PDF, 3 pages, 2.3mb). Is the ticket out of date?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've read that it's a good practice to add a file name, number of pages, and weight of o file for screen readers to announce details of a downloading resource. But if it is not necessary I've already deleted those labels.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the data exists, they can create a tooltip with the info. I'll leave that for them to decide.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I asked Ross in the ticket. Will wait for his reply. https://pegadigitalit.atlassian.net/browse/WWW-858?focusedCommentId=37360

{% include "@bolt-components-headline/text.twig" with {
text: "Downloads a PDF file.",
attributes: {
class: 'u-bolt-visuallyhidden'
}
} only %}
{% endset %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Download slides (PDF, 3 pages, 2.3mb)' ~ sr_only,
icon_before: icon_download,
reversed_underline: true,
attributes: {
href: 'https://www.pega.com/',
},
} only %}
{% endset %}

<div style="max-width: 60ch;">
{% include '@bolt-components-teaser/teaser.twig' with {
Expand All @@ -112,6 +136,7 @@
},
like: like,
share: share,
download_cta: download_cta,
status: {
views: '28k',
locked: true,
Expand Down Expand Up @@ -174,11 +199,35 @@
boundary: '.js-bolt-target-teaser', // JS target for containing the popover within the teaser.
} only %}
{% endset %}
{% set download_cta %}
{% set icon_download %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'download',
} only %}
{% endset %}
{% set sr_only %}
mikemai2awesome marked this conversation as resolved.
Show resolved Hide resolved
{% include "@bolt-components-headline/text.twig" with {
text: "Downloads a PDF file.",
attributes: {
class: 'u-bolt-visuallyhidden'
}
} only %}
{% endset %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Download slides (PDF, 3 pages, 2.3mb)' ~ sr_only,
icon_before: icon_download,
reversed_underline: true,
attributes: {
href: 'https://www.pega.com',
},
} only %}
{% endset %}

// Set up the component
{% include '@bolt-components-teaser/teaser.twig' with {
like: like,
share: share,
download_cta: download_cta,
status: {
views: '28k',
locked: true,
Expand Down
9 changes: 7 additions & 2 deletions packages/components/bolt-teaser/src/teaser.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
</div>
{% endif %}

{% if status.views or like or share %}
{% if status.views or like or share or download_cta %}
<div class="c-bolt-teaser__actions-and-views">
{% if status.views %}
<div class="c-bolt-teaser__views">
Expand All @@ -105,7 +105,7 @@
{{ status.views }} {{ 'views'|t }}
</div>
{% endif %}
{% if like or share %}
{% if like or share or download_cta %}
mikemai2awesome marked this conversation as resolved.
Show resolved Hide resolved
<ul class="c-bolt-teaser__action-list">
{% if like %}
<li class="c-bolt-teaser__action-list-item">
Expand All @@ -117,6 +117,11 @@
{{ share }}
</li>
{% endif %}
{% if download_cta %}
<li class="c-bolt-teaser__action-list-item">
{{ download_cta }}
</li>
{% endif %}
</ul>
{% endif %}
</div>
Expand Down
4 changes: 4 additions & 0 deletions packages/components/bolt-teaser/teaser.schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,10 @@ module.exports = {
type: 'object',
description: 'Render the share button. Share menu is expected here.',
},
download_cta: {
mikemai2awesome marked this conversation as resolved.
Show resolved Hide resolved
type: 'object',
description: 'Render the download link. Link element is expected here.',
},
chip_list: {
type: 'object',
description:
Expand Down