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

Brightcove Audio Player #2482

Merged
merged 4 commits into from
May 2, 2022
Merged

Brightcove Audio Player #2482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e669aef
Added in an audio player on the video test pages
bolt-bot Apr 21, 2022
3bc556f
updated the audio test page with the latest
bolt-bot Apr 27, 2022
eb05809
Added a video player for testing along side the audio player
bolt-bot Apr 29, 2022
3a2bbcd
Updated the audio player test page based on the MRR feedback
bolt-bot May 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 3 additions & 33 deletions docs-site/src/pages/pattern-lab/_patterns/40-components/tooltip/05-tooltip.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,12 @@
{% set tooltip %}
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'this piece of text',
content: 'This is what we call a tooltip.',
} only %}
{# End component specific code #}
{% endset %}

<bolt-text>
A tooltip is used to provide descriptive help to the user about the control that the mouse is over. For instance, moving the mouse over {{ tooltip }}. for a second can display a small popup label containing more detailed description. When the mouse is moved again, the tooltip disappears. This is a useful means of providing additional details about a user interface without cluttering up the main interface.
A tooltip is used to provide descriptive help to the user about the control that the mouse is over. For instance, moving the mouse over {{ tooltip }} for a second can display a small popup label containing more detailed description. When the mouse is moved again, the tooltip disappears. This is a useful means of providing additional details about a user interface without cluttering up the main interface.
</bolt-text>
<bolt-text>
When adding an inline tooltip be sure to trim any unwanted space around the element, especially when you want to add any characters before the tooltip. Removing the whitespace is possible using <code>spaceless</code> tag when declaring a variable.
</bolt-text>

{% set twig_code %}
{% verbatim %}
{% set tooltip %}{% spaceless %}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'This is the tooltip trigger',
content: 'This is the tooltip content.'
} only %}
{% endspaceless %}{% endset %}
{% endverbatim %}
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
content: twig_code,
lang: 'twig',
} only %}

<p>Or use <code>|spaceless</code> filter when printing the variable.</p>

