@progressiveui/react 1.22.0

package/src/components/Card/CardExternal.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import Tag from "../Tag";
+
+import useSettings from "../../hooks/useSettings";
+
+interface CardExternalProps {
+  label?: string;
+  labelStatus?: boolean;
+  interactive?: boolean;
+  image?: string;
+  heading?: string;
+  subHeading?: string;
+  caption?: string;
+  tag?: string;
+  children?: React.ReactNode;
+  className?: string;
+  truncated?: boolean;
+}
+
+const CardExternal = ({
+  label,
+  labelStatus,
+  interactive,
+  image,
+  heading,
+  subHeading,
+  caption,
+  tag,
+  children,
+  className,
+  ...other
+}: CardExternalProps) => {
+  const { prefix } = useSettings();
+  const ref = useRef<HTMLInputElement>(null);
+  const supportiveTextFontSize = 14;
+  const supportiveTextLineHeight = 1.5;
+
+  // Set a maximum of 3 lines of supportive text by default
+  const [supportiveTextHeight, setsupportiveTextHeight] = useState(
+    supportiveTextFontSize * supportiveTextLineHeight * 3
+  );
+
+  // statusStyle apply different style(color, backgroundColor) based on its active state
+  const statusStyle = labelStatus ? `success` : `neutral`;
+
+  const wrapperClasses = classNames(`${prefix}--card-ext`, {
+    [`${prefix}--card-ext--interactive`]: interactive,
+    [`${className}`]: className,
+  });
+
+  /**
+   * Get the height of the supportive text element.
+   * This is useful to calculate a dynamic maximum amount of line text with final
+   * ellipsis for the "supportive text" element, depending of the available
+   * height.
+   *
+   * Cards' title has no limits in terms of line text, whereas we can decide to
+   * truncate the supportive text at 3 number of lines. The multiline truncation
+   * can be obtained by using the "line clamp" CSS property that truncates text
+   * at a specific number of lines.
+   * The problem is, if we place three cards on a Flexbox/Grid parent, these
+   * cards will have the same height, depending on the highest of the three.
+   * This means that if one card has a multiline title, the other two will grow
+   * in height, showing a significant white space. To fill the latter cards'
+   * white space we need to increase the number of their "supportive text" lines.
+   * To do this we need to divide the "supportive text" element's height by its
+   * font-size and line-height in order to get exact amount of line text that are
+   * needed to fill the extra white space.
+   *
+   */
+  useEffect(() => {
+    if (!ref.current) return;
+    setsupportiveTextHeight(ref.current.offsetHeight);
+  }, [ref]);
+
+  return (
+    /* Also expose a custom classname prop */
+    /**
+     * A prop will establish if the card is either informative (default) or
+     * interactive.
+     * If interactive, a modifier will be added and an animation will be shown
+     * on hover event ("${prefix}--card-ext--interactive").
+     */
+    <div className={wrapperClasses}>
+      {/*
+       * Label is optional.
+       * It can be either 'neutral' (default) or 'success'
+       */}
+      {label && (
+        <div
+          className={`${prefix}--card-ext__label ${prefix}--card-ext__label--${statusStyle}`}
+        >
+          {label}
+        </div>
+      )}
+      <figure className={`${prefix}--card-ext__media`}>
+        <img
+          className={`${prefix}--card-ext__image`}
+          src={image}
+          alt="Card picture"
+        />
+      </figure>
+      {/* If card has actions, show a divider by adding a dedicated modifier handled with a boolean prop */}
+      <div
+        className={`${prefix}--card-ext__info-wrapper ${prefix}--card-ext__info-wrapper--with-divider`}
+      >
+        <div className={`${prefix}--card-ext__primary-title`}>
+          {/* Subheading is optional */}
+          {subHeading && (
+            <p className={`${prefix}--card-ext__subheading`}>{subHeading}</p>
+          )}
+          {heading && (
+            <p className={`${prefix}--card-ext__heading`}>{heading}</p>
+          )}
+        </div>
+        {/* Supportive text is optional */}
+        <div
+          className={
+            other.truncated
+              ? `${prefix}--card-ext__supportive-text ${prefix}--card-ext__supportive-text--truncated`
+              : `${prefix}--card-ext__supportive-text`
+          }
+          ref={ref}
+        >
+          <p
+            style={{
+              WebkitLineClamp: Math.floor(
+                supportiveTextHeight /
+                  supportiveTextLineHeight /
+                  supportiveTextFontSize
+              ),
+            }}
+          >
+            {caption}
+          </p>
+        </div>
+        {/* Tags are optional */}
+        {tag && (
+          <div className={`${prefix}--card-ext__tags`}>
+            <Tag className={`${prefix}--card-ext__tag`} type="custom">
+              {tag}
+            </Tag>
+          </div>
+        )}
+      </div>
+      {/* Better to allow only small buttons for alignment reasons */}
+      {children}
+    </div>
+  );
+};
+
+CardExternal.propTypes = {
+  /**
+   label description for card if any
+  */
+  label: PropTypes.string,
+
+  /**
+   labelStatus is either true or false, it applies  for card if any
+  */
+  labelStatus: PropTypes.bool,
+  image: PropTypes.string,
+  heading: PropTypes.string,
+  subHeading: PropTypes.string,
+  caption: PropTypes.string,
+  tag: PropTypes.string,
+  children: PropTypes.node,
+  interactive: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default CardExternal;

package/src/components/Card/README.mdx

@@ -0,0 +1 @@
+

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card';
+export { default as CardExternal } from './CardExternal';

package/src/components/Checkbox/Checkbox-old.js

@@ -0,0 +1,132 @@
+/**
+ * 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';
+
+const Checkbox = React.forwardRef(function Checkbox(
+  {
+    className,
+    id,
+    labelText,
+    onChange,
+    indeterminate,
+    hideLabel,
+    wrapperClassName,
+    title = '',
+    ...other
+  },
+  ref
+) {
+  const prefix = 'wfp';
+  const labelClasses = classNames(`${prefix}--checkbox-label`, className);
+  const innerLabelClasses = classNames(`${prefix}--checkbox-label-text`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+  });
+  const wrapperClasses = classNames(
+    `${prefix}--form-item`,
+    `${prefix}--checkbox-wrapper`,
+    wrapperClassName
+  );
+
+  return (
+    <div className={wrapperClasses}>
+      <input
+        {...other}
+        type="checkbox"
+        onChange={(evt) => {
+          onChange(evt, { checked: evt.target.checked, id });
+        }}
+        className={`${prefix}--checkbox`}
+        id={id || other.name}
+        ref={(el) => {
+          if (el) {
+            el.indeterminate = indeterminate;
+          }
+          if (typeof ref === 'function') {
+            ref(el);
+          } else if (Object(ref) === ref) {
+            ref.current = el;
+          }
+        }}
+      />
+      <label htmlFor={id} className={labelClasses} title={title || null}>
+        <span className={innerLabelClasses}>{labelText}</span>
+      </label>
+    </div>
+  );
+});
+
+Checkbox.propTypes = {
+  /**
+   * Specify whether the underlying input should be checked
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Specify an optional className to be applied to the <label> node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Specify whether the Checkbox should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Provide an `id` to uniquely identify the Checkbox input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   */
+  indeterminate: PropTypes.bool,
+
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are
+   * exposing to the user
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Receives three arguments: true/false, the checkbox's id, and the dom event.
+   * `(evt, { checked: evt.target.checked, id }) => console.log(evt, checked, id)`
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify a title for the <label> node for the Checkbox
+   */
+  title: PropTypes.string,
+
+  /**
+   * The CSS class name to be placed on the wrapping element
+   */
+  wrapperClassName: PropTypes.string,
+};
+
+Checkbox.defaultProps = {
+  onChange: () => {},
+  indeterminate: false,
+};
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

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

