@innovaccer/design-system 2.9.0-0 → 2.9.0

package/docs/src/components/Container/ComponentsContainer.js

@@ -46,13 +46,13 @@ const ComponentsContainer = ({
     const pagePath = relativePagePath.split('/');
     const pages = pagePath.slice(0, pagePath.length - 1);
     const path = `${pages.join('/')}/${nextTabSlug}/`;
-    navigate(path);
+    navigate(path, { state: { animation: false }, });
     setActiveIndex(tabIndex);
   };
 
   return (
     <>
-      <Heading>{isSiblingTab ? frontmatter?.title : pageTitle}</Heading>
+      <Heading size='xl' className='my-5'>{isSiblingTab ? frontmatter?.title : pageTitle}</Heading>
       <Paragraph>{isSiblingTab ? frontmatter?.description : pageDescription}</Paragraph>
 
       {tabsList && tabsList.length && (

package/docs/src/components/Container/Container.js

@@ -52,7 +52,7 @@ const Container = ({
     const pagePath = relativePagePath.split('/');
     const pages = pagePath.slice(0, pagePath.length - 1);
     const path = `${pages.join('/')}/${nextTabSlug}/`;
-    navigate(path);
+    navigate(path, { state: { animation: false }, });
     setActiveIndex(tabIndex);
   };
 

package/docs/src/components/Header/Header.js

@@ -6,6 +6,11 @@ import { Link as MDSLink } from '@innovaccer/design-system';
 
 const Header = ({ relativePagePath }) => {
   const items = useHeaderItems();
+  const checkActive = (label) => {
+    const pagePath = relativePagePath.split('/');
+    if(pagePath[1]===label.toLowerCase() || pagePath[2]===label.toLowerCase()) return true; 
+    return false; 
+  }
   return (
     <div
       id="mainHeader"
@@ -36,14 +41,7 @@ const Header = ({ relativePagePath }) => {
             <Link
               key={index}
               to={link}
-              className={`HeaderLink ${relativePagePath.includes(
-                label.toLowerCase()
-              )
-                ? 'HeaderLink--active'
-                : ''
-                } ${relativePagePath.includes(
-                  label.toLowerCase()
-                )
+              className={`HeaderLink  ${checkActive(label)
                   ? 'HeaderLink--active'
                   : 'HeaderLink--default'
                 }`}

package/docs/src/components/Layout.js

@@ -84,10 +84,10 @@ const Layout = ({
   pageDescription,
   pageKeywords,
   relativePagePath,
-  component,
   tabs,
   logos,
   showMobile,
+  location,
   ...rest
 }) => {
   const is404 = children && children.key === null;
@@ -198,13 +198,7 @@ const Layout = ({
   };
 
   const showAnimation = () => {
-    //show animation for only first tab or pages without tabs
-
-    const { tabs } = frontmatter;
-    const name = relativePagePath.slice(relativePagePath.lastIndexOf('/') + 1, relativePagePath.lastIndexOf('.mdx'));
-    if (tabs?.length && name !== tabs[0].toLowerCase().split(' ').join('-')) {
-      return false;
-    }
+    if (location.state?.animation === false) return false;
     return true;
   }
 
@@ -212,9 +206,11 @@ const Layout = ({
     <>
       <Meta
         titleType={titleType}
-        pageTitle={pageTitle}
-        pageDescription={pageDescription}
+        docTitle={pageTitle}
+        docDescription={pageDescription}
         pageKeywords={pageKeywords}
+        frontmatter={frontmatter}
+        relativePagePath={relativePagePath}
       />
       <Header
         leftMenuList={leftMenuList}
@@ -229,8 +225,8 @@ const Layout = ({
           frontmatter={frontmatter}
         />
         <Column className={`${showAnimation() ? "page-animation" : ''} page-scroll h-100`}>
-          <Row>
-            <Column className="px-12 py-8 min-vh-100" size={9}>
+          <Row className='justify-content-center'>
+            <Column className="px-12 py-8 min-vh-100 inner-left-container" size={9}>
               {!relativePagePath.includes('components') && (
                 <Container
                   pageTitle={pageTitle}
@@ -249,7 +245,6 @@ const Layout = ({
                 <ComponentsContainer
                   pageTitle={pageTitle}
                   relativePagePath={relativePagePath}
-                  component={component}
                   tabs={tabs}
                   pageDescription={pageDescription}
                   frontmatter={frontmatter}

package/docs/src/components/LeftNav/LeftNav.js

@@ -60,7 +60,7 @@ const LeftNav = (props) => {
   };
 
   return (
-    <div className='h-100 bg-secondary-lightest border-right'>
+    <div className='h-100 bg-secondary-lightest border-right page-scroll'>
       {showMenuButtons && (
         <div className='d-flex pt-6 pl-6'>
           <Button

package/docs/src/components/Meta.js

@@ -5,10 +5,13 @@ import { useMetadata } from '../util/hooks';
 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 cardImage = '/icons/card-image.png';
 
-const Meta = ({ pageTitle, pageDescription, pageKeywords, titleType }) => {
+const Meta = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter, relativePagePath }) => {
   const { title, description, keywords, lang } = useMetadata();
+  const isSiblingTab = relativePagePath?.split('.')[0] === '/' + docTitle?.replace(/\s/g, '');
+  const pageTitle = isSiblingTab ? frontmatter?.title : docTitle;
+  const pageDescription = isSiblingTab ? frontmatter?.description : docDescription;
 
   const getPageTitle = () => {
     switch (titleType) {

package/docs/src/components/css/style.css

@@ -95,3 +95,7 @@ table td {
 .docblock-argstable td {
   border: none;
 }
+
+.inner-left-container {
+  max-width: 888px;
+}

package/docs/src/components/templates/Default.js

@@ -4,7 +4,7 @@ import LastModifiedDate from '../LastModifiedDate';
 
 export default ({ pageContext, children, ...rest }) => {
   const { frontmatter = {}, titleType, relativePagePath } = pageContext;
-  const { title, description, keywords, date, component, tabs, logos, showMobile=false } = frontmatter;
+  const { title, description, keywords, tabs, logos, showMobile=false } = frontmatter;
   return (
     <Layout
       pageTitle={title}
@@ -12,7 +12,6 @@ export default ({ pageContext, children, ...rest }) => {
       pageDescription={description}
       pageKeywords={keywords}
       relativePagePath={relativePagePath}
-      component={component}
       tabs={tabs}
       logos={logos}
       showMobile={showMobile}

package/docs/src/pages/components/avatar/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Avatar
 description: Avatars are used to identify users through display images or their initials.
-component: avatar
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/avatar/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Avatars
 description: Avatars are used to identify users through display pictures or their initials.
-component: avatar
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/badges/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Badges
 description: Badges are used to tag entities with concise and relevant information.
-component: badges
 tabs: ["Usage", "Code"]
 showMobile: true
 ---

package/docs/src/pages/components/badges/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Badges
 description: Badges are used to tag entities with concise and relevant information.
-component: badges
 tabs: ["Usage", "Code"]
 showMobile: true
 ---

package/docs/src/pages/components/breadcrumbs/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Breadcrumbs
 description: Breadcrumbs indicate the path of a record and help the users to navigate back to the parent record.
-component: Breadcrumbs
 tabs: ["Usage", "Code"]
 showMobile: true
 ---

package/docs/src/pages/components/breadcrumbs/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Breadcrumbs
 description: Breadcrumbs indicate the path of a record and help the users to navigate back to the parent record.
-component: Breadcrumbs
 tabs: ["Usage", "Code"]
 showMobile: true
 ---

package/docs/src/pages/components/button/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Button
 description: Buttons initiate actions and indicate what will happen after interacting with them.
-date: 15 June 2021
 tabs: ['Usage', 'Code', 'Content']
 showMobile: true
 ---

package/docs/src/pages/components/button/content.mdx

@@ -1,7 +1,6 @@
 ---
 title: Button
 description: Buttons initiate actions and indicate what will happen after interacting with them.
-date: 15 June 2021
 tabs: ['Usage', 'Code', 'Content']
 showMobile: true
 ---

package/docs/src/pages/components/button/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Button
 description: Buttons initiate actions and indicate what will happen after interacting with them.
-date: 15 June 2021
 tabs: ['Usage', 'Code', 'Content']
 showMobile: true
 ---

package/docs/src/pages/components/calendar/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Calendar
 description: Calendar lets users select a date.
-component: card
 tabs: ['Usage', 'Code']
 showMobile: false
 ---

package/docs/src/pages/components/calendar/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Calendar
 description: Calendar lets users select a date.
-date: 15 June 2021
 tabs: ["Usage", "Code"]
 showMobile: false
 ---

package/docs/src/pages/components/card/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Cards
 description: Cards act as containers to group related information together.
-component: card
 tabs: ["Usage", "Code"]
 showMobile: true
 ---

package/docs/src/pages/components/card/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Cards
 description: Cards act as containers to group related information together.
-date: 15 June 2021
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/checkbox/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Checkbox
 description: A checkbox lets users select one or more values from a list of options. Options are not mutually exclusive here so the selection of any option won’t affect the other.
-component: Checkbox
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/checkbox/usage.mdx

@@ -3,7 +3,6 @@ title: Checkbox
 description:
   A checkbox lets users select one or more values from a list of options.
   Options are not mutually exclusive here so the selection of any option won’t affect the other.
-component: Checkbox
 tabs: ["Usage", "Code"]
 showMobile: true
 ---

package/docs/src/pages/components/chips/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Chips
 description: Chips are compact group components used for quick selection, actions, and filtering.
-component: chip
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/chips/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Chips
 description: Chips are compact group components used for quick selection, actions, and filtering.
-component: chip
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/index.mdx

@@ -1,6 +1,5 @@
 ---
 description: Components Page
-date: 15 June 2021
 showMobile: true
 ---
 

package/docs/src/pages/components/message/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Message
 description: Message is used to provide collective feedback to the user about an action or a state.
-component: Message
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/message/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Message
 description: Message is used to provide collective feedback to the user about an action or a state.
-component: Message
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/overview/tabs/Overview.js

@@ -45,7 +45,7 @@ function Overview() {
                       className='w-100 overflow-hidden overview-card pb-5'
                     >
                       <CardBody>
-                        <div className='py-5'>
+                        <div className='py-5 card-opacity'>
                           <div className='d-flex justify-content-center align-items-center' style={{ overflow: 'hidden', height: '136px' }}>
                             {React.createElement(image)}
                           </div>

package/docs/src/pages/components/overview/tabs/overview.css

@@ -1,9 +1,8 @@
-.overview-cardBody {
-  height: 134px;
+.card-opacity {
   opacity: 0.6;
 }
 
-.overview-cardBody:hover {
+.overview-card:hover .card-opacity {
   opacity: 1;
 }
 

package/docs/src/pages/components/radio/code.mdx

@@ -4,7 +4,6 @@ description:
   Radio button lets users select one value from a list 
   of mutually exclusive choices. Whenever a user makes a new selection, 
   the previously selected option is deselected. If multi-select is required use checkboxes instead of radio.
-component: radio
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/radio/usage.mdx

@@ -4,7 +4,6 @@ description:
   Radio button lets users select one value from a list 
   of mutually exclusive choices. Whenever a user makes a new selection, 
   the previously selected option is deselected. If multi-select is required use checkboxes instead of radio. 
-date: 13 Jan 2022
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/sidesheet/code.mdx

@@ -2,7 +2,6 @@
 title: Side sheet
 description:
   Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.
-component: sidesheet
 tabs: ['Usage','Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/sidesheet/interactions.mdx

@@ -2,7 +2,6 @@
 title: Side sheet
 description:
   Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.
-component: sidesheet
 tabs: ['Usage','Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/sidesheet/usage.mdx

@@ -2,7 +2,6 @@
 title: Side sheet
 description:
   Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.
-component: sidesheet
 tabs: ['Usage','Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/slider/code.mdx

@@ -2,7 +2,6 @@
 title: Slider
 description:
   A slider lets user select a value (or range) from a given range of values.
-component: toast
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/slider/usage.mdx

@@ -2,7 +2,6 @@
 title: Slider
 description:
   A slider lets user select a value (or range) from a given range of values.
-component: toast
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/statushint/code.mdx

@@ -2,7 +2,6 @@
 title: Status hint
 description:
   Status hint is used to highlight the status of an item
-component: statushint
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/statushint/usage.mdx

@@ -2,7 +2,6 @@
 title: Status hint
 description:
   Status hint is used to highlight the status of an item
-component: statushint
 tabs: ['Usage', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/steppers/code.mdx

@@ -2,7 +2,6 @@
 title: Steppers
 description:
   Steppers are used to help users keep track in a multi-step workflow
-date: 25 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/steppers/interactions.mdx

@@ -2,7 +2,6 @@
 title: Steppers
 description:
   Steppers are used to help users keep track in a multi-step workflow
-date: 25 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/steppers/usage.mdx

@@ -2,7 +2,6 @@
 title: Steppers
 description:
   Steppers are used to help users keep track in a multi-step workflow
-date: 25 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/switch/code.mdx

@@ -2,7 +2,6 @@
 title: Switch
 description:
   Switches are used to toggle between two states in a user interface - ON and OFF, hence resembling the real-life switches used to turn something ON or OFF.
-date: 24 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/switch/interactions.mdx

@@ -2,7 +2,6 @@
 title: Switch
 description:
   Switches are used to toggle between two states in a user interface - ON and OFF, hence resembling the real-life switches used to turn something ON or OFF.
-date: 24 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/switch/usage.mdx

@@ -2,7 +2,6 @@
 title: Switch
 description:
   Switches are used to toggle between two states in a user interface - ON and OFF, hence resembling the real-life switches used to turn something ON or OFF.
-date: 24 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/table/code.mdx

@@ -1,7 +1,6 @@
 ---
 title: Table
 description: Tables are used for arranging information in a tabular format by laying out resource items, displaying data heavily based on numbers, or a list of homogenous items in their simplest form.
-component: Table
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/table/interactions.mdx

@@ -1,7 +1,6 @@
 ---
 title: Table
 description: Tables are used for arranging information in a tabular format by laying out resource items, displaying data heavily based on numbers, or a list of homogenous items in their simplest form.
-component: Table
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/table/usage.mdx

@@ -1,7 +1,6 @@
 ---
 title: Table
 description: Tables are used for arranging information in a tabular format by laying out resource items, displaying data heavily based on numbers, or a list of homogenous items in their simplest form.
-component: Table
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/tabs/code.mdx

@@ -2,7 +2,6 @@
 title: Tabs
 description:
   Tabs segregate similar kind of content and allow users to navigate between them without switching the context.
-date: 23 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/tabs/interactions.mdx

@@ -2,7 +2,6 @@
 title: Tabs
 description:
   Tabs segregate similar kind of content and allow users to navigate between them without switching the context.
-date: 23 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/tabs/usage.mdx

@@ -2,7 +2,6 @@
 title: Tabs
 description:
   Tabs segregate similar kind of content and allow users to navigate between them without switching the context.
-date: 23 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/toast/code.mdx

@@ -2,7 +2,6 @@
 title: Toast
 description:
   Toasts are used to show alerts and give feedback to the users about an action they took.
-component: toast
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/toast/interactions.mdx

@@ -2,7 +2,6 @@
 title: Toast
 description:
   Toasts are used to show alerts and give feedback to the users about an action they took.
-date: 17 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/toast/usage.mdx

@@ -2,7 +2,6 @@
 title: Toast
 description:
   Toasts are used to show alerts and give feedback to the users about an action they took.
-date: 17 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/tooltip/code.mdx

@@ -2,7 +2,6 @@
 title: Tooltip
 description:
   Toasts are used to show alerts and give feedback to the users about an action they took.
-date: 24 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/tooltip/interactions.mdx

@@ -2,7 +2,6 @@
 title: Tooltip
 description:
   Toasts are used to show alerts and give feedback to the users about an action they took.
-date: 24 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/components/tooltip/usage.mdx

@@ -2,7 +2,6 @@
 title: Tooltip
 description:
   Toasts are used to show alerts and give feedback to the users about an action they took.
-date: 24 Jan 2022
 tabs: ['Usage', 'Interactions', 'Code']
 showMobile: true
 ---

package/docs/src/pages/index.js

@@ -56,7 +56,7 @@ const Home = () => {
 
   return (
     <Homepage relativePagePath={'/404'} is404={true}>
-      <Meta titleType='page' pageTitle='Masala Design System' />
+      <Meta titleType='page' docTitle='Masala Design System' />
       <Row className="h-100">
         <Column className="page-animation">