fix(Tag): remove data-prop from TagGroup

packages/dnb-design-system-portal/src/docs/uilib/components/tag/Examples.js

@@ -5,9 +5,6 @@
 
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 import {
-  funds as Funds,
-  stocks as Stocks,
-  equities_and_mutual_funds as Equities,
   send as Send,
   einvoice as EInvoice,
   ainvoice as AInvoice,
@@ -28,13 +25,13 @@ export const TagDefault = () => (
 export const TagWithIcon = () => (
   <ComponentBox
     data-visual-test="tag-icon"
-    scope={{ Funds, Stocks, Equities }}
+    scope={{ EInvoice, AInvoice, DigiPost }}
   >
     {() => /* jsx */ `
-<Tag.Group label="Investments:">
-  <Tag icon={Funds} text="Funds" right="x-small"/>
-  <Tag icon={Stocks} text="Stocks" right="x-small"/>
-  <Tag icon={Equities} text="Equities" right="x-small"/>
+<Tag.Group label="Betalingstyper:">
+  <Tag icon={AInvoice} text="AvtaleGiro" right="x-small"/>
+  <Tag icon={EInvoice} text="eFaktura" right="x-small"/>
+  <Tag icon={DigiPost} text="DigiPost" right="x-small"/>
 </Tag.Group>
 `}
   </ComponentBox>
@@ -48,43 +45,13 @@ export const TagClickable = () => (
   </ComponentBox>
 )
 
-export const TagGroupWithData = () => (
-  <ComponentBox
-    data-visual-test="tag-group-with-data"
-    scope={{ EInvoice, AInvoice, DigiPost }}
-  >
-    {() => /* jsx */ `
-<Tag.Group label="Payment types:" data={[
-  {
-    icon: AInvoice,
-    text: 'AvtaleGiro',
-    right: 'x-small',
-  },
-  {
-    icon: EInvoice,
-    text: 'eFaktura',
-    right: 'x-small',
-  },
-  {
-    icon: DigiPost,
-    text: 'DigiPost',
-    right: 'x-small',
-  },
-]}/>
-`}
-  </ComponentBox>
-)
-
 export const TagRemovable = () => (
   <ComponentBox
     data-visual-test="tag-removable">
     {() => /* jsx */ `
-<Tag.Group label="Files:" data={[
-  {
-    text: 'Eufemia.tsx',
-    onDelete: () => { console.log("I was deleted!") },
-  },
-]}/>
+<Tag.Group label="Files:">
+  <Tag text='Eufemia.tsx' onDelete={() => { console.log("I was deleted!")}}/>
+</Tag.Group>
 `}
   </ComponentBox>
 )

packages/dnb-design-system-portal/src/docs/uilib/components/tag/demos.md

@@ -6,7 +6,6 @@ import {
 TagDefault,
 TagWithIcon,
 TagClickable,
-TagGroupWithData,
 TagRemovable,
 TagMultipleRemovable,
 } from 'Docs/uilib/components/tag/Examples'
@@ -25,10 +24,6 @@ See more examples below.
 
 <TagWithIcon />
 
-#### Tag group with data
-
-<TagGroupWithData />
-
 #### Clickable Tag
 
 <TagClickable />

packages/dnb-eufemia/src/components/tag/TagGroup.tsx

@@ -8,21 +8,13 @@ import { createSpacingClasses } from '../space/SpacingHelper'
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
 import { extendPropsWithContext } from '../../shared/component-helper'
-import Tag, { TagProps } from './Tag'
-
 export interface TagGroupProps {
   /**
    * Aria label to describe the tag group
    * Default: null
    */
   label: string
 
-  /**
-   * Pass in a list of Tag objects.
-   * Default: null
-   */
-  data?: TagProps[]
-
   /**
    * Custom className on the component root
    * Default: null
@@ -52,7 +44,6 @@ function TagGroup(localProps: TagGroupProps & ISpacingProps) {
     label,
     className,
     children: childrenProp,
-    data,
     ...props
   } = extendPropsWithContext(
     { ...defaultProps, ...localProps },
@@ -80,9 +71,6 @@ function TagGroup(localProps: TagGroupProps & ISpacingProps) {
         <span data-testid="tag-group-label" className="dnb-sr-only">
           {label}
         </span>
-        {data?.map((tag) => (
-          <Tag key={`${tag.text}`} {...tag} />
-        ))}
         {children}
       </div>
     </TagGroupContext.Provider>

packages/dnb-eufemia/src/components/tag/__tests__/Tag.screenshot.test.js

@@ -3,7 +3,7 @@
  * This file will not run on "test:staged" because we don't require any related files
  */
 
-import {
+ import {
   testPageScreenshot,
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
@@ -33,14 +33,6 @@ describe('Tag screenshot', () => {
       expect(screenshot).toMatchImageSnapshot()
     })
   })
-
-  it('have to match Tag group with data', async () => {
-    const screenshot = await testPageScreenshot({
-      selector: '[data-visual-test="tag-group-with-data"] .dnb-tag',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-})
-
 it('have to match a removable Tag', async () => {
   const screenshot = await testPageScreenshot({
     selector: '[data-visual-test="tag-removable"] .dnb-tag',
@@ -53,4 +45,4 @@ it('have to match a removable Tag list', async () => {
     selector: '[data-visual-test="tag-removable-list"] .dnb-tag',
   })
   expect(screenshot).toMatchImageSnapshot()
-})
+})

packages/dnb-eufemia/src/components/tag/__tests__/Tag.test.tsx

@@ -23,27 +23,6 @@ describe('Tag Group', () => {
     expect(screen.queryByTestId('tag-group-label').textContent).toBe(label)
   })
 
-  it('renders a tag group with multiple tag items by data prop', () => {
-    render(
-      <Tag.Group
-        label="tags"
-        data={[
-          {
-            text: 'Cat',
-          },
-          {
-            text: 'Horse',
-          },
-          {
-            text: 'Dog',
-          },
-        ]}
-      />
-    )
-
-    expect(screen.queryAllByTestId('tag')).toHaveLength(3)
-  })
-
   it('renders a tag group with multiple tag elements by children', () => {
     render(
       <Tag.Group label="animals">