@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/stories/Popover.stories.js

@@ -0,0 +1,457 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverFooter,
+  PopoverTrigger,
+  PopoverOption,
+} from '../components/ui/popover';
+import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicInput from '../components/Input/Input.vue';
+import UnnnicLabel from '../components/Label/Label.vue';
+
+export default {
+  title: 'Misc/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `<div>A popover component that displays rich content in a portal, floating on top of other content.
+          <br/>
+          It supports three sizes (small, medium, large).
+          <br/>
+          API reference: https://www.reka-ui.com/docs/components/popover
+          </div>`,
+      },
+    },
+  },
+  argTypes: {
+    width: {
+      control: { type: 'text' },
+      description:
+        'The width of the popover. This overrides the size prop. If not provided, the size prop will be used.',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      description: 'The size of the popover',
+    },
+    side: {
+      control: { type: 'select' },
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The preferred side of the trigger to render against',
+    },
+    align: {
+      control: { type: 'select' },
+      options: ['start', 'center', 'end'],
+      description: 'The preferred alignment against the trigger',
+    },
+  },
+  args: {
+    size: 'medium',
+    side: 'bottom',
+    align: 'center',
+  },
+};
+
+export const Default = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A simple popover with some content inside.',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <UnnnicPopoverTrigger>
+    <UnnnicButton text="Open Popover" />
+  </UnnnicPopoverTrigger>
+  <UnnnicPopoverContent v-bind="args">
+    <p style="margin: 0;">This is a simple popover with some content inside.</p>
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Open Popover" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <p style="margin: 0;">This is a simple popover with some content inside.</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const WithOptions = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Popover with options',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <UnnnicPopoverTrigger>
+    <UnnnicButton text="Open Popover with options" />
+  </UnnnicPopoverTrigger>
+  <UnnnicPopoverContent v-bind="args">
+    <UnnnicPopoverOption label="Option 1" />
+    <UnnnicPopoverOption label="Option 2" />
+    <UnnnicPopoverOption label="Option 3" />
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverTrigger,
+      UnnnicButton,
+      PopoverOption,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Open Popover" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <section style="display: flex; flex-direction: column; gap: 8px;">
+              <PopoverOption label="View details" icon="info" scheme="fg-info" />
+              <PopoverOption label="Edit" icon="edit" scheme="fg-warning" />
+              <PopoverOption label="Delete" icon="delete" scheme="fg-critical" />
+              <PopoverOption label="Focused" focused />
+              <PopoverOption label="Disable" disabled />
+              <PopoverOption label="Active" active />
+            </section>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const WithFooter = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Popover with action buttons in the footer using the `PopoverFooter` component.',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <UnnnicPopoverTrigger>
+    <UnnnicButton text="Open Popover" />
+  </UnnnicPopoverTrigger>
+  <UnnnicPopoverContent v-bind="args">
+    <p style="margin: 0;">This popover has a footer with action buttons.</p>
+    <UnnnicPopoverFooter>
+      <UnnnicButton text="Cancel" type="tertiary" />
+      <UnnnicButton text="Save" type="primary" />
+    </UnnnicPopoverFooter>
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Open Popover" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <p style="margin: 0;">This popover has a footer with action buttons.</p>
+            <PopoverFooter>
+              <UnnnicButton text="Cancel" type="tertiary" />
+              <UnnnicButton text="Save" type="primary" />
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const WithForm = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Popover containing a form with inputs and footer actions.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+      UnnnicInput,
+      UnnnicLabel,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Edit Profile" iconLeft="edit" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 700;">Edit Profile</h3>
+            <form>
+              <UnnnicLabel label="Name" />
+              <UnnnicInput placeholder="Enter your name" />
+              <br />
+              <UnnnicLabel label="Email" />
+              <UnnnicInput placeholder="Enter your email" type="email" />
+            </form>
+            <PopoverFooter>
+              <UnnnicButton text="Cancel" type="tertiary" />
+              <UnnnicButton text="Save" type="primary" />
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const Sizes = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The popover comes in three sizes: small (240px), medium (320px), and large (400px).',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <!-- Small popover (240px) -->
+  <UnnnicPopoverContent size="small">
+  ...
+  </UnnnicPopoverContent>
+
+  <!-- Medium popover (320px) -->
+  <UnnnicPopoverContent size="medium">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Large popover (400px) -->
+  <UnnnicPopoverContent size="large">
+  ...
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: space-around; align-items: center; min-height: 400px; gap: 32px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Small" />
+          </PopoverTrigger>
+          <PopoverContent size="small">
+            <p style="margin: 0;">Small popover (240px)</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Medium" />
+          </PopoverTrigger>
+          <PopoverContent size="medium">
+            <p style="margin: 0;">Medium popover (320px)</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Large" />
+          </PopoverTrigger>
+          <PopoverContent size="large">
+            <p style="margin: 0;">Large popover (400px)</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const Placements = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The popover can be positioned on any side of the trigger: top, bottom, left, or right.',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <!-- Top -->
+  <UnnnicPopoverContent side="top">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Bottom -->
+  <UnnnicPopoverContent side="bottom">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Right -->
+  <UnnnicPopoverContent side="right">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Left -->
+  <UnnnicPopoverContent side="left">
+  ...
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 100px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Top" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="top" align="center">
+            <p style="margin: 0;">Popover on top</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Bottom" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="bottom" align="center">
+            <p style="margin: 0;">Popover on bottom</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Right" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="right" align="center">
+            <p style="margin: 0;">Popover on right</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Left" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="left" align="center">
+            <p style="margin: 0;">Popover on left</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const RichContent = {
+  args: {
+    size: 'large',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of a popover with rich, structured content and footer actions.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Show Details" iconLeft="info" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <div>
+              <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">User Information</h3>
+              <div style="display: flex; flex-direction: column; gap: 12px;">
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Name:</span>
+                  <span>John Doe</span>
+                </div>
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Email:</span>
+                  <span>john.doe@example.com</span>
+                </div>
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Role:</span>
+                  <span>Administrator</span>
+                </div>
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Status:</span>
+                  <span style="color: #4CAF50;">Active</span>
+                </div>
+              </div>
+            </div>
+            <PopoverFooter>
+              <UnnnicButton text="View Profile" type="primary" />
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};

package/src/stories/PopoverOption.stories.js

@@ -0,0 +1,128 @@
+import { PopoverOption } from '../components/ui/popover';
+import UnnnicTag from '../components/Tag/Tag.vue';
+import colorsList from '../utils/colorsList';
+
+export default {
+  title: 'Misc/PopoverOption',
+  component: PopoverOption,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `<div>
+          A popover options item component.
+          It is used to display options in a popover.
+          </div>`,
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+      description: 'The label of the popover option',
+    },
+    disabled: {
+      control: { type: 'select' },
+      options: [true, false],
+      description: 'Whether the option is disabled',
+    },
+    active: {
+      control: { type: 'select' },
+      options: [true, false],
+      description: 'Whether the option is active',
+    },
+    focused: {
+      control: { type: 'select' },
+      options: [true, false],
+      description:
+        'Whether the option is focused (when the popover is open, the focused option is highlighted)',
+    },
+    scheme: {
+      control: { type: 'select' },
+      options: colorsList,
+      description: 'The scheme of the option',
+    },
+    icon: {
+      control: { type: 'text' },
+      description: 'The icon of the option',
+    },
+  },
+  args: {
+    label: 'Option',
+    disabled: false,
+    active: false,
+    scheme: 'fg-emphasized',
+    icon: '',
+  },
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { PopoverOption },
+    setup() {
+      return { args };
+    },
+    template: `
+    <section style="display: flex; flex-direction: column; gap: 8px;">
+      <PopoverOption v-bind="args" />
+      <PopoverOption v-bind="args" disabled />
+      <PopoverOption v-bind="args" active />
+      <PopoverOption v-bind="args" focused />
+      <PopoverOption v-bind="args" icon="delete" scheme="fg-critical" />
+      <PopoverOption v-bind="args" icon="info" />
+    </section>
+    `,
+  }),
+};
+
+export const WithTag = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uses the default slot to render custom content, such as a label alongside a status tag. The option keeps the `space-between` layout, so the tag stays aligned to the end.',
+      },
+      source: {
+        code: `<UnnnicPopoverOption v-for="option in options" :key="option.value">
+  <span class="popover-option__label">{{ option.label }}</span>
+  <UnnnicTag
+    type="default"
+    size="small"
+    :scheme="statusConfig[option.status].scheme"
+    :text="statusConfig[option.status].text"
+  />
+</UnnnicPopoverOption>`,
+      },
+    },
+  },
+  render: () => ({
+    components: { PopoverOption, UnnnicTag },
+    data() {
+      return {
+        options: [
+          { label: 'John Doe', value: 'john-doe', status: 'online' },
+          { label: 'Jane Doe', value: 'jane-doe', status: 'lunch' },
+          { label: 'James Smith', value: 'james-smith', status: 'offline' },
+        ],
+        statusConfig: {
+          online: { scheme: 'green', text: 'Online' },
+          lunch: { scheme: 'orange', text: 'Lunch' },
+          offline: { scheme: 'gray', text: 'Offline' },
+        },
+      };
+    },
+    template: `
+    <section style="display: flex; flex-direction: column; gap: 8px; width: 280px;">
+      <PopoverOption v-for="option in options" :key="option.value" :label="option.label">
+        <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ option.label }}</span>
+        <unnnic-tag
+          type="default"
+          size="small"
+          :scheme="statusConfig[option.status].scheme"
+          :text="statusConfig[option.status].text"
+        />
+      </PopoverOption>
+    </section>
+    `,
+  }),
+};

package/src/stories/ProgressBar.stories.js

@@ -0,0 +1,38 @@
+import { action } from 'storybook/actions';
+import UnnnicProgressBar from '../components/ProgressBar/ProgressBar.vue';
+
+export default {
+  title: 'Progress/ProgressBar',
+  component: UnnnicProgressBar,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary'],
+    },
+  },
+  args: {
+    modelValue: 25,
+    title: 'Title name',
+    onClose: action('close'),
+  },
+};
+export const Primary = {};
+
+export const Secondary = { args: { type: 'secondary' } };
+
+export const Inline = {
+  args: {
+    inline: true,
+  },
+};
+
+export const Subtitle = { args: { subtitle: 'Subtitle or description' } };
+
+export const SubtitleCanClose = {
+  args: {
+    subtitle: 'Subtitle or description',
+    canClose: true,
+  },
+};