@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/DatePicker/DatePicker.tsx

@@ -15,7 +15,7 @@ import { Text } from "../Text";
 import { Box, BoxProps } from "../Box";
 import { Heading } from "../Heading";
 import { Flex } from "../Flex";
-import { Button, BUTTON_VARIANT } from "../Button";
+import { Button, ButtonProps, BUTTON_VARIANT } from "../Button";
 import { ICON_TYPE } from "../Icon";
 
 const cn = bemHOF("DatePicker");
@@ -45,26 +45,52 @@ interface CustomHeaderProps {
   increaseMonth: () => void;
   prevMonthButtonDisabled: boolean;
   nextMonthButtonDisabled: boolean;
+  decreaseYear: () => void;
+  increaseYear: () => void;
+  prevYearButtonDisabled: boolean;
+  nextYearButtonDisabled: boolean;
 }
 
 type HeaderPropsState = CustomHeaderProps | null;
 
+const CustomHeaderButtonNext = ({ onClick, disabled }: ButtonProps) => (
+  <Button
+    className="text-h5"
+    icon={ICON_TYPE.CARET_RIGHT}
+    variant={BUTTON_VARIANT.MINIMAL}
+    onClick={onClick}
+    disabled={disabled}
+  />
+);
+
+const CustomHeaderButtonPrev = ({ onClick, disabled }: ButtonProps) => (
+  <Button
+    className="text-h5"
+    icon={ICON_TYPE.CARET_LEFT}
+    variant={BUTTON_VARIANT.MINIMAL}
+    onClick={onClick}
+    disabled={disabled}
+  />
+);
+
 const CustomHeaderButtons = ({
   decreaseMonth,
   increaseMonth,
   prevMonthButtonDisabled,
   nextMonthButtonDisabled,
-}: Omit<CustomHeaderProps, "date">) => (
+}: Pick<
+  CustomHeaderProps,
+  | "decreaseMonth"
+  | "increaseMonth"
+  | "prevMonthButtonDisabled"
+  | "nextMonthButtonDisabled"
+>) => (
   <Flex className={cn({ e: "month-btns-wrapper" })}>
-    <Button
-      icon={ICON_TYPE.CHEVRON_LEFT}
-      variant={BUTTON_VARIANT.SECONDARY}
+    <CustomHeaderButtonPrev
       onClick={decreaseMonth}
       disabled={prevMonthButtonDisabled}
     />
-    <Button
-      icon={ICON_TYPE.CHEVRON_RIGHT}
-      variant={BUTTON_VARIANT.SECONDARY}
+    <CustomHeaderButtonNext
       onClick={increaseMonth}
       disabled={nextMonthButtonDisabled}
     />
@@ -77,11 +103,17 @@ const CustomHeader = ({
   increaseMonth,
   prevMonthButtonDisabled,
   nextMonthButtonDisabled,
+  decreaseYear,
+  increaseYear,
+  prevYearButtonDisabled,
+  nextYearButtonDisabled,
   monthsShown,
   setHeaderProps,
+  showMonthYearPicker = false,
 }: CustomHeaderProps & {
   monthsShown: number;
   setHeaderProps: (p: CustomHeaderProps) => void;
+  showMonthYearPicker?: boolean;
 }) => {
   useEffect(() => {
     if (monthsShown > 1) {
@@ -91,6 +123,10 @@ const CustomHeader = ({
         increaseMonth,
         prevMonthButtonDisabled,
         nextMonthButtonDisabled,
+        decreaseYear,
+        increaseYear,
+        prevYearButtonDisabled,
+        nextYearButtonDisabled,
       });
     }
   }, [
@@ -100,6 +136,10 @@ const CustomHeader = ({
     increaseMonth,
     prevMonthButtonDisabled,
     nextMonthButtonDisabled,
+    decreaseYear,
+    increaseYear,
+    prevYearButtonDisabled,
+    nextYearButtonDisabled,
     setHeaderProps,
   ]);
 
@@ -109,14 +149,35 @@ const CustomHeader = ({
 
   return (
     <Flex className={cn({ e: "header" })}>
+      <CustomHeaderButtonPrev
+        onClick={() => {
+          if (showMonthYearPicker) {
+            decreaseYear();
+          } else {
+            decreaseMonth();
+          }
+        }}
+        disabled={
+          showMonthYearPicker ? prevYearButtonDisabled : prevMonthButtonDisabled
+        }
+      />
       <Heading.H4 className={cn({ e: "heading" })}>
-        {format(date, MONTH_YEAR_FORMAT)}
+        {showMonthYearPicker
+          ? format(date, "yyyy")
+          : format(date, MONTH_YEAR_FORMAT)}
+        {}
       </Heading.H4>
-      <CustomHeaderButtons
-        decreaseMonth={decreaseMonth}
-        prevMonthButtonDisabled={prevMonthButtonDisabled}
-        increaseMonth={increaseMonth}
-        nextMonthButtonDisabled={nextMonthButtonDisabled}
+      <CustomHeaderButtonNext
+        onClick={() => {
+          if (showMonthYearPicker) {
+            increaseYear();
+          } else {
+            increaseMonth();
+          }
+        }}
+        disabled={
+          showMonthYearPicker ? nextYearButtonDisabled : nextMonthButtonDisabled
+        }
       />
     </Flex>
   );
@@ -125,9 +186,11 @@ const CustomHeader = ({
 const generateCustomHeaderRenderer = ({
   monthsShown,
   setHeaderProps,
+  showMonthYearPicker = false,
 }: {
   monthsShown: number;
   setHeaderProps: (p: CustomHeaderProps) => void;
+  showMonthYearPicker?: boolean;
 }) => {
   return (customHeaderProps: CustomHeaderProps) => {
     return (
@@ -135,6 +198,7 @@ const generateCustomHeaderRenderer = ({
         {...customHeaderProps}
         monthsShown={monthsShown}
         setHeaderProps={setHeaderProps}
+        showMonthYearPicker={showMonthYearPicker}
       />
     );
   };
@@ -150,6 +214,8 @@ const checkHeaderPropsEquality = (
     return false;
   if (prev.nextMonthButtonDisabled !== next.nextMonthButtonDisabled)
     return false;
+  if (prev.prevYearButtonDisabled !== next.prevYearButtonDisabled) return false;
+  if (prev.nextYearButtonDisabled !== next.nextYearButtonDisabled) return false;
   return true;
 };
 
@@ -281,6 +347,7 @@ const UnwrappedDatePicker = ({
   popperModifiers,
   headerProps,
   rdpRef,
+  showMonthYearPicker,
   ...rest
 }: ReactDatePickerProps & {
   onHeaderPropsUpdate: (props: CustomHeaderProps) => void;
@@ -305,7 +372,9 @@ const UnwrappedDatePicker = ({
       renderCustomHeader={generateCustomHeaderRenderer({
         monthsShown,
         setHeaderProps: onHeaderPropsUpdate,
+        showMonthYearPicker,
       })}
+      showMonthYearPicker={showMonthYearPicker}
       monthsShown={monthsShown}
       calendarContainer={getCalendarContainer({
         inline,

package/src/components/DatePicker/index.css

@@ -112,14 +112,6 @@
   @apply bg-gray-200;
 }
 
-.react-datepicker__day:focus {
-  @apply outline-none;
-}
-
-.react-datepicker__day:focus .ads-DatePicker-day-text {
-  @apply shadow-focus;
-}
-
 .react-datepicker__day--selected,
 .react-datepicker__day--range-start,
 .react-datepicker__day--range-end {
@@ -252,3 +244,55 @@
 .react-datepicker__month {
   @apply m-2;
 }
+
+.react-datepicker__month-container {
+  width: 288px;
+}
+
+.react-datepicker__monthPicker {
+  @apply flex
+    flex-col
+    gap-2;
+}
+
+.react-datepicker__month-wrapper {
+  @apply grid
+    gap-2;
+
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.react-datepicker__month .react-datepicker__month-text {
+  @apply flex
+    w-20
+    m-0;
+}
+
+.react-datepicker__month-text {
+  @apply items-center
+    justify-center
+    bg-gray-200
+    rounded
+    h-9
+    text-h5
+    text-gray-700
+    font-medium
+    leading-none
+    transition-colors;
+}
+
+.react-datepicker__month-text.react-datepicker__month--disabled {
+  @apply bg-opacity-50
+    text-gray-600;
+}
+
+.react-datepicker__month-text:hover,
+.react-datepicker__month-text:active,
+.react-datepicker__month-text.react-datepicker__month--selected,
+.react-datepicker__month-text.react-datepicker__month--selected:hover,
+.react-datepicker__month-text.react-datepicker__month--selected:active {
+  @apply bg-brandGreen-400/[.15]
+    border
+    border-brandGreen-400
+    text-gray-800;
+}

package/src/components/DateRangePicker/CustomDateRangeInput.tsx

@@ -26,38 +26,31 @@ export const CustomDateRangeInput = forwardRef<
   CustomDateRangeInputProps
 >(({ value, setValue, error, setError, ariaLabel, onFocus }, ref) => {
   return (
-    <Tooltip
-      placement="top"
-      className={cn({ e: "date-input-tooltip" })}
-      isVisible={!!error}
-      referenceElement={
-        <Box>
-          <Input
-            ref={ref}
-            aria-label={ariaLabel}
-            variant={error ? STATUS_VARIANT.WARNING : undefined}
-            placeholder={DATE_INPUT_PLACEHOLDER}
-            className={cn({ e: "date-input" })}
-            icon={ICON_TYPE.CALENDAR}
-            value={value}
-            onChange={(e) => setValue(e.currentTarget.value)}
-            onFocus={onFocus}
-            onBlur={() => {
-              const parsedDate = parseDate(value);
-              if (!parsedDate) {
-                if (value === "") return;
-                setValue("");
-                setError("Invalid Date");
-                return;
-              }
-              setError("");
-              setValue(format(parsedDate, DATE_FORMAT));
-            }}
-          />
-        </Box>
-      }
-    >
-      {error}
+    <Tooltip placement="top" content={error}>
+      <Box>
+        <Input
+          ref={ref}
+          aria-label={ariaLabel}
+          variant={error ? STATUS_VARIANT.WARNING : undefined}
+          placeholder={DATE_INPUT_PLACEHOLDER}
+          className={cn({ e: "date-input" })}
+          icon={ICON_TYPE.CALENDAR}
+          value={value}
+          onChange={(e) => setValue(e.currentTarget.value)}
+          onFocus={onFocus}
+          onBlur={() => {
+            const parsedDate = parseDate(value);
+            if (!parsedDate) {
+              if (value === "") return;
+              setValue("");
+              setError("Invalid Date");
+              return;
+            }
+            setError("");
+            setValue(format(parsedDate, DATE_FORMAT));
+          }}
+        />
+      </Box>
     </Tooltip>
   );
 });

package/src/components/DateRangePicker/index.css

@@ -34,19 +34,12 @@
     rounded-md
     p-2
     hover:bg-gray-100
-    focus:outline-none
-    focus:shadow-focus
     mb-1;
 }
 
 .ads-DateRangePicker-preset--isSelected {
   @apply bg-gray-200
-    hover:bg-gray-300
-    focus:bg-gray-200;
-}
-
-.ads-DateRangePicker-preset--isSelected:focus {
-  @apply hover:bg-gray-300;
+    hover:bg-gray-300;
 }
 
 .ads-DateRangePicker-custom-wrapper--leftAligned {
@@ -73,10 +66,6 @@
     h-8;
 }
 
-.ads-DateRangePicker-date-input-tooltip.ads-DateRangePicker-date-input-tooltip {
-  @apply z-toast;
-}
-
 .ads-DateRangePicker-custom-date-calendars-wrapper {
   @apply border-b;
 }

package/src/components/Divider/Divider.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import classNames from "classnames";
 import { ORIENTATION } from "../../types";
 import { Box, BoxProps } from "../Box";
+import { bemHOF } from "../../utilities";
+
+const cn = bemHOF("Divider");
 
 export interface DividerProps extends BoxProps {
   direction?: ORIENTATION;
@@ -9,53 +12,36 @@ export interface DividerProps extends BoxProps {
   thick?: boolean;
 }
 
-const defaultDividerProps = {
-  dashed: false,
-  direction: ORIENTATION.HORIZONTAL,
-  thick: false,
+type DirectionalDividerProps = {
+  className: string;
 };
 
-const HorizontalDivider = (props: DividerProps) => {
-  const { className, dashed, thick, ...rest } = props;
-  return (
-    <Box
-      as="hr"
-      className={classNames(
-        "border-gray-400",
-        dashed && "border-dashed",
-        thick && "border",
-        className,
-      )}
-      {...rest}
-    />
-  );
-};
+const HorizontalDivider = ({ className, ...rest }: DividerProps) => (
+  <Box as="hr" className={className} {...rest} />
+);
 
-const VerticalDivider = (props: DividerProps) => {
-  const { className, dashed, thick, ...rest } = props;
-  const dividerClasses = classNames([
-    "border-l",
-    "border-gray-400",
-    "w-auto",
-    dashed && "border-dashed",
-    thick && "border",
-    className,
-  ]);
-  return <Box className={dividerClasses} {...rest} />;
-};
+const VerticalDivider = ({ className, ...rest }: DirectionalDividerProps) => (
+  <Box className={className} {...rest} />
+);
 
-const Divider = (props: DividerProps) => {
+export const Divider = (props: DividerProps) => {
   const {
     direction = ORIENTATION.HORIZONTAL,
-    dashed = defaultDividerProps.dashed,
-    thick = defaultDividerProps.thick,
+    dashed = false,
+    thick = false,
+    className,
     ...rest
   } = props;
-  return direction === ORIENTATION.HORIZONTAL
-    ? HorizontalDivider({ dashed, thick, ...rest })
-    : VerticalDivider({ dashed, thick, ...rest });
-};
 
-Divider.defaultProps = defaultDividerProps;
+  const styles = classNames([
+    cn(),
+    direction === ORIENTATION.VERTICAL && cn({ m: "vertical" }),
+    dashed && cn({ m: "dashed" }),
+    thick && cn({ m: "thick" }),
+    className,
+  ]);
 
-export { Divider };
+  return direction === ORIENTATION.HORIZONTAL
+    ? HorizontalDivider({ className: styles, ...rest })
+    : VerticalDivider({ className: styles, ...rest });
+};

package/src/components/Divider/index.css

@@ -0,0 +1,16 @@
+.ads-Divider {
+  @apply border-gray-400;
+}
+
+.ads-Divider--dashed {
+  @apply border-dashed;
+}
+
+.ads-Divider--thick {
+  @apply border;
+}
+
+.ads-Divider--vertical {
+  @apply border-l
+    w-auto;
+}

package/src/components/Drawer/Drawer.story.mdx

@@ -6,11 +6,11 @@ import {
   Box,
   Button,
   BUTTON_VARIANT,
-  TopBar,
   Text,
   Heading,
   ICON_TYPE,
   Table,
+  Flex,
 } from "../..";
 
 <Meta title="Components/Layout/Drawer" component={Drawer} />
@@ -29,6 +29,12 @@ The `Drawer` and `WithDrawer` components can be used to pull content on and off
 
 When using in conjunction with a table, take note of how the table stretches and collapses. You may need to apply columns widths (or minimum widths) to prevent dramatic fluctuations in the width and height of the full table.
 
+export const FixedSlot = ({ children }) => (
+  <Flex className="bg-white items-center border-b h-12 w-full justify-between px-8">
+    {children}
+  </Flex>
+);
+
 <Preview>
   <Story name="Drawer">
     {() => {
@@ -42,9 +48,9 @@ When using in conjunction with a table, take note of how the table stretches and
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -53,24 +59,22 @@ When using in conjunction with a table, take note of how the table stretches and
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot={
-                  <Button
-                    icon={ICON_TYPE.FILTER}
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Filter Results
-                  </Button>
-                }
-                rightSlot="top content right"
-              />
+              <FixedSlot>
+                <Button
+                  icon={ICON_TYPE.FILTER}
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Filter Results
+                </Button>
+                <Box>top content right</Box>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Table stickyColumn>
@@ -153,9 +157,9 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -164,23 +168,21 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot="top left content"
-                rightSlot={
-                  <Button
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Toggle the Drawer
-                  </Button>
-                }
-              />
+              <FixedSlot>
+                <Box>top left content</Box>
+                <Button
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Toggle the Drawer
+                </Button>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Box className="p-20 w-screen bg-gray-200">
@@ -210,9 +212,9 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -221,23 +223,21 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot={
-                  <Button
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Toggle the Drawer
-                  </Button>
-                }
-                rightSlot="top right content"
-              />
+              <FixedSlot>
+                <Button
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Toggle the Drawer
+                </Button>
+                <Box>top right content</Box>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Box className="p-20 w-screen bg-gray-200">
@@ -268,9 +268,9 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               <Drawer
                 headingSlot={<Heading.H4>Drawer Heading</Heading.H4>}
                 footerSlot={
-                  <div className="w-full text-bodySm">
+                  <Flex className="w-full h-12 items-center text-bodySm">
                     This is the footer content
-                  </div>
+                  </Flex>
                 }
               >
                 <Text className="py-4 px-8 text-bodySm">
@@ -279,23 +279,21 @@ These are the custom props that extend [`BoxProps`](/?path=/docs/components-box-
               </Drawer>
             }
             fixedSlotTop={
-              <TopBar
-                leftSlot="top left content"
-                rightSlot={
-                  <Button
-                    variant={BUTTON_VARIANT.SECONDARY}
-                    onClick={() => setIsOpen(!isOpen)}
-                  >
-                    Toggle the Drawer
-                  </Button>
-                }
-              />
+              <FixedSlot>
+                <Box>top left content</Box>
+                <Button
+                  variant={BUTTON_VARIANT.SECONDARY}
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  Toggle the Drawer
+                </Button>
+              </FixedSlot>
             }
             fixedSlotBottom={
-              <TopBar
-                leftSlot="bottom content left"
-                rightSlot="bottom content right"
-              />
+              <FixedSlot>
+                <Box>bottom content left</Box>
+                <Box>bottom content right</Box>
+              </FixedSlot>
             }
             scrollableSlot={
               <Box className="p-20 w-screen bg-gray-200">