update color and spacing in calendar component

giriawu · Dec 2, 2021 · 43f5056 · 43f5056
1 parent be879c0
commit 43f5056
Show file tree

Hide file tree

Showing 50 changed files with 61 additions and 46 deletions.
diff --git a/..._/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-1-snap.png b/..._/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-1-snap.png
diff --git a/...yshots-test-js-visual-tests-bpk-component-calendar-visual-test-range-1-snap.png b/...yshots-test-js-visual-tests-bpk-component-calendar-visual-test-range-1-snap.png
diff --git a/...storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-1-snap.png b/...storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-1-snap.png
diff --git a/...hots-test-js-visual-tests-bpk-component-datepicker-visual-test-range-1-snap.png b/...hots-test-js-visual-tests-bpk-component-datepicker-visual-test-range-1-snap.png
diff --git a/...s-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-1-snap.png b/...s-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-1-snap.png
diff --git a/...-js-visual-tests-bpk-component-scrollable-calendar-visual-test-range-1-snap.png b/...-js-visual-tests-bpk-component-scrollable-calendar-visual-test-range-1-snap.png
diff --git a/.storybook/storyshots-test.js b/.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',
 });
 

diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -0,0 +1,6 @@
+**Breaking:**
+
+- bpk-component-calendar:
+- bpk-component-scrollable-calendar:
+- bpk-component-datepicker:
+    - Updated calendar component to use the new spacing grid. This component will now appear larger in height.
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.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-button": "^5.0.15"
   }
 }
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.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-checkbox": "^3.0.18"
   }
 }
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.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-icon": "^9.1.2",
     "bpk-storybook-utils": "^1.0.16"
   }

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.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-animate-height": "^4.0.16",
     "bpk-component-close-button": "^3.0.18",
     "bpk-component-icon": "^9.1.2",

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.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-mobile-scroll-container": "^3.0.17",
     "bpk-mixins": "^24.0.4",
     "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.1.1"
+    "@skyscanner/bpk-foundations-web": "^4.2.0"
   }
 }
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.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-aria-live": "^2.0.29",
     "bpk-component-icon": "^9.1.2",
     "bpk-component-select": "^5.0.12",

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:15.75rem}.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:19.25rem}.bpk-calendar__header{margin-top:1.5rem}.bpk-calendar__grid{margin-top:1.5rem}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.module.css b/packages/bpk-component-calendar/src/BpkCalendarDate.module.css
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;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 .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}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss
@@ -35,7 +35,7 @@
 
   &__date {
     width: 100%;
-    padding: 0;
+    padding: 0 $bpk-calendar-day-spacing;
     text-align: center;
     vertical-align: middle;
 

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;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 .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}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss
@@ -40,7 +40,7 @@
   &__weekday {
     display: table-cell;
     height: $bpk-calendar-day-size;
-    padding: 0;
+    padding: 0 $bpk-calendar-day-spacing;
     font-weight: normal;
     box-shadow: $shadow-bottom;
     vertical-align: middle;

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: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}
+@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}
diff --git a/packages/bpk-component-calendar/src/_variables.scss b/packages/bpk-component-calendar/src/_variables.scss
@@ -21,4 +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;
+$calendar-width: 7 * ($bpk-calendar-day-size + (2 * $bpk-calendar-day-spacing));
diff --git a/packages/bpk-component-calendar/src/utils.js b/packages/bpk-component-calendar/src/utils.js
@@ -16,7 +16,10 @@
  * limitations under the License.
  */
 
-import { calendarDaySize } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import {
+  calendarDaySize,
+  calendarDaySpacing,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
 
@@ -33,8 +36,14 @@ const splitToken = value => {
 
 export const getCalendarGridWidth = (multiplier = 1) => {
   const [sizeValue, sizeUnit] = splitToken(calendarDaySize);
+  const [spacingValue, spacingUnit] = splitToken(calendarDaySpacing);
 
-  const width = multiplier * (7 * sizeValue);
+  if (sizeUnit !== spacingUnit) {
+    throw new Error(
+      `'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`,
+    );
+  }
+  const width = multiplier * (7 * (sizeValue + 2 * spacingValue));
   return `${width}${sizeUnit}`;
 };
 

diff --git a/packages/bpk-component-checkbox/package.json b/packages/bpk-component-checkbox/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-datatable/package.json b/packages/bpk-component-datatable/package.json
@@ -25,6 +25,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1"
+    "@skyscanner/bpk-foundations-web": "^4.2.0"
   }
 }
diff --git a/packages/bpk-component-datepicker/package.json b/packages/bpk-component-datepicker/package.json
@@ -27,7 +27,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-drawer/package.json b/packages/bpk-component-drawer/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-close-button": "^3.0.18",
     "bpk-component-icon": "^9.1.2",
     "bpk-component-link": "^3.0.16",

diff --git a/packages/bpk-component-form-validation/package.json b/packages/bpk-component-form-validation/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-button": "^5.0.15",
     "bpk-component-checkbox": "^3.0.18",
     "bpk-component-icon": "^9.1.2",

diff --git a/packages/bpk-component-horizontal-nav/package.json b/packages/bpk-component-horizontal-nav/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-text": "^4.0.18",
     "bpk-storybook-utils": "^1.0.16"
   }

diff --git a/packages/bpk-component-icon/package.json b/packages/bpk-component-icon/package.json
@@ -17,8 +17,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
-    "@skyscanner/bpk-svgs": "^14.0.12",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-svgs": "^14.0.13",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"

diff --git a/packages/bpk-component-image/package.json b/packages/bpk-component-image/package.json
@@ -24,7 +24,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-mobile-scroll-container": "^3.0.17",
     "bpk-component-text": "^4.0.18"
   }

diff --git a/packages/bpk-component-link/package.json b/packages/bpk-component-link/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-mobile-scroll-container/package.json b/packages/bpk-component-mobile-scroll-container/package.json
@@ -23,6 +23,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1"
+    "@skyscanner/bpk-foundations-web": "^4.2.0"
   }
 }
diff --git a/packages/bpk-component-navigation-bar/package.json b/packages/bpk-component-navigation-bar/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-icon": "^9.1.2",
     "bpk-storybook-utils": "^1.0.16"
   }

diff --git a/packages/bpk-component-navigation-stack/package.json b/packages/bpk-component-navigation-stack/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",

diff --git a/packages/bpk-component-nudger/package.json b/packages/bpk-component-nudger/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-button": "^5.0.15",
     "bpk-component-icon": "^9.1.2",
     "bpk-mixins": "^24.0.4",

diff --git a/packages/bpk-component-phone-input/package.json b/packages/bpk-component-phone-input/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-input": "^6.0.28",
     "bpk-component-label": "^5.0.16",
     "bpk-component-select": "^5.0.12",

diff --git a/packages/bpk-component-progress/package.json b/packages/bpk-component-progress/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "lodash.clamp": "^4.0.3",

diff --git a/packages/bpk-component-radio/package.json b/packages/bpk-component-radio/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-rating/package.json b/packages/bpk-component-rating/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-text": "^4.0.18"
   }
 }
diff --git a/packages/bpk-component-scrollable-calendar/package.json b/packages/bpk-component-scrollable-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-calendar": "^10.0.2",
     "bpk-component-text": "^4.0.18",
     "bpk-mixins": "^24.0.4",

diff --git a/packages/bpk-component-section-list/package.json b/packages/bpk-component-section-list/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-icon": "^9.1.2",
     "bpk-component-text": "^4.0.18",
     "bpk-mixins": "^24.0.4",

diff --git a/packages/bpk-component-slider/package.json b/packages/bpk-component-slider/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",