@@ -0,0 +1,205 @@
+import "@testing-library/jest-dom/extend-expect";
+import React from "react";
+import Checkbox from "../Checkbox";
+import CheckboxSkeleton from "../Checkbox/Checkbox.Skeleton";
+import { mount } from "enzyme";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Checkbox", () => {
+  describe("Renders as expected", () => {
+    const wrapper = mount(
+      <Checkbox id="testing" labelText="testingLabel" className="extra-class" />
+    );
+    const label = wrapper.find("label");
+
+    describe("label", () => {
+      it("renders a label", () => {
+        expect(label.length).toEqual(1);
+      });
+
+      it("has the expected classes", () => {
+        expect(label.hasClass(`wfp--checkbox-label`)).toEqual(true);
+      });
+
+      it("has the expected htmlFor value", () => {
+        expect(label.props().htmlFor).toEqual("testing");
+      });
+
+      it("applies extra classes to label", () => {
+        expect(label.hasClass("extra-class")).toEqual(true);
+      });
+
+      describe("input", () => {
+        const input = () => wrapper.find("input");
+
+        it("has id set as expected", () => {
+          expect(input().props().id).toEqual("testing");
+        });
+
+        it("defaultChecked prop sets defaultChecked on input", () => {
+          expect(input().props().defaultChecked).toBeUndefined();
+          wrapper.setProps({ defaultChecked: true });
+          expect(input().props().defaultChecked).toEqual(true);
+        });
+      });
+    });
+  });
+
+  it("disabled prop on component sets disabled prop on input", () => {
+    const wrapper = mount(
+      <Checkbox id="test" labelText="testlabel" disabled />
+    );
+
+    const input = () => wrapper.find("input");
+    expect(input().props().disabled).toEqual(true);
+
+    wrapper.setProps({ disabled: false });
+    expect(input().props().disabled).toEqual(false);
+  });
+
+  it("checked prop on component sets checked prop on input", () => {
+    const wrapper = mount(<Checkbox id="test" labelText="testlabel" checked />);
+
+    const input = () => wrapper.find("input");
+    expect(input().props().checked).toEqual(true);
+
+    wrapper.setProps({ checked: false });
+    expect(input().props().checked).toEqual(false);
+  });
+
+  it("hideLabel hides the label visually", () => {
+    const wrapper = mount(
+      <Checkbox id="test" labelText="testlabel" hideLabel />
+    );
+
+    const label = wrapper.find("label");
+    expect(label.length).toEqual(1);
+    const span = wrapper.find("span");
+    expect(span.hasClass(`wfp--visually-hidden`)).toEqual(true);
+  });
+
+  describe("events", () => {
+    it("should invoke onChange with expected arguments", () => {
+      const onChange = jest.fn();
+      const id = "test-input";
+      const wrapper = mount(
+        <Checkbox labelText="testlabel" id={id} onChange={onChange} />
+      );
+
+      const input = wrapper.find("input");
+      const inputElement = input.instance();
+
+      inputElement.checked = true;
+      wrapper.find("input").simulate("change");
+
+      const call = onChange.mock.calls[0];
+
+      expect(call[0]).toEqual(true);
+      expect(call[1]).toEqual(id);
+      expect(call[2].target).toBe(inputElement);
+    });
+  });
+});
+
+describe("refs", () => {
+  let container;
+
+  afterEach(() => {
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    container = null;
+  });
+
+  it("should accept refs", () => {
+    class MyComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.myRef = React.createRef();
+        this.focus = this.focus.bind(this);
+      }
+      focus() {
+        this.myRef.current.focus();
+      }
+      render() {
+        return (
+          <Checkbox
+            id="test"
+            labelText="testlabel"
+            hideLabel
+            ref={this.myRef}
+          />
+        );
+      }
+    }
+    container = document.createElement("div");
+    container.id = "container";
+    document.body.appendChild(container);
+    const wrapper = mount(<MyComponent />, {
+      attachTo: document.querySelector("#container"),
+    });
+    expect(document.activeElement.type).toBeUndefined();
+    wrapper.instance().focus();
+    expect(document.activeElement.type).toEqual("checkbox");
+  });
+
+  it("should set indeterminate when accepting refs", () => {
+    class MyComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.myRef = React.createRef();
+      }
+      render() {
+        return (
+          <Checkbox
+            id="test-id"
+            labelText="test"
+            indeterminate
+            ref={this.myRef}
+          />
+        );
+      }
+    }
+    const wrapper = mount(<MyComponent />);
+    expect(wrapper.find("input").getDOMNode().indeterminate).toBe(true);
+  });
+});
+
+describe("CheckboxSkeleton", () => {
+  describe("Renders as expected", () => {
+    const wrapper = mount(<CheckboxSkeleton />);
+    const label = wrapper.find("span");
+
+    describe("label", () => {
+      it("renders a label", () => {
+        expect(label.length).toEqual(1);
+      });
+
+      it("has the expected classes", () => {
+        expect(label.hasClass(`wfp--checkbox-label-text`)).toEqual(true);
+        expect(label.hasClass(`wfp--skeleton`)).toEqual(true);
+      });
+    });
+  });
+});
+
+describe("Checkbox accessibility", () => {
+  afterEach(cleanup);
+
+  it("can receive keyboard focus", () => {
+    render(<Checkbox labelText="Checkbox label" id="test_id" />);
+    userEvent.tab();
+    expect(screen.getByLabelText("Checkbox label")).toHaveFocus();
+  });
+
+  it("should have an accessible label", () => {
+    render(<Checkbox labelText="Checkbox label" id="test_id" />);
+    expect(() => screen.getByText("Checkbox label")).not.toThrow();
+  });
+
+  it("should have an appropriate role", () => {
+    render(<Checkbox labelText="Checkbox label" id="test_id" />);
+    expect(() => screen.getByRole("checkbox")).not.toThrow();
+  });
+});

