@innovaccer/design-system 2.5.0-2 → 2.5.1

package/core/components/atoms/outsideClick/__stories__/index.story.tsx

@@ -35,7 +35,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/OutsideClick/All',
+  title: 'Others/Utilities/OutsideClick/All',
   component: OutsideClick,
   parameters: {
     docs: {

package/core/components/atoms/radio/Radio.tsx

@@ -65,12 +65,9 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, forw
 
   const ref = React.useRef<HTMLInputElement>(null);
 
-  React.useImperativeHandle(
-    forwardedRef,
-    (): HTMLInputElement => {
-      return ref.current as HTMLInputElement;
-    }
-  );
+  React.useImperativeHandle(forwardedRef, (): HTMLInputElement => {
+    return ref.current as HTMLInputElement;
+  });
 
   const RadioClass = classNames(
     {
@@ -123,10 +120,10 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, forw
           </label>
         )}
         {helpText && (
-            <Text data-test="DesignSystem-Radio-HelpText" size="small" appearance={disabled ? 'disabled' : 'subtle'}>
-              {helpText.trim()}
-            </Text>
-          )}
+          <Text data-test="DesignSystem-Radio-HelpText" size="small" appearance={disabled ? 'disabled' : 'subtle'}>
+            {helpText.trim()}
+          </Text>
+        )}
       </div>
     </div>
   );

package/core/components/atoms/radio/__tests__/Radio.test.tsx

