Merge pull request #103 from spring-media/feature/REDO-1942

feat: refactor cmp placeholder to support stage layouts
spring-media · Feb 24, 2022 · a90c403 · a90c403
2 parents 57fbd86 + 10afdf2
commit a90c403
Show file tree

Hide file tree

Showing 40 changed files with 722 additions and 888 deletions.
diff --git a/playground/apps/common.css b/playground/apps/common.css
@@ -3,12 +3,15 @@
   flex-direction: column;
   align-items: center;
   list-style-type: none;
+  max-width: 992px;
+
+  padding: 0;
+  margin: auto;
 }
 
 .embed__item {
   margin-bottom: 20px;
   width: 100%;
-  max-width: 600px;
 }
 
 .privacy-manager__container {
@@ -26,7 +29,7 @@
   color: #fff;
 }
 
-.pur-section {
+.section {
   font-family: Gotham XNarrow, sans-serif;
   font-style: normal;
   font-weight: bold;
@@ -39,3 +42,33 @@
   padding: 12px;
   color: #000;
 }
+
+.layout-1 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas: 'slot1 slot1 slot2';
+  grid-gap: 16px;
+
+  margin-bottom: 20px;
+}
+
+.layout-1 > :nth-child(1) {
+  grid-area: slot1;
+}
+
+.layout-1 > :nth-child(2) {
+  grid-area: slot2;
+}
+
+.layout-2 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas: 'slot1 slot1 slot2';
+  grid-gap: 16px;
+
+  margin-bottom: 20px;
+}
+
+.layout-2 > :nth-child(1) {
+  grid-area: slot1;
+}
diff --git a/playground/apps/esm-bundle.js b/playground/apps/esm-bundle.js
@@ -112,7 +112,7 @@ const PlaygroundApp = Vue.extend({
                 </embed-consent>
             </li>
         </ul>
-        <h2 class="pur-section">PUR</h2>
+        <h2 class="section">PUR</h2>
         <ul class="embed__container social-embeds__container">
             <li class="embed__item">
                 <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true"></embed-facebook-consent>
@@ -143,6 +143,28 @@ const PlaygroundApp = Vue.extend({
                 </embed-consent>
             </li>
         </ul>
+        <h2 class="section">LAYOUT SECTION</h2>
+        <div class="embed__container social-embeds__container layout-1">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" teaserFormat="quad"></embed-facebook-consent>
+            <embed-instagram-consent :content="instagram" :privacyManagerId="privacyManagerId" teaserFormat="bc"></embed-instagram-consent>
+        </div>
+        <div class="embed__container social-embeds__container layout-2">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" teaserFormat="a-teaser"></embed-facebook-consent>
+        </div>
+        <div class="embed__container social-embeds__container">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" teaserFormat="super-a"></embed-facebook-consent>
+        </div>
+        <h2 class="section">LAYOUT SECTION PUR</h2>
+        <div class="embed__container social-embeds__container layout-1">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="quad"></embed-facebook-consent>
+            <embed-instagram-consent :content="instagram" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="bc"></embed-instagram-consent>
+        </div>
+        <div class="embed__container social-embeds__container layout-2">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="a-teaser"></embed-facebook-consent>
+        </div>
+        <div class="embed__container social-embeds__container">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="super-a"></embed-facebook-consent>
+        </div>
     </div>
   `,
   methods: {

diff --git a/src/vue/components/EmbedConsent/EmbedConsent.vue b/src/vue/components/EmbedConsent/EmbedConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-placeholder-pur
         v-if="isPur"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
         :vendor-id="vendorId"
+        :class="teaserFormat"
+      />
+      <embed-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Externen Inhalt sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Externen Inhalt sperren'"
+      >
         <slot name="embed">
           <embed-content :content="content" />
         </slot>
@@ -30,6 +43,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -45,6 +59,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     vendorId: {
       type: String,
       required: true,

diff --git a/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap b/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap
@@ -10,102 +10,27 @@ exports[`EmbedConsent component should render the placeholder by default 1`] = `
   >
     <svg
       fill="none"
-      height="265"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="62"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="88"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="61"
-        x="38"
-        y="75"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="173"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="199"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="61"
-        x="38"
-        y="186"
-      />
-       
-      <path
-        d="M289.782 110.125L313 78L343 78"
-        stroke="#868E96"
-        stroke-width="3"
-      />
-       
       <path
-        d="M287.287 170.75C292.847 161.12 296.117 150.339 296.845 139.242C297.572 128.145 295.737 117.03 291.481 106.756C287.226 96.4817 280.663 87.3243 272.303 79.9919C263.942 72.6596 254.006 67.3489 243.264 64.4707L239.511 78.4766C248.105 80.7792 256.053 85.0278 262.742 90.8936C269.431 96.7595 274.68 104.085 278.085 112.305C281.49 120.524 282.958 129.416 282.376 138.294C281.794 147.171 279.178 155.796 274.729 163.5L287.287 170.75Z"
-        fill="#868E96"
+        d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
+        fill="#CED4DA"
+        opacity="0.4"
       />
        
       <path
-        d="M241.671 64.0628C230.542 61.3497 218.928 61.3124 207.781 63.954C196.635 66.5956 186.273 71.8409 177.545 79.26C168.817 86.6791 161.971 96.0608 157.568 106.636C153.166 117.212 151.332 128.68 152.217 140.101L166.673 138.981C165.965 129.844 167.433 120.669 170.955 112.209C174.477 103.749 179.953 96.2433 186.936 90.308C193.918 84.3727 202.208 80.1765 211.125 78.0632C220.042 75.9499 229.333 75.9797 238.237 78.1502L241.671 64.0628Z"
+        d="M72.8214 45.8522L42.6667 37.7723V6.77197C59.8294 8.13047 73.3334 22.4883 73.3334 40.0002C73.3334 41.9967 72.8214 45.8522 72.8214 45.8522Z"
         fill="#CED4DA"
+        opacity="0.6"
       />
        
       <path
-        d="M152.396 142.061C153.976 157.128 160.236 171.321 170.296 182.647C180.357 193.974 193.713 201.864 208.489 205.209C223.264 208.555 238.716 207.188 252.675 201.301C266.633 195.414 278.397 185.302 286.314 172.386L273.951 164.808C267.618 175.142 258.207 183.231 247.04 187.941C235.873 192.651 223.511 193.744 211.691 191.067C199.871 188.391 189.186 182.079 181.137 173.018C173.088 163.957 168.08 152.602 166.816 140.549L152.396 142.061Z"
+        d="M37.3334 6.77197C20.1707 8.13047 6.66675 22.4883 6.66675 40.0002C6.66675 58.4097 21.5906 73.3335 40.0001 73.3335C48.1951 73.3335 55.6994 70.3762 61.504 65.4706L37.3669 41.3335H37.3334V6.77197Z"
         fill="#CED4DA"
       />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="81"
-        x="349"
-        y="62"
-      />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="81"
-        x="349"
-        y="88"
-      />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="61"
-        x="349"
-        y="75"
-      />
     </svg>
   </div>
    

diff --git a/src/vue/components/EmbedContentPur/EmbedContentPur.vue b/src/vue/components/EmbedContentPur/EmbedContentPur.vue
@@ -1,9 +1,16 @@
 <template>
   <div>
     <slot />
-    <div class="embed-content__actions" v-if="showControls">
+    <div
+      class="embed-content__actions"
+      v-if="showControls"
+    >
       <consent-actions v-slot="{ rejectVendorPUR }">
-        <input-switch :label="switchLabel" @change="rejectConsent($event, rejectVendorPUR)" :checked="true" />
+        <input-switch
+          :label="switchLabel"
+          @change="rejectConsent($event, rejectVendorPUR)"
+          :checked="true"
+        />
       </consent-actions>
     </div>
   </div>

diff --git a/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue b/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-facebook-placeholder-pur
         v-if="isPur"
         :vendor-id="vendorId"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
+        :class="teaserFormat"
+      />
+      <embed-facebook-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-facebook-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Facebook sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Facebook sperren'"
+      >
         <embed-content :content="content" />
       </embed-content-pur>
     </template>
@@ -29,6 +42,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string | null;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -44,6 +58,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     vendorId: {
       type: String,
       default: VENDOR_ID_FACEBOOK,

diff --git a/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap b/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap
@@ -10,58 +10,14 @@ exports[`EmbedFacebookConsent component should render the placeholder by default
   >
     <svg
       fill="none"
-      height="84"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="16"
-        cy="16"
-        fill="#E9ECEF"
-        r="16"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="40"
-        y="7"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="6"
-        width="40"
-        x="40"
-        y="19"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="44"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="60"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="75%"
-        y="76"
-      />
-       
       <path
-        d="M20 10.0611C20 4.50451 15.5229 0 10 0C4.47715 0 0 4.50451 0 10.0611C0 15.0828 3.65684 19.2452 8.4375 20V12.9694H5.89844V10.0611H8.4375V7.84452C8.4375 5.32296 9.93047 3.93012 12.2146 3.93012C13.3088 3.93012 14.4531 4.12663 14.4531 4.12663V6.60261H13.1922C11.95 6.60261 11.5625 7.37822 11.5625 8.17387V10.0611H14.3359L13.8926 12.9694H11.5625V20C16.3432 19.2452 20 15.0828 20 10.0611Z"
-        fill="#1877F2"
-        style="transform: translateX(calc(100% - 20px));"
+        d="M73.3334 40.2035C73.3334 21.6815 58.4095 6.6665 40 6.6665C21.5905 6.6665 6.66669 21.6815 6.66669 40.2035C6.66669 56.9426 18.8561 70.8172 34.7917 73.3332V49.8979H26.3281V40.2035H34.7917V32.8149C34.7917 24.4097 39.7683 19.7669 47.3822 19.7669C51.0293 19.7669 54.8438 20.4219 54.8438 20.4219V28.6752H50.6406C46.5 28.6752 45.2084 31.2606 45.2084 33.9127V40.2035H54.4531L52.9753 49.8979H45.2084V73.3332C61.1439 70.8172 73.3334 56.9426 73.3334 40.2035Z"
+        fill="#CED4DA"
       />
     </svg>
   </div>