@bundle-stats/ui 4.0.1 → 4.0.5-beta.0

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

@@ -24,8 +24,8 @@ const resolveComponent = (as, href) => {
 };
 
 export const HoverCard = (props) => {
-  const { className, hoverCardClassName, href, as, label, children } = props;
-  const state = useHovercardState({ gutter: 8 });
+  const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+  const state = useHovercardState({ gutter: 8, timeout: 700 });
   const hoverCardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
@@ -37,7 +37,12 @@ export const HoverCard = (props) => {
 
   return (
     <div className={cx(css.root, className)}>
-      <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
+      <HovercardAnchor
+        state={state}
+        href={href}
+        className={cx(css.anchor, anchorClassName)}
+        as={Component}
+      >
         {label}
       </HovercardAnchor>
       <Hovercard
@@ -59,6 +64,8 @@ HoverCard.propTypes = {
   className: PropTypes.string,
   /** Adopted child class name for hover card */
   hoverCardClassName: PropTypes.string,
+  /** Adopted child class name for anchor */
+  anchorClassName: PropTypes.string,
   /** Anchor label */
   label: PropTypes.node,
   /** Anchor href */
@@ -72,6 +79,7 @@ HoverCard.propTypes = {
 HoverCard.defaultProps = {
   className: '',
   hoverCardClassName: '',
+  anchorClassName: '',
   label: '',
   as: '',
   href: '',

package/src/ui/skeleton/skeleton.jsx

@@ -5,16 +5,20 @@ import cx from 'classnames';
 import css from './skeleton.module.css';
 
 export const Skeleton = (props) => {
-  const { className, ...restProps } = props;
-  const rootClassName = cx(css.root, className);
+  const { className, as: Component, block, ...restProps } = props;
+  const rootClassName = cx(css.root, className, block && css.block);
 
-  return <span className={rootClassName} {...restProps} />;
+  return <Component className={rootClassName} {...restProps} />;
 };
 
 Skeleton.propTypes = {
   className: PropTypes.string,
+  as: PropTypes.elementType,
+  block: PropTypes.bool,
 };
 
 Skeleton.defaultProps = {
   className: '',
+  as: 'span',
+  block: false,
 };

package/src/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}

package/src/ui/sort-dropdown/sort-dropdown.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
@@ -6,6 +6,65 @@ import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
 
+const Item = ({
+  className,
+  as: Component,
+  id,
+  label,
+  active,
+  direction,
+  defaultDirection,
+  getButtonOnClick,
+  ...restProps }) => {
+
+  const buttonProps = useMemo(() => {
+    let resolveNextDirection = defaultDirection;
+
+    if (active) {
+      resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
+    }
+
+    if (resolveNextDirection === 'desc') {
+      return {
+        className: css.itemAsc,
+        onClick: getButtonOnClick(id, 'desc'),
+        title: `Order data by ${label} descending`,
+      };
+    }
+
+    return {
+      onClick: getButtonOnClick(id, 'asc'),
+      title: `Order data by ${label} ascending`,
+    };
+  }, [active, direction, defaultDirection, id, label]);
+
+  return (
+    <Component
+      {...restProps}
+      {...buttonProps}
+      className={cx(className, css.item, active && css.itemActive, buttonProps.className)}
+    >
+      <Icon className={css.itemIcon} glyph="arrow" />
+      <span className={css.itemLabel}>{label}</span>
+    </Component>
+  );
+};
+
+Item.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.element.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  direction: PropTypes.string.isRequired,
+  defaultDirection: PropTypes.string.isRequired,
+  getButtonOnClick: PropTypes.func.isRequired,
+};
+
+Item.defaultProps = {
+  className: '',
+};
+
 export const SortDropdown = (props) => {
   const { className, label, fields, field, direction, onChange } = props;
   const rootClassName = cx(css.root, className);
@@ -23,36 +82,20 @@ export const SortDropdown = (props) => {
         return (
           <div className={css.items}>
             {Object.entries(fields).map(([key, item]) => {
-              const buttonProps =
-                direction === 'asc'
-                  ? {
-                    className: css.itemAsc,
-                    onClick: getButtonOnClick(key, 'desc'),
-                    title: `Order data by ${item.label} descending`,
-                  }
-                  : {
-                    onClick: getButtonOnClick(key, 'asc'),
-                    title: `Order data by ${item.label} ascending`,
-                  };
-
               const isActive = field === key;
 
               return (
-                <MenuItem
+                <Item
                   key={key}
-                  {...menu}
-                  {...buttonProps}
-                  className={cx(
-                    buttonProps.className,
-                    menuItemClassName,
-                    css.item,
-                    isActive && menuItemActiveClassName,
-                    isActive && css.active,
-                  )}
-                >
-                  <span className={css.itemLabel}>{item.label}</span>
-                  <Icon className={css.itemIcon} glyph="arrow" />
-                </MenuItem>
+                  as={MenuItem}
+                  className={cx(menuItemClassName, isActive && menuItemActiveClassName)}
+                  id={key}
+                  label={item.label}
+                  direction={direction}
+                  defaultDirection={item.defaultDirection}
+                  active={isActive}
+                  getButtonOnClick={getButtonOnClick}
+                />
               );
             })}
           </div>

package/src/ui/sort-dropdown/sort-dropdown.module.css

@@ -4,7 +4,9 @@
 }
 
 .itemIcon {
-  display: none;
+  flex: 0 0 auto;
+  visibility: hidden;
+  margin-right: var(--space-xxxsmall);
 }
 
 .itemLabel {
@@ -15,6 +17,6 @@
   transform: rotate(180deg);
 }
 
-.item.active .itemIcon {
-  display: block;
+.itemActive .itemIcon {
+  visibility: visible;
 }