Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Anchor): Sbanken styling, added icon props #2318

Merged
merged 21 commits into from
May 15, 2023
Merged

feat(Anchor): Sbanken styling, added icon props #2318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
5e55567
feat(Anchor): updates sbanken styling and added props for icons
May 8, 2023
2f46e09
chore(Anchor): update snapshot tests
May 9, 2023
4daaea2
Update screenshot tests for Sbanken theme
eliland May 9, 2023
7457fbb
Updated screenshot tests for ui theme
eliland May 9, 2023
24530d7
chore(Anchor): fix linting and sass imports
May 9, 2023
5d29ac0
chore: update snapshot that runs bad on windows
May 9, 2023
eb59658
chore: bump commit
May 9, 2023
61302d1
screenshot update test
joakbjerk May 9, 2023
908ac8c
remove anchor screenshots
joakbjerk May 9, 2023
095d656
readd screenshots
joakbjerk May 9, 2023
b29f15c
Check out from v10: Firefox Mac version of visually hidden snapshot
tujoworker May 10, 2023
ab8a552
Ensure the word gets not wrapped on line-break visual tests
tujoworker May 10, 2023
7a815ab
feat(Anchor): icon props structured like in <Button>, tests
May 12, 2023
652b8f4
chore: remove old screenshots
May 12, 2023
f005cbd
chore: moved legacy screenshot tests to own section
May 12, 2023
54b16fd
Update screenshot tests (sbanken changes only)
eliland May 15, 2023
5225dc9
Update screenshot tests (ui changes only)
eliland May 15, 2023
29c4c45
Rename `icon_position` to `iconPosition` because new feature props ca…
tujoworker May 15, 2023
994ac6d
Check out from v10: Firefox Mac version of visually hidden snapshot
tujoworker May 15, 2023
eb16dfd
Remove excess h1
tujoworker May 15, 2023
ab61eab
Ensure clean snapshots, without text from above at the top
tujoworker May 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 188 additions & 17 deletions packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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