From d3675b4ca71897f87949c96600dada234e63a245 Mon Sep 17 00:00:00 2001 From: Ansh Goyal Date: Thu, 14 Mar 2024 15:18:56 +0000 Subject: [PATCH] fix code review suggestions --- components/logos/Adidas.tsx | 1 + components/logos/Axway.tsx | 1 + components/logos/SAP.tsx | 1 + components/logos/Salesforce.tsx | 1 + components/logos/Slack.tsx | 1 + components/roadmap/RoadmapItem.tsx | 102 ++-------------------------- components/roadmap/RoadmapList.tsx | 10 +-- components/roadmap/RoadmapPill.tsx | 104 +++++++++++++++++++++++++++++ 8 files changed, 121 insertions(+), 100 deletions(-) create mode 100644 components/roadmap/RoadmapPill.tsx diff --git a/components/logos/Adidas.tsx b/components/logos/Adidas.tsx index 2664c8b4cd1..f9e8fd285a9 100644 --- a/components/logos/Adidas.tsx +++ b/components/logos/Adidas.tsx @@ -1,5 +1,6 @@ /** * @description Logo for Adidas + * @param {string} className - used to style the svg */ export default function AdidasLogo({ className }: { className?: string }) { return ( diff --git a/components/logos/Axway.tsx b/components/logos/Axway.tsx index 95e2b56723e..8ef1650d74d 100644 --- a/components/logos/Axway.tsx +++ b/components/logos/Axway.tsx @@ -1,5 +1,6 @@ /** * @description Logo for Axway + * @param {string} className - used to style the svg */ export default function AxwayLogo({ className }: { className?: string }) { return ( diff --git a/components/logos/SAP.tsx b/components/logos/SAP.tsx index 87201608daf..897a325d09a 100644 --- a/components/logos/SAP.tsx +++ b/components/logos/SAP.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; /** * @description Logo for SAP + * @param {string} className - used to style the svg */ export default function SapLogo({ className }: { className?: string }) { const [isHovered, setIsHovered] = useState(false); diff --git a/components/logos/Salesforce.tsx b/components/logos/Salesforce.tsx index b98d469ddf2..e75247a186c 100644 --- a/components/logos/Salesforce.tsx +++ b/components/logos/Salesforce.tsx @@ -1,5 +1,6 @@ /** * @description Logo for Salesforce + * @param {string} className - used to style the svg */ export default function SalesforceLogo({ className }: { className?: string }) { return ( diff --git a/components/logos/Slack.tsx b/components/logos/Slack.tsx index 864acb333f9..603d817a774 100644 --- a/components/logos/Slack.tsx +++ b/components/logos/Slack.tsx @@ -1,5 +1,6 @@ /** * @description Logo for Slack + * @param {string} className - used to style the svg */ export default function SlackLogo({ className }: { className?: string }) { return ( diff --git a/components/roadmap/RoadmapItem.tsx b/components/roadmap/RoadmapItem.tsx index 02f0aa7ba16..f53cf850473 100644 --- a/components/roadmap/RoadmapItem.tsx +++ b/components/roadmap/RoadmapItem.tsx @@ -1,82 +1,9 @@ import { useState } from 'react'; -import IconArrowRight from '../icons/ArrowRight'; -import Modal from '../Modal'; +// Since a roadmap item can contain nested roadmap lists, we need to import RoadmapList to display them. /* eslint-disable import/no-cycle*/ import RoadmapList from './RoadmapList'; - -interface IPillProps { - item: { - done?: boolean; - url?: string; - description?: string; - title: string; - }; - colorClass?: string; - isCollapsible?: boolean; - isCollapsed?: boolean; - onClickCollapse?: () => void; -} - -/** - * @description Pill is a component to display a roadmap item. - * @param {object} props.item - The roadmap item. - * @param {boolean} props.item.done - Whether the item is done. - * @param {string} props.item.url - The URL associated with the item. - * @param {string} props.item.description - The description of the item. - * @param {string} props.item.title - The title of the item. - * @param {string} props.colorClass - The color class for styling. - * @param {boolean} props.isCollapsible - Whether the item is collapsible. - * @param {boolean} props.isCollapsed - Whether the item is collapsed. - * @param {function} props.onClickCollapse - Function to handle click on collapse. - */ -function Pill({ - item, - colorClass = '', - isCollapsible = false, - isCollapsed = false, - onClickCollapse = () => {} -}: IPillProps) { - const [isDescriptionVisible, setIsDescriptionVisible] = useState(false); - - return ( - <> -
-
-
-
-
- !item.url && item.description && setIsDescriptionVisible(true)} className={`block text-left font-medium text-gray-900 ${item.description || item.url ? 'cursor-pointer hover:text-gray-600' : 'cursor-default'}`}> - { - item.done && ( - - - - - - ) - } - { item.title } - -
- {isCollapsible && ( - - )} -
-
-
- { - isDescriptionVisible && ( - setIsDescriptionVisible(false)}> -
{item.description}
- - ) - } - - ); -} +import Pill from './RoadmapPill'; export interface IRoadmapItemProps { item: { @@ -103,14 +30,9 @@ export interface IRoadmapItemProps { * @param {boolean} props.showConnector - Whether to show the connector. * @param {boolean} props.collapsed - Whether the list is collapsed. */ -export default function RoadmapItem({ - item, - colorClass, - showConnector = true, - collapsed = true -}: IRoadmapItemProps) { +export default function RoadmapItem({ item, colorClass, showConnector = true, collapsed = true }: IRoadmapItemProps) { const [isCollapsed, setIsCollapsed] = useState(collapsed); - const isCollapsible = (item.solutions !== null) || (item.implementations !== null); + const isCollapsible = item.solutions !== null || item.implementations !== null; const connectorClasses = 'border-l-2 border-dashed border-gray-300'; const classNames = `pt-2 ${showConnector && connectorClasses}`; @@ -118,7 +40,7 @@ export default function RoadmapItem({ return (
  • - { showConnector && ( + {showConnector && (
    @@ -133,21 +55,11 @@ export default function RoadmapItem({
    {!isCollapsed && item?.solutions?.length && ( - + )} {!isCollapsed && item?.implementations?.length && ( - + )}
    • ); diff --git a/components/roadmap/RoadmapList.tsx b/components/roadmap/RoadmapList.tsx index 08d4f478c7f..fbe9b6f4ca5 100644 --- a/components/roadmap/RoadmapList.tsx +++ b/components/roadmap/RoadmapList.tsx @@ -1,3 +1,4 @@ +// Since a RoadmapList may contain other RoadmapItems, we need to import RoadmapItem to display them. /* eslint-disable import/no-cycle*/ import RoadmapItem from './RoadmapItem'; @@ -36,9 +37,9 @@ export default function RoadmapList({ }: IRoadmapListProps) { return ( <> - items && items.length && ( + items && items.length && ( - ) + ) ); } diff --git a/components/roadmap/RoadmapPill.tsx b/components/roadmap/RoadmapPill.tsx new file mode 100644 index 00000000000..322fbaed627 --- /dev/null +++ b/components/roadmap/RoadmapPill.tsx @@ -0,0 +1,104 @@ +import { useState } from 'react'; + +import IconArrowRight from '../icons/ArrowRight'; +import Modal from '../Modal'; + +/** + * @description Icon for Done (Tick) + */ +function DoneIcon() { + return ( + + + + ); +} + +interface IPillProps { + item: { + done?: boolean; + url?: string; + description?: string; + title: string; + }; + colorClass?: string; + isCollapsible?: boolean; + isCollapsed?: boolean; + onClickCollapse?: () => void; +} + +/** + * @description Pill is a component to display a roadmap item. + * @param {object} props.item - The roadmap item. + * @param {boolean} props.item.done - Whether the item is done. + * @param {string} props.item.url - The URL associated with the item. + * @param {string} props.item.description - The description of the item. + * @param {string} props.item.title - The title of the item. + * @param {string} props.colorClass - The color class for styling. + * @param {boolean} props.isCollapsible - Whether the item is collapsible. + * @param {boolean} props.isCollapsed - Whether the item is collapsed. + * @param {function} props.onClickCollapse - Function to handle click on collapse. + */ +export default function Pill({ + item, + colorClass = '', + isCollapsible = false, + isCollapsed = false, + onClickCollapse = () => {} +}: IPillProps) { + const [isDescriptionVisible, setIsDescriptionVisible] = useState(false); + + return ( + <> +
    +
    +
    +
    +
    + !item.url && item.description && setIsDescriptionVisible(true)} + className={`block text-left font-medium text-gray-900 ${item.description || item.url ? 'cursor-pointer hover:text-gray-600' : 'cursor-default'}`} + > + {item.done && ( + + + + )} + {item.title} + +
    + {isCollapsible && ( + + )} +
    +
    +
    + {isDescriptionVisible && ( + setIsDescriptionVisible(false)}> +
    {item.description}
    +     + )} + + ); +}