@progressiveui/react 1.22.0

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

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import scaleLookup from './scaleLookup';
+
+import {
+  Countries,
+  Usd,
+  Partners,
+  Beneficiaries,
+  Households,
+  People,
+  Months,
+  Level,
+  Mt,
+  Kg,
+  MetricTons,
+  Trips,
+  None,
+  Num,
+  Percentage,
+  YearMonth,
+} from './UnitList';
+import PropTypes from 'prop-types';
+import useSettings from '../../hooks/useSettings';
+// All Unit Components together in <Unit type="Unitname" />
+
+const components = {
+  Usd,
+  Partners,
+  Beneficiaries,
+  Households,
+  Months,
+  Mt,
+  Kg,
+  MetricTons,
+  Num,
+  Level,
+  None,
+  Trips,
+  Countries,
+  People,
+  Percentage,
+  YearMonth,
+};
+
+/** The Unit component method returns a component with a language and unit sensitive representation of this number based on [Numbers and Unit from the Editorial Guidelines](https://cdn.wfp.org/guides/editorial/content/numbers-and-units/) the [Numbers and Units Reference on developer.mozilla.org](http://cdn.wfp.org/guides/editorial/content/numbers-and-units). */
+
+const Unit = (props) => {
+  const { prefix } = useSettings();
+
+  const { className, output, string, textAnchor, setup } = props;
+  const type = props.type
+    ? props.type.charAt(0).toUpperCase() + props.type.slice(1)
+    : 'None';
+  const Unit = components[type];
+  //const unitHideClass = setup && setup.hideUnit ? 'wfp--unit--hide' : '';
+  const textAnchorCalc = textAnchor ? textAnchor : 'start';
+  const unitClassName = type ? `${prefix}--unit--${type.toLowerCase()}` : '';
+
+  const outputClassName =
+    output && scaleLookup[output] ? `${prefix}--unit--${output}` : '';
+  const setupClassName = setup ? `${prefix}--unit--${setup}` : '';
+  const classNameCalc = `${prefix}--unit ${className} ${unitClassName} ${outputClassName} ${setupClassName}`;
+
+  if (string) {
+    return Unit(props);
+  }
+
+  if (Unit === undefined) {
+    //  console.warn(`The unit "${type}" is undefined`);
+    return null;
+  }
+
+  return (
+    <Unit {...props} className={classNameCalc} textAnchor={textAnchorCalc} />
+  );
+};
+
+Unit.propTypes = {
+  /**
+    The value which should be displayed
+  */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+    Only used for type Percentage will divide value/from string, float
+  */
+  from: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+    Hide the Unit if it's value is zero.
+  */
+  hideEmpty: PropTypes.bool,
+  /**
+    The minimum number of fraction digits to use. Possible values are from 0 to 20. Only used on numeric types
+  */
+  minimumFractionDigits: PropTypes.number,
+  /**
+    A value between 1-21, The maximum number of significant digits to use. Possible values are from 1 to 21; the default is minimumSignificantDigits.
+  */
+  maximumSignificantDigits: PropTypes.number,
+  /**
+    A value between 1-21, The minimum number of fraction digits to use. Possible values are from 0 to 20. Only used on numeric types
+  */
+  maximumFractionDigits: PropTypes.number,
+  /**
+   * A string with a BCP 47 language code, or an array of language codes. For the general form and interpretation of the locale argument see the [toLocaleString on developer.mozilla.org](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) page.
+   */
+  locale: PropTypes.string,
+  /**
+    Render output as svg text
+  */
+  svg: PropTypes.bool,
+  /**
+    The unit type  */
+  type: PropTypes.oneOf([
+    'none',
+    'usd',
+    'partners',
+    'beneficiaries',
+    'households',
+    'months',
+    'mt',
+    'metricTons',
+    'kg',
+    'num',
+    'yearMonth',
+    'level',
+    'people',
+    'countries',
+    'percentage',
+  ]),
+};
+
+Unit.defaultProps = {
+  type: 'none',
+  svg: false,
+  localeStringLanguage: 'en-EN',
+};
+
+export default Unit;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import Unit from '../User';
+import { mount } from 'enzyme';
+
+describe('Unit', () => {
+  describe('renders as expected', () => {
+    const wrapper = mount(<Unit type="usd">123</Unit>);
+
+    it('renders as expected', () => {
+      expect(wrapper.length).toBe(1);
+    });
+
+    it('should add extra classes that are passed via className', () => {
+      wrapper.setProps({ className: 'extra-class' });
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+  });
+});

package/src/components/Unit/Unit.hbs

@@ -0,0 +1 @@
+<span class="wfp--unit undefined wfp--unit--usd  ">231,321,133.00</span>

package/src/components/Unit/Unit.stories.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import markdown from "./README.mdx";
+import Unit from ".";
+import Table from "../Table";
+import Text from "../Text";
+
+export default {
+  title: "Components/Content Related/Unit",
+  component: Unit,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const Regular = (args) => <Unit {...args} />;
+
+Regular.args = {
+  children: "12345",
+  type: "usd",
+};
+
+export const NumberFractionDigits = () => (
+  <Table>
+    <thead>
+      <tr>
+        <td>Input value</td>
+        <td>minimumFractionDigits</td>
+        <td>maximumFractionDigits</td>
+        <td>Result</td>
+        <td>Comment</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>0.1234567</td>
+        <td>3</td>
+        <td>3</td>
+        <td>
+          <Unit type="Num" minimumFractionDigits={3} maximumFractionDigits={3}>
+            {0.1234567}
+          </Unit>
+        </td>
+        <td>
+          <Text kind="caption">
+            uses minimumFractionDigits and maximumFractionDigits
+          </Text>
+        </td>
+      </tr>
+      <tr>
+        <td>0.1234567</td>
+        <td>0</td>
+        <td>0</td>
+        <td>
+          <Unit type="Num" minimumFractionDigits={0} maximumFractionDigits={0}>
+            {0.1234567}
+          </Unit>
+        </td>
+        <td>
+          <Text kind="caption">
+            detects value smaller than 1 and adopts minimumFractionDigits to
+            avoid displaying 0
+          </Text>
+        </td>
+      </tr>
+      <tr>
+        <td>12345.1234567</td>
+        <td>0</td>
+        <td>0</td>
+        <td>
+          <Unit type="Num" minimumFractionDigits={0} maximumFractionDigits={0}>
+            {12345.1234567}
+          </Unit>
+        </td>
+        <td>
+          <Text kind="caption">
+            detects value larger than 1 uses minimumFractionDigits and
+            maximumFractionDigits
+          </Text>
+        </td>
+      </tr>
+    </tbody>
+  </Table>
+);
+
+const sourcecode = `
+import { Unit, Table, Text } from "@progressiveui/react";
+
+<Table>
+    <thead>
+      <tr>
+        <td>Input value</td>
+        <td>minimumFractionDigits</td>
+        <td>maximumFractionDigits</td>
+        <td>Result</td>
+        <td>Comment</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>0.1234567</td>
+        <td>3</td>
+        <td>3</td>
+        <td>
+          <Unit type="Num" minimumFractionDigits={3} maximumFractionDigits={3}>
+            {0.1234567}
+          </Unit>
+        </td>
+        <td>
+          <Text kind="caption">
+            uses minimumFractionDigits and maximumFractionDigits
+          </Text>
+        </td>
+      </tr>
+      <tr>
+        <td>0.1234567</td>
+        <td>0</td>
+        <td>0</td>
+        <td>
+          <Unit type="Num" minimumFractionDigits={0} maximumFractionDigits={0}>
+            {0.1234567}
+          </Unit>
+        </td>
+        <td>
+          <Text kind="caption">
+            detects value smaller than 1 and adopts minimumFractionDigits to
+            avoid displaying 0
+          </Text>
+        </td>
+      </tr>
+      <tr>
+        <td>12345.1234567</td>
+        <td>0</td>
+        <td>0</td>
+        <td>
+          <Unit type="Num" minimumFractionDigits={0} maximumFractionDigits={0}>
+            {12345.1234567}
+          </Unit>
+        </td>
+        <td>
+          <Text kind="caption">
+            detects value larger than 1 uses minimumFractionDigits and
+            maximumFractionDigits
+          </Text>
+        </td>
+      </tr>
+    </tbody>
+  </Table>
+`;
+
+NumberFractionDigits.story = {
+  parameters: {
+    docs: {
+      storyDescription: `You can customize the number of decimal places by changing the \`minimumFractionDigits\` and \`maximumFractionDigits\` prop. If \`value < 1\` is getting displayed the \`minimumFractionDigits\` will automatically adopt to display the significant decimal places.`,
+      source: {
+        code: sourcecode,
+      },
+    },
+  },
+};

package/src/components/Unit/Unit.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import scaleLookup from './scaleLookup';
+
+import {
+  Countries,
+  Usd,
+  Partners,
+  Beneficiaries,
+  Households,
+  People,
+  Months,
+  Level,
+  Mt,
+  Kg,
+  MetricTons,
+  Trips,
+  None,
+  Num,
+  Percentage,
+  YearMonth,
+} from './UnitList';
+import useSettings from '../../hooks/useSettings';
+// All Unit Components together in <Unit type="Unitname" />
+
+interface UnitProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+    The value which should be displayed
+  */
+  children: string | number;
+  /**
+      Only used for type Percentage will divide value/from string, float
+    */
+  from?: string | number;
+  /**
+      The interface of the input value
+    */
+  input?: string;
+  /**
+   * Display zero values to be displayed
+   */
+  showZero: boolean;
+  /**
+      Hide the Unit if it's value is zero.
+    */
+  hideEmpty: boolean;
+  /**
+      The minimum number of fraction digits to use. Possible values are from 0 to 20. Only used on numeric types
+    */
+  minimumFractionDigits?: number;
+  /**
+      A value between 1-21, The maximum number of significant digits to use. Possible values are from 1 to 21; the default is minimumSignificantDigits.
+    */
+  maximumSignificantDigits?: number;
+
+  output?: string;
+
+  string?: boolean;
+  localeStringLanguage?: string;
+  maximumFractionDigits?: number;
+  textAnchor?: string;
+
+  /**
+   * A string with a BCP 47 language code, or an array of language codes. For the general form and interpretation of the locale argument see the [toLocaleString on developer.mozilla.org](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) page.
+   */
+  locale?: string;
+
+  /**
+      Setup the Unit
+    */
+  setup?: boolean;
+  /**
+      Render output as svg text
+    */
+  svg?: boolean;
+  /**
+      The unit type  */
+  type:
+    | 'none'
+    | 'usd'
+    | 'partners'
+    | 'beneficiaries'
+    | 'households'
+    | 'months'
+    | 'mt'
+    | 'metricTons'
+    | 'kg'
+    | 'num'
+    | 'yearMonth'
+    | 'level'
+    | 'people'
+    | 'countries'
+    | 'percentage';
+}
+
+const components = {
+  Usd,
+  Partners,
+  Beneficiaries,
+  Households,
+  Months,
+  Mt,
+  Kg,
+  MetricTons,
+  Num,
+  Level,
+  None,
+  Trips,
+  Countries,
+  People,
+  Percentage,
+  YearMonth,
+};
+
+/** The Unit component method returns a component with a language and unit sensitive representation of this number based on [Numbers and Unit from the Editorial Guidelines](https://cdn.wfp.org/guides/editorial/content/numbers-and-units/) the [Numbers and Units Reference on developer.mozilla.org](http://cdn.wfp.org/guides/editorial/content/numbers-and-units). */
+
+const Unit: React.FC<UnitProps> = (props) => {
+  const { prefix } = useSettings();
+
+  const {
+    className,
+    output,
+    string,
+    textAnchor,
+    localeStringLanguage = 'en-EN',
+    type = 'none',
+    setup,
+  } = props;
+  const typeEl = props.type.charAt(0).toUpperCase() + props.type.slice(1);
+  const Unit = components[typeEl];
+  //const unitHideClass = setup && setup.hideUnit ? 'wfp--unit--hide' : '';
+  const textAnchorCalc = textAnchor ? textAnchor : 'start';
+  const unitClassName = type ? `${prefix}--unit--${type.toLowerCase()}` : '';
+
+  const outputClassName =
+    output && scaleLookup[output] ? `${prefix}--unit--${output}` : '';
+  const setupClassName = setup ? `${prefix}--unit--${setup}` : '';
+  const classNameCalc = `${prefix}--unit ${className} ${unitClassName} ${outputClassName} ${setupClassName}`;
+
+  if (string) {
+    return Unit(props);
+  }
+
+  if (Unit === undefined) {
+    //  console.warn(`The unit "${type}" is undefined`);
+    return null;
+  }
+
+  return (
+    <Unit
+      {...props}
+      className={classNameCalc}
+      textAnchor={textAnchorCalc}
+      localeStringLanguage={localeStringLanguage}
+    />
+  );
+};
+
+export default Unit;

package/src/components/Unit/UnitList.tsx

@@ -0,0 +1,84 @@
+import currencyCalc from "./currencyCalc";
+import percentageCalc from "./percentageCalc";
+import SimpleCalc from "./SimpleCalc";
+import YearMonthCalc from "./YearMonthCalc";
+
+// Generate USD
+export const Usd = (props) => {
+  return currencyCalc(props, "", "US$");
+};
+
+// Generate People
+export const People = (props) => {
+  return currencyCalc(props, "People", undefined, true, true);
+};
+
+// Generate Partners
+export const Partners = (props) => {
+  return currencyCalc(props, "Partners", undefined, true, true);
+};
+
+// Generate MT
+export const Mt = (props) => {
+  return currencyCalc(props, "MT", undefined, true);
+};
+
+// Generate MetricTons
+export const MetricTons = (props) => {
+  return currencyCalc(props, "MetricTons", undefined, true);
+};
+
+// Generate Months
+export const Months = (props) => {
+  return currencyCalc(props, "Months", undefined, true, "Month");
+};
+
+// Generate Num
+export const Num = (props) => {
+  return currencyCalc(props, "");
+};
+
+// Generate Beneficiaries
+export const Beneficiaries = (props) => {
+  return currencyCalc(props, "Beneficaries", undefined, true, true);
+};
+
+// Generate Households
+export const Households = (props) => {
+  return currencyCalc(props, "Households", undefined, true, true);
+};
+
+// Generate Trips
+export const Trips = (props) => {
+  return currencyCalc(props, "Trips", undefined, true, true);
+};
+
+// Generate kg
+export const Kg = (props) => {
+  return SimpleCalc(props, "kg");
+};
+
+// Generate Households
+export const Level = (props) => {
+  return SimpleCalc(props, "");
+};
+
+// Generate Countries
+export const Countries = (props) => {
+  return SimpleCalc(props, "Countries");
+};
+
+// Generate None
+export const None = (props) => {
+  return SimpleCalc(props, "");
+};
+
+// Generate Percentage
+export const Percentage = (props) => {
+  return percentageCalc(props, "%");
+};
+
+// Generate YearMonth
+export const YearMonth = (props) => {
+  return YearMonthCalc(props);
+};

package/src/components/Unit/YearMonthCalc.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import SvgUnit from "./SvgUnit";
+import StringUnit from "./StringUnit";
+
+const YearMonthGen = (props) => {
+  const { children } = props;
+
+  const value = children;
+
+  let newDate;
+  /* Generate Date from Date */
+  if (typeof value === "number" && value.toString().length >= 7) {
+    newDate = new Date(value, props);
+  } else if (value.getMonth) {
+    /* Use Date Object */
+    newDate = value;
+  } else {
+    /* Generate Date from String YYYYMM */
+    const year = value.toString().substring(0, 4);
+    const month = parseInt(value.toString().substring(4, 7), 10) - 1;
+    newDate = new Date(year, month, 1);
+  }
+  const monthName = newDate.toLocaleString("en-us", { month: "short" });
+  const monthNameFull = newDate.toLocaleString("en-us", { month: "long" });
+  return {
+    monthName: monthName,
+    monthNameFull: monthNameFull,
+    year: newDate.getFullYear(),
+    date: newDate,
+  };
+};
+
+/*const MonthYearCalcDate = ( value, showZero, showUnit ) => {
+  const year = value.toString().substring(0, 4);
+  const month = parseInt(value.toString().substring(4, 7), 10) - 1;
+  const newDate = new Date(year, month, 1);
+  return newDate
+}*/
+
+// Format YYYYMM / from 201709  => Sep 2017
+export const YearMonthCalc = (props) => {
+  const { className, string, svg, calcOnly } = props;
+  const YearMonthgenerated = YearMonthGen(props);
+
+  const calcObject = {
+    value: YearMonthgenerated.monthName + " " + YearMonthgenerated.year,
+    before: "",
+    after: "",
+    output: undefined,
+  };
+
+  if (calcOnly) return calcObject;
+  else if (svg) return SvgUnit(calcObject, props);
+  else if (string) return StringUnit(calcObject /*, props*/);
+  else if (calcObject?.value)
+    return <span className={className}>{calcObject.value}</span>;
+};
+
+export default YearMonthCalc;