diff --git a/packages/clay-link/docs/index.js b/packages/clay-link/docs/index.js index 424cf1fccc..fdb2ee5e6e 100644 --- a/packages/clay-link/docs/index.js +++ b/packages/clay-link/docs/index.js @@ -56,164 +56,6 @@ export const Link = () => { return ; }; -const linkWeightImportsCode = `import ClayLink from '@clayui/link';`; - -const LinkWeightCode = `const Component = () => { - return ( -
- - {'Primary'} - -
- ); -} - -render();`; - -const linkWeightJSPImportsCode = `<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>`; - -const LinkWeightJSPCode = ``; - -export const LinkWeight = () => { - const scope = {ClayLink}; - const codeSnippets = [ - { - imports: linkWeightImportsCode, - name: 'React', - value: LinkWeightCode, - }, - { - disabled: true, - imports: linkWeightJSPImportsCode, - name: 'JSP', - value: LinkWeightJSPCode, - }, - ]; - - return ; -}; - -const LinkOutlineCode = `const Component = () => { - return ( -
- - {'Primary'} - -
- ); -} - -render();`; - -const LinkOutlineJSPCode = ``; - -export const LinkOutline = () => { - const scope = {ClayLink}; - const codeSnippets = [ - { - imports: `import ClayLink from '@clayui/link';`, - name: 'React', - value: LinkOutlineCode, - }, - { - disabled: true, - imports: `<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>`, - name: 'JSP', - value: LinkOutlineJSPCode, - }, - ]; - - return ; -}; - -const LinkBorderlessCode = `const Component = () => { - return ( -
- - {'Primary'} - -
- ); -} - -render();`; - -const LinkBorderlessJSPCode = ``; - -export const LinkBorderless = () => { - const scope = {ClayLink}; - const codeSnippets = [ - { - imports: `import ClayLink from '@clayui/link';`, - name: 'React', - value: LinkBorderlessCode, - }, - { - disabled: true, - imports: `<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>`, - name: 'JSP', - value: LinkBorderlessJSPCode, - }, - ]; - - return ; -}; - -const LinkMonospacedCode = `const Component = () => { - return ( -
- - {'P'} - -
- ); -} - -render();`; - -const LinkMonospacedJSPCode = ``; - -export const LinkMonospaced = () => { - const scope = {ClayLink}; - const codeSnippets = [ - { - imports: `import ClayLink from '@clayui/link';`, - name: 'React', - value: LinkMonospacedCode, - }, - { - disabled: true, - imports: `<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>`, - name: 'JSP', - value: LinkMonospacedJSPCode, - }, - ]; - - return ; -}; - const linkContextImportsCode = `import ClayLink, {ClayLinkContext} from '@clayui/link';`; const LinkContextCode = `const Component = () => { diff --git a/packages/clay-link/docs/link.mdx b/packages/clay-link/docs/link.mdx index 247639199d..65a2511332 100644 --- a/packages/clay-link/docs/link.mdx +++ b/packages/clay-link/docs/link.mdx @@ -5,23 +5,12 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/link/' packageNpm: '@clayui/link' --- -import { - Link, - LinkBorderless, - LinkMonospaced, - LinkOutline, - LinkWeight, - LinkContext, -} from '$packages/clay-link/docs/index'; +import {Link, LinkContext} from '$packages/clay-link/docs/index';
- [Basic Usage](#basic-usage) - - [Semi Bold](#link-semi-bold) - - [Outline](#link-outline) - - [Borderless](#link-outline-borderless) - - [Monospaced](#link-monospaced) - [With Context](#with-context)
@@ -33,30 +22,6 @@ By default, when using ClayLink your component will be rendered as an anchor. -### Semi Bold(#link-semi-bold) - -The `weight` attribute sets the `font-weight` for the link. The available values are `normal`, `semi-bold`, and `null`. - - - -### Outline(#link-outline) - -The `outline` attribute enables the `link-outline` variation of `ClayLink`. - - - -### Borderless(#link-outline-borderless) - -The `borderless` attribute removes the border from `link-outline`. - - - -### Monospaced(#link-monospaced) - -The `monospaced` attribute renders a link that is equal width and height. - - - ## With Context Additionally, if you want to customize every Link component in your app, you are able to do so by using ``. diff --git a/packages/clay-link/docs/markup-link.md b/packages/clay-link/docs/markup-link.md index 7453d953c7..4ae7cbb0fe 100644 --- a/packages/clay-link/docs/markup-link.md +++ b/packages/clay-link/docs/markup-link.md @@ -14,21 +14,16 @@ mainTabURL: 'docs/components/link.html' - [Component Action](#css-component-action) - [Anchor](#css-anchor) - [Button](#css-button) -- [Outline](#css-outline) -- [Outline Borderless](#css-outline-borderless) - [External Link](#css-external-link) -- [Monospaced](#css-monospaced) - [Title Link](#css-title-link)
- Don't forget to check WAI-ARIA accessibility pratices for links when writting your markup. + Don't forget to check WAI-ARIA accessibility practices for links when writing your markup.
-These elements should be used to style links based on the global link and primary colors. - ## Styles(#css-styles)
@@ -151,28 +146,6 @@ Use these patterns for actions in components. ``` -## Outline(#css-outline) - -
- Primary -
- -```html -Primary -``` - -## Outline Borderless(#css-outline-borderless) - -
- Primary -
- -```html -Primary -``` - ## External Link(#css-external-link)
@@ -192,61 +165,6 @@ Use these patterns for actions in components. ``` -## Monospaced(#css-monospaced) - -
- - - - - - - - - - - - - - -
- -```html - - - - - - - - - - - - - - - -``` - ## Title Link(#css-title-link)