agroptima-design-system 0.9.1 → 0.9.2

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/Alert.scss +71 -73
  3. package/src/atoms/Alert.tsx +17 -15
  4. package/src/stories/Changelog.stories.mdx +4 -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.2",
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,54 @@
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
+ width: 100%;
10
+ margin: auto;
11
+ padding: config.$space-2x config.$space-3x;
12
+ align-items: center;
13
+ gap: config.$space-2x;
14
+ border-radius: config.$corner-radius-xxs;
10
15
 
11
- .alert {
12
- display: flex;
13
- justify-content: space-between;
16
+ &.fit-content {
14
17
  width: fit-content;
15
- margin: auto;
16
- padding: config.$space-2x config.$space-3x;
18
+ }
19
+
20
+ .information-container {
21
+ display: flex;
22
+ justify-content: flex-start;
17
23
  align-items: center;
18
24
  gap: config.$space-2x;
19
- border-radius: config.$corner-radius-xxs;
25
+ }
20
26
 
21
- .information-container {
22
- display: flex;
23
- justify-content: flex-start;
24
- align-items: center;
25
- gap: config.$space-2x;
26
- }
27
+ .text {
28
+ @include typography.body-regular-primary;
29
+ }
27
30
 
28
- .text {
29
- @include typography.body-regular-primary;
31
+ .icon {
32
+ width: config.$icon-size-5x;
33
+ height: config.$icon-size-5x;
34
+ > svg {
35
+ width: 100%;
36
+ height: 100%;
30
37
  }
38
+ }
31
39
 
40
+ .icon-button {
32
41
  .icon {
33
- width: config.$icon-size-5x;
34
- height: config.$icon-size-5x;
42
+ width: config.$icon-size-2x;
43
+ height: config.$icon-size-2x;
44
+
35
45
  > svg {
36
- width: 100%;
37
- height: 100%;
46
+ fill: color_alias.$neutral-color-400;
47
+ path {
48
+ fill: color_alias.$neutral-color-400;
49
+ }
38
50
  }
39
51
  }
40
-
41
- .icon-button {
52
+ &:hover {
42
53
  .icon {
43
- width: config.$icon-size-2x;
44
- height: config.$icon-size-2x;
45
-
46
54
  > svg {
47
55
  fill: color_alias.$neutral-color-400;
48
56
  path {
@@ -50,73 +58,63 @@
50
58
  }
51
59
  }
52
60
  }
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
61
  }
62
+ }
64
63
 
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 {
64
+ &.info {
65
+ border: 1px solid color_alias.$info-color-600;
66
+ background: color_alias.$info-color-50;
67
+ .information-container {
68
+ .icon {
69
+ > svg {
70
+ fill: color_alias.$info-color-1000;
71
+ path {
71
72
  fill: color_alias.$info-color-1000;
72
- path {
73
- fill: color_alias.$info-color-1000;
74
- }
75
73
  }
76
74
  }
77
75
  }
78
76
  }
77
+ }
79
78
 
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 {
79
+ &.success {
80
+ border: 1px solid color_alias.$success-color-300;
81
+ background: color_alias.$success-color-50;
82
+ .information-container {
83
+ .icon {
84
+ > svg {
85
+ fill: color_alias.$success-color-1000;
86
+ path {
86
87
  fill: color_alias.$success-color-1000;
87
- path {
88
- fill: color_alias.$success-color-1000;
89
- }
90
88
  }
91
89
  }
92
90
  }
93
91
  }
92
+ }
94
93
 
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 {
94
+ &.warning {
95
+ border: 1px solid color_alias.$warning-color-300;
96
+ background: color_alias.$warning-color-50;
97
+ .information-container {
98
+ .icon {
99
+ > svg {
100
+ fill: color_alias.$warning-color-1000;
101
+ path {
101
102
  fill: color_alias.$warning-color-1000;
102
- path {
103
- fill: color_alias.$warning-color-1000;
104
- }
105
103
  }
106
104
  }
107
105
  }
108
106
  }
107
+ }
109
108
 
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 {
109
+ &.error {
110
+ border: 1px solid color_alias.$error-color-600;
111
+ background: color_alias.$error-color-50;
112
+ .information-container {
113
+ .icon {
114
+ > svg {
115
+ fill: color_alias.$error-color-1000;
116
+ path {
116
117
  fill: color_alias.$error-color-1000;
117
- path {
118
- fill: color_alias.$error-color-1000;
119
- }
120
118
  }
121
119
  }
122
120
  }
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/stories/Changelog.stories.mdx CHANGED
@@ -3,6 +3,10 @@ import { Meta } from "@storybook/addon-docs";
3
3
  <Meta title="Changelog" />
4
4
  # Changelog
5
5
 
6
+ ## 0.9.2
7
+
8
+ - Alert component can be rendered with fit-content width or 100% depending on the container.
9
+
6
10
  ## 0.9.1
7
11
 
8
12
  - Modal and Alert components position fixed has been added.