Merge branch 'Mil4n0r/resultset-typing' of github.com:dxc-technology/halstack-react into Mil4n0r/resultset-typing

Author: Mil4n0r

lib/src/breadcrumbs/types.ts

@@ -3,10 +3,34 @@ type Item = {
   label: string;
 };
 type Props = {
+  /**
+   * Provides a label that describes the type of navigation enabled by
+   * the component.
+   */
   ariaLabel?: string;
+  /**
+   * Array of objects representing the items of the breadcrumbs.
+   */
   items: Item[];
+  /**
+   * Number of items before showing a collapsed version of the
+   * breadcrumbs. It can't be lower than two (root/collapsed action and
+   * current page).
+   */
   itemsBeforeCollapse?: number;
+  /**
+   * Callback for custom navigation with third-party libraries such as
+   * Next ('useRouter') or React Router ('useNavigate'). 
+   * This function will be called when an item is clicked, 
+   * receiving its 'href' as a parameter.
+   * @param href 
+   * @returns
+   */
   onItemClick?: (href: string) => void;
+  /**
+   * When items are collapsed, whether the root item should always be
+   * displayed or not.
+   */
   showRoot?: boolean;
 };
 

lib/src/container/types.ts

@@ -50,27 +50,129 @@ type OverflowValues = "visible" | "hidden" | "clip" | "scroll" | "auto";
 type Overflow = OverflowValues | { x?: OverflowValues; y?: OverflowValues };
 
 type Props = {
+  /**
+   * Based on the CSS property background allows configuring all properties related to the background of a container.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background
+   */
+  background?: Background;
+  /**
+   * Based on the CSS property border allows configuring all properties related to the border of a container.
+   */
+  border?: Border;
+  /**
+   * Sets the border-radius CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+   */
+  borderRadius?: string;
+  /**
+   * Sets the box-shadow CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+   */
+  boxShadow?: string;
+  /**
+   * Sets the box-sizing CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
+   */
   boxSizing?: "border-box" | "content-box";
+  /**
+   * Custom content inside the container.
+   */
+  children: React.ReactNode;
+  /**
+   * Sets the display CSS property.
+   * The set of values is limited to the ones related to the outer display type.
+   * If you want to apply any pattern from the inner box and how the children are laid out,
+   * we recommend you to use the Flex and Grid components.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   */
   display?: "block" | "inline-block" | "inline" | "none";
-  width?: string;
+  /**
+   * Sets the float CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
+   */
+  float?: "left" | "right" | "none";
+  /**
+   * Sets the height CSS property.
+   *
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/height
+   */
   height?: string;
+  /**
+   * Based on the CSS property inset this prop is a shorthand that corresponds 
+   * to the top, right, bottom, and/or left properties.
+   */
+  inset?: Inset;
+  /**
+   * Size of the margin to be applied to the component. 
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties 
+   * in order to specify different margin sizes.
+   */
+  margin?: Space;
+  /**
+   * Sets the max-height CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+   */
   maxWidth?: string;
+  /**
+   * Sets the max-width CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+   */
   maxHeight?: string;
+  /**
+   * Sets the min-height CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+   */
   minWidth?: string;
+  /**
+   * Sets the min-width CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+   */
   minHeight?: string;
-  padding?: Space;
-  border?: Border;
-  borderRadius?: string;
-  margin?: Space;
+  /**
+   * Based on the CSS property outline allows configuring all properties related 
+   * to the outline of a container.
+   */
+  outline?: Outline;
+  /**
+   * Sets the overflow CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+   */
   overflow?: Overflow;
+  /**
+   * Size of the margin to be applied to the component. 
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties 
+   * in order to specify different margin sizes.
+   */
+  padding?: Space;
+  /**
+   * Sets the position CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position
+   */
   position?: "static" | "relative" | "absolute" | "fixed" | "sticky";
-  inset?: Inset;
-  float?: "left" | "right" | "none";
+  /**
+   * Sets the width CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/width
+   */
+  width?: string;
+  /**
+   * Sets the z-index CSS property.
+   * 
+   * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
+   */
   zIndex?: "auto" | number;
-  background?: Background;
-  boxShadow?: string;
-  outline?: Outline;
-  children: React.ReactNode;
 };
 
 export type StyledProps = Omit<Props, "display" | "width" | "height" | "opacity" | "overflow"> & {

lib/src/contextual-menu/types.ts

@@ -15,6 +15,10 @@ type GroupItem = CommonItemProps & {
 };
 type Section = { items: (Item | GroupItem)[]; title?: string };
 type Props = {
+  /**
+   * Array of items to be displayed in the Contextual menu. 
+   * Each item can be a single/simple item, a group item or a section.
+   */
   items: (Item | GroupItem)[] | Section[];
 };
 

lib/src/typography/Typography.test.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import DxcTypography from "./Typography";
+
+describe("Typography component tests", () => {
+  test("Renders as the selected component", () => {
+    const { container } = render(<DxcTypography as="h1">Test H1 Text</DxcTypography>);
+    expect(container.querySelector('h1')).not.toBeNull();
+  });
+  test("Renders as span if it receives invalid tag", () => {
+    const { container } = render(<DxcTypography as="br">Test BR Text</DxcTypography>);
+    expect(container.querySelector('br')).toBeNull();
+    expect(container.querySelector('span')).not.toBeNull();
+  });
+});

lib/src/utils/BaseTypography.tsx

@@ -23,6 +23,14 @@ type BaseTypographyProps = TypographyContextProps & {
   children: React.ReactNode;
 };
 
+const ValidTypographyTags = [
+  "a", "blockquote", "cite", "code", "div", "em", "figcaption", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "small", "span", "strong"
+];
+
+const isValidTypography = (tag: keyof HTMLElementTagNameMap) => {
+  return ValidTypographyTags.includes(tag);
+}
+
 const BaseTypography = ({
   as,
   display,
@@ -40,10 +48,9 @@ const BaseTypography = ({
   children,
 }: BaseTypographyProps): JSX.Element => {
   const componentContext = useContext(TypographyContext);
-
   const contextValue = useMemo(
     () => ({
-      as: as ?? componentContext?.as ?? "span",
+      as: isValidTypography(as) ? as : (isValidTypography(componentContext?.as) ? componentContext?.as : "span"),
       display: display ?? componentContext?.display ?? "inline",
       fontFamily: fontFamily ?? componentContext?.fontFamily ?? "Open Sans, sans-serif",
       fontSize: fontSize ?? componentContext?.fontSize ?? "1rem",