remove defautProps warning

Author: scott-williams-az

packages/unity-react-core/src/components/Article/Article.jsx

@@ -27,7 +27,7 @@ import { Wrapper, EventInfoWrapper } from "./Article.styles";
  * @returns {JSX.Element}
  */
 export const Article = ({
-  type,
+  type = "news",
   articleUrl,
   publicationDate,
   title,
@@ -192,7 +192,11 @@ export const Article = ({
           data-testid="uds-hero"
           className="uds-hero uds-hero-md"
           style={{
-            backgroundImage: `linear-gradient(180deg, #19191900 0%, #191919c9 100%), url(${headerImageUrl})`,
+            // @ts-ignore
+            "--color1": "#19191900",
+            "--color2": "#191919c9",
+            // moved colors to variable because hex color in linear-gradient breaks react
+            "backgroundImage": `linear-gradient(180deg, var(--color1) 0%, var(--color2) 100%), url(${headerImageUrl})`,
           }}
         />
       )}
@@ -369,17 +373,3 @@ Article.propTypes = {
    */
   zoomUrl: PropTypes.string,
 };
-
-Article.defaultProps = {
-  type: "news",
-  authorEmail: undefined,
-  authorPhone: undefined,
-  authorTitle: undefined,
-  breadcrumbs: undefined,
-  calendarUrl: undefined,
-  headerImageUrl: undefined,
-  eventLocation: undefined,
-  eventTime: undefined,
-  registrationUrl: undefined,
-  zoomUrl: undefined,
-};

packages/unity-react-core/src/components/Button/Button.jsx

@@ -24,21 +24,21 @@ const gaDefaultObject = {
  * @returns {JSX.Element}
  */
 export const Button = ({
-  label,
-  cardTitle,
+  label = "",
+  cardTitle = "",
   gaData,
   ariaLabel,
   block,
-  color,
+  color = "gray",
   disabled,
-  element,
+  element = "button",
   href,
   icon,
   innerRef,
   onClick,
-  size,
+  size = "default",
   classes,
-  target,
+  target = "_self",
   ...props
 }) => {
   const btnClasses = classNames("btn", {
@@ -164,20 +164,3 @@ Button.propTypes = {
    */
   target: PropTypes.oneOf(["_blank", "_self", "_top", "_parent"]),
 };
-
-Button.defaultProps = {
-  label: "",
-  cardTitle: "",
-  ariaLabel: undefined,
-  block: undefined,
-  color: "gray",
-  disabled: undefined,
-  element: "button",
-  href: undefined,
-  icon: undefined,
-  innerRef: undefined,
-  onClick: undefined,
-  size: "default",
-  classes: undefined,
-  target: "_self",
-};

packages/unity-react-core/src/components/ButtonIconOnly/ButtonIconOnly.jsx

@@ -22,12 +22,12 @@ const gaDefaultObject = {
  * @returns {JSX.Element}
  */
 export const ButtonIconOnly = ({
-  color,
-  icon,
-  innerRef,
-  onClick,
-  size,
-  cardTitle,
+  color = "gray",
+  icon = undefined,
+  innerRef = undefined,
+  onClick = undefined,
+  size = "small",
+  cardTitle = "",
   className,
   gaData,
   ...rest
@@ -99,12 +99,3 @@ ButtonIconOnly.propTypes = {
   size: PropTypes.oneOf(["large", "small"]),
   className: PropTypes.string,
 };
-
-ButtonIconOnly.defaultProps = {
-  color: "gray",
-  icon: undefined,
-  innerRef: undefined,
-  onClick: undefined,
-  size: "small",
-  cardTitle: "",
-};

packages/unity-react-core/src/components/ButtonTag/ButtonTag.jsx

@@ -24,11 +24,11 @@ const gaDefaultObject = {
  * @returns {JSX.Element}
  */
 export const ButtonTag = ({
-  label,
-  cardTitle,
+  label = "",
+  cardTitle = "",
   gaData,
   ariaLabel,
-  color,
+  color = "gray",
   disabled,
   element = "button",
   innerRef,
@@ -137,15 +137,3 @@ ButtonTag.propTypes = {
   */
   onClick: PropTypes.func,
 };
-
-ButtonTag.defaultProps = {
-  label: "",
-  cardTitle: "",
-  ariaLabel: undefined,
-  color: "gray",
-  disabled: undefined,
-  element: "button",
-  href: undefined,
-  innerRef: undefined,
-  onClick: undefined,
-};

packages/unity-react-core/src/components/Card/Card.jsx

@@ -29,22 +29,22 @@ const gaDefaultObject = {
  * @returns {JSX.Element}
  */
 export const Card = ({
-  type,
-  width,
-  horizontal,
+  type = "default",
+  width = "100%",
+  horizontal = false,
   image,
   imageAltText,
   title,
   icon,
   body,
-  eventFormat,
+  eventFormat = "stack",
   eventLocation,
   eventTime,
   buttons,
   linkLabel,
   linkUrl,
   tags,
-  showBorders,
+  showBorders = true,
   cardLink,
 }) => {
   return (
@@ -154,44 +154,26 @@ Card.propTypes = {
   cardLink: PropTypes.string,
 };
 
-Card.defaultProps = {
-  type: "default",
-  width: "100%",
-  horizontal: false,
-  body: undefined,
-  eventFormat: "stack",
-  eventTime: undefined,
-  eventLocation: undefined,
-  icon: undefined,
-  image: undefined,
-  imageAltText: undefined,
-  buttons: undefined,
-  linkLabel: undefined,
-  linkUrl: undefined,
-  tags: undefined,
-  showBorders: true,
-};
-
 /*
  * Sub-components defined after this
  */
 const BaseCard = ({
-  type,
-  width,
-  horizontal,
-  image,
-  imageAltText,
+  type = "default",
+  width = "100%",
+  horizontal = false,
+  image = "",
+  imageAltText = "",
   title,
-  icon,
-  body,
-  eventFormat,
-  eventLocation,
-  eventTime,
-  buttons,
-  linkLabel,
-  linkUrl,
-  tags,
-  showBorders,
+  icon = undefined,
+  body = "",
+  eventFormat = "stack",
+  eventLocation = "",
+  eventTime = "",
+  buttons = undefined,
+  linkLabel = undefined,
+  linkUrl = undefined,
+  tags = undefined,
+  showBorders = true,
   cardLink,
 }) => {
   const cardClass = classNames("card", "cards-components", {
@@ -297,35 +279,17 @@ BaseCard.propTypes = {
   cardLink: PropTypes.string,
 };
 
-BaseCard.defaultProps = {
-  type: "default",
-  width: "100%",
-  horizontal: false,
-  body: "",
-  eventFormat: "stack",
-  eventTime: "",
-  eventLocation: "",
-  icon: undefined,
-  image: "",
-  imageAltText: "",
-  buttons: undefined,
-  linkLabel: undefined,
-  linkUrl: undefined,
-  tags: undefined,
-  showBorders: true,
-};
-
 const CardContent = ({
-  type,
-  body,
-  eventFormat,
-  eventLocation,
-  eventTime,
+  type = "default",
+  body = "",
+  eventFormat = "stack",
+  eventLocation = "",
+  eventTime = "",
   title,
-  buttons,
-  linkLabel,
-  linkUrl,
-  tags,
+  buttons = undefined,
+  linkLabel = undefined,
+  linkUrl = undefined,
+  tags = undefined,
   cardLink,
 }) => (
   <>
@@ -438,19 +402,11 @@ CardContent.propTypes = {
   cardLink: PropTypes.string,
 };
 
-CardContent.defaultProps = {
-  type: "default",
-  body: "",
-  eventFormat: "stack",
-  eventLocation: "",
-  eventTime: "",
-  buttons: undefined,
-  linkLabel: undefined,
-  linkUrl: undefined,
-  tags: undefined,
-};
-
-const EventInfo = ({ eventFormat, eventTime, eventLocation }) => {
+const EventInfo = ({
+  eventFormat = "stack",
+  eventLocation = "",
+  eventTime = "",
+}) => {
   if (eventFormat === "inline") {
     return (
       <div className="card-event-details">
@@ -516,9 +472,3 @@ EventInfo.propTypes = {
   eventLocation: PropTypes.string,
   eventTime: PropTypes.string,
 };
-
-EventInfo.defaultProps = {
-  eventFormat: "stack",
-  eventLocation: "",
-  eventTime: "",
-};

packages/unity-react-core/src/components/Pagination/PageItem/PageItem.jsx

@@ -14,11 +14,11 @@ import React from "react";
  */
 export const PageItem = ({
   dataId,
-  isClickeable,
-  disabled,
-  pageLinkIcon,
-  selectedPage,
-  onClick,
+  isClickeable = false,
+  disabled = false,
+  pageLinkIcon = false,
+  selectedPage = false,
+  onClick = () => {},
   ellipses,
   ariaLabel,
   children,
@@ -69,11 +69,3 @@ PageItem.propTypes = {
   ariaLabel: PropTypes.string,
   ariaDisabled: PropTypes.bool,
 };
-
-PageItem.defaultProps = {
-  isClickeable: false,
-  disabled: false,
-  pageLinkIcon: false,
-  selectedPage: false,
-  onClick: () => {},
-};

packages/unity-react-core/src/components/Pagination/Pagination.jsx

@@ -33,8 +33,8 @@ const defaultGAEvent = {
 export const Pagination = ({
   type,
   background,
-  currentPage,
-  totalPages,
+  currentPage = 1,
+  totalPages = 10,
   onChange,
 }) => {
   const [selectedPage, setSelectedPage] = useState(null);
@@ -230,8 +230,3 @@ Pagination.propTypes = {
    */
   onChange: PropTypes.func.isRequired,
 };
-
-Pagination.defaultProps = {
-  currentPage: 1,
-  totalPages: 10,
-};