@drivy/cobalt 0.12.0 → 0.14.0

package/index.js

@@ -20,6 +20,7 @@ export { BUNDLED_ICONS, Icon, IconColorsOptions, isIconSource } from './componen
 export { default as Modal } from './components/Modal/index.js';
 export { default as ModalOpenerButton } from './components/ModalOpenerButton/index.js';
 export { Note } from './components/Note/index.js';
+export { default as PhotoDropzone } from './components/PhotoDropzone/index.js';
 export { Pill, PillGroup } from './components/Pill/index.js';
 export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
@@ -30,6 +31,7 @@ export { Chip } from './components/Chip/index.js';
 export { Autocomplete } from './components/Form/Autocomplete/index.js';
 export { Checkbox, ChoiceList, Radio } from './components/Form/Checkmark.js';
 export { CheckablePillsGroup, CheckboxPill, RadioPill } from './components/Form/CheckablePill.js';
+export { default as RadioWithDetails } from './components/Form/RadioWithDetails.js';
 export { ComposedField } from './components/Form/ComposedField.js';
 export { withFieldLabelAndHint } from './components/Form/field.js';
 export { Fieldset } from './components/Form/Fieldset.js';
@@ -56,6 +58,7 @@ export { default as CarDrivyOpenIcon } from './components/Icon/__generated__/Car
 export { default as CarGroupIcon } from './components/Icon/__generated__/CarGroupIcon.js';
 export { default as CarIcon } from './components/Icon/__generated__/CarIcon.js';
 export { default as CarLockIcon } from './components/Icon/__generated__/CarLockIcon.js';
+export { default as CarReturnIcon } from './components/Icon/__generated__/CarReturnIcon.js';
 export { default as CarSearchIcon } from './components/Icon/__generated__/CarSearchIcon.js';
 export { default as CarTypeAntiqueIcon } from './components/Icon/__generated__/CarTypeAntiqueIcon.js';
 export { default as CarTypeCabrioletIcon } from './components/Icon/__generated__/CarTypeCabrioletIcon.js';
@@ -104,6 +107,7 @@ export { default as LocationMapIcon } from './components/Icon/__generated__/Loca
 export { default as LocationParkingIcon } from './components/Icon/__generated__/LocationParkingIcon.js';
 export { default as LocationPinIcon } from './components/Icon/__generated__/LocationPinIcon.js';
 export { default as LogoutIcon } from './components/Icon/__generated__/LogoutIcon.js';
+export { default as MapIcon } from './components/Icon/__generated__/MapIcon.js';
 export { default as MeetDriverIcon } from './components/Icon/__generated__/MeetDriverIcon.js';
 export { default as MeetOwnerIcon } from './components/Icon/__generated__/MeetOwnerIcon.js';
 export { default as MenuListIcon } from './components/Icon/__generated__/MenuListIcon.js';
@@ -127,6 +131,8 @@ export { default as OptionWheelchairAccessibleIcon } from './components/Icon/__g
 export { default as PeopleUserIcon } from './components/Icon/__generated__/PeopleUserIcon.js';
 export { default as PhotosIcon } from './components/Icon/__generated__/PhotosIcon.js';
 export { default as PlugIcon } from './components/Icon/__generated__/PlugIcon.js';
+export { default as PlusIcon } from './components/Icon/__generated__/PlusIcon.js';
+export { default as RaceFlagIcon } from './components/Icon/__generated__/RaceFlagIcon.js';
 export { default as RefreshIcon } from './components/Icon/__generated__/RefreshIcon.js';
 export { default as ResetIcon } from './components/Icon/__generated__/ResetIcon.js';
 export { default as RideIcon } from './components/Icon/__generated__/RideIcon.js';

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -17,76 +17,78 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "3.3.1",
-    "@reach/accordion": "0.15.3",
-    "@reach/alert": "0.15.3",
-    "@reach/combobox": "0.15.3",
-    "@reach/dialog": "0.15.3",
-    "@reach/portal": "0.15.3",
-    "@reach/slider": "0.15.3",
-    "@reach/tabs": "0.15.3",
-    "@reach/visually-hidden": "0.15.2",
-    "@react-spring/web": "9.2.3",
-    "@tippyjs/react": "4.2.5",
+    "@reach/accordion": "0.16.1",
+    "@reach/alert": "0.16.0",
+    "@reach/combobox": "0.16.5",
+    "@reach/dialog": "0.16.2",
+    "@reach/portal": "0.16.2",
+    "@reach/slider": "0.16.0",
+    "@reach/tabs": "0.16.4",
+    "@reach/visually-hidden": "0.16.0",
+    "@react-spring/web": "9.3.0",
+    "@tippyjs/react": "4.2.6",
     "classnames": "2.3.1",
