[Minor] Types exported

packages/lib/src/accordion/Accordion.tsx

@@ -2,15 +2,15 @@ import { JSX, Children, useCallback, useMemo, useState } from "react";
 import styled from "@emotion/styled";
 import { getMargin } from "../common/utils";
 import { spaces } from "../common/variables";
-import AccordionPropsType, { AccordionContextProps } from "./types";
+import { AccordionProps, AccordionContextProps } from "./types";
 import AccordionContext from "./AccordionContext";
 import AccordionItem from "./AccordionItem";
 
-const calculateWidth = (margin: AccordionPropsType["margin"]) =>
+const calculateWidth = (margin: AccordionProps["margin"]) =>
   `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
 
 const AccordionContainer = styled.div<{
-  margin: AccordionPropsType["margin"];
+  margin: AccordionProps["margin"];
 }>`
   width: ${(props) => calculateWidth(props.margin)};
   margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "var(--spacing-padding-none)")};
@@ -74,7 +74,7 @@ const AccordionItemWithProvider = ({
   return <AccordionContext value={memoizedContext}>{child}</AccordionContext>;
 };
 
-const DxcAccordion = (props: AccordionPropsType): JSX.Element => {
+const DxcAccordion = (props: AccordionProps): JSX.Element => {
   const { children, defaultIndexActive, independent, indexActive, margin, onActiveChange } = props;
 
   const [innerIndexActive, setInnerIndexActive] = useState(

packages/lib/src/accordion/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ReactElement } from "react";
-import { Margin, SVG, Space } from "../common/utils";
+import { Margin, PrettifyTypes, SVG, Space } from "../common/types";
 
 export type AccordionItemProps = {
   /**
@@ -103,7 +103,7 @@ type NonIndependentProps = CommonProps & {
   onActiveChange?: (index: number[]) => void;
 };
 
-type Props = IndependentProps | NonIndependentProps;
+export type AccordionProps = PrettifyTypes<IndependentProps | NonIndependentProps>;
 
 export type AccordionContextProps = {
   index: number;
@@ -112,4 +112,4 @@ export type AccordionContextProps = {
   independent?: boolean;
 };
 
-export default Props;
+export type { AccordionProps as default };

packages/lib/src/action-icon/ActionIcon.stories.tsx

@@ -5,7 +5,7 @@ import DxcActionIcon from "./ActionIcon";
 import DxcFlex from "../flex/Flex";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer, { PseudoState } from "../../.storybook/components/ExampleContainer";
-import { ActionIconPropTypes, Status } from "./types";
+import { ActionIconProps, Status } from "./types";
 
 export default {
   title: "ActionIcon",
@@ -17,10 +17,10 @@ type Story = StoryObj<typeof DxcActionIcon>;
 type GroupingKey = "size" | "shape" | "color" | "statusPosition" | "statusMode" | "pseudoState";
 
 type ActionIconRowProps = {
-  sizes?: ActionIconPropTypes["size"][];
-  shapes?: ActionIconPropTypes["shape"][];
-  colors?: ActionIconPropTypes["color"][];
-  icon?: ActionIconPropTypes["icon"];
+  sizes?: ActionIconProps["size"][];
+  shapes?: ActionIconProps["shape"][];
+  colors?: ActionIconProps["color"][];
+  icon?: ActionIconProps["icon"];
   statusModes?: Status["mode"][];
   statusPositions?: (Status["position"] | undefined)[];
   pseudoStates?: (PseudoState | "disabled" | undefined)[];
@@ -30,7 +30,7 @@ type ActionIconRowProps = {
 const ActionIconRow = ({
   sizes = ["medium"],
   shapes = ["circle"],
-  colors = ["neutral"],
+  colors = [undefined],
   statusModes,
   statusPositions = [],
   pseudoStates = [],
@@ -58,9 +58,9 @@ const ActionIconRow = ({
   const renderGroup = (
     level: number,
     filters: {
-      size?: ActionIconPropTypes["size"];
-      shape?: ActionIconPropTypes["shape"];
-      color?: ActionIconPropTypes["color"];
+      size?: ActionIconProps["size"];
+      shape?: ActionIconProps["shape"];
+      color?: ActionIconProps["color"];
       statusMode?: Status["mode"];
       statusPosition?: Status["position"];
       pseudoState?: PseudoState | "disabled";
@@ -117,9 +117,9 @@ const ActionIconRow = ({
 
     return values.map((value) => {
       const newFilters = { ...filters };
-      if (key === "size") newFilters.size = value as ActionIconPropTypes["size"];
-      else if (key === "shape") newFilters.shape = value as ActionIconPropTypes["shape"];
-      else if (key === "color") newFilters.color = value as ActionIconPropTypes["color"];
+      if (key === "size") newFilters.size = value as ActionIconProps["size"];
+      else if (key === "shape") newFilters.shape = value as ActionIconProps["shape"];
+      else if (key === "color") newFilters.color = value as ActionIconProps["color"];
       else if (key === "statusPosition") newFilters.statusPosition = value as Status["position"];
       else if (key === "statusMode") newFilters.statusMode = value as Status["mode"];
       else if (key === "pseudoState") newFilters.pseudoState = value as PseudoState | "disabled";
@@ -144,6 +144,7 @@ export const Shapes: Story = {
         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
         shapes={["circle", "square"]}
         groupBy={["shape", "size"]}
+        colors={["neutral"]}
       />
     </>
   ),
@@ -156,9 +157,10 @@ export const Colors: Story = {
       <ActionIconRow
         sizes={["medium"]}
         shapes={["circle"]}
-        colors={["neutral", "primary", "secondary", "tertiary", "success", "warning", "error", "info", "transparent"]}
+        colors={["neutral", "primary", "secondary", "tertiary", "success", "warning", "error", "info"]}
         groupBy={["color"]}
       />
+      <ActionIconRow colors={undefined} sizes={["medium"]} shapes={["circle"]} groupBy={["color"]} />
     </>
   ),
 };
@@ -167,10 +169,10 @@ export const PseudoStates: Story = {
   render: () => (
     <>
       <Title title="Pseudo states" theme="light" level={2} />
-      <DxcActionIcon color="transparent" icon="settings" onClick={() => console.log("hello")} />
+      <DxcActionIcon icon="settings" onClick={() => console.log("hello")} />
 
       <ActionIconRow
-        colors={["transparent"]}
+        colors={undefined}
         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
         shapes={["square"]}
         statusModes={["success"]}
@@ -182,24 +184,26 @@ export const PseudoStates: Story = {
   ),
 };
 
-export const Types: Story = {
-  render: () => (
-    <>
-      <Title title="Icon (custom)" theme="light" level={2} />
-      <ActionIconRow
-        sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
-        shapes={["circle"]}
-        groupBy={["size"]}
-      />
-      <Title title="Icon (default)" theme="light" level={2} />
-      <ActionIconRow
-        sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
-        shapes={["circle"]}
-        groupBy={["size"]}
-      />
-    </>
-  ),
-};
+// export const Types: Story = {
+//   render: () => (
+//     <>
+//       <Title title="Icon (custom)" theme="light" level={2} />
+//       <ActionIconRow
+//         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
+//         shapes={["circle"]}
+//         groupBy={["size"]}
+//         colors={["neutral"]}
+//       />
+//       <Title title="Icon (default)" theme="light" level={2} />
+//       <ActionIconRow
+//         sizes={["xsmall", "small", "medium", "large", "xlarge", "xxlarge"]}
+//         shapes={["circle"]}
+//         groupBy={["size"]}
+//         colors={["neutral"]}
+//       />
+//     </>
+//   ),
+// };
 
 const Tooltip = () => (
   <>

packages/lib/src/action-icon/ActionIcon.tsx

@@ -1,17 +1,17 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-import { ActionIconPropTypes } from "./types";
+import { ActionIconProps } from "./types";
 import { getBackgroundColor, getBorderRadius, getColor, getIconSize, getOutlineWidth, getSize } from "./utils";
 import DxcIcon from "../icon/Icon";
 import { Tooltip } from "../tooltip/Tooltip";
 
 const ActionIconContainer = styled.div<
   {
     hasAction?: boolean;
-    shape: ActionIconPropTypes["shape"];
-    size: ActionIconPropTypes["size"];
-    disabled?: ActionIconPropTypes["disabled"];
-    color: ActionIconPropTypes["color"];
+    shape: ActionIconProps["shape"];
+    size: ActionIconProps["size"];
+    disabled?: ActionIconProps["disabled"];
+    color?: ActionIconProps["color"];
   } & React.AnchorHTMLAttributes<HTMLAnchorElement>
 >`
   /* Reset button default styles when rendered as button */
@@ -62,7 +62,7 @@ const ActionIconContainer = styled.div<
 
 const IconContainerWrapper = styled.div<{
   hasAction?: boolean;
-  disabled: ActionIconPropTypes["disabled"];
+  disabled: ActionIconProps["disabled"];
 }>`
   height: 100%;
   width: 100%;
@@ -82,7 +82,7 @@ const IconContainerWrapper = styled.div<{
     `}
 `;
 
-export const IconContainer = styled.div<{ size: ActionIconPropTypes["size"] }>`
+export const IconContainer = styled.div<{ size: ActionIconProps["size"] }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -100,7 +100,7 @@ export const IconContainer = styled.div<{ size: ActionIconPropTypes["size"] }>`
 const ForwardedActionIcon = ({
   ariaLabel,
   content,
-  color = "transparent",
+  color = undefined,
   disabled = false,
   icon,
   linkHref,
@@ -110,7 +110,7 @@ const ForwardedActionIcon = ({
   size = "medium",
   tabIndex = 0,
   title,
-}: ActionIconPropTypes) => {
+}: ActionIconProps) => {
   return (
     <Tooltip label={title}>
       <ActionIconContainer

packages/lib/src/action-icon/types.ts

@@ -1,21 +1,12 @@
 import { MouseEvent, ReactNode, Ref } from "react";
-import { SVG } from "../common/utils";
+import { SVG, Color, Shape, Size } from "../common/types";
 
 export type RefType = HTMLDivElement;
-
-type Size = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Shape = "circle" | "square";
-type Color =
-  "primary" | "secondary" | "tertiary" | "success" | "info" | "neutral" | "warning" | "error" | "transparent";
 export interface Status {
   mode: "default" | "info" | "success" | "warning" | "error";
   position: "top" | "bottom";
 }
 
-export type ActionIconPropTypes =
-  | (CommonProps & { content: ReactNode; icon?: string | SVG })
-  | (CommonProps & { content?: ReactNode; icon: string | SVG });
-
 type CommonProps = {
   /**
    * Text to be used as aria-label for the Action Icon. It is recommended to provide this prop when using the onClick or linkHref properties and no title is provided.
@@ -58,3 +49,9 @@ type CommonProps = {
    */
   title?: string;
 };
+
+export type ActionIconProps =
+  | (CommonProps & { content: ReactNode; icon?: string | SVG })
+  | (CommonProps & { content?: ReactNode; icon: string | SVG });
+
+export type { ActionIconProps as default };

packages/lib/src/action-icon/utils.ts

@@ -1,4 +1,4 @@
-import { ActionIconPropTypes } from "./types";
+import { ActionIconProps } from "./types";
 
 const contextualColorMap = {
   primary: {
@@ -75,13 +75,13 @@ const outlineWidthMap = {
   xxlarge: "var(--border-width-l)",
 };
 
-export const getColor = (color: ActionIconPropTypes["color"]) =>
+export const getColor = (color: ActionIconProps["color"]) =>
   color && contextualColorMap[color] ? contextualColorMap[color].text : contextualColorMap.transparent.text;
 
-export const getBackgroundColor = (color: ActionIconPropTypes["color"]) =>
+export const getBackgroundColor = (color: ActionIconProps["color"]) =>
   color && contextualColorMap[color] ? contextualColorMap[color].background : contextualColorMap.transparent.background;
 
-export const getBorderRadius = (shape: ActionIconPropTypes["shape"], size: ActionIconPropTypes["size"]) => {
+export const getBorderRadius = (shape: ActionIconProps["shape"], size: ActionIconProps["size"]) => {
   if (shape === "circle") {
     return "100%";
   }
@@ -91,10 +91,10 @@ export const getBorderRadius = (shape: ActionIconPropTypes["shape"], size: Actio
   return "100%";
 };
 
-export const getSize = (size: ActionIconPropTypes["size"]) => (size && sizeMap[size] ? sizeMap[size] : "40px");
+export const getSize = (size: ActionIconProps["size"]) => (size && sizeMap[size] ? sizeMap[size] : "40px");
 
-export const getIconSize = (size: ActionIconPropTypes["size"]) =>
+export const getIconSize = (size: ActionIconProps["size"]) =>
   size && iconSizeMap[size] ? iconSizeMap[size] : "var(--height-s)";
 
-export const getOutlineWidth = (size: ActionIconPropTypes["size"]) =>
+export const getOutlineWidth = (size: ActionIconProps["size"]) =>
   size && outlineWidthMap[size] ? outlineWidthMap[size] : "var(--border-width-m)";

packages/lib/src/alert/Actions.tsx

@@ -1,15 +1,15 @@
 import { memo } from "react";
 import DxcButton from "../button/Button";
 import DxcFlex from "../flex/Flex";
-import AlertPropsType from "./types";
+import { AlertProps } from "./types";
 
 const Actions = memo(
   ({
     mode,
     primaryAction,
     secondaryAction,
     semantic,
-  }: Pick<AlertPropsType, "mode" | "primaryAction" | "secondaryAction" | "semantic">) =>
+  }: Pick<AlertProps, "mode" | "primaryAction" | "secondaryAction" | "semantic">) =>
     (primaryAction != null || secondaryAction != null) && (
       <DxcFlex gap="var(--spacing-gap-s)" alignSelf={mode === "inline" || mode === "modal" ? "flex-end" : undefined}>
         {secondaryAction?.onClick && (

packages/lib/src/alert/Alert.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { useState, useId, useEffect, useCallback, use, useMemo } from "react";
-import AlertPropsType from "./types";
+import { AlertProps } from "./types";
 import DxcIcon from "../icon/Icon";
 import DxcDivider from "../divider/Divider";
 import DxcActionIcon from "../action-icon/ActionIcon";
@@ -11,8 +11,8 @@ import ModalAlertWrapper from "./ModalAlertWrapper";
 import { HalstackLanguageContext } from "../HalstackContext";
 
 const AlertContainer = styled.div<{
-  semantic: AlertPropsType["semantic"];
-  mode: AlertPropsType["mode"];
+  semantic: AlertProps["semantic"];
+  mode: AlertProps["mode"];
 }>`
   box-sizing: border-box;
   display: flex;
@@ -35,7 +35,7 @@ const AlertContainer = styled.div<{
   overflow: hidden;
 `;
 
-const TitleContainer = styled.div<{ mode: AlertPropsType["mode"]; semantic: AlertPropsType["semantic"] }>`
+const TitleContainer = styled.div<{ mode: AlertProps["mode"]; semantic: AlertProps["semantic"] }>`
   flex-grow: 1;
   display: flex;
   align-items: center;
@@ -55,13 +55,13 @@ const typographyStyles = css`
   font-weight: var(--typography-helper-text-regular);
 `;
 
-const Title = styled.span<{ mode: AlertPropsType["mode"] }>`
+const Title = styled.span<{ mode: AlertProps["mode"] }>`
   ${typographyStyles}
   font-size: ${(props) => (props.mode === "modal" ? "var(--typography-title-xl)" : "var(--typography-title-s)")};
   font-weight: var(--typography-title-bold);
 `;
 
-const Message = styled.div<{ mode: AlertPropsType["mode"] }>`
+const Message = styled.div<{ mode: AlertProps["mode"] }>`
   ${typographyStyles}
   white-space: ${(props) => props.mode === "banner" && "nowrap"};
   text-overflow: ${(props) => props.mode === "banner" && "ellipsis"};
@@ -79,7 +79,7 @@ const NavigationText = styled.span`
   font-size: var(--typography-helper-text-s);
 `;
 
-const getIcon = (semantic: AlertPropsType["semantic"]) => {
+const getIcon = (semantic: AlertProps["semantic"]) => {
   switch (semantic) {
     case "info":
       return <DxcIcon icon="filled_info" />;
@@ -100,7 +100,7 @@ const DxcAlert = ({
   secondaryAction,
   semantic = "info",
   title = "",
-}: AlertPropsType) => {
+}: AlertProps) => {
   const messages = useMemo(() => (Array.isArray(message) ? message : [message]), [message]);
   const [currentIndex, setCurrentIndex] = useState(0);