@mrshmllw/smores-react 9.10.0-crumbs-add-size-to-BadgeList.1 → 9.10.0-crumbs-improve-BadgeList-and-Badge.1

package/dist/Badge/Badge.d.ts

@@ -6,10 +6,10 @@ export declare enum BadgeSize {
     Lg = "40px"
 }
 export type BadgeProps = {
+    src: string | JSX.Element;
     borderColour?: Color;
     size?: BadgeSize;
-    src: string;
     disabled?: boolean;
     zIndex?: number;
 };
-export declare function Badge({ borderColour, size, src, disabled, zIndex }: BadgeProps): React.JSX.Element;
+export declare function Badge<T extends BadgeProps>({ borderColour, size, src, disabled, zIndex, }: BadgeProps): React.JSX.Element;

package/dist/Badge/Badge.js

@@ -8,12 +8,16 @@ export var BadgeSize;
     BadgeSize["Lg"] = "40px";
 })(BadgeSize || (BadgeSize = {}));
 // TODO: add box-shadow transition
-export function Badge({ borderColour = "lollipop", size = BadgeSize.Lg, src, disabled, zIndex }) {
-    return React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex });
+// TODO: add fallback image when image doesn't load - use a marshal?
+export function Badge({ borderColour = 'lollipop', size = BadgeSize.Lg, src, disabled, zIndex, }) {
+    if (typeof src === 'string') {
+        return (React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$src": src, "$disabled": disabled, "$zIndex": zIndex }));
+    }
+    return (React.createElement(Container, { "$borderColour": theme.colors[borderColour], "$size": size, "$disabled": disabled, "$zIndex": zIndex, "$src": null }, src));
 }
 const Container = styled.div((props) => {
     return css `
-    background-image: url(${props.$src});
+    background-image: ${props.$src ? `url(${props.$src})` : 'none'};
     background-position: center;
     background-size: cover;
     height: ${props.$size};
@@ -21,17 +25,17 @@ const Container = styled.div((props) => {
     border-radius: 50%;
     overflow: hidden;
     transition: box-shadow 0.2s ease-in-out;
-    outline: 2px solid ${props.$borderColour};
-    width: ${props.$size};
-    filter: ${props.$disabled ? "contrast(0.5)" : "none"};
+    border: 2px solid ${props.$borderColour};
+    filter: ${props.$disabled ? 'contrast(0.5)' : 'none'};
     z-index: ${props.$zIndex || 0};
 
     ${!props.$disabled &&
         css `
-        &:hover {
-            cursor: pointer;
-            box-shadow: 0 0 0px 5px #f0f0f0;
-        }`}
-`;
+      &:hover {
+        cursor: pointer;
+        box-shadow: 0 0 0px 5px #f0f0f0;
+      }
+    `}
+  `;
 });
 //# sourceMappingURL=Badge.js.map

package/dist/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAE7C,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACjB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,wBAAW,CAAA;AACf,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAUD,kCAAkC;AAClC,MAAM,UAAU,KAAK,CAAC,EAClB,YAAY,GAAG,UAAU,EACzB,IAAI,GAAG,SAAS,CAAC,EAAE,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACG;IAET,OAAO,oBAAC,SAAS,qBACE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,WAClC,IAAI,UACL,GAAG,eACE,QAAQ,aACV,MAAM,GACjB,CAAA;AACN,CAAC;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;4BACc,KAAK,CAAC,IAAI;;;cAGxB,KAAK,CAAC,KAAK;aACZ,KAAK,CAAC,KAAK;;;;yBAIC,KAAK,CAAC,aAAa;aAC/B,KAAK,CAAC,KAAK;cACV,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;eACzC,KAAK,CAAC,OAAO,IAAI,CAAC;;MAE3B,CAAC,KAAK,CAAC,SAAS;QACd,GAAG,CAAA;;;;UAID;CACT,CAAA;AACD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAA;AAE5C,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,wBAAW,CAAA;AACb,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAUD,kCAAkC;AAClC,oEAAoE;AACpE,MAAM,UAAU,KAAK,CAAuB,EAC1C,YAAY,GAAG,UAAU,EACzB,IAAI,GAAG,SAAS,CAAC,EAAE,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,GACK;IACX,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,oBAAC,SAAS,qBACO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,WAClC,IAAI,UACL,GAAG,eACE,QAAQ,aACV,MAAM,GACf,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,qBACO,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,WAClC,IAAI,eACA,QAAQ,aACV,MAAM,UACT,IAAI,IAET,GAAG,CACM,CACb,CAAA;AACH,CAAC;AAUD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM;;;cAGpD,KAAK,CAAC,KAAK;aACZ,KAAK,CAAC,KAAK;;;;wBAIA,KAAK,CAAC,aAAa;cAC7B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;eACzC,KAAK,CAAC,OAAO,IAAI,CAAC;;MAE3B,CAAC,KAAK,CAAC,SAAS;QAClB,GAAG,CAAA;;;;;KAKF;GACF,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/BadgeList/BadgeList.d.ts

@@ -9,9 +9,10 @@ export type BadgeListBadge = BadgeProps & {
 };
 type Props = {
     size?: BadgeProps['size'];
+    limit?: number;
     badges: Omit<BadgeListBadge, 'zIndex'>[];
 };
-export declare function BadgeList({ badges }: Props): React.JSX.Element;
+export declare function BadgeList({ badges, limit, size }: Props): React.JSX.Element;
 type WithTooltipProps = {
     badge: BadgeListBadge;
 };

package/dist/BadgeList/BadgeList.js

@@ -3,28 +3,49 @@ import { Badge } from '../Badge/Badge';
 import { Box } from '../Box';
 import styled from 'styled-components';
 import { Tooltip } from '../Tooltip';
-export function BadgeList({ badges }) {
+import { Text } from '../Text';
+import { theme } from '../theme';
+export function BadgeList({ badges, limit, size }) {
     const badgeZIndexMax = badges.length * 10 + 10;
-    return (React.createElement(Container, { flex: true }, badges.map((badge, index) => (React.createElement(WithTooltip, { key: badge.src, badge: { ...badge, zIndex: badgeZIndexMax - index * 10 } })))));
+    const limitExcess = 
+    // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️
+    limit && (badges.length + 1 > limit ? badges.length - limit + 1 : 0);
+    return (React.createElement(Container, { flex: true },
+        badges.slice(0, limit ? limit - 1 : undefined).map((badge, index) => (React.createElement(WithTooltip, { key: typeof badge.src === 'string' ? badge.src : index, badge: { ...badge, zIndex: badgeZIndexMax - index * 10, size } }))),
+        limitExcess !== undefined && Boolean(limitExcess) && (React.createElement(Badge, { borderColour: "oatmeal", size: size, src: React.createElement(ExcessBadge, { excess: limitExcess }), zIndex: badgeZIndexMax, disabled: true }))));
 }
+function ExcessBadge({ excess }) {
+    return (React.createElement(ExcessBadgeContainer, null,
+        React.createElement(Text, { typo: "caption", style: { fontWeight: 'bold' } },
+            "+",
+            excess)));
+}
+const ExcessBadgeContainer = styled.div `
+  display: flex;
+  align-items: center;
+  place-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.colors.oatmeal};
+  pointer-events: none;
+`;
 const WithTooltip = ({ badge: { tooltip, ...badge } }) => {
     if (tooltip) {
         return (React.createElement("div", { style: { zIndex: badge.zIndex } },
             React.createElement(Tooltip, { position: tooltip.position ?? 'bottom', title: tooltip?.title, content: tooltip.content },
-                React.createElement(Badge, { key: badge.src, ...badge }))));
+                React.createElement(Badge, { ...badge }))));
     }
