@progressiveui/react 1.22.0

package/src/components/Module/Module.stories.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import markdown from "./README.mdx";
+import Module from "./Module";
+import ModuleHeader from "./ModuleHeader";
+import ModuleBody from "./ModuleBody";
+import ModuleFooter from "./ModuleFooter";
+
+export default {
+  title: "Components/Content Related/Module",
+  component: Module,
+  subcomponents: { ModuleHeader, ModuleBody, ModuleFooter },
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const ModuleDefault: Story = {
+  render: (args) => (
+    <Module {...args}>
+      <ModuleHeader>Module example</ModuleHeader>
+      <ModuleBody>
+        <p>
+          Lorem Ipsum is dummy text of the printing and typesetting industry.
+          Lorem Ipsum has been the industry's standard dummy text ever since the
+          1500s, when an unknown printer took a galley of type and scrambled it
+          to make a type specimen book.
+        </p>
+      </ModuleBody>
+      <ModuleFooter>Module footer</ModuleFooter>
+    </Module>
+  ),
+  args: {},
+};
+
+export const ModuleHeaderDefault: Story = {
+  render: (args) => <ModuleHeader {...args}>ModuleHeader example</ModuleHeader>,
+};
+
+export const ModuleBodyDefault: Story = {
+  render: (args) => <ModuleBody {...args}>Modulebody example</ModuleBody>,
+};
+
+export const ModuleFooterDefault: Story = {
+  render: (args) => <ModuleFooter {...args}>ModuleFooter example</ModuleFooter>,
+};
+
+export const ModuleDarkDefault: Story = {
+  render: (args) => (
+    <Module dark>
+      <ModuleHeader>Dark module example</ModuleHeader>
+      <ModuleBody>
+        <p>
+          Lorem Ipsum is dummy text of the printing and typesetting industry.
+          Lorem Ipsum has been the industry's standard dummy text ever since the
+          1500s, when an unknown printer took a galley of type and scrambled it
+          to make a type specimen book.
+        </p>
+        <p>
+          It has survived not only five centuries, but also the leap into
+          electronic typesetting, remaining essentially unchanged.
+        </p>
+      </ModuleBody>
+      <ModuleFooter>Module footer</ModuleFooter>
+    </Module>
+  ),
+};
+
+export const ModuleLightDefault: Story = {
+  render: (args) => (
+    <Module dark>
+      <ModuleHeader>Dark module example</ModuleHeader>
+      <ModuleBody>
+        <p>
+          Lorem Ipsum is dummy text of the printing and typesetting industry.
+          Lorem Ipsum has been the industry's standard dummy text ever since the
+          1500s, when an unknown printer took a galley of type and scrambled it
+          to make a type specimen book.
+        </p>
+        <p>
+          It has survived not only five centuries, but also the leap into
+          electronic typesetting, remaining essentially unchanged.
+        </p>
+      </ModuleBody>
+      <ModuleFooter>Module footer</ModuleFooter>
+    </Module>
+  ),
+};
+
+export const ModuleWithHoverDefault: Story = {
+  render: (args) => (
+    <Module light withHover>
+      <ModuleBody>
+        <p>
+          Lorem Ipsum is dummy text of the printing and typesetting industry.
+          Lorem Ipsum has been the industry's standard dummy text ever since the
+          1500s, when an unknown printer took a galley of type and scrambled it
+          to make a type specimen book.
+        </p>
+        <p>
+          It has survived not only five centuries, but also the leap into
+          electronic typesetting, remaining essentially unchanged.
+        </p>
+      </ModuleBody>
+    </Module>
+  ),
+};

package/src/components/Module/Module.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+/** A Module is identifiable as a single, contained unit. */
+interface ModuleProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * * Specify the content of the `Module`, usually a `ModuleHeader` `ModuleBody` and `ModuleFooter`component.
+   */
+  children: React.ReactNode;
+  /**
+   * The CSS class name for the slider.
+   */
+  className?: string;
+  /**
+   * @deprecated Disables the default margin
+   */
+  noMargin?: boolean;
+  /**
+   * Use 100% height of parent container
+   */
+  fullHeight?: boolean;
+  /**
+   * Light appearance (for white backgrounds) @design
+   */
+  light?: boolean;
+  /**
+   * Dark appearance @design
+   */
+  dark?: boolean;
+  /**
+   * Additional hover styling @design
+   */
+  withHover?: boolean;
+  /**
+   * Margin size around the module @design
+   */
+  margin?: "xs" | "md" | "lg";
+}
+
+const Module: React.FC<ModuleProps> = ({
+  dark,
+  light,
+  children,
+  className,
+  margin,
+  fullHeight,
+  noMargin,
+  withHover,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const wrapperClasses = classNames(
+    {
+      [`${prefix}--module--dark`]: dark,
+      [`${prefix}--module--no-margin`]: noMargin || margin === undefined,
+      [`${prefix}--module--full-height`]: fullHeight,
+      [`${prefix}--module--margin-xs`]: margin === "xs",
+      [`${prefix}--module--margin-md`]: margin === "md",
+      [`${prefix}--module--margin-lg`]: margin === "lg",
+      [`${prefix}--module--light`]: light,
+      [`${prefix}--module--with-hover`]: withHover,
+    },
+    className,
+    [`${prefix}--module`]
+  );
+
+  return (
+    <div className={wrapperClasses} {...other}>
+      <div className={`${prefix}--module__inner`}>{children}</div>
+    </div>
+  );
+};
+
+export default Module;

package/src/components/Module/ModuleBody.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import classNames from "classnames";
+
+interface ModuleBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Optional CSS class to apply to the body of the module. This allows for additional
+   * styling to be applied on top of the default styles. @style
+   */
+  className?: string;
+  /**
+   * Specify whether the content within the ModuleBody should be centered. This can be
+   * used to align content such as text or images in the center of the component for
+   * visual appeal. @layout
+   */
+  centered?: boolean;
+  /**
+   * Specify whether the ModuleBody should have no padding. This can be useful for
+   * scenarios where edge-to-edge content display is needed within the module. @layout
+   */
+  noPadding?: boolean;
+}
+
+const ModuleBody: React.FC<ModuleBodyProps> = ({
+  children,
+  className,
+  centered,
+  noPadding,
+  ...other
+}) => {
+  const wrapperClasses = classNames("wfp--module__content", className, {
+    "wfp--module__content--centered": centered,
+    "wfp--module__content--no-padding": noPadding,
+  });
+
+  return (
+    <div className={wrapperClasses} {...other}>
+      {children}
+    </div>
+  );
+};
+
+export default ModuleBody;

