@bloom-housing/ui-components 5.1.1-alpha.20 → 5.1.1-alpha.21

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 (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +2 -2
  3. package/src/notifications/AlertBox.docs.mdx +41 -0
  4. package/src/notifications/AlertBox.scss +63 -41
  5. package/src/notifications/AlertBox.tsx +13 -9
  6. package/src/notifications/alertTypes.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.1.1-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.20...@bloom-housing/ui-components@5.1.1-alpha.21) (2022-08-31)
7
+
8
+ **Note:** Version bump only for package @bloom-housing/ui-components
9
+
10
+
11
+
12
+
13
+
6
14
  ## [5.1.1-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.19...@bloom-housing/ui-components@5.1.1-alpha.20) (2022-08-31)
7
15
 
8
16
  **Note:** Version bump only for package @bloom-housing/ui-components
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "5.1.1-alpha.20",
3
+ "version": "5.1.1-alpha.21",
4
4
  "author": "Sean Albert <sean.albert@exygy.com>",
5
5
  "description": "Shared user interface components for Bloom affordable housing system",
6
6
  "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -110,5 +110,5 @@
110
110
  "ts-jest": "^26.4.1",
111
111
  "typesafe-actions": "^5.1.0"
112
112
  },
113
- "gitHead": "09dcd3581cd17ad6b853876c32f2d83a1534ed8c"
113
+ "gitHead": "f8a82a28d1aeb9658dea57517bbb7de7a2c3405f"
114
114
  }
