Merge pull request #2483 from NDLANO/refactor/date-picker

refacyor: use primitives for date picker
NDLANO · Oct 8, 2024 · 1232eb7 · 1232eb7
2 parents a9fbcb0 + d5f7513
commit 1232eb7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 66 deletions.
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
@@ -11,24 +11,16 @@ import { TFunction } from "i18next";
 import { ReactNode, useCallback, useMemo, useState } from "react";
 import { DayPicker, Dropdown, Labels, DropdownProps, CustomComponents, useNavigation } from "react-day-picker";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { Arrow, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
-import { ButtonV2 } from "@ndla/button";
-import { colors, misc, stackOrder } from "@ndla/core";
+import { Portal } from "@ark-ui/react";
+import { Button, PopoverArrow, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props {
   children: ReactNode;
   value?: Date;
   onChange: (value?: Date) => void;
 }
 
-const StyledContent = styled(Content)`
-  background-color: ${colors.white};
-  z-index: ${stackOrder.popover + stackOrder.modal};
-  border: 1px solid ${colors.black};
-  border-radius: ${misc.borderRadius};
-`;
-
 const getDatePickerTranslations = (t: TFunction): Partial<Labels> => {
   return {
     labelMonthDropdown: () => t("datePicker.chooseMonth"),
@@ -38,11 +30,13 @@ const getDatePickerTranslations = (t: TFunction): Partial<Labels> => {
   };
 };
 
-const StyledInput = styled.input`
-  border-radius: ${misc.borderRadius};
-  min-width: 80px;
-  flex: 0;
-`;
+const StyledInput = styled("input", {
+  base: {
+    borderRadius: "xsmall",
+    minWidth: "4xlarge",
+    flex: "0",
+  },
+});
 
 const MIN_YEAR = 1900;
 const MAX_YEAR = 3000;
@@ -52,9 +46,9 @@ const DatePickerFooter = () => {
   const { goToDate } = useNavigation();
 
   return (
-    <ButtonV2 variant="outline" onClick={() => goToDate(new Date())}>
+    <Button variant="secondary" onClick={() => goToDate(new Date())}>
       {t("datePicker.goToToday")}
-    </ButtonV2>
+    </Button>
   );
 };
 
@@ -92,11 +86,11 @@ const DatePicker = ({ children, value, onChange }: Props) => {
   );
 
   return (
-    <Root open={open} onOpenChange={setOpen}>
-      <Trigger asChild>{children}</Trigger>
+    <PopoverRoot open={open} onOpenChange={(details) => setOpen(details.open)}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
       <Portal>
-        <StyledContent>
-          <Arrow />
+        <PopoverContent>
+          <PopoverArrow />
           <DayPicker
             components={components}
             mode="single"
@@ -112,9 +106,9 @@ const DatePicker = ({ children, value, onChange }: Props) => {
             labels={translations}
             footer={<DatePickerFooter />}
           />
-        </StyledContent>
+        </PopoverContent>
       </Portal>
-    </Root>
+    </PopoverRoot>
   );
 };
 

diff --git a/src/components/LastUpdatedLine/DateEdit.tsx b/src/components/LastUpdatedLine/DateEdit.tsx
@@ -6,8 +6,8 @@
  *
  */
 
-import { ButtonV2 } from "@ndla/button";
 import { Pencil } from "@ndla/icons/action";
+import { Button } from "@ndla/primitives";
 import formatDate, { formatDateForBackend } from "../../util/formatDate";
 import DatePicker from "../DatePicker";
 
@@ -18,9 +18,9 @@ interface Props {
 
 const DateEdit = ({ published, onChange }: Props) => (
   <DatePicker value={new Date(published)} onChange={(date) => (date ? onChange(formatDateForBackend(date)) : {})}>
-    <ButtonV2 variant="link" data-testid="last-edited">
+    <Button variant="link" data-testid="last-edited">
       {formatDate(published)} <Pencil />
-    </ButtonV2>
+    </Button>
   </DatePicker>
 );
 

diff --git a/src/containers/FormikForm/components/InlineDatePicker.tsx b/src/containers/FormikForm/components/InlineDatePicker.tsx
@@ -7,10 +7,8 @@
  */
 import { format } from "date-fns";
 import { useCallback, useMemo } from "react";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { colors, misc, spacing } from "@ndla/core";
 import { Calendar } from "@ndla/icons/editor";
+import { Button } from "@ndla/primitives";
 import DatePicker from "../../../components/DatePicker";
 import { formatDateForBackend } from "../../../util/formatDate";
 
@@ -35,40 +33,6 @@ interface Props {
   title?: string;
 }
 
-const StyledButton = styled(ButtonV2)`
-  width: 100%;
-  height: 100%;
-  justify-content: space-between;
-  border-radius: ${misc.borderRadius};
-  border: 1px solid ${colors.brand.greyLighter};
-  color: ${colors.brand.greyMedium};
-  padding-left: ${spacing.nsmall};
-  padding-right: ${spacing.xsmall};
-  svg {
-    color: ${colors.brand.tertiary};
-    width: 24px;
-    height: 24px;
-  }
-
-  &[data-has-value="true"] {
-    color: ${colors.text.primary};
-  }
-
-  &:hover,
-  &:focus,
-  &:focus-within,
-  &:active,
-  &:focus-visible {
-    border: 1px solid ${colors.brand.greyLighter};
-    padding-left: ${spacing.nsmall};
-    padding-right: ${spacing.xsmall};
-    color: ${colors.brand.greyMedium};
-    &[data-has-value="true"] {
-      color: ${colors.text.primary};
-    }
-  }
-`;
-
 const InlineDatePicker = ({ onChange, value, name, placeholder, title }: Props) => {
   const dateValue = useMemo(() => (value ? new Date(value) : undefined), [value]);
   const displayValue = useMemo(() => (dateValue ? format(dateValue, "dd/MM/yyyy") : undefined), [dateValue]);
@@ -90,10 +54,10 @@ const InlineDatePicker = ({ onChange, value, name, placeholder, title }: Props)
 
   return (
     <DatePicker onChange={onValueChange} value={dateValue}>
-      <StyledButton variant="stripped" data-has-value={!!displayValue} title={title}>
+      <Button variant="secondary" title={title}>
         {displayValue ?? placeholder}
         <Calendar />
-      </StyledButton>
+      </Button>
     </DatePicker>
   );
 };