package/src/components/Module/ModuleFooter.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import classNames from "classnames";
+
+interface ModuleFooterProps extends React.AllHTMLAttributes<HTMLDivElement> {
+  /**
+   * Optional CSS class to apply to the header. This allows for additional
+   * styling to be applied on top of the default styles. @style
+   */
+  className?: string;
+}
+
+const ModuleFooter: React.FC<ModuleFooterProps> = ({
+  children,
+  className,
+  ...other
+}) => {
+  const wrapperClasses = classNames("wfp--module__footer", className);
+
+  return (
+    <div className={wrapperClasses} {...other}>
+      {children}
+    </div>
+  );
+};
+
+export default ModuleFooter;

package/src/components/Module/ModuleHeader.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import classNames from "classnames";
+
+interface ModuleHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Optional CSS class to apply to the header. This allows for additional
+   * styling to be applied on top of the default styles. @style
+   */
+  className?: string;
+  /**
+   * Optional filter element to be included in the header. This can be used
+   * to incorporate interactive elements like dropdowns, search inputs, etc.,
+   * providing additional functionality to the header component. @functionality
+   */
+  filter?: React.ReactNode;
+}
+
+const ModuleHeader: React.FC<ModuleHeaderProps> = ({
+  filter,
+  children,
+  className,
+  ...other
+}) => {
+  const wrapperClasses = classNames("wfp--module__header", className);
+
+  return (
+    <div className={wrapperClasses} {...other}>
+      <h1 className="wfp--module__title">{children}</h1>
+      {filter && <div className="wfp--module__filter">{filter}</div>}
+    </div>
+  );
+};
+
+export default ModuleHeader;

package/src/components/Module/README.mdx

