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.

<!-- 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

This is the information that is shown describing what accepting means.
<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.

<!-- 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&amp;extent=12.7047,56.0333,12.73,56.041&amp;home=true&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=false&amp;basemap_gallery=true&amp;disable_scroll=false&amp;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&amp;extent=12.7047,56.0333,12.73,56.041&amp;home=true&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=false&amp;basemap_gallery=true&amp;disable_scroll=false&amp;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.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Acceptance/acceptance.json