@progressiveui/react 1.22.0

package/src/components/InfoBar/InfoBar.test.tsx

@@ -0,0 +1,46 @@
+//import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import InfoBar from "./InfoBar";
+
+describe("InfoBar Component", () => {
+  // Test basic rendering
+  it("renders the InfoBar with content", () => {
+    render(<InfoBar>Important Information</InfoBar>);
+    expect(screen.getByText("Important Information")).toBeInTheDocument();
+  });
+
+  // Test custom class name
+  it("applies custom class names", () => {
+    const customClass = "my-custom-class";
+    render(<InfoBar className={customClass}>Important Information</InfoBar>);
+    expect(screen.getByText("Important Information").parentNode).toHaveClass(
+      customClass
+    );
+  });
+
+  // Test id attribute
+  it("sets id when provided", () => {
+    const id = "info-bar-id";
+    render(<InfoBar id={id}>Important Information</InfoBar>);
+    expect(
+      screen.getByText("Important Information").parentNode
+    ).toHaveAttribute("id", id);
+  });
+
+  // Test different page widths
+  it("renders with specified page width", () => {
+    const pageWidth = "lg";
+    render(<InfoBar pageWidth={pageWidth}>Important Information</InfoBar>);
+    // Assuming the pageWidth prop affects the class of the Wrapper component
+    expect(screen.getByText("Important Information")).toHaveClass(
+      `wfp--wrapper--width-${pageWidth}`
+    );
+  });
+
+  // Snapshot test
+  it("matches snapshot", () => {
+    const { asFragment } = render(<InfoBar>Snapshot InfoBar</InfoBar>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/InfoBar/InfoBar.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Wrapper from '../Wrapper';
+import useSettings from '../../hooks/useSettings';
+import { ScreenSize } from '../../utils';
+
+/** The InfoBar shows very important information on top of the page. */
+interface InfoBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   *  `pageWidth` for the `<Wrapper />` component
+   */
+  pageWidth?: ScreenSize;
+  /**
+   * Additional `className` for the `<Wrapper />` component
+   */
+  wrapperClassName?: string;
+  /**
+   * The CSS class name to be placed on the wrapping element.
+   */
+  className?: string;
+  /**
+   * Additional `id` provided to the wrapping element
+   */
+  id?: string;
+}
+
+const InfoBar: React.FC<InfoBarProps> = ({
+  children,
+  className,
+  id,
+  pageWidth,
+}) => {
+  const { prefix } = useSettings();
+
+  const wrapperClasses = classNames(`${prefix}--info-bar`, className);
+
+  return (
+    <div id={id} className={wrapperClasses}>
+      <Wrapper pageWidth={pageWidth}>{children}</Wrapper>
+    </div>
+  );
+};
+
+InfoBar.displayName = 'InfoBar';
+
+export default InfoBar;

package/src/components/InfoBar/README.mdx

@@ -0,0 +1,5 @@
+### Usage
+
+`InfoBar` will contain the default links.
+
+Do not use it in other places.

package/src/components/InfoBar/__snapshots__/InfoBar.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoBar Component matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="wfp--info-bar"
+  >
+    <div
+      class="wfp--wrapper"
+    >
+      Snapshot InfoBar
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/InfoBar/index.ts

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

package/src/components/InlineLoading/InlineLoading-FCold.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+import Loading from '../Loading';
+
+const InlineLoading = (props) => {
+  const { className, success, description, onSuccess, successDelay, ...other } =
+    props;
+
+  const { prefix } = useSettings();
+
+  const loadingClasses = classNames(`${prefix}--inline-loading`, className);
+
+  const getLoading = () => {
+    if (success) {
+      setTimeout(() => {
+        if (onSuccess) {
+          onSuccess();
+        }
+      }, successDelay);
+
+      return (
+        <svg
+          className={`${prefix}--inline-loading__checkmark-container ${prefix}--inline-loading__svg`}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 10 10">
+          <polyline
+            className={`${prefix}--inline-loading__checkmark`}
+            points="0.74 3.4 3.67 6.34 9.24 0.74"
+          />
+        </svg>
+      );
+    }
+
+    return <Loading small withOverlay={false} />;
+  };
+
+  const loadingText = (
+    <p className={`${prefix}--inline-loading__text`}>{description}</p>
+  );
+
+  return (
+    <div className={loadingClasses} {...other}>
+      <div className={`${prefix}--inline-loading__animation`}>
+        {getLoading()}
+      </div>
+      {description && loadingText}
+    </div>
+  );
+};
+
+InlineLoading.propTypes = {
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the load was successful
+   */
+  success: PropTypes.bool,
+
+  /**
+   * Specify the description for the inline loading text
+   */
+  description: PropTypes.node,
+
+  /**
+   * Provide an optional handler to be invoked when <InlineLoading> is
+   * successful
+   */
+  onSuccess: PropTypes.func,
+
+  /**
+   * Provide a delay for the `setTimeout` for success
+   */
+  successDelay: PropTypes.number,
+};
+
+InlineLoading.defaultProps = {
+  success: false,
+  successDelay: 1500,
+};
+
+export default InlineLoading;

package/src/components/InlineLoading/InlineLoading-Old.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import Loading from "../Loading";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+class InlineLoading extends React.Component {
+  static propTypes = {
+    prefix: PropTypes.string.isRequired,
+    /**
+     * Specify a custom className to be applied to the container node
+     */
+    className: PropTypes.string,
+
+    /**
+     * Specify whether the load was successful
+     */
+    success: PropTypes.bool,
+
+    /**
+     * Specify the description for the inline loading text
+     */
+    description: PropTypes.node,
+
+    /**
+     * Provide an optional handler to be invoked when <InlineLoading> is
+     * successful
+     */
+    onSuccess: PropTypes.func,
+
+    /**
+     * Provide a delay for the `setTimeout` for success
+     */
+    successDelay: PropTypes.number,
+  };
+
+  static defaultProps = {
+    success: false,
+    successDelay: 1500,
+  };
+
+  render() {
+    const {
+      prefix,
+      className,
+      success,
+      description,
+      onSuccess,
+      successDelay,
+      ...other
+    } = this.props;
+
+    const loadingClasses = classNames(`${prefix}--inline-loading`, className);
+
+    const getLoading = () => {
+      if (success) {
+        setTimeout(() => {
+          if (onSuccess) {
+            onSuccess();
+          }
+        }, successDelay);
+
+        return (
+          <svg
+            className={`${prefix}--inline-loading__checkmark-container ${prefix}--inline-loading__svg`}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 10 10"
+          >
+            <polyline
+              className={`${prefix}--inline-loading__checkmark`}
+              points="0.74 3.4 3.67 6.34 9.24 0.74"
+            />
+          </svg>
+        );
+      }
+
+      return <Loading small withOverlay={false} />;
+    };
+
+    const loadingText = (
+      <p className={`${prefix}--inline-loading__text`}>{description}</p>
+    );
+
+    return (
+      <div className={loadingClasses} {...other}>
+        <div className={`${prefix}--inline-loading__animation`}>
+          {getLoading()}
+        </div>
+        {description && loadingText}
+      </div>
+    );
+  }
+}
+
+export default withWFPCoreSettings(InlineLoading);

package/src/components/InlineLoading/InlineLoading-test.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import InlineLoading from '../InlineLoading';
+import Loading from '../Loading';
+import { mount } from 'enzyme';
+
+describe('Loading', () => {
+  describe('Default state renders as expected', () => {
+    const wrapper = mount(<InlineLoading className="extra-class" />);
+    const container = wrapper.find('.wfp--inline-loading');
+
+    it('should render with a container', () => {
+      expect(container.length).toEqual(1);
+    });
+
+    it('shoud render a loader by default', () => {
+      expect(wrapper.find(Loading).length).toEqual(1);
+    });
+
+    it('container has the expected classes', () => {
+      expect(container.hasClass('wfp--inline-loading')).toEqual(true);
+    });
+
+    it('should add extra classes that are passed via className', () => {
+      expect(container.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('should render an animation container', () => {
+      expect(wrapper.find('.wfp--inline-loading__animation').length).toEqual(1);
+    });
+
+    it('should not render any text', () => {
+      expect(wrapper.find('.wfp--inline-loading__text').length).toEqual(0);
+    });
+
+    it('should not render the SUCCESS state', () => {
+      expect(
+        wrapper.find('.wfp--inline-loading__checkmark-container').length
+      ).toEqual(0);
+    });
+  });
+
+  describe('Text rendered as expected', () => {
+    const wrapper = mount(
+      <InlineLoading className="extra-class" description="Loading Things..." />
+    );
+
+    it('should render the provided description', () => {
+      expect(wrapper.find('.wfp--inline-loading__text').length).toEqual(1);
+      expect(wrapper.find('.wfp--inline-loading__text').text()).toEqual(
+        'Loading Things...'
+      );
+    });
+  });
+
+  describe('Success state should render properly', () => {
+    const wrapper = mount(<InlineLoading success />);
+
+    it('should render the success animation', () => {
+      expect(
+        wrapper.find('.wfp--inline-loading__checkmark-container').length
+      ).toEqual(1);
+    });
+
+    it('should render the checkmark within the success animation', () => {
+      expect(wrapper.find('.wfp--inline-loading__checkmark').length).toEqual(1);
+    });
+
+    it('should not render the loading component', () => {
+      expect(wrapper.find(Loading).length).toEqual(0);
+    });
+
+    it('should call the onSuccess function after a delay', done => {
+      mount(
+        <InlineLoading
+          success
+          onSuccess={() => {
+            done();
+          }}
+        />
+      );
+    });
+  });
+});

package/src/components/InlineLoading/InlineLoading.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import markdown from "./README.mdx";
+import InlineLoading from ".";
+
+export default {
+  title: "Components/UI Elements/InlineLoading",
+  component: InlineLoading,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const InlineLoadingDefault: Story = {
+  render: (args) => <InlineLoading {...args} />,
+  args: {
+    description: "submitting...",
+  },
+  parameters: {},
+};
+
+export const Success = (args) => <InlineLoading {...args}>Text</InlineLoading>;
+
+Success.args = {
+  success: true,
+};
+
+const successmsg = `
+This is to show that loading has successfully completed
+`;
+
+Success.story = {
+  parameters: {
+    docs: {
+      storyDescription: successmsg,
+    },
+  },
+};

package/src/components/InlineLoading/InlineLoading.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import Loading from "../Loading";
+
+interface InlineLoadingProps {
+  /**
+   * Specify whether the load was successful
+   */
+  success?: boolean;
+  /**
+   * Specify the description for the inline loading text
+   */
+  description?: React.ReactNode;
+  /**
+   * Provide a delay for the `setTimeout` for success
+   */
+  successDelay?: number;
+  /**
+   * Provide an optional handler to be invoked when <InlineLoading> is
+   * successful
+   */
+  onSuccess?: () => void;
+  /**
+   * Specify a custom className to be applied to the container node
+   */
+  className?: string;
+}
+
+const InlineLoading: React.FC<InlineLoadingProps> = (props) => {
+  const { className, success, description, onSuccess, successDelay, ...other } =
+    props;
+
+  const { prefix } = useSettings();
+
+  const loadingClasses = classNames(`${prefix}--inline-loading`, className);
+
+  const getLoading = () => {
+    if (success) {
+      setTimeout(() => {
+        if (onSuccess) {
+          onSuccess();
+        }
+      }, successDelay);
+
+      return (
+        <svg
+          className={`${prefix}--inline-loading__checkmark-container ${prefix}--inline-loading__svg`}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 10 10"
+        >
+          <polyline
+            className={`${prefix}--inline-loading__checkmark`}
+            points="0.74 3.4 3.67 6.34 9.24 0.74"
+          />
+        </svg>
+      );
+    }
+
+    return <Loading small withOverlay={false} />;
+  };
+
+  const loadingText = (
+    <p className={`${prefix}--inline-loading__text`}>{description}</p>
+  );
+
+  return (
+    <div className={loadingClasses} {...other}>
+      <div className={`${prefix}--inline-loading__animation`}>
+        {getLoading()}
+      </div>
+      {description && loadingText}
+    </div>
+  );
+};
+
+InlineLoading.displayName = "InlineLoading";
+
+export default InlineLoading;

package/src/components/InlineLoading/README.mdx

@@ -0,0 +1,89 @@
+## Usage
+
+**Inline loading** spinners are used when performing actions. They help notify user’s that their action is being processed. The waiting experience is a crucial design opportunity. Although it may not be obvious what is occurring on the back-end, we can communicate clearly to reassure the user that progress is happening.
+
+It is best practice to use an Inline loading component for any Create, Update, or Delete actions. The component provides feedback to the user about the progress of the action they took. This could be in a table, after a primary or secondary button click, or even in a modal.
+
+#### When to use
+
+- Use an inline loading component for any action that cannot be performed instantly and will only require a short time to process.
+- Use when retrieving or refreshing small data amounts, such as status.
+
+#### When not to use
+
+- Don’t use inline loading for full page loads, use skeleton states instead.
+- Don’t trigger inline loading on more than one item or action at a time, unless on initial page load or refresh.
+
+### Usage with react
+
+```js
+import { InlineLoading } from "@progressiveui/react";
+```
+
+```js
+
+{loading ?(<InlineLoading
+  iconDescription="Active loading indicator"
+  description="Loading data..."
+  success={false}
+  onSuccess={onSuccess}
+/>) : <TheContentAfterLoading />
+)}
+```
+
+### JavaScript
+
+#### Getting component class reference
+
+##### ES2015
+
+```javascript
+import { InlineLoading } from "carbon-components";
+```
+
+##### With pre-build bundle (`carbon-components.min.js`)
+
+```javascript
+var InlineLoading = CarbonComponents.InlineLoading;
+```
+
+#### Instantiating
+
+```javascript
+// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
+InlineLoading.create(document.getElementById("my-inline-loading"));
+```
+
+#### Static properties
+
+| Name   | Type   | Description                                                                  |
+| ------ | ------ | ---------------------------------------------------------------------------- |
+| states | Object | The loading states. Contains `INACTIVE`, `ACTIVE` and `FINISHED` properties. |
+
+#### Public Methods
+
+| Name     | Params         | Description                             |
+| -------- | -------------- | --------------------------------------- |
+| release  |                | Deletes the instance                    |
+| setState | state : string | Sets the active/inactive/finished state |
+
+##### Example - Transitioning the loading spinner to the finished state
+
+```javascript
+// `#my-inline-loading` is an element with `[data-inline-loading]` attribute
+var inlineLoadingInstance = InlineLoading.create(
+  document.getElementById("my-inline-loading")
+);
+inlineLoadingInstance.setState(InlineLoading.states.FINISHED);
+```
+
+#### Options
+
+| Option               | Default Selector                    | Description                                                     |
+| -------------------- | ----------------------------------- | --------------------------------------------------------------- |
+| selectorInit         | [data-inline-loading]               | The CSS selector to find the inline loading components          |
+| selectorSpinner      | [data-inline-loading-spinner]       | The CSS selector to find the spinner                            |
+| selectorFinished     | [data-inline-loading-finished]      | The CSS selector to find the "finished" icon                    |
+| selectorTextActive   | [data-inline-loading-text-active]   | The CSS selector to find the text describing the active state   |
+| selectorTextFinished | [data-inline-loading-text-finished] | The CSS selector to find the text describing the finished state |
+| classLoadingStop     | .wfp--loading--stop                 | The CSS class for spinner's stopped state                       |

package/src/components/InlineLoading/index.ts

@@ -0,0 +1 @@
+export { default } from "./InlineLoading";

package/src/components/InlineLoading/inline-loading.config.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const { prefix } = require('../../globals/js');
+const { componentsX } = require('../../globals/js/feature-flags');
+
+module.exports = {
+  context: {
+    prefix,
+    componentsX,
+  },
+  variants: [
+    {
+      name: 'default',
+      label: 'Inline Loading',
+      context: {
+        showToggleButton: true,
+      },
+    },
+  ],
+};

package/src/components/InlineLoading/inline-loading.hbs

@@ -0,0 +1,28 @@
+<!-- 
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<!-- Loading Success State -->
+<div data-inline-loading class="{{@root.prefix}}--inline-loading">
+  <div class="{{@root.prefix}}--inline-loading__animation">
+    <div data-inline-loading-spinner class="{{@root.prefix}}--loading {{@root.prefix}}--loading--small">
+      <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
+        {{#if componentsX}}
+        <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="37.5" />
+        {{/if}}
+        <circle {{#if componentsX}}class="{{@root.prefix}}--loading__stroke"{{/if}} cx="0" cy="0" r="37.5" />
+      </svg>
+    </div>
+    <svg data-inline-loading-finished hidden class="{{@root.prefix}}--inline-loading__checkmark-container {{@root.prefix}}--inline-loading__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+      <polyline class="{{@root.prefix}}--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
+    </svg>
+  </div>
+  <p data-inline-loading-text-active class="{{@root.prefix}}--inline-loading__text">Loading data...</p>
+  <p data-inline-loading-text-finished hidden class="{{@root.prefix}}--inline-loading__text">Data loaded.</p>
+</div>
+{{#if showToggleButton}}
+  <button data-inline-loading-demo-button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary">Toggle state</button>
+{{/if}}