dxc-technology · GomezIvann · Dec 5, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lib/src/accordion/Accordion.tsx b/packages/lib/src/accordion/Accordion.tsx
@@ -4,7 +4,6 @@ import { getMargin } from "../common/utils";
 import { spaces } from "../common/variables";
 import useTheme from "../useTheme";
 import AccordionPropsType from "./types";
-import BaseTypography from "../utils/BaseTypography";
 import DxcIcon from "../icon/Icon";
 
 const DxcAccordion = ({
@@ -42,46 +41,15 @@ const DxcAccordion = ({
             isExpanded={isExpanded ?? innerIsExpanded}
           >
             <AccordionInfo>
-              <AccordionLabel>
+              <AccordionLabel disabled={disabled}>
                 {icon && (
                   <IconContainer disabled={disabled}>
                     {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
                   </IconContainer>
                 )}
-                <BaseTypography
-                  color={
-                    disabled
-                      ? colorsTheme.accordion.disabledTitleLabelFontColor
-                      : colorsTheme.accordion.titleLabelFontColor
-                  }
-                  fontFamily={colorsTheme.accordion.titleLabelFontFamily}
-                  fontSize={colorsTheme.accordion.titleLabelFontSize}
-                  fontStyle={colorsTheme.accordion.titleLabelFontStyle}
-                  fontWeight={colorsTheme.accordion.titleLabelFontWeight}
-                  lineHeight="1.5em"
-                >
-                  {label}
-                </BaseTypography>
+                {label}
               </AccordionLabel>
-              {assistiveText && (
-                <AccordionAssistiveText>
-                  <BaseTypography
-                    color={
-                      disabled
-                        ? colorsTheme.accordion.disabledAssistiveTextFontColor
-                        : colorsTheme.accordion.assistiveTextFontColor
-                    }
-                    fontFamily={colorsTheme.accordion.assistiveTextFontFamily}
-                    fontSize={colorsTheme.accordion.assistiveTextFontSize}
-                    fontStyle={colorsTheme.accordion.assistiveTextFontStyle}
-                    fontWeight={colorsTheme.accordion.assistiveTextFontWeight}
-                    letterSpacing={colorsTheme.accordion.assistiveTextLetterSpacing}
-                    lineHeight="1.5em"
-                  >
-                    {assistiveText}
-                  </BaseTypography>
-                </AccordionAssistiveText>
-              )}
+              {assistiveText && <AccordionAssistiveText disabled={disabled}>{assistiveText}</AccordionAssistiveText>}
             </AccordionInfo>
             <CollapseIndicator disabled={disabled}>
               <DxcIcon icon={(isExpanded ?? innerIsExpanded) ? "expand_less" : "expand_more"} />
@@ -165,12 +133,18 @@ const AccordionInfo = styled.span`
   width: 100%;
 `;
 
-const AccordionLabel = styled.span`
+const AccordionLabel = styled.span<{ disabled: AccordionPropsType["disabled"] }>`
   display: flex;
   padding-top: ${(props) => props.theme.titleLabelPaddingTop};
   padding-bottom: ${(props) => props.theme.titleLabelPaddingBottom};
   padding-right: ${(props) => props.theme.titleLabelPaddingRight};
   padding-left: ${(props) => props.theme.titleLabelPaddingLeft};
+  color: ${(props) => (props.disabled ? props.theme.disabledTitleLabelFontColor : props.theme.titleLabelFontColor)};
+  font-family: ${(props) => props.theme.titleLabelFontFamily};
+  font-size: ${(props) => props.theme.titleLabelFontSize};
+  font-style: ${(props) => props.theme.titleLabelFontStyle};
+  font-weight: ${(props) => props.theme.titleLabelFontWeight};
+  line-height: 1.5em;
 `;
 
 const IconContainer = styled.span<{ disabled: AccordionPropsType["disabled"] }>`
@@ -186,10 +160,18 @@ const IconContainer = styled.span<{ disabled: AccordionPropsType["disabled"] }>`
   }
 `;
 
-const AccordionAssistiveText = styled.span`
+const AccordionAssistiveText = styled.span<{ disabled: AccordionPropsType["disabled"] }>`
   min-width: ${(props) => props.theme.assistiveTextMinWidth};
   padding-left: ${(props) => props.theme.assistiveTextPaddingLeft};
   padding-right: ${(props) => props.theme.assistiveTextPaddingRight};
+  color: ${(props) =>
+    props.disabled ? props.theme.disabledAssistiveTextFontColor : props.theme.assistiveTextFontColor};
+  font-family: ${(props) => props.theme.assistiveTextFontFamily};
+  font-size: ${(props) => props.theme.assistiveTextFontSize};
+  font-style: ${(props) => props.theme.assistiveTextFontStyle};
+  font-weight: ${(props) => props.theme.assistiveTextFontWeight};
+  letter-spacing: ${(props) => props.theme.assistiveTextLetterSpacing};
+  line-height: 1.5em;
 `;
 
 const CollapseIndicator = styled.span<{ disabled: AccordionPropsType["disabled"] }>`

diff --git a/packages/lib/src/image/Image.tsx b/packages/lib/src/image/Image.tsx
@@ -1,13 +1,30 @@
 import styled, { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
-import BaseTypography from "../utils/BaseTypography";
 import ImagePropsType, { CaptionWrapperProps } from "./types";
 
-const CaptionWrapper = ({ condition, wrapper, children }: CaptionWrapperProps): JSX.Element => (
+const Figure = styled.figure`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+`;
+
+const CaptionContainer = styled.figcaption`
+  color: ${(props) => props.theme.captionFontColor};
+  font-family: ${(props) => props.theme.captionFontFamily};
+  font-size: ${(props) => props.theme.captionFontSize};
+  font-style: ${(props) => props.theme.captionFontStyle};
+  font-weight: ${(props) => props.theme.captionFontWeight};
+  line-height: ${(props) => props.theme.captionLineHeight};
+`;
+
+const CaptionWrapper = ({ condition, wrapper, children }: CaptionWrapperProps) => (
   <>{condition ? wrapper(children) : children}</>
 );
 
-const DxcImage = ({
+export default function DxcImage({
   alt,
   caption,
   lazyLoading = false,
@@ -20,7 +37,7 @@ const DxcImage = ({
   objectPosition,
   onLoad,
   onError,
-}: ImagePropsType) => {
+}: ImagePropsType) {
   const colorsTheme = useTheme();
 
   return (
@@ -30,17 +47,7 @@ const DxcImage = ({
         wrapper={(children: React.ReactNode) => (
           <Figure>
             {children}
-            <BaseTypography
-              as="figcaption"
-              color={colorsTheme.image.captionFontColor}
-              fontFamily={colorsTheme.image.captionFontFamily}
-              fontSize={colorsTheme.image.captionFontSize}
-              fontStyle={colorsTheme.image.captionFontStyle}
-              fontWeight={colorsTheme.image.captionFontWeight}
-              lineHeight={colorsTheme.image.captionLineHeight}
-            >
-              {caption}
-            </BaseTypography>
+            <CaptionContainer>{caption}</CaptionContainer>
           </Figure>
         )}
       >
@@ -62,15 +69,4 @@ const DxcImage = ({
       </CaptionWrapper>
     </ThemeProvider>
   );
-};
-
-const Figure = styled.figure`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: fit-content;
-  margin: 0;
-  padding: 0;
-`;
-
-export default DxcImage;
+}
diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx
@@ -3,8 +3,6 @@ import styled from "styled-components";
 import DxcBadge from "../badge/Badge";
 import DxcFlex from "../flex/Flex";
 import DxcIcon from "../icon/Icon";
-import useTheme from "../useTheme";
-import BaseTypography from "../utils/BaseTypography";
 import { NavTabsContext } from "./NavTabsContext";
 import NavTabsPropsType, { TabProps } from "./types";
 
@@ -14,7 +12,6 @@ const DxcTab = forwardRef(
     ref: Ref<HTMLAnchorElement>
   ): JSX.Element => {
     const tabRef = useRef<HTMLAnchorElement>();
-    const colorsTheme = useTheme();
     const { iconPosition, tabIndex, focusedLabel } = useContext(NavTabsContext);
 
     useEffect(() => {
@@ -60,24 +57,9 @@ const DxcTab = forwardRef(
             </TabIconContainer>
           )}
           <DxcFlex alignItems="center" gap="0.5rem">
-            <BaseTypography
-              color={
-                disabled
-                  ? colorsTheme.navTabs.disabledFontColor
-                  : active
-                    ? colorsTheme.navTabs.selectedFontColor
-                    : colorsTheme.navTabs.unselectedFontColor
-              }
-              fontFamily={colorsTheme.navTabs.fontFamily}
-              fontSize={colorsTheme.navTabs.fontSize}
-              fontStyle={colorsTheme.navTabs.fontStyle}
-              fontWeight={colorsTheme.navTabs.fontWeight}
-              textAlign="center"
-              letterSpacing="0.025em"
-              lineHeight="1.715em"
-            >
+            <Label active={active} disabled={disabled}>
               {children}
-            </BaseTypography>
+            </Label>
             {notificationNumber && !disabled && (
               <DxcBadge
                 mode="notification"
@@ -137,6 +119,30 @@ const Tab = styled.a<{
   `}
 `;
 
+const Label = styled.span<{
+  disabled: TabProps["disabled"];
+  active: TabProps["active"];
+}>`
+  display: inline;
+  color: ${(props) =>
+    props.disabled
+      ? props.theme.disabledFontColor
+      : props.active
+        ? props.theme.selectedFontColor
+        : props.theme.unselectedFontColor};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-size: ${(props) => props.theme.fontSize};
+  font-style: ${(props) => props.theme.fontStyle};
+  font-weight: ${(props) => props.theme.fontWeight};
+  text-align: center;
+  letter-spacing: 0.025em;
+  line-height: 1.715em;
+  text-decoration: none;
+  text-overflow: unset;
+  white-space: normal;
+  margin: 0;
+`;
+
 const TabIconContainer = styled.div<{
   iconPosition: NavTabsPropsType["iconPosition"];
   active: TabProps["active"];

diff --git a/packages/lib/src/paragraph/Paragraph.tsx b/packages/lib/src/paragraph/Paragraph.tsx
@@ -1,20 +1,28 @@
+import styled, { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
-import BaseTypography from "../utils/BaseTypography";
 
-const DxcParagraph = ({ children }: { children: React.ReactNode }): JSX.Element => {
+const Paragraph = styled.p`
+  display: ${(props) => props.theme.display};
+  font-family: "Open Sans", sans-serif;
+  font-size: ${(props) => props.theme.fontSize};
+  font-style: "normal";
+  font-weight: ${(props) => props.theme.fontWeight};
+  letter-spacing: 0em;
+  line-height: 1.5em;
+  text-align: "left";
+  color: ${(props) => props.theme.fontColor};
+  text-decoration: none;
+  text-overflow: unset;
+  white-space: normal;
+  margin: 0;
+`;
+
+export default function DxcParagraph({ children }: { children: React.ReactNode }) {
   const colorsTheme = useTheme();
 
   return (
-    <BaseTypography
-      as="p"
-      display={colorsTheme.paragraph.display}
-      fontSize={colorsTheme.paragraph.fontSize}
-      fontWeight={colorsTheme.paragraph.fontWeight}
-      color={colorsTheme.paragraph.fontColor}
-    >
-      {children}
-    </BaseTypography>
+    <ThemeProvider theme={colorsTheme.paragraph}>
+      <Paragraph>{children}</Paragraph>
+    </ThemeProvider>
   );
-};
-
-export default DxcParagraph;
+}
diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx
@@ -3,8 +3,6 @@ import styled from "styled-components";
 import DxcBadge from "../badge/Badge";
 import DxcIcon from "../icon/Icon";
 import { Tooltip } from "../tooltip/Tooltip";
-import useTheme from "../useTheme";
-import BaseTypography from "../utils/BaseTypography";
 import { TabsContext } from "./TabsContext";
 import { TabProps, TabsContextProps } from "./types";
 
@@ -23,7 +21,7 @@ const DxcTab = forwardRef(
     ref: Ref<HTMLButtonElement>
   ): JSX.Element => {
     const tabRef = useRef<HTMLButtonElement>();
-    const colorsTheme = useTheme();
+
     const {
       iconPosition,
       tabIndex,
@@ -99,24 +97,9 @@ const DxcTab = forwardRef(
                 {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
               </TabIconContainer>
             )}
-            <BaseTypography
-              color={
-                disabled
-                  ? colorsTheme.tabs.disabledFontColor
-                  : activeLabel === label
-                    ? colorsTheme.tabs.selectedFontColor
-                    : colorsTheme.tabs.unselectedFontColor
-              }
-              fontFamily={colorsTheme.tabs.fontFamily}
-              fontSize={colorsTheme.tabs.fontSize}
-              fontStyle={disabled ? colorsTheme.tabs.disabledFontStyle : colorsTheme.tabs.fontStyle}
-              fontWeight={activeLabel === label ? colorsTheme.tabs.pressedFontWeight : colorsTheme.tabs.fontWeight}
-              textAlign="center"
-              letterSpacing="0.025em"
-              lineHeight="1.715em"
-            >
+            <Label disabled={disabled} activeLabel={activeLabel} label={label}>
               {label}
-            </BaseTypography>
+            </Label>
           </MainLabelContainer>
           {notificationNumber && !disabled && (
             <BadgeContainer hasLabelAndIcon={hasLabelAndIcon} iconPosition={iconPosition}>
@@ -228,6 +211,31 @@ const MainLabelContainer = styled.div<{
       : "unset"};
 `;
 
+const Label = styled.span<{
+  disabled: TabProps["disabled"];
+  label: TabProps["label"];
+  activeLabel: string;
+}>`
+  display: inline;
+  color: ${(props) =>
+    props.disabled
+      ? props.theme.disabledFontColor
+      : props.activeLabel === props.label
+        ? props.theme.selectedFontColor
+        : props.theme.unselectedFontColor};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-size: ${(props) => props.theme.fontSize};
+  font-style: ${(props) => (props.disabled ? props.theme.disabledFontStyle : props.theme.fontStyle)};
+  font-weight: ${(props) => props.theme.fontWeight};
+  text-align: center;
+  letter-spacing: 0.025em;
+  line-height: 1.715em;
+  text-decoration: none;
+  text-overflow: unset;
+  white-space: normal;
+  margin: 0;
+`;
+
 const TabIconContainer = styled.div<{
   hasLabelAndIcon: boolean;
   iconPosition: TabsContextProps["iconPosition"];