Merge branch 'fix/typography-tokens-style' of https://github.com/ital…

…ia/designers.italia.it into fix/typography-tokens-style
italia · Nov 9, 2023 · 1e7ff90 · 1e7ff90
2 parents ccba055 + 008deeb
commit 1e7ff90
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 80 deletions.
diff --git a/src/components/component-view/component-view.js b/src/components/component-view/component-view.js
@@ -40,28 +40,28 @@ function ComponentView({
 
   const { viewer, accordionLabel, accordionSrLabel } = viewerData;
 
-  const ICON_EXTERNAL = {
-    icon: "sprites.svg#it-external-link",
+  const ICON_INFO = {
+    icon: "sprites.svg#it-info-circle",
     size: "sm",
-    color: "primary",
-    addonClasses: "align-middle me-4 mb-1",
+    color: "white",
+    addonClasses: "align-middle",
     ariaLabel: " (Link esterno)",
   };
 
   const ICON_COPY_CODE = {
     icon: "sprites.svg#it-copy",
     size: "sm",
-    color: "primary",
-    addonClasses: "align-middle me-4 mb-1 mt-1",
+    color: "white",
+    addonClasses: "align-middle",
     ariaLabel: " Copia il codice negli appunti",
   };
 
   const ICON_FULLSCREEN = {
-    icon: "sprites.svg#it-fullscreen",
+    icon: "sprites.svg#it-external-link",
     size: "sm",
-    color: "primary",
-    addonClasses: "align-middle me-4 mb-1",
-    ariaLabel: " Mostra in una finestra dedicata",
+    color: "white",
+    addonClasses: "align-middle",
+    ariaLabel: " Apri l'anteprima in una nuova finestra",
   };
 
   const ICON_SUCCESS = {
@@ -129,10 +129,10 @@ function ComponentView({
   const collId = `${uuid}-collapse`;
   const [wrappedCode, setWrappedCode] = useState(false);
 
-  const [previewWidth, setPreviewWidth] = useState(" viewer-desktop");
+  const [previewWidth, setPreviewWidth] = useState(" viewer-full");
   const changeResolution = (e) => {
     e.preventDefault();
-    const res = e.target.textContent; // mobile, tablet, desktop
+    const res = e.target.textContent; // mobile, tablet, full
     setPreviewWidth(` viewer-${res}`);
   };
 
@@ -147,9 +147,18 @@ function ComponentView({
     ));
   }
 
-  const componentStyles = classNames(
-    "border-bottom d-flex flex-column align-items-center",
-    { "pb-4": responsiveButtonsItems },
+  const componentStyles = classNames("d-flex flex-column align-items-center", {
+    "me-lg-4 me-xl-5": componentViewerData?.variants,
+  });
+
+  const accordionHeadingStyle =
+    "d-flex justify-content-between align-items-center";
+
+  const accordionContainerStyle = classNames(
+    "accordion accordion-left-icon py-2 border-bottom-0",
+    {
+      "me-lg-4 me-xl-5": componentViewerData?.variants,
+    },
   );
 
   const accordionStyle = classNames("accordion-collapse collapse", {
@@ -159,7 +168,9 @@ function ComponentView({
 
   const accordionButtonStyle = classNames(
     "accordion-button border-top-0 collapsed",
-    { collapsed: accordionOpen },
+    {
+      collapsed: accordionOpen,
+    },
   );
 
   const BSIExampleUrl = `/examples/${source}/${slugify(
@@ -170,35 +181,46 @@ function ComponentView({
     <div id={uuid} className="pb-4 mb-5">
       {contentTrimmed && (
         <div className={componentStyles}>
-          <span className="visually-hidden">Inizio componente:</span>
+          <div className="w-100 d-flex align-items-end justify-content-end py-3">
+            {responsiveButtonsItems && (
+              <div className="responsive-buttons d-none d-lg-block">
+                {viewer.responsiveLabel && (
+                  <span className="me-4">{viewer.responsiveLabel}</span>
+                )}
+                <div
+                  className="btn-group"
+                  role="group"
+                  aria-label={viewer.responsiveAriaLabel}
+                >
+                  {responsiveButtonsItems}
+                </div>
+              </div>
+            )}
+            <div className="ms-2">
+              <a
+                href={BSIExampleUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="btn btn-xs btn-primary p-2"
+              >
+                <Icon {...ICON_FULLSCREEN} />
+              </a>
+            </div>
+          </div>
+          <span className="visually-hidden">Inizio anteprima:</span>
           <iframe
             id={`${idPrefix}-iframe`}
             src={BSIExampleUrl}
             title={`Variante: ${variantName}`}
-            className={`w-100 rounded border shadow-sm iframe-example ${previewWidth}`}
+            className={`w-100 iframe-example rounded border shadow-sm ${previewWidth}`}
           />
-          <span className="visually-hidden">Fine componente.</span>
-          {responsiveButtonsItems && (
-            <div className="responsive-buttons d-none d-lg-block">
-              <div className="d-flex align-items-center justify-content-center pb-2 pt-4 mt-2">
-                {viewer.label && (
-                  <span className="small pe-3 text-secondary fw-semibold">
-                    {viewer.label}
-                  </span>
-                )}
-                {responsiveButtonsItems}
-              </div>
-            </div>
-          )}
+          <span className="visually-hidden">Fine anteprima.</span>
         </div>
       )}
       {contentTrimmed && accordionShow && (
-        <div className="accordion accordion-left-icon" id={accId}>
+        <div className={accordionContainerStyle} id={accId}>
           <div className="accordion-item">
-            <div
-              className="d-flex justify-content-between align-items-center"
-              id={headId}
-            >
+            <div className={accordionHeadingStyle} id={headId}>
               <h2 id={`${idPrefix}-codeViewer`} className="accordion-header ">
                 <button
                   className={accordionButtonStyle}
@@ -216,27 +238,20 @@ function ComponentView({
                   <Button
                     onClick={(e) => copyToClipboard(e, contentTrimmed)}
                     aria-label={accordionSrCopyLabel}
-                    addonStyle="p-0 shadow-none"
+                    addonStyle="shadow-none btn btn-xs btn-secondary p-2 me-2"
                   >
                     <Icon {...ICON_COPY_CODE} />
                   </Button>
                 )}
-                <a
-                  href={BSIExampleUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="Mostra il solo componente in una finestra dedicata"
-                >
-                  <Icon {...ICON_FULLSCREEN} />
-                </a>
                 {accordionUrl && (
                   <a
                     href={accordionUrl}
                     target="_blank"
                     rel="noreferrer"
                     aria-label={accordionSrLabel}
+                    className="shadow-none btn btn-xs btn-primary p-2"
                   >
-                    <Icon {...ICON_EXTERNAL} />
+                    <Icon {...ICON_INFO} />
                   </a>
                 )}
               </div>
@@ -249,8 +264,11 @@ function ComponentView({
               role="region"
               aria-labelledby={headId}
             >
-              <div className="accordion-body p-0">
-                <div aria-hidden="true" className="d-flex flex-row-reverse">
+              <div className="accordion-body p-0 position-relative">
+                <div
+                  aria-hidden="true"
+                  className="position-absolute end-0 split-code-checkbox"
+                >
                   {contentTrimmed && (
                     <Checkbox
                       id={`${idPrefix}-wrap`}

diff --git a/src/components/component-view/component-view.scss b/src/components/component-view/component-view.scss
@@ -1,10 +1,29 @@
+@import "../../scss/bootstrap-breakpoints";
+
 pre {
     max-height:70vh;
+    padding-top: 3rem !important;
 }
 .accordion.accordion-left-icon .accordion-header .accordion-button::before {
     width:1rem;
 }
-
+.split-code-checkbox {
+    .form-check {
+        label {
+            color: white;
+            font-size: 1rem !important;
+            background-color: rgb(43, 43, 43);
+            &::after {
+                border-color: white !important;
+            }
+        }
+    }
+}
+.responsive-buttons {
+    .btn-group > .btn-group:not(:first-child), .btn-group > .btn:not(:first-child) {
+        margin-left: -2px!important;
+    }
+}
 .iframe-example {
     transition-property: height, max-width, width;
     transition-duration: 500ms;
@@ -13,14 +32,40 @@ pre {
         min-height: 350px;
     }
 }
-
 .viewer-mobile {
     max-width: 360px;
 }
 .viewer-tablet {
     max-width: 768px;
 }
-.viewer-desktop {
+.viewer-full {
     max-width: 1280px;
 }
 
+//mobile only ------------------------------------------------------------------------------------------
+@include media-breakpoint-down(sm) {
+    .notification {
+        bottom: 40px;
+    }
+}
+
+//Small tablet ------------------------------------------------------------------------------------------
+@include media-breakpoint-up(sm) {
+    .notification {
+        bottom: 40px;
+    }
+}
+
+//Tablet landscape --------------------------------------------------------------------------------------
+@include media-breakpoint-up(lg) {
+    .component-viewer .no-left-margin {
+    margin-left: -1.5rem;
+    }
+}
+
+//Laptop ------------------------------------------------------------------------------------------------
+@include media-breakpoint-up(xl) {
+    .component-viewer .no-left-margin {
+        margin-left: -3rem;
+    }
+}
diff --git a/src/data/component-viewer.yaml b/src/data/component-viewer.yaml
@@ -1,15 +1,19 @@
 accordionLabel: "Codice Bootstrap Italia"
-accordionSrLabel: Apri la documentazione del componente sul sito Boostrap Italia
-accordionSrCopyLabel: Copia negli appunti il codice del componente Bootstrap Italia
+accordionSrLabel: Apri la documentazione sul sito Boostrap Italia (si apre in una nuova finestra)
+accordionSrCopyLabel: Copia negli appunti il codice Bootstrap Italia
 viewer:
-  label: "Risoluzione "
+  responsiveAriaLabel: "Scegli la risoluzione per l'anteprima:"
+  responsiveLabel: "Anteprima:"
   responsiveButtons:
     - label: "mobile"
-      addonStyle: btn-me btn-xs btn-outline-secondary small
+      addonStyle: btn-xs 
+      btnStyle: secondary     
       ariaLabel: Visualizzazione anteprima mobile 360px
     - label: "tablet"
-      addonStyle: btn-me btn-xs btn-outline-secondary small
+      addonStyle: btn-xs 
+      btnStyle: secondary
       ariaLabel: Visualizzazione anteprima tablet 768px
-    - label: "desktop"
-      addonStyle: btn-xs btn-outline-secondary small
+    - label: "full"
+      addonStyle: btn-xs
+      btnStyle: secondary
       ariaLabel: Visualizzazione anteprima desktop
diff --git a/src/data/content/community.yaml b/src/data/content/community.yaml
@@ -318,6 +318,30 @@ components:
 
       #CARD MEDIUM
 
+      - title: "Scrivere (semplice) per la PA: qualità nella comunicazione e diritti delle persone"
+        headingLevel: 4
+        customCol: col-lg-4
+        img: /images/community/articoli-di-approfondimento/20231108-scrivere-semplice-per-la-pa-qualita-nella-comunicazione-e-diritti-delle-persone-1198x673.png
+        alt: ""
+        imgRatio: 16x9
+        imgPlaceholder: false
+        fullHeight: false
+        rounded: true
+        url: https://medium.com/designers-italia/scrivere-semplice-per-la-pa-qualit%C3%A0-nella-comunicazione-e-diritti-delle-persone-ff28bf02bfad
+        blank: true
+        externalLink:
+          label: Leggi su Medium
+          screenReaderText: "l'articolo completo"
+          icon:
+            icon: sprites.svg#it-external-link
+            size: xs
+        moreInfo: di Daniela Iozzo
+        chips:
+          - color: secondary
+            label: Contenuti e linguaggio
+            url: "#"
+            blank: false
+
       - title: "Progettare strumenti per la trasformazione digitale degli enti locali"
         headingLevel: 4
         customCol: col-lg-4
@@ -373,6 +397,41 @@ components:
             size: xs
         moreInfo: di Marco Maria Pedrazzo
 
+      - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese"
+        headingLevel: 4
+        img: /images/community/articoli-di-approfondimento/20220705-progettare-con-qualita-l-accessibilita-al-centro-del-design-system-del-paese.webp
+        alt: ""
+        imgRatio: 16x9
+        imgPlaceholder: false
+        fullHeight: true
+        rounded: true
+        url: https://medium.com/designers-italia/progettare-con-qualita-accessibilita-al-centro-del-design-system-del-paese-5e3599170099
+        blank: true
+        externalLink:
+          label: Leggi su Medium
+          screenReaderText: " l'articolo completo"
+          icon:
+            icon: sprites.svg#it-external-link
+            size: xs
+        moreInfo: di Daniele Tabellini e Fabrizio Caccavello
+
+      - title: "Accessibili, usabili e inclusivi: per una progettazione etica dei servizi pubblici digitali"
+        headingLevel: 4
+        img: /images/community/articoli-di-approfondimento/20220128-accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-digitali.webp
+        alt: ""
+        imgRatio: 16x9
+        imgPlaceholder: false
+        fullHeight: true
+        rounded: true
+        url: https://medium.com/designers-italia/accessibili-usabili-e-inclusivi-per-una-progettazione-etica-dei-servizi-pubblici-digitali-186ed6ebc469
+        blank: true
+        externalLink:
+          label: Leggi su Medium
+          screenReaderText: " l'articolo completo"
+          icon:
+            icon: sprites.svg#it-external-link
+            size: xs
+        moreInfo: di Mauro Filippi
     # MEDIA
 
     - id: media

diff --git a/src/data/content/design-system/fondamenti/tipografia.yaml b/src/data/content/design-system/fondamenti/tipografia.yaml
@@ -131,6 +131,7 @@ components:
 
         - name: TextImageCta
           title: Titillium Web
+          noSpace: true
           headingLevel: 3
           text: |
               Titillium Web è il nostro **carattere principale**. Disponibile in diverse varianti, è un carattere geometrico che garantisce flessibilità nel design. È raccomandato per titoli, sottotitoli, elementi interattivi e brevi paragrafi di testo.
@@ -146,6 +147,7 @@ components:
 
         - name: TextImageCta
           title: Lora
+          noSpace: true
           headingLevel: 3
           text: |
               Lora è il carattere tipografico nato espressamente per facilitare la **lettura dei testi** su dispostivi digitali. Essendo un font con le grazie (*serif*), è raccomandato per paragrafi di testo più lunghi.
@@ -161,6 +163,7 @@ components:
 
         - name: TextImageCta
           title: Roboto Mono
+          noSpace: true
           headingLevel: 3
           text: |
             Roboto Mono, variante monospaziata della famiglia Roboto, è un carattere ideato per la **visualizzazione di dati tecnici**. La sua uniformità dei caratteri è utile per rappresentare numeri, codici, calcoli matematici, e fornire esempi di stringhe di linguaggi di programmazione.