npm - @innovaccer/design-system - Versions diffs - 2.13.2 → 2.13.4-1 - Mend

@innovaccer/design-system 2.13.2 → 2.13.4-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/docs/src/components/MDXHeading.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { Heading, Icon, Tooltip } from "@innovaccer/design-system";
-import { copyMessage, copyMessageSuccess } from "../util/constants.js";
+import React, { useState } from 'react';
+import { Heading, Icon, Tooltip } from '@innovaccer/design-system';
+import { copyMessage, copyMessageSuccess } from '../util/constants.js';
 const copyToClipboard = (str) => {
   navigator.clipboard.writeText(str);
@@ -23,22 +23,20 @@ const MDXHeading = ({ size, headingInfo }) => {
     if (currURL.includes(id)) {
       copyToClipboard(currURL);
-    }
-    else if (currURL.includes("#")) {
-      copyToClipboard(currURL.slice(0, currURL.indexOf("#") + 1) + id);
-    }
-    else {
-      copyToClipboard(currURL + "#" + id);
+    } else if (currURL.includes('#')) {
+      copyToClipboard(currURL.slice(0, currURL.indexOf('#') + 1) + id);
+    } else {
+      copyToClipboard(currURL + '#' + id);
     }
     setTooltipActive(true);
     setTooltipName(copyMessageSuccess);
   };
   const sizeMarginMapper = {
-    s: "mt-4",
-    m: "mt-4",
-    l: "mt-6"
-  }
+    s: 'mt-4',
+    m: 'mt-4',
+    l: 'mt-6',
+  };
   return (
     <div
@@ -47,11 +45,7 @@ const MDXHeading = ({ size, headingInfo }) => {
       onMouseLeave={onMouseLeaveHandler}
       className={`d-inline-flex w-100 align-items-center ${sizeMarginMapper[size]}`}
     >
-      <Heading
-        className="mr-4"
-        size={size}
-        {...headingInfo}
-      />
+      <Heading className="mr-4" size={size} {...headingInfo} />
       <div className="cursor-pointer d-flex">
         {isHovered && (
           <Tooltip

package/docs/src/components/Meta.js CHANGED Viewed

@@ -6,7 +6,7 @@ const favicon = '/icons/favicon_io/favicon-16x16.png';
 const faviconLarge = '/icons/favicon_io/favicon-32x32.png';
 const faviconApple = '/icons/favicon_io/apple-touch-icon.png';
 const cardImage = '/icons/card-image.png';
-const GA_MEASUREMENT_ID = "G-HTLCYE0XZT";
+const GA_MEASUREMENT_ID = 'G-HTLCYE0XZT';
 const Meta = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter, relativePagePath }) => {
   const { title, description, keywords, lang } = useMetadata();
@@ -32,9 +32,11 @@ const Meta = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter,
   function embedGoogleAnalytics() {
     // <!-- Global site tag (gtag.js) - Google Analytics -->
-    if (typeof window !== "undefined") {
+    if (typeof window !== 'undefined') {
       window.dataLayer = window.dataLayer || [];
-      function gtag() { window.dataLayer && window.dataLayer.push(arguments); }
+      function gtag() {
+        window.dataLayer && window.dataLayer.push(arguments);
+      }
       gtag('js', new Date());
       gtag('config', GA_MEASUREMENT_ID);
     }
@@ -105,14 +107,12 @@ const Meta = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter,
       ]}
     >
       <html lang={lang} />
-      <link rel='icon' href={favicon} />
-      <link rel='icon' href={faviconLarge} />
-      <link rel='icon' href={faviconApple} />
+      <link rel="icon" href={favicon} />
+      <link rel="icon" href={faviconLarge} />
+      <link rel="icon" href={faviconApple} />
       {/* <!-- Global site tag (gtag.js) - Google Analytics --> */}
       <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}></script>
-      <script>
-        {embedGoogleAnalytics()}
-      </script>
+      <script>{embedGoogleAnalytics()}</script>
     </Helmet>
   );
 };

package/docs/src/components/PropsTable/ArgJsDoc.tsx CHANGED Viewed

