Skip to content

Commit

Permalink
feat(Anchor): Sbanken styling, added icon props (#2318)
Browse files Browse the repository at this point in the history 
* feat(Anchor): updates sbanken styling and added props for icons

* chore(Anchor): update snapshot tests

* Update screenshot tests for Sbanken theme

* Updated screenshot tests for ui theme

* chore(Anchor): fix linting and sass imports

* chore: update snapshot that runs bad on windows

* chore: bump commit

* screenshot update test

* remove anchor screenshots

* readd screenshots

* Check out from v10: Firefox Mac version of visually hidden snapshot

* Ensure the word gets not wrapped on line-break visual tests

* feat(Anchor): icon props structured like in <Button>, tests

* chore: remove old screenshots

* chore: moved legacy screenshot tests to own section

* Update screenshot tests (sbanken changes only)

* Update screenshot tests (ui changes only)

* Rename `icon_position` to `iconPosition` because new feature props can and should be written in camelCase (we change all the others in future)

* Check out from v10: Firefox Mac version of visually hidden snapshot

* Remove excess h1

* Ensure clean snapshots, without text from above at the top

---------

Co-authored-by: Espen Liland <espen.liland@dnb.no>
Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com>
Co-authored-by: Tobias Høegh <tobias@tujo.no>
  • Loading branch information
@eliland @joakbjerk @tujoworker
4 people committed May 31, 2023
1 parent 9383afb commit c6dcd03
Show file tree
Hide file tree
Showing 53 changed files with 428 additions and 66 deletions.
205 changes: 188 additions & 17 deletions packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,6 @@ export const AnchorExampleStates = () => (
Default Style
</Anchor>
</li>
<li data-visual-test="anchor-blank">
<Anchor target="_blank" href="/uilib/components/anchor">
Blank target with https
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
Expand Down Expand Up @@ -159,18 +154,71 @@ export const AnchorExampleHelperClasses = () => (

export const AnchorExampleIcons = () => (
<ComponentBox hideCode>
<Anchor href="/uilib/components/anchor" data-visual-test="anchor-icon">
Anchor with Icon <IconPrimary icon="chevron_right" />
</Anchor>
<br />
<br />
<p className="dnb-p" data-visual-test="anchor-paragraph">
text{' '}
<Anchor href="/uilib/components/anchor">
Inside a Paragraph <IconPrimary icon="bell" />
</Anchor>{' '}
text
</p>
<ul className="dnb-ul dnb-unstyled-list">
<li>
<Anchor
href="/uilib/components/anchor"
data-visual-test="anchor-icon-right"
icon="chevron_right"
iconPosition="right"
>
Anchor with Icon right
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
data-visual-test="anchor-icon-left"
icon="question"
>
Anchor with Icon left
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
data-visual-test="anchor-icon-node"
icon={<IconPrimary icon="question" />}
>
Anchor with Icon left using a react element
</Anchor>
</li>
<li>
<p className="dnb-p" data-visual-test="anchor-paragraph">
text{' '}
<Anchor
href="/uilib/components/anchor"
icon="bell"
iconPosition="right"
>
Inside a Paragraph
</Anchor>{' '}
text
</p>
</li>
</ul>
</ComponentBox>
)

export const AnchorTargetBlank = () => (
<ComponentBox hideCode>
<ul className="dnb-ul dnb-unstyled-list">
<li data-visual-test="anchor-blank">
<Anchor target="_blank" href="/uilib/components/anchor">
Blank target with https
</Anchor>
</li>
<li>
<Anchor
target="_blank"
href="/uilib/components/anchor"
icon="arrow_right"
iconPosition="right"
>
Blank target with different launch icon
</Anchor>
</li>
</ul>
</ComponentBox>
)

Expand All @@ -197,3 +245,126 @@ export const AnchorExampleHeadings = () => (
</h2>
</ComponentBox>
)

export const AnchorSbankenRegular = () => (
<ComponentBox hideCode>
<ul className="dnb-ul dnb-unstyled-list">
<li>
<Anchor href="/uilib/components/anchor" icon="chevron_right">
Default
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
icon="chevron_right"
className="dnb-anchor--hover"
>
Hover
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
icon="chevron_right"
className="dnb-anchor--active"
>
Active
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
icon="chevron_right"
className="dnb-anchor--focus"
>
Focus
</Anchor>
</li>
</ul>
</ComponentBox>
)

export const AnchorSbankenGoto = () => (
<ComponentBox hideCode>
<ul className="dnb-ul dnb-unstyled-list">
<li>
<Anchor
href="/uilib/components/anchor"
icon="arrow_right"
iconPosition="right"
>
Default
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
icon="arrow_right"
iconPosition="right"
className="dnb-anchor--hover"
>
Hover
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
icon="arrow_right"
iconPosition="right"
className="dnb-anchor--active"
>
Active
</Anchor>
</li>
<li>
<Anchor
href="/uilib/components/anchor"
icon="arrow_right"
iconPosition="right"
className="dnb-anchor--focus"
>
Focus
</Anchor>
</li>
</ul>
</ComponentBox>
)

export const AnchorLegacyUsage = () => {
if (!globalThis.IS_TEST) {
return null
}
return (
<ComponentBox hideCode>
<ul className="dnb-ul dnb-unstyled-list">
<li>
<Anchor
href="/uilib/components/anchor"
data-visual-test="anchor-legacy-icon"
>
Anchor with Icon <IconPrimary icon="chevron_right" />
</Anchor>
</li>
<li>
<p className="dnb-p" data-visual-test="anchor-legacy-paragraph">
text{' '}
<Anchor href="/uilib/components/anchor">
Inside a Paragraph <IconPrimary icon="bell" />
</Anchor>{' '}
text
</p>
</li>
<li>
<Anchor
target="_blank"
href="/uilib/components/anchor"
data-visual-test="anchor-legacy-blank-with-icon"
>
<IconPrimary icon="bell" /> Blank target with https
</Anchor>
</li>
</ul>
</ComponentBox>
)
}
24 changes: 24 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,25 @@ import {
AnchorExampleStates,
AnchorExampleHelperClasses,
AnchorExampleIcons,
AnchorTargetBlank,
AnchorExampleHeadings,
AnchorSbankenRegular,
AnchorSbankenGoto,
AnchorLegacyUsage,
} from 'Docs/uilib/components/anchor/Examples'

<VisibilityByTheme visible="sbanken">
## Demos (Sbanken)

### Regular link (Sbanken)

<AnchorSbankenRegular />

### Goto link (Sbanken)

<AnchorSbankenGoto />
</VisibilityByTheme>

## Demos

### Anchor states
Expand All @@ -33,10 +49,18 @@ To force a specific state of style, use the following classes to do so:

<AnchorExampleIcons />

### Anchor with `target="_blank"`

If the link opens a new window it will automatically get an icon to indicate this.

<AnchorTargetBlank />

### Anchor in headings

<AnchorExampleHeadings />

### Anchor in Section

<AnchorExampleInSection />

<AnchorLegacyUsage />
2 changes: 0 additions & 2 deletions packages/dnb-design-system-portal/src/docs/uilib/components/anchor/info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ showTabs: true

## Description

# Anchor (Text Link)

The Anchor, also knows as `Link` is used to navigate from one page to the next HTML page.

```jsx
Expand Down
2 changes: 2 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/anchor/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ showTabs: true
| `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/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |

Expand Down
27 changes: 25 additions & 2 deletions packages/dnb-eufemia/src/components/anchor/Anchor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ import {
extendPropsWithContext,
} from '../../shared/component-helper'
import { getOffsetTop } from '../../shared/helpers'
import IconPrimary from '../icon-primary/IconPrimary'
import Tooltip from '../tooltip/Tooltip'
import type { IconIcon } from '../icon/Icon'
import type { SkeletonShow } from '../skeleton/Skeleton'
import type { SpacingProps } from '../../shared/types'

Expand All @@ -23,6 +25,8 @@ export type AnchorProps = {
targetBlankTitle?: string
target?: string
tooltip?: React.ReactNode
icon?: IconIcon
iconPosition?: 'left' | 'right'
skeleton?: SkeletonShow
omitClass?: boolean
innerRef?: React.RefObject<HTMLAnchorElement>
Expand Down Expand Up @@ -63,6 +67,8 @@ export function AnchorInstance(localProps: AnchorAllProps) {
className,
children,
tooltip,
icon,
iconPosition = 'left',
omitClass,
innerRef,
targetBlankTitle,
Expand All @@ -79,6 +85,18 @@ export function AnchorInstance(localProps: AnchorAllProps) {

const as = (element || 'a') as string

let prefix
let suffix
if (icon) {
const iconNode =
typeof icon === 'string' ? <IconPrimary icon={icon} /> : icon
if (iconPosition === 'left') {
prefix = <>{iconNode} </>
} else if (iconPosition === 'right') {
suffix = <> {iconNode}</>
}
}

return (
<>
<E
Expand All @@ -91,13 +109,18 @@ export function AnchorInstance(localProps: AnchorAllProps) {
// because we then don't want to distract the link out
// we make sure we hide the icon
allProps.target === '_blank' &&
typeof children !== 'string' &&
'dnb-anchor--no-icon'
(typeof children !== 'string' || suffix) &&
'dnb-anchor--no-icon',
typeof children !== 'string' && 'dnb-anchor--has-icon',
prefix && 'dnb-anchor--icon-left',
suffix && 'dnb-anchor--icon-right'
)}
{...attributes}
innerRef={innerRef}
>
{prefix}
{children}
{suffix}
</E>

{showTooltip && (
Expand Down
Loading

0 comments on commit c6dcd03

Please sign in to comment.