Merge pull request #73 from SySagar/dev

fix[button,typography]: stlyes and variants

.changeset/grumpy-coats-give.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+button tialwind clashes and typography variants

apps/ui/lib/components/Button/index.tsx

@@ -44,7 +44,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : 'button';
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size }), className)}
         ref={ref}
         {...props}
       />

apps/ui/lib/components/Typography/Text.tsx

@@ -6,8 +6,6 @@ import { cn } from '@utils/utils';
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
   variant?: keyof typeof VARIANT_MAPPINGS;
   alignment?: 'left' | 'right' | 'center' | 'justify';
-  color?: string;
-  width?: number;
   maxLines?: number;
   asChild?: boolean;
   children: React.ReactNode;
@@ -16,22 +14,18 @@ export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
 export const Text: React.FC<TextProps> = ({
   variant,
   alignment,
-  color,
-  width,
   maxLines,
   asChild = false,
   children,
   ...props
 }) => {
   const textStyle = {
     textAlign: alignment || 'center',
-    color: color,
     margin: '0 0 0 0',
     padding: '0 0 0 0',
     display: asChild ? 'inline-block' : 'block',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    width: width || 'inherit',
     WebkitLineClamp: maxLines || 'inherit',
   };
 

apps/ui/lib/tailwind.css

@@ -39,7 +39,7 @@
     --text-secondary: 30, 30, 30;
 
     --accent: 0, 0, 0;
-    --background-paper: white;
+    --background-paper: 255 255 255;
     --background-opacity: 0, 0, 0, 0.05;
   }
 

apps/ui/stories/Button.stories.tsx

@@ -41,6 +41,14 @@ export const tailwindButton = () => {
   return <Button className="bg-warning-500 text-secondaryText">Hello</Button>;
 };
 
+export const tailwindButtonWithOverridingVariant = () => {
+  return (
+    <Button variant={'outline'} className="grv-bg-[#ff0f] grv-outline-[#1fa]">
+      Hello
+    </Button>
+  );
+};
+
 export const Sizes = () => (
   <div
     style={{

apps/ui/stories/Toast.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import { withGlobalStyles } from '../.storybook/decorator';
 import { useToast, Button, Toaster, ToastAction } from '../lib';
 
-const DefaultTemplate = () => {
+export const Default = () => {
   const { toast } = useToast();
   return (
     <div
@@ -31,15 +31,11 @@ const DefaultTemplate = () => {
 
 export default {
   title: 'components/Toast',
-  component: DefaultTemplate,
+  component: Default,
   decorators: [withGlobalStyles],
 } as Meta;
 
-export const Default = () => {
-  return <DefaultTemplate />;
-};
-
-const DestructiveTemplate = () => {
+export const Destructive = () => {
   const { toast } = useToast();
   return (
     <div
@@ -66,11 +62,7 @@ const DestructiveTemplate = () => {
   );
 };
 
-export const Destructive = () => {
-  return <DestructiveTemplate />;
-};
-
-const DestructiveTemplateWithActionButton = () => {
+export const DestructiveWithActionButton = () => {
   const { toast } = useToast();
   return (
     <div
@@ -97,7 +89,3 @@ const DestructiveTemplateWithActionButton = () => {
     </div>
   );
 };
-
-export const DestructiveWithActionButton = () => {
-  return <DestructiveTemplateWithActionButton />;
-};

apps/ui/stories/Typography.stories.tsx

@@ -221,6 +221,19 @@ export const withTailwindAndVariant = () => {
   );
 };
 
+export const withTailwindAndVariant2 = () => {
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <Text
+        variant="heading-1"
+        className="grv-text-[#a0c] grv-text-[10px] grv-font-light"
+      >
+        with tailwind classes and variant
+      </Text>
+    </div>
+  );
+};
+
 // Alignment Center
 export const AlignmentCenterStory = Template.bind({});
 AlignmentCenterStory.args = {