@bloom-housing/ui-components 10.0.2 → 10.0.3

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 (5) hide show
  1. package/dist/src/headers/PageHeader.stories.js +2 -2
  2. package/dist/src/headers/PageHeader.stories.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/headers/PageHeader.scss +10 -5
  5. package/src/headers/PageHeader.stories.tsx +14 -7
package/dist/src/headers/PageHeader.stories.js CHANGED
@@ -18,10 +18,10 @@ export var inversed = function () { return (React.createElement(PageHeader, { ti
18
18
  export var withContent = function () { return (React.createElement(PageHeader, { title: "Hello World", subtitle: "Here is a subtitle" }, "Here is some content")); };
19
19
  export var withBackgroundImage = function () { return (React.createElement(PageHeader, { title: "Hello World", inverse: true, subtitle: "Here is a page header with a background image", backgroundImage: "/images/banner.png", className: "bg-cover bg-center" })); };
20
20
  export var styleOverrides = function () {
21
- var cssVarsOverride = "\n .page-header-overrides .page-header {\n --background-color: darkgreen;\n --border-color: red;\n --text-color: yellow;\n --title-font-size: 6rem;\n }\n ";
21
+ var cssVarsOverride = "\n .page-header-overrides .page-header {\n --background-color: lightgray;\n --border-color: gray;\n --text-color: black;\n --title-font-size-desktop: 5rem;\n --title-font-size-mobile: 2rem;\n }\n ";
22
22
  return (React.createElement(React.Fragment, null,
23
23
  React.createElement("div", { className: "page-header-overrides" },
24
- React.createElement(PageHeader, { title: "Big Title", subtitle: "Here is a subtitle" }, "Here is some contenta"),
24
+ React.createElement(PageHeader, { title: "Hello World", subtitle: "Here is a subtitle" }, "Here is some content"),
25
25
  React.createElement("style", null, cssVarsOverride)),
26
26
  React.createElement("p", { className: "mt-12 font-semibold" }, "Customized using the following variable overrides:"),
27
27
  React.createElement("pre", null, cssVarsOverride.replace(".page-header-overrides ", ""))));
package/dist/src/headers/PageHeader.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeader.stories.js","sourceRoot":"","sources":["../../../src/headers/PageHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,uBAAuB,MAAM,uBAAuB,CAAA;AAE3D,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,EAAE,EAAE,qBAAqB;IACzB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,uBAAuB;SAC9B;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,GAAG,EAAlC,CAAkC,CAAA;AAEvE,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,GAAG,EAAhE,CAAgE,CAAA;AAElG,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,UAAU,IAAC,KAAK,EAAC,qBAAqB,EAAC,QAAQ,EAAC,oBAAoB,EAAC,OAAO,SAAG,CACjF,EAF6B,CAE7B,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,2BAEhD,CACd,EAJgC,CAIhC,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,cAAM,OAAA,CACvC,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,QAAC,QAAQ,EAAC,+CAA+C,EAAC,eAAe,EAAC,oBAAoB,EAAC,SAAS,EAAC,oBAAoB,GAAE,CACvK,EAFwC,CAExC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,IAAM,eAAe,GAAG,uLAOvB,CAAA;IAED,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,UAAU,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAC,oBAAoB,4BAE9C;YACb,mCAAQ,eAAe,CAAS,CAC5B;QAEN,2BAAG,SAAS,EAAC,qBAAqB,yDAAuD;QAEzF,iCAAM,eAAe,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAO,CAClE,CACJ,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"PageHeader.stories.js","sourceRoot":"","sources":["../../../src/headers/PageHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,uBAAuB,MAAM,uBAAuB,CAAA;AAE3D,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,EAAE,EAAE,qBAAqB;IACzB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,uBAAuB;SAC9B;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,GAAG,EAAlC,CAAkC,CAAA;AAEvE,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,GAAG,EAAhE,CAAgE,CAAA;AAElG,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,UAAU,IAAC,KAAK,EAAC,qBAAqB,EAAC,QAAQ,EAAC,oBAAoB,EAAC,OAAO,SAAG,CACjF,EAF6B,CAE7B,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,2BAEhD,CACd,EAJgC,CAIhC,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,cAAM,OAAA,CACvC,oBAAC,UAAU,IACT,KAAK,EAAC,aAAa,EACnB,OAAO,QACP,QAAQ,EAAC,+CAA+C,EACxD,eAAe,EAAC,oBAAoB,EACpC,SAAS,EAAC,oBAAoB,GAC9B,CACH,EARwC,CAQxC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,IAAM,eAAe,GAAG,sOAQvB,CAAA;IAED,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,2BAEhD;YACb,mCAAQ,eAAe,CAAS,CAC5B;QAEN,2BAAG,SAAS,EAAC,qBAAqB,yDAAuD;QAEzF,iCAAM,eAAe,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAO,CAClE,CACJ,CAAA;AACH,CAAC,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "10.0.2",
3
+ "version": "10.0.3",
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",
package/src/headers/PageHeader.scss CHANGED
@@ -7,16 +7,19 @@
7
7
  --inverse-background-color: var(--bloom-color-primary-darker);
8
8
  --inverse-border-color: var(--bloom-color-primary);
9
9
  --inverse-text-color: var(--bloom-color-white);
10
- --title-font-size: var(--bloom-font-size-4xl);
10
+ --title-font-size-desktop: var(--bloom-font-size-4xl);
11
+ --title-font-size-mobile: var(--bloom-font-size-2xl);
12
+ --padding-desktop: var(--bloom-s10) 0;
13
+ --padding-mobile: var(--bloom-s8) 0;
11
14
 
12
15
  /* Base Styles */
13
- padding: var(--bloom-s8) 0;
16
+ padding: var(--padding-mobile);
14
17
  background-color: var(--background-color);
15
18
  border-top: var(--bloom-border-1) solid var(--border-color);
16
19
  color: var(--text-color);
17
20
 
18
21
  @media (min-width: $screen-md) {
19
- padding: var(--bloom-s10) 0;
22
+ padding: var(--padding-desktop);
20
23
  }
21
24
 
22
25
  /* Variants */
@@ -46,17 +49,19 @@
46
49
  }
47
50
 
48
51
  .page-header__title {
52
+ font-size: var(--title-font-size-mobile);
49
53
  text-align: center;
50
54
  font-family: var(--text-font-family);
51
- word-break: break-all;
55
+ word-break: break-word;
52
56
 
53
57
  @media (min-width: $screen-md) {
54
- font-size: var(--title-font-size);
58
+ font-size: var(--title-font-size-desktop);
55
59
  text-align: left;
56
60
  }
57
61
  }
58
62
 
59
63
  .page-header__lead {
64
+ text-align: center;
60
65
  font-family: var(--text-font-family);
61
66
  max-width: var(--bloom-width-5xl);
62
67
  }
package/src/headers/PageHeader.stories.tsx CHANGED
@@ -29,24 +29,31 @@ export const withContent = () => (
29
29
  )
30
30
 
31
31
  export const withBackgroundImage = () => (
32
- <PageHeader title="Hello World" inverse subtitle="Here is a page header with a background image" backgroundImage="/images/banner.png" className="bg-cover bg-center"/>
32
+ <PageHeader
33
+ title="Hello World"
34
+ inverse
35
+ subtitle="Here is a page header with a background image"
36
+ backgroundImage="/images/banner.png"
37
+ className="bg-cover bg-center"
38
+ />
33
39
  )
34
40
 
35
41
  export const styleOverrides = () => {
36
42
  const cssVarsOverride = `
37
43
  .page-header-overrides .page-header {
38
- --background-color: darkgreen;
39
- --border-color: red;
40
- --text-color: yellow;
41
- --title-font-size: 6rem;
44
+ --background-color: lightgray;
45
+ --border-color: gray;
46
+ --text-color: black;
47
+ --title-font-size-desktop: 5rem;
48
+ --title-font-size-mobile: 2rem;
42
49
  }
43
50
  `
44
51
 
45
52
  return (
46
53
  <>
47
54
  <div className="page-header-overrides">
48
- <PageHeader title="Big Title" subtitle="Here is a subtitle">
49
- Here is some contenta
55
+ <PageHeader title="Hello World" subtitle="Here is a subtitle">
56
+ Here is some content
50
57
  </PageHeader>
51
58
  <style>{cssVarsOverride}</style>
52
59
  </div>