@progressiveui/react 1.22.0

package/src/components/Table/TableResponsive-story-legacy.js

@@ -0,0 +1,216 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ReactTable from 'react-table';
+
+import TablePagination from '../TablePagination';
+import { List, ListItem } from '../List';
+import Button from '../Button';
+
+const data = [
+  {
+    outcome_indicator: 'Consumption-based Coping Strategy Index (Average)',
+    target_location: 'Chipinge',
+    data_source: 'Base Value: 2017.12, Joint survey, Baseline Survey',
+    base_value_male: '12.06',
+    base_value_female: '21.8',
+    base_value_overall: '19.43',
+    latest_follow_up_male: '12.06',
+    latest_follow_up_female: '23.8',
+    latest_follow_up_overall: '13.43',
+    year_end_target_male: '18.06',
+    year_end_target_female: '21.8',
+    year_end_target_overall: '12.43',
+    csp_end_target_male: '18.06',
+    csp_end_target_female: '20.8',
+    csp_end_target_overall: '13.43',
+  },
+  {
+    outcome_indicator: 'Takimata sanctus est ',
+    target_location: 'Chipinge',
+    data_source: 'Magna aliquyam',
+    base_value_male: '12.06',
+    base_value_female: '21.8',
+    base_value_overall: '19.43',
+    latest_follow_up_male: '12.06',
+    latest_follow_up_female: '23.8',
+    latest_follow_up_overall: '13.43',
+    year_end_target_male: '18.06',
+    year_end_target_female: '21.8',
+    year_end_target_overall: '12.43',
+    csp_end_target_male: '18.06',
+    csp_end_target_female: '20.8',
+    csp_end_target_overall: '13.43',
+  },
+  {
+    outcome_indicator: 'Consetetur sadipscing elitr, sed',
+    target_location: 'Chipinge',
+    data_source: 'Takimata sanctus est',
+    base_value_male: '12.06',
+    base_value_female: '21.8',
+    base_value_overall: '19.43',
+    latest_follow_up_male: '12.06',
+    latest_follow_up_female: '23.8',
+    latest_follow_up_overall: '13.43',
+    year_end_target_male: '18.06',
+    year_end_target_female: '21.8',
+    year_end_target_overall: '12.43',
+    csp_end_target_male: '18.06',
+    csp_end_target_female: '20.8',
+    csp_end_target_overall: '13.43',
+  },
+  {
+    outcome_indicator: 'Lorem ipsum dolor sit amet,',
+    target_location: 'Lorem ipsum dolor sit ',
+    data_source: ' est Lorem ipsum dolor sit ',
+    base_value_male: '12.06',
+    base_value_female: '21.8',
+    base_value_overall: '19.43',
+    latest_follow_up_male: '12.06',
+    latest_follow_up_female: '23.8',
+    latest_follow_up_overall: '13.43',
+    year_end_target_male: '18.06',
+    year_end_target_female: '21.8',
+    year_end_target_overall: '12.43',
+    csp_end_target_male: '18.06',
+    csp_end_target_female: '20.8',
+    csp_end_target_overall: '13.43',
+  },
+  {
+    outcome_indicator: 'Consumption-based Coping Strategy Index (Average)',
+    target_location: ' Duo dolores et ea',
+    data_source: 'Stet clita kasd gubergren',
+    base_value_male: '12.06',
+    base_value_female: '22.8',
+    base_value_overall: '11.43',
+    latest_follow_up_male: '12.06',
+    latest_follow_up_female: '33.8',
+    latest_follow_up_overall: '73.43',
+    year_end_target_male: '18.06',
+    year_end_target_female: '21.8',
+    year_end_target_overall: '12.43',
+    csp_end_target_male: '18.06',
+    csp_end_target_female: '20.8',
+    csp_end_target_overall: '13.43',
+  },
+
+  {
+    outcome_indicator: 'Consumption-based Coping Strategy Index (Average)',
+    target_location: ' Duo dolores et ea',
+    data_source: 'Stet clita kasd gubergren',
+    base_value_male: '12.06',
+    base_value_female: '22.8',
+    base_value_overall: '11.43',
+    latest_follow_up_male: '12.06',
+    latest_follow_up_female: '33.8',
+    latest_follow_up_overall: '73.43',
+    year_end_target_male: '18.06',
+    year_end_target_female: '21.8',
+    year_end_target_overall: '12.43',
+    csp_end_target_male: '18.06',
+    csp_end_target_female: '20.8',
+    csp_end_target_overall: '13.43',
+  },
+
+  {
+    outcome_indicator: 'Consumption-based Coping Strategy Index (Average)',
+    target_location: ' Duo dolores et ea',
+    data_source: 'Stet clita kasd gubergren',
+    base_value_male: '12.06',
+    base_value_female: '22.8',
+    base_value_overall: '11.43',
+    latest_follow_up_male: '12.06',
+    latest_follow_up_female: '33.8',
+    latest_follow_up_overall: '73.43',
+    year_end_target_male: '18.06',
+    year_end_target_female: '21.8',
+    year_end_target_overall: '12.43',
+    csp_end_target_male: '18.06',
+    csp_end_target_female: '20.8',
+    csp_end_target_overall: '13.43',
+  },
+];
+
+const InlineMobile = props => {
+  return (
+    <div className="ReactTable--responsive__cell">
+      <span className="ReactTable--responsive__cell__title">
+        {props.column.Header}
+      </span>
+      <span className="ReactTable--responsive__cell__content">
+        {props.value}
+      </span>
+    </div>
+  );
+};
+
+const GenderBreakdown = props => {
+  return (
+    <List kind="simple" small>
+      <ListItem title="Male">{props.original.csp_end_target_female}</ListItem>
+      <ListItem title="Female">{props.original.csp_end_target_female}</ListItem>
+      <ListItem title="Overfall">
+        {props.original.csp_end_target_female}
+      </ListItem>
+    </List>
+  );
+};
+
+const ResponsiveExpanderComponent = props => (
+  <div className={`rt-expander ${props.isExpanded ? '-open' : ''}`}>
+    <Button small>{props.isExpanded ? 'Hide Details' : 'Show Details'}</Button>
+  </div>
+);
+
+const columns = [
+  {
+    Header: 'Outcome Indicator',
+    accessor: 'outcome_indicator',
+    Cell: InlineMobile,
+  },
+  {
+    Header: 'Target / Location',
+    accessor: 'target_location',
+    Cell: InlineMobile,
+  },
+  {
+    Header: 'Base Value',
+    accessor: 'base_value_overall',
+    Cell: GenderBreakdown,
+  },
+  {
+    Header: 'Latest Follow Up',
+    accessor: 'latest_follow_up_overall',
+    Cell: GenderBreakdown,
+  },
+  {
+    Header: 'Year End Target',
+    accessor: 'year_end_target_overall',
+    Cell: GenderBreakdown,
+  },
+  {
+    Header: 'CSP End Target',
+    accessor: 'csp_end_target_overall',
+    Cell: GenderBreakdown,
+  },
+];
+
+//PaginationComponent={Pagination}
+
+storiesOf('Components|Table', module).add('responsive', () => (
+  <ReactTable
+    data={data}
+    defaultPageSize={5}
+    className="ReactTable--responsive ReactTable--alternate-row"
+    columns={columns}
+    minRows={1}
+    ExpanderComponent={ResponsiveExpanderComponent}
+    PaginationComponent={TablePagination}
+    SubComponent={row => {
+      return (
+        <div className="ReactTable__subcomponent">
+          {row.original.data_source}
+        </div>
+      );
+    }}
+  />
+));

