fix(localize): unforce defaults when options are given

should not force defaults when at least one of the three date options is given (day, month, year).
also added test cases and storybook demo.

Author: r4zorgeek

packages/localize/src/date/formatDate.js

@@ -13,22 +13,16 @@ export function formatDate(date, options) {
     return '';
   }
   const formatOptions = options || {};
-  // make sure months and days are always 2-digits
-  if (!options) {
+  /**
+   * Set smart defaults if:
+   * 1) no options object is passed
+   * 2) options object is passed, but none of the following props on it: day, month, year.
+   */
+  if (!options || (options && !options.day && !options.month && !options.year)) {
     formatOptions.year = 'numeric';
     formatOptions.month = '2-digit';
     formatOptions.day = '2-digit';
   }
-  if (options && !(options && options.year)) {
-    formatOptions.year = 'numeric';
-  }
-  if (options && !(options && options.month)) {
-    formatOptions.month = '2-digit';
-  }
-  if (options && !(options && options.day)) {
-    formatOptions.day = '2-digit';
-  }
-
   const computedLocale = getLocale(formatOptions && formatOptions.locale);
   let formattedDate = '';
   try {

packages/localize/stories/date.stories.js

@@ -61,6 +61,51 @@ storiesOf('Localize System|Date', module).add(
             })}
           </td>
         </tr>
+        <tr>
+          <td>Date without year</td>
+          <td>
+            <code>
+              formatDate(new Date(), {weekday:'long',month:'long',day:'2-digit'})
+            </code>
+          </td>
+          <td>
+            ${formatDate(new Date(), {
+              weekday: 'long',
+              month: 'long',
+              day: '2-digit',
+            })}
+          </td>
+        </tr>
+        <tr>
+          <td>Date without month</td>
+          <td>
+            <code>
+              formatDate(new Date(), {weekday:'long',year:'numeric',day:'2-digit'})
+            </code>
+          </td>
+          <td>
+            ${formatDate(new Date(), {
+              weekday: 'long',
+              year: 'numeric',
+              day: '2-digit',
+            })}
+          </td>
+        </tr>
+        <tr>
+          <td>Date without day</td>
+          <td>
+            <code>
+              formatDate(new Date(), {weekday:'long',year:'numeric',month:'long'})
+            </code>
+          </td>
+          <td>
+            ${formatDate(new Date(), {
+              weekday: 'long',
+              month: 'long',
+              year: 'numeric',
+            })}
+          </td>
+        </tr>
         <tr>
           <td>Locale</td>
           <td><code>formatDate(new Date(){locale:'nl-NL'})</code></td>

packages/localize/test/date/formatDate.test.js

@@ -108,6 +108,36 @@ describe('formatDate', () => {
     expect(formatDate(parsedDate, options)).to.equal('maandag 01 januari 1940');
   });
 
+  it('handles options without year', async () => {
+    const options = {
+      weekday: 'long',
+      month: 'long',
+      day: '2-digit',
+    };
+    const parsedDate = parseDate('12.10.2019');
+    expect(formatDate(parsedDate, options)).to.equal('Saturday, 12 October');
+  });
+
+  it('handles options without month', async () => {
+    const options = {
+      weekday: 'long',
+      year: 'numeric',
+      day: '2-digit',
+    };
+    const parsedDate = parseDate('12.10.2019');
+    expect(formatDate(parsedDate, options)).to.equal('Saturday 12 2019');
+  });
+
+  it('handles options without day', async () => {
+    const options = {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+    };
+    const parsedDate = parseDate('12.10.2019');
+    expect(formatDate(parsedDate, options)).to.equal('October 2019 Saturday');
+  });
+
   it('returns empty string when input is not a Date object', async () => {
     const date = '1-1-2016';
     expect(formatDate(date)).to.equal('');