Chore: make data-component attribute overridable (#1190)

* Make data-component overridable and add tests

* add changeset

* Add data-component attribute to Octicon and allow overriding in tests

Author: francinelucca

.changeset/data-component-override.md

@@ -0,0 +1,5 @@
+---
+"@primer/octicons": patch
+---
+
+Allow `data-component` attribute to be overridden by consumers

lib/octicons_gem/lib/octicons/octicon.rb

@@ -13,12 +13,11 @@ def initialize(symbol, options = {})
         @width = octicon["width"]
         @height = octicon["height"]
         @keywords = octicon["keywords"]
-        @options = options.dup
+        @options = { "data-component": "Octicon" }.merge(options.dup)
         @options.merge!({
           class:   classes,
           viewBox: viewbox,
-          version: "1.1",
-          "data-component": "Octicon"
+          version: "1.1"
         })
         @options.merge!(size)
         @options.merge!(a11y)

lib/octicons_gem/test/octicon_test.rb

@@ -140,5 +140,11 @@
       icon = octicon("x")
       assert_includes icon.to_svg, "data-component=\"Octicon\""
     end
+
+    it "allows data-component to be overridden" do
+      icon = octicon("x", "data-component": "CustomComponent")
+      assert_includes icon.to_svg, "data-component=\"CustomComponent\""
+      refute_includes icon.to_svg, "data-component=\"Octicon\""
+    end
   end
 end

lib/octicons_react/src/__tests__/octicon.js

@@ -19,6 +19,11 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveAttribute('data-component', 'Octicon')
   })
 
+  it('allows data-component to be overridden', () => {
+    const {container} = render(<AlertIcon data-component="CustomComponent" />)
+    expect(container.querySelector('svg')).toHaveAttribute('data-component', 'CustomComponent')
+  })
+
   it('sets `role="img"` if `aria-label` is provided', () => {
     render(<AlertIcon aria-label="Alert" />)
     expect(screen.getByLabelText('Alert')).toHaveAttribute('role', 'img')

lib/octicons_react/src/createIconComponent.js

@@ -38,6 +38,7 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
       return (
         <svg
           ref={forwardedRef}
+          data-component="Octicon"
           {...rest}
           aria-hidden={labelled ? undefined : 'true'}
           tabIndex={tabIndex}
@@ -53,7 +54,6 @@ export function createIconComponent(name, defaultClassName, getSVGData) {
           id={id}
           display="inline-block"
           overflow="visible"
-          data-component="Octicon"
           style={{
             verticalAlign,
             ...style

lib/octicons_styled/src/__tests__/octicon.js

@@ -17,6 +17,16 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveClass('foo')
   })
 
+  it('has `data-component="Octicon"` attribute by default', () => {
+    const {container} = render(<AlertIcon />)
+    expect(container.querySelector('svg')).toHaveAttribute('data-component', 'Octicon')
+  })
+
+  it('allows data-component to be overridden', () => {
+    const {container} = render(<AlertIcon data-component="CustomComponent" />)
+    expect(container.querySelector('svg')).toHaveAttribute('data-component', 'CustomComponent')
+  })
+
   it('respects the verticalAlign prop', () => {
     const {container} = render(<AlertIcon verticalAlign="middle" />)
     expect(container.querySelector('svg')).toHaveStyle({verticalAlign: 'middle'})