Welcome to borrow-ui!
Bootstrap your React Component Library with yarn 3, TypeScript, Rollup and Storybook
Or try the components with yarn add @borrow-ui/ui
# or directly from command line
curl -LJO https://github.com/borrow-ui/borrow-ui/archive/master.zip
import React from 'react';
import { UI_PREFIX, getConfig } from '../../config';
import { LinkProps } from './Link.types';
const LINK_CLASS = `${UI_PREFIX}__link`;
export const Link = ({
className = '',
children,
...rest
}: LinkProps): JSX.Element => {
const linkClassName = `${LINK_CLASS} ${className}`.trim();
return (
<a className={linkClassName} {...rest}>
{children}
</a>
);
};
export interface LinkProps extends React.ComponentPropsWithoutRef<React.ElementType> {
children: React.ReactNode;
className?: string;
}
import React from 'react';
import { render, screen } from '@testing-library/react';
import { UI_PREFIX } from '../../config';
import { Link } from './Link';
describe('Link', () => {
test('renders the link with proper class', () => {
render(<Link href="/app">App</Link>);
const link = screen.getByText('App');
expect(link).toHaveClass(UI_PREFIX + '__link');
});
});
@import '../../vars/main';
.#{$ui-prefix}__link {
color: $ui-color-accent;
text-decoration: underline;
}
.#{$ui-prefix}__link:hover {
color: $ui-color-accent-over;
}
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Link } from './Link';
<Meta title="Components/Link" component={Link} />
# Link
Links are used to create connections.
<Canvas>
<Story name="Default">
<div>
A normal link with "a" tag <Link>looks like this</Link>.
</div>
</Story>
</Canvas>
## Props
<ArgsTable of={Link} />
import React from 'react';
import PropTypes from 'prop-types';
import { UI_PREFIX } from '../../config';
import { propTypesChildren } from '../../utils/types';
const LINK_CLASS = `${UI_PREFIX}__link`;
export function Link({ className = '', children, ...rest }) {
const linkClassName = `${LINK_CLASS} ${className}`;
return (
<a className={linkClassName} {...rest}>
{children}
</a>
);
}
Link.propTypes = {
className: PropTypes.string,
children: propTypesChildren,
};
import React from 'react';
import { render, screen } from '@testing-library/react';
import { UI_PREFIX } from '../../config';
import { Link } from './Link';
describe('Link', () => {
test('renders the link with proper class', () => {
render(<Link href="/app">App</Link>);
const link = screen.getByText('App');
expect(link).toHaveClass(UI_PREFIX + '__link');
});
});
@import '../../vars/main';
.#{$ui-prefix}__link {
color: $ui-color-accent;
text-decoration: underline;
}
.#{$ui-prefix}__link:hover {
color: $ui-color-accent-over;
}
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Link } from './Link';
<Meta title="Components/Link" component={Link} />
# Link
Links are used to create connections.
<Canvas>
<Story name="Default">
<div>
A normal link with "a" tag <Link>looks like this</Link>.
</div>
</Story>
</Canvas>
## Props
<ArgsTable of={Link} />