@bundle-stats/ui 3.2.1 → 3.2.3-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/lib/app/app.js +1 -1
  3. package/lib/app/app.stories.js +10 -3
  4. package/lib/assets/icons/arrow-right-circle.svg +1 -0
  5. package/lib/assets/icons/close.svg +1 -1
  6. package/lib/assets/icons.svg +42 -1
  7. package/lib/components/browsertime-table/browsertime-table.js +1 -1
  8. package/lib/components/browsertime-table/browsertime-table.stories.js +1 -1
  9. package/lib/components/bundle-assets/bundle-assets.js +3 -3
  10. package/lib/components/bundle-assets/bundle-assets.utils.js +2 -2
  11. package/lib/components/bundle-assets/index.js +3 -3
  12. package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +1 -1
  13. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +1 -1
  14. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +39 -43
  15. package/lib/components/bundle-modules/bundle-modules.js +3 -3
  16. package/lib/components/bundle-modules/bundle-modules.utils.js +2 -2
  17. package/lib/components/bundle-modules/index.js +3 -3
  18. package/lib/components/bundle-packages/bundle-packages.js +1 -1
  19. package/lib/components/bundle-packages/bundle-packages.utils.js +2 -2
  20. package/lib/components/bundle-packages/index.js +1 -1
  21. package/lib/components/lighthouse-table/lighthouse-table.js +1 -1
  22. package/lib/components/metrics-table/metrics-table.js +1 -1
  23. package/lib/components/metrics-table-search/metrics-table-search.js +1 -1
  24. package/lib/components/metrics-table-search/metrics-table-search.stories.js +1 -1
  25. package/lib/components/summary/summary.js +29 -56
  26. package/lib/components/summary/summary.module.css +31 -14
  27. package/lib/components/summary-item/summary-item.js +9 -9
  28. package/lib/components/summary-item/summary-item.module.css +3 -9
  29. package/lib/components/summary-item/summary-item.stories.js +35 -18
  30. package/lib/constants.js +2 -2
  31. package/lib/css/variables.css +15 -11
  32. package/lib/hooks/search-params.js +2 -2
  33. package/lib/query-state.js +1 -1
  34. package/lib/stories/wrapper.js +2 -2
  35. package/lib/ui/filters/filters.container.js +5 -5
  36. package/lib/ui/filters/filters.js +2 -2
  37. package/lib/ui/filters/filters.stories.js +3 -3
  38. package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +3 -3
  39. package/lib/ui/icon/icon.js +1 -0
  40. package/lib/ui/icon/icon.module.css +1 -0
  41. package/lib/ui/icon/icon.stories.js +40 -22
  42. package/lib/ui/panels/panels.js +2 -2
  43. package/lib/ui/popover/popover.js +3 -3
  44. package/lib/ui/popover/popover.module.css +2 -1
  45. package/lib/ui/tabs/tabs.js +2 -2
  46. package/lib/ui/tooltip/tooltip.module.css +1 -0
  47. package/lib/utils.js +2 -2
  48. package/lib-esm/app/app.stories.js +8 -1
  49. package/lib-esm/assets/icons/arrow-right-circle.svg +1 -0
  50. package/lib-esm/assets/icons/close.svg +1 -1
  51. package/lib-esm/assets/icons.svg +42 -1
  52. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +28 -21
  53. package/lib-esm/components/summary/summary.js +17 -40
  54. package/lib-esm/components/summary/summary.module.css +31 -14
  55. package/lib-esm/components/summary-item/summary-item.js +9 -9
  56. package/lib-esm/components/summary-item/summary-item.module.css +3 -9
  57. package/lib-esm/components/summary-item/summary-item.stories.js +14 -16
  58. package/lib-esm/css/variables.css +15 -11
  59. package/lib-esm/ui/filters/filters.container.js +39 -41
  60. package/lib-esm/ui/icon/icon.js +1 -0
  61. package/lib-esm/ui/icon/icon.module.css +1 -0
  62. package/lib-esm/ui/icon/icon.stories.js +22 -11
  63. package/lib-esm/ui/popover/popover.js +2 -2
  64. package/lib-esm/ui/popover/popover.module.css +2 -1
  65. package/lib-esm/ui/tooltip/tooltip.module.css +1 -0
  66. package/package.json +32 -32
  67. package/src/assets/icons/arrow-right-circle.svg +1 -0
  68. package/src/assets/icons/close.svg +1 -1
  69. package/src/assets/icons.svg +42 -1
  70. package/src/components/summary/summary.jsx +20 -39
  71. package/src/components/summary/summary.module.css +31 -14
  72. package/src/components/summary-item/summary-item.jsx +13 -22
  73. package/src/components/summary-item/summary-item.module.css +3 -9
  74. package/src/css/variables.css +15 -11
  75. package/src/ui/icon/icon.jsx +1 -0
  76. package/src/ui/icon/icon.module.css +1 -0
  77. package/src/ui/popover/popover.jsx +3 -3
  78. package/src/ui/popover/popover.module.css +2 -1
  79. package/src/ui/tooltip/tooltip.module.css +1 -0
