diff --git a/eds/blocks/columns/columns.css b/eds/blocks/columns/columns.css index 40d15fb9..8ad09989 100644 --- a/eds/blocks/columns/columns.css +++ b/eds/blocks/columns/columns.css @@ -52,24 +52,14 @@ } .columns .play-button { - align-items: center; - background-color: var(--calcite-ui-foreground-2); - block-size: 50px; - border-radius: 50px; - color: var(--calcite-ui-text-1); display: flex; - inline-size: 50px; + align-items: center; inset-block-start: calc(50% - 25px); inset-inline-end: calc(50% - 25px); justify-content: center; position: absolute; } -.columns .play-button:is(:hover,:focus) { - background-color: var(--calcite-ui-foreground-1); - color: var(--calcite-ui-text-1); -} - .columns .video-link { display: flex; position: relative; diff --git a/eds/blocks/columns/columns.js b/eds/blocks/columns/columns.js index b24c05a7..acf02d8a 100644 --- a/eds/blocks/columns/columns.js +++ b/eds/blocks/columns/columns.js @@ -63,18 +63,18 @@ export default function decorate(block) { if (vidURL) { vidURL.innerHTML = ''; vidURL.appendChild(picture); - const playButton = document.createElement('div'); - playButton.classList.add('play-button'); - playButton.setAttribute('aria-label', 'play video'); - playButton.setAttribute('tabindex', '0'); - playButton.setAttribute('aria-hidden', 'false'); - const calciteIcon = document.createElement('calcite-icon'); - calciteIcon.setAttribute('scale', 's'); - calciteIcon.setAttribute('appearance', 'solid'); - calciteIcon.setAttribute('icon', 'play-f'); - calciteIcon.setAttribute('aria-hidden', 'true'); - calciteIcon.setAttribute('calcite-hydrated', ''); - playButton.appendChild(calciteIcon); + const playButton = calciteButton({ + class: 'play-button', + 'icon-start': 'play-f', + label: 'play video', + 'aria-hidden': 'false', + 'aria-label': 'play video', + appearance: 'solid', + kind: 'inverse', + scale: 'l', + round: '', + }); + vidURL.appendChild(playButton); } });