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="6620bc6c169b4">
<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="6620bc6c16a2e">
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="6620bc6c16a66">
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="6620bc6c16ac4">
<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.
@endacceptanceAcceptance: 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="6620bc6c16b4d">
<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-6620bc6c16b4d" aria-label="info" type="button" data-uid="6620bc6c16b85">
<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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="info" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6620bc6c16be4">
info
</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="6620bc6c16c22">
<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-outlined material-symbols-outlined--filled c-icon--size-inherit" aria-hidden="true" material-symbol="play_circle" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6620bc6c16c55">
play_circle
</span>
</span>
</span> </button>
<!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__modal-6620bc6c16b4d" id="modal-6620bc6c16b4d" data-uid="6620bc6c16cb4">
<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-6620bc6c16b4d" data-uid="6620bc6c16ce9">
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="6620bc6c16d1e">
<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-outlined material-symbols-outlined--filled c-icon--size-lg" aria-hidden="true" material-symbol="close" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6620bc6c16d51">
close
</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="6620bc6c16dd1">
<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="6620bc6c16e05">
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="6620bc6c16e30">
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="6620bc6c16e5f">
<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!
@endacceptanceBlade 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. |