{% set twig_code %}
{% verbatim %}
{{ tooltip|spaceless }}
{% endverbatim %}
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
content: twig_code,
lang: 'twig',
} only %}
13 changes: 13 additions & 0 deletions ...rc/pages/pattern-lab/_patterns/40-components/tooltip/10-tooltip-placement-variations.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,23 @@
{% set tooltips_top %}
<bolt-list display="inline" spacing="xlarge" align="center">
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'bottom-start',
content: content,
placement: 'bottom-start'
} only %}
</bolt-list-item>
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'bottom',
content: content,
placement: 'bottom'
} only %}
</bolt-list-item>
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'bottom-end',
content: content,
Expand All @@ -30,6 +33,7 @@
<bolt-list spacing="medium">
<bolt-list-item>
<div class="u-bolt-text-align-right">
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'left-start',
content: content,
Expand All @@ -39,6 +43,7 @@
</bolt-list-item>
<bolt-list-item>
<div class="u-bolt-text-align-right">
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'left',
content: content,
Expand All @@ -48,6 +53,7 @@
</bolt-list-item>
<bolt-list-item>
<div class="u-bolt-text-align-right">
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'left-end',
content: content,
Expand All @@ -60,20 +66,23 @@
{% set tooltips_bottom %}
<bolt-list display="inline" spacing="xlarge" align="center">
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'top-start',
content: content,
placement: 'top-start'
} only %}
</bolt-list-item>
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'top',
content: content,
placement: 'top'
} only %}
</bolt-list-item>
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'top-end',
content: content,
Expand All @@ -85,20 +94,23 @@
{% set tooltips_left %}
<bolt-list spacing="medium">
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'right-start',
content: content,
placement: 'right-start'
} only %}
</bolt-list-item>
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'right',
content: content,
placement: 'right'
} only %}
</bolt-list-item>
<bolt-list-item>
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'right-end',
content: content,
Expand Down Expand Up @@ -150,6 +162,7 @@
{% set trigger = 'CRM' %}
{% set content = 'Customer relationship management' %}
{% set tooltip %}
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: trigger,
content: content,
Expand Down
2 changes: 2 additions & 0 deletions docs-site/src/pages/pattern-lab/_patterns/40-components/tooltip/15-tooltip-inverted.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
{% set tooltip %}
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: 'this example',
content: 'This is an inverted tooltip.',
inverted: true
} only %}
{# End component specific code #}
{% endset %}

{% set content %}
Expand Down
4 changes: 4 additions & 0 deletions ...ages/pattern-lab/_patterns/40-components/tooltip/20-tooltip-use-case-button-and-link.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
{% cell %}
<bolt-list display="inline" spacing="large">
<bolt-list-item>
{# Start component specific code #}
{% set text_link %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'CRM',
Expand All @@ -14,8 +15,10 @@
trigger: text_link,
content: 'Customer relationship management',
} only %}
{# End component specific code #}
</bolt-list-item>
<bolt-list-item>
{# Start component specific code #}
{% set button %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Download',
Expand All @@ -28,6 +31,7 @@
trigger: button,
content: 'File size: 25MB',
} only %}
{# End component specific code #}
</bolt-list-item>
</bolt-list>
{% endcell %}
Expand Down
2 changes: 2 additions & 0 deletions ...-site/src/pages/pattern-lab/_patterns/40-components/tooltip/25-tooltip-use-case-icon.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@

{% grid 'o-bolt-grid--center' %}
{% cell %}
{# Start component specific code #}
{% include '@bolt-components-tooltip/tooltip.twig' with {
trigger: lock_icon,
content: 'Closed for replies',
Expand All @@ -44,5 +45,6 @@
trigger: close_icon,
content: 'This is no bueno. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttito. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque.',
} only %}
{# End component specific code #}
{% endcell %}
{% endgrid %}
49 changes: 0 additions & 49 deletions docs-site/src/pages/pattern-lab/_patterns/999-tests/tooltip/20-tooltip-whitespace.twig
View file
Open in desktop

This file was deleted.

48 changes: 31 additions & 17 deletions docs-site/src/pages/pattern-lab/_patterns/999-tests/video/40-audio-player.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,26 @@
{% set main_content %}
{% set video %}
<video-js
data-account="1900410236"
data-player="O3FkeBiaDz"
data-embed="default"
data-video-id="4892122320001"
controls
class="c-base-video"></video-js>
{% endset %}

{% include '@bolt-elements-ratio/ratio.twig' with {
content: video,
ratio: 'wide'
} only %}

{% set audio_player %}
<div style="max-width: 480px;height:60px;">
<div style="max-width: 480px;">
<video-js
data-account="1900410236"
data-player="h8qT2MQfn"
data-video-id="6302315717001"
data-video-id="6305155733001"
data-playback-rates="[0.75,1,1.25,1.5,2]"
data-embed="default"
controls=""
data-application-id=""
Expand All @@ -13,79 +29,79 @@
{% endset %}

{% set white_theme %}
<div class="t-bolt-white">
<div class="t-bolt-white u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set black_theme %}
<div class="t-bolt-black">
<div class="t-bolt-black u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set gray_light_theme %}
<div class="t-bolt-gray-xlight">
<div class="t-bolt-gray-xlight u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set navy_dark_theme %}
<div class="t-bolt-navy-dark">
<div class="t-bolt-navy-dark u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set navy_theme %}
<div class="t-bolt-navy">
<div class="t-bolt-navy u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set navy_light_theme %}
<div class="t-bolt-navy-light">
<div class="t-bolt-navy-light u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set teal_theme %}
<div class="t-bolt-teal">
<div class="t-bolt-teal u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set yellow_theme %}
<div class="t-bolt-yellow">
<div class="t-bolt-yellow u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set orange_theme %}
<div class="t-bolt-orange">
<div class="t-bolt-orange u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set pink_theme %}
<div class="t-bolt-pink">
<div class="t-bolt-pink u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set wine_theme %}
<div class="t-bolt-wine">
<div class="t-bolt-wine u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set berry_theme %}
<div class="t-bolt-berry">
<div class="t-bolt-berry u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}

{% set violet_theme %}
<div class="t-bolt-violet">
<div class="t-bolt-violet u-bolt-padding-medium">
{{ audio_player }}
</div>
{% endset %}
Expand Down Expand Up @@ -156,5 +172,3 @@
content: main_content,
}
} only %}

<script src="https://players.brightcove.net/1900410236/h8qT2MQfn_default/index.min.js"></script>