Skip to content
Permalink
Browse files

feat(website): Callout component (#25)

* feat(website): initial callout component

* feat(website): callout colors and examples

* fix(website): callout title component, use box for callout

* fix(website): fix callout linting errors

* fix(website): more callout lint fixing

* fix(website): change callout to use calloutcontent component

* fix(website): change to use token

* fix(website): change CalloutContent to CalloutText

* fix(tokens): add status border tokens

* fix(website): callout use border tokens, pass margin props

* fix(tokens): sg border token overrides
  • Loading branch information...
richbachman committed Aug 7, 2019
1 parent 878d3c5 commit e4a3d0042a43be7153400d6f0a39e435e9868af1
@@ -43,12 +43,27 @@ props:
value: "{!palette-blue-30}"
comment: Lighter primary border color

# error borders
# status borders
color-border-success:
value: "{!palette-green-60}"
comment: Success borderr color
color-border-success-lightest:
value: "{!palette-green-10}"
comment: Lightest success borderr color
color-border-warning:
value: "{!palette-orange-60}"
comment: Warning borderr color
color-border-warning-lightest:
value: "{!palette-orange-10}"
comment: Lightest warning borderr color
color-border-error:
value: "{!palette-red-60}"
comment: Error border color
color-border-error-lightest:
value: "{!palette-red-10}"
comment: Lightest error borderr color

# destrcuctive borders
# destructive borders
color-border-destructive-darker:
value: "{!palette-red-80}"
comment: Destructive hover border color
@@ -44,12 +44,27 @@ props:
value: "{!palette-blue-30}"
comment: Lighter primary border color

# error borders
# status borders
color-border-success:
value: "{!palette-green-60}"
comment: Success borderr color
color-border-success-lightest:
value: "{!palette-green-10}"
comment: Lightest success borderr color
color-border-warning:
value: "{!palette-orange-60}"
comment: Warning borderr color
color-border-warning-lightest:
value: "{!palette-orange-10}"
comment: Lightest warning borderr color
color-border-error:
value: "{!palette-red-60}"
comment: Error border color
color-border-error-lightest:
value: "{!palette-red-10}"
comment: Lightest error borderr color

# destrcuctive borders
# destructive borders
color-border-destructive-darker:
value: "{!palette-red-80}"
comment: Destructive hover border color
@@ -0,0 +1,38 @@
import * as React from 'react';
import {Text} from '@twilio-paste/text';
import {StyledCallout} from './styles';
import {CalloutProps, CalloutTitleProps, CalloutTextProps} from './types';

const CalloutTitle: React.FC<CalloutTitleProps> = ({as, children}) => (
<Text as={as} marginBottom="space40" fontSize="fontSize20">
{children}
</Text>
);

const CalloutText: React.FC<CalloutTextProps> = ({as, children, marginTop, marginBottom}) => (
<Text as={as} marginTop={marginTop} marginBottom={marginBottom} fontSize="fontSize20">
{children}
</Text>
);

const Callout: React.FC<CalloutProps> = props => {
return (
<StyledCallout
marginTop="space60"
marginBottom="space60"
paddingTop="space40"
paddingRight="space60"
paddingBottom="space40"
paddingLeft="space60"
variant={props.variant}
>
{props.children}
</StyledCallout>
);
};

Callout.defaultProps = {
variant: 'primary',
};

export {Callout, CalloutTitle, CalloutText};
@@ -0,0 +1,43 @@
import styled from '@emotion/styled';
import {themeGet} from 'styled-system';
import {Box} from '@twilio-paste/box';
import {CalloutProps} from './types';

const borderColorPartial = ({variant}: CalloutProps): string => {
if (variant === 'secondary') {
return themeGet('borderColors.colorBorderPrimaryDark');
}
if (variant === 'warning') {
return themeGet('borderColors.colorBorderWarning');
}
return themeGet('borderColors.colorBorderPrimaryLight');
};

const backgroundColorPartial = ({variant}: CalloutProps): string => {
if (variant === 'secondary') {
return themeGet('backgroundColors.colorBackgroundPrimaryDark');
}
if (variant === 'warning') {
return themeGet('backgroundColors.colorBackgroundWarning');
}
return themeGet('backgroundColors.colorBackgroundPrimaryLight');
};

export const StyledCallout: React.FC<CalloutProps> = styled(Box)`
position: relative;
border-width: ${themeGet('borderWidths.borderWidth20')};
border-style: solid;
border-color: ${borderColorPartial};
border-radius: 0 ${themeGet('radii.borderRadius20')} ${themeGet('radii.borderRadius20')} 0;
&::before {
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
display: block;
content: '';
width: ${themeGet('space.space30')};
background-color: ${backgroundColorPartial};
}
`;
@@ -0,0 +1,22 @@
export type CalloutVariants = 'primary' | 'secondary' | 'warning';

export interface CalloutTitleProps {
as?: string;
}

export interface CalloutTextProps {
as?: string;
marginTop?: string;
marginBottom?: string;
}

export interface CalloutProps {
marginTop?: string;
marginBottom?: string;
paddingTop?: string;
paddingRight?: string;
paddingBottom?: string;
paddingLeft?: string;
children?: React.ReactNode;
variant?: CalloutVariants;
}
@@ -3,6 +3,7 @@ title: Getting Started
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper posuere dui. Suspendisse gravida odio vestibulum, condimentum nibh ultrices, fermentum odio. Nam placerat lobortis augue, non eleifend nulla fringilla a.
---

import {Callout, CalloutTitle, CalloutText} from '../../components/callout';
import {Grid} from '../../components/grid';

<content>
@@ -37,6 +38,20 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper posuere

##### Heading 5

<Callout variant="warning">
<CalloutTitle as="h4">Hot accessibility tip</CalloutTitle>
<CalloutText>Before using this component, we recommend reading the guidelines first.</CalloutText>
</Callout>

<Callout>
<CalloutText>Before using this component, we recommend reading the guidelines first.</CalloutText>
</Callout>

<Callout variant="secondary">
<CalloutText>Before using this component, we recommend reading the guidelines first. Before using this component, we recommend reading the guidelines first.</CalloutText>
<CalloutText as="h4" marginTop="space40">Before using this component, we recommend reading the guidelines first.</CalloutText>
</Callout>

###### Heading 6

Labore enim ipsum mollit cillum nostrud magna aute adipisicing velit. Qui irure sint officia quis sunt. _Labore non sunt proident_ proident voluptate anim ad cupidatat nulla est magna reprehenderit laborum et. Proident ut magna ea id anim quis et cupidatat eiusmod. **Lorem non sunt** et in anim sunt esse culpa non irure excepteur laborum.

1 comment on commit e4a3d00

@now

This comment has been minimized.

Copy link

now bot commented on e4a3d00 Aug 7, 2019

Deployment failed with the following error:

The domain used as an alias twilio.design is not verified yet. Please verify it.
Please sign in to comment.
You can’t perform that action at this time.