w-design-system 0.0.49 → 0.0.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "w-design-system",
3
- "version": "0.0.49",
3
+ "version": "0.0.51",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "dependencies": {
@@ -163,7 +163,7 @@ export const DateRangePicker = <T extends GetElementType<SelectProps['options']>
163
163
  let isBlocked = false
164
164
  if (rangeDayLimit !== undefined && startCustomDate && endCustomDate === null) {
165
165
  const diff = differenceInDays(startCustomDate, day)
166
- isBlocked = diff > rangeDayLimit
166
+ isBlocked = diff > rangeDayLimit - 1
167
167
  }
168
168
  days.push({
169
169
  type: 'day',
@@ -252,6 +252,7 @@ export const DateRangePicker = <T extends GetElementType<SelectProps['options']>
252
252
  isLastSelected={day.isLastSelected}
253
253
  selected={day.selected}
254
254
  today={day.today}
255
+ isBlocked={day.isBlocked}
255
256
  />
256
257
  <CalendarDayValue>{day.value}</CalendarDayValue>
257
258
  </CalendarDay>
@@ -80,6 +80,7 @@ export interface CalendarDaySelectedBackgroundProps {
80
80
  isFirstSelected: boolean
81
81
  isLastSelected: boolean
82
82
  selected: boolean
83
+ isBlocked: boolean
83
84
  }
84
85
  export const CalendarDaySelectedBackground = styled.div<CalendarDaySelectedBackgroundProps>`
85
86
  position: absolute;
@@ -103,14 +104,14 @@ export const CalendarDaySelectedBackground = styled.div<CalendarDaySelectedBackg
103
104
  if (selected) return '0'
104
105
  return '50%'
105
106
  }};
106
- background-color: ${theme.colors.cyan30opacity16};
107
+ background-color: ${({ isBlocked }) => (isBlocked ? 'transparant' : theme.colors.cyan30opacity16)};
107
108
  }
108
109
 
109
110
  &::before {
110
111
  content: '';
111
112
  border-radius: 50%;
112
- background-color: ${({ isFirstSelected, isLastSelected }) =>
113
- isFirstSelected || isLastSelected ? theme.colors.cyan40 : 'transparent'};
113
+ background-color: ${({ isFirstSelected, isLastSelected, isBlocked }) =>
114
+ (isFirstSelected || isLastSelected) && !isBlocked ? theme.colors.cyan40 : 'transparent'};
114
115
  position: absolute;
115
116
  inset: 0;
116
117
  }
@@ -124,7 +125,6 @@ export const CalendarDayValue = styled.div`
124
125
  pointer-events: none;
125
126
  `
126
127
 
127
-
128
128
  export const Footer = styled.div`
129
129
  display: flex;
130
130
  justify-content: space-between;
@@ -133,4 +133,4 @@ export const Footer = styled.div`
133
133
  font-size: ${theme.paragraph.small};
134
134
  color: ${theme.colors.shade50};
135
135
  font-family: 'Nunito Sans', sans-serif;
136
- `
136
+ `