Skip to content
Permalink
Browse files

feat(website): SiteLink Component, replace Link with SiteLink (#135)

* feat(website): initial SiteLink component

* fix(anchor): use shadowFocus token

* feat(wesbsite): replace breadcrumb Link with SiteLink

* fix(website): use navigate for components button

* fix(website): add navigate function to other home buttons
  • Loading branch information...
richbachman committed Oct 15, 2019
1 parent 5eabe8b commit 1295a33862b3ad283c4af793e0566f4b0fcba4b5
@@ -14,7 +14,7 @@ export const StyledLink = styled.a`
&:focus,
&:active {
box-shadow: 0 0 0 4px rgba(0, 117, 195, 0.5);
box-shadow: ${themeGet('shadows.shadowFocus')};
text-decoration: underline;
}
@@ -0,0 +1,39 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Link} from 'gatsby';

// Link styles copied from @twilio-paste/anchor
const StyledLink = styled(Link)`
color: ${themeGet('textColors.colorTextLink')};
text-decoration: none;
outline: none;
&:hover {
color: ${themeGet('textColors.colorTextLinkHover')};
text-decoration: underline;
}
&:focus,
&:active {
box-shadow: ${themeGet('shadows.shadowFocus')};
text-decoration: underline;
}
&:focus {
color: ${themeGet('textColors.colorTextLinkFocus')};
}
&:active {
color: ${themeGet('textColors.colorTextLinkActive')};
}
`;

interface SiteLinkProps {
children: React.ReactNode;
to: string;
}

const SiteLink: React.FC<SiteLinkProps> = ({children, to}) => <StyledLink to={to}>{children}</StyledLink>;

export {SiteLink};
@@ -1,7 +1,7 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Link} from 'gatsby';
import {SiteLink} from '../SiteLink';

const CrumbSlashStyled = styled.span(props => ({
padding: `0 ${themeGet('space.space20')(props)}`,
@@ -25,11 +25,10 @@ const Breadcrumb: React.FC<{}> = ({children}) => {
};

// TODO use correct tokens for lineHeight after fix
const BreadcrumbItem = styled(Link)`
const BreadcrumbItem = styled(SiteLink)`
font-size: ${themeGet('fontSizes.fontSize20')};
line-height: ${themeGet('lineHeights.lineHeight20')};
letter-spacing: normal;
color: ${themeGet('textColors.colorTextLink')};
`;

export {Breadcrumb, BreadcrumbItem};
@@ -1,5 +1,5 @@
import * as React from 'react';
import {Link} from 'gatsby';
import {SiteLink} from '../SiteLink';
import {Table, Thead, Tbody, Tr, Th, Td} from '../table';
import {SidebarCategoryRoutes, PackageStatus} from '../../constants';
import {getPackagePath, getHumanizedNameFromPackageName} from '../../utils/RouteUtils';
@@ -46,7 +46,9 @@ const ComponentOverviewTable: React.FC<ComponentOverviewTableProps> = ({category
return (
<Tr key={node.name}>
<Td>
<Link to={getPackagePath(categoryRoute, node.name)}>{getHumanizedNameFromPackageName(node.name)}</Link>
<SiteLink to={getPackagePath(categoryRoute, node.name)}>
{getHumanizedNameFromPackageName(node.name)}
</SiteLink>
</Td>
<Td>{node.status}</Td>
<Td>{node.version}</Td>
@@ -57,7 +59,9 @@ const ComponentOverviewTable: React.FC<ComponentOverviewTableProps> = ({category
return (
<Tr key={node.name}>
<Td>
<Link to={getPackagePath(categoryRoute, node.name)}>{getHumanizedNameFromPackageName(node.name)}</Link>
<SiteLink to={getPackagePath(categoryRoute, node.name)}>
{getHumanizedNameFromPackageName(node.name)}
</SiteLink>
</Td>
<Td>{node.status}</Td>
<Td />
@@ -1,6 +1,7 @@
import * as React from 'react';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Anchor} from '@twilio-paste/anchor';
import {Box} from '@twilio-paste/box';
import {Breadcrumb, BreadcrumbItem} from '../../breadcrumb';
import {SidebarCategoryRoutes} from '../../../constants';
@@ -36,10 +37,6 @@ const ComponentHeaderBasic: React.FC<{
</>
);

const ExternalLink = styled.a`
margin-right: ${themeGet('space.space20')};
`;

interface ComponentHeaderProps {
children?: React.ReactElement;
name: string;
@@ -97,8 +94,10 @@ const ComponentHeader: React.FC<ComponentHeaderProps> = ({name, categoryRoute, g
<Box marginBottom="space20">
<PackageLabel>Sources</PackageLabel>
<PackageValue>
<ExternalLink href={githubUrl}>Github</ExternalLink>
{storybookUrl != null ? <ExternalLink href={storybookUrl}>Storybook</ExternalLink> : null}
<Box display="inline" marginRight="space30">
<Anchor href={githubUrl}>Github</Anchor>
</Box>
{storybookUrl != null ? <Anchor href={storybookUrl}>Storybook</Anchor> : null}
</PackageValue>
</Box>
<Box marginBottom="space20">
@@ -1,8 +1,8 @@
import * as React from 'react';
import {Helmet} from 'react-helmet';
import {navigate} from 'gatsby';
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Link} from 'gatsby';
import {Button} from '@twilio-paste/button';
import {Box} from '@twilio-paste/box';
import {Anchor} from '@twilio-paste/anchor';
@@ -15,6 +15,7 @@ import {Brush} from '../components/icons/Brush';
import {Terminal} from '../components/icons/Terminal';
import {WindowLayout} from '../components/icons/WindowLayout';
import {Callout, CalloutTitle, CalloutText} from '../components/callout';
import {SiteLink} from '../components/SiteLink';
import {SiteMetaDefaults} from '../constants';

const LandingContainer = styled(Box)`
@@ -49,16 +50,34 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
</P>
<Box marginTop="space80" marginBottom="space80">
<Box display="inline" marginRight="space40">
<Button as="a" href="/getting-started/" size="default" variant="primary">
<Button
size="default"
variant="primary"
onClick={() => {
navigate('/getting-started/');
}}
>
Get Started
</Button>
</Box>
<Box display="inline" marginRight="space40">
<Button as="a" href="/components" size="default" variant="secondary">
<Button
size="default"
variant="secondary"
onClick={() => {
navigate('/components/');
}}
>
View Components
</Button>
</Box>
<Button as="a" href="/roadmap" size="default" variant="secondary">
<Button
size="default"
variant="secondary"
onClick={() => {
navigate('/roadmap/');
}}
>
Roadmap
</Button>
</Box>
@@ -97,8 +116,8 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
Themes
</Heading>
<P>
Each component shares a common set of <Link to="/tokens">design tokens</Link> that allow us to easily
change their value based on a theme.
Each component shares a common set of <SiteLink to="/tokens">design tokens</SiteLink> that allow us to
easily change their value based on a theme.
</P>
</Box>
<Box>
@@ -115,7 +134,7 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
</Heading>
<P>
Learn how to use Paste components and the underlying tokens through{' '}
<Link to="/getting-started">usage examples and guidelines</Link>.
<SiteLink to="/getting-started">usage examples and guidelines</SiteLink>.
</P>
</Box>
<Box>
@@ -131,8 +150,8 @@ const IndexPage: React.FC<{}> = (): React.ReactElement => {
Component API
</Heading>
<P>
Each <Link to="/components">Paste component</Link> is thoroughly documented with a list of props and
descriptions of how they should be used.
Each <SiteLink to="/components">Paste component</SiteLink> is thoroughly documented with a list of props
and descriptions of how they should be used.
</P>
</Box>
</Grid>

1 comment on commit 1295a33

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.