Merge branch 'main' into fix-ds-sidebar-empty-links-202312

italia · Dec 14, 2023 · f61cf7b · f61cf7b
2 parents ada0bcd + ecf2633
commit f61cf7b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/src/components/list-archive-all-tags/list-archive-all-tags.js b/src/components/list-archive-all-tags/list-archive-all-tags.js
@@ -43,8 +43,14 @@ function ListArchiveAllTags({ background, noSpace }) {
                       addonClasses="align-items-start border-bottom-0 pt-3 px-0 px-sm-2 px-md-4"
                     >
                       <Chip label={tag.fieldValue} size="lg" color="primary">
-                        <span className="ms-2 badge neutral-2-bg text-secondary my-0 pb-1">
+                        <span className="ms-2 badge bg-primary rounded-pill">
+                          <span className="visually-hidden">[</span>
                           {tag.totalCount}
+                          {tag.totalCount === 1 ? (
+                            <span className="visually-hidden"> scheda ]</span>
+                          ) : (
+                            <span className="visually-hidden"> schede ]</span>
+                          )}
                         </span>
                       </Chip>
                     </ListItem>

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
@@ -42,8 +42,14 @@ function ListArchiveDSTags() {
                   color="primary"
                   path="design-system/componenti/utili-per"
                 >
-                  <span className="ms-2 badge neutral-2-bg text-secondary my-0 pb-1">
+                  <span className="ms-2 badge bg-primary rounded-pill small">
+                    <span className="visually-hidden">[</span>
                     {tag.totalCount}
+                    {tag.totalCount === 1 ? (
+                      <span className="visually-hidden"> componente ]</span>
+                    ) : (
+                      <span className="visually-hidden"> componenti ]</span>
+                    )}
                   </span>
                 </Chip>
               </ListItem>

diff --git a/src/data/content/design-system/fondamenti/griglia.yaml b/src/data/content/design-system/fondamenti/griglia.yaml
@@ -150,7 +150,7 @@ components:
               - text: 540px
               - text: 720px
               - text: 960px
-              - text: 1184px
+              - text: 1176px
               - text: 1320px
             - cols:
               - text: Contenitore responsive (small)
@@ -159,7 +159,7 @@ components:
               - text: 100%
               - text: 720px
               - text: 960px
-              - text: 1184px
+              - text: 1176px
               - text: 1320px
             - cols:
               - text: Contenitore responsive (medium)
@@ -168,7 +168,7 @@ components:
               - text: 100%
               - text: 100%
               - text: 960px
-              - text: 1184px
+              - text: 1176px
               - text: 1320px
             - cols:
               - text: Contenitore responsive (large)
@@ -177,7 +177,7 @@ components:
               - text: 100%
               - text: 100%
               - text: 100%
-              - text: 1184px
+              - text: 1176px
               - text: 1320px
             - cols:
               - text: Contenitore responsive (extra large)

diff --git a/src/scss/custom.scss b/src/scss/custom.scss
@@ -61,3 +61,27 @@ div.chips-list-wrapper {
  }
  scroll-margin-top: $header-center-max-height-mob + 48;
 }
+
+// special chips with numeric rounded-pill badge inside ("argomenti")
+.chips-list-wrapper {
+  .chips-list {
+    .chip-simple {
+      span.badge {
+        &.rounded-pill {
+          transform: translateY(-1px);
+        }
+      }
+
+      &:hover {
+        span.badge {
+          &.rounded-pill {
+            &.bg-primary {
+              background-color: white !important;
+              color: var(--primary-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}