Merge pull request #128 from devtron-labs/feat/button-with-selector

feat: button with selector

Author: AbhishekA1509

src/Assets/Icon/ic-open-box.svg

@@ -28,6 +28,8 @@ export const URLS = {
     GETTING_STARTED: 'getting-started',
     STACK_MANAGER_ABOUT: '/stack-manager/about',
     APP_LIST_HELM: 'h',
+    CREATE: '/create',
+    RELEASES: '/releases',
 }
 
 export const ROUTES = {
@@ -433,6 +435,7 @@ export const ZERO_TIME_STRING = '0001-01-01T00:00:00Z'
 export const EXCLUDED_FALSY_VALUES = [undefined, null, '', NaN] as const
 
 export const API_STATUS_CODES = {
+    BAD_REQUEST: 400,
     UNAUTHORIZED: 401,
     PERMISSION_DENIED: 403,
     NOT_FOUND: 404,

src/Common/Constants.ts

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { ReactComponent as ICDropdown } from '../../../Assets/Icon/ic-chevron-down.svg'
+import { PopupMenu } from '../../../Common'
+import { ButtonWithSelectorProps } from './types'
+import './buttonWithSelector.scss'
+
+/**
+ * Button With Selector
+ * @param content Content to show in button
+ * @param onClick Handler Function for button click
+ * @param children Dropdown Content
+ * @param className Other Classes to be applied
+ *
+ * @example
+ * ```tsx
+ * <ButtonWithSelector content='Create Job' onClick={() => {}} className=''>
+ *  {dropdownOptions}
+ * </ButtonWithSelector>
+ * ```
+ */
+const ButtonWithSelector = ({
+    content,
+    onClick,
+    children,
+    className = '',
+    popUpBodyClassName = '',
+    showPopUp = true,
+}: ButtonWithSelectorProps) => {
+    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
+
+    return (
+        <div className="flexbox">
+            <button
+                className={`cta flex h-28 ${showPopUp ? 'dc__no-right-radius' : ''} dc__no-border-imp fs-12 fw-6 lh-20-imp ${className}`}
+                type="button"
+                onClick={onClick}
+            >
+                {content}
+            </button>
+            {showPopUp && (
+                <PopupMenu autoClose autoPosition onToggleCallback={setIsMenuOpen}>
+                    <PopupMenu.Button rootClassName="flex dc__transparent p-8 w-28 bcb-5 dc__right-radius-4 dc__no-left-radius dc__no-top-border dc__no-bottom-border dc__no-right-border button-with-selector">
+                        <ICDropdown
+                            className="icon-dim-12 fcn-0 dc__no-shrink rotate"
+                            style={{ ['--rotateBy' as any]: isMenuOpen ? '180deg' : '0deg' }}
+                        />
+                    </PopupMenu.Button>
+                    <PopupMenu.Body rootClassName={`pt-4 pb-4 dc__border dc__overflow-hidden ${popUpBodyClassName}`}>
+                        {children}
+                    </PopupMenu.Body>
+                </PopupMenu>
+            )}
+        </div>
+    )
+}
+
+export default ButtonWithSelector

src/Shared/Components/ButtonWithSelector/ButtonWithSelector.tsx

@@ -0,0 +1,5 @@
+.button-with-selector {
+    &:hover, &:active, &:focus {
+        border: 1px solid var(--N200);
+    }
+}

src/Shared/Components/ButtonWithSelector/buttonWithSelector.scss

@@ -0,0 +1 @@
+export { default as ButtonWithSelector } from './ButtonWithSelector'

src/Shared/Components/ButtonWithSelector/index.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+
+export interface ButtonWithSelectorProps {
+    content: ReactNode
+    onClick: () => void
+    children: ReactNode
+    className?: string
+    popUpBodyClassName?: string
+    showPopUp?: boolean
+}

src/Shared/Components/ButtonWithSelector/types.ts

@@ -15,3 +15,4 @@ export * from './EditableTextArea'
 export * from './Header'
 export * from './AnnouncementBanner'
 export * from './ButtonWithLoader'
+export * from './ButtonWithSelector'