@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.12

package/src/ui/filters/filters.jsx

@@ -9,7 +9,7 @@ import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
 const Filter = (props) => {
-  const { className, label, name, getOnOnlyClick, ...inputProps } = props;
+  const { className, buttonClassName, label, name, getOnOnlyClick, ...inputProps } = props;
   const id = `filter-${name}`;
 
   const rootClassName = cx(css.filter, className);
@@ -17,26 +17,16 @@ const Filter = (props) => {
   return (
     <div className={rootClassName}>
       {/* eslint-disable */}
-      <FlexStack space="xxxsmall" as="label" className={css.filterCheckbox}>
-      {/* eslint-enabled */}
-        <input
-          className={css.filterInput}
-          type="checkbox"
-          id={id}
-          name={name}
-          {...inputProps}
-        />
+      <FlexStack space="xxxsmall" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
+        {/* eslint-enabled */}
+        <input className={css.filterInput} type="checkbox" id={id} name={name} {...inputProps} />
         <span className={css.filterLabel} title={label}>
           {label}
         </span>
       </FlexStack>
 
       {getOnOnlyClick && (
-        <button
-          className={css.filterOnlyButton}
-          type="button"
-          onClick={getOnOnlyClick(name)}
-        >
+        <button className={css.filterOnlyButton} type="button" onClick={getOnOnlyClick(name)}>
           only
         </button>
       )}
@@ -46,6 +36,7 @@ const Filter = (props) => {
 
 Filter.propTypes = {
   className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   getOnOnlyClick: PropTypes.func,
@@ -53,17 +44,23 @@ Filter.propTypes = {
 
 Filter.defaultProps = {
   className: '',
+  buttonClassName: '',
   getOnOnlyClick: null,
 };
 
 const FilterGroup = (props) => {
-  const { groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { className, buttonClassName, groupKey, data, values, onCheckboxChange, toggleFilters } =
+    props;
 
   const { label: groupLabel, ...groupData } = data;
 
   const groupItems = Object.entries(groupData);
-  const groupCheckboxes = groupItems.filter(([itemKey, item]) => typeof item?.defaultValue !== 'undefined');
-  const isGroupChecked = groupCheckboxes.map(([itemKey]) => get(values, `${groupKey}.${itemKey}`)).reduce((agg, val) => agg && val, true);
+  const groupCheckboxes = groupItems.filter(
+    ([itemKey, item]) => typeof item?.defaultValue !== 'undefined',
+  );
+  const isGroupChecked = groupCheckboxes
+    .map(([itemKey]) => get(values, `${groupKey}.${itemKey}`))
+    .reduce((agg, val) => agg && val, true);
 
   const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
   const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
@@ -71,26 +68,34 @@ const FilterGroup = (props) => {
     <>
       {`${groupLabel}:`}
       &nbsp;
-      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>
-        {filterSuffix}
-      </span>
+      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>{filterSuffix}</span>
     </>
   );
 
-  const getOnGroupCheck = (value, overrides = {}) => () => {
-    const newFilters = groupCheckboxes.reduce((agg, [itemKey]) => ({
-      ...agg,
-      [`${groupKey}.${itemKey}`]: value,
-    }), {});
-
-    toggleFilters({
-      ...newFilters,
-      ...overrides,
-    });
-  };
+  const getOnGroupCheck =
+    (value, overrides = {}) =>
+    () => {
+      const newFilters = groupCheckboxes.reduce(
+        (agg, [itemKey]) => ({
+          ...agg,
+          [`${groupKey}.${itemKey}`]: value,
+        }),
+        {},
+      );
+
+      toggleFilters({
+        ...newFilters,
+        ...overrides,
+      });
+    };
 
   return (
-    <Dropdown label={dropdownLabel} ariaLabel={`${groupLabel}: ${filterSuffix}`}>
+    <Dropdown
+      className={className}
+      buttonClassName={buttonClassName}
+      label={dropdownLabel}
+      ariaLabel={`${groupLabel}: ${filterSuffix}`}
+    >
       {({ MenuItem, menu, menuItemClassName }) => {
         return (
           <>
@@ -100,7 +105,11 @@ const FilterGroup = (props) => {
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
 
                 return (
-                  <MenuItem key={id} {...menu} className={cx(menuItemClassName, css.filterGroupItem)}>
+                  <MenuItem
+                    key={id}
+                    {...menu}
+                    className={cx(menuItemClassName, css.filterGroupItem)}
+                  >
                     <Filter
                       name={id}
                       label={itemData.label}
@@ -138,12 +147,14 @@ const FilterGroup = (props) => {
             </div>
           </>
         );
-    }}
+      }}
     </Dropdown>
   );
 };
 
 FilterGroup.propTypes = {
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
@@ -151,27 +162,27 @@ FilterGroup.propTypes = {
   toggleFilters: PropTypes.func.isRequired,
 };
 
+FilterGroup.defaultProps = {
+  className: '',
+  buttonClassName: '',
+};
+
 export const Filters = (props) => {
-  const {
-    className,
-    values,
-    filters,
-    toggleFilter,
-    toggleFilters,
-  } = props;
+  const { className, values, filters, toggleFilter, toggleFilters } = props;
 
   const onCheckboxChange = ({ target }) => toggleFilter(target.name, target.checked);
   const rootClassName = cx(css.root, className);
 
   return (
     <form className={rootClassName}>
-      <FlexStack className={css.items}>
+      <FlexStack space="xxsmall" className={css.items}>
         {Object.entries(filters).map(([name, data]) => {
           if (typeof data?.defaultValue !== 'undefined') {
             return (
               <Filter
                 key={name}
                 className={cx(css.item, css.filterStandalone)}
+                buttonClassName={css.itemButton}
                 name={name}
                 label={data.label}
                 onChange={onCheckboxChange}
@@ -182,16 +193,16 @@ export const Filters = (props) => {
           }
 
           return (
-            <div className={css.item}>
-              <FilterGroup
-                key={name}
-                groupKey={name}
-                data={data}
-                values={values}
-                onCheckboxChange={onCheckboxChange}
-                toggleFilters={toggleFilters}
-              />
-            </div>
+            <FilterGroup
+              className={css.item}
+              buttonClassName={css.itemButton}
+              key={name}
+              groupKey={name}
+              data={data}
+              values={values}
+              onCheckboxChange={onCheckboxChange}
+              toggleFilters={toggleFilters}
+            />
           );
         })}
       </FlexStack>

package/src/ui/filters/filters.module.css

@@ -11,6 +11,7 @@
 }
 
 .filterInput {
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -131,9 +132,8 @@
 .item {
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+.itemButton {
+  border-radius: var(--radius-small);
 }

package/src/ui/hover-card/hover-card.jsx

@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import {
+  Hovercard,
+  HovercardAnchor,
+  HovercardArrow,
+  useHovercard,
+  useHovercardState,
+} from 'ariakit/hovercard';
+
+import css from './hover-card.module.css';
+
+const resolveComponent = (as, href) => {
+  if (as) {
+    return as;
+  }
+
+  if (href) {
+    return 'a';
+  }
+
+  return 'span';
+};
+
+export const HoverCard = (props) => {
+  const { className, hoverCardClassName, href, as, label, children } = props;
+  const state = useHovercardState({ gutter: 8 });
+  const hoverCardProps = useHovercard({ state, portal: true });
+
+  // Fallback to span if no href
+  const Component = resolveComponent(as, href);
+
+  return (
+    <div className={cx(css.root, className)}>
+      <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
+        {label}
+      </HovercardAnchor>
+      <Hovercard
+        {...hoverCardProps}
+        state={state}
+        className={cx(css.hoverCard, hoverCardClassName)}
+        style={{ zIndex: 10000 }}
+      >
+        <HovercardArrow size={24} />
+        {typeof children === 'function' ? children({ close: state.hide }) : children}
+      </Hovercard>
+    </div>
+  );
+};
+
+HoverCard.propTypes = {
+  /** Adopted child class name */
+  className: PropTypes.string,
+  /** Adopted child class name for hover card */
+  hoverCardClassName: PropTypes.string,
+  /** Anchor label */
+  label: PropTypes.node,
+  /** Anchor href */
+  href: PropTypes.string,
+  /** Anchor component */
+  as: PropTypes.elementType,
+  /** Hover card component */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+};
+
+HoverCard.defaultProps = {
+  className: '',
+  hoverCardClassName: '',
+  label: '',
+  as: '',
+  href: '',
+};

package/src/ui/hover-card/hover-card.module.css

@@ -0,0 +1,29 @@
+.root {
+  display: inline-block;
+}
+
+.anchor {
+  display: inline-block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.anchor:hover {
+  color: var(--color-primary);
+}
+
+.anchor:focus {
+  outline: 0;
+}
+
+.hoverCard {
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 360px;
+  outline: none;
+  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+}

package/src/ui/hover-card/index.js

@@ -0,0 +1 @@
+export * from './hover-card';

package/src/ui/icon/icon.jsx

@@ -5,13 +5,11 @@ import cx from 'classnames';
 import css from './icon.module.css';
 
 const ICONS = {
-  ALERT_CIRCLE: 'alert-circle',
   ARROW: 'arrow',
   ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
-  CHECK_CIRCLE: 'check-circle',
   COMMIT: 'commit',
   FILTER: 'filter',
   HELP: 'help',
@@ -20,13 +18,17 @@ const ICONS = {
   WARNING: 'warning',
 };
 
-export const Icon = ({ className, glyph, as: Component, size, ...restProps }) => (
-  <Component className={cx(css.root, className, css[size])} {...restProps}>
-    <svg className={css.icon}>
-      <use xlinkHref={`#${glyph}`} />
-    </svg>
-  </Component>
-);
+export const Icon = (props) => {
+  const { className, glyph, as: Component, size, ...restProps } = props;
+
+  return (
+    <Component className={cx(css.root, className, css[size])} {...restProps}>
+      <svg className={css.icon}>
+        <use xlinkHref={`#${glyph}`} />
+      </svg>
+    </Component>
+  );
+};
 
 Icon.ICONS = ICONS;
 

package/src/ui/icon/icon.module.css

@@ -1,5 +1,6 @@
 .root {
   display: inline-block;
+  vertical-align: middle; /** center align when parent display is inline/inline-block **/
 }
 
 .icon {

package/src/ui/index.js

@@ -10,9 +10,9 @@ export { Input } from './input';
 export { Loader } from './loader';
 export { Logo } from './logo';
 export { Panels } from './panels';
-export { Popover } from './popover';
 export { Skeleton } from './skeleton';
 export { SortDropdown } from './sort-dropdown';
 export { Table } from './table';
 export { Tabs } from './tabs';
+export { Tag } from './tag';
 export { Tooltip } from './tooltip';

package/src/ui/table/table.jsx

@@ -4,53 +4,6 @@ import cx from 'classnames';
 
 import css from './table.module.css';
 
-const THead = (props) => <thead {...props} />
-
-const TBody = (props) => <tbody {...props} />;
-
-const Tr = (props) => {
-  const { className, ...restProps } = props;
-  return <tr className={cx(css.row, className)} {...restProps} />;
-};
-
-Tr.defaultProps = {
-  className: '',
-};
-
-Tr.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
-const Th = (props) => {
-  const { className, ...restProps } = props;
-
-  return <th className={cx(css.cell, className)} {...restProps} />;
-};
-
-Th.defaultProps = {
-  className: '',
-};
-
-Th.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
-const Td = (props) => {
-  const { className, ...restProps } = props;
-  return <td className={cx(css.cell, className)} {...restProps} />;
-};
-
-Td.defaultProps = {
-  className: '',
-};
-
-Td.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-};
-
 export const Table = ({ className, emptyMessage, compact, outline, children }) => {
   const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
 
@@ -61,11 +14,11 @@ export const Table = ({ className, emptyMessage, compact, outline, children }) =
   return <table className={rootClassName}>{children}</table>;
 };
 
-Table.THead = THead;
-Table.TBody = TBody;
-Table.Th = Th;
-Table.Tr = Tr;
-Table.Td = Td;
+Table.THead = 'thead';
+Table.TBody = 'tbody';
+Table.Tr = 'tr';
+Table.Th = 'th';
+Table.Td = 'td';
 
 Table.defaultProps = {
   className: '',

package/src/ui/table/table.module.css

@@ -1,54 +1,54 @@
 .root {
   border-width: 0;
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
+  text-align: left;
 }
 
-.cell {
+.root th,
+.root td {
   border: 1px solid var(--color-outline);
   border-width: 1px 0 0;
-  padding: var(--space-small) var(--space-small);
-  text-align: left;
-}
-
-tr:last-child .cell {
-  border-bottom-width: 1px;
+  padding: var(--space-small);
 }
 
-.root thead .cell {
-  border-width: 0 0 2px;
+.root thead th {
+  border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
+  background: var(--color-highlight);
 }
 
-.root thead .cell:empty {
+.root thead th:empty {
   display: none;
 }
 
-.root tbody .cell {
+.root tbody th {
   font-weight: normal;
 }
 
-.root tbody .cell a {
+.root tbody tr:first-child td,
+.root tbody tr:first-child th {
+  border-top: 0;
+}
+
+.root tbody td a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody .cell a:hover,
-.root tbody .cell a:focus,
-.root tbody .cell a:active
+.root tbody td a:hover,
+.root tbody td a:focus,
+.root tbody td a:active
 {
   color: var(--color-primary);
   text-decoration: underline;
 }
 
-.root tbody tr:nth-child(odd) .cell {
-  background-color: var(--color-highlight);
-}
-
-.root tbody tr:hover .cell {
+.root tbody tr:hover th,
+.root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
 }
 
@@ -62,12 +62,27 @@ tr:last-child .cell {
 
 /* outline variation */
 .outline {
+  --table-radius: var(--radius-medium);
   border: 1px solid var(--color-outline);
-  border-width: 0 1px;
+  border-radius: var(--table-radius);
+}
+
+.outline thead:first-child tr:first-child th:first-child,
+.outline tbody:first-child tr:first-child td:first-child {
+  border-top-left-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child th:last-child,
+.outline tbody:first-child tr:first-child td:last-child {
+  border-top-right-radius: var(--table-radius);
+}
+
+.outline tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell {
-  border-top-width: 1px;
+.outline tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: var(--table-radius);
 }
 
 .outline.empty {
@@ -75,7 +90,8 @@ tr:last-child .cell {
 }
 
 /* compact variation */
-.compact .cell {
+.compact td,
+.compact th {
   padding-top: var(--space-xsmall);
   padding-bottom: var(--space-xsmall);
 }

package/src/ui/tag/index.js

@@ -0,0 +1 @@
+export * from './tag';

package/src/ui/tag/tag.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import css from './tag.module.css';
+
+export const KINDS = {
+  DEFAULT: 'default',
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  DANGER: 'danger',
+};
+
+export const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+};
+
+export const Tag = (props) => {
+  const {
+    className = '',
+    as: Component = 'span',
+    kind = KINDS.DEFAULT,
+    size = SIZES.MEDIUM,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className, css[kind], css[size]);
+
+  return <Component className={rootClassName} {...restProps} />;
+};
+
+Tag.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.elementType,
+  kind: PropTypes.oneOf(Object.values(KINDS)),
+  size: PropTypes.oneOf(Object.values(SIZES)),
+};
+
+Tag.defaultProps = {
+  className: '',
+  as: 'span',
+  kind: KINDS.DEFAULT,
+  size: SIZES.MEDIUM,
+};
+
+Tag.KINDS = KINDS;
+Tag.SIZES = SIZES;

package/src/ui/tag/tag.module.css

@@ -0,0 +1,55 @@
+.root {
+  display: inline-block;
+  font-family: var(--font-family);
+  font-weight: bold;
+  background: var(--color-text-light);
+  color: var(--color-light);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/** Kind variation */
+.success {
+  background: var(--color-success);
+}
+
+.info {
+  background: var(--color-info);
+}
+
+.warning {
+  background: var(--color-warning-dark);
+}
+
+.danger {
+  background: var(--color-danger);
+}
+
+/** Size variation */
+/** default: medium */
+.root {
+  border-radius: var(--radius-medium);
+  padding: var(--space-xxxsmall);
+  min-width: var(--space-small);
+  height: var(--space-small);
+  font-size: 9px;
+  line-height: 1;
+}
+
+.small {
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2);
+  height: var(--space-xsmall);
+  min-width: var(--space-xsmall);
+  font-size: 8px;
+  line-height: 1;
+}
+
+.large {
+  border-radius: var(--radius-large);
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  min-width: var(--space-medium);
+  height: var(--space-medium);
+  font-size: 12px;
+  line-height: var(--space-small);
+}