@bundle-stats/ui 4.9.0-beta.0 → 4.9.0

package/src/components/entry-info/entry-info.tsx

@@ -6,6 +6,7 @@ import { METRIC_TYPE_CONFIGS, MetricRunInfo, getMetricRunInfo } from '@bundle-st
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
 import { RunInfo } from '../run-info';
@@ -94,14 +95,15 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
             size="large"
           />
         </Stack>
-        <button
+        <Button
+          radius="circle"
           type="button"
           onClick={onClose}
           aria-label={I18N.CLOSE_TITLE}
           className={css.headerClose}
         >
           <Icon glyph={Icon.ICONS.CLOSE} size="large" />
-        </button>
+        </Button>
       </Box>
       <Box padding="medium" as="main" className={css.contentWrapper}>
         <Stack space="small" className={css.content}>

package/src/components/metric-run-info/metric-run-info.module.css

@@ -2,21 +2,3 @@
   font-weight: bold;
   font-size: 1em;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}

package/src/components/metric-run-info/metric-run-info.tsx

@@ -3,6 +3,7 @@ import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
@@ -28,12 +29,12 @@ const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
         <p className={css.metricHoverCardDescription}>{description}</p>
         {url && (
           <div>
-            <button type="button" onClick={onClick} className={css.readMoreLink}>
+            <Button kind="primary" type="button" onClick={onClick} className={css.readMoreLink}>
               <FlexStack alignItems="center" space="xxxsmall">
                 <span>Read more</span>
                 <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
               </FlexStack>
-            </button>
+            </Button>
           </div>
         )}
       </Stack>

package/src/components/metrics-table/metrics-table.module.css

@@ -82,24 +82,6 @@
   text-align: center;
 }
 