-    "date-fns": "1.30.1",
+    "date-fns": "2.27.0",
     "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.23",
-    "postcss": "8.3.5",
-    "tailwindcss": "2.2.4",
-    "tippy.js": "6.3.1"
+    "media-typer": "1.1.0",
+    "nanoid": "3.1.30",
+    "postcss": "8.4.5",
+    "tailwindcss": "2.2.19",
+    "tippy.js": "6.3.7"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@drivy/babel-preset-app": "0.4.4",
-    "@drivy/eslint-config": "1.5.3",
+    "@drivy/babel-preset-app": "0.4.8",
+    "@drivy/eslint-config": "1.6.1",
     "@drivy/prettier-config": "1.1.3",
-    "@drivy/stylelint-config": "1.0.13",
+    "@drivy/stylelint-config": "1.1.0",
     "@drivy/ts-config": "1.1.3",
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "4.1.0",
-    "@rushstack/eslint-patch": "1.0.6",
-    "@storybook/addon-essentials": "6.3.4",
-    "@storybook/addons": "6.3.4",
-    "@storybook/builder-webpack5": "^6.4.0-alpha.15",
-    "@storybook/manager-webpack5": "^6.4.0-alpha.15",
-    "@storybook/react": "6.3.4",
+    "@rushstack/eslint-patch": "1.1.0",
+    "@storybook/addon-essentials": "6.3.8",
+    "@storybook/addons": "6.3.8",
+    "@storybook/builder-webpack5": "6.4.0-alpha.33",
+    "@storybook/manager-webpack5": "6.4.0-alpha.33",
+    "@storybook/react": "6.3.8",
     "@svgr/cli": "5.5.0",
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "12.0.0",
-    "@testing-library/react-hooks": "7.0.1",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "7.0.2",
     "@types/classnames": "2.3.0",
-    "@types/jest": "26.0.24",
+    "@types/jest": "27.0.3",
     "@types/lodash.throttle": "4.1.6",
-    "@types/react": "17.0.14",
-    "autoprefixer": "10.3.1",
-    "core-js": "3.15.2",
-    "css-loader": "5.2.6",
-    "eslint": "7.30.0",
-    "jest": "27.0.6",
-    "np": "7.5.0",
+    "@types/media-typer": "1.1.1",
+    "@types/react": "17.0.38",
+    "autoprefixer": "10.4.0",
+    "core-js": "3.20.1",
+    "css-loader": "6.5.1",
+    "eslint": "8.5.0",
+    "jest": "27.4.5",
+    "np": "7.6.0",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "6.1.1",
-    "prettier": "2.3.2",
+    "postcss-loader": "6.2.0",
+    "prettier": "2.5.1",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "regenerator-runtime": "0.13.7",
-    "rollup": "2.53.1",
+    "regenerator-runtime": "0.13.9",
+    "rollup": "2.61.1",
     "rollup-plugin-copy": "3.4.0",
-    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
-    "rollup-plugin-typescript2": "0.30.0",
-    "sass": "1.35.2",
-    "sass-loader": "12.1.0",
-    "style-loader": "3.1.0",
+    "rollup-plugin-typescript2": "0.31.1",
+    "sass": "1.43.4",
+    "sass-loader": "12.3.0",
+    "style-loader": "3.3.1",
     "stylelint": "13.13.1",
-    "svgo": "2.3.1",
-    "ts-jest": "27.0.3",
-    "typescript": "4.3.5"
+    "svgo": "2.8.0",
+    "ts-jest": "27.0.7",
+    "typescript": "4.5.4"
   },
   "scripts": {
     "build": "./scripts/build.sh",
@@ -130,6 +132,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.14"
+    "@types/react": "17.0.38"
   }
 }

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -68,7 +68,7 @@
 
     text-align: center;
     font-weight: 600;
