feat(list): add the ordered variant

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>

packages/patternfly-4/react-core/src/components/List/List.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { List } from './List';
+import { List, ListVariant, OrderType } from './List';
 import { ListItem } from './ListItem';
 
 const ListItems = () => (
@@ -25,10 +25,43 @@ describe('list', () => {
 
   test('inline list', () => {
     const view = mount(
-      <List variant="inline">
+      <List variant={ListVariant.inline}>
         <ListItems />
       </List>
     );
     expect(view).toMatchSnapshot();
   });
+
+  test('ordered list', () => {
+    const view = mount(
+      <List component={ListVariant.ordered}>
+        <ListItem>Apple</ListItem>
+        <ListItem>Banana</ListItem>
+        <ListItem>Orange</ListItem>
+      </List>
+    );
+    expect(view.find('ol').length).toBe(1);
+  });
+
+  test('ordered list starts with 2nd item', () => {
+    const view = mount(
+      <List component={ListVariant.ordered} start={2}>
+        <ListItem>Banana</ListItem>
+        <ListItem>Orange</ListItem>
+      </List>
+    );
+    console.log(view.debug())
+    expect(view.find('ol').prop('start')).toBe(2);
+  });
+
+  test('ordered list items will be numbered with uppercase letters', () => {
+    const view = mount(
+      <List component={ListVariant.ordered} type={OrderType.uppercaseLetter}>
+        <ListItem>Banana</ListItem>
+        <ListItem>Orange</ListItem>
+      </List>
+    );
+    console.log(view.debug())
+    expect(view.find('ol').prop('type')).toBe('A');
+  });
 });

packages/patternfly-4/react-core/src/components/List/List.tsx

@@ -1,27 +1,50 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/List/list';
 import { css, getModifier } from '@patternfly/react-styles';
+import { Omit } from '../../helpers/typeUtils'
+
+export enum OrderType {
+  number = '1',
+  lowercaseLetter = 'a',
+  uppercaseLetter = 'A',
+  lowercaseRomanNumber = 'i',
+  uppercaseRomanNumber = 'I',
+}
 
 export enum ListVariant {
-  inline = 'inline'
+  inline = 'inline',
+  ordered = 'ol',
+  unordered = 'ul',
 }
 
-export interface ListProps extends React.HTMLProps<HTMLUListElement> {
+export interface ListProps extends Omit<React.HTMLProps<HTMLUListElement | HTMLOListElement>, 'type'> {
   /** Anything that can be rendered inside of the list */
   children?: React.ReactNode;
-  /** Additional classes added to the list. */
+  /** Additional classes added to the list */
   className?: string;
   /** Adds list variant styles */
-  variant?: 'inline';
+  variant?: ListVariant.inline;
+  /** Sets the way items are numbered if variant is set to ordered */
+  type?: OrderType;
+  component?: ListVariant.ordered | ListVariant.unordered;
 }
 
 export const List: React.FunctionComponent<ListProps> = ({
   className = '',
   children = null,
   variant = null,
+  type = OrderType.number,
+  ref = null,
+  component = ListVariant.unordered,
   ...props
-}) => (
-  <ul {...props} className={css(styles.list, variant && getModifier(styles.modifiers, variant), className)}>
-    {children}
-  </ul>
-);
+}) => {
+  return component === ListVariant.ordered ? (
+    <ol ref={ref as React.LegacyRef<HTMLOListElement>} type={type} {...props} className={css(styles.list, className)}>
+      {children}
+    </ol>
+  ) : (
+      <ul ref={ref as React.LegacyRef<HTMLUListElement>} {...props} className={css(styles.list, variant && getModifier(styles.modifiers, variant), className)}>
+        {children}
+      </ul>
+    );
+}

packages/patternfly-4/react-core/src/components/List/examples/List.md

@@ -6,7 +6,7 @@ typescript: true
 propComponents: ['List', 'ListItem']
 ---
 
-import { List, ListItem } from '@patternfly/react-core';
+import { List, ListItem, ListVariant, OrderType } from '@patternfly/react-core';
 
 ## Examples
 ```js title=Basic
@@ -24,10 +24,23 @@ SimpleList = (
 
 ```js title=Inline
 import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
+import { List, ListItem, ListVariant } from '@patternfly/react-core';
 
 InlineList = (
-  <List variant="inline">
+  <List variant={ListVariant.inline}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);
+```
+
+```js title=Ordered
+import React from 'react';
+import { List, ListItem, ListVariant, OrderType } from '@patternfly/react-core';
+
+OrderedList = (
+  <List component={ListVariant.ordered} type={OrderType.number}>
     <ListItem>First</ListItem>
     <ListItem>Second</ListItem>
     <ListItem>Third</ListItem>