@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-calendar/src/{date-utils.ts → date-utils.js}

@@ -37,9 +37,6 @@ import setYear from 'date-fns/setYear';
 import startOfDay from 'date-fns/startOfDay';
 import parseISO from 'date-fns/parseISO';
 import format from 'date-fns/format';
-
-import type { DaysOfWeek } from './custom-proptypes';
-
 const ONE_MINUTE_IN_MS = 60 * 1000;
 const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
 
@@ -53,16 +50,14 @@ const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
 // To go aroud this problem we're mostly avoiding date objects and using UTC when that's not
 // possible.
 
-function utc(year: number, month: number, date?: number) {
+function utc(year, month, date) {
   return new Date(Date.UTC(year, month, date));
 }
-
-function daysInMonth(year: number, month: number) {
+function daysInMonth(year, month) {
   // Gets the last day of the month specified
   return new Date(year, month + 1, 0).getDate();
 }
-
-function dateAtStartOfDay(year: number, month: number, day?: number) {
+function dateAtStartOfDay(year, month, day) {
   const date = utc(year, month, day);
   const tzOffset = date.getTimezoneOffset();
 
@@ -77,36 +72,21 @@ function dateAtStartOfDay(year: number, month: number, day?: number) {
   }
   return date;
 }
-
-function addDay(year: number, month: number, day?: number) {
+function addDay(year, month, day) {
   const date = utc(year, month, day);
   date.setUTCDate(date.getUTCDate() + 1);
   return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
 }
-
-function startOfWeek(
-  year: number,
-  month: number,
-  day: number,
-  weekStartsOn: number,
-) {
+function startOfWeek(year, month, day, weekStartsOn) {
   const date = utc(year, month, day);
   const weekDay = date.getUTCDay();
   const diff = (weekDay < weekStartsOn ? 7 : 0) + weekDay - weekStartsOn;
   date.setUTCDate(date.getUTCDate() - diff);
   return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
 }
-
-function getCalendarMonthWeeks(date: Date, weekStartsOn: number) {
-  let [year, month, day] = startOfWeek(
-    date.getFullYear(),
-    date.getMonth(),
-    1,
-    weekStartsOn,
-  );
-
+function getCalendarMonthWeeks(date, weekStartsOn) {
+  let [year, month, day] = startOfWeek(date.getFullYear(), date.getMonth(), 1, weekStartsOn);
   const weeksInMonth = [];
-
   for (let i = 0; i < 6; i += 1) {
     const currWeek = [];
     for (let j = 0; j < 7; j += 1) {
@@ -117,55 +97,50 @@ function getCalendarMonthWeeks(date: Date, weekStartsOn: number) {
   }
   return weeksInMonth;
 }
-
-function getLastDayOfWeekend(daysOfWeek: DaysOfWeek) {
-  const weekend = daysOfWeek.map((day) => day.isWeekend);
-
+function getLastDayOfWeekend(daysOfWeek) {
+  const weekend = daysOfWeek.map(day => day.isWeekend);
   if (weekend[0] && weekend[6]) {
     // weekend stretches over turn the of the week
     return daysOfWeek[weekend.indexOf(false) - 1].index;
   }
   return daysOfWeek[weekend.lastIndexOf(true)].index;
 }
-
-function getFirstDayOfWeekend(daysOfWeek: DaysOfWeek) {
-  const weekend = daysOfWeek.map((day) => day.isWeekend);
-
+function getFirstDayOfWeekend(daysOfWeek) {
+  const weekend = daysOfWeek.map(day => day.isWeekend);
   if (weekend[0] && weekend[6]) {
     // weekend stretches over turn the of the week
     return daysOfWeek[weekend.lastIndexOf(false) + 1].index;
   }
   return daysOfWeek[weekend.indexOf(true)].index;
 }
-
-const orderDaysOfWeek = (daysOfWeek: DaysOfWeek, weekStartsOn: number) => {
+const orderDaysOfWeek = (daysOfWeek, weekStartsOn) => {
   // Sorted in [sun, mon, ..., sat]
   const sortedDaysOfWeek = daysOfWeek.slice().sort((a, b) => a.index - b.index);
   // Ordered according to weekStartsOn, e.g. [mon, tue, ..., sun]
-  return [
-    ...sortedDaysOfWeek.slice(weekStartsOn),
-    ...sortedDaysOfWeek.slice(0, weekStartsOn),
-  ];
+  return [...sortedDaysOfWeek.slice(weekStartsOn), ...sortedDaysOfWeek.slice(0, weekStartsOn)];
 };
 
 /* Takes arbitrary dates and returns the beginning of the first and enf of the last month containing these dates  */
-function getMonthRange(from: Date, to: Date) {
+function getMonthRange(from, to) {
   return {
     min: startOfMonth(from),
-    max: endOfMonth(to),
+    max: endOfMonth(to)
   };
 }
-
-function getMonthsInRange(from: Date, to: Date) {
-  const { max, min } = getMonthRange(from, to);
+function getMonthsInRange(from, to) {
+  const {
+    max,
+    min
+  } = getMonthRange(from, to);
   let currentMonth = startOfMonth(from);
   const monthsInRange = [];
-
-  while (isWithinRange(currentMonth, { start: min, end: max })) {
+  while (isWithinRange(currentMonth, {
+    start: min,
+    end: max
+  })) {
     monthsInRange.push(currentMonth);
     currentMonth = addMonths(currentMonth, 1);
   }
-
   return monthsInRange;
 }
 
@@ -173,11 +148,14 @@ function getMonthsInRange(from: Date, to: Date) {
 Adjusts a date, if necessary, to fit within a range.
 If date passed in is null, it'll return the minimum date.
 */
-const dateToBoundaries = (date: Date | null, minDate: Date, maxDate: Date) => {
+const dateToBoundaries = (date, minDate, maxDate) => {
   if (!date) {
     return minDate;
   }
-  if (isWithinRange(date, { start: minDate, end: maxDate })) {
+  if (isWithinRange(date, {
+    start: minDate,
+    end: maxDate
+  })) {
     return date;
   }
   if (isBefore(date, minDate)) {
@@ -185,45 +163,11 @@ const dateToBoundaries = (date: Date | null, minDate: Date, maxDate: Date) => {
   }
   return maxDate;
 };
-
-const setMonthYear = (date: Date | null, newMonth: number, newYear: number) => {
+const setMonthYear = (date, newMonth, newYear) => {
   const dateToUse = date || new Date(newYear, newMonth, 1);
   return setYear(setMonth(dateToUse, newMonth), newYear);
 };
-
 const parseIsoDate = parseISO;
-const formatIsoDate = (date: Date) => format(date, 'yyyy-MM-dd');
-const formatIsoMonth = (date: Date) => format(date, 'yyyy-MM');
-
-export {
-  getCalendarMonthWeeks,
-  getFirstDayOfWeekend,
-  getLastDayOfWeekend,
-  getMonthsInRange,
-  getMonthRange,
-  getDay,
-  dateToBoundaries,
-  isWithinRange,
-  isSaturday,
-  isSunday,
-  isToday,
-  isSameDay,
-  isSameWeek,
-  isSameMonth,
-  isBefore,
-  isAfter,
-  differenceInCalendarMonths,
-  addMonths,
-  addDays,
-  orderDaysOfWeek,
-  setMonthYear,
-  startOfMonth,
-  lastDayOfMonth,
-  startOfDay,
-  format,
-  daysInMonth,
-  formatIsoDate,
-  formatIsoMonth,
-  parseIsoDate,
-  endOfMonth,
-};
+const formatIsoDate = date => format(date, 'yyyy-MM-dd');
+const formatIsoMonth = date => format(date, 'yyyy-MM');
+export { getCalendarMonthWeeks, getFirstDayOfWeekend, getLastDayOfWeekend, getMonthsInRange, getMonthRange, getDay, dateToBoundaries, isWithinRange, isSaturday, isSunday, isToday, isSameDay, isSameWeek, isSameMonth, isBefore, isAfter, differenceInCalendarMonths, addMonths, addDays, orderDaysOfWeek, setMonthYear, startOfMonth, lastDayOfMonth, startOfDay, format, daysInMonth, formatIsoDate, formatIsoMonth, parseIsoDate, endOfMonth };

package/bpk-component-calendar/src/themeAttributes.js

@@ -0,0 +1,19 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default ['calendarDateTextColor', 'calendarDateTextHoverColor', 'calendarDateTextActiveColor', 'calendarDateTextFocusColor', 'calendarDateTextSelectedColor', 'calendarDateSelectedBackgroundColor', 'calendarDateFocusedBorderColor', 'calendarNudgerIconColor', 'calendarNudgerIconHoverColor', 'calendarNudgerIconActiveColor'];

package/bpk-component-calendar/src/{utils.ts → utils.js}

@@ -16,47 +16,34 @@
  * limitations under the License.
  */
 
-import {
-  calendarDaySize,
-  calendarDaySpacing, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { calendarDaySize, calendarDaySpacing // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
 const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
-
-const splitToken = (value: string) => {
+const splitToken = value => {
   const match = value.match(CSS_UNIT_REGEX);
   if (!match) {
-    throw new Error(
-      `Invalid token value. Expecting a valid css unit, got ${value}`,
-    );
+    throw new Error(`Invalid token value. Expecting a valid css unit, got ${value}`);
   }
   const [_, val, unit] = match; // eslint-disable-line no-unused-vars
   return [parseFloat(val), unit];
 };
-
 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}`,
-    );
+    throw new Error(`'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`);
   }
   // @ts-expect-error TS doesn't correctly read the size and spacing values type i.e. numbers as returned by parseFloat
   const width = multiplier * (7 * (sizeValue + 2 * spacingValue));
   return `${width}${sizeUnit}`;
 };
-
-export const getTransformStyles = (transformValue: string) => {
+export const getTransformStyles = transformValue => {
   const transform = `translateX(${transformValue})`;
   return {
     transform,
     msTransform: transform,
     MozTransform: transform,
-    WebkitTransform: transform,
+    WebkitTransform: transform
   };
 };
-
-export const isTransitionEndSupported = () =>
-  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+export const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);

package/bpk-component-calendar/test-utils.js

@@ -0,0 +1,239 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import format from 'date-fns/format';
+export const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
+export const formatDateFullArabic = date => {
+  const dateString = 'EEEE, dd، MMMM، yyyy';
+  const newString = dateString.replace('yyyy', `${date.getUTCFullYear()}`);
+  return format(date, newString);
+};
+export const formatDateFullJapanese = date => {
+  const dateString = 'Y年M月d日EEEE';
+  const newString = dateString.replace('Y', `${date.getUTCFullYear()}`);
+  return format(date, newString);
+};
+export const formatMonth = date => format(date, 'MMMM yyyy');
+export const formatMonthArabic = date => {
+  const months = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
+  return `${months[date.getMonth()]} ${date.getFullYear()}`;
+};
+export const formatMonthJapanese = date => {
+  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+  return `${date.getFullYear()}年${months[date.getMonth()]}`;
+};
+export const weekDays = [{
+  name: 'Sunday',
+  nameAbbr: 'Sun',
+  nameNarrow: 'S',
+  index: 0,
+  isWeekend: true
+}, {
+  name: 'Monday',
+  nameAbbr: 'Mon',
+  nameNarrow: 'M',
+  index: 1,
+  isWeekend: false
+}, {
+  name: 'Tuesday',
+  nameAbbr: 'Tue',
+  nameNarrow: 'T',
+  index: 2,
+  isWeekend: false
+}, {
+  name: 'Wednesday',
+  nameAbbr: 'Wed',
+  nameNarrow: 'W',
+  index: 3,
+  isWeekend: false
+}, {
+  name: 'Thursday',
+  nameAbbr: 'Thu',
+  nameNarrow: 'T',
+  index: 4,
+  isWeekend: false
+}, {
+  name: 'Friday',
+  nameAbbr: 'Fri',
+  nameNarrow: 'F',
+  index: 5,
+  isWeekend: false
+}, {
+  name: 'Saturday',
+  nameAbbr: 'Sat',
+  nameNarrow: 'S',
+  index: 6,
+  isWeekend: true
+}];
+export const weekDaysMoreWeekend = [{
+  name: 'Sunday',
+  nameAbbr: 'Sun',
+  nameNarrow: 'S',
+  index: 0,
+  isWeekend: true
+}, {
+  name: 'Monday',
+  nameAbbr: 'Mon',
+  nameNarrow: 'M',
+  index: 1,
+  isWeekend: false
+}, {
+  name: 'Tuesday',
+  nameAbbr: 'Tue',
+  nameNarrow: 'T',
+  index: 2,
+  isWeekend: false
+}, {
+  name: 'Wednesday',
+  nameAbbr: 'Wed',
+  nameNarrow: 'W',
+  index: 3,
+  isWeekend: false
+}, {
+  name: 'Thursday',
+  nameAbbr: 'Thu',
+  nameNarrow: 'T',
+  index: 4,
+  isWeekend: false
+}, {
+  name: 'Friday',
+  nameAbbr: 'Fri',
+  nameNarrow: 'F',
+  index: 5,
+  isWeekend: true
+}, {
+  name: 'Saturday',
+  nameAbbr: 'Sat',
+  nameNarrow: 'S',
+  index: 6,
+  isWeekend: true
+}];
+export const weekDaysArabic = [{
+  name: 'الأحد',
+  nameAbbr: 'الأحد',
+  nameShort: 'الأحد',
+  nameNarrow: 'ح',
+  index: 0,
+  cldrKey: 'sun',
+  isWeekend: false
+}, {
+  name: 'الاثنين',
+  nameAbbr: 'الاثنين',
+  nameShort: 'الاثنين',
+  nameNarrow: 'ن',
+  index: 1,
+  cldrKey: 'mon',
+  isWeekend: false
+}, {
+  name: 'الثلاثاء',
+  nameAbbr: 'الثلاثاء',
+  nameShort: 'الثلاثاء',
+  nameNarrow: 'ث',
+  index: 2,
+  cldrKey: 'tue',
+  isWeekend: false
+}, {
+  name: 'الأربعاء',
+  nameAbbr: 'الأربعاء',
+  nameShort: 'الأربعاء',
+  nameNarrow: 'ر',
+  index: 3,
+  cldrKey: 'wed',
+  isWeekend: false
+}, {
+  name: 'الخميس',
+  nameAbbr: 'الخميس',
+  nameShort: 'الخميس',
+  nameNarrow: 'خ',
+  index: 4,
+  cldrKey: 'thu',
+  isWeekend: false
+}, {
+  name: 'الجمعة',
+  nameAbbr: 'الجمعة',
+  nameShort: 'الجمعة',
+  nameNarrow: 'ج',
+  index: 5,
+  cldrKey: 'fri',
+  isWeekend: true
+}, {
+  name: 'السبت',
+  nameAbbr: 'السبت',
+  nameShort: 'السبت',
+  nameNarrow: 'س',
+  index: 6,
+  cldrKey: 'sat',
+  isWeekend: true
+}];
+export const weekDaysJapanese = [{
+  name: '日曜日',
+  nameAbbr: '日',
+  nameShort: '日',
+  nameNarrow: '日',
+  index: 0,
+  cldrKey: 'sun',
+  isWeekend: true
+}, {
+  name: '月曜日',
+  nameAbbr: '月',
+  nameShort: '月',
+  nameNarrow: '月',
+  index: 1,
+  cldrKey: 'mon',
+  isWeekend: false
+}, {
+  name: '火曜日',
+  nameAbbr: '火',
+  nameShort: '火',
+  nameNarrow: '火',
+  index: 2,
+  cldrKey: 'tue',
+  isWeekend: false
+}, {
+  name: '水曜日',
+  nameAbbr: '水',
+  nameShort: '水',
+  nameNarrow: '水',
+  index: 3,
+  cldrKey: 'wed',
+  isWeekend: false
+}, {
+  name: '木曜日',
+  nameAbbr: '木',
+  nameShort: '木',
+  nameNarrow: '木',
+  index: 4,
+  cldrKey: 'thu',
+  isWeekend: false
+}, {
+  name: '金曜日',
+  nameAbbr: '金',
+  nameShort: '金',
+  nameNarrow: '金',
+  index: 5,
+  cldrKey: 'fri',
+  isWeekend: false
+}, {
+  name: '土曜日',
+  nameAbbr: '土',
+  nameShort: '土',
+  nameNarrow: '土',
+  index: 6,
+  cldrKey: 'sat',
+  isWeekend: true
+}];

package/bpk-component-card/{index.ts → index.js}

@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 
-import BpkCard from './src/BpkCard';
-import BpkCardWrapper from './src/BpkCardWrapper';
-import BpkDividedCard, { ORIENTATION } from './src/BpkDividedCard';
-
+import BpkCard from "./src/BpkCard";
+import BpkCardWrapper from "./src/BpkCardWrapper";
+import BpkDividedCard, { ORIENTATION } from "./src/BpkDividedCard";
 export { ORIENTATION, BpkDividedCard, BpkCardWrapper };
-
-export default BpkCard;
+export default BpkCard;

package/bpk-component-card/src/{BpkCard.tsx → BpkCard.js}

@@ -16,24 +16,10 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkCard.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCard.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: ReactNode | string;
-  className?: string | null;
-  href?: string | null;
-  padded?: boolean;
-  blank?: boolean;
-  atomic?: boolean;
-  [rest: string]: any;
-};
-
 const BpkCard = ({
   atomic = true,
   blank = false,
@@ -42,21 +28,16 @@ const BpkCard = ({
   href = null,
   padded = true,
   ...rest
-}: Props) => {
-  const classNames = getClassName(
-    'bpk-card',
-    atomic && !href && 'bpk-card--atomic-button',
-    padded && 'bpk-card--padded',
-    className,
-  );
-
-  const atomicProps: { tabIndex?: number; role?: string } = {};
-
+}) => {
+  const classNames = getClassName('bpk-card', atomic && !href && 'bpk-card--atomic-button', padded && 'bpk-card--padded', className);
+  const atomicProps = {};
   if (href) {
     let blankProps = {};
-
     if (blank) {
-      blankProps = { target: '_blank', rel: 'noopener noreferrer' };
+      blankProps = {
+        target: '_blank',
+        rel: 'noopener noreferrer'
+      };
     }
 
     // If the link is non-atomic, disable keyboard focus and make the screen-reader ignore the outer element.
@@ -64,35 +45,35 @@ const BpkCard = ({
       atomicProps.tabIndex = -1;
       atomicProps.role = 'group';
     }
-
     return (
+      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <a
-        href={href}
-        className={classNames}
-        {...atomicProps}
-        {...blankProps}
-        {...rest}
-      >
-        {children}
-      </a>
+      _jsx("a", {
+        href: href,
+        className: classNames,
+        ...atomicProps,
+        ...blankProps,
+        ...rest,
+        children: children
+      })
     );
   }
-
   if (atomic) {
-    return (
-      <button type="button" className={classNames} {...rest}>
-        {children}
-      </button>
-    );
+    return /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: classNames,
+      ...rest,
+      children: children
+    });
   }
-
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div className={classNames} {...rest}>
-      {children}
-    </div>
+    _jsx("div", {
+      className: classNames,
+      ...rest,
+      children: children
+    })
   );
 };
-
-export default BpkCard;
+export default BpkCard;