cal.pub0.org/packages/ui/Button.tsx

150 lines
6.1 KiB
TypeScript
Raw Normal View History

import Link, { LinkProps } from "next/link";
import React, { forwardRef } from "react";
import classNames from "@calcom/lib/classNames";
type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
export type ButtonBaseProps = {
color?: "primary" | "secondary" | "minimal" | "warn" | "alert" | "alert2";
size?: "base" | "sm" | "lg" | "fab" | "icon";
loading?: boolean;
disabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
StartIcon?: SVGComponent;
Change location of booking (#2658) * add functionality to change location in booking and send out mail * add i18n * change location with dropdown like in event-types * small fixes and code clean up * clean code * improve format of current Location string * clean code * clear selection when dialog closed * added mutation and changed props (first working verison) * clean code * clean code * clean code * clean code * fix typo * change maxHeight of select * use useWatch for selectedLocation * pass default values with props * set current location directly in useState * clear selected values when updating location * fix trpc query for credentialst * change icons for editing booking * improve naming of variables * remove unnecessary orderBy * use locationOptionsToString method * fix current location naming for Cal Video * add phone input * save phone number as location of booking * remove input field for phone number for event-types * fix redirection issue * show previous selected location in event-type * remove attendee number from selection for booking * make first letter of location lowercase * remove input field for attendee phone number * clear Errors when changing location type * set location details to optional * clean code * fixing issue that dropdown doesn't close when dialog opens * clean code * make overflow visibile in dialog * fix existing bug with address not showing in event-type settings * fix issue with losing focus after validation * close rejection dialog * small spelling fixes * fix issue with LocationChangeEmail * fix failing E2E test * fix failing E2E test * fix E2E test * bug fix for saving user phone, and other minor changes * merge main * improve text * fix UI of booking list * Delete admin * remove selection after update and submit * add translation for error message * add default values for checkbox * add "your phone number" to locations on booking page * remove duplicate attributes from viewer.bookings Co-authored-by: Omar López <zomars@me.com> * check if user is authorized to make changes to booking * remove location string * clan code for displayLocaitonPublicly checkbox * fetch locationOptions on server side * remove trpc query for credentials * fix phone number input * fix labels of host and attendee phone number for booking page * Migrates edit location to tRPC * Link elemnt should only be used in `a` tags * Adds missin router * Migrates locationOptions to tRPC query * Type fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-27 23:27:41 +00:00
startIconClassName?: string;
EndIcon?: SVGComponent;
endIconClassName?: string;
shallow?: boolean;
};
export type ButtonProps = ButtonBaseProps &
(
| (Omit<JSX.IntrinsicElements["a"], "href" | "onClick"> & LinkProps)
| (Omit<JSX.IntrinsicElements["button"], "onClick"> & { href?: never })
);
export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
props: ButtonProps,
forwardedRef
) {
const {
loading = false,
color = "primary",
size = "base",
StartIcon,
Change location of booking (#2658) * add functionality to change location in booking and send out mail * add i18n * change location with dropdown like in event-types * small fixes and code clean up * clean code * improve format of current Location string * clean code * clear selection when dialog closed * added mutation and changed props (first working verison) * clean code * clean code * clean code * clean code * fix typo * change maxHeight of select * use useWatch for selectedLocation * pass default values with props * set current location directly in useState * clear selected values when updating location * fix trpc query for credentialst * change icons for editing booking * improve naming of variables * remove unnecessary orderBy * use locationOptionsToString method * fix current location naming for Cal Video * add phone input * save phone number as location of booking * remove input field for phone number for event-types * fix redirection issue * show previous selected location in event-type * remove attendee number from selection for booking * make first letter of location lowercase * remove input field for attendee phone number * clear Errors when changing location type * set location details to optional * clean code * fixing issue that dropdown doesn't close when dialog opens * clean code * make overflow visibile in dialog * fix existing bug with address not showing in event-type settings * fix issue with losing focus after validation * close rejection dialog * small spelling fixes * fix issue with LocationChangeEmail * fix failing E2E test * fix failing E2E test * fix E2E test * bug fix for saving user phone, and other minor changes * merge main * improve text * fix UI of booking list * Delete admin * remove selection after update and submit * add translation for error message * add default values for checkbox * add "your phone number" to locations on booking page * remove duplicate attributes from viewer.bookings Co-authored-by: Omar López <zomars@me.com> * check if user is authorized to make changes to booking * remove location string * clan code for displayLocaitonPublicly checkbox * fetch locationOptions on server side * remove trpc query for credentials * fix phone number input * fix labels of host and attendee phone number for booking page * Migrates edit location to tRPC * Link elemnt should only be used in `a` tags * Adds missin router * Migrates locationOptions to tRPC query * Type fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-27 23:27:41 +00:00
startIconClassName,
endIconClassName,
EndIcon,
shallow,
// attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
...passThroughProps
} = props;
// Buttons are **always** disabled if we're in a `loading` state
const disabled = props.disabled || loading;
// If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
const isLink = typeof props.href !== "undefined";
const elementType = isLink ? "a" : "button";
const element = React.createElement(
elementType,
{
...passThroughProps,
disabled,
ref: forwardedRef,
className: classNames(
// base styles independent what type of button it is
2022-07-27 18:58:24 +00:00
"inline-flex items-center appearance-none",
// different styles depending on size
size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
size === "icon" &&
2022-07-27 02:24:00 +00:00
"w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-gray-200 transition",
// turn button into a floating action button (fab)
size === "fab" ? "fixed" : "relative",
size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
// different styles depending on color
color === "primary" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
: "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-brand dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
color === "secondary" &&
(disabled
? "border border-gray-200 text-gray-400 bg-white"
: "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-800"),
color === "alert" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
: "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-red-600 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
color === "alert2" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
: "border border-transparent dark:text-darkmodebrandcontrast text-black bg-yellow-400 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
color === "minimal" &&
(disabled
? "text-gray-400 bg-transparent"
: "text-gray-700 bg-transparent hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-neutral-500"),
color === "warn" &&
(disabled
? "text-gray-400 bg-transparent"
: "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
// set not-allowed cursor if disabled
loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
props.className
),
// if we click a disabled button, we prevent going through the click handler
onClick: disabled
? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
e.preventDefault();
}
: props.onClick,
},
<>
{StartIcon && (
<StartIcon
className={classNames(
"inline",
2022-07-27 02:24:00 +00:00
size === "icon" ? "h-4 w-4 " : "-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1",
Change location of booking (#2658) * add functionality to change location in booking and send out mail * add i18n * change location with dropdown like in event-types * small fixes and code clean up * clean code * improve format of current Location string * clean code * clear selection when dialog closed * added mutation and changed props (first working verison) * clean code * clean code * clean code * clean code * fix typo * change maxHeight of select * use useWatch for selectedLocation * pass default values with props * set current location directly in useState * clear selected values when updating location * fix trpc query for credentialst * change icons for editing booking * improve naming of variables * remove unnecessary orderBy * use locationOptionsToString method * fix current location naming for Cal Video * add phone input * save phone number as location of booking * remove input field for phone number for event-types * fix redirection issue * show previous selected location in event-type * remove attendee number from selection for booking * make first letter of location lowercase * remove input field for attendee phone number * clear Errors when changing location type * set location details to optional * clean code * fixing issue that dropdown doesn't close when dialog opens * clean code * make overflow visibile in dialog * fix existing bug with address not showing in event-type settings * fix issue with losing focus after validation * close rejection dialog * small spelling fixes * fix issue with LocationChangeEmail * fix failing E2E test * fix failing E2E test * fix E2E test * bug fix for saving user phone, and other minor changes * merge main * improve text * fix UI of booking list * Delete admin * remove selection after update and submit * add translation for error message * add default values for checkbox * add "your phone number" to locations on booking page * remove duplicate attributes from viewer.bookings Co-authored-by: Omar López <zomars@me.com> * check if user is authorized to make changes to booking * remove location string * clan code for displayLocaitonPublicly checkbox * fetch locationOptions on server side * remove trpc query for credentials * fix phone number input * fix labels of host and attendee phone number for booking page * Migrates edit location to tRPC * Link elemnt should only be used in `a` tags * Adds missin router * Migrates locationOptions to tRPC query * Type fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-05-27 23:27:41 +00:00
startIconClassName || ""
)}
/>
)}
{props.children}
{loading && (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<svg
className={classNames(
"mx-4 h-5 w-5 animate-spin",
color === "primary" ? "text-white dark:text-black" : "text-black"
)}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24">
Feat/design system (#3051) * Storybook Boilerplate setup * Inital Setup * First story * Color Design System * Badge Story + Comp * Checkbox UI + Stories * Update Red colors + Button Group * Switch+Stories / Default brand color * Update Version + Button Group combined * Compact Butotn Group * Tidy up Selectors * Adds Tooltip to Button * TextInput * Update SB * Prefix Input * Match text area styles * Prefix Controls * Update spacing on text area * Text Input Suffix * Color Picker * Update storybook * Icon Suffix/Prefix * Datepicker + move components to monorepo * Text color on labels * Move Radio over to monorepo * Move CustomBranding to calcom/ib * Radio * IconBadge Component * Update radio indicator background * Disabled radio state * Delete yarn.lock * Revert "Delete yarn.lock" This reverts commit 9b99d244b70872153a16bec1f1f3bc651e94be7a. * Fix webhook test * Replace old toast location * Update radio path * Empty State * Update Badge.tsx * Update Badge.tsx * Banner Component+story * Creation Modal * Creation Dialog updated * Button hover dialog * Confirmation Modal * Datepicker (Booking) * PageHeader * Fix border width * PageHeader update search bar * Fix input height * Fix button group size * Add spacing between badges - font smoothing * Update button position on banner * Banner update * Fixing focus state on suffix/prefix inputs * Implement A11y addon * Add aria label * error && "text-red-800" * Fix button hover * Change colors * Generate snapshot tests for on hover button * Revert colors to demo * Change colors * Fix Linear Issues * Form Stepper component * Add padding back to input * Move ui to UI_V2 * Use V2 * Update imports for v1 * Update imports for v1 * Upgrade to nextjs in storybook root * Update website submodule * Avatar Groups * Fix webpack again * Vertical Tab Item [WIP] - active state on small item is not working currently * Vertical Tab Group * Add Github action * Fix website submodule * Fix GH action * Rename Workflow * Adds lint report for CI * Lint report fixes * NavigationItem comments * VerticalTabItem type fixes * Fix avatar blur * Fix comments * Adding isEmbed to window object * Disable components that use router mock. * Load inter via google fonts * Started select * Adding base Breadcrumb * Update readme * Formatting * Fixes * Dependencies matching * Linting * Update FormStep.stories.tsx * Linting * Update MultiSelectCheckboxes.tsx Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-07-23 00:39:50 +00:00
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
Feat/design system (#3051) * Storybook Boilerplate setup * Inital Setup * First story * Color Design System * Badge Story + Comp * Checkbox UI + Stories * Update Red colors + Button Group * Switch+Stories / Default brand color * Update Version + Button Group combined * Compact Butotn Group * Tidy up Selectors * Adds Tooltip to Button * TextInput * Update SB * Prefix Input * Match text area styles * Prefix Controls * Update spacing on text area * Text Input Suffix * Color Picker * Update storybook * Icon Suffix/Prefix * Datepicker + move components to monorepo * Text color on labels * Move Radio over to monorepo * Move CustomBranding to calcom/ib * Radio * IconBadge Component * Update radio indicator background * Disabled radio state * Delete yarn.lock * Revert "Delete yarn.lock" This reverts commit 9b99d244b70872153a16bec1f1f3bc651e94be7a. * Fix webhook test * Replace old toast location * Update radio path * Empty State * Update Badge.tsx * Update Badge.tsx * Banner Component+story * Creation Modal * Creation Dialog updated * Button hover dialog * Confirmation Modal * Datepicker (Booking) * PageHeader * Fix border width * PageHeader update search bar * Fix input height * Fix button group size * Add spacing between badges - font smoothing * Update button position on banner * Banner update * Fixing focus state on suffix/prefix inputs * Implement A11y addon * Add aria label * error && "text-red-800" * Fix button hover * Change colors * Generate snapshot tests for on hover button * Revert colors to demo * Change colors * Fix Linear Issues * Form Stepper component * Add padding back to input * Move ui to UI_V2 * Use V2 * Update imports for v1 * Update imports for v1 * Upgrade to nextjs in storybook root * Update website submodule * Avatar Groups * Fix webpack again * Vertical Tab Item [WIP] - active state on small item is not working currently * Vertical Tab Group * Add Github action * Fix website submodule * Fix GH action * Rename Workflow * Adds lint report for CI * Lint report fixes * NavigationItem comments * VerticalTabItem type fixes * Fix avatar blur * Fix comments * Adding isEmbed to window object * Disable components that use router mock. * Load inter via google fonts * Started select * Adding base Breadcrumb * Update readme * Formatting * Fixes * Dependencies matching * Linting * Update FormStep.stories.tsx * Linting * Update MultiSelectCheckboxes.tsx Co-authored-by: zomars <zomars@me.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com>
2022-07-23 00:39:50 +00:00
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
)}
{EndIcon && (
<EndIcon className={classNames("-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2", endIconClassName || "")} />
)}
</>
);
return props.href ? (
<Link passHref href={props.href} shallow={shallow && shallow}>
{element}
</Link>
) : (
element
);
});
export default Button;