<StatusIndicator/> - New component (#5024)

Author: EgoziE

.wuf/components.json

@@ -460,5 +460,8 @@
   },
   "CustomModal": {
     "path": "src/CustomModal"
+  },
+  "StatusIndicator": {
+    "path": "src/StatusIndicator"
   }
 }

src/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './StatusIndicator.st.css';
+import Tooltip from '../Tooltip/TooltipNext';
+import FormFieldWarningFilled from 'wix-ui-icons-common/system/FormFieldWarningFilled';
+import FormFieldErrorFilled from 'wix-ui-icons-common/system/FormFieldErrorFilled';
+import Loader from '../Loader';
+import { dataHooks, STATUS, TOOLTIP_PLACEMENT } from './constants';
+
+/** StatusIndicator */
+class StatusIndicator extends React.PureComponent {
+  _renderStatus = () => {
+    switch (this.props.status) {
+      case STATUS.WARNING:
+        return <FormFieldWarningFilled />;
+      case STATUS.LOADING:
+        return <Loader size="tiny" />;
+      case STATUS.ERROR:
+      default:
+        return <FormFieldErrorFilled />;
+    }
+  };
+
+  render() {
+    const { dataHook, status, message, tooltipPlacement } = this.props;
+
+    return (
+      <div {...styles('root', { status }, this.props)} data-hook={dataHook}>
+        {message ? (
+          <Tooltip
+            dataHook={dataHooks.tooltip}
+            appendTo="window"
+            placement={tooltipPlacement}
+            exitDelay={100}
+            content={message}
+            maxWidth={250}
+          >
+            {this._renderStatus()}
+          </Tooltip>
+        ) : (
+          this._renderStatus()
+        )}
+      </div>
+    );
+  }
+}
+
+StatusIndicator.displayName = 'StatusIndicator';
+
+StatusIndicator.propTypes = {
+  /** Applied as data-hook HTML attribute that can be used in the tests */
+  dataHook: PropTypes.string,
+
+  /** A css class to be applied to the component's root element */
+  className: PropTypes.string,
+
+  /** The indication type */
+  status: PropTypes.oneOf(['error', 'warning', 'loading']),
+
+  /** A tooltip message */
+  message: PropTypes.string,
+
+  /** The tooltip Placement */
+  tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+};
+
+StatusIndicator.defaultProps = {
+  status: 'error',
+  tooltipPlacement: 'top',
+};
+
+export default StatusIndicator;

src/StatusIndicator/StatusIndicator.meta.js

@@ -0,0 +1,8 @@
+import StatusIndicator from './StatusIndicator';
+import Registry from '@ui-autotools/registry';
+
+const metadata = Registry.getComponentMetadata(StatusIndicator);
+
+metadata.exportedFrom({
+  path: 'src/StatusIndicator/StatusIndicator.js',
+});

src/StatusIndicator/StatusIndicator.st.css

@@ -0,0 +1,18 @@
+:import {
+  -st-from: '../Foundation/stylable/colors.st.css';
+  -st-named: R10, Y10;
+}
+
+.root {
+  -st-states: status(enum(error, warning));
+
+  width: 18px;
+  height: 18px;
+
+  /* Error is the default */
+  color: value(R10);
+}
+
+.root:status(warning) {
+  color: value(Y10);
+}

src/StatusIndicator/StatusIndicator.uni.driver.d.ts

@@ -0,0 +1,6 @@
+import { BaseUniDriver } from 'wix-ui-test-utils/unidriver';
+
+export interface StatusIndicatorDriver extends BaseUniDriver {
+  hasTooltip(): Promise<boolean>;
+  getTooltipText(): Promise<string>;
+}

src/StatusIndicator/StatusIndicator.uni.driver.js

@@ -0,0 +1,31 @@
+import { baseUniDriverFactory } from 'wix-ui-test-utils/base-driver';
+import { tooltipDriverFactory } from '../Tooltip/TooltipNext/Tooltip.uni.driver';
+import { dataHooks } from './constants';
+
+export const statusIndicatorDriverFactory = (base, body) => {
+  return {
+    ...baseUniDriverFactory(base, body),
+
+    hasTooltip: async () => {
+      const tooltipDriver = tooltipDriverFactory(
+        base.$(`[data-hook="${dataHooks.tooltip}"]`),
+        body,
+      );
+      return await tooltipDriver.exists();
+    },
+
+    getTooltipText: async () => {
+      const tooltipDriver = tooltipDriverFactory(
+        base.$(`[data-hook="${dataHooks.tooltip}"]`),
+        body,
+      );
+
+      if (await tooltipDriver.exists()) {
+        await tooltipDriver.mouseEnter();
+        return await tooltipDriver.getTooltipText();
+      } else {
+        throw new Error(`Tooltip doesn't exist`);
+      }
+    },
+  };
+};

src/StatusIndicator/constants.js

@@ -0,0 +1,16 @@
+export const dataHooks = {
+  tooltip: 'status-indicator-tooltip',
+};
+
+export const STATUS = {
+  ERROR: 'error',
+  WARNING: 'warning',
+  LOADING: 'loading',
+};
+
+export const TOOLTIP_PLACEMENT = {
+  TOP: 'top',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+};

