FAD-5354 Add ActionList

8 files changed, 140 insertions, 5 deletions

diff --git a/src/components/ActionList/ActionList.js b/src/components/ActionList/ActionList.js
new file mode 100644
index 0000000..9d181fd
--- /dev/null
+++ b/src/components/ActionList/ActionList.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+
+import UnstyledLink, { linkFrom } from '../UnstyledLink';
+import styles from './ActionList.module.scss';
+
+const Section = ({ section }) => {
+  const actions = section.actions.map((action, index) => {
+    return linkFrom({ ...action, className: styles.Action }, index);
+  });
+  return (
+    <div className={styles.Section}>
+      { actions }
+    </div>
+  )
+}
+
+class ActionList extends Component {
+  render() {
+    const {
+      actions,
+      sections
+    } = this.props;
+
+    let list = [{ actions }];
+
+    if (sections) {
+      list = [{ actions }].concat(sections);
+    }
+
+    const listMarkup = list.map((section, index) => <Section section={section} key={index} />)
+
+    return (
+      <div className={styles.ActionList}>
+        { listMarkup }
+      </div>
+    );
+  }
+}
+
+export default ActionList;
diff --git a/src/components/ActionList/ActionList.module.scss b/src/components/ActionList/ActionList.module.scss
new file mode 100644
index 0000000..0a23705
--- /dev/null
+++ b/src/components/ActionList/ActionList.module.scss
@@ -0,0 +1,31 @@
+@import '../../styles/config';
+
+.ActionList {
+  padding-top: spacing(small);
+  overflow: scroll;
+  z-index: 1;
+  max-height: rem(200)
+}
+
+.Section {
+  border-bottom: 1px solid color(gray, 8);
+
+  &:last-child {
+    border: none;
+  }
+
+  &:first-child {
+    margin-top: 3px;
+  }
+}
+
+.Action, a.Action {
+  display: block;
+  padding: rem(9) spacing();
+  color: color(gray, 3);
+
+  &:hover {
+    background: color(blue);
+    color: color(gray, 10);
+  }
+}
diff --git a/src/components/ActionList/index.js b/src/components/ActionList/index.js
new file mode 100644
index 0000000..aba0fa8
--- /dev/null
+++ b/src/components/ActionList/index.js
@@ -0,0 +1 @@
+export { default as ActionList } from './ActionList';
diff --git a/src/components/Popover/Popover.js b/src/components/Popover/Popover.js
index 9764ce4..7447451 100644
--- a/src/components/Popover/Popover.js
+++ b/src/components/Popover/Popover.js
@@ -17,6 +17,10 @@ class Popover extends Component {
       */
      sectioned: PropTypes.bool,
      /**
+      * Optional, opens the popover
+      */
+     open: PropTypes.bool,
+     /**
       * Popover Content
       */
      children: PropTypes.oneOfType([
@@ -28,7 +32,7 @@ class Popover extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: false
+      open: props.open
     }
 
     this.handleClickOutside = this.handleClickOutside.bind(this);
@@ -88,9 +92,11 @@ class Popover extends Component {
       <div className={wrapperClasses}>
         { triggerMarkup }
         <div className={popoverClasses} {...rest}>
-          { children }
+          <span className={styles.Tip} />
+          <div className={styles.Content} >
+            { children }
+          </div>
         </div>
-        <span className={styles.Tip} />
       </div>
     );
   }
diff --git a/src/components/Popover/Popover.module.scss b/src/components/Popover/Popover.module.scss
index 2e26787..81f1652 100644
--- a/src/components/Popover/Popover.module.scss
+++ b/src/components/Popover/Popover.module.scss
@@ -22,7 +22,6 @@
   z-index: 1;
 }
 
-
 .sectioned {
   padding: spacing();
 }
@@ -30,7 +29,7 @@
 .Tip {
   display: block;
   position: absolute;
-  top: 100%;
+  top: rem(-14);
   left: rem(21);
   width: rem(14);
   height: rem(14);
@@ -49,6 +48,13 @@
   z-index: 1;
 }
 
+.Content {
+  position: relative;
+  z-index: 1;
+  border-radius: border-radius(large);
+  overflow: hidden;
+}
+
 .Wrapper {
   position: relative;
 }
diff --git a/src/components/index.js b/src/components/index.js
index 0932dee..5900e98 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export * from './ActionList';
 export * from './Banner';
 export * from './Button';
 export * from './Checkbox';
diff --git a/stories/ActionList.js b/stories/ActionList.js
new file mode 100644
index 0000000..21a1198
--- /dev/null
+++ b/stories/ActionList.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { StoryContainer } from './helpers';
+
+import { ActionList, Popover, Button } from '../src';
+
+storiesOf('ActionList', module)
+  .addDecorator((getStory) => (
+    <StoryContainer>{ getStory() }</StoryContainer>
+  ))
+  .addWithInfo('within a Popover',
+  () => (
+    <Popover
+      open={true}
+      trigger={<Button>More Actions</Button>}
+      style={{ width: '200px' }}>
+      <ActionList
+        actions={[
+          {
+            content: 'Edit'
+          },
+          {
+            content: 'Delete'
+          },
+          {
+            content: 'Details'
+          },
+          {
+            content: 'Test'
+          }
+        ]}
+        sections={[
+          {
+            actions: [
+              {
+                content: 'Sectioned1'
+              },
+              {
+                content: 'Sectioned2'
+              }
+            ]
+          }
+        ]}/>
+    </Popover>
+  ));
diff --git a/stories/index.js b/stories/index.js
index 6aa9ea2..9f36314 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -14,6 +14,7 @@ import './ProgressBar';
 import './Datepicker';
 import './Tooltip';
 import './Popover';
+import './ActionList';
 import './Table';
 import './Modal';
 import './Icons';