diff --git a/apps/website/pages/components/bulleted-list/code.tsx b/apps/website/pages/components/bulleted-list/code.tsx new file mode 100644 index 0000000000..d628ac828d --- /dev/null +++ b/apps/website/pages/components/bulleted-list/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import BulletedListCodePage from "screens/components/bulleted-list/code/BulletedListCodePage"; +import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout"; + +const Code = () => ( + <> + + Bulleted list code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/bulleted-list/index.tsx b/apps/website/pages/components/bulleted-list/index.tsx index 86d4aa8b16..c1869f0b7c 100644 --- a/apps/website/pages/components/bulleted-list/index.tsx +++ b/apps/website/pages/components/bulleted-list/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout"; -import BulletedListCodePage from "screens/components/bulleted-list/code/BulletedListCodePage"; +import BulletedListOverviewPage from "screens/components/bulleted-list/overview/BulletedListOverviewPage"; -const Index = () => { - return ( - <> - - Bulleted List — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Bulleted List — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/bulleted-list/specifications.tsx b/apps/website/pages/components/bulleted-list/specifications.tsx deleted file mode 100644 index c5db0f05a7..0000000000 --- a/apps/website/pages/components/bulleted-list/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout"; -import BulletedListSpecsPage from "screens/components/bulleted-list/specs/BulletedListSpecsPage"; - -const Specifications = () => { - return ( - <> - - Bulleted List Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/bulleted-list/usage.tsx b/apps/website/pages/components/bulleted-list/usage.tsx deleted file mode 100644 index 70897a938a..0000000000 --- a/apps/website/pages/components/bulleted-list/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BulletedListUsagePage from "screens/components/bulleted-list/usage/BulletedListUsagePage"; -import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout"; - -const Usage = () => { - return ( - <> - - Bulleted list Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx index 2d3d9c5957..ab1c6dcac1 100644 --- a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx +++ b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx @@ -6,12 +6,8 @@ import { ReactNode } from "react"; const BulletedListPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/bulleted-list" }, - { label: "Usage", path: "/components/bulleted-list/usage" }, - { - label: "Specifications", - path: "/components/bulleted-list/specifications", - }, + { label: "Overview", path: "/components/bulleted-list" }, + { label: "Code", path: "/components/bulleted-list/code" }, ]; return ( @@ -19,7 +15,7 @@ const BulletedListPageHeading = ({ children }: { children: ReactNode }) => { Bulleted list are used to display text items in a bulleted format. - + {children} diff --git a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx index ee4c304689..a678a3e97a 100644 --- a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx +++ b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx @@ -23,14 +23,19 @@ const sections = [ - type - 'disc' | 'circle' | 'square' | 'number' | 'icon' + + + children + - Defines the style of the bullet point in the list. - 'disc' + React.ReactNode + + + Contains one or more DxcBulletedList.Item. + - icon @@ -48,19 +53,14 @@ const sections = [ - + type - - - children - - - - React.ReactNode + 'disc' | 'circle' | 'square' | 'number' | 'icon' + Defines the style of the bullet point in the list. - Contains one or more DxcBulletedList.Item. + 'disc' - - @@ -117,15 +117,13 @@ const sections = [ }, ]; -const BulletedListCodePage = () => { - return ( - - - - - - - ); -}; +const BulletedListCodePage = () => ( + + + + + + +); export default BulletedListCodePage; diff --git a/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx b/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx new file mode 100644 index 0000000000..1edde1251d --- /dev/null +++ b/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx @@ -0,0 +1,175 @@ +import Code from "@/common/Code"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import { DxcFlex, DxcBulletedList, DxcParagraph, DxcAlert } from "@dxc-technology/halstack-react"; +import anatomy from "./images/bulleted_list_anatomy.png"; +import Example from "@/common/example/Example"; +import disc from "./examples/disc"; +import circle from "./examples/circle"; +import square from "./examples/square"; +import number from "./examples/number"; +import icon from "./examples/icon"; +import Image from "@/common/Image"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + Bulleted lists are used to present grouped information in a clear, scannable format. They help users quickly + identify key points or related items without following a specific order. In Halstack, the bulleted list + component supports customizable icon variants, and nesting levels to adapt to different content needs while + maintaining consistency and readability across the interface. Use this component to enhance clarity and break + down complex information into digestible chunks. + + + Disclaimer - This component is not a 1-to-1 replacement of the ul ol native + tags. These native tags have many different use-cases and the Bulleted List only covers one of them: + listing text items within a document. + + ), + }} + closable={false} + /> + + ), + }, + { + title: "Anatomy", + content: ( + <> + Bulleted list's anatomy + + + Bullet point: a small visual marker placed before each list item. It provides visual + separation and helps emphasize each individual entry within the list. The default style is a filled circle. + + + Label: the text content associated with each bullet point. It conveys the actual + information and should be clear, concise, and scannable for easy reading. + + + + ), + }, + { + title: "Types", + subSections: [ + { + title: "Disc", + content: ( + <> + + Disc are the default type, represented by a filled circle. It is commonly used for the most standard lists + where content doesn't require special emphasis or categorization. + + + + ), + }, + { + title: "Circle", + content: ( + <> + + Showcased like an empty circle marker, they offer a lighter visual alternative. It is frequently used for + secondary or nested lists, or when a subtler design is preferred. + + + + ), + }, + { + title: "Square", + content: ( + <> + + Square types consist of a solid square marker that draws slightly more attention. This type is mostly used + for lists that need more visual weight, or for lists that need to be differentiated from standard content + blocks. + + + + ), + }, + { + title: "Number", + content: ( + <> + + This type of bulleted list display items in a numbered sequence. They are used for lists that contain + ordered steps, instructions, or any content where sequence or priority is important. + + + + ), + }, + { + title: "Icon", + content: ( + <> + + In this type of bulleted list, the visual marker is an icon instead of a standard one. They are commonly + used for lists that benefit from visual cues to reinforce meaning, such as warning icons, checkmarks or + status indicators. + + + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + <> + + + Choose the appropriate bullet type for the context: use discs for standard lists, numbers + for sequences or steps, and icons when a visual cue adds clarity or emphasis. + + + Keep list items concise and scannable: lists should be easy to read at a glance. Use brief, + clear phrasing. + + + Maintain parallel structure: ensure that all list items follow a consistent grammatical + pattern to improve readability. + + + Avoid overusing nested lists: deeply nested lists can be hard to follow. Limit nesting to + one level if possible. + + + Use punctuation consistently: if one item ends in a period, all items should, unless + they're just short phrases or single words. + + + Use spacing to improve legibility: ensure there is enough vertical space between items, + especially in longer lists. + + + + ), + }, +]; + +const BulletedListOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default BulletedListOverviewPage; diff --git a/apps/website/screens/components/bulleted-list/overview/examples/circle.ts b/apps/website/screens/components/bulleted-list/overview/examples/circle.ts new file mode 100644 index 0000000000..82c38f81b1 --- /dev/null +++ b/apps/website/screens/components/bulleted-list/overview/examples/circle.ts @@ -0,0 +1,17 @@ +import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react"; +const code = `() => { + return ( + + + Circle + + + ); +}`; + +const scope = { + DxcBulletedList, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/bulleted-list/overview/examples/disc.ts b/apps/website/screens/components/bulleted-list/overview/examples/disc.ts new file mode 100644 index 0000000000..746dd42877 --- /dev/null +++ b/apps/website/screens/components/bulleted-list/overview/examples/disc.ts @@ -0,0 +1,17 @@ +import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react"; +const code = `() => { + return ( + + + Disc + + + ); +}`; + +const scope = { + DxcBulletedList, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/bulleted-list/overview/examples/icon.ts b/apps/website/screens/components/bulleted-list/overview/examples/icon.ts new file mode 100644 index 0000000000..a02d63b24a --- /dev/null +++ b/apps/website/screens/components/bulleted-list/overview/examples/icon.ts @@ -0,0 +1,24 @@ +import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react"; +const code = `() => { + const icon = ( + + + + + ); + + return ( + + + Icon + + + ); +}`; + +const scope = { + DxcBulletedList, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/bulleted-list/overview/examples/number.ts b/apps/website/screens/components/bulleted-list/overview/examples/number.ts new file mode 100644 index 0000000000..bd7baf75b4 --- /dev/null +++ b/apps/website/screens/components/bulleted-list/overview/examples/number.ts @@ -0,0 +1,17 @@ +import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react"; +const code = `() => { + return ( + + + Number + + + ); +}`; + +const scope = { + DxcBulletedList, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/bulleted-list/overview/examples/square.ts b/apps/website/screens/components/bulleted-list/overview/examples/square.ts new file mode 100644 index 0000000000..6b58c6ca20 --- /dev/null +++ b/apps/website/screens/components/bulleted-list/overview/examples/square.ts @@ -0,0 +1,17 @@ +import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react"; +const code = `() => { + return ( + + + Square + + + ); +}`; + +const scope = { + DxcBulletedList, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/bulleted-list/overview/images/bulleted_list_anatomy.png b/apps/website/screens/components/bulleted-list/overview/images/bulleted_list_anatomy.png new file mode 100644 index 0000000000..fa1e20d40c Binary files /dev/null and b/apps/website/screens/components/bulleted-list/overview/images/bulleted_list_anatomy.png differ diff --git a/apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx b/apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx deleted file mode 100644 index 0919a65fe4..0000000000 --- a/apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { DxcTable, DxcFlex } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; - -const sections = [ - { - title: "Design tokens", - subSections: [ - { - title: "Typography", - content: ( - <> - - - - Component token - Element - Core token - Value - - - - - - fontFamily - - List item text - - font-family-sans - - 'Open Sans, sans-serif' - - - - fontSize - - List item text - - font-scale-03 - - 1rem - - - - fontWeight - - List item text - - font-scale-03 - - 400 - - - - color - - List item text - - color-black - - #000000 - - - - - ), - }, - ], - }, -]; - -const BulletedListSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default BulletedListSpecsPage; diff --git a/apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx b/apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx deleted file mode 100644 index 4da1f87934..0000000000 --- a/apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import { DxcFlex, DxcBulletedList, DxcParagraph } from "@dxc-technology/halstack-react"; - -const sections = [ - { - title: "Usage", - content: ( - <> - - This component is not a 1-to-1 replacement of the ul ol native tags. These native - tags have many different use-cases and the Bulleted List only covers one of them: listing text items within a - document. - - - Lists can be ordered or unordered. If the order of the list items matters for context to the user, an ordered - list should be used. If the meaning of the list is not changed based on the order of the items, an unordered - list should be used. - - - Ordered lists are displayed with a preceding number. - Unordered lists are displayed with a preceding bullet point. - Lists can be nested as deeply as needed. - - - ), - }, -]; - -const BulletedListUsagePage = () => { - return ( - - - - - - - ); -}; - -export default BulletedListUsagePage; diff --git a/apps/website/screens/components/file-input/overview/FileInputOverviewPage.tsx b/apps/website/screens/components/file-input/overview/FileInputOverviewPage.tsx index 436f53c1ec..c12ddabedd 100644 --- a/apps/website/screens/components/file-input/overview/FileInputOverviewPage.tsx +++ b/apps/website/screens/components/file-input/overview/FileInputOverviewPage.tsx @@ -4,7 +4,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Image from "@/common/Image"; import Code from "@/common/Code"; -import anatomy from "./images/fileInput_anatomy.png"; +import anatomy from "./images/file_input_anatomy.png"; import Example from "@/common/example/Example"; import variants from "./examples/variants"; diff --git a/apps/website/screens/components/file-input/overview/images/fileInput_anatomy.png b/apps/website/screens/components/file-input/overview/images/file_input_anatomy.png similarity index 100% rename from apps/website/screens/components/file-input/overview/images/fileInput_anatomy.png rename to apps/website/screens/components/file-input/overview/images/file_input_anatomy.png diff --git a/packages/lib/src/bulleted-list/BulletedList.tsx b/packages/lib/src/bulleted-list/BulletedList.tsx index 1a8139358c..d6581d1165 100644 --- a/packages/lib/src/bulleted-list/BulletedList.tsx +++ b/packages/lib/src/bulleted-list/BulletedList.tsx @@ -6,6 +6,80 @@ import BulletedListPropsType, { BulletedListItemPropsType } from "./types"; import DxcIcon from "../icon/Icon"; import HalstackContext from "../HalstackContext"; +const ListContainer = styled.div` + ul, + ol { + margin: 0; + padding: 0; + } +`; + +const Bullet = styled.div` + align-items: center; + align-self: flex-start; + display: flex; + height: var(--height-s); +`; + +const GeneralContent = styled.div` + align-items: center; + display: grid; + gap: var(--spacing-gap-s); + grid-template-columns: auto 1fr; +`; + +const Icon = styled.div` + display: flex; + align-items: center; + font-size: var(--height-xxs); + height: var(--height-s); + width: auto; + svg { + height: var(--height-xxs); + width: 16px; + } +`; + +const Number = styled.div` + align-self: flex-start; + box-sizing: border-box; + display: flex; + min-width: 0; + user-select: none; +`; + +const Square = styled.div` + background-color: var(--color-fg-neutral-dark); + height: 4px; + width: 4px; +`; + +const Circle = styled.div` + border-color: var(--color-fg-neutral-dark); + border-radius: 50%; + border: var(--border-width-s) var(--border-style-default); + height: 4px; + width: 4px; +`; + +const Disc = styled.div` + background-color: var(--color-fg-neutral-dark); + border-radius: 50%; + height: 4px; + width: 4px; +`; + +const ListItem = styled.li` + color: var(--color-fg-neutral-dark); + display: flex; + font-family: var(--typography-font-family); + font-size: var(--typography-body-m); + font-weight: var(--typography-body-regular); + list-style: none; + margin: var(--spacing-padding-none); + padding: var(--spacing-padding-none); +`; + const BulletedListItem = ({ children }: BulletedListItemPropsType): JSX.Element => <>{children}; const DxcBulletedList = ({ children, type = "disc", icon = "" }: BulletedListPropsType): JSX.Element => { @@ -51,80 +125,4 @@ const DxcBulletedList = ({ children, type = "disc", icon = "" }: BulletedListPro DxcBulletedList.Item = BulletedListItem; -const ListContainer = styled.div` - ul, - ol { - padding: 0; - margin: 0; - } -`; - -const Bullet = styled.div` - display: flex; - align-self: flex-start; - align-items: center; - height: 1.5rem; -`; - -const GeneralContent = styled.div` - display: grid; - grid-template-columns: auto 1fr; - align-items: center; -`; - -const Icon = styled.div` - height: 1.5rem; - width: auto; - margin-right: ${(props) => props.theme.bulletMarginRight}; - align-content: center; - color: ${(props) => props.theme.fontColor}; - - font-size: ${(props) => props.theme.bulletIconHeight}; - svg { - height: ${(props) => props.theme.bulletIconHeight}; - width: ${(props) => props.theme.bulletIconWidth}; - } -`; - -const Number = styled.div` - user-select: none; - margin-right: ${(props) => props.theme.bulletMarginRight}; - display: flex; - box-sizing: border-box; - align-self: flex-start; - min-width: 0; -`; - -const Square = styled.div` - background-color: ${(props) => props.theme.fontColor}; - height: ${(props) => props.theme.bulletHeight}; - width: ${(props) => props.theme.bulletWidth}; - margin-right: ${(props) => props.theme.bulletMarginRight}; -`; - -const Circle = styled.div` - height: ${(props) => props.theme.bulletHeight}; - width: ${(props) => props.theme.bulletWidth}; - border-radius: 50%; - border: 1px solid; - border-color: ${(props) => props.theme.fontColor}; - margin-right: ${(props) => props.theme.bulletMarginRight}; -`; - -const Disc = styled.div` - background-color: ${(props) => props.theme.fontColor}; - height: ${(props) => props.theme.bulletHeight}; - width: ${(props) => props.theme.bulletWidth}; - border-radius: 50%; - margin-right: ${(props) => props.theme.bulletMarginRight}; -`; - -const ListItem = styled.li` - display: flex; - margin: 0px; - padding: 0px; - list-style: none; - font-size: 1em; -`; - export default DxcBulletedList;