Update README and convert Alert, Button to CSF (gravitational#5)

* Convert Alert, Button to CSF
* Prettify and replace div wrappers w/ fragments
* Update README to include prettify setup

Part of: gravitational/webapps#3

web/README.md

@@ -1,4 +1,3 @@
-
 # Gravitational Web Applications and Packages
 
 This mono-repository contains the source code for the
@@ -12,7 +11,25 @@ the [packages directory](https://github.com/gravitational/webapps/tree/master/pa
 
 You can make production builds locally or you can use Docker to do that.
 
+### Setup Prettier on VSCode
+
+1. Install plugin: https://github.com/prettier/prettier-vscode
+1. Go to Command Palette: CMD/CTRL + SHIFT + P
+1. Type `open settings`
+1. Select `Open Settings (JSON)`
+1. Include the below snippet and save:
+
+```
+// Set the default
+"editor.formatOnSave": false,
+// Enable per-language
+"[javascript]": {
+    "editor.formatOnSave": true
+}
+```
+
 ### Local Build
+
 Make sure that [you have yarn installed](https://yarnpkg.com/lang/en/docs/install/#debian-stable)
 on your system since this monorepo uses the yarn package manager.
 
@@ -39,16 +56,19 @@ The resulting output will be in `/packages/teleport/dist/` and `/packages/gravit
 ### Docker Build
 
 To build Teleport Web UI
+
 ```
 $ make teleport
 ```
 
 To build Gravity Web UI
+
 ```
 $ make gravity
 ```
 
 ## Development
+
 To avoid having to install a dedicated Teleport or Gravity cluster,
 you can use a local development server which can proxy network requests
 to an existing cluster.
@@ -62,6 +82,7 @@ $ yarn start-teleport --target=https://example.com:3080/web
 ```
 
 or to start your local Gravity development server
+
 ```
 $ yarn start-gravity --target=https://example.com:3080/web
 ```
@@ -70,18 +91,20 @@ This service will serve your local javascript files and proxy network
 requests to the given target.
 
 > Keep in mind that you have to use a local user because social
-logins (google/github) are not supported by development server.
+> logins (google/github) are not supported by development server.
 
 ### Unit-Tests
 
 We use [jest](https://jestjs.io/) as our testing framework.
 
 To run all jest unit-tests:
+
 ```
 $ yarn run test
 ```
 
 To run jest in watch-mode
+
 ```
 $ yarn run tdd
 ```
@@ -93,6 +116,7 @@ It allows us to browse our component library, view the different states of
 each component, and interactively develop and test components.
 
 To start a storybook:
+
 ```
 $ yarn run storybook
 ```

web/packages/design/src/Alert/Alert.story.js

@@ -0,0 +1,35 @@
+/*
+Copyright 2019 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Alert from './index';
+
+export default {
+  title: 'Design/Alert',
+  component: Alert,
+};
+
+export const Default = () => <Alert>Default is danger</Alert>;
+
+export const Danger = () => <Alert kind="danger">Some error message</Alert>;
+
+export const Warning = () => <Alert kind="warning">Some warning message</Alert>;
+
+export const Informational = () => (
+  <Alert kind="info">Some informational message</Alert>
+);
+
+export const Success = () => <Alert kind="success">Some success message</Alert>;

web/packages/design/src/Button/Button.story.js

@@ -0,0 +1,66 @@
+/*
+Copyright 2019 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Button, {
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonWarning,
+} from './Button';
+
+export default {
+  title: 'Design/Button',
+};
+
+export const Basics = () => (
+  <>
+    <div>
+      <ButtonPrimary mr={3}>Primary</ButtonPrimary>
+      <ButtonSecondary mr={3}>Secondary</ButtonSecondary>
+      <ButtonWarning>Warning</ButtonWarning>
+    </div>
+    <div>
+      <Button size="large" mr={3} mt={5}>
+        Large
+      </Button>
+      <Button size="medium" mr={3}>
+        Medium
+      </Button>
+      <Button size="small">Small</Button>
+    </div>
+  </>
+);
+
+export const Block = () => (
+  <>
+    <Button block mb={3}>
+      Primary Block Button
+    </Button>
+    <ButtonSecondary block mb={3}>
+      Secondary Block Button
+    </ButtonSecondary>
+    <ButtonWarning block>Warning Block Button</ButtonWarning>
+  </>
+);
+
+export const States = () => (
+  <>
+    <Button mr={3} disabled>
+      Disabled
+    </Button>
+    <Button autoFocus>Focused</Button>
+  </>
+);

web/packages/design/src/Button/index.js

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Button, {  ButtonPrimary, ButtonWarning, ButtonSecondary } from './Button';
+import Button, {
+  ButtonPrimary,
+  ButtonWarning,
+  ButtonSecondary,
+} from './Button';
 export default Button;
-export {  ButtonPrimary, ButtonWarning, ButtonSecondary }
+export { ButtonPrimary, ButtonWarning, ButtonSecondary };

web/packages/design/src/ButtonIcon/ButtonIcon.story.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2019 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import ButtonIcon from './ButtonIcon';
+import { AddUsers, Trash, Ellipsis } from './../Icon';
+import Flex from './../Flex';
+
+export default {
+  title: 'Design/Button',
+};
+
+export const Icons = () => (
+  <>
+    <Flex mb={3}>
+      <ButtonIcon size={2}>
+        <AddUsers />
+      </ButtonIcon>
+      <ButtonIcon size={2}>
+        <Ellipsis />
+      </ButtonIcon>
+      <ButtonIcon size={2}>
+        <Trash />
+      </ButtonIcon>
+    </Flex>
+    <Flex mb={4}>
+      <ButtonIcon size={1}>
+        <AddUsers />
+      </ButtonIcon>
+      <ButtonIcon size={1}>
+        <Ellipsis />
+      </ButtonIcon>
+      <ButtonIcon size={1}>
+        <Trash />
+      </ButtonIcon>
+    </Flex>
+    <Flex>
+      <ButtonIcon size={0}>
+        <AddUsers />
+      </ButtonIcon>
+      <ButtonIcon size={0}>
+        <Ellipsis />
+      </ButtonIcon>
+      <ButtonIcon size={0}>
+        <Trash />
+      </ButtonIcon>
+    </Flex>
+  </>
+);

web/packages/design/src/ButtonIcon/index.js

@@ -15,4 +15,4 @@ limitations under the License.
 */
 
 import ButtonIcon from './ButtonIcon';
-export default ButtonIcon;
+export default ButtonIcon;