diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c30171b8..df8f66c4 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a Fix # Test URLs: -- Before: https://main--helix-block-collection--adobe.hlx.page -- After: https://--helix-block-collection--adobe.hlx.page +- Before: https://main--aem-block-collection--adobe.hlx.page +- After: https://--aem-block-collection--adobe.hlx.page diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml new file mode 100644 index 00000000..39a04bf6 --- /dev/null +++ b/.github/workflows/main.yaml @@ -0,0 +1,14 @@ +name: Build +on: [push] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20 + uses: actions/setup-node@v4 + with: + node-version: 20 + - run: npm ci + - run: npm run lint \ No newline at end of file diff --git a/.github/workflows/run-tests.yaml b/.github/workflows/run-tests.yaml deleted file mode 100644 index 093278ea..00000000 --- a/.github/workflows/run-tests.yaml +++ /dev/null @@ -1,17 +0,0 @@ -name: Linting - -on: [pull_request] - -jobs: - build: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - name: Use Node.js - uses: actions/setup-node@v3 - with: - node-version: '14' - - run: npm install - - run: npm run lint - env: - CI: true diff --git a/blocks/cookie-consent/consent-banner.js b/blocks/cookie-consent/consent-banner.js index 22265342..f51039f3 100644 --- a/blocks/cookie-consent/consent-banner.js +++ b/blocks/cookie-consent/consent-banner.js @@ -1,22 +1,11 @@ import { fetchPlaceholders, - decorateIcons, } from '../../scripts/aem.js'; import { loadFragment } from '../fragment/fragment.js'; import { buildAndShowDialog } from './consent-dialog.js'; const BASE_CONSENT_PATH = '/block-collection/cookie-consent'; -function addCloseButton(banner) { - const closeButton = document.createElement('button'); - closeButton.classList.add('close-button'); - closeButton.setAttribute('aria-label', 'Close'); - closeButton.type = 'button'; - closeButton.innerHTML = ''; - closeButton.addEventListener('click', () => (banner.close ? banner.close() : banner.remove())); - banner.append(closeButton); - decorateIcons(closeButton); -} function addListeners(bannerDiv, consentUpdateCallback, arrayCategories, categoriesSections) { const acceptAll = bannerDiv.querySelector('.consent.banner .accept'); @@ -94,7 +83,7 @@ function createBanner(bannerSection) { div.append(...content); const acceptAllButton = ``; const rejectAllButton = ``; - const moreInfoLink = `${placeholders.moreInformation || 'More Information'}`; + const moreInfoLink = ` ${placeholders.moreInformation || 'More Information'}`; if (buttonsArray.includes('more_info')) { div.querySelector('p').append(document.createRange().createContextualFragment(moreInfoLink)); } @@ -106,7 +95,6 @@ function createBanner(bannerSection) { div.append(buttonsDiv); } - addCloseButton(div); return div; } diff --git a/blocks/cookie-consent/cookie-consent.css b/blocks/cookie-consent/cookie-consent.css index 66ad2dab..0b9d13d2 100644 --- a/blocks/cookie-consent/cookie-consent.css +++ b/blocks/cookie-consent/cookie-consent.css @@ -1,40 +1,36 @@ -.consent { - font-size: var(--body-font-size-s); -} - -.consent .consent-button { - font-size: var(--body-font-size-s); - margin: 0; -} - -.consent .close-button { - position: absolute; - top: 0; - right: 0; - width: 20px; - height: 100%; - max-height: 54px; - border-radius: 0 var(--dialog-border-radius) 0 0; - background-color: unset; - text-overflow: clip; - margin: 0; - border: none; - padding-right: 30px; - padding-left: 0; +:root { + --consent-banner-background-color: #202124; + --consent-banner-font-size-s: 12px; + --consent-banner-font-size-l: 14px; + --consent-banner-text-color: #eee; + --consent-banner-link-color: var(--link-color); } .consent.banner { + font-size: var(--consent-banner-font-size-s); + color: var(--consent-banner-text-color); + background-color: var(--consent-banner-background-color); position: fixed; bottom: 0; - width: 100%; - text-align: center; - background-color: rgb(180 176 176 / 95%); - z-index: 10; - padding: 10px 0; + left: 0; + padding: 8px 16px; display: flex; align-items: center; - justify-content: center; + text-align: left; + justify-content: left; flex-flow: row wrap; + margin: 16px; + border-radius: 4px; + box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%); + flex-wrap: wrap; +} + +@media (width >= 600px) { + .consent.banner { + font-size: var(--consent-banner-font-size-l); + text-align: center; + justify-content: center; + } } .consent.banner .default-content-wrapper { @@ -48,6 +44,7 @@ } .consent.banner .consent-button { + font-size: var(--consent-banner-font-size); padding: 5px; margin: 5px; border: none; @@ -56,18 +53,19 @@ } .consent.banner .consent-button.primary { - color: var(--link-color); + color: var(--consent-banner-link-color); } .consent.banner .consent-button.secondary { - color: var(--light-color); + color: var(--consent-banner-link-color); } .consent.banner .more-info { - color: var(--link-color); + color: var(--consent-banner-link-color); } .consent dialog { + font-size: var(--body-font-size-s); overscroll-behavior: none; padding: 30px; border: 1px solid #ccc; @@ -77,6 +75,29 @@ width: clamp(300px, 80%, 700px); } +/* stylelint-disable-next-line no-descending-specificity */ +.consent dialog .consent-button { + font-size: var(--body-font-size-s); + margin: 0; +} + +.consent dialog .close-button { + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 100%; + max-height: 54px; + border-radius: 0 var(--dialog-border-radius) 0 0; + background-color: unset; + text-overflow: clip; + margin: 0; + border: none; + padding-right: 30px; + padding-left: 0; +} + + .consent dialog::backdrop { background-color: rgb(0 0 0 / 50%); }