Local footer styling to match Stanford Basic subtheme

.storybook/stories/config-pages/LocalFooter.stories.tsx

@@ -1,9 +1,11 @@
 import type {Meta, StoryObj} from '@storybook/react';
-
 import LocalFooter from "@components/config-pages/local-footer";
 import {ComponentProps} from "react";
 
-type ComponentStoryProps = ComponentProps<typeof LocalFooter> & {}
+type ComponentStoryProps = ComponentProps<typeof LocalFooter> & {
+  numberOfLinks: number
+  configPage: any
+}
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
@@ -16,7 +18,14 @@ const meta: Meta<ComponentStoryProps> = {
       options: ['a', 'b', 'd', 'e', 'h', 'i', 'm', 'o', 'p', 'r', 's', 't', 'none'],
       control: {type: "select"}
     },
-    suFooterEnabled: {control: "boolean"}
+    suFooterEnabled: {control: "boolean"},
+    numberOfLinks: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 20,
+      }
+    },
   }
 };
 
@@ -25,57 +34,79 @@ type Story = StoryObj<ComponentStoryProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const LocalFooterDisplay: Story = {
+  render: ({numberOfLinks, configPage, ...args}) => {
+     configPage.linkList =[]
+    for (let i=0; i< numberOfLinks; i++) {
+      configPage.linkList.push({url: "http://localhost", title: "Primary Link"})
+    }
+    return <LocalFooter configPage={configPage} {...args} />
+  },
   args: {
-    suFooterEnabled: true,
-    suLocalFootAction: [
-      {title: "Action link 1", url: "https://localhost", internal: false},
-      {title: "Action link 2", url: "https://localhost", internal: false}
-    ],
-    suLocalFootAddress: {
-      additionalName: "additional_name",
-      addressLine1: "address_line1",
-      addressLine2: "address_line2",
-      administrativeArea: "administrative_area",
-      country: {code: "country_code"},
-      familyName: "family_name",
-      givenName: "given_name",
-      locality: "locality",
-      organization: "organization",
-      postalCode: "postal_code",
-      sortingCode: "sorting_code",
+    configPage: {
+      suFooterEnabled: true,
+      suLocalFootAction: [],
+      // Action links
+      numberOfLinks: 3,
+      // Office location
+      suLocalFootAddress: {
+        additionalName: "Additional Organization Name",
+        addressLine1: "450 Jane Stanford Way",
+        addressLine2: "Address Line 2",
+        administrativeArea: "State",
+        country: {
+          code: "Country Code"
+        },
+        familyName: "Family Name",
+        givenName: "Given Name",
+        locality: "Locality",
+        organization: "Organization",
+        postalCode: "Postal Code",
+        sortingCode: "Sorting Code",
+      },
+      // Footer lockup controls
+      suLocalFootUseLoc: true,
+      suLocalFootUseLogo: true,
+      suLocalFootLocOp: "suLocalFoot_loc_op",
+      // Footer lockup lines
+      suLocalFootLine1: "Line 1",
+      suLocalFootLine2: "Line 2",
+      suLocalFootLine3: "Line 3",
+      suLocalFootLine4: "Line 4",
+      suLocalFootLine5: "Line 5",
+      suLocalFootLocImg: null,
+      suLocalFootLocLink: {
+        title: "suLocalFoot_loc_link",
+        url: "https://localhost",
+        internal: false
+      },
+      // Wysiwyg Content Block 1
+      suLocalFootPrCo: {processed: "Content Block 1"},
+      // Wysiwyg Content Block 2
+      suLocalFootSeCo: {processed: "Content Block 2"},
+      // Wysiwyg Content Block 3
+      suLocalFootTr2Co: {processed: "Content Block 3"},
+      // Wysiwyg Content Block 4
+      suLocalFootTrCo: {processed: "Content Block 4"},
+      // Primary links
+      suLocalFootPrimeH: "Primary links",
+      suLocalFootPrimary: [
+        {title: "Primary link 1", url: "https://localhost", internal: false},
+        {title: "Primary link 2", url: "https://localhost", internal: false}
+      ],
+      // Secondary Links
+      suLocalFootSecondH: "Secondary links",
+      suLocalFootSecond: [
+        {title: "Second Link 1", url: "https://localhost", internal: false},
+        {title: "Second Link 2", url: "https://localhost", internal: false}
+      ],
+    // Social Links
+      suLocalFootSocial: [
+        {title: "Facebook", url: "https://www.facebook.com/stanford", internal: false},
+        {title: "Instagram", url: "https://www.instagram.com/stanford/", internal: false},
+        {title: "LinkedIn", url: "https://www.linkedin.com/school/stanford-university/", internal: false},
+        {title: "YouTube", url: "https://www.youtube.com/stanford", internal: false},
+        {title: "Twitter", url: "https://twitter.com/stanford", internal: false},
+      ],
     },
-    suLocalFootFButton: "suLocalFoot_f_button",
-    suLocalFootFIntro: {processed: "suLocalFoot_f_intro"},
-    suLocalFootFMethod: "suLocalFoot_f_method",
-    suLocalFootFUrl: {title: "Form Action url", url: "https://localhost", internal: false},
-    suLocalFootLine1: "suLocalFoot_line_1",
-    suLocalFootLine2: "suLocalFoot_line_2",
-    suLocalFootLine3: "suLocalFoot_line_3",
-    suLocalFootLine4: "suLocalFoot_line_4",
-    suLocalFootLine5: "suLocalFoot_line_5",
-    suLocalFootLocImg: null,
-    suLocalFootLocLink: {title: "suLocalFoot_loc_link", url: "https://localhost", internal: false},
-    suLocalFootPrCo: {processed: "suLocalFoot_pr_co"},
-    suLocalFootPrimary: [
-      {title: "Primary link 1", url: "https://localhost", internal: false},
-      {title: "Primary link 2", url: "https://localhost", internal: false}
-    ],
-    suLocalFootPrimeH: "suLocalFoot_prime_h",
-    suLocalFootSeCo: {processed: "suLocalFoot_se_co"},
-    suLocalFootSecond: [
-      {title: "Second Link 1", url: "https://localhost", internal: false},
-      {title: "Second Link 2", url: "https://localhost", internal: false}
-    ],
-    suLocalFootSecondH: "suLocalFoot_second_h",
-    suLocalFootSocial: [
-      {title: "Facebook", url: "https://localhost", internal: false},
-      {title: "YouTube", url: "https://localhost", internal: false}
-    ],
-    suLocalFootSunetT: "suLocalFoot_sunet_t",
-    suLocalFootTr2Co: {processed: "suLocalFoot_tr2_co"},
-    suLocalFootTrCo: {processed: "suLocalFoot_tr_co"},
-    suLocalFootUseLoc: true,
-    suLocalFootUseLogo: true,
-    suLocalFootLocOp: "suLocalFoot_loc_op",
-  },
+  },  
 };

