From 4f21428abaabefceeb52430b31bff24a29337d71 Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Mon, 3 Feb 2025 16:16:13 +0100
Subject: [PATCH 1/8] First version (missing bullet height token)

---
 .../lib/src/bulleted-list/BulletedList.tsx    | 154 +++++++++---------
 1 file changed, 78 insertions(+), 76 deletions(-)

diff --git a/packages/lib/src/bulleted-list/BulletedList.tsx b/packages/lib/src/bulleted-list/BulletedList.tsx
index 1a8139358c..b53536313a 100644
--- a/packages/lib/src/bulleted-list/BulletedList.tsx
+++ b/packages/lib/src/bulleted-list/BulletedList.tsx
@@ -6,6 +6,84 @@ 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: center;
+  display: flex;
+`;
+
+const GeneralContent = styled.div`
+  align-items: center;
+  display: grid;
+  gap: var(--spacing-gap-s);
+  grid-template-columns: auto 1fr;
+`;
+
+const Icon = styled.div`
+  align-content: center;
+  font-size: var(--height-xxs);
+  height: var(--height-xxs);
+  width: 16px;
+  svg {
+    /* PENDING TOKEN */
+    /* height: ${(props) => props.theme.bulletHeight};
+    width: ${(props) => props.theme.bulletWidth}; */
+  }
+`;
+
+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);
+  /* PENDING TOKEN */
+  /* height: ${(props) => props.theme.bulletHeight};
+  width: ${(props) => props.theme.bulletWidth}; */
+`;
+
+const Circle = styled.div`
+  border-color: var(--color-fg-neutral-dark);
+  border-radius: 50%;
+  border: 1px solid;
+  /* PENDING TOKEN */
+  /* height: ${(props) => props.theme.bulletHeight};
+  width: ${(props) => props.theme.bulletWidth}; */
+`;
+
+const Disc = styled.div`
+  background-color: var(--color-fg-neutral-dark);
+  border-radius: 50%;
+  /* PENDING TOKEN */
+  /* height: ${(props) => props.theme.bulletHeight};
+  width: ${(props) => props.theme.bulletWidth}; */
+`;
+
+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-style: normal;
+  font-weight: var(--typography-body-regular);
+  line-height: normal;
+  list-style: none;
+  margin: 0px;
+  padding: var(--spacing-padding-none);
+`;
+
 const BulletedListItem = ({ children }: BulletedListItemPropsType): JSX.Element => <>{children}</>;
 
 const DxcBulletedList = ({ children, type = "disc", icon = "" }: BulletedListPropsType): JSX.Element => {
@@ -51,80 +129,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;

From 88ee0a1e250127da798addfe344d2cc43856bb60 Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Mon, 3 Feb 2025 16:19:37 +0100
Subject: [PATCH 2/8] Uncomment index.ts

---
 packages/lib/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 bd7bd6533b30c3c36ed9335e572c762dd85df824 Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Wed, 5 Feb 2025 13:48:33 +0100
Subject: [PATCH 3/8] Removed comments and changed symbol size

---
 .../lib/src/bulleted-list/BulletedList.tsx    | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/lib/src/bulleted-list/BulletedList.tsx b/packages/lib/src/bulleted-list/BulletedList.tsx
index b53536313a..58949d04e9 100644
--- a/packages/lib/src/bulleted-list/BulletedList.tsx
+++ b/packages/lib/src/bulleted-list/BulletedList.tsx
@@ -33,9 +33,8 @@ const Icon = styled.div`
   height: var(--height-xxs);
   width: 16px;
   svg {
-    /* PENDING TOKEN */
-    /* height: ${(props) => props.theme.bulletHeight};
-    width: ${(props) => props.theme.bulletWidth}; */
+    height: 4px;
+    width: 4px;
   }
 `;
 
@@ -49,26 +48,23 @@ const Number = styled.div`
 
 const Square = styled.div`
   background-color: var(--color-fg-neutral-dark);
-  /* PENDING TOKEN */
-  /* height: ${(props) => props.theme.bulletHeight};
-  width: ${(props) => props.theme.bulletWidth}; */
+  height: 4px;
+  width: 4px;
 `;
 
 const Circle = styled.div`
   border-color: var(--color-fg-neutral-dark);
   border-radius: 50%;
   border: 1px solid;
-  /* PENDING TOKEN */
-  /* height: ${(props) => props.theme.bulletHeight};
-  width: ${(props) => props.theme.bulletWidth}; */
+  height: 4px;
+  width: 4px;
 `;
 
 const Disc = styled.div`
   background-color: var(--color-fg-neutral-dark);
   border-radius: 50%;
-  /* PENDING TOKEN */
-  /* height: ${(props) => props.theme.bulletHeight};
-  width: ${(props) => props.theme.bulletWidth}; */
+  height: 4px;
+  width: 4px;
 `;
 
 const ListItem = styled.li`

From 16f581e7ceb1de4fc608777d50c6273cf5795250 Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Wed, 5 Feb 2025 16:20:31 +0100
Subject: [PATCH 4/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"
 />
-<link rel="stylesheet" href="../src/styles/variables.css" />
 
 <style>
   body {
diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx
index 50171526b6..e535a40648 100644
--- a/packages/lib/.storybook/preview.tsx
+++ b/packages/lib/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/react";
 import { disabledRules } from "../test/accessibility/rules/common/disabledRules";
+import "../src/styles/variables.css";
 
 const preview: Preview = {
   parameters: {

From c0d8100b4bbbe7ab4413360cc6834cc51010e18f Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Thu, 6 Feb 2025 14:08:13 +0100
Subject: [PATCH 5/8] Fixed icon size

---
 packages/lib/src/bulleted-list/BulletedList.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/lib/src/bulleted-list/BulletedList.tsx b/packages/lib/src/bulleted-list/BulletedList.tsx
index 58949d04e9..e5e19875ba 100644
--- a/packages/lib/src/bulleted-list/BulletedList.tsx
+++ b/packages/lib/src/bulleted-list/BulletedList.tsx
@@ -16,7 +16,7 @@ const ListContainer = styled.div`
 
 const Bullet = styled.div`
   align-items: center;
-  align-self: center;
+  align-self: flex-start;
   display: flex;
 `;
 
@@ -30,11 +30,11 @@ const GeneralContent = styled.div`
 const Icon = styled.div`
   align-content: center;
   font-size: var(--height-xxs);
-  height: var(--height-xxs);
-  width: 16px;
+  height: var(--height-s);
+  width: auto;
   svg {
-    height: 4px;
-    width: 4px;
+    height: var(--height-xxs);
+    width: 16px;
   }
 `;
 

From 0c0b7622914e9c280e0bbc951758ed3f563aa672 Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Mon, 26 May 2025 12:53:37 +0200
Subject: [PATCH 6/8] Changed documentation structure

---
 .../pages/components/bulleted-list/code.tsx   | 17 ++++
 .../pages/components/bulleted-list/index.tsx  | 24 +++---
 .../bulleted-list/specifications.tsx          | 21 -----
 .../pages/components/bulleted-list/usage.tsx  | 21 -----
 .../bulleted-list/BulletedListPageLayout.tsx  | 10 +--
 .../code/BulletedListCodePage.tsx             | 44 +++++-----
 .../overview/BulletedListOverviewPage.tsx     | 49 +++++++++++
 .../specs/BulletedListSpecsPage.tsx           | 85 -------------------
 .../usage/BulletedListUsagePage.tsx           | 43 ----------
 9 files changed, 100 insertions(+), 214 deletions(-)
 create mode 100644 apps/website/pages/components/bulleted-list/code.tsx
 delete mode 100644 apps/website/pages/components/bulleted-list/specifications.tsx
 delete mode 100644 apps/website/pages/components/bulleted-list/usage.tsx
 create mode 100644 apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
 delete mode 100644 apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx
 delete mode 100644 apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx

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 = () => (
+  <>
+    <Head>
+      <title>Bulleted list code — Halstack Design System</title>
+    </Head>
+    <BulletedListCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <BulletedListPageLayout>{page}</BulletedListPageLayout>;
+
+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 (
-    <>
-      <Head>
-        <title>Bulleted List — Halstack Design System</title>
-      </Head>
-      <BulletedListCodePage />
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Bulleted List — Halstack Design System</title>
+    </Head>
+    <BulletedListOverviewPage />
+  </>
+);
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <BulletedListPageLayout>{page}</BulletedListPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <BulletedListPageLayout>{page}</BulletedListPageLayout>;
 
 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 (
-    <>
-      <Head>
-        <title>Bulleted List Specs — Halstack Design System</title>
-      </Head>
-      <BulletedListSpecsPage></BulletedListSpecsPage>
-    </>
-  );
-};
-
-Specifications.getLayout = function getLayout(page: ReactElement) {
-  return <BulletedListPageLayout>{page}</BulletedListPageLayout>;
-};
-
-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 (
-    <>
-      <Head>
-        <title>Bulleted list Usage — Halstack Design System</title>
-      </Head>
-      <BulletedListUsagePage />
-    </>
-  );
-};
-
-Usage.getLayout = function getLayout(page: ReactElement) {
-  return <BulletedListPageLayout>{page}</BulletedListPageLayout>;
-};
-
-export default Usage;
diff --git a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
index bf5a3a8704..851bd64a11 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 (
     <DxcFlex direction="column" gap="3rem">
@@ -19,7 +15,7 @@ const BulletedListPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Bulleted List" />
           <DxcParagraph>Bulleted list are used to display text items in a bulleted format.</DxcParagraph>
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}
diff --git a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
index cfbdf1bf5c..92c37c4294 100644
--- a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
+++ b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
@@ -24,14 +24,19 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>type</td>
             <td>
-              <TableCode>'disc' | 'circle' | 'square' | 'number' | 'icon'</TableCode>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="required" />
+                children
+              </DxcFlex>
             </td>
-            <td>Defines the style of the bullet point in the list.</td>
             <td>
-              <Code>'disc'</Code>
+              <TableCode>React.ReactNode</TableCode>
+            </td>
+            <td>
+              Contains one or more <Code>DxcBulletedList.Item</Code>.
             </td>
+            <td>-</td>
           </tr>
           <tr>
             <td>icon</td>
@@ -49,19 +54,14 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
+            <td>type</td>
             <td>
-              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
-                <StatusBadge status="required" />
-                children
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>React.ReactNode</TableCode>
+              <TableCode>'disc' | 'circle' | 'square' | 'number' | 'icon'</TableCode>
             </td>
+            <td>Defines the style of the bullet point in the list.</td>
             <td>
-              Contains one or more <Code>DxcBulletedList.Item</Code>.
+              <Code>'disc'</Code>
             </td>
-            <td>-</td>
           </tr>
         </tbody>
       </DxcTable>
@@ -118,15 +118,13 @@ const sections = [
   },
 ];
 
-const BulletedListCodePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx" />
-    </DxcFlex>
-  );
-};
+const BulletedListCodePage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainerLayout>
+      <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    </QuickNavContainerLayout>
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx" />
+  </DxcFlex>
+);
 
 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..2df7b544eb
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
@@ -0,0 +1,49 @@
+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";
+
+const sections = [
+  {
+    title: "Introduction",
+    content: (
+      <>
+        <DxcParagraph>
+          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.
+        </DxcParagraph>
+        <DxcAlert
+          title="Use cases"
+          semantic="warning"
+          message={{
+            text: (
+              <DxcParagraph>
+                Disclaimer - This component is not a 1-to-1 replacement of the <Code>ul</Code> <Code>ol</Code> 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.
+              </DxcParagraph>
+            ),
+          }}
+          closable={false}
+        />
+      </>
+    ),
+  },
+];
+
+const BulletedListOverviewPage = () => {
+  return (
+    <DxcFlex direction="column" gap="4rem">
+      <QuickNavContainerLayout>
+        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
+      </QuickNavContainerLayout>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/usage/BulletedListOverviewPage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default BulletedListOverviewPage;
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: (
-          <>
-            <DxcTable>
-              <thead>
-                <tr>
-                  <th>Component token</th>
-                  <th>Element</th>
-                  <th>Core token</th>
-                  <th>Value</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    <Code>fontFamily</Code>
-                  </td>
-                  <td>List item text</td>
-                  <td>
-                    <Code>font-family-sans</Code>
-                  </td>
-                  <td>'Open Sans, sans-serif'</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>fontSize</Code>
-                  </td>
-                  <td>List item text</td>
-                  <td>
-                    <Code>font-scale-03</Code>
-                  </td>
-                  <td>1rem</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>fontWeight</Code>
-                  </td>
-                  <td>List item text</td>
-                  <td>
-                    <Code>font-scale-03</Code>
-                  </td>
-                  <td>400</td>
-                </tr>
-                <tr>
-                  <td>
-                    <Code>color</Code>
-                  </td>
-                  <td>List item text</td>
-                  <td>
-                    <Code>color-black</Code>
-                  </td>
-                  <td>#000000</td>
-                </tr>
-              </tbody>
-            </DxcTable>
-          </>
-        ),
-      },
-    ],
-  },
-];
-
-const BulletedListSpecsPage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx" />
-    </DxcFlex>
-  );
-};
-
-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: (
-      <>
-        <DxcParagraph>
-          This component is not a 1-to-1 replacement of the <Code>ul</Code> <Code>ol</Code> 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.
-        </DxcParagraph>
-        <DxcParagraph>
-          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.
-        </DxcParagraph>
-        <DxcBulletedList>
-          <DxcBulletedList.Item>Ordered lists are displayed with a preceding number.</DxcBulletedList.Item>
-          <DxcBulletedList.Item>Unordered lists are displayed with a preceding bullet point.</DxcBulletedList.Item>
-          <DxcBulletedList.Item>Lists can be nested as deeply as needed.</DxcBulletedList.Item>
-        </DxcBulletedList>
-      </>
-    ),
-  },
-];
-
-const BulletedListUsagePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx" />
-    </DxcFlex>
-  );
-};
-
-export default BulletedListUsagePage;

From f658b65ad094fff479478e88394b6e6da04c2fbb Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Mon, 26 May 2025 13:34:18 +0200
Subject: [PATCH 7/8] Added documentation for bulleted list

---
 .../overview/BulletedListOverviewPage.tsx     | 130 +++++++++++++++++-
 .../bulleted-list/overview/examples/circle.ts |  17 +++
 .../bulleted-list/overview/examples/disc.ts   |  17 +++
 .../bulleted-list/overview/examples/icon.ts   |  24 ++++
 .../bulleted-list/overview/examples/number.ts |  17 +++
 .../bulleted-list/overview/examples/square.ts |  17 +++
 .../overview/images/bulleted_list_anatomy.png | Bin 0 -> 15365 bytes
 .../overview/FileInputOverviewPage.tsx        |   2 +-
 ...put_anatomy.png => file_input_anatomy.png} | Bin
 9 files changed, 221 insertions(+), 3 deletions(-)
 create mode 100644 apps/website/screens/components/bulleted-list/overview/examples/circle.ts
 create mode 100644 apps/website/screens/components/bulleted-list/overview/examples/disc.ts
 create mode 100644 apps/website/screens/components/bulleted-list/overview/examples/icon.ts
 create mode 100644 apps/website/screens/components/bulleted-list/overview/examples/number.ts
 create mode 100644 apps/website/screens/components/bulleted-list/overview/examples/square.ts
 create mode 100644 apps/website/screens/components/bulleted-list/overview/images/bulleted_list_anatomy.png
 rename apps/website/screens/components/file-input/overview/images/{fileInput_anatomy.png => file_input_anatomy.png} (100%)

diff --git a/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx b/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
index 2df7b544eb..1edde1251d 100644
--- a/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
+++ b/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
@@ -3,6 +3,14 @@ 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 = [
   {
@@ -33,15 +41,133 @@ const sections = [
       </>
     ),
   },
+  {
+    title: "Anatomy",
+    content: (
+      <>
+        <Image src={anatomy} alt="Bulleted list's anatomy" />
+        <DxcBulletedList type="number">
+          <DxcBulletedList.Item>
+            <strong>Bullet point:</strong> 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.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Label:</strong> the text content associated with each bullet point. It conveys the actual
+            information and should be clear, concise, and scannable for easy reading.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
+  {
+    title: "Types",
+    subSections: [
+      {
+        title: "Disc",
+        content: (
+          <>
+            <DxcParagraph>
+              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.
+            </DxcParagraph>
+            <Example example={disc} />
+          </>
+        ),
+      },
+      {
+        title: "Circle",
+        content: (
+          <>
+            <DxcParagraph>
+              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.
+            </DxcParagraph>
+            <Example example={circle} />
+          </>
+        ),
+      },
+      {
+        title: "Square",
+        content: (
+          <>
+            <DxcParagraph>
+              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.
+            </DxcParagraph>
+            <Example example={square} />
+          </>
+        ),
+      },
+      {
+        title: "Number",
+        content: (
+          <>
+            <DxcParagraph>
+              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.
+            </DxcParagraph>
+            <Example example={number} />
+          </>
+        ),
+      },
+      {
+        title: "Icon",
+        content: (
+          <>
+            <DxcParagraph>
+              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.
+            </DxcParagraph>
+            <Example example={icon} />
+          </>
+        ),
+      },
+    ],
+  },
+  {
+    title: "Best practices",
+    content: (
+      <>
+        <DxcBulletedList>
+          <DxcBulletedList.Item>
+            <strong>Choose the appropriate bullet type for the context:</strong> use discs for standard lists, numbers
+            for sequences or steps, and icons when a visual cue adds clarity or emphasis.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Keep list items concise and scannable:</strong> lists should be easy to read at a glance. Use brief,
+            clear phrasing.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Maintain parallel structure:</strong> ensure that all list items follow a consistent grammatical
+            pattern to improve readability.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Avoid overusing nested lists:</strong> deeply nested lists can be hard to follow. Limit nesting to
+            one level if possible.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Use punctuation consistently:</strong> if one item ends in a period, all items should, unless
+            they're just short phrases or single words.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Use spacing to improve legibility:</strong> ensure there is enough vertical space between items,
+            especially in longer lists.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
 ];
 
 const BulletedListOverviewPage = () => {
   return (
     <DxcFlex direction="column" gap="4rem">
       <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
+        <QuickNavContainer sections={sections} startHeadingLevel={2} />
       </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/usage/BulletedListOverviewPage.tsx" />
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx" />
     </DxcFlex>
   );
 };
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 (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcBulletedList type="circle">
+        <DxcBulletedList.Item>Circle</DxcBulletedList.Item>
+      </DxcBulletedList>
+    </DxcInset>
+  );
+}`;
+
+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 (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcBulletedList type="disc">
+        <DxcBulletedList.Item>Disc</DxcBulletedList.Item>
+      </DxcBulletedList>
+    </DxcInset>
+  );
+}`;
+
+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 = (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+    </svg>
+  );
+
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcBulletedList type="icon" icon={icon}>
+        <DxcBulletedList.Item>Icon</DxcBulletedList.Item>
+      </DxcBulletedList>
+    </DxcInset>
+  );
+}`;
+
+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 (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcBulletedList type="number">
+        <DxcBulletedList.Item>Number</DxcBulletedList.Item>
+      </DxcBulletedList>
+    </DxcInset>
+  );
+}`;
+
+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 (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcBulletedList type="square">
+        <DxcBulletedList.Item>Square</DxcBulletedList.Item>
+      </DxcBulletedList>
+    </DxcInset>
+  );
+}`;
+
+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 0000000000000000000000000000000000000000..fa1e20d40ca3cb22c5e252424bd287960c8082fc
GIT binary patch
literal 15365
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
UJGU2qgAsG#oT)*<8M}x70p=MbX#fBK

literal 0
HcmV?d00001

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

From 5a527b98c042bb25364f1b626bc2c3f746d4a40f Mon Sep 17 00:00:00 2001
From: Enrique Moreno <enrique.moreno@dxc.com>
Date: Mon, 9 Jun 2025 16:59:31 +0200
Subject: [PATCH 8/8] Added fixes for code review

---
 packages/lib/src/bulleted-list/BulletedList.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/lib/src/bulleted-list/BulletedList.tsx b/packages/lib/src/bulleted-list/BulletedList.tsx
index e5e19875ba..d6581d1165 100644
--- a/packages/lib/src/bulleted-list/BulletedList.tsx
+++ b/packages/lib/src/bulleted-list/BulletedList.tsx
@@ -18,6 +18,7 @@ const Bullet = styled.div`
   align-items: center;
   align-self: flex-start;
   display: flex;
+  height: var(--height-s);
 `;
 
 const GeneralContent = styled.div`
@@ -28,7 +29,8 @@ const GeneralContent = styled.div`
 `;
 
 const Icon = styled.div`
-  align-content: center;
+  display: flex;
+  align-items: center;
   font-size: var(--height-xxs);
   height: var(--height-s);
   width: auto;
@@ -55,7 +57,7 @@ const Square = styled.div`
 const Circle = styled.div`
   border-color: var(--color-fg-neutral-dark);
   border-radius: 50%;
-  border: 1px solid;
+  border: var(--border-width-s) var(--border-style-default);
   height: 4px;
   width: 4px;
 `;
@@ -72,11 +74,9 @@ const ListItem = styled.li`
   display: flex;
   font-family: var(--typography-font-family);
   font-size: var(--typography-body-m);
-  font-style: normal;
   font-weight: var(--typography-body-regular);
-  line-height: normal;
   list-style: none;
-  margin: 0px;
+  margin: var(--spacing-padding-none);
   padding: var(--spacing-padding-none);
 `;