-    text-transform: lowercase;
+    text-transform: capitalize;
   }
 
   &__month-header.cobalt-text-titleSmall {
@@ -95,6 +95,7 @@
     flex: 1;
 
     text-align: center;
+    text-transform: capitalize;
     color: color(grey, dark);
     font-weight: 400;
     font-size: 14px;

package/styles/components/Form/RadioWithDetails.scss

@@ -0,0 +1,143 @@
+@import "./form";
+
+.cobalt-radio-with-details {
+  $self: &;
+
+  display: inline-block;
+  flex-grow: 1;
+
+  --visual-radio-size: 18px;
+  --visual-radio-color: #{color(indigo)};
+
+  .cobalt-radio-with-details__inner {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: spacing(sm);
+    border: border(grey);
+    border-color: color(grey, dark);
+
+    color: color(indigo);
+
+    background-color: color(white);
+    cursor: pointer;
+    border-radius: border-radius(lg);
+
+    transition: all 120ms ease-in-out;
+  }
+
+  .cobalt-radio-with-details__icon {
+    flex-shrink: 0;
+    margin: 0;
+    margin-right: spacing(xs);
+  }
+
+  .cobalt-radio-with-details__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex-grow: 1;
+  }
+
+  .cobalt-radio-with-details__title {
+    @include text-style-section-header;
+    color: color(indigo);
+
+    transition: color 150ms ease-in-out;
+  }
+
+  .cobalt-radio-with-details__description {
+    color: color(grey, dark);
+
+    transition: color 150ms ease-in-out;
+  }
+
+  .cobalt-radio-with-details__input {
+    // Visually hidden (source: https://github.com/reach/reach-ui/blob/main/packages/visually-hidden/src/index.tsx)
+    position: absolute;
+
+    border: 0;
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    clip: rect(0 0 0 0);
+
+    // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+    whitespace: nowrap;
+    wordwrap: normal;
+
+    & + #{ $self }__inner #{ $self }__visual-input {
+      position: relative;
+      top: 3px;
+
+      flex: 0 0 auto;
+      width: var(--visual-radio-size);
+      height: var(--visual-radio-size);
+      border: 2px solid var(--visual-radio-color);
+
+      border-radius: 50%;
+
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+      cursor: pointer;
+
+      transition: border-color 150ms ease-in-out;
+    }
+
+    &:focus-visible + #{ $self }__inner {
+      outline: color(blue) 1px solid;
+      box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
+    }
+
+    &:checked + #{ $self }__inner {
+      border-color: var(--visual-radio-color);
+
+      color: color(white);
+
+      background-color: var(--visual-radio-color);
+    }
+
+    &:checked + #{ $self }__inner #{ $self }__visual-input {
+      border-color: color(white);
+    }
+
+    &:checked + #{ $self }__inner #{ $self }__title,
+    &:checked + #{ $self }__inner #{ $self }__description {
+      color: color(white);
+    }
+
+    & + #{ $self }__inner #{ $self }__visual-input::after {
+      position: absolute;
+      left: 2px;
+      top: 2px;
+
+      border: 5px solid var(--visual-radio-color);
+
+      border-radius: 50%;
+      content: "";
+      opacity: 0;
+      background-color: var(--visual-radio-color);
+
+      transition: transform 120ms ease-in-out;
+      transform: scale(0.4);
+      will-change: transform;
+    }
+
+    &:checked + #{ $self }__inner #{ $self }__visual-input::after {
+      border-color: color(white);
+
+      opacity: 1;
+
+      transform: scale(1);
+    }
+
+    &[disabled] + #{ $self }__inner {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+  }
+}

package/styles/components/Form/index.scss

@@ -9,5 +9,6 @@
 @import "./ToggleSwitch";
 @import "./Stepper";
 @import "./CheckablePill";
+@import "./RadioWithDetails";
 @import "./Slider";
 @import "./Autocomplete/index";

package/styles/components/Modal/index.scss

@@ -13,6 +13,8 @@ $reach-ui-dialog-margin-top: 10vh;
     overflow: hidden;
 
     background-color: fade-out(black, 0.2);
