@toptal/picasso 16.1.0 → 16.2.0

package/List/List.js

@@ -11,21 +11,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
 import ListItem from '../ListItem';
 import styles from './styles';
 const useStyles = makeStyles(styles, { name: 'PicassoList' });
+const Tags = {
+    unordered: 'ul',
+    ordered: 'ol'
+};
 export const List = (props) => {
     const classes = useStyles();
-    const { variant, children, start = 1 } = props, rest = __rest(props, ["variant", "children", "start"]);
-    const listProps = Object.assign({ className: classes.root }, rest);
-    const listItems = React.Children.map(children, (child, index) => React.cloneElement(child, {
-        variant,
-        index: index + start - 1
-    }));
-    if (variant === 'unordered') {
-        return React.createElement("ul", Object.assign({}, listProps), listItems);
-    }
-    return React.createElement("ol", Object.assign({}, listProps), listItems);
+    const { variant, children, start = 1, className } = props, rest = __rest(props, ["variant", "children", "start", "className"]);
+    const totalChildElements = React.Children.count(children);
+    const listItems = React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+            return child;
+        }
+        return React.cloneElement(child, {
+            variant,
+            isLastElement: totalChildElements === index + 1,
+            index: index + start - 1
+        });
+    });
+    const ListTag = Tags[variant];
+    return (React.createElement(ListTag, Object.assign({ className: cx(classes.root, classes[variant], className) }, rest), listItems));
 };
 List.defaultProps = {
     variant: 'unordered',

package/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAY7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAA;AAEpE,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAY,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAjD,gCAAyC,CAAQ,CAAA;IAEvD,MAAM,SAAS,mBAAK,SAAS,EAAE,OAAO,CAAC,IAAI,IAAK,IAAI,CAAE,CAAA;IACtD,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAC9D,KAAK,CAAC,YAAY,CAAC,KAAqB,EAAE;QACxC,OAAO;QACP,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,CAAC;KACzB,CAAC,CACH,CAAA;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,OAAO,4CAAQ,SAAS,GAAG,SAAS,CAAM,CAAA;KAC3C;IAED,OAAO,4CAAQ,SAAS,GAAG,SAAS,CAAM,CAAA;AAC5C,CAAC,CAAA;AAED,IAAI,CAAC,YAAY,GAAG;IAClB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,CAAC;CACT,CAAA;AAED,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAA;AAEpB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAY7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAA;AAEpE,MAAM,IAAI,GAAG;IACX,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;CACL,CAAA;AAEV,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAY,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA5D,6CAAoD,CAAQ,CAAA;IAElE,MAAM,kBAAkB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAEzD,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC9D,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;YAChC,OAAO,KAAK,CAAA;SACb;QAED,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YAC/B,OAAO;YACP,aAAa,EAAE,kBAAkB,KAAK,KAAK,GAAG,CAAC;YAC/C,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,CAAC;SACzB,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAA;IAE7B,OAAO,CACL,oBAAC,OAAO,kBACN,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,IACpD,IAAI,GAEP,SAAS,CACF,CACX,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,YAAY,GAAG;IAClB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,CAAC;CACT,CAAA;AAED,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAA;AAEpB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}

package/List/styles.d.ts