package/src/components/summary-item/summary-item.module.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .title {
2
- margin: 0;
3
2
  color: var(--color-text-ultra-light);
4
3
  font-weight: bold;
5
4
  font-size: var(--size-xsmall);
@@ -31,20 +30,20 @@
31
30
  display: block;
32
31
  color: var(--color-heading);
33
32
  font-size: var(--size-large);
34
- line-height: 1.3;
33
+ line-height: var(--space-medium);
35
34
  white-space: nowrap;
36
35
  font-weight: bold;
37
36
  }
38
37
 
39
38
  .delta {
40
- margin: var(--space-xxxsmall) 0 0;
41
39
  font-size: var(--size-small);
40
+ line-height: var(--space-medium);
42
41
  }
43
42
 
44
43
  .baselineMetric {
45
44
  color: var(--color-text-light);
46
45
  font-size: var(--size-small);
47
- line-height: 1.3;
46
+ line-height: var(--space-small);
48
47
  }
49
48
 
50
49
  /* Loading state */
@@ -60,9 +59,4 @@
60
59
  .large .currentMetric {
61
60
  font-size: var(--size-xxxlarge);
62
61
  line-height: var(--space-medium);
63
- min-height: var(--space-medium);
64
- }
65
-
66
- .large .baselineMetric {
67
- font-size: var(--size-medium);
68
62
  }
package/src/css/variables.css CHANGED
@@ -27,20 +27,20 @@
27
27
 
28
28
  /*
29
29
  * Color scheme:
30
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23484a4d&mcgpalette4=%233385d6&themename=mcgtheme
30
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
31
31
  * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
32
32
  */
33
33
  --color-gray-25: #fafafa;
34
- --color-gray-50: #e9e9ea;
35
- --color-gray-100: #c8c9ca;
36
- --color-gray-200: #a4a5a6;
37
- --color-gray-300: #7f8082;
38
- --color-gray-400: #636568;
39
- --color-gray-500: #484a4d;
40
- --color-gray-600: #414346;
41
- --color-gray-700: #383a3d;
42
- --color-gray-800: #303234;
43
- --color-gray-900: #212225;
34
+ --color-gray-50: #eceded;
35
+ --color-gray-100: #d0d1d2;
36
+ --color-gray-200: #b1b2b4;
37
+ --color-gray-300: #929395;
38
+ --color-gray-400: #7a7c7f;
39
+ --color-gray-500: #636568;
40
+ --color-gray-600: #5b5d60;
41
+ --color-gray-700: #515355;
42
+ --color-gray-800: #47494b;
43
+ --color-gray-900: #35373a;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
@@ -181,6 +181,10 @@
181
181
  --layer-high: 1000;
182
182
  --layer-xhigh: 10000;
183
183
 
184
+ --radius-small: var(--space-xxxsmall);
185
+ --radius-medium: var(--space-xxsmall);
186
+ --radius-large: var(--space-small);
187
+
184
188
  /** Layout */
185
189
  --max-width: 80rem;
186
190
  }
package/src/ui/icon/icon.jsx CHANGED
@@ -6,6 +6,7 @@ import css from './icon.module.css';
6
6
 
7
7
  const ICONS = {
8
8
  ARROW: 'arrow',
9
+ ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
9
10
  CANCEL: 'cancel',
10
11
  CLOSE: 'close',
11
12
  CLOCK: 'clock',
package/src/ui/icon/icon.module.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .root {
2
2
  display: inline-block;
3
+ vertical-align: middle; /** center align when parent display is inline/inline-block **/
3
4
  }
4
5
 
5
6
  .icon {
package/src/ui/popover/popover.jsx CHANGED
@@ -14,7 +14,7 @@ import css from './popover.module.css';
14
14
  export const Popover = ({ className, icon, label, ariaLabel, children }) => {
15
15
  const popover = usePopoverState({
16
16
  baseId: process.env.NODE_ENV === 'test' && 'id-test',
17
- gutter: 24,
17
+ gutter: 12,
18
18
  modal: true,
19
19
  placement: 'top',
20
20
  });
@@ -32,7 +32,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
32
32
  event.preventDefault();
33
33
  popover.toggle();
34
34
  },
35
- [popover]
35
+ [popover],
36
36
  );
37
37
 
38
38
  return (
@@ -47,7 +47,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
47
47
  {label && <span className={css.label}>{label}</span>}
48
48
  </UIPopoverDisclosure>
49
49
  <UIPopover className={css.popover} {...popover} tabIndex={0}>
50
- <UIPopoverArrow className={css.arrow} {...popover} size={24} />
50
+ <UIPopoverArrow className={css.arrow} {...popover} size={16} />
51
51
 
52
52
  {typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children}
53
53
 
package/src/ui/popover/popover.module.css CHANGED
@@ -23,7 +23,8 @@
23
23
  }
24
24
 
25
25
  .popover {
26
- padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
26
+ padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
27
+ border-radius: var(--radius-small);
27
28
  max-width: 360px;
28
29
  outline: none;
29
30
  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
package/src/ui/tooltip/tooltip.module.css CHANGED
@@ -12,6 +12,7 @@
12
12
 
13
13
  .tooltip {
14
14
  padding: var(--space-xxxsmall) var(--space-xxsmall);
15
+ border-radius: var(--radius-small);
15
16
  background: var(--color-light);
16
17
  color: var(--color-text);
17
18
  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));