package/src/components/Table/TableSimple-story-legacy.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+storiesOf('Components|Table', module)
+  .addDecorator(withKnobs)
+  .add('Simple table', () => (
+    <table className="wfp--table">
+      <thead>
+        <tr className="wfp--table-thead-row--center">
+          <th colspan="2">Name</th>
+          <th colspan="4">Info</th>
+        </tr>
+        <tr class="">
+          <th colspan="1">First Name</th>
+          <th colspan="1">Last Name</th>
+          <th colspan="1">Age</th>
+          <th colspan="1">Visits</th>
+          <th colspan="1">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Max</td>
+          <td>Mustermann</td>
+          <td>29</td>
+          <td>32</td>
+          <td>confirmed</td>
+        </tr>
+        <tr>
+          <td>John</td>
+          <td>Doe</td>
+          <td>32</td>
+          <td>21</td>
+          <td>pending</td>
+        </tr>
+      </tbody>
+    </table>
+  ));

package/src/components/Table/TableSorting.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { PropsWithChildren } from "react";
+import classNames from "classnames";
+import { CaretDown, CaretUp } from "@progressiveui/icons-react";
+
+type TableSortingProps = PropsWithChildren<{
+  isSorted?: boolean;
+  isSortedDesc?: boolean;
+  sortType?: boolean;
+  withBorder?: boolean;
+  className?: string;
+}>;
+
+const TableSorting: React.FC<TableSortingProps> = ({
+  className,
+  isSorted,
+  isSortedDesc,
+  sortType,
+}) => {
+  const classes = classNames(className, "wfp--table--sorting", {
+    "wfp--table--is-sorted": isSorted,
+    "wfp--table--is-sortable": sortType,
+  });
+  return (
+    <span className={classes}>
+      {isSorted ? isSortedDesc ? <CaretDown /> : <CaretUp /> : ""}
+    </span>
+  );
+};
+
+export default TableSorting;

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Table';
+export * as TableSorting from './TableSorting';

