Koa 3649 datepicker calendar updates (Skyscanner#2310)

* [KOA-3649]: Updating calendar spacing * Updating UNRELEASED * Bump bpk-foundations-web to upgrade spacing values * Updating tests
giriawu · Dec 13, 2021 · 39e3874 · 39e3874
1 parent ce3a54e
commit 39e3874
Show file tree

Hide file tree

Showing 47 changed files with 620 additions and 588 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -0,0 +1,6 @@
+**Fixed:**
+
+- bpk-component-calendar:
+- bpk-component-datepicker:
+- bpk-component-scrollable-calendar:
+  - Updated sizing of calendar component to correct width and spacing
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -118,7 +118,7 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.7",
     "@babel/register": "^7.12.1",
-    "@skyscanner/bpk-foundations-web": "^2.1.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.1",
     "@storybook/addon-a11y": "^5.3.14",
     "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-knobs": "^5.3.14",

diff --git a/packages/bpk-animate-height/package.json b/packages/bpk-animate-height/package.json
@@ -20,7 +20,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.3.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.1",
     "bpk-component-button": "^5.0.18"
   }
 }
diff --git a/packages/bpk-component-accordion/package.json b/packages/bpk-component-accordion/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.3.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.1",
     "bpk-component-checkbox": "^3.0.21"
   }
 }
diff --git a/packages/bpk-component-badge/package.json b/packages/bpk-component-badge/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.3.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.1",
     "bpk-component-icon": "^9.1.5",
     "bpk-storybook-utils": "^1.0.19"
   }

diff --git a/packages/bpk-component-banner-alert/package.json b/packages/bpk-component-banner-alert/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.3.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.1",
     "bpk-animate-height": "^4.0.19",
     "bpk-component-close-button": "^3.0.21",
     "bpk-component-icon": "^9.1.5",

diff --git a/packages/bpk-component-barchart/package.json b/packages/bpk-component-barchart/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.3.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.1",
     "bpk-component-mobile-scroll-container": "^3.0.20",
     "bpk-mixins": "^24.0.7",
     "bpk-react-utils": "^4.0.1",

diff --git a/packages/bpk-component-breakpoint/package.json b/packages/bpk-component-breakpoint/package.json
@@ -23,6 +23,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.3.0"
+    "@skyscanner/bpk-foundations-web": "^4.3.1"
   }
 }
diff --git a/packages/bpk-component-calendar/package.json b/packages/bpk-component-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.3.0",
+    "@skyscanner/bpk-foundations-web": "^4.3.1",
     "bpk-component-aria-live": "^2.0.32",
     "bpk-component-icon": "^9.1.5",
     "bpk-component-select": "^5.0.15",

