diff --git a/src/components/EventCard/event.card.stories.mdx b/src/components/EventCard/event.card.stories.mdx new file mode 100644 index 0000000000..6a04b76fec --- /dev/null +++ b/src/components/EventCard/event.card.stories.mdx @@ -0,0 +1,77 @@ +import { withKnobs, text } from '@storybook/addon-knobs' +import { PropsTable } from '@storybook/components' +import { Story, Meta, Preview } from '@storybook/addon-docs/blocks' +import { EventCard } from './EventCard.tsx' + + + +# Event Cards + +Below you will be able to see how to use and configure a `EventCard` component: + + + + + + + +
+
+ +## Props + +The `EventCard` component receives an `event` prop, an object containing the fields below: + + diff --git a/src/components/Heading/heading.stories.mdx b/src/components/Heading/heading.stories.mdx new file mode 100644 index 0000000000..0d403f85f1 --- /dev/null +++ b/src/components/Heading/heading.stories.mdx @@ -0,0 +1,71 @@ +import { withKnobs, text, boolean } from '@storybook/addon-knobs' +import { PropsTable } from '@storybook/components' +import { Story, Meta, Preview } from '@storybook/addon-docs/blocks' +import Heading from './index.tsx' + + + +# Headings + +A `Heading` component basically receives one of the props `small`, `medium` or `large`: + + + + Lorem ipsum dolor sit amet + + + Lorem ipsum dolor sit amet + + + Lorem ipsum dolor sit amet + + + +
+
+ +## Other Props + +Props that can be applied to the `Heading` component: + + + + Lorem ipsum dolor sit amet. + + + + diff --git a/src/components/Heading/heading.stories.tsx b/src/components/Heading/heading.stories.tsx deleted file mode 100644 index 67edd63f60..0000000000 --- a/src/components/Heading/heading.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react' - -import { storiesOf } from '@storybook/react' -import { withKnobs, text, boolean, number, color } from '@storybook/addon-knobs' - -import theme from 'src/themes/styled.theme' -import { knobsFactory } from 'src/utils/knobs' - -import Heading from './' - -import { withInfo } from '@storybook/addon-info' - -const stories = storiesOf('UI/Heading', module) - -stories.addDecorator(withKnobs) - -// stories.addDecorator(withInfo) -stories.addParameters({ - info: { - inline: true, - source: true, - }, -}) - -stories.add('default Heading', () => ( - - {text( - 'text', - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit architecto ad inventore animi consequatur deserunt eaque eos excepturi, aliquam iusto placeat quam numquam debitis vel eligendi? A earum voluptates vel!', - )} - -)) - -stories.add('playground Heading', () => ( - - {text( - 'text', - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit architecto ad inventore animi consequatur deserunt eaque eos excepturi, aliquam iusto placeat quam numquam debitis vel eligendi? A earum voluptates vel!', - )} - -)) diff --git a/src/components/Icons/icon.stories.mdx b/src/components/Icons/icon.stories.mdx new file mode 100644 index 0000000000..18f32f5717 --- /dev/null +++ b/src/components/Icons/icon.stories.mdx @@ -0,0 +1,92 @@ +import { action } from '@storybook/addon-actions' +import { withKnobs, text, boolean } from '@storybook/addon-knobs' +import { Story, Meta, Preview } from '@storybook/addon-docs/blocks' +import { PropsTable } from '@storybook/components' +import { Icon, glyphs } from './index.tsx' + + + +# Icon + +Below you will be able to see how to use and configure a `Icon` component: + + + + + + + +## Sizes + +You can use one of the pre-determined size constants: `xs`, `sm`, `md`, `lg` and `xl` or simply set the prop `size` to an integer value. + + + + {[ + , + , + , + , + , + ]} + + + +## Available glyphs + + + + {Object.keys(glyphs).map(x => ( + + ))} + + + +
+ {Object.keys(glyphs).map(x => ( + {x}, + ))} +
+ +
+
+ +## Setting an icon color: + +You can simply set any valid css color to the prop `color`: + + + + {[ + , + , + , + , + ]} + + diff --git a/src/components/Icons/icon.stories.tsx b/src/components/Icons/icon.stories.tsx deleted file mode 100644 index 2b09258ce8..0000000000 --- a/src/components/Icons/icon.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' - -import { storiesOf } from '@storybook/react' -import { withKnobs, select } from '@storybook/addon-knobs' - -import Icon, { glyphs, IGlyphs } from './' - -// import { wInfo } from '../../../.storybook/wInfo' - -const stories = storiesOf('UI/Icons', module) -stories.addDecorator(withKnobs) - -const sizes = { - XSmall: 8, - Small: 16, - Medium: 32, - Large: 48, - XLarge: 64, -} - -// Object.keys(glyphs).map(glyph => -// stories.add( -// glyph, -// wInfo()(() => ( -// -// )), -// ), -// ) diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index 991e0017c6..97348daf63 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -62,10 +62,10 @@ interface IGlyphProps { interface IProps { glyph: keyof IGlyphs - size?: number | string + size?: any marginRight?: string color?: string - OnClick?: () => void + onClick?: () => void } export type availableGlyphs = | 'download' @@ -155,6 +155,12 @@ const IconWrapper = styled('div')` color: ${props => (props.color ? `${props.color}` : 'inherit')}; ${verticalAlign} ${space} + + ${props => + props.onClick && + ` + cursor: pointer; + `} ` const Glyph = ({ glyph = '' }: IGlyphProps) => { @@ -166,7 +172,20 @@ export class Icon extends Component { super(props) } public render() { - const { size = 16, glyph } = this.props + const { glyph } = this.props + + const sizeMap = { + xs: 8, + sm: 16, + md: 32, + lg: 48, + xl: 64, + } + + let { size } = this.props + const isSizeNumeric = size - parseFloat(size) + 1 >= 0 + size = isSizeNumeric ? size : sizeMap[size] + size = size || 16 return ( } : null +export const capitalize = props => + props.capitalize + ? { + textTransform: 'capitalize', + } + : null + export const inline = (props: ITextProps) => props.inline ? { display: 'inline-block' } : null @@ -96,6 +103,7 @@ export const preLine = (props: ITextProps) => export const BaseText = styled(RebassText)` ${inline} ${uppercase} + ${capitalize} ${regular} ${bold} ${txtcenter} diff --git a/src/components/Text/text.stories.mdx b/src/components/Text/text.stories.mdx new file mode 100644 index 0000000000..8a9ced2b7a --- /dev/null +++ b/src/components/Text/text.stories.mdx @@ -0,0 +1,172 @@ +import { action } from '@storybook/addon-actions' +import { withKnobs, text, boolean } from '@storybook/addon-knobs' +import { Story, Meta, Preview } from '@storybook/addon-docs/blocks' +import { PropsTable } from '@storybook/components' +import { Text } from './index.tsx' + + + +# Text + +Below you will be able to see how to use and configure a `Text` component: + + + + + {text('Content', 'The quick brown fox jumped over the lazy dog.')} + + + + +
+
+ +## Props + +The `Text` component can receive the following props: + + + +## Capitalization + +There are a few props to deal with text capitalization: `capitalize`, `uppercase`: + + + + my content is all lowercase. + + + my content is all lowercase. + + + +## Sizes + +There are a few props to deal with text sizes: `superSmall`, `small`, `medium`, `regular` and `large`: + + + + The quick brown fox jumped over the lazy dog. + + + The quick brown fox jumped over the lazy dog. + + + The quick brown fox jumped over the lazy dog. + + + The quick brown fox jumped over the lazy dog. + + + The quick brown fox jumped over the lazy dog. + + + +Or you can set the prop `fontSize` yourself: + + + + The quick brown fox jumped over the lazy dog. + + + +## Pre-defined styles + +You can configure `Text` components to use some pre-defined styles: `auxiliary`, `tags`, `paragraph` and/or `bold`: + + + + The quick brown fox jumped over the lazy dog. + + + The quick brown fox jumped over the lazy dog. + + + The quick brown fox jumped over the lazy dog. + + + The quick brown fox jumped over the lazy dog. + + diff --git a/src/components/Text/text.stories.tsx b/src/components/Text/text.stories.tsx deleted file mode 100644 index a37f74e204..0000000000 --- a/src/components/Text/text.stories.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react' - -import { storiesOf } from '@storybook/react' -import { withKnobs, text, boolean, number, color } from '@storybook/addon-knobs' - -import { knobsFactory } from 'src/utils/knobs' - -import Text from './' - -import { withInfo } from '@storybook/addon-info' - -const stories = storiesOf('UI/Text', module) - -const defaultProps = { - uppercase: false, - regular: false, - txtcenter: false, - capitalize: false, - bold: false, - large: false, - medium: false, - small: false, - superSmall: false, - clipped: false, - preLine: false, - tags: false, - auxiliary: false, - paragraph: false, - fontSize: 4, -} - -const sortedProps = Object.keys(defaultProps) - .sort() - .reduce((acc, current) => { - return { ...acc, [current]: defaultProps[current] } - }, {}) - -stories.addDecorator(withKnobs) - -// stories.addDecorator(withInfo) -stories.addParameters({ - info: { - inline: true, - source: true, - }, -}) - -stories.add('default Text', () => ( - {text('text', 'Change me')} -)) - -stories.add('Text as Label', () => ( -
- - {text('Label', 'Awesome label: ')} - - -
-)) - -stories.add('playground Text', () => ( - - {text('text', 'Lorem ipsum dolor sit.')} - -))