@drivy/cobalt 0.14.11 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.14.11",
+  "version": "0.16.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -31,7 +31,7 @@
     "date-fns": "2.28.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "3.3.2",
+    "nanoid": "3.3.3",
     "postcss": "8.4.12",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
@@ -41,52 +41,52 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@drivy/babel-preset-app": "0.4.12",
-    "@drivy/eslint-config": "1.6.4",
+    "@drivy/babel-preset-app": "0.4.13",
+    "@drivy/eslint-config": "1.6.5",
     "@drivy/prettier-config": "1.1.3",
-    "@drivy/stylelint-config": "1.1.5",
+    "@drivy/stylelint-config": "1.1.6",
     "@drivy/ts-config": "1.1.3",
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "4.1.0",
-    "@rushstack/eslint-patch": "1.1.1",
-    "@storybook/addon-essentials": "6.4.20",
-    "@storybook/addons": "6.4.20",
-    "@storybook/builder-webpack5": "6.4.20",
-    "@storybook/manager-webpack5": "6.4.20",
-    "@storybook/react": "6.4.20",
+    "@rushstack/eslint-patch": "1.1.3",
+    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addons": "6.4.22",
+    "@storybook/builder-webpack5": "6.4.22",
+    "@storybook/manager-webpack5": "6.4.22",
+    "@storybook/react": "6.4.22",
     "@svgr/cli": "6.2.1",
-    "@testing-library/jest-dom": "5.16.3",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "8.0.0",
     "@types/classnames": "2.3.0",
     "@types/jest": "27.4.1",
-    "@types/lodash.throttle": "4.1.6",
+    "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "17.0.43",
-    "autoprefixer": "10.4.4",
-    "core-js": "3.21.1",
+    "@types/react": "17.0.44",
+    "autoprefixer": "10.4.7",
+    "core-js": "3.22.2",
     "css-loader": "6.7.1",
-    "eslint": "8.12.0",
+    "eslint": "8.14.0",
     "jest": "27.5.1",
     "np": "7.6.1",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.2.1",
-    "prettier": "2.6.1",
+    "prettier": "2.6.2",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "rollup": "2.70.1",
+    "rollup": "2.70.2",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
     "rollup-plugin-typescript2": "0.31.2",
-    "sass": "1.49.10",
+    "sass": "1.50.1",
     "sass-loader": "12.6.0",
     "style-loader": "3.3.1",
-    "stylelint": "14.6.1",
-    "svg2vectordrawable": "2.8.3",
+    "stylelint": "14.7.1",
+    "svg2vectordrawable": "2.8.5",
     "svgo": "2.8.0",
     "ts-jest": "27.1.4",
     "typescript": "4.6.3"
@@ -133,6 +133,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.43"
+    "@types/react": "17.0.44"
   }
 }

package/styles/components/Rating/index.scss

@@ -0,0 +1,134 @@
+.cobalt-rating,
+.cobalt-rating-input {
+  display: flex;
+
+  align-items: center;
+
+  pointer-events: none;
+
+  gap: 4px;
+}
+
+.cobalt-rating__label {
+  line-height: 14px;
+  font-size: 14px;
+  color: color(graphite, light);
+}
+
+.cobalt-rating-input {
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &:not(.cobalt-rating-input--disabled) .cobalt-rating-icons {
+    pointer-events: initial;
+  }
+}
+
+.cobalt-rating-icons {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  pointer-events: none;
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  &--icon-size-48 .cobalt-Icon {
+    height: spacing(xl);
+    width: spacing(xl);
+  }
+
+  &__icon-wrapper {
+    position: relative;
+
+    display: inline-block;
+
+    line-height: 0;
+
+    cursor: pointer;
+  }
+
+  &__icon-wrapper input {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+
+    opacity: 0;
+  }
+
+  &__icon-wrapper * {
+    pointer-events: none;
+  }
+
+  &__icon-half-container {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+
+    width: calc(50%);
+
+    overflow: hidden;
+  }
+
+  &__icon-half-container .cobalt-Icon {
+    max-width: none;
+  }
+
+  &:not(:hover):not(:focus-visible) input:focus {
+    // focus feedback with keyboard navigation only
+    & + .cobalt-Icon {
+      border-radius: spacing(unit);
+      box-shadow: 0 0 0 1px color(turquoise);
+    }
+  }
+
+  /* stylelint-disable order/order */
+  @media (hover: hover) {
+    // desktop animation only
+    &__icon-wrapper--selected {
+      input:checked:focus + .cobalt-Icon {
+        transform: scale(1) !important;
+      }
+    }
+
+    &__icon-wrapper:hover {
+      .cobalt-Icon {
+        transform: scale(1.2);
+      }
+    }
+
+    &:not(:hover)
+      &__icon-wrapper:not(:hover):not(:focus-visible)
+      input:focus:checked {
+      // focus feedback with keyboard navigation only
+      & + .cobalt-Icon {
+        animation: rating-pop--keyboard 0.3s ease 1;
+      }
+    }
+  }
+
+  @media (hover: none) {
+    // mobile selection feedback
+    &__icon-wrapper input:checked {
+      & + .cobalt-Icon {
+        animation: rating-pop--mobile 0.3s ease 1;
+      }
+    }
+  }
+}
+
+@keyframes rating-pop--keyboard {
+  0% {
+    transform: scale(1.2);
+  }
+}
+
+@keyframes rating-pop--mobile {
+  0% {
+    transform: scale(1.5);
+  }
+}

