Migration - Typography page (#2353)

* create new page for typography

* adding generated change

* creating section header component

* adding schemas to company template

* adding content for typography page

* adding id link

* adding more typography content

* moving key to direct child

* adding carousel to company template

* fixing contrast ratio

* adding carousel images

* adding min width, removing fragment

* fixing video margin and width

* adding carousel and prebody section

* adding option to fix sidebar width

.tina/collections/company.tsx

@@ -5,6 +5,11 @@ import {
   fixedColumnsSchema,
   testimonialsListSchema,
   verticalImageLayoutBlockSchema,
+  sectionHeaderSchema,
+  tableBlockSchema,
+  customDownloadButtonSchema,
+  colorBlockSchema,
+  carouselBlockSchema,
 } from "../../components/blocks";
 import { videoEmbedBlockSchema } from "../../components/blocks/videoEmbed";
 import { microsoftPanelSchema } from "../../components/offices/microsoftPanel";
@@ -32,6 +37,16 @@ export const companySchema: Collection = {
     tipField,
     // @ts-ignore
     seoSchema,
+    {
+      type: "object",
+      list: true,
+      name: "beforeBody",
+      label: "Before body",
+      ui: {
+        visualSelector: true,
+      },
+      templates: [carouselBlockSchema],
+    },
     {
       type: "string",
       name: "title",
@@ -47,6 +62,11 @@ export const companySchema: Collection = {
         verticalImageLayoutBlockSchema,
         tripleColumnImageBlockSchema,
         fixedColumnsSchema,
+        sectionHeaderSchema,
+        tableBlockSchema,
+        customDownloadButtonSchema,
+        colorBlockSchema,
+        carouselBlockSchema,
         Schemas.utilityButtonSchema,
       ],
     },
@@ -57,6 +77,11 @@ export const companySchema: Collection = {
       required: false,
       templates: [microsoftPanelSchema],
     },
+    {
+      type: "boolean",
+      name: "fixedWidthSidebar",
+      label: "Fixed width sidebar"
+    },
     {
       type: "string",
       name: "sidebarTestimonial",

components/blocks/colorBlock.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import classNames from "classnames";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
@@ -31,12 +32,12 @@ export const ColorBlock = (data: ColorBlockProps) => {
           </p>
           <div className="block grid-cols-1 md:grid md:grid-cols-2">
             {colorRow?.map((row, index) => (
-              <>
-                <ColorRow key={index} {...row} />
+              <React.Fragment key={index}>
+                <ColorRow {...row} />
                 <div className="col-span-2">
                   <TinaMarkdown content={row.caption} />
                 </div>
-              </>
+              </React.Fragment>
             ))}
           </div>
         </div>

components/blocks/index.ts

@@ -47,6 +47,7 @@ import { upcomingEventsBlockSchema } from "./upcomingEvents";
 import { verticalImageLayoutBlockSchema } from "./verticalImageLayout";
 import { verticalListItemSchema } from "./verticalListItem";
 import { videoEmbedBlockSchema } from "./videoEmbed";
+import { sectionHeaderSchema } from "./sectionHeader";
 
 export const pageBlocks: Template[] = [
   aboutUsBlockSchema,
@@ -96,6 +97,7 @@ export const pageBlocks: Template[] = [
   colorBlockSchema,
   downloadBlockSchema,
   gridLayoutSchema,
+  sectionHeaderSchema,
 ];
 
 export * from "../bookingButton/bookingButton";
@@ -116,9 +118,11 @@ export * from "./builtOnAzure";
 export * from "./carousel";
 export * from "./citation";
 export * from "./clientLogos";
+export * from "./colorBlock";
 export * from "./content";
 export * from "./contentCard";
 export * from "./customImage";
+export * from "./CustomDownloadButton";
 export * from "./dynamicColumns";
 export * from "./eventLink";
 export * from "./fixedColumns";
@@ -128,6 +132,7 @@ export * from "./hero";
 export * from "./jotFormEmbed";
 export * from "./newslettersTable";
 export * from "./recurringEvent";
+export * from "./sectionHeader";
 export * from "./serviceCards";
 export * from "./tableLayout";
 export * from "./testimonialsList";

components/blocks/mdxComponentRenderer.tsx

@@ -13,6 +13,7 @@ import type { TripleColumnImageBlockProps } from "./tripleColumnImageBlock";
 import type { YoutubePlaylistProps } from "./youtubePlaylist";
 
 import { BookingButton } from "../bookingButton/bookingButton";
+import { SectionHeaderProps } from "./sectionHeader";
 
 const UtilityButton = dynamic(() =>
   import("../button/utilityButton").then((mod) => mod.UtilityButton)
@@ -117,6 +118,9 @@ const VideoEmbed = dynamic(() =>
 const YoutubePlaylistBlock = dynamic<YoutubePlaylistProps>(() =>
   import("./youtubePlaylist").then((mod) => mod.YoutubePlaylistBlock)
 );
+const SectionHeader = dynamic(() =>
+  import("./sectionHeader").then((mod) => mod.SectionHeader)
+);
 
 export const componentRenderer: Components<{
   ClientLogos: Record<string, never>;
@@ -243,6 +247,7 @@ export const componentRenderer: Components<{
   };
   JotFormEmbed: JotFormEmbedProps;
   ColorBlock: ColorBlockProps;
+  SectionHeader: SectionHeaderProps;
 }> = {
   AgreementForm: (props) => <AgreementForm data={props} />,
   ClientLogos: () => <ClientLogos />,
@@ -280,4 +285,5 @@ export const componentRenderer: Components<{
   ),
   JotFormEmbed: (props) => <JotFormEmbed {...props} />,
   ColorBlock: (props) => <ColorBlock {...props} />,
+  SectionHeader: (props) => <SectionHeader {...props} />,
 };

components/blocks/sectionHeader.tsx

@@ -0,0 +1,33 @@
+import { Template } from "tinacms";
+
+export type SectionHeaderProps = {
+  headerText: string;
+};
+
+export const SectionHeader = (props: SectionHeaderProps) => {
+  const { headerText } = props;
+
+  return (
+    <h3
+      id={headerText.toLowerCase().replaceAll(" ", "-")}
+      className="bg-gray-600 p-2 text-base text-white"
+    >
+      {headerText}
+    </h3>
+  );
+};
+
+export const sectionHeaderSchema: Template = {
+  name: "SectionHeader",
+  label: "Section Header",
+  ui: {
+    itemProps: (item) => ({ label: item?.headerText }),
+  },
+  fields: [
+    {
+      type: "string",
+      label: "Header Text",
+      name: "headerText",
+    },
+  ],
+};

content/company/typography.mdx

@@ -0,0 +1,35 @@
+---
+seo:
+  title: SSW Typography & Web Design References
+  description: ''
+  showBreadcrumb: true
+beforeBody:
+  - items:
+      - label: Typography and design
+        link: '#'
+        openIn: sameWindow
+        imgSrc: /images/carousel/typography-hero.jpeg
+      - label: Creating a slider
+        link: '#'
+        openIn: sameWindow
+        imgSrc: /images/carousel/typography-slider-how-to.jpeg
+    delay: 5
+    _template: Carousel
+title: SSW Typography & Web Design References
+subTitle: "This page is a reference with templates for SSW designers and web content editors. We have tried to make it as simple as possible, under the assumption that users know how to correctly format tags, add classes and understand basic CSS.\n\nEach content page in SSW Metro have:\n\n* A Title\n* A Sidebar - See the\_[Tips & FAQ](https://www.ssw.com.au/ssw/company/Web-Reference.aspx#Tips)\_for how to remove this feature\n\n[SharePoint](https://www.ssw.com.au/ssw/Consulting/SharePoint.aspx)\_is a good template to base your new pages from.\n\n<SectionHeader headerText=\"HEADING STYLES TEMPLATES AND USE GUIDELINES\" />\n\n# Heading 1 should be used sparingly.\n\nYou may put a \\<span class=\"red\"> inside any paragraph or heading to highlight one or more words in\_SSW red.\n\n## Heading 2 is a good size for content\n\nWe should use heading 2 as the default heading for most text. The heading already contents the title of the page in h1, so there is technically no reason to use anything other than h2 in content.\n\n### Heading 3 is a comfortable size for content\n\nThis is a good size for subheadings within content\n\n#### Heading 4 is used for inline headings\n\nThis is a good heading to use for small paragraphs.\n\n##### Heading 5 is smaller\n\nThis is a spare heading that is not used by much. I do not think we will have much use for it since headings 2-4 should cover most cases.\n\n###### HEADING 6 IS A SPECIAL HEADING USED FOR MAINLY THE SIDEBAR\n\nA fancy heading.\n\n<SectionHeader headerText=\"LIST DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\n* UL no class\n* Properly formatted, this is what the list styles should look like.\n\n✅ UL class=\"good\"\n\n✅ Properly formatted, this is what the list styles should look like.\n\n❌ UL class=\"bad\"\n\n❌ Properly formatted, this is what the list styles should look like.\n\n1. OL no class\n2. Properly formatted, this is what the list styles should look like.\n\n<SectionHeader headerText=\"TABLE DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\n#### Normal\n\nDefault table with a thin border:\n\n<TableLayout tableStyle=\"basicBorder\" headers={[\"Header 1\", \"Header 2\"]} rows={[{ cells: [{ cellValue: \"Row 1\" }, { cellValue: \"Row 2\" }] }]} firstColBold={false} />\n\n#### Data\n\nStyled table:\n\n<TableLayout\n  tableStyle=\"styled\"\n  headers={[\"Header 1\", \"Header 2\"]}\n  rows={[\n    { cells: [{ cellValue: \"Row 1\" }, { cellValue: \"Row 2\" }], isHeader: false }\n  ]}\n/>\n\n<SectionHeader headerText=\"QUOTE AND TEXT STYLE SAMPLES\" />\n\n> Blockquotes are used to reference some quoted text\\\n> They can be multiline\n\n<SectionHeader headerText=\"IMAGE AND VIDEO FIGURES STYLE SAMPLES\" />\n\n<VerticalImageLayout imageSrc=\"/images/company-logos/SSW_preview.png\" height={200} width={200} altText=\"SSW logo\" />\n\n**Figure: Images should have descriptive text**\n\n<VideoEmbed url=\"https://www.youtube.com/watch?v=Jveq6VFjWTA\" videoWidth=\"w-full\" uncentre={true} caption=\"Videos should have descriptive text and timing\" duration=\"4 mins\" removeMargin={true} />\n\n<SectionHeader headerText=\"BUTTON DESIGN TEMPLATES AND STYLE SAMPLES\" />\n\nThe default button is SSW red. You can add an icon and make it large.\n\nLink buttons:\n\n<UtilityButton buttonText=\"Small button\" btnIcon=\"BsArrowRightCircle\" size=\"small\" link=\"#\" uncentered={false} removeTopMargin={true} openInNewTab={false} />\n\n<UtilityButton buttonText=\"Medium button\" link=\"#\" size=\"medium\" btnIcon=\"BsArrowRightCircle\" animated={false} uncentered={false} removeTopMargin={false} />\n\nDownload button:\n\n<CustomDownloadButton btnText=\"Download\" btnLink=\"#\" />\n\n<SectionHeader headerText=\"COLORS AND BRANDING\" />\n\n### What are our colors?\n\nSSW's remarkable 4 squares are in the following colours:\n\n<ColorBlock\n  colorRow={[\n    {\n      firstColor: \"#797979\",\n      secondColor: \"#333333\",\n      fText: \"#797979\",\n      sText: \"#333333\"\n    },\n    {\n      firstColor: \"#AAAAAA\",\n      fText: \"#AAAAAA\",\n      secondColor: \"#CC4141\",\n      sText: \"#CC4141\"\n    }\n  ]}\n/>\n\n### The SSW red\n\nThe SSW red is\_#CC4141, which is a beautiful shade of red.\n\nSee the 3 most used color codes - Hexadecimal (web), RGB (computer monitors and TVs), and CMYK (printing) - for the SSW red:\n\n<TableLayout\n  headers={[\"Color code\", \"Value\"]}\n  rows={[\n    { cells: [{ cellValue: \"HEX\" }, { cellValue: \"#cc4141\" }], isHeader: false },\n    {\n      cells: [\n        { cellValue: \"RGB (Red, Green, Blue)\" },\n        { cellValue: \"(204, 65, 65)\" }\n      ]\n    },\n    {\n      cells: [\n        { cellValue: \"CMYK (Cyna, Magenta, Yellow, Black)\" },\n        { cellValue: \"(0%, 68%, 68%, 20%)\" }\n      ]\n    }\n  ]}\n  firstColBold={true}\n  tableStyle=\"styled\"\n/>\n\n### Related links\n\n* [Rules to Better Branding](https://www.ssw.com.au/rules/rules-to-better-branding)\n* [5 visual elements of a brand identity](https://www.untethereddesign.com/blog/5-visual-elements)\n\n<SectionHeader headerText=\"TIPS AND FAQ\" />\n\n### The paragraph padding seems strange :/\n\nYour content should be wrapped in a div class=\"section\".\_You should not be relying on br or p tags to get the correct padding. Lines within a div.section should be wrapped in paragraphs.\n\nYour content should never be sitting naked on the page, it should always be wrapped in paragraphs. Refrain from using breaks.\n\n### Can I make h3 bigger?\n\nNo.\_There is absolutely no reason you should need to change heading sizes. Your content should be ordered correctly in terms of page heading (h1), followed by section headings (h2), then by sub-section headings (h3) and paragraph headings (h4). These are correctly determined by the size and at no point should you ever have to change the CSS.\n\nMake sure your content is correctly formatted before changing the CSS.\n\n### How to I make a slider image?\n\nMetro uses a strong typography influence. If you are not a designer, please refer this work to a designer.\n\nUse type as your centerpiece and work around it. I have no guidelines on colors or typeface because this should be independent to your needs. If you are uncertain, Helvetica will be an appropriate starting point.\n\n### What's the SSW font?\n\nWe use\_Helvetica Neue\_font family for\_[SSW logos](https://www.ssw.com.au/ssw/logo/ssw/).\n\nWe use\_Open Sans\_font family for web content.\n\nFor large headings, we use the \"Light\" variation.\n\n\"Regular\" variation is used for body content for better readability.\n\n### SSW Master Texts\n\n#### **SSW Mission**\n\n> To find the best way to do everything.\\\n> To identify and use best practices (in technology, DevOps, and Scrum) to navigate the dangers of software development and produce the best possible software solutions.\\\n> SSW is strong at Mastery, our Purpose is focused on ROI (mainstream technology, deploying often, and quality coding practices) and we aim for Team Aligned Autonomy.\n\n##### Where do we have this?\n\n* [About Us page](https://www.ssw.com.au/company/about-us)\n* [SugarLearning page](https://www.sugarlearning.com/companies/SSW/items/8145/Introduction-About-SSW)\n\n#### **SSW Experience + Technologies**\n\n> SSW Consulting has over 30 years of experience developing awesome Microsoft solutions that today build on top of Angular, React, Vue, Azure, Azure DevOps (was TFS), SharePoint, Office 365, Blazor, .NET, WebAPI, Dynamics 365, and SQL Server.\n\n##### Where do we have this?\n\n* Website \\<meta> description tag\n* [Homepage](https://www.ssw.com.au)\n* [Company page](https://www.ssw.com.au/company)\n* [Our People page](https://www.ssw.com.au/people/)\n* Search Engines' business pages and general social media accounts\n\n#### **SSW Addresses**\n\nAlways refer to [Our Offices page](https://www.ssw.com.au/offices) to get our master addresses.\n\n##### Where do we have this?\n\n* [Our Offices pages](https://www.ssw.com.au/offices)\n  * [Sydney directions page](https://www.ssw.com.au/offices/sydney#Directions)\n  * [Melbourne directions page](https://www.ssw.com.au/offices/melbourne#Directions)\n  * [Brisbane directions page](https://www.ssw.com.au/offices/brisbane#Directions)\n  * [Newcastle directions page](https://www.ssw.com.au/offices/newcastle#Directions)\n  * [Strasbourg directions page](https://www.ssw.com.au/offices/strasbourg#Directions)\n  * [Hangzhou directions page](https://www.ssw.com.au/offices/hangzhou#Directions)\n* [SSW Chapel site](https://sswchapel.com.au/)\n* General [events pages](https://www.ssw.com.au/events)\n* [FireBootCamp](https://firebootcamp.com/) pages\n* [Angular Hack Day](https://angularhackday.com/) pages\n* [MAUI Hack Day](https://mauihackday.com/) pages\n* [AI Hack Day](https://aihackday.com/) pages\n* Search Engines' business pages and general social media accounts\n"
+sidebar: |
+  Table of contents:
+
+  * [Headings](#heading-styles-templates-and-use-guidelines)
+  * [List styles](#list-design-templates-and-style-samples)
+  * [Tables](#table-design-templates-and-style-samples)
+  * [Quotes](#quote-and-text-style-samples)
+  * [Images and videos](#image-and-video-figures-style-samples)
+  * [Buttons](#button-design-templates-and-style-samples)
+  * [Colors and branding](#colors-and-branding)
+  * [Tips and FAQ](#tips-and-faq)
+fixedWidthSidebar: true
+showRdPanel: false
+showTechUpgradeBlock: false
+---
+

pages/company/[filename].tsx

@@ -1,6 +1,8 @@
 import { InferGetStaticPropsType } from "next";
 import { tinaField, useTina } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
+import classNames from "classnames";
+
 import client from "../../.tina/__generated__/client";
 import { Blocks } from "../../components/blocks-renderer";
 import { Breadcrumbs } from "../../components/blocks/breadcrumbs";
@@ -40,8 +42,8 @@ export default function CompanyPage(
     >
       <div>
         <SEO seo={props.seo} />
-
         <Layout menu={data.megamenu}>
+          <Blocks prefix="CompanyBeforeBody" blocks={data.company.beforeBody} />
           {data.company.seo?.showBreadcrumb === null ||
             (data.company.seo?.showBreadcrumb && (
               <Section className="mx-auto w-full max-w-9xl px-8 py-5">
@@ -73,22 +75,24 @@ export default function CompanyPage(
               {(data.company.sidebar ||
                 data.company.sidebarTestimonial ||
                 data.company.showRdPanel) && (
-                <>
-                  <div className="max-w-sm shrink pl-16">
-                    {data.company.sidebar && (
-                      <TinaMarkdown
-                        content={data.company.sidebar}
-                        components={componentRenderer}
-                      />
-                    )}
-                    {data.company.sidebarTestimonial && (
-                      <TestimonialPanel
-                        testimonialName={data.company.sidebarTestimonial}
-                      />
-                    )}
-                    {data.company.showRdPanel && <RDPanel />}
-                  </div>
-                </>
+                <div
+                  className={classNames("max-w-sm shrink pl-16", {
+                    "min-w-96": data.company.fixedWidthSidebar,
+                  })}
+                >
+                  {data.company.sidebar && (
+                    <TinaMarkdown
+                      content={data.company.sidebar}
+                      components={componentRenderer}
+                    />
+                  )}
+                  {data.company.sidebarTestimonial && (
+                    <TestimonialPanel
+                      testimonialName={data.company.sidebarTestimonial}
+                    />
+                  )}
+                  {data.company.showRdPanel && <RDPanel />}
+                </div>
               )}
             </section>
           )}