From e089459c6e7b044f815c89094b5080db60d62f1e Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Fri, 31 Jan 2025 15:04:12 +0100 Subject: [PATCH 1/8] Reimplementation of the Badge component with new CSS variables --- packages/lib/src/badge/Badge.tsx | 159 +++++++++++++++++-------------- packages/lib/src/index.ts | 2 +- 2 files changed, 86 insertions(+), 75 deletions(-) diff --git a/packages/lib/src/badge/Badge.tsx b/packages/lib/src/badge/Badge.tsx index 54369e04ca..8f789e23bd 100644 --- a/packages/lib/src/badge/Badge.tsx +++ b/packages/lib/src/badge/Badge.tsx @@ -1,116 +1,96 @@ import styled from "styled-components"; import BadgePropsType from "./types"; -import CoreTokens from "../common/coreTokens"; import DxcIcon from "../icon/Icon"; import { Tooltip } from "../tooltip/Tooltip"; const contextualColorMap = { grey: { - background: CoreTokens.color_grey_200, - text: CoreTokens.color_grey_900, + background: "var(--color-bg-neutral-light)", + text: "var(--color-fg-neutral-strongest)", }, blue: { - background: CoreTokens.color_blue_200, - text: CoreTokens.color_blue_900, + background: "var(--color-bg-secondary-lighter)", + text: "var(--color-fg-secondary-stronger)", }, green: { - background: CoreTokens.color_green_200, - text: CoreTokens.color_green_900, + background: "var(--color-bg-success-lighter)", + text: "var(--color-fg-success-stronger)", }, orange: { - background: CoreTokens.color_orange_200, - text: CoreTokens.color_orange_900, + background: "var(--color-bg-warning-lighter)", + text: "var(--color-fg-warning-stronger)", }, red: { - background: CoreTokens.color_red_200, - text: CoreTokens.color_red_900, + background: "var(--color-bg-error-lighter)", + text: "var(--color-fg-error-stronger)", }, yellow: { - background: CoreTokens.color_yellow_200, - text: CoreTokens.color_yellow_900, + background: "var(--color-bg-yellow-light)", + text: "var(--color-fg-neutral-yellow-dark)", }, purple: { - background: CoreTokens.color_purple_200, - text: CoreTokens.color_purple_900, + background: "var(--color-bg-primary-lighter)", + text: "var(--color-fg-primary-stronger)", }, }; +const notificationColor = { + background: "var(--color-bg-error-strong)", + text: "var(--color-fg-neutral-lightest)", +}; + const sizeMap = { small: { - height: "20px", - width: "20px", + height: "var(--height-xs)", minWidth: "20px", - fontSize: CoreTokens.type_scale_01, - borderRadius: CoreTokens.spacing_12, - iconSize: "14px", + fontSize: "var(--typography-label-s)", + borderRadius: "var(--border-radius-l)", + iconSize: "var(--height-xxxs)", padding: { - contextual: `${CoreTokens.spacing_4}`, - notification: `${CoreTokens.spacing_0} ${CoreTokens.spacing_4}`, + contextual: "var(--spacing-padding-none) var(--spacing-padding-xxs)", + notification: "var(--spacing-padding-xxs)", + notificationLabelled: "var(--spacing-padding-none) var(--spacing-padding-xxs)", }, }, medium: { - height: "24px", - width: "24px", + height: "var(--height-s)", minWidth: "24px", - fontSize: CoreTokens.type_scale_02, - borderRadius: CoreTokens.spacing_12, - iconSize: "16px", + fontSize: "var(--typography-label-m)", + borderRadius: "var(--border-radius-l)", + iconSize: "var(--height-xxs)", padding: { - contextual: `${CoreTokens.spacing_4} ${CoreTokens.spacing_8}`, - notification: `${CoreTokens.spacing_0} ${CoreTokens.spacing_4}`, + contextual: "var(--spacing-padding-xxs) var(--spacing-padding-xs)", + notification: "var(--spacing-padding-xxs)", + notificationLabelled: "var(--spacing-padding-none) var(--spacing-padding-xxs)", }, }, large: { - height: "32px", - width: "32px", + height: "var(--height-m)", minWidth: "32px", - fontSize: CoreTokens.type_scale_04, - borderRadius: CoreTokens.spacing_24, - iconSize: "24px", + fontSize: "var(--typography-label-xl)", + borderRadius: "var(--border-radius-xl)", + iconSize: "var(--height-s)", padding: { - contextual: `${CoreTokens.spacing_4} ${CoreTokens.spacing_8}`, - notification: `${CoreTokens.spacing_0} ${CoreTokens.spacing_8}`, + contextual: "var(--spacing-padding-xxs) var(--spacing-padding-xs)", + notification: "var(--spacing-padding-xxs) var(--spacing-padding-s)", + notificationLabelled: "var(--spacing-padding-none) var(--spacing-padding-s)", }, }, }; -const DxcBadge = ({ - label, - title, - mode = "contextual", - color = "grey", - icon, - notificationLimit = 99, - size = "medium", -}: BadgePropsType): JSX.Element => ( - - - {mode === "contextual" && icon && ( - {typeof icon === "string" ? : icon} - )} - {label && ( - - )} - - -); - const getColor = (mode: BadgePropsType["mode"], color: BadgePropsType["color"]) => - mode === "contextual" && color ? contextualColorMap[color].text : CoreTokens.color_white; + mode === "contextual" && color ? contextualColorMap[color].text : notificationColor.text; const getBackgroundColor = (mode: BadgePropsType["mode"], color: BadgePropsType["color"]) => - mode === "contextual" && color ? contextualColorMap[color].background : CoreTokens.color_red_700; + mode === "contextual" && color ? contextualColorMap[color].background : notificationColor.background; -const getPadding = (mode: BadgePropsType["mode"], size: BadgePropsType["size"]) => - size && (mode === "contextual" ? sizeMap[size].padding.contextual : sizeMap[size].padding.notification); +const getPadding = (mode: BadgePropsType["mode"], size: BadgePropsType["size"], label: BadgePropsType["label"]) => + size && + (mode === "contextual" + ? sizeMap[size].padding.contextual + : label + ? sizeMap[size].padding.notificationLabelled + : sizeMap[size].padding.notification); const BadgeContainer = styled.div<{ label: BadgePropsType["label"]; @@ -120,14 +100,14 @@ const BadgeContainer = styled.div<{ }>` box-sizing: border-box; border-radius: ${(props) => props.size && sizeMap[props.size].borderRadius}; - padding: ${(props) => (props.label ? getPadding(props.mode, props.size) : "")}; + padding: ${(props) => (props.label ? getPadding(props.mode, props.size, props.label) : "")}; width: ${(props) => - !props.label && props.mode === "notification" ? props.size && sizeMap[props.size].width : "fit-content"}; + !props.label && props.mode === "notification" ? props.size && sizeMap[props.size].minWidth : "fit-content"}; min-width: ${(props) => props.mode === "notification" && props.size && sizeMap[props.size].minWidth}; height: ${(props) => props.size && sizeMap[props.size].height}; display: flex; align-items: center; - gap: ${CoreTokens.spacing_2}; + ${(props) => props.mode === "contextual" && "gap: var(--spacing-gap-xxs)"}; justify-content: center; background-color: ${(props) => getBackgroundColor(props.mode, props.color)}; color: ${(props) => getColor(props.mode, props.color)}; @@ -144,10 +124,41 @@ const IconContainer = styled.div<{ size: BadgePropsType["size"] }>` `; const Label = styled.span<{ size: BadgePropsType["size"] }>` - font-family: ${CoreTokens.type_sans}; + font-family: var(--typography-font-family); font-size: ${(props) => props.size && sizeMap[props.size].fontSize}; - font-weight: ${CoreTokens.type_semibold}; + font-style: normal; + font-weight: var(--typography-label-semibold); white-space: nowrap; + line-height: normal; `; +const DxcBadge = ({ + label, + title, + mode = "contextual", + color = "grey", + icon, + notificationLimit = 99, + size = "medium", +}: BadgePropsType): JSX.Element => ( + + + {mode === "contextual" && icon && ( + {typeof icon === "string" ? : icon} + )} + {label && ( + + )} + + +); + export default DxcBadge; diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index fd0fc86ca5..3ded437d20 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -1,5 +1,5 @@ import "./styles/fonts.css"; -// import "./styles/variables.css"; +import "./styles/variables.css"; export { default as DxcAccordion } from "./accordion/Accordion"; export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup"; From 5b6f29470e3644a056ac964bb9bf0255eb8d2ebf Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 5 Feb 2025 16:05:31 +0100 Subject: [PATCH 2/8] Fixed preview for storybook --- packages/lib/.storybook/preview-head.html | 1 - packages/lib/.storybook/preview.tsx | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html index e28cb145ff..4e1ea405ff 100644 --- a/packages/lib/.storybook/preview-head.html +++ b/packages/lib/.storybook/preview-head.html @@ -2,7 +2,6 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1" /> -