test: Demo ability to style and overwrite

novuhq · May 30, 2024 · 1a29879 · 1a29879
1 parent 118d083
commit 1a29879
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/apps/web/src/pages/settings/SettingsPage.tsx b/apps/web/src/pages/settings/SettingsPage.tsx
@@ -10,6 +10,8 @@ import { ROUTES } from '../../constants/routes.enum';
 import { useAuth } from '@novu/shared-web';
 import { When, colors, useTabsStyles } from '@novu/design-system';
 import { useFeatureFlag } from '../../hooks';
+import { Test } from '@novu/novui';
+import { css } from '@novu/novui/css';
 
 const SettingsPageWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -54,6 +56,11 @@ export function SettingsPage() {
 
   return (
     <SettingsPageWrapper>
+      <Test
+        onClick={() => alert('GZH')}
+        className={css({ fontWeight: 'strong', color: 'typography.text.feedback.info', borderRadius: '150' })}
+      />
+
       <Tabs
         orientation="horizontal"
         keepMounted={true}

diff --git a/libs/novui/src/components/Test.tsx b/libs/novui/src/components/Test.tsx
@@ -1,16 +1,18 @@
 import { FC, MouseEventHandler } from 'react';
 import { Button as ExternalButton } from '@mantine/core';
 import { css } from '../../styled-system/css';
+import { CoreProps } from '../types';
 
-interface ITestProps {
+interface ITestProps extends CoreProps {
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
-export const Test: FC<ITestProps> = ({ onClick }) => {
+export const Test: FC<ITestProps> = ({ onClick, className }) => {
   return (
     <ExternalButton
       onClick={onClick}
       leftSection={'hello'}
+      className={className}
       classNames={{
         root: css({
           color: 'typography.text.feedback.alert',