feat(list): add the ordered variant

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
patternfly · Dec 13, 2019 · 41e9bc4 · 41e9bc4
1 parent 9909f88
commit 41e9bc4
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 20 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/List/List.test.js b/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, ListComponent, OrderType } from './List';
 import { ListItem } from './ListItem';
 
 const ListItems = () => (
@@ -25,10 +25,52 @@ 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={ListComponent.ol}>
+        <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={ListComponent.ol} start={2}>
+        <ListItem>Banana</ListItem>
+        <ListItem>Orange</ListItem>
+      </List>
+    );
+    expect(view.find('ol').prop('start')).toBe(2);
+  });
+
+  test('ordered list items will be numbered with uppercase letters', () => {
+    const view = mount(
+      <List component={ListComponent.ol} type={OrderType.uppercaseLetter}>
+        <ListItem>Banana</ListItem>
+        <ListItem>Orange</ListItem>
+      </List>
+    );
+    expect(view.find('ol').prop('type')).toBe('A');
+  });
+
+  test('inlined ordered list', () => {
+    const view = mount(
+      <List variant={ListVariant.inline} component={ListComponent.ol}>
+        <ListItem>Apple</ListItem>
+        <ListItem>Banana</ListItem>
+        <ListItem>Orange</ListItem>
+      </List>
+    );
+    expect(view.find('ol.pf-m-inline').length).toBe(1);
+  });
 });
diff --git a/packages/patternfly-4/react-core/src/components/List/List.tsx b/packages/patternfly-4/react-core/src/components/List/List.tsx
@@ -1,27 +1,53 @@
 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',
 }
 
-export interface ListProps extends React.HTMLProps<HTMLUListElement> {
+export enum ListComponent {
+  ol = 'ol',
+  ul = 'ul',
+}
+
+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?: 'ol' | 'ul';
 }
 
 export const List: React.FunctionComponent<ListProps> = ({
   className = '',
   children = null,
   variant = null,
+  type = OrderType.number,
+  ref = null,
+  component = ListComponent.ul,
   ...props
-}) => (
-  <ul {...props} className={css(styles.list, variant && getModifier(styles.modifiers, variant), className)}>
-    {children}
-  </ul>
-);
+}) => {
+  return component === ListComponent.ol ? (
+    <ol ref={ref as React.LegacyRef<HTMLOListElement>} type={type} {...props} className={css(styles.list, variant && getModifier(styles.modifiers, variant), className)}>
+      {children}
+    </ol>
+  ) : (
+      <ul ref={ref as React.LegacyRef<HTMLUListElement>} {...props} className={css(styles.list, variant && getModifier(styles.modifiers, variant), className)}>
+        {children}
+      </ul>
+    );
+}
diff --git a/packages/patternfly-4/react-core/src/components/List/examples/List.md b/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, ListComponent, 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, ListComponent, OrderType } from '@patternfly/react-core';
+
+OrderedList = (
+  <List component={ListComponent.ol} type={OrderType.number}>
     <ListItem>First</ListItem>
     <ListItem>Second</ListItem>
     <ListItem>Third</ListItem>

diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginPage.test.tsx b/packages/patternfly-4/react-core/src/components/LoginPage/LoginPage.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import { LoginPage } from './LoginPage';
+import { ListVariant } from '../List';
 
 const needAccountMesseage = (
   <React.Fragment>
@@ -12,7 +13,7 @@ const needAccountMesseage = (
 test('check loginpage example against snapshot', () => {
   const view = shallow(
     <LoginPage
-      footerListVariants="inline"
+      footerListVariants={ListVariant.inline}
       brandImgSrc="Brand src"
       brandImgAlt="Pf-logo"
       backgroundImgSrc="Background src"

diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginPage.tsx b/packages/patternfly-4/react-core/src/components/LoginPage/LoginPage.tsx
@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 
 import { BackgroundImage, BackgroundImageSrcMap } from '../BackgroundImage';
 import { Brand } from '../Brand';
-import { List } from '../List';
+import { List, ListVariant } from '../List';
 
 import { Login } from './Login';
 import { LoginHeader } from './LoginHeader';
@@ -30,7 +30,7 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   /** Items rendered inside of the Footer List Component of the LoginPage */
   footerListItems?: React.ReactNode;
   /** Adds list variant styles for the Footer List component of the LoginPage. The only current value is'inline' */
-  footerListVariants?: 'inline';
+  footerListVariants?: ListVariant.inline;
   /** Title for the Login Main Body Header of the LoginPage */
   loginTitle: string;
   /** Subtitle for the Login Main Body Header of the LoginPage */

diff --git a/packages/patternfly-4/react-integration/cypress/integration/list.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/list.spec.ts
@@ -12,4 +12,8 @@ describe('List Demo Test', () => {
   it('Verify inline list', () => {
     cy.get('.pf-m-inline li').contains('I am an inline list item');
   });
+
+  it('Verify ordered list', () => {
+    cy.get('.pf-c-list li').contains('I am an ordered list item');
+  });
 });
diff --git a/...ges/patternfly-4/react-integration/demo-app-ts/src/components/demos/ListDemo/ListDemo.tsx b/...ges/patternfly-4/react-integration/demo-app-ts/src/components/demos/ListDemo/ListDemo.tsx
@@ -1,10 +1,14 @@
-import { List, ListProps, ListVariant, ListItem } from '@patternfly/react-core';
+import { List, ListProps, ListVariant, ListComponent, ListItem } from '@patternfly/react-core';
 import React, { Component } from 'react';
 export class ListDemo extends Component {
   myInlineListProps: ListProps = {
     variant: ListVariant.inline
   };
 
+  myOrderedListProps: ListProps = {
+    component: ListComponent.ol
+  }
+
   componentDidMount() {
     window.scrollTo(0, 0);
   }
@@ -22,6 +26,11 @@ export class ListDemo extends Component {
           <ListItem>I am an inline list item</ListItem>
           <ListItem>I am an inline list item</ListItem>
         </List>
+        <List component={this.myOrderedListProps.component}>
+          <ListItem>I am an ordered list item</ListItem>
+          <ListItem>I am an ordered list item</ListItem>
+          <ListItem>I am an ordered list item</ListItem>
+        </List>
       </React.Fragment>
     );
   }

diff --git a/...nfly-4/react-integration/demo-app-ts/src/components/demos/LoginPageDemo/LoginPageDemo.tsx b/...nfly-4/react-integration/demo-app-ts/src/components/demos/LoginPageDemo/LoginPageDemo.tsx
@@ -13,7 +13,8 @@ import {
   LoginMainFooterLinksItem,
   LoginPage,
   BackgroundImageSrc,
-  ListItem
+  ListItem,
+  ListVariant,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
@@ -156,7 +157,7 @@ export class LoginPageDemo extends React.Component<React.HTMLProps<HTMLDivElemen
 
     return (
       <LoginPage
-        footerListVariants="inline"
+        footerListVariants={ListVariant.inline}
         brandImgSrc={brandImg}
         brandImgAlt="PatternFly logo"
         backgroundImgSrc={images}