feat(datepicker): adding Datepicker component

freshworks · May 22, 2020 · 9208e76 · 9208e76
1 parent d53a813
commit 9208e76
Show file tree

Hide file tree

Showing 11 changed files with 909 additions and 4 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -3,6 +3,11 @@
   "rules": {
     "no-descending-specificity": null,
     "at-rule-no-unknown": null,
-    "custom-property-empty-line-before": null
+    "custom-property-empty-line-before": null,
+    "selector-type-no-unknown": [true,
+      {
+        ignore: ["custom-elements"]
+      }
+    ]
   }
-}
+}
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -46,6 +46,16 @@ export namespace Components {
          */
         "value": string;
     }
+    interface FwDatepicker {
+        "dateFormat": string;
+        "dateValue": any;
+        "endDate": any;
+        "maxDate": any;
+        "minDate": any;
+        "mode": string;
+        "placeholder": string;
+        "startDate": any;
+    }
     interface FwIcon {
         /**
           * Color in which the icon is displayed, specified as a standard CSS color or as a HEX code.
@@ -405,6 +415,12 @@ declare global {
         prototype: HTMLFwCheckboxElement;
         new (): HTMLFwCheckboxElement;
     };
+    interface HTMLFwDatepickerElement extends Components.FwDatepicker, HTMLStencilElement {
+    }
+    var HTMLFwDatepickerElement: {
+        prototype: HTMLFwDatepickerElement;
+        new (): HTMLFwDatepickerElement;
+    };
     interface HTMLFwIconElement extends Components.FwIcon, HTMLStencilElement {
     }
     var HTMLFwIconElement: {
@@ -492,6 +508,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "fw-button": HTMLFwButtonElement;
         "fw-checkbox": HTMLFwCheckboxElement;
+        "fw-datepicker": HTMLFwDatepickerElement;
         "fw-icon": HTMLFwIconElement;
         "fw-input": HTMLFwInputElement;
         "fw-label": HTMLFwLabelElement;
@@ -573,6 +590,17 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface FwDatepicker {
+        "dateFormat"?: string;
+        "dateValue"?: any;
+        "endDate"?: any;
+        "maxDate"?: any;
+        "minDate"?: any;
+        "mode"?: string;
+        "onFwChange"?: (event: CustomEvent<any>) => void;
+        "placeholder"?: string;
+        "startDate"?: any;
+    }
     interface FwIcon {
         /**
           * Color in which the icon is displayed, specified as a standard CSS color or as a HEX code.
@@ -988,6 +1016,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "fw-button": FwButton;
         "fw-checkbox": FwCheckbox;
+        "fw-datepicker": FwDatepicker;
         "fw-icon": FwIcon;
         "fw-input": FwInput;
         "fw-label": FwLabel;
@@ -1010,6 +1039,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "fw-button": LocalJSX.FwButton & JSXBase.HTMLAttributes<HTMLFwButtonElement>;
             "fw-checkbox": LocalJSX.FwCheckbox & JSXBase.HTMLAttributes<HTMLFwCheckboxElement>;
+            "fw-datepicker": LocalJSX.FwDatepicker & JSXBase.HTMLAttributes<HTMLFwDatepickerElement>;
             "fw-icon": LocalJSX.FwIcon & JSXBase.HTMLAttributes<HTMLFwIconElement>;
             "fw-input": LocalJSX.FwInput & JSXBase.HTMLAttributes<HTMLFwInputElement>;
             "fw-label": LocalJSX.FwLabel & JSXBase.HTMLAttributes<HTMLFwLabelElement>;

diff --git a/src/components/button/readme.md b/src/components/button/readme.md
@@ -61,6 +61,19 @@ fw-button displays a button on the user interface and enables performing specifi
 | `fwFocus` | Triggered when the button comes into focus. | `CustomEvent<void>` |
 
 
+## Dependencies
+
+### Used by
+
+ - [fw-datepicker](../datepicker)
+
+### Graph
+```mermaid
+graph TD;
+  fw-datepicker --> fw-button
+  style fw-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 Built with ❤ at Freshworks
diff --git a/src/components/datepicker/datepicker.e2e.ts b/src/components/datepicker/datepicker.e2e.ts
@@ -0,0 +1,79 @@
+import { newE2EPage } from '@stencil/core/testing';
+import moment from 'moment-mini';
+
+describe('fw-datepicker', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<fw-datepicker></fw-datepicker>');
+    const element = await page.find('fw-datepicker');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should show and hide the datepicker popup when click', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<fw-datepicker></fw-datepicker>');
+    const element = await page.find('fw-datepicker >>> fw-input');
+    await element.click();
+    const popup = await page.find('fw-datepicker >>> .datepicker');
+    expect(popup).toBeTruthy();
+
+    const updateEle = await page.find('fw-datepicker >>> fw-button.close-date-picker');
+    await updateEle.click();
+
+    const datePickerEle = await page.find('fw-datepicker >>> .datepicker');
+    expect(datePickerEle).toBeNull();
+  });
+
+  it('should emit fwChange when it is updated', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<fw-datepicker></fw-datepicker>');
+    const fwChange = await page.spyOnEvent('fwChange');
+    const element = await page.find('fw-datepicker >>> fw-input');
+    await element.click();
+
+    const updateEle = await page.find('fw-datepicker >>> fw-button.update-date-value');
+
+    element.setProperty('selectedDay', '27-04-2020');
+    await updateEle.click();
+    expect(fwChange).toHaveReceivedEvent();
+  });
+
+  it('range picker should render and emit fwChange', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<fw-datepicker mode="range"></fw-datepicker>');
+    const fwChange = await page.spyOnEvent('fwChange');
+    const element = await page.find('fw-datepicker >>> fw-input');
+    await element.click();
+    const popup = await page.find('fw-datepicker >>> .daterangepicker');
+    expect(popup).toBeTruthy();
+
+    const updateEle = await page.find('fw-datepicker >>> fw-button.update-range-value');
+    element.setProperty('minDate', '01-04-2020');
+    element.setProperty('maxDate', '27-04-2020');
+    await updateEle.click();
+    expect(fwChange).toHaveReceivedEvent();
+  });
+
+  it('date should be as per format', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<fw-datepicker date-format="YYYY-MM-DD"></fw-datepicker>');
+    const element = await page.find('fw-datepicker >>> fw-input');
+    await element.click();
+
+    const dateEle = await page.find('fw-datepicker >>> .c-day-container.highlight span');
+    await dateEle.click();
+
+    const updateEle = await page.find('fw-datepicker >>> fw-button.update-date-value');
+    await updateEle.click();
+
+    const datePicketValue = await element.getProperty('value');
+    const todayValue = moment().format('YYYY-MM-DD');
+
+    expect(datePicketValue.toString()).toBe(todayValue.toString());
+  });
+});