Commit cee34b61 authored by Sam Gluck's avatar Sam Gluck
Browse files

- Primary and secondary buttons styles;

- Text input and text area styles;
- Other component styles, e.g. tags;
parent 60125410
Menu example:
```jsx
<Menu />
```
import * as React from 'react';
const {
Nav: ZenNav,
import {
Nav as ZenNav,
NavItem,
NavItemText,
NavItemIcon,
SubNav,
SubNavItem,
SubNavItemText
} = require('@zendeskgarden/react-chrome');
} from '@zendeskgarden/react-chrome';
const logo = require('../../../static/img/moodle-logo.png');
......
Button example:
### Primary button
```js
<Button>Hello world</Button>
<Button style={{marginRight: '10px'}}>Default</Button>
<Button hovered style={{marginRight: '10px'}}>Hover</Button>
<Button active style={{marginRight: '10px'}}>Pressed</Button>
<Button focused style={{marginRight: '10px'}}>Focus</Button>
<Button disabled style={{marginRight: '10px'}}>Disabled</Button>
```
### Secondary button
```js
<Button secondary style={{marginRight: '10px'}}>Default</Button>
<Button secondary hovered style={{marginRight: '10px'}}>Hover</Button>
<Button secondary active style={{marginRight: '10px'}}>Pressed</Button>
<Button secondary focused style={{marginRight: '10px'}}>Focus</Button>
<Button secondary disabled style={{marginRight: '10px'}}>Disabled</Button>
```
import * as React from 'react';
const { Button: ZenButton } = require('@zendeskgarden/react-buttons');
import { Button as ZenButton } from '@zendeskgarden/react-buttons';
export default function Button({ children }) {
return <ZenButton>{children}</ZenButton>;
interface ButtonProps {
children?: any;
secondary?: boolean;
className?: string;
// copied from https://garden.zendesk.com/react-components/buttons/#button
active?: boolean;
basic?: boolean;
buttonRef?: Function;
danger?: boolean;
disabled?: boolean;
focused?: boolean;
hovered?: boolean;
link?: boolean;
muted?: boolean;
pill?: boolean;
primary?: boolean;
selected?: boolean;
size?: 'small' | 'large';
stretched?: boolean;
}
const Button: React.SFC<ButtonProps> = ({
children,
secondary = false,
className = '',
...props
}) => {
if (secondary) {
className += ' secondary';
}
return (
<ZenButton className={className} {...props}>
{children}
</ZenButton>
);
};
// TODO why is this @ts-ignore directive necessary?
// @ts-ignore
export default Button;
```js
<Tag closeable focused style={{ marginRight: '10px'}} onClick={() => alert('Tag close clicked')}>Selected</Tag>
<Tag closeable onClick={() => alert('Tag close clicked')}>Unselected</Tag>
```
import * as React from 'react';
import { Tag as ZenTag, Close } from '@zendeskgarden/react-tags';
export type TagProps = {
closeable?: boolean;
onClose?: Function;
focused?: boolean;
hovered?: boolean;
pill?: boolean;
size?: 'small' | 'large';
type?: 'grey' | 'blue' | 'kale' | 'red' | 'green' | 'yellow';
};
const Tag: React.SFC<TagProps> = ({
children,
closeable = false,
onClose = () => {},
...props
}) => {
return (
<ZenTag {...props}>
{children}
{closeable ? <Close onClick={onClose} /> : null}
</ZenTag>
);
};
export default Tag;
```js
<Text placeholder="Input" style={{marginBottom: '10px'}} />
<Text placeholder="Input hovered" hovered={true} style={{marginBottom: '10px'}} />
<Text placeholder="Input focused" focused={true} style={{marginBottom: '10px'}} />
<Text placeholder="Input completed" value="Input completed" style={{marginBottom: '10px'}} />
```
import * as React from 'react';
const { Input } = require('@zendeskgarden/react-textfields');
export default function Text({ ...props }) {
return <Input {...props} />;
}
```js
<Textarea placeholder="Textarea" style={{marginBottom: '10px'}} />
<Textarea placeholder="Textarea hovered" hovered={true} style={{marginBottom: '10px'}} />
<Textarea placeholder="Textarea focused" focused={true} style={{marginBottom: '10px'}} />
<Textarea placeholder="Textarea completed" value="Textarea completed" style={{marginBottom: '10px'}} />
```
import * as React from 'react';
const { Textarea: ZenTextarea } = require('@zendeskgarden/react-textfields');
export default function Textarea({ ...props }) {
return <ZenTextarea {...props} />;
}
### Base colours:
```js
<ColourBlock colour="base1">base1</ColourBlock>
<ColourBlock colour="base2">base2</ColourBlock>
<ColourBlock colour="base3">base3</ColourBlock>
<ColourBlock colour="base4">base4</ColourBlock>
<ColourBlock colour="base5">base5</ColourBlock>
<ColourBlock colour="base6">base6</ColourBlock>
```
### Primary colour:
```js
<ColourBlock colour="primary">primary</ColourBlock>
```
### Secondary colours:
```js
<ColourBlock colour="collection">collection</ColourBlock>
<ColourBlock colour="community">community</ColourBlock>
```
import styled, { withTheme, ThemeInterface } from '../../../themes/styled';
interface ColourBlockProps {
theme: ThemeInterface;
colour: string;
}
const ColourBlock = styled.div`
float: left;
colour: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px 20px 0;
width: 125px;
height: 125px;
background-color: ${(props: ColourBlockProps) =>
props.theme.styles.colour[props.colour]};
`;
export default withTheme(ColourBlock);
```js
<FontWeight weight="light" />
<FontWeight weight="regular" />
<FontWeight weight="semibold" />
<FontWeight weight="bold" />
```
import * as React from 'react';
import styled, { withTheme, ThemeInterface } from '../../../themes/styled';
interface ColourBlockProps {
theme: ThemeInterface;
colour: string;
}
const FontWeight = styled.div`
float: left;
colour: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px 0 0;
background-color: ${(props: ColourBlockProps) =>
props.theme.styles.colour[props.colour]};
`;
export default withTheme<{ theme: ThemeInterface; weight: string }>(
({ theme, weight }) => {
const fontWeight = theme.styles.fontWeight[weight];
const uppercaseWeight =
weight.substr(0, 1).toUpperCase() + weight.substr(1);
return (
<FontWeight>
<div style={{ fontWeight }}>Open Sans {uppercaseWeight}</div>
</FontWeight>
);
}
);
H1 example:
```js
<H1>Hello world</H1>
<H1>H1 - 60px</H1>
<P>Font weight: <strong>Bold</strong></P>
<P>Line spacing: <strong>72px</strong></P>
<P>Character spacing: <strong>0px</strong></P>
```
import * as React from 'react';
import { XXXL } from '@zendeskgarden/react-typography';
export default function H1({ children }) {
return <XXXL className="H1">{children}</XXXL>;
export interface HeadingProps {
children?: any;
tag?: string;
}
const H1 = ({ children, tag = 'h1', ...props }: HeadingProps) => {
return (
<XXXL tag={tag} {...props}>
{children}
</XXXL>
);
};
export default H1;
H2 example:
```js
<H2>Hello world</H2>
<H2>H2 - 48px</H2>
<P>Font weight: <strong>Bold</strong></P>
<P>Line spacing: <strong>61px</strong></P>
<P>Character spacing: <strong>0px</strong></P>
```
import * as React from 'react';
import { XXL } from '@zendeskgarden/react-typography';
export default function H2({ children }) {
return <XXL className="H2">{children}</XXL>;
}
import { HeadingProps } from '../H1/H1';
const H2 = ({ children, tag = 'h2', ...props }: HeadingProps) => {
return (
<XXL tag={tag} {...props}>
{children}
</XXL>
);
};
export default H2;
H3 example:
```js
<H3>Hello world</H3>
<H3>H3 - 40px</H3>
<P>Font weight: <strong>Bold</strong></P>
<P>Line spacing: <strong>58px</strong></P>
<P>Character spacing: <strong>0px</strong></P>
```
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment