@progressiveui/react 2.0.3 → 2.0.4

package/src/components/Unit/currencyCalc.tsx

@@ -1,124 +0,0 @@
-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/percentageCalc.tsx

@@ -1,73 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,8 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

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

package/src/components/Value/README.mdx

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

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