@bundle-stats/ui 4.8.4 → 4.9.0

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);
+}

package/src/ui/button/button.stories.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { Button } from '.';
+
+export default {
+  title: 'UI/Button',
+  component: Button,
+} as Meta;
+
+const Template: Story = ({ children = 'Action', ...props }) => (
+  <Button {...props}>{children}</Button>
+);
+
+export const Default = Template.bind({});
+
+export const All = () => (
+  <Stack space="large">
+    <Stack space="medium">
+      <h2>Size</h2>
+      <FlexStack space="small" alignItems="top">
+        {Object.values(Button.SIZE).map((size) => (
+          <Button size={size} key={size}>
+            Action {size}
+          </Button>
+        ))}
+      </FlexStack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Kind</h2>
+      <Stack space="small">
+        <FlexStack space="small" alignItems="top">
+          {Object.values(Button.KIND).map((kind) => (
+            <Button kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+        <h3>Disabled</h3>
+        <FlexStack space="small" alignItems="top">
+          {Object.values(Button.KIND).map((kind) => (
+            <Button kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+      </Stack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Outline & Kind</h2>
+      <Stack space="small">
+        {Object.values(Button.SIZE).map((size) => (
+          <FlexStack space="small" alignItems="top" key={size}>
+            <Button outline size={size}>
+              Action default
+            </Button>
+            {Object.values(Button.KIND).map((kind) => (
+              <Button outline kind={kind} key={kind} size={size}>
+                Action {kind}
+              </Button>
+            ))}
+          </FlexStack>
+        ))}
+        <h3>Disabled</h3>
+        <FlexStack space="small" alignItems="top">
+          <Button outline disabled>
+            Action default
+          </Button>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button outline kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+      </Stack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Solid & Kind</h2>
+      <Stack space="small">
+        {Object.values(Button.SIZE).map((size) => (
+          <FlexStack space="small" alignItems="top" key={size}>
+            <Button solid size={size}>
+              Action default
+            </Button>
+            {Object.values(Button.KIND).map((kind) => (
+              <Button solid kind={kind} key={kind} size={size}>
+                Action {kind}
+              </Button>
+            ))}
+          </FlexStack>
+        ))}
+        <h3>Disabled</h3>
+        <FlexStack space="small" alignItems="top">
+          <Button solid disabled>
+            Action default
+          </Button>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button solid kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+      </Stack>
+    </Stack>
+  </Stack>
+);