From ecccf29a6a002585d93f35339464dfa1631bf5e4 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 Dec 2024 12:57:11 +0100 Subject: [PATCH 01/10] BaseTypography removed --- packages/lib/src/accordion/Accordion.tsx | 56 ++++----- packages/lib/src/image/Image.tsx | 22 ++-- packages/lib/src/nav-tabs/Tab.tsx | 30 ++++- packages/lib/src/paragraph/Paragraph.tsx | 24 +++- packages/lib/src/tabs/Tab.tsx | 30 ++++- packages/lib/src/tabs/TabLegacy.tsx | 30 ++++- packages/lib/src/typography/Typography.tsx | 101 +++++++++++++++-- packages/lib/src/utils/BaseTypography.tsx | 125 --------------------- 8 files changed, 211 insertions(+), 207 deletions(-) delete mode 100644 packages/lib/src/utils/BaseTypography.tsx diff --git a/packages/lib/src/accordion/Accordion.tsx b/packages/lib/src/accordion/Accordion.tsx index aa9fc18b0c..8d49f64ff7 100644 --- 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} > - + {icon && ( {typeof icon === "string" ? : icon} )} - - {label} - + {label} - {assistiveText && ( - - - {assistiveText} - - - )} + {assistiveText && {assistiveText}} @@ -165,12 +133,18 @@ const AccordionInfo = styled.span` width: 100%; `; -const AccordionLabel = styled.span` +const AccordionLabel = styled.span<{ disabled: boolean }>` 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: boolean }>` 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.accordion.assistiveTextFontFamily}; + font-size: ${(props) => props.theme.accordion.assistiveTextFontSize}; + font-style: ${(props) => props.theme.accordion.assistiveTextFontStyle}; + font-weight: ${(props) => props.theme.accordion.assistiveTextFontWeight}; + letter-spacing: ${(props) => props.theme.accordion.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 index aedf700d5c..74ca9ed347 100644 --- a/packages/lib/src/image/Image.tsx +++ b/packages/lib/src/image/Image.tsx @@ -1,6 +1,5 @@ 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 => ( @@ -30,17 +29,7 @@ const DxcImage = ({ wrapper={(children: React.ReactNode) => (
{children} - - {caption} - + {caption}
)} > @@ -73,4 +62,13 @@ const Figure = styled.figure` 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}; +`; + export default DxcImage; diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index 10082c17f3..be135e7cb2 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -4,7 +4,6 @@ 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"; @@ -60,7 +59,7 @@ const DxcTab = forwardRef( )} - {children} - + {notificationNumber && !disabled && ( ` + display: "inline"; + color: ${(props) => props.color}; + font-family: ${(props) => props.fontFamily}; + font-size: ${(props) => props.fontSize}; + font-style: ${(props) => props.fontStyle}; + font-weight: ${(props) => props.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 index 8a8066e1c8..b2afb7f591 100644 --- a/packages/lib/src/paragraph/Paragraph.tsx +++ b/packages/lib/src/paragraph/Paragraph.tsx @@ -1,20 +1,34 @@ +import styled from "styled-components"; import useTheme from "../useTheme"; -import BaseTypography from "../utils/BaseTypography"; const DxcParagraph = ({ children }: { children: React.ReactNode }): JSX.Element => { const colorsTheme = useTheme(); return ( - {children} - + ); }; +const ParagraphContainer = styled.p<{ display: string; fontSize: string; fontWeight: string; fontColor: string }>` + display: ${(props) => props.display}; + font-size: ${(props) => props.fontSize}; + font-style: "normal"; + font-weight: ${(props) => props.fontWeight}; + letter-spacing: 0em; + line-height: 1.5em; + text-align: "left"; + color: ${(props) => props.fontColor}; + text-decoration: none; + text-overflow: unset; + white-space: normal; + margin: 0; +`; + export default DxcParagraph; diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx index a355e9565b..b46f6e14b0 100644 --- a/packages/lib/src/tabs/Tab.tsx +++ b/packages/lib/src/tabs/Tab.tsx @@ -4,7 +4,6 @@ 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"; @@ -99,7 +98,7 @@ const DxcTab = forwardRef( {typeof icon === "string" ? : icon} )} - {label} - + {notificationNumber && !disabled && ( @@ -228,6 +224,28 @@ const MainLabelContainer = styled.div<{ : "unset"}; `; +const LabelContainer = styled.span<{ + color: string; + fontFamily: string; + fontSize: string; + fontStyle: string; + fontWeight: string; +}>` + display: "inline"; + color: ${(props) => props.color}; + font-family: ${(props) => props.fontFamily}; + font-size: ${(props) => props.fontSize}; + font-style: ${(props) => props.fontStyle}; + font-weight: ${(props) => props.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"]; diff --git a/packages/lib/src/tabs/TabLegacy.tsx b/packages/lib/src/tabs/TabLegacy.tsx index 11145bad5b..b5b81538b1 100644 --- a/packages/lib/src/tabs/TabLegacy.tsx +++ b/packages/lib/src/tabs/TabLegacy.tsx @@ -3,7 +3,6 @@ import styled from "styled-components"; import DxcBadge from "../badge/Badge"; import DxcIcon from "../icon/Icon"; import useTheme from "../useTheme"; -import BaseTypography from "../utils/BaseTypography"; import { TabPropsLegacy } from "./types"; const Tab = forwardRef( @@ -44,7 +43,7 @@ const Tab = forwardRef( {typeof tab.icon === "string" ? : tab.icon} )} - {tab.label} - + {tab.notificationNumber && !tab.isDisabled && ( @@ -170,6 +166,28 @@ const MainLabelContainer = styled.div<{ : "unset"}; `; +const LabelContainer = styled.span<{ + color: string; + fontFamily: string; + fontSize: string; + fontStyle: string; + fontWeight: string; +}>` + display: "inline"; + color: ${(props) => props.color}; + font-family: ${(props) => props.fontFamily}; + font-size: ${(props) => props.fontSize}; + font-style: ${(props) => props.fontStyle}; + font-weight: ${(props) => props.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: TabPropsLegacy["hasLabelAndIcon"]; iconPosition: TabPropsLegacy["iconPosition"]; diff --git a/packages/lib/src/typography/Typography.tsx b/packages/lib/src/typography/Typography.tsx index 2d812b8ab1..79aef53811 100644 --- a/packages/lib/src/typography/Typography.tsx +++ b/packages/lib/src/typography/Typography.tsx @@ -1,14 +1,95 @@ -import BaseTypography from "../utils/BaseTypography"; +import React, { useContext } from "react"; +import styled from "styled-components"; import TypographyPropsTypes from "./types"; +import TypographyContextPropTypes from "./types"; -const DxcTypography = ({ textOverflow, whiteSpace, children, ...props }: TypographyPropsTypes): JSX.Element => ( - - {children} - -); +const TypographyContext = React.createContext(null); +const DxcTypography = ({ + as, + display, + fontFamily, + fontSize, + fontStyle, + fontWeight, + letterSpacing, + lineHeight, + textAlign, + color, + textDecoration, + textOverflow, + whiteSpace, + children, +}: TypographyPropsTypes): JSX.Element => { + const componentContext = useContext(TypographyContext); + const asValue = as ?? (componentContext?.as || "span"); + const displayValue = display ?? (componentContext?.display || "inline"); + const fontFamilyValue = fontFamily ?? (componentContext?.fontFamily || "Open Sans, sans-serif"); + const fontSizeValue = fontSize ?? (componentContext?.fontSize || "1rem"); + const fontStyleValue = fontStyle ?? (componentContext?.fontStyle || "normal"); + const fontWeightValue = fontWeight ?? (componentContext?.fontWeight || "400"); + const letterSpacingValue = letterSpacing ?? (componentContext?.letterSpacing || "0em"); + const lineHeightValue = lineHeight ?? (componentContext?.lineHeight || "1.5em"); + const textAlignValue = textAlign ?? (componentContext?.textAlign || "left"); + const colorValue = color ?? (componentContext?.color || "#000000"); + const textDecorationValue = textDecoration ?? (componentContext?.textDecoration || "none"); + const textOverflowValue = textOverflow ?? (componentContext?.textOverflow || "unset"); + const whiteSpaceValue = whiteSpace ?? (componentContext?.whiteSpace || "normal"); + const childrenValue = children || undefined; + return ( + + + {children} + + + ); +}; +const StyledTypography = styled.span` + margin: 0px; + display: ${({ display }) => display}; + color: ${({ color }) => color}; + font-family: ${({ fontFamily }) => fontFamily}; + font-size: ${({ fontSize }) => fontSize}; + font-style: ${({ fontStyle }) => fontStyle}; + font-weight: ${({ fontWeight }) => fontWeight}; + letter-spacing: ${({ letterSpacing }) => letterSpacing}; + text-align: ${({ textAlign }) => textAlign}; + line-height: ${({ lineHeight }) => lineHeight}; + text-decoration: ${({ textDecoration }) => textDecoration}; + text-overflow: ${({ textOverflow }) => textOverflow}; + white-space: ${({ whiteSpace, textOverflow }) => + whiteSpace !== "normal" ? whiteSpace : textOverflow !== "unset" ? "nowrap" : "normal"}; + overflow: ${({ textOverflow }) => (textOverflow !== "unset" ? "hidden" : "visible")}; +`; export default DxcTypography; diff --git a/packages/lib/src/utils/BaseTypography.tsx b/packages/lib/src/utils/BaseTypography.tsx deleted file mode 100644 index 9671e979d3..0000000000 --- a/packages/lib/src/utils/BaseTypography.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { createContext, useContext, useMemo } from "react"; -import styled from "styled-components"; - -type TypographyContextProps = { - as?: keyof HTMLElementTagNameMap; - display?: string; - fontFamily?: string; - fontSize?: string; - fontStyle?: string; - fontWeight?: string; - letterSpacing?: string; - lineHeight?: string; - textAlign?: string; - color?: string; - textDecoration?: string; - textOverflow?: string; - whiteSpace?: string; -}; - -const TypographyContext = createContext(null); - -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, - fontFamily, - fontSize, - fontStyle, - fontWeight, - letterSpacing, - lineHeight, - textAlign, - color, - textDecoration, - textOverflow, - whiteSpace, - children, -}: BaseTypographyProps): JSX.Element => { - const componentContext = useContext(TypographyContext); - const contextValue = useMemo( - () => ({ - 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", - fontStyle: fontStyle ?? componentContext?.fontStyle ?? "normal", - fontWeight: fontWeight ?? componentContext?.fontWeight ?? "400", - letterSpacing: letterSpacing ?? componentContext?.letterSpacing ?? "0em", - lineHeight: lineHeight ?? componentContext?.lineHeight ?? "1.5em", - textAlign: textAlign ?? componentContext?.textAlign ?? "left", - color: color ?? componentContext?.color ?? "#000000", - textDecoration: textDecoration ?? componentContext?.textDecoration ?? "none", - textOverflow: textOverflow ?? componentContext?.textOverflow ?? "unset", - whiteSpace: whiteSpace ?? componentContext?.whiteSpace ?? "normal", - }), - [ - as, - display, - fontFamily, - fontSize, - fontStyle, - fontWeight, - letterSpacing, - lineHeight, - textAlign, - color, - textDecoration, - textOverflow, - whiteSpace, - ] - ); - - return ( - - {children} - - ); -}; - -const StyledTypography = styled.span` - display: ${({ display }) => display}; - color: ${({ color }) => color}; - font-family: ${({ fontFamily }) => fontFamily}; - font-size: ${({ fontSize }) => fontSize}; - font-style: ${({ fontStyle }) => fontStyle}; - font-weight: ${({ fontWeight }) => fontWeight}; - letter-spacing: ${({ letterSpacing }) => letterSpacing}; - line-height: ${({ lineHeight }) => lineHeight}; - text-align: ${({ textAlign }) => textAlign}; - text-decoration: ${({ textDecoration }) => textDecoration}; - text-overflow: ${({ textOverflow }) => textOverflow}; - white-space: ${({ whiteSpace }) => whiteSpace}; - overflow: ${({ textOverflow }) => (textOverflow !== "unset" ? "hidden" : "visible")}; - margin: 0; -`; - -export default BaseTypography; From d213b1cdec0c71fae184c9bf7f54c3bb5f7bdf3e Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 Dec 2024 13:12:29 +0100 Subject: [PATCH 02/10] package-lock updated --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index a7daf7e30a..0481ca11d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "styled-components": "^5.3.3" }, "devDependencies": { + "@dxc-technology/typescript-config": "*", "@types/node": "^20", "@types/react": "^18", "@types/react-color": "^3.0.6", From 4639fc9429809a51ec41115808e66b42c5eec3d0 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 Dec 2024 13:27:11 +0100 Subject: [PATCH 03/10] removed typo --- packages/lib/src/accordion/Accordion.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/accordion/Accordion.tsx b/packages/lib/src/accordion/Accordion.tsx index 8d49f64ff7..23ccbc5eb9 100644 --- a/packages/lib/src/accordion/Accordion.tsx +++ b/packages/lib/src/accordion/Accordion.tsx @@ -166,11 +166,11 @@ const AccordionAssistiveText = styled.span<{ disabled: boolean }>` padding-right: ${(props) => props.theme.assistiveTextPaddingRight}; color: ${(props) => props.disabled ? props.theme.disabledAssistiveTextFontColor : props.theme.assistiveTextFontColor}; - font-family: ${(props) => props.theme.accordion.assistiveTextFontFamily}; - font-size: ${(props) => props.theme.accordion.assistiveTextFontSize}; - font-style: ${(props) => props.theme.accordion.assistiveTextFontStyle}; - font-weight: ${(props) => props.theme.accordion.assistiveTextFontWeight}; - letter-spacing: ${(props) => props.theme.accordion.assistiveTextLetterSpacing}; + 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; `; From 78d7a847dfdbfd297c4406f78a9d0830b7b1cc04 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 Dec 2024 13:39:52 +0100 Subject: [PATCH 04/10] Adding font family back to paragraph --- packages/lib/src/paragraph/Paragraph.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/lib/src/paragraph/Paragraph.tsx b/packages/lib/src/paragraph/Paragraph.tsx index b2afb7f591..364112653d 100644 --- a/packages/lib/src/paragraph/Paragraph.tsx +++ b/packages/lib/src/paragraph/Paragraph.tsx @@ -18,6 +18,7 @@ const DxcParagraph = ({ children }: { children: React.ReactNode }): JSX.Element const ParagraphContainer = styled.p<{ display: string; fontSize: string; fontWeight: string; fontColor: string }>` display: ${(props) => props.display}; + font-family: "Open Sans, sans-serif"; font-size: ${(props) => props.fontSize}; font-style: "normal"; font-weight: ${(props) => props.fontWeight}; From 17f8e2d21d0cf830541368a0aa2408049ff16f2b Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 Dec 2024 13:43:17 +0100 Subject: [PATCH 05/10] property quotes typo --- packages/lib/src/paragraph/Paragraph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/paragraph/Paragraph.tsx b/packages/lib/src/paragraph/Paragraph.tsx index 364112653d..a7979115c6 100644 --- a/packages/lib/src/paragraph/Paragraph.tsx +++ b/packages/lib/src/paragraph/Paragraph.tsx @@ -18,7 +18,7 @@ const DxcParagraph = ({ children }: { children: React.ReactNode }): JSX.Element const ParagraphContainer = styled.p<{ display: string; fontSize: string; fontWeight: string; fontColor: string }>` display: ${(props) => props.display}; - font-family: "Open Sans, sans-serif"; + font-family: "Open Sans", sans-serif; font-size: ${(props) => props.fontSize}; font-style: "normal"; font-weight: ${(props) => props.fontWeight}; From e9703cfb70bcf9521e8c809ffe6716365e92b0fd Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 Dec 2024 13:59:08 +0100 Subject: [PATCH 06/10] unnecessary quotes removed --- packages/lib/src/nav-tabs/Tab.tsx | 14 +++++++------- packages/lib/src/tabs/Tab.tsx | 14 +++++++------- packages/lib/src/tabs/TabLegacy.tsx | 14 +++++++------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index be135e7cb2..adc3522cc4 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -140,18 +140,18 @@ const LabelContainer = styled.span<{ fontStyle: string; fontWeight: string; }>` - display: "inline"; + display: inline; color: ${(props) => props.color}; font-family: ${(props) => props.fontFamily}; font-size: ${(props) => props.fontSize}; font-style: ${(props) => props.fontStyle}; font-weight: ${(props) => props.fontWeight}; - text-align: "center"; - letter-spacing: "0.025em"; - line-height: "1.715em"; - text-decoration: "none"; - text-overflow: "unset"; - white-space: "normal"; + text-align: center; + letter-spacing: 0.025em; + line-height: 1.715em; + text-decoration: none; + text-overflow: unset; + white-space: normal; margin: 0; `; diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx index b46f6e14b0..b13d10d722 100644 --- a/packages/lib/src/tabs/Tab.tsx +++ b/packages/lib/src/tabs/Tab.tsx @@ -231,18 +231,18 @@ const LabelContainer = styled.span<{ fontStyle: string; fontWeight: string; }>` - display: "inline"; + display: inline; color: ${(props) => props.color}; font-family: ${(props) => props.fontFamily}; font-size: ${(props) => props.fontSize}; font-style: ${(props) => props.fontStyle}; font-weight: ${(props) => props.fontWeight}; - text-align: "center"; - letter-spacing: "0.025em"; - line-height: "1.715em"; - text-decoration: "none"; - text-overflow: "unset"; - white-space: "normal"; + text-align: center; + letter-spacing: 0.025em; + line-height: 1.715em; + text-decoration: none; + text-overflow: unset; + white-space: normal; margin: 0; `; diff --git a/packages/lib/src/tabs/TabLegacy.tsx b/packages/lib/src/tabs/TabLegacy.tsx index b5b81538b1..47fbc17e15 100644 --- a/packages/lib/src/tabs/TabLegacy.tsx +++ b/packages/lib/src/tabs/TabLegacy.tsx @@ -173,18 +173,18 @@ const LabelContainer = styled.span<{ fontStyle: string; fontWeight: string; }>` - display: "inline"; + display: inline; color: ${(props) => props.color}; font-family: ${(props) => props.fontFamily}; font-size: ${(props) => props.fontSize}; font-style: ${(props) => props.fontStyle}; font-weight: ${(props) => props.fontWeight}; - text-align: "center"; - letter-spacing: "0.025em"; - line-height: "1.715em"; - text-decoration: "none"; - text-overflow: "unset"; - white-space: "normal"; + text-align: center; + letter-spacing: 0.025em; + line-height: 1.715em; + text-decoration: none; + text-overflow: unset; + white-space: normal; margin: 0; `; From e14e2b8a816adbe77f41c0680b2f3450269ffd9d Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 Dec 2024 16:44:18 +0100 Subject: [PATCH 07/10] typography validity check --- packages/lib/src/typography/Typography.tsx | 27 +++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/typography/Typography.tsx b/packages/lib/src/typography/Typography.tsx index 79aef53811..62c8117e8a 100644 --- a/packages/lib/src/typography/Typography.tsx +++ b/packages/lib/src/typography/Typography.tsx @@ -5,6 +5,31 @@ import TypographyContextPropTypes from "./types"; const TypographyContext = React.createContext(null); +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 DxcTypography = ({ as, display, @@ -22,7 +47,7 @@ const DxcTypography = ({ children, }: TypographyPropsTypes): JSX.Element => { const componentContext = useContext(TypographyContext); - const asValue = as ?? (componentContext?.as || "span"); + const asValue = isValidTypography(as) ? as : isValidTypography(componentContext?.as) ? componentContext?.as : "span"; const displayValue = display ?? (componentContext?.display || "inline"); const fontFamilyValue = fontFamily ?? (componentContext?.fontFamily || "Open Sans, sans-serif"); const fontSizeValue = fontSize ?? (componentContext?.fontSize || "1rem"); From 1cf67668253f1cf30a67b85475e6c36078275c4c Mon Sep 17 00:00:00 2001 From: Jialecl Date: Thu, 5 Dec 2024 12:22:03 +0100 Subject: [PATCH 08/10] Added changes and improvements based on feedback --- packages/lib/src/accordion/Accordion.tsx | 4 +- packages/lib/src/nav-tabs/Tab.tsx | 36 +++----- packages/lib/src/paragraph/Paragraph.tsx | 23 ++---- packages/lib/src/tabs/Tab.tsx | 37 ++++----- packages/lib/src/tabs/TabLegacy.tsx | 36 +++----- packages/lib/src/typography/Typography.tsx | 96 +++++++++------------- packages/lib/src/typography/types.ts | 27 +++--- 7 files changed, 107 insertions(+), 152 deletions(-) diff --git a/packages/lib/src/accordion/Accordion.tsx b/packages/lib/src/accordion/Accordion.tsx index 23ccbc5eb9..e65d0218f5 100644 --- a/packages/lib/src/accordion/Accordion.tsx +++ b/packages/lib/src/accordion/Accordion.tsx @@ -133,7 +133,7 @@ const AccordionInfo = styled.span` width: 100%; `; -const AccordionLabel = styled.span<{ disabled: boolean }>` +const AccordionLabel = styled.span<{ disabled: AccordionPropsType["disabled"] }>` display: flex; padding-top: ${(props) => props.theme.titleLabelPaddingTop}; padding-bottom: ${(props) => props.theme.titleLabelPaddingBottom}; @@ -160,7 +160,7 @@ const IconContainer = styled.span<{ disabled: AccordionPropsType["disabled"] }>` } `; -const AccordionAssistiveText = styled.span<{ disabled: boolean }>` +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}; diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index adc3522cc4..fa93d0d636 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -59,19 +59,7 @@ const DxcTab = forwardRef( )} - + {children} {notificationNumber && !disabled && ( @@ -134,18 +122,20 @@ const Tab = styled.a<{ `; const LabelContainer = styled.span<{ - color: string; - fontFamily: string; - fontSize: string; - fontStyle: string; - fontWeight: string; + disabled: TabProps["disabled"]; + active: TabProps["active"]; }>` display: inline; - color: ${(props) => props.color}; - font-family: ${(props) => props.fontFamily}; - font-size: ${(props) => props.fontSize}; - font-style: ${(props) => props.fontStyle}; - font-weight: ${(props) => props.fontWeight}; + 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; diff --git a/packages/lib/src/paragraph/Paragraph.tsx b/packages/lib/src/paragraph/Paragraph.tsx index a7979115c6..6813ac7539 100644 --- a/packages/lib/src/paragraph/Paragraph.tsx +++ b/packages/lib/src/paragraph/Paragraph.tsx @@ -1,31 +1,26 @@ -import styled from "styled-components"; +import styled, { ThemeProvider } from "styled-components"; import useTheme from "../useTheme"; const DxcParagraph = ({ children }: { children: React.ReactNode }): JSX.Element => { const colorsTheme = useTheme(); return ( - - {children} - + + {children} + ); }; -const ParagraphContainer = styled.p<{ display: string; fontSize: string; fontWeight: string; fontColor: string }>` - display: ${(props) => props.display}; +const ParagraphContainer = styled.p` + display: ${(props) => props.theme.display}; font-family: "Open Sans", sans-serif; - font-size: ${(props) => props.fontSize}; + font-size: ${(props) => props.theme.fontSize}; font-style: "normal"; - font-weight: ${(props) => props.fontWeight}; + font-weight: ${(props) => props.theme.fontWeight}; letter-spacing: 0em; line-height: 1.5em; text-align: "left"; - color: ${(props) => props.fontColor}; + color: ${(props) => props.theme.fontColor}; text-decoration: none; text-overflow: unset; white-space: normal; diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx index b13d10d722..a0b1f2b950 100644 --- a/packages/lib/src/tabs/Tab.tsx +++ b/packages/lib/src/tabs/Tab.tsx @@ -98,19 +98,7 @@ const DxcTab = forwardRef( {typeof icon === "string" ? : icon} )} - + {label} @@ -225,18 +213,21 @@ const MainLabelContainer = styled.div<{ `; const LabelContainer = styled.span<{ - color: string; - fontFamily: string; - fontSize: string; - fontStyle: string; - fontWeight: string; + disabled: TabProps["disabled"]; + label: TabProps["label"]; + activeLabel: string; }>` display: inline; - color: ${(props) => props.color}; - font-family: ${(props) => props.fontFamily}; - font-size: ${(props) => props.fontSize}; - font-style: ${(props) => props.fontStyle}; - font-weight: ${(props) => props.fontWeight}; + 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; diff --git a/packages/lib/src/tabs/TabLegacy.tsx b/packages/lib/src/tabs/TabLegacy.tsx index 47fbc17e15..65ebaaf60c 100644 --- a/packages/lib/src/tabs/TabLegacy.tsx +++ b/packages/lib/src/tabs/TabLegacy.tsx @@ -43,19 +43,7 @@ const Tab = forwardRef( {typeof tab.icon === "string" ? : tab.icon} )} - + {tab.label} @@ -167,18 +155,20 @@ const MainLabelContainer = styled.div<{ `; const LabelContainer = styled.span<{ - color: string; - fontFamily: string; - fontSize: string; - fontStyle: string; - fontWeight: string; + disabled: TabPropsLegacy["tab"]["isDisabled"]; + active: TabPropsLegacy["active"]; }>` display: inline; - color: ${(props) => props.color}; - font-family: ${(props) => props.fontFamily}; - font-size: ${(props) => props.fontSize}; - font-style: ${(props) => props.fontStyle}; - font-weight: ${(props) => props.fontWeight}; + 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.disabled ? props.theme.disabledFontStyle : props.theme.fontStyle)}; + font-weight: ${(props) => (props.active ? props.theme.pressedFontWeight : props.theme.fontWeight)}; text-align: center; letter-spacing: 0.025em; line-height: 1.715em; diff --git a/packages/lib/src/typography/Typography.tsx b/packages/lib/src/typography/Typography.tsx index 62c8117e8a..4fec9eb018 100644 --- a/packages/lib/src/typography/Typography.tsx +++ b/packages/lib/src/typography/Typography.tsx @@ -1,11 +1,10 @@ -import React, { useContext } from "react"; +import React, { useContext, useMemo } from "react"; import styled from "styled-components"; -import TypographyPropsTypes from "./types"; -import TypographyContextPropTypes from "./types"; +import TypographyPropsTypes, { TypographyContextProps } from "./types"; -const TypographyContext = React.createContext(null); +const TypographyContext = React.createContext(null); -const ValidTypographyTags = [ +const validTypographyTags = [ "a", "blockquote", "cite", @@ -27,7 +26,7 @@ const ValidTypographyTags = [ ]; const isValidTypography = (tag: keyof HTMLElementTagNameMap) => { - return ValidTypographyTags.includes(tag); + return validTypographyTags.includes(tag); }; const DxcTypography = ({ @@ -47,59 +46,46 @@ const DxcTypography = ({ children, }: TypographyPropsTypes): JSX.Element => { const componentContext = useContext(TypographyContext); - const asValue = isValidTypography(as) ? as : isValidTypography(componentContext?.as) ? componentContext?.as : "span"; - const displayValue = display ?? (componentContext?.display || "inline"); - const fontFamilyValue = fontFamily ?? (componentContext?.fontFamily || "Open Sans, sans-serif"); - const fontSizeValue = fontSize ?? (componentContext?.fontSize || "1rem"); - const fontStyleValue = fontStyle ?? (componentContext?.fontStyle || "normal"); - const fontWeightValue = fontWeight ?? (componentContext?.fontWeight || "400"); - const letterSpacingValue = letterSpacing ?? (componentContext?.letterSpacing || "0em"); - const lineHeightValue = lineHeight ?? (componentContext?.lineHeight || "1.5em"); - const textAlignValue = textAlign ?? (componentContext?.textAlign || "left"); - const colorValue = color ?? (componentContext?.color || "#000000"); - const textDecorationValue = textDecoration ?? (componentContext?.textDecoration || "none"); - const textOverflowValue = textOverflow ?? (componentContext?.textOverflow || "unset"); - const whiteSpaceValue = whiteSpace ?? (componentContext?.whiteSpace || "normal"); - const childrenValue = children || undefined; + const contextValue = useMemo( + () => ({ + 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", + fontStyle: fontStyle ?? componentContext?.fontStyle ?? "normal", + fontWeight: fontWeight ?? componentContext?.fontWeight ?? "400", + letterSpacing: letterSpacing ?? componentContext?.letterSpacing ?? "0em", + lineHeight: lineHeight ?? componentContext?.lineHeight ?? "1.5em", + textAlign: textAlign ?? componentContext?.textAlign ?? "left", + color: color ?? componentContext?.color ?? "#000000", + textDecoration: textDecoration ?? componentContext?.textDecoration ?? "none", + textOverflow: textOverflow ?? componentContext?.textOverflow ?? "unset", + whiteSpace: whiteSpace ?? componentContext?.whiteSpace ?? "normal", + }), + [ + as, + display, + fontFamily, + fontSize, + fontStyle, + fontWeight, + letterSpacing, + lineHeight, + textAlign, + color, + textDecoration, + textOverflow, + whiteSpace, + ] + ); + return ( - - - {children} - + + {children} ); }; + const StyledTypography = styled.span` margin: 0px; display: ${({ display }) => display}; diff --git a/packages/lib/src/typography/types.ts b/packages/lib/src/typography/types.ts index b9e25fcce6..b68f9fe625 100644 --- a/packages/lib/src/typography/types.ts +++ b/packages/lib/src/typography/types.ts @@ -1,17 +1,20 @@ -type Props = { +export type TypographyContextProps = { as?: keyof HTMLElementTagNameMap; - display?: "inline" | "block"; - fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace"; - fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem"; - fontStyle?: "italic" | "normal"; - fontWeight?: "300" | "400" | "600" | "700"; - letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em"; - lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em"; - textAlign?: "left" | "center" | "right"; + display?: string; + fontFamily?: string; + fontSize?: string; + fontStyle?: string; + fontWeight?: string; + letterSpacing?: string; + lineHeight?: string; + textAlign?: string; color?: string; - textDecoration?: "none" | "underline" | "line-through"; - textOverflow?: "clip" | "ellipsis" | "unset"; - whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"; + textDecoration?: string; + textOverflow?: string; + whiteSpace?: string; +}; + +type Props = TypographyContextProps & { children: React.ReactNode; }; From 8ea3713341b019a0b8885449e2492ef9ec218d4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Thu, 5 Dec 2024 13:15:48 +0100 Subject: [PATCH 09/10] Typography updates --- packages/lib/src/image/Image.tsx | 46 ++++++----- packages/lib/src/nav-tabs/Tab.tsx | 8 +- packages/lib/src/paragraph/Paragraph.tsx | 22 +++--- packages/lib/src/tabs/Tab.tsx | 9 +-- packages/lib/src/tabs/TabLegacy.tsx | 89 ++++++++++------------ packages/lib/src/typography/Typography.tsx | 79 +++++++------------ packages/lib/src/typography/types.ts | 33 ++++---- 7 files changed, 124 insertions(+), 162 deletions(-) diff --git a/packages/lib/src/image/Image.tsx b/packages/lib/src/image/Image.tsx index 74ca9ed347..122d01f242 100644 --- a/packages/lib/src/image/Image.tsx +++ b/packages/lib/src/image/Image.tsx @@ -2,11 +2,29 @@ import styled, { ThemeProvider } from "styled-components"; import useTheme from "../useTheme"; 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, @@ -19,7 +37,7 @@ const DxcImage = ({ objectPosition, onLoad, onError, -}: ImagePropsType) => { +}: ImagePropsType) { const colorsTheme = useTheme(); return ( @@ -51,24 +69,4 @@ const DxcImage = ({ ); -}; - -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}; -`; - -export default DxcImage; +} diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx index fa93d0d636..2d094a09b2 100644 --- a/packages/lib/src/nav-tabs/Tab.tsx +++ b/packages/lib/src/nav-tabs/Tab.tsx @@ -3,7 +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 { NavTabsContext } from "./NavTabsContext"; import NavTabsPropsType, { TabProps } from "./types"; @@ -13,7 +12,6 @@ const DxcTab = forwardRef( ref: Ref ): JSX.Element => { const tabRef = useRef(); - const colorsTheme = useTheme(); const { iconPosition, tabIndex, focusedLabel } = useContext(NavTabsContext); useEffect(() => { @@ -59,9 +57,9 @@ const DxcTab = forwardRef( )} - + + {notificationNumber && !disabled && ( ` diff --git a/packages/lib/src/paragraph/Paragraph.tsx b/packages/lib/src/paragraph/Paragraph.tsx index 6813ac7539..dc811eeafa 100644 --- a/packages/lib/src/paragraph/Paragraph.tsx +++ b/packages/lib/src/paragraph/Paragraph.tsx @@ -1,17 +1,7 @@ import styled, { ThemeProvider } from "styled-components"; import useTheme from "../useTheme"; -const DxcParagraph = ({ children }: { children: React.ReactNode }): JSX.Element => { - const colorsTheme = useTheme(); - - return ( - - {children} - - ); -}; - -const ParagraphContainer = styled.p` +const Paragraph = styled.p` display: ${(props) => props.theme.display}; font-family: "Open Sans", sans-serif; font-size: ${(props) => props.theme.fontSize}; @@ -27,4 +17,12 @@ const ParagraphContainer = styled.p` margin: 0; `; -export default DxcParagraph; +export default function DxcParagraph({ children }: { children: React.ReactNode }) { + const colorsTheme = useTheme(); + + return ( + + {children} + + ); +} diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx index a0b1f2b950..fb3fecd9b3 100644 --- a/packages/lib/src/tabs/Tab.tsx +++ b/packages/lib/src/tabs/Tab.tsx @@ -3,7 +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 { TabsContext } from "./TabsContext"; import { TabProps, TabsContextProps } from "./types"; @@ -22,7 +21,7 @@ const DxcTab = forwardRef( ref: Ref ): JSX.Element => { const tabRef = useRef(); - const colorsTheme = useTheme(); + const { iconPosition, tabIndex, @@ -98,9 +97,9 @@ const DxcTab = forwardRef( {typeof icon === "string" ? : icon} )} - + + {notificationNumber && !disabled && ( @@ -212,7 +211,7 @@ const MainLabelContainer = styled.div<{ : "unset"}; `; -const LabelContainer = styled.span<{ +const Label = styled.span<{ disabled: TabProps["disabled"]; label: TabProps["label"]; activeLabel: string; diff --git a/packages/lib/src/tabs/TabLegacy.tsx b/packages/lib/src/tabs/TabLegacy.tsx index 65ebaaf60c..ec96d61392 100644 --- a/packages/lib/src/tabs/TabLegacy.tsx +++ b/packages/lib/src/tabs/TabLegacy.tsx @@ -2,63 +2,58 @@ import { forwardRef, memo } from "react"; import styled from "styled-components"; import DxcBadge from "../badge/Badge"; import DxcIcon from "../icon/Icon"; -import useTheme from "../useTheme"; import { TabPropsLegacy } from "./types"; const Tab = forwardRef( ( { active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }: TabPropsLegacy, ref: React.Ref - ): JSX.Element => { - const colorsTheme = useTheme(); - - return ( - ( + { + onClick(); + }} + onMouseEnter={() => { + onMouseEnter(); + }} + onMouseLeave={() => { + onMouseLeave(); + }} + > + { - onClick(); - }} - onMouseEnter={() => { - onMouseEnter(); - }} - onMouseLeave={() => { - onMouseLeave(); - }} + disabled={tab.isDisabled} > - - {tab.icon && ( - - {typeof tab.icon === "string" ? : tab.icon} - - )} - - {tab.label} - - - {tab.notificationNumber && !tab.isDisabled && ( - - - + {tab.icon && ( + + {typeof tab.icon === "string" ? : tab.icon} + )} - - ); - } + + {tab.label} + + + {tab.notificationNumber && !tab.isDisabled && ( + + + + )} + + ) ); const TabContainer = styled.button<{ diff --git a/packages/lib/src/typography/Typography.tsx b/packages/lib/src/typography/Typography.tsx index 4fec9eb018..3271ff698f 100644 --- a/packages/lib/src/typography/Typography.tsx +++ b/packages/lib/src/typography/Typography.tsx @@ -2,35 +2,30 @@ import React, { useContext, useMemo } from "react"; import styled from "styled-components"; import TypographyPropsTypes, { TypographyContextProps } from "./types"; -const TypographyContext = React.createContext(null); - -const validTypographyTags = [ - "a", - "blockquote", - "cite", - "code", - "div", - "em", - "figcaption", - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "p", - "pre", - "small", - "span", - "strong", -]; +const Typography = styled.span` + margin: 0px; + display: ${({ display }) => display}; + color: ${({ color }) => color}; + font-family: ${({ fontFamily }) => fontFamily}; + font-size: ${({ fontSize }) => fontSize}; + font-style: ${({ fontStyle }) => fontStyle}; + font-weight: ${({ fontWeight }) => fontWeight}; + letter-spacing: ${({ letterSpacing }) => letterSpacing}; + text-align: ${({ textAlign }) => textAlign}; + line-height: ${({ lineHeight }) => lineHeight}; + text-decoration: ${({ textDecoration }) => textDecoration}; + text-overflow: ${({ textOverflow }) => textOverflow}; + white-space: ${({ whiteSpace, textOverflow }) => + whiteSpace !== "normal" ? whiteSpace : textOverflow !== "unset" ? "nowrap" : "normal"}; + overflow: ${({ textOverflow }) => (textOverflow !== "unset" ? "hidden" : "visible")}; +`; -const isValidTypography = (tag: keyof HTMLElementTagNameMap) => { - return validTypographyTags.includes(tag); -}; +const TypographyContext = React.createContext(null); -const DxcTypography = ({ +export default function DxcTypography({ as, + color, + children, display, fontFamily, fontSize, @@ -39,16 +34,15 @@ const DxcTypography = ({ letterSpacing, lineHeight, textAlign, - color, textDecoration, textOverflow, whiteSpace, - children, -}: TypographyPropsTypes): JSX.Element => { +}: TypographyPropsTypes) { const componentContext = useContext(TypographyContext); + const contextValue = useMemo( () => ({ - as: isValidTypography(as) ? as : isValidTypography(componentContext?.as) ? componentContext?.as : "span", + as: as ?? componentContext?.as ?? "span", display: display ?? componentContext?.display ?? "inline", fontFamily: fontFamily ?? componentContext?.fontFamily ?? "Open Sans, sans-serif", fontSize: fontSize ?? componentContext?.fontSize ?? "1rem", @@ -64,6 +58,7 @@ const DxcTypography = ({ }), [ as, + color, display, fontFamily, fontSize, @@ -72,7 +67,6 @@ const DxcTypography = ({ letterSpacing, lineHeight, textAlign, - color, textDecoration, textOverflow, whiteSpace, @@ -81,26 +75,7 @@ const DxcTypography = ({ return ( - {children} + {children} ); -}; - -const StyledTypography = styled.span` - margin: 0px; - display: ${({ display }) => display}; - color: ${({ color }) => color}; - font-family: ${({ fontFamily }) => fontFamily}; - font-size: ${({ fontSize }) => fontSize}; - font-style: ${({ fontStyle }) => fontStyle}; - font-weight: ${({ fontWeight }) => fontWeight}; - letter-spacing: ${({ letterSpacing }) => letterSpacing}; - text-align: ${({ textAlign }) => textAlign}; - line-height: ${({ lineHeight }) => lineHeight}; - text-decoration: ${({ textDecoration }) => textDecoration}; - text-overflow: ${({ textOverflow }) => textOverflow}; - white-space: ${({ whiteSpace, textOverflow }) => - whiteSpace !== "normal" ? whiteSpace : textOverflow !== "unset" ? "nowrap" : "normal"}; - overflow: ${({ textOverflow }) => (textOverflow !== "unset" ? "hidden" : "visible")}; -`; -export default DxcTypography; +} diff --git a/packages/lib/src/typography/types.ts b/packages/lib/src/typography/types.ts index b68f9fe625..ca542e3f63 100644 --- a/packages/lib/src/typography/types.ts +++ b/packages/lib/src/typography/types.ts @@ -1,21 +1,20 @@ -export type TypographyContextProps = { - as?: keyof HTMLElementTagNameMap; - display?: string; - fontFamily?: string; - fontSize?: string; - fontStyle?: string; - fontWeight?: string; - letterSpacing?: string; - lineHeight?: string; - textAlign?: string; - color?: string; - textDecoration?: string; - textOverflow?: string; - whiteSpace?: string; -}; - -type Props = TypographyContextProps & { +export type Props = { + as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong"; children: React.ReactNode; + color?: string; + display?: "inline" | "block"; + fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace"; + fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem"; + fontStyle?: "italic" | "normal"; + fontWeight?: "300" | "400" | "600" | "700"; + letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em"; + lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em"; + textAlign?: "left" | "center" | "right"; + textDecoration?: "none" | "underline" | "line-through"; + textOverflow?: "clip" | "ellipsis" | "unset"; + whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap"; }; export default Props; + +export type TypographyContextProps = Omit; From bc5553306263a40e7c997b19494fc99980a2dc7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Thu, 5 Dec 2024 13:29:33 +0100 Subject: [PATCH 10/10] Removing old test --- packages/lib/src/typography/Typography.test.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/lib/src/typography/Typography.test.tsx b/packages/lib/src/typography/Typography.test.tsx index 61e844dae5..d3574d737b 100644 --- a/packages/lib/src/typography/Typography.test.tsx +++ b/packages/lib/src/typography/Typography.test.tsx @@ -6,9 +6,4 @@ describe("Typography component tests", () => { const { container } = render(Test H1 Text); expect(container.querySelector("h1")).not.toBeNull(); }); - test("Renders as span if it receives invalid tag", () => { - const { container } = render(Test BR Text); - expect(container.querySelector("br")).toBeNull(); - expect(container.querySelector("span")).not.toBeNull(); - }); });