Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Oct 15, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1652ed3
feat(website): initial SiteLink component
richbachman Oct 14, 2019
bebccb2
fix(anchor): use shadowFocus token
richbachman Oct 14, 2019
7e19758
feat(wesbsite): replace breadcrumb Link with SiteLink
richbachman Oct 14, 2019
b537152
fix(website): use navigate for components button
richbachman Oct 15, 2019
a651e1f
fix(website): add navigate function to other home buttons
richbachman Oct 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/paste-core/components/anchor/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
39 changes: 39 additions & 0 deletions packages/paste-website/src/components/SiteLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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};
5 changes: 2 additions & 3 deletions packages/paste-website/src/components/breadcrumb/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.aside(props => ({
padding: `0 ${themeGet('space.space20')(props)}`,
Expand All @@ -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};
10 changes: 7 additions & 3 deletions packages/paste-website/src/components/component-overview-table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand All @@ -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 />
Expand Down
11 changes: 5 additions & 6 deletions packages/paste-website/src/components/shortcodes/component-header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -36,10 +37,6 @@ const ComponentHeaderBasic: React.FC<{
</>
);

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

interface ComponentHeaderProps {
children?: React.ReactElement;
name: string;
Expand Down Expand Up @@ -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">
Expand Down
37 changes: 28 additions & 9 deletions packages/paste-website/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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)`
Expand Down Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😟 We now have <button />s that act as links on our homepage. Is there a way we can still use the navigate API and switch out the element back to an anchor <a />?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SiTaggart We could revert back to an <a />, prevent the default href action, and then use navigate in an onClick. What do you think of that approach?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, just use the as prop, add a matching href so if I command-click it still loads the url in a new tab, and use the onClick to do client side routing for gatsby. Use :allthethings:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SiTaggart done here: #146

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={() => {
richbachman marked this conversation as resolved.
Show resolved Hide resolved
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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down