@bundle-stats/ui 4.2.1 → 4.2.3-beta.0

package/src/components/insights/insights.tsx

@@ -1,42 +1,31 @@
 import React from 'react';
-import cx from 'classnames';
-import { InsightType, getInsightList } from '@bundle-stats/utils';
+import { JobInsightsInfo, getInsightList } from '@bundle-stats/utils';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Icon } from '../../ui/icon';
 import { ComponentLink } from '../component-link';
+import { InsightIcon } from '../insight-icon';
 // @ts-ignore
 import css from './insights.module.css';
 
-const InsightTypeIconMap = new Map([
-  [InsightType.ERROR, Icon.ICONS.ERROR],
-  [InsightType.WARNING, Icon.ICONS.WARNING],
-  [InsightType.INFO, Icon.ICONS.INFO],
-]);
-
 interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {
-  duplicatePackages: any;
-  newPackages: any;
+  insights: JobInsightsInfo;
   customComponentLink?: React.ElementType;
 }
 
 export const Insights = (props: InsightsProps) => {
   const {
-    duplicatePackages,
-    newPackages,
+    insights,
     customComponentLink: CustomComponentLink = ComponentLink,
     ...restProps
   } = props;
 
-  const insights = getInsightList({ duplicatePackages, newPackages });
+  const insightList = getInsightList(insights);
 
   return (
     <Stack space="xxsmall" {...restProps}>
-      {insights.map(({ name, insight, link }) => {
-        const glyph = InsightTypeIconMap.get(insight.type);
+      {insightList.map(({ name, insight, link }) => {
         const { text } = insight.data as { text: string };
-
         return (
           <FlexStack
             key={name}
@@ -44,9 +33,9 @@ export const Insights = (props: InsightsProps) => {
             alignItems="center"
             as={CustomComponentLink}
             {...link}
-            className={cx(css.entry, css[insight.type])}
+            className={css.entry}
           >
-            {glyph && <Icon glyph={glyph} className={css.icon} />}
+            <InsightIcon type={insight.type} className={css.icon} />
             <span>{text}</span>
           </FlexStack>
         );

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

@@ -5,13 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small);
   height: var(--space-large);
-  border-color: var(--color-outline);
-}
-
-.input:focus {
-  border-color: var(--color-outline-dark);
 }
 
 .cancelButton {

package/src/components/summary/summary.jsx

@@ -28,6 +28,7 @@ export const Summary = ({
           <Box
             key={metricId}
             outline
+            outlineHover
             padding="small"
             as={SummaryItemCustomLink}
             {...metricOptions.link}

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

@@ -1,6 +1,5 @@
 .root {
   width: 100%;
-  overflow: auto;
 }
 
 .item {
@@ -8,10 +7,3 @@
   min-width: 16em;
   text-decoration: none;
 }
-
-.item:hover,
-.item:active,
-.item:focus {
-  border-color: var(--color-outline-dark);
-  outline: none;
-}

package/src/css/variables.css

@@ -190,6 +190,8 @@
   --radius-medium: 5px;
   --radius-large: 9px;
 
+  --outline-hover: 0 0 0 3px var(--color-highlight);
+
   /** Layout */
   --max-width: 80rem;
 }

package/src/layout/box/box.module.css

@@ -15,6 +15,17 @@
   border-radius: 0 0 var(--radius-medium) var(--radius-medium);
 }
 
+.outlineHover {
+  transition: var(--transition-out);
+}
+
+.outlineHover:focus,
+.outlineHover:active,
+.outlineHover:hover {
+  box-shadow: var(--outline-hover);
+  transition: var(--transition-in);
+}
+
 .padding-xxxsmall {
   padding: var(--space-xxxsmall);
 }

package/src/layout/box/box.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Box } from '.';
+
+export default {
+  title: 'Layout/Box',
+  component: Box,
+  decorators: [getWrapperDecorator()],
+};
+
+const Template = (props: any) => <Box style={{ border: '1px dotted magenta' }} {...props}>Lorem ipsum</Box>;
+
+export const Default = Template.bind({});
+
+export const WithPadding = Template.bind({});
+WithPadding.args = {
+  padding: 'medium',
+};
+
+export const WithHorizontalPadding = Template.bind({});
+WithHorizontalPadding.args = {
+  horizontalPadding: 'medium',
+};
+
+export const WithVerticalPadding = Template.bind({});
+WithVerticalPadding.args = {
+  verticalPadding: 'medium',
+};
+
+export const WithHorizontalAndVerticalPadding = Template.bind({});
+WithHorizontalAndVerticalPadding.args = {
+  padding: ['xxsmall', 'medium'],
+};
+
+export const WithOutline = Template.bind({});
+WithOutline.args = {
+  outline: true,
+};
+
+export const WithOutlineHover = Template.bind({});
+WithOutlineHover.args = {
+  outlineHover: true,
+};

package/src/layout/box/box.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../constants';
+// @ts-ignore
+import css from './box.module.css';
+
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+  padding?: typeof SPACES | Array<typeof SPACES>;
+  horizontalPadding?: string;
+  verticalPadding?: string;
+  outline?: boolean;
+  outlineHover?: boolean;
+}
+
+export const Box = (props: BoxProps) => {
+  const {
+    className = '',
+    as: Component = 'div',
+    padding = NO_SPACE,
+    horizontalPadding = '',
+    verticalPadding = '',
+    outline = false,
+    outlineHover = false,
+    ...restProps
+  } = props;
+
+  const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(
+    padding,
+  )
+    ? [null, ...padding]
+    : [padding, verticalPadding, horizontalPadding];
+
+  const rootClassName = cx(
+    css.root,
+    className,
+    resolvedPadding && css[`padding-${resolvedPadding}`],
+    resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`],
+    resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`],
+    outline && css.outline,
+    outlineHover && css.outlineHover,
+  );
+
+  return <Component {...restProps} className={rootClassName} />;
+};

package/src/layout/box/index.ts

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

package/src/ui/container/container.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Container } from '.';
+
+export default {
+  title: 'UI/Container',
+  component: Container,
+};
+
+export const Default = () => (
+  <Container style={{ background: 'white' }}>
+    <div
+      style={{
+        background: 'white',
+        padding: '24px',
+      }}
+    >
+      Content
+    </div>
+  </Container>
+);
+
+Default.decorators = [
+  (Story: React.FunctionComponent) => (
+    <div style={{ background: 'hotpink' }}>
+      <Story />
+    </div>
+  ),
+];

package/src/ui/container/container.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import cx from 'classnames';
+
+// @ts-ignore
+import css from './container.module.css';
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
+
+export const Container = ({
+  as: Component = 'div',
+  className = '',
+  ...restProps
+}: ContainerProps) => (
+  <Component className={cx(css.root, className)}>
+    <div className={css.inner} {...restProps} />
+  </Component>
+);

package/src/ui/container/index.ts

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

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

@@ -25,8 +25,7 @@
 .button:focus,
 .button:active {
   outline: none;
-  box-shadow: var(--shadow-layer);
-  border-color: var(--color-outline-dark);
+  box-shadow: var(--outline-hover);
   color: var(--color-text);
 }
 

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

@@ -83,11 +83,7 @@
 .filterStandalone:active .filterCheckbox,
 .filterStandalone:focus .filterCheckbox {
   z-index: var(--layout-xlow); /* show collapsed border */
-  box-shadow: var(--shadow-layer);
-}
-
-.filterStandalone:hover .filterCheckbox {
-  border-color: var(--color-outline-dark);
+  box-shadow: var(--outline-hover);
   color: var(--color-text);
 }
 

package/src/ui/input/input.module.css

@@ -1,6 +1,6 @@
 .root {
-  border: 1px solid var(--color-outline);;
-  border-radius: 0;
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
   transition: var(--transition-in);
@@ -25,8 +25,7 @@
 }
 
 .root:focus {
-  border-color: var(--color-outline-dark);
-  box-shadow: var(--shadow-layer);
+  box-shadow: var(--outline-hover);
   color: inherit;
   transition: var(--transition-out);
 }

package/types/components/index.d.ts

@@ -6,6 +6,7 @@ export { BundlePackages } from "./bundle-packages";
 export { BundleModules } from "./bundle-modules";
 export { ComponentLink } from "./component-link";
 export { Delta } from "./delta";
+export { InsightIcon } from "./insight-icon";
 export { Insights } from "./insights";
 export { JobName } from "./job-name";
 export { JobHeader } from "./job-header";

package/types/components/insight-icon/index.d.ts

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

package/types/components/insight-icon/insight-icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InsightType } from '@bundle-stats/utils';
+interface InsightIconProps extends React.HTMLAttributes<'span'> {
+    type: InsightType;
+}
+export declare const InsightIcon: (props: InsightIconProps) => JSX.Element;
+export {};

package/types/components/insights/insights.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import { JobInsightsInfo } from '@bundle-stats/utils';
 interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {
-    duplicatePackages: any;
-    newPackages: any;
+    insights: JobInsightsInfo;
     customComponentLink?: React.ElementType;
 }
 export declare const Insights: (props: InsightsProps) => JSX.Element;

package/types/layout/box/box.d.ts

@@ -1,26 +1,12 @@
-export function Box(props: any): JSX.Element;
-export namespace Box {
-    namespace defaultProps {
-        export const className: string;
-        export const as: string;
-        export { NO_SPACE as padding };
-        export const horizontalPadding: string;
-        export const verticalPadding: string;
-        export const outline: boolean;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-        export const padding: PropTypes.Requireable<NonNullable<string | (string | null | undefined)[] | null | undefined>>;
-        const horizontalPadding_1: PropTypes.Requireable<string>;
-        export { horizontalPadding_1 as horizontalPadding };
-        const verticalPadding_1: PropTypes.Requireable<string>;
-        export { verticalPadding_1 as verticalPadding };
-        const outline_1: PropTypes.Requireable<boolean>;
-        export { outline_1 as outline };
-    }
+import React from 'react';
+import { SPACES } from '../../constants';
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
+    padding?: typeof SPACES | Array<typeof SPACES>;
+    horizontalPadding?: string;
+    verticalPadding?: string;
+    outline?: boolean;
+    outlineHover?: boolean;
 }
-import { NO_SPACE } from "../../constants";
-import PropTypes from "prop-types";
+export declare const Box: (props: BoxProps) => JSX.Element;
+export {};

package/types/layout/box/index.d.ts

@@ -1 +1 @@
-export { Box } from "./box";
+export * from './box';

package/types/ui/container/container.d.ts

@@ -1,18 +1,6 @@
-export function Container({ className, as: Component, ...restProps }: {
-    [x: string]: any;
-    className: any;
-    as: any;
-}): JSX.Element;
-export namespace Container {
-    namespace defaultProps {
-        const className: string;
-        const as: string;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-    }
+import React from 'react';
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
 }
-import PropTypes from "prop-types";
+export declare const Container: ({ as: Component, className, ...restProps }: ContainerProps) => JSX.Element;
+export {};

package/types/ui/container/index.d.ts

@@ -1 +1 @@
-export { Container } from "./container";
+export * from './container';

package/src/layout/box/box.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { NO_SPACE, SPACES } from '../../constants';
-import css from './box.module.css';
-
-export const Box = (props) => {
-  const {
-    className,
-    as: Component,
-    padding,
-    horizontalPadding,
-    verticalPadding,
-    outline,
-    ...restProps
-  } = props;
-
-  const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(
-    padding,
-  )
-    ? [null, ...padding]
-    : [padding, verticalPadding, horizontalPadding];
-
-  const rootClassName = cx(
-    css.root,
-    className,
-    resolvedPadding && css[`padding-${resolvedPadding}`],
-    resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`],
-    resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`],
-    outline && css.outline,
-  );
-
-  return <Component {...restProps} className={rootClassName} />;
-};
-
-Box.defaultProps = {
-  className: '',
-  as: 'div',
-  padding: NO_SPACE,
-  horizontalPadding: '',
-  verticalPadding: '',
-  outline: false,
-};
-
-Box.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Rendered component */
-  as: PropTypes.elementType,
-
-  /** Padding space size */
-  padding: PropTypes.oneOfType([
-    PropTypes.oneOf(SPACES),
-    PropTypes.arrayOf(PropTypes.oneOf(SPACES)),
-  ]),
-
-  /** Horizonatl padding space size */
-  horizontalPadding: PropTypes.oneOf(SPACES),
-
-  /** Vertical padding space size */
-  verticalPadding: PropTypes.oneOf(SPACES),
-
-  /** Outline flag */
-  outline: PropTypes.bool,
-};

package/src/layout/box/index.js

@@ -1 +0,0 @@
-export { Box } from './box';

package/src/ui/container/container.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './container.module.css';
-
-export const Container = ({ className, as: Component, ...restProps }) => (
-  <Component className={cx(css.root, className)}>
-    <div className={css.inner} {...restProps} />
-  </Component>
-);
-
-Container.defaultProps = {
-  className: '',
-  as: 'div',
-};
-
-Container.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Custom component */
-  as: PropTypes.elementType,
-};

package/src/ui/container/index.js

@@ -1 +0,0 @@
-export { Container } from './container';