@drivy/cobalt 0.19.0 → 0.19.1

package/components/Form/Hint.js

@@ -29,8 +29,8 @@ const getIconColor = (status) => {
         }
     }
 };
-const Hint = ({ children, status }) => {
-    return (React.createElement("div", { className: cx("cobalt-Hint", {
+const Hint = ({ children, status, className }) => {
+    return (React.createElement("div", { className: cx("cobalt-Hint", className, {
             "cobalt-Hint--success": status === "success",
             "cobalt-Hint--error": status === "error",
         }) },

package/components/Form/Hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\nimport { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"signal\"\n    }\n    case \"error\": {\n      return \"essence\"\n    }\n    default: {\n      return \"graphiteLight\"\n    }\n  }\n}\n\nexport const Hint = ({ children, status }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;AACxD,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;AACrB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;AACvC,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;AACd,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;AAC7D,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,QAAQ,CAAA;AAChB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS,CAAA;AACjB,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,eAAe,CAAA;AACvB,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAEY,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAiB,KAAI;AAC1D,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE;YACnC,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC,EAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA;YACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}
+{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\nimport { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  className?: string\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"signal\"\n    }\n    case \"error\": {\n      return \"essence\"\n    }\n    default: {\n      return \"graphiteLight\"\n    }\n  }\n}\n\nexport const Hint = ({ children, status, className }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", className, {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;AAWA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;AACxD,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;AACrB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;AACvC,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;AACd,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;AAC7D,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,QAAQ,CAAA;AAChB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS,CAAA;AACjB,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,eAAe,CAAA;AACvB,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAEM,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAiB,KAAI;IACrE,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE,SAAS,EAAE;YAC9C,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC,EAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA;YACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}

package/components/Rating/RatingCompact.js

@@ -2,12 +2,13 @@ import React from 'react';
 import cx from 'classnames';
 import { RatingIcon, defaultRatingIcon } from './RatingIcons.js';
 import RatingLabel from './RatingLabel.js';
+import { formatRatingValue } from './index.js';
 
-function RatingCompact({ className, value, count, icon = defaultRatingIcon, }) {
+function RatingCompact({ className, value, count, size = 16, icon = defaultRatingIcon, }) {
     return (React.createElement("div", { className: cx("cobalt-rating", className) },
-        React.createElement(RatingIcon, { icon: icon, size: 16, status: "full" }),
+        React.createElement(RatingIcon, { icon: icon, size: size, status: "full" }),
         React.createElement(RatingLabel, null,
-            value,
+            formatRatingValue(value),
             " ",
             count && `(${count})`)));
 }

package/components/Rating/RatingCompact.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n  count?: number\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  count,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={16} status={\"full\"} />\n      <RatingLabel>\n        {value} {count && `(${count})`}\n      </RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAiBgB,SAAA,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,iBAAiB,GACD,EAAA;IACvB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACpD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;YACT,KAAK;;AAAG,YAAA,KAAK,IAAI,CAAI,CAAA,EAAA,KAAK,GAAG,CAClB,CACV,EACP;AACH;;;;"}
+{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\nimport { formatRatingValue } from \".\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n  count?: number\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  count,\n  size = 16,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={size} status={\"full\"} />\n      <RatingLabel>\n        {formatRatingValue(value)} {count && `(${count})`}\n      </RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;SAkBgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,iBAAiB,GACD,EAAA;IACvB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;YACT,iBAAiB,CAAC,KAAK,CAAC;;AAAG,YAAA,KAAK,IAAI,CAAI,CAAA,EAAA,KAAK,GAAG,CACrC,CACV,EACP;AACH;;;;"}

package/components/Rating/index.js

@@ -3,11 +3,14 @@ import React from 'react';
 import { RatingIcons } from './RatingIcons.js';
 export { RatingIcons } from './RatingIcons.js';
 
+function formatRatingValue(value) {
+    return `${value}`.includes(".") ? value : value.toFixed(1);
+}
 function Rating({ className, iconsClassName, children, ...iconsProps }) {
     return (React.createElement("div", { className: cx("cobalt-rating", className) },
         React.createElement(RatingIcons, { className: iconsClassName, ...iconsProps }),
         children));
 }
 
-export { Rating };
+export { Rating, formatRatingValue };
 //# sourceMappingURL=index.js.map

package/components/Rating/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Rating/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React from \"react\"\nimport { RatingIcons, RatingIconsPropsType } from \"./RatingIcons\"\nimport { RatingInput } from \"./RatingInput\"\nimport { RatingCompact } from \"./RatingCompact\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingPropsType = React.PropsWithChildren<RatingIconsPropsType> & {\n  iconsClassName?: RatingIconsPropsType[\"className\"]\n}\n\nfunction Rating({\n  className,\n  iconsClassName,\n  children,\n  ...iconsProps\n}: RatingPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcons className={iconsClassName} {...iconsProps} />\n      {children}\n    </div>\n  )\n}\n\nexport { Rating, RatingLabel, RatingInput, RatingCompact, RatingIcons }\n"],"names":[],"mappings":";;;;;AAWA,SAAS,MAAM,CAAC,EACd,SAAS,EACT,cAAc,EACd,QAAQ,EACR,GAAG,UAAU,EACG,EAAA;IAChB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,SAAS,EAAE,cAAc,EAAA,GAAM,UAAU,EAAI,CAAA;QACzD,QAAQ,CACL,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Rating/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React from \"react\"\nimport { RatingIcons, RatingIconsPropsType } from \"./RatingIcons\"\nimport { RatingInput } from \"./RatingInput\"\nimport { RatingCompact } from \"./RatingCompact\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingPropsType = React.PropsWithChildren<RatingIconsPropsType> & {\n  iconsClassName?: RatingIconsPropsType[\"className\"]\n}\n\nfunction formatRatingValue(value: number) {\n  return `${value}`.includes(\".\") ? value : value.toFixed(1)\n}\n\nfunction Rating({\n  className,\n  iconsClassName,\n  children,\n  ...iconsProps\n}: RatingPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcons className={iconsClassName} {...iconsProps} />\n      {children}\n    </div>\n  )\n}\n\nexport {\n  Rating,\n  RatingLabel,\n  RatingInput,\n  RatingCompact,\n  RatingIcons,\n  formatRatingValue,\n}\n"],"names":[],"mappings":";;;;;AAWA,SAAS,iBAAiB,CAAC,KAAa,EAAA;IACtC,OAAO,CAAA,EAAG,KAAK,CAAE,CAAA,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED,SAAS,MAAM,CAAC,EACd,SAAS,EACT,cAAc,EACd,QAAQ,EACR,GAAG,UAAU,EACG,EAAA;IAChB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,SAAS,EAAE,cAAc,EAAA,GAAM,UAAU,EAAI,CAAA;QACzD,QAAQ,CACL,EACP;AACH;;;;"}

package/index.js

@@ -32,7 +32,7 @@ export { ComposedField } from './components/Form/ComposedField.js';
 export { withFieldLabelAndHint } from './components/Form/field.js';
 export { Fieldset } from './components/Form/Fieldset.js';
 export { Hint } from './components/Form/Hint.js';
-export { Rating } from './components/Rating/index.js';
+export { Rating, formatRatingValue } from './components/Rating/index.js';
 export { Select } from './components/Form/Select.js';
 export { default as Slider, SliderValueMeta } from './components/Form/Slider.js';
 export { Stepper, StepperMeta } from './components/Form/Stepper.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { FormElementStatus } from "./form";
 export interface HintPropsType {
+    className?: string;
     children: React.ReactNode;
     status?: FormElementStatus;
 }
-export declare const Hint: ({ children, status }: HintPropsType) => JSX.Element;
+export declare const Hint: ({ children, status, className }: HintPropsType) => JSX.Element;

package/types/components/Rating/RatingCompact.d.ts

@@ -4,5 +4,5 @@ declare type RatingCompactPropsType = Pick<RatingIconsPropsType, "className" | "
     icon?: JSX.Element;
     count?: number;
 };
-export declare function RatingCompact({ className, value, count, icon, }: RatingCompactPropsType): JSX.Element;
+export declare function RatingCompact({ className, value, count, size, icon, }: RatingCompactPropsType): JSX.Element;
 export {};

package/types/components/Rating/index.d.ts

@@ -6,5 +6,6 @@ import RatingLabel from "./RatingLabel";
 declare type RatingPropsType = React.PropsWithChildren<RatingIconsPropsType> & {
     iconsClassName?: RatingIconsPropsType["className"];
 };
+declare function formatRatingValue(value: number): string | number;
 declare function Rating({ className, iconsClassName, children, ...iconsProps }: RatingPropsType): JSX.Element;
-export { Rating, RatingLabel, RatingInput, RatingCompact, RatingIcons };
+export { Rating, RatingLabel, RatingInput, RatingCompact, RatingIcons, formatRatingValue, };