Feat/button component

src/components/ActionList/ActionList.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Menu, Popup, Icon } from 'semantic-ui-react'
+import { ActionListButton } from '../ActionListButton/ActionListButton'
+import classNames from 'classnames'
+
+const ActionList = props => {
+  const { disabled, actionmenulist } = props
+
+  return (
+    <Popup
+      className={classNames('action-list', { disabled })}
+      on='click'
+      hoverable
+      closeOnTriggerMouseLeave
+      closeOnPortalMouseLeave
+      position='bottom left'
+      style={{ padding: 0 }}
+      trigger={
+        <span>
+          <ActionListButton {...props} />
+        </span>
+      }
+    >
+      {!disabled &&
+        actionmenulist != null &&
+        actionmenulist.length > 0 && (
+        <Menu vertical>
+          {actionmenulist.map(el => (
+            <Menu.Item key={el.id} name={el.Name}>
+              <Icon className={el.icon} />
+              {el.Name}
+            </Menu.Item>
+          ))}
+        </Menu>
+      )}
+    </Popup>
+  )
+}
+
+export default ActionList

src/components/ActionListButton/ActionListButton.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import '../../styles/components/buttons.css'
+import { Button } from 'semantic-ui-react'
+
+const GearDownIcon = () => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='-171 262.2 390.6 268.8'
+    >
+      <path d='M96.9,381.7c-0.4-3.8-4.8-6.6-8.6-6.6c-12.3,0-23.2-7.2-27.8-18.4c-4.7-11.5-1.7-24.8,7.5-33.2 c2.9-2.6,3.2-7.1,0.8-10.1c-6.3-8-13.5-15.2-21.3-21.5c-3.1-2.5-7.6-2.1-10.2,0.8c-8,8.9-22.4,12.2-33.5,7.5 c-11.6-4.9-18.9-16.6-18.2-29.2c0.2-4-2.7-7.4-6.6-7.8c-10-1.2-20.2-1.2-30.2-0.1c-3.9,0.4-6.8,3.8-6.7,7.7 c0.4,12.5-6.9,24-18.4,28.7c-11,4.5-25.3,1.2-33.3-7.6c-2.6-2.9-7.1-3.3-10.1-0.9c-8.1,6.3-15.4,13.6-21.7,21.5 c-2.5,3.1-2.1,7.6,0.8,10.2c9.4,8.5,12.4,21.9,7.5,33.5c-4.6,11-16.1,18.2-29.2,18.2c-4.3-0.1-7.3,2.7-7.8,6.6 c-1.2,10.1-1.2,20.4-0.1,30.6c0.4,3.8,5,6.6,8.8,6.6c11.7-0.3,22.9,6.9,27.6,18.4c4.7,11.5,1.7,24.8-7.5,33.2 c-2.9,2.6-3.2,7.1-0.8,10.1c6.2,8,13.4,15.2,21.3,21.5c3.1,2.5,7.6,2.1,10.2-0.8c8-8.9,22.4-12.2,33.5-7.5 c11.6,4.9,18.9,16.6,18.2,29.2c-0.2,4,2.7,7.4,6.6,7.9c5.1,0.6,10.3,0.9,15.5,0.9c4.9,0,9.8-0.3,14.8-0.8c3.9-0.4,6.8-3.8,6.7-7.7 c-0.5-12.5,6.9-24,18.4-28.7c11.1-4.5,25.3-1.2,33.3,7.6c2.7,2.9,7,3.2,10.1,0.8c8-6.3,15.3-13.5,21.7-21.5 c2.5-3.1,2.1-7.6-0.8-10.2C58,462.1,55,448.6,59.8,437c4.6-10.9,15.6-18.2,27.5-18.2l1.7,0c3.9,0.3,7.4-2.7,7.9-6.6 C98,402.2,98.1,391.9,96.9,381.7z M-36.4,441.7c-24.7,0-44.8-20.1-44.8-44.8c0-24.7,20.1-44.8,44.8-44.8 c24.7,0,44.8,20.1,44.8,44.8C8.4,421.6-11.7,441.7-36.4,441.7z' />
+      <polygon points='207.7,372.9 168.3,412.3 129,372.9 117,384.9 168.3,436.2 219.6,384.9' />
+    </svg>
+  )
+}
+
+export const ActionListButton = props => {
+  return (
+    <Button {...props}>
+      &nbsp;
+      <GearDownIcon />
+    </Button>
+  )
+}

