5396: Add links to list-empty

Author: yepzdk

src/stories/Library/Lists/list-empty/ListEmpty.stories.tsx

@@ -11,6 +11,19 @@ export default {
       defaultValue: "Du har i øjeblikket 0 Reserveringer",
       control: "text",
     },
+    links: {
+      control: "object",
+      defaultValue: [
+        {
+          linkText: "link tekst 1",
+          href: "https://example.com/",
+        },
+        {
+          linkText: "link tekst 2",
+          href: "https://example.com/",
+        },
+      ],
+    },
   },
   parameters: {
     design: {

src/stories/Library/Lists/list-empty/ListEmpty.tsx

@@ -1,9 +1,29 @@
+import { Links, LinksProps } from "../../links/Links";
+
 interface ListEmptyProps {
   text: string;
+  links?: LinksProps[];
 }
 
-const ListEmpty = ({ text }: ListEmptyProps) => {
-  return <div className="dpl-list-empty">{text}</div>;
+const ListEmpty = ({ text, links }: ListEmptyProps) => {
+  return (
+    <div className="dpl-list-empty">
+      <div className="dpl-list-empty__text">{text}</div>
+      {links && (
+        <div className="dpl-list-empty__links">
+          {links.map((item, index) => (
+            <div key={index} className="dpl-list-empty__link-item">
+              <Links
+                linkText={item.linkText}
+                href={item.href}
+                classNames={item.classNames}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default ListEmpty;

src/stories/Library/Lists/list-empty/list-empty.scss

@@ -3,6 +3,7 @@
   width: 100%;
   background-color: transparent;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   border: 1px dotted $c-text-secondary-gray;
@@ -11,4 +12,14 @@
   @extend .pt-48;
   @extend .pb-48;
   @extend .text-body-large;
+
+  &__text {
+    @extend .pb-48;
+  }
+
+  &__links {
+    display: flex;
+    flex-direction: row;
+    column-gap: $s-lg;
+  }
 }