@weni/unnnic-system 3.11.1-alpha.2 → 3.11.2

package/src/stories/DatePicker.stories.js

@@ -20,6 +20,7 @@ export default {
     months: { control: { type: 'array' } },
     days: { control: { type: 'array' } },
     options: { control: { type: 'array' } },
+    periodBaseDate: { control: { type: 'text' } },
     clearLabel: { control: { type: 'text' } },
     actionLabel: { control: { type: 'text' } },
   },
@@ -33,3 +34,73 @@ export const Default = {
     initialEndDate: '12-01-2021',
   },
 };
+
+export const SmallDayPicker = {
+  args: {
+    size: 'small',
+    type: 'day',
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const MonthView = {
+  args: {
+    size: 'large',
+    type: 'month',
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const YearView = {
+  args: {
+    size: 'large',
+    type: 'year',
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const WithMinAndMaxDateRange = {
+  args: {
+    size: 'large',
+    type: 'day',
+    minDate: moment().subtract(30, 'days').format('YYYY-MM-DD'),
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const WithCustomLabelsAndDisableClear = {
+  args: {
+    size: 'large',
+    type: 'day',
+    clearLabel: 'Reset',
+    actionLabel: 'Apply',
+    disableClear: true,
+    options: [
+      { name: 'Last 7 days', id: 'last-7-days' },
+      { name: 'Last 30 days', id: 'last-30-days' },
+      { name: 'Current month', id: 'current-month' },
+      { name: 'Previous month', id: 'previous-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+};
+
+export const CustomRelativePeriodsWithBaseDate = {
+  args: {
+    size: 'large',
+
+    periodBaseDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+
+    maxDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+
+    options: [
+      { name: 'Last 7 days (up to 24h ago)', id: 'last-7-days' },
+      { name: 'Last 14 days (up to 24h ago)', id: 'last-14-days' },
+      { name: 'Last 30 days (up to 24h ago)', id: 'last-30-days' },
+      { name: 'Last 12 months (up to 24h ago)', id: 'last-12-months' },
+      { name: 'Current month (up to 24h ago)', id: 'current-month' },
+      { name: 'Previous month (up to 24h ago)', id: 'previous-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+};

package/src/stories/Drawer.stories.js

@@ -14,7 +14,7 @@ const primaryButtonTypeOptions = [
 ];
 
 export default {
-  title: 'Misc/Drawer',
+  title: 'Example/Drawer',
   component: UnnnicDrawer,
   argTypes: {
     title: { control: { type: 'text' } },

package/src/stories/InputDatePicker.stories.js

@@ -67,3 +67,25 @@ export const WithMinMaxDates = {
     ],
   },
 };
+
+export const WithCustomRelativePeriodsAndBaseDate = {
+  args: {
+    size: 'sm',
+    next: true,
+    iconPosition: 'right',
+    fillW: true,
+
+    periodBaseDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+    maxDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+
+    options: [
+      { name: 'Last 7 days (up to 24h ago)', id: 'last-7-days' },
+      { name: 'Last 14 days (up to 24h ago)', id: 'last-14-days' },
+      { name: 'Last 30 days (up to 24h ago)', id: 'last-30-days' },
+      { name: 'Last 12 months (up to 24h ago)', id: 'last-12-months' },
+      { name: 'Current month (up to 24h ago)', id: 'current-month' },
+      { name: 'Previous month (up to 24h ago)', id: 'previous-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+};

package/src/stories/ModalDialog.mdx

@@ -6,9 +6,6 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
-> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
-instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
-
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Feedback/ModalDialog',
+  title: 'Example/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {

package/src/stories/Tabs.stories.js

@@ -4,7 +4,7 @@ import UnnnicIcon from '@/components/Icon.vue';
 import '@/assets/scss/tailwind.scss';
 
 export default {
-  title: 'Navigation/Tabs',
+  title: 'Misc/Tabs',
   component: Tabs,
   tags: ['autodocs'],
   render: (args) => ({