@progressiveui/react 1.22.0

package/src/components/Unit/currencyCalc.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+import scaleLookup from "./scaleLookup";
+import { Invalid } from "./InvalidUnit";
+import StringUnit from "./StringUnit";
+import SvgUnit from "./SvgUnit";
+
+type currencyCalcProps = {
+  calcOnly?: boolean;
+  children?: any;
+  input?: any;
+  output?: any;
+  string?: boolean;
+  svg?: boolean;
+  hideZero?: boolean;
+  maximumSignificantDigits?: number;
+  minimumFractionDigits?: number;
+  maximumFractionDigits?: number;
+  className?: string;
+
+  localeStringLanguage?: string;
+};
+
+export const currencyCalc = (
+  props: currencyCalcProps,
+  after?: string,
+  before?: string,
+  afterSingular?: any,
+  isAbsolute?: any
+) => {
+  const {
+    children,
+    input,
+    output,
+    /* maximumSignificantDigits, */
+    minimumFractionDigits,
+    maximumFractionDigits,
+    localeStringLanguage = "en-EN",
+    calcOnly,
+    string,
+    svg,
+    hideZero,
+  } = props;
+
+  // Remove commas
+  var value =
+    typeof children === "string" ? children.replace(/,/g, "") : children;
+
+  // Parse as float
+  value = parseFloat(value);
+
+  // Input
+  value =
+    value !== 0 && input && scaleLookup[input]
+      ? scaleLookup[input].pow * value
+      : value;
+
+  // output
+  const outputCalc =
+    output && scaleLookup[output] ? scaleLookup[output] : undefined;
+
+  value = value !== 0 && output ? value / outputCalc.pow : value;
+
+  const minimumFractionDigitsCalculated =
+    isAbsolute === true && output === undefined
+      ? minimumFractionDigits === 0
+      : /*: maximumFractionDigits === 0
+      ? 0*/
+      typeof minimumFractionDigits === "number"
+      ? minimumFractionDigits
+      : outputCalc && outputCalc.defaultmaximumFractionDigits
+      ? outputCalc.defaultmaximumFractionDigits
+      : 2;
+
+  const maximumFractionDigitsCalculated =
+    isAbsolute === true && output === undefined
+      ? maximumFractionDigits === 0
+      : value <= 0.005
+      ? 4
+      : value <= 0.05
+      ? 3
+      : value <= 0.5
+      ? 2
+      : maximumFractionDigits === 0
+      ? 0
+      : typeof maximumFractionDigits === "number"
+      ? maximumFractionDigits
+      : outputCalc && outputCalc.defaultmaximumFractionDigits
+      ? outputCalc.defaultmaximumFractionDigits
+      : 2;
+
+  const toLocalStringConfig = {
+    //maximumSignificantDigits: maximumSignificantDigits,
+    minimumFractionDigits: minimumFractionDigitsCalculated,
+    maximumFractionDigits:
+      maximumFractionDigitsCalculated > minimumFractionDigitsCalculated
+        ? maximumFractionDigitsCalculated
+        : minimumFractionDigitsCalculated,
+  };
+
+  // Convert to Locale String
+  value = value.toLocaleString(localeStringLanguage, toLocalStringConfig);
+
+  const calcObject = {
+    value: value,
+    before: before,
+    after: after,
+    output: outputCalc,
+  };
+
+  let className = props.className;
+  if (value === "1" && afterSingular) {
+    className = className + " wfp--unit--singular";
+  }
+
+  if ((!value || value === "NaN" || parseFloat(value) === 0) && hideZero)
+    return false;
+  else if (calcOnly) return calcObject;
+  else if (svg) return SvgUnit(calcObject, props);
+  else if (string) return StringUnit(calcObject /*, props*/);
+  else if (value !== false) return <span className={className}>{value}</span>;
+  else return <Invalid className={props.className} />;
+};
+
+export default currencyCalc;

package/src/components/Unit/index.js

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