-/** show all */
-.showAllItemsButton {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: var(--space-xxxsmall);
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.showAllItemsButton:hover,
-.showAllItemsButton:focus,
-.showAllItemsButton:active {
-  color: var(--color-primary-dark);
-}
-
 /** Breakpoints */
 .root tr {
   display: flex;

package/src/components/metrics-table/metrics-table.tsx

@@ -9,6 +9,7 @@ import {
   getMetricRunInfo,
 } from '@bundle-stats/utils';
 
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
 import { Stack } from '../../layout/stack';
@@ -274,21 +275,23 @@ export const MetricsTable = ({
               <Table.Tr>
                 <Table.Td className={css.showAllItems} colSpan={columnCount}>
                   {showAllItems ? (
-                    <button
+                    <Button
+                      padding="small"
+                      kind="primary"
                       onClick={() => setShowAllItems(false)}
                       type="button"
-                      className={css.showAllItemsButton}
                     >
                       {I18N.SHOW_LESS}
-                    </button>
+                    </Button>
                   ) : (
-                    <button
+                    <Button
+                      padding="small"
+                      kind="primary"
                       onClick={() => setShowAllItems(true)}
                       type="button"
-                      className={css.showAllItemsButton}
                     >
                       {I18N.SHOW_ALL}
-                    </button>
+                    </Button>
                   )}
                 </Table.Td>
               </Table.Tr>

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -5,6 +5,7 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
@@ -19,14 +20,17 @@ export const MetricsTableTitle = (props) => {
         <span>{title}</span>
 
         {(popoverInfo || popoverHref) && (
-          <HoverCard label={<Icon glyph={Icon.ICONS.HELP} className={css.anchorIcon} />} anchorClassName={css.anchor}>
+          <HoverCard
+            label={<Icon glyph={Icon.ICONS.HELP} className={css.anchorIcon} />}
+            anchorClassName={css.anchor}
+          >
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (
                 <p>
-                  <button type="button" onClick={() => window.open(popoverHref)} className={css.readMoreLink}>
+                  <Button kind="primary" type="button" onClick={() => window.open(popoverHref)}>
                     {I18N.READ_MORE}
-                  </button>
+                  </Button>
                 </p>
               )}
             </Stack>

package/src/components/metrics-table-title/metrics-table-title.module.css

@@ -23,21 +23,3 @@
   font-size: var(--size-xsmall);
   font-weight: bold;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}

package/src/components/sort-button/sort-button.module.css

@@ -1,22 +1,10 @@
 .root {
   --icon-dimension: 13px;
   display: inline-block;
-  margin: calc(0px - var(--space-xxxsmall));
-  margin-right: calc(0px - 1px - var(--icon-dimension));
   border-radius: var(--radius-small);
   position: relative;
 }
 
-.button {
-  appearance: none;
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  transition: var(--transition-out);
-}
-
 .toggle {
   padding: 1px var(--space-xxxsmall);
   padding-right: calc(1px + var(--icon-dimension));
@@ -68,6 +56,11 @@
   transform: translateY(-5px);
 }
 
+.interactive {
+  margin: calc(0px - var(--space-xxxsmall));
+  margin-right: calc(0px - 1px - var(--icon-dimension));
+}
+
 .interactive:hover,
 .interactive:active,
 .interactive:focus {

package/src/components/sort-button/sort-button.tsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 
 import { SORT } from '../../constants';
 import type { SortAction } from '../../types';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Tooltip } from '../../ui/tooltip';
 import css from './sort-button.module.css';
@@ -76,20 +77,19 @@ export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>)
     <div className={cx(css.root, css.interactive, className, isSorted && css.active)}>
       <Tooltip
         title={toggleAction.title}
-        as="button"
+        as={Button}
         type="button"
         onClick={getOrderOnClick(toggleAction)}
-        className={cx(css.button, css.toggle)}
+        className={css.toggle}
       >
         {children}
       </Tooltip>
       <Tooltip
         title={ascAction.title}
-        as="button"
+        as={Button}
         type="button"
         onClick={getOrderOnClick(ascAction)}
         className={cx(
-          css.button,
           css.direction,
           css.directionAsc,
           isSorted && sort.direction === SORT.ASC && css.directionActive,
@@ -99,11 +99,10 @@ export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>)
       </Tooltip>
       <Tooltip
         title={descAction.title}
-        as="button"
+        as={Button}
         type="button"
         onClick={getOrderOnClick(descAction)}
         className={cx(
-          css.button,
           css.direction,
           css.directionDesc,
           isSorted && sort.direction === SORT.DESC && css.directionActive,

package/src/components/summary/summary.module.css

@@ -29,21 +29,3 @@
 .itemSmall {
   min-width: 8em;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -6,6 +6,7 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
@@ -17,13 +18,14 @@ export const TotalSizeTypeTitle = ({ className }) => (
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>
-          <button
+          <Button
+            kind="primary"
             type="button"
             onClick={() => window.open(config.documentation.assets)}
             className={css.readMoreLink}
           >
             {I18N.READ_MORE}
-          </button>
+          </Button>
         </p>
       </Stack>
     </HoverCard>

package/src/components/total-size-type-title/total-size-type-title.module.css

@@ -12,21 +12,3 @@
 .anchor {
   display: block;
 }
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}

package/src/css/variables.css

@@ -28,8 +28,8 @@
 
   /*
    * Color scheme:
-   * https://coolors.co/287acc-da444e-55b950-f6e179-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f3d966&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
+   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
    * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
   --color-gray-25: #f9f9fa;
@@ -104,16 +104,16 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  --color-yellow-50: #fefaed;
-  --color-yellow-100: #fbf4d1;
-  --color-yellow-200: #f9ecb3;
-  --color-yellow-300: #f7e494;
-  --color-yellow-400: #f5df7d;
-  --color-yellow-500: #f3d966;
-  --color-yellow-600: #f1d55e;
-  --color-yellow-700: #efcf53;
-  --color-yellow-800: #edca49;
-  --color-yellow-900: #eac038;
+  --color-yellow-50: #fdf9e4;
+  --color-yellow-100: #faf0ba;
+  --color-yellow-200: #f7e68d;
+  --color-yellow-300: #f4db5f;
+  --color-yellow-400: #f1d43c;
+  --color-yellow-500: #efcc1a;
+  --color-yellow-600: #edc717;
+  --color-yellow-700: #ebc013;
+  --color-yellow-800: #e8b90f;
+  --color-yellow-900: #e4ad08;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);
@@ -189,9 +189,9 @@
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
-  --radius-small: 3px;
+  --radius-small: 4px;
   --radius-medium: 5px;
-  --radius-large: 9px;
+  --radius-large: 6px;
 
   --outline-hover: 0 0 0 3px var(--color-highlight);
 

package/src/ui/button/button.module.css

@@ -0,0 +1,285 @@
+.root {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  transition: var(--transition-out);
+  color: var(--color-text-ultra-light);
+  line-height: 1;
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  color: var(--color-text-light);
+  transition: var(--transition-in);
+}
+
+/**
+ * Kind variation
+ */
+.primary {
+  color: var(--color-primary);
+}
+
+.primary:hover,
+.primary:active,
+.primary:focus {
+  color: var(--color-primary-dark);
+}
+
+.secondary {
+  color: var(--color-secondary);
+}
+
+.secondary:hover,
+.secondary:active,
+.secondary:focus {
+  color: var(--color-secondary-dark);
+}
+
+.danger {
+  color: var(--color-danger);
+}
+
+.danger:hover,
+.danger:active,
+.danger:focus {
+  color: var(--color-danger-dark);
+}
+
+.warning {
+  color: var(--color-warning);
+}
+
+.warning:hover,
+.warning:active,
+.warning:focus {
+  color: var(--color-warning-dark);
+}
+
+.info {
+  color: var(--color-info);
+}
+
+.info:hover,
+.info:active,
+.info:focus {
+  color: var(--color-info-dark);
+}
+
+.success {
+  color: var(--color-success);
+}
+
+.success:hover,
+.success:active,
+.success:focus {
+  color: var(--color-success-dark);
+}
+
+/**
+ * Solid Kind variation
+ */
+.solid {
+  background: var(--color-text-light);
+  color: var(--color-background);
+}
+
+.solid:hover,
+.solid:active,
+.solid:focus {
+  box-shadow: var(--outline-hover);
+  background: var(--color-text);
+  color: var(--color-background);
+}
+
+.solid--primary {
+  background: var(--color-primary);
+}
+
+.solid--primary:hover,
+.solid--primary:active,
+.solid--primary:focus {
+  background: var(--color-primary-dark);
+}
+
+.solid--secondary {
+  background: var(--color-secondary);
+}
+
+.solid--secondary:hover,
+.solid--secondary:active,
+.solid--secondary:focus {
+  background: var(--color-secondary-dark);
+}
+
+.solid--danger {
+  background: var(--color-danger);
+}
+
+.solid--danger:hover,
+.solid--danger:active,
+.solid--danger:focus {
+  background: var(--color-danger-dark);
+}
+
+.solid--warning {
+  background: var(--color-warning);
+}
+
+.solid--warning:hover,
+.solid--warning:active,
+.solid--warning:focus {
+  background: var(--color-warning-dark);
+}
+
+.solid--info {
+  background: var(--color-info);
+}
+
+.solid--info:hover,
+.solid--info:active,
+.solid--info:focus {
+  background: var(--color-info-dark);
+}
+
+.solid--success {
+  background: var(--color-success);
+}
+
+.solid--success:hover,
+.solid--success:active,
+.solid--success:focus {
+  background: var(--color-success-dark);
+}
+
+/**
+ * Outline variation
+ */
+.outline {
+  border: 1px solid var(--color-outline);
+}
+
+.outline:hover,
+.outline:active,
+.outline:focus {
+  box-shadow: var(--outline-hover);
+  border-color: var(--color-outline-dark);
+}
+
+.outline--primary {
+  border-color: var(--color-outline-primary);
+}
+
+.outline--primary:hover,
+.outline--primary:active,
+.outline--primary:focus {
+  border-color: var(--color-outline-primary-dark);
+}
+
+.outline--secondary {
+  border-color: var(--color-outline-secondary);
+}
+
+.outline--secondary:hover,
+.outline--secondary:active,
+.outline--secondary:focus {
+  border-color: var(--color-outline-secondary-dark);
+}
+
+.outline--danger {
+  border-color: var(--color-outline-danger);
+}
+
+.outline--danger:hover,
+.outline--danger:active,
+.outline--danger:focus {
+  border-color: var(--color-outline-danger-dark);
+}
+
+.outline--warning {
+  border-color: var(--color-outline-warning);
+}
+
+.outline--warning:hover,
+.outline--warning:active,
+.outline--warning:focus {
+  border-color: var(--color-outline-warning-dark);
+}
+
+.outline--info {
+  border-color: var(--color-outline-info);
+}
+
+.outline--info:hover,
+.outline--info:active,
+.outline--info:focus {
+  border-color: var(--color-outline-info-dark);
+}
+
+.outline--success {
+  border-color: var(--color-outline-success);
+}
+
+.outline--success:hover,
+.outline--success:active,
+.outline--success:focus {
+  border-color: var(--color-outline-success-dark);
+}
+
+/**
+ * Size variation
+ */
+.small {
+  font-size: var(--size-small);
+}
+
+.medium {
+  font-size: var(--size-medium);
+}
+
+.large {
+  font-size: var(--size-large);
+}
+
+/**
+ * Padding variation
+ */
+.padding--small {
+  padding: var(--space-xxsmall);
+}
+
+.padding--medium {
+  padding:  var(--space-xsmall);
+}
+
+.padding--large {
+  padding: var(--space-small);
+}
+
+/**
+ * Radius variation
+ */
+.radius--small {
+  border-radius: var(--radius-small);
+}
+
+.radius--medium {
+  border-radius: var(--radius-medium);
+}
+
+.radius--large {
+  border-radius: var(--radius-large);
+}
+
+.radius--circle {
+  border-radius: 50%;
+}
+
+/**
+ * Disabled state
+ */
+.root[disabled] {
+  filter: grayscale(1);
+}