Merge branch 'main' into 2568-website-old-content-bug

SSWConsulting · May 1, 2024 · 42595d6 · 42595d6
2 parents 11b0560 + 29d59da
commit 42595d6
Show file tree

Hide file tree

Showing 5 changed files with 873,887 additions and 26 deletions.
diff --git a/components/blocks/internalCarousel.tsx b/components/blocks/internalCarousel.tsx
@@ -1,5 +1,5 @@
 import type { Template } from "tinacms";
-import { TinaMarkdown } from "tinacms/dist/rich-text";
+import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
 
 import Image from "next/image";
 import * as React from "react";
@@ -8,9 +8,27 @@ import { Container } from "../util/container";
 
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 
+import { BsArrowRightCircle, BsYoutube } from "react-icons/bs";
 import { Carousel as CarouselImplementation } from "react-responsive-carousel";
+import { UtilityButton } from "../button/utilityButton";
 
-export const InternalCarousel = ({ data }) => {
+export type InternalCarouselProps = {
+  items: {
+    label: string;
+    imgSrc: string;
+  }[];
+  header: string;
+  paragraph?: TinaMarkdownContent;
+  website?: string;
+  caseStudyUrl?: string;
+  videoUrl?: string;
+  technologies?: {
+    name: string;
+  }[];
+};
+
+export const InternalCarousel = (props: InternalCarouselProps) => {
+  const CarouselItems: InternalCarouselProps = props;
   return (
     <Container size="custom" className="px-0 descendant-li:!list-none md:w-3/4">
       <CarouselImplementation
@@ -22,15 +40,15 @@ export const InternalCarousel = ({ data }) => {
         stopOnHover={true}
         renderIndicator={createCarouselIndicator}
       >
-        {data.items?.map((item, index) => (
+        {CarouselItems.items?.map((item, index) => (
           <CarouselItemImage
             key={index + item.label}
             imgSrc={item.imgSrc}
             label={item.label}
           />
         ))}
       </CarouselImplementation>
-      {renderBody(data)}
+      {CarouselBody(CarouselItems)}
     </Container>
   );
 };
@@ -70,13 +88,24 @@ const createCarouselIndicator = (onClickHandler, isSelected, index, label) => {
   );
 };
 
-const renderBody = ({ header, paragraph, website, technologies }) => {
+const CarouselBody = ({
+  header,
+  paragraph,
+  website,
+  technologies,
+  caseStudyUrl,
+  videoUrl,
+}: InternalCarouselProps) => {
   return (
     <div key={header} className={header ? "" : "hidden"}>
-      <div className="mt-2 flex justify-between text-left font-semibold text-sswRed prose-p:py-0">
-        <h4>{header}</h4>
+      <div className="mt-2 flex items-center justify-between text-left font-semibold text-sswRed prose-p:py-0">
+        <h3>{header}</h3>
         <span className={website ? "" : "hidden"}>
-          {website && <CustomLink href={website}>Visit Website</CustomLink>}
+          {website && (
+            <CustomLink className="font-normal text-white" href={website}>
+              Visit Website
+            </CustomLink>
+          )}
         </span>
       </div>
       <div className="text-left prose-p:py-2">
@@ -87,11 +116,49 @@ const renderBody = ({ header, paragraph, website, technologies }) => {
           <TechBlock name={tech.name} key={index} />
         ))}
       </div>
-      <div className="mb-7 mt-3 h-1 w-full bg-sswRed"></div>
+      {(caseStudyUrl || videoUrl) && (
+        <div className="my-5 flex flex-row">
+          {caseStudyUrl && (
+            <UtilityButton
+              className="clear-both mr-4 flex items-center"
+              size="small"
+              removeTopMargin
+              link={caseStudyUrl}
+              buttonText={
+                <>
+                  See Case Study
+                  <BsArrowRightCircle className="ml-1 inline" />
+                </>
+              }
+              animated
+            />
+          )}
+          {videoUrl && (
+            <UtilityButton
+              className="clear-both mr-4 flex items-center"
+              size="small"
+              removeTopMargin
+              link={videoUrl}
+              buttonText={
+                <>
+                  Watch Video
+                  <BsYoutube className="ml-1 inline" />
+                </>
+              }
+              animated
+            />
+          )}
+        </div>
+      )}
+      <Separator />
     </div>
   );
 };
 
+const Separator = () => (
+  <div className="my-5 h-0.25 w-full bg-ssw-gray-dark"></div>
+);
+
 const TechBlock = ({ name }) => {
   return (
     <div className="my-0.5 mr-1 min-w-fit bg-sswRed px-2 py-1 text-left">
@@ -169,5 +236,15 @@ export const internalCarouselBlockSchema: Template = {
         },
       ],
     },
+    {
+      type: "string",
+      label: "Case Study",
+      name: "caseStudyUrl",
+    },
+    {
+      type: "string",
+      label: "Video URL",
+      name: "videoUrl",
+    },
   ],
 };
diff --git a/components/blocks/mdxComponentRenderer.tsx b/components/blocks/mdxComponentRenderer.tsx
@@ -15,6 +15,7 @@ import { BookingButton } from "../bookingButton/bookingButton";
 import { InlineJotFormProps } from "../inlineJotForm/inlineJotForm";
 import { Content, ContentType } from "./content";
 import { DomainFromQueryProps } from "./domainFromQuery";
+import { InternalCarouselProps } from "./internalCarousel";
 import { SectionHeaderProps } from "./sectionHeader";
 
 const UtilityButton = dynamic(() =>
@@ -199,18 +200,7 @@ export const componentRenderer: Components<{
     embedWidth: string;
     embedHeight: string;
   };
-  InternalCarousel: {
-    items: {
-      label: string;
-      imgSrc: string;
-    }[];
-    header: string;
-    paragraph: string;
-    website: string;
-    technologies: {
-      name: string;
-    }[];
-  };
+  InternalCarousel: InternalCarouselProps;
   FixedTabsLayout: {
     tab1: string;
     heading1: string;
@@ -270,7 +260,7 @@ export const componentRenderer: Components<{
   GoogleMaps: (props) => <GoogleMapsWrapper {...props} />,
   DynamicColumns: (props) => <DynamicColumns data={props} />,
   FixedColumns: (props) => <FixedColumns data={props} />,
-  InternalCarousel: (props) => <InternalCarousel data={props} />,
+  InternalCarousel: (props) => <InternalCarousel {...props} />,
   VerticalListItem: (props) => <VerticalListItem data={props} />,
   TrainingInformation: (props) => <TrainingInformation data={props} />,
   TrainingLearningOutcome: (props) => <TrainingLearningOutcome data={props} />,

diff --git a/content/consulting/ui-ux-design.mdx b/content/consulting/ui-ux-design.mdx
@@ -217,6 +217,8 @@ technologies:
     { label: "Image description", imgSrc: "/images/carousel/knownoise-2.png" },
     { label: "Image description", imgSrc: "/images/carousel/knownoise-1.png" }
   ]}
+  videoUrl="https://youtu.be/wiFadV5SOPc"
+  caseStudyUrl="/company/clients/hutchison-weller"
 />
 
 <InternalCarousel
@@ -274,6 +276,8 @@ technologies:
       imgSrc: "/images/carousel/shepherdcentre-4.jpg"
     }
   ]}
