Acceptance
A component that can wrap any other content to prevent it from being rendered on page load.
Wrapped content will instead be printed inside a <template>
tag and a message will be shown to the user that lets them know that there are blocked content that they need to accept to by clicking a button included with the message.
#
Acceptance: Known provider
This is the title of a known website (Google). You can find their policy here: https://policies.google.com/privacy.
This is the information that is shown describing what accepting means.
Hey! this is the content blocked. Javascript will not run until acceptance is received.
<!-- acceptance.blade.php -->
<div class="c-acceptance js-suppressed-content u-level-1 c-acceptance--map js-suppressed-content--none" data-src="["https://google.com"]" style="height:500px" data-uid="673ed773620cb">
<div class="c-acceptance__modal js-suppressed-content-prompt">
<div class="c-acceptance__modal-description js-suppressed-content-description">
<!-- typography.blade.php original: h3 -->
<h2 class="c-typography c-acceptance__modal-title c-typography__variant--h3" data-uid="673ed7736216b">
This is the title of a known website (Google). You can find their policy here: https://policies.google.com/privacy.
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-acceptance__modal-body c-typography__variant--p" data-uid="673ed773621c2">
This is the information that is shown describing what accepting means.
</p> <div class="c-acceptance__modal-button">
<button class="c-button u-margin__y--3 c-button__filled c-button__filled--primary c-button--md" target="_top" js-suppressed-content-accept="" type="button" aria-label="accept" data-uid="673ed7736222b">
<span class="c-button__label">
<span class="c-button__label-text ">
accept
</span>
</span> </button> </div>
</div>
</div>
<!-- Display after accept -->
<div class="c-acceptance__content">
<template>
Hey! this is the content blocked. Javascript will not run until acceptance is received.
</template>
</div>
</div>
@acceptance([
'labels' => [
'knownLabels' => [
'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
'info' => 'This is the information that is shown describing what accepting means.',
'button' => 'accept'
],
'unknownLabels' => [
'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
'info' => 'This is the information that is shown describing what accepting means.',
'button' => 'accept'
]
],
"height" => '500',
"src" => ['https://google.com'],
])
Hey! this is the content blocked. Javascript will not run until acceptance is received.
@endacceptance
Acceptance: Video
Hey! this is the content blocked. Javascript will not run until acceptance is received.
<div style="position: relative;">
<!-- acceptance.blade.php -->
<div class="c-acceptance u-ratio-16-9 js-suppressed-content u-level-1 c-acceptance--video js-suppressed-content--video" data-src="["https://www.youtube.com/watch?v=axiYo61XRRw"]" style="height:500px" data-uid="673ed7736247a">
<div class="c-acceptance__modal js-suppressed-content-prompt">
<div class="c-acceptance__modal-description js-suppressed-content-description">
<button class="c-button c-acceptance__modal-info c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" data-open="modal-673ed7736247a" aria-label="info" type="button" data-uid="673ed773624bf">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--info c-icon--material c-icon--material-info material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="info" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed773625ce">
</span>
</span>
</span> </button>
<button class="c-button c-acceptance__modal-icon-play c-button__basic c-button__basic--default c-button--xxxl c-button--icon-only" target="_top" js-suppressed-content-accept="" aria-label="play_circle" type="button" data-uid="673ed7736262f">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--play-circle c-icon--material c-icon--material-play_circle material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-inherit" aria-hidden="false" material-symbol="play_circle" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed77362670">
</span>
</span>
</span> </button>
<!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__modal-673ed7736247a" id="modal-673ed7736247a" data-uid="673ed773626e4">
<div class="c-modal__header">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-673ed7736247a" data-uid="673ed77362726">
This is the title of a known website (YouTube). You can find their policy here: https://policies.google.com/privacy.
</h2> <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-close="" aria-label="close" type="button" data-uid="673ed77362768">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed773627a5">
</span>
</span>
</span> </button> </div>
<section class="c-modal__content" tabindex="2">
This is the information that is shown describing what accepting means.
</section>
</dialog>
</div>
</div>
<!-- Display after accept -->
<div class="c-acceptance__content">
<template>
Hey! this is the content blocked. Javascript will not run until acceptance is received.
</template>
</div>
</div>
</div>
<div style="position: relative;">
@acceptance([
'labels' => [
'knownLabels' => [
'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
'info' => 'This is the information that is shown describing what accepting means.',
'button' => 'accept'
],
'unknownLabels' => [
'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
'info' => 'This is the information that is shown describing what accepting means.',
'button' => 'accept'
]
],
"modifier" => 'video',
"height" => '500',
"src" => ['https://www.youtube.com/watch?v=axiYo61XRRw'],
"classList" => ['u-ratio-16-9']
])
Hey! this is the content blocked. Javascript will not run until acceptance is received.
@endacceptance
</div>
Acceptance: Map
This is the title of a known website (ArcGIS). You can find their policy here: https://www.esri.se/sv-se/integritet/gdpr.
This is the information that is shown describing what accepting means.
Hey! This should be a map!
<!-- acceptance.blade.php -->
<div class="c-acceptance js-suppressed-content u-level-1 c-acceptance--map js-suppressed-content--none" data-src="["https://helsingborg.maps.arcgis.com/apps/Embed/index.html?webmap=5e2a37ce1fe649f78889205f484caafb&extent=12.7047,56.0333,12.73,56.041&home=true&zoom=true&scale=true&search=true&searchextent=false&basemap_gallery=true&disable_scroll=false&theme=light"]" style="height:500px" data-uid="673ed773629f0">
<div class="c-acceptance__modal js-suppressed-content-prompt">
<div class="c-acceptance__modal-description js-suppressed-content-description">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-acceptance__modal-title c-typography__variant--h3" data-uid="673ed77362a31">
This is the title of a known website (ArcGIS). You can find their policy here: https://www.esri.se/sv-se/integritet/gdpr.
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-acceptance__modal-body c-typography__variant--p" data-uid="673ed77362a65">
This is the information that is shown describing what accepting means.
</p> <div class="c-acceptance__modal-button">
<button class="c-button u-margin__y--3 c-button__filled c-button__filled--primary c-button--md" target="_top" js-suppressed-content-accept="" type="button" aria-label="accept" data-uid="673ed77362a9e">
<span class="c-button__label">
<span class="c-button__label-text ">
accept
</span>
</span> </button> </div>
</div>
</div>
<!-- Display after accept -->
<div class="c-acceptance__content">
<template>
Hey! This should be a map!
</template>
</div>
</div>
@acceptance([
'labels' => [
'knownLabels' => [
'title' => 'This is the title of a known website ({SUPPLIER_WEBSITE}). You can find their policy here: {SUPPLIER_POLICY}.',
'info' => 'This is the information that is shown describing what accepting means.',
'button' => 'accept'
],
'unknownLabels' => [
'title' => 'This is the content of a unknown website ({SUPPLIER_WEBSITE}).',
'info' => 'This is the information that is shown describing what accepting means.',
'button' => 'accept'
]
],
"height" => '500',
"src" => ['https://helsingborg.maps.arcgis.com/apps/Embed/index.html?webmap=5e2a37ce1fe649f78889205f484caafb&extent=12.7047,56.0333,12.73,56.041&home=true&zoom=true&scale=true&search=true&searchextent=false&basemap_gallery=true&disable_scroll=false&theme=light'],
])
Hey! This should be a map!
@endacceptance
Blade component parameters
Key | Default value | Type | Available values | Description |
labels | false | boolean | - | Object or array containing knownLabels and unknownLabels with title, info, and button |
height | false | boolean | - | height in number ex 500 |
src | false | boolean | - | array of urls to hide ex. https://www.youtube.com |
policy | false | boolean | - | URL to third party website policy |
host | false | boolean | - | host ex. youtube.com |
name | false | boolean | - | name of the host |
icon | info | string | - | Icon name as a string. |
cover | false | boolean | - | URL for background image |
modifier | string | - | Modifier variable ex. video | |
id | string | - | The DOM id of the component. | |
classList | [] | array | - | Array containing wrapping classes array |
attributeList | [] | array | - | Array containing keys and values rendered as attributes |
containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |