fix(styles): fix badge and card styling issues

Teradata · Nov 26, 2024 · af3dc7b · af3dc7b
1 parent 5f4b794
commit af3dc7b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/libs/components/src/badge/badge.scss b/libs/components/src/badge/badge.scss
@@ -21,23 +21,23 @@
   }
 
   &.top-right {
-    top: -2px;
-    right: -2px;
+    top: var(--cv-badge-position-y, -2px);
+    right: var(--cv-badge-position-x, -2px);
   }
 
   &.top-left {
-    top: -2px;
-    left: -2px;
+    top: var(--cv-badge-position-y, -2px);
+    left: var(--cv-badge-position-x, -2px);
   }
 
   &.bottom-right {
-    bottom: -2px;
-    right: -2px;
+    bottom: var(--cv-badge-position-y, -2px);
+    right: var(--cv-badge-position-x, -2px);
   }
 
   &.bottom-left {
-    bottom: -2px;
-    left: -2px;
+    bottom: var(--cv-badge-position-y, -2px);
+    left: var(--cv-badge-position-x, -2px);
   }
 
   &.isolated {

diff --git a/libs/components/src/card/card.scss b/libs/components/src/card/card.scss
@@ -41,4 +41,5 @@
 
 .mdc-card.mdc-card--outlined {
   background-color: var(--mdc-theme-surface);
+  border-color: var(--cv-theme-outline-variant);
 }
diff --git a/scripts/react-wrappers.js b/scripts/react-wrappers.js
@@ -41,11 +41,11 @@ const getEventList = (events) => {
           index === 0 ? word : word[0].toUpperCase() + word.slice(1)
         )
         .join('')}`;
-      return `\t\t${key}: '${event}'`; // Indent each line
+      return `    ${key}: '${event}'`; // Indent each line
     })
     .join(',\n'); // Add newlines between entries
 
-  return `{\n${content},\n\t},`; // Wrap with braces and add newlines
+  return `{\n${content},\n  },`; // Wrap with braces and add newlines
 };
 
 // Function to generate React wrapper for each component
@@ -68,9 +68,9 @@ import { ${componentName} as ${componentName}Web } from '@covalent/components';
 export const ${componentName} = createComponent({
   tagName: '${tagName}',
   elementClass: ${componentName}Web,
-  react: React,${events.length ? `\n\tevents: ${getEventList(events)}` : ''}
+  react: React,${events.length ? `\n  events: ${getEventList(events)}` : ''}
 });
-  `;
+`;
 
   // Test file for the React component
   const specContent = `import { ${componentName} } from './${componentName}';
@@ -79,7 +79,8 @@ describe('${componentName}', () => {
   it('should work', () => {
     expect(${componentName}).toBeTruthy();
   });
-});`;
+});
+`;
 
   fs.writeFileSync(reactFilePath, wrapperContent, 'utf8');