Extract colspan from components (ocaml#539)

Author: rdavison

src/Footer.res

@@ -39,8 +39,8 @@ module LogoSection = {
   type t = {ocamlSummary: string}
 
   @react.component
-  let make = (~content, ~colspan) =>
-    <div className={"space-y-8 " ++ colspan}>
+  let make = (~content) =>
+    <div className="space-y-8">
       <img className="h-10" src="/static/ocaml-logo.jpeg" alt="OCaml" />
       <P> {React.string(content.ocamlSummary)} </P>
       {
@@ -111,8 +111,8 @@ module MainLinksSection = {
   }
 
   @react.component
-  let make = (~content, ~colspan) =>
-    <div className={"grid grid-cols-2 gap-8 " ++ colspan}>
+  let make = (~content) =>
+    <div className={"grid grid-cols-2 gap-8"}>
       <div className="md:grid md:grid-cols-2 md:gap-8">
         {
           let section = content.principlesSection
@@ -183,9 +183,9 @@ type t = {
 let make = (~content) =>
   <FooterContainer footerLabel=content.footer>
     <div className="xl:grid xl:grid-cols-3 xl:gap-8">
-      <LogoSection content=content.logoContent colspan="xl:col-span-1" />
-      <div className="mt-12 xl:mt-0">
-        <MainLinksSection content=content.mainLinksContent colspan="xl:col-span-2" />
+      <div className="xl:col-span-1"> <LogoSection content=content.logoContent /> </div>
+      <div className="mt-12 xl:mt-0 xl:col-span-2">
+        <MainLinksSection content=content.mainLinksContent />
       </div>
     </div>
     <div className=`mt-10`> <SponsorsSection content=content.sponsorContent /> </div>

src/LogoCloud.res

@@ -40,8 +40,7 @@ module CompanyCard = {
     // TODO: accessibility - should the link include the div or only the contents?
     // TODO: accessibility - warn opening a new tab
     <a href=website target="_blank" className="py-1 px-1">
-      <div
-        className="col-span-1 flex justify-center items-center space-x-8 py-8 px-4 bg-gray-50 h-40">
+      <div className="flex justify-center items-center space-x-8 py-8 px-4 bg-gray-50 h-40">
         {switch company {
         | #Optional({logoSrc: Some(logoSrc)}) => logo(~src=logoSrc, ~name)
         | #Optional(_) => logoFiller
@@ -66,7 +65,7 @@ let make = (~companies) =>
       {switch companies {
       | #LogoOnly(companies) =>
         companies->Js.Array2.map((c: Company.t) =>
-          <CompanyCard key=c.name company={#Required(c)} />
+          <div className="col-span-1"> <CompanyCard key=c.name company={#Required(c)} /> </div>
         )
       | #LogoWithText(companies) =>
         companies->Js.Array2.map((c: CompanyOptionalLogo.t) =>