(
+ onClick={(event) =>
onMonthChange(event, { month: addMonths(month, -1), source: 'PREV' })
}
>
@@ -111,7 +80,7 @@ const MyCalendarNav = ({ month, onMonthChange, direction }) => (
+ onClick={(event) =>
onMonthChange(event, { month: addMonths(month, 1), source: 'NEXT' })
}
>
@@ -121,7 +90,7 @@ const MyCalendarNav = ({ month, onMonthChange, direction }) => (
);
-const MyCalendarDate = props => {
+const MyCalendarDate = (props) => {
const cx = {
textAlign: 'center',
fontSize: '0.8em',
@@ -187,8 +156,8 @@ class MonthViewCalendar extends Component {
nextMonthLabel="Go to next month"
date={this.state.departDate}
fixedWidth={false}
- onDateSelect={departDate => {
- this.setState(prevState => ({
+ onDateSelect={(departDate) => {
+ this.setState((prevState) => ({
departDate,
returnDate: dateToBoundaries(
prevState.returnDate,
@@ -216,8 +185,8 @@ class MonthViewCalendar extends Component {
nextMonthLabel="Go to next month"
date={this.state.returnDate}
fixedWidth={false}
- onDateSelect={returnDate => {
- this.setState(prevState => ({
+ onDateSelect={(returnDate) => {
+ this.setState((prevState) => ({
returnDate,
departDate: dateToBoundaries(
prevState.departDate,
diff --git a/packages/bpk-component-calendar/examples.js b/packages/bpk-component-calendar/examples.js
index 3867f98780..32984a276c 100644
--- a/packages/bpk-component-calendar/examples.js
+++ b/packages/bpk-component-calendar/examples.js
@@ -252,7 +252,7 @@ const CustomColors = () => (
daysOfWeek={weekDays}
month={new Date()}
weekStartsOn={1}
- onDateSelect={date => {
+ onDateSelect={(date) => {
// TODO we shouldn't do this but as it's only for demo purposes and works I guess it's fine
// eslint-disable-next-line react/no-this-in-sfc
this.setState({ date });
@@ -279,7 +279,7 @@ const WeekExample = () => {
new Date(1980, 5, 16),
].map(startOfDay),
daysOfWeek: weekDays,
- formatDateFull: d => d.toString(),
+ formatDateFull: (d) => d.toString(),
preventKeyboardFocus: false,
markToday: true,
markOutsideDays: true,
diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.js b/packages/bpk-component-calendar/src/BpkCalendarContainer.js
index 57f6459fe3..2cf4c3359d 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarContainer.js
+++ b/packages/bpk-component-calendar/src/BpkCalendarContainer.js
@@ -98,7 +98,7 @@ const determineFocusedDate = (
* @param {Object} selectionConfig - The configuration of calendar to be used
* @returns {Array} An array or single of multiple dates
*/
-const getRawSelectedDate = selectionConfig => {
+const getRawSelectedDate = (selectionConfig) => {
let rawDate = [];
switch (selectionConfig.type) {
@@ -116,7 +116,7 @@ const getRawSelectedDate = selectionConfig => {
return rawDate;
};
-const withCalendarState = Calendar => {
+const withCalendarState = (Calendar) => {
class BpkCalendarContainer extends Component {
constructor(props) {
super(props);
@@ -181,7 +181,7 @@ const withCalendarState = Calendar => {
);
};
- handleDateSelect = date => {
+ handleDateSelect = (date) => {
const { onDateSelect, selectionConfiguration } = this.props;
const keyboardFocusState = { preventKeyboardFocus: false };
@@ -219,7 +219,7 @@ const withCalendarState = Calendar => {
});
};
- handleDateKeyDown = event => {
+ handleDateKeyDown = (event) => {
event.persist();
const reverse = isRTL() ? -1 : 1;
const { focusedDate } = this.state;
@@ -287,9 +287,9 @@ const withCalendarState = Calendar => {
render() {
const {
- minDate,
- maxDate,
date,
+ maxDate,
+ minDate,
selectionConfiguration,
...calendarProps
} = this.props;
diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.js b/packages/bpk-component-calendar/src/BpkCalendarDate.js
index ffe36e1301..a0f9bce955 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarDate.js
+++ b/packages/bpk-component-calendar/src/BpkCalendarDate.js
@@ -92,32 +92,32 @@ class BpkCalendarDate extends PureComponent {
}
}
- getButtonRef = button => {
+ getButtonRef = (button) => {
this.button = button;
};
render() {
const {
+ cellType,
+ className,
date,
- modifiers,
- onClick,
- onDateKeyDown,
- isFocused,
- isSelected,
isBlocked,
+ isFocused,
+ isKeyboardFocusable,
isOutside,
+ isSelected,
isToday,
- isKeyboardFocusable,
- className,
- style,
+ modifiers,
+ onClick,
+ onDateKeyDown,
selectionType,
- cellType,
+ style,
...buttonProps
} = this.props;
const classNames = [getClassName('bpk-calendar-date')];
- Object.keys(modifiers).forEach(modifier => {
+ Object.keys(modifiers).forEach((modifier) => {
if (modifiers[modifier](this.props)) {
classNames.push(
getClassName(`bpk-calendar-date--modifier-${modifier}`),
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.js b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.js
index 15264124ab..b351cf1106 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.js
+++ b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.js
@@ -65,7 +65,7 @@ describe('BpkCalendarGrid', () => {
});
it('should render correctly with a custom date component', () => {
- const MyCustomDate = props => {
+ const MyCustomDate = (props) => {
const cx = {
backgroundColor: colorPanjin,
width: '50%',
@@ -111,17 +111,11 @@ describe('BpkCalendarGrid', () => {
expect(onDateClick.mock.calls.length).toBe(0);
- grid
- .find('button')
- .at(10)
- .simulate('click');
+ grid.find('button').at(10).simulate('click');
expect(onDateClick.mock.calls.length).toBe(1);
expect(onDateClick.mock.calls[0][0]).toEqual(new Date(2016, 9, 5));
- grid
- .find('button')
- .at(11)
- .simulate('click');
+ grid.find('button').at(11).simulate('click');
expect(onDateClick.mock.calls.length).toBe(2);
expect(onDateClick.mock.calls[1][0]).toEqual(new Date(2016, 9, 6));
});
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.js b/packages/bpk-component-calendar/src/BpkCalendarGrid.js
index cec199dc66..4c42c44ba1 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGrid.js
+++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.js
@@ -82,28 +82,28 @@ class BpkCalendarGrid extends Component {
render() {
const {
- month,
- className,
DateComponent,
+ cellClassName,
+ className,
dateModifiers,
+ dateProps,
+ focusedDate,
formatDateFull,
formatMonth,
+ ignoreOutsideDate,
+ isKeyboardFocusable,
+ markOutsideDays,
+ markToday,
+ maxDate,
+ minDate,
+ month,
onDateClick,
onDateKeyDown,
- weekStartsOn,
preventKeyboardFocus,
- isKeyboardFocusable,
- markToday,
- markOutsideDays,
selectionConfiguration,
selectionEnd,
selectionStart,
- focusedDate,
- minDate,
- maxDate,
- ignoreOutsideDate,
- dateProps,
- cellClassName,
+ weekStartsOn,
} = this.props;
const { calendarMonthWeeks, daysOfWeek } = this.state;
@@ -121,7 +121,7 @@ class BpkCalendarGrid extends Component {
weekStartsOn={weekStartsOn}
/>
- {calendarMonthWeeks.map(dates => (
+ {calendarMonthWeeks.map((dates) => (
{
- const { weekDay, weekDayKey, Element } = props;
+const WeekDay = (props) => {
+ const { Element, weekDay, weekDayKey } = props;
return (
- {daysOfWeek.map(weekDay => (
+ {daysOfWeek.map((weekDay) => (
{JSON.stringify(props)}
;
+const MyComponent = (props) => {JSON.stringify(props)}
;
const TransitioningMyComponent = addCalendarGridTransition(MyComponent);
describe('BpkCalendar', () => {
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.js b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.js
index 2f741f73cc..d8f1e14398 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.js
+++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.js
@@ -150,7 +150,7 @@ class BpkCalendarGridTransition extends Component {
let min;
let max;
if (rest.minDate && rest.maxDate) {
- ({ min, max } = getMonthRange(rest.minDate, rest.maxDate));
+ ({ max, min } = getMonthRange(rest.minDate, rest.maxDate));
}
return (
@@ -207,12 +207,13 @@ BpkCalendarGridTransition.defaultProps = {
focusedDate: null,
};
-const addCalendarGridTransition = TransitionComponent => props => (
-
-);
+const addCalendarGridTransition = (TransitionComponent) => (props) =>
+ (
+
+ );
export default BpkCalendarGridTransition;
export { addCalendarGridTransition };
diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav-test.js b/packages/bpk-component-calendar/src/BpkCalendarNav-test.js
index 346c49fb82..e188ec1055 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarNav-test.js
+++ b/packages/bpk-component-calendar/src/BpkCalendarNav-test.js
@@ -23,7 +23,7 @@ import format from 'date-fns/format';
import BpkCalendarNav from './BpkCalendarNav';
-const formatMonth = date => format(date, 'MMMM yyyy');
+const formatMonth = (date) => format(date, 'MMMM yyyy');
describe('BpkCalendarNav', () => {
it('should render correctly', () => {
@@ -97,10 +97,7 @@ describe('BpkCalendarNav', () => {
// Previous month
const prevEventStub = { persist: jest.fn() };
- nav
- .find('button')
- .at(0)
- .simulate('click', prevEventStub);
+ nav.find('button').at(0).simulate('click', prevEventStub);
expect(onMonthChange.mock.calls.length).toBe(1);
expect(onMonthChange.mock.calls[0][0]).toEqual(prevEventStub);
expect(onMonthChange.mock.calls[0][1]).toEqual({
@@ -110,10 +107,7 @@ describe('BpkCalendarNav', () => {
// Next month
const nextEventStub = { persist: jest.fn() };
- nav
- .find('button')
- .at(1)
- .simulate('click', nextEventStub);
+ nav.find('button').at(1).simulate('click', nextEventStub);
expect(onMonthChange.mock.calls.length).toBe(2);
expect(onMonthChange.mock.calls[1][0]).toEqual(nextEventStub);
expect(onMonthChange.mock.calls[1][1]).toEqual({
diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.js b/packages/bpk-component-calendar/src/BpkCalendarNav.js
index 29296550d9..01e3037480 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarNav.js
+++ b/packages/bpk-component-calendar/src/BpkCalendarNav.js
@@ -37,31 +37,33 @@ import STYLES from './BpkCalendarNav.module.scss';
const getClassName = cssModules(STYLES);
-const changeMonth = ({ month, min, max, callback, source }) => event => {
- // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
- // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
- if (isWithinRange(month, { start: min, end: max })) {
- event.persist();
- callback(event, { month, source });
- }
-};
+const changeMonth =
+ ({ callback, max, min, month, source }) =>
+ (event) => {
+ // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
+ // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
+ if (isWithinRange(month, { start: min, end: max })) {
+ event.persist();
+ callback(event, { month, source });
+ }
+ };
-const BpkCalendarNav = props => {
+const BpkCalendarNav = (props) => {
const {
- id,
- month,
- minDate,
- maxDate,
- formatMonth,
- onMonthChange,
changeMonthLabel,
disabled,
+ formatMonth,
+ id,
+ maxDate,
+ minDate,
+ month,
nextMonthLabel,
+ onMonthChange,
previousMonthLabel,
} = props;
const baseMonth = startOfMonth(month);
- const { min, max } = getMonthRange(minDate, maxDate);
+ const { max, min } = getMonthRange(minDate, maxDate);
const navigatableMonths = getMonthsInRange(minDate, maxDate);
const prevMonth = addMonths(baseMonth, -1);
const nextMonth = addMonths(baseMonth, 1);
@@ -104,7 +106,7 @@ const BpkCalendarNav = props => {
name="months"
value={formatIsoMonth(baseMonth)}
disabled={disabled}
- onChange={event => {
+ onChange={(event) => {
event.persist();
onMonthChange(event, {
month: parseIsoDate(event.target.value),
@@ -112,7 +114,7 @@ const BpkCalendarNav = props => {
});
}}
>
- {navigatableMonths.map(m => (
+ {navigatableMonths.map((m) => (
{formatMonth(m)}
diff --git a/packages/bpk-component-calendar/src/Week-test.js b/packages/bpk-component-calendar/src/Week-test.js
index b624ab9486..f5719d9c4d 100644
--- a/packages/bpk-component-calendar/src/Week-test.js
+++ b/packages/bpk-component-calendar/src/Week-test.js
@@ -40,7 +40,7 @@ const initialProps = {
new Date(1980, 5, 15),
new Date(1980, 5, 16),
].map(startOfDay),
- formatDateFull: d => d.toString(),
+ formatDateFull: (d) => d.toString(),
preventKeyboardFocus: false,
markToday: true,
markOutsideDays: true,
@@ -251,7 +251,7 @@ describe('Week', () => {
it(`should${
expected ? '' : ' not'
} update when selection range ${reason}`, () => {
- const date = dt => parse(`1980${dt}`, 'yyyyMMdd', new Date());
+ const date = (dt) => parse(`1980${dt}`, 'yyyyMMdd', new Date());
const week = shallow(
+ const daysOutside = this.props.dates.map((date) =>
isSameMonth(date, month),
);
@@ -318,7 +318,7 @@ class Week extends Component {
return (
- {this.props.dates.map(date => {
+ {this.props.dates.map((date) => {
const isBlocked =
minDate && maxDate
? !isWithinRange(date, { start: minDate, end: maxDate })
@@ -421,8 +421,8 @@ Week.defaultProps = {
/*
DateContainer - one for each date in the grid; wraps the actual BpkCalendarDate (or custom) component
*/
-const DateContainer = props => {
- const { className, children, selectionType, isBlocked, isEmptyCell } = props;
+const DateContainer = (props) => {
+ const { children, className, isBlocked, isEmptyCell, selectionType } = props;
const classNames = getClassName(
'bpk-calendar-grid__date',
diff --git a/packages/bpk-component-calendar/src/_variables.scss b/packages/bpk-component-calendar/src/_variables.scss
index b20a6dcd6e..6f0180dbd9 100644
--- a/packages/bpk-component-calendar/src/_variables.scss
+++ b/packages/bpk-component-calendar/src/_variables.scss
@@ -18,7 +18,7 @@
@import '~bpk-mixins/index';
-$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 */
+$shadow-bottom: 0 1px 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
+$shadow-left: -1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
+$shadow-right: 1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
$calendar-width: 7 * ($bpk-calendar-day-size + (2 * $bpk-calendar-day-spacing));
diff --git a/packages/bpk-component-calendar/src/composeCalendar-test.js b/packages/bpk-component-calendar/src/composeCalendar-test.js
index ddffceb2d9..e1cbf97709 100644
--- a/packages/bpk-component-calendar/src/composeCalendar-test.js
+++ b/packages/bpk-component-calendar/src/composeCalendar-test.js
@@ -138,15 +138,15 @@ describe('composeCalendar', () => {
it('should pass props to their respective components', () => {
const PropsBasedCalendarComponent = composeCalendar(
- props => props.name,
- props => props.name,
- props => (
+ (props) => props.name,
+ (props) => props.name,
+ (props) => (
),
- props => props.name,
+ (props) => props.name,
);
const { asFragment } = render(
diff --git a/packages/bpk-component-calendar/src/composeCalendar.js b/packages/bpk-component-calendar/src/composeCalendar.js
index 84b31e398a..1bdb3f43ec 100644
--- a/packages/bpk-component-calendar/src/composeCalendar.js
+++ b/packages/bpk-component-calendar/src/composeCalendar.js
@@ -26,23 +26,29 @@ import STYLES from './BpkCalendar.module.scss';
const getClassName = cssModules(STYLES);
const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
- const BpkCalendar = props => {
+ const BpkCalendar = (props) => {
const classNames = [getClassName('bpk-calendar')];
const {
changeMonthLabel,
className,
dateModifiers,
+ dateProps,
daysOfWeek,
+ fixedWidth,
focusedDate,
formatDateFull,
formatMonth,
+ gridClassName,
+ gridProps,
+ headerProps,
id,
markOutsideDays,
markToday,
maxDate,
minDate,
month,
+ navProps,
nextMonthLabel,
onDateClick,
onDateKeyDown,
@@ -50,14 +56,8 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
preventKeyboardFocus,
previousMonthLabel,
selectionConfiguration,
- weekStartsOn,
- fixedWidth,
- gridClassName,
- navProps,
- headerProps,
- gridProps,
- dateProps,
weekDayKey,
+ weekStartsOn,
} = props;
if (className) {
diff --git a/packages/bpk-component-calendar/src/custom-proptypes.js b/packages/bpk-component-calendar/src/custom-proptypes.js
index 6dd8b80330..1cd276ad5b 100644
--- a/packages/bpk-component-calendar/src/custom-proptypes.js
+++ b/packages/bpk-component-calendar/src/custom-proptypes.js
@@ -20,8 +20,8 @@ import PropTypes from 'prop-types';
import { isBefore, isSameDay } from './date-utils';
-const DateType = key => props => {
- const { startDate, endDate } = props[key];
+const DateType = (key) => (props) => {
+ const { endDate, startDate } = props[key];
// No range selected
if (!startDate && !endDate) {
diff --git a/packages/bpk-component-calendar/src/date-utils.js b/packages/bpk-component-calendar/src/date-utils.js
index 9ec2718e5b..3e17766225 100644
--- a/packages/bpk-component-calendar/src/date-utils.js
+++ b/packages/bpk-component-calendar/src/date-utils.js
@@ -112,7 +112,7 @@ function getCalendarMonthWeeks(date, weekStartsOn) {
}
function getLastDayOfWeekend(daysOfWeek) {
- const weekend = daysOfWeek.map(day => day.isWeekend);
+ const weekend = daysOfWeek.map((day) => day.isWeekend);
if (weekend[0] && weekend[6]) {
// weekend stretches over turn the of the week
@@ -122,7 +122,7 @@ function getLastDayOfWeekend(daysOfWeek) {
}
function getFirstDayOfWeekend(daysOfWeek) {
- const weekend = daysOfWeek.map(day => day.isWeekend);
+ const weekend = daysOfWeek.map((day) => day.isWeekend);
if (weekend[0] && weekend[6]) {
// weekend stretches over turn the of the week
@@ -150,7 +150,7 @@ function getMonthRange(from, to) {
}
function getMonthsInRange(from, to) {
- const { min, max } = getMonthRange(from, to);
+ const { max, min } = getMonthRange(from, to);
let currentMonth = startOfMonth(from);
const monthsInRange = [];
@@ -185,8 +185,8 @@ const setMonthYear = (date, newMonth, newYear) => {
};
const parseIsoDate = parseISO;
-const formatIsoDate = date => format(date, 'yyyy-MM-dd');
-const formatIsoMonth = date => format(date, 'yyyy-MM');
+const formatIsoDate = (date) => format(date, 'yyyy-MM-dd');
+const formatIsoMonth = (date) => format(date, 'yyyy-MM');
export {
getCalendarMonthWeeks,
diff --git a/packages/bpk-component-calendar/src/utils.js b/packages/bpk-component-calendar/src/utils.js
index bf0c00959a..10dd719053 100644
--- a/packages/bpk-component-calendar/src/utils.js
+++ b/packages/bpk-component-calendar/src/utils.js
@@ -23,7 +23,7 @@ import {
const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
-const splitToken = value => {
+const splitToken = (value) => {
const match = value.match(CSS_UNIT_REGEX);
if (!match) {
throw new Error(
@@ -47,7 +47,7 @@ export const getCalendarGridWidth = (multiplier = 1) => {
return `${width}${sizeUnit}`;
};
-export const getTransformStyles = transformValue => {
+export const getTransformStyles = (transformValue) => {
const transform = `translateX(${transformValue})`;
return {
transform,
diff --git a/packages/bpk-component-calendar/test-utils.js b/packages/bpk-component-calendar/test-utils.js
index 8c900ff067..f471311a81 100644
--- a/packages/bpk-component-calendar/test-utils.js
+++ b/packages/bpk-component-calendar/test-utils.js
@@ -18,19 +18,19 @@
import format from 'date-fns/format';
-export const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
-export const formatDateFullArabic = date => {
+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 => {
+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 => {
+export const formatMonth = (date) => format(date, 'MMMM yyyy');
+export const formatMonthArabic = (date) => {
const months = [
'يناير',
'فبراير',
@@ -47,7 +47,7 @@ export const formatMonthArabic = date => {
];
return `${months[date.getMonth()]} ${date.getFullYear()}`;
};
-export const formatMonthJapanese = date => {
+export const formatMonthJapanese = (date) => {
const months = [
'1月',
'2月',
diff --git a/packages/bpk-component-card/src/BpkCard.js b/packages/bpk-component-card/src/BpkCard.js
index 9a8536f0b1..2de109eff5 100644
--- a/packages/bpk-component-card/src/BpkCard.js
+++ b/packages/bpk-component-card/src/BpkCard.js
@@ -36,7 +36,7 @@ type Props = {
};
const BpkCard = (props: Props) => {
- const { children, className, href, padded, blank, atomic, ...rest } = props;
+ const { atomic, blank, children, className, href, padded, ...rest } = props;
const classNames = [getClassName('bpk-card')];
if (padded) {
diff --git a/packages/bpk-component-checkbox/examples.js b/packages/bpk-component-checkbox/examples.js
index 965a3870b9..b6fd1996cf 100644
--- a/packages/bpk-component-checkbox/examples.js
+++ b/packages/bpk-component-checkbox/examples.js
@@ -52,7 +52,7 @@ class StatefulCheckbox extends Component {
}
handleChange = () => {
- this.setState(prevState => ({
+ this.setState((prevState) => ({
isChecked: !prevState.isChecked,
}));
// $FlowFixMe[incompatible-type] - ignoring as purely for storybook
diff --git a/packages/bpk-component-checkbox/src/BpkCheckbox.js b/packages/bpk-component-checkbox/src/BpkCheckbox.js
index 0ee2a45dc3..906e7f8372 100644
--- a/packages/bpk-component-checkbox/src/BpkCheckbox.js
+++ b/packages/bpk-component-checkbox/src/BpkCheckbox.js
@@ -41,16 +41,16 @@ type Props = {
const BpkCheckbox = (props: Props) => {
const {
- name,
+ checked,
+ className,
+ disabled,
+ indeterminate,
label,
+ name,
required,
- disabled,
- white,
- className,
smallLabel,
valid,
- checked,
- indeterminate,
+ white,
...rest
} = props;
@@ -86,7 +86,7 @@ const BpkCheckbox = (props: Props) => {
aria-label={label}
aria-invalid={isInvalid}
data-indeterminate={indeterminate}
- ref={e => {
+ ref={(e) => {
if (e) {
e.indeterminate = indeterminate;
}
diff --git a/packages/bpk-component-chip/examples.js b/packages/bpk-component-chip/examples.js
index 195c59a3bb..0b92e5e6d5 100644
--- a/packages/bpk-component-chip/examples.js
+++ b/packages/bpk-component-chip/examples.js
@@ -75,9 +75,7 @@ class StatefulSelectableChip extends React.Component<
}
toggleSelected = () => {
- this.setState(prevState => {
- return { selected: !prevState.selected };
- });
+ this.setState((prevState) => ({ selected: !prevState.selected }));
};
render() {
@@ -106,7 +104,7 @@ class StatefulDismissibleChipsExample extends React.Component<
}
removeChip = (indexToRemove: number) => {
- this.setState(prevState => {
+ this.setState((prevState) => {
const newChips = prevState.chips;
const removedChip = newChips.splice(indexToRemove, 1)[0];
@@ -139,7 +137,7 @@ class StatefulDismissibleChipsExample extends React.Component<
- {this.state.updates.map(u => (
+ {this.state.updates.map((u) => (
<>
{u}
@@ -167,12 +165,10 @@ class StatefulRadioGroupChipsExample extends React.Component<
selectChip = (indexToSelect: number) => {
const selectedChip = this.state.chips[indexToSelect];
- this.setState(prevState => {
- return {
- selectedIndex: indexToSelect,
- updates: [...prevState.updates, `${selectedChip} selected.`],
- };
- });
+ this.setState((prevState) => ({
+ selectedIndex: indexToSelect,
+ updates: [...prevState.updates, `${selectedChip} selected.`],
+ }));
};
render() {
@@ -208,7 +204,7 @@ class StatefulRadioGroupChipsExample extends React.Component<
- {this.state.updates.map(update => (
+ {this.state.updates.map((update) => (
<>
{update}
@@ -317,7 +313,7 @@ const AllTypesExample = () => (
Selectable chips
- {Object.keys(CHIP_TYPES).map(chipType => (
+ {Object.keys(CHIP_TYPES).map((chipType) => (
<>
{chipType}
@@ -326,7 +322,7 @@ const AllTypesExample = () => (
Dismissible chips
- {Object.keys(CHIP_TYPES).map(chipType => (
+ {Object.keys(CHIP_TYPES).map((chipType) => (
<>
{chipType}
diff --git a/packages/bpk-component-chip/src/BpkDismissibleChip-test.js b/packages/bpk-component-chip/src/BpkDismissibleChip-test.js
index 6cd30c28b4..a95e6609d3 100644
--- a/packages/bpk-component-chip/src/BpkDismissibleChip-test.js
+++ b/packages/bpk-component-chip/src/BpkDismissibleChip-test.js
@@ -54,7 +54,7 @@ describe('BpkDismissibleChip', () => {
expect(asFragment()).toMatchSnapshot();
});
- Object.keys(CHIP_TYPES).forEach(chipType => {
+ Object.keys(CHIP_TYPES).forEach((chipType) => {
it(`should render correctly with type="${chipType}"`, () => {
const { asFragment } = render( );
expect(asFragment()).toMatchSnapshot();
diff --git a/packages/bpk-component-chip/src/BpkSelectableChip-test.js b/packages/bpk-component-chip/src/BpkSelectableChip-test.js
index d47daf48b6..7cc2259179 100644
--- a/packages/bpk-component-chip/src/BpkSelectableChip-test.js
+++ b/packages/bpk-component-chip/src/BpkSelectableChip-test.js
@@ -38,7 +38,7 @@ describe('BpkSelectableChip', () => {
expect(asFragment()).toMatchSnapshot();
});
- Object.keys(CHIP_TYPES).forEach(chipType => {
+ Object.keys(CHIP_TYPES).forEach((chipType) => {
it(`should render correctly with type="${chipType}"`, () => {
const { asFragment } = render( );
expect(asFragment()).toMatchSnapshot();
diff --git a/packages/bpk-component-close-button/src/BpkCloseButton.js b/packages/bpk-component-close-button/src/BpkCloseButton.js
index 24c2bd16bc..9c8e87f78f 100644
--- a/packages/bpk-component-close-button/src/BpkCloseButton.js
+++ b/packages/bpk-component-close-button/src/BpkCloseButton.js
@@ -36,7 +36,7 @@ type Props = {
const BpkCloseButton = (props: Props) => {
const classNames = [getClassName('bpk-close-button')];
- const { label, onClick, className, customIcon, ...rest } = props;
+ const { className, customIcon, label, onClick, ...rest } = props;
const Icon = customIcon || CloseIcon;
if (className) {
diff --git a/packages/bpk-component-code/src/BpkCode.js b/packages/bpk-component-code/src/BpkCode.js
index bdb22ac69f..9434f852cb 100644
--- a/packages/bpk-component-code/src/BpkCode.js
+++ b/packages/bpk-component-code/src/BpkCode.js
@@ -31,7 +31,7 @@ type Props = {
className: ?string,
};
const BpkCode = (props: Props) => {
- const { children, alternate, className, ...rest } = props;
+ const { alternate, children, className, ...rest } = props;
const classNames = [getClassName('bpk-code')];
if (alternate) {
diff --git a/packages/bpk-component-code/src/BpkCodeBlock.js b/packages/bpk-component-code/src/BpkCodeBlock.js
index fe6567468a..fb980bda92 100644
--- a/packages/bpk-component-code/src/BpkCodeBlock.js
+++ b/packages/bpk-component-code/src/BpkCodeBlock.js
@@ -31,7 +31,7 @@ type Props = {
className: ?string,
};
const BpkCodeBlock = (props: Props) => {
- const { children, alternate, className, ...rest } = props;
+ const { alternate, children, className, ...rest } = props;
const preClassNames = getClassName(
'bpk-code__pre',
alternate && 'bpk-code__pre--alternate',
diff --git a/packages/bpk-component-content-container/src/BpkContentContainer-test.js b/packages/bpk-component-content-container/src/BpkContentContainer-test.js
index 5b8035bb47..04bfe0422f 100644
--- a/packages/bpk-component-content-container/src/BpkContentContainer-test.js
+++ b/packages/bpk-component-content-container/src/BpkContentContainer-test.js
@@ -37,7 +37,7 @@ describe('BpkContentContainer', () => {
expect(asFragment()).toMatchSnapshot();
});
- it('should render correctly with a "bareHtml" attribute ', () => {
+ it('should render correctly with a "bareHtml" attribute', () => {
const { asFragment } = render(
Heading
@@ -67,7 +67,7 @@ describe('BpkContentContainer', () => {
expect(asFragment()).toMatchSnapshot();
});
- it('should render correctly with a custom "className" attribute ', () => {
+ it('should render correctly with a custom "className" attribute', () => {
const { asFragment } = render(
Heading
diff --git a/packages/bpk-component-content-container/src/BpkContentContainer.js b/packages/bpk-component-content-container/src/BpkContentContainer.js
index d19749bb2b..073b8e1bfa 100644
--- a/packages/bpk-component-content-container/src/BpkContentContainer.js
+++ b/packages/bpk-component-content-container/src/BpkContentContainer.js
@@ -24,14 +24,14 @@ import STYLES from './BpkContentContainer.module.scss';
const getClassName = cssModules(STYLES);
-const BpkContentContainer = props => {
+const BpkContentContainer = (props) => {
const {
- tagName: TagName,
- className,
- bareHtml,
alternate,
- dangerouslySetInnerHTML,
+ bareHtml,
children,
+ className,
+ dangerouslySetInnerHTML,
+ tagName: TagName,
...rest
} = props;
const classNames = [getClassName('bpk-content-container')];
diff --git a/packages/bpk-component-content-container/src/__snapshots__/BpkContentContainer-test.js.snap b/packages/bpk-component-content-container/src/__snapshots__/BpkContentContainer-test.js.snap
index b86f4bd040..8daf80992e 100644
--- a/packages/bpk-component-content-container/src/__snapshots__/BpkContentContainer-test.js.snap
+++ b/packages/bpk-component-content-container/src/__snapshots__/BpkContentContainer-test.js.snap
@@ -52,7 +52,7 @@ exports[`BpkContentContainer should render correctly with a "bareHtml" and "alte
`;
-exports[`BpkContentContainer should render correctly with a "bareHtml" attribute 1`] = `
+exports[`BpkContentContainer should render correctly with a "bareHtml" attribute 1`] = `
`;
-exports[`BpkContentContainer should render correctly with a custom "className" attribute 1`] = `
+exports[`BpkContentContainer should render correctly with a custom "className" attribute 1`] = `
alert(JSON.stringify(row));
+const onRowClick = (row) => alert(JSON.stringify(row));
const AutowidthExample = () => (
diff --git a/packages/bpk-component-datatable/src/BpkDataTable-test.js b/packages/bpk-component-datatable/src/BpkDataTable-test.js
index 4563d9914e..d50e2b3940 100644
--- a/packages/bpk-component-datatable/src/BpkDataTable-test.js
+++ b/packages/bpk-component-datatable/src/BpkDataTable-test.js
@@ -317,8 +317,8 @@ describe('BpkDataTable', () => {
let sortDirectionValue = 'DESC';
const sortFunction = ({ sortBy, sortDirection }) => {
complexRows = _sortBy(complexRows, [
- row => row.seat.office,
- row => row.seat.desk,
+ (row) => row.seat.office,
+ (row) => row.seat.desk,
]);
sortByValue = sortBy;
sortDirectionValue = sortDirection;
@@ -399,10 +399,7 @@ describe('BpkDataTable', () => {
,
);
- wrapper
- .find('.bpk-data-table__row')
- .last()
- .simulate('click');
+ wrapper.find('.bpk-data-table__row').last().simulate('click');
expect(onRowClick).toHaveBeenCalledTimes(1);
expect(onRowClick).toHaveBeenCalledWith(rows[1]);
@@ -425,10 +422,7 @@ describe('BpkDataTable', () => {
// Select the last element in the table, which after sorting
// it will be letter Z so index 0.
- wrapper
- .find('.bpk-data-table__row')
- .last()
- .simulate('click');
+ wrapper.find('.bpk-data-table__row').last().simulate('click');
expect(onRowClick).toHaveBeenCalledTimes(1);
expect(onRowClick).toHaveBeenCalledWith(abcRows[0]);
diff --git a/packages/bpk-component-datatable/src/BpkDataTable.js b/packages/bpk-component-datatable/src/BpkDataTable.js
index f9ddbc7b8d..e16e2689ac 100644
--- a/packages/bpk-component-datatable/src/BpkDataTable.js
+++ b/packages/bpk-component-datatable/src/BpkDataTable.js
@@ -84,7 +84,7 @@ class BpkDataTable
extends Component, State> {
event: SyntheticEvent,
}) => {
const column = React.Children.toArray(this.props.children).find(
- child => child.props.dataKey === sortBy,
+ (child) => child.props.dataKey === sortBy,
);
if (!column) {
@@ -98,7 +98,7 @@ class BpkDataTable extends Component, State> {
// See: https://reactjs.org/docs/legacy-event-pooling.html
const eventTarget = event.target;
if (eventTarget instanceof Element) {
- this.setState(prevState => ({
+ this.setState((prevState) => ({
sorter: prevState.sorter.onHeaderClick(sortBy, eventTarget, column),
}));
}
@@ -157,7 +157,7 @@ class BpkDataTable extends Component, State> {
rowCount={this.state.sorter.rowCount}
rowGetter={({ index }) => this.state.sorter.getRow(index)}
headerClassName={headerClassNames.join(' ')}
- rowClassName={row => this.rowClassName(rowClassName, row)}
+ rowClassName={(row) => this.rowClassName(rowClassName, row)}
onRowClick={this.onRowClicked}
onHeaderClick={this.onHeaderClick}
{...this.state.sorter.sortProps}
diff --git a/packages/bpk-component-datatable/src/bpkHeaderRenderer.js b/packages/bpk-component-datatable/src/bpkHeaderRenderer.js
index 309b91cc63..5beadf24b8 100644
--- a/packages/bpk-component-datatable/src/bpkHeaderRenderer.js
+++ b/packages/bpk-component-datatable/src/bpkHeaderRenderer.js
@@ -61,10 +61,10 @@ type Props = {
};
export default ({
dataKey,
+ disableSort,
label,
sortBy,
sortDirection,
- disableSort,
}: Props) => {
const children = [
= {
headerHeight: number,
className: ?string,
defaultColumnSortIndex: number,
- onRowClick: Row => mixed,
+ onRowClick: (Row) => mixed,
...$Exact<_SortProps>,
};
diff --git a/packages/bpk-component-datatable/src/hasChildrenOfType-test.js b/packages/bpk-component-datatable/src/hasChildrenOfType-test.js
index 63136eb4ed..3cf370126b 100644
--- a/packages/bpk-component-datatable/src/hasChildrenOfType-test.js
+++ b/packages/bpk-component-datatable/src/hasChildrenOfType-test.js
@@ -61,7 +61,7 @@ describe('hasChildrenOfType', () => {
);
});
- it('should return an error if it has single non matching child ', () => {
+ it('should return an error if it has single non matching child', () => {
const error = runPropTypeValidatorWith(
@@ -72,7 +72,7 @@ describe('hasChildrenOfType', () => {
);
});
- it('should return an error if it has a mix of matching and non matching children ', () => {
+ it('should return an error if it has a mix of matching and non matching children', () => {
const error = runPropTypeValidatorWith(
diff --git a/packages/bpk-component-datatable/src/hasChildrenOfType.js b/packages/bpk-component-datatable/src/hasChildrenOfType.js
index 1f6e32e260..832b6f44e9 100644
--- a/packages/bpk-component-datatable/src/hasChildrenOfType.js
+++ b/packages/bpk-component-datatable/src/hasChildrenOfType.js
@@ -29,31 +29,31 @@ export function getDisplayName(Component: AbstractComponent): string {
);
}
-const hasChildrenOfType = (
- type: AbstractComponent,
- atLeast: number = 1,
-) => (props: { [string]: any }, propType: string, componentName: string) => {
- if (Children.count(props[propType]) < atLeast) {
- const inflectedNoun = atLeast === 1 ? 'child' : 'children';
- return Error(
- `${componentName} requires at least ${atLeast} '${getDisplayName(
- type,
- )}' ${inflectedNoun}.`,
- );
- }
-
- const children = Children.toArray(props[propType]);
- for (let i = 0; i < children.length; i += 1) {
- const child = children[i];
- if (child.type !== type && !(child.type.prototype instanceof type)) {
+const hasChildrenOfType =
+ (type: AbstractComponent, atLeast: number = 1) =>
+ (props: { [string]: any }, propType: string, componentName: string) => {
+ if (Children.count(props[propType]) < atLeast) {
+ const inflectedNoun = atLeast === 1 ? 'child' : 'children';
return Error(
- `${componentName} only allows '${getDisplayName(type)}' as children. ` +
- `Found '${getDisplayName(child.type)}'.`,
+ `${componentName} requires at least ${atLeast} '${getDisplayName(
+ type,
+ )}' ${inflectedNoun}.`,
);
}
- }
- return undefined;
-};
+ const children = Children.toArray(props[propType]);
+ for (let i = 0; i < children.length; i += 1) {
+ const child = children[i];
+ if (child.type !== type && !(child.type.prototype instanceof type)) {
+ return Error(
+ `${componentName} only allows '${getDisplayName(
+ type,
+ )}' as children. Found '${getDisplayName(child.type)}'.`,
+ );
+ }
+ }
+
+ return undefined;
+ };
export default hasChildrenOfType;
diff --git a/packages/bpk-component-datepicker/examples.js b/packages/bpk-component-datepicker/examples.js
index 6de71dc1a7..01d2dca78e 100644
--- a/packages/bpk-component-datepicker/examples.js
+++ b/packages/bpk-component-datepicker/examples.js
@@ -52,7 +52,7 @@ import BpkInput, { withOpenEvents } from 'bpk-component-input';
import BpkDatepicker from './index';
-const formatDate = date => format(date, 'dd/MM/yyyy');
+const formatDate = (date) => format(date, 'dd/MM/yyyy');
const Input = withOpenEvents(BpkInput);
@@ -163,7 +163,7 @@ const getBackgroundForDate = memoize(
() => [colorSagano, colorBagan, colorPetra][parseInt(Math.random() * 3, 10)],
);
-const ColoredCalendarDate = props => {
+const ColoredCalendarDate = (props) => {
let style = {};
if (!props.isFocused && !props.isOutside && !props.isBlocked) {
@@ -218,8 +218,8 @@ class ReturnDatepicker extends Component {
formatDateFull={formatDateFull}
inputProps={inputProps}
date={this.state.departDate}
- onDateSelect={departDate => {
- this.setState(prevState => ({
+ onDateSelect={(departDate) => {
+ this.setState((prevState) => ({
departDate,
returnDate: dateToBoundaries(
prevState.returnDate,
@@ -250,8 +250,8 @@ class ReturnDatepicker extends Component {
formatDateFull={formatDateFull}
inputProps={inputProps}
date={this.state.returnDate}
- onDateSelect={returnDate => {
- this.setState(prevState => ({
+ onDateSelect={(returnDate) => {
+ this.setState((prevState) => ({
returnDate,
departDate: dateToBoundaries(
prevState.departDate,
@@ -261,7 +261,7 @@ class ReturnDatepicker extends Component {
}));
action('Selected return date')(returnDate);
}}
- onOpenChange={isOpen => {
+ onOpenChange={(isOpen) => {
this.setState({
isReturnPickerOpen: isOpen,
});
diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker-test.js b/packages/bpk-component-datepicker/src/BpkDatepicker-test.js
index b272124a95..7feb123525 100644
--- a/packages/bpk-component-datepicker/src/BpkDatepicker-test.js
+++ b/packages/bpk-component-datepicker/src/BpkDatepicker-test.js
@@ -39,7 +39,7 @@ jest.mock(
},
);
-const formatDate = date => format(date, 'dd/MM/yyyy');
+const formatDate = (date) => format(date, 'dd/MM/yyyy');
const inputProps = {
onChange: () => null,
diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.js b/packages/bpk-component-datepicker/src/BpkDatepicker.js
index 4d513627ea..d9f3295cff 100644
--- a/packages/bpk-component-datepicker/src/BpkDatepicker.js
+++ b/packages/bpk-component-datepicker/src/BpkDatepicker.js
@@ -142,13 +142,8 @@ class BpkDatepicker extends Component {
};
handleDateSelect = (startDate, endDate = null) => {
- const {
- onDateSelect,
- selectionConfiguration,
- minDate,
- maxDate,
- onClose,
- } = this.props;
+ const { maxDate, minDate, onClose, onDateSelect, selectionConfiguration } =
+ this.props;
// When the calendar is a single date we always want to close it when a date is selected
// or if its a range calendar we only want to close the calendar when a range is selected.
@@ -190,9 +185,8 @@ class BpkDatepicker extends Component {
render() {
const {
- changeMonthLabel,
calendarComponent: Calendar,
- inputComponent,
+ changeMonthLabel,
closeButtonText,
dateModifiers,
daysOfWeek,
@@ -202,6 +196,8 @@ class BpkDatepicker extends Component {
formatMonth,
getApplicationElement,
id,
+ initiallyFocusedDate,
+ inputComponent,
inputProps,
markOutsideDays,
markToday,
@@ -210,12 +206,11 @@ class BpkDatepicker extends Component {
nextMonthLabel,
onMonthChange,
previousMonthLabel,
+ renderTarget,
selectionConfiguration,
title,
- weekStartsOn,
- initiallyFocusedDate,
- renderTarget,
valid,
+ weekStartsOn,
...rest
} = this.props;
@@ -264,7 +259,7 @@ class BpkDatepicker extends Component {
return (
- {isMobile =>
+ {(isMobile) =>
isMobile ? (
format(date, 'dd/MM/yyyy');
+const formatDate = (date) => format(date, 'dd/MM/yyyy');
const inputProps = {
onChange: () => null,
diff --git a/packages/bpk-component-description-list/src/ComponentFactory.js b/packages/bpk-component-description-list/src/ComponentFactory.js
index e393ee62da..a87744bca7 100644
--- a/packages/bpk-component-description-list/src/ComponentFactory.js
+++ b/packages/bpk-component-description-list/src/ComponentFactory.js
@@ -25,7 +25,7 @@ import STYLES from './BpkDescriptionList.module.scss';
const getClassName = cssModules(STYLES);
const buildComponent = (TagName, baseClassName) => {
- const Component = ({ className, children, ...rest }) => {
+ const Component = ({ children, className, ...rest }) => {
const classNames = [getClassName(baseClassName)];
if (className) {
diff --git a/packages/bpk-component-drawer/src/BpkDrawer.js b/packages/bpk-component-drawer/src/BpkDrawer.js
index a8c4dbdef1..98eaf26fe9 100644
--- a/packages/bpk-component-drawer/src/BpkDrawer.js
+++ b/packages/bpk-component-drawer/src/BpkDrawer.js
@@ -70,7 +70,7 @@ class BpkDrawer extends Component {
};
render() {
- const { isOpen, onClose, target, renderTarget, ...rest } = this.props;
+ const { isOpen, onClose, renderTarget, target, ...rest } = this.props;
const { isDrawerShown } = this.state;
diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent-test.js b/packages/bpk-component-drawer/src/BpkDrawerContent-test.js
index 626fc750ac..4fd3a0f9a4 100644
--- a/packages/bpk-component-drawer/src/BpkDrawerContent-test.js
+++ b/packages/bpk-component-drawer/src/BpkDrawerContent-test.js
@@ -23,8 +23,11 @@ import { render } from '@testing-library/react';
import BpkDrawerContent from './BpkDrawerContent';
-jest.mock('react-transition-group/Transition', () => ({ children }) =>
- children('entered'),
+jest.mock(
+ 'react-transition-group/Transition',
+ () =>
+ ({ children }) =>
+ children('entered'),
);
describe('BpkDrawerContent', () => {
diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.js b/packages/bpk-component-drawer/src/BpkDrawerContent.js
index 3abd923744..aea776680d 100644
--- a/packages/bpk-component-drawer/src/BpkDrawerContent.js
+++ b/packages/bpk-component-drawer/src/BpkDrawerContent.js
@@ -50,21 +50,21 @@ type Props = {
const BpkDrawerContent = (props: Props) => {
const {
+ children,
className,
- hideTitle,
+ closeLabel,
+ closeOnScrimClick, // Unused from withScrim scrim HOC
+ closeText,
contentClassName,
+ dialogRef,
+ hideTitle,
+ id,
isDrawerShown,
+ isIpad, // Unused from withScrim scrim HOC
+ isIphone, // Unused from withScrim scrim HOC
+ onClose,
onCloseAnimationComplete,
- id,
- dialogRef,
title,
- closeText,
- onClose,
- closeLabel,
- children,
- closeOnScrimClick, // unusued from withScrim scrim HOC
- isIphone, // unusued from withScrim scrim HOC
- isIpad, // unusued from withScrim scrim HOC
...rest
} = props;
@@ -98,7 +98,7 @@ const BpkDrawerContent = (props: Props) => {
in={isDrawerShown}
onExited={onCloseAnimationComplete}
>
- {status => (
+ {(status) => (
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
format(date, 'dd/MM/yyyy');
+const formatDate = (date) => format(date, 'dd/MM/yyyy');
const offices = [
{
@@ -102,18 +102,18 @@ const offices = [
},
];
-const getSuggestions = value => {
+const getSuggestions = (value) => {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
return inputLength === 0
? []
: offices.filter(
- office => office.name.toLowerCase().indexOf(inputValue) !== -1,
+ (office) => office.name.toLowerCase().indexOf(inputValue) !== -1,
);
};
-const getSuggestionValue = suggestion =>
+const getSuggestionValue = (suggestion) =>
`${suggestion.name} (${suggestion.code})`;
let instances = 0;
@@ -157,7 +157,7 @@ class Autosuggest extends Component<{}, AutosuggestState> {
};
render() {
- const { value, suggestions } = this.state;
+ const { suggestions, value } = this.state;
const inputProps = {
id: 'carhire-search-controls-location-pick-up',
@@ -179,7 +179,7 @@ class Autosuggest extends Component<{}, AutosuggestState> {
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
- renderSuggestion={suggestion => (
+ renderSuggestion={(suggestion) => (
{
};
toggleStates = () => {
- this.setState(prevState => {
+ this.setState((prevState) => {
let nextValidState = prevState.validState + 1;
let isChecked = prevState.checked;
@@ -265,13 +265,8 @@ class FieldsetContainer extends Component {
};
render() {
- const {
- children,
- isCheckbox,
- validStates,
- className,
- ...rest
- } = this.props;
+ const { children, className, isCheckbox, validStates, ...rest } =
+ this.props;
const valid = validStates[this.state.validState];
const dynamicProps = isCheckbox
diff --git a/packages/bpk-component-fieldset/src/BpkFieldset.js b/packages/bpk-component-fieldset/src/BpkFieldset.js
index 5e3fc3e931..fea49988f9 100644
--- a/packages/bpk-component-fieldset/src/BpkFieldset.js
+++ b/packages/bpk-component-fieldset/src/BpkFieldset.js
@@ -44,15 +44,15 @@ export type Props = {
const BpkFieldset = (props: Props) => {
const {
children,
- label,
className,
- validationMessage,
- valid,
- required,
+ description,
+ disabled,
isCheckbox,
+ label,
+ required,
+ valid,
+ validationMessage,
validationProps,
- disabled,
- description,
...rest
} = props;
diff --git a/packages/bpk-component-flare/src/BpkContentBubble.js b/packages/bpk-component-flare/src/BpkContentBubble.js
index 137ecf90be..f7af8ef1d4 100755
--- a/packages/bpk-component-flare/src/BpkContentBubble.js
+++ b/packages/bpk-component-flare/src/BpkContentBubble.js
@@ -25,14 +25,14 @@ import STYLES from './bpk-content-bubble.module.scss';
const getClassName = cssModules(STYLES);
-const BpkContentBubble = props => {
+const BpkContentBubble = (props) => {
const {
- flareProps,
className,
- contentClassName,
- showPointer,
content,
+ contentClassName,
+ flareProps,
rounded,
+ showPointer,
...rest
} = props;
diff --git a/packages/bpk-component-flare/src/BpkFlareBar.js b/packages/bpk-component-flare/src/BpkFlareBar.js
index 3c0bcf9c85..a73b6c99df 100644
--- a/packages/bpk-component-flare/src/BpkFlareBar.js
+++ b/packages/bpk-component-flare/src/BpkFlareBar.js
@@ -26,8 +26,8 @@ import CornerRadius from './__generated__/js/corner-radius';
const getClassName = cssModules(STYLES);
-const BpkFlareBar = props => {
- const { className, svgClassName, rounded, ...rest } = props;
+const BpkFlareBar = (props) => {
+ const { className, rounded, svgClassName, ...rest } = props;
const classNames = [getClassName('bpk-flare-bar__container')];
if (className) {
diff --git a/packages/bpk-component-flare/src/bpk-flare-bar.module.scss b/packages/bpk-component-flare/src/bpk-flare-bar.module.scss
index 0d5a2e33cb..7fabb1483a 100644
--- a/packages/bpk-component-flare/src/bpk-flare-bar.module.scss
+++ b/packages/bpk-component-flare/src/bpk-flare-bar.module.scss
@@ -38,7 +38,7 @@ $bpk-spacing-v2: true;
&__curve {
position: absolute;
- // stylelint-disable-next-line unit-blacklist
+ // stylelint-disable-next-line unit-disallowed-list
bottom: -1px;
width: 700rem; // required for correct behaviour in IE
height: $bpk-flare-height-desktop;
@@ -58,7 +58,7 @@ $bpk-spacing-v2: true;
&__rounded-corner {
position: absolute;
- // stylelint-disable-next-line unit-blacklist
+ // stylelint-disable-next-line unit-disallowed-list
bottom: calc(#{bpk-spacing-lg()} - 1px);
left: 0;
width: $bpk-flare-corner-radius;
diff --git a/packages/bpk-component-form-validation/examples.js b/packages/bpk-component-form-validation/examples.js
index 73067b1715..2d6e9b9078 100644
--- a/packages/bpk-component-form-validation/examples.js
+++ b/packages/bpk-component-form-validation/examples.js
@@ -43,7 +43,7 @@ class FormValidationContainer extends Component {
}
toggleExpanded = () => {
- this.setState(prevState => ({
+ this.setState((prevState) => ({
expanded: !prevState.expanded,
}));
};
@@ -79,12 +79,12 @@ class InputContainer extends Component {
if (FormComponent === BpkCheckbox) {
overrideProps = {
checked: this.state.value,
- onChange: e => this.setState({ value: e.target.checked }),
+ onChange: (e) => this.setState({ value: e.target.checked }),
};
} else {
overrideProps = {
value: this.state.value,
- onChange: e => this.setState({ value: e.target.value }),
+ onChange: (e) => this.setState({ value: e.target.value }),
};
if (FormComponent === BpkInput) {
overrideProps.onClear = () => this.setState({ value: '' });
diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.js b/packages/bpk-component-form-validation/src/BpkFormValidation.js
index 4e957513a3..740851f937 100644
--- a/packages/bpk-component-form-validation/src/BpkFormValidation.js
+++ b/packages/bpk-component-form-validation/src/BpkFormValidation.js
@@ -36,15 +36,9 @@ const AlignedExclamationIcon = withAlignment(
iconSizeSm,
);
-const BpkFormValidation = props => {
- const {
- children,
- expanded,
- isCheckbox,
- className,
- containerProps,
- ...rest
- } = props;
+const BpkFormValidation = (props) => {
+ const { children, className, containerProps, expanded, isCheckbox, ...rest } =
+ props;
const classNames = getClassName(
'bpk-form-validation',
diff --git a/packages/bpk-component-grid-toggle/src/BpkGridToggle.js b/packages/bpk-component-grid-toggle/src/BpkGridToggle.js
index 7fd7b457ec..e2c9c08175 100644
--- a/packages/bpk-component-grid-toggle/src/BpkGridToggle.js
+++ b/packages/bpk-component-grid-toggle/src/BpkGridToggle.js
@@ -47,20 +47,20 @@ class BpkGridToggle extends React.Component {
document.removeEventListener('keydown', this.handleKeyDown);
}
- handleKeyDown = e => {
+ handleKeyDown = (e) => {
if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'g') {
this.toggleGrid(e);
}
};
- toggleGrid = e => {
+ toggleGrid = (e) => {
e.preventDefault();
document
.querySelector(this.props.targetContainer)
.classList.toggle(GRID_CLASS_NAME);
- this.setState(state => ({
+ this.setState((state) => ({
gridEnabled: !state.gridEnabled,
}));
};
diff --git a/packages/bpk-component-grid/src/BpkGridColumn.js b/packages/bpk-component-grid/src/BpkGridColumn.js
index 74cfcfe0c5..f2ac1ed723 100644
--- a/packages/bpk-component-grid/src/BpkGridColumn.js
+++ b/packages/bpk-component-grid/src/BpkGridColumn.js
@@ -27,20 +27,20 @@ const getClassName = cssModules(STYLES);
// IE11 doesn't support `Number.isNaN` so we must use the global.
// When IE11 support drops we can migrate.
// eslint-disable-next-line no-restricted-globals
-const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n);
+const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n);
-const BpkGridColumn = props => {
+const BpkGridColumn = (props) => {
const {
children,
- width,
+ className,
+ debug,
+ mobileOffset,
mobileWidth,
- tabletWidth,
offset,
- mobileOffset,
- tabletOffset,
padded,
- debug,
- className,
+ tabletOffset,
+ tabletWidth,
+ width,
...rest
} = props;
diff --git a/packages/bpk-component-grid/src/BpkGridContainer.js b/packages/bpk-component-grid/src/BpkGridContainer.js
index 4b2a1ea686..f70c2ba0ce 100644
--- a/packages/bpk-component-grid/src/BpkGridContainer.js
+++ b/packages/bpk-component-grid/src/BpkGridContainer.js
@@ -24,7 +24,7 @@ import STYLES from './BpkGridContainer.module.scss';
const getClassName = cssModules(STYLES);
-const BpkGridContainer = props => {
+const BpkGridContainer = (props) => {
const { children, className, debug, fullWidth, ...rest } = props;
const classNames = [getClassName('bpk-grid__container')];
diff --git a/packages/bpk-component-grid/src/BpkGridRow.js b/packages/bpk-component-grid/src/BpkGridRow.js
index a3e3196af7..7a49da9122 100644
--- a/packages/bpk-component-grid/src/BpkGridRow.js
+++ b/packages/bpk-component-grid/src/BpkGridRow.js
@@ -24,9 +24,9 @@ import STYLES from './BpkGridRow.module.scss';
const getClassName = cssModules(STYLES);
-const BpkGridRow = props => {
+const BpkGridRow = (props) => {
const classNames = [getClassName('bpk-grid__row')];
- const { children, padded, className, ...rest } = props;
+ const { children, className, padded, ...rest } = props;
if (padded) {
classNames.push(getClassName('bpk-grid__row--padded'));
diff --git a/packages/bpk-component-heading/src/BpkHeading.js b/packages/bpk-component-heading/src/BpkHeading.js
index 17f4509059..67e7d918f7 100644
--- a/packages/bpk-component-heading/src/BpkHeading.js
+++ b/packages/bpk-component-heading/src/BpkHeading.js
@@ -35,7 +35,7 @@ type Props = {
};
const BpkHeading = (props: Props) => {
- const { children, level, className, id, bottomMargin } = props;
+ const { bottomMargin, children, className, id, level } = props;
const classNames = [getClassName(`bpk-heading-${level}`)];
const Level = level;
diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js
index cbeb16d04d..7f79c64653 100644
--- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js
+++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js
@@ -146,12 +146,12 @@ class BpkHorizontalNav extends Component {
render() {
const {
+ autoScrollToSelected,
children: rawChildren,
className,
- autoScrollToSelected,
leadingScrollIndicatorClassName,
- trailingScrollIndicatorClassName,
showUnderline,
+ trailingScrollIndicatorClassName,
type,
...rest
} = this.props;
@@ -165,12 +165,12 @@ class BpkHorizontalNav extends Component {
let children = rawChildren;
if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
- children = React.Children.map(rawChildren, child => {
+ children = React.Children.map(rawChildren, (child) => {
const childProps = {};
if (autoScrollToSelected) {
if (child && child.props && child.props.selected) {
- childProps.ref = ref => {
+ childProps.ref = (ref) => {
this.selectedItemRef = ref;
};
}
@@ -191,7 +191,7 @@ class BpkHorizontalNav extends Component {
className={classNames}
leadingIndicatorClassName={leadingScrollIndicatorClassName}
trailingIndicatorClassName={trailingScrollIndicatorClassName}
- scrollerRef={ref => {
+ scrollerRef={(ref) => {
this.scrollRef = ref;
}}
{...rest}
diff --git a/packages/bpk-component-icon/all.js b/packages/bpk-component-icon/all.js
index 6d5d7e5dcb..ec602276ed 100644
--- a/packages/bpk-component-icon/all.js
+++ b/packages/bpk-component-icon/all.js
@@ -19,7 +19,7 @@
function requireAll(requireContext) {
const hash = {};
- requireContext.keys().forEach(key => {
+ requireContext.keys().forEach((key) => {
const moduleName = key.replace('./', '').replace('.js', '');
hash[moduleName] = requireContext(key).default;
});
diff --git a/packages/bpk-component-icon/examples.js b/packages/bpk-component-icon/examples.js
index abed8060d7..7bbc3713dc 100644
--- a/packages/bpk-component-icon/examples.js
+++ b/packages/bpk-component-icon/examples.js
@@ -61,7 +61,7 @@ const RtlAlignedLargeLongArrowRightIcon = withRtlSupport(
const SmallIconsExample = () => (
- {Object.keys(sm).map(icon => {
+ {Object.keys(sm).map((icon) => {
const Icon = sm[icon];
return (
@@ -74,7 +74,7 @@ const SmallIconsExample = () => (
const LargeIconsExample = () => (
- {Object.keys(lg).map(icon => {
+ {Object.keys(lg).map((icon) => {
const Icon = lg[icon];
return (
diff --git a/packages/bpk-component-icon/gulpfile.babel.js b/packages/bpk-component-icon/gulpfile.babel.js
index 675c2bf7dd..d0b1e576b5 100644
--- a/packages/bpk-component-icon/gulpfile.babel.js
+++ b/packages/bpk-component-icon/gulpfile.babel.js
@@ -24,12 +24,12 @@ import gulp from 'gulp';
const ICONS_FOLDER_PATH = './node_modules/@skyscanner/bpk-svgs/dist/js/icons';
-const getFolders = dir =>
+const getFolders = (dir) =>
fs
.readdirSync(dir)
- .filter(file => fs.statSync(path.join(dir, file)).isDirectory());
+ .filter((file) => fs.statSync(path.join(dir, file)).isDirectory());
-gulp.task('clean', done => del(getFolders(ICONS_FOLDER_PATH), done));
+gulp.task('clean', (done) => del(getFolders(ICONS_FOLDER_PATH), done));
gulp.task('copy', () =>
gulp.src(`${ICONS_FOLDER_PATH}/**/*.js`).pipe(gulp.dest('.')),
diff --git a/packages/bpk-component-icon/gulpfile.js b/packages/bpk-component-icon/gulpfile.js
index a10c72e647..12aadfbb48 100644
--- a/packages/bpk-component-icon/gulpfile.js
+++ b/packages/bpk-component-icon/gulpfile.js
@@ -29,4 +29,4 @@ require('@babel/register')({
rootMode: 'upward',
});
-require('./gulpfile.babel.js');
+require('./gulpfile.babel');
diff --git a/packages/bpk-component-icon/src/classNameModifierHOCFactory-test.js b/packages/bpk-component-icon/src/classNameModifierHOCFactory-test.js
index 6b61cb5ba6..d50f9d27df 100644
--- a/packages/bpk-component-icon/src/classNameModifierHOCFactory-test.js
+++ b/packages/bpk-component-icon/src/classNameModifierHOCFactory-test.js
@@ -26,7 +26,7 @@ describe('classNameModifierHOCFactory', () => {
const withTestClass = classNameModifierHOCFactory('withTestClass', [
'test-class',
]);
- const MyComponent = props => test
;
+ const MyComponent = (props) => test
;
const MyTestClassComponent = withTestClass(MyComponent);
const { asFragment } = render( );
@@ -38,7 +38,7 @@ describe('classNameModifierHOCFactory', () => {
'test-class-1',
'test-class-2',
]);
- const MyComponent = props => test
;
+ const MyComponent = (props) => test
;
const MyTestClassComponent = withTestClass(MyComponent);
const { asFragment } = render( );
@@ -49,7 +49,7 @@ describe('classNameModifierHOCFactory', () => {
const withTestClass = classNameModifierHOCFactory('withTestClass', [
'test-class',
]);
- const MyComponent = props => test
;
+ const MyComponent = (props) => test
;
const MyTestClassComponent = withTestClass(MyComponent);
const { asFragment } = render(
@@ -63,7 +63,7 @@ describe('classNameModifierHOCFactory', () => {
'test-class-1',
'test-class-2',
]);
- const MyComponent = props => test
;
+ const MyComponent = (props) => test
;
const MyTestClassComponent = withTestClass(MyComponent);
const { asFragment } = render(
@@ -74,7 +74,7 @@ describe('classNameModifierHOCFactory', () => {
it('should render correctly with no classNames', () => {
const withTestClass = classNameModifierHOCFactory('withTestClass');
- const MyComponent = props => test
;
+ const MyComponent = (props) => test
;
const MyTestClassComponent = withTestClass(MyComponent);
const { asFragment } = render( );
diff --git a/packages/bpk-component-icon/src/classNameModifierHOCFactory.js b/packages/bpk-component-icon/src/classNameModifierHOCFactory.js
index 5b1a686208..921dce0fb2 100644
--- a/packages/bpk-component-icon/src/classNameModifierHOCFactory.js
+++ b/packages/bpk-component-icon/src/classNameModifierHOCFactory.js
@@ -20,33 +20,34 @@ import PropTypes from 'prop-types';
import React from 'react';
import { wrapDisplayName } from 'bpk-react-utils';
-export default (displayName, classNamesToAdd = []) => ComposedComponent => {
- const ClassNameModifierHOC = props => {
- let classNames = [];
- const { className, ...rest } = props;
-
- if (className) {
- classNames.push(className);
- }
- classNames = classNamesToAdd.length
- ? classNames.concat(classNamesToAdd)
- : classNames;
-
- return ;
+export default (displayName, classNamesToAdd = []) =>
+ (ComposedComponent) => {
+ const ClassNameModifierHOC = (props) => {
+ let classNames = [];
+ const { className, ...rest } = props;
+
+ if (className) {
+ classNames.push(className);
+ }
+ classNames = classNamesToAdd.length
+ ? classNames.concat(classNamesToAdd)
+ : classNames;
+
+ return ;
+ };
+
+ ClassNameModifierHOC.propTypes = {
+ className: PropTypes.string,
+ };
+
+ ClassNameModifierHOC.defaultProps = {
+ className: null,
+ };
+
+ ClassNameModifierHOC.displayName = wrapDisplayName(
+ ComposedComponent,
+ displayName,
+ );
+
+ return ClassNameModifierHOC;
};
-
- ClassNameModifierHOC.propTypes = {
- className: PropTypes.string,
- };
-
- ClassNameModifierHOC.defaultProps = {
- className: null,
- };
-
- ClassNameModifierHOC.displayName = wrapDisplayName(
- ComposedComponent,
- displayName,
- );
-
- return ClassNameModifierHOC;
-};
diff --git a/packages/bpk-component-icon/src/withAlignment-test.js b/packages/bpk-component-icon/src/withAlignment-test.js
index 831b04c9a4..1be559d69d 100644
--- a/packages/bpk-component-icon/src/withAlignment-test.js
+++ b/packages/bpk-component-icon/src/withAlignment-test.js
@@ -43,7 +43,7 @@ describe('withAlignment', () => {
it('should render correctly', () => {
for (let l = 0; l < lineHeights.length; l += 1) {
for (let i = 0; i < iconSizes.length; i += 1) {
- const MyComponent = props => (
+ const MyComponent = (props) => (
test lineHeight {lineHeights[l]} and iconsSize {iconSizes[i]}
@@ -61,7 +61,7 @@ describe('withAlignment', () => {
});
it('should keep wrapped-component styling', () => {
- const FloatingComponent = props => (
+ const FloatingComponent = (props) => (
test lineHeight {lineHeightLg} and iconsSize {iconSizeSm}
@@ -80,7 +80,7 @@ describe('withAlignment', () => {
it('should wrap the component display name', () => {
const AlignedComponent = withAlignment(
- props => test
,
+ (props) => test
,
lineHeightLg,
iconSizeSm,
);
diff --git a/packages/bpk-component-icon/src/withAlignment.js b/packages/bpk-component-icon/src/withAlignment.js
index c30fc507c7..25e2517962 100644
--- a/packages/bpk-component-icon/src/withAlignment.js
+++ b/packages/bpk-component-icon/src/withAlignment.js
@@ -20,13 +20,12 @@ import React from 'react';
import { wrapDisplayName } from 'bpk-react-utils';
export default function withAlignment(Component, objectHeight, subjectHeight) {
- const WithAlignment = props => {
+ const WithAlignment = (props) => {
const objectHeightDecimal = `${objectHeight}`.replace('rem', '');
const subjectHeightDecimal = `${subjectHeight}`.replace('rem', '');
- const marginTopCalculated = `${Math.max(
- 0,
- objectHeightDecimal - subjectHeightDecimal,
- ) / 2}rem`;
+ const marginTopCalculated = `${
+ Math.max(0, objectHeightDecimal - subjectHeightDecimal) / 2
+ }rem`;
return (
,
description: string,
): AbstractComponent {
- const WithDescription = props => (
+ const WithDescription = (props) => (
diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.js b/packages/bpk-component-image/src/BpkBackgroundImage.js
index c333e406ed..b503ea56da 100644
--- a/packages/bpk-component-image/src/BpkBackgroundImage.js
+++ b/packages/bpk-component-image/src/BpkBackgroundImage.js
@@ -124,15 +124,8 @@ class BpkBackgroundImage extends Component {
};
render(): Node {
- const {
- children,
- className,
- inView,
- loading,
- src,
- imageStyle,
- style,
- } = this.props;
+ const { children, className, imageStyle, inView, loading, src, style } =
+ this.props;
const calculatedAspectRatio = this.getAspectRatio();
const aspectRatioPc = `${100 / calculatedAspectRatio}%`;
diff --git a/packages/bpk-component-image/src/BpkImage.js b/packages/bpk-component-image/src/BpkImage.js
index 7bf5aa404a..5a74128bcd 100644
--- a/packages/bpk-component-image/src/BpkImage.js
+++ b/packages/bpk-component-image/src/BpkImage.js
@@ -62,12 +62,12 @@ class Image extends Component {
}
}
- setImgRef = el => {
+ setImgRef = (el) => {
this.img = el;
};
render() {
- const { hidden, altText, onImageLoad, ...rest } = this.props;
+ const { altText, hidden, onImageLoad, ...rest } = this.props;
const imgClassNames = [getClassName('bpk-image__img')];
@@ -160,16 +160,16 @@ class BpkImage extends Component {
render(): Node {
const {
- width,
- height,
- aspectRatio,
altText,
+ aspectRatio,
borderRadiusStyle,
className,
+ height,
inView,
loading,
onLoad,
style,
+ width,
...rest
} = this.props;
@@ -195,7 +195,7 @@ class BpkImage extends Component {
return (
{
+ ref={(div) => {
this.placeholder = div;
}}
style={{ height: 0, paddingBottom: aspectRatioPercentage }}
diff --git a/packages/bpk-component-image/src/withLazyLoading.js b/packages/bpk-component-image/src/withLazyLoading.js
index d8906cc612..cb8d77ceb1 100644
--- a/packages/bpk-component-image/src/withLazyLoading.js
+++ b/packages/bpk-component-image/src/withLazyLoading.js
@@ -158,12 +158,12 @@ export default function withLazyLoading(
};
render(): Node {
- const { style, className, ...rest } = this.props;
+ const { className, style, ...rest } = this.props;
return (
{
+ ref={(element) => {
this.element = element;
}}
style={style}
diff --git a/packages/bpk-component-infinite-scroll/examples.js b/packages/bpk-component-infinite-scroll/examples.js
index 91bcac03e4..4b03b2648f 100644
--- a/packages/bpk-component-infinite-scroll/examples.js
+++ b/packages/bpk-component-infinite-scroll/examples.js
@@ -57,7 +57,7 @@ const elementsArray = [
const List = ({ elements }) => (
- {elements.map(element => (
+ {elements.map((element) => (
{element}
))}
@@ -71,7 +71,7 @@ const InfiniteList = withInfiniteScroll(List);
class DelayedDataSource extends ArrayDataSource {
fetchItems(index, nElements) {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
setTimeout(() => resolve(super.fetchItems(index, nElements)), 500);
});
}
@@ -86,7 +86,7 @@ class InfiniteDataSource extends DataSource {
}
fetchItems(index, nElements) {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
for (let i = index; i < index + nElements; i += 1) {
this.elements.push(i);
}
diff --git a/packages/bpk-component-infinite-scroll/src/DataSource-test.js b/packages/bpk-component-infinite-scroll/src/DataSource-test.js
index fcc272265b..5fe6911f7a 100644
--- a/packages/bpk-component-infinite-scroll/src/DataSource-test.js
+++ b/packages/bpk-component-infinite-scroll/src/DataSource-test.js
@@ -61,21 +61,22 @@ const withCommonTests = (createNewInstance, extraTests) => {
}
};
-describe('DataSource', () =>
+describe('DataSource', () => {
withCommonTests(
() => new DataSource(),
- getDs => {
- it('it throws an error when fetchItems is called directly', () => {
+ (getDs) => {
+ it('throws an error when fetchItems is called directly', () => {
expect(() => getDs().fetchItems()).toThrow(/Not implemented/);
});
},
- ));
+ );
+});
describe('ArrayDataSource', () => {
const elements = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
withCommonTests(
() => new ArrayDataSource(elements),
- getDs => {
+ (getDs) => {
describe('fetchItems', () => {
it('fetches items correctly', async () => {
expect(await getDs().fetchItems(0, 5)).toEqual([1, 2, 3, 4, 5]);
diff --git a/packages/bpk-component-infinite-scroll/src/DataSource.js b/packages/bpk-component-infinite-scroll/src/DataSource.js
index 8b9267c788..6c1cd0d927 100644
--- a/packages/bpk-component-infinite-scroll/src/DataSource.js
+++ b/packages/bpk-component-infinite-scroll/src/DataSource.js
@@ -50,7 +50,7 @@ class DataSource
{
}
triggerListeners = (...args: Array): void => {
- this.listeners.forEach(cb => cb(...args));
+ this.listeners.forEach((cb) => cb(...args));
};
}
@@ -64,7 +64,7 @@ export class ArrayDataSource extends DataSource {
fetchItems(index: number, nElements: number): Promise> {
const { elements } = this;
- return new Promise(resolve => {
+ return new Promise((resolve) => {
const totalElements = elements.length;
const n = totalElements - index;
if (n <= 0) {
diff --git a/packages/bpk-component-infinite-scroll/src/accessibility-test.js b/packages/bpk-component-infinite-scroll/src/accessibility-test.js
index db5abed4eb..9239e0a2e7 100644
--- a/packages/bpk-component-infinite-scroll/src/accessibility-test.js
+++ b/packages/bpk-component-infinite-scroll/src/accessibility-test.js
@@ -32,9 +32,9 @@ describe('withInfiniteScroll accessibility tests', () => {
elementsArray.push(`Element ${i}`);
}
- const List = props => (
+ const List = (props) => (
- {props.elements.map(element => (
+ {props.elements.map((element) => (
{element}
))}
diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js
index 4b2ddaece7..f8fd6599e4 100644
--- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js
+++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js
@@ -48,7 +48,7 @@ class List extends Component {
return (
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
- {elements.forEach(element => (
+ {elements.forEach((element) => (
{element}
))}
@@ -88,10 +88,10 @@ const InfiniteList = withInfiniteScroll(List);
elementsPerScroll={5}
initiallyLoadedElements={1}
loaderIntersectionTrigger="small"
- onScroll={evt => {}} // eslint-disable-line no-unused-vars
- onScrollFinished={evt => {}} // eslint-disable-line no-unused-vars
+ onScroll={(evt) => {}} // eslint-disable-line no-unused-vars
+ onScrollFinished={(evt) => {}} // eslint-disable-line no-unused-vars
renderLoadingComponent={() =>
}
- renderSeeMoreComponent={onClick => (
+ renderSeeMoreComponent={(onClick) => (
Button
diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js
index ab0bf13f5e..22bdd16954 100644
--- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js
+++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js
@@ -25,8 +25,8 @@ import toJson from 'enzyme-to-json';
import withInfiniteScroll from './withInfiniteScroll';
import { ArrayDataSource } from './DataSource';
-const nextTick = () => new Promise(res => setImmediate(res));
-const mockDataSource = data => {
+const nextTick = () => new Promise((res) => setImmediate(res));
+const mockDataSource = (data) => {
const myDs = new ArrayDataSource(data);
const mockFetch = myDs.fetchItems.bind(myDs);
myDs.fetchItems = jest.fn((...args) => mockFetch(...args));
@@ -40,9 +40,9 @@ describe('withInfiniteScroll', () => {
elementsArray.push(`Element ${i}`);
}
- const List = props => (
+ const List = (props) => (
- {props.elements.map(element => (
+ {props.elements.map((element) => (
{element}
))}
diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js
index 12008290ed..ee55c7a4b5 100644
--- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js
+++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js
@@ -137,7 +137,7 @@ const withInfiniteScroll = (
componentDidMount() {
this.fetchItems({
elementsPerScroll: this.props.initiallyLoadedElements,
- }).then(newState => {
+ }).then((newState) => {
this.setState(newState);
});
}
@@ -154,7 +154,7 @@ const withInfiniteScroll = (
index: 0,
elementsPerScroll: this.props.elementsPerScroll,
elementsToRender: [],
- }).then(newState => this.setStateAfterDsUpdate(newState));
+ }).then((newState) => this.setStateAfterDsUpdate(newState));
}
}
@@ -191,29 +191,25 @@ const withInfiniteScroll = (
elementsPerScroll: isFirstLoad ? this.props.elementsPerScroll : index,
elementsToRender: [],
computeShowSeeMore: isFirstLoad,
- }).then(newState => this.setStateAfterDsUpdate(newState));
+ }).then((newState) => this.setStateAfterDsUpdate(newState));
};
fetchItems(config): Promise<$Shape> {
const { onScrollFinished, seeMoreAfter } = this.props;
- const {
- index,
- elementsPerScroll,
- elementsToRender,
- computeShowSeeMore,
- } = extend(
- {
- index: this.state.index,
- elementsPerScroll: this.props.elementsPerScroll,
- elementsToRender: this.state.elementsToRender,
- computeShowSeeMore: true,
- },
- config,
- );
+ const { computeShowSeeMore, elementsPerScroll, elementsToRender, index } =
+ extend(
+ {
+ index: this.state.index,
+ elementsPerScroll: this.props.elementsPerScroll,
+ elementsToRender: this.state.elementsToRender,
+ computeShowSeeMore: true,
+ },
+ config,
+ );
return this.props.dataSource
.fetchItems(index, elementsPerScroll)
- .then(nextElements => {
+ .then((nextElements) => {
let result = {
isListFinished: true,
};
@@ -247,7 +243,7 @@ const withInfiniteScroll = (
if (onScroll) {
onScroll({ currentIndex: this.state.index });
}
- return this.fetchItems().then(newState => {
+ return this.fetchItems().then((newState) => {
this.setState(newState);
});
}
@@ -255,14 +251,14 @@ const withInfiniteScroll = (
};
handleSeeMoreClick = () => {
- this.fetchItems().then(newState => {
+ this.fetchItems().then((newState) => {
this.setState(newState);
});
};
render() {
const { elementsToRender, isListFinished, showSeeMore } = this.state;
- const { renderSeeMoreComponent, renderLoadingComponent } = this.props;
+ const { renderLoadingComponent, renderSeeMoreComponent } = this.props;
const rest = omit(this.props, Object.keys(propTypes));
@@ -276,7 +272,7 @@ const withInfiniteScroll = (
} else {
loadingOrButton = (
{
+ ref={(spinner) => {
this.sentinel = spinner;
}}
className={
diff --git a/packages/bpk-component-infinite-scroll/stories.js b/packages/bpk-component-infinite-scroll/stories.js
index 7a6952afac..d81e50ba7c 100644
--- a/packages/bpk-component-infinite-scroll/stories.js
+++ b/packages/bpk-component-infinite-scroll/stories.js
@@ -39,7 +39,7 @@ import {
* at the botton, which will cause the next story to load all items up to that position.
* That is not a problem but we want each story to start with a clean state.
*/
-const withScrollReset = story => {
+const withScrollReset = (story) => {
window.scrollTo(0, 0);
return story();
};
diff --git a/packages/bpk-component-input/examples.js b/packages/bpk-component-input/examples.js
index ae6386ca16..cf0f1b7eba 100644
--- a/packages/bpk-component-input/examples.js
+++ b/packages/bpk-component-input/examples.js
@@ -65,7 +65,7 @@ class ClearableInput extends Component
{
};
}
- onChange = e => {
+ onChange = (e) => {
this.setState({ value: e.target.value });
};
diff --git a/packages/bpk-component-input/src/BpkClearButton.js b/packages/bpk-component-input/src/BpkClearButton.js
index 214d3a269d..c602c0c601 100644
--- a/packages/bpk-component-input/src/BpkClearButton.js
+++ b/packages/bpk-component-input/src/BpkClearButton.js
@@ -37,7 +37,7 @@ type Props = {
const BpkClearButton = (props: Props) => {
const classNames = [getClassName('bpk-clear-button')];
- const { label, onClick, className, ...rest } = props;
+ const { className, label, onClick, ...rest } = props;
if (className) {
classNames.push(className);
diff --git a/packages/bpk-component-input/src/BpkInput-test.js b/packages/bpk-component-input/src/BpkInput-test.js
index 15e8ff81e2..0e4b631a05 100644
--- a/packages/bpk-component-input/src/BpkInput-test.js
+++ b/packages/bpk-component-input/src/BpkInput-test.js
@@ -213,7 +213,7 @@ describe('BpkInput', () => {
it('should expose input reference to parent components', () => {
let inputRef;
- const storeInputReference = ref => {
+ const storeInputReference = (ref) => {
inputRef = ref;
};
const tree = mount(
@@ -225,10 +225,7 @@ describe('BpkInput', () => {
onChange={() => {}}
/>,
);
- const input = tree
- .find('input')
- .at(0)
- .instance();
+ const input = tree.find('input').at(0).instance();
expect(input).toEqual(inputRef);
});
diff --git a/packages/bpk-component-input/src/BpkInput.js b/packages/bpk-component-input/src/BpkInput.js
index c3b23e36a1..7fb83cca5a 100644
--- a/packages/bpk-component-input/src/BpkInput.js
+++ b/packages/bpk-component-input/src/BpkInput.js
@@ -53,18 +53,18 @@ class BpkInput extends Component {
const clearButtonClassNames = [getClassName('bpk-input__clear-button')];
const {
className,
- clearButtonMode,
clearButtonLabel,
+ clearButtonMode,
docked,
dockedFirst,
dockedLast,
dockedMiddle,
inputRef,
large,
+ name,
onClear,
valid,
value,
- name,
...rest
} = this.props;
@@ -127,7 +127,7 @@ class BpkInput extends Component {
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
{
+ ref={(input) => {
ref = input;
if (inputRef) {
inputRef(input);
@@ -155,7 +155,7 @@ class BpkInput extends Component {
tabIndex="-1"
label={clearButtonLabel || ''}
onMouseDown={onMouseDown}
- onClick={e => {
+ onClick={(e) => {
if (ref) {
ref.focus();
}
diff --git a/packages/bpk-component-input/src/common-types.js b/packages/bpk-component-input/src/common-types.js
index 588e7547fd..62257eb706 100644
--- a/packages/bpk-component-input/src/common-types.js
+++ b/packages/bpk-component-input/src/common-types.js
@@ -57,7 +57,7 @@ export const clearablePropType = (
propName: string,
componentName: string,
): ?Error => {
- const createError = message =>
+ const createError = (message) =>
new Error(
`Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`,
);
diff --git a/packages/bpk-component-input/src/withOpenEvents.js b/packages/bpk-component-input/src/withOpenEvents.js
index 3b7b31df58..f93b7fd34c 100644
--- a/packages/bpk-component-input/src/withOpenEvents.js
+++ b/packages/bpk-component-input/src/withOpenEvents.js
@@ -29,21 +29,21 @@ const KEYCODES = {
SPACEBAR: 32,
};
-const handleKeyEvent = (keyCode, callback) => e => {
+const handleKeyEvent = (keyCode, callback) => (e) => {
if (e.keyCode === keyCode) {
e.preventDefault();
callback();
}
};
-const withEventHandler = (fn, eventHandler) => e => {
+const withEventHandler = (fn, eventHandler) => (e) => {
fn(e);
if (eventHandler) {
eventHandler(e);
}
};
-const withOpenEvents = InputComponent => {
+const withOpenEvents = (InputComponent) => {
class WithOpenEvents extends React.Component {
constructor(props) {
super(props);
@@ -51,7 +51,7 @@ const withOpenEvents = InputComponent => {
this.focusCanOpen = true;
}
- handleTouchEnd = event => {
+ handleTouchEnd = (event) => {
// preventDefault fixes an issue on Android and iOS in which the popover closes immediately
// because a touch event is registered on one of the dates.
// We can only run preventDefault when the input is already focused - otherwise it would never set
@@ -85,13 +85,13 @@ const withOpenEvents = InputComponent => {
const {
className,
hasTouchSupport,
+ onBlur,
onClick,
onFocus,
- onBlur,
- onTouchEnd,
onKeyDown,
onKeyUp,
onOpen,
+ onTouchEnd,
...rest
} = this.props;
diff --git a/packages/bpk-component-label/src/BpkLabel.js b/packages/bpk-component-label/src/BpkLabel.js
index 55d68ed2cc..61dc81f024 100644
--- a/packages/bpk-component-label/src/BpkLabel.js
+++ b/packages/bpk-component-label/src/BpkLabel.js
@@ -35,15 +35,8 @@ export type Props = {
};
const BpkLabel = (props: Props) => {
- const {
- children,
- required,
- white,
- disabled,
- valid,
- className,
- ...rest
- } = props;
+ const { children, className, disabled, required, valid, white, ...rest } =
+ props;
const classNames = [getClassName('bpk-label')];
const invalid = valid === false;
diff --git a/packages/bpk-component-link/src/BpkButtonLink.js b/packages/bpk-component-link/src/BpkButtonLink.js
index 1dfe1de868..02728eedd1 100644
--- a/packages/bpk-component-link/src/BpkButtonLink.js
+++ b/packages/bpk-component-link/src/BpkButtonLink.js
@@ -36,7 +36,7 @@ type Props = {
};
const BpkButtonLink = (props: Props) => {
- const { children, className, onClick, white, alternate, ...rest } = props;
+ const { alternate, children, className, onClick, white, ...rest } = props;
const classNames = [getClassName('bpk-link')];
if (white || alternate) {
diff --git a/packages/bpk-component-link/src/BpkLink.js b/packages/bpk-component-link/src/BpkLink.js
index 7d1611ef72..9c7774a81a 100644
--- a/packages/bpk-component-link/src/BpkLink.js
+++ b/packages/bpk-component-link/src/BpkLink.js
@@ -42,14 +42,14 @@ type Props = {
const BpkLink = (props: Props) => {
const {
+ alternate,
+ blank,
children,
className,
href,
onClick,
- blank,
rel: propRel,
white,
- alternate,
...rest
} = props;
diff --git a/packages/bpk-component-list/src/BpkList.js b/packages/bpk-component-list/src/BpkList.js
index 62e9475fd6..fb3971e998 100644
--- a/packages/bpk-component-list/src/BpkList.js
+++ b/packages/bpk-component-list/src/BpkList.js
@@ -33,7 +33,7 @@ type Props = {
};
const BpkList = (props: Props) => {
- const { children, ordered, className } = props;
+ const { children, className, ordered } = props;
const TagName: any = ordered ? 'ol' : 'ul';
const classNames: string = getClassName('bpk-list', className);
diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.js b/packages/bpk-component-loading-button/src/BpkLoadingButton.js
index 06fc866145..9943cee582 100644
--- a/packages/bpk-component-loading-button/src/BpkLoadingButton.js
+++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.js
@@ -35,8 +35,8 @@ export const ICON_POSITION = {
TRAILING: 'trailing',
};
-const getPropsIcon = props => {
- const { disabled, loading, icon, iconDisabled, iconLoading } = props;
+const getPropsIcon = (props) => {
+ const { disabled, icon, iconDisabled, iconLoading, loading } = props;
if (loading) {
return iconLoading;
@@ -60,7 +60,7 @@ const getEnabledIcon = (large: boolean) => {
type IconProps = { loading: boolean, large: boolean };
const getDefaultIcon = (props: IconProps) => {
- const { loading, large } = props;
+ const { large, loading } = props;
if (loading) {
return getSpinner(large);
@@ -88,12 +88,12 @@ const BpkLoadingButton = (props: LoadingProps) => {
const {
children,
disabled,
- loading,
- iconOnly,
icon,
iconDisabled,
iconLoading,
+ iconOnly,
iconPosition,
+ loading,
...rest
} = props;
diff --git a/packages/bpk-component-map/examples.js b/packages/bpk-component-map/examples.js
index 6dbb48dd3f..fd3e68c3d6 100644
--- a/packages/bpk-component-map/examples.js
+++ b/packages/bpk-component-map/examples.js
@@ -149,7 +149,7 @@ class StatefulBpkPriceMarker extends Component<
};
selectVenue = (id: string) => {
- this.setState(prevState => ({
+ this.setState((prevState) => ({
selectedId: id,
viewedVenues: [...prevState.viewedVenues, id],
}));
@@ -161,7 +161,7 @@ class StatefulBpkPriceMarker extends Component<
zoom={15}
center={{ latitude: 55.944665, longitude: -3.1964903 }}
>
- {venues.map(venue => (
+ {venues.map((venue) => (
- {venues.map(venue => (
+ {venues.map((venue) => (
{
@@ -221,7 +221,7 @@ class StatefulBpkIconMarker extends Component<
}
}
-const onZoom = level => {
+const onZoom = (level) => {
action(`Zoom changed to ${level}`);
};
diff --git a/packages/bpk-component-map/src/BpkIconMarker.js b/packages/bpk-component-map/src/BpkIconMarker.js
index 4c574f2b77..5948b2d9d9 100644
--- a/packages/bpk-component-map/src/BpkIconMarker.js
+++ b/packages/bpk-component-map/src/BpkIconMarker.js
@@ -41,13 +41,13 @@ export type Props = {
const BpkIconMarker = (props: Props) => {
const {
- icon,
- position,
+ buttonProps,
className,
disabled,
- selected,
+ icon,
onClick,
- buttonProps,
+ position,
+ selected,
...rest
} = props;
diff --git a/packages/bpk-component-map/src/BpkMap.js b/packages/bpk-component-map/src/BpkMap.js
index aaf02fb7a7..572b0939c9 100644
--- a/packages/bpk-component-map/src/BpkMap.js
+++ b/packages/bpk-component-map/src/BpkMap.js
@@ -35,7 +35,7 @@ export type MapRef = ?{
getBounds: () => Bounds,
getCenter: () => LatLong,
getZoom: () => number,
- fitBounds: Bounds => void,
+ fitBounds: (Bounds) => void,
};
type Props = {
@@ -57,13 +57,13 @@ type Props = {
const BpkMap = withGoogleMap((props: Props) => {
const {
bounds,
+ center,
children,
greedyGestureHandling,
mapRef,
- onTilesLoaded,
onRegionChange,
+ onTilesLoaded,
onZoom,
- center,
panEnabled,
showControls,
zoom,
diff --git a/packages/bpk-component-map/src/BpkPriceMarker-test.js b/packages/bpk-component-map/src/BpkPriceMarker-test.js
index 56817da550..2ed1212acb 100644
--- a/packages/bpk-component-map/src/BpkPriceMarker-test.js
+++ b/packages/bpk-component-map/src/BpkPriceMarker-test.js
@@ -35,7 +35,7 @@ describe('BpkMapMarker', () => {
expect(toJson(tree)).toMatchSnapshot();
});
- it('should render correctly with "status" attribute as "focused" ', () => {
+ it('should render correctly with "status" attribute as "focused"', () => {
const tree = shallow(
{
expect(toJson(tree)).toMatchSnapshot();
});
- it('should render correctly with "status" attribute as "viewed" ', () => {
+ it('should render correctly with "status" attribute as "viewed"', () => {
const tree = shallow(
{
const {
- label,
- position,
- className,
arrowClassName,
+ buttonProps,
+ className,
disabled,
+ label,
onClick,
- buttonProps,
+ position,
status,
...rest
} = props;
diff --git a/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap b/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap
index 54be948493..fcb893cbae 100644
--- a/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap
+++ b/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`BpkMapMarker should render correctly with "status" attribute as "focused" 1`] = `
+exports[`BpkMapMarker should render correctly with "status" attribute as "focused" 1`] = `
`;
-exports[`BpkMapMarker should render correctly with "status" attribute as "viewed" 1`] = `
+exports[`BpkMapMarker should render correctly with "status" attribute as "viewed" 1`] = `
{
const classNames = [getClassName('bpk-mobile-scroll-container')];
const {
children,
- scrollerRef,
- innerContainerTagName,
className,
+ innerContainerTagName,
leadingIndicatorClassName,
- trailingIndicatorClassName,
- style,
+ scrollerRef,
showScrollbar,
+ style,
+ trailingIndicatorClassName,
...rest
} = this.props;
@@ -211,7 +211,7 @@ class BpkMobileScrollContainer extends Component {
style={{ ...style, height: this.state.computedHeight }}
>
{
+ ref={(el) => {
if (scrollerRef) {
scrollerRef(el);
}
@@ -221,7 +221,7 @@ class BpkMobileScrollContainer extends Component
{
className={scrollerClassNames}
>
{
+ ref={(el) => {
this.innerEl = el;
}}
className={getClassName('bpk-mobile-scroll-container__inner')}
diff --git a/packages/bpk-component-modal/examples.js b/packages/bpk-component-modal/examples.js
index b1e76e1fb3..6ec9619995 100644
--- a/packages/bpk-component-modal/examples.js
+++ b/packages/bpk-component-modal/examples.js
@@ -149,13 +149,8 @@ class ModalContainer extends Component<
};
render() {
- const {
- children,
- wrapperProps,
- buttonLabel,
- accessoryView,
- ...rest
- } = this.props;
+ const { accessoryView, buttonLabel, children, wrapperProps, ...rest } =
+ this.props;
return (
diff --git a/packages/bpk-component-modal/src/BpkModal.js b/packages/bpk-component-modal/src/BpkModal.js
index 195254a4cd..7203869c66 100644
--- a/packages/bpk-component-modal/src/BpkModal.js
+++ b/packages/bpk-component-modal/src/BpkModal.js
@@ -55,15 +55,15 @@ export type Props = {
const BpkModal = (props: Props) => {
const {
+ closeOnEscPressed,
+ closeOnScrimClick,
+ fullScreen,
+ fullScreenOnMobile,
+ isIphone,
isOpen,
onClose,
- isIphone,
- target,
renderTarget,
- fullScreenOnMobile,
- fullScreen,
- closeOnScrimClick,
- closeOnEscPressed,
+ target,
...rest
} = props;
diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.js b/packages/bpk-component-navigation-bar/src/BpkNavigationBar.js
index e4df518275..d63e696f04 100644
--- a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.js
+++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBar.js
@@ -43,12 +43,12 @@ const cloneWithClass = (elem: Element
, newStyle: string) => {
const BpkNavigationBar = (props: Props) => {
const {
- id,
- title,
className,
+ id,
leadingButton,
- trailingButton,
sticky,
+ title,
+ trailingButton,
...rest
} = props;
diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js b/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js
index 181e92f502..1d4df93b10 100644
--- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js
+++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js
@@ -35,8 +35,8 @@ export type Props = {
};
const BpkNavigationBarButtonLink = ({
- className,
children,
+ className,
...rest
}: Props) => (
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton-test.js b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton-test.js
index 57e93479e5..4b012cfc77 100644
--- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton-test.js
+++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton-test.js
@@ -24,7 +24,7 @@ import { render } from '@testing-library/react';
import BpkNavigationIconButton from './BpkNavigationBarIconButton';
describe('BpkNavigationIconButton', () => {
- const Icon = props => ;
+ const Icon = (props) => ;
it('should render correctly', () => {
const { asFragment } = render(
diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js
index 479a30bde7..02f109a87f 100644
--- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js
+++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js
@@ -35,7 +35,7 @@ export type Props = {
className: ?string,
};
-const BpkNavigationBarIconButton = ({ icon, className, ...rest }: Props) => (
+const BpkNavigationBarIconButton = ({ className, icon, ...rest }: Props) => (
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
(
{props => }]}
+ initialViews={[{(props) => } ]}
/>
);
const WithNavBarExample = () => (
{props => }]}
+ initialViews={[{(props) => } ]}
/>
);
diff --git a/packages/bpk-component-navigation-stack/src/BpkNavigationStack.js b/packages/bpk-component-navigation-stack/src/BpkNavigationStack.js
index d538db9706..7cbb2fbb5a 100644
--- a/packages/bpk-component-navigation-stack/src/BpkNavigationStack.js
+++ b/packages/bpk-component-navigation-stack/src/BpkNavigationStack.js
@@ -73,7 +73,7 @@ class BpkNavigationStack extends React.Component {
}, parseInt(durationSm, 10) + 10);
render() {
- const { views, className, ...rest } = this.props;
+ const { className, views, ...rest } = this.props;
const { transition } = this.state;
const lastIndex = (views || []).length - 1;
diff --git a/packages/bpk-component-navigation-stack/src/withNavigationStackState.js b/packages/bpk-component-navigation-stack/src/withNavigationStackState.js
index 9e3c763c04..4fce0014cb 100644
--- a/packages/bpk-component-navigation-stack/src/withNavigationStackState.js
+++ b/packages/bpk-component-navigation-stack/src/withNavigationStackState.js
@@ -57,7 +57,7 @@ export default (
}
pushView = (view: Element) => {
- this.setState(prevState => {
+ this.setState((prevState) => {
const views = prevState.views.slice();
views.push(view);
@@ -68,7 +68,7 @@ export default (
};
popView = () => {
- this.setState(prevState => {
+ this.setState((prevState) => {
const views = prevState.views.slice();
views.pop();
@@ -90,7 +90,7 @@ export default (
};
const [views, optionalCallbacks] = assignCallbacksToChildren
- ? [this.state.views.map(view => cloneElement(view, callbacks)), {}]
+ ? [this.state.views.map((view) => cloneElement(view, callbacks)), {}]
: [this.state.views, callbacks];
return (
diff --git a/packages/bpk-component-navigation-stack/stories-components.js b/packages/bpk-component-navigation-stack/stories-components.js
index 5ff99df4a0..fb853207d0 100644
--- a/packages/bpk-component-navigation-stack/stories-components.js
+++ b/packages/bpk-component-navigation-stack/stories-components.js
@@ -42,13 +42,13 @@ const RightArrowIcon = withRtlSupport(BpkRightArrowIcon);
const getClassName = cssModules(STYLES);
export const View = ({
+ centered,
children,
- index,
- pushView,
- popView,
className,
+ index,
noNavBar,
- centered,
+ popView,
+ pushView,
...rest
}: {
children: ({
@@ -89,8 +89,8 @@ View.defaultProps = {
export const SimpleNav = ({
index,
- pushView,
popView,
+ pushView,
}: {
index: number,
pushView: ?(Element) => mixed,
@@ -102,7 +102,7 @@ export const SimpleNav = ({
pushView &&
pushView(
- {props => }
+ {(props) => }
,
)
}
@@ -119,9 +119,9 @@ export const SimpleNav = ({
export const NavigationBar = ({
index,
- pushView,
- popView,
nextView,
+ popView,
+ pushView,
}: {
index: number,
pushView: ?(Element) => mixed,
@@ -147,7 +147,7 @@ export const NavigationBar = ({
pushView(
(nextView && nextView()) || (
- {props => }
+ {(props) => }
),
)
@@ -169,9 +169,9 @@ export const withNavigationBar = (
Stack: ComponentType>,
) => {
const WithNavigationBar = ({
- views,
- pushView,
popView,
+ pushView,
+ views,
...rest
}: {
views: Array>,
diff --git a/packages/bpk-component-nudger/examples.js b/packages/bpk-component-nudger/examples.js
index 822d779f0f..0e84bad1f2 100644
--- a/packages/bpk-component-nudger/examples.js
+++ b/packages/bpk-component-nudger/examples.js
@@ -46,7 +46,7 @@ class NudgerContainer extends Component<
};
render() {
- const { id, buttonType } = this.props;
+ const { buttonType, id } = this.props;
const labelClassName = getClassName(
buttonType === 'outline' && 'bpk-nudger-outline',
diff --git a/packages/bpk-component-nudger/src/BpkConfigurableNudger.js b/packages/bpk-component-nudger/src/BpkConfigurableNudger.js
index 9b601eea63..e1a318251e 100644
--- a/packages/bpk-component-nudger/src/BpkConfigurableNudger.js
+++ b/packages/bpk-component-nudger/src/BpkConfigurableNudger.js
@@ -43,28 +43,28 @@ const AlignedPlusIcon = withButtonAlignment(PlusIcon);
type Props = {
...$Exact>,
inputClassName: ?string,
- formatValue: T => string,
- incrementValue: T => T,
- decrementValue: T => T,
+ formatValue: (T) => string,
+ incrementValue: (T) => T,
+ decrementValue: (T) => T,
compareValues: (T, T) => number,
};
const BpkConfigurableNudger = (props: Props) => {
const {
- id,
- min,
- max,
- value,
- onChange,
+ buttonType,
className,
- inputClassName,
- increaseButtonLabel,
+ compareValues,
decreaseButtonLabel,
- buttonType,
+ decrementValue,
formatValue,
+ id,
+ increaseButtonLabel,
incrementValue,
- decrementValue,
- compareValues,
+ inputClassName,
+ max,
+ min,
+ onChange,
+ value,
...rest
} = props;
const classNames = [getClassName('bpk-nudger')];
diff --git a/packages/bpk-component-nudger/src/BpkNudger-test.js b/packages/bpk-component-nudger/src/BpkNudger-test.js
index 4d302e73a7..41b327a5e8 100644
--- a/packages/bpk-component-nudger/src/BpkNudger-test.js
+++ b/packages/bpk-component-nudger/src/BpkNudger-test.js
@@ -64,19 +64,19 @@ describe('BpkNudger', () => {
return aIndex - bIndex;
};
- const incrementValue = currentValue => {
+ const incrementValue = (currentValue) => {
const options = ['economy', 'premium', 'business', 'first'];
const [aIndex] = [options.indexOf(currentValue) + 1];
return options[aIndex];
};
- const decrementValue = currentValue => {
+ const decrementValue = (currentValue) => {
const options = ['economy', 'premium', 'business', 'first'];
const [aIndex] = [options.indexOf(currentValue) - 1];
return options[aIndex];
};
- const formatValue = a => a.toString();
+ const formatValue = (a) => a.toString();
const { asFragment } = render(
= {
min: T,
max: T,
value: T,
- onChange: T => mixed,
+ onChange: (T) => mixed,
className: ?string,
increaseButtonLabel: string,
decreaseButtonLabel: string,
diff --git a/packages/bpk-component-overlay/src/BpkOverlay-test.js b/packages/bpk-component-overlay/src/BpkOverlay-test.js
index 12dafa9314..0de9b872bf 100644
--- a/packages/bpk-component-overlay/src/BpkOverlay-test.js
+++ b/packages/bpk-component-overlay/src/BpkOverlay-test.js
@@ -41,7 +41,7 @@ describe('BpkOverlay', () => {
expect(asFragment()).toMatchSnapshot();
});
- Object.keys(OVERLAY_TYPES).map(overlayType =>
+ Object.keys(OVERLAY_TYPES).map((overlayType) =>
it(`should render correctly with overlayType={${overlayType}}`, () => {
const { asFragment } = render(
@@ -52,7 +52,7 @@ describe('BpkOverlay', () => {
}),
);
- Object.keys(BORDER_RADIUS_STYLES).map(borderRadiusStyle =>
+ Object.keys(BORDER_RADIUS_STYLES).map((borderRadiusStyle) =>
it(`should render correctly with borderRadiusStyle={${borderRadiusStyle}}`, () => {
const { asFragment } = render(
diff --git a/packages/bpk-component-pagination/examples.js b/packages/bpk-component-pagination/examples.js
index b45a3588a0..9bf43fc688 100644
--- a/packages/bpk-component-pagination/examples.js
+++ b/packages/bpk-component-pagination/examples.js
@@ -42,7 +42,7 @@ class PaginationContainer extends Component {
{
+ onPageChange={(pageIndex) => {
this.handleChange(pageIndex);
}}
previousLabel="previous"
diff --git a/packages/bpk-component-pagination/src/BpkPagination-test.js b/packages/bpk-component-pagination/src/BpkPagination-test.js
index 2f38ddf5c3..05eed2aa7f 100644
--- a/packages/bpk-component-pagination/src/BpkPagination-test.js
+++ b/packages/bpk-component-pagination/src/BpkPagination-test.js
@@ -99,11 +99,7 @@ describe('BpkPagination', () => {
const page = pagination.find('ul');
expect(onPageChange.mock.calls.length).toBe(0);
- page
- .find('li')
- .at(4)
- .find('button')
- .simulate('click');
+ page.find('li').at(4).find('button').simulate('click');
expect(onPageChange.mock.calls.length).toBe(1);
expect(onPageChange.mock.calls[0][0]).toEqual(19);
diff --git a/packages/bpk-component-pagination/src/BpkPagination.js b/packages/bpk-component-pagination/src/BpkPagination.js
index e8f3b2131d..31ba1fc490 100644
--- a/packages/bpk-component-pagination/src/BpkPagination.js
+++ b/packages/bpk-component-pagination/src/BpkPagination.js
@@ -26,24 +26,24 @@ import STYLES from './BpkPagination.module.scss';
const getClassName = cssModules(STYLES);
-const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
+const handlePageChange = (onPageChange, pageCount) => (nextPageIndex) => {
if (onPageChange && nextPageIndex < pageCount && nextPageIndex >= 0) {
onPageChange(nextPageIndex);
}
};
-const BpkPagination = props => {
+const BpkPagination = (props) => {
const classNames = [getClassName('bpk-pagination')];
const {
- pageCount,
- previousLabel,
+ className,
nextLabel,
onPageChange,
+ pageCount,
+ pageLabel,
+ paginationLabel,
+ previousLabel,
selectedPageIndex,
visibleRange,
- className,
- paginationLabel,
- pageLabel,
...rest
} = props;
diff --git a/packages/bpk-component-pagination/src/BpkPaginationBreak.js b/packages/bpk-component-pagination/src/BpkPaginationBreak.js
index c81bf194e8..056cddf5d0 100644
--- a/packages/bpk-component-pagination/src/BpkPaginationBreak.js
+++ b/packages/bpk-component-pagination/src/BpkPaginationBreak.js
@@ -19,7 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-const BpkPaginationBreak = props => {
+const BpkPaginationBreak = (props) => {
const { breakLabel } = props;
return {breakLabel}
;
};
diff --git a/packages/bpk-component-pagination/src/BpkPaginationList-test.js b/packages/bpk-component-pagination/src/BpkPaginationList-test.js
index 7a37c9fa84..a965618908 100644
--- a/packages/bpk-component-pagination/src/BpkPaginationList-test.js
+++ b/packages/bpk-component-pagination/src/BpkPaginationList-test.js
@@ -40,12 +40,7 @@ describe('BpkPaginationList', () => {
expect(list.length).toBe(5);
expect(list.at(3).contains( )).toBe(true);
- expect(
- list
- .at(4)
- .find('BpkPaginationPage')
- .prop('page'),
- ).toBe(20);
+ expect(list.at(4).find('BpkPaginationPage').prop('page')).toBe(20);
});
it('should display two ellipses when the 6th page is selected', () => {
@@ -66,12 +61,7 @@ describe('BpkPaginationList', () => {
expect(list.length).toBe(7);
expect(list.at(1).contains( )).toBe(true);
expect(list.at(5).contains( )).toBe(true);
- expect(
- list
- .at(4)
- .find('BpkPaginationPage')
- .prop('page'),
- ).toBe(7);
+ expect(list.at(4).find('BpkPaginationPage').prop('page')).toBe(7);
});
it('should display all pages when there are only 4 pages', () => {
@@ -90,29 +80,9 @@ describe('BpkPaginationList', () => {
const list = paginationList.find('li');
expect(list.length).toBe(4);
- expect(
- list
- .at(0)
- .find('BpkPaginationPage')
- .prop('page'),
- ).toBe(1);
- expect(
- list
- .at(1)
- .find('BpkPaginationPage')
- .prop('page'),
- ).toBe(2);
- expect(
- list
- .at(2)
- .find('BpkPaginationPage')
- .prop('page'),
- ).toBe(3);
- expect(
- list
- .at(3)
- .find('BpkPaginationPage')
- .prop('page'),
- ).toBe(4);
+ expect(list.at(0).find('BpkPaginationPage').prop('page')).toBe(1);
+ expect(list.at(1).find('BpkPaginationPage').prop('page')).toBe(2);
+ expect(list.at(2).find('BpkPaginationPage').prop('page')).toBe(3);
+ expect(list.at(3).find('BpkPaginationPage').prop('page')).toBe(4);
});
});
diff --git a/packages/bpk-component-pagination/src/BpkPaginationList.js b/packages/bpk-component-pagination/src/BpkPaginationList.js
index bef0d60df8..0205d026ce 100644
--- a/packages/bpk-component-pagination/src/BpkPaginationList.js
+++ b/packages/bpk-component-pagination/src/BpkPaginationList.js
@@ -26,13 +26,13 @@ import STYLES from './BpkPaginationList.module.scss';
const getClassName = cssModules(STYLES);
-const BpkPaginationList = props => {
+const BpkPaginationList = (props) => {
const {
- selectedPageIndex,
- pageCount,
onPageChange,
- visibleRange,
+ pageCount,
pageLabel,
+ selectedPageIndex,
+ visibleRange,
} = props;
const shoulderRange = Math.ceil(visibleRange / 2);
@@ -82,7 +82,7 @@ const BpkPaginationList = props => {
}
return null;
})
- .filter(page => !!page);
+ .filter((page) => !!page);
return (
diff --git a/packages/bpk-component-pagination/src/BpkPaginationNudger.js b/packages/bpk-component-pagination/src/BpkPaginationNudger.js
index 925012727f..442f9467d5 100644
--- a/packages/bpk-component-pagination/src/BpkPaginationNudger.js
+++ b/packages/bpk-component-pagination/src/BpkPaginationNudger.js
@@ -31,7 +31,7 @@ const AlignedArrowRightIcon = withButtonAlignment(
withRtlSupport(ArrowRightIcon),
);
-const nudgerIcon = forward =>
+const nudgerIcon = (forward) =>
forward ? (
/>
);
-const BpkPaginationNudger = props => {
- const { label, onNudge, forward, disabled } = props;
+const BpkPaginationNudger = (props) => {
+ const { disabled, forward, label, onNudge } = props;
return (
diff --git a/packages/bpk-component-pagination/src/BpkPaginationPage.js b/packages/bpk-component-pagination/src/BpkPaginationPage.js
index ec2434b11c..47d82537d8 100644
--- a/packages/bpk-component-pagination/src/BpkPaginationPage.js
+++ b/packages/bpk-component-pagination/src/BpkPaginationPage.js
@@ -25,9 +25,9 @@ import STYLES from './BpkPaginationPage.module.scss';
const getClassName = cssModules(STYLES);
-const BpkPaginationPage = props => {
+const BpkPaginationPage = (props) => {
const classNames = [getClassName('bpk-pagination-page')];
- const { page, onSelect, isSelected, pageLabel } = props;
+ const { isSelected, onSelect, page, pageLabel } = props;
if (isSelected) {
classNames.push(getClassName('bpk-pagination-page--selected'));
diff --git a/packages/bpk-component-panel/src/BpkPanel.js b/packages/bpk-component-panel/src/BpkPanel.js
index 4f7441d6ca..2ebbec21a9 100644
--- a/packages/bpk-component-panel/src/BpkPanel.js
+++ b/packages/bpk-component-panel/src/BpkPanel.js
@@ -24,9 +24,9 @@ import STYLES from './BpkPanel.module.scss';
const getClassName = cssModules(STYLES);
-const BpkPanel = props => {
+const BpkPanel = (props) => {
const classNames = [getClassName('bpk-panel')];
- const { children, className, padded, fullWidth, ...rest } = props;
+ const { children, className, fullWidth, padded, ...rest } = props;
if (padded) {
classNames.push(getClassName('bpk-panel--padded'));
diff --git a/packages/bpk-component-phone-input/examples.js b/packages/bpk-component-phone-input/examples.js
index 56b3d8da1b..c9d05a45dc 100644
--- a/packages/bpk-component-phone-input/examples.js
+++ b/packages/bpk-component-phone-input/examples.js
@@ -32,7 +32,7 @@ const DIALING_CODE_TO_ID_MAP = {
'998_uz': 'uz',
};
-const getFlag = dialingCode => {
+const getFlag = (dialingCode) => {
const countryCode = DIALING_CODE_TO_ID_MAP[dialingCode];
const url = `https://images.skyscnr.com/images/country/flag/header/${countryCode}.png`;
return
;
@@ -79,16 +79,16 @@ class StoryContainer extends Component<
render() {
const {
- large,
- validNumber,
- validationMessage,
- dialingCodeMask,
description,
+ dialingCodeMask,
disabled,
+ large,
required,
useLongLabels,
+ validNumber,
+ validationMessage,
} = this.props;
- const { value, dialingCode } = this.state;
+ const { dialingCode, value } = this.state;
let dialingCodeLabel = 'Dialing code';
let phoneNumberLabel = 'Telephone number';
diff --git a/packages/bpk-component-phone-input/src/BpkPhoneInput.js b/packages/bpk-component-phone-input/src/BpkPhoneInput.js
index bbfeae7295..6282f15578 100644
--- a/packages/bpk-component-phone-input/src/BpkPhoneInput.js
+++ b/packages/bpk-component-phone-input/src/BpkPhoneInput.js
@@ -65,20 +65,20 @@ type CommonProps = {
const BpkPhoneInput = (props: Props) => {
const {
- id,
className,
- name,
- label,
+ dialingCode,
+ dialingCodeMask,
+ dialingCodeProps,
+ dialingCodes,
disabled,
+ id,
+ label,
+ large,
+ name,
onChange,
onDialingCodeChange,
valid,
value,
- large,
- dialingCode,
- dialingCodes,
- dialingCodeProps,
- dialingCodeMask,
wrapperProps,
...rest
} = props;
@@ -90,7 +90,7 @@ const BpkPhoneInput = (props: Props) => {
};
const dialingCodeDefinition = dialingCodes.find(
- dialingCodeDef => dialingCodeDef.code === dialingCode,
+ (dialingCodeDef) => dialingCodeDef.code === dialingCode,
);
if (!dialingCodeDefinition) {
throw new Error(
@@ -106,7 +106,7 @@ const BpkPhoneInput = (props: Props) => {
displayValue = `${numberPrefix} ${value}`;
}
- const handleChange = e => {
+ const handleChange = (e) => {
if (!onChange) {
return;
}
diff --git a/packages/bpk-component-popover/examples.js b/packages/bpk-component-popover/examples.js
index 8f6fcf44ea..5009106c12 100644
--- a/packages/bpk-component-popover/examples.js
+++ b/packages/bpk-component-popover/examples.js
@@ -105,13 +105,8 @@ class PopoverContainer extends Component
{
};
render() {
- const {
- targetFunction,
- changeProps,
- id,
- inputTrigger,
- ...rest
- } = this.props;
+ const { changeProps, id, inputTrigger, targetFunction, ...rest } =
+ this.props;
let target = null;
let openButton = Open ;
diff --git a/packages/bpk-component-popover/src/BpkPopover-test.js b/packages/bpk-component-popover/src/BpkPopover-test.js
index 9d4801202a..c52ceb9b9e 100644
--- a/packages/bpk-component-popover/src/BpkPopover-test.js
+++ b/packages/bpk-component-popover/src/BpkPopover-test.js
@@ -121,10 +121,7 @@ describe('BpkPopover', () => {
const event = {
target: '',
};
- popover
- .find('BpkCloseButton')
- .at(0)
- .simulate('click', event);
+ popover.find('BpkCloseButton').at(0).simulate('click', event);
expect(onCloseSpy.mock.calls[0][0].target).toEqual('');
expect(onCloseSpy.mock.calls[0][1]).toEqual({ source: 'CLOSE_BUTTON' });
@@ -154,10 +151,7 @@ describe('BpkPopover', () => {
const event = {
target: '',
};
- popover
- .find('BpkButtonLink')
- .at(0)
- .simulate('click', event);
+ popover.find('BpkButtonLink').at(0).simulate('click', event);
expect(onCloseSpy.mock.calls[0][0].target).toEqual('');
expect(onCloseSpy.mock.calls[0][1]).toEqual({ source: 'CLOSE_LINK' });
@@ -187,10 +181,7 @@ describe('BpkPopover', () => {
const event = {
target: '',
};
- popover
- .find('BpkButtonLink')
- .at(0)
- .simulate('click', event);
+ popover.find('BpkButtonLink').at(0).simulate('click', event);
expect(onCloseSpy.mock.calls[0][0].target).toEqual('');
expect(onCloseSpy.mock.calls[0][1]).toEqual({ source: 'CLOSE_LINK' });
diff --git a/packages/bpk-component-popover/src/BpkPopover.js b/packages/bpk-component-popover/src/BpkPopover.js
index 0299a6458d..ab6c5056f1 100644
--- a/packages/bpk-component-popover/src/BpkPopover.js
+++ b/packages/bpk-component-popover/src/BpkPopover.js
@@ -35,7 +35,7 @@ const EVENT_SOURCES = {
CLOSE_LINK: 'CLOSE_LINK',
};
-const bindEventSource = (source, callback) => event => {
+const bindEventSource = (source, callback) => (event) => {
if (event.persist) {
event.persist();
}
diff --git a/packages/bpk-component-popover/src/BpkPopoverPortal.js b/packages/bpk-component-popover/src/BpkPopoverPortal.js
index 0b464be056..9bebe4c8bb 100644
--- a/packages/bpk-component-popover/src/BpkPopoverPortal.js
+++ b/packages/bpk-component-popover/src/BpkPopoverPortal.js
@@ -172,14 +172,14 @@ class BpkPopoverPortal extends Component {
render() {
const {
- target,
isOpen,
onClose,
placement,
- portalStyle,
+ popperModifiers,
portalClassName,
+ portalStyle,
renderTarget,
- popperModifiers,
+ target,
...rest
} = this.props;
diff --git a/packages/bpk-component-popover/src/keyboardFocusScope.js b/packages/bpk-component-popover/src/keyboardFocusScope.js
index 993c658324..20cf0f44f2 100644
--- a/packages/bpk-component-popover/src/keyboardFocusScope.js
+++ b/packages/bpk-component-popover/src/keyboardFocusScope.js
@@ -27,7 +27,7 @@ import focusin from 'focusin';
let polyfilled = false;
let focusTrapped = false;
-const init = element => {
+const init = (element) => {
// lazily polyfill focusin for firefox
if (!polyfilled) {
focusin.polyfill();
@@ -46,7 +46,7 @@ const init = element => {
focusTrapped = false;
};
- const checkFocus = event => {
+ const checkFocus = (event) => {
if (!focusTrapped) {
return;
}
@@ -73,7 +73,7 @@ const init = element => {
let teardownFn;
-const scopeFocus = element => {
+const scopeFocus = (element) => {
if (teardownFn) teardownFn();
teardownFn = init(element);
};
diff --git a/packages/bpk-component-progress/src/BpkProgress-test.js b/packages/bpk-component-progress/src/BpkProgress-test.js
index 2e768603e0..187b1ca2d8 100644
--- a/packages/bpk-component-progress/src/BpkProgress-test.js
+++ b/packages/bpk-component-progress/src/BpkProgress-test.js
@@ -92,10 +92,7 @@ describe('BpkProgress', () => {
expect(onCompleteTransitionEndSpy).toHaveBeenCalled();
expect(onCompleteTransitionEndSpy.mock.calls.length).toBe(1);
- tree
- .childAt(0)
- .props()
- .onTransitionEnd();
+ tree.childAt(0).props().onTransitionEnd();
expect(onCompleteTransitionEndSpy).toHaveBeenCalled();
expect(onCompleteTransitionEndSpy.mock.calls.length).toBe(2);
});
diff --git a/packages/bpk-component-progress/src/BpkProgress.js b/packages/bpk-component-progress/src/BpkProgress.js
index da22a98dcd..5db845d652 100644
--- a/packages/bpk-component-progress/src/BpkProgress.js
+++ b/packages/bpk-component-progress/src/BpkProgress.js
@@ -85,7 +85,7 @@ class BpkProgress extends Component {
};
componentDidUpdate(previousProps: Props) {
- const { value, max } = this.props;
+ const { max, value } = this.props;
if (
value >= max &&
value !== previousProps.value &&
@@ -100,7 +100,7 @@ class BpkProgress extends Component {
}
handleCompleteTransitionEnd = () => {
- const { onCompleteTransitionEnd, value, max } = this.props;
+ const { max, onCompleteTransitionEnd, value } = this.props;
if (value >= max && onCompleteTransitionEnd) {
onCompleteTransitionEnd();
}
@@ -108,14 +108,14 @@ class BpkProgress extends Component {
render() {
const {
- min,
- max,
- value,
- small,
- stepped,
className,
getValueText,
+ max,
+ min,
+ small,
stepColor,
+ stepped,
+ value,
...rest
} = this.props;
const classNames = [getClassName('bpk-progress')];
diff --git a/packages/bpk-component-radio/examples.js b/packages/bpk-component-radio/examples.js
index 73252c91f7..9300c4ad40 100644
--- a/packages/bpk-component-radio/examples.js
+++ b/packages/bpk-component-radio/examples.js
@@ -43,14 +43,14 @@ class GroupExample extends React.Component<{}, { value: string }> {
const { ...rest } = this.props;
return (
- {['Lagos', 'Kano', 'Ibadan', 'Benin City'].map(city => (
+ {['Lagos', 'Kano', 'Ibadan', 'Benin City'].map((city) => (
{
+ onChange={(event) => {
this.updateValue(event.target.value);
}}
value={city}
diff --git a/packages/bpk-component-radio/src/BpkRadio.js b/packages/bpk-component-radio/src/BpkRadio.js
index 9ce82b974a..c55dc8a274 100644
--- a/packages/bpk-component-radio/src/BpkRadio.js
+++ b/packages/bpk-component-radio/src/BpkRadio.js
@@ -37,16 +37,8 @@ type Props = {
};
const BpkRadio = (props: Props) => {
- const {
- ariaLabel,
- name,
- label,
- disabled,
- white,
- className,
- valid,
- ...rest
- } = props;
+ const { ariaLabel, className, disabled, label, name, valid, white, ...rest } =
+ props;
// Explicit check for false primitive value as undefined is
// treated as neither valid nor invalid
diff --git a/packages/bpk-component-rating/src/BpkRating.js b/packages/bpk-component-rating/src/BpkRating.js
index 64d29a9a65..2b09fdabf1 100644
--- a/packages/bpk-component-rating/src/BpkRating.js
+++ b/packages/bpk-component-rating/src/BpkRating.js
@@ -39,7 +39,7 @@ const getMinValue = () =>
// If this ever changes, this function should be changed to return
// different values based on the rating scale.
0;
-const getMaxValue = ratingScale => {
+const getMaxValue = (ratingScale) => {
switch (ratingScale) {
case RATING_SCALES.zeroToFive:
return 5;
@@ -48,10 +48,10 @@ const getMaxValue = ratingScale => {
}
};
-const getMediumRatingThreshold = ratingScale =>
+const getMediumRatingThreshold = (ratingScale) =>
getMaxValue(ratingScale) * MEDIUM_RATING_THRESHOLD;
-const getHighRatingThreshold = ratingScale =>
+const getHighRatingThreshold = (ratingScale) =>
getMaxValue(ratingScale) * HIGH_RATING_THRESHOLD;
export type Props = {
@@ -69,13 +69,13 @@ export type Props = {
const BpkRating = (props: Props) => {
const {
ariaLabel,
- title,
- subtitle,
- value,
className,
ratingScale,
size,
+ subtitle,
+ title,
type,
+ value,
vertical,
...rest
} = props;
diff --git a/packages/bpk-component-rtl-toggle/src/BpkRtlToggle.js b/packages/bpk-component-rtl-toggle/src/BpkRtlToggle.js
index a11fc8894f..f41c340b6e 100644
--- a/packages/bpk-component-rtl-toggle/src/BpkRtlToggle.js
+++ b/packages/bpk-component-rtl-toggle/src/BpkRtlToggle.js
@@ -24,7 +24,7 @@ import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from './utils';
const getDirection = () => getHtmlElement().dir || DIRECTIONS.LTR;
-const setDirection = direction => {
+const setDirection = (direction) => {
const htmlElement = getHtmlElement();
htmlElement.dir = direction;
@@ -48,13 +48,13 @@ class BpkRtlToggle extends React.Component {
document.removeEventListener('keydown', this.handleKeyDown);
}
- handleKeyDown = e => {
+ handleKeyDown = (e) => {
if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'r') {
this.toggleRtl(e);
}
};
- toggleRtl = e => {
+ toggleRtl = (e) => {
e.preventDefault();
const direction =
diff --git a/packages/bpk-component-rtl-toggle/src/updateOnDirectionChange.js b/packages/bpk-component-rtl-toggle/src/updateOnDirectionChange.js
index 20e179c4d6..f22a3f4473 100644
--- a/packages/bpk-component-rtl-toggle/src/updateOnDirectionChange.js
+++ b/packages/bpk-component-rtl-toggle/src/updateOnDirectionChange.js
@@ -21,7 +21,7 @@ import { wrapDisplayName } from 'bpk-react-utils';
import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';
-const updateOnDirectionChange = EnhancedComponent => {
+const updateOnDirectionChange = (EnhancedComponent) => {
class UpdateOnDirectionChange extends Component {
componentDidMount() {
getHtmlElement().addEventListener(
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.js b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.js
index aa9bb0c65c..3b430c0d48 100644
--- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.js
+++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.js
@@ -76,7 +76,7 @@ describe('BpkCalendarScrollGrid', () => {
});
it('should render correctly with a custom date component', () => {
- const MyCustomDate = props => {
+ const MyCustomDate = (props) => {
const cx = {
backgroundColor: colorPanjin,
width: '50%',
@@ -122,17 +122,11 @@ describe('BpkCalendarScrollGrid', () => {
expect(onDateClick.mock.calls.length).toBe(0);
- grid
- .find('button')
- .at(10)
- .simulate('click');
+ grid.find('button').at(10).simulate('click');
expect(onDateClick.mock.calls.length).toBe(1);
expect(onDateClick.mock.calls[0][0]).toEqual(new Date(2016, 9, 11));
- grid
- .find('button')
- .at(11)
- .simulate('click');
+ grid.find('button').at(11).simulate('click');
expect(onDateClick.mock.calls.length).toBe(2);
expect(onDateClick.mock.calls[1][0]).toEqual(new Date(2016, 9, 12));
});
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js
index 5ba8160269..6a8639e6ae 100644
--- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js
+++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js
@@ -28,8 +28,8 @@ import STYLES from './BpkScrollableCalendarGrid.module.scss';
const getClassName = cssModules(STYLES);
-const BpkScrollableCalendarGrid = props => {
- const { month, className, ...rest } = props;
+const BpkScrollableCalendarGrid = (props) => {
+ const { className, month, ...rest } = props;
const classNames = getClassName('bpk-scrollable-calendar-grid', className);
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.js b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.js
index ff766c0f7b..aa825a25e0 100644
--- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.js
+++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.js
@@ -85,7 +85,7 @@ describe('BpkCalendarScrollGridList', () => {
});
it('should render correctly with a custom date component', () => {
- const MyCustomDate = props => {
+ const MyCustomDate = (props) => {
const cx = {
backgroundColor: colorPanjin,
width: '50%',
diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js
index a10c19527a..9acc731849 100644
--- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js
+++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js
@@ -62,7 +62,7 @@ class BpkScrollableCalendarGridList extends React.Component {
getHtmlElement = () =>
typeof document !== 'undefined' ? document.querySelector('html') : {};
- rowRenderer({ index, key, style, parent }) {
+ rowRenderer({ index, key, parent, style }) {
return (
- {({ width, height }) =>
+ {({ height, width }) =>
this.renderList(
width,
height,
diff --git a/packages/bpk-component-scrollable-calendar/test-utils.js b/packages/bpk-component-scrollable-calendar/test-utils.js
index 7b52f99d12..02929a97df 100644
--- a/packages/bpk-component-scrollable-calendar/test-utils.js
+++ b/packages/bpk-component-scrollable-calendar/test-utils.js
@@ -18,19 +18,19 @@
import format from 'date-fns/format';
-export const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
-export const formatDateFullArabic = date => {
+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 => {
+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 => {
+export const formatMonth = (date) => format(date, 'MMMM yyyy');
+export const formatMonthArabic = (date) => {
const months = [
'يناير',
'فبراير',
@@ -47,7 +47,7 @@ export const formatMonthArabic = date => {
];
return `${months[date.getMonth()]} ${date.getFullYear()}`;
};
-export const formatMonthJapanese = date => {
+export const formatMonthJapanese = (date) => {
const months = [
'1月',
'2月',
diff --git a/packages/bpk-component-section-list/src/BpkSectionListSection.js b/packages/bpk-component-section-list/src/BpkSectionListSection.js
index 9750b2603f..c7448e4fd4 100644
--- a/packages/bpk-component-section-list/src/BpkSectionListSection.js
+++ b/packages/bpk-component-section-list/src/BpkSectionListSection.js
@@ -45,7 +45,7 @@ const BpkSectionListSection = (props: Props) => {
)}
- {React.Children.map(children, child => (
+ {React.Children.map(children, (child) => (
{child}
))}
diff --git a/packages/bpk-component-select/examples.js b/packages/bpk-component-select/examples.js
index 7e1727e75e..3670be13f1 100644
--- a/packages/bpk-component-select/examples.js
+++ b/packages/bpk-component-select/examples.js
@@ -28,7 +28,7 @@ class StatefulBpkSelect extends React.Component {
this.state = { value: 'oranges' };
}
- onChange = value => {
+ onChange = (value) => {
action(`BpkSelect changed. New value: ${value}`);
this.setState({ value });
};
@@ -39,7 +39,7 @@ class StatefulBpkSelect extends React.Component {
id="destination"
name="destination"
value={this.state.value}
- onChange={event => {
+ onChange={(event) => {
this.onChange(event.target.value);
}}
{...this.props}
@@ -55,7 +55,7 @@ class StatefulBpkSelect extends React.Component {
}
}
-const getFlagUriFromCountryCode = countryCode =>
+const getFlagUriFromCountryCode = (countryCode) =>
`https://images.skyscnr.com/images/country/flag/header/${countryCode.toLowerCase()}.png`;
const countries = [
@@ -79,8 +79,8 @@ class SelectWithImage extends React.Component {
getItemByValue = () => {
const { options } = this.props;
- return val => {
- const items = options.filter(o => o.id === val);
+ return (val) => {
+ const items = options.filter((o) => o.id === val);
if (!items.length) throw new Error('Item does not exists');
return items[0];
};
@@ -88,7 +88,7 @@ class SelectWithImage extends React.Component {
getItem = this.getItemByValue();
- handleChange = e => {
+ handleChange = (e) => {
const item = this.getItem(e.target.value);
this.setState({
@@ -96,7 +96,7 @@ class SelectWithImage extends React.Component {
});
};
- image = id => ;
+ image = (id) => ;
render() {
const { options, ...rest } = this.props;
@@ -107,7 +107,7 @@ class SelectWithImage extends React.Component {
image={this.image(this.getItem(this.state.selected).id)}
onChange={this.handleChange}
>
- {options.map(o => (
+ {options.map((o) => (
{o.name}
diff --git a/packages/bpk-component-skip-link/src/BpkSkipLink.js b/packages/bpk-component-skip-link/src/BpkSkipLink.js
index 810eba35f3..e77381d6b6 100644
--- a/packages/bpk-component-skip-link/src/BpkSkipLink.js
+++ b/packages/bpk-component-skip-link/src/BpkSkipLink.js
@@ -32,7 +32,7 @@ export type Props = {
};
const BpkSkipLink = (props: Props) => {
- const { label, href, className, ...rest } = props;
+ const { className, href, label, ...rest } = props;
return (
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
diff --git a/packages/bpk-component-slider/examples.js b/packages/bpk-component-slider/examples.js
index ac8f800cf8..bd69f3f637 100644
--- a/packages/bpk-component-slider/examples.js
+++ b/packages/bpk-component-slider/examples.js
@@ -31,11 +31,11 @@ class SliderContainer extends Component {
};
}
- handleChange = value => {
+ handleChange = (value) => {
this.setState({ value });
};
- valueTimeFormatter = value => `12:${value.toString().padStart(2, '0')}pm`;
+ valueTimeFormatter = (value) => `12:${value.toString().padStart(2, '0')}pm`;
valueComponent = (min, max, formatter) => (
@@ -69,7 +69,7 @@ class SliderContainer extends Component {
{...this.props}
value={this.state.value}
ariaLabel={['minimum', 'maximum']}
- ariaValuetext={time ? s => this.valueTimeFormatter(s.value) : null}
+ ariaValuetext={time ? (s) => this.valueTimeFormatter(s.value) : null}
/>
diff --git a/packages/bpk-component-slider/src/BpkSlider.js b/packages/bpk-component-slider/src/BpkSlider.js
index 1184c94da4..de3c3ad0b0 100644
--- a/packages/bpk-component-slider/src/BpkSlider.js
+++ b/packages/bpk-component-slider/src/BpkSlider.js
@@ -25,8 +25,8 @@ import STYLES from './BpkSlider.module.scss';
const getClassName = cssModules(STYLES);
-const BpkSlider = props => {
- const { large, className, ...rest } = props;
+const BpkSlider = (props) => {
+ const { className, large, ...rest } = props;
const invert = isRTL();
const classNames = [getClassName('bpk-slider')];
const thumbClassNames = [getClassName('bpk-slider__handle')];
diff --git a/packages/bpk-component-spinner/SpinnerLayout.js b/packages/bpk-component-spinner/SpinnerLayout.js
index 8fe6e54072..5a9c9b7d4d 100644
--- a/packages/bpk-component-spinner/SpinnerLayout.js
+++ b/packages/bpk-component-spinner/SpinnerLayout.js
@@ -36,7 +36,7 @@ const SpinnerLayout = (props: Props) => {
const { children } = props;
return (
- {Children.map(children, child => {
+ {Children.map(children, (child) => {
const classNames = [getClassName('bpk-spinner-layout__spinner')];
if (child.props.type === SPINNER_TYPES.light) {
diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js
index b28d2db95a..b932c77ae7 100644
--- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js
+++ b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js
@@ -34,7 +34,7 @@ type Props = {
};
const BpkExtraLargeSpinner = (props: Props) => {
- const { type, className, ...rest } = props;
+ const { className, type, ...rest } = props;
const classNames = getClassName(
'bpk-spinner',
'bpk-spinner--extra-large',
diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner.js b/packages/bpk-component-spinner/src/BpkLargeSpinner.js
index b1f90338bf..5f02cfce15 100644
--- a/packages/bpk-component-spinner/src/BpkLargeSpinner.js
+++ b/packages/bpk-component-spinner/src/BpkLargeSpinner.js
@@ -35,7 +35,7 @@ type Props = {
};
const BpkLargeSpinner = (props: Props) => {
- const { type, className, alignToButton, ...rest } = props;
+ const { alignToButton, className, type, ...rest } = props;
const classNames = getClassName(
'bpk-spinner',
diff --git a/packages/bpk-component-spinner/src/BpkSpinner.js b/packages/bpk-component-spinner/src/BpkSpinner.js
index fac2f52b9b..d444ca0051 100644
--- a/packages/bpk-component-spinner/src/BpkSpinner.js
+++ b/packages/bpk-component-spinner/src/BpkSpinner.js
@@ -35,7 +35,7 @@ type Props = {
};
const BpkSpinner = (props: Props) => {
- const { type, className, alignToButton, ...rest } = props;
+ const { alignToButton, className, type, ...rest } = props;
const classNames = getClassName(
'bpk-spinner',
diff --git a/packages/bpk-component-star-rating/examples.js b/packages/bpk-component-star-rating/examples.js
index b9c624c7b9..478b2b4176 100644
--- a/packages/bpk-component-star-rating/examples.js
+++ b/packages/bpk-component-star-rating/examples.js
@@ -37,7 +37,7 @@ import BpkStarRating, { BpkStar, STAR_TYPES, ROUNDING_TYPES } from './index';
const InteractiveStarRating = withInteractiveStarRatingState(
BpkInteractiveStarRating,
);
-const StarRating = props => (
+const StarRating = (props) => (
`${r} out of ${m} stars`} {...props} />
);
diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js
index f7c7e0f022..9646149b63 100644
--- a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js
+++ b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js
@@ -38,16 +38,8 @@ type Props = {
};
const BpkInteractiveStar = (props: Props) => {
- const {
- selected,
- type,
- name,
- value,
- onClick,
- onMouseEnter,
- label,
- ...rest
- } = props;
+ const { label, name, onClick, onMouseEnter, selected, type, value, ...rest } =
+ props;
const buttonClassNames = getClassName(
'bpk-interactive-star',
diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js b/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js
index 148658e6eb..f7d0ca5343 100644
--- a/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js
+++ b/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js
@@ -80,10 +80,10 @@ const BpkInteractiveStarRating = (props: Props) => {
stars.push(
onRatingSelect(starNumber, event)}
+ onClick={(event) => onRatingSelect(starNumber, event)}
type={type}
large={large}
- onMouseEnter={event => onRatingHover(starNumber, event)}
+ onMouseEnter={(event) => onRatingHover(starNumber, event)}
selected={rating === starNumber}
label={getStarLabel(starNumber, maxRating)}
name={`${id}_rating`}
diff --git a/packages/bpk-component-star-rating/src/BpkStar.js b/packages/bpk-component-star-rating/src/BpkStar.js
index 99ad9618e5..d2c9f015bf 100644
--- a/packages/bpk-component-star-rating/src/BpkStar.js
+++ b/packages/bpk-component-star-rating/src/BpkStar.js
@@ -46,7 +46,7 @@ type Props = {
};
const BpkStar = (props: Props) => {
- const { type, large, className, ...rest } = props;
+ const { className, large, type, ...rest } = props;
const iconClassNames = getClassName(
'bpk-star',
large && 'bpk-star--large',
diff --git a/packages/bpk-component-star-rating/src/BpkStarRating.js b/packages/bpk-component-star-rating/src/BpkStarRating.js
index 0d7afb5e1a..a4a1e63bd5 100644
--- a/packages/bpk-component-star-rating/src/BpkStarRating.js
+++ b/packages/bpk-component-star-rating/src/BpkStarRating.js
@@ -61,11 +61,11 @@ type Props = {
const BpkStarRating = (props: Props) => {
const {
+ className,
+ large,
+ maxRating,
rating,
ratingLabel,
- maxRating,
- large,
- className,
rounding,
...rest
} = props;
diff --git a/packages/bpk-component-table/src/BpkTable.js b/packages/bpk-component-table/src/BpkTable.js
index 8653b2b730..91f95432af 100644
--- a/packages/bpk-component-table/src/BpkTable.js
+++ b/packages/bpk-component-table/src/BpkTable.js
@@ -33,7 +33,7 @@ type Props = {
};
const BpkTable = (props: Props) => {
- const { children, className, alternate, ...rest } = props;
+ const { alternate, children, className, ...rest } = props;
const classNames = getClassName(
'bpk-table',
diff --git a/packages/bpk-component-table/src/BpkTableHeadCell.js b/packages/bpk-component-table/src/BpkTableHeadCell.js
index 3dcf3635f6..024e44982e 100644
--- a/packages/bpk-component-table/src/BpkTableHeadCell.js
+++ b/packages/bpk-component-table/src/BpkTableHeadCell.js
@@ -29,7 +29,7 @@ const getClassName = cssModules(STYLES);
type Props = { children: Node, alternate: boolean, className: ?string };
const BpkTableHeadCell = (props: Props) => {
- const { className, alternate, ...rest } = props;
+ const { alternate, className, ...rest } = props;
const classNames = getClassName(
'bpk-table__cell',
diff --git a/packages/bpk-component-text/src/BpkText-test.js b/packages/bpk-component-text/src/BpkText-test.js
index deb15f55fa..a8061f7d06 100644
--- a/packages/bpk-component-text/src/BpkText-test.js
+++ b/packages/bpk-component-text/src/BpkText-test.js
@@ -82,7 +82,7 @@ describe('BpkText', () => {
expect(asFragment()).toMatchSnapshot();
});
- ['xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl'].forEach(textStyle => {
+ ['xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl'].forEach((textStyle) => {
it(`should render correctly with weight="black" and supported textStyle="${textStyle}"`, () => {
const { asFragment } = render(
@@ -119,7 +119,7 @@ describe('BpkText', () => {
});
['xs', 'sm', 'base', 'lg', 'xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl'].forEach(
- textStyle => {
+ (textStyle) => {
it(`should render correctly with textStyle="${textStyle}"`, () => {
const { asFragment } = render(
diff --git a/packages/bpk-component-text/src/BpkText.js b/packages/bpk-component-text/src/BpkText.js
index 77a4a68b3f..53b1d6a85f 100644
--- a/packages/bpk-component-text/src/BpkText.js
+++ b/packages/bpk-component-text/src/BpkText.js
@@ -89,8 +89,8 @@ type Props = {
const BpkText = (props: Props) => {
const {
bold,
- className,
children,
+ className,
tagName: TagName,
textStyle,
weight,
diff --git a/packages/bpk-component-textarea/src/BpkTextarea.js b/packages/bpk-component-textarea/src/BpkTextarea.js
index f130f36db2..14b2edc10a 100644
--- a/packages/bpk-component-textarea/src/BpkTextarea.js
+++ b/packages/bpk-component-textarea/src/BpkTextarea.js
@@ -36,7 +36,7 @@ type Props = {
};
const BpkTextarea = (props: Props) => {
- const { className, valid, large, ...rest } = props;
+ const { className, large, valid, ...rest } = props;
// Explicit check for false primitive value as undefined is
// treated as neither valid nor invalid
diff --git a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js
index 5cffc45815..3037b2661d 100644
--- a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js
+++ b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js
@@ -30,7 +30,7 @@ const inputId = 'theme-select';
const getClassName = cssModules(STYLES);
const availableThemes = Object.keys(bpkCustomThemes);
-const setTheme = theme => {
+const setTheme = (theme) => {
const htmlElement = getHtmlElement();
htmlElement.dispatchEvent(
new CustomEvent(THEME_CHANGE_EVENT, { detail: { theme } }),
@@ -60,13 +60,13 @@ class BpkThemeToggle extends React.Component {
}
}
- handleKeyDown = e => {
+ handleKeyDown = (e) => {
if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 't') {
this.cycleTheme();
}
};
- handleChange = e => {
+ handleChange = (e) => {
const selectedTheme = e.target.value;
this.setState({ selectedTheme });
setTheme(bpkCustomThemes[selectedTheme]);
@@ -106,7 +106,7 @@ class BpkThemeToggle extends React.Component {
Change theme
None
- {availableThemes.map(themeName => (
+ {availableThemes.map((themeName) => (
{themeName}
diff --git a/packages/bpk-component-theme-toggle/src/theming.js b/packages/bpk-component-theme-toggle/src/theming.js
index b1e41e8713..186800374d 100644
--- a/packages/bpk-component-theme-toggle/src/theming.js
+++ b/packages/bpk-component-theme-toggle/src/theming.js
@@ -28,6 +28,11 @@ import {
} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
const generateTheme = ({
+ docsSidebarBackground,
+ docsSidebarLink,
+ docsSidebarLinkBorder,
+ docsSidebarSelectedArrowColor,
+ fontSize,
primaryColor300,
primaryColor500,
primaryColor600,
@@ -35,11 +40,6 @@ const generateTheme = ({
secondaryColor500,
secondaryColor600,
secondaryColor700,
- fontSize,
- docsSidebarBackground,
- docsSidebarLink,
- docsSidebarLinkBorder,
- docsSidebarSelectedArrowColor,
themeName,
}) => ({
themeName,
diff --git a/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js b/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js
index 76db1c6123..f3d29366de 100644
--- a/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js
+++ b/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js
@@ -22,7 +22,7 @@ import { wrapDisplayName } from 'bpk-react-utils';
import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
-const updateOnThemeChange = EnhancedComponent => {
+const updateOnThemeChange = (EnhancedComponent) => {
class UpdateOnThemeChange extends Component {
constructor() {
super();
@@ -47,7 +47,7 @@ const updateOnThemeChange = EnhancedComponent => {
);
}
- onThemeChange = e => {
+ onThemeChange = (e) => {
const { theme } = e.detail;
this.setState({ theme });
this.forceUpdate();
diff --git a/packages/bpk-component-ticket/src/BpkTicket.js b/packages/bpk-component-ticket/src/BpkTicket.js
index 6c6719e8c6..7434654647 100644
--- a/packages/bpk-component-ticket/src/BpkTicket.js
+++ b/packages/bpk-component-ticket/src/BpkTicket.js
@@ -41,14 +41,14 @@ type Props = {
const BpkTicket = (props: Props) => {
const {
children,
+ className,
href,
padded,
stub,
- vertical,
- withNotches,
- className,
stubClassName,
stubProps,
+ vertical,
+ withNotches,
...rest
} = props;
diff --git a/packages/bpk-component-tooltip/src/BpkTooltip.js b/packages/bpk-component-tooltip/src/BpkTooltip.js
index 6d9cb2029b..03c64b63f3 100644
--- a/packages/bpk-component-tooltip/src/BpkTooltip.js
+++ b/packages/bpk-component-tooltip/src/BpkTooltip.js
@@ -42,7 +42,7 @@ export type TooltipProps = {
};
const BpkTooltip = (props: TooltipProps) => {
- const { id, children, className, padded, type, ...rest } = props;
+ const { children, className, id, padded, type, ...rest } = props;
const classNames = getClassName('bpk-tooltip', className);
diff --git a/packages/bpk-component-tooltip/src/BpkTooltipPortal.js b/packages/bpk-component-tooltip/src/BpkTooltipPortal.js
index cedc7dbc26..95262fd1ed 100644
--- a/packages/bpk-component-tooltip/src/BpkTooltipPortal.js
+++ b/packages/bpk-component-tooltip/src/BpkTooltipPortal.js
@@ -161,15 +161,15 @@ class BpkTooltipPortal extends Component {
render() {
const {
ariaLabel,
- padded,
- target,
children,
- placement,
hideOnTouchDevices,
+ padded,
+ placement,
+ popperModifiers,
portalClassName,
portalStyle,
renderTarget,
- popperModifiers,
+ target,
...rest
} = this.props;
@@ -188,7 +188,7 @@ class BpkTooltipPortal extends Component {
return renderPortal ? (
{
+ targetRef={(targetRef) => {
this.targetRef = targetRef;
}}
isOpen={this.state.isOpen}
diff --git a/packages/bpk-mixins/sass-functions.js b/packages/bpk-mixins/sass-functions.js
index fcc8eb3d24..eb9f0a1629 100644
--- a/packages/bpk-mixins/sass-functions.js
+++ b/packages/bpk-mixins/sass-functions.js
@@ -19,7 +19,7 @@
const nodeSass = require('node-sass');
module.exports = {
- 'encodebase64($string)': str => {
+ 'encodebase64($string)': (str) => {
const buffer = Buffer.from(str.getValue());
return nodeSass.types.String(buffer.toString('base64'));
diff --git a/packages/bpk-mixins/src/mixins/_utils.scss b/packages/bpk-mixins/src/mixins/_utils.scss
index c7cccfdbf7..3ac7ec973f 100644
--- a/packages/bpk-mixins/src/mixins/_utils.scss
+++ b/packages/bpk-mixins/src/mixins/_utils.scss
@@ -42,9 +42,9 @@
@mixin bpk-visually-hidden {
position: absolute;
- width: 1px; /* stylelint-disable-line unit-blacklist */
- height: 1px; /* stylelint-disable-line unit-blacklist */
- margin: -1px; /* stylelint-disable-line unit-blacklist */
+ width: 1px; /* stylelint-disable-line unit-disallowed-list */
+ height: 1px; /* stylelint-disable-line unit-disallowed-list */
+ margin: -1px; /* stylelint-disable-line unit-disallowed-list */
padding: 0;
border: 0;
overflow: hidden;
diff --git a/packages/bpk-react-utils/src/TransitionInitialMount.js b/packages/bpk-react-utils/src/TransitionInitialMount.js
index 688902d5a6..3a1f6ae806 100644
--- a/packages/bpk-react-utils/src/TransitionInitialMount.js
+++ b/packages/bpk-react-utils/src/TransitionInitialMount.js
@@ -35,10 +35,10 @@ type Props = {
};
const TransitionInitialMount = ({
- appearClassName,
appearActiveClassName,
- transitionTimeout,
+ appearClassName,
children,
+ transitionTimeout,
}: Props) => (
{
describe('withDefaultProps accessibility tests', () => {
it('should not have programmatically-detectable accessibility issues', async () => {
- const TestComponent = props =>
;
+ const TestComponent = (props) =>
;
const Component = withDefaultProps(TestComponent, {
a: 1,
diff --git a/packages/bpk-react-utils/src/cssModules.js b/packages/bpk-react-utils/src/cssModules.js
index 7ee3a90efe..bbb35e42cc 100644
--- a/packages/bpk-react-utils/src/cssModules.js
+++ b/packages/bpk-react-utils/src/cssModules.js
@@ -18,13 +18,12 @@
/* @flow strict */
-export default (styles: {} = {}) => (
- ...classNames: Array
-) =>
- classNames.reduce((className, currentClass) => {
- if (currentClass && typeof currentClass === 'string') {
- const realName = styles[currentClass] || currentClass;
- return className ? `${className} ${realName}` : realName;
- }
- return className;
- }, '');
+export default (styles: {} = {}) =>
+ (...classNames: Array) =>
+ classNames.reduce((className, currentClass) => {
+ if (currentClass && typeof currentClass === 'string') {
+ const realName = styles[currentClass] || currentClass;
+ return className ? `${className} ${realName}` : realName;
+ }
+ return className;
+ }, '');
diff --git a/packages/bpk-react-utils/src/deprecated.js b/packages/bpk-react-utils/src/deprecated.js
index 20ee420bb0..cf8159cb18 100644
--- a/packages/bpk-react-utils/src/deprecated.js
+++ b/packages/bpk-react-utils/src/deprecated.js
@@ -19,19 +19,22 @@
/* @flow strict */
import { type PropType } from 'prop-types';
+// We disable eslint on the below line because it breaks the flow type definitions and the FlowIssue comment below
+// We can remove this when we migrate this file to TypeScript.
// $FlowIssue[value-as-type] - PropType is imported as a type so is incorrectly reporting the PropType is not a valid type
-const deprecated = (propType: PropType, alternativeSuggestion: string) => (
- props: { [string]: any },
- propName: string,
- componentName: string,
- ...rest: [any]
-) => {
- if (props[propName] != null) {
- const message = `Warning: "${propName}" property of "${componentName}" has been deprecated. ${alternativeSuggestion}`;
- // eslint-disable-next-line no-console
- console.warn(message);
- }
- return propType(props, propName, componentName, ...rest);
-};
+const deprecated = (propType: PropType, alternativeSuggestion: string) => // eslint-disable-line
+ (
+ props: { [string]: any },
+ propName: string,
+ componentName: string,
+ ...rest: [any]
+ ) => {
+ if (props[propName] != null) {
+ const message = `Warning: "${propName}" property of "${componentName}" has been deprecated. ${alternativeSuggestion}`;
+ // eslint-disable-next-line no-console
+ console.warn(message);
+ }
+ return propType(props, propName, componentName, ...rest);
+ };
export default deprecated;
diff --git a/packages/bpk-react-utils/src/deviceDetection.js b/packages/bpk-react-utils/src/deviceDetection.js
index b48afffc40..7c87f98fa1 100644
--- a/packages/bpk-react-utils/src/deviceDetection.js
+++ b/packages/bpk-react-utils/src/deviceDetection.js
@@ -18,20 +18,14 @@
/* @flow strict */
-const isDeviceIphone = () => {
- return /iPhone/i.test(
+const isDeviceIphone = () =>
+ /iPhone/i.test(
typeof window !== 'undefined' ? window.navigator.platform : '',
);
-};
-const isDeviceIpad = () => {
- return /iPad/i.test(
- typeof window !== 'undefined' ? window.navigator.platform : '',
- );
-};
+const isDeviceIpad = () =>
+ /iPad/i.test(typeof window !== 'undefined' ? window.navigator.platform : '');
-const isDeviceIos = () => {
- return isDeviceIphone() || isDeviceIpad();
-};
+const isDeviceIos = () => isDeviceIphone() || isDeviceIpad();
export { isDeviceIphone, isDeviceIpad, isDeviceIos };
diff --git a/packages/bpk-react-utils/src/withDefaultProps-test.js b/packages/bpk-react-utils/src/withDefaultProps-test.js
index 198031a25a..3c0aa5777b 100644
--- a/packages/bpk-react-utils/src/withDefaultProps-test.js
+++ b/packages/bpk-react-utils/src/withDefaultProps-test.js
@@ -23,7 +23,7 @@ import { render } from '@testing-library/react';
import withDefaultProps from './withDefaultProps';
-const TestComponent = props =>
;
+const TestComponent = (props) =>
;
describe('withDefaultProps', () => {
it('should render correctly', () => {
diff --git a/packages/bpk-scrim-utils/src/BpkScrim.js b/packages/bpk-scrim-utils/src/BpkScrim.js
index eaa226bd44..48c44f1759 100644
--- a/packages/bpk-scrim-utils/src/BpkScrim.js
+++ b/packages/bpk-scrim-utils/src/BpkScrim.js
@@ -24,7 +24,7 @@ import STYLES from './bpk-scrim.module.scss';
const getClassName = cssModules(STYLES);
-const BpkScrim = props => (
+const BpkScrim = (props) => (
{
describe('withScrim accessibility tests', () => {
it('should not have programmatically-detectable accessibility issues', async () => {
- const TestComponent = props =>
;
+ const TestComponent = (props) =>
;
const Component = withScrim(TestComponent);
const { container } = render(
{
+const withScrim = (WrappedComponent) => {
class WithScrim extends Component {
static propTypes = {
getApplicationElement: PropTypes.func.isRequired,
@@ -63,7 +63,7 @@ const withScrim = WrappedComponent => {
};
componentDidMount() {
- const { isIphone, isIpad, getApplicationElement } = this.props;
+ const { getApplicationElement, isIpad, isIphone } = this.props;
const applicationElement = getApplicationElement();
// iPhones need to have the application element hidden
@@ -94,7 +94,7 @@ const withScrim = WrappedComponent => {
}
componentWillUnmount() {
- const { isIpad, isIphone, getApplicationElement } = this.props;
+ const { getApplicationElement, isIpad, isIphone } = this.props;
const applicationElement = getApplicationElement();
if (isIphone && applicationElement) {
@@ -116,19 +116,19 @@ const withScrim = WrappedComponent => {
focusStore.restoreFocus();
}
- dialogRef = ref => {
+ dialogRef = (ref) => {
this.dialogElement = ref;
};
render() {
const {
- getApplicationElement,
- onClose,
- isIphone,
- isIpad,
- containerClassName,
closeOnScrimClick,
+ containerClassName,
dark,
+ getApplicationElement,
+ isIpad,
+ isIphone,
+ onClose,
...rest
} = this.props;
diff --git a/packages/bpk-storybook-utils/src/BpkStorybookUtils.js b/packages/bpk-storybook-utils/src/BpkStorybookUtils.js
index 79a145334f..3abcfb27fd 100644
--- a/packages/bpk-storybook-utils/src/BpkStorybookUtils.js
+++ b/packages/bpk-storybook-utils/src/BpkStorybookUtils.js
@@ -18,7 +18,10 @@
/* @flow strict */
/* eslint-disable global-require, no-console, import/no-mutable-exports */
-let action = (...args: Array) => () => console.info(args);
+let action =
+ (...args: Array) =>
+ () =>
+ console.info(args);
try {
const storybookAction = require('@storybook/addon-actions').action;
diff --git a/packages/bpk-stylesheets/base.css b/packages/bpk-stylesheets/base.css
index 56209352e8..8f66251765 100644
--- a/packages/bpk-stylesheets/base.css
+++ b/packages/bpk-stylesheets/base.css
@@ -1697,7 +1697,7 @@ body {
/* stylelint-disable-line scale-unlimited/declaration-strict-value */ }
body.scaffold-font-size {
font-size: 13px;
- /* stylelint-disable-line unit-blacklist, scale-unlimited/declaration-strict-value */ }
+ /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */ }
body.enable-font-smoothing {
-webkit-font-smoothing: antialiased; }
@@ -1710,11 +1710,11 @@ body {
.visually-hidden {
position: absolute;
width: 1px;
- /* stylelint-disable-line unit-blacklist */
+ /* stylelint-disable-line unit-disallowed-list */
height: 1px;
- /* stylelint-disable-line unit-blacklist */
+ /* stylelint-disable-line unit-disallowed-list */
margin: -1px;
- /* stylelint-disable-line unit-blacklist */
+ /* stylelint-disable-line unit-disallowed-list */
padding: 0;
border: 0;
overflow: hidden;
diff --git a/packages/bpk-stylesheets/build.js b/packages/bpk-stylesheets/build.js
index 053c34f801..41bb25cbe1 100644
--- a/packages/bpk-stylesheets/build.js
+++ b/packages/bpk-stylesheets/build.js
@@ -34,7 +34,7 @@ require('@babel/register')({
const webpack = require('webpack');
-const config = require('./webpack.config.babel.js');
+const config = require('./webpack.config.babel');
/* eslint-disable no-console */
webpack(config, (err, stats) => {
diff --git a/packages/bpk-stylesheets/index.js b/packages/bpk-stylesheets/index.js
index 3dea292464..9087691568 100644
--- a/packages/bpk-stylesheets/index.js
+++ b/packages/bpk-stylesheets/index.js
@@ -36,6 +36,6 @@ import './index.scss';
// add more feature tests here...
document.documentElement.className += ` ${classNames
- .map(className => `bpk-${className}`)
+ .map((className) => `bpk-${className}`)
.join(' ')}`;
})();
diff --git a/packages/bpk-stylesheets/index.scss b/packages/bpk-stylesheets/index.scss
index b8a5a8347f..90a8f9a665 100644
--- a/packages/bpk-stylesheets/index.scss
+++ b/packages/bpk-stylesheets/index.scss
@@ -42,7 +42,7 @@ body {
line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
:global(&.scaffold-font-size) {
- font-size: 13px; /* stylelint-disable-line unit-blacklist, scale-unlimited/declaration-strict-value */
+ font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
}
:global(&.enable-font-smoothing) {
diff --git a/packages/bpk-tether/src/applyRTLTransforms.js b/packages/bpk-tether/src/applyRTLTransforms.js
index dd33f7d5fc..9e4b56811b 100644
--- a/packages/bpk-tether/src/applyRTLTransforms.js
+++ b/packages/bpk-tether/src/applyRTLTransforms.js
@@ -18,7 +18,7 @@
import { isRTL } from 'bpk-react-utils';
-const tryFlipAttachmentString = value => {
+const tryFlipAttachmentString = (value) => {
if (value.indexOf('right') !== -1) {
return value.replace('right', 'left');
}
@@ -26,7 +26,7 @@ const tryFlipAttachmentString = value => {
return value.replace('left', 'right');
};
-const transform = tetherOptions => {
+const transform = (tetherOptions) => {
const { attachment, targetAttachment, ...rest } = tetherOptions;
const options = {};
diff --git a/packages/bpk-tether/src/getArrowPositionCallback.js b/packages/bpk-tether/src/getArrowPositionCallback.js
index 101aa5a989..308f7f3ea4 100644
--- a/packages/bpk-tether/src/getArrowPositionCallback.js
+++ b/packages/bpk-tether/src/getArrowPositionCallback.js
@@ -41,8 +41,8 @@ const getArrowPositionCallback = (
return () => null;
}
- return props => {
- const { top, left, targetPos } = props;
+ return (props) => {
+ const { left, targetPos, top } = props;
const shouldApplyLeftOffset =
hasClass(popoverElement, `${classNamePrefix}-element-attached-top`) ||
diff --git a/packages/bpk-theming/src/BpkThemeProvider.js b/packages/bpk-theming/src/BpkThemeProvider.js
index 7a8f231686..475ee964cb 100644
--- a/packages/bpk-theming/src/BpkThemeProvider.js
+++ b/packages/bpk-theming/src/BpkThemeProvider.js
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
const uniq = (arr = []) => {
const seen = {};
- return arr.filter(item => {
+ return arr.filter((item) => {
if (seen.hasOwnProperty[item]) {
return false;
}
@@ -37,11 +37,11 @@ const createStyle = (theme, themeAttributes) => {
const flattenedThemeAttributes = [].concat(...themeAttributes);
let style = {};
const missingThemeAttributes = [];
- flattenedThemeAttributes.forEach(attribute => {
+ flattenedThemeAttributes.forEach((attribute) => {
if (theme[attribute]) {
const cssName = attribute
- .replace(/([A-Z])/g, variable => `-${variable.toLowerCase()}`)
- .replace(/([0-9])/, variable => `-${variable.toLowerCase()}`);
+ .replace(/([A-Z])/g, (variable) => `-${variable.toLowerCase()}`)
+ .replace(/([0-9])/, (variable) => `-${variable.toLowerCase()}`);
const value = theme[attribute];
style[`--bpk-${cssName}`] = value;
} else {
@@ -64,10 +64,10 @@ class BpkThemeProvider extends Component {
render() {
const {
children,
- theme,
- themeAttributes,
component: WrapperComponent,
style: userStyle,
+ theme,
+ themeAttributes,
...rest
} = this.props;
@@ -103,7 +103,7 @@ const themeAttributesPropType = (props, propName, componentName) => {
themeAttributes = [].concat(...themeAttributes);
const extraneousThemeAttributes = { ...theme };
const missingThemeAttributes = [];
- themeAttributes.forEach(attribute => {
+ themeAttributes.forEach((attribute) => {
if (theme[attribute]) {
delete extraneousThemeAttributes[attribute];
} else {
diff --git a/scripts/npm/check-bpk-dependencies.js b/scripts/npm/check-bpk-dependencies.js
index 6e2ec73486..599d678310 100644
--- a/scripts/npm/check-bpk-dependencies.js
+++ b/scripts/npm/check-bpk-dependencies.js
@@ -29,7 +29,7 @@ const findReplace = (file, findReplaces) => {
return console.log(err);
}
let result = data;
- findReplaces.forEach(fr => {
+ findReplaces.forEach((fr) => {
const splitFile = result.split(fr.find);
if (splitFile.length === 1) {
return null;
@@ -38,7 +38,7 @@ const findReplace = (file, findReplaces) => {
return null;
});
- fs.writeFile(file, result, 'utf8', err2 => {
+ fs.writeFile(file, result, 'utf8', (err2) => {
if (err2) return console.log(err2);
return null;
});
@@ -46,9 +46,9 @@ const findReplace = (file, findReplaces) => {
});
};
-const fixDependencyErrors = packageFiles => {
+const fixDependencyErrors = (packageFiles) => {
const findReplaces = [];
- errors.forEach(error => {
+ errors.forEach((error) => {
findReplaces.push({
find: new RegExp(
`\\"${error.dependency}\\"\\:[ ]+\\"\\^[0-9]+\\.[0-9]+\\.[0-9]+\\"`,
@@ -61,13 +61,13 @@ const fixDependencyErrors = packageFiles => {
);
});
- packageFiles.forEach(file => {
+ packageFiles.forEach((file) => {
findReplace(file, findReplaces);
});
};
const checkBpkDependencyList = (dependencies, correctVersions, packageName) => {
- Object.keys(dependencies).forEach(dependency => {
+ Object.keys(dependencies).forEach((dependency) => {
if (Object.keys(correctVersions).indexOf(dependency) !== -1) {
const dependencyVersion = dependencies[dependency];
const correctDependencyVersion = `^${correctVersions[dependency]}`;
@@ -86,10 +86,10 @@ const checkBpkDependencyList = (dependencies, correctVersions, packageName) => {
const checkBpkDependencies = (packageFile, correctVersions) => {
const pfContent = JSON.parse(fs.readFileSync(packageFile));
const {
- name: packageName,
- peerDependencies,
dependencies,
devDependencies,
+ name: packageName,
+ peerDependencies,
} = pfContent;
if (peerDependencies !== undefined) {
@@ -103,7 +103,7 @@ const checkBpkDependencies = (packageFile, correctVersions) => {
}
};
-const getLatestProductionVersion = version => {
+const getLatestProductionVersion = (version) => {
if (version.includes('-alpha')) {
return version.split('-alpha')[0];
}
@@ -113,7 +113,7 @@ const getLatestProductionVersion = version => {
return version;
};
-const getBpkPackageVersions = packageFiles =>
+const getBpkPackageVersions = (packageFiles) =>
packageFiles.reduce((acc, pkg) => {
if (pkg === '' || !pkg.includes('bpk-')) {
return acc;
@@ -133,7 +133,7 @@ let packageFiles = execSync(
.toString()
.split('\n');
-packageFiles = packageFiles.filter(s => s !== '');
+packageFiles = packageFiles.filter((s) => s !== '');
const bpkPackageVersions = getBpkPackageVersions(packageFiles);
if (
@@ -156,7 +156,7 @@ if (
bpkPackageVersions['@skyscanner/bpk-foundations-web'] = foundationsVersion[0];
}
-packageFiles.forEach(pf => {
+packageFiles.forEach((pf) => {
checkBpkDependencies(pf, bpkPackageVersions);
});
@@ -171,7 +171,7 @@ if (errors.length === 0) {
} else {
console.log('Some Backpack cross dependencies are outdated 😱');
console.log('');
- errors.forEach(error => {
+ errors.forEach((error) => {
console.log(
`${error.packageName} depends on ${error.dependency} ${error.dependencyVersion}, it should be ${error.correctDependencyVersion}`,
);
diff --git a/scripts/npm/check-owners.js b/scripts/npm/check-owners.js
index 0e8821cd67..4ea5e17617 100644
--- a/scripts/npm/check-owners.js
+++ b/scripts/npm/check-owners.js
@@ -60,19 +60,19 @@ const meta = require('../../meta.json');
let failures = false;
-const owners = meta.maintainers.map(maintainer => maintainer.npm).sort();
+const owners = meta.maintainers.map((maintainer) => maintainer.npm).sort();
const packageDone = () => {
packagesDataFetched += 1;
bar.update(packagesDataFetched);
};
-const getPackageMaintainers = pkg =>
+const getPackageMaintainers = (pkg) =>
new Promise((resolve, reject) => {
- https.get(`https://registry.npmjs.org/${pkg}/`, res => {
+ https.get(`https://registry.npmjs.org/${pkg}/`, (res) => {
let body = '';
res.setEncoding('utf8');
- res.on('data', d => {
+ res.on('data', (d) => {
body += d;
});
res.on('error', reject);
@@ -83,7 +83,7 @@ const getPackageMaintainers = pkg =>
packageDone();
resolve({
name: pkg,
- maintainers: pkgData.maintainers.map(m => m.name),
+ maintainers: pkgData.maintainers.map((m) => m.name),
new: false,
});
} else {
@@ -97,7 +97,7 @@ const getPackageMaintainers = pkg =>
});
});
-const verifyMaintainers = data => {
+const verifyMaintainers = (data) => {
if (data.new) {
console.log(
`${data.name} ⁇\n Package does not seem to be in NPM registry (yet)`,
@@ -106,7 +106,7 @@ const verifyMaintainers = data => {
}
const sortedMaintainers = data.maintainers
- .filter(m => !DEARLY_DEPARTED.includes(m))
+ .filter((m) => !DEARLY_DEPARTED.includes(m))
.sort();
if (sortedMaintainers.join('') === owners.join('')) {
@@ -127,18 +127,18 @@ console.log(`Maintainers are:\n ${owners.join('\n ')}\n`);
const privatePackages = ['bpk-component-boilerplate'];
readdir('packages/')
- .then(packages => packages.filter(i => !privatePackages.includes(i)))
- .then(packages => {
+ .then((packages) => packages.filter((i) => !privatePackages.includes(i)))
+ .then((packages) => {
bar.start(packages.length, 0);
return packages;
})
- .then(packages => Promise.all(packages.map(getPackageMaintainers)))
- .then(packages => {
+ .then((packages) => Promise.all(packages.map(getPackageMaintainers)))
+ .then((packages) => {
bar.stop();
console.log('');
return packages;
})
- .then(maintainers => maintainers.forEach(verifyMaintainers))
+ .then((maintainers) => maintainers.forEach(verifyMaintainers))
.then(() => {
if (failures) {
console.log(
@@ -150,7 +150,7 @@ readdir('packages/')
process.exit(0);
}
})
- .catch(error => {
+ .catch((error) => {
console.error(
'An unknown error occured. Please check your network connection and try again.',
);
diff --git a/scripts/npm/check-react-versions.js b/scripts/npm/check-react-versions.js
index a6aca7e291..73215766d4 100755
--- a/scripts/npm/check-react-versions.js
+++ b/scripts/npm/check-react-versions.js
@@ -27,7 +27,7 @@ const reactVersionErrors = [];
console.log('Checking React versions...');
-reactLibs.forEach(lib => {
+reactLibs.forEach((lib) => {
if (reactDeps[lib] !== skyscannerStandard) {
reactVersionErrors.push(
`Your version of ${lib} ${reactDeps[lib]} does not match the company version ${skyscannerStandard}`,
diff --git a/scripts/npm/create-component.js b/scripts/npm/create-component.js
index c0e591de1d..7b2a1f8b91 100644
--- a/scripts/npm/create-component.js
+++ b/scripts/npm/create-component.js
@@ -47,7 +47,7 @@ _.mixin({
});
// Util to recursively make dirs
-const mkdirp = dir =>
+const mkdirp = (dir) =>
path
.resolve(dir)
.split(path.sep)
@@ -104,7 +104,7 @@ const createComponent = async (err, { name }) => {
`!**/node_modules/**`,
]);
- const processBoilerPlateFiles = boilerPlateFilePath => {
+ const processBoilerPlateFiles = (boilerPlateFilePath) => {
const newFilePath = boilerPlateFilePath
.split('boilerplate')
.join(name)
@@ -123,7 +123,7 @@ const createComponent = async (err, { name }) => {
});
};
- const componentCreationProcess = async directoryAlreadyExists => {
+ const componentCreationProcess = async (directoryAlreadyExists) => {
if (directoryAlreadyExists) {
console.error(
colors.red(
@@ -148,7 +148,7 @@ const createComponent = async (err, { name }) => {
.split(STORYBOOK_CONFIG_SPLIT_POINT_1)[1]
.split(STORYBOOK_CONFIG_SPLIT_POINT_2)[0]
.split('\n')
- .filter(s => !_.isEmpty(s));
+ .filter((s) => !_.isEmpty(s));
storybookConfigContentImports.push(storybookImport);
diff --git a/scripts/npm/get-owners.js b/scripts/npm/get-owners.js
index e1839769e5..e1bbe1683d 100644
--- a/scripts/npm/get-owners.js
+++ b/scripts/npm/get-owners.js
@@ -25,7 +25,7 @@
const meta = require('../../meta.json');
-meta.maintainers.forEach(maintainer => {
+meta.maintainers.forEach((maintainer) => {
if (maintainer.npm) {
process.stdout.write(`${maintainer.npm}\n`);
}
diff --git a/scripts/publish-process/add-missing-tags.js b/scripts/publish-process/add-missing-tags.js
index 36829ab159..3bf88cf150 100644
--- a/scripts/publish-process/add-missing-tags.js
+++ b/scripts/publish-process/add-missing-tags.js
@@ -27,18 +27,18 @@ const {
createGitTags,
logOk,
logVerbose,
- verbose,
testing,
+ verbose,
} = require('./util');
const getCommitHash = () =>
- new Promise(resolve => {
+ new Promise((resolve) => {
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
- rl.question('Enter the hash of the commit to tag', answer => {
+ rl.question('Enter the hash of the commit to tag', (answer) => {
if (!answer.match(GIT_HASH_REGEX)) {
rl.close();
resolve(getCommitHash());
@@ -55,7 +55,7 @@ const getPackagesForTagging = () => {
execSync(`npx lerna changed -l --json`).toString(),
);
assert(lernaChanges, 'Could not retrieve lerna changes.');
- return lernaChanges.map(c => ({ name: c.name, newVersion: c.version }));
+ return lernaChanges.map((c) => ({ name: c.name, newVersion: c.version }));
};
const cli = async () => {
diff --git a/scripts/publish-process/publish-css-tagged-packages.js b/scripts/publish-process/publish-css-tagged-packages.js
index 82553a685b..1b10ae2bbe 100644
--- a/scripts/publish-process/publish-css-tagged-packages.js
+++ b/scripts/publish-process/publish-css-tagged-packages.js
@@ -28,11 +28,11 @@
/* @flow */
const {
- getCurrentPackageMeta,
appendToPackageNames,
+ getCurrentPackageMeta,
+ logVerbose,
publishPackagesToNPM,
verbose,
- logVerbose,
} = require('./util');
const cli = async () => {
diff --git a/scripts/publish-process/transform-bpk-imports.js b/scripts/publish-process/transform-bpk-imports.js
index b76c041004..b3ab3b6bf0 100644
--- a/scripts/publish-process/transform-bpk-imports.js
+++ b/scripts/publish-process/transform-bpk-imports.js
@@ -29,7 +29,7 @@ const updateImports = (file, dirs) =>
}
let result = data;
- dirs.forEach(pkg => {
+ dirs.forEach((pkg) => {
const split = result.split(`from '${pkg}`);
if (split.length === 1) {
return;
@@ -37,7 +37,7 @@ const updateImports = (file, dirs) =>
result = split.join(`from '${pkg}-css`);
});
- fs.writeFile(file, result, 'utf8', err2 => {
+ fs.writeFile(file, result, 'utf8', (err2) => {
if (err2) return reject(err2);
return resolve();
});
@@ -50,16 +50,16 @@ console.log('Crunching Backpack import paths...');
const dirs = execSync('ls packages | grep -v "react-version-test.js"')
.toString()
.split('\n')
- .filter(s => s !== '');
+ .filter((s) => s !== '');
const jsFiles = execSync(
'find packages -name "*.js" -o -name "*.jsx" | grep -v node_modules',
)
.toString()
.split('\n')
- .filter(s => s !== '');
+ .filter((s) => s !== '');
-const updatePromises = jsFiles.map(jF => updateImports(jF, dirs));
+const updatePromises = jsFiles.map((jF) => updateImports(jF, dirs));
Promise.all(updatePromises).then(() => {
// eslint-disable-next-line no-console
diff --git a/scripts/publish-process/transform-js-scss-css-imports.js b/scripts/publish-process/transform-js-scss-css-imports.js
index 06b68be9b8..d8ad4972fa 100644
--- a/scripts/publish-process/transform-js-scss-css-imports.js
+++ b/scripts/publish-process/transform-js-scss-css-imports.js
@@ -28,7 +28,7 @@ const updateImports = (file, findReplaces) =>
reject(err);
}
let result = data;
- findReplaces.forEach(fr => {
+ findReplaces.forEach((fr) => {
const splitFile = result.split(fr.find);
if (splitFile.length === 1) {
return;
@@ -36,7 +36,7 @@ const updateImports = (file, findReplaces) =>
result = splitFile.join(fr.replace);
});
- fs.writeFile(file, result, 'utf8', err2 => {
+ fs.writeFile(file, result, 'utf8', (err2) => {
if (err2) return reject(err2);
return resolve();
});
@@ -53,9 +53,9 @@ const jsFiles = execSync(
)
.toString()
.split('\n')
- .filter(s => s !== '');
+ .filter((s) => s !== '');
-const updatePromises = jsFiles.map(jF => updateImports(jF, findReplaces));
+const updatePromises = jsFiles.map((jF) => updateImports(jF, findReplaces));
Promise.all(updatePromises).then(() => {
// eslint-disable-next-line no-console
diff --git a/scripts/publish-process/update-changelog.js b/scripts/publish-process/update-changelog.js
index 31cdd4fb6e..2915f1db85 100644
--- a/scripts/publish-process/update-changelog.js
+++ b/scripts/publish-process/update-changelog.js
@@ -33,13 +33,14 @@ const createTimestamp = () => {
return `# ${year}-${month}-${day}`;
};
-const insertEntriesIntoChangelog = (changelogContents, changesToInsert) => {
- return `${createTimestamp()}
+const insertEntriesIntoChangelog = (
+ changelogContents,
+ changesToInsert,
+) => `${createTimestamp()}
${changesToInsert}
${changelogContents}`;
-};
const cli = () => {
console.log(
diff --git a/scripts/publish-process/util.js b/scripts/publish-process/util.js
index 6ba437f080..21cd7d156a 100644
--- a/scripts/publish-process/util.js
+++ b/scripts/publish-process/util.js
@@ -61,7 +61,7 @@ const assert = (condition, message) => {
const getCurrentPackageMeta = () => {
const packages = JSON.parse(execSync(`npx lerna ls -l --json`).toString());
assert(packages && packages.map, 'Failed to get current package meta');
- return packages.map(p => ({
+ return packages.map((p) => ({
name: p.name,
private: p.private,
path: p.location,
@@ -70,7 +70,7 @@ const getCurrentPackageMeta = () => {
};
const createGitTags = (changes, commitHash = '') => {
- changes.forEach(c => {
+ changes.forEach((c) => {
const tagMessage = `${c.name}@${c.newVersion}`;
const command = `git tag -a ${tagMessage} ${commitHash} -m ${tagMessage}`;
if (verbose) {
@@ -85,32 +85,32 @@ const createGitTags = (changes, commitHash = '') => {
});
};
-const publishPackageToNPM = packageName =>
- new Promise(resolve => {
+const publishPackageToNPM = (packageName) =>
+ new Promise((resolve) => {
exec(`(cd packages/${packageName} && npm publish)`, null, () => {
publishDone();
resolve();
});
});
-const publishPackagesToNPM = changes =>
- new Promise(resolve => {
+const publishPackagesToNPM = (changes) =>
+ new Promise((resolve) => {
bar.start(changes.length, 0);
- const tasks = changes.map(c => publishPackageToNPM(c.name));
+ const tasks = changes.map((c) => publishPackageToNPM(c.name));
- Promise.all(tasks).then(result => {
+ Promise.all(tasks).then((result) => {
bar.stop();
resolve(result);
});
});
-const updateDependencies = dependencies => {
+const updateDependencies = (dependencies) => {
if (!dependencies) {
return;
}
const dependencyList = {};
- Object.keys(dependencies).forEach(depName => {
+ Object.keys(dependencies).forEach((depName) => {
const depValue = dependencies[depName];
if (depName.match('bpk-*')) {
const newName = `${depName}-css`;
@@ -125,7 +125,7 @@ const updateDependencies = dependencies => {
};
const appendToPackageName = (c, text) =>
- new Promise(resolve => {
+ new Promise((resolve) => {
const packageJsonFilePath = path.join(c.path, 'package.json');
const appendedName = `${c.name}-${text}`;
const packageJsonData = JSON.parse(
@@ -149,10 +149,10 @@ const appendToPackageName = (c, text) =>
});
const appendToPackageNames = (changes, text) =>
- new Promise(resolve => {
- const tasks = changes.map(c => appendToPackageName(c, text));
+ new Promise((resolve) => {
+ const tasks = changes.map((c) => appendToPackageName(c, text));
- Promise.all(tasks).then(result => {
+ Promise.all(tasks).then((result) => {
resolve(result);
});
});