feat: add business partner link to case studies

website/app.js

@@ -125,6 +125,7 @@ function createAposConfig() {
       'cases-tags': {},
       'case-studies': {},
       'case-studies-page': {},
+      'business-partner': {},
       'categories': {},
       'vacancies': {},
       'vacancies-list-widget': {},

website/modules/@apostrophecms/admin-bar/index.js

@@ -12,7 +12,7 @@ module.exports = {
       },
       {
         label: 'Cases',
-        items: ['case-studies', 'cases-tags'],
+        items: ['case-studies', 'cases-tags', 'business-partner'],
       },
       {
         label: 'Categories',

website/modules/asset/ui/src/scss/_cases.scss

@@ -1394,3 +1394,89 @@
     }
   }
 }
+
+// Partnership section
+.cs_partnership {
+  z-index: 2;
+  text-decoration: none;
+  display: block;
+  width: 100%;
+  max-width: 687px;
+  min-width: 430px;
+  padding: 0 20px;
+
+  @include breakpoint-medium {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    padding: 0;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+
+    .cs_partnership-box {
+      box-shadow: 0 4px 12px rgba($black, 0.15);
+      transform: translateY(-2px);
+    }
+  }
+}
+
+.cs_partnership-box {
+  background-color: $white;
+  padding: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  text-align: center;
+  transition: all 0.3s ease;
+
+  @include breakpoint-medium {
+    flex-direction: column;
+    width: 114px;
+    padding: 12px;
+    gap: 8px;
+  }
+}
+
+.cs_partnership-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+
+  .cs_partnership-text:nth-child(3) {
+    display: none;
+  }
+
+  @include breakpoint-medium {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.cs_partnership-text {
+  @include font-settings(11px, 110%, $font-weight-extra-bold);
+  color: $gray-500;
+  display: block;
+
+  @include breakpoint-medium {
+    text-transform: uppercase;
+  }
+}
+
+.cs_partnership-logo {
+  max-width: 100%;
+  height: auto;
+  max-height: 36px;
+  width: auto;
+  object-fit: contain;
+  display: block;
+
+  @include breakpoint-medium {
+    max-height: 46px;
+  }
+}

website/modules/business-partner/index.js

@@ -0,0 +1,47 @@
+module.exports = {
+  extend: '@apostrophecms/piece-type',
+  options: {
+    label: 'Business Partner',
+    pluralLabel: 'Business Partners',
+    slugPrefix: 'business-partner-',
+    sort: {
+      title: 1,
+    },
+    shortcut: false,
+  },
+  fields: {
+    add: {
+      title: {
+        label: 'Partner Name',
+        type: 'string',
+        required: true,
+      },
+      partnerLogo: {
+        label: 'Partner Logo',
+        type: 'area',
+        required: true,
+        options: {
+          max: 1,
+          min: 1,
+          widgets: {
+            '@apostrophecms/image': {},
+          },
+        },
+      },
+      partnerWebsite: {
+        label: 'Partner Website',
+        type: 'string',
+        required: true,
+        help: "Link to partner's official website (must include http(s) protocol).",
+        placeholder: 'https://example.com',
+      },
+    },
+    group: {
+      basics: {
+        label: 'Basics',
+        fields: ['title', 'partnerLogo', 'partnerWebsite'],
+      },
+    },
+  },
+};
+

website/modules/case-studies-page/views/show.html

@@ -132,6 +132,44 @@
 
       {% endif %}
 
+      {% if data.piece._partner and data.piece._partner.length %}
+      {% set partner = data.piece._partner[0] %}
+      {% set partnerLogo = apos.image.first(partner.partnerLogo) %}
+      {% if partner.partnerWebsite %}
+      <a
+        href="{{ partner.partnerWebsite }}"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="cs_partnership"
+      >
+      {% else %}
+      <div class="cs_partnership">
+      {% endif %}
+        <div class="cs_partnership-box">
+          <div class="cs_partnership-label">
+            <span class="cs_partnership-text">In partnership</span>
+            <span class="cs_partnership-text">with</span>
+            {% if partner.title %}
+            <span class="cs_partnership-text">{{ partner.title }}</span>
+            {% endif %}
+          </div>
+          {% if partnerLogo %}
+          <img
+            class="cs_partnership-logo"
+            src="{{ apos.attachment.url(partnerLogo, { size: 'full' }) }}"
+            alt="{{ partnerLogo._alt or partner.title or '' }}"
+            width="{{ apos.attachment.getWidth(partnerLogo) }}"
+            height="{{ apos.attachment.getHeight(partnerLogo) }}"
+          />
+          {% endif %}
+        </div>
+      {% if partner.partnerWebsite %}
+      </a>
+      {% else %}
+      </div>
+      {% endif %}
+      {% endif %}
+
       <div class="cs_info">
         <div class="cs_info-primary">
           <div class="truncate-wrapper">

website/modules/case-studies/index.js

@@ -50,6 +50,21 @@ module.exports = {
         },
         help: 'Select technologies utilized in the project.',
       },
+      _partner: {
+        label: 'Partner',
+        type: 'relationship',
+        withType: 'business-partner',
+        max: 1,
+        builders: {
+          project: {
+            title: 1,
+            slug: 1,
+            partnerLogo: 1,
+            partnerWebsite: 1,
+          },
+        },
+        help: 'Select a partner for this case study.',
+      },
       _caseStudyType: {
         label: 'Case Study Type',
         type: 'relationship',
@@ -144,6 +159,7 @@ module.exports = {
           '_stack',
           '_caseStudyType',
           '_industry',
+          '_partner',
           'portfolioTitle',
           'descriptor',
           'prodLink',