Featured headline

config/install/core.entity_form_display.paragraph.gated_content.default.yml

@@ -0,0 +1,61 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - entity_browser.browser.images_library
+    - field.field.paragraph.gated_content.field_prgf_description
+    - field.field.paragraph.gated_content.field_prgf_image
+    - field.field.paragraph.gated_content.field_prgf_link
+    - field.field.paragraph.gated_content.field_prgf_title
+    - paragraphs.paragraphs_type.gated_content
+  module:
+    - link
+    - openy_focal_point
+    - text
+id: paragraph.gated_content.default
+targetEntityType: paragraph
+bundle: gated_content
+mode: default
+content:
+  field_prgf_description:
+    weight: 1
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+    type: text_textarea
+    region: content
+  field_prgf_image:
+    weight: 3
+    settings:
+      entity_browser: images_library
+      field_widget_display: rendered_entity
+      field_widget_edit: '1'
+      field_widget_remove: '1'
+      selection_mode: selection_append
+      field_widget_display_settings:
+        view_mode: embedded_half
+      field_widget_replace: 0
+      open: 0
+    third_party_settings: {  }
+    type: openy_focal_point_entity_browser_entity_reference
+    region: content
+  field_prgf_link:
+    weight: 2
+    settings:
+      placeholder_url: ''
+      placeholder_title: ''
+    third_party_settings: {  }
+    type: link_default
+    region: content
+  field_prgf_title:
+    weight: 0
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+    type: string_textfield
+    region: content
+hidden:
+  created: true
+  status: true

config/install/core.entity_view_display.paragraph.gated_content.default.yml

@@ -0,0 +1,56 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.gated_content.field_prgf_description
+    - field.field.paragraph.gated_content.field_prgf_image
+    - field.field.paragraph.gated_content.field_prgf_link
+    - field.field.paragraph.gated_content.field_prgf_title
+    - image.style.virtual_y_paragraph_headline
+    - paragraphs.paragraphs_type.gated_content
+  module:
+    - link
+    - media
+    - text
+id: paragraph.gated_content.default
+targetEntityType: paragraph
+bundle: gated_content
+mode: default
+content:
+  field_prgf_description:
+    weight: 1
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
+  field_prgf_image:
+    weight: 3
+    label: above
+    settings:
+      image_style: virtual_y_paragraph_headline
+      image_link: ''
+    third_party_settings: {  }
+    type: media_thumbnail
+    region: content
+  field_prgf_link:
+    weight: 2
+    label: above
+    settings:
+      trim_length: 80
+      url_only: false
+      url_plain: false
+      rel: ''
+      target: ''
+    third_party_settings: {  }
+    type: link
+    region: content
+  field_prgf_title:
+    weight: 0
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+hidden: {  }

config/install/field.field.paragraph.gated_content.field_prgf_description.yml

@@ -0,0 +1,25 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_prgf_description
+    - paragraphs.paragraphs_type.gated_content
+  module:
+    - datalayer
+    - text
+third_party_settings:
+  datalayer:
+    expose: 0
+    label: field_prgf_description
+id: paragraph.gated_content.field_prgf_description
+field_name: field_prgf_description
+entity_type: paragraph
+bundle: gated_content
+label: 'Headline Description'
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: text_long

config/install/field.field.paragraph.gated_content.field_prgf_image.yml

@@ -0,0 +1,33 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_prgf_image
+    - media.type.image
+    - paragraphs.paragraphs_type.gated_content
+  module:
+    - datalayer
+third_party_settings:
+  datalayer:
+    expose: 0
+    label: field_prgf_image
+id: paragraph.gated_content.field_prgf_image
+field_name: field_prgf_image
+entity_type: paragraph
+bundle: gated_content
+label: 'Headline Background Image'
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:media'
+  handler_settings:
+    target_bundles:
+      image: image
+    sort:
+      field: _none
+    auto_create: false
+    auto_create_bundle: ''
+field_type: entity_reference

config/install/field.field.paragraph.gated_content.field_prgf_link.yml

@@ -0,0 +1,27 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_prgf_link
+    - paragraphs.paragraphs_type.gated_content
+  module:
+    - datalayer
+    - link
+third_party_settings:
+  datalayer:
+    expose: 0
+    label: field_prgf_link
+id: paragraph.gated_content.field_prgf_link
+field_name: field_prgf_link
+entity_type: paragraph
+bundle: gated_content
+label: 'Headline Link'
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings:
+  link_type: 17
+  title: 2
+field_type: link

config/install/field.field.paragraph.gated_content.field_prgf_title.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_prgf_title
+    - paragraphs.paragraphs_type.gated_content
+  module:
+    - datalayer
+third_party_settings:
+  datalayer:
+    expose: 0
+    label: field_prgf_title
+id: paragraph.gated_content.field_prgf_title
+field_name: field_prgf_title
+entity_type: paragraph
+bundle: gated_content
+label: 'Headline Title'
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: string

config/install/image.style.virtual_y_paragraph_headline.yml

@@ -0,0 +1,16 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - focal_point
+name: virtual_y_paragraph_headline
+label: 'Virtual Y Paragraph Headline'
+effects:
+  e3e4696b-3963-4259-9042-48fac1fa7676:
+    uuid: e3e4696b-3963-4259-9042-48fac1fa7676
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 2400
+      height: 960
+      crop_type: focal_point

js/gated-content/package.json

@@ -13,33 +13,33 @@
     "@vue/babel-preset-app": "^3.12.1",
     "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
-    "bootstrap": "^4.4.1",
-    "calendar-link": "^1.3.0",
+    "bootstrap": "^4.5.3",
+    "calendar-link": "^1.3.1",
     "core-js": "^3.7.0",
     "qs": "^6.9.4",
     "regenerator-runtime": "^0.13.7",
-    "vue": "^2.6.11",
-    "vue-router": "^3.1.6",
+    "vue": "^2.6.12",
+    "vue-router": "^3.4.9",
     "vue-video-wrapper": "^1.0.10",
-    "vuex": "^3.1.3"
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/preset-env": "^7.6.2",
+    "@babel/core": "^7.12.8",
+    "@babel/preset-env": "^7.12.7",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",
     "@vue/cli-plugin-vuex": "~4.3.0",
     "@vue/cli-service": "~4.3.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@vue/eslint-config-airbnb": "^5.1.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",
-    "style-resources-loader": "^1.3.3",
+    "style-resources-loader": "^1.4.1",
     "vue-cli-plugin-style-resources-loader": "^0.1.4",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   }
 }

js/gated-content/src/GatedContent.vue

@@ -20,6 +20,7 @@ export default {
   name: 'GatedContent',
   props: {
     settings: String,
+    headline: String,
     appUrl: {
       type: String,
       default: '',
@@ -41,6 +42,7 @@ export default {
     }
   },
   mounted() {
+    this.$store.dispatch('setHeadline', JSON.parse(this.headline));
     this.$store.dispatch('setSettings', JSON.parse(this.settings));
   },
 };

js/gated-content/src/components/ParagraphHeadline.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="paragraph-headline" :style="styleObject">
+    <div class="paragraph-headline__content">
+      <div
+        v-if="getHeadlineTitle"
+        class="paragraph-headline__title"
+      >{{ getHeadlineTitle }}
+      </div>
+      <div
+        v-if="getHeadlineDescription"
+        class="paragraph-headline__description"
+        v-html="getHeadlineDescription"
+      ></div>
+      <a
+        v-if="getHeadlineLinkText"
+        class="paragraph-headline__link"
+        :href="getHeadlineLinkUrl"
+      >{{ getHeadlineLinkText }}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters([
+      'getHeadlineTitle',
+      'getHeadlineDescription',
+      'getHeadlineLinkUrl',
+      'getHeadlineLinkText',
+      'getHeadlineBackgroundImage',
+    ]),
+    styleObject() {
+      return {
+        'background-image': this.getHeadlineBackgroundImage
+          ? `url('${this.getHeadlineBackgroundImage}')`
+          : '',
+      };
+    },
+  },
+  mounted() {
+    console.log(this.getHeadlineBackgroundImage);
+  },
+};
+</script>

js/gated-content/src/scss/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin median($property, $desktop, $tablet:$desktop, $mobile:$tablet) {
+  #{$property}: $desktop;
+
+  @media (max-width: 900px) {
+    #{$property}: $tablet;
+  }
+
+  @if $mobile != $tablet {
+    @media (max-width: 600px) {
+      #{$property}: $mobile;
+    }
+  }
+}