@bloom-housing/ui-components 7.0.4 → 7.0.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 (11) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/package.json +2 -2
  3. package/src/blocks/InfoCard.docs.mdx +34 -0
  4. package/src/blocks/InfoCard.scss +31 -34
  5. package/src/lists/PreferencesList.docs.mdx +36 -0
  6. package/src/lists/PreferencesList.scss +44 -27
  7. package/src/locales/es.json +0 -1
  8. package/src/locales/general.json +1 -1
  9. package/src/locales/tl.json +0 -1
  10. package/src/locales/vi.json +0 -1
  11. package/src/locales/zh.json +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
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
+ ## [7.0.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.5...@bloom-housing/ui-components@7.0.6) (2022-12-06)
7
+
8
+ **Note:** Version bump only for package @bloom-housing/ui-components
9
+
10
+
11
+
12
+
13
+
14
+ ## [7.0.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.4...@bloom-housing/ui-components@7.0.5) (2022-12-05)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **infocard preferenceslist:** fix spacing in scss files; fix typo in doc ([f067c61](https://github.com/bloom-housing/bloom/commit/f067c611926acfce8c3702ce705cbc2840cc379e))
20
+ * **infocard:** add default text size ([00af02e](https://github.com/bloom-housing/bloom/commit/00af02e4abde2bb310f1dfb900bd920d4f0594e7))
21
+ * **infocard:** add lighter vars ([2089a69](https://github.com/bloom-housing/bloom/commit/2089a691f0ef67dacbeac9eb731ba93bea1c2261))
22
+ * **infocard:** fix typo ([9a73783](https://github.com/bloom-housing/bloom/commit/9a7378331046e1cb5a165e72ab05addd80e1f75c))
23
+ * **infocard:** fix var usage ([6e0f58a](https://github.com/bloom-housing/bloom/commit/6e0f58affa2de7dd54236a5bd23a7780d21d0cee))
24
+ * **preferenceslist:** fix mixnamed css vars; add bg ([a934b09](https://github.com/bloom-housing/bloom/commit/a934b09529f01def49e5b6396fcd5fa309c7df06))
25
+ * **preferenceslist:** remove uneeded vars ([f21e29f](https://github.com/bloom-housing/bloom/commit/f21e29f7efc5d94576aef8d255b89068c9957bf5))
26
+ * **preferenceslist:** remove unused css var ([fec242c](https://github.com/bloom-housing/bloom/commit/fec242c4fcb5c1485b5dfb12255ac2d30160be62))
27
+ * **preferenceslist:** remove unused css var ([9e8f365](https://github.com/bloom-housing/bloom/commit/9e8f365403c0a6ea441be294eaee9a2b620c55f7))
28
+
29
+
30
+
31
+
32
+
6
33
  ## [7.0.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.3...@bloom-housing/ui-components@7.0.4) (2022-11-29)
7
34
 
8
35
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "7.0.4",
3
+ "version": "7.0.6",
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",
@@ -112,5 +112,5 @@
112
112
  "ts-jest": "^26.4.1",
113
113
  "typesafe-actions": "^5.1.0"
114
114
  },
115
- "gitHead": "14e6911a111afbaf90fae15c0dafd172a5b7d7c9"
115
+ "gitHead": "0694672c2e809e8e3f8e6034e67aba0dd55327c8"
116
116
  }
package/src/blocks/InfoCard.docs.mdx ADDED
@@ -0,0 +1,34 @@
1
+ import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
2
+ import { Swatch } from "../prototypes/Swatch"
3
+ import { InfoCard } from "./InfoCard"
4
+
5
+ # Info Card
6
+
7
+ The Info Card component renders a box with a title, which can optionally be a hyperlink. Beneath the title is an optional subtitle. Beneath the subtitle can be a string, a component, or markdown.
8
+
9
+ <Canvas>
10
+ <Story id="blocks-info-card" />
11
+ </Canvas>
12
+
13
+ <br />
14
+ <br />
15
+
16
+ ## Component Properties
17
+
18
+ <ArgsTable of={InfoCard} />
19
+
20
+ ## Theming Variables
21
+
22
+ You can apply CSS variables to the `.info-card` selector to customize the appearance of the component.
23
+
24
+ | Name | Type | Description | Default |
25
+ | --------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------- |
26
+ | `--padding` | Size | Padding around card | `--bloom-s6` |
27
+ | `--margin-bottom` | Size | Margin beneath card | `--bloom-s4` |
28
+ | `--border-color` | <Swatch colorVar="--bloom-color-gray-450" /> | Color of border around card | `--bloom-color-gray-450` |
29
+ | `--background-color` | <Swatch colorVar="--bloom-color-primary-lighter"/> | Background color of card | `--bloom-color-primary-lighter` |
30
+ | `--title-color` | <Swatch colorVar="--bloom-color-gray-800" /> | Color of title text | `--bloom-color-gray-800` |
31
+ | `--title-font-size` | Size | Size of title text | `--bloom-font-size-base` |
32
+ | `--title-font-family` | Font | Font family of title text | `--bloom-font-sans` |
33
+ | `--title-text-transform` | Font | Capitalization of title text | `none` |
34
+ | `--title-letter-spacing` | Size | Spacing of title text | `0` |
package/src/blocks/InfoCard.scss CHANGED
@@ -1,51 +1,48 @@
1
1
  .info-card {
2
- @apply p-6;
3
- @apply rounded;
4
- @apply border;
5
- @apply border-gray-450;
6
- @apply mb-4;
7
- @apply bg-white;
2
+ --padding: var(--bloom-s6);
3
+ --margin-bottom: var(--bloom-s4);
4
+ --border-color: var(--bloom-color-gray-450);
5
+ --background-color: var(--bloom-color-white);
6
+ --background-color-lighter: var(--bloom-color-primary-lighter);
7
+ --title-color: var(--bloom-color-gray-800);
8
+ --title-font-size: var(--bloom-font-size-sm);
9
+ --title-font-size-lighter: var(--bloom-font-size-base);
10
+ --title-font-family: var(--bloom-font-sans);
11
+ --title-text-transform: uppercase;
12
+ --title-text-transform-lighter: none;
13
+ --title-letter-spacing: 0.025em;
14
+ --title-letter-spacing-lighter: 0;
15
+
16
+ padding: var(--padding);
17
+ border-color: var(--border-color);
18
+ margin-bottom: var(--margin-bottom);
19
+ border-radius: 0.25rem;
20
+ border-width: 1px;
21
+ background-color: var(--background-color);
8
22
  }
9
23
 
10
24
  .info-card.is-normal-primary-lighter,
11
25
  .markdown .info-card {
12
- @apply bg-primary-lighter;
26
+ background-color: var(--background-color-lighter);
13
27
 
14
28
  .info-card__title {
15
- @apply text-base;
16
- @apply normal-case;
17
- @apply tracking-normal;
29
+ font-size: var(--title-font-size-lighter);
30
+ text-transform: var(--title-text-transform-lighter);
31
+ letter-spacing: var(--title-letter-spacing-lighter);
18
32
  }
19
33
  }
20
34
 
21
35
  .info-card__title {
22
- @apply text-gray-800;
23
- @apply uppercase;
24
- @apply font-sans;
25
- @apply font-bold;
26
- @apply text-sm;
27
- @apply tracking-wide;
36
+ color: var(--title-color);
37
+ text-transform: var(--title-text-transform);
38
+ font-weight: bold;
39
+ font-size: var(--title-font-size);
40
+ font-family: var(--title-font-family);
41
+ letter-spacing: var(--title-letter-spacing);
28
42
  }
29
43
 
30
44
  .info-card__header {
31
45
  &:not([class*="mb-"]) {
32
- @apply mb-4;
33
- }
34
- }
35
-
36
- .info-card__columns {
37
- @apply flex;
38
- @apply flex-wrap;
39
- }
40
-
41
- .info-card__column {
42
- @apply flex-1;
43
- }
44
- .info-card__column-2 {
45
- flex: 1 1 100%;
46
- @apply mt-4;
47
- @apply mr-4;
48
- @media (min-width: 440px) {
49
- flex: 1 1 45%;
46
+ margin-bottom: var(--bloom-s4);
50
47
  }
51
48
  }
package/src/lists/PreferencesList.docs.mdx ADDED
@@ -0,0 +1,36 @@
1
+ import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
2
+ import { Swatch } from "../prototypes/Swatch"
3
+ import { PreferencesList } from "./PreferencesList"
4
+
5
+ # Preferences List
6
+
7
+ The Preferences List component renders a list of cards that contain a title, an optional subtitle, an optional description, and an optional list of hyperlinks. Each card has an ordinal which indicates the position in the list the card is in.
8
+
9
+ <Canvas>
10
+ <Story id="lists-preferences-list" />
11
+ </Canvas>
12
+
13
+ <br />
14
+ <br />
15
+
16
+ ## Component Properties
17
+
18
+ <ArgsTable of={PreferencesList} />
19
+
20
+ ## Theming Variables
21
+
22
+ You can apply CSS variables to the `.preferences-list` selector to customize the appearance of the component.
23
+
24
+ | Name | Type | Description | Default |
25
+ | --------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------- |
26
+ | `--title-color` | <Swatch colorVar="--bloom-color-gray-800" /> | Font color of title | `--bloom-color-gray-800` |
27
+ | `--title-text-transform` | Font | Capitalization of title | `uppercase` |
28
+ | `--ordinal-bg-color` | <Swatch colorVar="--bloom-color-white" /> | Ordinal background color | `--bloom-color-white` |
29
+ | `--ordinal-border-width` | Border | Ordinal border width | `--bloom-border-2;` |
30
+ | `--ordinal-border-color` | <Swatch colorVar="--bloom-color-primary" /> | Ordinal border color | `--bloom-color-primary` |
31
+ | `--ordinal-color` | <Swatch colorVar="--bloom-color-primary" /> | Ordinal font color | `--bloom-color-primary` |
32
+ | `--ordinal-font-size` | Size | Ordinal font size | `--bloom-font-size-sm` |
33
+ | `--ordinal-padding` | Size | Ordinal padding | `--bloom-s2` |
34
+ | `--ordinal-margin-right` | Size | Ordinal right margin | `--bloom-s2` |
35
+ | `--subtitle-color` | <Swatch colorVar="--bloom-color-gray-750" /> | Font color of subtitle | `--bloom-color-gray-750` |
36
+ | `--description-color` | <Swatch colorVar="--bloom-color-gray-750" /> | Font color of description | `--bloom-color-gray-750` |
package/src/lists/PreferencesList.scss CHANGED
@@ -1,6 +1,22 @@
1
+ .preferences-list {
2
+ --info-card-title-color: var(--bloom-color-gray-800);
3
+ --ordinal-bg-color: var(--bloom-color-white);
4
+ --ordinal-border-width: var(--bloom-border-2);
5
+ --ordinal-border-color: var(--bloom-color-primary);
6
+ --ordinal-color: var(--bloom-color-primary);
7
+ --ordinal-font-size: var(--bloom-font-size-sm);
8
+ --ordinal-padding: var(--bloom-s2);
9
+ --ordinal-margin-right: var(--bloom-s2);
10
+ --subtitle-color: var(--bloom-color-gray-750);
11
+ --description-color: var(--bloom-color-gray-750);
12
+ }
13
+
1
14
  .preferences-list__item {
2
15
  .info-card__title {
3
- @apply mb-0;
16
+ --title-font-size: var(--bloom-font-size-sm);
17
+
18
+ margin-bottom: 0px;
19
+ color: var(--info-card-title-color);
4
20
 
5
21
  @media (max-width: $screen-md) {
6
22
  margin-left: 0px;
@@ -10,31 +26,33 @@
10
26
  }
11
27
 
12
28
  .preferences-list__item--title-only {
29
+ .info-card__title {
30
+ --title-font-size: var(--bloom-font-size-sm);
31
+
32
+ color: var(--info-card-title-color);
33
+ }
34
+
13
35
  .preferences-list__number {
14
36
  margin-top: -10px;
15
37
  }
16
- .info-card__title {
17
- @apply normal-case;
18
- @apply tracking-normal;
19
- }
20
38
  }
21
39
 
22
40
  .preferences-list__number {
23
- @apply bg-white;
24
- @apply border-2;
25
- @apply border-primary;
26
- @apply text-primary;
27
- @apply text-sm;
28
- @apply rounded-full;
29
- @apply float-left;
30
- @apply p-2;
31
- @apply mr-2;
32
- @apply text-center;
33
- @apply whitespace-nowrap;
34
- @apply font-bold;
41
+ float: left;
42
+ border-radius: 9999px;
35
43
  margin-left: -2.2rem;
36
44
  margin-top: -4px;
37
45
  width: 2.5rem;
46
+ font-weight: bold;
47
+ text-align: center;
48
+ whitespace: nowrap;
49
+ background-color: var(--ordinal-bg-color);
50
+ border-width: var(--ordinal-border-width);
51
+ border-color: var(--ordinal-border-color);
52
+ color: var(--ordinal-color);
53
+ font-size: var(--ordinal-font-size);
54
+ padding: var(--bloom-s2);
55
+ margin-right: var(--ordinal-margin-right);
38
56
 
39
57
  @screen md {
40
58
  margin-left: -3rem;
@@ -46,14 +64,14 @@
46
64
  }
47
65
 
48
66
  sup {
49
- @apply font-normal;
67
+ font-weight: 400;
50
68
  top: -0.35em;
51
69
  }
52
70
  }
53
71
 
54
72
  .preferences-list__subtitle {
55
- @apply text-gray-750;
56
- @apply text-tiny;
73
+ color: var(--subtitle-color);
74
+ font-size: var(--bloom-font-size-tiny);
57
75
 
58
76
  @media (max-width: $screen-md) {
59
77
  margin-left: 0px;
@@ -61,16 +79,15 @@
61
79
  }
62
80
 
63
81
  .preferences-list__description {
64
- @apply text-gray-750;
65
- @apply text-sm;
66
- @apply mt-3;
82
+ color: var(--description-color);
83
+ font-size: var(--bloom-font-size-sm);
84
+ margin-top: var(--bloom-s3);
67
85
  }
68
86
 
69
87
  .preferences-list__links {
70
- @apply text-tiny;
71
- @apply mt-3;
72
-
88
+ font-size: var(--bloom-font-size-tiny);
89
+ margin-top: var(--bloom-s3);
73
90
  span {
74
- @apply mr-4;
91
+ margin-right: var(--bloom-s4);
75
92
  }
76
93
  }
package/src/locales/es.json CHANGED
@@ -369,7 +369,6 @@
369
369
  "authentication.forgotPassword.errors.tokenExpired": "El token de restablecimiento de contraseña caducó. Por favor_ solicite uno nuevo.",
370
370
  "authentication.forgotPassword.errors.tokenMissing": "El token no fue encontrado. Por favor_ solicite uno nuevo.",
371
371
  "authentication.forgotPassword.sendEmail": "Enviar correo electrónico",
372
- "authentication.forgotPassword.success": "Le hemos enviado un correo electrónico con un enlace para restablecer tu contraseña.",
373
372
  "authentication.signIn.accountHasBeenLocked": "Por razones de seguridad_ esta cuenta ha sido bloqueada.",
374
373
  "authentication.signIn.afterFailedAttempts": "Por razones de seguridad_ después de %{count} intentos fallidos_ deberá esperar 30 minutos antes de volver a intentarlo.",
375
374
  "authentication.signIn.changeYourPassword": "Puede cambiar su contraseña",
package/src/locales/general.json CHANGED
@@ -503,7 +503,7 @@
503
503
  "authentication.forgotPassword.errors.tokenExpired": "Reset password token expired. Please request for a new one.",
504
504
  "authentication.forgotPassword.errors.tokenMissing": "Token not found. Please request for a new one.",
505
505
  "authentication.forgotPassword.sendEmail": "Send email",
506
- "authentication.forgotPassword.success": "We've sent you an email. You'll receive an email with a link to reset your password.",
506
+ "authentication.forgotPassword.message": "If there is an account made with that email, you'll receive an email with a link to reset your password.",
507
507
  "authentication.signIn.accountHasBeenLocked": "For security reasons, this account has been locked.",
508
508
  "authentication.signIn.afterFailedAttempts": "For security reasons, after %{count} failed attempts, you’ll have to wait 30 minutes before trying again.",
509
509
  "authentication.signIn.changeYourPassword": "You can change your password",
package/src/locales/tl.json CHANGED
@@ -322,7 +322,6 @@
322
322
  "authentication.forgotPassword.errors.tokenExpired": "Nag-expire na ang token ng pag-reset ng password. Humiling ng bago.",
323
323
  "authentication.forgotPassword.errors.tokenMissing": "Hindi nahanap ang token. Humiling ng bago.",
324
324
  "authentication.forgotPassword.sendEmail": "Magpadala ng email",
325
- "authentication.forgotPassword.success": "Nagpadala kami sa iyo ng email. Makakatanggap ka ng email na may link para i-reset ang iyong password.",
326
325
  "authentication.signIn.accountHasBeenLocked": "Para sa mga kadahilanang pangseguridad_ ang account na ito isinara na.",
327
326
  "authentication.signIn.afterFailedAttempts": "Para sa mga kadahilanang pangseguridad_ pagkatapos ng %{count} nabigong pagtatangka_ kailangan mong maghintay ng 30 minuto bago subukang muli.",
328
327
  "authentication.signIn.changeYourPassword": "Maaari mong palitan ang iyong password",
package/src/locales/vi.json CHANGED
@@ -369,7 +369,6 @@
369
369
  "authentication.forgotPassword.errors.tokenExpired": "Mã thông báo đặt lại mật khẩu đã hết hạn. Vui lòng yêu cầu mã mới.",
370
370
  "authentication.forgotPassword.errors.tokenMissing": "Không tìm thấy mã thông báo. Vui lòng yêu cầu mã mới.",
371
371
  "authentication.forgotPassword.sendEmail": "Gửi email",
372
- "authentication.forgotPassword.success": "Chúng tôi đã gửi email cho quý vị. Quý vị sẽ nhận được email có liên kết để đặt lại mật khẩu.",
373
372
  "authentication.signIn.accountHasBeenLocked": "Vì lý do bảo mật_ tài khoản này đã bị khóa.",
374
373
  "authentication.signIn.afterFailedAttempts": "Vì lý do bảo mật_ quý vị sẽ phải chờ 30 phút trước khi thử lại sau %{count} lần thử không thành công.",
375
374
  "authentication.signIn.changeYourPassword": "Quý vị có thể đổi mật khẩu",
package/src/locales/zh.json CHANGED
@@ -369,7 +369,6 @@
369
369
  "authentication.forgotPassword.errors.tokenExpired": "重設密碼權杖已到期。請要求新的權杖。",
370
370
  "authentication.forgotPassword.errors.tokenMissing": "找不到權杖。請要求新的權杖。",
371
371
  "authentication.forgotPassword.sendEmail": "傳送電子郵件",
372
- "authentication.forgotPassword.success": "我們已向您傳送電子郵件。您會收到具有重設密碼連結的電子郵件。",
373
372
  "authentication.signIn.accountHasBeenLocked": "基於安全原因，此帳戶已遭到鎖定。",
374
373
  "authentication.signIn.afterFailedAttempts": "基於安全原因，只要失敗嘗試達 %{count} 次，您就必須等待 30 分鐘才能再試一次。",
375
374
  "authentication.signIn.changeYourPassword": "您可以變更密碼",