Skip to content
Permalink
Browse files

feat(card): updated card design and documentation (#230)

* feat(card): updated card docs introduced silent mode

* feat(card): updated docs

* feat(card): removing cardfooter from tests because we removed cardfooter

* fix: pr comment typos, adding links to components

* fix: pr typos/copy tweaks part 2

* fix: forgot a typo

* fix: pr comments

* chore(card): set the card to beta ready for publish

Co-authored-by: Sean Mateer <sean.mateer@gmail.com>
Co-authored-by: Simon Taggart <me@simontaggart.com>
  • Loading branch information
3 people committed Dec 20, 2019
1 parent 4d4919f commit e0e2ca79569f2b2aca1b6ba1b39fc48358381291
@@ -23,6 +23,11 @@ module.exports = ({config}) => {

config.resolve.extensions.push('.ts', '.tsx');

if (process.env.DROP_PROGRESS !== undefined) {
console.log('Removing Progress Plugin');
config.plugins.splice(5, 1);
}

// To make Storybook build from src files
const customPlugins = [new DirectoryNamedWebpackPlugin({honorPackage: ['main:dev', 'main']})];
config.resolve.plugins =
@@ -13,8 +13,9 @@
"bootstrap": "lerna bootstrap",
"prestart": "yarn prebuild",
"start": "yarn build:tokens && concurrently \"yarn:start:tokens\" \"yarn:start:storybook\"",
"start:all": "yarn build:tokens && concurrently \"yarn:start:tokens\" \"yarn:start:storybook\" \"yarn:start:website\"",
"start:all": "yarn build:tokens && concurrently \"yarn:start:tokens\" \"yarn:start:storybook:quiet\" \"yarn:start:website\"",
"start:storybook": "start-storybook -s ./.storybook/static -p 9001",
"start:storybook:quiet": "export DROP_PROGRESS=TRUE && yarn start:storybook",
"start:tokens": "yarn workspace @twilio-paste/design-tokens build:dev",
"start:website": "yarn workspace @twilio-paste/website develop",
"watch:icons": "yarn workspace @twilio-paste/icons watch",
@@ -19,7 +19,7 @@ exports[`Card it should filter out style props that are not allowed 1`] = `
box-sizing: border-box;
min-width: 0;
border-width: 2px;
border-color: #c8cccf;
border-color: #e4e7e9;
border-style: solid;
border-radius: 4px;
padding: 1.25rem;
@@ -35,44 +35,6 @@ exports[`Card it should filter out style props that are not allowed 1`] = `
</div>
`;

exports[`Card it should render CardFooter 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.875rem;
line-height: 1.5rem;
color: #282a2b;
font-weight: 400;
}

.emotion-1 *,
.emotion-1 *::after,
.emotion-1 *::before {
box-sizing: border-box;
}

.emotion-0 {
box-sizing: border-box;
min-width: 0;
border-top-width: 1px;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-style: solid;
}

<div
className="emotion-1"
>
<footer
className="emotion-0"
>
Just | footer | things
</footer>
</div>
`;

exports[`Card it should render children 1`] = `
.emotion-1 {
font-family: 'Whitney SSm A','Whitney SSm B','Helvetica Neue',Helvetica,Arial,sans-serif;
@@ -92,7 +54,7 @@ exports[`Card it should render children 1`] = `
box-sizing: border-box;
min-width: 0;
border-width: 2px;
border-color: #c8cccf;
border-color: #e4e7e9;
border-style: solid;
border-radius: 4px;
padding: 1.25rem;
@@ -129,7 +91,7 @@ exports[`Card it should render default values 1`] = `
box-sizing: border-box;
min-width: 0;
border-width: 2px;
border-color: #c8cccf;
border-color: #e4e7e9;
border-style: solid;
border-radius: 4px;
padding: 1.25rem;
@@ -164,7 +126,7 @@ exports[`Card it should render default values unless overridden by the component
box-sizing: border-box;
min-width: 0;
border-width: 2px;
border-color: #c8cccf;
border-color: #e4e7e9;
border-style: solid;
border-radius: 4px;
padding: 1.25rem;
@@ -1,7 +1,7 @@
import * as React from 'react';
import {Theme} from '@twilio-paste/theme';
import renderer from 'react-test-renderer';
import {Card, CardFooter} from '../src';
import {Card} from '../src';

describe('Card', () => {
it('it should render default values', (): void => {
@@ -46,14 +46,4 @@ describe('Card', () => {
.toJSON();
expect(tree).toMatchSnapshot();
});
it('it should render CardFooter', (): void => {
const tree = renderer
.create(
<Theme.Provider theme="console">
<CardFooter>Just | footer | things</CardFooter>
</Theme.Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
});
@@ -2,16 +2,18 @@
"name": "@twilio-paste/card",
"version": "1.2.0",
"category": "data display",
"status": "alpha",
"private": true,
"description": "",
"status": "beta",
"description": "The Paste cards are specifically-styled containers that group relatable content and actions.",
"author": "Twilio Inc.",
"license": "MIT",
"main:dev": "src/index.tsx",
"main": "dist/index.js",
"module": "dist/index.es.js",
"types": "dist/index.d.ts",
"sideEffects": false,
"publishConfig": {
"access": "public"
},
"files": [
"dist"
],
@@ -2,38 +2,6 @@ import * as React from 'react';
import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
import {PaddingProps} from '@twilio-paste/style-props';

export interface CardFooterProps extends React.HTMLAttributes<''>, PaddingProps {}

const CardFooter: React.FunctionComponent<CardFooterProps> = ({
children,
padding,
paddingBottom,
paddingLeft,
paddingRight,
paddingTop = 'space40',
...props
}) => {
return (
<Box
{...safelySpreadBoxProps(props)}
as="footer"
borderTopWidth="borderWidth10"
borderBottomWidth="borderWidth0"
borderLeftWidth="borderWidth0"
borderRightWidth="borderWidth0"
marginTop="space40"
padding={padding}
paddingBottom={paddingBottom}
paddingLeft={paddingLeft}
paddingRight={paddingRight}
paddingTop={paddingTop}
borderStyle="solid"
>
{children}
</Box>
);
};

export interface CardProps extends React.HTMLAttributes<''>, PaddingProps {}

const Card: React.FunctionComponent<CardProps> = ({
@@ -50,7 +18,7 @@ const Card: React.FunctionComponent<CardProps> = ({
{...safelySpreadBoxProps(props)}
as="article"
borderWidth="borderWidth20"
borderColor="colorBorder"
borderColor="colorBorderLight"
borderStyle="solid"
borderRadius="borderRadius20"
padding={padding}
@@ -65,4 +33,4 @@ const Card: React.FunctionComponent<CardProps> = ({
);
};

export {Card, CardFooter};
export {Card};
@@ -6,7 +6,7 @@ import {Text} from '@twilio-paste/text';
import {Padding} from '@twilio-paste/style-props';
import {DefaultTheme} from '@twilio-paste/theme-tokens';

import {Card, CardFooter} from '../src';
import {Card} from '../src';

const spaceOptions = Object.keys(DefaultTheme.space);

@@ -16,9 +16,6 @@ storiesOf('Components|Card', module)
<Card padding={select('padding', spaceOptions, 'space10') as Padding}>
<Heading as="h2">With a heading</Heading>
<Text as="p">Body</Text>
<CardFooter>
<Text as="p">I&apos;m | The | Footer</Text>
</CardFooter>
</Card>
))
.add('Padding', () => (
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

1 comment on commit e0e2ca7

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.