+
+    will-change: opacity;
   }
 
   &[data-reach-dialog-content] {

package/styles/components/PhotoDropzone/index.scss

@@ -0,0 +1,112 @@
+.cobalt-photo-dropzone {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  min-height: 14rem;
+  border: border(purple, default, dashed);
+
+  text-align: center;
+
+  border-radius: border-radius(xl);
+  cursor: pointer;
+  background-color: color(grey, lighter);
+
+  transition: background-color 0.25s;
+}
+
+.cobalt-photo-dropzone--filled {
+  border-color: transparent;
+}
+
+.cobalt-photo-dropzone:hover,
+.cobalt-photo-dropzone:focus {
+  .cobalt-photo-dropzone__description {
+    transform: scale(1.05);
+    transition: transform 0.25s;
+  }
+}
+
+.cobalt-photo-dropzone--dragging {
+  background-color: #f6e5f5;
+
+  transition: background-color 0.25s;
+
+  .cobalt-photo-dropzone__description {
+    transform: scale(1.05);
+    transition: transform 0.25s;
+  }
+}
+
+.cobalt-photo-dropzone--loading {
+  border-color: color(grey, light);
+  border-style: solid;
+
+  color: color(indigo, dark);
+
+  cursor: default;
+  background-color: color(grey, light);
+}
+
+.cobalt-photo-dropzone--errored {
+  border-color: color(red);
+  border-style: solid;
+
+  background-color: color(grey, light);
+}
+
+.cobalt-photo-dropzone__description {
+  max-width: 80%;
+
+  transform: scale(1);
+  transition: transform 0.25s;
+}
+
+.cobalt-photo-dropzone__description--strong {
+  color: color(purple);
+  font-weight: 700;
+}
+
+.cobalt-photo-dropzone__preview {
+  width: 100%;
+  height: 100%;
+
+  border-radius: border-radius();
+  object-fit: cover;
+}
+
+.cobalt-photo-dropzone__delete-button {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+
+  width: 3rem;
+  height: 3rem;
+
+  border: 0;
+
+  border-radius: border-radius(full);
+  background: color(white);
+  cursor: pointer;
+  opacity: 0;
+
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+.cobalt-photo-dropzone__delete-button--triggered {
+  opacity: 1;
+
+  animation: pop 0.3s ease 1;
+  transition: opacity 0.5s ease;
+  pointer-events: initial;
+}
+
+@keyframes pop {
+  50% {
+    transform: scale(1.1);
+  }
+}

package/styles/components.scss

@@ -14,6 +14,7 @@
 @import "./components/Flash/index";
 @import "./components/Icon/index";
 @import "./components/Note/index";
+@import "./components/PhotoDropzone/index";
 @import "./components/Pill/index";
 @import "./components/PriceTable/index";
 @import "./components/ProgressBar/index";

package/styles/core/border-radius.scss

@@ -6,6 +6,7 @@ $border-radius-data: (
   md: .375rem,
   lg: .5rem,
   xl: .75rem,
+  "2xl": 1rem,
   full: 9999px
 );
 

package/tokens/breakpoints.js

@@ -9,6 +9,5 @@ var _breakpoints = {
 	lg: lg
 };
 
-export default _breakpoints;
-export { lg, md, sm, xs };
+export { _breakpoints as default, lg, md, sm, xs };
 //# sourceMappingURL=breakpoints.js.map

package/tokens/breakpoints.js.map

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

package/tokens/colors.js

@@ -41,6 +41,5 @@ var _colors = {
 	blue: blue
 };
 
-export default _colors;
-export { amber, blue, coral, graphite, green, grey, indigo, purple, red, turquoise, white };
+export { amber, blue, coral, _colors as default, graphite, green, grey, indigo, purple, red, turquoise, white };
 //# sourceMappingURL=colors.js.map

package/tokens/colors.js.map

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

package/tokens/countries.js

@@ -14,6 +14,5 @@ var _countries = {
 	flags: flags
 };
 
-export default _countries;
-export { flags };
+export { _countries as default, flags };
 //# sourceMappingURL=countries.js.map

package/tokens/countries.js.map

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

package/tokens/icons.js

@@ -10,6 +10,7 @@ const icons = {
 	carDrivyOpen: "car-drivy-open.svg",
 	carGroup: "car-group.svg",
 	carLock: "car-lock.svg",
+	carReturn: "car-return.svg",
 	carSearch: "car-search.svg",
 	carTypeAntique: "car-type-antique.svg",
 	carTypeCabriolet: "car-type-cabriolet.svg",
@@ -60,6 +61,7 @@ const icons = {
 	locationParking: "location-parking.svg",
 	locationPin: "location-pin.svg",
 	logout: "logout.svg",
+	map: "map.svg",
 	meetDriver: "meet-driver.svg",
 	meetOwner: "meet-owner.svg",
 	menuList: "menu-list.svg",
@@ -83,6 +85,8 @@ const icons = {
 	peopleUser: "people-user.svg",
 	photos: "photos.svg",
 	plug: "plug.svg",
+	plus: "plus.svg",
+	raceFlag: "race-flag.svg",
 	refresh: "refresh.svg",
 	reset: "reset.svg",
 	ride: "ride.svg",
@@ -116,6 +120,5 @@ var _icons = {
 	icons: icons
 };
 
-export default _icons;
-export { icons };
+export { _icons as default, icons };
 //# sourceMappingURL=icons.js.map

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/tokens/zIndexes.js

@@ -27,6 +27,5 @@ var _zIndexes = {
 	"alert-above": 101
 };
 
-export default _zIndexes;
-export { above, alert, base, below, dropdown, header, modal, nav };
+export { above, alert, base, below, _zIndexes as default, dropdown, header, modal, nav };
 //# sourceMappingURL=zIndexes.js.map

package/tokens/zIndexes.js.map

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