diff --git a/packages/bpk-component-calendar/src/BpkCalendar.module.css b/packages/bpk-component-calendar/src/BpkCalendar.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar{display:flex;width:100%;flex-direction:column;border-radius:.375rem}.bpk-calendar--fixed{width:19.25rem}.bpk-calendar__header{margin-top:1.5rem}.bpk-calendar__grid{margin-top:1.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar{display:flex;width:100%;flex-direction:column;border-radius:.375rem}.bpk-calendar--fixed{width:22.75rem}.bpk-calendar__header{margin-top:1.5rem}.bpk-calendar__grid{margin-top:1.5rem}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;padding:0 .25rem;text-align:center;vertical-align:middle}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem;justify-content:space-around}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;padding:0 .5rem;text-align:center;vertical-align:middle}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem;justify-content:space-around}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .25rem;font-weight:normal;box-shadow:0 1px 0 0 #dddde5;vertical-align:middle;box-sizing:content-box}.bpk-calendar-header__weekday--weekend{font-weight:bold}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .5rem;font-weight:normal;box-shadow:0 1px 0 0 #dddde5;vertical-align:middle;box-sizing:content-box}.bpk-calendar-header__weekday--weekend{font-weight:bold}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition-test.js b/packages/bpk-component-calendar/src/BpkCalendarGridTransition-test.js
@@ -50,13 +50,13 @@ describe('BpkCalendar', () => {
 
     expect(calendar.state('currentMonth')).toEqual(new Date(Date.UTC(2010, 1)));
     expect(calendar.state('isTransitioning')).toBe(false);
-    expect(calendar.state('transitionValue')).toBe('-19.25rem');
+    expect(calendar.state('transitionValue')).toBe('-22.75rem');
 
     // Next month
     calendar.setProps({ month: new Date(Date.UTC(2010, 2)) });
     expect(calendar.state('currentMonth')).toEqual(new Date(Date.UTC(2010, 2)));
     expect(calendar.state('isTransitioning')).toBe(false);
-    expect(calendar.state('transitionValue')).toBe('-19.25rem');
+    expect(calendar.state('transitionValue')).toBe('-22.75rem');
   });
 
   it('should transition to the previous month', () => {
@@ -69,13 +69,13 @@ describe('BpkCalendar', () => {
 
     expect(calendar.state('currentMonth')).toEqual(new Date(Date.UTC(2010, 1)));
     expect(calendar.state('isTransitioning')).toBe(false);
-    expect(calendar.state('transitionValue')).toBe('-19.25rem');
+    expect(calendar.state('transitionValue')).toBe('-22.75rem');
 
     // Previous month
     calendar.setProps({ month: new Date(Date.UTC(2010, 0)) });
     expect(calendar.state('currentMonth')).toEqual(new Date(Date.UTC(2010, 0)));
     expect(calendar.state('isTransitioning')).toBe(false);
-    expect(calendar.state('transitionValue')).toBe('-19.25rem');
+    expect(calendar.state('transitionValue')).toBe('-22.75rem');
   });
 
   it('should jump (without transition) to any other month', () => {
@@ -88,12 +88,12 @@ describe('BpkCalendar', () => {
 
     expect(calendar.state('currentMonth')).toEqual(new Date(Date.UTC(2010, 1)));
     expect(calendar.state('isTransitioning')).toBe(false);
-    expect(calendar.state('transitionValue')).toBe('-19.25rem');
+    expect(calendar.state('transitionValue')).toBe('-22.75rem');
 
     // 2 months ahead
     calendar.setProps({ month: new Date(Date.UTC(2010, 3)) });
     expect(calendar.state('currentMonth')).toEqual(new Date(Date.UTC(2010, 3)));
     expect(calendar.state('isTransitioning')).toBe(false);
-    expect(calendar.state('transitionValue')).toBe('-19.25rem');
+    expect(calendar.state('transitionValue')).toBe('-22.75rem');
   });
 });
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid-transition{position:relative;overflow:hidden}.bpk-calendar-grid-transition__dummy{display:inline-block;width:19.25rem}.bpk-calendar-grid-transition__strip{left:0;display:block;z-index:0;width:57.75rem}.bpk-calendar-grid-transition__strip--transitioning{z-index:1;transition:transform 200ms ease-in-out}.bpk-calendar-grid-transition__grid{display:inline-table;width:19.25rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid-transition{position:relative;overflow:hidden}.bpk-calendar-grid-transition__dummy{display:inline-block;width:22.75rem}.bpk-calendar-grid-transition__strip{left:0;display:block;z-index:0;width:68.25rem}.bpk-calendar-grid-transition__strip--transitioning{z-index:1;transition:transform 200ms ease-in-out}.bpk-calendar-grid-transition__grid{display:inline-table;width:22.75rem}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.js b/packages/bpk-component-calendar/src/BpkCalendarNav.js
@@ -68,80 +68,84 @@ const BpkCalendarNav = props => {
 
   return (
     <div className={getClassName('bpk-calendar-nav')}>
-      <div className={getClassName('bpk-calendar-nav__nudger')}>
-        <button
-          type="button"
-          className={getClassName('bpk-calendar-nav__button')}
-          id={`${id}_month_nudger_previous`}
-          onClick={changeMonth({
-            month: prevMonth,
-            min,
-            max,
-            callback: onMonthChange,
-            source: 'PREV',
-          })}
-          disabled={
-            disabled || !isWithinRange(prevMonth, { start: min, end: max })
-          }
-        >
-          <ArrowLeftIcon className={getClassName('bpk-calendar-nav__icon')} />
-          <span className={getClassName('bpk-calendar-nav__text--hidden')}>
-            {previousMonthLabel}
-          </span>
-        </button>
-      </div>
-      <div className={getClassName('bpk-calendar-nav__month')}>
-        <label
-          htmlFor={`${id}_select`}
-          className={getClassName('bpk-calendar-nav__text--hidden')}
-        >
-          {changeMonthLabel}
-        </label>
+      <div style={{ display: 'table-row' }}>
+        <div className={getClassName('bpk-calendar-nav__nudger')}>
+          <button
+            type="button"
+            className={getClassName('bpk-calendar-nav__button')}
+            id={`${id}_month_nudger_previous`}
+            onClick={changeMonth({
+              month: prevMonth,
+              min,
+              max,
+              callback: onMonthChange,
+              source: 'PREV',
+            })}
+            disabled={
+              disabled || !isWithinRange(prevMonth, { start: min, end: max })
+            }
+          >
+            <ArrowLeftIcon className={getClassName('bpk-calendar-nav__icon')} />
+            <span className={getClassName('bpk-calendar-nav__text--hidden')}>
+              {previousMonthLabel}
+            </span>
+          </button>
+        </div>
+        <div className={getClassName('bpk-calendar-nav__month')}>
+          <label
+            htmlFor={`${id}_select`}
+            className={getClassName('bpk-calendar-nav__text--hidden')}
+          >
+            {changeMonthLabel}
+          </label>
 
-        <BpkSelect
-          id={`${id}_select`}
-          name="months"
-          value={formatIsoMonth(baseMonth)}
-          disabled={disabled}
-          onChange={event => {
-            event.persist();
-            onMonthChange(event, {
-              month: parseIsoDate(event.target.value),
-              source: 'SELECT',
-            });
-          }}
-        >
-          {navigatableMonths.map(m => (
-            <option value={formatIsoMonth(m)} key={m.toString()}>
-              {formatMonth(m)}
-            </option>
-          ))}
-        </BpkSelect>
-      </div>
-      <div className={getClassName('bpk-calendar-nav__nudger')}>
-        <button
-          type="button"
-          className={getClassName('bpk-calendar-nav__button')}
-          id={`${id}_month_nudger_next`}
-          onClick={changeMonth({
-            month: nextMonth,
-            min,
-            max,
-            callback: onMonthChange,
-            source: 'NEXT',
-          })}
-          disabled={
-            disabled ||
-            !isWithinRange(addMonths(baseMonth, 1), { start: min, end: max })
-          }
-        >
-          <ArrowRightIcon className={getClassName('bpk-calendar-nav__icon')} />
-          <span className={getClassName('bpk-calendar-nav__text--hidden')}>
-            {nextMonthLabel}
-          </span>
-        </button>
+          <BpkSelect
+            id={`${id}_select`}
+            name="months"
+            value={formatIsoMonth(baseMonth)}
+            disabled={disabled}
+            onChange={event => {
+              event.persist();
+              onMonthChange(event, {
+                month: parseIsoDate(event.target.value),
+                source: 'SELECT',
+              });
+            }}
+          >
+            {navigatableMonths.map(m => (
+              <option value={formatIsoMonth(m)} key={m.toString()}>
+                {formatMonth(m)}
+              </option>
+            ))}
+          </BpkSelect>
+        </div>
+        <div className={getClassName('bpk-calendar-nav__nudger')}>
+          <button
+            type="button"
+            className={getClassName('bpk-calendar-nav__button')}
+            id={`${id}_month_nudger_next`}
+            onClick={changeMonth({
+              month: nextMonth,
+              min,
+              max,
+              callback: onMonthChange,
+              source: 'NEXT',
+            })}
+            disabled={
+              disabled ||
+              !isWithinRange(addMonths(baseMonth, 1), { start: min, end: max })
+            }
+          >
+            <ArrowRightIcon
+              className={getClassName('bpk-calendar-nav__icon')}
+            />
+            <span className={getClassName('bpk-calendar-nav__text--hidden')}>
+              {nextMonthLabel}
+            </span>
+          </button>
+        </div>
+        <BpkAriaLive>{formatMonth(baseMonth)}</BpkAriaLive>
       </div>
-      <BpkAriaLive>{formatMonth(baseMonth)}</BpkAriaLive>
     </div>
   );
 };

diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.module.css b/packages/bpk-component-calendar/src/BpkCalendarNav.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-nav{display:table}.bpk-calendar-nav__month{display:table-cell;width:16.625rem;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;width:2.375rem;padding:0 .25rem;text-align:center;vertical-align:middle;box-sizing:border-box}.bpk-calendar-nav__button{width:100%;height:2.25rem;padding:.375rem 0 .375rem 0;border:none;background:none;cursor:pointer;appearance:none;color:#0770e3;color:var(--bpk-calendar-nudger-icon-color, #0770e3)}.bpk-no-touch-support .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#084eb2;color:var(--bpk-calendar-nudger-icon-hover-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#084eb2;color:var(--bpk-calendar-nudger-icon-hover-color, #084eb2)}.bpk-calendar-nav__button:active{color:#042759;color:var(--bpk-calendar-nudger-icon-active-color, #042759)}.bpk-calendar-nav__button .bpk-calendar-nav__icon{fill:currentColor}html[dir='rtl'] .bpk-calendar-nav__button .bpk-calendar-nav__icon{transform:scaleX(-1)}.bpk-calendar-nav__button:disabled{cursor:not-allowed}.bpk-calendar-nav__button:disabled .bpk-calendar-nav__icon{fill:#dddde5}.bpk-calendar-nav__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-nav{display:table}.bpk-calendar-nav__month{display:table-cell;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;padding:0 .5rem;text-align:center;vertical-align:middle;box-sizing:border-box}.bpk-calendar-nav__button{width:100%;height:2.25rem;padding:.375rem 0 .375rem 0;border:none;background:none;cursor:pointer;appearance:none;color:#0770e3;color:var(--bpk-calendar-nudger-icon-color, #0770e3)}.bpk-no-touch-support .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#084eb2;color:var(--bpk-calendar-nudger-icon-hover-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-calendar-nav__button:hover:not(:active):not(:disabled){color:#084eb2;color:var(--bpk-calendar-nudger-icon-hover-color, #084eb2)}.bpk-calendar-nav__button:active{color:#042759;color:var(--bpk-calendar-nudger-icon-active-color, #042759)}.bpk-calendar-nav__button .bpk-calendar-nav__icon{fill:currentColor}html[dir='rtl'] .bpk-calendar-nav__button .bpk-calendar-nav__icon{transform:scaleX(-1)}.bpk-calendar-nav__button:disabled{cursor:not-allowed}.bpk-calendar-nav__button:disabled .bpk-calendar-nav__icon{fill:#dddde5}.bpk-calendar-nav__text--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss b/packages/bpk-component-calendar/src/BpkCalendarNav.module.scss
@@ -24,13 +24,11 @@
 
   &__month {
     display: table-cell;
-    width: 7 * ($bpk-calendar-day-size + ($bpk-calendar-day-spacing / 2));
     text-align: center;
   }
 
   &__nudger {
     display: table-cell;
-    width: $bpk-calendar-day-size + ($bpk-calendar-day-spacing / 2);
     padding: 0 $bpk-calendar-day-spacing;
     text-align: center;
     vertical-align: middle;