Training - Adding Angular super power (#1007)

* Training page - adding angular super powers

* Fix - SEO schema's validation on undefined

* Fix - Null check for seo

* Fixing - adding null check for links

* Content - adding presenters

* Fixing - Null handling for the objects

* Fixing - null checks and adding presenters image

* Training - adding angular page

* Page - Adding angular Super Power

* UI - rounding the image div instead of image itself

* UI - adding some angular content

* Update _schema.json

* Training - adding agenda component

* Content - Adding for the agenda

* UI - adding responsiveness for the small screens

* UI - adding padding for the mobile view

* Prettier - fixing formatting error

* Eslint - fixing formatting

* Visual Editing - agenda component

* Placeholder - removing the agenda content from internship page

* Fix - adding null check on list

* Update schema.json

* Content - adding newly created agenda component

* Update schema.json

* Schema - adding testimonials as optional block in training

* Schema - removing required from the title field

* UI - turning on the testimonials for internship

* Schema - removing unused property from the component

* Update - property from the component

* UI - adding responsiveness for more than 3 presenters

* Tailwind - adding custom height to config

.tina/collections/training.tsx

@@ -23,7 +23,11 @@ export const trainingSchema: Collection = {
       type: "string",
       name: "title",
       label: "Title",
-      required: true,
+    },
+    {
+      type: "boolean",
+      name: "showTestimonials",
+      label: "Show Testimonials",
     },
     {
       type: "object",

components/blocks/contentCard.tsx

@@ -1,6 +1,7 @@
 import { Template } from "tinacms";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { componentRenderer } from "./mdxComponentRenderer";
+import { verticalListItemSchema } from "./verticalListItem";
 import { videoEmbedBlockSchema } from "./videoEmbed";
 
 export const ContentCard = ({ data }) => {
@@ -43,7 +44,7 @@ export const contentCardBlockSchema: Template = {
       type: "rich-text",
       label: "Content",
       name: "content",
-      templates: [videoEmbedBlockSchema],
+      templates: [videoEmbedBlockSchema, verticalListItemSchema],
     },
   ],
 };

components/blocks/verticalListItem.tsx

@@ -7,6 +7,11 @@ export const VerticalListItem = ({ data }) => {
 
   return (
     <div className="py-3">
+      {data.header && (
+        <div className="py-3 text-left">
+          <h3 className="text-sswRed">{data.header}</h3>
+        </div>
+      )}
       <div className={classNames("flex flex-row items-center")}>
         {data.icon && (
           <Image
@@ -17,11 +22,11 @@ export const VerticalListItem = ({ data }) => {
             className="pr-5"
           />
         )}
-        <div className={classNames("font-helvetica font-bold")}>
+        <div className={classNames("text-left font-helvetica font-bold")}>
           <TinaMarkdown content={data.content} />
         </div>
       </div>
-      <div className="pl-20 marker:text-sswRed child:!list-disc">
+      <div className="pl-20 text-left marker:text-sswRed child:!list-disc">
         <TinaMarkdown content={data.afterBody} />
       </div>
     </div>

components/training/eventBooking.tsx

@@ -4,6 +4,7 @@ import { FC } from "react";
 import { MdLocationOn } from "react-icons/md";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
+import { Container } from "../util/container";
 import { EventBookingType, EventModel } from "./eventBookingType";
 
 const isEmpty = (value) => {
@@ -25,7 +26,7 @@ const classes = {
 
 export const EventBooking: FC<EventBookingType> = ({ data }) => {
   return (
-    <>
+    <Container padding="md:px-8 px-6">
       {
         <EventHeader
           duration={data.duration}
@@ -50,7 +51,7 @@ export const EventBooking: FC<EventBookingType> = ({ data }) => {
         {EventModel.HOSTED_BY}{" "}
         <span className="font-bold">{EventModel.SSW}</span>
       </div>
-    </>
+    </Container>
   );
 };
 

components/training/locationBlock.tsx

@@ -9,7 +9,7 @@ const NumberOfLocationInRow = 4;
 
 export const LocationBlock = ({ data }) => {
   return (
-    <Container size="custom" id="location">
+    <Container padding="md:px-8 px-6" size="custom" id="location">
       <h4
         className="py-2 text-sswRed"
         data-tina-field={tinaField(data, locationBlockConstant.title)}
@@ -26,7 +26,7 @@ export const LocationBlock = ({ data }) => {
           />
         ))}
       </div>{" "}
-      <div className="  py-1 text-center uppercase">
+      <div className="py-1 text-center uppercase">
         <a
           href={!data.chapelWebsite?.URL ? "" : data.chapelWebsite.URL}
           className="inline-flex cursor-pointer items-center !no-underline hover:!underline"
@@ -145,7 +145,7 @@ export const locationBlockSchema: Template = {
     {
       type: "string",
       name: locationBlockConstant.title,
-      label: "title",
+      label: "Title",
     },
     {
       type: "object",

components/training/presenterBlock.tsx

@@ -14,7 +14,7 @@ export const PresenterBlock = ({ data }) => {
       >
         About our <span className="text-sswRed">{data.header}</span>
       </h2>
-      <div className="grid gap-6 md:grid-cols-3">
+      <div className="flex flex-row flex-wrap justify-center gap-4 md:gap-4">
         {data.presenterList?.map((p, i) => (
           <PresenterCard
             key={i}
@@ -29,7 +29,7 @@ export const PresenterBlock = ({ data }) => {
           <div className="col-span-12 justify-center md:inline-flex">
             <span className="self-center">You can also check our</span>
             <span
-              className="flex justify-center self-center"
+              className="flex justify-center gap-2 self-center"
               data-tina-field={tinaField(
                 data.otherEvent,
                 presenterBlockConstant.otherEvent.title
@@ -55,7 +55,7 @@ export const PresenterBlock = ({ data }) => {
 const PresenterCard = ({ presenter, schema, index }) => {
   return (
     <div
-      className="flex h-fit flex-col rounded-md border-b-4 border-b-sswRed bg-gray-100 p-10 text-center text-xl md:h-full"
+      className="flex h-fit flex-col rounded-md border-b-4 border-b-sswRed bg-gray-100 p-10 text-center text-xl md:h-172 md:w-96"
       data-aos="flip-right"
     >
       <div
@@ -65,13 +65,15 @@ const PresenterCard = ({ presenter, schema, index }) => {
           presenterSchemaConstants.presenter.peopleProfileURL
         )}
       >
-        <Image
-          alt={`Picture of ${presenter?.presenter?.name ?? "Presenter"}`}
-          src={presenter?.profileImg ?? ""}
-          height={120}
-          width={120}
-          className="rounded-full"
-        />
+        <span className="h-32 w-32 overflow-hidden rounded-full">
+          <Image
+            alt={`Picture of ${presenter?.presenter?.name ?? "Presenter"}`}
+            src={presenter?.profileImg ?? ""}
+            height={120}
+            width={120}
+            className="w-32"
+          />
+        </span>
       </div>
       <a
         href={presenter?.presenter?.peopleProfileURL}

components/training/trainingHeader.tsx

@@ -37,12 +37,16 @@ const TrainingHeader = ({ data }) => {
               </span>
             </div>
             <div className={`${data?.secondaryTagline ? "mt-10" : ""}`}>
-              <button
-                className="flex items-center gap-2 rounded bg-sswRed px-5 py-2.5 text-sm font-normal text-white shadow-sm"
-                onClick={() => window.open(`${data.link.url}` || "", "_blank")}
-              >
-                {data.link.linkText}
-              </button>
+              {data.link && (
+                <button
+                  className="flex items-center gap-2 rounded bg-sswRed px-5 py-2.5 text-sm font-normal text-white shadow-sm"
+                  onClick={() =>
+                    window.open(`${data.link?.url}` || "", "_blank")
+                  }
+                >
+                  {data.link?.linkText}
+                </button>
+              )}
             </div>
           </div>
         </div>
@@ -73,9 +77,11 @@ export const TrainingCarousel = ({ data }) => {
       showArrows={false}
       swipeable={false}
       stopOnHover
-      renderIndicator={createCarouselIndicator}
+      renderIndicator={
+        data?.trainingHeaderCarouselItem.length > 1 && createCarouselIndicator
+      }
     >
-      {data.trainingHeaderCarouselItem.map((item, key) => (
+      {data?.trainingHeaderCarouselItem.map((item, key) => (
         <TrainingHeader key={key} data={item} />
       ))}
     </Carousel>

components/util/seo.tsx

@@ -47,7 +47,7 @@ export const seoSchema = {
       name: "title",
       ui: {
         validate: (value) => {
-          if (value.length > 70) {
+          if (value && value.length > 70) {
             return "Title should be 70 characters or less";
           }
         },
@@ -60,7 +60,7 @@ export const seoSchema = {
       component: "textarea",
       ui: {
         validate: (value) => {
-          if (value.length > 150) {
+          if (value && value.length > 150) {
             return "Description should be 150 characters or less";
           }
         },

content/presenters/jean-thirion.mdx

@@ -0,0 +1,20 @@
+---
+presenter:
+  name: Jean Thirion
+  peopleProfileURL: 'https://www.ssw.com.au/people/jean-thirion/'
+about: >
+  He is a software developer at SSW. His field of expertise is SharePoint
+  Applications, both server-side and client-side, leveraging the latest
+  technologies to deliver high-quality applications to clients. He is one of
+  SSW's Angular trainer, delivering high quality applications. He has also been
+  involved in various ASP.Net MVC / WebAPI projects.
+
+
+  Highly motivated and with strong skills, he is able to understand and convert
+  complex business requirements into software solutions. He is also able to use
+  his expertise and experience to suggest the best practices for any given
+  scenario.
+profileImg: /images/people/Jean-Thirion.jpg
+---
+
+

content/presenters/luke-cook.mdx

@@ -0,0 +1,15 @@
+---
+presenter:
+  name: Luke Cook
+  peopleProfileURL: 'https://www.ssw.com.au/people/luke-cook/'
+about: >
+  He has spent the last 15 years in the Fintech and Paytech industry, designing
+  and building software solutions that are used by thousands of Australian
+  businesses. He has worked closely with the ATO in many of their industry
+  initiatives, including SuperStream and Single Touch Payroll. Luke enjoys
+  solving complex business processes in ways that make things easy for everyday
+  users.
+profileImg: /images/people/Luke-Cook.jpg
+---
+
+

content/presenters/matt-wicks.mdx

@@ -0,0 +1,14 @@
+---
+presenter:
+  name: Matt Wicks
+  peopleProfileURL: 'https://www.ssw.com.au/people/matt-wicks/'
+about: >
+  He loves DevOps, DevOps, and DevOps. These days he prefers GitHub Actions and
+  Azure DevOps Build Pipelines over Octopus and Bamboo. Matt likes clean
+  architecture, using the right tool for the job, seeing developers push changes
+  to production with confidence, automated tests, building solutions on Azure,
+  and now he never has to reminisce about Webforms.
+profileImg: /images/people/Matt-Wicks.jpg
+---
+
+