Merge branch 'master' into production

.github/ISSUE_TEMPLATE/bug_report.md

@@ -24,14 +24,14 @@ If applicable, add screenshots to help explain your problem.
 
 ## Desktop (please complete the following information):
  - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+ - Browser: [e.g. chrome, safari]
+ - Version: [e.g. 22]
 
 ## Smartphone (please complete the following information):
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+ - Browser: [e.g. stock browser, safari]
+ - Version: [e.g. 22]
 
 ## Additional context
 Add any other context about the problem here.

.github/stale.yml

@@ -0,0 +1,26 @@
+
+# Configuration for probot-stale - https://github.com/probot/stale
+
+# Number of days of inactivity before an Issue or Pull Request becomes stale
+daysUntilStale: 30
+
+# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
+# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
+daysUntilClose: 7
+
+# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
+exemptLabels:
+  - Type: Feature
+  - Type: Enhancement
+  - Type: Bug
+  - NHN
+
+# Label to use when marking as stale
+staleLabel: inactive
+
+# Comment to post when marking as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as inactive because there hasn’t been much going on it lately.
+  It is going to be closed after 7 days. Thanks!
+# Comment to post when closing a stale Issue or Pull Request.
+closeComment: >

.github/workflows/test_on_pull_request.yml

@@ -0,0 +1,11 @@
+name: Jest Test
+on: pull_request
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: npm install
+    - name: Run tests
+      run: npm run test

