agroptima-design-system 0.9.1 → 0.9.3

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Alert.scss +69 -73
  3. package/src/atoms/Alert.tsx +17 -15
  4. package/src/settings/_depth.scss +1 -2
  5. package/src/stories/Changelog.stories.mdx +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "0.9.1",
3
+ "version": "0.9.3",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Alert.scss CHANGED
@@ -3,46 +3,52 @@
3
3
  @use '../settings/config';
4
4
  @use '../settings/depth';
5
5
 
6
- .alert-container {
7
- position: fixed;
8
- inset: config.$space-5x 0 0 0;
9
- z-index: depth.$z-alert;
6
+ .alert {
7
+ display: flex;
8
+ justify-content: space-between;
9
+ padding: config.$space-2x config.$space-3x;
10
+ align-items: center;
11
+ gap: config.$space-2x;
12
+ border-radius: config.$corner-radius-xxs;
10
13
 
11
- .alert {
12
- display: flex;
13
- justify-content: space-between;
14
+ &.fit-content {
14
15
  width: fit-content;
15
- margin: auto;
16
- padding: config.$space-2x config.$space-3x;
16
+ }
17
+
18
+ .information-container {
19
+ display: flex;
20
+ justify-content: flex-start;
17
21
  align-items: center;
18
22
  gap: config.$space-2x;
19
- border-radius: config.$corner-radius-xxs;
23
+ }
20
24
 
21
- .information-container {
22
- display: flex;
23
- justify-content: flex-start;
24
- align-items: center;
25
- gap: config.$space-2x;
26
- }
25
+ .text {
26
+ @include typography.body-regular-primary;
27
+ }
27
28
 
28
- .text {
29
- @include typography.body-regular-primary;
29
+ .icon {
30
+ width: config.$icon-size-5x;
31
+ height: config.$icon-size-5x;
32
+ > svg {
33
+ width: 100%;
34
+ height: 100%;
30
35
  }
36
+ }
31
37
 
38
+ .icon-button {
32
39
  .icon {
33
- width: config.$icon-size-5x;
34
- height: config.$icon-size-5x;
40
+ width: config.$icon-size-2x;
41
+ height: config.$icon-size-2x;
42
+
35
43
  > svg {
36
- width: 100%;
37
- height: 100%;
44
+ fill: color_alias.$neutral-color-400;
45
+ path {
46
+ fill: color_alias.$neutral-color-400;
47
+ }
38
48
  }
39
49
  }
40
-
41
- .icon-button {
50
+ &:hover {
42
51
  .icon {
43
- width: config.$icon-size-2x;
44
- height: config.$icon-size-2x;
45
-
46
52
  > svg {
47
53
  fill: color_alias.$neutral-color-400;
48
54
  path {
@@ -50,73 +56,63 @@
50
56
  }
51
57
  }
52
58
  }
53
- &:hover {
54
- .icon {
55
- > svg {
56
- fill: color_alias.$neutral-color-400;
57
- path {
58
- fill: color_alias.$neutral-color-400;
59
- }
60
- }
61
- }
62
- }
63
59
  }
60
+ }
64
61
 
65
- &.info {
66
- border: 1px solid color_alias.$info-color-600;
67
- background: color_alias.$info-color-50;
68
- .information-container {
69
- .icon {
70
- > svg {
62
+ &.info {
63
+ border: 1px solid color_alias.$info-color-600;
64
+ background: color_alias.$info-color-50;
65
+ .information-container {
66
+ .icon {
67
+ > svg {
68
+ fill: color_alias.$info-color-1000;
69
+ path {
71
70
  fill: color_alias.$info-color-1000;
72
- path {
73
- fill: color_alias.$info-color-1000;
74
- }
75
71
  }
76
72
  }
77
73
  }
78
74
  }
75
+ }
79
76
 
80
- &.success {
81
- border: 1px solid color_alias.$success-color-300;
82
- background: color_alias.$success-color-50;
83
- .information-container {
84
- .icon {
85
- > svg {
77
+ &.success {
78
+ border: 1px solid color_alias.$success-color-300;
79
+ background: color_alias.$success-color-50;
80
+ .information-container {
81
+ .icon {
82
+ > svg {
83
+ fill: color_alias.$success-color-1000;
84
+ path {
86
85
  fill: color_alias.$success-color-1000;
87
- path {
88
- fill: color_alias.$success-color-1000;
89
- }
90
86
  }
91
87
  }
92
88
  }
93
89
  }
90
+ }
94
91
 
95
- &.warning {
96
- border: 1px solid color_alias.$warning-color-300;
97
- background: color_alias.$warning-color-50;
98
- .information-container {
99
- .icon {
100
- > svg {
92
+ &.warning {
93
+ border: 1px solid color_alias.$warning-color-300;
94
+ background: color_alias.$warning-color-50;
95
+ .information-container {
96
+ .icon {
97
+ > svg {
98
+ fill: color_alias.$warning-color-1000;
99
+ path {
101
100
  fill: color_alias.$warning-color-1000;
102
- path {
103
- fill: color_alias.$warning-color-1000;
104
- }
105
101
  }
106
102
  }
107
103
  }
108
104
  }
105
+ }
109
106
 
110
- &.error {
111
- border: 1px solid color_alias.$error-color-600;
112
- background: color_alias.$error-color-50;
113
- .information-container {
114
- .icon {
115
- > svg {
107
+ &.error {
108
+ border: 1px solid color_alias.$error-color-600;
109
+ background: color_alias.$error-color-50;
110
+ .information-container {
111
+ .icon {
112
+ > svg {
113
+ fill: color_alias.$error-color-1000;
114
+ path {
116
115
  fill: color_alias.$error-color-1000;
117
- path {
118
- fill: color_alias.$error-color-1000;
119
- }
120
116
  }
121
117
  }
122
118
  }
package/src/atoms/Alert.tsx CHANGED
@@ -9,6 +9,7 @@ export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
9
9
  variant?: Variant
10
10
  text: string
11
11
  button?: IconButtonProps
12
+ fitContent?: boolean
12
13
  }
13
14
 
14
15
  export enum IconVariant {
@@ -21,28 +22,29 @@ export enum IconVariant {
21
22
  export function Alert({
22
23
  id,
23
24
  variant = 'success',
25
+ className = '',
26
+ fitContent = false,
24
27
  text,
25
28
  button,
26
29
  ...props
27
30
  }: AlertProps): React.JSX.Element {
28
- const cssClasses = ['alert', variant].join(' ')
31
+ const fitContentClass = fitContent ? 'fit-content' : ''
32
+ const cssClasses = ['alert', variant, className, fitContentClass].join(' ')
29
33
 
30
34
  return (
31
- <div className="alert-container">
32
- <div
33
- role="alert"
34
- aria-labelledby={`${id}-text`}
35
- className={cssClasses}
36
- {...props}
37
- >
38
- <div className="information-container">
39
- <Icon name={IconVariant[variant]} className={variant} />
40
- <span id={`${id}-text`} className="text">
41
- {text}
42
- </span>
43
- </div>
44
- {button && <IconButton {...button} variant="primary" />}
35
+ <div
36
+ role="alert"
37
+ aria-labelledby={`${id}-text`}
38
+ className={cssClasses}
39
+ {...props}
40
+ >
41
+ <div className="information-container">
42
+ <Icon name={IconVariant[variant]} className={variant} />
43
+ <span id={`${id}-text`} className="text">
44
+ {text}
45
+ </span>
45
46
  </div>
47
+ {button && <IconButton {...button} variant="primary" />}
46
48
  </div>
47
49
  )
48
50
  }
package/src/settings/_depth.scss CHANGED
@@ -6,5 +6,4 @@ $above: 1; // use this for all values above the base
6
6
  $below: -1; // and this for all values below the base
7
7
 
8
8
  $z-dropdown-options: $base + $above;
9
- $z-alert: $z-dropdown-options + $above;
10
- $z-modal: $z-alert + $above;
9
+ $z-modal: $z-dropdown-options + $above;
package/src/stories/Changelog.stories.mdx CHANGED
@@ -3,6 +3,14 @@ import { Meta } from "@storybook/addon-docs";
3
3
  <Meta title="Changelog" />
4
4
  # Changelog
5
5
 
6
+ ## 0.9.3
7
+
8
+ - Fix alert component width.
9
+
10
+ ## 0.9.2
11
+
12
+ - Alert component can be rendered with fit-content width or 100% depending on the container.
13
+
6
14
  ## 0.9.1
7
15
 
8
16
  - Modal and Alert components position fixed has been added.