@bloom-housing/ui-components 7.0.4 → 7.0.5

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 +19 -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
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **infocard preferenceslist:** fix spacing in scss files; fix typo in doc ([f067c61](https://github.com/bloom-housing/bloom/commit/f067c611926acfce8c3702ce705cbc2840cc379e))
12
+ * **infocard:** add default text size ([00af02e](https://github.com/bloom-housing/bloom/commit/00af02e4abde2bb310f1dfb900bd920d4f0594e7))
13
+ * **infocard:** add lighter vars ([2089a69](https://github.com/bloom-housing/bloom/commit/2089a691f0ef67dacbeac9eb731ba93bea1c2261))
14
+ * **infocard:** fix typo ([9a73783](https://github.com/bloom-housing/bloom/commit/9a7378331046e1cb5a165e72ab05addd80e1f75c))
15
+ * **infocard:** fix var usage ([6e0f58a](https://github.com/bloom-housing/bloom/commit/6e0f58affa2de7dd54236a5bd23a7780d21d0cee))
16
+ * **preferenceslist:** fix mixnamed css vars; add bg ([a934b09](https://github.com/bloom-housing/bloom/commit/a934b09529f01def49e5b6396fcd5fa309c7df06))
17
+ * **preferenceslist:** remove uneeded vars ([f21e29f](https://github.com/bloom-housing/bloom/commit/f21e29f7efc5d94576aef8d255b89068c9957bf5))
18
+ * **preferenceslist:** remove unused css var ([fec242c](https://github.com/bloom-housing/bloom/commit/fec242c4fcb5c1485b5dfb12255ac2d30160be62))
19
+ * **preferenceslist:** remove unused css var ([9e8f365](https://github.com/bloom-housing/bloom/commit/9e8f365403c0a6ea441be294eaee9a2b620c55f7))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [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
26
 
8
27
 
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.5",
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": "8efef5373b7e8f06078a9eee83e2f6b9711bbf07"
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
  }