#26409 Calendar Design System implementation (#26469)

* feat(p-calendar): implement DS of calendar

* feat(p-calendar): fix sq comment

* feat(p-calendar): fix comments

* feat(p-calendar): fix comments

* feat(p-calendar): fix comments

core-web/apps/dotcms-ui/src/stories/primeng/form/Calendar.stories.ts

@@ -1,46 +1,82 @@
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { moduleMetadata } from '@storybook/angular';
-import { Meta, Story } from '@storybook/angular/types-6-0';
+import { Meta, Story } from '@storybook/angular';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { Calendar, CalendarModule } from 'primeng/calendar';
+import { ButtonModule } from 'primeng/button';
+import { Calendar } from 'primeng/calendar';
 
-export default {
+const TODAY = new Date();
+const DAYS_TO_DISABLE = 5;
+const DISABLED_DAYS: Date[] = [...Array(DAYS_TO_DISABLE)].map(
+    (_, index) => new Date(Date.now() + (index + 1) * 24 * 60 * 60 * 1000)
+);
+
+const meta: Meta<Calendar> = {
     title: 'PrimeNG/Form/Calendar',
     component: Calendar,
-    decorators: [
-        moduleMetadata({
-            imports: [CalendarModule, BrowserAnimationsModule]
-        })
-    ],
-    parameters: {
-        docs: {
-            description: {
-                component:
-                    'Calendar is an input component to select a date: https://primeng.org/calendar'
-            }
+    args: {
+        disabled: false,
+        readonlyInput: true,
+        showIcon: true,
+        showTime: true,
+        showClear: true,
+        inline: false,
+        placeholder: 'Select a date',
+        minDate: TODAY,
+        disabledDates: DISABLED_DAYS,
+        selectionMode: 'single'
+    },
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            description: 'When specified, disables the component.'
+        },
+        inline: {
+            control: 'boolean',
+            description:
+                'When enabled, displays the calendar as inline. Default is false for popup mode.'
+        },
+        showIcon: {
+            control: 'boolean',
+            description: 'When enabled, displays a button with icon next to input.'
+        },
+        showClear: {
+            control: 'boolean',
+            description: 'When enabled, a clear icon is displayed to clear the value.'
+        },
+        readonlyInput: {
+            control: 'boolean',
+            description: 'When specified, prevents entering the date manually with keyboard.'
+        },
+        showTime: {
+            control: 'boolean',
+            description: 'Whether to display timepicker.'
+        },
+
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the input.'
+        },
+        disabledDates: {
+            control: 'array',
+            description: 'Array with dates that should be disabled (not selectable). Date[]'
+        },
+        selectionMode: {
+            options: ['single', 'multiple', 'range'],
+            control: { type: 'radio' },
+            description:
+                'Defines the quantity of the selection, valid values are "single", "multiple" and "range".'
         }
     }
-} as Meta;
-
-const CalendarTemplate = `<p-calendar [showTime]="true" inputId="time" showButtonBar="true"></p-calendar>`;
-const Template: Story<Calendar> = (props: Calendar) => {
-    const template = CalendarTemplate;
-
-    return {
-        props,
-        template
-    };
 };
 
-export const Primary: Story = Template.bind({});
+export default meta;
 
-Primary.parameters = {
-    docs: {
-        source: {
-            code: CalendarTemplate
-        },
-        iframeHeight: 700
+export const Primary: Story = (args) => ({
+    moduleMetadata: {
+        imports: [BrowserAnimationsModule, ButtonModule]
+    },
+    props: {
+        ...args
     }
-};
+});