package/src/notifications/AlertBox.docs.mdx ADDED
@@ -0,0 +1,41 @@
1
+ import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
2
+ import { AlertBox } from "./AlertBox"
3
+
4
+ # Alert Box
5
+
6
+ The alert box component displays a themed notice with text.
7
+
8
+ <Canvas>
9
+ <Story id="notifications-alert-box" />
10
+ </Canvas>
11
+
12
+ ## Component Properties
13
+
14
+ <ArgsTable of={AlertBox} />
15
+
16
+ ## Theming Variables
17
+
18
+ <Canvas>
19
+ <Story id="notifications-alert-box--style-overrides" />
20
+ </Canvas>
21
+
22
+ You can apply CSS variables to the `.alert-box` selector to customize the appearance of the component.
23
+
24
+ | Name | Type | Description | Default |
25
+ | ----------------------------------- | ----------- | ------------------------------------- | ----------------------------- |
26
+ | `--vertical-padding` | Size | Vertical internal padding | `--bloom-s3` |
27
+ | `--horizontal-padding` | Size | Horizontal internal padding | `--bloom-s4` |
28
+ | `--background-color` | Color | Background color | `--bloom-color-primary-light` |
29
+ | `--alert-background-color` | Color | Alert theme background color | `--bloom-color-alert-light` |
30
+ | `--alert-invert-background-color` | Color | Alert invert theme background color | `--bloom-color-alert` |
31
+ | `--notice-background-color` | Color | Notice theme background color | `--bloom-color-primary-light` |
32
+ | `--notice-invert-background-color` | Color | Notice invert theme background color | `--bloom-color-primary` |
33
+ | `--success-background-color` | Color | Success theme background color | `--bloom-color-success-light` |
34
+ | `--success-invert-background-color` | Color | Success invert theme background color | `--bloom-color-success` |
35
+ | `--warn-background-color` | Color | Warn theme background color | `--bloom-color-warn-light` |
36
+ | `--warn-invert-background-color` | Color | Warn invert theme background color | `--bloom-color-warn` |
37
+ | `--text-color` | Color | Content text color | `--bloom-color-gray-900` |
38
+ | `--close-icon-color` | Color | Close icon color | `--bloom-color-gray-900` |
39
+ | `--font-weight` | Font weight | Content text font weight | `600` |
40
+ | `--max-width` | Size | Max width | `--bloom-width-5xl` |
41
+ | `--line-height` | Line height | Content text line height | `1.375` |
package/src/notifications/AlertBox.scss CHANGED
@@ -1,86 +1,108 @@
1
1
  .alert-box {
2
- @apply relative;
3
- @apply py-3;
4
- @apply px-4;
5
- @apply leading-snug;
6
- @apply flex;
7
- @apply items-center;
2
+ --vertical-padding: var(--bloom-s3);
3
+ --horizontal-padding: var(--bloom-s4);
4
+ --background-color: var(--bloom-color-primary-light);
5
+ --alert-background-color: var(--bloom-color-alert-light);
6
+ --alert-invert-background-color: var(--bloom-color-alert);
7
+ --notice-background-color: var(--bloom-color-primary-light);
8
+ --notice-invert-background-color: var(--bloom-color-primary);
9
+ --success-background-color: var(--bloom-color-success-light);
10
+ --success-invert-background-color: var(--bloom-color-success);
11
+ --warn-background-color: var(--bloom-color-warn-light);
12
+ --warn-invert-background-color: var(--bloom-color-warn);
13
+ --text-color: var(--bloom-color-gray-900);
14
+ --close-icon-color: var(--bloom-color-gray-900);
15
+ --font-weight: 600;
16
+ --max-width: var(--bloom-width-5xl);
17
+ --line-height: 1.375;
18
+
19
+ padding: var(--vertical-padding) var(--horizontal-padding);
20
+ background-color: var(--background-color);
21
+ color: var(--text-color);
22
+ font-weight: var(--font-weight);
23
+ position: relative;
24
+ display: flex;
25
+ align-items: center;
26
+ line-height: var(--line-height);
8
27
 
9
28
  .alert-box_inner {
10
- @apply m-auto;
11
- @apply max-w-5xl;
12
- @apply px-4;
13
- @apply flex-1;
14
- @apply flex;
15
- @apply items-center;
29
+ margin: auto;
30
+ max-width: var(--max-width);
31
+ padding-right: var(--horizontal-padding);
32
+ padding-left: var(--horizontal-padding);
33
+ flex: 1;
34
+ display: flex;
35
+ align-items: center;
16
36
  }
17
37
 
18
38
  &.narrow {
19
- padding-top: 0.35rem;
20
- padding-bottom: 0.35rem;
39
+ padding-top: var(--bloom-s1_5);
40
+ padding-bottom: var(--bloom-s1_5);
21
41
  }
22
42
 
23
- // Inverts color scheme of alert
24
43
  &.invert {
25
- @apply text-white;
26
-
27
- .close {
28
- @apply text-white;
44
+ color: var(--bloom-color-white);
45
+ a {
46
+ color: var(--bloom-color-white);
47
+ text-decoration: underline;
29
48
  }
30
49
  }
31
50
 
32
51
  &.alert {
33
- @apply bg-alert-light;
52
+ background-color: var(--alert-background-color);
34
53
 
35
54
  &.invert {
36
- @apply bg-alert;
55
+ background-color: var(--alert-invert-background-color);
37
56
  }
38
57
  }
39
58
 
40
59
  &.primary {
41
- @apply bg-primary-light;
60
+ background-color: var(--notice-background-color);
42
61
 
43
62
  &.invert {
44
- @apply bg-primary;
63
+ background-color: var(--notice-invert-background-color);
45
64
  }
46
65
  }
47
66
 
48
67
  &.success {
49
- @apply bg-success-light;
68
+ background-color: var(--success-background-color);
50
69
 
51
70
  &.invert {
52
- @apply bg-success;
71
+ background-color: var(--success-invert-background-color);
53
72
  }
54
73
  }
55
74
 
56
75
  &.warn {
57
- @apply bg-warn-light;
58
-
59
- &.invert {
60
- @apply bg-warn;
61
- }
76
+ background-color: var(--warn-background-color);
62
77
  }
63
78
  }
64
79
 
65
80
  .alert-box__head {
66
- @apply flex justify-between;
67
- @apply w-full;
81
+ display: flex;
82
+ justify-content: space-between;
83
+ width: 100%;
68
84
  }
69
85
 
70
86
  .alert-box__title {
71
- @apply flex justify-between;
87
+ display: flex;
88
+ justify-content: space-between;
89
+ align-items: center;
72
90
  }
73
91
 
74
92
  .alert-box__body {
75
- @apply ml-2;
76
- @apply font-semibold;
77
- @apply text-tiny;
93
+ font-weight: var(--font-weight);
94
+ font-size: var(--bloom-font-size-tiny);
78
95
  }
79
96
 
80
97
  .alert-box__close {
81
- @apply text-3xl;
82
- right: 1rem;
83
- @apply ml-3;
84
- @apply p-0;
85
- line-height: 1rem;
98
+ font-size: var(--bloom-font-size-3xl);
99
+ right: var(--horizontal-padding);
100
+ margin-left: var(--blom-s3);
101
+ padding: 0;
102
+ line-height: var(--bloom-s4);
103
+ color: var(--close-icon-color);
104
+ }
105
+
106
+ .alert-box__icon {
107
+ margin-right: var(--bloom-s3);
86
108
  }
package/src/notifications/AlertBox.tsx CHANGED
@@ -7,6 +7,7 @@ import "./AlertBox.scss"
7
7
 
8
8
  export interface AlertBoxProps {
9
9
  type?: AlertTypes
10
+ customIcon?: IconTypes
10
11
  closeable?: boolean
11
12
  onClose?: () => void
12
13
  children: ReactNode
@@ -20,6 +21,7 @@ const icons: { [k in AlertTypes]: IconTypes } = {
20
21
  alert: "warning",
21
22
  notice: "info",
22
23
  success: "check",
24
+ warn: "warning",
23
25
  }
24
26
 
25
27
  const AlertBox = (props: AlertBoxProps) => {
@@ -28,7 +30,7 @@ const AlertBox = (props: AlertBoxProps) => {
28
30
 
29
31
  const classNames = [
30
32
  "alert-box",
31
- colorClasses[props.type || "alert"],
33
+ colorClasses[props.type || ""],
32
34
  ...(props.inverted ? ["invert"] : []),
33
35
  ...(props.className ? [props.className] : []),
34
36
  ...(props.boundToLayoutWidth ? [] : ["fullWidth"]),
@@ -47,14 +49,16 @@ const AlertBox = (props: AlertBoxProps) => {
47
49
  <>
48
50
  <div className="alert-box__head">
49
51
  <div className="alert-box__title">
50
- <span className="alert-box__icon">
51
- <Icon
52
- size="medium"
53
- symbol={icons[props.type || "alert"]}
54
- fill={props.inverted ? IconFillColors.white : undefined}
55
- ariaHidden={true}
56
- />
57
- </span>
52
+ {(props.type || props.customIcon) && (
53
+ <span className="alert-box__icon">
54
+ <Icon
55
+ size="medium"
56
+ symbol={props.type ? icons[props.type] : props.customIcon ?? "warning"}
57
+ fill={props.inverted ? IconFillColors.white : undefined}
58
+ ariaHidden={true}
59
+ />
60
+ </span>
61
+ )}
58
62
  <span className="alert-box__body">
59
63
  {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
60
64
  </span>
package/src/notifications/alertTypes.ts CHANGED
@@ -2,6 +2,7 @@ export const colorClasses = {
2
2
  alert: "alert",
3
3
  notice: "primary",
4
4
  success: "success",
5
+ warn: "warn",
5
6
  }
6
7
 
7
8
  export type AlertTypes = keyof typeof colorClasses