0.0.10

* Adding prettySelector for customizeing the pretty variable via SCSS
* Updating docs
* Adding default value to props table
* Adjusting table CSS

Author: atomicpages

docs/src/components/ListProps.js

@@ -31,6 +31,7 @@ type Prop = {
             properties: Array<string>
         }
     },
+    defaultValue: string,
     description: string
 };
 
@@ -101,12 +102,13 @@ export default function ListProps() {
 
                     return (
                         <CollapseContainer collapsed={index !== 0} key={index} title={key}>
-                            <table>
+                            <table className="table table-striped table-hover table-sm">
                                 <thead>
                                     <tr>
                                         <th>Name</th>
                                         <th>Type</th>
                                         <th>Required</th>
+                                        <th width="20%">Default Value</th>
                                         <th>Description</th>
                                     </tr>
                                 </thead>
@@ -117,9 +119,12 @@ export default function ListProps() {
                                                 <tr key={key}>
                                                     <td>{key}</td>
                                                     <td title={value.flowType.raw}>
-                                                        <span className={classNames(value.flowType.raw ? 'has-tooltip' : null)}>{value.flowType.name}</span>
+                                                        <span className={classNames(value.flowType.raw ? 'has-tooltip' : null)}>
+                                                            {value.flowType.name === 'signature' ? value.flowType.type : value.flowType.name}
+                                                        </span>
                                                     </td>
                                                     <td>{value.required.toString()}</td>
+                                                    <td>{value.defaultValue  ? value.defaultValue.value : null}</td>
                                                     <td dangerouslySetInnerHTML={{__html: markdown.toHTML(value.description)}}></td>
                                                 </tr>
                                             );

docs/src/data/props.json

@@ -137,6 +137,17 @@
                 },
                 "description": "Additional class selectors to pass to the `pretty` element."
             },
+            "prettySelector": {
+                "required": false,
+                "flowType": {
+                    "name": "string"
+                },
+                "defaultValue": {
+                    "computed": false,
+                    "value": "pretty"
+                },
+                "description": "Set this to your custom value for `$pretty--class-name`. If you have not changed this in `.scss` then _do not modify this prop_."
+            },
             "value": {
                 "required": false,
                 "flowType": {
@@ -405,6 +416,17 @@
                 },
                 "description": "Additional class selectors to pass to the `pretty` element."
             },
+            "prettySelector": {
+                "required": false,
+                "flowType": {
+                    "name": "string"
+                },
+                "defaultValue": {
+                    "computed": false,
+                    "value": "pretty"
+                },
+                "description": "Set this to your custom value for `$pretty--class-name`. If you have not changed this in `.scss` then _do not modify this prop_."
+            },
             "value": {
                 "required": false,
                 "flowType": {
@@ -698,6 +720,17 @@
                 },
                 "description": "Additional class selectors to pass to the `pretty` element."
             },
+            "prettySelector": {
+                "required": false,
+                "flowType": {
+                    "name": "string"
+                },
+                "defaultValue": {
+                    "computed": false,
+                    "value": "pretty"
+                },
+                "description": "Set this to your custom value for `$pretty--class-name`. If you have not changed this in `.scss` then _do not modify this prop_."
+            },
             "value": {
                 "required": false,
                 "flowType": {

docs/src/index.js

@@ -80,7 +80,7 @@ function App() {
                 <div className="col-md-8 mx-auto">
                     <section className="section" id="installation"><Installation /></section>
                 </div>
-                <div className="col-md-8 mx-auto">
+                <div className="col-md-12 mx-auto">
                     <section className="section" id="list-props"><ListProps /></section>
                 </div>
                 <div className="col-md-8 mx-auto">

docs/src/styles/app.scss

@@ -324,3 +324,6 @@ table * { cursor: default; }
     border-bottom: 1px dotted black;
     cursor: help;
 }
+.table {
+    th { border-top: 0 none; }
+}

src/components/Input.js

@@ -62,6 +62,12 @@ export type InputProps = {
      */
     className?: string,
 
+    /**
+     * Set this to your custom value for `$pretty--class-name`. If you have not changed
+     * this in `.scss` then _do not modify this prop_.
+     */
+    prettySelector?: string,
+
     /**
      * Specify a value for the underlying `input` element.
      */
@@ -186,7 +192,7 @@ function Input(props: InputProps) {
         <div
             data-testid="pcr-wrapper"
             className={classNames(
-                'pretty',
+                props.prettySelector,
                 animation ? PREFIX + animation : null,
                 className,
                 shape ? PREFIX + shape : null,
@@ -211,4 +217,6 @@ function Input(props: InputProps) {
     );
 }
 
+Input.defaultProps = { prettySelector: 'pretty' };
+
 export default Input;