@bloom-housing/ui-components 7.3.1 → 7.3.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.
- package/README.md +40 -39
- package/dist/src/actions/ExpandableText.d.ts +2 -2
- package/dist/src/actions/ExpandableText.js.map +1 -1
- package/dist/src/page_components/listing/AdditionalFees.js +11 -9
- package/dist/src/page_components/listing/AdditionalFees.js.map +1 -1
- package/dist/src/text/Description.d.ts +2 -2
- package/dist/src/text/Description.js.map +1 -1
- package/package.json +17 -3
- package/src/actions/ExpandableText.tsx +2 -2
- package/src/page_components/listing/AdditionalFees.tsx +15 -13
- package/src/text/Description.tsx +2 -2
package/README.md
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
# Bloom UI Components
|
|
2
2
|
|
|
3
|
-
This package
|
|
4
|
-
|
|
5
|
-
## Types of Components
|
|
6
|
-
|
|
7
|
-
Bloom components have been design with the principles of [Atomic Design](http://atomicdesign.bradfrost.com/) in mind, and some of the directory structure and naming conventions are based on that.
|
|
8
|
-
|
|
9
|
-
There are also Page Components as a distinct class, which represent larger combinations of components (atomic: organisms) that are meant to be directly imported into specific pages in the system (e.g. a home page).
|
|
3
|
+
This package contains a component library used by the Bloom affordable housing system.
|
|
10
4
|
|
|
11
5
|
## Locales/Translations
|
|
12
6
|
|
|
@@ -14,9 +8,9 @@ There are also Page Components as a distinct class, which represent larger combi
|
|
|
14
8
|
|
|
15
9
|
## Storybook
|
|
16
10
|
|
|
17
|
-
|
|
11
|
+
UIC uses [Storybook](https://storybook.js.org/) to document our components, and reviewing it is the best way to get started and understand what's available. You can view our published Storybook [here](https://storybook.bloom.exygy.dev/).
|
|
18
12
|
|
|
19
|
-
To spin up Storybook locally, from
|
|
13
|
+
To spin up Storybook locally, from root run:
|
|
20
14
|
|
|
21
15
|
```
|
|
22
16
|
yarn start
|
|
@@ -24,7 +18,7 @@ yarn start
|
|
|
24
18
|
|
|
25
19
|
## Testing
|
|
26
20
|
|
|
27
|
-
To run the unit test suite which is built with Jest and RTL, from
|
|
21
|
+
To run the unit test suite which is built with Jest and RTL, from root run:
|
|
28
22
|
|
|
29
23
|
```
|
|
30
24
|
yarn test
|
|
@@ -36,14 +30,40 @@ or
|
|
|
36
30
|
yarn test:coverage
|
|
37
31
|
```
|
|
38
32
|
|
|
39
|
-
which generates local coverage reports
|
|
33
|
+
which generates local coverage reports.
|
|
40
34
|
|
|
41
|
-
To run our accessibility suite which leverages Storybook, from
|
|
35
|
+
To run our accessibility suite which leverages Storybook, from root run:
|
|
42
36
|
|
|
43
37
|
```
|
|
44
38
|
yarn test:a11y
|
|
45
39
|
```
|
|
46
40
|
|
|
41
|
+
## Contributing
|
|
42
|
+
|
|
43
|
+
Contributions to UIC are welcomed. To help us meet the project's goals around quality and maintainability, we ask that all contributors read, understand, and agree to our guidelines.
|
|
44
|
+
|
|
45
|
+
### Issue tracking
|
|
46
|
+
|
|
47
|
+
Our development tasks are managed through GitHub issues and development in the vast majority of cases should be tied to an issue. Please feel free to submit issues even if you don't plan on implementing them yourself. Before creating an issue, check first to see if one already exists. When creating an issue, give it a descriptive title and include screenshots if relevant. Please comment on an issue if you are starting development.
|
|
48
|
+
|
|
49
|
+
### Committing, Versioning, and Releasing
|
|
50
|
+
|
|
51
|
+
We are using [semantic-release](https://www.npmjs.com/package/@semantic-release/npm) to automatically versions and release. In conjunction with semantic-release we are also using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), a specification for commit messages that helps semantic-release understand what level of change each commit is in order to automate our processes.
|
|
52
|
+
|
|
53
|
+
On commit, two steps automatically run: (1) linting and (2) a verification of the conventional commit standard. If you are still learning the conventional commit standard, we recommend not running `git commit` and instead globally installing commitizen (`npm install -g commitizen`) and then committing with `git cz` which will run a commit message CLI. The CLI asks a series of questions about your changeset and builds the commit message for you in the conventional commit format.
|
|
54
|
+
|
|
55
|
+
On every merge to main, our published Storybook will be updated and a new version of UIC is automatically published to npm.
|
|
56
|
+
|
|
57
|
+
### Pull Requests
|
|
58
|
+
|
|
59
|
+
Pull requests are opened to the main branch. When opening a pull request please fill out the entire pull request template which includes tagging the issue your PR is related to, a description of your PR, indicating the type of change, including details for the reviewer about how to test your PR, and a testing checklist.
|
|
60
|
+
|
|
61
|
+
When your PR is ready for review, add the `2 reviews needed` label to surface it to our internal team. If you are the first reviewer and you approve the PR, change the label to `1 review needed`, an if you request changes, change it to `needs changes`. Once a PR is ready, the second reviewer should update the PR with the `ready to merge` label. If you put up a PR that is not yet ready for eyes, add the `wip` label.
|
|
62
|
+
|
|
63
|
+
Once the PR has been approved, you should squash and merge. We often wait for the author to merge their own PR if they have the permissions to do so.
|
|
64
|
+
|
|
65
|
+
As a reviewer on a PR, try not to leave only comments, but a clear next step action. If the PR requires further discussion or changes, mark it with requested changes. If a PR looks good to you (or even if there are small changes requested that won't require an additional review from you), please mark it with approved and comment on the last few changes needed. This helps other reviewers better understand the state of PRs at the list view and prevents an additional unnecessary review cycle.
|
|
66
|
+
|
|
47
67
|
## Tailwind
|
|
48
68
|
|
|
49
69
|
- We are using the [Tailwind](https://v2.tailwindcss.com) framework to make use of their low-level utility classes in page-level markup and sometimes in components. We configure the settings in `tailwind.config.js`.
|
|
@@ -54,37 +74,18 @@ yarn test:a11y
|
|
|
54
74
|
|
|
55
75
|
## Style Conventions
|
|
56
76
|
|
|
57
|
-
-
|
|
77
|
+
- Our components are styled with SCSS files located alongside React component TS files.
|
|
58
78
|
|
|
59
|
-
- We are currently in the process of migrating components to a second-generation styling convention which relies on CSS variables for design tokens and
|
|
79
|
+
- We are currently in the process of migrating components to a second-generation styling convention which relies on CSS variables for internal design tokens and removes `@apply` Tailwind statements. V2 style components are indicated in our Storybook with a :triangular_flag_on_post:.
|
|
60
80
|
|
|
61
|
-
- Bloom design tokens
|
|
81
|
+
- Bloom design tokens encompass many styles including colors, typography settings, sizes, border, + more.
|
|
62
82
|
|
|
63
|
-
- More information on this
|
|
83
|
+
- More information on this migration can be found in [V2Styles.md](https://github.com/bloom-housing/ui-components/blob/main/V2Styles.md).
|
|
64
84
|
|
|
65
85
|
### Naming Conventions
|
|
66
86
|
|
|
67
|
-
-
|
|
68
|
-
|
|
69
|
-
- Avoid using Sass nesting to build class names
|
|
70
|
-
|
|
71
|
-
- Avoid
|
|
72
|
-
- .accordion
|
|
73
|
-
- &-item
|
|
74
|
-
- Preferred
|
|
75
|
-
- .accordion
|
|
76
|
-
- .accordion-item
|
|
77
|
-
- .accordion-item\_\_label
|
|
78
|
-
|
|
79
|
-
- Modify with adjectives
|
|
80
|
-
- is-, has-
|
|
81
|
-
- .accordion-item\_\_label.is-open
|
|
82
|
-
|
|
83
|
-
- Component naming
|
|
84
|
-
- Be wary of naming components based on content, presentation, location, or theming, as this limits the use of the class or becomes confusing
|
|
85
|
-
- Use capitals for React component names
|
|
86
|
-
- SelectButton instead of selectbutton, or Menu instead of menu
|
|
87
|
-
- Avoid including any backend business logic in ui-components so that they may be consumed regardless of the backend implementation
|
|
87
|
+
- Be wary of naming components based on content, presentation, location, or theming, as this limits the use
|
|
88
|
+
- Avoid including any Bloom-centered business logic in ui-components so that they may be consumed regardless of the backend implementation
|
|
88
89
|
|
|
89
90
|
### General Rules
|
|
90
91
|
|
|
@@ -97,8 +98,8 @@ yarn test:a11y
|
|
|
97
98
|
|
|
98
99
|
### Accessibility Considerations
|
|
99
100
|
|
|
100
|
-
-
|
|
101
|
-
- Storybook AXE panel when looking at an individual component can be useful
|
|
101
|
+
- An A11Y test suite based on our Storybook runs on all PRs
|
|
102
|
+
- Checking out the Storybook AXE panel when looking at an individual component can be useful
|
|
102
103
|
- Keyboard accessibility
|
|
103
104
|
- Consider aria roles, focus state
|
|
104
105
|
- Consider color contrast
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MarkdownToJSX } from "markdown-to-jsx";
|
|
2
2
|
import "./ExpandableText.scss";
|
|
3
3
|
export interface ExpandableTextProps {
|
|
4
4
|
children: string;
|
|
@@ -9,7 +9,7 @@ export interface ExpandableTextProps {
|
|
|
9
9
|
readMore: string;
|
|
10
10
|
readLess: string;
|
|
11
11
|
};
|
|
12
|
-
markdownProps?:
|
|
12
|
+
markdownProps?: MarkdownToJSX.Options;
|
|
13
13
|
buttonClassName?: string;
|
|
14
14
|
}
|
|
15
15
|
declare const ExpandableText: (props: ExpandableTextProps) => JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableText.js","sourceRoot":"","sources":["../../../src/actions/ExpandableText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,
|
|
1
|
+
{"version":3,"file":"ExpandableText.js","sourceRoot":"","sources":["../../../src/actions/ExpandableText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,QAA2B,MAAM,iBAAiB,CAAA;AACzD,OAAO,uBAAuB,CAAA;AAe9B,IAAM,OAAO,GAAG,UAAC,IAAY,EAAE,QAAiB,EAAE,SAAiB;IACjE,IAAI,QAAQ,IAAI,IAAI,CAAC,MAAM,IAAI,SAAS,EAAE;QACxC,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,QAAQ,GAAG,SAAS,CAAA;IACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,QAAQ,GAAG,CAAC,EAAE;QAC5C,QAAQ,IAAI,CAAC,CAAA;KACd;IACD,OAAO,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAA;AAClG,CAAC,CAAA;AAED,IAAM,cAAc,GAAG,UACrB,QAAiB,EACjB,WAAwC,EACxC,OAAuC,EACvC,eAAuD;IAEvD,IAAM,OAAO,GAAG,CAAC,eAAe,CAAC,CAAA;IACjC,IAAI,eAAe,EAAE;QACnB,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KAC9B;IAED,OAAO,CACL,gCAAQ,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAtB,CAAsB,IACxE,QAAQ,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAC1C,CACV,CAAA;AACH,CAAC,CAAA;AAED,IAAM,cAAc,GAAG,UAAC,KAA0B;IAC1C,IAAA,KAA0B,QAAQ,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,EAAxD,QAAQ,QAAA,EAAE,WAAW,QAAmC,CAAA;IAC/D,IAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,GAAG,CAAA;IACxC,IAAI,MAAM,CAAA;IAEV,IAAI,CAAC,KAAK,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAA;IAEhC,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,SAAS,EAAE;QACrC,MAAM,GAAG,cAAc,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,eAAe,CAAC,CAAA;KACrF;IACD,OAAO,CACL,6BAAK,SAAS,EAAE,0BAAmB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAE;QAClD,GAAG;QACJ,oBAAC,QAAQ,IACP,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,EACtD,OAAO,EAAE,KAAK,CAAC,aAAa,GAC5B;QACD,MAAM,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { GridSection, GridCell } from "../../sections/GridSection";
|
|
3
|
+
import { InfoCard } from "../../blocks/InfoCard";
|
|
2
4
|
var AdditionalFees = function (_a) {
|
|
3
5
|
var _b, _c;
|
|
4
6
|
var deposit = _a.deposit, applicationFee = _a.applicationFee, footerContent = _a.footerContent, strings = _a.strings;
|
|
5
|
-
|
|
7
|
+
var hasFooter = footerContent && (footerContent === null || footerContent === void 0 ? void 0 : footerContent.length) > 0;
|
|
8
|
+
if (!deposit && !applicationFee && !hasFooter)
|
|
6
9
|
return React.createElement(React.Fragment, null);
|
|
7
|
-
return (React.createElement(
|
|
8
|
-
React.createElement(
|
|
9
|
-
|
|
10
|
-
applicationFee && (React.createElement("div", { className: "info-card__column-2 ".concat(deposit && "mr-2") },
|
|
10
|
+
return (React.createElement(InfoCard, { title: strings.sectionHeader, className: "bg-gray-100 border-0" },
|
|
11
|
+
React.createElement(GridSection, { columns: 2, className: "".concat(hasFooter && "mb-5") },
|
|
12
|
+
applicationFee && (React.createElement(GridCell, null,
|
|
11
13
|
React.createElement("div", { className: "text-base" }, strings.applicationFee),
|
|
12
14
|
React.createElement("div", { className: "text-xl font-bold" }, applicationFee), (_b = strings.applicationFeeSubtext) === null || _b === void 0 ? void 0 :
|
|
13
|
-
_b.map(function (appFeeSubtext, index) { return (React.createElement("div", { key: index }, appFeeSubtext)); }))),
|
|
14
|
-
deposit && (React.createElement(
|
|
15
|
+
_b.map(function (appFeeSubtext, index) { return (React.createElement("div", { key: index, className: "text-sm" }, appFeeSubtext)); }))),
|
|
16
|
+
deposit && (React.createElement(GridCell, null,
|
|
15
17
|
React.createElement("div", { className: "text-base" }, strings.deposit),
|
|
16
18
|
React.createElement("div", { className: "text-xl font-bold" }, deposit), (_c = strings.depositSubtext) === null || _c === void 0 ? void 0 :
|
|
17
|
-
_c.map(function (depositSubtext, index) { return (React.createElement("div", { key: index }, depositSubtext)); })))),
|
|
18
|
-
|
|
19
|
+
_c.map(function (depositSubtext, index) { return (React.createElement("div", { className: "text-sm", key: index }, depositSubtext)); })))),
|
|
20
|
+
hasFooter && (React.createElement("div", { className: "info-card__columns text-sm" }, footerContent === null || footerContent === void 0 ? void 0 : footerContent.map(function (elem, idx) { return (React.createElement("div", { key: "footer_info_".concat(idx), className: "info-card__column-2" }, elem)); })))));
|
|
19
21
|
};
|
|
20
22
|
export { AdditionalFees as default, AdditionalFees };
|
|
21
23
|
//# sourceMappingURL=AdditionalFees.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdditionalFees.js","sourceRoot":"","sources":["../../../../src/page_components/listing/AdditionalFees.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"AdditionalFees.js","sourceRoot":"","sources":["../../../../src/page_components/listing/AdditionalFees.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAkBhD,IAAM,cAAc,GAAG,UAAC,EAKF;;QAJpB,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,OAAO,aAAA;IAEP,IAAM,SAAS,GAAG,aAAa,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,IAAG,CAAC,CAAA;IAC5D,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS;QAAE,OAAO,yCAAK,CAAA;IAC3D,OAAO,CACL,oBAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,SAAS,EAAC,sBAAsB;QACtE,oBAAC,WAAW,IAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAG,SAAS,IAAI,MAAM,CAAE;YACzD,cAAc,IAAI,CACjB,oBAAC,QAAQ;gBACP,6BAAK,SAAS,EAAC,WAAW,IAAE,OAAO,CAAC,cAAc,CAAO;gBACzD,6BAAK,SAAS,EAAC,mBAAmB,IAAE,cAAc,CAAO,EACxD,MAAA,OAAO,CAAC,qBAAqB;mBAAE,GAAG,CAAC,UAAC,aAAa,EAAE,KAAK,IAAK,OAAA,CAC5D,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,SAAS,IAAE,aAAa,CAAO,CAC3D,EAF6D,CAE7D,CAAC,CACO,CACZ;YACA,OAAO,IAAI,CACV,oBAAC,QAAQ;gBACP,6BAAK,SAAS,EAAC,WAAW,IAAE,OAAO,CAAC,OAAO,CAAO;gBAClD,6BAAK,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAO,EACjD,MAAA,OAAO,CAAC,cAAc;mBAAE,GAAG,CAAC,UAAC,cAAc,EAAE,KAAK,IAAK,OAAA,CACtD,6BAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,IAAG,cAAc,CAAO,CAC5D,EAFuD,CAEvD,CAAC,CACO,CACZ,CACW;QACb,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,4BAA4B,IACxC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CACjC,6BAAK,GAAG,EAAE,sBAAe,GAAG,CAAE,EAAE,SAAS,EAAC,qBAAqB,IAC5D,IAAI,CACD,CACP,EAJkC,CAIlC,CAAC,CACE,CACP,CACQ,CACZ,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "./Description.scss";
|
|
2
|
-
import {
|
|
2
|
+
import { MarkdownToJSX } from "markdown-to-jsx";
|
|
3
3
|
export interface DescriptionProps {
|
|
4
4
|
term: string;
|
|
5
5
|
description: any;
|
|
6
6
|
dtClassName?: string;
|
|
7
7
|
markdown?: boolean;
|
|
8
|
-
markdownProps?:
|
|
8
|
+
markdownProps?: MarkdownToJSX.Options;
|
|
9
9
|
}
|
|
10
10
|
export declare const Description: (props: DescriptionProps) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Description.js","sourceRoot":"","sources":["../../../src/text/Description.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,
|
|
1
|
+
{"version":3,"file":"Description.js","sourceRoot":"","sources":["../../../src/text/Description.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,QAA2B,MAAM,iBAAiB,CAAA;AAUzD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;IACjD,IAAM,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,IAAI,KAAK,CAAC,WAAW;QAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;IAExD,OAAO,CACL;QACE,4BAAI,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAC,IAAI,CAAM;QACnD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,4BAAI,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC,oBAAC,QAAQ,IACP,OAAO,aAAI,qBAAqB,EAAE,IAAI,IAAK,KAAK,CAAC,aAAa,GAC9D,QAAQ,EAAE,KAAK,CAAC,WAAW,GAC3B,CACC,CACN,CAAC,CAAC,CAAC,CACF,4BAAI,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,KAAK,CAAC,WAAW,CAAM,CAC7D,CACA,CACJ,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bloom-housing/ui-components",
|
|
3
|
-
"version": "7.3.
|
|
3
|
+
"version": "7.3.2",
|
|
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/ui-components",
|
|
@@ -40,6 +40,8 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@babel/core": "^7.15.5",
|
|
42
42
|
"@babel/preset-env": "^7.15.4",
|
|
43
|
+
"@commitlint/cli": "^13.1.0",
|
|
44
|
+
"@commitlint/config-conventional": "^13.1.0",
|
|
43
45
|
"@emotion/core": "^10.0.35",
|
|
44
46
|
"@emotion/styled": "^10.0.27",
|
|
45
47
|
"@geometricpanda/storybook-addon-badges": "^0.2.1",
|
|
@@ -73,6 +75,8 @@
|
|
|
73
75
|
"@types/react-text-mask": "^5.4.6",
|
|
74
76
|
"@types/react-transition-group": "^4.4.0",
|
|
75
77
|
"@types/webpack": "^4.41.22",
|
|
78
|
+
"@typescript-eslint/parser": "^5.12.1",
|
|
79
|
+
"@typescript-eslint/eslint-plugin": "^5.12.1",
|
|
76
80
|
"autoprefixer": "^10.3.4",
|
|
77
81
|
"babel-loader": "^8.2.2",
|
|
78
82
|
"babel-plugin-require-context-hook": "^1.0.0",
|
|
@@ -84,9 +88,11 @@
|
|
|
84
88
|
"eslint-plugin-prettier": "^3.1.4",
|
|
85
89
|
"eslint-plugin-react": "^7.21.4",
|
|
86
90
|
"eslint-plugin-react-hooks": "^4.1.2",
|
|
91
|
+
"husky": "^4.3.0",
|
|
87
92
|
"identity-obj-proxy": "^3.0.0",
|
|
88
93
|
"jest": "^26.5.3",
|
|
89
94
|
"jest-environment-jsdom": "^26.5.3",
|
|
95
|
+
"lint-staged": "^10.4.0",
|
|
90
96
|
"mockdate": "^3.0.2",
|
|
91
97
|
"postcss": "^8.3.6",
|
|
92
98
|
"postcss-loader": "^4.3",
|
|
@@ -98,6 +104,7 @@
|
|
|
98
104
|
"react-is": "^17.0.2",
|
|
99
105
|
"react-test-renderer": "^17.0.2",
|
|
100
106
|
"regenerator-runtime": "^0.13.7",
|
|
107
|
+
"require-from-string": "2.0.2",
|
|
101
108
|
"sass": "1.52.1",
|
|
102
109
|
"sass-loader": "^10.0.3",
|
|
103
110
|
"semantic-release": "19.0.5",
|
|
@@ -114,7 +121,6 @@
|
|
|
114
121
|
"@fortawesome/react-fontawesome": "^0.1.18",
|
|
115
122
|
"@mapbox/mapbox-sdk": "^0.13.0",
|
|
116
123
|
"@types/jwt-decode": "^2.2.1",
|
|
117
|
-
"@types/markdown-to-jsx": "^6.11.2",
|
|
118
124
|
"@types/mdx": "^2.0.1",
|
|
119
125
|
"@types/node": "^12.12.67",
|
|
120
126
|
"@types/node-polyglot": "^2.4.1",
|
|
@@ -128,7 +134,7 @@
|
|
|
128
134
|
"axios": "0.21.2",
|
|
129
135
|
"dayjs": "^1.10.7",
|
|
130
136
|
"jwt-decode": "^2.2.0",
|
|
131
|
-
"markdown-to-jsx": "
|
|
137
|
+
"markdown-to-jsx": "7.1.8",
|
|
132
138
|
"nanoid": "^3.1.12",
|
|
133
139
|
"node-polyglot": "^2.4.0",
|
|
134
140
|
"react": "^17.0.2",
|
|
@@ -152,5 +158,13 @@
|
|
|
152
158
|
"singleQuote": false,
|
|
153
159
|
"printWidth": 100,
|
|
154
160
|
"semi": false
|
|
161
|
+
},
|
|
162
|
+
"husky": {
|
|
163
|
+
"hooks": {
|
|
164
|
+
"commit-msg": "echo '\n(1) Verifying conventional commit format... \n (If this fails, install commitizen and commit with 'git cz' to automate the formatting!)\n----------' && commitlint -E HUSKY_GIT_PARAMS && echo '\n(2) Linting...\n----------' && lint-staged"
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
"lint-staged": {
|
|
168
|
+
"*.{js,ts,tsx}": "eslint --max-warnings 0"
|
|
155
169
|
}
|
|
156
170
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState } from "react"
|
|
2
|
-
import Markdown, {
|
|
2
|
+
import Markdown, { MarkdownToJSX } from "markdown-to-jsx"
|
|
3
3
|
import "./ExpandableText.scss"
|
|
4
4
|
|
|
5
5
|
export interface ExpandableTextProps {
|
|
@@ -11,7 +11,7 @@ export interface ExpandableTextProps {
|
|
|
11
11
|
readMore: string
|
|
12
12
|
readLess: string
|
|
13
13
|
}
|
|
14
|
-
markdownProps?:
|
|
14
|
+
markdownProps?: MarkdownToJSX.Options
|
|
15
15
|
buttonClassName?: string
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import * as React from "react"
|
|
2
|
+
import { GridSection, GridCell } from "../../sections/GridSection"
|
|
3
|
+
import { InfoCard } from "../../blocks/InfoCard"
|
|
2
4
|
|
|
3
5
|
export interface AdditionalFeesProps {
|
|
4
6
|
/** The application fee for the property, rendered in the first block */
|
|
@@ -22,31 +24,31 @@ const AdditionalFees = ({
|
|
|
22
24
|
footerContent,
|
|
23
25
|
strings,
|
|
24
26
|
}: AdditionalFeesProps) => {
|
|
25
|
-
|
|
27
|
+
const hasFooter = footerContent && footerContent?.length > 0
|
|
28
|
+
if (!deposit && !applicationFee && !hasFooter) return <></>
|
|
26
29
|
return (
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
<div className="info-card__columns text-sm">
|
|
30
|
+
<InfoCard title={strings.sectionHeader} className="bg-gray-100 border-0">
|
|
31
|
+
<GridSection columns={2} className={`${hasFooter && "mb-5"}`}>
|
|
30
32
|
{applicationFee && (
|
|
31
|
-
<
|
|
33
|
+
<GridCell>
|
|
32
34
|
<div className="text-base">{strings.applicationFee}</div>
|
|
33
35
|
<div className="text-xl font-bold">{applicationFee}</div>
|
|
34
36
|
{strings.applicationFeeSubtext?.map((appFeeSubtext, index) => (
|
|
35
|
-
<div key={index}>{appFeeSubtext}</div>
|
|
37
|
+
<div key={index} className="text-sm">{appFeeSubtext}</div>
|
|
36
38
|
))}
|
|
37
|
-
</
|
|
39
|
+
</GridCell>
|
|
38
40
|
)}
|
|
39
41
|
{deposit && (
|
|
40
|
-
<
|
|
42
|
+
<GridCell>
|
|
41
43
|
<div className="text-base">{strings.deposit}</div>
|
|
42
44
|
<div className="text-xl font-bold">{deposit}</div>
|
|
43
45
|
{strings.depositSubtext?.map((depositSubtext, index) => (
|
|
44
|
-
<div key={index}>{depositSubtext}</div>
|
|
46
|
+
<div className="text-sm" key={index}>{depositSubtext}</div>
|
|
45
47
|
))}
|
|
46
|
-
</
|
|
48
|
+
</GridCell>
|
|
47
49
|
)}
|
|
48
|
-
</
|
|
49
|
-
{
|
|
50
|
+
</GridSection>
|
|
51
|
+
{hasFooter && (
|
|
50
52
|
<div className="info-card__columns text-sm">
|
|
51
53
|
{footerContent?.map((elem, idx) => (
|
|
52
54
|
<div key={`footer_info_${idx}`} className="info-card__column-2">
|
|
@@ -55,7 +57,7 @@ const AdditionalFees = ({
|
|
|
55
57
|
))}
|
|
56
58
|
</div>
|
|
57
59
|
)}
|
|
58
|
-
</
|
|
60
|
+
</InfoCard>
|
|
59
61
|
)
|
|
60
62
|
}
|
|
61
63
|
|
package/src/text/Description.tsx
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as React from "react"
|
|
2
2
|
import "./Description.scss"
|
|
3
|
-
import Markdown, {
|
|
3
|
+
import Markdown, { MarkdownToJSX } from "markdown-to-jsx"
|
|
4
4
|
|
|
5
5
|
export interface DescriptionProps {
|
|
6
6
|
term: string
|
|
7
7
|
description: any
|
|
8
8
|
dtClassName?: string
|
|
9
9
|
markdown?: boolean
|
|
10
|
-
markdownProps?:
|
|
10
|
+
markdownProps?: MarkdownToJSX.Options
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export const Description = (props: DescriptionProps) => {
|