fix(pie-divider): DSW-000 divider font-size set to 16px

justeattakeaway · Jan 8, 2025 · a15b6a8 · a15b6a8
1 parent e585ba2
commit a15b6a8
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 43 deletions.
diff --git a/.changeset/wet-fishes-look.md b/.changeset/wet-fishes-look.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-divider": minor
+---
+
+[Fixed] - divider font-size set to 16px
diff --git a/packages/components/pie-divider/src/divider.scss b/packages/components/pie-divider/src/divider.scss
@@ -1,54 +1,58 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 .c-divider {
-  --divider-bg-color: var(--dt-color-divider-default);
-  --divider-width: 100%;
-  --divider-min-width: 16px;
-  --divider-height: 1px;
-  --divider-label-max-width: 90%;
-
-  width: var(--divider-width);
-
-  &,
-  hr {
-    margin: 0;
-    border: 0;
-    background-color: var(--divider-bg-color);
-  }
-
-  &:not(.c-divider--labelled) {
-    height: var(--divider-height);
-  }
-
-  &.c-divider--labelled {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    gap: var(--dt-spacing-b);
-    background-color: transparent;
-
-    .c-divider-label {
-      max-width: var(--divider-label-max-width);
-      word-wrap: break-word;
-    }
+    --divider-bg-color: var(--dt-color-divider-default);
+    --divider-width: 100%;
+    --divider-min-width: 16px;
+    --divider-height: 1px;
+    --divider-label-max-width: 90%;
+    --divider-font-size: #{p.font-size(--dt-font-body-l-size)};
+    --divider-line-height: #{p.font-size(--dt-font-body-l-line-height)};
+
+    width: var(--divider-width);
 
+    &,
     hr {
-      flex-grow: 1;
-      height: var(--divider-height);
-      min-width: var(--divider-min-width);
+        margin: 0;
+        border: 0;
+        background-color: var(--divider-bg-color);
     }
 
-    &.c-divider--inverse {
-      color: var(--dt-color-content-inverse);
+    &:not(.c-divider--labelled) {
+        height: var(--divider-height);
+    }
+
+    &.c-divider--labelled {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        gap: var(--dt-spacing-b);
+        background-color: transparent;
+
+        .c-divider-label {
+            font-size: var(--divider-font-size);
+            line-height: var(--divider-line-height);
+            max-width: var(--divider-label-max-width);
+            word-wrap: break-word;
+        }
+
+        hr {
+            flex-grow: 1;
+            height: var(--divider-height);
+            min-width: var(--divider-min-width);
+        }
+
+        &.c-divider--inverse {
+            color: var(--dt-color-content-inverse);
+        }
     }
-  }
 
-  &.c-divider--inverse {
-    --divider-bg-color: var(--dt-color-divider-inverse);
-  }
+    &.c-divider--inverse {
+        --divider-bg-color: var(--dt-color-divider-inverse);
+    }
 
-  &.c-divider--vertical {
-    --divider-width: 1px;
-    --divider-height: 100%;
-  }
+    &.c-divider--vertical {
+        --divider-width: 1px;
+        --divider-height: 100%;
+    }
 }