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 6030b07caa..0000000000 Binary files a/apps/website/screens/components/tag/specs/images/tag_anatomy.png and /dev/null differ 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 317744045f..0000000000 Binary files a/apps/website/screens/components/tag/specs/images/tag_modes.png and /dev/null differ diff --git a/apps/website/screens/components/tag/specs/images/tag_specs.png b/apps/website/screens/components/tag/specs/images/tag_specs.png deleted file mode 100644 index 31037d9210..0000000000 Binary files a/apps/website/screens/components/tag/specs/images/tag_specs.png and /dev/null differ 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 9fcfefc0a6..0000000000 Binary files a/apps/website/screens/components/tag/specs/images/tag_states.png and /dev/null differ diff --git a/apps/website/screens/components/tag/usage/TagUsagePage.tsx b/apps/website/screens/components/tag/usage/TagUsagePage.tsx deleted file mode 100644 index 0bc02cd6a7..0000000000 --- a/apps/website/screens/components/tag/usage/TagUsagePage.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Example from "@/common/example/Example"; -import iconUsage from "./examples/iconUsage"; - -const sections = [ - { - title: "Usage", - content: ( - - - 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;