feat: text component updated (momentum-design#891)

* refactor: updated the types of text

* refactor(wip): updating text component as per tech breakdown

* feat: created defined types for valid text tags

* fix: removed utils from e2e file

* refactor: review comments incorporated

* chore: updated switch case

* test: updated snapshots

* revert: using switch case instead of static html from lit

* refactor: moved partname to constants

* fix: updated text component to add default value to type attr

---------

Co-authored-by: Arjun Kesava <arjun.kesava@gmail.com>

packages/components/src/components/text/fonts.styles.ts

@@ -1,99 +1,235 @@
 import { css } from 'lit';
 
-// todo: change definition to tokens once available
-
 export const fontsStyles = css`
-  :host([type="heading-1"]) {
-    font-size: 7.5rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 125%; /* 9.375rem */
-    text-transform: capitalize;
+  :host([type="headline-small-regular"])::part(text) {
+    font-size: var(--mds-font-apps-headline-small-regular-font-size);
+    font-weight: var(--mds-font-apps-headline-small-regular-font-weight);
+    line-height: var(--mds-font-apps-headline-small-regular-line-height);
+    text-decoration: var(--mds-font-apps-headline-small-regular-text-decoration);
+    text-transform: var(--mds-font-apps-headline-small-regular-text-case);
   }
 
-  :host([type="heading-2"]) {
-    font-size: 6rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 125%; /* 7.5rem */
-    text-transform: capitalize;
+  :host([type="headline-small-light"])::part(text) {
+    font-size: var(--mds-font-apps-headline-small-light-font-size);
+    font-weight: var(--mds-font-apps-headline-small-light-font-weight);
+    line-height: var(--mds-font-apps-headline-small-light-line-height);
+    text-decoration: var(--mds-font-apps-headline-small-light-text-decoration);
+    text-transform: var(--mds-font-apps-headline-small-light-text-case);
   }
 
-  :host([type="heading-3"]) {
-    font-size: 3rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 125%; /* 3.75rem */
+  :host([type="heading-xlarge-bold"])::part(text) {
+    font-size: var(--mds-font-apps-heading-xlarge-bold-font-size);
+    font-weight: var(--mds-font-apps-heading-xlarge-bold-font-weight);
+    line-height: var(--mds-font-apps-heading-xlarge-bold-line-height);
+    text-decoration: var(--mds-font-apps-heading-xlarge-bold-text-decoration);
+    text-transform: var(--mds-font-apps-heading-xlarge-bold-text-case);
   }
-
-  :host([type="heading-4"]) {
-    font-size: 2.5rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 125%; /* 3.125rem */
+  
+  :host([type="heading-xlarge-medium"])::part(text) {
+    font-size: var(--mds-font-apps-heading-xlarge-medium-font-size);
+    font-weight: var(--mds-font-apps-heading-xlarge-medium-font-weight);
+    line-height: var(--mds-font-apps-heading-xlarge-medium-line-height);
+    text-decoration: var(--mds-font-apps-heading-xlarge-medium-text-decoration);
+    text-transform: var(--mds-font-apps-heading-xlarge-medium-text-case);
   }
-
-  :host([type="heading-5"]) {
-    font-size: 2rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 125%; /* 2.5rem */
-    letter-spacing: 0.5rem;
-    text-transform: uppercase;
+  
+  :host([type="heading-xlarge-regular"])::part(text) {
+    font-size: var(--mds-font-apps-heading-xlarge-regular-font-size);
+    font-weight: var(--mds-font-apps-heading-xlarge-regular-font-weight);
+    line-height: var(--mds-font-apps-heading-xlarge-regular-line-height);
+    text-decoration: var(--mds-font-apps-heading-xlarge-regular-text-decoration);
+    text-transform: var(--mds-font-apps-heading-xlarge-regular-text-case);
   }
 
-  :host([type="heading-6"]) {
-    font-size: 1.75rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 3rem; /* 171.429% */
+  :host([type="heading-large-bold"])::part(text) {
+    font-size: var(--mds-font-apps-heading-large-bold-font-size);
+    font-weight: var(--mds-font-apps-heading-large-bold-font-weight);
+    line-height: var(--mds-font-apps-heading-large-bold-line-height);
+    text-decoration: var(--mds-font-apps-heading-large-bold-text-decoration);
+    text-transform: var(--mds-font-apps-heading-large-bold-text-case);
   }
-
-  :host([type="heading-7"]) {
-    font-size: 1.5rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 140%; /* 2.1rem */
+  
+  :host([type="heading-large-medium"])::part(text) {
+    font-size: var(--mds-font-apps-heading-large-medium-font-size);
+    font-weight: var(--mds-font-apps-heading-large-medium-font-weight);
+    line-height: var(--mds-font-apps-heading-large-medium-line-height);
+    text-decoration: var(--mds-font-apps-heading-large-medium-text-decoration);
+    text-transform: var(--mds-font-apps-heading-large-medium-text-case);
+  }
+  
+  :host([type="heading-large-regular"])::part(text) {
+    font-size: var(--mds-font-apps-heading-large-regular-font-size);
+    font-weight: var(--mds-font-apps-heading-large-regular-font-weight);
+    line-height: var(--mds-font-apps-heading-large-regular-line-height);
+    text-decoration: var(--mds-font-apps-heading-large-regular-text-decoration);
+    text-transform: var(--mds-font-apps-heading-large-regular-text-case);
   }
 
-  :host([type="body-large"]) {
-    font-size: 2rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 3rem */
-    margin-block-end: 1.875em; /* paragraph spacing, 30px */
+  :host([type="heading-midsize-bold"])::part(text) {
+    font-size: var(--mds-font-apps-heading-midsize-bold-font-size);
+    font-weight: var(--mds-font-apps-heading-midsize-bold-font-weight);
+    line-height: var(--mds-font-apps-heading-midsize-bold-line-height);
+    text-decoration: var(--mds-font-apps-heading-midsize-bold-text-decoration);
+    text-transform: var(--mds-font-apps-heading-midsize-bold-text-case);
+  }
+  
+  :host([type="heading-midsize-medium"])::part(text) {
+    font-size: var(--mds-font-apps-heading-midsize-medium-font-size);
+    font-weight: var(--mds-font-apps-heading-midsize-medium-font-weight);
+    line-height: var(--mds-font-apps-heading-midsize-medium-line-height);
+    text-decoration: var(--mds-font-apps-heading-midsize-medium-text-decoration);
+    text-transform: var(--mds-font-apps-heading-midsize-medium-text-case);
+  }
+  
+  :host([type="heading-midsize-regular"])::part(text) {
+    font-size: var(--mds-font-apps-heading-midsize-regular-font-size);
+    font-weight: var(--mds-font-apps-heading-midsize-regular-font-weight);
+    line-height: var(--mds-font-apps-heading-midsize-regular-line-height);
+    text-decoration: var(--mds-font-apps-heading-midsize-regular-text-decoration);
+    text-transform: var(--mds-font-apps-heading-midsize-regular-text-case);
   }
 
-  :host([type="body-regular"]) {
-    font-size: 1.5rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 2.25rem */
-    margin-block-end: 1.5em; /* paragraph spacing, 24px */
+  :host([type="heading-small-bold"])::part(text) {
+    font-size: var(--mds-font-apps-heading-small-bold-font-size);
+    font-weight: var(--mds-font-apps-heading-small-bold-font-weight);
+    line-height: var(--mds-font-apps-heading-small-bold-line-height);
+    text-decoration: var(--mds-font-apps-heading-small-bold-text-decoration);
+    text-transform: var(--mds-font-apps-heading-small-bold-text-case);
+  }
+  
+  :host([type="heading-small-medium"])::part(text) {
+    font-size: var(--mds-font-apps-heading-small-medium-font-size);
+    font-weight: var(--mds-font-apps-heading-small-medium-font-weight);
+    line-height: var(--mds-font-apps-heading-small-medium-line-height);
+    text-decoration: var(--mds-font-apps-heading-small-medium-text-decoration);
+    text-transform: var(--mds-font-apps-heading-small-medium-text-case);
+  }
+  
+  :host([type="heading-small-regular"])::part(text) {
+    font-size: var(--mds-font-apps-heading-small-regular-font-size);
+    font-weight: var(--mds-font-apps-heading-small-regular-font-weight);
+    line-height: var(--mds-font-apps-heading-small-regular-line-height);
+    text-decoration: var(--mds-font-apps-heading-small-regular-text-decoration);
+    text-transform: var(--mds-font-apps-heading-small-regular-text-case);
   }
 
-  :host([type="body-small"]) {
-    font-size: 1.25rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%; /* 1.875rem */
-    margin-block-end: 0.125rem; /* paragraph spacing, 2px */
+  :host([type="body-large-bold"])::part(text) {
+    font-size: var(--mds-font-apps-body-large-bold-font-size);
+    font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+    line-height: var(--mds-font-apps-body-large-bold-line-height);
+    text-decoration: var(--mds-font-apps-body-large-bold-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-bold-text-case);
+  }
+  
+  :host([type="body-large-medium-underline"])::part(text) {
+    font-size: var(--mds-font-apps-body-large-medium-underline-font-size);
+    font-weight: var(--mds-font-apps-body-large-medium-underline-font-weight);
+    line-height: var(--mds-font-apps-body-large-medium-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-large-medium-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-medium-underline-text-case);
+  }
+  
+  :host([type="body-large-medium"])::part(text) {
+    font-size: var(--mds-font-apps-body-large-medium-font-size);
+    font-weight: var(--mds-font-apps-body-large-medium-font-weight);
+    line-height: var(--mds-font-apps-body-large-medium-line-height);
+    text-decoration: var(--mds-font-apps-body-large-medium-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-medium-text-case);
+  }
+  
+  :host([type="body-large-regular-underline"])::part(text) {
+    font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
+  }
+  
+  :host([type="body-large-regular"])::part(text) {
+    font-size: var(--mds-font-apps-body-large-regular-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([type="image-title"]) {
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 150%; /* 1.5rem */
-    letter-spacing: 0.04rem;
-    text-transform: uppercase;
+  :host([type="body-midsize-bold"])::part(text) {
+    font-size: var(--mds-font-apps-body-midsize-bold-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-bold-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-bold-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-bold-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-bold-text-case);
+  }
+  
+  :host([type="body-midsize-medium-underline"])::part(text) {
+    font-size: var(--mds-font-apps-body-midsize-medium-underline-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-medium-underline-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-medium-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-medium-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-medium-underline-text-case);
+  }
+  
+  :host([type="body-midsize-medium"])::part(text) {
+    font-size: var(--mds-font-apps-body-midsize-medium-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-medium-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-medium-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-medium-text-case);
+  }
+  
+  :host([type="body-midsize-regular-underline"])::part(text) {
+    font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
+  }
+  
+  :host([type="body-midsize-regular"])::part(text) {
+    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([type="label"]) {
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 150%; /* 1.5rem */
-    letter-spacing: 0.02rem;
+  :host([type="body-small-bold"])::part(text) {
+    font-size: var(--mds-font-apps-body-small-bold-font-size);
+    font-weight: var(--mds-font-apps-body-small-bold-font-weight);
+    line-height: var(--mds-font-apps-body-small-bold-line-height);
+    text-decoration: var(--mds-font-apps-body-small-bold-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-bold-text-case);
+  }
+  
+  :host([type="body-small-medium-underline"])::part(text) {
+    font-size: var(--mds-font-apps-body-small-medium-underline-font-size);
+    font-weight: var(--mds-font-apps-body-small-medium-underline-font-weight);
+    line-height: var(--mds-font-apps-body-small-medium-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-small-medium-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-medium-underline-text-case);
+  }
+  
+  :host([type="body-small-medium"])::part(text) {
+    font-size: var(--mds-font-apps-body-small-medium-font-size);
+    font-weight: var(--mds-font-apps-body-small-medium-font-weight);
+    line-height: var(--mds-font-apps-body-small-medium-line-height);
+    text-decoration: var(--mds-font-apps-body-small-medium-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-medium-text-case);
+  }
+  
+  :host([type="body-small-regular-underline"])::part(text) {
+    font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
+  }
+  
+  :host([type="body-small-regular"])::part(text) {
+    font-size: var(--mds-font-apps-body-small-regular-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-text-case);
   }
 `;