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

package/bpk-component-table/src/BpkTableCell.js

@@ -14,44 +14,32 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkTable.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkTable.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: Node,
-  className: ?string,
-};
-
-const BpkTableCell = (props: Props) => {
-  const { className, ...rest } = props;
-
+const BpkTableCell = props => {
+  const {
+    className,
+    ...rest
+  } = props;
   const classNames = getClassName('bpk-table__cell', className);
-
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    <td className={classNames} {...rest}>
-      {props.children}
-    </td>
+    _jsx("td", {
+      className: classNames,
+      ...rest,
+      children: props.children
+    })
   );
 };
-
 BpkTableCell.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired
 };
-
 BpkTableCell.defaultProps = {
-  className: null,
+  className: null
 };
-
-export default BpkTableCell;
+export default BpkTableCell;

package/bpk-component-table/src/BpkTableHead.js

@@ -14,19 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
-
-type Props = { children: Node };
-
-const BpkTableHead = (props: Props) => <thead {...props} />;
-
+ */import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkTableHead = props => /*#__PURE__*/_jsx("thead", {
+  ...props
+});
 BpkTableHead.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired
 };
-
-export default BpkTableHead;
+export default BpkTableHead;

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -14,40 +14,27 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkTable.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkTable.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = { children: Node, className: ?string };
-
-const BpkTableHeadCell = (props: Props) => {
-  const { className, ...rest } = props;
-
-  const classNames = getClassName(
-    'bpk-table__cell',
-    'bpk-table__cell--head',
+const BpkTableHeadCell = props => {
+  const {
     className,
-  );
-
-  return <th {...rest} className={classNames} />;
+    ...rest
+  } = props;
+  const classNames = getClassName('bpk-table__cell', 'bpk-table__cell--head', className);
+  return /*#__PURE__*/_jsx("th", {
+    ...rest,
+    className: classNames
+  });
 };
-
 BpkTableHeadCell.propTypes = {
   children: PropTypes.node.isRequired,
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-
 BpkTableHeadCell.defaultProps = {
-  className: null,
+  className: null
 };
-
-export default BpkTableHeadCell;
+export default BpkTableHeadCell;

package/bpk-component-table/src/BpkTableRow.js

@@ -14,19 +14,12 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
-
-type Props = { children: Node };
-
-const BpkTableRow = (props: Props) => <tr {...props} />;
-
+ */import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkTableRow = props => /*#__PURE__*/_jsx("tr", {
+  ...props
+});
 BpkTableRow.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired
 };
-
-export default BpkTableRow;
+export default BpkTableRow;

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

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import component, { TEXT_STYLES } from './src/BpkText';
-
+import component, { TEXT_STYLES } from "./src/BpkText";
 export default component;
-export { TEXT_STYLES };
+export { TEXT_STYLES };

package/bpk-component-text/src/{BpkText.tsx → BpkText.js}

@@ -16,14 +16,10 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkText.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkText.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
 export const TEXT_STYLES = {
   xs: 'xs',
   sm: 'sm',
@@ -51,48 +47,20 @@ export const TEXT_STYLES = {
   hero2: 'hero-2',
   hero3: 'hero-3',
   hero4: 'hero-4',
-  hero5: 'hero-5',
-} as const;
-
-export type TextStyle = (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];
-export type Tag =
-  | 'span'
-  | 'p'
-  | 'text'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6';
-
-type Props = {
-  children: ReactNode;
-  textStyle?: TextStyle;
-  tagName?: Tag;
-  className?: string | null;
-  id?: string;
-  [rest: string]: any;
+  hero5: 'hero-5'
 };
-
 const BpkText = ({
   children,
   className = null,
   tagName: TagName = 'span',
   textStyle = TEXT_STYLES.bodyDefault,
   ...rest
-}: Props) => {
-  const classNames = getClassName(
-    'bpk-text',
-    `bpk-text--${textStyle}`,
-    className,
-  );
-
-  return (
-    <TagName className={classNames} {...rest}>
-      {children}
-    </TagName>
-  );
+}) => {
+  const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
+  return /*#__PURE__*/_jsx(TagName, {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
-
-export default BpkText;
+export default BpkText;

package/bpk-component-text/src/BpkText.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--bold{font-weight:700}.bpk-text--black{font-weight:900}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}

package/bpk-component-textarea/index.js

@@ -14,12 +14,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-import BpkTextarea from './src/BpkTextarea';
-import themeAttributes from './src/themeAttributes';
-
+ */import BpkTextarea from "./src/BpkTextarea";
+import themeAttributes from "./src/themeAttributes";
 export default BpkTextarea;
-export { themeAttributes };
+export { themeAttributes };

package/bpk-component-textarea/src/BpkTextarea.js

@@ -14,62 +14,43 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkTextarea.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkTextarea.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  id: string,
-  name: string,
-  value: string,
-  className: ?string,
-  valid: ?boolean,
-  large: ?boolean,
-};
-
-const BpkTextarea = (props: Props) => {
-  const { className, large, valid, ...rest } = props;
+const BpkTextarea = props => {
+  const {
+    className,
+    large,
+    valid,
+    ...rest
+  } = props;
 
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
-
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    <textarea
-      className={getClassName(
-        'bpk-textarea',
-        isInvalid && 'bpk-textarea--invalid',
-        large && 'bpk-textarea--large',
-        className,
-      )}
-      aria-invalid={isInvalid}
-      {...rest}
-    />
+    _jsx("textarea", {
+      className: getClassName('bpk-textarea', isInvalid && 'bpk-textarea--invalid', large && 'bpk-textarea--large', className),
+      "aria-invalid": isInvalid,
+      ...rest
+    })
   );
 };
-
 BpkTextarea.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   className: PropTypes.string,
   valid: PropTypes.bool,
-  large: PropTypes.bool,
+  large: PropTypes.bool
 };
-
 BpkTextarea.defaultProps = {
   className: null,
   valid: null,
-  large: false,
+  large: false
 };
-
-export default BpkTextarea;
+export default BpkTextarea;

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

@@ -14,8 +14,4 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
-
-/* @flow strict */
-
-export default ['textareaInvalidBorderColor'];
+ */export default ['textareaInvalidBorderColor'];

package/bpk-component-theme-toggle/index.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import BpkThemeToggle from './src/BpkThemeToggle';
-import updateOnThemeChange from './src/updateOnThemeChange';
-
+import BpkThemeToggle from "./src/BpkThemeToggle";
+import updateOnThemeChange from "./src/updateOnThemeChange";
 export default BpkThemeToggle;
-export { updateOnThemeChange };
+export { updateOnThemeChange };

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -17,97 +17,93 @@
  */
 
 import { Component } from 'react';
-
-import BpkLabel from '../../bpk-component-label';
-import BpkSelect from '../../bpk-component-select';
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkThemeToggle.module.scss';
-import bpkCustomThemes from './theming';
-import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
-
+import BpkLabel from "../../bpk-component-label";
+import BpkSelect from "../../bpk-component-select";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkThemeToggle.module.css";
+import bpkCustomThemes from "./theming";
+import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 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 } }),
-  );
+  htmlElement.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
+    detail: {
+      theme
+    }
+  }));
 };
