Add enterprise_core module.

VMLYR · Apr 4, 2024 · 4fe4ac3 · 4fe4ac3
1 parent 55c7d46
commit 4fe4ac3
Show file tree

Hide file tree

Showing 18 changed files with 381 additions and 0 deletions.
diff --git a/etc/modules/enterprise_core/components/basic_copy/basic_copy.component.yml b/etc/modules/enterprise_core/components/basic_copy/basic_copy.component.yml
@@ -0,0 +1,17 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+name: Basic Copy
+description: Hero with Headine, title, copy and cta.
+slots:
+  copy:
+    title: Copy
+  cta:
+    title: CTA
+props:
+  type: object
+  properties:
+    heading:
+      title: Heading
+      description: The title for the hero text.
+      examples:
+        - Join us at The Conference
+      type: string
diff --git a/etc/modules/enterprise_core/components/basic_copy/basic_copy.css b/etc/modules/enterprise_core/components/basic_copy/basic_copy.css
@@ -0,0 +1,4 @@
+.basic-copy {
+  display: grid;
+  grid-gap: 1rem;
+}
diff --git a/etc/modules/enterprise_core/components/basic_copy/basic_copy.stories.yml b/etc/modules/enterprise_core/components/basic_copy/basic_copy.stories.yml
@@ -0,0 +1,10 @@
+title: Enterprise/Components/Hero
+stories:
+  - name: 1. Default
+    args:
+      heading: Medium length hero heading goes here
+      image: https://imengine.prod.srp.navigacloud.com/?uuid=A41B1D09-C186-4C2B-BD63-BE613AA8EAE5&type=primary&q=72&width=1024
+      copy: <p>Lorem ipsum dor sit amet, consecetur adiscioing elit. Supspendisse varius enim in eros elementum tristique. Duris cursus, mo quis, viverrra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
+      cta: |
+        {% include 'enterprise_core:cta-link' with { href: 'https://www.google.com', text: 'Button'} %}
+        {% include 'enterprise_core:cta-link' with { href: 'https://www.vml.com', text: 'Button 2'} %}
diff --git a/etc/modules/enterprise_core/components/basic_copy/basic_copy.twig b/etc/modules/enterprise_core/components/basic_copy/basic_copy.twig
@@ -0,0 +1,12 @@
+{# Prepare presentational attributes #}
+
+{# Markup for the component #}
+<div {{ attributes.addClass('basic-copy') }}>
+  <h1>{{heading}}</h1>
+  {% block copy %}
+  {% endblock %}
+  <div class="buttons">
+  {% block cta %}
+  {% endblock %}
+  </div>
+</div>
diff --git a/etc/modules/enterprise_core/components/cta-link/cta-link.component.yml b/etc/modules/enterprise_core/components/cta-link/cta-link.component.yml
@@ -0,0 +1,14 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+name: CTA Link
+description: A link that looks and behaves like a CTA button
+props:
+  type: object
+  properties:
+    text:
+      title: Text
+      description: Text for the button.
+      examples:
+        - Read More
+      type: string
+    href:
+      title: Href
diff --git a/etc/modules/enterprise_core/components/cta-link/cta-link.css b/etc/modules/enterprise_core/components/cta-link/cta-link.css
@@ -0,0 +1,36 @@
+.button {
+  font-weight: 600;
+  border: 1px solid black;
+  display: inline-block;
+  padding: .5rem 1.25rem;
+  text-decoration: none;
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  border-width: var(--button-border-width);
+  border-color: var(--button-border-color);
+  border-radius: var(--button-border-radius);
+}
+
+.button:hover {
+  color: var(--button-hover-color);
+  background-color: var(--button-hover-background-color);
+  border-width: var(--button-hover-border-width);
+  border-color: var(--button-hover-border-color);
+  border-radius: var(--button-hover-border-radius);
+}
+
+.button--secondary {
+  color: var(--button-color--secondary);
+  background-color: var(--button-background-color--secondary);
+  border-width: var(--button-border-width--secondary);
+  border-color: var(--button-border-color--secondary);
+  border-radius: var(--button-border-radius--secondary);
+}
+
+.button--secondary:hover {
+  color: var(--button-hover-color--secondary);
+  background-color: var(--button-hover-background-color--secondary);
+  border-width: var(--button-hover-border-width--secondary);
+  border-color: var(--button-hover-border-color--secondary);
+  border-radius: var(--button-hover-border-radius--secondary);
+}
diff --git a/etc/modules/enterprise_core/components/cta-link/cta-link.stories.yml b/etc/modules/enterprise_core/components/cta-link/cta-link.stories.yml
@@ -0,0 +1,6 @@
+title: Enterprise/Components/CTA Link
+stories:
+  - name: 1. Default
+    args:
+      text: Read More
+      href: https://www.google.com
diff --git a/etc/modules/enterprise_core/components/cta-link/cta-link.twig b/etc/modules/enterprise_core/components/cta-link/cta-link.twig
@@ -0,0 +1,9 @@
+{% if target is not empty %}
+  {% set attributes = attributes.setAttribute('target', target) %}
+{% endif %}
+<a
+  {{ attributes.addClass('button') }}
+  {% if href is not empty %}
+    href="{{ href }}"
+  {% endif %}
+>{{ text|striptags|trim|default('') }}</a>
diff --git a/etc/modules/enterprise_core/components/hero/hero.component.yml b/etc/modules/enterprise_core/components/hero/hero.component.yml
@@ -0,0 +1,23 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+name: Hero
+description: Hero with Headine, title, copy and cta.
+slots:
+  media:
+    title: Media
+  copy:
+    title: Copy
+  cta:
+    title: CTA
+props:
+  type: object
+  properties:
+    heading:
+      title: Heading
+      description: The title for the hero text.
+      examples:
+        - Join us at The Conference
+      type: string
+    image:
+      title: Media Image
+      description: Background image for the banner.
+      type: string
diff --git a/etc/modules/enterprise_core/components/hero/hero.css b/etc/modules/enterprise_core/components/hero/hero.css
@@ -0,0 +1,51 @@
+.hero {
+  min-height: 60vh;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.hero .field--name-field-media-image {
+  position: absolute;
+  width: 100%; /* or any custom size */
+  height: 100%;
+  min-height: 60vh;
+}
+
+.hero img {
+  position: absolute;
+  width: 100%; /* or any custom size */
+  height: 100%;
+  min-height: 60vh;
+  object-fit: cover;
+}
+
+.hero__buttons {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.hero__inside {
+  position: relative;
+  z-index: 1;
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+  color: #fff;
+  width: 100%;
+}
+
+.hero__content {
+  background-color: rgba(0,0,0,.45);
+  padding: 1rem;
+}
+
+@media (min-width:641px)  { /** Tablet Size **/
+  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
+  .hero__content {
+    width: 60%;
+    background-color: rgba(0,0,0,.5);
+    padding: 1rem;
+    border-radius: 1px;
+  }
+}
diff --git a/etc/modules/enterprise_core/components/hero/hero.stories.yml b/etc/modules/enterprise_core/components/hero/hero.stories.yml
@@ -0,0 +1,10 @@
+title: Enterprise/Components/Hero
+stories:
+  - name: 1. Default
+    args:
+      heading: Medium length hero heading goes here
+      image: https://imengine.prod.srp.navigacloud.com/?uuid=A41B1D09-C186-4C2B-BD63-BE613AA8EAE5&type=primary&q=72&width=1024
+      copy: <p>Lorem ipsum dor sit amet, consecetur adiscioing elit. Supspendisse varius enim in eros elementum tristique. Duris cursus, mo quis, viverrra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
+      cta: |
+        {% include 'enterprise_core:cta-link' with { href: 'https://www.google.com', text: 'Button'} %}
+        {% include 'enterprise_core:cta-link' with { href: 'https://www.vml.com', text: 'Button 2'} %}
diff --git a/etc/modules/enterprise_core/components/hero/hero.twig b/etc/modules/enterprise_core/components/hero/hero.twig
@@ -0,0 +1,22 @@
+{# Prepare presentational attributes #}
+{% if image is not empty %}
+  {#{% set attributes = attributes.setAttribute('style', 'background-image: linear-gradient(to right, black, black, rgba(0, 0, 0, 70%), transparent), url("' ~ image|render|striptags|trim|default('') ~ '");') %}#}
+{% endif %}
+
+{# Markup for the component #}
+<div {{ attributes.addClass('hero', 'hero--header') }}>
+{#  <img src="{{image|render|striptags|trim|default('')}}"> #}
+  {% block media %}
+  {% endblock %}
+  <div class="hero__inside">
+    <div class="hero__content">
+    <h1>{{heading}}</h1>
+    {% block copy %}
+    {% endblock %}
+    <div class="hero__buttons">
+    {% block cta %}
+    {% endblock %}
+    </div>
+    </div>
+  </div>
+</div>
diff --git a/etc/modules/enterprise_core/components/navy_hero/navy_hero.component.yml b/etc/modules/enterprise_core/components/navy_hero/navy_hero.component.yml
@@ -0,0 +1,15 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+name: Navy Hero
+description: Hero with Headine, title, copy and cta.
+slots:
+  media:
+    title: Media
+  content:
+    title: Content
+props:
+  type: object
+  properties:
+    hero_type:
+      title: Hero Type
+      description: test
+      type: string
diff --git a/etc/modules/enterprise_core/components/navy_hero/navy_hero.css b/etc/modules/enterprise_core/components/navy_hero/navy_hero.css
@@ -0,0 +1,109 @@
+.navy-hero {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  height: 800px;
+  height: calc(100vh - 120px);
+}
+
+.navy-hero--short {
+  height: inherit;
+  min-height: 400px !important;
+}
+
+.navy-hero .field--name-field-media-image {
+  position: absolute;
+  width: 100%; /* or any custom size */
+  height: 100%;
+}
+
+.navy-hero img {
+  position: absolute;
+  width: 100%; /* or any custom size */
+  height: 100%;
+  object-fit: cover;
+}
+
+.navy-hero__inside {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  width: 100%;
+  padding-bottom: 24%;
+}
+
+.navy-hero__content {
+  padding: 1rem;
+  width: 90%;
+}
+
+@media (min-width:641px)  { /** Tablet Size **/
+  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
+  .navy-hero {
+    align-items: center;
+  }
+
+  .navy-hero__inside {
+    padding-bottom: inherit;
+  }
+}
+
+@media (min-width:980px)  { /** Desktop Size **/
+  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
+  .navy-hero {
+    height: 860px;
+  }
+
+  .navy-hero--short {
+    height: inherit;
+    min-height: 600px !important;
+  }
+
+  .navy-hero__content {
+    width: 40%;
+    margin: 0 0 16px 5%;
+    padding: 0;
+  }
+}
+
+.navy-hero h1 {
+  text-transform: uppercase;
+}
+
+.navy-hero .field--name-field-media-image:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(2%, black), color-stop(60%, transparent));
+  background: -o-linear-gradient(bottom, black 2%, transparent 60%);
+  background: linear-gradient(0deg, black 2%, transparent 60%);
+}
+
+
+.navy-hero--short .field--name-field-media-image::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 140px;
+  z-index: 1;
+  background: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(50%, transparent));
+  background: -o-linear-gradient(top, black 0%, transparent 50%);
+  background: linear-gradient(180deg, black 0%, transparent 50%);
+}
+
+@media (min-width:980px)  { /** Desktop Size **/
+  .navy-hero--short .field--name-field-media-image::before {
+    height: 280px;
+    background: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
+    background: -o-linear-gradient(top, black 0%, transparent 100%);
+    background: linear-gradient(180deg, black 0%, transparent 100%);
+  }
+}
diff --git a/etc/modules/enterprise_core/components/navy_hero/navy_hero.stories.yml b/etc/modules/enterprise_core/components/navy_hero/navy_hero.stories.yml
@@ -0,0 +1,10 @@
+title: Enterprise/Components/NavyHero
+stories:
+  - name: 1. Default
+    args:
+      heading: Medium length hero heading goes here
+      image: https://imengine.prod.srp.navigacloud.com/?uuid=A41B1D09-C186-4C2B-BD63-BE613AA8EAE5&type=primary&q=72&width=1024
+      copy: <p>Lorem ipsum dor sit amet, consecetur adiscioing elit. Supspendisse varius enim in eros elementum tristique. Duris cursus, mo quis, viverrra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
+      cta: |
+        {% include 'enterprise_core:cta-link' with { href: 'https://www.google.com', text: 'Button'} %}
+        {% include 'enterprise_core:cta-link' with { href: 'https://www.vml.com', text: 'Button 2'} %}
diff --git a/etc/modules/enterprise_core/components/navy_hero/navy_hero.twig b/etc/modules/enterprise_core/components/navy_hero/navy_hero.twig
@@ -0,0 +1,12 @@
+{# Markup for the component #}
+
+<div {{ attributes.addClass('navy-hero', 'navy-hero--'  ~ hero_type) }}>
+  {% block media %}
+  {% endblock %}
+  <div class="navy-hero__inside">
+    <div class="navy-hero__content">
+      {% block content %}
+      {% endblock %}
+    </div>
+  </div>
+</div>
diff --git a/etc/modules/enterprise_core/enterprise_core.info.yml b/etc/modules/enterprise_core/enterprise_core.info.yml
@@ -0,0 +1,4 @@
+name: 'Enterprise Core'
+type: module
+description: 'Contains core functionality for Enterprise.'
+core_version_requirement: ^10
diff --git a/etc/modules/enterprise_core/enterprise_core.module b/etc/modules/enterprise_core/enterprise_core.module
@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * @file
+ * Module file for enterprise_core module.
+ *
+ * Implements hook_element_info_alter() to add the CSS library.
+ */
+
+/**
+ * Implements hook_element_info_alter().
+ */
+function enterprise_core_element_info_alter(array &$info) {
+  if (isset($info['layout_builder'])) {
+    $info['layout_builder']['#attached']['library'][] = 'enterprise_core/inline-block-list';
+  }
+}