aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/definition.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/definition.tsx')
-rw-r--r--packages/website/ts/@next/components/definition.tsx37
1 files changed, 20 insertions, 17 deletions
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index 77f837294..d203151b9 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -7,7 +7,9 @@ import { Heading, Paragraph } from 'ts/@next/components/text';
interface Action {
label: string;
- url: string;
+ url?: string;
+ onClick?: () => void;
+ useAnchorTag?: boolean;
}
interface Props {
@@ -25,11 +27,7 @@ interface Props {
export const Definition = (props: Props) => (
<Wrap {...props}>
- <Icon
- name={props.icon}
- size={props.iconSize || 'medium'}
- margin={[0, 0, 'default', 0]}
- />
+ <Icon name={props.icon} size={props.iconSize || 'medium'} margin={[0, 0, 'default', 0]} />
<TextWrap {...props}>
<Heading
@@ -42,34 +40,36 @@ export const Definition = (props: Props) => (
</Heading>
{typeof props.description === 'string' ? (
- <Paragraph isMuted={true}>
- {props.description}
- </Paragraph>
+ <Paragraph isMuted={true}>{props.description}</Paragraph>
) : (
- <>
- {props.description}
- </>
+ <>{props.description}</>
)}
- {props.actions &&
+ {props.actions && (
<LinkWrap>
{props.actions.map((item, index) => (
<Button
key={`dlink-${index}`}
href={item.url}
+ onClick={item.onClick}
isWithArrow={true}
isAccentColor={true}
+ useAnchorTag={item.useAnchorTag}
+ target="_blank"
>
{item.label}
</Button>
))}
</LinkWrap>
- }
+ )}
</TextWrap>
</Wrap>
);
-const Wrap = styled.div<Props>`
+const Wrap =
+ styled.div <
+ Props >
+ `
max-width: ${props => props.isInline && '354px'};
& + & {
@@ -78,7 +78,7 @@ const Wrap = styled.div<Props>`
}
@media (min-width: 768px) {
- width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'};
+ width: ${props => (props.isInline ? 'calc(33.3333% - 30px)' : '100%')};
display: ${props => props.isInlineIcon && 'flex'};
justify-content: ${props => props.isInlineIcon && 'space-between'};
align-items: ${props => props.isInlineIcon && 'center'};
@@ -94,7 +94,10 @@ const Wrap = styled.div<Props>`
}
`;
-const TextWrap = styled.div<Props>`
+const TextWrap =
+ styled.div <
+ Props >
+ `
width: 100%;
max-width: 560px;