Skip to content

Commit

Permalink
fix(Tag): remove data-prop from TagGroup
Browse files Browse the repository at this point in the history
  • Loading branch information
thaytharma committed Jan 26, 2022
1 parent fe5c766 commit d1c3b1c
Show file tree
Hide file tree
Showing 7 changed files with 19 additions and 92 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
Expand All @@ -48,33 +45,6 @@ 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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
TagDefault,
TagWithIcon,
TagClickable,
TagGroupWithData,
TagRemovable,
TagMultipleRemovable,
} from 'Docs/uilib/components/tag/Examples'
Expand All @@ -25,10 +24,6 @@ See more examples below.

<TagWithIcon />

#### Tag group with data

<TagGroupWithData />

#### Clickable Tag

<TagClickable />
Expand Down
12 changes: 0 additions & 12 deletions packages/dnb-eufemia/src/components/tag/TagGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -52,7 +44,6 @@ function TagGroup(localProps: TagGroupProps & ISpacingProps) {
label,
className,
children: childrenProp,
data,
...props
} = extendPropsWithContext(
{ ...defaultProps, ...localProps },
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,25 +32,20 @@ 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',

it('have to match a removable Tag', async () => {
const screenshot = await testPageScreenshot({
selector: '[data-visual-test="tag-removable"] .dnb-tag',
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match a removable Tag list', async () => {
const screenshot = await testPageScreenshot({
selector: '[data-visual-test="tag-removable-list"] .dnb-tag',
})
expect(screenshot).toMatchImageSnapshot()
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match a removable Tag', async () => {
const screenshot = await testPageScreenshot({
selector: '[data-visual-test="tag-removable"] .dnb-tag',
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match a removable Tag list', async () => {
const screenshot = await testPageScreenshot({
selector: '[data-visual-test="tag-removable-list"] .dnb-tag',
})
expect(screenshot).toMatchImageSnapshot()
})

21 changes: 0 additions & 21 deletions packages/dnb-eufemia/src/components/tag/__tests__/Tag.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d1c3b1c

Please sign in to comment.