@bloom-housing/ui-components 5.1.1-alpha.14 → 5.1.1-alpha.15
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 +8 -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/overlays/Modal.scss +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.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)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @bloom-housing/ui-components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [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)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @bloom-housing/ui-components
|
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.15",
|
|
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": "355997fff9ae882fdf87ea19d12b61135bfc03d6"
|
|
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/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);
|