add case study page

sourceflow-uk · Oct 16, 2023 · 8101463 · 8101463
1 parent 3411303
commit 8101463
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 13 deletions.
diff --git a/src/components/CaseStudies/index.jsx b/src/components/CaseStudies/index.jsx
@@ -0,0 +1,39 @@
+import clsx from "classnames";
+import { Col, Container, Row } from "react-bootstrap";
+import PropTypes from "prop-types";
+import { CaseStudyCard, Title } from "@/ui";
+import { getRoute } from "@/getters/getRoute";
+
+export default function CaseStudies({ className, title, items }) {
+  return (
+    <div className={clsx(className)}>
+      <Container className="mw-xl">
+        <Title title={title} />
+        <Row>
+          {items.map(({ title, cover_image, url_slug }, k) => (
+            <Col key={k} xs={12} md={4} className="mb-4">
+              <CaseStudyCard title={title} img={cover_image} href={getRoute("caseStudy", { url_slug })} />
+            </Col>
+          ))}
+        </Row>
+      </Container>
+    </div>
+  );
+}
+
+CaseStudies.defaultProps = {
+  className: "py-5",
+  title: null,
+  items: [],
+};
+
+CaseStudies.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      href: PropTypes.string,
+    })
+  ),
+};
diff --git a/src/components/index.jsx b/src/components/index.jsx
@@ -6,6 +6,7 @@ export const BlogFeed = lazy(() => import("./BlogFeed"));
 export const BranchLookupPanel = lazy(() => import("./BranchLookupPanel"));
 export const BrandPositioning = lazy(() => import("./BrandPositioning"));
 export const BreadcrumbNavigation = lazy(() => import("./BreadcrumbNavigation"));
+export const CaseStudies = lazy(() => import("./CaseStudies"));
 export const CollapsibleContent = lazy(() => import("./CollapsibleContent"));
 export const CollapsibleSection = lazy(() => import("./CollapsibleSection"));
 export const Divider = lazy(() => import("./Divider"));

diff --git a/src/helpers/CollectionHelper.js b/src/helpers/CollectionHelper.js
@@ -10,12 +10,18 @@ export default class CollectionHelper {
     return this.collection.getItems().find((i) => i[key] === value);
   }
 
