Merge pull request #9 from fortanix/feature/placeholderEmpty

Implement PlaceholderEmpty component

src/assets/icons/_icons.ts

@@ -24,7 +24,11 @@ export const icons = {
   'edit': {},
   'email': {},
   'eye': {},
+  'file': {},
+  'file-error': {},
   'fortanix-ki': {},
+  'folder': {},
+  'graph': {},
   'groups': {},
   'hide': {},
   'home': {},

src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.module.scss

@@ -0,0 +1,76 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not
+|* distributed with this file, you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-placeholder-empty {
+    @include bk.component-base(bk-placeholder-empty);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    &.bk-placeholder-empty--large {
+      gap: bk.$spacing-6;
+
+      .bk-placeholder-empty__icon {
+        --bk-icon-size: 6rem;
+        max-height: 5rem;
+      }
+
+      .bk-placeholder-empty__content {
+        gap: bk.$spacing-4;
+      }
+
+      .bk-placeholder-empty__content__title {
+        font-size: 20px;
+        line-height: 20px;
+      }
+    }
+
+    &.bk-placeholder-empty--small {
+      gap: bk.$spacing-4;
+
+      .bk-placeholder-empty__icon {
+        --bk-icon-size: 4rem;
+        max-height: 3rem;
+      }
+
+      .bk-placeholder-empty__content {
+        gap: bk.$spacing-2;
+      }
+
+      .bk-placeholder-empty__content__title {
+        font-size: 14px;
+        line-height: 14px;
+      }
+    }
+
+    .bk-placeholder-empty__icon {
+      color: bk.$theme-empty-state-stoke-default;
+    }
+
+    .bk-placeholder-empty__content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .bk-placeholder-empty__content__title {
+      color: bk.$theme-text-heading-default;
+      font-family: bk.$font-family-display;
+    }
+
+    .bk-placeholder-empty__content__subtitle {
+      max-width: 50%;
+      text-align: center;
+    }
+
+    .bk-placeholder-empty__content__action {
+      display: flex;
+      align-items: center;
+      gap: bk.$spacing-4;
+    }
+  }
+} 

src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.stories.tsx

@@ -0,0 +1,101 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not
+|* distributed with this file, you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { PlaceholderEmpty, PlaceholderEmptyAction } from './PlaceholderEmpty.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+import { Link } from '../../actions/Link/Link.tsx';
+
+
+type PlaceholderEmptyArgs = React.ComponentProps<typeof PlaceholderEmpty>;
+type Story = StoryObj<PlaceholderEmptyArgs>;
+
+export default {
+  component: PlaceholderEmpty,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    title: 'No data to display',
+  },
+  render: (args) => <PlaceholderEmpty {...args}/>,
+} satisfies Meta<PlaceholderEmptyArgs>;
+
+const actions = (
+  <PlaceholderEmptyAction>
+    <Button variant="secondary">Button</Button>
+    <Button variant="primary">Button</Button>
+  </PlaceholderEmptyAction>
+);
+
+const subtitle = (
+  <>
+    In case there is a secondary text to be added withIn case 
+    there is a secondary text to be added with <Link>Link</Link>
+  </>
+);
+
+export const Standard: Story = {
+  name: 'Standard',
+  args: {},
+};
+
+export const StandardWithSubtitle: Story = {
+  name: 'Standard with subtitle',
+  args: {
+    subtitle,
+  },
+};
+
+export const StandardWithButtons: Story = {
+  name: 'Standard with buttons',
+  args: {
+    actions,
+  },
+};
+
+export const StandardWithSubtitleAndButtons: Story = {
+  name: 'Standard with subtitle and buttons',
+  args: {
+    subtitle,
+    actions,
+  },
+};
+
+export const Small: Story = {
+  name: 'Small',
+  args: {
+    size: 'small',
+  },
+};
+
+export const SmallWithFolderIcon: Story = {
+  name: 'Small with folder icon',
+  args: {
+    size: 'small',
+    icon: 'folder',
+  },
+};
+
+export const SmallWithFileIcon: Story = {
+  name: 'Small with file icon',
+  args: {
+    size: 'small',
+    icon: 'file',
+  },
+};
+
+export const SmallWithFileErrorIcon: Story = {
+  name: 'Small with file error icon',
+  args: {
+    size: 'small',
+    icon: 'file-error',
+  },
+};