package/src/components/Unit/percentageCalc.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Invalid } from "./InvalidUnit";
+import StringUnit from "./StringUnit";
+import SvgUnit from "./SvgUnit";
+
+type percentageCalcProps = {
+  calcOnly?: boolean;
+  children?: any;
+  from?: any;
+  string?: boolean;
+  svg?: boolean;
+  hideZero?: boolean;
+  maximumSignificantDigits?: number;
+  maximumFractionDigits?: number;
+  className?: string;
+};
+
+export const percentageCalc = (
+  props: percentageCalcProps,
+  after?: string,
+  before?: string
+) => {
+  const {
+    calcOnly,
+    children,
+    from,
+    string,
+    svg,
+    hideZero,
+    maximumSignificantDigits,
+    maximumFractionDigits,
+  } = props;
+
+  // Remove commas
+  var value =
+    typeof children === "string" ? children.replace(/,/g, "") : children;
+
+  // Parse as float
+  value = parseFloat(value);
+
+  if (parseFloat(from) === 0) {
+    value = false;
+  } else if (from) {
+    value = (value / parseFloat(from)) * 100;
+  }
+
+  // Convert to Locale String
+  value = value.toLocaleString("en-EN", {
+    minimumFractionDigits: maximumSignificantDigits
+      ? maximumSignificantDigits
+      : 0,
+    maximumSignificantDigits: maximumSignificantDigits,
+    maximumFractionDigits:
+      value <= 0.5 ? 5 : maximumFractionDigits ? maximumFractionDigits : 1,
+  });
+
+  const calcObject = {
+    value: value,
+    before: before,
+    after: after,
+    output: undefined,
+  };
+  if ((!value || value === "NaN" || parseFloat(value) === 0) && hideZero)
+    return false;
+  else if (calcOnly) return calcObject;
+  else if (svg) return SvgUnit(calcObject, props);
+  else if (string) return StringUnit(calcObject /*, props*/);
+  else if (value !== false)
+    return <span className={props.className}>{value}</span>;
+  else return <Invalid className={props.className} />;
+};
+
+export default percentageCalc;

package/src/components/Unit/scaleLookup.tsx

@@ -0,0 +1,19 @@
+const scaleLookup = {
+  thousand: {
+    pow: 1000,
+    defaultmaximumFractionDigits: 2,
+    default: { after: 'T' },
+  },
+  million: {
+    pow: 1000000,
+    defaultmaximumFractionDigits: 1,
+    default: { after: 'M' },
+  },
+  billion: {
+    pow: 1000000000,
+    defaultmaximumFractionDigits: 2,
+    default: { after: 'B' },
+  },
+};
+
+export default scaleLookup;

package/src/components/User/README.mdx