-    return React.createElement(Badge, { key: badge.src, ...badge });
+    return React.createElement(Badge, { ...badge });
 };
 const Container = styled(Box) `
   & > * {
-    transition: margin-right 0.2s ease-in-out;
-    margin-right: -10px;
+    transition: margin 0.2s ease-in-out;
+    margin-right: -15px;
   }
 
-  &:hover {
-    & > * {
-      margin-right: 5px;
-    }
+  & > *:hover:not(:first-child) {
+    margin-left: 10px;
+    margin-right: 0px;
   }
 `;
 //# sourceMappingURL=BadgeList.js.map

package/dist/BadgeList/BadgeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAmB,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAcpC,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAS;IACzC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAA;IAE9C,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI,UACZ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,oBAAC,WAAW,IACV,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,cAAc,GAAG,KAAK,GAAG,EAAE,EAAE,GACxD,CACH,CAAC,CACQ,CACb,CAAA;AACH,CAAC;AAMD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAoB,EAAE,EAAE;IACzE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE;YAClC,oBAAC,OAAO,IACN,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,QAAQ,EACtC,KAAK,EAAE,OAAO,EAAE,KAAK,EACrB,OAAO,EAAE,OAAO,CAAC,OAAO;gBAExB,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,KAAM,KAAK,GAAI,CAC5B,CACN,CACP,CAAA;IACH,CAAC;IAED,OAAO,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,KAAM,KAAK,GAAI,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAW5B,CAAA"}
+{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAmB,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAS;IACtD,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAA;IAC9C,MAAM,WAAW;IACf,yFAAyF;IACzF,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAEtE,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI;QAEZ,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACpE,oBAAC,WAAW,IACV,GAAG,EAAE,OAAO,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACtD,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,cAAc,GAAG,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,GAC9D,CACH,CAAC;QAED,WAAW,KAAK,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC,IAAI,CACpD,oBAAC,KAAK,IACJ,YAAY,EAAC,SAAS,EACtB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,oBAAC,WAAW,IAAC,MAAM,EAAE,WAAW,GAAI,EACzC,MAAM,EAAE,cAAc,EACtB,QAAQ,SACR,CACH,CACS,CACb,CAAA;AACH,CAAC;AAMD,SAAS,WAAW,CAAC,EAAE,MAAM,EAAoB;IAC/C,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE;;YAC9C,MAAM,CACH,CACc,CACxB,CAAA;AACH,CAAC;AAED,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;sBAMjB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAEzC,CAAA;AAMD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAoB,EAAE,EAAE;IACzE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE;YAClC,oBAAC,OAAO,IACN,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,QAAQ,EACtC,KAAK,EAAE,OAAO,EAAE,KAAK,EACrB,OAAO,EAAE,OAAO,CAAC,OAAO;gBAExB,oBAAC,KAAK,OAAK,KAAK,GAAI,CACZ,CACN,CACP,CAAA;IACH,CAAC;IAED,OAAO,oBAAC,KAAK,OAAK,KAAK,GAAI,CAAA;AAC7B,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;CAU5B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "9.10.0-crumbs-add-size-to-BadgeList.1",
+  "version": "9.10.0-crumbs-improve-BadgeList-and-Badge.1",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [