@granto-umbrella/umbrella-components 2.3.3 → 2.3.4

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/atoms/DatePickerInput/DatePicker.styles.ts +22 -1
  3. package/src/components/atoms/DatePickerInput/DatePickerInput.tsx +17 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@granto-umbrella/umbrella-components",
3
- "version": "2.3.3",
3
+ "version": "2.3.4",
4
4
  "description": "Umbrella Components for React",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
package/src/components/atoms/DatePickerInput/DatePicker.styles.ts CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  semanticRadius,
11
11
  typographyTokens,
12
12
  semanticSizes,
13
+ primitiveSizes,
13
14
  } from "../../../styles/tokens";
14
15
 
15
16
  // register Portuguese‐Brazil locale
@@ -65,7 +66,7 @@ export const StyledDatePicker = styled(
65
66
  border: 1px solid ${semanticColors.neutral[300]};
66
67
  border-radius: ${semanticRadius.global.radius.md};
67
68
  font-size: ${typographyTokens.fontSizes.bodyM};
68
- color: ${semanticColors.base.text};
69
+ color: ${semanticColors.global.text.onSurface.enabled};
69
70
 
70
71
  &:focus {
71
72
  outline: none;
@@ -73,3 +74,23 @@ export const StyledDatePicker = styled(
73
74
  box-shadow: 0 0 0 2px ${semanticColors.branding.surface.enabled}33;
74
75
  }
75
76
  `;
77
+
78
+ export const Label = styled.label`
79
+ font-size: ${typographyTokens.fontSizes.labelS};
80
+ color: ${semanticColors.global.text.subtitle.enabled};
81
+ font-weight: ${typographyTokens.fontWeights.medium};
82
+ `;
83
+
84
+ export const SupportText = styled.span<{ $error?: boolean }>`
85
+ font-size: ${typographyTokens.fontSizes.captionM};
86
+ color: ${({ $error }) =>
87
+ $error
88
+ ? semanticColors.danger.text.enabled
89
+ : semanticColors.global.text.subtitle.enabled};
90
+ `;
91
+
92
+ export const Container = styled.div`
93
+ display: flex;
94
+ flex-direction: column;
95
+ gap: ${primitiveSizes.size.x1};
96
+ `;
package/src/components/atoms/DatePickerInput/DatePickerInput.tsx CHANGED
@@ -1,6 +1,12 @@
1
1
  /* eslint-disable @typescript-eslint/no-explicit-any */
2
2
  import React from "react";
3
- import { DatePickerGlobalStyles, StyledDatePicker } from "./DatePicker.styles";
3
+ import {
4
+ Container,
5
+ DatePickerGlobalStyles,
6
+ Label,
7
+ StyledDatePicker,
8
+ SupportText,
9
+ } from "./DatePicker.styles";
4
10
 
5
11
  import "react-datepicker/dist/react-datepicker.css";
6
12
 
@@ -12,6 +18,9 @@ interface DatePickerInputProps {
12
18
  maxDate?: Date;
13
19
  placeholder?: string;
14
20
  [key: string]: any;
21
+ label?: string;
22
+ supportText?: string;
23
+ error?: boolean;
15
24
  }
16
25
 
17
26
  export const DatePickerInput: React.FC<DatePickerInputProps> = ({
@@ -21,10 +30,13 @@ export const DatePickerInput: React.FC<DatePickerInputProps> = ({
21
30
  minDate,
22
31
  maxDate,
23
32
  placeholder,
33
+ label,
34
+ supportText,
35
+ error,
24
36
  ...rest
25
37
  }) => (
26
- <>
27
- {/* inject our calendar overrides */}
38
+ <Container>
39
+ {label && <Label>{label}</Label>}
28
40
  <DatePickerGlobalStyles />
29
41
 
30
42
  {mode === "range" ? (
@@ -53,5 +65,6 @@ export const DatePickerInput: React.FC<DatePickerInputProps> = ({
53
65
  {...rest}
54
66
  />
55
67
  )}
56
- </>
68
+ {supportText && <SupportText $error={error}>{supportText}</SupportText>}
69
+ </Container>
57
70
  );