@drivy/cobalt 0.37.3 → 0.37.4

package/components/Form/RadioWithDetails.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 
 const RadioWithDetails = ({ icon, title, description, className, ...inputProps }) => {
-    return (React.createElement("label", { className: cx("cobalt-radio-with-details", className) },
+    return (React.createElement("label", { className: cx("cobalt-radio-with-details", !description && "cobalt-radio-with-details--noDescription", className) },
         React.createElement("input", { ...inputProps, type: "radio", className: "cobalt-radio-with-details__input" }),
         React.createElement("div", { className: "cobalt-radio-with-details__inner" },
             icon &&

package/components/Form/RadioWithDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label className={cx(\"cobalt-radio-with-details\", className)}>\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <p className=\"cobalt-radio-with-details__title\">{title}</p>\n          {description && (\n            <p className=\"cobalt-radio-with-details__description\">\n              {description}\n            </p>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACa,KAAI;IAC9B,QACE,+BAAO,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAA;QAC1D,KACM,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAC5C,CAAA;QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;YAC9C,IAAI;AACH,gBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,oBAAA,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,EAAA,EAAE,KAAK,CAAK;gBAC1D,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,wCAAwC,EAClD,EAAA,WAAW,CACV,CACL,CACG;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}
+{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description?: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label\n      className={cx(\n        \"cobalt-radio-with-details\",\n        !description && \"cobalt-radio-with-details--noDescription\",\n        className\n      )}\n    >\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <p className=\"cobalt-radio-with-details__title\">{title}</p>\n          {description && (\n            <p className=\"cobalt-radio-with-details__description\">\n              {description}\n            </p>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACa,KAAI;AAC9B,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,2BAA2B,EAC3B,CAAC,WAAW,IAAI,0CAA0C,EAC1D,SAAS,CACV,EAAA;QAED,KACM,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAC5C,CAAA;QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;YAC9C,IAAI;AACH,gBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,oBAAA,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,EAAA,EAAE,KAAK,CAAK;gBAC1D,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,wCAAwC,EAClD,EAAA,WAAW,CACV,CACL,CACG;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.37.3",
+  "version": "0.37.4",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "3.4.0",
+    "@lottiefiles/react-lottie-player": "3.5.3",
     "@reach/accordion": "0.16.1",
     "@reach/alert": "0.16.0",
     "@reach/combobox": "0.16.3",

package/styles/components/Form/RadioWithDetails.scss

@@ -142,4 +142,14 @@
       cursor: not-allowed;
     }
   }
+
+  &.cobalt-radio-with-details--noDescription {
+    .cobalt-radio-with-details__inner {
+      align-items: center !important;
+
+      .cobalt-radio-with-details__visual-input {
+        top: 0 !important;
+      }
+    }
+  }
 }

package/types/components/Form/RadioWithDetails.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export type RadioWithDetailsPropsType = {
     icon?: JSX.Element;
     title: string;
-    description: string;
+    description?: string;
     name: string;
     className?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;