diff --git a/.vscode/settings.json b/.vscode/settings.json index 5edea17cd4..2ff9fc0e93 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,7 @@ { "[mdx]": { "editor.wordWrap": "bounded", - "editor.wordWrapColumn": 90 + "editor.wordWrapColumn": 80 }, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", diff --git a/docs/content/components/content/link/link-appearance.demo.tsx b/docs/content/components/content/link/link-appearance.demo.tsx new file mode 100644 index 0000000000..380fa57276 --- /dev/null +++ b/docs/content/components/content/link/link-appearance.demo.tsx @@ -0,0 +1,9 @@ +import { Link, LinkProps } from '@marigold/components'; + +export default (props: LinkProps) => ( +
+ + Find your dream job at Reservix + +
+); diff --git a/docs/content/components/content/link/link-download.demo.tsx b/docs/content/components/content/link/link-download.demo.tsx new file mode 100644 index 0000000000..a0b672a2ce --- /dev/null +++ b/docs/content/components/content/link/link-download.demo.tsx @@ -0,0 +1,9 @@ +import { Center, Link } from '@marigold/components'; + +export default () => ( +
+ + Download your print@home tickets (PDF, 15kb) + +
+); diff --git a/docs/content/components/content/link/link-target.demo.tsx b/docs/content/components/content/link/link-target.demo.tsx deleted file mode 100644 index 56b501ed42..0000000000 --- a/docs/content/components/content/link/link-target.demo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Link, Text } from '@marigold/components'; - -export default () => ( - - Link something nice like{' '} - - Marigold - {' '} - github repositories - -); diff --git a/docs/content/components/content/link/link.mdx b/docs/content/components/content/link/link.mdx index b49f5e56e1..49221f8f42 100644 --- a/docs/content/components/content/link/link.mdx +++ b/docs/content/components/content/link/link.mdx @@ -1,47 +1,213 @@ --- title: Link -caption: Component for links +caption: Interactive component to help users navigate to new pages. +badge: updated --- -The `` component creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. -The `href` property is required. Additional you can set the `target` property. +The `` component is an interactive element that redirects users to different pages or sections within a website or application. It can also be used to enable file downloads, open the user's default email client to compose a new message, or show a specified address in a map application. -## Import +## Anatomy -```tsx -import { Link } from '@marigold/components'; -``` +A link consists of text that indicates what the link will direct the user to. To distinguish a link from regular text, it is usually underlined. -## Apperance +Anatomy of a link - - -## Props - - - -## Examples - -### Standard Link - -The example shows a standard ``. +## Appearance - + -### Link disabled - -This example shows a `` component with the prop `disabled`. - - - -### Anchor Link - -This is an example of using an anchor link on the web page. If you want to use an anchor link, you must give the target the same ID (without #) as the href property in the link + - +## Usage + +Links serve as essential navigational tools in web design, enabling users to move seamlessly within an application, visit different websites or jump to specific elements on the same page. They can even be used to directly open apps to compose an email or make a call. + +Using descriptive and meaningful labels for links is crucial to clearly indicate their destination. Generic phrases can leave users confused and helpless. Overusing links, especially inline, can overwhelm users and obscure their next steps. Use them sparingly to avoid clutter. + + + + + Provide a meaningful descriptive label to the link that clearly indicates the link's destination. + + + Provide a meaningful descriptive label to the link that clearly indicates + the link's destination. + + + + + Dont use generic phrases like "click here" or "go to" on links. + + + Don't use generic phrases like "click here" or "go to" on links. + + + + +### Opening in new windows or tabs + +Avoid opening links in new windows or tabs as it can be disorienting for users. It’s acceptable to do so only when necessary, such as when the link leads to an external site, or when there’s a risk of users losing their current place or task. + +To support accessibility, ensure that such links include a warning for screen readers to alert users of the new window or tab. For more details on this practice, see the [W3C guidelines](https://www.w3.org/TR/WCAG20-TECHS/G200.html). + +### Buttons or links + +For actions that will change data, alter a state, or trigger a high-emphasis action, use a button instead of a link. + +You can find more details on this [on the button component page](/components/form/button#button-or-link). + +### Phone numbers and emails + +When using links with phone numbers (`tel:`) or emails (`mailto:`), it’s important to ensure they serve a clear navigational purpose while triggering specific actions. For example, a phone number link should automatically initiate a call when clicked, and an email link should open the user's email client. + +Make sure that the link text and any accompanying icons clearly indicate the action that will be triggered and the intended destination. + + + + + Clearly indicate the action that will be triggered. + + + Clearly indicate the action that will be triggered. + + + + + Don\’t use vague labels without specifying how to reach out. + + + Don’t use vague labels without specifying how to reach out. + + + + +### Download links + +Using the `download` attribute on an anchor element causes the browser to treat the linked URL as a download and allows setting a filename for the download. + +Always indicate if a link triggers a download, and make the linked text clear about what will be downloaded, including the file type and size. + + + + + + + Clearly indicate what will be downloaded, including the file type and size. + + + Clearly indicate what will be downloaded, including the file type and + size. + + + + + Don’t use download links without indicating they trigger a download. + + + Don’t use download links without indicating they trigger a download. + + + + +### Integrating with a router + +The `` component can be seamlessly integrated with your app's router (like Tanstack Router, Next.js or React Router) to retain all the accessibility features and functionality of the `` component. + +For more details, you can read about this integration on the ["RouterProvider" page](/components/application/routerprovider). -### Link with target +## Props -An example of using the `target` `_blank` property. When the target is blank, the web page opens in a new tab. + - +## Related + + + + + + ), + }, + { + title: 'RouterProvider', + href: '/components/application/routerprovider', + caption: 'Integrating Marigold components in a router', + icon: ( + + + + + ), + }, + ]} +/> diff --git a/docs/content/components/form/button/button.mdx b/docs/content/components/form/button/button.mdx index 22b218d06d..aa8c40c7bc 100644 --- a/docs/content/components/form/button/button.mdx +++ b/docs/content/components/form/button/button.mdx @@ -263,6 +263,5 @@ Each handler receives a `PressEvent`, providing details about the target and the ), }, - -]} + ]} /> diff --git a/docs/public/link/link-anatomy.jpg b/docs/public/link/link-anatomy.jpg new file mode 100644 index 0000000000..511cd23898 Binary files /dev/null and b/docs/public/link/link-anatomy.jpg differ diff --git a/docs/public/link/link-contact-do.jpg b/docs/public/link/link-contact-do.jpg new file mode 100644 index 0000000000..349b987ee4 Binary files /dev/null and b/docs/public/link/link-contact-do.jpg differ diff --git a/docs/public/link/link-contact-dont.jpg b/docs/public/link/link-contact-dont.jpg new file mode 100644 index 0000000000..3c172348b1 Binary files /dev/null and b/docs/public/link/link-contact-dont.jpg differ diff --git a/docs/public/link/link-download-do.jpg b/docs/public/link/link-download-do.jpg new file mode 100644 index 0000000000..66bd8e9468 Binary files /dev/null and b/docs/public/link/link-download-do.jpg differ diff --git a/docs/public/link/link-download-dont.jpg b/docs/public/link/link-download-dont.jpg new file mode 100644 index 0000000000..7a2e3cc5af Binary files /dev/null and b/docs/public/link/link-download-dont.jpg differ diff --git a/docs/public/link/link-label-do.jpg b/docs/public/link/link-label-do.jpg new file mode 100644 index 0000000000..2d7859cee5 Binary files /dev/null and b/docs/public/link/link-label-do.jpg differ diff --git a/docs/public/link/link-label-dont.jpg b/docs/public/link/link-label-dont.jpg new file mode 100644 index 0000000000..25620c4cb8 Binary files /dev/null and b/docs/public/link/link-label-dont.jpg differ diff --git a/docs/public/link/tickets-yakari-gustav-gans.pdf b/docs/public/link/tickets-yakari-gustav-gans.pdf new file mode 100644 index 0000000000..e812082894 Binary files /dev/null and b/docs/public/link/tickets-yakari-gustav-gans.pdf differ diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx index ee0c4e5e1f..3d6f289800 100755 --- a/packages/components/src/Link/Link.tsx +++ b/packages/components/src/Link/Link.tsx @@ -3,7 +3,7 @@ import type RAC from 'react-aria-components'; import { Link } from 'react-aria-components'; import { useClassNames } from '@marigold/system'; -type RemovedProps = 'className' | 'isDisabled'; +type RemovedProps = 'className' | 'isDisabled' | 'slot'; export interface LinkProps extends Omit { variant?: string;