Commit d37a8e5a authored by Alex Turner's avatar Alex Turner

Added button component

parent 1910097d
Pipeline #17680 passed with stage
in 17 seconds
import React from 'react';
import PropTypes from 'prop-types';
import { Link as PageLink } from 'react-router-dom';
const Link = ({
className,
children,
download,
onClick,
openInNewWindow,
title,
uri,
}) => {
if (!uri) {
return <span className={className}>{children}</span>;
}
let newWindow = openInNewWindow ? '_blank' : '_self';
uri = encodeURI(uri);
if (newWindow != '_blank' && uri && uri.startsWith('/')) {
return (
<PageLink
className={className}
download={download}
onClick={onClick}
title={title}
to={uri}
>
{children}
</PageLink>
);
} else {
return (
<a
className={className}
download={download}
href={uri}
onClick={onClick}
target={newWindow}
title={title}
rel="noopener noreferrer"
>
{children}
</a>
);
}
};
Link.propTypes = {
className: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
download: PropTypes.string,
onClick: PropTypes.func,
openInNewWindow: PropTypes.bool,
title: PropTypes.string,
uri: PropTypes.string,
};
export default Link;
import Link from './components/Link';
export default Link;
import styled from 'styled-components';
import Link from '~/features/link';
const LinkButton = styled(Link)`
display: inline-block;
border-radius: 3px;
margin: 30px 0 0 0;
padding: 10px 15px;
font-size: 18px;
line-height: 1;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease-out 0s;
background: #b00074;
color: #fff;
`;
export default LinkButton;
import React from 'react';
import PropTypes from 'prop-types';
import LinkButtonStyled from '../components.styled/LinkButton.styled';
const LinkButton = ({
className,
openInNewWindow,
solidTheme,
text,
uri,
whiteTheme,
}) => {
return (
<LinkButtonStyled
className={className}
openInNewWindow={openInNewWindow}
solidTheme={solidTheme}
uri={uri}
whiteTheme={whiteTheme}
>
{text}
</LinkButtonStyled>
);
};
LinkButton.propTypes = {
className: PropTypes.string,
openInNewWindow: PropTypes.bool,
solidTheme: PropTypes.bool,
text: PropTypes.string,
uri: PropTypes.string,
whiteTheme: PropTypes.bool,
};
export default LinkButton;
import LinkButton from './components/LinkButton';
export default LinkButton;
......@@ -2,6 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import Image from '~/features/image/components/Image';
import CodeSnippet from '~/features/codeSnippet/components/CodeSnippet';
import LinkButton from '~/features/linkButton/components/LinkButton';
const BlogComposer = ({ fields }) => {
if (!fields) return null;
return fields.map((field, idx) => {
......@@ -29,6 +31,26 @@ const BlogComposer = ({ fields }) => {
});
return <div key={`codeWrapper-${idx}`}>{codeExamples}</div>;
}
case 'button': {
let external = false;
let uri;
if (
field.value &&
field.value.linkDestination &&
field.value.linkDestination.sys.contentTypeId === 'externalLink'
) {
external = true;
uri = field.value.linkDestination.link;
}
return (
<LinkButton
openInNewWindow={external}
key={`button-${idx}`}
uri={uri}
text={field.value.callToActionText}
/>
);
}
default:
break;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment