Add Text component

Bassma-Algeria · Sep 2, 2023 · 4dc1772 · 4dc1772
1 parent 4f80161
commit 4dc1772
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 20 deletions.
diff --git a/TODO.md b/TODO.md
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -18,7 +18,7 @@ type Variant =
     | 'overline-large'
     | 'overline-small';
 
-type BreackPoints = '';
+type BreackPoints = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 interface Props {
     variant: Variant;
@@ -36,6 +36,7 @@ const Text: React.FC<Props> = ({
     variant,
     decoration,
     transform,
+    breackPoints,
     weight = 'regular',
     responsive = true,
     children,
@@ -54,19 +55,102 @@ const Text: React.FC<Props> = ({
         lowercase: transform === 'lowercase',
 
         'text-p-xsmall': variant === 'p-xsmall',
+        'sm:text-p-xsmall': breackPoints?.sm === 'p-xsmall',
+        'md:text-p-xsmall': breackPoints?.md === 'p-xsmall',
+        'lg:text-p-xsmall': breackPoints?.lg === 'p-xsmall',
+        'xl:text-p-xsmall': breackPoints?.xl === 'p-xsmall',
+        '2xl:text-p-xsmall': breackPoints?.['2xl'] === 'p-xsmall',
+
         'text-p-small': variant === 'p-small',
+        'sm:text-p-small': breackPoints?.sm === 'p-small',
+        'md:text-p-small': breackPoints?.md === 'p-small',
+        'lg:text-p-small': breackPoints?.lg === 'p-small',
+        'xl:text-p-small': breackPoints?.xl === 'p-small',
+        '2xl:text-p-small': breackPoints?.['2xl'] === 'p-small',
+
         'text-p-regular': variant === 'p-regular',
+        'sm:text-p-regular': breackPoints?.sm === 'p-regular',
+        'md:text-p-regular': breackPoints?.md === 'p-regular',
+        'lg:text-p-regular': breackPoints?.lg === 'p-regular',
+        'xl:text-p-regular': breackPoints?.xl === 'p-regular',
+        '2xl:text-p-regular': breackPoints?.['2xl'] === 'p-regular',
+
         'text-p-large': variant === 'p-large',
+        'sm:text-p-large': breackPoints?.sm === 'p-large',
+        'md:text-p-large': breackPoints?.md === 'p-large',
+        'lg:text-p-large': breackPoints?.lg === 'p-large',
+        'xl:text-p-large': breackPoints?.xl === 'p-large',
+        '2xl:text-p-large': breackPoints?.['2xl'] === 'p-large',
+
         'text-h1': variant === 'h1',
+        'sm:text-h1': breackPoints?.sm === 'h1',
+        'md:text-h1': breackPoints?.md === 'h1',
+        'lg:text-h1': breackPoints?.lg === 'h1',
+        'xl:text-h1': breackPoints?.xl === 'h1',
+        '2xl:text-h1': breackPoints?.['2xl'] === 'h1',
+
         'text-h2': variant === 'h2',
+        'sm:text-h2': breackPoints?.sm === 'h2',
+        'md:text-h2': breackPoints?.md === 'h2',
+        'lg:text-h2': breackPoints?.lg === 'h2',
+        'xl:text-h2': breackPoints?.xl === 'h2',
+        '2xl:text-h2': breackPoints?.['2xl'] === 'h2',
+
         'text-h3': variant === 'h3',
+        'sm:text-h3': breackPoints?.sm === 'h3',
+        'md:text-h3': breackPoints?.md === 'h3',
+        'lg:text-h3': breackPoints?.lg === 'h3',
+        'xl:text-h3': breackPoints?.xl === 'h3',
+        '2xl:text-h3': breackPoints?.['2xl'] === 'h3',
+
         'text-h4': variant === 'h4',
+        'sm:text-h4': breackPoints?.sm === 'h4',
+        'md:text-h4': breackPoints?.md === 'h4',
+        'lg:text-h4': breackPoints?.lg === 'h4',
+        'xl:text-h4': breackPoints?.xl === 'h4',
+        '2xl:text-h4': breackPoints?.['2xl'] === 'h4',
+
         'text-h5': variant === 'h5',
+        'sm:text-h5': breackPoints?.sm === 'h5',
+        'md:text-h5': breackPoints?.md === 'h5',
+        'lg:text-h5': breackPoints?.lg === 'h5',
+        'xl:text-h5': breackPoints?.xl === 'h5',
+        '2xl:text-h5': breackPoints?.['2xl'] === 'h5',
+
         'text-h6': variant === 'h6',
+        'sm:text-h6': breackPoints?.sm === 'h6',
+        'md:text-h6': breackPoints?.md === 'h6',
+        'lg:text-h6': breackPoints?.lg === 'h6',
+        'xl:text-h6': breackPoints?.xl === 'h6',
+        '2xl:text-h6': breackPoints?.['2xl'] === 'h6',
+
         'text-display-large': variant === 'display-large',
+        'sm:text-display-large': breackPoints?.sm === 'display-large',
+        'md:text-display-large': breackPoints?.md === 'display-large',
+        'lg:text-display-large': breackPoints?.lg === 'display-large',
+        'xl:text-display-large': breackPoints?.xl === 'display-large',
+        '2xl:text-display-large': breackPoints?.['2xl'] === 'display-large',
+
         'text-display-small': variant === 'display-small',
+        'sm:text-display-small': breackPoints?.sm === 'display-small',
+        'md:text-display-small': breackPoints?.md === 'display-small',
+        'lg:text-display-small': breackPoints?.lg === 'display-small',
+        'xl:text-display-small': breackPoints?.xl === 'display-small',
+        '2xl:text-display-small': breackPoints?.['2xl'] === 'display-small',
+
         'text-overline-large': variant === 'overline-large',
+        'sm:text-overline-large': breackPoints?.sm === 'overline-large',
+        'md:text-overline-large': breackPoints?.md === 'overline-large',
+        'lg:text-overline-large': breackPoints?.lg === 'overline-large',
+        'xl:text-overline-large': breackPoints?.xl === 'overline-large',
+        '2xl:text-overline-large': breackPoints?.['2xl'] === 'overline-large',
+
         'text-overline-small': variant === 'overline-small',
+        'sm:text-overline-small': breackPoints?.sm === 'overline-small',
+        'md:text-overline-small': breackPoints?.md === 'overline-small',
+        'lg:text-overline-small': breackPoints?.lg === 'overline-small',
+        'xl:text-overline-small': breackPoints?.xl === 'overline-small',
+        '2xl:text-overline-small': breackPoints?.['2xl'] === 'overline-small',
     });
 
     if (variant === 'h1') return <h1 className={cl(className)}>{children}</h1>;

diff --git a/src/containers/Dashboard/Statistics/components/Greeting.tsx b/src/containers/Dashboard/Statistics/components/Greeting.tsx
@@ -8,7 +8,7 @@ interface Props {}
 const Greeting: React.FC<Props> = () => {
     return (
         <div className="p-3">
-            <Text variant="h4" weight="semi-bold">
+            <Text variant="h4" breackPoints={{ md: 'h3' }} weight="semi-bold">
                 Hi Yasser !!
             </Text>
         </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,4 @@
-/** @type {import('tailwindcss').Config} */
+// /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
     theme: {