Merge pull request #380 from TykTechnologies/combobox-and-other-fixes

rebranding fixes for the Combobox2 component and other fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.3.4",
+  "version": "4.3.5",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {
@@ -31,7 +31,7 @@
   },
   "homepage": "https://tyktechnologies.github.io/tyk-ui-styleguide/",
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "nyc": {
     "all": true,

src/components/Accordion/index.js

@@ -8,7 +8,7 @@ import AccordionContext from './js/AccordionContext';
 function Accordion({
   className,
   children,
-  usearrowastrigger,
+  usearrowastrigger = false,
   arrow = { position: 'right', expandToContent: false },
 }) {
   const classes = [
@@ -45,10 +45,6 @@ Accordion.propTypes = {
   }),
 };
 
-Accordion.defaultProps = {
-  usearrowastrigger: false,
-};
-
 // For Readme.md : Start
 Accordion.Item = AccordionItem;
 Accordion.Item.Header = AccordionItemHeader;

src/components/Accordion/js/AccordionItem.js

@@ -7,12 +7,15 @@ import AccordionContext from './AccordionContext';
 import AccordionItemContext from './AccordionItemContext';
 import ItemTrigger from './AccordionItemTrigger';
 
-function AccordionItem({
-  collapsed: collapsedProp,
-  children,
-  className,
-  disabled,
-}, ref) {
+const AccordionItem = forwardRef((
+  {
+    collapsed: collapsedProp = false,
+    children,
+    className,
+    disabled,
+  },
+  ref,
+) => {
   const { arrow } = useContext(AccordionContext);
   const [collapsed, setCollapsed] = useState(collapsedProp);
 
@@ -49,7 +52,7 @@ function AccordionItem({
       </AccordionItemContext.Provider>
     </div>
   );
-}
+});
 
 AccordionItem.propTypes = {
   children: PropTypes.oneOfType([
@@ -63,8 +66,4 @@ AccordionItem.propTypes = {
   disabled: PropTypes.bool,
 };
 
-AccordionItem.defaultProps = {
-  collapsed: false,
-};
-
-export default forwardRef(AccordionItem);
+export default AccordionItem;

src/components/Button/index.js

@@ -6,7 +6,7 @@ import Icon from '../Icon';
 /**
  * Button component.
  */
-function Button(props, ref) {
+const Button = forwardRef((props, ref) => {
   const {
     customButton,
     children,
@@ -22,8 +22,8 @@ function Button(props, ref) {
     onClick,
     noStyle,
     size,
-    theme,
-    type,
+    theme = '',
+    type = 'button',
     ...rest
   } = props;
 
@@ -115,7 +115,7 @@ function Button(props, ref) {
   return (
     getButtonType()
   );
-}
+});
 
 Button.propTypes = {
   /**
@@ -169,9 +169,4 @@ Button.propTypes = {
   size: PropTypes.string,
 };
 
-Button.defaultProps = {
-  theme: '',
-  type: 'button',
-};
-
-export default forwardRef(Button);
+export default Button;

src/components/ButtonGroup/index.js

@@ -1,14 +1,12 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-function ButtonGroup({ className, children, label }, ref) {
-  return (
-    <div ref={ref} className={`tyk-button-group__wrapper ${className}`}>
-      {Boolean(label) && <label>{label}</label>}
-      <div className="tyk-button-group">{children}</div>
-    </div>
-  );
-}
+const ButtonGroup = forwardRef(({ className, children, label }, ref) => (
+  <div ref={ref} className={`tyk-button-group__wrapper ${className}`}>
+    {Boolean(label) && <label>{label}</label>}
+    <div className="tyk-button-group">{children}</div>
+  </div>
+));
 
 ButtonGroup.propTypes = {
   children: PropTypes.oneOfType([
@@ -17,8 +15,8 @@ ButtonGroup.propTypes = {
     PropTypes.element,
     PropTypes.string,
   ]),
-  className: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  label: PropTypes.string,
 };
 
-export default forwardRef(ButtonGroup);
+export default ButtonGroup;

src/components/Card/CardSummary.js

@@ -13,7 +13,10 @@ function CardSummary({
 }
 
 CardSummary.propTypes = {
-  maxLines: PropTypes.number,
+  maxLines: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   children: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.node,

src/components/Confirm/Readme.md

@@ -1,7 +1,7 @@
 ### Confirm before console
 ```js
 import Button from '../Button';
-<Confirm 
+<Confirm
   title="Console log"
   description="Are u sure u want to console log?"
 >

src/components/Confirm/index.js

@@ -5,7 +5,7 @@ import Button from '../Button';
 import Modal from '../Modal';
 
 /**
- * Confirm component can be used to open a dialog (<Modal />) before a specific action
+ * Confirm component can be used to open a dialog (Modal) before a specific action
  */
 function Confirm(props) {
   const {

src/components/FixedWrapper/index.js

@@ -8,7 +8,7 @@ import debounce from '../../utils/debounce';
  * even if the scroll position changes
  * i.e: The top navigation bar of a page sits within FixedWrapper component
  */
-function FixedWrapper({ children, className, showShadow }) {
+function FixedWrapper({ children, className = '', showShadow }) {
   const fixedWrapperRef = useRef(null);
 
   const attachShadow = useCallback(() => {
@@ -58,8 +58,4 @@ FixedWrapper.propTypes = {
   showShadow: PropTypes.bool,
 };
 
-FixedWrapper.defaultProps = {
-  className: '',
-};
-
 export default FixedWrapper;

src/components/FloatingContainer/index.js

@@ -11,7 +11,7 @@ const VIEWPORT_INITIAL_PADDING = 5;
  * It displays a container relative to another element.
  * Meant to be used for dropdowns, tooltips, and other similar components.
  */
-function FloatingContainer({
+const FloatingContainer = forwardRef(({
   element,
   size = 'auto',
   forceDisplay = 'auto',
@@ -21,7 +21,7 @@ function FloatingContainer({
   className,
   children,
   infiniteScrollerConfig,
-}, ref) {
+}, ref) => {
   const localRef = useRef(null);
   const floatingContainerRef = ref || localRef;
   const contentWrapperRef = useRef(null);
@@ -149,7 +149,7 @@ function FloatingContainer({
     </div>,
     document.querySelector('body'),
   );
-}
+});
 
 FloatingContainer.propTypes = {
   /** A DOM element that the floating container will be displayed relative to. */
@@ -187,13 +187,14 @@ FloatingContainer.propTypes = {
    * If there is space on both sides of the axis preffer this side.
    */
   preferredPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  children: PropTypes.node,
   /**
    * Configuration object that will be passed to the infinite scroller component.
    */
   infiniteScrollerConfig: PropTypes.instanceOf(Object),
 };
 
-export default forwardRef(FloatingContainer);
+export default FloatingContainer;
 
 function getDisplayForVertical({
   preferredPosition, hasTopSpace, hasBottomSpace, topSpace, bottomSpace,

src/components/InfiniteScroller/index.js

@@ -9,7 +9,7 @@ import Loader from '../Loader';
 
 function InfiniteScroller({
   children,
-  hasMore,
+  hasMore = true,
   initialLoad,
   loadMore,
   pageNumber,
@@ -117,8 +117,4 @@ InfiniteScroller.propTypes = {
   refChild: PropTypes.instanceOf(Object),
 };
 
-InfiniteScroller.defaultProps = {
-  hasMore: true,
-};
-
 export default InfiniteScroller;

src/components/List/index.js

@@ -8,8 +8,8 @@ function List(props) {
     children,
     label,
     labelwidth,
-    theme,
-    style,
+    theme = 'secondary',
+    style = {},
   } = props;
 
   const getCssClasses = () => {
@@ -70,11 +70,6 @@ List.propTypes = {
   style: PropTypes.instanceOf(Object),
 };
 
-List.defaultProps = {
-  theme: 'secondary',
-  style: {},
-};
-
 List.Item = ListItem;
 
 export default List;

src/components/List/js/ListItem.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 function ListItem(props) {
   const {
-    className,
+    className = '',
     children,
     selected,
   } = props;
@@ -26,8 +26,4 @@ ListItem.propTypes = {
   selected: PropTypes.bool,
 };
 
-ListItem.defaultProps = {
-  className: '',
-};
-
 export default ListItem;

src/components/Modal/index.js

@@ -97,7 +97,12 @@ Modal.Header = ({ children }) => {
   );
 };
 Modal.Header.propTypes = {
-  children: PropTypes.element,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
 };
 /* eslint-disable-next-line */
 Modal.Title = ({ children }) => {
@@ -114,6 +119,7 @@ Modal.Title.propTypes = {
 
 Modal.propTypes = {
   children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
     PropTypes.element,
     PropTypes.node,
     PropTypes.string,

src/components/Pill/index.js

@@ -8,7 +8,7 @@ function Pill(props) {
   const {
     children,
     className,
-    theme,
+    theme = 'default',
   } = props;
 
   const getCssClasses = () => {
@@ -41,8 +41,4 @@ Pill.propTypes = {
   theme: PropTypes.string,
 };
 
-Pill.defaultProps = {
-  theme: 'default',
-};
-
 export default Pill;

src/components/RevealPanel/Readme.md

@@ -3,7 +3,7 @@
 ```js
 import { useCallback, useRef, useState } from "react";
 import RevealPanel from "./index";
-<div class='demo' style={{position: "relative"}}>
+<div className='demo' style={{position: "relative"}}>
 e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
 e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers