archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(link): docs improved, foreground color added

Browse Source
This commit is contained in:
Junior Garcia 2023-01-09 23:18:30 -03:00
parent 53b14819fd
commit fec0753dd7
10 changed files with 152 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
apps/docs/content/components/link/custom.ts Normal file
View File

@ -0,0 +1,73 @@
const App = `import { Link, cva, linkVariants } from "@nextui-org/react";
const customLink = cva(null, {
variants: {
color: {
...linkVariants.color,
teal: "text-teal-600",
},
isRelevant: {
true: "before:content-['👉'] before:mr-1",
},
},
});
const MyLink = (props) => {
const {isRelevant, color, ...otherProps} = props;
return <Link {...otherProps} className={customLink({color, isRelevant})} isExternal={!!link} />;
};
export default function App() {
return (
<MyLink link color="teal" href="#">
Visit out new Store
</MyLink>
);
}`;
const AppTs = `import { Link, cva, linkVariants } from "@nextui-org/react";
import type { VariantProps, ExtendVariantProps } from "@nextui-org/react";
const customLink = cva(null, {
variants: {
color: {
...linkVariants.color,
teal: "text-teal-600",
},
isRelevant: {
true: "before:content-['👉'] before:mr-1",
},
},
});
type MyLinkProps = ExtendVariantProps<LinkProps, VariantProps<typeof customLink>>;
const MyLink = (props: MyLinkProps) => {
const {isRelevant, color, ...otherProps} = props;
return <Link {...otherProps} className={customLink({color, isRelevant})} isExternal={!!link} />;
};
export default function App() {
return (
<MyLink link color="teal" href="#">
Visit out new Store
</MyLink>
);
}`;
const react = {
"/App.js": App,
};
const reactTs = {
"/App.tsx": AppTs,
};
export default {
...react,
...reactTs,
};

6
apps/docs/content/components/link/index.ts
View File

@ -1,15 +1,17 @@
import default_link from "./default";
import link from "./default";
import color from "./color";
import variation from "./variation";
import block from "./block";
import external from "./external";
import nextLink from "./nextLink";
import custom from "./custom";
export default {
default_link,
link,
color,
variation,
block,
external,
nextLink,
custom,
};

44
apps/docs/content/docs/components/link.mdx
View File

@ -9,7 +9,7 @@ url: https://nextui.org/docs/components/link
Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>`
```jsx
import { Link } from "@nextui-org/react";
import {Link} from "@nextui-org/react";
```
<CarbonAd />
@ -19,7 +19,7 @@ import { Link } from "@nextui-org/react";
<Playground
title="Default"
desc="You can use it to navigate between pages."
files={linkContent.default_link}
files={linkContent.link}
/>
<Playground
@ -57,6 +57,12 @@ import { Link } from "@nextui-org/react";
`}
/>
<Playground
title="Custom Link"
desc="You can implement your own link component on top of `Link`."
files={linkContent.custom}
/>
<Spacer y={3} />
### APIs
@ -65,18 +71,19 @@ import { Link } from "@nextui-org/react";
#### Link Props
| Attribute | Type | Accepted values | Description | Default |
| ------------------------ | ----------------------------------------------- | -------------------------- | ----------------------------------- | ------- |
| **color** | `LinkColors` `boolean` `string` | [LinkColors](#link-colors) | Change link color | `false` |
| **href** | `string` | - | Link url | - |
| **isExternal** `updated` | `boolean` | `true/false` | Show link icon | `false` |
| **externalIcon** `updated` | `React.ReactNode` | - | Suffix link icon when `isExternal=true` | `<LinkIcon />` |
| **underline** | `boolean` | `true/false` | Display underline | `false` |
| **block** | `boolean` | `true/false` | Display as a separate block | `false` |
| **ref** | <Code>Ref<HTMLAnchorElement &#124; null></Code> | - | forwardRef | - |
| **css** | `Stitches.CSS` | - | Override Default CSS style | - |
| **as** | `keyof JSX.IntrinsicElements` | - | Changes which tag component outputs | `a` |
| ... | `AnchorHTMLAttributes` | `'rel', 'target', ...` | Native props | - |
| Attribute | Type | Description | Default |
| -------------------- | -------------------------------------------------------------- | --------------------------------------- | -------------- |
| **color** | `foreground` `primary` `secondary` `success` `warning` `error` | Change link color | `primary` |
| **href** | `string` | Link url | - |
| **size** | `xs` `sm` `md` `lg` `xl` | Change link size | `md` |
| **isUnderline** | `boolean` | Display underline | `false` |
| **isBlock** | `boolean` | Display as a separate block | `false` |
| **isExternal** | `boolean` | Show link icon | `false` |
| **externalIcon** | `React.ReactNode` | Suffix link icon when `isExternal=true` | `<LinkIcon />` |
| **disableAnimation** | `boolean` | Disable link hover animation | `false` |
| **ref** | <Code>Ref<HTMLAnchorElement &#124; null></Code> | forwardRef | - |
| **as** | `keyof JSX.IntrinsicElements` | Changes which tag component outputs | `a` |
| ... | `AnchorHTMLAttributes` | Native props | - |
<Spacer y={2} />
@ -87,12 +94,5 @@ import { Link } from "@nextui-org/react";
#### Link Colors
```ts
type LinkColors =
| "text"
| "default"
| "primary"
| "secondary"
| "success"
| "warning"
| "error";
type LinkColors = "primary" | "secondary" | "success" | "warning" | "error";
```

10
packages/components/link/stories/link.stories.tsx
View File

@ -78,6 +78,11 @@ export const Sizes = () => (
export const Colors = () => (
<Grid.Container gap={1}>
<Grid xs={12}>
<Link color="foreground" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link color="primary" href="#">
{text}
@ -161,6 +166,11 @@ export const isExternal = () => {
export const isBlock = () => (
<Grid.Container gap={1}>
<Grid xs={12}>
<Link isBlock color="foreground" href="#">
{text}
</Link>
</Grid>
<Grid xs={12}>
<Link isBlock color="primary" href="#">
{text}

2
packages/components/storybook/.storybook/manager.js
View File

@ -3,5 +3,5 @@ import {addons} from "@storybook/addons";
import theme from "./theme";
addons.setConfig({
theme: theme,
theme,
});

3
packages/components/storybook/.storybook/theme.js
View File

@ -4,5 +4,6 @@ export default create({
base: "light",
brandTitle: "NextUI",
brandUrl: "https://nextui.org",
// brandImage: 'https://nextui.org/logotipo.svg',
brandTarget: "_self",
brandImage: 'https://nextui.org/logotipo.svg',
});

29
packages/core/theme/src/components/container/index.ts Normal file
View File

@ -0,0 +1,29 @@
import {cva, type VariantProps} from "../../utils";
const containerBase = ["container"];
const containerVariants = {};
// const containerCompoundVariants = [];
const containerDefaultVariants = {};
const containerStyles = {
variants: containerVariants,
// compoundVariants: containerCompoundVariants,
defaultVariants: containerDefaultVariants,
};
// @ts-ignore
const container = cva(containerBase, containerStyles);
export {
containerBase,
containerVariants,
// containerCompoundVariants,
containerDefaultVariants,
containerStyles,
container,
};
export type StyledContainerProps = VariantProps<typeof container>;

1
packages/core/theme/src/components/index.ts
View File

@ -1 +1,2 @@
export * from "./link";
export * from "./container";

8
packages/core/theme/src/components/link/index.ts
View File

@ -23,6 +23,7 @@ const linkVariants = {
xl: "text-xl",
},
color: {
foreground: "text-foreground dark:text-foreground-dark",
primary: "text-primary",
secondary: "text-secondary dark:text-secondary-dark",
success: "text-success",
@ -35,7 +36,7 @@ const linkVariants = {
},
isBlock: {
true: "px-2 py-1 hover:after:opacity-100 after:content-[' '] after:inset-0 after:opacity-0 after:w-full after:h-full after:rounded-xl after:transition-background after:absolute",
false: "hover:opacity-80",
false: "hover:opacity-80 transition-opacity",
},
disableAnimation: {
true: "after:transition-none transition-none",
@ -43,6 +44,11 @@ const linkVariants = {
};
const linkCompoundVariants = [
{
isBlock: true,
color: "foreground",
class: "hover:after:bg-foreground/25 dark:hover:after:bg-foreground-dark/25",
},
{
isBlock: true,
color: "primary",

29
packages/core/theme/src/utils/styles.ts
View File

@ -1,3 +1,5 @@
import {cx} from "./cva";
/**
* focus styles when the element is focused by keyboard.
*/
@ -11,31 +13,6 @@ export const focusVisibleClasses = [
"dark:focus-visible:ring-offset-background-dark",
];
/**
* This function takes an array of classes and adds another array of classes to it.
* @param classes Array<string>
* @param newClasses Array<string>
* @returns Array<string>
*/
export const withClasses = (classes: Array<string>, newClasses: Array<string>) => {
// If there are existing classes, but no new classes, return the existing classes
if (!classes) {
if (!newClasses) {
return [];
}
return newClasses;
}
// If there are new classes, but no existing classes, return the new classes
if (!newClasses) {
return classes;
}
// If there are both new classes and existing classes, return a combination of the two
return classes.concat(newClasses);
};
export const withFocusVisible = (classes: Array<string>) => {
return withClasses(classes, focusVisibleClasses);
return cx(classes, focusVisibleClasses);
};