@codecademy/gamut 68.6.2 → 68.6.3-alpha.57e1cd.0

package/dist/DatePicker/DatePicker.js

@@ -103,7 +103,8 @@ export const DatePicker = props => {
       width: "fit-content",
       children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(DatePickerInput, {
-          name: "datePickerInputStart",
+          description: props.startDateDescription,
+          name: "datePickerInput",
           rangePart: "start",
           size: inputSize
         }), /*#__PURE__*/_jsx(Box, {
@@ -111,11 +112,13 @@ export const DatePicker = props => {
           mt: 32,
           children: isRtl ? /*#__PURE__*/_jsx(MiniArrowLeftIcon, {}) : /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
         }), /*#__PURE__*/_jsx(DatePickerInput, {
-          name: "datePickerInputEnd",
+          description: props.endDateDescription,
+          name: "datePickerInput",
           rangePart: "end",
           size: inputSize
         })]
       }) : /*#__PURE__*/_jsx(DatePickerInput, {
+        description: props.description,
         size: inputSize
       })
     }), /*#__PURE__*/_jsx(PopoverContainer, {

package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarBody.js

@@ -126,6 +126,7 @@ export const CalendarBody = ({
       children: /*#__PURE__*/_jsx("tr", {
         children: weekdayLabels.map((label, i) => /*#__PURE__*/_jsx(TableHeader, {
           abbr: weekdayFullNames[i],
+          "aria-label": weekdayFullNames[i],
           scope: "col",
           children: label
         }, label))

package/dist/DatePicker/DatePickerInput/index.d.ts

@@ -2,8 +2,12 @@ import type { InputWrapperProps } from '../../Form/inputs/Input';
 export type DatePickerInputProps = Omit<InputWrapperProps, 'className' | 'type' | 'icon' | 'value' | 'onChange' | 'color'> & {
     /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
     rangePart?: 'start' | 'end';
+    /** Description to display between the label and the input. */
+    description?: string;
 };
 export declare const DatePickerInput: import("react").ForwardRefExoticComponent<Omit<InputWrapperProps, "color" | "className" | "onChange" | "type" | "icon" | "value"> & {
     /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
     rangePart?: "start" | "end";
+    /** Description to display between the label and the input. */
+    description?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/DatePicker/DatePickerInput/index.js

@@ -1,6 +1,7 @@
 import { MiniCalendarIcon } from '@codecademy/gamut-icons';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { FlexBox } from '../../Box';
+import { IconButton } from '../../Button';
 import { FormGroup } from '../../Form/elements/FormGroup';
 import { isSameDay } from '../DatePickerCalendar/Calendar/utils/dateGrid';
 import { handleDateSelectRange } from '../DatePickerCalendar/utils/dateSelect';
@@ -19,6 +20,7 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
   name,
   rangePart,
   size = 'base',
+  description,
   ...rest
 }, ref) => {
   const context = useDatePicker();
@@ -144,7 +146,8 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
     focusCalendar();
   }, [isCalendarOpen, openCalendar, focusCalendar]);
   return /*#__PURE__*/_jsx(FormGroup, {
-    htmlFor: inputId,
+    description: description,
+    id: inputId,
     isSoloField: true,
     label: label ?? defaultLabel,
     mb: 0,
@@ -152,7 +155,7 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
     spacing: "tight",
     width: "fit-content",
     children: /*#__PURE__*/_jsxs(SegmentedShell, {
-      id: inputId,
+      "aria-labelledby": inputId,
       inputSize: size,
       ref: shellRef,
       role: "group",
@@ -199,16 +202,10 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
         tabIndex: -1,
         type: "hidden",
         value: hiddenValue
-      }), /*#__PURE__*/_jsx(FlexBox, {
-        alignItems: "center",
-        justifyContent: "center",
-        pl: 16,
-        pr: 8,
-        role: "presentation",
-        children: /*#__PURE__*/_jsx(MiniCalendarIcon, {
-          "aria-hidden": true,
-          size: 16
-        })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        icon: MiniCalendarIcon,
+        size: "small",
+        tip: "Open calendar"
       })]
     })
   });

package/dist/DatePicker/types.d.ts

@@ -92,6 +92,8 @@ export interface DatePickerSingleProps extends DatePickerBaseProps<'single'> {
      * ```
      */
     onSelected: (date: Date | null) => void;
+    /** Description to display between the label and the input. */
+    description?: string;
 }
 export interface DatePickerRangeProps extends DatePickerBaseProps<'range'> {
     /** Controlled start date. Pass `null` to not have a default start date. Pass a `Date` to have a default start date.
@@ -159,6 +161,10 @@ export interface DatePickerRangeProps extends DatePickerBaseProps<'range'> {
      * ```
      */
     onEndSelected: (date: Date | null) => void;
+    /** Description to display between the label and the start date input. */
+    startDateDescription?: string;
+    /** Description to display between the label and the end date input. */
+    endDateDescription?: string;
 }
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 export {};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "68.6.2",
+  "version": "68.6.3-alpha.57e1cd.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.5",
-    "@codecademy/gamut-illustrations": "0.58.11",
-    "@codecademy/gamut-patterns": "0.10.30",
-    "@codecademy/gamut-styles": "18.0.0",
-    "@codecademy/variance": "0.26.1",
+    "@codecademy/gamut-icons": "9.57.6-alpha.57e1cd.0",
+    "@codecademy/gamut-illustrations": "0.58.12-alpha.57e1cd.0",
+    "@codecademy/gamut-patterns": "0.10.31-alpha.57e1cd.0",
+    "@codecademy/gamut-styles": "18.0.1-alpha.57e1cd.0",
+    "@codecademy/variance": "0.26.2-alpha.57e1cd.0",
     "@formatjs/intl-locale": "5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",