@@ -63,13 +63,9 @@ export const Table = styled.table(({ theme }) => ({
 }));
 export const ArgJsDoc: FC<ArgJsDocArgs> = ({ tags }) => {
-  const params = (tags.params || []).filter(
-    (x) => x.description
-  );
+  const params = (tags.params || []).filter((x) => x.description);
   const hasDisplayableParams = params.length !== 0;
-  const hasDisplayableReturns =
-    tags.returns != null &&
-    tags.returns.description != null;
+  const hasDisplayableReturns = tags.returns != null && tags.returns.description != null;
   if (!hasDisplayableParams && !hasDisplayableReturns) {
     return null;

package/docs/src/components/PropsTable/ArgRow.tsx CHANGED Viewed

@@ -44,15 +44,13 @@ const Description = styled.div(() => ({
   },
 }));
-const Type = styled.div<{ hasDescription: boolean }>(
-  ({ hasDescription }) => ({
-    color:
-      theme.base === 'light'
-        ? transparentize(0.1, theme.color.defaultText)
-        : transparentize(0.2, theme.color.defaultText),
-    marginTop: hasDescription ? 4 : 0,
-  })
-);
+const Type = styled.div<{ hasDescription: boolean }>(({ hasDescription }) => ({
+  color:
+    theme.base === 'light'
+      ? transparentize(0.1, theme.color.defaultText)
+      : transparentize(0.2, theme.color.defaultText),
+  marginTop: hasDescription ? 4 : 0,
+}));
 const TypeWithJsDoc = styled.div<{
   hasDescription: boolean;
@@ -65,35 +63,24 @@ const TypeWithJsDoc = styled.div<{
   marginBottom: 12,
 }));
-const StyledTd = styled.td<{ expandable: boolean }>(
-  ({ expandable }) => ({
-    paddingLeft: '20px',
-  })
-);
+const StyledTd = styled.td<{ expandable: boolean }>(({ expandable }) => ({
+  paddingLeft: '20px',
+}));
 export const ArgRow: FC<ArgRowProps> = (props) => {
-  const {
-    row,
-    updateArgs,
-    compact,
-    initialExpandedArgs,
-  } = props;
+  const { row, updateArgs, compact, initialExpandedArgs } = props;
   const { name, description } = row;
   const table = (row.table || {}) as TableAnnotation;
   const type = table.type || row.type;
-  const defaultValue =
-    table.defaultValue || row.defaultValue;
+  const defaultValue = table.defaultValue || row.defaultValue;
   const required = row.type?.required;
-  const hasDescription =
-    description != null && description !== '';
+  const hasDescription = description != null && description !== '';
   return (
     <tr>
       <StyledTd expandable={true}>
         <Name>{name}</Name>
-        {required ? (
-          <Required title="Required">*</Required>
-        ) : null}
+        {required ? <Required title="Required">*</Required> : null}
       </StyledTd>
       {compact ? null : (
         <td>
@@ -104,39 +91,24 @@ export const ArgRow: FC<ArgRowProps> = (props) => {
           )}
           {table.jsDocTags != null ? (
             <>
-              <TypeWithJsDoc
-                hasDescription={hasDescription}
-              >
-                <ArgValue
-                  value={type}
-                  initialExpandedArgs={initialExpandedArgs}
-                />
+              <TypeWithJsDoc hasDescription={hasDescription}>
+                <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
               </TypeWithJsDoc>
               <ArgJsDoc tags={table.jsDocTags} />
             </>
           ) : (
             <Type hasDescription={hasDescription}>
-              <ArgValue
-                value={type}
-                initialExpandedArgs={initialExpandedArgs}
-              />
+              <ArgValue value={type} initialExpandedArgs={initialExpandedArgs} />
             </Type>
           )}
         </td>
       )}
       {compact ? null : (
         <td>
-          <ArgValue
-            value={defaultValue}
-            initialExpandedArgs={initialExpandedArgs}
-          />
+          <ArgValue value={defaultValue} initialExpandedArgs={initialExpandedArgs} />
         </td>
       )}
-      {updateArgs ? (
-        <td>
-          {/* <ArgControl {...(props as ArgControlProps)} /> */}
-        </td>
-      ) : null}
+      {updateArgs ? <td>{/* <ArgControl {...(props as ArgControlProps)} /> */}</td> : null}
     </tr>
   );
 };

package/docs/src/components/PropsTable/ArgValue.tsx CHANGED Viewed

