@weni/unnnic-system 3.9.1-alpha.2 → 3.9.1-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.9.1-alpha.2",
+  "version": "3.9.1-alpha.3",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/PageHeader/PageHeader.vue

@@ -0,0 +1,154 @@
+<template>
+  <header
+    :class="`page-header 
+      ${hasBackButton ? 'page-header--has-back-button' : ''} 
+      ${hasTabsSlot ? 'page-header--has-tabs' : ''}
+    `"
+  >
+    <UnnnicButton
+      v-if="hasBackButton"
+      data-testid="back-button"
+      type="tertiary"
+      iconCenter="arrow_back_ios_new"
+      class="page-header__back-button"
+      @click="handleBackClick"
+    />
+
+    <section class="page-header__infos">
+      <section class="page-header__main-infos">
+        <h1
+          class="page-header__title"
+          data-testid="page-title"
+        >
+          {{ title }}
+        </h1>
+
+        <slot name="tag" />
+      </section>
+
+      <p
+        v-if="description"
+        class="page-header__description"
+        data-testid="page-description"
+      >
+        {{ description }}
+      </p>
+    </section>
+
+    <section
+      v-if="hasActionsSlot"
+      class="page-header__actions"
+      data-testid="page-actions"
+    >
+      <slot name="actions" />
+    </section>
+
+    <section
+      v-if="hasTabsSlot"
+      class="page-header__tabs"
+      data-testid="page-tabs"
+    >
+      <slot name="tabs" />
+    </section>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+import UnnnicButton from '../Button/Button.vue';
+
+import type { PageHeaderProps, PageHeaderEmits } from './types';
+
+withDefaults(defineProps<PageHeaderProps>(), {
+  description: '',
+  hasBackButton: false,
+});
+
+const emit = defineEmits<PageHeaderEmits>();
+
+const slots = useSlots();
+const hasActionsSlot = !!slots.actions;
+const hasTabsSlot = !!slots.tabs;
+
+const handleBackClick = (): void => {
+  emit('back');
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.page-header {
+  width: 100%;
+
+  margin-top: $unnnic-space-2;
+  padding-bottom: $unnnic-space-6;
+
+  display: grid;
+  gap: $unnnic-space-4;
+  grid-template-columns: 1fr minmax(250px, 20%); // TODO: Verify if is 250px or 20% (8fr 2fr)
+  align-items: center;
+
+  border-bottom: 1px solid $unnnic-color-border-soft;
+
+  &--has-back-button {
+    grid-template-columns: auto 1fr minmax(250px, 20%);
+  }
+
+  &--has-tabs {
+    border-bottom: none;
+  }
+
+  &__infos {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-2;
+  }
+
+  &__main-infos {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+  }
+
+  &__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    color: $unnnic-color-fg-emphasized;
+    text-overflow: ellipsis;
+
+    font: $unnnic-font-display-1;
+  }
+
+  &__description {
+    color: $unnnic-color-fg-base;
+
+    font: $unnnic-font-body;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $unnnic-space-2;
+    align-items: center;
+    justify-content: flex-end;
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  &__tabs {
+    grid-column: 1 / -1;
+    grid-row: 2 / 3;
+  }
+}
+</style>

package/src/components/PageHeader/index.ts

@@ -0,0 +1,2 @@
+export { default } from './PageHeader.vue';
+export { default as PageHeader } from './PageHeader.vue';

package/src/components/PageHeader/types.ts

@@ -0,0 +1,10 @@
+export interface PageHeaderProps {
+  title: string;
+  description?: string;
+
+  hasBackButton?: boolean;
+}
+
+export interface PageHeaderEmits {
+  (event: 'back'): void;
+}

package/src/components/Tag/DefaultTag.vue

@@ -62,6 +62,7 @@ const color = computed(() => {
   gap: $unnnic-space-1;
   border-radius: $unnnic-border-radius-pill;
   padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
+  width: fit-content;
 
   background-color: v-bind(color);
 
@@ -72,6 +73,10 @@ const color = computed(() => {
   &__label {
     margin: 0;
 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
     font: $unnnic-font-caption-1;
     color: $unnnic-color-fg-emphasized;
   }

package/src/components/index.ts

@@ -93,16 +93,17 @@ import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
 import Toast from './Toast/Toast.vue';
 import { toast } from './Toast/ToastManager';
-import Tabs from './ui/tabs/Tabs.vue';
-import TabsList from './ui/tabs/TabsList.vue';
-import TabsTrigger from './ui/tabs/TabsTrigger.vue';
-import TabsContent from './ui/tabs/TabsContent.vue';
 import Popover from './ui/popover/Popover.vue';
 import PopoverContent from './ui/popover/PopoverContent.vue';
 import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 import PopoverFooter from './ui/popover/PopoverFooter.vue';
 import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
 import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
+import Tabs from './ui/tabs/Tabs.vue';
+import TabsList from './ui/tabs/TabsList.vue';
+import TabsTrigger from './ui/tabs/TabsTrigger.vue';
+import TabsContent from './ui/tabs/TabsContent.vue';
+import PageHeader from './PageHeader/PageHeader.vue';
 
 type VueComponent = Component;
 
@@ -208,13 +209,14 @@ export const components: ComponentsMap = {
   unnnicChip: Chip,
   unnnicToast: Toast,
   unnnicToastManager: toast,
+  unnnicPopover: Popover,
+  unnnicPopoverContent: PopoverContent,
+  unnnicPopoverTrigger: PopoverTrigger,
   unnnicTabs: Tabs,
   unnnicTabsList: TabsList,
   unnnicTabsTrigger: TabsTrigger,
   unnnicTabsContent: TabsContent,
-  unnnicPopover: Popover,
-  unnnicPopoverContent: PopoverContent,
-  unnnicPopoverTrigger: PopoverTrigger,
+  unnnicPageHeader: PageHeader,
 };
 
 export const unnnicFontSize = fontSize;
@@ -313,16 +315,17 @@ export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
 export const unnnicToast = Toast;
 export const unnnicToastManager = toast;
-export const unnnicTabs = Tabs;
-export const unnnicTabsList = TabsList;
-export const unnnicTabsTrigger = TabsTrigger;
-export const unnnicTabsContent = TabsContent;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
 export const unnnicPopoverFooter = PopoverFooter;
 export const unnnicTemplatePreview = TemplatePreview as VueComponent;
 export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const unnnicTabs = Tabs;
+export const unnnicTabsList = TabsList;
+export const unnnicTabsTrigger = TabsTrigger;
+export const unnnicTabsContent = TabsContent;
+export const unnnicPageHeader = PageHeader;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicInput = input;
@@ -419,13 +422,14 @@ export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;
 export const UnnnicToast = Toast;
 export const UnnnicToastManager = toast;
-export const UnnnicTabs = Tabs;
-export const UnnnicTabsList = TabsList;
-export const UnnnicTabsTrigger = TabsTrigger;
-export const UnnnicTabsContent = TabsContent;
 export const UnnnicPopover = Popover;
 export const UnnnicPopoverContent = PopoverContent;
 export const UnnnicPopoverTrigger = PopoverTrigger;
 export const UnnnicPopoverFooter = PopoverFooter;
 export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
 export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const UnnnicTabs = Tabs;
+export const UnnnicTabsList = TabsList;
+export const UnnnicTabsTrigger = TabsTrigger;
+export const UnnnicTabsContent = TabsContent;
+export const UnnnicPageHeader = PageHeader;

package/src/stories/PageHeader.stories.js

@@ -0,0 +1,330 @@
+import { action } from '@storybook/addon-actions';
+
+import PageHeader from '../components/PageHeader/PageHeader.vue';
+import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicTag from '../components/Tag/Tag.vue';
+import UnnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+
+export default {
+  title: 'Layout/PageHeader',
+  component: PageHeader,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `A page header component to standardize the header of pages.
+          <br/>
+          It supports title, description, actions, tabs, tags, and back navigation.
+          <br/>
+          This component provides multiple variations to handle different page header scenarios.
+          `,
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      description: 'The title of the page',
+    },
+    description: {
+      control: { type: 'text' },
+      description: 'The description text below the title',
+    },
+    hasBackButton: {
+      control: { type: 'boolean' },
+      description: 'Show back navigation button',
+    },
+  },
+  args: {
+    title: 'Page Name',
+    description: 'Description',
+    hasBackButton: false,
+  },
+};
+
+export const Default = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A simple page header with title and description.',
+      },
+      source: {
+        code: `
+<UnnnicPageHeader 
+  title="Page Name"
+  description="Description"
+/>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { PageHeader },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeader v-bind="args" />
+    `,
+  }),
+};
+
+export const WithActions = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Page header with action buttons on the right side. Supports primary and secondary actions.',
+      },
+      source: {
+        code: `
+<UnnnicPageHeader 
+  title="Page Name"
+  description="Description"
+>
+  <template #actions>
+    <UnnnicButton text="Button" type="secondary" />
+    <UnnnicButton text="Button" type="primary" />
+  </template>
+</UnnnicPageHeader>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      PageHeader,
+      UnnnicButton,
+      Tabs,
+      TabsList,
+      TabsTrigger,
+      TabsContent,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeader v-bind="args">
+        <template #actions>
+          <UnnnicButton text="Button" type="secondary" />
+          <UnnnicButton text="Button" type="primary" />
+        </template>
+      </PageHeader>
+    `,
+  }),
+};
+
+export const WithTabs = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Page header with tabs for navigation. Useful for pages with multiple sections divided by tabs.',
+      },
+      source: {
+        code: `
+<UnnnicPageHeader 
+  title="Page Name"
+  description="Description"
+>
+  <template #actions>
+    <UnnnicButton text="Button" type="secondary" />
+    <UnnnicButton text="Button" type="primary" />
+  </template>
+  <template #tabs>
+    <UnnnicTabs defaultValue="label1">
+      <UnnnicTabsList>
+        <UnnnicTabsTrigger value="label1">Label</UnnnicTabsTrigger>
+        <UnnnicTabsTrigger value="label2">Label</UnnnicTabsTrigger>
+        <UnnnicTabsTrigger value="label3">Label</UnnnicTabsTrigger>
+      </UnnnicTabsList>
+    </UnnnicTabs>
+  </template>
+</UnnnicPageHeader>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      PageHeader,
+      UnnnicButton,
+      Tabs,
+      TabsList,
+      TabsTrigger,
+      TabsContent,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeader v-bind="args">
+        <template #actions>
+          <UnnnicButton text="Button" type="secondary" />
+          <UnnnicButton text="Button" type="primary" />
+        </template>
+        <template #tabs>
+          <Tabs defaultValue="label1">
+            <TabsList>
+              <TabsTrigger value="label1">Label</TabsTrigger>
+              <TabsTrigger value="label2">Label</TabsTrigger>
+              <TabsTrigger value="label3">Label</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </template>
+      </PageHeader>
+    `,
+  }),
+};
+
+export const WithSelect = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Page header with a select dropdown on the right side.',
+      },
+      source: {
+        code: `
+<UnnnicPageHeader 
+  title="Page Name"
+  description="Description"
+>
+  <template #actions>
+    <UnnnicSelectSmart />
+  </template>
+</UnnnicPageHeader>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { PageHeader, UnnnicSelectSmart },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeader v-bind="args">
+        <template #actions>
+          <UnnnicSelectSmart />
+        </template>
+      </PageHeader>
+    `,
+  }),
+};
+
+export const WithTag = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Page header with a tag next to the title and action buttons.',
+      },
+      source: {
+        code: `
+<UnnnicPageHeader 
+  title="Page Name"
+  description="Description"
+>
+  <template #tag>
+    <UnnnicTag text="Tag name" scheme="gray" />
+  </template>
+  <template #actions>
+    <UnnnicButton text="Button" type="secondary" />
+    <UnnnicButton text="Button" type="primary" />
+  </template>
+</UnnnicPageHeader>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { PageHeader, UnnnicButton, UnnnicTag },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeader v-bind="args">
+        <template #tag>
+          <UnnnicTag text="Tag name" scheme="gray" />
+        </template>
+        <template #actions>
+          <UnnnicButton text="Button" type="secondary" />
+          <UnnnicButton text="Button" type="primary" />
+        </template>
+      </PageHeader>
+    `,
+  }),
+};
+
+export const WithMenuButton = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Page header with a menu button (three dots) on the right side.',
+      },
+      source: {
+        code: `
+<UnnnicPageHeader 
+  title="Page Name"
+  description="Description"
+>
+  <template #actions>
+    <UnnnicButton type="tertiary" iconCenter="more_vert" />
+  </template>
+</UnnnicPageHeader>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { PageHeader, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PageHeader v-bind="args">
+        <template #actions>
+          <UnnnicButton type="tertiary" iconCenter="more_vert" />
+        </template>
+      </PageHeader>
+    `,
+  }),
+};
+
+export const WithBackButton = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Page header with a back navigation button.',
+      },
+      source: {
+        code: `
+<UnnnicPageHeader 
+  title="Page Name"
+  :hasBackButton="true"
+/>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { PageHeader },
+    setup() {
+      const handleBack = () => {
+        action('back')();
+      };
+
+      return {
+        args: {
+          ...args,
+          hasBackButton: true,
+          description: '',
+        },
+        handleBack,
+      };
+    },
+    template: `
+      <PageHeader v-bind="args" @back="handleBack" />
+    `,
+  }),
+};