Improve Card styling, fix regression with DraggableList

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.165",
+  "version": "1.0.166",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Card/Card.stories.tsx

@@ -9,7 +9,9 @@ const CardStories: Meta<ICard> = {
   title: "Components/Card",
   decorators: [withRouter],
   component: Card,
-  argTypes: {}
+  parameters: {
+    layout: "centered"
+  }
 };
 
 export const Default = () => {

src/Components/Card/Card.test.tsx

@@ -109,7 +109,10 @@ describe("Card component", () => {
         <Card {...mockProps} />
       </BrowserRouter>
     );
-    const cardElement = screen.getByText(mockProps.data.title).closest("div");
+    const cardElement = screen
+      .getByText(mockProps.data.title)
+      .closest("div")?.parentElement;
+
     expect(cardElement).toHaveClass("custom-class");
   });
 });

src/Components/Card/index.tsx

@@ -11,42 +11,49 @@ const Card: FC<ICard> = ({ data, className, NavLink }) => {
   const { title, description, author, date, tags, titleUrl, authorUrl } = data;
 
   return (
-    <div className={classNames("group yl-mb-4", className)}>
-      <div className='yl-flex yl-items-center yl-text-primary-text-color'>
-        <div className='yl-flex yl-flex-1 yl-justify-between yl-gap-2 md:yl-my-1'>
-          <div className='yl-flex yl-flex-col md:yl-flex-row md:yl-items-center md:yl-gap-2'>
-            {author && (
-              <>
-                {authorUrl ? (
-                  <NavLink to={authorUrl}>
+    <div
+      className={classNames(
+        "group yl-bg-primary-text-color/5 yl-p-4 yl-rounded-md yl-border yl-border-primary-text-color/20 yl-flex yl-flex-col yl-justify-between",
+        className
+      )}
+    >
+      <div>
+        <div className='yl-flex yl-items-center yl-text-primary-text-color'>
+          <div className='yl-flex yl-flex-1 yl-justify-between yl-gap-2 md:yl-my-1'>
+            <div className='yl-flex yl-flex-col md:yl-flex-row md:yl-items-center md:yl-gap-2'>
+              {author && (
+                <>
+                  {authorUrl ? (
+                    <NavLink to={authorUrl}>
+                      <span className='yl-flex yl-items-center yl-gap-2 yl-text-primary hover:yl-text-primary'>
+                        {author}
+                      </span>
+                    </NavLink>
+                  ) : (
                     <span className='yl-flex yl-items-center yl-gap-2 yl-text-primary hover:yl-text-primary'>
                       {author}
                     </span>
-                  </NavLink>
-                ) : (
-                  <span className='yl-flex yl-items-center yl-gap-2 yl-text-primary hover:yl-text-primary'>
-                    {author}
-                  </span>
-                )}
-              </>
-            )}
-            {date && <time dateTime={date}>{date}</time>}
+                  )}
+                </>
+              )}
+              {date && <time dateTime={date}>{date}</time>}
+            </div>
           </div>
         </div>
-      </div>
+        {URLUtils.isExternalLink(titleUrl) ? (
+          <Anchor href={titleUrl} target='_blank'>
+            <H3 className='yl-flex yl-items-center yl-justify-start yl-gap-2'>
+              {title}
+            </H3>
+          </Anchor>
+        ) : (
+          <NavLink to={titleUrl}>
+            <H3>{title}</H3>
+          </NavLink>
+        )}
 
-      {URLUtils.isExternalLink(titleUrl) ? (
-        <Anchor href={titleUrl} target='_blank'>
-          <H3 className='yl-flex yl-items-center yl-justify-start yl-gap-2'>
-            {title}
-          </H3>
-        </Anchor>
-      ) : (
-        <NavLink to={titleUrl}>
-          <H3>{title}</H3>
-        </NavLink>
-      )}
-      <Paragraph>{description}</Paragraph>
+        <Paragraph className='yl-py-4'>{description}</Paragraph>
+      </div>
       {tags && tags.length > 0 && (
         <div className='yl-mt-2 yl-flex yl-items-center yl-gap-2'>
           {tags.map((tag, index) => (

src/Components/Cards/Cards.stories.tsx

@@ -8,6 +8,9 @@ import { ICardsProps } from "./types";
 const CardsStories: Meta<ICardsProps> = {
   title: "Components/Cards",
   decorators: [withRouter],
+  parameters: {
+    layout: "centered"
+  },
   component: Cards,
   argTypes: {}
 } satisfies Meta<typeof Cards>;
@@ -205,8 +208,8 @@ export const Default = () => {
   }));
 
   return (
-    <div className='yl-mt-8'>
-      <Cards cards={cards} columns={2} NavLink={NavLink} />
+    <div className='yl-max-w-5xl'>
+      <Cards cards={cards} columns={2} NavLink={NavLink} className='yl-gap-4' />
     </div>
   );
 };

src/Components/DraggableList/index.tsx

@@ -62,7 +62,7 @@ const DraggableList: FC<IDraggableList> = ({
 
   useEffect(() => {
     setListItems(items);
-  }, [items.length]);
+  }, [items]);
 
   return (
     <ul