Add data-attributes to DOM | Fixes #700

packages/clay-component/src/ClayComponent.js

@@ -39,6 +39,22 @@ class ClayComponent extends Component {
 			}
 		}
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	rendered(...args) {
+		super.rendered(...args);
+
+		for (let dataKey in this.data) {
+			if (Object.prototype.hasOwnProperty.call(this.data, dataKey)) {
+				this.element.setAttribute(
+					'data-' + dataKey,
+					this.data[dataKey]
+				);
+			}
+		}
+	}
 }
 
 /**

packages/clay-component/src/__tests__/ClayComponent.js

@@ -18,7 +18,7 @@ describe('ClayComponent', function() {
 		}
 	});
 
-	it('should create a ClayComponent with `virtual` data attributes', () => {
+	it('should create a ClayComponent with data attributes', () => {
 		component = new ClayComponent({
 			data: {
 				'my-attribute': 'Luke Skywalker',
@@ -28,6 +28,8 @@ describe('ClayComponent', function() {
 		expect(component.element.getAttribute('data-my-attribute')).toEqual(
 			'Luke Skywalker'
 		);
+
+		expect(component).toMatchSnapshot();
 	});
 
 	it('should create a ClayComponent with accesible data attributes from dom', () => {

packages/clay-component/src/__tests__/__snapshots__/ClayComponent.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClayComponent should create a ClayComponent with data attributes 1`] = `<div data-my-attribute="Luke Skywalker"></div>`;