added readme

Author: errorr404

lib/accordion/index.js

@@ -18,10 +18,10 @@ class Accordion extends React.Component {
   }
 
   componentDidMount() {
-    const { items } = this.props;
+    const { data } = this.props;
     let tempArr = [];
     const arrRandom = [];
-    items.forEach((item) => {
+    data.forEach((item) => {
       let num = Math.random() * 1000000;
       if (arrRandom.includes(num)) {
         while (arrRandom.includes(num) !== false) {
@@ -88,7 +88,7 @@ class Accordion extends React.Component {
                 <div
                   className={classnames(
                     theme.heading,
-                    { [theme.color]: item.show },
+                    { [theme.headerActive]: item.show },
                     headerClassName,
                   )}
                   onClick={() => this.toggle(item.key, item.show)}
@@ -107,10 +107,9 @@ class Accordion extends React.Component {
                   className={classnames(
                     { [theme.hideContent]: !item.show },
                     theme.content,
-                    contentClassName,
                   )}
                 >
-                  <p className={classnames(theme.contentText)}>
+                  <p className={classnames(theme.contentText, contentClassName)}>
                     {item[contentKey]}
                   </p>
                 </div>
@@ -138,18 +137,26 @@ class Accordion extends React.Component {
 }
 
 Accordion.propTypes = {
-  items: PropTypes.oneOfType([PropTypes.array]).isRequired,
+  data: PropTypes.oneOfType([PropTypes.array]).isRequired,
   headerKey: PropTypes.string,
   contentKey: PropTypes.string,
   allowMultipleExpanded: PropTypes.string,
+  className: PropTypes.string,
+  headerClassName: PropTypes.string,
+  contentClassName: PropTypes.string,
+  borderless: PropTypes.string,
   theme: PropTypes.shape({
     accordionBody: PropTypes.string,
   }),
 };
 Accordion.defaultProps = {
   theme: defaultTheme,
-  headerKey: 'heading',
+  headerKey: 'header',
   contentKey: 'content',
   allowMultipleExpanded: false,
+  className: '',
+  headerClassName: '',
+  contentClassName: '',
+  borderless: false,
 };
 export default themr('CBAccordion', defaultTheme)(Accordion);

lib/accordion/readMe.md

@@ -0,0 +1,49 @@
+## Accordion
+
+A basic accordion component.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `data` | `Array` |   | An array of contents for accordion. ( `Required` ) |
+| `headerKey` | `String` | `header` | Set a Key for the header of the accordion. | 
+| `contentKey` | `String` | `content` | Set a Key for the content of the accordion.|
+| `borderless` | `Boolean` | `false` | Prop to render borderless accordion |
+| `className` | `String` |   | Set a class to style the Component|
+| `headerClassName` | `String` |  | Set a class for the header.|
+| `contentClassName` | `String` |  | Set a class for the content.|
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `accordionBody` | Class used for the accordion body.|
+| `itemWrapper` | Class used for the upper container of items in the accordion.|
+| `item` | Class used for the items in the accordion.|
+| `heading` | Class used for the header of the accordion.|
+| `content` | Class used for the content of the accordion.|
+| `headerActive` | Class used for the header when the content is visible.|
+| `contentText` | Class used for the text of the content.|
+| `open` | Class used for icon when the item is opened.|
+| `close` | Class used for icon when the item is closed.|
+| `noBorder` | Class used for the items to remove the border.|
+
+
+
+
+### Example Usage
+```
+class Demo extends React.Component {
+    render() {
+         const items = [
+      {header:'t-1',content:'d-1'},
+      {header:'t-2',content:'d-2},
+    ]
+      return (
+        <div>
+            <Accordion data={items} />
+        </div>
+      )
+    }
+  }
+```

lib/accordion/theme.module.scss

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    border: 1px solid #a0a1b1;
+    border: 1px solid $battleship-grey-75;
     border-radius: 3px;
     font-family: Roboto, sans-serif;
 }
@@ -14,7 +14,7 @@
 :local(.heading){
    display: flex;
    flex-flow:row;
-   color: #a0a1b1;
+   color: $battleship-grey-75;
    font-size: 14px;
    font-weight: 700;
    p{
@@ -23,15 +23,15 @@
       padding-left:0;
    }
 }
-:local(.color){
-    color: black;
+:local(.headerActive){
+    color: $original-black;
 }
 :local(.itemWrapper){
-    border-bottom: 1px solid #a0a1b1;
+    border-bottom: 1px solid $battleship-grey-75;
     flex-wrap: wrap;
     cursor: pointer;
     :hover{
-        color: black;
+        color: $original-black;
     }
     &:last-child {
         border-bottom: none;
@@ -41,7 +41,7 @@
     overflow: hidden;
     height: 0;
     transition: height 0.25s ease-out;
-    color: black;
+    color: $original-black;
     cursor: auto;
     p{
         margin-top: 0;