DescriptionList

.storybook/preview.js

@@ -73,14 +73,14 @@ export const parameters = {
           ],
           'Layout',
           [
-          'Breadcrumb',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Details',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Tabs',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Table',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Breadcrumb',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Details',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Tabs',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Table',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
           ],
           'Typography',
           [
@@ -108,6 +108,10 @@ export const parameters = {
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'List',
             ['Documentation', 'Live', 'Without style', 'Class based'],
+            'DescriptionList',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'PreformattedText',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
           ],
           'Changelog',
         ],

.vscode/settings.json

@@ -11,4 +11,4 @@
   "files.associations": {
     "*.css": "postcss"
   }
-}
+}

example/package.json

@@ -40,4 +40,4 @@
     "node-sass": "9.0.0",
     "web-vitals": "3.4.0"
   }
-}
+}

example/src/components/DescriptionList.scss

@@ -0,0 +1,12 @@
+.dlClass{
+    background-color: bisque;
+}
+
+.termClass{
+    text-decoration: underline;
+}
+
+.detailClass{
+    color: blue;
+}
+

example/src/components/DescriptionListDemo.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { DescriptionList, Term, Detail } from '@capgeminiuk/dcx-react-library';
+import './DescriptionList.scss';
+
+export const DescriptionListDemo = () => {
+  return (
+    <div>
+      <h1>Demo of Description List</h1>
+      <div>
+        <h3>Description List</h3>
+        <DescriptionList>
+          <Term>Coffee</Term>
+          <Detail>- black hot drink</Detail>
+          <Term>Milk</Term>
+          <Detail>- white cold drink</Detail>
+        </DescriptionList>
+      </div>
+
+      <div>
+        <h3>
+          Description List with className, termClassName and detailClassName
+        </h3>
+        <DescriptionList
+          detailClassName="detailClass"
+          termClassName="termClass"
+          className="dlClass"
+        >
+          <Term>Coffee</Term>
+          <Detail>- black hot drink</Detail>
+          <Term>Milk</Term>
+          <Detail>- white cold drink</Detail>
+        </DescriptionList>
+      </div>
+
+      <div>
+        <h3>Description List when extra props are passed</h3>
+        <DescriptionList descListProps={{ style: { background: '#29bdc1' } }}>
+          <Term termProps={{ style: { textDecoration: 'underline' } }}>
+            Coffee
+          </Term>
+          <Detail detailProps={{ style: { color: 'blue' } }}>
+            - black hot drink
+          </Detail>
+          <Term>Milk</Term>
+          <Detail>- white cold drink</Detail>
+        </DescriptionList>
+      </div>
+      <DescriptionList
+        className="myStyle"
+        descListProps={{ style: { color: 'red' } }}
+        detailClassName="myStyle"
+        termClassName="myStyle"
+      >
+        <Term className="myStyle" termProps={{ style: { color: 'red' } }}>
+          Coffee
+        </Term>
+        <Detail className="myStyle" detailProps={{ style: { color: 'red' } }}>
+          - black hot drink
+        </Detail>
+        <Term>Milk</Term>
+        <Detail>- white cold drink</Detail>
+      </DescriptionList>
+    </div>
+  );
+};
+
+export default DescriptionListDemo;

example/src/components/index.ts

@@ -18,6 +18,7 @@ export { TooltipDemo } from './TooltipDemo';
 export { DetailsDemo } from './DetailsDemo';
 export { CharacterCountDemo } from './CharacterCountDemo';
 export { LinkDemo } from './LinkDemo';
+export { DescriptionListDemo } from './DescriptionListDemo';
 export { LabelDemo } from './LabelDemo';
 export { ListDemo } from './ListDemo';
 export { BreadcrumbDemo } from './BreadcrumbDemo';

example/src/index.tsx

@@ -35,6 +35,7 @@ import { LabelDemo } from './components/LabelDemo';
 import { KeyboardInputDemo } from './components/KeyboardInputDemo';
 import { PreformattedTextDemo } from './components/PreformattedTextDemo';
 import { BreadcrumbDemo } from './components/BreadcrumbDemo';
+import DescriptionListDemo from './components/DescriptionListDemo';
 const App = () => (
   <div>
     <BrowserRouter>
@@ -67,6 +68,7 @@ const App = () => (
         <Route path="/keyBoard" element={<KeyboardInputDemo />} />
         <Route path="/preformattedText" element={<PreformattedTextDemo />} />
         <Route path="/list" element={<ListDemo />} />
+        <Route path="/descriptionList" element={<DescriptionListDemo />} />
         <Route path="/breadcrumb" element={<BreadcrumbDemo />} />
       </Routes>
     </BrowserRouter>

package.json

@@ -134,4 +134,4 @@
     "@cesium133/forgjs": "1.1.10",
     "imask": "^6.4.3"
   }
-}
+}

src/descriptionList/DescriptionList.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { DescriptionListContext } from './UseDescriptionList';
+import { classNames } from '../common';
+
+interface DescriptionListProps {
+  /**
+   * allow to specify a user custom content
+   */
+  children: JSX.Element[] | JSX.Element;
+  /**
+   * A CSS class for styling list
+   */
+  className?: string;
+  /**
+   * allow to specify a user with Additional props/attributes
+   */
+  descListProps?: React.HTMLProps<HTMLDListElement>;
+  /**
+   * A CSS class for applying same styling to all the Definition Term
+   */
+  termClassName?: string;
+  /**
+   * A CSS class for applying same styling to all the Definition Detail
+   */
+  detailClassName?: string;
+}
+
+export const DescriptionList = ({
+  termClassName,
+  detailClassName,
+  children,
+  className,
+  descListProps,
+}: DescriptionListProps) => (
+  <DescriptionListContext.Provider value={{ termClassName, detailClassName }}>
+    <dl
+      className={classNames(['dcx-description-list', className])}
+      {...descListProps}
+    >
+      {children}
+    </dl>
+  </DescriptionListContext.Provider>
+);