package/src/components/Table/makeData.js

@@ -0,0 +1,75 @@
+const range = (len) => {
+  const arr = [];
+  for (let i = 0; i < len; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+
+const newPerson = () => {
+  const statusChance = Math.random();
+  return {
+    firstName: 'Max',
+    lastName: 'Mustermann',
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status:
+      statusChance > 0.66
+        ? 'security'
+        : statusChance > 0.33
+        ? 'human ressources'
+        : 'development',
+  };
+};
+
+export default function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth];
+    return range(len).map((d) => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      };
+    });
+  };
+
+  return makeDataLevel();
+}
+
+export const sampleColumns = [
+  {
+    Header: 'Name',
+    columns: [
+      {
+        Header: 'First Name',
+        accessor: 'firstName',
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+      },
+    ],
+  },
+  {
+    Header: 'Info',
+    columns: [
+      {
+        Header: 'Age',
+        accessor: 'age',
+      },
+      {
+        Header: 'Visits',
+        accessor: 'visits',
+      },
+      {
+        Header: 'Status',
+        accessor: 'status',
+      },
+      {
+        Header: 'Profile Progress',
+        accessor: 'progress',
+      },
+    ],
+  },
+];

package/src/components/TablePagination/TablePagination.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import classNames from 'classnames';
+import Pagination from '../Pagination';
+import useSettings from '../../hooks/useSettings';
+
+export interface TagProps extends React.HTMLAttributes<HTMLTableElement> {
+  withBorder?: boolean;
+  responsive?: boolean;
+}
+
+const ReactTablePagination = ({
+  // Computed
+  data,
+  page,
+  pageSizeOptions,
+  paginationClassName,
+  totalItems,
+  style,
+  onPageChange,
+  onPageSizeChange,
+  // Props
+  isLastPage,
+  pages,
+  // showPageSizeOptions,
+  pageInputDisabled,
+  pageSize,
+  pagesUnknown,
+  backwardText,
+  forwardText,
+  itemsPerPageText,
+  itemsPerPageFollowsText,
+  itemRangeText,
+  pageRangeText,
+  pageSizesDisabled,
+  itemText,
+  pageNumberText,
+}) => {
+  const { prefix } = useSettings();
+
+  const getSafePage = (newPage) => {
+    if (isNaN(newPage)) {
+      newPage = page;
+    }
+    return newPage;
+  };
+
+  const changePage = (page) => {
+    const nextPage = getSafePage(page.page - 1);
+
+    // Update Page
+    if (page !== nextPage) {
+      onPageChange(nextPage);
+    }
+
+    // Update PageSize
+    if (pageSize !== page.pageSize) {
+      onPageSizeChange(page.pageSize);
+    }
+  };
+
+  const propList = {
+    isLastPage,
+    pages,
+    //showPageSizeOptions,
+    pageInputDisabled,
+    pageSize,
+    pagesUnknown,
+    backwardText,
+    forwardText,
+    itemsPerPageText,
+    itemsPerPageFollowsText,
+    itemRangeText,
+    pageRangeText,
+    pageSizesDisabled,
+    itemText,
+    pageNumberText,
+  };
+
+  return (
+    <div
+      className={classNames(paginationClassName, '-pagination')}
+      style={style}>
+      <div className={`${prefix}-pagination`}>
+        <Pagination
+          onChange={changePage}
+          pageSizes={pageSizeOptions}
+          page={page}
+          totalItems={totalItems ? totalItems : data ? data.length : undefined}
+          {...propList}
+        />
+      </div>
+    </div>
+  );
+};
+
+ReactTablePagination.displayName = 'ReactTablePagination';
+
+export default ReactTablePagination;