@@ -22,39 +22,34 @@ interface ArgSummaryProps {
 const ITEMS_BEFORE_EXPANSION = 8;
-const Summary = styled.div<{ isExpanded?: boolean }>(
-  ({ isExpanded }) => ({
-    display: 'flex',
-    flexDirection: isExpanded ? 'column' : 'row',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start',
-    marginBottom: '-4px',
-    minWidth: 100,
-  })
-);
-const Text = styled.span<{ simple?: boolean }>(
-  codeCommon,
-  ({ simple = false }) => ({
-    flex: '0 0 auto',
-    fontFamily: theme.typography.fonts.mono,
-    fontSize: '12px',
-    wordBreak: 'break-word',
-    whiteSpace: 'normal',
-    maxWidth: '100%',
-    margin: 0,
-    marginRight: '4px',
-    marginBottom: '4px',
-    paddingTop: '2px',
-    paddingBottom: '2px',
-    lineHeight: '13px',
-    ...(simple && {
-      background: 'transparent',
-      border: '0 none',
-      paddingLeft: 0,
-    }),
-  })
-);
+const Summary = styled.div<{ isExpanded?: boolean }>(({ isExpanded }) => ({
+  display: 'flex',
+  flexDirection: isExpanded ? 'column' : 'row',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  marginBottom: '-4px',
+  minWidth: 100,
+}));
+const Text = styled.span<{ simple?: boolean }>(codeCommon, ({ simple = false }) => ({
+  flex: '0 0 auto',
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: '12px',
+  wordBreak: 'break-word',
+  whiteSpace: 'normal',
+  maxWidth: '100%',
+  margin: 0,
+  marginRight: '4px',
+  marginBottom: '4px',
+  paddingTop: '2px',
+  paddingBottom: '2px',
+  lineHeight: '13px',
+  ...(simple && {
+    background: 'transparent',
+    border: '0 none',
+    paddingLeft: 0,
+  }),
+}));
 const ExpandButton = styled.button<{}>(() => ({
   fontFamily: theme.typography?.fonts.mono,
@@ -64,18 +59,15 @@ const ExpandButton = styled.button<{}>(() => ({
   border: 'none',
 }));
-const Expandable = styled.div<{}>(
-  codeCommon,
-  ({ theme }) => ({
-    fontFamily: theme.typography?.fonts.mono,
-    color: theme.color?.secondary,
-    fontSize: theme.typography?.size.s1, // overrides codeCommon
-    margin: 0,
-    whiteSpace: 'nowrap',
-    display: 'flex',
-    alignItems: 'center',
-  })
-);
+const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
+  fontFamily: theme.typography?.fonts.mono,
+  color: theme.color?.secondary,
+  fontSize: theme.typography?.size.s1, // overrides codeCommon
+  margin: 0,
+  whiteSpace: 'nowrap',
+  display: 'flex',
+  alignItems: 'center',
+}));
 const EmptyArg = () => {
   return <span>-</span>;
@@ -88,50 +80,32 @@ const ArgText: FC<ArgTextProps> = ({ text, simple }) => {
 const getSummaryItems = (summary: string) => {
   if (!summary) return [summary];
   const splittedItems = summary.split('|');
-  const summaryItems = splittedItems.map((value) =>
-    value.trim()
-  );
+  const summaryItems = splittedItems.map((value) => value.trim());
   return uniq(summaryItems);
 };
-const renderSummaryItems = (
-  summaryItems: string[],
-  isExpanded = true
-) => {
+const renderSummaryItems = (summaryItems: string[], isExpanded = true) => {
   let items = summaryItems;
   if (!isExpanded) {
     items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
   }
-  return items.map((item) => (
-    <ArgText key={item} text={item === '' ? '""' : item} />
-  ));
+  return items.map((item) => <ArgText key={item} text={item === '' ? '""' : item} />);
 };
-const ArgSummary: FC<ArgSummaryProps> = ({
-  value,
-  initialExpandedArgs,
-}) => {
+const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
   const { summary, detail } = value;
-  const [isExpanded, setIsExpanded] = useState(
-    initialExpandedArgs || false
-  );
+  const [isExpanded, setIsExpanded] = useState(initialExpandedArgs || false);
-  if (summary === undefined || summary === null)
-    return null;
+  if (summary === undefined || summary === null) return null;
   // summary is used for the default value
   // below check fixes not displaying default values for boolean typescript vars
-  const summaryAsString =
-    typeof summary.toString === 'function'
-      ? summary.toString()
-      : summary;
+  const summaryAsString = typeof summary.toString === 'function' ? summary.toString() : summary;
   if (detail == null) {
-    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(
-      summaryAsString
-    );
+    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(summaryAsString);
     if (cannotBeSafelySplitted) {
       return <ArgText text={summaryAsString} />;
@@ -139,20 +113,13 @@ const ArgSummary: FC<ArgSummaryProps> = ({
     const summaryItems = getSummaryItems(summaryAsString);
     const itemsCount = summaryItems.length;
-    const hasManyItems =
-      itemsCount > ITEMS_BEFORE_EXPANSION;
+    const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;
     return hasManyItems ? (
       <Summary isExpanded={isExpanded}>
         {renderSummaryItems(summaryItems, isExpanded)}
-        <ExpandButton
-          onClick={() => setIsExpanded(!isExpanded)}
-        >
-          {isExpanded
-            ? 'Show less...'
-            : `Show ${
-                itemsCount - ITEMS_BEFORE_EXPANSION
-              } more...`}
+        <ExpandButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
         </ExpandButton>
       </Summary>
     ) : (
@@ -167,16 +134,6 @@ const ArgSummary: FC<ArgSummaryProps> = ({
   );
 };
-export const ArgValue: FC<ArgValueProps> = ({
-  value,
-  initialExpandedArgs,
-}) => {
-  return value == null ? (
-    <EmptyArg />
-  ) : (
-    <ArgSummary
-      value={value}
-      initialExpandedArgs={initialExpandedArgs}
-    />
-  );
+export const ArgValue: FC<ArgValueProps> = ({ value, initialExpandedArgs }) => {
+  return value == null ? <EmptyArg /> : <ArgSummary value={value} initialExpandedArgs={initialExpandedArgs} />;
 };

package/docs/src/components/PropsTable/EmptyBlock.tsx CHANGED Viewed

@@ -3,8 +3,7 @@ import { styled } from '@storybook/theming';
 import { withReset } from './Shared';
 const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
-  backgroundColor:
-    theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
+  backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
   borderRadius: theme.appBorderRadius,
   border: `1px dashed ${theme.appBorderColor}`,
   display: 'flex',
@@ -17,6 +16,4 @@ const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
   // fontSize: theme.typography.size.s2,
 }));
-export const EmptyBlock = (props: any) => (
-  <Wrapper {...props} className="docblock-emptyblock" />
-);
+export const EmptyBlock = (props: any) => <Wrapper {...props} className="docblock-emptyblock" />;

package/docs/src/components/PropsTable/SectionRow.tsx CHANGED Viewed

@@ -80,28 +80,21 @@ export const SectionRow: FC<SectionRowProps> = ({
   colSpan = 3,
 }) => {
   const [expanded, setExpanded] = useState(initialExpanded);
-  const Level =
-    level === 'subsection' ? Subsection : Section;
+  const Level = level === 'subsection' ? Subsection : Section;
   // @ts-ignore
   const itemCount = children?.length || 0;
-  const caption =
-    level === 'subsection'
-      ? `${itemCount} item${itemCount !== 1 ? 's' : ''}`
-      : '';
+  const caption = level === 'subsection' ? `${itemCount} item${itemCount !== 1 ? 's' : ''}` : '';
   const icon = expanded ? 'arrowdown' : 'arrowright';
-  const helperText = `${expanded ? 'Hide' : 'Side'} ${
-    level === 'subsection' ? itemCount : label
-  } item${itemCount !== 1 ? 's' : ''}`;
+  const helperText = `${expanded ? 'Hide' : 'Side'} ${level === 'subsection' ? itemCount : label} item${
+    itemCount !== 1 ? 's' : ''
+  }`;
   return (
     <>
       <StyledTr title={helperText}>
         <Level colSpan={1}>
-          <ClickIntercept
-            onClick={(e) => setExpanded(!expanded)}
-            tabIndex={0}
-          >
+          <ClickIntercept onClick={(e) => setExpanded(!expanded)} tabIndex={0}>
             {helperText}
           </ClickIntercept>
           <FlexWrapper>
@@ -110,11 +103,7 @@ export const SectionRow: FC<SectionRowProps> = ({
           </FlexWrapper>
         </Level>
         <StyledTd colSpan={colSpan - 1}>
-          <ClickIntercept
-            onClick={(e) => setExpanded(!expanded)}
-            tabIndex={-1}
-            style={{ outline: 'none' }}
-          >
+          <ClickIntercept onClick={(e) => setExpanded(!expanded)} tabIndex={-1} style={{ outline: 'none' }}>
             {helperText}
           </ClickIntercept>
           {expanded ? null : caption}