feat: add month range picker (#560)

Author: Mukesh-FN

src/components/MonthPicker/MonthCalender/MonthButton.tsx

@@ -0,0 +1,81 @@
+import styled, { css } from 'styled-components';
+
+import { getSemanticValue } from '../../../utils/cssVariables';
+import { get } from '../../../utils/themeGet';
+
+interface MonthButtonProps {
+    isSelectedStartOrEnd: boolean;
+    disabled: boolean;
+    isInRange: boolean;
+}
+
+const getColor = ({ isSelectedStartOrEnd, isInRange, disabled }: MonthButtonProps) => {
+    if (isSelectedStartOrEnd) {
+        return css`
+            color: ${getSemanticValue('foreground-on-background-accent')};
+            background: ${getSemanticValue('background-element-accent-emphasized')};
+            box-shadow: 0 0 0 0.0625rem ${getSemanticValue('border-accent-default')};
+            z-index: 2;
+        `;
+    }
+
+    if (isInRange) {
+        return css`
+            color: ${getSemanticValue('foreground-accent-default')};
+            background: ${getSemanticValue('background-element-accent-faded')};
+            box-shadow: 0 0 0 0.0625rem ${getSemanticValue('border-accent-faded')};
+            z-index: 1;
+
+            &:hover {
+                cursor: pointer;
+                background: ${getSemanticValue('background-element-accent-default')};
+                color: ${getSemanticValue('foreground-accent-emphasized')};
+            }
+        `;
+    }
+
+    if (disabled) {
+        return css`
+            color: ${getSemanticValue('foreground-disabled')};
+            box-shadow: 0 0 0 0.0625rem ${getSemanticValue('border-disabled')};
+            background: ${getSemanticValue('transparent')};
+
+            &:hover {
+                cursor: not-allowed;
+            }
+        `;
+    }
+
+    return css`
+        color: ${getSemanticValue('foreground-primary')};
+        background: ${getSemanticValue('transparent')};
+
+        &:hover {
+            cursor: pointer;
+            background: ${getSemanticValue('background-element-accent-default')};
+            color: ${getSemanticValue('foreground-accent-emphasized')};
+        }
+    `;
+};
+
+const MonthButton = styled.button.attrs({ type: 'button' })<MonthButtonProps>`
+    font-family: ${get('fonts.normal')};
+    font-weight: ${get('fontWeights.normal')};
+    font-size: ${get('fontSizes.0')};
+    border: 0;
+    padding: 0.5rem;
+    box-shadow: 0 0 0 0.0625rem ${getSemanticValue('border-neutral-default')};
+    outline: none;
+
+    transition-property: background, box-shadow, color;
+    transition-duration: 200ms;
+    transition-timing-function: ease;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    ${getColor}
+`;
+
+export { MonthButton };

src/components/MonthPicker/MonthCalender/MonthCalender.tsx

@@ -0,0 +1,63 @@
+import React, { FC } from 'react';
+import { format } from 'date-fns';
+import styled from 'styled-components';
+import { Text } from '../../Text/Text';
+import { MonthButton } from './MonthButton';
+
+const MonthGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+`;
+
+const YearSection = styled.div`
+    flex: 1;
+`;
+
+export interface MonthCalendarProps {
+    year: number;
+    onClick: (monthIndex: number, year: number) => void;
+    onHover: (monthIndex: number, year: number) => void;
+    isMonthDisabled: (year: number, month: number) => boolean;
+    isInRange: (date: Date) => boolean;
+    isSelectedStartOrEnd: (date: Date) => boolean;
+    locale: Locale;
+}
+
+export const MonthCalendar: FC<MonthCalendarProps> = ({
+    year,
+    onClick,
+    onHover,
+    isMonthDisabled,
+    isSelectedStartOrEnd,
+    isInRange,
+    locale
+}) => (
+    <YearSection>
+        <Text as="p" fontWeight="bold" mb={2} textAlign="center">
+            {year}
+        </Text>
+        <MonthGrid>
+            {Array.from({ length: 12 }).map((_, index) => {
+                const date = new Date(year, index, 1);
+                const monthName = format(date, 'MMM', { locale });
+                const isDisabled = isMonthDisabled(year, index);
+
+                return (
+                    <MonthButton
+                        key={monthName}
+                        onClick={() => onClick(index, year)}
+                        onMouseEnter={() => onHover(index, year)}
+                        disabled={isDisabled}
+                        isInRange={isInRange(date)}
+                        isSelectedStartOrEnd={isSelectedStartOrEnd(date)}
+                        aria-label={`${monthName} ${year}`}
+                        aria-pressed={isSelectedStartOrEnd(date)}
+                    >
+                        {monthName}
+                    </MonthButton>
+                );
+            })}
+        </MonthGrid>
+    </YearSection>
+);

src/components/MonthPicker/MonthPickerContentElements.tsx

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+import { Elevation, MediaQueries } from '../../essentials';
+import { getSemanticValue } from '../../utils/cssVariables';
+
+const baseArrowStyles = css`
+    width: 1.25rem;
+    height: 1.25rem;
+    position: absolute;
+    background: inherit;
+`;
+
+export const Arrow = styled.div`
+    visibility: hidden;
+    ${baseArrowStyles};
+
+    &::before {
+        ${baseArrowStyles};
+        visibility: visible;
+        content: '';
+        transform: rotate(45deg);
+    }
+`;
+
+export const MonthPickerContentContainer = styled.div`
+    background: ${getSemanticValue('background-surface-neutral-default')};
+    box-shadow: 0 0 0.5rem 0.1875rem ${getSemanticValue('border-neutral-faded')};
+    z-index: ${Elevation.DATEPICKER};
+
+    &[data-popper-placement^='top'] > ${Arrow} {
+        bottom: -0.625rem;
+        &::before {
+            box-shadow: 0.25rem 0.25rem 0.5rem -0.125rem ${getSemanticValue('border-neutral-faded')};
+        }
+    }
+
+    &[data-popper-placement^='bottom'] > ${Arrow} {
+        top: -0.625rem;
+        &::before {
+            box-shadow: -0.25rem -0.25rem 0.5rem -0.125rem ${getSemanticValue('border-neutral-faded')};
+        }
+    }
+
+    ${MediaQueries.small} {
+        padding: 1.5rem;
+        margin-left: 0;
+    }
+`;