@skyscanner/backpack-web 37.1.0 → 37.2.1

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -30,6 +30,7 @@ export const getTypeByRating = (starNumber, rating) => {
 const BpkInteractiveStarRating = props => {
   const {
     className,
+    extraLarge,
     getStarLabel,
     hoverRating,
     id,
@@ -54,6 +55,7 @@ const BpkInteractiveStarRating = props => {
       onClick: event => onRatingSelect(starNumber, event),
       type: type,
       large: large,
+      extraLarge: extraLarge,
       onMouseEnter: event => onRatingHover(starNumber, event),
       selected: rating === starNumber,
       label: getStarLabel(starNumber, maxRating),
@@ -74,6 +76,7 @@ BpkInteractiveStarRating.propTypes = {
   className: PropTypes.string,
   hoverRating: PropTypes.number,
   large: PropTypes.bool,
+  extraLarge: PropTypes.bool,
   maxRating: PropTypes.number,
   onMouseLeave: PropTypes.func,
   onRatingHover: PropTypes.func,
@@ -84,6 +87,7 @@ BpkInteractiveStarRating.defaultProps = {
   className: null,
   hoverRating: 0,
   large: false,
+  extraLarge: false,
   maxRating: 5,
   onMouseLeave: () => null,
   onRatingHover: () => null,

package/bpk-component-star-rating/src/BpkStar.js

@@ -22,6 +22,9 @@ import OutlineLargeIcon from "../../bpk-component-icon/lg/star-outline";
 import SmallIcon from "../../bpk-component-icon/sm/star";
 import HalfSmallIcon from "../../bpk-component-icon/sm/star-half";
 import OutlineSmallIcon from "../../bpk-component-icon/sm/star-outline";
+import ExtraLargeIcon from "../../bpk-component-icon/xl/star";
+import HalfExtraLargeIcon from "../../bpk-component-icon/xl/star-half";
+import OutlineExtraLargeIcon from "../../bpk-component-icon/xl/star-outline";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkStar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -34,12 +37,13 @@ export const STAR_TYPES = {
 const BpkStar = props => {
   const {
     className,
+    extraLarge,
     large,
     type,
     ...rest
   } = props;
-  const iconClassNames = getClassName('bpk-star', large && 'bpk-star--large', type === STAR_TYPES.FULL && 'bpk-star--filled', className);
-  const containerClassNames = getClassName('bpk-star__container', 'bpk-star__container--half-star', large && 'bpk-star__container--large', className);
+  const iconClassNames = getClassName('bpk-star', large && 'bpk-star--large', extraLarge && 'bpk-star--extra-large', type === STAR_TYPES.FULL && 'bpk-star--filled', className);
+  const containerClassNames = getClassName('bpk-star__container', 'bpk-star__container--half-star', large && 'bpk-star__container--large', extraLarge && 'bpk-star__container--extra-large', className);
   const halfIconClassNames = getClassName('bpk-star', 'bpk-star--half', 'bpk-star--filled');
   let Icon = SmallIcon;
   let OutlineIcon = OutlineSmallIcon;
@@ -49,6 +53,11 @@ const BpkStar = props => {
     OutlineIcon = OutlineLargeIcon;
     HalfIcon = HalfLargeIcon;
   }
+  if (extraLarge) {
+    Icon = ExtraLargeIcon;
+    OutlineIcon = OutlineExtraLargeIcon;
+    HalfIcon = HalfExtraLargeIcon;
+  }
   if (type === STAR_TYPES.HALF) {
     return (
       /*#__PURE__*/
@@ -79,11 +88,13 @@ const BpkStar = props => {
 BpkStar.propTypes = {
   type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.HALF, STAR_TYPES.FULL]).isRequired,
   className: PropTypes.string,
-  large: PropTypes.bool
+  large: PropTypes.bool,
+  extraLarge: PropTypes.bool
 };
 BpkStar.defaultProps = {
   className: null,
-  large: false
+  large: false,
+  extraLarge: false
 };
 export const BpkStarNonRtl = BpkStar;
 export default withRtlSupport(BpkStar);

package/bpk-component-star-rating/src/BpkStar.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-star{display:inline-flex;width:1rem;height:1rem;vertical-align:text-bottom;fill:rgba(0,0,0,.2)}.bpk-star--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star--half{position:absolute;left:0}.bpk-star--filled{fill:#f55d42;fill:var(--bpk-star-rating-filled-color, rgb(245, 93, 66))}.bpk-star__container{display:inline-flex;width:1rem;height:1rem}.bpk-star__container--half-star{position:relative;vertical-align:text-bottom}.bpk-star__container--large{width:1.5rem;height:1.5rem;vertical-align:bottom}
+.bpk-star{display:inline-flex;width:1rem;height:1rem;vertical-align:text-bottom;fill:rgba(0,0,0,.2)}.bpk-star--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star--extra-large{width:2rem;height:2rem;vertical-align:bottom}.bpk-star--half{position:absolute;left:0}.bpk-star--filled{fill:#f55d42;fill:var(--bpk-star-rating-filled-color, rgb(245, 93, 66))}.bpk-star__container{display:inline-flex;width:1rem;height:1rem}.bpk-star__container--half-star{position:relative;vertical-align:text-bottom}.bpk-star__container--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star__container--extra-large{width:2rem;height:2rem;vertical-align:bottom}

package/bpk-component-star-rating/src/BpkStarRating.js

@@ -38,6 +38,7 @@ export const ROUNDING_TYPES = {
 const BpkStarRating = props => {
   const {
     className,
+    extraLarge,
     large,
     maxRating,
     rating,
@@ -55,7 +56,8 @@ const BpkStarRating = props => {
     const type = getTypeByRating(starNumber, rounding(currentRating));
     stars.push(/*#__PURE__*/_jsx(BpkStar, {
       type: type,
-      large: large
+      large: large,
+      extraLarge: extraLarge
     }, `star-${starNumber}`));
   }
   const label = typeof ratingLabel === 'string' ? ratingLabel : ratingLabel(rating, maxRating);
@@ -71,6 +73,7 @@ BpkStarRating.propTypes = {
   ratingLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   className: PropTypes.string,
   large: PropTypes.bool,
+  extraLarge: PropTypes.bool,
   maxRating: PropTypes.number,
   rating: PropTypes.number,
   rounding: PropTypes.oneOf([ROUNDING_TYPES.down, ROUNDING_TYPES.up, ROUNDING_TYPES.nearest])
@@ -78,6 +81,7 @@ BpkStarRating.propTypes = {
 BpkStarRating.defaultProps = {
   className: null,
   large: false,
+  extraLarge: false,
   maxRating: 5,
   rating: 0,
   rounding: ROUNDING_TYPES.down

package/bpk-mixins/_typography.scss

@@ -837,7 +837,7 @@
     content: '';
     display: block;
     width: 100%;
-    height: tokens.$bpk-border-size-sm;
+    height: $bpk-border-size-sm;
     transition:
       width 0.2s ease 0s,
       left 0.2s ease 0s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "37.1.0",
+  "version": "37.2.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",