agroptima-design-system 0.31.5 → 0.31.6

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/DatePicker/DatePicker.scss +25 -19
  3. package/src/atoms/DatePicker/DatePicker.tsx +11 -15
  4. package/src/stories/Changelog.mdx +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "0.31.5",
3
+ "version": "0.31.6",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/DatePicker/DatePicker.scss CHANGED
@@ -5,24 +5,30 @@
5
5
  @use '../../settings/breakpoints';
6
6
 
7
7
  // Interpolation applied: https://sass-lang.com/documentation/breaking-changes/css-vars/
8
+ .rdp-root {
9
+ width: 309px;
10
+ --rdp-accent-color: #{color_alias.$primary-color-600};
11
+ --rdp-accent-background-color: #{color_alias.$primary-color-50};
12
+ --rdp-range_middle-background-color: #{color_alias.$primary-color-50};
13
+ --rdp-range_start-date-background-color: #{color_alias.$primary-color-600};
14
+ --rdp-range_end-date-background-color: #{color_alias.$primary-color-600};
8
15
 
9
- .date-picker {
10
- .rdp-root {
11
- width: 309px;
12
- --rdp-accent-color: #{color_alias.$primary-color-600};
13
- }
14
- .rdp-caption_label {
15
- text-transform: capitalize;
16
- }
17
-
18
- .single {
19
- .rdp-selected .rdp-day_button {
20
- background-color: #{color_alias.$primary-color-600} !important;
21
- color: white !important;
22
- }
23
- }
24
-
25
- .range {
26
- --rdp-accent-background-color: #{color_alias.$primary-color-50};
27
- }
28
16
  }
17
+
18
+ .rdp-caption_label {
19
+ text-transform: capitalize;
20
+ }
21
+
22
+
23
+ .rdp-selected .rdp-day_button {
24
+ background-color: #{color_alias.$primary-color-600};
25
+ color: #{color_alias.$neutral-white};
26
+ }
27
+
28
+ .rdp-range_middle .rdp-day_button {
29
+ @include typography.body-regular-primary;
30
+ background-color: var(--rdp-range_middle-background-color);
31
+ }
32
+
33
+
34
+
package/src/atoms/DatePicker/DatePicker.tsx CHANGED
@@ -51,24 +51,20 @@ export function DatePicker(props: DatePickerProps): React.JSX.Element {
51
51
 
52
52
  if (type === 'single') {
53
53
  return (
54
- <div className={cssClasses}>
55
- <DateSinglePicker
56
- lng={lng}
57
- selected={selected}
58
- onSelect={onSelect}
59
- className="single"
60
- />
61
- </div>
62
- )
63
- }
64
- return (
65
- <div className={cssClasses}>
66
- <DateRangePicker
54
+ <DateSinglePicker
67
55
  lng={lng}
68
56
  selected={selected}
69
57
  onSelect={onSelect}
70
- className="range"
58
+ className={cssClasses}
71
59
  />
72
- </div>
60
+ )
61
+ }
62
+ return (
63
+ <DateRangePicker
64
+ lng={lng}
65
+ selected={selected}
66
+ onSelect={onSelect}
67
+ className={cssClasses}
68
+ />
73
69
  )
74
70
  }
package/src/stories/Changelog.mdx CHANGED
@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
4
4
 
5
5
  # Changelog
6
6
 
7
+ ## 0.31.6
8
+
9
+ * Refactor styles and fix range day selection
10
+
7
11
  ## 0.31.5
8
12
 
9
13
  * Card component has a hover effect when being a link, being clickable or not having any buttons.