package/src/components/TablePagination/index.ts

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

package/src/components/Tabs/README.mdx

@@ -0,0 +1,113 @@
+**Tabs** are used to quickly navigate between views within the same context.
+
+They are based on the [Carbon Design System Tabs](https://www.carbondesignsystem.com/components/tabs/usage/).
+
+## Usage
+
+#### Use tabs to alternate between views within the same context
+
+not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the reason we have tabs in the first place.
+
+#### Logically chunk
+
+the content behind the tabs so users can easily predict what they'll find when they select a given tab. (Card sorting is one option for researching this “mini-IA” problem. If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content.)
+
+#### Short labels
+
+Write short tab labels and use plain language, rather than made-up terms. Tab labels should usually be 1–2 words. Short labels are more scannable; if you need longer labels, it’s a sign that the choices are too complicated for a tab control.
+
+#### Design tabs
+
+that are parallel in nature. If the tabs are significantly dissimilar, users will interpret them as site navigation.
+
+#### Place the row of tabs on top of the tab panel
+
+not on the sides or the bottom, where users often overlook them. The scope controlled by the tabs should be obvious from the visual design. Metaphorically, using tabs is like leafing through index cards in a drawer of an old-fashioned card catalog, so users must be able to tell at a glance what constitutes an "index card" (i.e., tab panel).
+
+#### Do not use
+
+#### as an input
+
+Tabs should be only used to navigate between views and never as an input.
+
+Source: [Tabs, Used Right by Nielsen Normal Group](https://www.nngroup.com/articles/tabs-used-right/)
+
+#### Usage with react
+
+```js
+import { Tabs, Tab, TabContent } from "@progressiveui/react";
+```
+
+#### Use a custom Tab Link Component
+
+A custom `renderAnchor` replaces the Link inside the `<Tab/>` Component
+
+```js
+const el = (props) => {
+  return <a href={props.href}>{props.label}</div>;
+};
+```
+
+```js
+<Tab
+  {...props.tab()}
+  label="Tab label 4"
+  href="http://www.fr.wfp.org"
+  renderAnchor={el}
+/>
+```
+
+A custom `renderListElement` replaces the whole tab element inside the `<Tab/>` Component, which is especially relevant if you use `<Tabs/>` with react-router, etc.
+
+```js
+const listEl = (props) => (
+  <NavLink {...props} activeClassName="wfp--tabs__nav-item--selected">
+    {props.label}
+  </NavLink>
+);
+```
+
+```js
+<Tab
+  {...props.tab()}
+  label="Tab label 4"
+  href="http://www.fr.wfp.org"
+  renderListElement={listEl}
+/>
+```
+
+#### Use with react-router
+
+Write a custom component to use Tabs with different route handlers like `react-router`.
+
+```js
+import { Link } from "react-router-dom";
+
+const listElReactRouter = ({ anchor, className, to, exact, match }) => (
+  <Route
+    to={to}
+    exact={exact}
+    children={({ match }) => (
+      <li
+        className={
+          match ? className + " wfp--tabs__nav-item--selected" : className
+        }
+      >
+        <Link className={anchor.className} to={to}>
+          {anchor.label}
+        </Link>
+      </li>
+    )}
+  />
+);
+```
+
+```js
+<Tabs customTabContent={true}>
+  <Tab
+    label="React-Router Example"
+    to="/path"
+    renderListElement={listElReactRouter}
+  />
+</Tabs>
+```