Merge pull request #702 from carloslancha/issue-700-data-attributes-i…

…n-dom Add data-attributes to DOM | Fixes #700
liferay · Mar 7, 2018 · 0d1d83a · 0d1d83a
2 parents 958a3a8 + 9d04b1d
commit 0d1d83a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/clay-component/src/ClayComponent.js b/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]
+				);
+			}
+		}
+	}
 }
 
 /**

diff --git a/packages/clay-component/src/__tests__/ClayComponent.js b/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', () => {

diff --git a/packages/clay-component/src/__tests__/__snapshots__/ClayComponent.js.snap b/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>`;
Original file line number	Diff line number	Diff line change
		@@ -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>`;