src/components/Buttons/Buttons.examples.md

@@ -0,0 +1,151 @@
+#### Primary Button
+```js
+Button = require('semantic-ui-react').Button;
+Icon = require('semantic-ui-react').Icon;
+
+<div>
+    <Button primary>Save</Button>
+  	<Button primary active>Save</Button>
+  	<Button primary loading></Button>
+  	<Button primary disabled>Save</Button>
+  	<Button primary>
+        <Icon className='check circle outline' />
+        Save
+    </Button>
+</div>
+```
+
+#### Secondary Button
+```js
+Button = require('semantic-ui-react').Button;
+Icon = require('semantic-ui-react').Icon;
+
+<div>
+    <Button secondary>Cancel</Button>
+  	<Button secondary active>Cancel</Button>
+  	<Button secondary loading></Button>
+  	<Button secondary disabled>Cancel</Button>
+  	<Button negative>
+        <Icon className='check circle outline' />
+        Cancel
+    </Button>
+</div>
+```
+
+#### Default Button
+```js
+Button = require('semantic-ui-react').Button;
+Icon = require('semantic-ui-react').Icon;
+
+<div>
+    <Button>Test Connection</Button>
+  	<Button active>Test Connection</Button>
+  	<Button loading></Button>
+  	<Button disabled>Test Connection</Button>
+  	<Button>
+        <Icon className='check circle outline' />
+         Test Connection
+    </Button>
+</div>
+```
+
+#### Default Button with icon
+```js
+Button = require('semantic-ui-react').Button;
+Icon = require('semantic-ui-react').Icon;
+
+<div>
+    <Button>
+        <i className='icon_documents_alt' /> 
+        Copy to Clipboard
+    </Button>
+    <Button active>
+        <i className='icon_documents_alt' /> 
+        Copy to clipboard
+    </Button>
+    <Button loading>
+        <i className='icon_documents_alt' /> 
+    </Button>
+    <Button disabled >
+        <i className='icon_documents_alt' /> 
+        Copy to clipboard
+    </Button>
+</div>
+```
+
+#### Text Button with Icon
+```js
+Button = require('semantic-ui-react').Button;
+Icon = require('semantic-ui-react').Icon;
+
+<div>
+	<Button className='textButton'>Button</Button>
+	<Button className='textButton active'>Button</Button>
+	<Button loading className='textButton'>Button</Button>
+	<Button disabled className='textButton'>Button</Button>
+	<Button className='textButton'>
+      <Icon className='check circle outline' />
+      Button
+  </Button>
+</div>
+```
+
+#### Icon Button with Text
+```js
+Button = require('semantic-ui-react').Button;
+Icon = require('semantic-ui-react').Icon;
+
+<div>
+    <Button className='iconButton'>
+        <Icon className='save outline' size='large' />
+        Save
+    </Button>
+    <Button className='iconButton active'>
+        <Icon className='save outline' size='large' />
+        Save
+    </Button>
+    <Button disabled className='iconButton'>
+        <Icon className='save outline' size='large' />
+        Save
+    </Button>
+</div>
+```
+
+#### Icon Button
+```js
+Button = require('semantic-ui-react').Button;
+Icon = require('semantic-ui-react').Icon;
+
+<div>
+    <Button className='iconButton'>
+      <Icon className='close' size='large' />
+    </Button>
+    <Button className='iconButton active'>
+      <Icon className='close' size='large' />
+    </Button>
+    <Button disabled className='iconButton'>
+      <Icon className='close' size='large' />
+    </Button>
+</div>
+```
+
+### Action Menu
+```js
+const Button = require('semantic-ui-react').Button;
+const menuList =[
+  {'id':1,'Name':'Export', 'icon':'ei icon_cog'},
+  {'id':2,'Name':'Delete', 'icon':'ei icon_info'},
+  {'id':3,'Name':'Copy', 'icon':'save outline'},
+  {'id':4,'Name':'Settings', 'icon':'ei icon_cog'}
+]
+
+initialState = {
+  actionmenulist:menuList
+};
+
+<div>
+    <ActionList className='actionButton' actionmenulist={state.actionmenulist} />
+    <ActionList className='actionButton active' actionmenulist={state.actionmenulist} />
+    <ActionList disabled className='actionButton' actionmenulist={state.actionmenulist} />
+</div>
+```

src/components/Buttons/Buttons.jsx

@@ -0,0 +1 @@
+import '../../styles/components/buttons.css'