add elementAttributes to navpill and navpills. (#59)

instacart · Oct 10, 2017 · 804db52 · 804db52
1 parent 9558840
commit 804db52
Show file tree

Hide file tree

Showing 6 changed files with 335 additions and 1 deletion.
diff --git a/src/components/NavigationPills/NavigationPill.js b/src/components/NavigationPills/NavigationPill.js
@@ -51,7 +51,10 @@ const NavigationPill = props => {
   }
 
   return (
-    <li style={styles.container}>
+    <li
+      style={styles.container}
+      { ...props.elementAttributes }
+    >
       <a
         href={props.path || '#'}
         data-bypass={true}
@@ -70,6 +73,9 @@ const NavigationPill = props => {
 }
 
 NavigationPill.propTypes = {
+  /** Any additonal props to add to the element (e.g. data attributes). */
+  elementAttributes: PropTypes.object,
+
   /** determines wether or not active styles are applied */
   isActive: PropTypes.bool,
   /** Callback function called after pill click
@@ -86,6 +92,7 @@ NavigationPill.propTypes = {
 }
 
 NavigationPill.defaultProps = {
+  elementAttributes: {},
   isActive: false
 }
 

diff --git a/src/components/NavigationPills/NavigationPills.js b/src/components/NavigationPills/NavigationPills.js
@@ -51,6 +51,7 @@ const NavigationPills = props => {
       <div
         style={wrapperStyles}
         ref='pillsTrack'
+        { ...props.elementAttributes }
       >
         {renderLabel()}
         <ul style={pillsContainerStyles}>
@@ -62,6 +63,9 @@ const NavigationPills = props => {
 }
 
 NavigationPills.propTypes = {
+  /** Any additonal props to add to the element (e.g. data attributes). */
+  elementAttributes: PropTypes.object,
+
   /** array of pill objects */
   pills: PropTypes.array,
   /** Callback function called after pill click
@@ -75,4 +79,8 @@ NavigationPills.propTypes = {
   activePill: PropTypes.string
 }
 
+NavigationPills.defaultProps = {
+  elementAttributes: {}
+}
+
 export default Radium(NavigationPills)
diff --git a/src/components/NavigationPills/__tests__/NavigationPill.spec.js b/src/components/NavigationPills/__tests__/NavigationPill.spec.js
@@ -32,3 +32,13 @@ it('renders href pill correctly', () => {
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
+
+it('renders element attributes on pill correctly', () => {
+  const tree = renderer.create(
+    <NavigationPill
+      text={'pill with attributes'}
+      elementAttributes={{ ariaLabel:'this is an aria label', role:'tab'}}
+    />
+  ).toJSON()
+  expect(tree).toMatchSnapshot()
+})
diff --git a/src/components/NavigationPills/__tests__/NavigationPills.spec.js b/src/components/NavigationPills/__tests__/NavigationPills.spec.js
@@ -59,6 +59,23 @@ it('renders NavigationPills without pills correctly', () => {
   expect(tree).toMatchSnapshot()
 })
 
+it('renders NavigationPills with elementAttributes correctly', () => {
+  const tree = renderer.create(
+    <StyleRoot>
+      <div>
+        <NavigationPills
+            pills={ testPills }
+            onPillClick={(e, pill) => { console.log(pill) }}
+            label={'Filter by'}
+            activePill={'dom2'}
+            elementAttributes={{ ariaLabel:'this is an aria label', role:'tabs'}}
+          />
+      </div>
+    </StyleRoot>
+  ).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
 it('it handles onPillClick correctly', () => {
   const onPillClick = spy()
   const Pills = mount(

diff --git a/src/components/NavigationPills/__tests__/__snapshots__/NavigationPill.spec.js.snap b/src/components/NavigationPills/__tests__/__snapshots__/NavigationPill.spec.js.snap
@@ -37,6 +37,45 @@ exports[`renders active pill correctly 1`] = `
 </li>
 `;
 
+exports[`renders element attributes on pill correctly 1`] = `
+<li
+  ariaLabel="this is an aria label"
+  data-radium={true}
+  role="tab"
+  style={
+    Object {
+      "display": "inline-block",
+    }
+  }
+>
+  <a
+    data-bypass={true}
+    data-radium={true}
+    href="#"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#F7F7F7",
+        "borderRadius": "24px",
+        "color": "#43B02A",
+        "display": "block",
+        "fontSize": "14px",
+        "lineHeight": "1.2",
+        "margin": "0 4px",
+        "padding": "12px 16px",
+        "transition": "background-color 150ms ease-in-out",
+      }
+    }
+  >
+    pill with attributes
+  </a>
+</li>
+`;
+
 exports[`renders href pill correctly 1`] = `
 <li
   data-radium={true}