fix: design system lg column spacing + general breadcrumbs left align…

…ment + various style adj (#1040)
italia · Nov 7, 2023 · 995ae0c · 995ae0c
1 parent 02a9ad6
commit 995ae0c
Show file tree

Hide file tree

Showing 93 changed files with 723 additions and 270 deletions.
diff --git a/src/components/breadcrumbs/breadcrumbs.js b/src/components/breadcrumbs/breadcrumbs.js
@@ -10,16 +10,22 @@ function Breadcrumbs({ pageContext, crumbLabel }) {
     breadcrumb: { crumbs },
   } = pageContext;
 
+  const styles = "ps-lg-4 ms-lg-2";
+
   return (
     <div>
       {crumbLabel ? (
-        <Breadcrumb
-          crumbs={crumbs}
-          crumbLabel={crumbLabel}
-          crumbSeparator=" > "
-        />
+        <div className={styles}>
+          <Breadcrumb
+            crumbs={crumbs}
+            crumbLabel={crumbLabel}
+            crumbSeparator=" > "
+          />
+        </div>
       ) : (
-        <Breadcrumb crumbs={crumbs} crumbSeparator=" > " />
+        <div className={styles}>
+          <Breadcrumb crumbs={crumbs} crumbSeparator=" > " />
+        </div>
       )}
     </div>
   );

diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -1,5 +1,6 @@
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
+import classNames from "classnames";
 import ImageResponsive from "../image-responsive/image-responsive";
 import SimpleCta from "../simple-cta/simple-cta";
 import Chip from "../chip/chip";
@@ -42,27 +43,30 @@ function Card({
   rounded,
   buttonBottom,
 }) {
-  const styles =
-    "di-card d-md-flex flex-md-column w-100" +
-    `${fullHeight ? " fullheight" : ""}` +
-    `${rounded ? " rounded" : ""}` +
-    `${titleSmall ? " title-small" : ""}` +
-    `${titleBig ? " title-big" : ""}` +
-    `${noShadow ? " shadow-none" : ""}` +
-    `${textSerif ? " text-serif" : ""}` +
-    `${buttonBottom ? " has-button" : ""}`;
+  const styles = classNames("di-card d-md-flex flex-md-column w-100", {
+    fullheight: fullHeight,
+    rounded,
+    "title-small": titleSmall,
+    "title-big": titleBig,
+    "shadow-lg": !noShadow,
+    "text-serif": textSerif,
+    "has-button": buttonBottom,
+  });
 
-  const imgStyle =
-    "img-wrapper ratio" +
-    `${imgRatio ? ` ratio-${imgRatio}` : ""}` +
-    `${imgPlaceholder ? " img-placeholder" : ""}` +
-    `${iconImg ? " icon-img" : ""}` +
-    `${cardEvent ? " mb-4 negative-margin" : ""}` +
-    `${imgRounded ? " rounded" : ""}`;
+  const imgStyle = classNames("img-wrapper ratio", {
+    [`ratio-${imgRatio}`]: imgRatio,
+    "img-placeholder": imgPlaceholder,
+    "icon-img": iconImg,
+    "mb-4 negative-margin": cardEvent,
+    rounded: imgRounded,
+  });
 
-  const styleBody =
-    "di-card-body bg-white p-4 d-md-flex flex-md-column justify-content-between" +
-    `${rounded ? " rounded" : ""}`;
+  const styleBody = classNames(
+    "di-card-body bg-white p-4 d-md-flex flex-md-column justify-content-between",
+    {
+      rounded,
+    },
+  );
 
   // heading level
   let HLevel;

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -1,16 +1,12 @@
 @import "../../scss/bootstrap-breakpoints";
 
 .di-card {
-	box-shadow: var(--card-box-shadow);
   .rounded {
     .gatsby-image-wrapper {
       border-radius: 4px;
       overflow: hidden;
     }
   }
-  &.shadow-none {
-    box-shadow: none;
-  }
   &.has-button {
     h2,
     h3,

diff --git a/src/components/component-view/component-view.js b/src/components/component-view/component-view.js
@@ -148,7 +148,7 @@ function ComponentView({
   }
 
   const componentStyles = classNames(
-    "border-bottom p-xl-3 d-flex flex-column align-items-center",
+    "border-bottom d-flex flex-column align-items-center",
     { "pb-4": responsiveButtonsItems },
   );
 

diff --git a/src/components/content-select/content-select.js b/src/components/content-select/content-select.js
@@ -48,35 +48,37 @@ function ContentSelect({ id, title, textInfo, children, selectedIdx, label }) {
   return (
     <section className="container-xxl" aria-labelledby={id}>
       <div className="row">
-        <div className="col-9 mb-5">
-          <h2 id={id} className="px-3 px-md-0">
-            {title}
-          </h2>
-        </div>
-        <div className="col-12 col-md-6 col-lg-5 mb-4">
-          <div className="select-wrapper px-3 px-md-0">
-            <label htmlFor={`${id}-select`}>{label}</label>
-            <select
-              value={itemSelected}
-              onChange={changeValue}
-              autoComplete="off"
-              id={`${id}-select`}
-            >
-              {variants.map((v, idx) => (
-                <option key={`opt-${idx}`} value={v.value}>
-                  {v.name}
-                </option>
-              ))}
-            </select>
+        <div className="ps-lg-2">
+          <div className="col-9 mb-5 ps-lg-5">
+            <h2 id={id} className="">
+              {title}
+            </h2>
           </div>
-        </div>
-        {textInfo && (
-          <div className="col-9">
-            <p className="small">
-              <Icon {...ICON_INFO} /> {textInfo}
-            </p>
+          <div className="col-12 col-md-6 col-lg-6 mb-4 ps-lg-5">
+            <div className="select-wrapper">
+              <label htmlFor={`${id}-select`}>{label}</label>
+              <select
+                value={itemSelected}
+                onChange={changeValue}
+                autoComplete="off"
+                id={`${id}-select`}
+              >
+                {variants.map((v, idx) => (
+                  <option key={`opt-${idx}`} value={v.value}>
+                    {v.name}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
-        )}
+          {textInfo && (
+            <div className="col-md-6 ps-lg-5">
+              <p className="small">
+                <Icon {...ICON_INFO} /> {textInfo}
+              </p>
+            </div>
+          )}
+        </div>
         <div className="col-12">{selectedChild && selectedChild.component}</div>
       </div>
     </section>

diff --git a/src/components/filter-cards/filter-cards.js b/src/components/filter-cards/filter-cards.js
@@ -1,9 +1,8 @@
 import React from "react";
+import classNames from "classnames";
 import Card from "../card/card";
 import ListArchiveDSTags from "../list-archive-ds-tags/list-archive-ds-tags";
 
-import "./filter-cards.scss";
-
 function FilterCards({
   id,
   background,
@@ -13,14 +12,16 @@ function FilterCards({
   showTags,
   col2,
   noSpace,
+  paddingX,
 }) {
-  const styles =
-    "filter-cards px-3 p-md-0" +
-    `${background ? ` bg-${background}` : ""}` +
-    `${noSpace ? "" : " py-5 py-lg-6"}` +
-    `${col2 ? " two-columns" : ""}`;
-
-  const cardStyles = `col-12 col-md-6 mb-3 mb-md-4 ${col2 ? "" : " col-lg-4"}`;
+  const styles = classNames("filter-cards", {
+    [`bg-${background}`]: background,
+    "py-5 py-lg-6": !noSpace,
+    "py-2 py-lg-5": noSpace,
+    "px-lg-4 px-xl-5": paddingX,
+  });
+
+  const cardStyles = `col-12 col-md-6 mb-3 mb-md-4 ${col2 ? "" : " col-xl-4"}`;
 
   let cardsItems;
 

diff --git a/src/components/filter-cards/filter-cards.scss b/src/components/filter-cards/filter-cards.scss
diff --git a/src/components/hero/hero.js b/src/components/hero/hero.js
@@ -57,37 +57,38 @@ function Hero({
 
   const imgResponsiveStyle = "rounded";
 
+  const breadcrumbsStyle = classNames("hero-top px-3 pt-4", {
+    "px-lg-4": column,
+  });
+
   const rowStyle = classNames("row g-0", {
     "justify-content-lg-center": centered,
+    "ps-lg-2": column,
   });
 
-  let columnStyle = classNames("col-12 g-0 px-3", {
+  const columnStyle = classNames({
+    "col-12 g-0 px-3": !column,
+    "col-12 col-md-8 px-3 ps-lg-5": column,
     "col-lg-7 offset-lg-0": centered,
-    "ps-lg-5 pe-lg-0 col-lg-7": !centered,
-  });
-
-  const breadcrumbsStyle = classNames("hero-top px-3 pt-4", {
-    "px-lg-5": column,
+    "ps-lg-5 pe-lg-0 col-lg-7": !centered && !column,
   });
 
   const kangarooZoneStyle = classNames("kangaroo-zone", {
     "no-border": noBorder,
     "pb-4 pb-md-5 pb-lg-0": specialKangarooComponent,
   });
 
-  let kangarooColumnStyle = classNames("col-12 g-0", {
-    "col-lg-7 offset-lg-0": centered,
+  const rightColumnStyle = classNames({
+    "col-12 col-md-12 col-lg-4 offset-lg-1 d-flex flex-column px-3 pe-lg-5 pt-4":
+      !column,
+    "col-12 col-md-3 offset-md-1 d-flex flex-column px-3 pe-lg-5 pt-md-4":
+      column,
   });
 
-  let rightColumnStyle =
-    "col-12 col-md-12 col-lg-4 offset-lg-1 d-flex flex-column px-3 pe-lg-5 pt-4";
-
-  if (column) {
-    columnStyle = "px-3 col-12 col-md-8";
-    kangarooColumnStyle = "col-12 g-0";
-    rightColumnStyle =
-      "col-12 col-md-3 offset-md-1 d-flex flex-column px-3 pe-lg-5 pt-md-4";
-  }
+  const kangarooColumnStyle = classNames("col-12 g-0", {
+    "ps-lg-5": column && !specialKangarooComponent,
+    "col-lg-7 offset-lg-0": centered,
+  });
 
   const shareColor = background === ("primary" || "dark") ? "white" : "primary";
 
@@ -143,7 +144,7 @@ function Hero({
                     {kangaroo && specialKangarooComponent && (
                       <div className="">
                         <div className={kangarooZoneStyle}>
-                          <div className="container-xxl">
+                          <div className="container-xxl g-0">
                             <div className="row justify-content-lg-center">
                               {/* rowStyle */}
                               <div className={kangarooColumnStyle}>
@@ -156,7 +157,6 @@ function Hero({
                     )}
                   </div>
                   {!centered && (
-                    // <div className="col-12 col-md-10 col-lg-3 offset-md-1 px-4 px-lg-2 d-flex flex-column">
                     <div className={rightColumnStyle}>
                       {img && (
                         <div className={imgStyle}>

diff --git a/src/components/img-full/img-full.js b/src/components/img-full/img-full.js
@@ -6,7 +6,7 @@ import "./img-full.scss";
 function ImgFull({ img, alt, isDSPreview }) {
   const containerStyle = classNames("img-full", {
     "mb-5": !isDSPreview,
-    "mb-3 mt-3 border rounded": isDSPreview,
+    "mb-3 mt-3 border rounded design-system-preview": isDSPreview,
   });
   const imgStyle = classNames("w-100 img-fluid", {
     rounded: isDSPreview,

diff --git a/src/components/img-full/img-full.scss b/src/components/img-full/img-full.scss
@@ -26,11 +26,15 @@
 //Tablet landscape --------------------------------------------------------------------------------------
 @include media-breakpoint-up(lg) {
 
-  .content-column {
+  .design-system-preview {
+    margin-left: -3rem;
+  }
+
+  // .content-column {
     // .img-full {
     //   width: 75%;
     // }
-  }
+  // }
 
 }
 

diff --git a/src/components/list-archive-ds-tags/list-archive-ds-tags.js b/src/components/list-archive-ds-tags/list-archive-ds-tags.js
@@ -25,7 +25,7 @@ function ListArchiveDSTags() {
 
   return (
     <section className="pb-5" aria-describedby="archive-list-title">
-      <div className="px-0 px-md-3 px-lg-4 px-xl-5 d-md-flex flex-row align-items-center">
+      <div className="ps-0 ps-md-3 ps-lg-4 ps-xl-5 d-md-flex flex-row align-items-center">
         <h3 className="border-end pe-4" id="archive-list-title">
           Esplora per utilizzo
         </h3>

diff --git a/src/components/nav-sidebar/nav-sidebar.scss b/src/components/nav-sidebar/nav-sidebar.scss
@@ -20,6 +20,9 @@
             padding: 0 24px;
             color: var(--color-primary) !important;
             width: 100%;
+            span span {
+              text-align: left;
+            }
             .icon {
               transition: transform .3s;
             }