Skip to content

Commit

Permalink
fix(Button): support rel property
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz committed Feb 14, 2023
1 parent 3fd9bfa commit 961ee4e
Show file tree
Hide file tree
Showing 19 changed files with 122 additions and 2 deletions.
3 changes: 2 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ showTabs: true
| `icon_size` | _(optional)_ define icon width and height. Defaults to 16px |
| `class` | _(optional)_ any extra modifying class. |
| `href` | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
| `target` | _(optional)_ When button behaves as a link. Used to specifiy where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`. |
| `target` | _(optional)_ When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`. |
| `rel` | _(optional)_ When button behaves as a link. Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`. |
| `to` | _(optional)_ use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. |
| `wrap` | _(optional)_ if set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`. |
| `stretch` | _(optional)_ set it to `true` in order to stretch the button to the available space. Defaults to false. |
Expand Down
2 changes: 2 additions & 0 deletions ...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
onKeyDown={[Function]}
onSubmit={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -747,6 +748,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
onKeyDown={[Function]}
onSubmit={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down
7 changes: 6 additions & 1 deletion packages/dnb-eufemia/src/components/button/Button.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,15 @@ export type ButtonProps = {
href?: string;

/**
* When button behaves as a link. Used to specifiy where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.
* When button behaves as a link. Used to specify where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`.
*/
target?: string;

/**
* Used to specify the relationship between a linked resource and the current document. Examples(non-exhaustive list) of values are `nofollow`, `search`, and `tag`.
*/
rel?: string;

/**
* Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ Button.propTypes = {
class: PropTypes.string,
href: PropTypes.string,
target: PropTypes.string,
rel: PropTypes.string,
to: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
Expand Down Expand Up @@ -356,6 +357,7 @@ Button.defaultProps = {
icon_size: null,
href: null,
target: null,
rel: null,
to: null,
id: null,
class: null,
Expand Down
7 changes: 7 additions & 0 deletions packages/dnb-eufemia/src/components/button/__tests__/Button.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,13 @@ describe('Button component', () => {
expect(document.querySelector('svg')).toBeTruthy()
})

it('supports anchor rel property', () => {
render(
<Component {...props} href="https://url" icon={null} rel="me" />
)
expect(document.querySelector('a').getAttribute('rel')).toBe('me')
})

it('has a disabled attribute, once we set disabled to true', () => {
const { rerender } = render(<Component />)
expect(document.querySelector('button').hasAttribute('disabled')).toBe(
Expand Down
21 changes: 21 additions & 0 deletions packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -66,6 +67,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -107,6 +109,7 @@ exports[`Button component have to match default button snapshot 1`] = `
}
}
on_click="on_click"
rel="rel"
size={null}
skeleton="skeleton"
status={null}
Expand All @@ -128,6 +131,7 @@ exports[`Button component have to match default button snapshot 1`] = `
disabled={false}
id="button"
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -153,6 +157,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -198,6 +203,7 @@ exports[`Button component have to match default button snapshot 1`] = `
"current": <button
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap"
id="button"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -240,6 +246,7 @@ exports[`Button component have to match default button snapshot 1`] = `
}
isIconOnly={false}
on_click="on_click"
rel="rel"
size={null}
skeleton={false}
status={null}
Expand Down Expand Up @@ -361,6 +368,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -406,6 +414,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -447,6 +456,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
}
on_click="on_click"
rel="rel"
size={null}
skeleton="skeleton"
status={null}
Expand All @@ -470,6 +480,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
id="button"
omitClass={true}
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -484,6 +495,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -526,6 +538,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
omitClass={true}
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -540,6 +553,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -581,6 +595,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
}
onClick={[Function]}
rel="rel"
skeleton={null}
target="target"
title="This is a button title"
Expand All @@ -596,6 +611,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -637,6 +653,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
}
onClick={[Function]}
rel="rel"
skeleton={null}
target="target"
title="This is a button title"
Expand All @@ -647,6 +664,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
disabled={false}
href="https://url"
onClick={[Function]}
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand All @@ -672,6 +690,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -717,6 +736,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
"current": <a
class="dnb-button dnb-button--primary dnb-button--has-text class className dnb-button--icon-position-right dnb-button--has-icon dnb-button--icon-size-icon_size dnb-button--wrap dnb-a"
href="https://url"
rel="rel"
target="target"
title="This is a button title"
type="type"
Expand Down Expand Up @@ -759,6 +779,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
}
isIconOnly={false}
on_click="on_click"
rel="rel"
size={null}
skeleton={false}
status={null}
Expand Down
2 changes: 2 additions & 0 deletions ...es/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1509,6 +1509,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
onClick={[Function]}
onFocus={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status="error"
Expand Down Expand Up @@ -1597,6 +1598,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
onClick={[Function]}
onFocus={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status="error"
Expand Down
4 changes: 4 additions & 0 deletions packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
inner_ref={null}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -335,6 +336,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
isIconOnly={true}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down Expand Up @@ -1158,6 +1160,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="default"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1200,6 +1203,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="default"
skeleton={false}
status={null}
Expand Down
4 changes: 4 additions & 0 deletions packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
inner_ref={null}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -333,6 +334,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
isIconOnly={true}
onClick={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down Expand Up @@ -1172,6 +1174,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="default"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1214,6 +1217,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="default"
skeleton={false}
status={null}
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,6 +530,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -622,6 +623,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
on_click={null}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down
2 changes: 2 additions & 0 deletions .../dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,6 +728,7 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size={null}
skeleton={null}
status={null}
Expand Down Expand Up @@ -926,6 +927,7 @@ exports[`GlobalError snapshot have to match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size={null}
skeleton={false}
status={null}
Expand Down
4 changes: 4 additions & 0 deletions ...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1009,6 +1009,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="medium"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1052,6 +1053,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="medium"
skeleton={false}
status={null}
Expand Down Expand Up @@ -1364,6 +1366,7 @@ exports[`GlobalStatus snapshot have to match linked components snapshot 1`] = `
innerRef={null}
inner_ref={null}
on_click={[Function]}
rel={null}
size="medium"
skeleton={null}
status={null}
Expand Down Expand Up @@ -1407,6 +1410,7 @@ exports[`GlobalStatus snapshot have to match linked components snapshot 1`] = `
inner_ref={null}
isIconOnly={false}
on_click={[Function]}
rel={null}
size="medium"
skeleton={false}
status={null}
Expand Down
Loading

0 comments on commit 961ee4e

Please sign in to comment.