diff options
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 22 | ||||
-rw-r--r-- | packages/website/ts/@next/components/icon.tsx | 5 | ||||
-rw-r--r-- | packages/website/ts/@next/components/text.tsx | 16 |
3 files changed, 34 insertions, 9 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index fa830f42c..c532b0720 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -10,6 +10,7 @@ interface ButtonInterface { isTransparent?: boolean; isNoBorder?: boolean; isNoPadding?: boolean; + isWithArrow?: boolean; hasIcon?: boolean | string; isInline?: boolean; href?: string; @@ -24,13 +25,21 @@ export const Button = styled.button<ButtonInterface>` border: 1px solid transparent; display: ${props => props.isInline && 'inline-block'}; background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; - border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'}; + border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'}; color: ${props => props.color || props.theme.textColor}; padding: ${props => !props.isNoPadding && '18px 30px'}; text-align: center; - font-size: 18px; + font-size: ${props => props.isWithArrow ? '20px' : '18px'}; text-decoration: none; + svg { + margin-left: 12px; + } + + path { + fill: ${props => props.color || props.theme.textColor}; + } + @media (max-width: 768px) { padding: ${props => !props.isNoPadding && '6% 10%'}; } @@ -40,12 +49,21 @@ export const Link = (props: ButtonInterface) => { const { children, href, + isWithArrow, } = props; const Component = Button.withComponent(ReactRouterLink); return ( <Component to={href} {...props}> {children} + + { 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" + /> + </svg> + } </Component> ); }; diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 60e27f07e..1199efe3f 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; import Loadable from 'react-loadable'; import styled from 'styled-components'; -import {getCSSPadding} from 'ts/@next/constants/utilities'; +import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; -interface IconProps { +interface IconProps extends PaddingInterface { name: string; - margin?: Array<'small' | 'default' | 'large' | number> | number; size?: 'small' | 'medium' | 'large' | number; } diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index de31679b2..9058fc7c9 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; +import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; interface BaseTextInterface extends PaddingInterface { size?: 'default' | 'medium' | 'large' | 'small'; @@ -41,11 +41,19 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { const { asElement = 'h1', children, - ...style + ...style, } = props; const Component = StyledHeading.withComponent(asElement); - return <Component style={{...style}} {...props}>{children}</Component>; -}; + + return ( + <Component + style={{...style}} + {...props} + > + {children} + </Component>; + ) +} // No need to declare it twice as Styled then rewrap as a stateless comp // Note: this would be useful to be implemented the same way was "Heading" |