Fix: Documentation chip component was added

.github/workflows/sonarcloud.yml

@@ -13,13 +13,31 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Analyze with SonarCloud
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Set up JDK 17
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'zulu'
+          java-version: '17'
 
-        uses: SonarSource/sonarcloud-github-action@de2e56b42aa84d0b1c5b622644ac17e505c9a049
+      - name: Cache SonarCloud packages
+        uses: actions/cache@v3
+        with:
+          path: ~/.sonar/cache
+          key: ${{ runner.os }}-sonar
+          restore-keys: ${{ runner.os }}-sonar
+
+      - name: Analyze with SonarCloud
+        uses: SonarSource/sonarcloud-github-action@master
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} # Generate a token on Sonarcloud.io, add it to the secrets of this repo with the name SONAR_TOKEN (Settings > Secrets > Actions > add new repository secret)
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
         with:
-          args:
+          args: >
             -Dsonar.projectKey=dd3tech_dd360-components-docs
-            -Dsonar.organization=dd3tech-1
+            -Dsonar.organization=dd3tech-1 -Dsonar.sourceEncoding=UTF-8
+            -Dsonar.sources=.

docs/components/badge.mdx

@@ -9,9 +9,9 @@ components: Badge
 
 <Label>Components</Label>
 
-# <HeaderDocCustom title="Badge" pathUrl="images-avatar--with-image" />
+# <HeaderDocCustom title="Badge" pathUrl="components-badge--badge" />
 
-The Badge component in React provides a convenient way to display a small piece of information, such as a status, in a visually appealing and attention-grabbing manner.
+The Badge component is used to display small numeric values or status indicators. It’s ideal for showing counts or notifications, typically in a rounded visual container.
 
 <br />
 
@@ -21,105 +21,56 @@ The Badge component in React provides a convenient way to display a small piece
 
 ##### <span name="floating-nav">Usage</span>
 
-To use the Badge component, you could start by adding the properties text, classNameIcon and className.
-
-Use the Badge component as shown below:
+To use the Badge component, provide a `value` (number) and optionally a `variant` to indicate the type of status.
 
 <Playground>
-  <Badge text="Hello world" classNameIcon='w-4' className='p-1' />
+  <Badge value={3}  />
 </Playground>
 
 The code snippet below shows how to use the Badge component:
 
 <WindowEditor
-    codeString={`import { Badge } from 'dd360-ds'
+  codeString={`import { Badge } from 'dd360-ds'
 
- <Badge text="Hello world"/>
-`}/>
+<Badge value={3} />
+`}
+/>
 
 <br />
 
-##### <span name="floating-nav">Variant</span>
+ ##### <span name="floating-nav">Variants</span>
 
-With the prop variant you can customize the appearance of the Badge component. Available options are: warning, infoPrimary, infoSecondary, success, primary, secondary, and error. Default uses: "infoPrimary".
+The `variant` prop allows you to customize the appearance of the Badge. Available options are: `default`, `success`, `warning`, and `error`. The default value is `"default"`.
 
-<Playground className="flex flex-col gap-y-2">
-    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
-    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
-    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
-    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
-    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
-    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
-    <Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
+<Playground className="flex gap-2">
+  <Badge value={1} variant="default" />
+  <Badge value={2} variant="success" />
+  <Badge value={3} variant="warning" />
+  <Badge value={4} variant="error" />
 </Playground>
 
-The code snippet below shows how to set a Badge component variant:
-
 <WindowEditor
-    codeString={`import { Badge } from 'dd360-ds'
-
-<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
-<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
-<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
-<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
-<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
-<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
-<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
-`}/>
-
-<br />
+  codeString={`import { Badge } from 'dd360-ds'
 
-##### <span name="floating-nav">Icon</span>
-
-With the prop icon you can customize the icon of the Badge component. Available options are: tag, clock, warning, check, success, exclamation, clipboard-copy, HomeIcon, RefreshIcon, and none. Default uses: "HomeIcon".
-
-<Playground className="flex flex-col gap-y-2">
-    <Badge text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
-    <Badge text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
-    <Badge text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
-    <Badge text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
-    <Badge text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
-    <Badge text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
-    <Badge text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
-    <Badge text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
-    <Badge text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
-    <Badge text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
-</Playground>
-
-The code snippet below shows how to set a Badge component icon:
-
-<WindowEditor
-    codeString={`import { Badge } from 'dd360-ds'
-
-<Badge text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
-<Badge text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
-<Badge text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
-<Badge text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
-<Badge text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
-<Badge text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
-<Badge text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
-<Badge text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
-<Badge text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
-<Badge text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
-`}/>
+<Badge value={1} variant="default" />
+<Badge value={2} variant="success" />
+<Badge value={3} variant="warning" />
+<Badge value={4} variant="error" />
+`}
+/>
 
 <br />
-<br />
+<br /> 
 
 ##### <span name="floating-nav">API Reference</span>
 
 <CustomTableDocs
   dataTable={[
-    { title: 'variant', default: 'infoPrimary', types: ['warning', 'infoPrimary', 'infoSecondary', 'success', 'primary', 'secondary', 'error'] },
-    { title: 'icon', default: 'HomeIcon', types: ['tag', 'clock', 'warning', 'check', 'success', 'exclamation', 'clipboard-copy', 'HomeIcon', 'RefreshIcon', 'none'] },
-    { title: 'text', default: 'Home Badge', types: ['string'] },
-    { title: 'classNameIcon', default: null, types: ['string'] },
-    { title: 'classNameText', default: null, types: ['string'] },
-    { title: 'className', default: null, types: ['string'] }
+    { title: 'value', default: '—', types: ['number'], required: true },
+    { title: 'variant', default: 'default', types: ['default', 'success', 'warning', 'error'], required: false },
   ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React
-and how to use components in React applications.
+Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
 
-<BackAndForwardController />
+<BackAndForwardController />

docs/components/chip.mdx

@@ -0,0 +1,125 @@
+---
+product: dd360-ds
+title: React Chip component
+components: Chip
+---
+
+<br />
+<br />
+
+<Label>Components</Label>
+
+# <HeaderDocCustom title="Chip" pathUrl="components-chip--chip" />
+
+The Chip component in React provides a convenient way to display a small piece of information, such as a status, in a visually appealing and attention-grabbing manner.
+
+<br />
+
+##### <span name="floating-nav">Imports</span>
+
+<WindowEditor codeString="import { Chip } from 'dd360-ds'" />
+
+##### <span name="floating-nav">Usage</span>
+
+To use the Chip component, you could start by adding the properties text, classNameIcon and className.
+
+Use the Chip component as shown below:
+
+<Playground>
+  <Chip text="Hello world" classNameIcon='w-4' className='p-1' />
+</Playground>
+
+The code snippet below shows how to use the Chip component:
+
+<WindowEditor
+    codeString={`import { Chip } from 'dd360-ds'
+
+ <Chip text="Hello world"/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Variant</span>
+
+With the prop variant you can customize the appearance of the Chip component. Available options are: warning, infoPrimary, infoSecondary, success, primary, secondary, and error. Default uses: "infoPrimary".
+
+<Playground className="flex flex-col gap-y-2">
+    <Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
+    <Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
+    <Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
+    <Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
+    <Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
+    <Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
+    <Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
+</Playground>
+
+The code snippet below shows how to set a Chip component variant:
+
+<WindowEditor
+    codeString={`import { Chip } from 'dd360-ds'
+
+<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
+<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
+<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
+<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
+<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
+<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
+<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">Icon</span>
+
+With the prop icon you can customize the icon of the Chip component. Available options are: tag, clock, warning, check, success, exclamation, clipboard-copy, HomeIcon, RefreshIcon, and none. Default uses: "HomeIcon".
+
+<Playground className="flex flex-col gap-y-2">
+    <Chip text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
+    <Chip text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
+    <Chip text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
+    <Chip text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
+    <Chip text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
+    <Chip text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
+    <Chip text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
+    <Chip text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
+    <Chip text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
+    <Chip text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
+</Playground>
+
+The code snippet below shows how to set a Chip component icon:
+
+<WindowEditor
+    codeString={`import { Chip } from 'dd360-ds'
+
+<Chip text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
+<Chip text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
+<Chip text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
+<Chip text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
+<Chip text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
+<Chip text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
+<Chip text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
+<Chip text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
+<Chip text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
+<Chip text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
+`}/>
+
+<br />
+<br />
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+  dataTable={[
+    { title: 'variant', default: 'infoPrimary', types: ['warning', 'infoPrimary', 'infoSecondary', 'success', 'primary', 'secondary', 'error'] },
+    { title: 'icon', default: 'HomeIcon', types: ['tag', 'clock', 'warning', 'check', 'success', 'exclamation', 'clipboard-copy', 'HomeIcon', 'RefreshIcon', 'none'] },
+    { title: 'text', default: 'Home Chip', types: ['string'] },
+    { title: 'classNameIcon', default: null, types: ['string'] },
+    { title: 'classNameText', default: null, types: ['string'] },
+    { title: 'className', default: null, types: ['string'] }
+  ]}
+/>
+
+Note: This documentation assumes that the audience has basic knowledge of React
+and how to use components in React applications.
+
+<BackAndForwardController />

package.json

@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.39.1",
+    "dd360-ds": "6.39.5",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",

src/components/Layout/SideBarDocs.tsx

@@ -315,6 +315,10 @@ export const components: ComponentObjectProps = {
         label: 'Circle',
         pathname: 'circle'
       },
+      {
+        label: 'Chip',
+        pathname: 'chip'
+      },
       {
         label: 'Confirm Dialog',
         pathname: 'confirm-dialog'