Localize fonts

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/avatar/Avatar.jsx

@@ -32,7 +32,7 @@ function Avatar({
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
                   : text !== null && (
-                    <Text variant={textSize}>
+                    <Text variant={textSize} primary>
                       {twemojify([...text][0])}
                     </Text>
                   )

src/app/atoms/badge/NotificationBadge.jsx

@@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3">{content}</Text>}
+      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
     </div>
   );
 }

src/app/atoms/badge/NotificationBadge.scss

@@ -8,7 +8,6 @@
   .text {
     color: var(--tc-badge);
     text-align: center;
-    font-weight: 700;
   }
 
   &--alert {

src/app/atoms/divider/Divider.jsx

@@ -8,7 +8,7 @@ function Divider({ text, variant, align }) {
   const dividerClass = ` divider--${variant} divider--${align}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
+      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
     </div>
   );
 }

src/app/atoms/divider/Divider.scss

@@ -22,7 +22,6 @@
   &__text {
     padding: 2px var(--sp-extra-tight);
     border-radius: calc(var(--bo-radius) / 2);
-    font-weight: 500;
   }
 }
 

src/app/atoms/text/Text.jsx

@@ -3,25 +3,37 @@ import PropTypes from 'prop-types';
 import './Text.scss';
 
 function Text({
-  id, className, variant, children,
+  className, variant, weight,
+  primary, span, children,
 }) {
-  const cName = className !== '' ? `${className} ` : '';
-  if (variant === 'h1') return <h1 id={id === '' ? undefined : id} className={`${cName}text text-h1`}>{ children }</h1>;
-  if (variant === 'h2') return <h2 id={id === '' ? undefined : id} className={`${cName}text text-h2`}>{ children }</h2>;
-  if (variant === 's1') return <h4 id={id === '' ? undefined : id} className={`${cName}text text-s1`}>{ children }</h4>;
-  return <p id={id === '' ? undefined : id} className={`${cName}text text-${variant}`}>{ children }</p>;
+  const classes = [];
+  if (className) classes.push(className);
+
+  classes.push(`text text-${variant} text-${weight}`);
+  if (primary) classes.push('text-primary');
+
+  const textClass = classes.join(' ');
+  if (span) return <span className={classes.join(' ')}>{ children }</span>;
+  if (variant === 'h1') return <h1 className={textClass}>{ children }</h1>;
+  if (variant === 'h2') return <h2 className={textClass}>{ children }</h2>;
+  if (variant === 's1') return <h4 className={textClass}>{ children }</h4>;
+  return <p className={textClass}>{ children }</p>;
 }
 
 Text.defaultProps = {
-  id: '',
-  className: '',
+  className: null,
   variant: 'b1',
+  weight: 'normal',
+  primary: false,
+  span: false,
 };
 
 Text.propTypes = {
-  id: PropTypes.string,
   className: PropTypes.string,
   variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
+  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
+  primary: PropTypes.bool,
+  span: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

src/app/atoms/text/Text.scss

@@ -1,7 +1,5 @@
-@mixin font($type, $weight) {
-  
+@mixin font($type) {
   font-size: var(--fs-#{$type});
-  font-weight: $weight;
   letter-spacing: var(--ls-#{$type});
   line-height: var(--lh-#{$type});
 
@@ -11,7 +9,7 @@
   }
 }
 
-%text {
+.text {
   margin: 0;
   padding: 0;
   color: var(--tc-surface-high);
@@ -26,30 +24,45 @@
   }
 }
 
+.text-primary {
+  font-family: var(--font-primary);
+  
+  --fw-light: var(--p-fw-light);
+  --fw-normal: var(--p-fw-normal);
+  --fw-medium: var(--p-fw-medium);
+  --fw-bold: var(--p-fw-bold);
+}
+.text-light {
+  font-weight: var(--fw-light);
+}
+.text-normal {
+  font-weight: var(--fw-normal);
+}
+.text-medium {
+  font-weight: var(--fw-medium);
+}
+.text-bold {
+  font-weight: var(--fw-bold);
+}
+
 .text-h1 {
-  @extend %text;
-  @include font(h1, 500);
+  @include font(h1);
 }
 .text-h2 {
-  @extend %text;
-  @include font(h2, 500);
+  @include font(h2);
 }
 .text-s1 {
-  @extend %text;
-  @include font(s1, 400);
+  @include font(s1);
 }
 .text-b1 {
-  @extend %text;
-  @include font(b1, 400);
+  @include font(b1);
   color: var(--tc-surface-normal);
 }
 .text-b2 {
-  @extend %text;
-  @include font(b2, 400);
+  @include font(b2);
   color: var(--tc-surface-normal);
 }
 .text-b3 {
-  @extend %text;
-  @include font(b3, 400);
+  @include font(b3);
   color: var(--tc-surface-low);
 }