Add Upleveled slides and tweak some excerices

slides/code/Box-Text.js

@@ -15,7 +15,7 @@
 			borderColor="grey.5"
 		>
 			<Box
-				pb={5}
+				py={5}
 				mb={5}
 				borderBottom="thin"
 				borderColor="grey.4"

src/components/index.js

@@ -0,0 +1,14 @@
+export { default as Box } from './primitives/Box';
+export { default as Button } from './primitives/Button';
+export { default as Card } from './primitives/Card';
+export { default as Flex } from './primitives/Flex';
+export { default as Grid } from './primitives/Grid';
+export { default as Heading } from './primitives/Heading';
+export { default as Icon } from './primitives/Icon';
+export { default as Image } from './primitives/Image';
+export { default as Input } from './primitives/Input';
+export { default as Link } from './primitives/Link';
+export { default as Select } from './primitives/Select';
+export { default as Stack } from './primitives/Stack';
+export { default as Text } from './primitives/Text';
+export { default as VisuallyHidden } from './primitives/VisuallyHidden';

src/components/primitives/Image/Image.md

@@ -1,6 +1,6 @@
 ```jsx harmony
 <Image
-  src="https://pbs.twimg.com/profile_images/1126108465989148673/ZM7-Aa6N_400x400.jpg"
+  src="https://pbs.twimg.com/profile_images/1219935869597093888/VUUvZu8H_400x400.jpg"
   alt="Okonetchnikov"
   width={200}
   height={200}

src/exercises/5-Patterns/LoginForm.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+	Box,
+	Button,
+	Flex,
+	Grid,
+	Heading,
+	Input,
+	Link,
+	Stack,
+	Text,
+} from '../../components';
+
+export default () => {
+	return <form>Your markup here</form>;
+};

src/exercises/5-Patterns/LoginForm.md

@@ -0,0 +1,3 @@
+```jsx
+<LoginForm />
+```

src/exercises/5-Patterns/Readme.md

@@ -1,79 +1,31 @@
-## 5.1 Using layout and basic primitive to compose UI patterns
+## 5.1 Creating a login form using primitives
 
 In the previous exercise we learned how to manage whitespace around our primitives. Now it's time to use what we learned and create an application specific component.
 
-### The result
-
-```jsx noeditor
-import SubscriptionForm from '../../../src/components/patterns/SubscriptionForm';
-
-<SubscriptionForm
-  id="sf1"
-  email=""
-  onSubmit={() => {}}
-  onEmailChange={() => {}}
-/>;
-```
-
-### The task
-
-1. Create a `SubscriptionForm` component using the `Grid` component.
-2. The layout should be responsive and the button should be placed below the input field on a narrow screen.
-
-**Hint:** Use `grid-template-columns` CSS property for responsiveness, like this: `gridTemplateColumns={['1fr', '1fr auto']}`.
-
-<details>
- <summary>Solution</summary>
-
-```js {"file": "solutions/5.1.js", "static": true}
-```
-
-</details>
-
-## 5.2 Creating a new page using primitives
-
 Using `Box` and `Flex` components we can create really complex layouts without writing custom CSS. And since the values for the spacing are coming from our [spacing scale](https://cdds.netlify.com/styleguide/#/Foundation?id=spacing) we can be sure our layouts are consistent across the whole application.
 
-We can even create full pages. Let’s try to create a new login page four our app.
+Let’s create a login form four our app.
 
 ### The result
 
-```jsx noeditor
-import Box from '../../components/primitives/Box';
-import Flex from '../../components/primitives/Flex';
-import Heading from '../../components/primitives/Heading';
-import Button from '../../components/primitives/Button';
-import Link from '../../components/primitives/Link';
-import Text from '../../components/primitives/Text';
-import Input from '../../components/primitives/Input';
-
-<form>
-  <Heading mb={4}>Login</Heading>
-  <Text as="label" display="block" mb={3}>
-    <Box mb={2}>Username</Box>
-    <Input type="text" />
-  </Text>
-  <Text as="label" display="block" mb={4}>
-    <Box mb={2}>Password</Box>
-    <Input type="password" />
-  </Text>
-  <Box mb={4}>
-    <Link href="#">Forgot your password?</Link>
-  </Box>
-  <Button>Log in</Button>
-</form>;
+```js noeditor
+import LoginForm from './final/LoginForm';
+<LoginForm/>
 ```
 
 ### The task
 
-1. Create a `LoginPage` component.
+1. Create a `LoginForm` component.
+2. Use only primitives for layout, whitespace (`Box`, `Flex`, `Grid`, and `Stack`) and text (`Text`, `Heading`, `Button`, and `Link`).
+3. The layout should be responsive and the labels should be placed above input fields on a narrow screen.
+
+**Hint:** Use arrays for responsiveness, like this: `gridTemplateColumns={['1fr', '1fr auto']}`.
 
-2. Use only primitives for layout, whitespace (`Box`, `Flex`, `Grid`, and `Stack`) and text (`Text`, `Heading` and `Link`).
 
 <details>
  <summary>Solution</summary>
 
-```js {"file": "solutions/5.2.js", "static": true}
+```js {"file": "./final/LoginForm.js", "static": true}
 ```
 
 </details>

src/exercises/5-Patterns/final/LoginForm.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+	Heading,
+	Text,
+	Box,
+	Flex,
+	Grid,
+	Input,
+	Link,
+	Button,
+	Stack,
+} from '../../../components';
+
+export default () => {
+	return (
+		<Stack as="form" gridGap={[4,5]} padding={[4,5]} bg="muted">
+			<Heading size="lg">Login please</Heading>
+			<Grid gridGap={4} gridTemplateColumns={["1fr", "auto 1fr"]} alignItems="center">
+				<Text as="label" htmlFor="username">
+					Username
+				</Text>
+				<Input
+					type="email"
+					name="username"
+					id="username"
+					placeholder="[email protected]"
+					autoFocus
+				/>
+			</Grid>
+			<Grid gridGap={4} gridTemplateColumns={["1fr", "auto 1fr"]} alignItems="center">
+				<Text as="label" htmlFor="password">
+					Password
+				</Text>
+				<Input type="password" name="password" id="password" />
+			</Grid>
+			<Flex flexDirection={["column", "row"]}>
+				<Box mr={[0, 4]}>
+					<Button type="submit" variant="primary">
+						Log in
+					</Button>
+				</Box>
+				<Box ml={[0, "auto"]}>
+					<Link href="#">Forgot your password?</Link>
+				</Box>
+			</Flex>
+		</Stack>
+	);
+};

styleguide.config.js

@@ -23,6 +23,15 @@ const config = {
 	pagePerSection: true,
 	exampleMode: 'expand',
 	usageMode: 'expand',
+	compilerConfig: {
+		transforms: {
+			// Support for styled-components
+			dangerousTaggedTemplateString: true,
+
+			// "Support" for `import` syntax
+			moduleImport: false,
+		},
+	},
 	webpackConfig,
 	updateExample(props, exampleFilePath) {
 		const { settings, lang } = props;