@@ -1,2 +1,3 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root">;
+import { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "unordered">;
 export default _default;

package/List/styles.js

@@ -1,9 +1,12 @@
 import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
+export default ({ palette }) => createStyles({
     root: {
         listStyle: 'none',
         padding: 0,
         margin: 0
+    },
+    unordered: {
+        color: palette.text.primary
     }
 });
 //# sourceMappingURL=styles.js.map

package/List/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;KACV;IACD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KAC5B;CACF,CAAC,CAAA"}

package/List/utils/generateListItems.d.ts

@@ -0,0 +1,2 @@
+declare const generateListItems: (total: number, listItemProps?: any) => JSX.Element[];
+export default generateListItems;

package/List/utils/generateListItems.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import List from '../List';
+/* eslint-disable react/no-array-index-key */
+const generateListItems = (total, listItemProps) => Array(total)
+    .fill(0)
+    .map((_, index) => (React.createElement(List.Item, Object.assign({ key: index }, listItemProps), `list item N${index + 1}`)));
+export default generateListItems;
+//# sourceMappingURL=generateListItems.js.map

package/List/utils/generateListItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateListItems.js","sourceRoot":"","sources":["../../../src/List/utils/generateListItems.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,IAAI,MAAM,SAAS,CAAA;AAE1B,6CAA6C;AAC7C,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,aAAmB,EAAE,EAAE,CAC/D,KAAK,CAAC,KAAK,CAAC;KACT,IAAI,CAAC,CAAC,CAAC;KACP,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACjB,oBAAC,IAAI,CAAC,IAAI,kBAAC,GAAG,EAAE,KAAK,IAAM,aAAa,GACrC,cAAc,KAAK,GAAG,CAAC,EAAE,CAChB,CACb,CAAC,CAAA;AAEN,eAAe,iBAAiB,CAAA"}

package/List/utils/index.d.ts

@@ -0,0 +1,2 @@
+import generateListItems from './generateListItems';
+export { generateListItems };

package/List/utils/index.js

@@ -0,0 +1,3 @@
+import generateListItems from './generateListItems';
+export { generateListItems };
+//# sourceMappingURL=index.js.map

package/List/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/List/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAEnD,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/ListItem/ListItem.d.ts

@@ -7,6 +7,7 @@ export declare type Props = BaseProps & {
     index?: number;
     /** Add a custom `<Icon />` to set a custom bullet in ordered lists */
     icon?: ReactNode;
+    isLastElement?: boolean;
 };
 export declare const ListItem: {
     (props: Props): JSX.Element;

package/ListItem/ListItem.js

@@ -11,11 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
 import Container from '../Container';
 import Typography from '../Typography';
 import { Bullet16 } from '../Icon';
 import styles from './styles';
-const Index = ({ children }) => (React.createElement(Typography, { size: 'medium', align: 'center' },
+const Index = ({ children }) => (React.createElement(Typography, { size: 'medium' },
     children,
     "."));
 const getBulletOrNumber = (variant, index, icon) => {
@@ -30,11 +31,13 @@ const getBulletOrNumber = (variant, index, icon) => {
 const useStyles = makeStyles(styles, { name: 'PicassoListItem' });
 export const ListItem = (props) => {
     const classes = useStyles();
-    const { children, icon, variant = 'unordered', index = 1 } = props, rest = __rest(props, ["children", "icon", "variant", "index"]);
+    const { children, icon, variant = 'unordered', index = 1, isLastElement } = props, rest = __rest(props, ["children", "icon", "variant", "index", "isLastElement"]);
     const itemIcon = getBulletOrNumber(variant, index, icon);
     return (React.createElement("li", Object.assign({}, rest),
-        React.createElement(Container, { flex: true, direction: 'row' },
-            React.createElement(Container, { inline: true, right: 'small', justifyContent: 'flex-end', className: classes.iconContainer }, itemIcon),
+        React.createElement(Container, { flex: true, direction: 'row', className: cx(classes.listContainer, {
+                [classes.lastElement]: isLastElement
+            }) },
+            React.createElement(Container, { inline: true, right: 'small', justifyContent: 'flex-end', className: classes[variant] }, itemIcon),
             React.createElement(Typography, { as: 'div', size: 'medium' }, children))));
 };
 ListItem.defaultProps = {};

package/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,OAAO,MAAM,MAAM,UAAU,CAAA;AAU7B,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE,CAAC,CACvD,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ;IACrC,QAAQ;QACE,CACd,CAAA;AAED,MAAM,iBAAiB,GAAG,CACxB,OAAoB,EACpB,KAAa,EACb,IAAgB,EACL,EAAE;IACb,IAAI,IAAI,EAAE;QACR,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,OAAO,oBAAC,QAAQ,OAAG,CAAA;KACpB;IAED,OAAO,oBAAC,KAAK,QAAE,KAAK,GAAG,CAAC,CAAS,CAAA;AACnC,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAExE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,GAAG,WAAW,EAAE,KAAK,GAAG,CAAC,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArE,wCAA6D,CAAQ,CAAA;IAE3E,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;IAExD,OAAO,CACL,4CAAQ,IAAI;QACV,oBAAC,SAAS,IAAC,IAAI,QAAC,SAAS,EAAC,KAAK;YAC7B,oBAAC,SAAS,IACR,MAAM,QACN,KAAK,EAAC,OAAO,EACb,cAAc,EAAC,UAAU,EACzB,SAAS,EAAE,OAAO,CAAC,aAAa,IAE/B,QAAQ,CACC;YACZ,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,IAC/B,QAAQ,CACE,CACH,CACT,CACN,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAA;AAE1B,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,OAAO,MAAM,MAAM,UAAU,CAAA;AAW7B,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE,CAAC,CACvD,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ;IAAE,QAAQ;QAAe,CACnD,CAAA;AAED,MAAM,iBAAiB,GAAG,CACxB,OAAoB,EACpB,KAAa,EACb,IAAgB,EACL,EAAE;IACb,IAAI,IAAI,EAAE;QACR,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,OAAO,oBAAC,QAAQ,OAAG,CAAA;KACpB;IAED,OAAO,oBAAC,KAAK,QAAE,KAAK,GAAG,CAAC,CAAS,CAAA;AACnC,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAExE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EACJ,QAAQ,EACR,IAAI,EACJ,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,CAAC,EACT,aAAa,KAEX,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,yDAOL,CAAQ,CAAA;IAET,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;IAExD,OAAO,CACL,4CAAQ,IAAI;QACV,oBAAC,SAAS,IACR,IAAI,QACJ,SAAS,EAAC,KAAK,EACf,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,EAAE;gBACnC,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,aAAa;aACrC,CAAC;YAEF,oBAAC,SAAS,IACR,MAAM,QACN,KAAK,EAAC,OAAO,EACb,cAAc,EAAC,UAAU,EACzB,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,IAE1B,QAAQ,CACC;YACZ,oBAAC,UAAU,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,IAC/B,QAAQ,CACE,CACH,CACT,CACN,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAA;AAE1B,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}

package/ListItem/styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "iconContainer">;
+declare const _default: () => import("@material-ui/styles").StyleRules<{}, "listContainer" | "ordered" | "unordered" | "lastElement">;
 export default _default;

package/ListItem/styles.js

@@ -10,8 +10,19 @@ PicassoProvider.override(() => ({
     }
 }));
 export default () => createStyles({
-    iconContainer: {
+    listContainer: {
+        lineHeight: '1.375em',
+        marginBottom: '0.5em'
+    },
+    ordered: {
+        minWidth: '1.25em',
+        marginRight: '0.75em'
+    },
+    unordered: {
         minWidth: '1rem'
+    },
+    lastElement: {
+        marginBottom: 0
     }
 });
 //# sourceMappingURL=styles.js.map

package/ListItem/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ListItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,WAAW,EAAE;QACX,IAAI,EAAE;YACJ,gBAAgB,EAAE;gBAChB,eAAe,EAAE,kBAAkB;aACpC;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,aAAa,EAAE;QACb,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ListItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,WAAW,EAAE;QACX,IAAI,EAAE;YACJ,gBAAgB,EAAE;gBAChB,eAAe,EAAE,kBAAkB;aACpC;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,aAAa,EAAE;QACb,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE,OAAO;KACtB;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,QAAQ;QAClB,WAAW,EAAE,QAAQ;KACtB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,MAAM;KACjB;IACD,WAAW,EAAE;QACX,YAAY,EAAE,CAAC;KAChB;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "16.1.0",
+  "version": "16.2.0",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",