src/StatusIndicator/docs/index.story.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  header,
+  tabs,
+  tab,
+  description,
+  importExample,
+  title,
+  columns,
+  divider,
+  code as baseCode,
+  playground,
+  api,
+  testkit,
+} from 'wix-storybook-utils/Sections';
+
+import { storySettings } from '../test/storySettings';
+import allComponents from '../../../stories/utils/allComponents';
+import StatusIndicator from '..';
+import { STATUS, TOOLTIP_PLACEMENT } from '../constants';
+
+const code = config => baseCode({ components: allComponents, ...config });
+
+export default {
+  category: storySettings.category,
+  storyName: 'StatusIndicator',
+
+  component: StatusIndicator,
+  componentPath: '..',
+
+  componentProps: {
+    message: 'Tooltip',
+    status: 'error',
+    tooltipPlacement: 'top',
+  },
+
+  exampleProps: {
+    status: Object.values(STATUS).map(status => ({
+      label: status,
+      value: status,
+    })),
+    tooltipPlacement: Object.values(TOOLTIP_PLACEMENT).map(placement => ({
+      label: placement,
+      value: placement,
+    })),
+  },
+
+  sections: [
+    header({
+      sourceUrl:
+        'https://github.com/wix/wix-style-react/tree/master/src/StatusIndicator/',
+      component: (
+        <div
+          style={{
+            display: 'grid',
+            gridGap: '10px',
+            gridAutoFlow: 'column',
+            width: 'fit-content',
+          }}
+        >
+          <StatusIndicator status="error" />
+          <StatusIndicator status="warning" />
+          <StatusIndicator status="loading" />
+        </div>
+      ),
+    }),
+
+    tabs([
+      tab({
+        title: 'Description',
+        sections: [
+          columns([
+            description({
+              title: 'Description',
+              text: 'An icon with tooltip indicating a certain status.',
+            }),
+          ]),
+
+          columns([
+            importExample(
+              "import StatusIndicator from 'wix-style-react/StatusIndicator';",
+            ),
+          ]),
+
+          divider(),
+
+          title('Examples'),
+
+          columns([
+            description({
+              title: 'Error',
+            }),
+
+            code({
+              compact: true,
+              source: `<StatusIndicator status="error" message="Error Message"/>`,
+            }),
+          ]),
+
+          columns([
+            description({
+              title: 'Warning',
+            }),
+
+            code({
+              compact: true,
+              source: `<StatusIndicator status="warning" message="Warning Message"/>`,
+            }),
+          ]),
+
+          columns([
+            description({
+              title: 'Loading',
+            }),
+
+            code({
+              compact: true,
+              source: `<StatusIndicator status="loading" message="Loading Message"/>`,
+            }),
+          ]),
+
+          columns([
+            description({
+              title: 'Tooltip Placement',
+              text: `The component's tooltip placement can be one of the following:`,
+            }),
+
+            code({
+              compact: true,
+              source: `
+<Layout cols={4}>
+  <Cell span={1}>
+    <Box marginBottom={1}>top:</Box>
+    <StatusIndicator status="error" message="top" tooltipPlacement="top" />
+  </Cell>
+  <Cell span={1}>
+    <Box marginBottom={1}>left:</Box>
+    <StatusIndicator status="error" message="left" tooltipPlacement="left" />
+  </Cell>
+  <Cell span={1}>
+    <Box marginBottom={1}>bottom:</Box>
+    <StatusIndicator status="error" message="bottom" tooltipPlacement="bottom" />
+  </Cell>
+  <Cell span={1}>
+    <Box marginBottom={1}>right:</Box>
+    <StatusIndicator status="error" message="right" tooltipPlacement="right" />
+  </Cell>
+</Layout>
+`,
+            }),
+          ]),
+        ],
+      }),
+
+      ...[
+        { title: 'API', sections: [api()] },
+        { title: 'Testkit', sections: [testkit()] },
+        { title: 'Playground', sections: [playground()] },
+      ].map(tab),
+    ]),
+  ],
+};

src/StatusIndicator/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export type StatusIndicatorState = 'error' | 'warning' | 'loading';
+export type StatusIndicatorTooltipPlacement =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left';
+
+export interface StatusIndicatorProps {
+  dataHook?: string;
+  className?: string;
+  status?: StatusIndicatorState;
+  message?: string;
+  tooltipPlacement?: StatusIndicatorTooltipPlacement;
+}
+
+export default class StatusIndicator extends React.PureComponent<
+  StatusIndicatorProps
+> {}

src/StatusIndicator/index.js

@@ -0,0 +1 @@
+export { default } from './StatusIndicator.js';

src/StatusIndicator/test/StatusIndicator.private.uni.driver.js

@@ -0,0 +1,7 @@
+import { statusIndicatorDriverFactory as publicDriverFactory } from '../StatusIndicator.uni.driver';
+
+export const statusIndicatorPrivateDriverFactory = (base, body) => {
+  return {
+    ...publicDriverFactory(base, body),
+  };
+};

src/StatusIndicator/test/StatusIndicator.spec.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { createRendererWithUniDriver, cleanup } from '../../../test/utils/unit';
+
+import StatusIndicator from '../StatusIndicator';
+import { statusIndicatorPrivateDriverFactory } from './StatusIndicator.private.uni.driver';
+
+describe('StatusIndicator', () => {
+  const render = createRendererWithUniDriver(
+    statusIndicatorPrivateDriverFactory,
+  );
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render', async () => {
+    const { driver } = render(<StatusIndicator />);
+
+    expect(await driver.exists()).toBe(true);
+  });
+
+  it('with no tooltip', async () => {
+    const { driver } = render(<StatusIndicator />);
+
+    expect(await driver.hasTooltip()).toBe(false);
+  });
+
+  it('with tooltip', async () => {
+    const message = 'Hello World';
+    const { driver } = render(<StatusIndicator message={message} />);
+
+    expect(await driver.hasTooltip()).toBe(true);
+    expect(await driver.getTooltipText()).toBe(message);
+  });
+});