.storybook/stories/paragraphs/Gallery.stories.tsx

@@ -4,7 +4,7 @@ import GalleryParagraph from '@components/paragraphs/stanford-gallery/gallery-pa
 import { getStoryBookGalleryImage } from '../storybook-entities';
 
 type ComponentStoryProps = ComponentProps<typeof GalleryParagraph> & {
-  numberofimages: number
+  numberOfImages: number
 }
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
@@ -13,7 +13,7 @@ const meta: Meta<ComponentStoryProps> = {
   component: GalleryParagraph,
   tags: ['autodocs'],
   argTypes: {
-    numberofimages: {
+    numberOfImages: {
       control: {
         type: 'number',
         min: 1,
@@ -28,15 +28,15 @@ type Story = StoryObj<ComponentStoryProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Gallery: Story = {
-  render: ({numberofimages, paragraph, ...args}) => {
+  render: ({numberOfImages, paragraph, ...args}) => {
     paragraph.suGalleryImages = []
-    for (let i = 0; i < numberofimages; i++) {
+    for (let i = 0; i < numberOfImages; i++) {
       paragraph.suGalleryImages.push(getStoryBookGalleryImage(undefined, 'Lorem Ipsum'))
     }
     return <GalleryParagraph paragraph={paragraph} {...args} />
   },
   args: {
-    numberofimages: 3,
+    numberOfImages: 3,
     paragraph:{
       __typename: 'ParagraphStanfordGallery',
       composition: {},

src/components/config-pages/local-footer.tsx

@@ -19,6 +19,8 @@ import {H2} from "@components/elements/headers";
 import TwitterIcon from "@components/elements/icons/TwitterIcon";
 import YoutubeIcon from "@components/elements/icons/YoutubeIcon";
 import FacebookIcon from "@components/elements/icons/FacebookIcon";
+import InstagramIcon from "@components/elements/icons/InstagramIcon";
+import LinkedInIcon from "@components/elements/icons/LinkedInIcon";
 import { Maybe, StanfordLocalFooter} from "@lib/gql/__generated__/drupal.d";
 import {buildUrl} from "@lib/drupal/utils";
 
@@ -42,6 +44,7 @@ const LocalFooter = ({
   suLocalFootSocial,
   suLocalFootTr2Co,
   suLocalFootTrCo,
+  suLocalFootFIntro,
   suLocalFootUseLoc,
   suLocalFootUseLogo,
 }: StanfordLocalFooter) => {
@@ -70,11 +73,11 @@ const LocalFooter = ({
           <div>
 
             {suLocalFootAddress &&
-              <Address {...suLocalFootAddress}/>
+              <Address {...suLocalFootAddress} className="text-19 leading-9 rs-mb-3"/>
             }
 
             {suLocalFootAction &&
-              <ul className="list-unstyled">
+              <ul className="list-unstyled text-19 font-semibold rs-mb-3">
                 {suLocalFootAction.map((link, index) => {
                   if (!link.url) return;
                   return (
@@ -89,7 +92,7 @@ const LocalFooter = ({
             }
 
             {suLocalFootSocial &&
-              <ul className="list-unstyled flex gap-2">
+              <ul className="list-unstyled flex gap-8">
                 {suLocalFootSocial.map((link, index) => {
                   if (!link.url) return;
                   return (
@@ -104,14 +107,14 @@ const LocalFooter = ({
               </ul>
             }
 
-            <Wysiwyg html={suLocalFootPrCo?.processed}/>
+            <Wysiwyg html={suLocalFootPrCo?.processed} className="text-19"/>
           </div>
 
           <div>
             {suLocalFootPrimeH &&
-              <H2 className="text-m1">{suLocalFootPrimeH}</H2>}
+              <H2>{suLocalFootPrimeH}</H2>}
             {suLocalFootPrimary &&
-              <ul className="list-unstyled">
+              <ul className="list-unstyled text-21 rs-mb-2">
                 {suLocalFootPrimary.map((link, index) => {
                   if (!link.url) return;
                   return (
@@ -124,16 +127,16 @@ const LocalFooter = ({
                 })}
               </ul>
             }
-            <Wysiwyg html={suLocalFootSeCo?.processed}/>
+            <Wysiwyg html={suLocalFootSeCo?.processed} className="text-19"/>
 
           </div>
 
           <div>
             {suLocalFootSecondH &&
-              <H2 className="text-m1">{suLocalFootSecondH}</H2>}
+              <H2 className="text-m0">{suLocalFootSecondH}</H2>}
 
             {suLocalFootSecond &&
-              <ul className="list-unstyled">
+              <ul className="list-unstyled text-21 rs-mb-2">
                 {suLocalFootSecond.map((link, index) => {
                   if (!link.url) return;
                   return (
@@ -147,13 +150,16 @@ const LocalFooter = ({
               </ul>
             }
 
-            <Wysiwyg html={suLocalFootTr2Co?.processed}/>
+            <Wysiwyg html={suLocalFootTr2Co?.processed} className="text-21"/>
 
           </div>
+
+          <div>
+            <Wysiwyg html={suLocalFootFIntro?.processed}/>
 
-          <Wysiwyg html={suLocalFootTrCo?.processed}/>
-
-        </div>
+            <Wysiwyg html={suLocalFootTrCo?.processed} className="text-21"/>
+          </div>
+        </div>  
       </div>
     </div>
   )
@@ -163,6 +169,9 @@ const SocialIcon = ({url}: { url: string }) => {
   if (url.includes("twitter.com")) return <TwitterIcon/>
   if (url.includes("youtube.com")) return <YoutubeIcon/>
   if (url.includes("facebook")) return <FacebookIcon/>
+  if (url.includes("instagram")) return <InstagramIcon/>
+  if (url.includes("linkedin")) return <LinkedInIcon/>
+
   return null;
 }
 

src/components/elements/icons/InstagramIcon.tsx

@@ -2,7 +2,9 @@ import {HTMLAttributes} from "react";
 
 const InstagramIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => {
   return (
-    <svg viewBox="0 0 24 24" {...props}>
+    <svg 
+      width={26.5}
+      viewBox="0 0 24 24" {...props}>
       <title>Instagram icon</title>
       <path
         fill="currentColor"

src/components/elements/icons/TwitterIcon.tsx

@@ -2,13 +2,13 @@ import {HTMLAttributes} from "react";
 
 const TwitterIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
   <svg
-    width={28}
-    viewBox="0 0 512 512"
+    width={21}
+    viewBox="0 0 1200 1200"
     {...props}
   >
     <path
       fill="currentColor"
-      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+      d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
     />
   </svg>
 )

src/styles/typography/local-footer.tsx

@@ -4,13 +4,16 @@ module.exports = function () {
     const components = {
       ".local-footer": {
         "h2": {
-          fontSize: "1.5em",
+          fontSize: "1em",
         },
         "h3": {
-          fontSize: "1.3em",
+          fontSize: ".9em",
         },
         "h4": {
-          fontSize: "1.1em",
+          fontSize: ".9em",
+        },
+        "p": {
+          fontSize: ".9em",
         }
       },
     };