feat(Anchor): add helper classes as props (#3701)

Co-authored-by: Tobias Høegh <tobias@tujo.no>

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:
 
 <AnchorExampleHelperClasses />
 
-### Anchor modifiers
+### Anchor modifier props
 
-- `.dnb-anchor--no-animation` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
-- `.dnb-anchor--no-style` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
-- `.dnb-anchor--no-hover` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
-- `.dnb-anchor--no-underline` <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>
+- `noAnimation` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-animation">No Animation</a>
+- `noStyle` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-style">No Style</a>
+- `noHover` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-hover">No Hover</a>
+- `noUnderline` - <a href="/uilib/components/anchor" className="dnb-anchor dnb-anchor--no-underline">No Underline</a>
 
 ### Anchor with `target="_blank"`
 

packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx

@@ -2,20 +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.                                                       |
-| `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.                                                                                |
+<PropertiesTable props={AnchorProperties} />
 
 ### Router Link
 

packages/dnb-eufemia/src/components/anchor/Anchor.tsx

@@ -46,13 +46,38 @@ export type AnchorProps = {
 
   /** @deprecated use innerRef instead */
   inner_ref?: React.RefObject<HTMLAnchorElement>
+  /**
+   * 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<React.HTMLProps<HTMLAnchorElement>, '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
         )}

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 = {}

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 have no-animation class if "noAnimation" props is true', () => {
+    const { rerender } = render(<Anchor />)
+
+    const anchor = document.querySelector('.dnb-anchor')
+
+    expect(anchor.className).not.toContain('dnb-anchor--no-animation')
+
+    rerender(<Anchor noAnimation />)
+
+    expect(anchor.className).toContain('dnb-anchor--no-animation')
+  })
+
+  it('shouldhave no-hover class if "noHover" props is true', () => {
+    const { rerender } = render(<Anchor />)
+
+    const anchor = document.querySelector('.dnb-anchor')
+
+    expect(anchor.className).not.toContain('dnb-anchor--no-hover')
+
+    rerender(<Anchor noHover />)
+
+    expect(anchor.className).toContain('dnb-anchor--no-hover')
+  })
+
+  it('should have no-style class if "noStyle" props is true', () => {
+    const { rerender } = render(<Anchor />)
+
+    const anchor = document.querySelector('.dnb-anchor')
+
+    expect(anchor.className).not.toContain('dnb-anchor--no-style')
+
+    rerender(<Anchor noStyle />)
+
+    expect(anchor.className).toContain('dnb-anchor--no-style')
+  })
+
+  it('should have no-underline class if "noUnderline" props is true', () => {
+    const { rerender } = render(<Anchor />)
+
+    const anchor = document.querySelector('.dnb-anchor')
+
+    expect(anchor.className).not.toContain('dnb-anchor--no-underline')
+
+    rerender(<Anchor noUnderline />)
+
+    expect(anchor.className).toContain('dnb-anchor--no-underline')
+  })
 })
 
 describe('Anchor scss', () => {