package/src/components/Checkbox/Checkbox.Skeleton.js

@@ -0,0 +1,37 @@
+/**
+ * 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 cx from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+const CheckboxSkeleton = ({ className, ...rest }) => {
+  const { prefix } = useSettings();
+
+  return (
+    <div
+      className={cx(
+        `${prefix}--form-item`,
+        `${prefix}--checkbox-wrapper`,
+        `${prefix}--checkbox-label`,
+        className
+      )}
+      {...rest}>
+      <span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
+    </div>
+  );
+};
+
+CheckboxSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+};
+
+export default CheckboxSkeleton;

package/src/components/Checkbox/Checkbox.hbs

@@ -0,0 +1,15 @@
+<fieldset class="wfp--fieldset">
+  <legend class="wfp--label">Checkbox heading</legend>
+  <div class="wfp--form-item wfp--checkbox-wrapper">
+    <input type="checkbox" class="wfp--checkbox" id="checkbox-label-1">
+    <label for="checkbox-label-1" class="wfp--checkbox-label">
+      <span class="">Checkbox label 1</span>
+    </label>
+  </div>
+  <div class="wfp--form-item wfp--checkbox-wrapper">
+    <input type="checkbox" class="wfp--checkbox" id="checkbox-label-2">
+    <label for="checkbox-label-2" class="wfp--checkbox-label">
+      <span class="">Checkbox label 2</span>
+    </label>
+  </div>
+</fieldset>

package/src/components/Checkbox/Checkbox.legacy.js

@@ -0,0 +1,126 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+/**
+ * Checkboxes are used for a list of options where the user may select multiple options, including all or none. */
+
+const Checkbox = React.forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    labelText,
+    onChange,
+    indeterminate,
+    hideLabel,
+    wrapperClassName,
+    inputRef = ref,
+    title = '',
+    ...other
+  } = props;
+  const { prefix } = useSettings();
+  const customId = id ? id : other.name;
+  let input;
+  const labelClasses = classNames(`${prefix}--checkbox-label`, className);
+  const innerLabelClasses = classNames({
+    [`${prefix}--visually-hidden`]: hideLabel,
+  });
+  const wrapperClasses = classNames(
+    `${prefix}--form-item`,
+    `${prefix}--checkbox-wrapper`,
+    wrapperClassName
+  );
+
+  return (
+    <div className={wrapperClasses}>
+      <input
+        {...other}
+        type="checkbox"
+        onChange={(evt) => {
+          onChange(evt, evt.target.checked, customId);
+        }}
+        className="wfp--checkbox"
+        id={customId}
+        ref={(el) => {
+          if (el) {
+            el.indeterminate = indeterminate;
+          }
+          if (typeof inputRef === 'function') {
+            inputRef(el);
+          } else if (Object(inputRef) === inputRef) {
+            inputRef.current = el;
+          }
+        }}
+      />
+      <label htmlFor={customId} className={labelClasses} title={title || null}>
+        <span className={innerLabelClasses}>{labelText}</span>
+      </label>
+    </div>
+  );
+});
+
+Checkbox.propTypes = {
+  /**
+   * Specify whether the underlying input should be checked
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   */
+  indeterminate: PropTypes.bool,
+
+  /**
+   * Specify an optional className to be applied to the <label> node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the Checkbox should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an `id` to uniquely identify the Checkbox input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are
+   * exposing to the user
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Receives three arguments: true/false, the checkbox's id, and the dom event.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify a title for the <label> node for the Checkbox
+   */
+  title: PropTypes.string,
+
+  /**
+   * The CSS class name to be placed on the wrapping element
+   */
+  wrapperClassName: PropTypes.string,
+};
+
+Checkbox.defaultProps = {
+  onChange: () => {},
+  indeterminate: false,
+};
+
+export default Checkbox;