- Primary and secondary buttons styles;

- Text input and text area styles;
- Other component styles, e.g. tags;

package.json

@@ -36,6 +36,8 @@
     "@zendeskgarden/react-chrome": "4.2.7",
     "@zendeskgarden/react-grid": "1.1.11",
     "@zendeskgarden/react-menus": "3.6.5",
+    "@zendeskgarden/react-tags": "1.1.20",
+    "@zendeskgarden/react-textfields": "3.4.1",
     "@zendeskgarden/react-theming": "3.1.3",
     "@zendeskgarden/react-typography": "0.2.0",
     "autoprefixer": "7.1.6",

src/components/chrome/Menu/Menu.md

-Menu example:
-
-```jsx
-<Menu />
-```

src/components/chrome/Nav/Nav.tsx

 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');
 

src/components/elements/Button/Button.md

-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>
 ```

src/components/elements/Button/Button.tsx

 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;

src/components/elements/Tag/Tag.md

+```js
+<Tag closeable focused style={{ marginRight: '10px'}} onClick={() => alert('Tag close clicked')}>Selected</Tag>
+<Tag closeable onClick={() => alert('Tag close clicked')}>Unselected</Tag>
+```

src/components/elements/Tag/Tag.tsx

+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;

src/components/inputs/Text/Text.md

+```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'}} />
+```

src/components/inputs/Text/Text.tsx

+import * as React from 'react';
+const { Input } = require('@zendeskgarden/react-textfields');
+
+export default function Text({ ...props }) {
+  return <Input {...props} />;
+}

src/components/inputs/TextArea/Textarea.md

+```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'}} />
+```

src/components/inputs/TextArea/Textarea.tsx

+import * as React from 'react';
+const { Textarea: ZenTextarea } = require('@zendeskgarden/react-textfields');
+
+export default function Textarea({ ...props }) {
+  return <ZenTextarea {...props} />;
+}

src/components/styleguide/ColourBlock/ColourBlock.md

+### 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>
+```

src/components/styleguide/ColourBlock/ColourBlock.tsx

+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);

src/components/styleguide/FontWeight/FontWeight.md

+```js
+<FontWeight weight="light" />
+<FontWeight weight="regular" />
+<FontWeight weight="semibold" />
+<FontWeight weight="bold" />
+```

src/components/styleguide/FontWeight/FontWeight.tsx

+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>
+    );
+  }
+);

src/components/typography/H1/H1.md

-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>
 ```

src/components/typography/H1/H1.tsx

 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;

src/components/typography/H2/H2.md

-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>
 ```

src/components/typography/H2/H2.tsx

 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;

src/components/typography/H3/H3.md

-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>
 ```