[major] Reimplement Chip component

apps/website/screens/components/chip/ChipPageLayout.tsx

@@ -16,8 +16,7 @@ const ChipPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
           <ComponentHeading name="Chip" />
           <DxcParagraph>
-            A chip is a compact, interactive UI element used to represent small pieces of information, actions, or
-            selections.
+            A chip is a compact element used to label, filter, or represent pieces of information within an interface.
           </DxcParagraph>
           <TabsPageHeading tabs={tabs} />
         </DxcFlex>

apps/website/screens/components/chip/code/ChipCodePage.tsx

@@ -2,19 +2,11 @@ import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
 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, { ExtendedTableCode, TableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
-import avatar from "./examples/avatar";
 import Link from "next/link";
-
-const actionTypeString = `{
-  icon?: string | (React.ReactNode 
-    & React.SVGProps<SVGSVGElement>); 
-  onClick: () => void; 
-  title?: string;
-}`;
+import dismissible from "./examples/dismissible";
+import selectable from "./examples/selectable";
 
 const prefixTypeString = `| string 
 | SVG
@@ -26,7 +18,7 @@ const avatarPropsString = `{
     | 'error';
   icon?: string | SVG;
   imgSrc?: string;
-  label?: string;
+  profileName?: string;
 };`;
 
 const sections = [
@@ -44,50 +36,67 @@ const sections = [
         </thead>
         <tbody>
           <tr>
+            <td>disabled</td>
             <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="new" />
-                action
-              </DxcFlex>
+              <TableCode>boolean</TableCode>
             </td>
             <td>
-              <ExtendedTableCode>{actionTypeString}</ExtendedTableCode>
+              If true, the component will be disabled. When mode is <Code>"dismissible"</Code>, the chip cannot be
+              disabled.
+            </td>
+            <td>
+              <TableCode>false</TableCode>
             </td>
-            <td>Action to be displayed on the right side of the chip after the label.</td>
-            <td>-</td>
           </tr>
           <tr>
-            <td>disabled</td>
+            <td>label</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>string</TableCode>
             </td>
-            <td>If true, the component will be disabled.</td>
             <td>
-              <TableCode>false</TableCode>
+              Text to be placed on the chip. When using an avatar as prefix or when mode is <Code>"dismissible"</Code>,
+              the label is required to ensure proper accessibility.
             </td>
+            <td>-</td>
           </tr>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="required" />
-                label
+                <StatusBadge status="new" />
+                mode
               </DxcFlex>
             </td>
             <td>
-              <TableCode>string</TableCode>
+              <TableCode>"selectable" | "dismissible"</TableCode>
+            </td>
+            <td>
+              Determines the visual style and functionality of the chip. Available modes are:
+              <ul>
+                <li>
+                  <strong>selectable</strong>: The whole chip is an interactive element that allows users to activate or
+                  clear options directly within the interface.
+                </li>
+                <li>
+                  <strong>dismissible</strong>: Dismissible chip is used to represent information generated by user
+                  input within an interface.
+                </li>
+              </ul>
+            </td>
+            <td>
+              <TableCode>"selectable"</TableCode>
             </td>
-            <td>Text to be placed on the chip.</td>
-            <td>-</td>
           </tr>
           <tr>
-            <td>margin</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                onClick
+              </DxcFlex>
             </td>
             <td>
-              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.
+              <TableCode>{"() => void"}</TableCode>
             </td>
+            <td>Function to be called when the chip is clicked or the dismiss action is triggered.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -119,14 +128,30 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                selected
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>
+              If true, the component will be selected. If undefined, the component manages its own internal state
+              (uncontrolled mode). This property is only applicable when the mode is <Code>"selectable"</Code>.
+            </td>
+            <td>-</td>
+          </tr>
           <tr>
             <td>tabIndex</td>
             <td>
               <TableCode>number</TableCode>
             </td>
             <td>
-              Value of the <Code>tabindex</Code> attribute applied to both the component and the prefix and suffix icons
-              when a function is given.
+              Value of the <Code>tabindex</Code> attribute applied to the component when mode is{" "}
+              <Code>"selectable"</Code> and clear icon when mode is <Code>"dismissible"</Code>.
             </td>
             <td>
               <TableCode>0</TableCode>
@@ -140,22 +165,14 @@ const sections = [
     title: "Examples",
     subSections: [
       {
-        title: "Basic usage",
-        content: <Example example={basicUsage} defaultIsVisible />,
-      },
-      {
-        title: "Icons",
-        content: (
-          <>
-            <Example example={icons} defaultIsVisible />
-          </>
-        ),
+        title: "Selectable",
+        content: <Example example={selectable} defaultIsVisible />,
       },
       {
-        title: "Avatar",
+        title: "Dismissible",
         content: (
           <>
-            <Example example={avatar} defaultIsVisible />
+            <Example example={dismissible} defaultIsVisible />
           </>
         ),
       },

apps/website/screens/components/chip/code/examples/dismissible.tsx

@@ -0,0 +1,79 @@
+import { DxcChip, DxcFlex, DxcInset, DxcSelect } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+type Option = { label: string; value: string; icon: string };
+
+const options: Option[] = [
+  { label: "Electric Car", value: "car", icon: "electric_car" },
+  { label: "Motorcycle", value: "motorcycle", icon: "Motorcycle" },
+  { label: "Train", value: "train", icon: "train" },
+  { label: "Bike", value: "bike", icon: "pedal_bike" },
+];
+
+const findOptionByValue = (value: string): Option | null => options.find((opt) => opt.value === value) ?? null;
+
+type TransportSelectProps = {
+  selectedOptions: Option[];
+  onChange: (selected: Option[]) => void;
+};
+
+const TransportSelect = ({ selectedOptions, onChange }: TransportSelectProps) => {
+  const handleSelectChange = ({ value }: { value: string | string[] }) => {
+    if (Array.isArray(value)) {
+      onChange(value.map((val) => findOptionByValue(val)).filter(Boolean) as Option[]);
+    }
+  };
+
+  return (
+    <DxcSelect
+      label="Select your favourite hobbies"
+      placeholder="Choose your hobbies"
+      options={options}
+      onChange={handleSelectChange}
+      value={selectedOptions.map((opt) => opt.value)}
+      multiple
+      enableSelectAll
+    />
+  );
+};
+
+const code = `() => {
+  const [selectedOptions, setSelectedOptions] = useState([options[0], options[2]]);
+
+  const handleDismiss = (valueToRemove) => {
+    setSelectedOptions(selectedOptions.filter(opt => opt.value !== valueToRemove));
+  };
+
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcFlex direction="column" gap="var(--spacing-gap-m)">
+        <TransportSelect selectedOptions={selectedOptions} onChange={setSelectedOptions} />
+
+        {selectedOptions.length > 0 && (
+          <DxcFlex gap="var(--spacing-gap-s)" wrap="wrap">
+            {selectedOptions.map((option) => (
+              <DxcChip
+                key={option.value}
+                mode="dismissible"
+                label={option.label}
+                prefix={option.icon}
+                onClick={() => handleDismiss(option.value)}
+              />
+            ))}
+          </DxcFlex>
+        )}
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcChip,
+  DxcInset,
+  DxcFlex,
+  useState,
+  options,
+  TransportSelect,
+};
+
+export default { code, scope };