@@ -57,27 +57,29 @@ describe('Radio component', () => {
 
 describe('Radio component', () => {
   it('renders children', () => {
-    const { getByTestId } = render(<Radio label={label} name={StringValue} value={StringValue}/>);
+    const { getByTestId } = render(<Radio label={label} name={StringValue} value={StringValue} />);
     expect(getByTestId('DesignSystem-Radio')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Radio-OuterWrapper')).toBeInTheDocument();
   });
 
   it('renders children : input', () => {
-    const { getByTestId } = render(<Radio label={label} name={StringValue} value={StringValue}/>);
+    const { getByTestId } = render(<Radio label={label} name={StringValue} value={StringValue} />);
     expect(getByTestId('DesignSystem-Radio')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Radio-OuterWrapper')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Radio-Input')).toBeInTheDocument();
   });
 
   it('renders children with label prop', () => {
-    const { getByTestId } = render(<Radio label={label} name={StringValue} value={StringValue}/>);
+    const { getByTestId } = render(<Radio label={label} name={StringValue} value={StringValue} />);
     expect(getByTestId('DesignSystem-Radio-Input')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Radio-Label')).toBeInTheDocument();
-    expect(getByTestId('DesignSystem-Radio-Label').textContent).toMatch(label)
+    expect(getByTestId('DesignSystem-Radio-Label').textContent).toMatch(label);
   });
 
   it('renders children with helpText prop', () => {
-    const { getByTestId } = render(<Radio label={label} name={StringValue} value={StringValue} helpText={StringValue} />);
+    const { getByTestId } = render(
+      <Radio label={label} name={StringValue} value={StringValue} helpText={StringValue} />
+    );
     expect(getByTestId('DesignSystem-Radio-Input')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Radio-Label')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-Radio-HelpText')).toBeInTheDocument();
@@ -85,14 +87,18 @@ describe('Radio component', () => {
   });
 
   it('calls onchange handler', () => {
-    const { getByTestId } = render(<Radio onChange={FunctionValue} label={label} name={StringValue} value={StringValue} helpText={StringValue} />);
+    const { getByTestId } = render(
+      <Radio onChange={FunctionValue} label={label} name={StringValue} value={StringValue} helpText={StringValue} />
+    );
     const input = getByTestId('DesignSystem-Radio-Input');
     fireEvent.click(input);
     expect(FunctionValue).toHaveBeenCalled();
   });
 
   it('calls onchange handler when box is checked ', () => {
-    const { getByTestId } = render(<Radio onChange={FunctionValue} name={label} value={StringValue} label={StringValue} helpText={StringValue} />);
+    const { getByTestId } = render(
+      <Radio onChange={FunctionValue} name={label} value={StringValue} label={StringValue} helpText={StringValue} />
+    );
     const input = getByTestId('DesignSystem-Radio-Input');
     expect(input).not.toBeChecked();
     fireEvent.change(input, { target: { checked: true } });

package/core/components/css-utilities/Align/Align.story.tsx

@@ -86,7 +86,7 @@ export const align = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Align',
+  title: 'Others/Styles/Align',
   component: align,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Background/Background.story.tsx

@@ -111,7 +111,7 @@ export const background = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Background',
+  title: 'Others/Styles/Background',
   component: background,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Border/Border.story.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { Heading, Paragraph, Card, Table, Text } from '@/index';
+import utilitiesSchema from '../Schema';
+
+export const border = () => {
+  const data = [
+    {
+      className: 'border',
+      properties: 'border: var(--border) ;',
+    },
+    {
+      className: 'border-top',
+      properties: ' border-top: var(--border) ;',
+    },
+    {
+      className: 'border-bottom',
+      properties: 'border-bottom: var(--border) ;',
+    },
+    {
+      className: 'border-right',
+      properties: 'border-right: var(--border) ;',
+    },
+    {
+      className: 'border-left',
+      properties: 'border-left: var(--border) ;',
+    },
+    {
+      className: 'border-0',
+      properties: 'border: 0 ;',
+    },
+    {
+      className: 'border-top-0',
+      properties: ' border-top: 0 ;',
+    },
+    {
+      className: 'border-bottom-0',
+      properties: 'border-bottom: 0 ;',
+    },
+    {
+      className: 'border-right-0',
+      properties: 'border-right: 0 ;',
+    },
+  ];
+  return (
+    <div>
+      <Heading size="xxl">Border</Heading>
+      <br />
+      &nbsp;
+      <Text weight="strong">
+        Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
+      </Text>
+      &nbsp;
+      <div
+        style={{
+          height: '250px',
+        }}
+        className="mt-5 mb-8"
+      >
+        <Card className="h-100">
+          <Table
+            data={data}
+            schema={utilitiesSchema}
+            size={'standard'}
+            headerOptions={{
+              withSearch: true,
+            }}
+            showMenu={false}
+          />
+        </Card>
+      </div>
+      <Heading size="m">Examples</Heading>
+      <Paragraph>Here are some representative examples of these classes:</Paragraph>
+      &nbsp;
+      <div className="pl-10 h-25 bg-light w-50">
+        <span className="border bg-secondary-lightest p-8 d-inline-block mr-6">border</span>
+        <span className="border-top bg-secondary-lightest p-8 d-inline-block mr-6">top</span>
+        <span className="border-right bg-secondary-lightest p-8 d-inline-block mr-6">right</span>
+        <span className="border-bottom bg-secondary-lightest p-8 d-inline-block mr-6">bottom</span>
+        <span className="border-left bg-secondary-lightest p-8 d-inline-block">left</span>
+      </div>
+      &nbsp;
+      <div className="DocPage-codeBlock w-50 pl-10">
+        {'<span className="border bg-secondary-lightest p-8 d-inline-block mr-6">border</span>'}
+        <br />
+        {'<span className="border-top bg-secondary-lightest p-8 d-inline-block mr-6">top</span>'}
+        <br />
+        {'<span className="border-right bg-secondary-lightest p-8 d-inline-block mr-6">right</span>'}
+        <br />
+        {'<span className="border-bottom bg-secondary-lightest p-8 d-inline-block mr-6">bottom</span>'}
+        <br />
+        {'<span className="border-left bg-secondary-lightest p-8 d-inline-block">left</span>'}
+      </div>
+      &nbsp;
+      <div className="pl-10 h-25 bg-light w-50">
+        <span className="border border-0 bg-secondary-lightest p-8 d-inline-block mr-6">border-0</span>
+        <span className="border border-top-0 bg-secondary-lightest p-8 d-inline-block mr-6">top-0</span>
+        <span className="border border-right-0 bg-secondary-lightest p-8 d-inline-block mr-6">right-0</span>
+        <span className="border border-bottom-0 bg-secondary-lightest p-8 d-inline-block mr-6">bottom-0</span>
+        <span className="border border-left-0 bg-secondary-lightest p-8 d-inline-block">left-0</span>
+      </div>
+      &nbsp;
+      <div className="DocPage-codeBlock w-50 pl-10">
+        {'<span className="border border-0 bg-secondary-lightest p-8 d-inline-block mr-6">border-0</span>'}
+        <br />
+        {'<span className="border border-top-0 bg-secondary-lightest p-8 d-inline-block mr-6">top-0</span>'}
+        <br />
+        {'<span className="border border-right-0 bg-secondary-lightest p-8 d-inline-block mr-6">right-0</span>'}
+        <br />
+        {'<span className="border border-bottom-0 bg-secondary-lightest p-8 d-inline-block mr-6">bottom-0</span>'}
+        <br />
+        {'<span className="border border-left-0 bg-secondary-lightest p-8 d-inline-block">left-0</span>'}
+      </div>
+      &nbsp;
+    </div>
+  );
+};
+
+export default {
+  title: 'Others/Styles/Border',
+  component: border,
+  parameters: {
+    viewMode: 'story',
+    docs: {
+      docPage: null,
+      page: null,
+    },
+  },
+};

package/core/components/css-utilities/Display/Display.story.tsx

@@ -103,7 +103,7 @@ export const display = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Display',
+  title: 'Others/Styles/Display',
   component: display,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Flex/Flex.story.tsx

@@ -294,7 +294,7 @@ export const flex = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Flex',
+  title: 'Others/Styles/Flex',
   component: flex,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Miscellaneous/Miscellaneous.story.tsx

@@ -43,7 +43,7 @@ export const miscellaneous = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Miscellaneous',
+  title: 'Others/Styles/Miscellaneous',
   component: miscellaneous,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Overflow/Overflow.story.tsx

@@ -74,7 +74,7 @@ export const overflow = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Overflow',
+  title: 'Others/Styles/Overflow',
   component: overflow,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Position/Position.story.tsx

@@ -66,7 +66,7 @@ export const position = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Position',
+  title: 'Others/Styles/Position',
   component: position,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Sizing/Sizing.story.tsx

@@ -150,7 +150,7 @@ export const sizing = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Sizing',
+  title: 'Others/Styles/Sizing',
   component: sizing,
   parameters: {
     viewMode: 'story',

package/core/components/css-utilities/Spacing/Spacing.story.tsx

@@ -105,7 +105,7 @@ export const spacing = () => {
 };
 
 export default {
-  title: 'Others/Utilities/Spacing',
+  title: 'Others/Styles/Spacing',
   component: spacing,
   parameters: {
     viewMode: 'story',

package/core/components/molecules/chatMessage/__tests__/ChatMessage.test.tsx

@@ -12,24 +12,20 @@ const TextValues = {
   failedText: 'Failed Text',
   sendingText: 'Sending Text',
   typingText: 'Typing Text',
-  msgText: 'Message Text'
+  msgText: 'Message Text',
 };
 
 describe('ChatMessage component prop:type snapshot', () => {
   const mapper: Record<string, any> = {
     type: valueHelper(type, { required: true, iterate: true }),
-    text: valueHelper(TextValues.msgText, { required: true })
+    text: valueHelper(TextValues.msgText, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <ChatMessage
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<ChatMessage {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -40,18 +36,14 @@ describe('ChatMessage component prop:type snapshot', () => {
 describe('ChatMessage component prop:isTyping snapshot', () => {
   const mapper: Record<string, any> = {
     isTyping: valueHelper(BooleanValue, { iterate: true, required: false }),
-    typingText: valueHelper(TextValues.typingText, { required: true })
+    typingText: valueHelper(TextValues.typingText, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <ChatMessage
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<ChatMessage {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -61,18 +53,14 @@ describe('ChatMessage component prop:isTyping snapshot', () => {
 
 describe('ChatMessage component prop:text snapshot', () => {
   const mapper: Record<string, any> = {
-    text: valueHelper(TextValues.msgText, { required: true })
+    text: valueHelper(TextValues.msgText, { required: true }),
   };
 
   const testFunc = (props: Record<string, any>): void => {
     const attr = filterUndefined(props) as Props;
 
     it(testMessageHelper(attr), () => {
-      const { asFragment } = render(
-        <ChatMessage
-          {...attr}
-        />
-      );
+      const { asFragment } = render(<ChatMessage {...attr} />);
       expect(asFragment()).toMatchSnapshot();
     });
   };
@@ -84,11 +72,7 @@ describe('ChatMessage component with different values of prop:type ', () => {
   type.forEach((value) => {
     it(`check for Message Box to have class Box--${value} if type is ${value}`, () => {
       const { getByTestId } = render(
-        <ChatMessage
-          text={TextValues.msgText}
-          type={value}
-          typingText={TextValues.typingText}
-        />
+        <ChatMessage text={TextValues.msgText} type={value} typingText={TextValues.typingText} />
       );
       expect(getByTestId('DesignSystem-ChatMessage--Box')).toHaveClass(`Box--${value}`);
     });
@@ -98,12 +82,7 @@ describe('ChatMessage component with different values of prop:type ', () => {
 describe('ChatMessage component prop:isTyping', () => {
   it('check for properties when isTyping is true', () => {
     const { getByTestId } = render(
-      <ChatMessage
-        type="incoming"
-        text={TextValues.msgText}
-        isTyping={true}
-        typingText={TextValues.typingText}
-      />
+      <ChatMessage type="incoming" text={TextValues.msgText} isTyping={true} typingText={TextValues.typingText} />
     );
     expect(getByTestId('DesignSystem-Text').textContent).toMatch(TextValues.typingText);
     expect(getByTestId('DesignSystem-ChatMessage--Box')).toHaveClass('Box-incoming--withStatus');
@@ -112,12 +91,7 @@ describe('ChatMessage component prop:isTyping', () => {
 
   it('check for text Message when isTyping is false', () => {
     const { getByTestId } = render(
-      <ChatMessage
-        type="incoming"
-        text={TextValues.msgText}
-        isTyping={false}
-        typingText={TextValues.typingText}
-      />
+      <ChatMessage type="incoming" text={TextValues.msgText} isTyping={false} typingText={TextValues.typingText} />
     );
     expect(getByTestId('DesignSystem-Text').textContent).toMatch(TextValues.msgText);
     expect(getByTestId('DesignSystem-ChatMessage--Box')).not.toHaveClass('Box-incoming--withStatus');
@@ -148,7 +122,7 @@ describe('ChatMessage component prop:statusOptions with type:failed', () => {
         typingText={TextValues.typingText}
         statusOptions={{
           type: 'failed',
-          failedText: TextValues.failedText
+          failedText: TextValues.failedText,
         }}
       />
     );
@@ -180,7 +154,7 @@ describe('ChatMessage component prop:statusOptions with type:sending', () => {
         typingText={TextValues.typingText}
         statusOptions={{
           type: 'sending',
-          sendingText: TextValues.sendingText
+          sendingText: TextValues.sendingText,
         }}
       />
     );
@@ -194,7 +168,7 @@ describe('ChatMessage component prop:statusOptions with type:sending', () => {
         type="incoming"
         typingText={TextValues.typingText}
         statusOptions={{
-          type: 'sending'
+          type: 'sending',
         }}
       />
     );
@@ -211,7 +185,7 @@ describe('ChatMessage component prop:statusOptions with type:sent', () => {
         typingText={TextValues.typingText}
         statusOptions={{
           type: 'sent',
-          time: timeStr
+          time: timeStr,
         }}
       />
     );
@@ -227,7 +201,7 @@ describe('ChatMessage component prop:statusOptions with type:sent', () => {
         typingText={TextValues.typingText}
         statusOptions={{
           type: 'sent',
-          time: timeNum
+          time: timeNum,
         }}
       />
     );
@@ -245,7 +219,7 @@ describe('ChatMessage component prop:statusOptions with type:read', () => {
         typingText={TextValues.typingText}
         statusOptions={{
           type: 'read',
-          readText: TextValues.readText
+          readText: TextValues.readText,
         }}
       />
     );
@@ -259,7 +233,7 @@ describe('ChatMessage component prop:statusOptions with type:read', () => {
         type="incoming"
         typingText={TextValues.typingText}
         statusOptions={{
-          type: 'read'
+          type: 'read',
         }}
       />
     );
@@ -275,7 +249,7 @@ describe('ChatMessage component prop:statusOptions with type:read', () => {
         statusOptions={{
           type: 'read',
           readText: TextValues.readText,
-          time: timeStr
+          time: timeStr,
         }}
       />
     );
@@ -292,7 +266,7 @@ describe('ChatMessage component prop:statusOptions with type:urgent', () => {
         type="incoming"
         typingText={TextValues.typingText}
         statusOptions={{
-          type: 'urgent'
+          type: 'urgent',
         }}
       />
     );
@@ -307,7 +281,7 @@ describe('ChatMessage component prop:statusOptions with type:urgent', () => {
         typingText={TextValues.typingText}
         statusOptions={{
           type: 'urgent',
-          time: timeStr
+          time: timeStr,
         }}
       />
     );