+  videoUrl="https://youtu.be/g4_MnAZJpxg"
+  caseStudyUrl="/company/clients/shepherd-centre"
 />
 
 <InternalCarousel
@@ -407,7 +411,7 @@ technologies:
 
 <InternalCarousel
   paragraph={<>
-    SSW used the [Scrum](https://www.ssw.com.au/consulting/scrum) methodology and embraced the Microsoft Stack to develop and awesome application for Toll Transport management team.
+    SSW used the [Scrum](/consulting/scrum) methodology and embraced the Microsoft Stack to develop and awesome application for Toll Transport management team.
   </>}
   header="Toll Transport"
   technologies={[
@@ -420,6 +424,7 @@ technologies:
     { label: "Image description", imgSrc: "/images/carousel/toll-2.jpg" },
     { label: "Image description", imgSrc: "/images/carousel/toll-3.jpg" }
   ]}
+  caseStudyUrl="/company/clients/toll"
 />
 
 <InternalCarousel
@@ -443,6 +448,7 @@ technologies:
     },
     { label: "Image description", imgSrc: "/images/carousel/worleyparsons-3.jpg" }
   ]}
+  caseStudyUrl="/company/clients/worley-parsons"
 />
 
 <InternalCarousel
@@ -469,6 +475,7 @@ technologies:
       imgSrc: "/images/carousel/ms-sharepoint-2008-3.jpg"
     }
   ]}
+  caseStudyUrl="/company/clients/microsoft-sharepoint-office-forum"
 />
 
 <InternalCarousel
@@ -481,6 +488,7 @@ technologies:
     { label: "Image description", imgSrc: "/images/carousel/aurecon-1.jpg" },
     { label: "Image description", imgSrc: "/images/carousel/aurecon-2.jpg" }
   ]}
+  caseStudyUrl="/company/clients/aurecon"
 />
 
 <InternalCarousel

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -47,7 +47,7 @@ export const platform = [
   },
 ];
 
-/** @type {import("tailwindcss").Config} */
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   // mode: "jit",
   content: [
@@ -266,7 +266,10 @@ export default {
           900: "#333333",
           1000: "#1c1b2e",
         },
-        platform: platform.reduce((acc, c) => ({ ...acc, [c.name]: c.color }), {}),
+        platform: platform.reduce(
+          (acc, c) => ({ ...acc, [c.name]: c.color }),
+          {}
+        ),
         social: {
           phone: "#b31217",
           youtube: "#b31217",

diff --git a/tina/tina-lock.json b/tina/tina-lock.json