[SM-660] move sm-no-items to CL (#5059)

* refactor: move sm-no-items to CL

* update and run prettier

* apply code review

libs/components/src/index.ts

@@ -16,6 +16,7 @@ export * from "./link";
 export * from "./menu";
 export * from "./multi-select";
 export * from "./navigation";
+export * from "./no-items";
 export * from "./progress";
 export * from "./radio-button";
 export * from "./table";

libs/components/src/no-items/index.ts

@@ -0,0 +1 @@
+export * from "./no-items.module";

libs/components/src/no-items/no-items.component.html

@@ -0,0 +1,16 @@
+<div
+  class="tw-mx-auto tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-6 tw-text-center"
+>
+  <div class="tw-max-w-sm">
+    <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
+    <h3 class="tw-font-semibold">
+      <ng-content select="[slot=title]"></ng-content>
+    </h3>
+    <p>
+      <ng-content select="[slot=description]"></ng-content>
+    </p>
+  </div>
+  <div class="tw-space-x-2">
+    <ng-content select="[slot=button]"></ng-content>
+  </div>
+</div>

libs/components/src/no-items/no-items.component.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+import { Icons } from "..";
+
+/**
+ * Component for displaying a message when there are no items to display. Expects title, description and button slots.
+ */
+@Component({
+  selector: "bit-no-items",
+  templateUrl: "./no-items.component.html",
+})
+export class NoItemsComponent {
+  protected icon = Icons.Search;
+}

libs/components/src/no-items/no-items.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { IconModule } from "../icon";
+
+import { NoItemsComponent } from "./no-items.component";
+
+@NgModule({
+  imports: [CommonModule, IconModule],
+  exports: [NoItemsComponent],
+  declarations: [NoItemsComponent],
+})
+export class NoItemsModule {}

libs/components/src/no-items/no-items.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { ButtonModule } from "../button";
+
+import { NoItemsModule } from "./no-items.module";
+
+export default {
+  title: "Component Library/No Items",
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonModule, NoItemsModule],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args) => ({
+  props: args,
+  template: `
+  <bit-no-items class="tw-text-main">
+    <ng-container slot="title">No items found</ng-container>
+    <ng-container slot="description">Your description here.</ng-container>
+    <button
+        slot="button"
+        type="button"
+        bitButton
+        buttonType="secondary"
+    >
+        <i class="bwi bwi-plus" aria-hidden="true"></i>
+        New item
+    </button>
+  </bit-no-items>
+  `,
+});
+
+export const Default = Template.bind({});