@bloom-housing/ui-components 5.1.1-alpha.13 → 5.1.1-alpha.16
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 +24 -0
- package/package.json +2 -2
- package/src/blocks/MediaCard.docs.mdx +37 -0
- package/src/blocks/MediaCard.scss +10 -11
- package/src/blocks/MediaCard.tsx +4 -4
- package/src/locales/general.json +2 -1
- package/src/navigation/ProgressNav.docs.mdx +47 -0
- package/src/navigation/ProgressNav.scss +101 -56
- package/src/navigation/ProgressNav.tsx +26 -14
- package/src/overlays/Modal.scss +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
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.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.15...@bloom-housing/ui-components@5.1.1-alpha.16) (2022-08-30)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @bloom-housing/ui-components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [5.1.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.14...@bloom-housing/ui-components@5.1.1-alpha.15) (2022-08-29)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @bloom-housing/ui-components
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [5.1.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.13...@bloom-housing/ui-components@5.1.1-alpha.14) (2022-08-29)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @bloom-housing/ui-components
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [5.1.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.12...@bloom-housing/ui-components@5.1.1-alpha.13) (2022-08-26)
|
|
7
31
|
|
|
8
32
|
|
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.16",
|
|
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": "a02e4f9873ae815124463a6a50d91d8bd7c93346"
|
|
114
114
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
|
|
2
|
+
import { MediaCard } from "./MediaCard"
|
|
3
|
+
|
|
4
|
+
# Media Card
|
|
5
|
+
|
|
6
|
+
The media card component is used to describe the title and, optionally, subtitle of a corresponding piece of media. The header section and title of the media card is clickable and displays the media via the required handleClick prop.
|
|
7
|
+
|
|
8
|
+
<Canvas>
|
|
9
|
+
<Story id="blocks-media-card--with-title-and-subtitle" />
|
|
10
|
+
</Canvas>
|
|
11
|
+
<Canvas>
|
|
12
|
+
<Story id="blocks-media-card--with-just-title" />
|
|
13
|
+
</Canvas>
|
|
14
|
+
<Canvas>
|
|
15
|
+
<Story id="blocks-media-card--with-custom-icon" />
|
|
16
|
+
</Canvas>
|
|
17
|
+
|
|
18
|
+
## Component Properties
|
|
19
|
+
|
|
20
|
+
<ArgsTable of={MediaCard} />
|
|
21
|
+
|
|
22
|
+
## Theming Variables
|
|
23
|
+
|
|
24
|
+
You can apply CSS variables to the `.media-card` selector to customize the appearance of the component.
|
|
25
|
+
|
|
26
|
+
| Name | Type | Description | Default |
|
|
27
|
+
| ----------------------- | ----- | -------------------------------------------------------- | ----------------------------------------------- |
|
|
28
|
+
| `--header-height` | Size | The height of the header section | `--bloom-s24` |
|
|
29
|
+
| `--title-color` | Color | The color of media title and header section | `--bloom-color-primary-dark` |
|
|
30
|
+
| `--title-font-size` | Size | The font size of media title | `--bloom-font-size-base` |
|
|
31
|
+
| `--title-font-family` | Size | The font family of the media title | `--bloom-font-sans` |
|
|
32
|
+
| `--title-font-spacing` | Size | The letter spacing of media title | `--bloom-letter-spacing-wide` |
|
|
33
|
+
| `--subtitle-font-size` | Size | The font size of the media subtitle | `--bloom-font-size-tiny` |
|
|
34
|
+
| `--content-bg-color` | Color | The background color of card body | `--bloom-color-gray-200` |
|
|
35
|
+
| `--card-border` | Size | The card border settings (thickness, border type, color) | `--bloom-border-1 solid --bloom-color-gray-450` |
|
|
36
|
+
| `--card-border-rounded` | Size | The card corner radius | `--bloom-rounded` |
|
|
37
|
+
| `--card-padding` | Size | The padding of the card body | `--bloom-s6` |
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
.media-card {
|
|
2
|
+
--header-height: var(--bloom-s24);
|
|
2
3
|
--title-color: var(--bloom-color-primary-dark);
|
|
3
4
|
--title-font-size: var(--bloom-font-size-base);
|
|
4
5
|
--title-font-family: var(--bloom-font-sans);
|
|
@@ -8,33 +9,30 @@
|
|
|
8
9
|
--card-border: var(--bloom-border-1) solid var(--bloom-color-gray-450);
|
|
9
10
|
--card-border-rounded: var(--bloom-rounded);
|
|
10
11
|
--card-padding: var(--bloom-s6);
|
|
11
|
-
--max-width: var(--bloom-width-lg);
|
|
12
|
-
--background-color: var(--bloom-color-white);
|
|
13
|
-
max-width: var(--max-width);
|
|
14
12
|
border: var(--card-border);
|
|
15
13
|
border-radius: var(--card-border-rounded);
|
|
16
14
|
background-color: var(--content-bg-color);
|
|
17
|
-
max-width: var(--max-width);
|
|
18
15
|
}
|
|
19
16
|
|
|
20
17
|
.media-card__header {
|
|
21
|
-
|
|
22
|
-
padding-bottom: var(--card-padding);
|
|
18
|
+
height: var(--header-height);
|
|
23
19
|
border-top-right-radius: calc(var(--card-border-rounded) - var(--bloom-border-1));
|
|
24
20
|
border-top-left-radius: calc(var(--card-border-rounded) - var(--bloom-border-1));
|
|
25
21
|
background-color: var(--title-color);
|
|
26
22
|
cursor: pointer;
|
|
23
|
+
position: relative;
|
|
24
|
+
svg {
|
|
25
|
+
position: absolute;
|
|
26
|
+
// Explicit values since reflective of icon size
|
|
27
|
+
top: calc(50% - 1.5rem);
|
|
28
|
+
left: calc(50% - 1.5rem);
|
|
29
|
+
}
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
.media-card__header-container {
|
|
30
33
|
width: 100%;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
|
-
.media-card__icon-container {
|
|
34
|
-
display: flex;
|
|
35
|
-
justify-content: center;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
36
|
.media-card__body {
|
|
39
37
|
padding: var(--card-padding);
|
|
40
38
|
}
|
|
@@ -44,6 +42,7 @@
|
|
|
44
42
|
font-size: var(--title-font-size);
|
|
45
43
|
font-family: var(--title-font-family);
|
|
46
44
|
letter-spacing: var(--title-font-spacing);
|
|
45
|
+
text-align: left;
|
|
47
46
|
font-weight: 700;
|
|
48
47
|
}
|
|
49
48
|
|
package/src/blocks/MediaCard.tsx
CHANGED
|
@@ -22,13 +22,13 @@ const MediaCard = (props: MediaCardProps) => {
|
|
|
22
22
|
aria-label={"Launch video"}
|
|
23
23
|
>
|
|
24
24
|
<div className="media-card__header">
|
|
25
|
-
<
|
|
26
|
-
<Icon symbol={props.icon ?? faCirclePlay} size="2xl" fill="white" />
|
|
27
|
-
</div>
|
|
25
|
+
<Icon symbol={props.icon ?? faCirclePlay} size="2xl" fill="white" />
|
|
28
26
|
</div>
|
|
29
27
|
</button>
|
|
30
28
|
<div className="media-card__body">
|
|
31
|
-
<
|
|
29
|
+
<button onClick={props.handleClick}>
|
|
30
|
+
<h3 className="media-card__title">{props.title}</h3>
|
|
31
|
+
</button>
|
|
32
32
|
<div className={"media-card__subtitle"}>{props.subtitle}</div>
|
|
33
33
|
</div>
|
|
34
34
|
</div>
|
package/src/locales/general.json
CHANGED
|
@@ -789,7 +789,8 @@
|
|
|
789
789
|
"pageTitle.welcomeEnglish": "Welcome",
|
|
790
790
|
"pageTitle.welcomeSpanish": "Bienvenido",
|
|
791
791
|
"pageTitle.welcomeVietnamese": "Tiếng Việt",
|
|
792
|
-
"progressNav.
|
|
792
|
+
"progressNav.completed": "completed",
|
|
793
|
+
"progressNav.notCompleted": "not completed",
|
|
793
794
|
"progressNav.srHeading": "Progress",
|
|
794
795
|
"region.name": "Local Region",
|
|
795
796
|
"states.AK": "Alaska",
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
|
|
2
|
+
import { ProgressNav } from "./ProgressNav"
|
|
3
|
+
|
|
4
|
+
# Progress Nav
|
|
5
|
+
|
|
6
|
+
The progress nav component is used to illustrate progress in a multi-step process. It displays the step labels, and uses color and layout to indicate which steps are completed, in-progress, and unstarted.
|
|
7
|
+
|
|
8
|
+
## Dot Style
|
|
9
|
+
|
|
10
|
+
<Canvas>
|
|
11
|
+
<Story id="navigation-progress-nav--default" />
|
|
12
|
+
</Canvas>
|
|
13
|
+
|
|
14
|
+
## Bar Style
|
|
15
|
+
|
|
16
|
+
<Canvas>
|
|
17
|
+
<Story id="navigation-progress-nav--bar-style" />
|
|
18
|
+
</Canvas>
|
|
19
|
+
|
|
20
|
+
You can apply CSS variables to the `.progrss-nav` selector to customize the appearance of the component.
|
|
21
|
+
|
|
22
|
+
| Name | Type | Description | Default |
|
|
23
|
+
| ----------------------------- | ----- | ------------------------------------------- | ------------------------------ |
|
|
24
|
+
| `--completed-step-color` | Color | The color of completed step | `--bloom-color-primary-darker` |
|
|
25
|
+
| `--completed-step-font-color` | Color | The color of completed step label | `--bloom-color-primary-darker` |
|
|
26
|
+
| `--active-step-color` | Color | The color of active step | `--bloom-color-primary` |
|
|
27
|
+
| `--active-step-font-color` | Color | The color of active step label | `--bloom-color-primary-darker` |
|
|
28
|
+
| `--future-step-color` | Color | The color of future step | `--bloom-color-gray-450` |
|
|
29
|
+
| `--future-step-font-color` | Color | The color of future step label | `--bloom-color-gray-750` |
|
|
30
|
+
| | | | |
|
|
31
|
+
| `--dot-size` | Size | The diameter of each dot step | `--bloom-s3` |
|
|
32
|
+
| `--dot-padding-left-mobile` | Size | The padding-left of each dot step on mobile | `--bloom-s2` |
|
|
33
|
+
| `--dot-label-padding-top` | Size | The padding-top of each dot step label | `--bloom-s4` |
|
|
34
|
+
| `--dot-label-padding-left` | Size | The padding-left of each dot step label | `--bloom-s1` |
|
|
35
|
+
| `--dot-font-size-desktop` | Size | The font size of dot step labels on desktop | `--bloom-font-size-base` |
|
|
36
|
+
| `--dot-font-size-mobile` | Size | The font size of dot step labels on mobile | `--bloom-font-size-2xs` |
|
|
37
|
+
| `--dot-line-color` | Color | The color of the dot connecting line | `--bloom-color-gray-450` |
|
|
38
|
+
| `--dot-active-font-weight` | Size | The font weight of active dot step label | `600` |
|
|
39
|
+
| `--dot-text-transform` | Size | The capitalization of dot step label | `capitalize` |
|
|
40
|
+
| | | | |
|
|
41
|
+
| `--bar-height` | Size | The height of bar step | `--bloom-s4` |
|
|
42
|
+
| `--bar-spacing` | Size | The spacing between each bar step | `--bloom-s0_5` |
|
|
43
|
+
| `--bar-label-padding-top` | Size | The padding-top of each bar step label | `--bloom-s2` |
|
|
44
|
+
| `--bar-label-padding-left` | Size | The padding-left of each bar step label | `--bloom-s0_5` |
|
|
45
|
+
| `--bar-font-size` | Size | The font size of bar step labels on desktop | `--bloom-font-size-base` |
|
|
46
|
+
| `--bar-active-font-weight` | Size | The font weight of active bar step label | `600` |
|
|
47
|
+
| `--bar-text-transform` | Size | The capitalization of dot step label | `capitalize` |
|
|
@@ -1,40 +1,54 @@
|
|
|
1
1
|
.progress-nav {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
2
|
+
--completed-step-color: var(--bloom-color-gray-850);
|
|
3
|
+
--completed-step-font-color: var(--bloom-color-gray-850);
|
|
4
|
+
--active-step-color: var(--bloom-color-primary);
|
|
5
|
+
--active-step-font-color: var(--bloom-color-gray-900);
|
|
6
|
+
--future-step-color: var(--bloom-color-gray-450);
|
|
7
|
+
--future-step-font-color: var(--bloom-color-gray-750);
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
--dot-size: var(--bloom-s3);
|
|
10
|
+
--dot-padding-left-mobile: var(--bloom-s2);
|
|
11
|
+
--dot-label-padding-top: var(--bloom-s4);
|
|
12
|
+
--dot-label-padding-left: var(--bloom-s1);
|
|
13
|
+
--dot-font-size-desktop: var(--bloom-font-size-base);
|
|
14
|
+
--dot-font-size-mobile: var(--bloom-font-size-2xs);
|
|
15
|
+
--dot-line-color: var(--bloom-color-gray-450);
|
|
16
|
+
--dot-active-font-weight: bold;
|
|
17
|
+
--dot-text-transform: capitalize;
|
|
18
|
+
|
|
19
|
+
--bar-height: var(--bloom-s4);
|
|
20
|
+
--bar-spacing: var(--bloom-s0_5);
|
|
21
|
+
--bar-label-padding-top: var(--bloom-s2);
|
|
22
|
+
--bar-label-padding-left: var(--bloom-s0_5);
|
|
23
|
+
--bar-font-size: var(--bloom-font-size-base);
|
|
24
|
+
--bar-active-font-weight: bold;
|
|
25
|
+
--bar-text-transform: capitalize;
|
|
21
26
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
display: table;
|
|
28
|
+
width: 100%;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.progress-nav__dot-item {
|
|
32
|
+
font-size: var(--dot-font-size-mobile);
|
|
33
|
+
padding: var(--dot-size) var(--dot-padding-left-mobile);
|
|
34
|
+
position: relative;
|
|
35
|
+
text-align: center;
|
|
36
|
+
text-transform: var(--dot-text-transform);
|
|
37
|
+
display: table-cell;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
float: none;
|
|
40
|
+
@media (min-width: $screen-md) {
|
|
41
|
+
font-size: var(--dot-font-size-desktop);
|
|
42
|
+
padding: 0rem;
|
|
26
43
|
}
|
|
27
44
|
|
|
28
45
|
&:before {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
@apply border-white;
|
|
36
|
-
@apply rounded-full;
|
|
37
|
-
@apply top-0;
|
|
46
|
+
position: absolute;
|
|
47
|
+
height: var(--dot-size);
|
|
48
|
+
width: var(--dot-size);
|
|
49
|
+
background-color: var(--completed-step-color);
|
|
50
|
+
border-radius: 50%;
|
|
51
|
+
top: 0;
|
|
38
52
|
left: 50%;
|
|
39
53
|
content: "";
|
|
40
54
|
transform: translateX(-50%);
|
|
@@ -42,10 +56,10 @@
|
|
|
42
56
|
}
|
|
43
57
|
|
|
44
58
|
&:after {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
59
|
+
position: absolute;
|
|
60
|
+
background-color: var(--dot-line-color);
|
|
61
|
+
width: 100%;
|
|
62
|
+
left: 0;
|
|
49
63
|
top: 0.4rem;
|
|
50
64
|
content: "";
|
|
51
65
|
height: 1px;
|
|
@@ -59,45 +73,76 @@
|
|
|
59
73
|
|
|
60
74
|
&:last-of-type {
|
|
61
75
|
&:after {
|
|
62
|
-
|
|
76
|
+
left: auto;
|
|
63
77
|
right: 50%;
|
|
64
78
|
}
|
|
65
79
|
}
|
|
80
|
+
.progress-nav__item-container {
|
|
81
|
+
padding-top: var(--dot-label-padding-top);
|
|
82
|
+
padding-left: var(--dot-label-padding-left);
|
|
83
|
+
color: var(--completed-step-font-color);
|
|
84
|
+
display: block;
|
|
85
|
+
position: relative;
|
|
86
|
+
pointer-events: none;
|
|
87
|
+
cursor: default;
|
|
88
|
+
z-index: 3;
|
|
89
|
+
}
|
|
66
90
|
|
|
67
91
|
&.is-active {
|
|
68
92
|
&:before {
|
|
69
|
-
|
|
70
|
-
@apply w-3;
|
|
71
|
-
@apply bg-primary;
|
|
72
|
-
@apply top-0;
|
|
93
|
+
background-color: var(--active-step-color);
|
|
73
94
|
}
|
|
74
|
-
|
|
75
95
|
.progress-nav__item-container {
|
|
76
|
-
|
|
77
|
-
|
|
96
|
+
color: var(--active-step-font-color);
|
|
97
|
+
font-weight: var(--dot-active-font-weight);
|
|
78
98
|
}
|
|
79
99
|
}
|
|
80
100
|
|
|
81
101
|
&.is-disabled {
|
|
82
102
|
&:before {
|
|
83
|
-
|
|
84
|
-
@apply w-3;
|
|
85
|
-
@apply bg-gray-450;
|
|
86
|
-
@apply top-0;
|
|
103
|
+
background-color: var(--future-step-color);
|
|
87
104
|
}
|
|
88
|
-
|
|
89
105
|
.progress-nav__item-container {
|
|
90
|
-
|
|
91
|
-
@apply cursor-default;
|
|
106
|
+
color: var(--future-step-font-color);
|
|
92
107
|
}
|
|
93
108
|
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.progress-nav__bar {
|
|
112
|
+
border-spacing: var(--bar-spacing);
|
|
113
|
+
table-layout: fixed;
|
|
114
|
+
}
|
|
94
115
|
|
|
116
|
+
.progress-nav__bar-item {
|
|
117
|
+
// drop the labels on mobile view
|
|
118
|
+
font-size: 0;
|
|
119
|
+
padding-top: var(--bar-label-padding-top);
|
|
120
|
+
padding-left: var(--bar-label-padding-left);
|
|
121
|
+
position: relative;
|
|
122
|
+
display: table-cell;
|
|
123
|
+
white-space: nowrap;
|
|
124
|
+
float: none;
|
|
125
|
+
max-width: 20%;
|
|
126
|
+
border-top-width: var(--bar-height);
|
|
127
|
+
border-top-color: var(--completed-step-color);
|
|
128
|
+
text-transform: var(--bar-text-transform);
|
|
129
|
+
@media (min-width: $screen-md) {
|
|
130
|
+
font-size: var(--bar-font-size);
|
|
131
|
+
}
|
|
132
|
+
&.is-active {
|
|
133
|
+
border-top-color: var(--active-step-color);
|
|
134
|
+
.progress-nav__item-container {
|
|
135
|
+
font-weight: var(--bar-active-font-weight);
|
|
136
|
+
color: var(--active-step-font-color);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
&.is-disabled {
|
|
140
|
+
border-top-color: var(--future-step-color);
|
|
141
|
+
.progress-nav__item-container {
|
|
142
|
+
color: var(--future-step-font-color);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
95
145
|
.progress-nav__item-container {
|
|
96
|
-
|
|
97
|
-
@apply pl-1;
|
|
98
|
-
@apply text-gray-700;
|
|
99
|
-
@apply block;
|
|
100
|
-
@apply relative;
|
|
101
|
-
z-index: 3;
|
|
146
|
+
color: var(--completed-step-font-color);
|
|
102
147
|
}
|
|
103
148
|
}
|
|
@@ -2,12 +2,15 @@ import React from "react"
|
|
|
2
2
|
import "./ProgressNav.scss"
|
|
3
3
|
import { t } from "../helpers/translator"
|
|
4
4
|
|
|
5
|
+
type ProgressNavStyle = "bar" | "dot"
|
|
6
|
+
|
|
5
7
|
const ProgressNavItem = (props: {
|
|
6
8
|
section: number
|
|
7
9
|
currentPageSection: number
|
|
8
10
|
completedSections: number
|
|
9
11
|
label: string
|
|
10
12
|
mounted: boolean
|
|
13
|
+
style: ProgressNavStyle
|
|
11
14
|
}) => {
|
|
12
15
|
let bgColor = "is-disabled"
|
|
13
16
|
if (props.mounted) {
|
|
@@ -18,18 +21,24 @@ const ProgressNavItem = (props: {
|
|
|
18
21
|
}
|
|
19
22
|
}
|
|
20
23
|
|
|
21
|
-
const
|
|
22
|
-
props.section
|
|
23
|
-
<span className="sr-only">{t("progressNav.
|
|
24
|
-
|
|
25
|
-
""
|
|
26
|
-
|
|
24
|
+
const srTextBuilder = (): string | React.ReactFragment => {
|
|
25
|
+
if (props.section < props.currentPageSection) {
|
|
26
|
+
return <span className="sr-only">{t("progressNav.completed")}</span>
|
|
27
|
+
} else if (props.section > props.currentPageSection) {
|
|
28
|
+
return <span className="sr-only">{t("progressNav.notCompleted")}</span>
|
|
29
|
+
} else {
|
|
30
|
+
return ""
|
|
31
|
+
}
|
|
32
|
+
}
|
|
27
33
|
|
|
28
34
|
return (
|
|
29
|
-
<li className={`progress-
|
|
30
|
-
<span
|
|
31
|
-
{
|
|
32
|
-
{
|
|
35
|
+
<li className={`progress-nav__${props.style}-item ${bgColor}`}>
|
|
36
|
+
<span
|
|
37
|
+
aria-disabled={bgColor === "is-disabled"}
|
|
38
|
+
aria-current={bgColor === "is-active"}
|
|
39
|
+
className={"progress-nav__item-container"}
|
|
40
|
+
>
|
|
41
|
+
{props.label} {srTextBuilder()}
|
|
33
42
|
</span>
|
|
34
43
|
</li>
|
|
35
44
|
)
|
|
@@ -40,23 +49,26 @@ const ProgressNav = (props: {
|
|
|
40
49
|
completedSections: number
|
|
41
50
|
labels: string[]
|
|
42
51
|
mounted: boolean
|
|
52
|
+
style?: ProgressNavStyle
|
|
43
53
|
}) => {
|
|
54
|
+
let navClasses = "progress-nav"
|
|
55
|
+
if (props.style === "bar") navClasses += " progress-nav__bar"
|
|
44
56
|
return (
|
|
45
|
-
<div>
|
|
57
|
+
<div aria-label="progress">
|
|
46
58
|
<h2 className="sr-only">{t("progressNav.srHeading")}</h2>
|
|
47
|
-
<
|
|
59
|
+
<ol className={!props.mounted ? "invisible" : navClasses}>
|
|
48
60
|
{props.labels.map((label, i) => (
|
|
49
61
|
<ProgressNavItem
|
|
50
62
|
key={label}
|
|
51
|
-
// Sections are 1-indexed
|
|
52
63
|
section={i + 1}
|
|
53
64
|
currentPageSection={props.currentPageSection}
|
|
54
65
|
completedSections={props.completedSections}
|
|
55
66
|
label={label}
|
|
56
67
|
mounted={props.mounted}
|
|
68
|
+
style={props.style ?? "dot"}
|
|
57
69
|
/>
|
|
58
70
|
))}
|
|
59
|
-
</
|
|
71
|
+
</ol>
|
|
60
72
|
</div>
|
|
61
73
|
)
|
|
62
74
|
}
|
package/src/overlays/Modal.scss
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
.modal__title {
|
|
35
35
|
padding-block: var(--bloom-s6) var(--bloom-s3);
|
|
36
|
-
padding-inline: var(--bloom-s6);
|
|
36
|
+
padding-inline: var(--bloom-s6) var(--bloom-s12);
|
|
37
37
|
color: var(--title-color);
|
|
38
38
|
font-size: var(--title-font-size);
|
|
39
39
|
font-family: var(--title-font-family);
|