src/descriptionList/UseDescriptionList.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+export type DescriptionListContextType = {
+  /**
+   * A CSS class for applying same styling to all the Definition Term
+   */
+  termClassName?: string;
+  /**
+   * A CSS class for applying same styling to all the Definition Detail
+   */
+  detailClassName?: string;
+};
+
+export const DescriptionListContext =
+  createContext<DescriptionListContextType | undefined>(undefined);
+
+export const useDescriptionList = () => {
+  const context = useContext(DescriptionListContext);
+  if (context === undefined) {
+    throw new Error(
+      'Term and Detail components must be used within DescriptionList component'
+    );
+  }
+  return context;
+};

src/descriptionList/__test__/DescriptionList.test.tsx

@@ -0,0 +1,146 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { DescriptionList } from '../DescriptionList';
+import { Term } from '../components/Term';
+import { Detail } from '../components/Detail';
+
+describe('Description List', () => {
+  it('should render with the dcx-description-list className when no className is provided', () => {
+    const { container } = render(
+      <DescriptionList>
+        <Term>React</Term>
+        <Detail>A JavaScript library.</Detail>
+        <Term>Component</Term>
+        <Detail>A reusable building block.</Detail>
+      </DescriptionList>
+    );
+    expect(
+      container.querySelector('.dcx-description-list')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.dcx-description-term')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.dcx-description-detail')
+    ).toBeInTheDocument();
+  });
+
+  it('should be able to render the dcx-description-list and the user specific className', () => {
+    const { container } = render(
+      <DescriptionList className="myStyle">
+        <Term>React</Term>
+        <Detail>A JavaScript library.</Detail>
+        <Term>Component</Term>
+        <Detail>A reusable building block.</Detail>
+      </DescriptionList>
+    );
+    expect(container.querySelector('.myStyle')).toBeInTheDocument();
+    expect(
+      container.querySelector('.dcx-description-list')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.dcx-description-term')
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.dcx-description-detail')
+    ).toBeInTheDocument();
+  });
+
+  it('should be able to pass some extra properties', () => {
+    const { container } = render(
+      <DescriptionList descListProps={{ style: { color: 'red' } }}>
+        <Term>React</Term>
+        <Detail>A JavaScript library.</Detail>
+        <Term>Component</Term>
+        <Detail>A reusable building block.</Detail>
+      </DescriptionList>
+    );
+    const labelElement = container.getElementsByClassName(
+      'dcx-description-list'
+    );
+    const style = window.getComputedStyle(labelElement[0]);
+    expect(style.color).toBe('red');
+  });
+
+  it('should display the text of the Term and Detail on rendering DescriptionList component', () => {
+    render(
+      <DescriptionList>
+        <Term>React</Term>
+        <Detail>A JavaScript library.</Detail>
+        <Term>Component</Term>
+        <Detail>A reusable building block.</Detail>
+      </DescriptionList>
+    );
+    expect(screen.getByText('React')).toBeInTheDocument();
+    expect(screen.getByText('A reusable building block.')).toBeInTheDocument();
+  });
+
+  it('should be able to render the same class for all the Terms if termClassName is specified', () => {
+    const { container } = render(
+      <DescriptionList termClassName="termClass">
+        <Term>React</Term>
+        <Detail>A JavaScript library.</Detail>
+        <Term>Component</Term>
+        <Detail>A reusable building block.</Detail>
+      </DescriptionList>
+    );
+    const childComponents = container.querySelectorAll('.termClass');
+    expect(childComponents.length).toBe(2);
+  });
+
+  it('should be able to render the same class for all the Details if termClassName is specified', () => {
+    const { container } = render(
+      <DescriptionList detailClassName="detailClass">
+        <Term>React</Term>
+        <Detail>A JavaScript library.</Detail>
+        <Term>Component</Term>
+        <Detail>A reusable building block.</Detail>
+      </DescriptionList>
+    );
+    const childComponents = container.querySelectorAll('.detailClass');
+    expect(childComponents.length).toBe(2);
+  });
+
+  it('should handle empty terms and details gracefully', () => {
+    const { container } = render(
+      <DescriptionList>{/* No terms and details */}</DescriptionList>
+    );
+
+    const termElements = container.querySelectorAll('Term');
+    const detailElements = container.querySelectorAll('Detail');
+
+    expect(termElements.length).toBe(0);
+    expect(detailElements.length).toBe(0);
+  });
+
+  it('should render nested DescriptionList', () => {
+    render(
+      <DescriptionList>
+        <Term>React</Term>
+        <Detail>A JavaScript library.</Detail>
+        <DescriptionList>
+          <Term>Redux</Term>
+          <Detail>A state management library.</Detail>
+        </DescriptionList>
+      </DescriptionList>
+    );
+
+    expect(screen.getByText('React')).toBeInTheDocument();
+    expect(screen.getByText('A JavaScript library.')).toBeInTheDocument();
+    expect(screen.getByText('Redux')).toBeInTheDocument();
+    expect(screen.getByText('A state management library.')).toBeInTheDocument();
+  });
+
+  it('should throw an error if Term is used outside DescriptionList', () => {
+    expect(() => render(<Term>abc 3</Term>)).toThrow(
+      'Term and Detail components must be used within DescriptionList component'
+    );
+  });
+
+  it('should throw an error if Detail is used outside DescriptionList', () => {
+    expect(() => render(<Detail>abc 3</Detail>)).toThrow(
+      'Term and Detail components must be used within DescriptionList component'
+    );
+  });
+});