Add sdg button cards

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/design-system-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",

package.json

@@ -1,33 +1,42 @@
-import {
-  Button,
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@/index';
+import { H3, P, A } from 'storybook/internal/components';
+
 import './index.css';
 
 function App() {
   return (
-    <Drawer>
-      <DrawerTrigger>Open</DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
-          <DrawerDescription>This action cannot be undone.</DrawerDescription>
-        </DrawerHeader>
-        <DrawerFooter>
-          <Button>Submit</Button>
-          <DrawerClose>
-            <Button variant='outline'>Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+    <div
+      style={{
+        height: '90vh',
+        maxWidth: '712px',
+        margin: '0 auto',
+        padding: '2rem',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <img width='56' alt='undp-logo' src='/undp-logo-blue.svg' />
+      <H3 style={{ textAlign: 'center', paddingTop: '24px' }}>UNDP Design System for React</H3>
+      <P style={{ textAlign: 'center' }}>
+        This design system for react, developed by the United Nations Development Programme, offers
+        various UI components. You can access the documentation{' '}
+        <A href='https://react.design.undp.org/' target='_blank' rel='noreferrer'>
+          here
+        </A>
+        .
+      </P>
+      <P
+        style={{
+          textAlign: 'center',
+        }}
+      >
+        For any feedback or inquiries, please feel free to reach out to us at{' '}
+        <A href='mailto:[email protected]' target='_blank' rel='noreferrer'>
+          [email protected]
+        </A>
+      </P>
+    </div>
   );
 }
 

src/App.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  index: string | number;
+  text: string;
+  backgroundColor: string;
+  textColor?: string;
+  indexClassName?: string;
+  textClassName?: string;
+}
+
+const SDGCardButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      indexClassName,
+      backgroundColor,
+      textClassName,
+      textColor,
+      index,
+      text,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = 'button';
+    return (
+      <Comp
+        {...props}
+        ref={ref}
+        style={{
+          ...style,
+          backgroundColor: backgroundColor || 'var(--blue-600)',
+          cursor:
+            'url(https://www.undp.org/libraries/undp--design-system-assets/images/arrow-right-white.svg), auto',
+        }}
+        className={cn('min-h-[160px] w-full flex items-center', className)}
+      >
+        <strong
+          className={cn('text-[6.875rem] pl-[6.313rem] font-heading', indexClassName)}
+          style={{ color: textColor || '#fff' }}
+        >
+          {index}
+        </strong>
+        <h4
+          className={cn(
+            'm-0 font-heading p-0 text-[1.875rem] left-[18rem] tracking-[.094rem] absolute uppercase',
+            textClassName,
+          )}
+          style={{ color: textColor || '#fff' }}
+        >
+          {text}
+        </h4>
+      </Comp>
+    );
+  },
+);
+
+SDGCardButton.displayName = 'SDGCardButton';
+
+export { SDGCardButton };

src/components/ui/sdgCardButton.tsx

@@ -129,4 +129,6 @@ export {
   DrawerTrigger,
 } from '@/components/ui/drawer';
 
+export { SDGCardButton } from '@/components/ui/sdgCardButton';
+
 export { cn } from '@/lib/utils';

src/index.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SDGCardButton } from '@/index';
+
+type PagePropsAndCustomArgs = React.ComponentProps<typeof SDGCardButton>;
+
+const meta: Meta<PagePropsAndCustomArgs> = {
+  title: 'Components/SDGCardButton',
+  component: SDGCardButton,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: { type: 'text' },
+      type: 'string',
+      defaultValue: { summary: 'var(--blue-600)' },
+    },
+    textColor: {
+      control: { type: 'text' },
+      type: 'string',
+      defaultValue: { summary: '#fff' },
+    },
+    index: {
+      control: { type: 'text' },
+    },
+    text: {
+      control: { type: 'text' },
+      type: 'string',
+    },
+    indexClassName: { control: { type: 'text' } },
+    textClassName: { control: { type: 'text' } },
+  },
+  render: ({ ...args }, { globals: { theme, direction, language } }) => {
+    return (
+      <div
+        dir={direction}
+        className={`p-4 ${theme} ${language} ${
+          theme === 'dark' ? 'bg-primary-gray-700' : 'bg-primary-white'
+        }`}
+      >
+        <SDGCardButton
+          {...args}
+          onClick={d => {
+            // eslint-disable-next-line no-console
+            console.log(d);
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SDGCardButton>;
+
+export const Default: Story = {};