feat: highlight current date (today) in Calendar

nexxtway · Nov 27, 2020 · 233195c · 233195c
1 parent 055fdc6
commit 233195c
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 1 deletion.
diff --git a/src/components/Calendar/day.js b/src/components/Calendar/day.js
@@ -35,6 +35,7 @@ function DayComponent(props) {
     const buttonRef = useRef();
     const isRangeStartDate = useRangeStartDate(date, currentRange);
     const isRangeEndDate = useRangeEndDate(date, currentRange);
+    const isToday = isSameDay(date, new Date());
 
     useEffect(() => {
         if (useAutoFocus && buttonRef.current && tabIndex !== -1) {
@@ -58,6 +59,7 @@ function DayComponent(props) {
                 isLastInRange={isRangeEndDate}
                 isFirstDayOfWeek={isFirstDayOfWeek}
                 isLastDayOfWeek={isLastDayOfWeek}
+                isToday={isToday}
             >
                 <StyledDayButton
                     ref={buttonRef}
@@ -71,6 +73,7 @@ function DayComponent(props) {
                     onFocus={privateOnFocus}
                     onBlur={privateOnBlur}
                     isWithinRange={isWithinRange}
+                    isToday={isToday}
                 >
                     {day}
                 </StyledDayButton>

diff --git a/src/components/Calendar/readme.md b/src/components/Calendar/readme.md
@@ -154,3 +154,28 @@ const calendarContainerStyles = {
         </div>
     </div>
 ```
+
+##### Today
+
+```js
+import React from 'react';
+import { Card, Calendar } from 'react-rainbow-components';
+
+const initialState = { date: new Date() };
+const calendarContainerStyles = {
+    width: '28rem',
+    height: '27rem',
+};
+
+    <div>
+        <div className="rainbow-align-content_center rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
+            <Card style={calendarContainerStyles} className="rainbow-p-around_large">
+                <Calendar
+                    id="calendar-11"
+                    value={state.date}
+                    onChange={value => setState({ date: value })}
+                />
+            </Card>
+        </div>
+    </div>
+```
diff --git a/src/components/Calendar/styled/dayButton.js b/src/components/Calendar/styled/dayButton.js
@@ -18,7 +18,8 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
     text-transform: none;
     appearance: button;
     border: 1px solid transparent;
-
+    position: relative;
+    
     ${props =>
         !props.isHovered &&
         `
@@ -40,6 +41,41 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
         line-height: 36px;
     }
 
+    ${props =>
+        props.isToday &&
+        `
+        &::after {
+            content: '';
+            height: 3px;
+            width: 3px;
+            position: absolute;
+            top: 28px;
+            left: 17px;
+            border-radius: 50%;
+            background: ${
+                props.isSelected || props.isHovered
+                    ? props.palette.getContrastText(props.palette.brand.main)
+                    : props.palette.brand.main
+            };
+        }
+
+        
+    `}
+
+    ${props =>
+        props.isSelected &&
+        props.isToday &&
+        `
+            &:hover,
+            &:focus,
+            &:active {
+                &::after {
+                    top: 27px;
+                    left: 16px;
+                }
+            }
+        `};
+
     ${props =>
         props.isSelected &&
         `

diff --git a/src/components/Calendar/styled/rangeHighlight.js b/src/components/Calendar/styled/rangeHighlight.js
@@ -20,6 +20,12 @@ const StyledRangeHighlight = attachThemeAttrs(styled.div).attrs(props => {
         margin: 3px auto;
     }
 
+    ${props =>
+        props.isToday &&
+        `
+        color: ${props.palette.brand.main};
+    `}
+
     ${props =>
         props.isVisible &&
         `