Version 2.0.5 (#56)

* Adding additionan css vars * adding select * changing classprop to classname * fixing util classes --------- Co-authored-by: Nick Grato <nickgrato@ngrato-27545.local>
mozilla · May 13, 2024 · 9905399 · 9905399
1 parent 31486f7
commit 9905399
Show file tree

Hide file tree

Showing 47 changed files with 416 additions and 259 deletions.
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -5,14 +5,14 @@ export type AvatarPropsT = {
   src: string;
   alt: string;
   size: number;
-  classProp?: string;
+  className?: string;
 };
 
-const Avatar = ({ src, alt, size = 50, classProp = '' }: AvatarPropsT) => {
+const Avatar = ({ src, alt, size = 50, className = '' }: AvatarPropsT) => {
   const [imageDidError, setImageDidError] = useState(false);
   return (
     <div
-      className={`${styles.avatar} ${classProp}`}
+      className={`${styles.avatar} ${className}`}
       style={{ height: `${size}px`, width: `${size}px` }}
     >
       {imageDidError ? (

diff --git a/src/components/Badge/Badge.module.scss b/src/components/Badge/Badge.module.scss
@@ -3,23 +3,22 @@
 .badge {
   &_primary,
   &_secondary {
-    @include primary-font(500);
-    @include font-size(14);
-    line-height: 18px;
-    text-transform: capitalize;
+    font-family: var(--font-primary);
+    font-size: var(--badge-font-size);
+    font-weight: var(--badge-font-size);
+    line-height: var(--badge-line-height);
+    padding: var(--badge-padding);
+    border-radius: var(--badge-border-radius);
     letter-spacing: 0.5px;
-    padding: 5px 12px;
-    border-radius: 56px;
-    height: 28px;
   }
 
   &_primary {
-    background-color: $color-text-main;
-    color: $color-text-reverse;
+    background-color: var(--color-badge-primary-bg);
+    color: var(--color-badge-primary-text);
   }
 
   &_secondary {
-    background-color: $color-interaction-secondary;
-    color: $color-text-subtle;
+    background-color: var(--color-badge-secondary-bg);
+    color: var(--color-badge-secondary-text);
   }
 }
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -6,15 +6,15 @@ export type BadgeCategoriesT = 'primary' | 'secondary';
 export type BadgePropsT = {
   name: string;
   category: BadgeCategoriesT;
-  classProp?: string;
+  className?: string;
 };
 
-const Badge = ({ name, category = 'primary', classProp = '' }: BadgePropsT) => {
+const Badge = ({ name, category = 'primary', className = '' }: BadgePropsT) => {
   return (
     <span
       className={`
        ${styles['badge_' + category]} 
-       ${classProp}`}
+       ${className}`}
     >
       {name}
     </span>

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -1,9 +1,9 @@
 @use '../../styles/core/boilerplate.scss'as *;
 
 @mixin rect_button_base() {
-  @include primary-font(600);
-  @include font-size(14);
-
+  font-family: var(--font-primary);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
   line-height: 24px;
   border-radius: $button-border-radius;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
@@ -200,26 +200,26 @@
 -------------------------------*/
 
 .small {
-  padding: 6px 12px;
+  padding: var(--button-padding-small);
 
   &_round {
-    padding: 6px;
+    padding: var(--button-padding-small-round);
   }
 }
 
 .medium {
-  padding: 8px 16px;
+  padding: var(--button-padding-medium);
 
   &_round {
-    padding: 8px;
+    padding: var(--button-padding-medium-round);
   }
 }
 
 .large {
-  padding: 12px 18px;
+  padding: var(--button-padding-large);
 
   &_round {
-    padding: 12px;
+    padding: var(--button-padding-large-round);
   }
 }
 

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -36,30 +36,41 @@ export type ButtonPropsT = {
   category?: ButtonCategoriesT;
   size?: ButtonSizesT;
   disabled?: boolean;
-  icon?: IconT | React.ReactNode;
+  icon?: IconT;
+  customIcon?: React.ReactNode;
   iconPlacedRight?: boolean;
   href?: string;
   target?: string;
   onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-  classProp?: string;
+  className?: string;
   LinkComponent?: LinkComponentT;
 };
 
 type ButtonIconT = {
-  icon: IconT | React.ReactNode;
+  icon?: IconT;
+  customIcon?: React.ReactNode;
   hasText: boolean;
   position: 'left' | 'right';
 };
 
-const ButtonIcon = ({ icon, hasText, position = 'left' }: ButtonIconT) => {
-  if (typeof icon !== 'string') return <>{icon}</>;
+const ButtonIcon = ({
+  icon,
+  customIcon,
+  hasText,
+  position = 'left',
+}: ButtonIconT) => {
+  if (customIcon) return <>{customIcon}</>;
+
+  if (!icon) {
+    return <></>;
+  }
 
   return (
     <Icon
-      name={icon as IconT}
+      name={icon}
       color="currentColor"
       size={22}
-      classProp={hasText ? styles[position] : ''}
+      className={hasText ? styles[position] : ''}
     />
   );
 };
@@ -74,17 +85,19 @@ const Button = ({
   size = 'medium',
   disabled,
   icon,
+  customIcon,
   onClick,
   iconPlacedRight = false,
   href,
   target = '_self',
-  classProp = '',
+  className = '',
   LinkComponent,
 }: ButtonPropsT) => {
   const content = (
     <>
-      {!iconPlacedRight && icon && (
+      {!iconPlacedRight && (
         <ButtonIcon
+          customIcon={customIcon}
           icon={icon}
           hasText={Boolean(text?.length)}
           position="left"
@@ -94,8 +107,9 @@ const Button = ({
       {/* Button Text  */}
       {text}
 
-      {iconPlacedRight && icon && (
+      {iconPlacedRight && (
         <ButtonIcon
+          customIcon={customIcon}
           icon={icon}
           hasText={Boolean(text?.length)}
           position="right"
@@ -107,19 +121,19 @@ const Button = ({
   /**
    * Configure CSS Class
    */
-  const className = `
+  const buttonStyle = `
     ${styles['button_' + category]} 
     ${styles[size]} 
     ${!text && styles[size + '_round']} 
-    ${classProp} 
+    ${className} 
     ${active && styles['button_' + category + '_active']}
   `;
 
   if (href && LinkComponent) {
     // To support NextJs Link
     return (
       <LinkComponent
-        className={className}
+        className={buttonStyle}
         href={href}
         onClick={onClick}
         target={target}
@@ -133,7 +147,7 @@ const Button = ({
     // Fall back to a standard <a> tag if LinkComponent is not provided
     return (
       <a
-        className={className}
+        className={buttonStyle}
         id={id}
         target={target}
         href={href}
@@ -146,7 +160,7 @@ const Button = ({
   // Button logic remains unchanged
   return (
     <button
-      className={className}
+      className={buttonStyle}
       id={id}
       aria-label={label ? label : text}
       type={type}

diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
@@ -7,10 +7,7 @@
   align-items: center;
   position: relative;
   cursor: pointer;
-  &,
-  & * {
-    box-sizing: border-box;
-  }
+  box-sizing: content-box;
 
   /* Hide the browser's default checkbox */
   input {
@@ -42,8 +39,9 @@
 }
 
 .label {
-  @include font-size(16);
-  @include primary-font();
+  font-family: var(--font-primary);
+  font-size: var(--checkbox-label-font-size);
+  font-weight: var(--checkbox-label-font-weight);
   color: $color-text-main;
   padding-left: 16px;
 }
@@ -69,8 +67,8 @@
     content: '';
     position: absolute;
     display: none;
-    left: 6px;
-    top: 1px;
+    left: 7px;
+    top: 2px;
     width: 5px;
     height: 11px;
     border: solid $color-text-reverse;

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -11,19 +11,19 @@ type CheckboxPropsT = {
   label?: string | ReactNode;
   checked?: boolean;
   disabled?: boolean;
-  classProp?: string;
-  labelClassProp?: string;
+  className?: string;
+  labelclassName?: string;
   onChange: (value: boolean) => void;
 };
 
 const Checkbox = forwardRef(
   (
     {
-      classProp = '',
+      className = '',
       label,
       disabled,
       checked,
-      labelClassProp = '',
+      labelclassName = '',
       onChange,
     }: CheckboxPropsT,
     ref
@@ -42,7 +42,7 @@ const Checkbox = forwardRef(
     };
 
     return (
-      <label className={`${classProp} ${styles.container}`}>
+      <label className={`${className} ${styles.container}`}>
         <input
           onChange={handleOnChange}
           type="checkbox"
@@ -59,7 +59,7 @@ const Checkbox = forwardRef(
         />
 
         {label ? (
-          <div className={`${styles.label} ${labelClassProp}`}>{label}</div>
+          <div className={`${styles.label} ${labelclassName}`}>{label}</div>
         ) : null}
       </label>
     );

diff --git a/src/components/CopyButton/CopyButton.module.scss b/src/components/CopyButton/CopyButton.module.scss
@@ -1,9 +1,10 @@
 @use '../../styles/core/boilerplate.scss'as *;
 
 .success {
-  @include primary-font(500);
-  @include font-size(16);
+  font-family: var(--font-primary);
+  font-size: var(--copy-button-font-size);
+  font-weight: var(--copy-button-font-weight);
   line-height: 24px;
-  color: $color-text-subtle;
+  color: var(--copy-button-text-color);
   padding: 8px;
 }
diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx
@@ -6,14 +6,14 @@ export type CopyButtonPropsT = {
   onClick?: Function;
   successMessage?: string;
   value: string | number;
-  classProp?: string;
+  className?: string;
 };
 
 const CopyButton = ({
   onClick,
   successMessage = 'Copied!',
   value,
-  classProp = '',
+  className = '',
 }: CopyButtonPropsT) => {
   const [success, setSuccess] = useState<boolean>(false);
 
@@ -40,7 +40,7 @@ const CopyButton = ({
       ) : (
         <Button
           label="copy"
-          classProp={classProp}
+          className={className}
           onClick={handleClick}
           icon="copy"
           size="small"

diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
@@ -6,10 +6,11 @@
 }
 
 .content_wrapper {
-  border-radius: 4px;
+  border-radius: var(--dropdown-border-radius);
   z-index: 1;
-  background-color: $color-background-neutral-0;
-  box-shadow: $drop-shadow;
+  background-color: var(--color-background-neutral-0);
+  box-shadow: var(--drop-shadow);
+  margin-top: var(--dropdown-margin-top);
 }
 
 .left {