Merge pull request #24 from rangle/fix/add-unit-to-line-height

fix(product-card): standardize CSS formatting and correct line-height…

Author: jasonsantos

apps/demo/.storybook/preview.ts

@@ -13,7 +13,7 @@ const preview: Preview = {
     brands: {
       name: "Brands",
       description: "Design System Supported Brands",
-      defaultValue: "Brand 1",
+      defaultValue: "brand-1",
       toolbar: {
         title: "Brands",
         icon: "paintbrush",

packages/ui/components/product-card/product-card.css

@@ -1,4 +1,4 @@
-@import '@repo/foundations/styles';
+@import "@repo/foundations/styles";
 
 .ds-product-card,
 .ds-product-card * {
@@ -13,7 +13,8 @@
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   padding: var(--breakpoint-static-padding-default);
   width: fit-content;
-  font-family: var(--brand-font-family-sans), 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: var(--brand-font-family-sans), "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
 }
 
 .ds-product-card__header {
@@ -32,13 +33,14 @@
   color: var(--semantic-static-text-color-strong);
   font-size: var(--typography-title-font-size-lg);
   font-weight: var(--brand-font-weight-bold);
-  line-height: var(--typography-title-line-height-lg);
+  line-height: var(--typography-title-line-height-lg) px;
 }
 
 .ds-product-card__badge {
   background-color: var(--semantic-action-background-color-primary);
   color: var(--semantic-action-text-color-default);
-  padding: var(--breakpoint-action-padding-xs) var(--breakpoint-action-padding-sm);
+  padding: var(--breakpoint-action-padding-xs)
+    var(--breakpoint-action-padding-sm);
   border-radius: var(--density-action-border-radius-default);
   font-size: var(--typography-label-font-size-default);
   font-weight: var(--brand-font-weight-bold);
@@ -48,7 +50,7 @@
   color: var(--semantic-static-text-color-strong);
   font-size: var(--typography-title-font-size-md);
   font-weight: var(--brand-font-weight-bold);
-  line-height: var(--typography-title-line-height-md);
+  line-height: var(--typography-title-line-height-md) px;
 }
 
 .ds-product-card__features {
@@ -72,7 +74,7 @@
 .ds-product-card__feature-text {
   color: var(--semantic-static-text-color-default);
   font-size: var(--typography-body-font-size-2);
-  line-height: var(--typography-body-line-height-2);
+  line-height: var(--typography-body-line-height-2) px;
 }
 
 .ds-product-card__footer {
@@ -88,5 +90,5 @@
 .ds-product-card__footer-text {
   color: var(--semantic-static-text-color-muted);
   font-size: var(--typography-label-font-size-default);
-  line-height: var(--typography-label-line-height-default);
+  line-height: var(--typography-label-line-height-default) px;
 }