Update calendar to use new spacing grid

.storybook/storyshots-test.js

@@ -36,7 +36,7 @@ const beforeScreenshot = () =>
 // Allow a small amount of deviation to account for
 // CI running on a different OS than local development.
 const getMatchOptions = () => ({
-  failureThreshold: 0.1,
+  failureThreshold: 0,
   failureThresholdType: 'percent',
 });
 

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:18.375rem}.bpk-calendar__header{margin-top:.75rem}.bpk-calendar__grid{margin-top:.75rem}
+@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:15.75rem}.bpk-calendar__header{margin-top:1.5rem}.bpk-calendar__grid{margin-top:1.5rem}

packages/bpk-component-calendar/src/BpkCalendar.module.scss

@@ -19,6 +19,8 @@
 @import '~bpk-mixins/index';
 @import 'variables';
 
+$bpk-spacing-v2: true;
+
 .bpk-calendar {
   display: flex;
   width: 100%;
@@ -31,10 +33,10 @@
   }
 
   &__header {
-    margin-top: $bpk-spacing-sm;
+    margin-top: bpk-spacing-lg();
   }
 
   &__grid {
-    margin-top: $bpk-spacing-sm;
+    margin-top: bpk-spacing-lg();
   }
 }

packages/bpk-component-calendar/src/BpkCalendarDate.module.scss

@@ -18,6 +18,8 @@
 
 @import '~bpk-mixins/index';
 
+$bpk-spacing-v2: true;
+
 .bpk-calendar-date {
   width: $bpk-calendar-day-size;
   height: $bpk-calendar-day-size;
@@ -139,7 +141,8 @@
     }
 
     &.bpk-calendar-date--colored {
-      border: ($bpk-spacing-xs / 2) solid $bpk-calendar-day-focused-border-color;
+      border: (bpk-spacing-sm() / 2) solid
+        $bpk-calendar-day-focused-border-color;
       box-shadow: 0 0 0 1px $bpk-color-white inset;
     }
   }

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 .1875rem;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:0.25rem 0;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;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}

packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss

@@ -35,7 +35,7 @@
 
   &__date {
     width: 100%;
-    padding: 0 ($bpk-calendar-day-spacing / 2);
+    padding: 0;
     text-align: center;
     vertical-align: middle;
 
@@ -62,7 +62,7 @@
 
   &__week {
     display: flex;
-    padding: bpk-spacing-sm() 0;
+    padding-top: bpk-spacing-lg();
     justify-content: space-around;
   }
 }

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 .1875rem 0 .1875rem;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;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}

packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss

@@ -40,7 +40,7 @@
   &__weekday {
     display: table-cell;
     height: $bpk-calendar-day-size;
-    padding: 0 ($bpk-calendar-day-spacing / 2) 0 ($bpk-calendar-day-spacing / 2);
+    padding: 0;
     font-weight: normal;
     box-shadow: $shadow-bottom;
     vertical-align: middle;

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:18.375rem}.bpk-calendar-grid-transition__strip{left:0;display:block;z-index:0;width:55.125rem}.bpk-calendar-grid-transition__strip--transitioning{z-index:1;transition:transform 200ms ease-in-out}.bpk-calendar-grid-transition__grid{display:inline-table;width:18.375rem}
+@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:15.75rem}.bpk-calendar-grid-transition__strip{left:0;display:block;z-index:0;width:47.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:15.75rem}

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:13.125rem;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;width:2.625rem;padding:0 .1875rem;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;width:15.75rem;text-align:center}.bpk-calendar-nav__nudger{display:table-cell;width:2.25rem;padding:0;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)}

packages/bpk-component-calendar/src/BpkCalendarNav.module.scss

@@ -24,14 +24,14 @@
 
   &__month {
     display: table-cell;
-    width: ($bpk-calendar-day-size * 5) + ($bpk-calendar-day-spacing * 5);
+    width: $bpk-calendar-day-size * 7;
     text-align: center;
   }
 
   &__nudger {
     display: table-cell;
-    width: $bpk-calendar-day-size + $bpk-calendar-day-spacing;
-    padding: 0 ($bpk-calendar-day-spacing / 2);
+    width: $bpk-calendar-day-size;
+    padding: 0;
     text-align: center;
     vertical-align: middle;
     box-sizing: border-box;

packages/bpk-component-calendar/src/_variables.scss

@@ -21,5 +21,4 @@
 $shadow-bottom: 0 1px 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-blacklist */
 $shadow-left: -1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-blacklist */
 $shadow-right: 1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-blacklist */
-$calendar-width: 7 * ($bpk-calendar-day-size + $bpk-calendar-day-spacing);
-$calendar-height: 6 * ($bpk-calendar-day-size + $bpk-calendar-day-spacing);
+$calendar-width: 7 * $bpk-calendar-day-size;

packages/bpk-component-calendar/src/utils.js

@@ -16,10 +16,7 @@
  * limitations under the License.
  */
 
-import {
-  calendarDaySize,
-  calendarDaySpacing,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { calendarDaySize } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
 
@@ -36,15 +33,8 @@ const splitToken = value => {
 
 export const getCalendarGridWidth = (multiplier = 1) => {
   const [sizeValue, sizeUnit] = splitToken(calendarDaySize);
-  const [spacingValue, spacingUnit] = splitToken(calendarDaySpacing);
 
-  if (sizeUnit !== spacingUnit) {
-    throw new Error(
-      `'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`,
-    );
-  }
-
-  const width = multiplier * (7 * (sizeValue + spacingValue));
+  const width = multiplier * (7 * sizeValue);
   return `${width}${sizeUnit}`;
 };
 

packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.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)}}.bpk-scrollable-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-scrollable-calendar-grid__title{margin:1.125rem 0 .75rem .75rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-scrollable-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-scrollable-calendar-grid__title{margin-top:1.5rem}

packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.scss

@@ -18,12 +18,14 @@
 
 @import '~bpk-mixins/index';
 
+$bpk-spacing-v2: true;
+
 .bpk-scrollable-calendar-grid {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
 
   &__title {
-    margin: $bpk-spacing-md 0 $bpk-spacing-sm $bpk-spacing-sm;
+    margin-top: bpk-spacing-lg();
   }
 }

packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.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)}}.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:18.375rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__item{display:inline-table}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__item{display:inline-table}

packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.scss

@@ -18,7 +18,9 @@
 
 @import '~bpk-mixins/index';
 
-$calendar-height: 7 * ($bpk-calendar-day-size + $bpk-calendar-day-spacing);
+$bpk-spacing-v2: true;
+
+$calendar-height: 7 * ($bpk-calendar-day-size + bpk-spacing-lg());
 
 .bpk-scrollable-calendar-grid-list {
   position: relative;