-
 class BpkThemeToggle extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      selectedTheme: '',
+      selectedTheme: ''
     };
   }
-
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
-
-  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 });
+    this.setState({
+      selectedTheme
+    });
     setTheme(bpkCustomThemes[selectedTheme]);
   };
-
   cycleTheme = () => {
-    let { selectedTheme } = this.state;
-    const selectedIndex = selectedTheme
-      ? availableThemes.indexOf(selectedTheme) + 1
-      : 0;
+    let {
+      selectedTheme
+    } = this.state;
+    const selectedIndex = selectedTheme ? availableThemes.indexOf(selectedTheme) + 1 : 0;
     if (selectedIndex >= availableThemes.length) {
       selectedTheme = '';
     } else {
       selectedTheme = availableThemes[selectedIndex];
     }
-    this.setState({ selectedTheme });
+    this.setState({
+      selectedTheme
+    });
     setTheme(bpkCustomThemes[selectedTheme]);
   };
-
   render() {
-    const { ...rest } = this.props;
-    return (
-      <div {...rest}>
-        <BpkLabel
-          className={getClassName('bpk-theme-toggle__label')}
-          htmlFor={inputId}
-        >
-          Change theme
-        </BpkLabel>
-        <BpkSelect
-          id={inputId}
-          name={inputId}
-          value={this.state.selectedTheme}
-          onChange={this.handleChange}
-        >
-          <option value="" hidden>
-            Change theme
-          </option>
-          <option value="skyscanner">None</option>
-          {availableThemes.map((themeName) => (
-            <option key={themeName} value={themeName}>
-              {themeName}
-            </option>
-          ))}
-        </BpkSelect>
-      </div>
-    );
+    const {
+      ...rest
+    } = this.props;
+    return /*#__PURE__*/_jsxs("div", {
+      ...rest,
+      children: [/*#__PURE__*/_jsx(BpkLabel, {
+        className: getClassName('bpk-theme-toggle__label'),
+        htmlFor: inputId,
+        children: "Change theme"
+      }), /*#__PURE__*/_jsxs(BpkSelect, {
+        id: inputId,
+        name: inputId,
+        value: this.state.selectedTheme,
+        onChange: this.handleChange,
+        children: [/*#__PURE__*/_jsx("option", {
+          value: "",
+          hidden: true,
+          children: "Change theme"
+        }), /*#__PURE__*/_jsx("option", {
+          value: "skyscanner",
+          children: "None"
+        }), availableThemes.map(themeName => /*#__PURE__*/_jsx("option", {
+          value: themeName,
+          children: themeName
+        }, themeName))]
+      })]
+    });
   }
 }
-
-export default BpkThemeToggle;
+export default BpkThemeToggle;