Merge pull request #27 from Teradata/fix/add-button-style

fix(button): add a style for text
Teradata · Aug 27, 2024 · e77f4eb · e77f4eb
2 parents a14ad18 + 05d3acb
commit e77f4eb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/libs/react-components/src/lib/components/Button/Button.stories.tsx b/libs/react-components/src/lib/components/Button/Button.stories.tsx
@@ -17,6 +17,7 @@ const meta = {
     primary: true,
     icon: 'fa fa-arrow-right',
     trailingIcon: false,
+    variant:'',
     slot: '',
   },
 } satisfies Meta<typeof Button>;

diff --git a/libs/react-components/src/lib/components/Button/index.tsx b/libs/react-components/src/lib/components/Button/index.tsx
@@ -26,6 +26,10 @@ interface ButtonProps {
    * Click handler for the button
    */
   onClick?: () => void;
+  /**
+   * The variant of the button, e.g., 'text'
+   */
+  variant: string;
   /**
    * The slot it should be added in when used inside a litjs component
    */
@@ -36,6 +40,7 @@ const Button: React.FC<ButtonProps> = ({
   icon,
   label,
   primary,
+  variant,
   size,
   trailingIcon,
   onClick,
@@ -44,8 +49,8 @@ const Button: React.FC<ButtonProps> = ({
     <button
       type="button"
       className={`${styles.tdButton} ${
-        primary ? styles.tdButtonPrimary : styles.tdButtonSecondary
-      } ${size ? `tdButton${size}` : ''} ${
+        variant === 'text' ? styles.tdButtonText : primary ? styles.tdButtonPrimary : styles.tdButtonSecondary
+      } ${size ? styles[`tdButton${size}`] : ''} ${
         trailingIcon ? styles.trailingIcon : ''
       }`}
       onClick={onClick}

diff --git a/libs/react-components/src/lib/components/Button/styles.module.css b/libs/react-components/src/lib/components/Button/styles.module.css
@@ -43,3 +43,16 @@
     border-color: var(--td-web-primary-navy);
   }
 }
+
+.tdButtonText{
+  background: transparent;
+  color: var(--td-web-primary-navy);
+  border: none;
+  &:hover {
+    background: var(--cv-theme-secondary-4); 
+  }
+}
+
+.tdButtonsmall {
+  padding: 9px 16px;
+}