From 15bda484b0fd877642b3519617662b67b927ffc7 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Wed, 12 Jun 2024 14:33:07 +0200 Subject: [PATCH 1/9] add modifier props --- .../src/components/anchor/Anchor.tsx | 37 ++++++++++++++++++- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/packages/dnb-eufemia/src/components/anchor/Anchor.tsx b/packages/dnb-eufemia/src/components/anchor/Anchor.tsx index a795dfb6e22..864f416e5a2 100644 --- a/packages/dnb-eufemia/src/components/anchor/Anchor.tsx +++ b/packages/dnb-eufemia/src/components/anchor/Anchor.tsx @@ -46,13 +46,38 @@ export type AnchorProps = { /** @deprecated use innerRef instead */ inner_ref?: React.RefObject + /** + * Removes default animation. + * Default: `false` + */ + noAnimation?: boolean + /** + * Removes default styling. + * Default: `false` + */ + noStyle?: boolean + /** + * Removes default hover style. + * Default: `false` + */ + noHover?: boolean + /** + * Removes underline. + * Default: `false` + */ + noUnderline?: boolean } export type AnchorAllProps = AnchorProps & Omit, 'ref'> & SpacingProps -const defaultProps = {} +const defaultProps = { + noAnimation: false, + noStyle: false, + noHover: false, + noUnderline: false, +} export function AnchorInstance(localProps: AnchorAllProps) { const context = React.useContext(Context) @@ -85,6 +110,10 @@ export function AnchorInstance(localProps: AnchorAllProps) { omitClass, innerRef, targetBlankTitle, + noAnimation, + noHover, + noStyle, + noUnderline, ...rest } = allProps @@ -121,7 +150,11 @@ export function AnchorInstance(localProps: AnchorAllProps) { 'dnb-anchor', prefix && 'dnb-anchor--icon-left', suffix && 'dnb-anchor--icon-right', - typeof children !== 'string' && 'dnb-anchor--was-node' + typeof children !== 'string' && 'dnb-anchor--was-node', + noAnimation && 'dnb-anchor--no-animation', + noHover && 'dnb-anchor--no-hover', + noStyle && 'dnb-anchor--no-style', + noUnderline && 'dnb-anchor--no-underline' ), className )} From 3fe6d2e59c34b055815c929400f203db174b7366 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Wed, 12 Jun 2024 14:33:12 +0200 Subject: [PATCH 2/9] add tests --- .../anchor/__tests__/Anchor.test.tsx | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx index 027d8eab823..5b6874e202c 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx @@ -417,6 +417,54 @@ describe('Anchor element', () => { expect(document.querySelector('a')).toHaveAttribute('href', '/url') }) + + it('should not have animations if "noAnimation" props is true', () => { + const { rerender } = render() + + const anchor = document.querySelector('.dnb-anchor') + + expect(anchor.className).not.toContain('dnb-anchor--no-animation') + + rerender() + + expect(anchor.className).toContain('dnb-anchor--no-animation') + }) + + it('should not have animations if "noHover" props is true', () => { + const { rerender } = render() + + const anchor = document.querySelector('.dnb-anchor') + + expect(anchor.className).not.toContain('dnb-anchor--no-hover') + + rerender() + + expect(anchor.className).toContain('dnb-anchor--no-hover') + }) + + it('should not have animations if "noStyle" props is true', () => { + const { rerender } = render() + + const anchor = document.querySelector('.dnb-anchor') + + expect(anchor.className).not.toContain('dnb-anchor--no-style') + + rerender() + + expect(anchor.className).toContain('dnb-anchor--no-style') + }) + + it('should not have animations if "noUnderline" props is true', () => { + const { rerender } = render() + + const anchor = document.querySelector('.dnb-anchor') + + expect(anchor.className).not.toContain('dnb-anchor--no-underline') + + rerender() + + expect(anchor.className).toContain('dnb-anchor--no-underline') + }) }) describe('Anchor scss', () => { From 94a261ca799317c6120ff4c7380ed1feb92ecda5 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Wed, 12 Jun 2024 14:33:18 +0200 Subject: [PATCH 3/9] document props --- .../src/docs/uilib/components/anchor/properties.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx index 5a164183d45..654836e085d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx @@ -14,6 +14,10 @@ showTabs: true | `tooltip` | _(optional)_ Provide a string or a React Element to be shown as the tooltip content. | | `icon` | _(optional)_ [Primary Icons](/icons/primary) can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements. | | `iconPosition` | _(optional)_ `left` (default) or `right`. Places icon to the left or to the right of the text. | +| `noAnimation` | _(optional)_ removes animations if set to `true`. Defaults to `false`. | +| `noHover` | _(optional)_ removes hover effects if set to `true`. Defaults to `false`. | +| `noStyle` | _(optional)_ removes styling if set to `true`. Defaults to `false`. | +| `noUnderline` | _(optional)_ removes underline if set to `true`. Defaults to `false`. | | `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | From eccec11b3321dcdcbb7025dc8c835c543bc3c921 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Wed, 12 Jun 2024 14:36:32 +0200 Subject: [PATCH 4/9] add modifier props to demo --- .../src/docs/uilib/components/anchor/demos.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx index 39440d5fff3..5c9da1c895c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx @@ -43,12 +43,12 @@ To force a specific state of style, use the following classes to do so: -### Anchor modifiers +### Anchor modifier props -- `.dnb-anchor--no-animation` No Animation -- `.dnb-anchor--no-style` No Style -- `.dnb-anchor--no-hover` No Hover -- `.dnb-anchor--no-underline` No Underline +- `noAnimation` - No Animation +- `noStyle` - No Style +- `noHover` - No Hover +- `noUnderline` - No Underline ### Anchor with `target="_blank"` From a74a642b36fe79d6146c71f009cd8a185f1826a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 12 Jun 2024 14:49:45 +0200 Subject: [PATCH 5/9] Add AnchorDocs file --- .../uilib/components/anchor/properties.mdx | 20 +---- .../src/components/anchor/AnchorDocs.ts | 76 +++++++++++++++++++ 2 files changed, 80 insertions(+), 16 deletions(-) create mode 100644 packages/dnb-eufemia/src/components/anchor/AnchorDocs.ts diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx index 654836e085d..c294b5fbe4d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx @@ -2,24 +2,12 @@ showTabs: true --- +import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' +import { AnchorProperties } from '@dnb/eufemia/src/components/anchor/AnchorDocs' + ## Properties -| Properties | Description | -| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| `element` | _(optional)_ define what HTML or React element should be used (e.g. `element={Link}`). Defaults to semantic `a` element. | -| `href` | _(optional)_ relative or absolute url. | -| `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. | -| `target` | _(optional)_ defines the opening method. Use `_blank` to open a new browser window/tab. | -| `targetBlankTitle` | _(optional)_ the title shown as a tooltip when target is set to `_blank`. | -| `tooltip` | _(optional)_ Provide a string or a React Element to be shown as the tooltip content. | -| `icon` | _(optional)_ [Primary Icons](/icons/primary) can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements. | -| `iconPosition` | _(optional)_ `left` (default) or `right`. Places icon to the left or to the right of the text. | -| `noAnimation` | _(optional)_ removes animations if set to `true`. Defaults to `false`. | -| `noHover` | _(optional)_ removes hover effects if set to `true`. Defaults to `false`. | -| `noStyle` | _(optional)_ removes styling if set to `true`. Defaults to `false`. | -| `noUnderline` | _(optional)_ removes underline if set to `true`. Defaults to `false`. | -| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | -| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | + ### Router Link diff --git a/packages/dnb-eufemia/src/components/anchor/AnchorDocs.ts b/packages/dnb-eufemia/src/components/anchor/AnchorDocs.ts new file mode 100644 index 00000000000..43f397be98e --- /dev/null +++ b/packages/dnb-eufemia/src/components/anchor/AnchorDocs.ts @@ -0,0 +1,76 @@ +import { PropertiesTableProps } from '../../shared/types' + +export const AnchorProperties: PropertiesTableProps = { + element: { + doc: 'Define what HTML or React element should be used (e.g. `element={Link}`). Defaults to semantic `a` element.', + type: 'React.Element', + status: 'optional', + }, + href: { + doc: 'Relative or absolute url.', + type: 'string', + status: 'optional', + }, + to: { + doc: '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.', + type: 'string', + status: 'optional', + }, + target: { + doc: 'Defines the opening method. Use `_blank` to open a new browser window/tab.', + type: 'string', + status: 'optional', + }, + targetBlankTitle: { + doc: 'The title shown as a tooltip when target is set to `_blank`.', + type: 'string', + status: 'optional', + }, + tooltip: { + doc: 'Provide a string or a React Element to be shown as the tooltip content.', + type: 'string', + status: 'optional', + }, + icon: { + doc: '[Primary Icons](/icons/primary) can be set as a string (e.g. icon="chevron_right"), other icons should be set as React elements.', + type: 'React.Node', + status: 'optional', + }, + iconPosition: { + doc: '`left` (default) or `right`. Places icon to the left or to the right of the text.', + type: 'string', + status: 'optional', + }, + noAnimation: { + doc: 'Removes animations if set to `true`. Defaults to `false`.', + type: 'boolean', + status: 'optional', + }, + noHover: { + doc: 'Removes hover effects if set to `true`. Defaults to `false`.', + type: 'boolean', + status: 'optional', + }, + noStyle: { + doc: 'Removes styling if set to `true`. Defaults to `false`.', + type: 'boolean', + status: 'optional', + }, + noUnderline: { + doc: 'Removes underline if set to `true`. Defaults to `false`.', + type: 'boolean', + status: 'optional', + }, + skeleton: { + doc: 'If set to `true`, an overlaying skeleton with animation will be shown.', + type: 'boolean', + status: 'optional', + }, + '[Space](/uilib/layout/space/properties)': { + doc: 'Spacing properties like `top` or `bottom` are supported.', + type: ['string', 'object'], + status: 'optional', + }, +} + +export const AnchorEvents: PropertiesTableProps = {} From e2f579109eb768464938adf97b891dc9ab53081d Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Thu, 13 Jun 2024 10:04:50 +0200 Subject: [PATCH 6/9] Update packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tobias Høegh --- .../dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx index 5b6874e202c..33c346f4d23 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx @@ -454,7 +454,7 @@ describe('Anchor element', () => { expect(anchor.className).toContain('dnb-anchor--no-style') }) - it('should not have animations if "noUnderline" props is true', () => { + it('should have no-underline class if "noUnderline" props is true', () => { const { rerender } = render() const anchor = document.querySelector('.dnb-anchor') From 82875c0aa8884e8e2b60f82d1e9d895ddf2091e8 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Thu, 13 Jun 2024 10:04:56 +0200 Subject: [PATCH 7/9] Update packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tobias Høegh --- .../dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx index 33c346f4d23..abc466a4c25 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx @@ -430,7 +430,7 @@ describe('Anchor element', () => { expect(anchor.className).toContain('dnb-anchor--no-animation') }) - it('should not have animations if "noHover" props is true', () => { + it('shouldhave no-hover class if "noHover" props is true', () => { const { rerender } = render() const anchor = document.querySelector('.dnb-anchor') From dadf62f16467176f4d8c1b6e1383e1cae452f635 Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Thu, 13 Jun 2024 10:05:08 +0200 Subject: [PATCH 8/9] Update packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tobias Høegh --- .../dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx index abc466a4c25..aecfcbc74a7 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx @@ -418,7 +418,7 @@ describe('Anchor element', () => { expect(document.querySelector('a')).toHaveAttribute('href', '/url') }) - it('should not have animations if "noAnimation" props is true', () => { + it('should have no-animation class if "noAnimation" props is true', () => { const { rerender } = render() const anchor = document.querySelector('.dnb-anchor') From 9331064ce214f0da51bd33db38588ad78494458a Mon Sep 17 00:00:00 2001 From: Joakim Bjerknes Date: Thu, 13 Jun 2024 10:05:15 +0200 Subject: [PATCH 9/9] Update packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tobias Høegh --- .../dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx index aecfcbc74a7..197b490dd72 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx @@ -442,7 +442,7 @@ describe('Anchor element', () => { expect(anchor.className).toContain('dnb-anchor--no-hover') }) - it('should not have animations if "noStyle" props is true', () => { + it('should have no-style class if "noStyle" props is true', () => { const { rerender } = render() const anchor = document.querySelector('.dnb-anchor')