package/styles/components.scss

@@ -28,3 +28,4 @@
 @import "./components/Popover/index";
 @import "./components/Accordion/index";
 @import "./components/HorizontalList/index";
+@import "./components/Rating/index";

package/tokens/icons.js

@@ -1,16 +1,41 @@
 const icons = {
+	accountDetails: "account-details.svg",
+	addPicture: "add-picture.svg",
+	airConditioning: "air-conditioning.svg",
 	airport: "airport.svg",
+	android: "android.svg",
+	antique: "antique.svg",
+	arrowLeftCircleFilled: "arrow-left-circle-filled.svg",
 	arrowLeft: "arrow-left.svg",
+	arrowRightCircleFilled: "arrow-right-circle-filled.svg",
+	arrowRightCircle: "arrow-right-circle.svg",
 	arrowRight: "arrow-right.svg",
+	audioInput: "audio-input.svg",
+	babySeat: "baby-seat.svg",
+	battery: "battery.svg",
+	bell: "bell.svg",
+	bikeRack: "bike-rack.svg",
 	bin: "bin.svg",
+	bluetooth: "bluetooth.svg",
 	briefcase: "briefcase.svg",
 	bulb: "bulb.svg",
+	cable: "cable.svg",
+	cabriolet: "cabriolet.svg",
+	calendarCheck: "calendar-check.svg",
+	calendarClock: "calendar-clock.svg",
+	calendarEnd: "calendar-end.svg",
+	calendarStart: "calendar-start.svg",
+	calendar: "calendar.svg",
+	cameraAdd: "camera-add.svg",
 	camera: "camera.svg",
+	campervan: "campervan.svg",
 	carAdd: "car-add.svg",
 	carCheck: "car-check.svg",
+	carDamages: "car-damages.svg",
 	carDrivyOpen: "car-drivy-open.svg",
 	carGroup: "car-group.svg",
 	carLock: "car-lock.svg",
+	carPlay: "car-play.svg",
 	carReturn: "car-return.svg",
 	carSearch: "car-search.svg",
 	carTypeAntique: "car-type-antique.svg",
@@ -25,51 +50,121 @@ const icons = {
 	carTypeSedan: "car-type-sedan.svg",
 	carTypeUtility: "car-type-utility.svg",
 	car: "car.svg",
+	card: "card.svg",
+	cdPlayer: "cd-player.svg",
+	certificate: "certificate.svg",
+	chains: "chains.svg",
+	checkCircleFilled: "check-circle-filled.svg",
 	checkCircle: "check-circle.svg",
 	check: "check.svg",
+	checklist: "checklist.svg",
 	chevronDown: "chevron-down.svg",
 	chevronLeft: "chevron-left.svg",
 	chevronRight: "chevron-right.svg",
 	chevronUp: "chevron-up.svg",
+	circledArrowRight: "circled-arrow-right.svg",
+	city: "city.svg",
+	cleaning: "cleaning.svg",
+	clockAlert: "clock-alert.svg",
+	clockBackwards: "clock-backwards.svg",
+	clockForwards: "clock-forwards.svg",
+	clock: "clock.svg",
+	closeCircleFilled: "close-circle-filled.svg",
 	close: "close.svg",
+	connectCar: "connect-car.svg",
 	contactMail: "contact-mail.svg",
 	contactPhone: "contact-phone.svg",
 	contextualPaperclip: "contextual-paperclip.svg",
 	contextualQuestion: "contextual-question.svg",
 	contextualWarningCircleFilled: "contextual-warning-circle-filled.svg",
 	contextualWarningCircle: "contextual-warning-circle.svg",
+	convertible: "convertible.svg",
+	copy: "copy.svg",
+	coupe: "coupe.svg",
+	creditCardAdd: "credit-card-add.svg",
+	creditCardError: "credit-card-error.svg",
 	creditCard: "credit-card.svg",
+	cruiseControl: "cruise-control.svg",
+	dashcam: "dashcam.svg",
 	directions: "directions.svg",
 	document: "document.svg",
+	dotHorizontal: "dot-horizontal.svg",
+	dotVertical: "dot-vertical.svg",
 	dotsHorizontal: "dots-horizontal.svg",
 	dotsVertical: "dots-vertical.svg",
 	download: "download.svg",
+	earning: "earning.svg",
 	earth: "earth.svg",
 	edit: "edit.svg",
+	electric: "electric.svg",
+	evBattery: "ev-battery.svg",
 	externalLink: "external-link.svg",
+	eyeClosed: "eye-closed.svg",
+	eyeOpened: "eye-opened.svg",
 	eye: "eye.svg",
+	faceRecognition: "face-recognition.svg",
+	facebook: "facebook.svg",
+	family: "family.svg",
+	fileFilled: "file-filled.svg",
+	filter: "filter.svg",
 	filters: "filters.svg",
 	flag: "flag.svg",
+	fourByFour: "four-by-four.svg",
+	fuelTank: "fuel-tank.svg",
 	geolocation: "geolocation.svg",
+	gift: "gift.svg",
+	gps: "gps.svg",
 	graphUp: "graph-up.svg",
+	healing: "healing.svg",
+	heart: "heart.svg",
+	hitch: "hitch.svg",
+	home: "home.svg",
+	idCard: "id-card.svg",
 	incident: "incident.svg",
+	infoCircleFilled: "info-circle-filled.svg",
+	infoCircle: "info-circle.svg",
 	infoFilled: "info-filled.svg",
 	info: "info.svg",
 	instant: "instant.svg",
+	invoice: "invoice.svg",
+	keyConnect: "key-connect.svg",
 	key: "key.svg",
+	licenceCheck: "licence-check.svg",
+	licencePaper: "licence-paper.svg",
+	licence: "licence.svg",
+	lifeBuoy: "life-buoy.svg",
+	linkedin: "linkedin.svg",
 	loading: "loading.svg",
 	locality: "locality.svg",
 	locationMap: "location-map.svg",
 	locationParking: "location-parking.svg",
 	locationPin: "location-pin.svg",
+	location: "location.svg",
+	lockCheck: "lock-check.svg",
+	locked: "locked.svg",
+	login: "login.svg",
 	logout: "logout.svg",
+	mailCheck: "mail-check.svg",
+	mail: "mail.svg",
+	mapAlt: "map-alt.svg",
 	map: "map.svg",
 	meetDriver: "meet-driver.svg",
 	meetOwner: "meet-owner.svg",
 	menuList: "menu-list.svg",
+	messages: "messages.svg",
 	mileage: "mileage.svg",
+	minibus: "minibus.svg",
+	minusCircleFilled: "minus-circle-filled.svg",
+	minus: "minus.svg",
 	miscGift: "misc-gift.svg",
+	nearbyDevice: "nearby-device.svg",
 	notification: "notification.svg",
+	number1Circle: "number-1-circle.svg",
+	number2Circle: "number-2-circle.svg",
+	number3Circle: "number-3-circle.svg",
+	number4Circle: "number-4-circle.svg",
+	number5Circle: "number-5-circle.svg",
+	okHand: "ok-hand.svg",
 	optionAirConditioning: "option-air-conditioning.svg",
 	optionAndroidAuto: "option-android-auto.svg",
 	optionAppleCarplay: "option-apple-carplay.svg",
@@ -88,15 +183,40 @@ const icons = {
 	optionSkiRack: "option-ski-rack.svg",
 	optionSnowTire: "option-snow-tire.svg",
 	optionWheelchairAccessible: "option-wheelchair-accessible.svg",
+	paperclip: "paperclip.svg",
+	parking: "parking.svg",
+	passport: "passport.svg",
+	payments: "payments.svg",
+	pencil: "pencil.svg",
 	peopleUser: "people-user.svg",
+	performance: "performance.svg",
+	phone: "phone.svg",
 	photos: "photos.svg",
+	pig: "pig.svg",
+	pin: "pin.svg",
 	plug: "plug.svg",
+	plusCircleFilled: "plus-circle-filled.svg",
 	plus: "plus.svg",
+	position: "position.svg",
+	pricingFlat: "pricing-flat.svg",
+	pricingVariable: "pricing-variable.svg",
+	profilePicture: "profile-picture.svg",
+	questionCircleFilled: "question-circle-filled.svg",
+	questionCircle: "question-circle.svg",
+	question: "question.svg",
 	raceFlag: "race-flag.svg",
 	refresh: "refresh.svg",
+	reorder: "reorder.svg",
+	replacementCar: "replacement-car.svg",
+	reply: "reply.svg",
 	reset: "reset.svg",
 	ride: "ride.svg",
+	roofBox: "roof-box.svg",
+	sealCheck: "seal-check.svg",
+	searchCar: "search-car.svg",
+	searchPeople: "search-people.svg",
 	search: "search.svg",
+	sedan: "sedan.svg",
 	serviceBattery: "service-battery.svg",
 	serviceCleaning: "service-cleaning.svg",
 	serviceFuel: "service-fuel.svg",
@@ -105,24 +225,61 @@ const icons = {
 	serviceTolls: "service-tolls.svg",
 	serviceUnlocked: "service-unlocked.svg",
 	settings: "settings.svg",
+	shareAndroid: "share-android.svg",
+	shareIos: "share-ios.svg",
 	share: "share.svg",
+	shieldCheck: "shield-check.svg",
+	shield: "shield.svg",
 	shop: "shop.svg",
+	skiRack: "ski-rack.svg",
+	slider: "slider.svg",
+	smartphone: "smartphone.svg",
+	snowTire: "snow-tire.svg",
 	socialFacebook: "social-facebook.svg",
 	socialLinkedin: "social-linkedin.svg",
 	socialTwitter: "social-twitter.svg",
 	socialWhatsapp: "social-whatsapp.svg",
+	starHalf: "star-half.svg",
 	star: "star.svg",
+	stars: "stars.svg",
 	subway: "subway.svg",
+	suitcase: "suitcase.svg",
+	support: "support.svg",
 	suv: "suv.svg",
+	synch: "synch.svg",
+	tag: "tag.svg",
 	timeAlert: "time-alert.svg",
 	timeBackwards: "time-backwards.svg",
 	timeCalendar: "time-calendar.svg",
 	timeForward: "time-forward.svg",
+	tolls: "tolls.svg",
+	trailer: "trailer.svg",
 	train: "train.svg",
+	triangleDown: "triangle-down.svg",
+	triangleRight: "triangle-right.svg",
+	triangleUp: "triangle-up.svg",
+	twitter: "twitter.svg",
+	twoPeople: "two-people.svg",
+	unfold: "unfold.svg",
+	unlocked: "unlocked.svg",
+	userCheck: "user-check.svg",
+	userQuestion: "user-question.svg",
 	userShield: "user-shield.svg",
+	userSwitch: "user-switch.svg",
+	user: "user.svg",
+	utilityVanLarge: "utility-van-large.svg",
+	utilityVanMedium: "utility-van-medium.svg",
+	utilityVanSmall: "utility-van-small.svg",
 	verifiedSeal: "verified-seal.svg",
+	walk: "walk.svg",
 	wallet: "wallet.svg",
-	wrench: "wrench.svg"
+	warningCircleFilled: "warning-circle-filled.svg",
+	warningCircle: "warning-circle.svg",
+	whatsapp: "whatsapp.svg",
+	wheel: "wheel.svg",
+	wheelchair: "wheelchair.svg",
+	wrench: "wrench.svg",
+	yingyang: "yingyang.svg"
 };
 var _icons = {
 	icons: icons

package/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}