fix(lint): fix linting errors in all components

.prettierignore

@@ -1,4 +1,5 @@
 # Add files here to ignore them from prettier formatting
 /dist
 /coverage
-/.nx/cache
+/.nx/cache
+/docs

libs/react-components/.storybook/manager.js

@@ -5,4 +5,4 @@ import './theme.css';
 
 addons.setConfig({
   theme: tdTheme,
-});
+});

libs/react-components/.storybook/preview-head.html

@@ -1,2 +1,5 @@
 <!-- Loads font awesome icons -->
-<script src="https://kit.fontawesome.com/17a35e44e3.js" crossorigin="anonymous"></script>
+<script
+  src="https://kit.fontawesome.com/17a35e44e3.js"
+  crossorigin="anonymous"
+></script>

libs/react-components/.storybook/preview.ts

@@ -17,7 +17,7 @@ const preview: Preview = {
     },
   },
 
-  tags: ['autodocs']
+  tags: ['autodocs'],
 };
 
 export default preview;

libs/react-components/.storybook/theme.css

@@ -1,25 +1,25 @@
 /* Storybook theme overrides */
 .sidebar-header {
-    max-width: 213px;
-  }
-  #root > div > div[role='main'] > div {
-    box-shadow: none;
-  }
+  max-width: 213px;
+}
+#root > div > div[role='main'] > div {
+  box-shadow: none;
+}
 
-  #root > div > div[role='main'] > div {
-    border: 1px solid rgba(0, 0, 0, 0.12);
-  }
+#root > div > div[role='main'] > div {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
 
-  #storybook-explorer-tree .sidebar-item[data-selected='true'],
-  #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
-    color: var(--cv-light-on-primary);
-  }
+#storybook-explorer-tree .sidebar-item[data-selected='true'],
+#storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+  color: var(--cv-light-on-primary);
+}
 
-  #storybook-explorer-tree .sidebar-item[data-selected='true'],
-  #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
-    color: var(--cv-light-on-primary);
-  }
+#storybook-explorer-tree .sidebar-item[data-selected='true'],
+#storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+  color: var(--cv-light-on-primary);
+}
 
-  #storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
-    color: var(--cv-light-secondary);
-  }
+#storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
+  color: var(--cv-light-secondary);
+}

libs/react-components/.storybook/theme.js

@@ -38,4 +38,4 @@ export default create({
   brandTitle: 'Teradata Design System',
   // brandUrl: 'https://teradata.lol',
   brandImage,
-});
+});

libs/react-components/src/lib/components/Alert/Alert.stories.tsx

@@ -28,8 +28,8 @@ export const ActionElements: Story = {
   render: (args) => {
     return (
       <Alert {...args}>
-          <IconButton slot="action-items" icon="close" />
+        <IconButton slot="action-items" icon="close" />
       </Alert>
     );
   },
-};
+};

libs/react-components/src/lib/components/Alert/index.tsx

@@ -4,22 +4,22 @@ import React from 'react';
 import '@covalent/components/icon';
 
 interface AlertProps {
-    /** 
-     * Icon of the alert 
-     */
-    icon: string;
-    /**
-     * Title of the alert
-     */
-    titleText: string;
-    /**
-     * Description of the alert
-     */
-    descriptionText: string;
-    /** 
-     * State of the button
-     */
-    state: string;
+  /**
+   * Icon of the alert
+   */
+  icon: string;
+  /**
+   * Title of the alert
+   */
+  titleText: string;
+  /**
+   * Description of the alert
+   */
+  descriptionText: string;
+  /**
+   * State of the button
+   */
+  state: string;
 }
 const AlertComponent = createComponent({
   tagName: 'cv-alert',
@@ -28,10 +28,8 @@ const AlertComponent = createComponent({
 });
 
 const Alert: React.FC<AlertProps> = (props) => {
-  return (
-      <AlertComponent {...props}></AlertComponent>
-  );
+  return <AlertComponent {...props}></AlertComponent>;
 };
 
 Alert.displayName = 'Alert';
-export default Alert;
+export default Alert;

libs/react-components/src/lib/components/Breadcrumb/index.tsx

@@ -9,15 +9,15 @@ interface BreadcrumbProps {
 
 const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
   return (
-      <nav className={styles.breadcrumb}>
-        <ul>
-            {items.map((item, index) => (
-                <li key={index}>
-                    <a href={item.link}>{item.label}</a>
-                </li>
-            ))}
-        </ul>
-      </nav>
+    <nav className={styles.breadcrumb}>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <a href={item.link}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
   );
 };
 

libs/react-components/src/lib/components/Breadcrumb/styles.module.scss

@@ -1,48 +1,45 @@
-
-
 .breadcrumb {
-    font-size: .75rem;
-    line-height: 1rem;
-
-    ul {
-        list-style: none;
-        display: inline;
-        padding: 0;
-        margin: 0;
-        li {
-            display: inline-flex;
-            align-items: center;
+  font-size: 0.75rem;
+  line-height: 1rem;
 
-            a {
-                text-decoration: none;
-                color: inherit;
-                font-family: Inter;
-                font-size: 12px;
-                font-style: normal;
-                font-weight: 400;
-                line-height: 20px; 
-                display: inline-flex;
-                align-items: center;
-                color: #00233c;
-                transition: color 250ms;
+  ul {
+    list-style: none;
+    display: inline;
+    padding: 0;
+    margin: 0;
+    li {
+      display: inline-flex;
+      align-items: center;
 
-                &:after {
-                    content: 'chevron_right';
-                    font-family: 'Material Symbols Outlined';
-                    margin:0 .25rem;
-                    color: var(--td-web-primary-navy);
+      a {
+        text-decoration: none;
+        color: inherit;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        display: inline-flex;
+        align-items: center;
+        color: #00233c;
+        transition: color 250ms;
 
-                }
-                &:hover {
-                    color: var(--cv-theme-tertiary);
-                }
-            }
+        &:after {
+          content: 'chevron_right';
+          font-family: 'Material Symbols Outlined';
+          margin: 0 0.25rem;
+          color: var(--td-web-primary-navy);
+        }
+        &:hover {
+          color: var(--cv-theme-tertiary);
+        }
+      }
 
-            &:last-child a {
-                &:after {
-                    display: none;
-                }
-            }
+      &:last-child a {
+        &:after {
+          display: none;
         }
+      }
     }
-}
+  }
+}

libs/react-components/src/lib/components/DropdownMenu/index.tsx

@@ -21,7 +21,9 @@ export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({
   };
   return (
     <li
-      className={`${styles.dropdownMenuItem} ${navItem.navItems ? styles.nested : ''}`}
+      className={`${styles.dropdownMenuItem} ${
+        navItem.navItems ? styles.nested : ''
+      }`}
     >
       {navItem.navItems ? (
         <div

libs/react-components/src/lib/components/Feedback/Feedback.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
     label: 'Did this page help?',
     labelForFeedback: 'Thank you for your feedback!',
     onFeedBack: action('onFeedBack'),
-  }
+  },
 } satisfies Meta<typeof Feedback>;
 
 export default meta;

libs/react-components/src/lib/components/Feedback/styles.module.scss

@@ -1,12 +1,12 @@
 .feedback {
-    display: flex;
-    min-height: 64px;
-    padding: 0px 16px 0px 24px;
-    align-items: center;
-    border-radius: 12px;
-    background-color: var(--cv-theme-surface-container-highest);
+  display: flex;
+  min-height: 64px;
+  padding: 0px 16px 0px 24px;
+  align-items: center;
+  border-radius: 12px;
+  background-color: var(--cv-theme-surface-container-highest);
 }
 
 .feedbackLabel {
-    flex: 1;
-}
+  flex: 1;
+}

libs/react-components/src/lib/components/IconButtonToggle/index.tsx

@@ -51,7 +51,9 @@ export const IconButtonToggle: React.FC<IconButtonToggleProps> = ({
     'aria-haspopup': ariaHasPopup,
     onClick,
   };
-  return <IconButtonToggleComponent {...customProps}></IconButtonToggleComponent>;
+  return (
+    <IconButtonToggleComponent {...customProps}></IconButtonToggleComponent>
+  );
 };
 
 IconButtonToggle.displayName = 'IconButtonToggle';

libs/react-components/src/lib/components/ListItem/index.tsx

@@ -29,11 +29,25 @@ const ListItem: React.FC<ListItemProps> = ({ label, active, content }) => {
   };
   return (
     <>
-      <div className={`${styles.listItem} ${activeStyles}`} onClick={toggleActive}>
-        { hasContent && <button aria-label={`Expand nav category '${label}'`} aria-expanded="false" type="button" className={styles.caret}></button>}
+      <div
+        className={`${styles.listItem} ${activeStyles}`}
+        onClick={toggleActive}
+      >
+        {hasContent && (
+          <button
+            aria-label={`Expand nav category '${label}'`}
+            aria-expanded="false"
+            type="button"
+            className={styles.caret}
+          ></button>
+        )}
         <span>{label}</span>
       </div>
-      {content && <div className={`${styles.content} ${contentActiveStyles}`}>{content}</div>}
+      {content && (
+        <div className={`${styles.content} ${contentActiveStyles}`}>
+          {content}
+        </div>
+      )}
     </>
   );
 };