-  fetch({ limit } = {}) {
+  fetch({ limit, exclude = [] } = {}) {
+    let items = this.collection.getItems();
+
+    if (exclude) {
+      items = items.filter((i) => !exclude.includes(i.id));
+    }
+
     if (limit) {
-      return this.collection.getItems().slice(0, limit);
+      items = items.slice(0, limit);
     }
 
-    return this.collection.getItems();
+    return items;
   }
 
   toPaths(iterator = (i) => ({ params: { url_slug: i.url_slug } })) {

diff --git a/...ges/recruitment-solutions/case-studies/[url_slug]/__components/CaseStudyContent/index.jsx b/...ges/recruitment-solutions/case-studies/[url_slug]/__components/CaseStudyContent/index.jsx
@@ -3,6 +3,7 @@ import clsx from "classnames";
 import { Col, Container, Row } from "react-bootstrap";
 import { BlockQuoteCard, DynamicText } from "@/ui";
 import SourceFlowImage from "@sourceflow-uk/sourceflowimage";
+import classes from "./styles.module.scss";
 
 export default function CaseStudyContent({
   className,
@@ -26,12 +27,12 @@ export default function CaseStudyContent({
   url_slug,
 }) {
   return (
-    <div className={clsx(className)}>
+    <div className={clsx(className, classes.content)}>
       <div className="py-5">
         <Container>
           <Row>
-            <Col xs={12} md={4}>
-              <aside className="bg-primary text-white p-4">
+            <Col xs={12} md={3}>
+              <aside className={clsx(classes.content__info, "bg-primary text-white p-4")}>
                 <dl>
                   <dt>
                     <DynamicText path={`page.${url_slug}.component.CaseStudyContent.client.title`}>Client</DynamicText>
@@ -88,7 +89,7 @@ export default function CaseStudyContent({
                 </dl>
               </aside>
             </Col>
-            <Col xs={12} md={8}>
+            <Col xs={12} md={9}>
               <DynamicText path={`page.${url_slug}.component.CaseStudyContent.background.title`} tag="h2">
                 Company Background
               </DynamicText>
@@ -116,7 +117,7 @@ export default function CaseStudyContent({
               </DynamicText>
               <div dangerouslySetInnerHTML={{ __html: challenge }} />
             </Col>
-            <Col xs={12} md={6}>
+            <Col xs={12} md={6} className="d-flex justify-content-end align-items-center">
               {challenge_image && <SourceFlowImage src={challenge_image} size="540x" alt="Challenge image" />}
             </Col>
           </Row>
@@ -125,7 +126,7 @@ export default function CaseStudyContent({
       <div className="py-5">
         <Container>
           <Row>
-            <Col xs={12} md={6}>
+            <Col xs={12} md={6} className="d-flex justify-content-start align-items-center">
               {solution_image && <SourceFlowImage src={solution_image} size="540x" alt="Solution image" />}
             </Col>
             <Col xs={12} md={6}>
@@ -146,7 +147,7 @@ export default function CaseStudyContent({
               </DynamicText>
               <div dangerouslySetInnerHTML={{ __html: journey }} />
             </Col>
-            <Col xs={12} md={6}>
+            <Col xs={12} md={6} className="d-flex justify-content-end align-items-center">
               {journey_image && <SourceFlowImage src={journey_image} size="540x" alt="Journey image" />}
             </Col>
           </Row>
@@ -155,7 +156,7 @@ export default function CaseStudyContent({
       <div className="bg-tertiary text-white py-5">
         <Container>
           <Row>
-            <Col xs={12} md={{ span: 6, offset: 3 }}>
+            <Col xs={12} md={{ span: 8, offset: 2 }}>
               <DynamicText path={`page.${url_slug}.component.CaseStudyContent.result.title`} tag="h2">
                 The Result
               </DynamicText>

diff --git a/...itment-solutions/case-studies/[url_slug]/__components/CaseStudyContent/styles.module.scss b/...itment-solutions/case-studies/[url_slug]/__components/CaseStudyContent/styles.module.scss
@@ -0,0 +1,21 @@
+@import "src/scss/module";
+
+.content {
+  img {
+    border-radius: var(#{--bs-border-radius});
+  }
+
+  &__info {
+    border-radius: var(#{--bs-border-radius});
+
+    dl {
+      dt {
+        font-weight: $font-weight-base;
+      }
+
+      dd {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+}
diff --git a/src/pages/recruitment-solutions/case-studies/[url_slug]/index.page.js b/src/pages/recruitment-solutions/case-studies/[url_slug]/index.page.js
@@ -45,6 +45,16 @@ export async function getStaticProps({ params: { url_slug } }) {
           },
         },
         { component: "CaseStudyContent", props: { ...casestudy } },
+        {
+          component: "CaseStudies",
+          props: {
+            title: {
+              path: `page.caseStudy.${url_slug}.component.CaseStudies.title`,
+              placeholder: "Other Case Studies you might like",
+            },
+            items: casestudyHelper.fetch({ limit: 3, exclude: [casestudy.id] }),
+          },
+        },
       ],
     },
   };

diff --git a/src/pages/recruitment-solutions/case-studies/__components/CaseStudyFeed/index.jsx b/src/pages/recruitment-solutions/case-studies/__components/CaseStudyFeed/index.jsx
@@ -1,16 +1,17 @@
 import clsx from "classnames";
 import { Col, Container, Row } from "react-bootstrap";
 import PropTypes from "prop-types";
-import { CaseStudyCard } from "@/ui";
+import { CaseStudyCard, Title } from "@/ui";
 import { casestudyHelper } from "@/helpers/casestudyHelper";
 import { getRoute } from "@/getters/getRoute";
 
-export default function CaseStudyFeed({ className }) {
+export default function CaseStudyFeed({ className, title }) {
   const items = casestudyHelper.fetch();
 
   return (
     <div className={clsx(className)}>
       <Container className="mw-xl">
+        <Title title={title} />
         <Row>
           {items.map(({ title, cover_image, url_slug }, k) => (
             <Col key={k} xs={12} md={4} className="mb-4">