docs/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,42 @@
+<!-- EDIT TITLE PLEASE -->
+<!-- It should be one of them
+  <ISSUE TYPE>: Short Description (<CLOSING TYPE> #<ISSUE NUMBERS>)
+  ex)
+  feat: add new feature (close #111)
+  fix: wrong behavior (fix #111)
+  chore: change build tool (ref #111)
+-->
+
+<!-- SPECIFY A ISSUE TYPE AT HEAD
+  feat: A new feature
+  fix: A bug fix
+  docs: Documentation only changes
+  style: Changes that do not affect the meaning of the code (white-space, formatting etc)
+  refactor: A code change that neither fixes a bug or adds a feature
+  perf: A code change that improves performance
+  test: Adding missing tests
+  chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
+-->
+
+<!-- ADD CLOSING TYPE AND ISSUE NUMBER AT TAIL
+  (<CLOSING TYPE> #<ISSUE NUMBERS>)
+  close: resolve not a bug(feature, docs, etc) completely
+  fix: resolve a bug completely
+  ref: not fully resolved or related to
+-->
+
+### Please check if the PR fulfills these requirements
+- [ ] It's submitted to right branch according to our branching model
+- [ ] It's right issue type on title
+- [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number)
+- [ ] The commit message follows our guidelines
+- [ ] Tests for the changes have been added (for bug fixes/features)
+- [ ] Docs have been added/updated (for bug fixes/features)
+- [ ] It does not introduce a breaking change or has description for the breaking change
+
+### Description
+
+
+
+---
+Thank you for your contribution to TOAST UI product. 🎉 😘 ✨

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tui-date-picker",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "description": "TOAST UI Components: DatePicker",
   "main": "dist/tui-date-picker",
   "types": "index.d.ts",
@@ -56,6 +56,6 @@
     "webpack-dev-server": "^3.8.0"
   },
   "dependencies": {
-    "tui-time-picker": "^2.1.2"
+    "tui-time-picker": "^2.1.3"
   }
 }

src/css/calendar.css

@@ -91,6 +91,12 @@
     background-color: #f4f4f4
 }
 
+.tui-calendar .tui-calendar-title-today:hover {
+    color: #333;
+    background-color: #edf4fc;
+    cursor: pointer;
+}
+
 .tui-calendar .tui-calendar-title {
     display: inline-block;
     font-size: 18px;

src/js/calendar/header.js

@@ -29,6 +29,8 @@ var SELECTOR_INNER_ELEM = '.tui-calendar-header-inner';
 var SELECTOR_INFO_ELEM = '.tui-calendar-header-info';
 var SELECTOR_BTN = '.tui-calendar-btn';
 
+var TODAY_TITLE_ELEM = '.tui-calendar-title-today';
+
 var YEAR_TITLE_FORMAT = 'yyyy';
 
 /**
@@ -142,6 +144,8 @@ var Header = defineClass(
 
       if (closest(target, SELECTOR_BTN)) {
         this.fire('click', ev);
+      } else if (closest(target, TODAY_TITLE_ELEM)) {
+        this.fire('today');
       }
     },
 

src/js/constants.js

@@ -23,6 +23,7 @@ module.exports = {
   CLASS_NAME_PREV_YEAR_BTN: 'tui-calendar-btn-prev-year',
   CLASS_NAME_NEXT_YEAR_BTN: 'tui-calendar-btn-next-year',
   CLASS_NAME_NEXT_MONTH_BTN: 'tui-calendar-btn-next-month',
+  CLASS_NAME_TITLE_TODAY: 'tui-calendar-title-today',
 
   DEFAULT_WEEK_START_DAY: 'Sun',
   WEEK_START_DAY_MAP: {

src/js/datepicker/index.js

@@ -353,6 +353,7 @@ var DatePicker = defineClass(
     _setEvents: function() {
       mouseTouchEvent.on(this._element, 'click', this._onClickHandler, this);
       this._calendar.on('draw', this._onDrawCalendar, this);
+      this._calendar._header.on('today', this._onClickTodayHandler, this);
     },
 
     /**
@@ -658,6 +659,16 @@ var DatePicker = defineClass(
       }
     },
 
+    /**
+     * Event handler for click of today text
+     * @param {Event} ev An event object
+     * @private
+     */
+    _onClickTodayHandler: function() {
+      this.setDate(Date.now());
+      this.close();
+    },
+
     /**
      * Update date from event-target
      * @param {HTMLElement} target An event target element

test/calendar/header.spec.js

@@ -11,6 +11,7 @@ var CLASS_NAME_NEXT_MONTH_BTN = constants.CLASS_NAME_NEXT_MONTH_BTN;
 var CLASS_NAME_NEXT_YEAR_BTN = constants.CLASS_NAME_NEXT_YEAR_BTN;
 var CLASS_NAME_PREV_MONTH_BTN = constants.CLASS_NAME_PREV_MONTH_BTN;
 var CLASS_NAME_PREV_YEAR_BTN = constants.CLASS_NAME_PREV_YEAR_BTN;
+var CLASS_NAME_TITLE_TODAY = constants.CLASS_NAME_TITLE_TODAY;
 
 describe('Calendar', function() {
   describe('Header', function() {
@@ -28,7 +29,8 @@ describe('Calendar', function() {
     beforeEach(function() {
       header = new Header(container, {
         language: 'en',
-        showJumpButtons: true
+        showJumpButtons: true,
+        showToday: true
       });
       header.render(new Date(2016, 11), 'date');
     });
@@ -73,6 +75,14 @@ describe('Calendar', function() {
       expect(spy).toHaveBeenCalled();
     });
 
+    it('should fire "today" custom event when click today text', function() {
+      var spy = jest.fn();
+      header.on('today', spy);
+
+      clickBtnInHeader(CLASS_NAME_TITLE_TODAY);
+      expect(spy).toHaveBeenCalled();
+    });
+
     it('should be able to destroy', function() {
       var nContainer = document.createElement('div');
       var nHeader = new Header(nContainer, {

test/datepicker/datepicker.spec.js

@@ -16,13 +16,19 @@ var DatePicker = require('../../src/js/datepicker');
 var Calendar = require('../../src/js/calendar');
 var constants = require('../../src/js/constants');
 
+var CLASS_NAME_TITLE_TODAY = constants.CLASS_NAME_TITLE_TODAY;
+
 var CLASS_NAME_SELECTABLE = 'tui-is-selectable';
 var CLASS_NAME_HIDDEN = 'tui-hidden';
 
 describe('Date Picker', function() {
   describe('date=null on constructor', function() {
     var datepicker, input, container;
 
+    function clickBtnInDatePicker(className) {
+      container.querySelector('.' + className).click();
+    }
+
     beforeEach(function() {
       container = document.createElement('div');
       input = document.createElement('input');
@@ -56,6 +62,18 @@ describe('Date Picker', function() {
 
       expect(datepicker.getDate()).toEqual(new Date(2016, 11, 3));
     });
+
+    it('should set date to today when click today text', function() {
+      var pickerDate;
+      var today = new Date();
+      datepicker.setDate(new Date(2016, 11, 3));
+
+      clickBtnInDatePicker(CLASS_NAME_TITLE_TODAY);
+
+      pickerDate = datepicker.getDate().toLocaleDateString();
+
+      expect(pickerDate).toBe(today.toLocaleDateString());
+    });
   });
 
   describe('apis - ', function() {
@@ -377,7 +395,8 @@ describe('Date Picker', function() {
       document.body.appendChild(td);
 
       datepicker._onClickHandler({
-        target: td
+        target: td,
+        preventDefault: jest.fn()
       });
 
       expect(datepicker.getDate().getTime()).toEqual(today.setHours(0, 0, 0, 0));
@@ -424,7 +443,8 @@ describe('Date Picker', function() {
       datepicker.autoClose = true;
       datepicker.open();
       datepicker._onClickHandler({
-        target: el
+        target: el,
+        preventDefault: jest.fn()
       });
 
       expect(datepicker.close).toHaveBeenCalled();
@@ -439,7 +459,8 @@ describe('Date Picker', function() {
       datepicker.autoClose = false;
       datepicker.open();
       datepicker._onClickHandler({
-        target: el
+        target: el,
+        preventDefault: jest.fn()
       });
 
       expect(datepicker.close).not.toHaveBeenCalled();