From 939fad07d29051cf785f6be56ab3ec77a94fc186 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 13 Mar 2024 17:01:34 -0500
Subject: [PATCH] Website: Add "Success stories" category to /articles page
 (#17580)

Closes: https://github.com/fleetdm/confidential/issues/5741

Changes:
- Added the "Success stories" filter to the /articles page
---
 .../styles/pages/articles/articles.less       | 23 +++++++------------
 website/views/pages/articles/articles.ejs     |  7 ++----
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/website/assets/styles/pages/articles/articles.less b/website/assets/styles/pages/articles/articles.less
index 7bf78caf67ce..552b110da0bc 100644
--- a/website/assets/styles/pages/articles/articles.less
+++ b/website/assets/styles/pages/articles/articles.less
@@ -159,12 +159,15 @@
     padding-right: 40px;
     [purpose='categories-and-search'] {
       padding-top: 40px;
-      [purpose='search'] {
-        width: 100%;
-      }
       [purpose='categories'] {
         [purpose='category-filter'] {
-          margin-right: 24px;
+          padding-left: 8px;
+          margin-bottom: 8px;
+        }
+        [purpose='category-filter'].selected {
+          border-left: 2px solid @core-vibrant-blue;
+          border-bottom: none;
+          padding-left: 6px;
         }
       }
     }
@@ -179,6 +182,7 @@
       margin-left: -10px;
       margin-right: -10px;
     }
+
   }
 
 
@@ -187,17 +191,6 @@
       [purpose='search'] {
         width: 100%;
       }
-      [purpose='categories'] {
-        [purpose='category-filter'] {
-          padding-left: 8px;
-          margin-bottom: 8px;
-        }
-        [purpose='category-filter'].selected {
-          border-left: 2px solid @core-vibrant-blue;
-          border-bottom: none;
-          padding-left: 6px;
-        }
-      }
     }
 
     [purpose='articles'] {
diff --git a/website/views/pages/articles/articles.ejs b/website/views/pages/articles/articles.ejs
index 6b5faa1dbdee..0f24be22d7ce 100644
--- a/website/views/pages/articles/articles.ejs
+++ b/website/views/pages/articles/articles.ejs
@@ -2,19 +2,16 @@
   <div style="max-width: 1200px;" class="container-fluid p-0">
     <div class="mx-auto">
       <div purpose="categories-and-search" class="d-flex flex-lg-row flex-column justify-content-lg-between justify-content-md-center justify-content-start" v-if="isArticlesLandingPage">
-        <div purpose="categories" class="d-flex flex-md-row flex-column justify-content-start">
+        <div purpose="categories" class="d-flex flex-lg-row flex-column justify-content-start">
           <div purpose="category-filter" :class="[ filter === 'all' ? 'selected' : '']" @click="filterBy('all')">All</div>
           <div purpose="category-filter" :class="[ filter === 'engineering' ? 'selected' : '']" @click="filterBy('engineering')">Engineering</div>
           <div purpose="category-filter" :class="[ filter === 'security' ? 'selected' : '']" @click="filterBy('security')">Security</div>
           <div purpose="category-filter" :class="[ filter === 'announcements' ? 'selected' : '']" @click="filterBy('announcements')">Announcements</div>
           <div purpose="category-filter" :class="[ filter === 'guides' ? 'selected' : '']" @click="filterBy('guides')">Guides</div>
+          <div purpose="category-filter" :class="[ filter === 'success stories' ? 'selected' : '']" @click="filterBy('success stories')">Success stories</div>
           <div purpose="category-filter" :class="[ filter === 'podcasts' ? 'selected' : '']" @click="filterBy('podcasts')">Podcasts</div>
           <div purpose="category-filter" :class="[ filter === 'releases' ? 'selected' : '']" @click="filterBy('releases')">Releases</div>
         </div>
-<!--         <div purpose="search" class="p-2 mt-3 mt-lg-0 d-flex flex-row">
-          <img class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-          <input class="ml-3 border-0" placeholder="Search">
-        </div> -->
       </div>
       <div purpose="category-title" v-else>
         <h1>{{articleCategory}}</h1>