refactor: update text props and variations

abelflopes · Mar 12, 2024 · 24d47d2 · 24d47d2
1 parent 2f5f9c3
commit 24d47d2
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 26 deletions.
diff --git a/packages/components/alert/src/index.tsx b/packages/components/alert/src/index.tsx
@@ -50,7 +50,7 @@ export const Alert = ({
     <div {...otherProps} className={classNames(styles.root, styles[skin], className)}>
       <div>
         {heading ? (
-          <Text variation="h4" as="p" skin="bold" margin={false} className={styles.heading}>
+          <Text variation="h4" as="p" skin="bold" margin="none" className={styles.heading}>
             {heading}
           </Text>
         ) : null}

diff --git a/packages/components/form-field/src/index.tsx b/packages/components/form-field/src/index.tsx
@@ -38,21 +38,21 @@ export const FormField = ({
         className={styles.label}
         skin="bold"
         variation="small"
-        margin={false}
+        margin="none"
         as={<label htmlFor="aaa">{label}</label>}
       />
     ) : null}
 
     <div className={styles.content}>{children}</div>
 
     {description ? (
-      <Text className={styles.description} variation="small" margin={false}>
+      <Text className={styles.description} variation="small" margin="none">
         {description}
       </Text>
     ) : null}
 
     {validationMessage ? (
-      <Text className={styles.validation_message} variation="small" margin={false}>
+      <Text className={styles.validation_message} variation="small" margin="none">
         {validationMessage}
       </Text>
     ) : null}

diff --git a/packages/components/modal/src/Modal.tsx b/packages/components/modal/src/Modal.tsx
@@ -95,7 +95,7 @@ export const Modal = ({
                 <header
                   {...props.header}
                   className={classNames(styles.header, props.header.className)}>
-                  <Text variation="h3" as="p" margin={false}>
+                  <Text variation="h3" as="p" margin="none">
                     {props.header.heading}
                   </Text>
 

diff --git a/packages/components/text/src/index.tsx b/packages/components/text/src/index.tsx
@@ -22,7 +22,7 @@ export type TextVariation =
 
 export interface TextProps<T extends HTMLTag> extends BaseHTMLProps, ConsumerPolymorphicProps<T> {
   /** Adds margin to the text element  */
-  margin?: boolean;
+  margin?: "default" | "top" | "bottom" | "both" | "none";
   /** Specifies the type/visual skin of text element to be rendered  */
   variation?: TextVariation;
   /* Specifies the visual style variations for the text */
@@ -38,7 +38,7 @@ export interface TextProps<T extends HTMLTag> extends BaseHTMLProps, ConsumerPol
 
 export const Text = <T extends HTMLTag>({
   as,
-  margin = true,
+  margin = "default",
   variation = "p",
   skin = "default",
   className,
@@ -54,11 +54,9 @@ export const Text = <T extends HTMLTag>({
       classNames(
         styles.root,
         styles[`variation_${variation}`],
-        {
-          [`${styles.margin}`]: margin,
-        },
         computedSkins.filter((skin) => skin !== "inverted").map((skin) => styles[`skin_${skin}`]),
         {
+          [`${styles[`margin_${margin}`]}`]: margin !== "default",
           [`${styles.skin_inverted}`]: computedSkins.includes("inverted") || theme.inverted,
         },
         className,

diff --git a/packages/components/text/src/styles/_variables.scss b/packages/components/text/src/styles/_variables.scss
@@ -60,15 +60,15 @@ $text-variations: (
   h1: (
     default: (
       font-size: 29px,
-      font-weight: 500,
+      font-weight: 600,
       line-height: 36px,
     ),
     hover: (),
   ),
   h2: (
     default: (
       font-size: 24px,
-      font-weight: 500,
+      font-weight: 600,
       line-height: 36px,
       color: get-color(neutral-dark-4),
     ),
@@ -77,21 +77,33 @@ $text-variations: (
   h3: (
     default: (
       font-size: 20px,
-      font-weight: 500,
+      font-weight: 600,
       line-height: 24px,
     ),
     hover: (),
   ),
   h4: (
-    default: (),
+    default: (
+      font-size: 18px,
+      font-weight: 600,
+      line-height: 22px,
+    ),
     hover: (),
   ),
   h5: (
-    default: (),
+    default: (
+      font-size: 16px,
+      font-weight: 600,
+      line-height: 20px,
+    ),
     hover: (),
   ),
   h6: (
-    default: (),
+    default: (
+      font-size: 14px,
+      font-weight: 600,
+      line-height: 18px,
+    ),
     hover: (),
   ),
   p: (

diff --git a/packages/components/text/src/styles/index.module.scss b/packages/components/text/src/styles/index.module.scss
@@ -10,16 +10,40 @@
 
   margin-top: get-css-var(text, margin-top);
   margin-bottom: get-css-var(text, margin-bottom);
+}
 
-  &:not(:only-child).margin {
-    &:not(.p, a) {
-      @include define-css-var(text, margin-bottom, calc(#{get-css-var(text, font-size)} * 0.75));
-    }
+// Margin
 
-    & + & {
-      @include define-css-var(text, margin-top, get-css-var(text, font-size));
-    }
-  }
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  @include define-css-var(text, margin-top, get-css-var(text, font-size));
+  @include define-css-var(text, margin-bottom, calc(#{get-css-var(text, font-size)} * 0.75));
+}
+
+.margin_both,
+.margin_top,
+.variation_p {
+  @include define-css-var(text, margin-top, get-css-var(text, font-size));
+}
+
+.margin_both,
+.margin_bottom,
+.variation_p {
+  @include define-css-var(text, margin-bottom, get-css-var(text, font-size));
+}
+
+.margin_none,
+.margin_top {
+  @include define-css-var(text, margin-bottom, 0);
+}
+
+.margin_none,
+.margin_bottom {
+  @include define-css-var(text, margin-top, 0);
 }
 
 // Variation

diff --git a/packages/docs/stories/src/text.stories.tsx b/packages/docs/stories/src/text.stories.tsx
@@ -35,14 +35,14 @@ export const Inverted: Story = {
     },
   },
   args: {
-    variation: "inverted",
+    skin: "inverted",
     children: faker.lorem.sentence(),
   },
 };
 
 export const Link: Story = {
   args: {
-    variation: "link",
+    skin: "link",
     as: <a href="#some-link">{faker.lorem.sentence()}</a>,
   },
 };