@@ -0,0 +1 @@
+The User is used inside the MainNavigation and can display an avatar and username. It can be also used inside forms, etc. with the extended prop.

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import User from '../User';
+import { mount } from 'enzyme';
+
+describe('User', () => {
+  describe('renders as expected', () => {
+    const wrapper = mount(<User name="Username" />);
+
+    const userWrapper = () => wrapper.find('div.wfp--user');
+
+    describe('userwrapper', () => {
+      it('renders as expected', () => {
+        expect(userWrapper().length).toBe(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(userWrapper().hasClass('wfp--user')).toEqual(true);
+      });
+
+      it('should add extra classes that are passed via className', () => {
+        wrapper.setProps({ className: 'extra-class' });
+        expect(userWrapper().hasClass('extra-class')).toEqual(true);
+      });
+    });
+
+    const userTitle = () => wrapper.find('span.wfp--user__title');
+
+    describe('usertitle', () => {
+      it('renders as expected', () => {
+        expect(userTitle().length).toBe(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(userTitle().hasClass('wfp--user__title')).toEqual(true);
+      });
+
+      it('has the expected classes for ellipsis', () => {
+        wrapper.setProps({ ellipsis: true });
+        expect(userTitle().hasClass('wfp--user__title--ellipsis')).toEqual(
+          true
+        );
+      });
+
+      it('should set value as expected', () => {
+        wrapper.setProps({ name: 'Max Mustermann' });
+        expect(userTitle().text()).toEqual('Max Mustermann');
+      });
+    });
+  });
+});

package/src/components/User/User.hbs

@@ -0,0 +1,8 @@
+<div class="wfp--user">
+	<svg class="wfp--user__icon wfp--user__icon--empty" fill="#ffffff" fill-rule="evenodd" height="14" name="user" role="img" viewBox="0 0 16 16" width="14" aria-label="User Icon" alt="User Icon">
+		<title>User Icon</title>
+		<path d="M6.123 9.455a3.5 3.5 0 1 1 3.754 0c1.958.97 3.571 3.424 4.436 6.64-5.852-.027-6.488-.027-12.62-.027.867-3.203 2.477-5.645 4.43-6.613z">
+		</path>
+	</svg>
+	<span class="wfp--user__title">Max Mustermann</span>
+</div>

package/src/components/User/User.stories.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import User from ".";
+import { List, ListItem } from "../List";
+
+export default {
+  title: "Components/UI Elements/User",
+  component: User,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+  },
+};
+
+export const UserDefault = (args) => <User {...args} />;
+
+UserDefault.args = {
+  name: "Max Mustermann",
+  showName: true,
+  image:
+    "https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH",
+};
+
+export const AvatarOnly = (args) => (
+  <User
+    name="Max Mustermann"
+    showName={false}
+    image="https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH"
+  />
+);
+
+const description = `
+You can show the avatar only without showing the username.
+`;
+
+AvatarOnly.story = {
+  parameters: {
+    docs: {
+      storyDescription: description,
+    },
+  },
+};
+
+export const ExtendedUser = (args: any) => (
+  <User
+    alt="Image Alt text"
+    description={
+      <List kind="simple" small>
+        <ListItem>Business Support Assistant G4</ListItem>
+        <ListItem>Fixed Term</ListItem>
+      </List>
+    }
+    extendedDescription={
+      <List kind="simple" small>
+        <ListItem title="First level supervisor">Marie Curie</ListItem>
+        <ListItem title="Mrc">Tanzania Country Office</ListItem>
+        <ListItem title="Head of unit">Max Planck</ListItem>
+      </List>
+    }
+    name="Albert Einstein"
+    image="https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH"
+  />
+);
+
+const extendedDescription = `
+You can show the avatar only without showing the username.
+`;
+
+const extendedsourcecode = `
+import { User, List, ListItem } from "@progressiveui/react";
+
+<User
+    alt="Image Alt text"
+    description={
+      <List kind="simple" small>
+        <ListItem>Business Support Assistant G4</ListItem>
+        <ListItem>Fixed Term</ListItem>
+      </List>
+    }
+    extendedDescription={
+      <List kind="simple" small>
+        <ListItem title="First level supervisor">Marie Curie</ListItem>
+        <ListItem title="Mrc">Tanzania Country Office</ListItem>
+        <ListItem title="Head of unit">Max Planck</ListItem>
+      </List>
+    }
+    name="Albert Einstein"
+    image="https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH"
+  />
+`;
+
+ExtendedUser.story = {
+  parameters: {
+    docs: {
+      storyDescription: extendedDescription,
+      source: {
+        code: extendedsourcecode,
+      },
+    },
+  },
+};

package/src/components/User/User.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import Avatar from "../Avatar";
+
+export interface UserProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The alt-text of the avatar
+   */
+  alt?: string;
+  /**
+   * Sets the max-width of the user name to 130px and shows an ellipsis
+   */
+  ellipsis?: boolean;
+  /**
+   * Additional description under the Name will also increase the size
+   * of the Avatar use &lt;List kind="simple" small /&gt; as default content
+   */
+  description?: React.ReactNode;
+  /**
+   * Optional components to replace the default ones, the Icon component is used for the avatar
+   */
+  components?: { Icon: React.ReactNode };
+  /**
+   * Extended Description column
+   */
+  extendedDescription?: React.ReactNode;
+  /**
+   * Selects the generated empty icon if no image is provided.
+   * Can be `avatar` or `letter`.
+   */
+  missingImage?: "avatar" | "letter";
+  /**
+   * Url to an avatar image The size of the image is 25px * 25px.
+   * Provide at least 50px * 50px to support HiDPI displays.
+   */
+  image?: string;
+  /**
+   * Show the name next to the avatar
+   */
+  showName?: boolean;
+  /**
+   * The CSS class name for the user.
+   */
+  className?: string;
+  /**
+   * Shows a smaller version of the user
+   */
+  small?: boolean;
+  /**
+   * The username which will be displayed. Usually `Firstname Lastname`.
+   */
+  name?: string;
+}
+/** The User is used inside the MainNavigation and form, and can display an avatar and username. */
+const User: React.FC<UserProps> = (props) => {
+  const {
+    className,
+    children,
+    components = {},
+    description,
+    ellipsis,
+    extendedDescription,
+    showName,
+    small,
+    name,
+    missingImage,
+    ...other
+  } = props;
+  const { prefix } = useSettings();
+
+  const defaultComponents = { Avatar };
+
+  const allComponents = {
+    ...defaultComponents,
+    ...components,
+  };
+
+  const classes = classNames(`${prefix}--user`, className, {
+    [`${prefix}--user--has-description`]: description,
+    [`${prefix}--user--has-extended-description`]: extendedDescription,
+  });
+
+  const titleClasses = classNames({
+    [`${prefix}--user__title`]: true,
+    [`${prefix}--user__title--ellipsis`]: ellipsis,
+    [`${prefix}--user__title--small`]: small,
+  });
+
+  return (
+    <div className={classes} {...other}>
+      <allComponents.Avatar {...props} missingImage={missingImage} />
+      {showName && (
+        <span className={titleClasses}>
+          <span>{name}</span>
+          {description && (
+            <div className={`${prefix}--user__description`}>{description}</div>
+          )}
+        </span>
+      )}
+      {children}
+      {extendedDescription && (
+        <div className={`${prefix}--user__extended-description`}>
+          {extendedDescription}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default User;

package/src/components/User/index.ts

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

package/src/components/Value/README.mdx

@@ -0,0 +1 @@
+**Value** are typically used to show KPI values and additional information.

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import Value from '.';
+import { shallow } from 'enzyme';
+
+describe('Value', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(
+      <Value
+        value="value"
+        secondaryValue="secondaryValue"
+        title="title"
+        className="some-class"
+      />
+    );
+    it('should use the appropriate link class', () => {
+      expect(wrapper.hasClass('wfp--value')).toEqual(true);
+    });
+    /*it('should inherit the href property', () => {
+      expect(wrapper.find('h4').hasClass('wfp--value__title')).toBe(true);
+    });
+    it('should include child content', () => {
+      expect(wrapper.text()).toEqual('A simple link');
+    });*/
+    it('should all for custom classes to be applied', () => {
+      expect(wrapper.hasClass('some-class')).toEqual(true);
+    });
+  });
+});

package/src/components/Value/Value.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Value from '.';
+import Unit from '../Unit';
+
+export default {
+  title: 'Components/UI Elements/Value',
+  component: Value,
+  parameters: {
+    componentSubtitle: 'Component',
+    status: 'experimental',
+  },
+};
+
+export const Regular = (args) => (
+  <Value
+    {...args}
+    value={
+      <Unit type="usd" input="thousand" output="million" showZero hideEmpty>
+        1234567
+      </Unit>
+    }
+    secondaryValue={
+      <Unit type="usd" input="thousand" output="million" showZero hideEmpty>
+        1234567
+      </Unit>
+    }
+  />
+);

package/src/components/Value/Value.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import type { PropsWithChildren } from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+
+/** Value are typically used to show KPI values and additional information. */
+type ValueProps = PropsWithChildren<{
+  value?: React.ReactNode;
+  secondaryValue?: React.ReactNode;
+  title?: React.ReactNode;
+  className?: string;
+}>;
+
+const Value: React.FC<ValueProps> = ({
+  value,
+  secondaryValue,
+  className,
+  title,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+  const classes = classNames(`${prefix}--value`, className);
+  return (
+    <div className={classes} {...other}>
+      <h4 className={`${prefix}--value__title`}>{title}</h4>
+      <div className={`${prefix}--value__primary-value`}>{value}</div>
+      <div className={`${prefix}--value__secondary-value`}>
+        {secondaryValue}
+      </div>
+    </div>
+  );
+};
+
+export default Value;

package/src/components/Value/index.ts

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