feat(chip): add label prefix option for custom label

innovaccer · Aug 2, 2023 · 3bce8c3 · 3bce8c3
1 parent e3910ff
commit 3bce8c3
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 64 deletions.
diff --git a/core/components/atoms/_chip/__tests__/_chip.test.tsx b/core/components/atoms/_chip/__tests__/_chip.test.tsx
@@ -87,3 +87,13 @@ describe('Chip component', () => {
     expect(getByTestId('DesignSystem-GenericChip--clearButton')).toHaveClass('Chip-icon-disabled--right');
   });
 });
+
+describe('Chip component label prefix test', () => {
+  it('renders label prefix text with prop:labelPrefix', () => {
+    const { getByTestId } = render(<GenericChip label="ChipLabel" labelPrefix="ChipLabelPrefix" name="Chip" />);
+    const labelPrefixElement = getByTestId('DesignSystem-GenericChip--LabelPrefix');
+    expect(labelPrefixElement).toBeInTheDocument();
+    expect(labelPrefixElement).toHaveTextContent('ChipLabelPrefix');
+    expect(labelPrefixElement).toHaveClass('Text--medium');
+  });
+});
diff --git a/core/components/atoms/_chip/index.tsx b/core/components/atoms/_chip/index.tsx
@@ -8,6 +8,7 @@ import { IconProps, TextProps } from '@/index.type';
 
 export interface GenericChipProps extends BaseProps {
   label: string | React.ReactElement;
+  labelPrefix?: string;
   icon?: string;
   clearButton?: boolean;
   disabled?: boolean;
@@ -18,7 +19,7 @@ export interface GenericChipProps extends BaseProps {
 }
 
 export const GenericChip = (props: GenericChipProps) => {
-  const { label, icon, clearButton, disabled, className, selected, onClose, onClick } = props;
+  const { label, icon, clearButton, disabled, className, selected, onClose, onClick, labelPrefix } = props;
 
   const baseProps = extractBaseProps(props);
 
@@ -65,9 +66,21 @@ export const GenericChip = (props: GenericChipProps) => {
   const renderLabel = () => {
     if (typeof label === 'string') {
       return (
-        <Text data-test="DesignSystem-GenericChip--Text" color={textColor} className="Chip-text">
-          {label}
-        </Text>
+        <>
+          {labelPrefix && (
+            <Text
+              data-test="DesignSystem-GenericChip--LabelPrefix"
+              weight="medium"
+              color={textColor}
+              className="Chip-text mr-3"
+            >
+              {labelPrefix}
+            </Text>
+          )}
+          <Text data-test="DesignSystem-GenericChip--Text" color={textColor} className="Chip-text">
+            {label}
+          </Text>
+        </>
       );
     }
     return label;

diff --git a/core/components/atoms/chip/Chip.tsx b/core/components/atoms/chip/Chip.tsx
@@ -11,6 +11,10 @@ export interface ChipProps extends BaseProps {
    * Label of chip
    */
   label: string | React.ReactElement;
+  /**
+   * Adds Prefix for label
+   */
+  labelPrefix?: string;
   /**
    * Type of material `Icon`
    */
@@ -46,7 +50,7 @@ export interface ChipProps extends BaseProps {
 }
 
 export const Chip = (props: ChipProps) => {
-  const { label, icon, clearButton, type, disabled, selected, onClose, onClick, name, className } = props;
+  const { label, icon, clearButton, type, disabled, selected, onClose, onClick, name, className, labelPrefix } = props;
 
   const baseProps = extractBaseProps(props);
 
@@ -85,6 +89,7 @@ export const Chip = (props: ChipProps) => {
       onClose={onCloseHandler}
       onClick={onClickHandler}
       name={name}
+      labelPrefix={labelPrefix}
     />
   );
 };

diff --git a/core/components/atoms/chip/__stories__/CustomLabel.story.jsx b/core/components/atoms/chip/__stories__/CustomLabel.story.jsx
@@ -1,63 +1,39 @@
 import * as React from 'react';
-import { Chip, Text } from '@/index';
+import { Chip } from '@/index';
 
 export const customLabel = () => {
   const customLabelData1 = [
-    ['Age=', '60yrs', { selected: true, type: 'selection', label1: 'primary-dark', label2: 'primary-dark' }],
-    ['Age:', '18yrs to 60yrs', { selected: false, type: 'action', label1: '', label2: '' }],
-    ['Age>=', '18yrs', { selected: false, type: 'input', label1: '', label2: '' }],
+    ['Age=', '60yrs', { selected: true }],
+    ['Age:', '18yrs to 60yrs', { selected: false }],
+    ['Age>=', '18yrs', { selected: false, disabled: true }],
   ];
 
   const customLabelData2 = [
-    [
-      'Provider City:',
-      'San Diego',
-      { selected: true, type: 'selection', label1: 'primary-dark', label2: 'primary-dark' },
-    ],
-    ['Provider City:', 'San Diego, Chicago', { selected: false, type: 'action', label1: '', label2: '' }],
-    ['Provider City:', '3 selected', { selected: false, type: 'input', label1: '', label2: '' }],
+    ['Provider City:', 'San Diego', { selected: true }],
+    ['Provider City:', 'San Diego, Chicago', { selected: false }],
+    ['Provider City:', '3 selected', { selected: false, disabled: true }],
   ];
 
   const customLabelData3 = [
-    [
-      'Creation Date>=',
-      '01/01/2020',
-      { selected: true, type: 'selection', label1: 'primary-dark', label2: 'primary-dark' },
-    ],
-    ['Creation Date=', '01/01/2020', { icon: 'assessment', selected: false, type: 'action', label1: '', label2: '' }],
-    ['Creation Date:', 'last 6 months', { icon: 'assessment', selected: false, type: 'input', label1: '', label2: '' }],
+    ['Creation Date>=', '01/01/2020', { selected: true }],
+    ['Creation Date=', '01/01/2020', { icon: 'assessment', selected: false }],
+    ['Creation Date:', 'last 6 months', { icon: 'assessment', selected: false, disabled: true }],
   ];
 
   const renderChips = (
     <>
-      <div className="d-flex justify-content-around flex-wrap mb-8">
-        <Text weight="strong" size="large">
-          Selection Chip
-        </Text>
-        <Text weight="strong" size="large">
-          Action Chip
-        </Text>
-        <Text weight="strong" size="large">
-          Input Chip
-        </Text>
-      </div>
       <div className="d-flex justify-content-around flex-wrap">
         {customLabelData1.map((customLabel, index) => (
           <Chip
             className="mb-6"
             key={index}
-            label={
-              <span className="mr-3">
-                <Text color={customLabel[2].label1} weight="medium" className="mr-3">
-                  {customLabel[0]}
-                </Text>
-                <Text color={customLabel[2].label2}>{customLabel[1]}</Text>
-              </span>
-            }
+            label={customLabel[1]}
+            labelPrefix={customLabel[0]}
             clearButton={true}
-            name={{ Custom: 'Label' }}
-            type={customLabel[2].type}
+            name={customLabel[0]}
+            type="selection"
             selected={customLabel[2].selected}
+            disabled={customLabel[2].disabled}
           />
         ))}
       </div>
@@ -67,18 +43,13 @@ export const customLabel = () => {
             icon={customLabel[2].icon}
             className="mb-6"
             key={index}
-            label={
-              <span className="mr-3">
-                <Text color={customLabel[2].label1} weight="medium" className="mr-3">
-                  {customLabel[0]}
-                </Text>
-                <Text color={customLabel[2].label2}>{customLabel[1]}</Text>
-              </span>
-            }
+            label={customLabel[1]}
+            labelPrefix={customLabel[0]}
             clearButton={true}
-            name={{ Custom: 'Label' }}
-            type={customLabel[2].type}
+            name={customLabel[0]}
+            type="selection"
             selected={customLabel[2].selected}
+            disabled={customLabel[2].disabled}
           />
         ))}
       </div>
@@ -87,18 +58,14 @@ export const customLabel = () => {
           <Chip
             className="mb-6"
             key={index}
-            label={
-              <span className="mr-3">
-                <Text color={customLabel[2].label1} weight="medium" className="mr-3">
-                  {customLabel[0]}
-                </Text>
-                <Text color={customLabel[2].label2}>{customLabel[1]}</Text>
-              </span>
-            }
+            label={customLabel[1]}
+            labelPrefix={customLabel[0]}
+            icon={customLabel[2].icon}
             clearButton={true}
-            name={{ Custom: 'Label' }}
-            type={customLabel[2].type}
+            name={customLabel[0]}
+            type="selection"
             selected={customLabel[2].selected}
+            disabled={customLabel[2].disabled}
           />
         ))}
       </div>