aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/button.tsx47
-rw-r--r--packages/website/ts/@next/components/definition.tsx37
-rw-r--r--packages/website/ts/@next/components/link.tsx21
3 files changed, 59 insertions, 46 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index ab804b758..b686b27a2 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -19,52 +19,55 @@ interface ButtonInterface {
isInline?: boolean;
href?: string;
type?: string;
+ target?: string;
to?: string;
onClick?: () => any;
theme?: ThemeInterface;
+ useAnchorTag?: boolean;
}
export const Button = (props: ButtonInterface) => {
- const {
- children,
- href,
- isWithArrow,
- to,
- } = props;
+ const { children, href, isWithArrow, to, useAnchorTag, target } = props;
let linkElem;
- if (href) { linkElem = 'a'; }
- if (to) { linkElem = ReactRouterLink; }
+ if (href || useAnchorTag) {
+ linkElem = 'a';
+ }
+ if (to) {
+ linkElem = ReactRouterLink;
+ }
const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
+ const targetProp = href && target ? { target } : {};
return (
- <Component {...props}>
+ <Component {...props} {...targetProp}>
{children}
- { isWithArrow &&
+ {isWithArrow && (
<svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path
- d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
- />
+ <path d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" />
</svg>
- }
+ )}
</Component>
);
};
-const ButtonBase = styled.button<ButtonInterface>`
+const ButtonBase =
+ styled.button <
+ ButtonInterface >
+ `
appearance: none;
border: 1px solid transparent;
display: inline-block;
background-color: ${props => props.bgColor || colors.brandLight};
background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'};
- border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
- color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
- padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
+ border-color: ${props => props.isTransparent && !props.isWithArrow && 'rgba(255, 255, 255, .4)'};
+ color: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)};
+ padding: ${props => !props.isNoPadding && !props.isWithArrow && '18px 30px'};
white-space: ${props => props.isWithArrow && 'nowrap'};
text-align: center;
- font-size: ${props => props.isWithArrow ? '20px' : '18px'};
+ font-size: ${props => (props.isWithArrow ? '20px' : '18px')};
text-decoration: none;
cursor: pointer;
outline: none;
@@ -77,12 +80,12 @@ const ButtonBase = styled.button<ButtonInterface>`
}
path {
- fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
+ fill: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)};
}
&:hover {
- background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'};
- border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'};
+ background-color: ${props => !props.isTransparent && !props.isWithArrow && '#04BEA8'};
+ border-color: ${props => props.isTransparent && !props.isNoBorder && !props.isWithArrow && '#00AE99'};
svg {
transform: translate3d(2px, -2px, 0);
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;
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
index c3633987a..0976a57a8 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -13,19 +13,23 @@ interface LinkInterface {
theme?: {
textColor: string;
};
+ target?: string;
}
export const Link = (props: LinkInterface) => {
- const {
- children,
- isNoArrow,
- href,
- } = props;
+ const { children, isNoArrow, href, target } = props;
return (
<StyledLink to={href} {...props}>
{children}
- {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="currentColor"/></svg>}
+ {!isNoArrow && (
+ <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z"
+ fill="currentColor"
+ />
+ </svg>
+ )}
</StyledLink>
);
};
@@ -39,7 +43,10 @@ export const LinkWrap = styled.div`
}
`;
-const StyledLink = styled(ReactRouterLink)<LinkInterface>`
+const StyledLink =
+ styled(ReactRouterLink) <
+ LinkInterface >
+ `
display: ${props => !props.isBlock && 'inline-flex'};
color: ${props => props.color || props.theme.linkColor};
text-align: center;
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-09 22:01:23 +0800