end docs

paljs · Feb 24, 2019 · 147a638 · 147a638
1 parent 3237fac
commit 147a638
Show file tree

Hide file tree

Showing 52 changed files with 1,416 additions and 33 deletions.
diff --git a/docs/src/Layouts/Header.js b/docs/src/Layouts/Header.js
@@ -5,6 +5,9 @@ import { breakpointDown } from 'oah-ui/theme';
 
 const SidebarIcon = styled(Actions)`
   display: none;
+  div {
+    height: auto;
+  }
   ${breakpointDown('md')`
     display: flex;
   `}
@@ -14,8 +17,10 @@ const HeaderStyle = styled.div`
   display: flex;
   width: 100%;
   justify-content: space-between;
+  align-items: center;
   .left {
     display: flex;
+    align-items: center;
     width: 100%;
   }
   ${breakpointDown('sm')`
@@ -60,7 +65,7 @@ export default function Header(props) {
             size="MD"
             actions={[
               {
-                content: <h3>OAH UI</h3>
+                content: <h3 style={{ margin: 0 }}>OAH UI</h3>
               },
               {
                 content: (

diff --git a/docs/src/Layouts/menuItem.js b/docs/src/Layouts/menuItem.js
@@ -159,11 +159,11 @@ export default [
       },
       {
         title: 'Badge',
-        link: '/components/progress'
+        link: '/components/badge'
       },
       {
         title: 'Chat UI',
-        link: '/components/Chat'
+        link: '/components/chat'
       }
     ]
   },

diff --git a/docs/src/mdx/alert/Accent.js b/docs/src/mdx/alert/Accent.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card, CardBody, Alert } from 'oah-ui';
+
+function Accent() {
+  return (
+    <Card>
+      <header>Alert Accent</header>
+      <CardBody>
+        <Alert accent="Danger" status="Success">
+          You have been successfully authenticated!
+        </Alert>
+        <Alert accent="Primary" status="Danger">
+          You have been successfully authenticated!
+        </Alert>
+        <Alert accent="Info" status="Primary">
+          You have been successfully authenticated!
+        </Alert>
+        <Alert accent="Warning" status="Info">
+          You have been successfully authenticated!
+        </Alert>
+        <Alert accent="Danger" status="Warning">
+          You have been successfully authenticated!
+        </Alert>
+        <Alert accent="Disabled" status="Active">
+          You have been successfully authenticated!
+        </Alert>
+        <Alert accent="Success" status="Disabled">
+          You have been successfully authenticated!
+        </Alert>
+      </CardBody>
+    </Card>
+  );
+}
+
+export default Accent;
diff --git a/docs/src/mdx/alert/ApiArray.js b/docs/src/mdx/alert/ApiArray.js
@@ -0,0 +1,35 @@
+export const alertProps = [
+  {
+    name: 'size',
+    type: 'string',
+    description: 'Size of the component, XXS | XS | SM | MD | LG | XL | XXL'
+  },
+  {
+    name: 'status',
+    type: 'string',
+    description:
+      'Field status (adds specific styles): Info, Success, Warning, Danger, Primary, Active, Disabled'
+  },
+  {
+    name: 'accent',
+    type: 'string',
+    description:
+      'Alert accent (color of the top border): Info, Success, Warning, Danger, Primary, Active, Disabled'
+  },
+  {
+    name: 'outline',
+    type: 'string',
+    description:
+      'Alert outline (color of the border): Info, Success, Warning, Danger, Primary, Active, Disabled'
+  },
+  {
+    name: 'closable',
+    type: 'boolean',
+    description: 'Shows close icon'
+  },
+  {
+    name: 'onClose()',
+    type: 'function',
+    description: 'Callback when close button clicked'
+  }
+];
diff --git a/docs/src/mdx/alert/Outline.js b/docs/src/mdx/alert/Outline.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Card, CardBody, Alert } from 'oah-ui';
+
+function Outline() {
+  return (
+    <Card>
+      <header>Alert Outline</header>
+      <CardBody>
+        {[
+          'Info',
+          'Success',
+          'Danger',
+          'Primary',
+          'Warning',
+          'Disabled',
+          'Active'
+        ].map(key => (
+          <Alert key={key} closable outline={key}>
+            You have been successfully authenticated!
+          </Alert>
+        ))}
+      </CardBody>
+    </Card>
+  );
+}
+
+export default Outline;
diff --git a/docs/src/mdx/alert/Size.js b/docs/src/mdx/alert/Size.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Card, CardBody, Alert } from 'oah-ui';
+
+function Accent() {
+  return (
+    <Card>
+      <header>Alert Size</header>
+      <CardBody>
+        <Alert status="Danger" size="XXS">
+          You have been successfully authenticated!
+        </Alert>
+        <Alert status="Primary" size="SM">
+          You have been successfully authenticated!
+        </Alert>
+
+        <Alert status="Success" size="XXL">
+          You have been successfully authenticated!
+        </Alert>
+      </CardBody>
+    </Card>
+  );
+}
+
+export default Accent;
diff --git a/docs/src/mdx/alert/Status.js b/docs/src/mdx/alert/Status.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Card, CardBody, Alert } from 'oah-ui';
+
+function Status() {
+  return (
+    <Card>
+      <header>Alert Status</header>
+      <CardBody>
+        {[
+          'Info',
+          'Success',
+          'Danger',
+          'Primary',
+          'Warning',
+          'Disabled',
+          'Active'
+        ].map(key => (
+          <Alert key={key} closable status={key}>
+            You have been successfully authenticated!
+          </Alert>
+        ))}
+      </CardBody>
+    </Card>
+  );
+}
+
+export default Status;
diff --git a/docs/src/mdx/alert/overview.mdx b/docs/src/mdx/alert/overview.mdx
@@ -0,0 +1,25 @@
+## Alert
+
+Colored alerts could be simply configured by providing a `status` property:
+
+[Status](demo://Status.js)
+
+#Usage
+
+```js
+import { Alert } from 'oah-ui';
+//or
+import Alert from 'oah-ui/Alert';
+```
+
+It is also possible to assign an `accent` property for a slight alert highlight
+
+[Accent](demo://Accent.js)
+
+And `outline` property:
+
+[Outline](demo://Outline.js)
+
+`size` property
+
+[Size](demo://Size.js)
diff --git a/docs/src/mdx/badge/ApiArray.js b/docs/src/mdx/badge/ApiArray.js
@@ -0,0 +1,19 @@
+export const badgeProps = [
+  {
+    name: 'position',
+    type: 'string',
+    description:
+      'Can be set to one of predefined positions: topRight, topLeft, bottomRight, bottomLeft, topStart, topEnd, bottomStart, bottomEnd'
+  },
+  {
+    name: 'status',
+    type: 'string',
+    description:
+      '(adds specific styles): Info, Success, Danger, Primary, Warning.'
+  },
+  {
+    name: 'children',
+    type: 'string',
+    description: 'component content'
+  }
+];
diff --git a/docs/src/mdx/badge/Example.js b/docs/src/mdx/badge/Example.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Card, CardBody, Badge } from 'oah-ui';
+
+function Example() {
+  return (
+    <Card>
+      <header style={{ position: 'relative' }}>
+        <Badge status="Success" position="topRight">
+          New
+        </Badge>
+        <Badge status="Danger" position="bottomLeft">
+          +99
+        </Badge>
+      </header>
+      <CardBody>Card body.</CardBody>
+    </Card>
+  );
+}
+
+export default Example;
diff --git a/docs/src/mdx/badge/overview.mdx b/docs/src/mdx/badge/overview.mdx
@@ -0,0 +1,23 @@
+## Badge
+
+Badge is a simple labeling component. It can be used to add additional information to any content or highlight unread items.
+
+Element is absolute positioned, so parent should be [positioned element](https://developer.mozilla.org/en-US/docs/Web/CSS/position). It means parent position should be set to anything except `static`, e.g. `relative`, `absolute`, `fixed`, or `sticky`.
+
+### Usage
+
+```js
+import { Badge } from 'oah-ui';
+//or
+import Badge from 'oah-ui/Badge';
+```
+
+Badge with default position and status(color):
+
+```jsx
+<Badge>badge text</Badge>
+```
+
+For example, badge can be placed into `Card` header:
+
+[Example](demo://Example.js)