@@ -0,0 +1,28 @@
+Modules are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
+
+### Usage
+
+#### Contained
+
+A Module is identifiable as a single, contained unit.
+
+#### Independent
+
+A Module can stand alone, without relying on surrounding elements for context.
+
+#### Individual
+
+A card cannot merge with another card, or divide into multiple cards.
+
+Source: https://material.io/design/components/cards.html#anatomy
+Put the name in the top left corner, align controls or actions to the top right corner of the Module and place the information in the content. The ModuleFooter can be used to show additional functionality like sharing or exporting.
+
+Using Modules has additional benefits of flexibility when it comes to responsive design.
+
+### Do not use
+
+#### Default Module on white background
+
+Avoid using the **default** Module with white background. Use the light blue background or the **light** Module instead.
+
+More information: [Elevation in Material UI](https://material.io/design/environment/elevation.html)

package/src/components/Module/index.ts

@@ -0,0 +1,6 @@
+//const { default: ModuleHeader } = require('./ModuleHeader');
+
+export { default as Module } from './Module';
+export { default as ModuleBody } from './ModuleBody';
+export { default as ModuleHeader } from './ModuleHeader';
+export { default as ModuleFooter } from './ModuleFooter';

package/src/components/Notification/Callout.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import { NotificationTextDetails } from "./NotificationTextDetails";
+import { NotificationIcon } from "./NotificationIcon";
+
+export interface CalloutProps
+  extends Omit<React.ComponentPropsWithRef<"div">, "title"> {
+  /**
+   * Pass in the action nodes that will be rendered within the Notification
+   */
+  actions?: React.ReactNode;
+
+  /**
+   * Provide a function that is called when menu is closed
+   */
+  onClose?: any;
+
+  /**
+   * Specify the close button should be disabled, or not
+   */
+  hideCloseButton?: boolean;
+
+  /**
+   * Pass in the icon that will be rendered within the Notification or set icon to false to hide
+   */
+  icon?: React.ReactNode | boolean;
+
+  /**
+   * Provide a description for "close" icon that can be read by screen readers
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify what state the notification represents
+   */
+  kind?: "error" | "info" | "success" | "warning" | "warning-alt";
+
+  /**
+   * Specify whether you are using the low contrast variant of the Notification.
+   */
+  lowContrast?: boolean;
+
+  /**
+   * By default, this value is "inline". You can also provide an alternate type
+   * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Provide a function that is called when menu is closed
+   */
+  onCloseButtonClick?: (e: any) => void;
+
+  /**
+   * By default, this value is "alert". You can also provide an alternate
+   * role if it makes sense from the accessibility-side
+   */
+  role?: string;
+
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  statusIconDescription?: string;
+
+  /**
+   * Specify the sub-title
+   */
+  subtitle?: React.ReactNode;
+
+  /**
+   * Specify the title
+   */
+  title?: React.ReactNode;
+}
+
+export const Callout: React.FC<CalloutProps> = React.forwardRef(
+  (props, ref) => {
+    const {
+      actions,
+      role = "alert",
+      notificationType = "inline",
+      icon,
+      //  iconDescription = 'closes notification',
+      statusIconDescription,
+      className,
+      subtitle,
+      title,
+      kind = "info",
+      lowContrast = true,
+      hideCloseButton = false,
+      children,
+      ...other
+    } = props;
+    const { prefix } = useSettings();
+    const containerClassName = classNames(className, {
+      [`${prefix}--inline-notification`]: true,
+      [`${prefix}--block-notification`]: true,
+      [`${prefix}--inline-notification--low-contrast`]: lowContrast,
+      [`${prefix}--inline-notification--${kind}`]: kind,
+      [`${prefix}--inline-notification--hide-close-button`]: hideCloseButton,
+    });
+
+    return (
+      <div {...other} ref={ref} role={role} className={containerClassName}>
+        <div className={`${prefix}--inline-notification__details`}>
+          {icon === undefined && (
+            <NotificationIcon
+              notificationType={notificationType}
+              kind={kind}
+              iconDescription={statusIconDescription || `${kind} icon`}
+            />
+          )}
+          {icon && (
+            <div
+              className={`${prefix}--${notificationType}-notification__icon`}
+            >
+              {icon}
+            </div>
+          )}
+          <NotificationTextDetails
+            title={title}
+            subtitle={subtitle}
+            notificationType={notificationType}
+          >
+            {children}
+          </NotificationTextDetails>
+          {actions && (
+            <div className={`${prefix}--inline-notification__actions-wrapper`}>
+              {actions}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+Callout.displayName = "Callout";
+
+export default Callout;

package/src/components/Notification/InlineNotification.tsx.legacy

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+import { NotificationButton } from './NotificationButton';
+import { NotificationTextDetails } from './NotificationTextDetails';
+import { NotificationIcon } from './NotificationIcon';
+import { CalloutProps } from './Callout';
+
+interface InlineNotificationProps extends CalloutProps {
+  /**
+   * Pass in the action nodes that will be rendered within the InlineNotification
+   */
+  // actions?: React.ReactNode;
+  /**
+   * Pass in the children that will be rendered within the InlineNotification
+   */
+  // children?: React.ReactNode;
+  /**
+   * Specify an optional className to be applied to the notification box
+   */
+  //className?: string;
+  /**
+   * Specify the close button should be disabled, or not
+   */
+  //hideCloseButton?: boolean;
+  /**
+   * Pass in the icon that will be rendered within the ToastNotification or set icon to false to hide
+   */
+  // icon?: React.ReactNode; // PropTypes.oneOf([PropTypes.node, PropTypes.bool]),
+  /**
+   * Provide a description for "close" icon that can be read by screen readers
+   */
+  //iconDescription?: string;
+  /**
+   * Specify whether you are using the low contrast variant of the InlineNotification.
+   */
+  //lowContrast?: boolean;
+  /**
+   * By default, this value is "inline". You can also provide an alternate type
+   * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`
+   */
+  //notificationType?: 'toast' | 'inline';
+  /**
+   * Provide a function that is called when menu is closed
+   */
+  // onCloseButtonClick?: any;
+  /**
+   * By default, this value is "alert". You can also provide an alternate
+   * role if it makes sense from the accessibility-side
+   */
+  //role?: string;
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  // statusIconDescription?: string;
+  /**
+   * Specify the sub-title
+   */
+  //subtitle?: React.ReactNode;
+  /**
+   * Specify the title
+   */
+  //title?: string;
+  //onClose?: any;
+}
+
+export const InlineNotification: React.FC<InlineNotificationProps> = ({
+  actions,
+  role = 'alert',
+  notificationType = 'inline',
+  onClose,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onCloseButtonClick = () => {},
+  icon,
+  iconDescription = 'closes notification',
+  statusIconDescription,
+  className,
+  subtitle,
+  title,
+  kind = 'info',
+  lowContrast,
+  hideCloseButton = false,
+  children,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const [isOpen, setIsOpen] = useState(true);
+  const containerClassName = classNames(className, {
+    [`${prefix}--inline-notification`]: true,
+    [`${prefix}--inline-notification--low-contrast`]: lowContrast,
+    [`${prefix}--inline-notification--${kind}`]: kind,
+    [`${prefix}--inline-notification--hide-close-button`]: hideCloseButton,
+  });
+
+  const handleClose = (evt) => {
+    if (!onClose || onClose(evt) !== false) {
+      setIsOpen(false);
+    }
+  };
+
+  function handleCloseButtonClick(event) {
+    onCloseButtonClick(event);
+    handleClose(event);
+  }
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div {...other} role={role} /*kind={kind} */ className={containerClassName}>
+      <div className={`${prefix}--inline-notification__details`}>
+        {icon === undefined && (
+          <NotificationIcon
+            notificationType={notificationType}
+            kind={kind}
+            iconDescription={statusIconDescription || `${kind} icon`}
+          />
+        )}
+        {icon && (
+          <div className={`${prefix}--${notificationType}-notification__icon`}>
+            {icon}
+          </div>
+        )}
+        <NotificationTextDetails
+          title={title}
+          subtitle={subtitle}
+          notificationType={notificationType}>
+          {children}
+        </NotificationTextDetails>
+      </div>
+      {actions}
+      {!hideCloseButton && (
+        <NotificationButton
+          iconDescription={iconDescription}
+          notificationType={notificationType}
+          onClick={handleCloseButtonClick}
+        />
+      )}
+    </div>
+  );
+};