@bloom-housing/ui-components 5.1.1-alpha.4 → 5.1.1-alpha.7
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/CHANGELOG.md +30 -0
- package/index.ts +1 -0
- package/package.json +2 -2
- package/src/blocks/ImageCard.scss +1 -1
- package/src/headers/StepHeader.docs.mdx +38 -0
- package/src/headers/StepHeader.scss +40 -0
- package/src/headers/StepHeader.tsx +30 -0
- package/src/page_components/listing/ListingCard.scss +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,36 @@
|
|
|
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.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.6...@bloom-housing/ui-components@5.1.1-alpha.7) (2022-08-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* image width fix for tablet screen sizes ([#2970](https://github.com/bloom-housing/bloom/issues/2970)) ([feac019](https://github.com/bloom-housing/bloom/commit/feac019b25a476221a7ad77518d1fa185a75b27f))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [5.1.1-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.5...@bloom-housing/ui-components@5.1.1-alpha.6) (2022-08-16)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @bloom-housing/ui-components
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [5.1.1-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.4...@bloom-housing/ui-components@5.1.1-alpha.5) (2022-08-16)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* ensure listing card link region covers image tags ([#2943](https://github.com/bloom-housing/bloom/issues/2943)) ([ebc8d48](https://github.com/bloom-housing/bloom/commit/ebc8d48556b587a4ad8fc9bc294be54b69e88462))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
6
36
|
## [5.1.1-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.3...@bloom-housing/ui-components@5.1.1-alpha.4) (2022-08-12)
|
|
7
37
|
|
|
8
38
|
|
package/index.ts
CHANGED
|
@@ -52,6 +52,7 @@ export * from "./src/global/ApplicationStatusType"
|
|
|
52
52
|
export * from "./src/headers/Hero"
|
|
53
53
|
export * from "./src/headers/PageHeader"
|
|
54
54
|
export * from "./src/headers/SiteHeader"
|
|
55
|
+
export * from "./src/headers/StepHeader"
|
|
55
56
|
export * from "./src/headers/Heading"
|
|
56
57
|
|
|
57
58
|
/* Helpers */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bloom-housing/ui-components",
|
|
3
|
-
"version": "5.1.1-alpha.
|
|
3
|
+
"version": "5.1.1-alpha.7",
|
|
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": "
|
|
113
|
+
"gitHead": "fd80654f0c4e2b3449734cb6ac7927a078304f47"
|
|
114
114
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
|
|
2
|
+
import { StepHeader } from "./StepHeader"
|
|
3
|
+
|
|
4
|
+
# Step Header
|
|
5
|
+
|
|
6
|
+
The step header component is used to quickly describe progress in a multi-step process. It displays the current step number, the total steps in the process, and the name of the current step. The component also requires the step preposition to be passed in along with any custom css classes if the use case requires customization.
|
|
7
|
+
|
|
8
|
+
<Canvas>
|
|
9
|
+
<Story id="headers-step-header--basic-dynamic" />
|
|
10
|
+
</Canvas>
|
|
11
|
+
|
|
12
|
+
## Varying Process Lengths
|
|
13
|
+
|
|
14
|
+
<Canvas>
|
|
15
|
+
<Story id="headers-step-header--final-step" />
|
|
16
|
+
</Canvas>
|
|
17
|
+
|
|
18
|
+
<Canvas>
|
|
19
|
+
<Story id="headers-step-header--double-digits" />
|
|
20
|
+
</Canvas>
|
|
21
|
+
|
|
22
|
+
<Canvas>
|
|
23
|
+
<Story id="headers-step-header--triple-digits" />
|
|
24
|
+
</Canvas>
|
|
25
|
+
|
|
26
|
+
You can apply CSS variables to the `.step-header` selector to customize the appearance of the component.
|
|
27
|
+
|
|
28
|
+
| Name | Type | Description | Default |
|
|
29
|
+
| ----------------------- | ----- | ------------------------------------------------------------------ | ---------------------------- |
|
|
30
|
+
| `--number-color` | Color | The color of the current step number | `--bloom-color-white` |
|
|
31
|
+
| `--circle-color` | Color | The background color of the number circle | `--bloom-color-primary` |
|
|
32
|
+
| `--circle-desktop-size` | Size | The diameter of the number circle on desktop | `--bloom-s8` |
|
|
33
|
+
| `--circle-mobile-size` | Size | The diameter of the number circle on mobile | `--bloom-s6` |
|
|
34
|
+
| `-font-desktop-size` | Size | The font size of the numbers and text on desktop | `--bloom-font-size-base-alt` |
|
|
35
|
+
| `--font-mobile-size` | Size | The font size of the numbers and text on mobile | `--bloom-font-size-base` |
|
|
36
|
+
| `-circle-x-padding` | Size | The horizontal padding between current step number and circle edge | `--bloom-s0_5` |
|
|
37
|
+
| `--title-spacing` | Size | The padding between elements of the header | `--bloom-s1_5` |
|
|
38
|
+
| `--label-font-weight` | Size | The font weight of the current step label | `600` |
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
.step-header {
|
|
2
|
+
--number-color: var(--bloom-color-white);
|
|
3
|
+
--circle-color: var(--bloom-color-primary);
|
|
4
|
+
--circle-desktop-size: var(--bloom-s8);
|
|
5
|
+
--circle-mobile-size: var(--bloom-s6);
|
|
6
|
+
--font-desktop-size: var(--bloom-font-size-base-alt);
|
|
7
|
+
--font-mobile-size: var(--bloom-font-size-base);
|
|
8
|
+
--circle-x-padding: var(--bloom-s0_5);
|
|
9
|
+
--title-spacing: var(--bloom-s1_5);
|
|
10
|
+
--label-font-weight: 600;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-wrap: wrap;
|
|
13
|
+
align-items: center;
|
|
14
|
+
font-size: var(--font-mobile-size);
|
|
15
|
+
@media (min-width: $screen-md) {
|
|
16
|
+
font-size: var(--font-desktop-size);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.step-header__circle-number {
|
|
21
|
+
display: flex;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
align-items: center;
|
|
24
|
+
background-color: var(--circle-color);
|
|
25
|
+
color: var(--number-color);
|
|
26
|
+
min-width: var(--circle-mobile-size);
|
|
27
|
+
height: var(--circle-mobile-size);
|
|
28
|
+
@media (min-width: $screen-md) {
|
|
29
|
+
min-width: var(--circle-desktop-size);
|
|
30
|
+
height: var(--circle-desktop-size);
|
|
31
|
+
}
|
|
32
|
+
padding: 0rem var(--circle-x-padding);
|
|
33
|
+
margin-right: var(--title-spacing);
|
|
34
|
+
border-radius: 50%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.step-header__title {
|
|
38
|
+
margin-left: var(--title-spacing);
|
|
39
|
+
font-weight: var(--label-font-weight);
|
|
40
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import "./StepHeader.scss"
|
|
3
|
+
|
|
4
|
+
export interface StepHeaderProps {
|
|
5
|
+
currentStep: number
|
|
6
|
+
totalSteps: number
|
|
7
|
+
stepPreposition: string
|
|
8
|
+
stepLabeling: string[]
|
|
9
|
+
className?: string
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const StepHeader = ({
|
|
13
|
+
currentStep,
|
|
14
|
+
totalSteps,
|
|
15
|
+
stepPreposition,
|
|
16
|
+
stepLabeling,
|
|
17
|
+
className,
|
|
18
|
+
}: StepHeaderProps) => {
|
|
19
|
+
return (
|
|
20
|
+
<div className={`step-header ${className}`}>
|
|
21
|
+
<div className="step-header__circle-number">{currentStep}</div>
|
|
22
|
+
<div>{`${stepPreposition} ${totalSteps}`}</div>
|
|
23
|
+
<div className="step-header__title">
|
|
24
|
+
{stepLabeling[Math.min(currentStep - 1, stepLabeling.length - 1)]}
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export { StepHeader as default, StepHeader }
|