From 099977c4b3cbb044f6a9f1284533562a20ccba8d 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: Wed, 14 May 2025 12:32:18 +0200 Subject: [PATCH] Tag component removal --- apps/website/pages/components/tag/index.tsx | 21 -- .../pages/components/tag/specifications.tsx | 21 -- apps/website/pages/components/tag/usage.tsx | 21 -- .../screens/common/componentsList.json | 1 - .../screens/components/tag/TagPageLayout.tsx | 59 ---- .../components/tag/code/TagCodePage.tsx | 162 ---------- .../tag/code/examples/basicUsage.ts | 16 - .../components/tag/code/examples/icons.ts | 27 -- .../components/tag/specs/TagSpecsPage.tsx | 301 ------------------ .../tag/specs/images/tag_anatomy.png | Bin 11468 -> 0 bytes .../components/tag/specs/images/tag_modes.png | Bin 15659 -> 0 bytes .../components/tag/specs/images/tag_specs.png | Bin 15723 -> 0 bytes .../tag/specs/images/tag_states.png | Bin 14074 -> 0 bytes .../components/tag/usage/TagUsagePage.tsx | 53 --- .../tag/usage/examples/iconUsage.ts | 38 --- packages/lib/src/HalstackContext.tsx | 4 - packages/lib/src/common/variables.ts | 21 -- packages/lib/src/index.ts | 1 - .../lib/src/tag/Tag.accessibility.test.tsx | 35 -- packages/lib/src/tag/Tag.stories.tsx | 160 ---------- packages/lib/src/tag/Tag.test.tsx | 26 -- packages/lib/src/tag/Tag.tsx | 182 ----------- packages/lib/src/tag/types.ts | 66 ---- 23 files changed, 1215 deletions(-) delete mode 100644 apps/website/pages/components/tag/index.tsx delete mode 100644 apps/website/pages/components/tag/specifications.tsx delete mode 100644 apps/website/pages/components/tag/usage.tsx delete mode 100644 apps/website/screens/components/tag/TagPageLayout.tsx delete mode 100644 apps/website/screens/components/tag/code/TagCodePage.tsx delete mode 100644 apps/website/screens/components/tag/code/examples/basicUsage.ts delete mode 100644 apps/website/screens/components/tag/code/examples/icons.ts delete mode 100644 apps/website/screens/components/tag/specs/TagSpecsPage.tsx delete mode 100644 apps/website/screens/components/tag/specs/images/tag_anatomy.png delete mode 100644 apps/website/screens/components/tag/specs/images/tag_modes.png delete mode 100644 apps/website/screens/components/tag/specs/images/tag_specs.png delete mode 100644 apps/website/screens/components/tag/specs/images/tag_states.png delete mode 100644 apps/website/screens/components/tag/usage/TagUsagePage.tsx delete mode 100644 apps/website/screens/components/tag/usage/examples/iconUsage.ts delete mode 100644 packages/lib/src/tag/Tag.accessibility.test.tsx delete mode 100644 packages/lib/src/tag/Tag.stories.tsx delete mode 100644 packages/lib/src/tag/Tag.test.tsx delete mode 100644 packages/lib/src/tag/Tag.tsx delete mode 100644 packages/lib/src/tag/types.ts diff --git a/apps/website/pages/components/tag/index.tsx b/apps/website/pages/components/tag/index.tsx deleted file mode 100644 index 9b7a4c2966..0000000000 --- a/apps/website/pages/components/tag/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TagCodePage from "screens/components/tag/code/TagCodePage"; -import TagPageLayout from "screens/components/tag/TagPageLayout"; - -const Index = () => { - return ( - <> - - Tag — Halstack Design System - - - - ); -}; - -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Index; diff --git a/apps/website/pages/components/tag/specifications.tsx b/apps/website/pages/components/tag/specifications.tsx deleted file mode 100644 index a20b6c4a54..0000000000 --- a/apps/website/pages/components/tag/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TagSpecsPage from "screens/components/tag/specs/TagSpecsPage"; -import TagPageLayout from "screens/components/tag/TagPageLayout"; - -const Specifications = () => { - return ( - <> - - Tag Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/tag/usage.tsx b/apps/website/pages/components/tag/usage.tsx deleted file mode 100644 index d8976d0384..0000000000 --- a/apps/website/pages/components/tag/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import TagPageLayout from "screens/components/tag/TagPageLayout"; -import TagUsagePage from "screens/components/tag/usage/TagUsagePage"; - -const Usage = () => { - return ( - <> - - Tag Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 4d2b36ab4f..6037d4c84a 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -107,7 +107,6 @@ { "label": "Switch", "path": "/components/switch", "status": "stable" }, { "label": "Table", "path": "/components/table", "status": "stable" }, { "label": "Tabs", "path": "/components/tabs", "status": "stable" }, - { "label": "Tag", "path": "/components/tag", "status": "deprecated" }, { "label": "Text input", "path": "/components/text-input", diff --git a/apps/website/screens/components/tag/TagPageLayout.tsx b/apps/website/screens/components/tag/TagPageLayout.tsx deleted file mode 100644 index 81d8eda81d..0000000000 --- a/apps/website/screens/components/tag/TagPageLayout.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { DxcParagraph, DxcFlex, DxcAlert, DxcLink } from "@dxc-technology/halstack-react"; -import PageHeading from "@/common/PageHeading"; -import TabsPageHeading from "@/common/TabsPageLayout"; -import ComponentHeading from "@/common/ComponentHeading"; -import Link from "next/link"; -import { ReactNode } from "react"; - -const TagPageHeading = ({ children }: { children: ReactNode }) => { - const tabs = [ - { label: "Code", path: "/components/tag" }, - { label: "Usage", path: "/components/tag/usage" }, - { label: "Specifications", path: "/components/tag/specifications" }, - ]; - - return ( - - - - - - The Tag represents resources and global terms to identify and linked with a text section to provide to the - user more context and information regarding a topic. It usually appears in the top or bottom of the section - and multiple tags can be concatenated to generate a series of resources displayed with a visual hierarchy - that calls the user's attention. - - - This component will be removed from Halstack Design System in the next major release. Please start - considering alternatives such as the{" "} - - Badge - {" "} - , the{" "} - - Button - {" "} - or the{" "} - - Chip - {" "} - components. - - ), - }} - closable={false} - /> - - - - {children} - - ); -}; - -export default TagPageHeading; diff --git a/apps/website/screens/components/tag/code/TagCodePage.tsx b/apps/website/screens/components/tag/code/TagCodePage.tsx deleted file mode 100644 index 1ec8a4a4c0..0000000000 --- a/apps/website/screens/components/tag/code/TagCodePage.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import DocFooter from "@/common/DocFooter"; -import Example from "@/common/example/Example"; -import basicUsage from "./examples/basicUsage"; -import icons from "./examples/icons"; -import Code, { TableCode } from "@/common/Code"; - -const sections = [ - { - title: "Props", - content: ( - - - - Name - Type - Description - Default - - - - - label - - string - - Text to be placed next inside the tag. - - - - - labelPosition - - 'before' | 'after' - - Whether the label should appear after or before the icon. - - 'after' - - - - icon - - string | {"(React.ReactNode & React.SVGProps )"} - - - - Material Symbol - {" "} - name or SVG element as the icon that will be placed next to the label. When using Material Symbols, - replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the - symbol name with "filled_". - - - - - - iconBgColor - - string - - Background color of the icon section of the tag. - - '#5f249f' - - - - linkHref - - string - - - If defined, the tag will be displayed as an anchor, using this prop as its href. The - component will also show some visual feedback when it is hovered. - - - - - - newWindow - - boolean - - If true, the page will be opened in a new browser tab. - - false - - - - onClick - - {"() => void"} - - - If defined, the tag will be displayed as a button. This function will be called when the user clicks the - tag. The component will show some visual feedback when hovered. - - - - - - margin - - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin - - - 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. - - - - - - size - - 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' - - Size of the component. - - 'fitContent' - - - - tabIndex - - number - - - Value of the tabindex attribute. - - - 0 - - - - - ), - }, - { - title: "Examples", - subSections: [ - { - title: "Basic usage", - content: , - }, - { - title: "Icons", - content: , - }, - ], - }, -]; - -const TagCodePage = () => { - return ( - - - - - - - ); -}; - -export default TagCodePage; diff --git a/apps/website/screens/components/tag/code/examples/basicUsage.ts b/apps/website/screens/components/tag/code/examples/basicUsage.ts deleted file mode 100644 index cb6a259c42..0000000000 --- a/apps/website/screens/components/tag/code/examples/basicUsage.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { DxcTag, DxcInset } from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - - - - ); - }`; - -const scope = { - DxcTag, - DxcInset, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/tag/code/examples/icons.ts b/apps/website/screens/components/tag/code/examples/icons.ts deleted file mode 100644 index 5ac733c063..0000000000 --- a/apps/website/screens/components/tag/code/examples/icons.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { DxcTag, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; - -const code = `() => { - const icon = ( - - - - - ); - - return ( - - - - - - - ); -}`; - -const scope = { - DxcTag, - DxcInset, - DxcFlex, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/tag/specs/TagSpecsPage.tsx b/apps/website/screens/components/tag/specs/TagSpecsPage.tsx deleted file mode 100644 index 8b20670e99..0000000000 --- a/apps/website/screens/components/tag/specs/TagSpecsPage.tsx +++ /dev/null @@ -1,301 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react"; -import Figure from "@/common/Figure"; -import Image from "@/common/Image"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; -import specsImage from "./images/tag_specs.png"; -import statesImage from "./images/tag_states.png"; -import anatomyImage from "./images/tag_anatomy.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Tag design specifications -
- ), - }, - { - title: "States", - content: ( - <> -
- Tag states -
- - Also, this component is static, which means that there is only one difference between the default and hover - state, changing the cursor from the default to the pointer cursor. The tag is merely a link to other resource - or a place to display some information, so it is not intended that the flow of the component consider all the - different states. - - - ), - }, - { - title: "Anatomy", - content: ( - <> - Tag anatomy - - Icon - Label - Container - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - <> - - - - Component token - Element - Core token - Value - - - - - - fontColor - - Label - - color-black - - #000000 - - - - iconColor - - Icon - - color-white - - #ffffff - - - - focusColor - - Container - - color-blue-600 - - #0095ff - - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - fontSize - - Label - - font-scale-02 - - 0.875rem / 14px - - - - fontStyle - - Label - - font-style-normal - - normal - - - - fontWeight - - Label - - font-weight-regular - - 400 - - - - ), - }, - { - title: "Shadow", - content: ( - <> - - - - Property - Element - Core token - Value - - - - - - box-shadow - - Container - - shadow-default - - 0 4px 6px -1px rgba(0,0,0,0.1) - - - - box-shadow - - Container:hover - - shadow-high - - 0 8px 14px -2px rgba(0,0,0,0.1) - - - - - * - - The shadow-default token is used for the :enabled, :focus and{" "} - :disabled states. The shadow-high for :hover and{" "} - :active. - - - - ), - }, - { - title: "Spacing", - content: ( - - - - Component token - Element - Core token - Value - - - - - - labelPaddingTop - - Label - - spacing-0 - - 0rem / 0px - - - - labelPaddingBottom - - Label - - spacing-0 - - 0rem / 0px - - - - labelPaddingLeft - - Label - - spacing-16 - - 1rem / 16px - - - - labelPaddingRight - - Label - - spacing-16 - - 1rem / 16px - - - - ), - }, - { - title: "Size", - content: ( - - - - Component token - Element - Core token - Value - - - - - - height - - Container - - - 40px - - - - iconHeight - - Icon - - - 24px - - - - ), - }, - ], - }, -]; - -const TagSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default TagSpecsPage; diff --git a/apps/website/screens/components/tag/specs/images/tag_anatomy.png b/apps/website/screens/components/tag/specs/images/tag_anatomy.png deleted file mode 100644 index 6030b07caae0521b0faaf627154aa55c7d257914..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11468 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 diff --git a/apps/website/screens/components/tag/specs/images/tag_modes.png b/apps/website/screens/components/tag/specs/images/tag_modes.png deleted file mode 100644 index 317744045f641b14e0444980b5bdd6c95d92a740..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15659 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 Zj4~2h;Zz#@F$DaaGqNx&HgLQ9KL96;X#W5J diff --git a/apps/website/screens/components/tag/specs/images/tag_states.png b/apps/website/screens/components/tag/specs/images/tag_states.png deleted file mode 100644 index 9fcfefc0a6f99d4139a7a90f0236a01a794af32a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 14074 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 - - Use the tag component to highlight properties of a section that want to remark. - - Make consistent use of the component accross the application. - Be responsible of the use of background color and icons. - - If there are multiple tags, the space between them should be at least 16px. - - - ), - }, - { - title: "Icon usage", - content: ( - <> - - - The tag can be displayed with icon and label or only icon. - The icon can be placed before or after. - - The icon background color can be defined with the iconBgColor component property. - - - - ), - }, -]; - -const TagUsagePage = () => { - return ( - - - - - - - ); -}; - -export default TagUsagePage; diff --git a/apps/website/screens/components/tag/usage/examples/iconUsage.ts b/apps/website/screens/components/tag/usage/examples/iconUsage.ts deleted file mode 100644 index c934dc62dd..0000000000 --- a/apps/website/screens/components/tag/usage/examples/iconUsage.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { DxcTag, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react"; - -const code = `() => { - const icon = ( - - - - - ); - - return ( - - - - - - - - - - - - - - - - - ); -}`; - -const scope = { - DxcTag, - DxcInset, - DxcFlex, - DxcHeading, -}; - -export default { code, scope }; diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index a0995fc35f..c4af74ba9f 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -307,10 +307,6 @@ const parseTheme = (theme: DeepPartial): AdvancedTheme => { tabsTokens.hoverBackgroundColor = addLightness(57, theme.tabs?.baseColor) ?? tabsTokens.hoverBackgroundColor; tabsTokens.pressedBackgroundColor = addLightness(52, theme.tabs?.baseColor) ?? tabsTokens.pressedBackgroundColor; - const tagTokens = componentTokensCopy.tag; - tagTokens.fontColor = theme.tag?.fontColor ?? tagTokens.fontColor; - tagTokens.iconColor = theme.tag?.iconColor ?? tagTokens.iconColor; - const textInputTokens = componentTokensCopy.textInput; textInputTokens.labelFontColor = theme.textInput?.fontColor ?? textInputTokens.labelFontColor; textInputTokens.helperTextFontColor = theme.textInput?.fontColor ?? textInputTokens.helperTextFontColor; diff --git a/packages/lib/src/common/variables.ts b/packages/lib/src/common/variables.ts index feb9a657c5..2993c14bb9 100644 --- a/packages/lib/src/common/variables.ts +++ b/packages/lib/src/common/variables.ts @@ -1044,23 +1044,6 @@ export const componentTokens = { focusOutline: CoreTokens.color_purple_700, scrollButtonsWidth: "48px", }, - tag: { - fontFamily: CoreTokens.type_sans, - fontColor: CoreTokens.color_black, - fontSize: CoreTokens.type_scale_02, - fontStyle: CoreTokens.type_normal, - fontWeight: CoreTokens.type_regular, - labelPaddingTop: CoreTokens.spacing_0, - labelPaddingBottom: CoreTokens.spacing_0, - labelPaddingLeft: CoreTokens.spacing_16, - labelPaddingRight: CoreTokens.spacing_16, - height: "40px", - iconColor: CoreTokens.color_white, - iconSectionWidth: "40px", - iconHeight: "24px", - iconWidth: "auto", - focusColor: CoreTokens.color_blue_600, - }, textarea: { fontFamily: CoreTokens.type_sans, enabledBorderColor: CoreTokens.color_black, @@ -1410,10 +1393,6 @@ export type OpinionatedTheme = { tabs: { baseColor: string; }; - tag: { - fontColor: string; - iconColor: string; - }; textarea: { fontColor: string; hoverBorderColor: string; diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 75d75ee639..bcf61de0be 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -42,7 +42,6 @@ export { default as DxcStatusLight } from "./status-light/StatusLight"; export { default as DxcSwitch } from "./switch/Switch"; export { default as DxcTable } from "./table/Table"; export { default as DxcTabs } from "./tabs/Tabs"; -export { default as DxcTag } from "./tag/Tag"; export { default as DxcTextarea } from "./textarea/Textarea"; export { default as DxcTextInput } from "./text-input/TextInput"; export { default as DxcToastsQueue } from "./toast/ToastsQueue"; diff --git a/packages/lib/src/tag/Tag.accessibility.test.tsx b/packages/lib/src/tag/Tag.accessibility.test.tsx deleted file mode 100644 index 81215a37a7..0000000000 --- a/packages/lib/src/tag/Tag.accessibility.test.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { render } from "@testing-library/react"; -import { axe } from "../../test/accessibility/axe-helper"; -import DxcTag from "./Tag"; - -const icon = ( - - - - -); - -describe("Tag component accessibility tests", () => { - it("Should not have basic accessibility issues", async () => { - const { container } = render( - - ); - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); - it("Should not have basic accessibility issues for new-window mode", async () => { - const { container } = render( - - ); - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); -}); diff --git a/packages/lib/src/tag/Tag.stories.tsx b/packages/lib/src/tag/Tag.stories.tsx deleted file mode 100644 index 8ab9621af0..0000000000 --- a/packages/lib/src/tag/Tag.stories.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import { userEvent, within } from "@storybook/test"; -import ExampleContainer from "../../.storybook/components/ExampleContainer"; -import Title from "../../.storybook/components/Title"; -import { HalstackProvider } from "../HalstackContext"; -import DxcTag from "./Tag"; -import { Meta, StoryObj } from "@storybook/react"; - -export default { - title: "Tag", - component: DxcTag, -} as Meta; - -const icon = ( - - - - -); - -const largeIcon = ( - - - - -); - -const opinionatedTheme = { - tag: { - fontColor: "#000000", - iconColor: "#ffffff", - }, -}; - -const Tag = () => ( - <> - - - <DxcTag icon={icon} /> - </ExampleContainer> - <ExampleContainer> - <Title title="With large icon" theme="light" level={4} /> - <DxcTag icon={largeIcon} /> - </ExampleContainer> - <ExampleContainer> - <Title title="With label" theme="light" level={4} /> - <DxcTag label="Tag" /> - </ExampleContainer> - <ExampleContainer> - <Title title="With label and icon" theme="light" level={4} /> - <DxcTag label="Tag" icon="person" /> - </ExampleContainer> - <ExampleContainer> - <Title title="With right icon" theme="light" level={4} /> - <DxcTag label="Tag" icon="group" labelPosition="before" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Icon background color" theme="light" level={4} /> - <DxcTag label="Tag" icon={icon} iconBgColor="#fabada" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="With link focused" theme="light" level={4} /> - <DxcTag icon={icon} label="Tag" linkHref="https://www.dxc.com" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="With action focused" theme="light" level={4} /> - <DxcTag - icon="done" - label="Tag" - onClick={() => { - console.log("click"); - }} - /> - </ExampleContainer> - <Title title="Margins" theme="light" level={2} /> - <ExampleContainer> - <Title title="Xxsmall margin" theme="light" level={4} /> - <DxcTag label="Xxsmall" margin="xxsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xsmall margin" theme="light" level={4} /> - <DxcTag label="Xsmall" margin="xsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Small margin" theme="light" level={4} /> - <DxcTag label="Small" margin="small" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium margin" theme="light" level={4} /> - <DxcTag label="Medium" margin="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large margin" theme="light" level={4} /> - <DxcTag label="Large" margin="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xlarge margin" theme="light" level={4} /> - <DxcTag label="Xlarge" margin="xlarge" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xxlarge margin" theme="light" level={4} /> - <DxcTag label="Xxlarge" margin="xxlarge" /> - </ExampleContainer> - <Title title="Sizes" theme="light" level={2} /> - <ExampleContainer> - <Title title="Small size" theme="light" level={4} /> - <DxcTag label="Small" size="small" icon={icon} /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size" theme="light" level={4} /> - <DxcTag label="Medium size medium s" size="medium" icon="person" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size with ellipsis" theme="light" level={4} /> - <DxcTag label="Medium size medium si medium" size="medium" icon={icon} /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size" theme="light" level={4} /> - <DxcTag label="Large size large size large size large size large size" size="large" icon={icon} /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size with ellipsis" theme="light" level={4} /> - <DxcTag label="Large size large size large size large size large size large size" size="large" icon={icon} /> - </ExampleContainer> - <ExampleContainer> - <Title title="FillParent size" theme="light" level={4} /> - <DxcTag label="FillParent" size="fillParent" icon={icon} /> - </ExampleContainer> - <ExampleContainer> - <Title title="FitContent size" theme="light" level={4} /> - <DxcTag label="FitContent" size="fitContent" icon={icon} /> - </ExampleContainer> - <Title title="Opinionated theme" theme="light" level={2} /> - <ExampleContainer> - <HalstackProvider theme={opinionatedTheme}> - <DxcTag label="Tag" icon={icon} /> - </HalstackProvider> - </ExampleContainer> - </> -); - -const LinkTag = () => ( - <ExampleContainer expanded> - <Title title="Hover link tag" theme="light" level={4} /> - <DxcTag label="Tag" icon={icon} linkHref="https://www.dxc.com" /> - </ExampleContainer> -); - -type Story = StoryObj<typeof DxcTag>; - -export const Chromatic: Story = { - render: Tag, -}; - -export const HoverLinkTag: Story = { - render: LinkTag, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - await userEvent.hover(canvas.getByText("Tag")); - }, -}; diff --git a/packages/lib/src/tag/Tag.test.tsx b/packages/lib/src/tag/Tag.test.tsx deleted file mode 100644 index b5174c66a1..0000000000 --- a/packages/lib/src/tag/Tag.test.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { fireEvent, render } from "@testing-library/react"; -import DxcTag from "./Tag"; - -describe("Tag component tests", () => { - test("Tag renders with correct label", () => { - const { getByText } = render(<DxcTag label="tag-test"></DxcTag>); - expect(getByText("tag-test")).toBeTruthy(); - }); - - test("Tag renders with correct label before", () => { - const { getByText } = render(<DxcTag label="tag-test" labelPosition="before"></DxcTag>); - expect(getByText("tag-test")).toBeTruthy(); - }); - - test("Tag renders with link href", () => { - const { getByRole } = render(<DxcTag label="tag-test" linkHref="/test/page"></DxcTag>); - expect(getByRole("link").getAttribute("href")).toBe("/test/page"); - }); - - test("Call correct function on click", () => { - const onClick = jest.fn(); - const { getByText } = render(<DxcTag label="tag-test" onClick={onClick}></DxcTag>); - fireEvent.click(getByText("tag-test")); - expect(onClick).toHaveBeenCalled(); - }); -}); diff --git a/packages/lib/src/tag/Tag.tsx b/packages/lib/src/tag/Tag.tsx deleted file mode 100644 index 88caf5a617..0000000000 --- a/packages/lib/src/tag/Tag.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import { ReactNode, useContext, useState } from "react"; -import styled, { ThemeProvider } from "styled-components"; -import { getMargin } from "../common/utils"; -import { spaces } from "../common/variables"; -import HalstackContext from "../HalstackContext"; -import DxcIcon from "../icon/Icon"; -import TagPropsType from "./types"; -import CoreTokens from "../common/coreTokens"; - -type TagWrapperProps = { - condition: boolean; - wrapper: (_children: ReactNode) => JSX.Element; - children: ReactNode; -}; - -const TagWrapper = ({ condition, wrapper, children }: TagWrapperProps): JSX.Element => ( - <>{condition ? wrapper(children) : children}</> -); - -/** - * @deprecated - */ -const DxcTag = ({ - icon, - label = "", - linkHref, - onClick, - iconBgColor = "#5f249f", - labelPosition = "after", - newWindow = false, - margin, - size = "fitContent", - tabIndex = 0, -}: TagPropsType): JSX.Element => { - const colorsTheme = useContext(HalstackContext); - const [isHovered, changeIsHovered] = useState(false); - - return ( - <ThemeProvider theme={colorsTheme.tag}> - <StyledDxcTag - margin={margin} - size={size} - onMouseEnter={() => changeIsHovered(true)} - onMouseLeave={() => changeIsHovered(false)} - onClick={() => { - onClick?.(); - }} - hasAction={onClick || linkHref} - shadowDepth={isHovered && (onClick || linkHref) ? 2 : 1} - > - <TagWrapper - condition={!!onClick || !!linkHref} - wrapper={(children) => - onClick ? ( - <StyledButton tabIndex={tabIndex}>{children}</StyledButton> - ) : linkHref ? ( - <StyledLink tabIndex={tabIndex} href={linkHref} target={newWindow ? "_blank" : "_self"}> - {children} - </StyledLink> - ) : ( - <></> - ) - } - > - <TagContent> - {labelPosition === "before" && size !== "small" && label && <TagLabel>{label}</TagLabel>} - {icon && ( - <IconContainer iconBgColor={iconBgColor}> - {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} - </IconContainer> - )} - {labelPosition === "after" && size !== "small" && label && <TagLabel>{label}</TagLabel>} - </TagContent> - </TagWrapper> - </StyledDxcTag> - </ThemeProvider> - ); -}; - -const sizes = { - small: "42px", - medium: "240px", - large: "480px", - fillParent: "100%", - fitContent: "fit-content", -}; - -const calculateWidth = (margin: TagPropsType["margin"], size: TagPropsType["size"]) => - size === "fillParent" - ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` - : size && sizes[size]; - -const StyledDxcTag = styled.div<{ - margin: TagPropsType["margin"]; - size: TagPropsType["size"]; - hasAction: TagPropsType["onClick"] | TagPropsType["linkHref"]; - shadowDepth: 1 | 2; -}>` - display: inline-flex; - cursor: ${({ hasAction }) => (hasAction && "pointer") || "unset"}; - margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")}; - margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")}; - margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")}; - margin-bottom: ${({ margin }) => - margin && typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : ""}; - margin-left: ${({ margin }) => (margin && typeof margin === "object" && margin.left ? spaces[margin.left] : "")}; - width: ${(props) => calculateWidth(props.margin, props.size)}; - height: ${(props) => props.theme.height}; - box-shadow: ${({ shadowDepth }) => - shadowDepth === 1 - ? `0px 3px 6px ${CoreTokens.color_grey_300_a}` - : shadowDepth === 2 - ? `0px 3px 10px ${CoreTokens.color_grey_300_a}` - : "none"}; -`; - -const TagContent = styled.div` - display: inline-flex; - align-items: center; - width: 100%; - height: ${(props) => props.theme.height}; -`; - -const StyledLink = styled.a` - text-decoration: none; - border-radius: 4px; - width: 100%; - :focus { - outline: 2px solid ${(props) => props.theme.focusColor}; - outline-offset: 0px; - } -`; - -const StyledButton = styled.button` - background: none; - border-radius: 4px; - border: none; - padding: 0; - cursor: pointer; - font-family: inherit; - width: 100%; - :focus { - outline: 2px solid ${(props) => props.theme.focusColor}; - } -`; - -const IconContainer = styled.div<{ iconBgColor: TagPropsType["iconBgColor"] }>` - display: inline-flex; - background: ${({ iconBgColor }) => iconBgColor}; - width: ${(props) => props.theme.iconSectionWidth}; - height: 100%; - justify-content: center; - align-items: center; - color: ${(props) => props.theme.iconColor}; - min-width: ${(props) => props.theme.iconSectionWidth}; - overflow: hidden; - font-size: 24px; - - svg { - width: ${(props) => props.theme.iconWidth}; - height: ${(props) => props.theme.iconHeight}; - } -`; - -const TagLabel = styled.div` - font-family: ${(props) => props.theme.fontFamily}; - font-size: ${(props) => props.theme.fontSize}; - font-style: ${(props) => props.theme.fontStyle}; - font-weight: ${(props) => props.theme.fontWeight}; - color: ${(props) => props.theme.fontColor}; - padding-top: ${(props) => props.theme.labelPaddingTop}; - padding-bottom: ${(props) => props.theme.labelPaddingBottom}; - padding-left: ${(props) => props.theme.labelPaddingLeft}; - padding-right: ${(props) => props.theme.labelPaddingRight}; - flex-grow: 1; - text-align: center; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -`; - -export default DxcTag; diff --git a/packages/lib/src/tag/types.ts b/packages/lib/src/tag/types.ts deleted file mode 100644 index a1689abfe0..0000000000 --- a/packages/lib/src/tag/types.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { Margin, SVG, Space } from "../common/utils"; - -type TagCommonProps = { - /** - * If defined, the tag will be displayed as an anchor, using this prop as "href". - * Component will show some visual feedback on hover. - */ - linkHref?: string; - /** - * If defined, the tag will be displayed as a button. This function will - * be called when the user clicks the tag. Component will show some - * visual feedback on hover. - */ - onClick?: () => void; - /** - * Background color of the icon section of the tag. - */ - iconBgColor?: string; - /** - * Whether the label should appear after or before the icon. - */ - labelPosition?: "before" | "after"; - /** - * If true, the page is opened in a new browser tab. - */ - newWindow?: boolean; - /** - * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). - * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. - */ - margin?: Space | Margin; - /** - * Size of the component. - */ - size?: "small" | "medium" | "large" | "fillParent" | "fitContent"; - /** - * Value of the tabindex attribute. - */ - tabIndex?: number; -}; - -type TagLabelProps = TagCommonProps & { - /** - * Material Symbol name or SVG element used as the icon that will be placed next to the label. - */ - icon?: string | SVG; - /** - * Text to be placed next inside the tag. - */ - label: string; -}; - -type TagIconProps = TagCommonProps & { - /** - * Material Symbol name or SVG element used as the icon that will be placed next to the label. - */ - icon: string | SVG; - /** - * Text to be placed next inside the tag. - */ - label?: string; -}; - -type Props = TagLabelProps | TagIconProps; - -export default Props;