From f1211caea22c61f37023e71b0b36f32c36bb6975 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 28 Feb 2024 09:14:42 +0100
Subject: [PATCH] feat: add NeEmptyState (#29)

---
 src/components/NeEmptyState.vue | 42 +++++++++++++++++++
 src/main.ts                     |  1 +
 stories/NeEmptyState.stories.ts | 74 +++++++++++++++++++++++++++++++++
 3 files changed, 117 insertions(+)
 create mode 100644 src/components/NeEmptyState.vue
 create mode 100644 stories/NeEmptyState.stories.ts

diff --git a/src/components/NeEmptyState.vue b/src/components/NeEmptyState.vue
new file mode 100644
index 0000000..22bbdde
--- /dev/null
+++ b/src/components/NeEmptyState.vue
@@ -0,0 +1,42 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Object,
+    default: undefined
+  }
+})
+</script>
+
+<template>
+  <div class="bg-gray-100 px-6 py-7 text-sm dark:bg-gray-800 sm:rounded-md sm:px-8">
+    <div class="flex flex-col items-center">
+      <FontAwesomeIcon
+        v-if="icon"
+        :icon="icon"
+        class="mb-5 h-14 w-14 text-gray-400 dark:text-gray-500"
+      />
+      <div v-if="title" class="text-base font-medium text-gray-700 dark:text-gray-200">
+        {{ title }}
+      </div>
+      <div v-if="description" class="mt-1 text-gray-600 dark:text-gray-400">{{ description }}</div>
+      <div v-if="$slots.default" class="mt-5">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/main.ts b/src/main.ts
index 37af68d..2187c54 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,6 +28,7 @@ export { default as NeLink } from '@/components/NeLink.vue'
 export { default as NeFormItemLabel } from '@/components/NeFormItemLabel.vue'
 export { default as NeRadioSelection } from '@/components/NeRadioSelection.vue'
 export { default as NePaginator } from '@/components/NePaginator.vue'
+export { default as NeEmptyState } from '@/components/NeEmptyState.vue'
 
 // types export
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'
diff --git a/stories/NeEmptyState.stories.ts b/stories/NeEmptyState.stories.ts
new file mode 100644
index 0000000..16b96dc
--- /dev/null
+++ b/stories/NeEmptyState.stories.ts
@@ -0,0 +1,74 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { NeEmptyState } from '../src/main'
+import { NeButton } from '../src/main'
+import { faUsers } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+library.add(faUsers)
+
+const meta = {
+  title: 'Visual/NeEmptyState',
+  component: NeEmptyState,
+  argTypes: {},
+  args: {
+    title: 'No user',
+    description: 'There is no user configured on the system',
+    icon: undefined
+  } // default values
+} satisfies Meta<typeof NeEmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const template = '<NeEmptyState v-bind="args" />'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeEmptyState },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {}
+}
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    components: { NeEmptyState },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: { icon: faUsers }
+}
+
+const templateWithSlot = `<NeEmptyState v-bind="args">
+                            <NeButton kind="primary">Create user</NeButton>
+                          </NeEmptyState>`
+
+export const WithSlot: Story = {
+  render: (args) => ({
+    components: { NeEmptyState, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithSlot
+  }),
+  args: {}
+}
+
+export const WithSlotAndIcon: Story = {
+  render: (args) => ({
+    components: { NeEmptyState, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithSlot
+  }),
+  args: { icon: faUsers }
+}