Skip to content

Commit

Permalink
docs(clayui.com): Remove weight, outline, borderless, and monospaced …
Browse files Browse the repository at this point in the history 
…examples and markup.
  • Loading branch information
@SelenaAungst
SelenaAungst committed Mar 20, 2024
1 parent b71f82c commit dd622ab
Show file tree
Hide file tree
Showing 3 changed files with 2 additions and 277 deletions.
158 changes: 0 additions & 158 deletions packages/clay-link/docs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,164 +56,6 @@ export const Link = () => {
return <Editor code={codeSnippets} scope={scope} />;
};

const linkWeightImportsCode = `import ClayLink from '@clayui/link';`;

const LinkWeightCode = `const Component = () => {
return (
<div className="row">
<ClayLink displayType="primary" href="#link-styles" weight="semi-bold">
{'Primary'}
</ClayLink>
</div>
);
}
render(<Component />);`;

const linkWeightJSPImportsCode = `<%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %>`;

const LinkWeightJSPCode = `<clay:link
displayType="primary"
href="#link-styles"
label="Primary"
weight="semi-bold"
/>`;

export const LinkWeight = () => {
const scope = {ClayLink};
const codeSnippets = [
{
imports: linkWeightImportsCode,
name: 'React',
value: LinkWeightCode,
},
{
disabled: true,
imports: linkWeightJSPImportsCode,
name: 'JSP',
value: LinkWeightJSPCode,
},
];

return <Editor code={codeSnippets} scope={scope} />;
};

const LinkOutlineCode = `const Component = () => {
return (
<div>
<ClayLink displayType="primary" href="#link-styles" outline>
{'Primary'}
</ClayLink>
</div>
);
}
render(<Component />);`;

const LinkOutlineJSPCode = `<clay:link
displayType="primary"
href="#link-styles"
label="Primary"
outline
/>`;

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 <Editor code={codeSnippets} scope={scope} />;
};

const LinkBorderlessCode = `const Component = () => {
return (
<div>
<ClayLink borderless displayType="primary" href="#link-styles" outline>
{'Primary'}
</ClayLink>
</div>
);
}
render(<Component />);`;

const LinkBorderlessJSPCode = `<clay:link
borderless
displayType="primary"
href="#link-styles"
label="Primary"
outline
/>`;

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 <Editor code={codeSnippets} scope={scope} />;
};

const LinkMonospacedCode = `const Component = () => {
return (
<div>
<ClayLink displayType="primary" href="#link-styles" monospaced outline>
{'P'}
</ClayLink>
</div>
);
}
render(<Component />);`;

const LinkMonospacedJSPCode = `<clay:link
displayType="primary"
href="#link-styles"
label="Primary"
monospaced
outline
/>`;

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 <Editor code={codeSnippets} scope={scope} />;
};

const linkContextImportsCode = `import ClayLink, {ClayLinkContext} from '@clayui/link';`;

const LinkContextCode = `const Component = () => {
Expand Down
37 changes: 1 addition & 36 deletions packages/clay-link/docs/link.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

<div class="nav-toc-absolute">
<div class="nav-toc">

- [Basic Usage](#basic-usage)
- [Semi Bold](#link-semi-bold)
- [Outline](#link-outline)
- [Borderless](#link-outline-borderless)
- [Monospaced](#link-monospaced)
- [With Context](#with-context)

</div>
Expand All @@ -33,30 +22,6 @@ By default, when using ClayLink your component will be rendered as an anchor.

<Link />

### Semi Bold(#link-semi-bold)

The `weight` attribute sets the `font-weight` for the link. The available values are `normal`, `semi-bold`, and `null`.

<LinkWeight />

### Outline(#link-outline)

The `outline` attribute enables the `link-outline` variation of `ClayLink`.

<LinkOutline />

### Borderless(#link-outline-borderless)

The `borderless` attribute removes the border from `link-outline`.

<LinkBorderless />

### Monospaced(#link-monospaced)

The `monospaced` attribute renders a link that is equal width and height.

<LinkMonospaced />

## With Context

Additionally, if you want to customize every Link component in your app, you are able to do so by using `<ClayLinkContext.Provider />`.
Expand Down
84 changes: 1 addition & 83 deletions packages/clay-link/docs/markup-link.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

</div>
</div>

<div class="clay-site-alert alert alert-warning">
Don't forget to check <a href="https://www.w3.org/TR/wai-aria-practices/#link">WAI-ARIA</a> accessibility pratices for links when writting your markup.
Don't forget to check <a href="https://www.w3.org/TR/wai-aria-practices/#link">WAI-ARIA</a> accessibility practices for links when writing your markup.
</div>

These elements should be used to style links based on the global link and primary colors.

## Styles(#css-styles)

<div class="sheet-example">
Expand Down Expand Up @@ -151,28 +146,6 @@ Use these patterns for actions in components.
</button>
```

## Outline(#css-outline)

<div class="sheet-example">
<a class="link-outline link-outline-primary" href="#1">Primary</a>
</div>

```html
<a class="link-outline link-outline-primary" href="#1">Primary</a>
```

## Outline Borderless(#css-outline-borderless)

<div class="sheet-example">
<a class="link-outline link-outline-borderless link-outline-primary" href="#1">Primary</a>
</div>

```html
<a class="link-outline link-outline-borderless link-outline-primary" href="#1"
>Primary</a
>
```

## External Link(#css-external-link)

<div class="sheet-example">
Expand All @@ -192,61 +165,6 @@ Use these patterns for actions in components.
</a>
```

## Monospaced(#css-monospaced)

<div class="sheet-example">
<a aria-label="Add cell" title="Add cell" class="link-monospaced link-outline link-outline-primary" href="#1">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-add-cell" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#add-cell" />
</svg>
</span>
</a>
<a aria-label="Add cell" title="Add cell" class="link-monospaced link-outline link-outline-borderless link-outline-primary" href="#1">
<span class="inline-item">
<svg class="lexicon-icon lexicon-icon-add-cell" focusable="false" role="presentation">
<use href="/images/icons/icons.svg#add-cell" />
</svg>
</span>
</a>
</div>

```html
<a
aria-label="Add cell"
title="Add cell"
class="link-monospaced link-outline link-outline-primary"
href="#1"
>
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-add-cell"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#add-cell" />
</svg>
</span>
</a>

<a
aria-label="Add cell"
title="Add cell"
class="link-monospaced link-outline link-outline-borderless link-outline-primary"
href="#1"
>
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-add-cell"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#add-cell" />
</svg>
</span>
</a>
```

## Title Link(#css-title-link)

<div class="sheet-example">
Expand Down

0 comments on commit dd622ab

Please sign in to comment.