@axos-web-dev/shared-components 1.0.100-dev.76 → 1.0.100-dev.76-feature-lp-logos

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 (6) hide show
  1. package/dist/LandingPageHeader/LandingPageHeader.css.d.ts +19 -1
  2. package/dist/LandingPageHeader/LandingPageHeader.css.js +6 -6
  3. package/dist/LandingPageHeader/LandingPageHeader.d.ts +3 -1
  4. package/dist/LandingPageHeader/LandingPageHeader.js +42 -16
  5. package/dist/assets/LandingPageHeader/LandingPageHeader.css +27 -15
  6. package/package.json +1 -1
package/dist/LandingPageHeader/LandingPageHeader.css.d.ts CHANGED
@@ -9,10 +9,28 @@ export declare const lp_theme: import('@vanilla-extract/recipes').RuntimeFn<{
9
9
  tertiary: {
10
10
  background: `var(--${string})`;
11
11
  };
12
+ quaternary: {
13
+ background: `var(--${string})`;
14
+ };
12
15
  };
13
16
  }>;
14
17
  export declare const lp_container: string;
15
18
  export declare const spb_container: string;
16
19
  export declare const lp_hover: string;
17
20
  export declare const spb_hover: string;
18
- export declare const svg_fill: string;
21
+ export declare const svg_fill: import('@vanilla-extract/recipes').RuntimeFn<{
22
+ variant: {
23
+ primary: {
24
+ fill: `var(--${string})`;
25
+ };
26
+ secondary: {
27
+ fill: `var(--${string})`;
28
+ };
29
+ tertiary: {
30
+ fill: `var(--${string})`;
31
+ };
32
+ quaternary: {
33
+ fill: `var(--${string})`;
34
+ };
35
+ };
36
+ }>;
package/dist/LandingPageHeader/LandingPageHeader.css.js CHANGED
@@ -4,12 +4,12 @@ import '../assets/LandingPageHeader/LandingPageHeader.css';import '../assets/the
4
4
  /* empty css */
5
5
  /* empty css */
6
6
  import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
7
- var lp_theme = createRuntimeFn({ defaultClassName: "_1o1hxre0", variantClassNames: { variant: { primary: "_1o1hxre1", secondary: "_1o1hxre2", tertiary: "_1o1hxre3" } }, defaultVariants: {}, compoundVariants: [] });
8
- var lp_container = "_1o1hxre4";
9
- var spb_container = "_1o1hxre5";
10
- var lp_hover = "_1o1hxre6";
11
- var spb_hover = "_1o1hxre7";
12
- var svg_fill = "_1o1hxre8";
7
+ var lp_theme = createRuntimeFn({ defaultClassName: "_1o1hxre0", variantClassNames: { variant: { primary: "_1o1hxre1", secondary: "_1o1hxre2", tertiary: "_1o1hxre3", quaternary: "_1o1hxre4" } }, defaultVariants: {}, compoundVariants: [] });
8
+ var lp_container = "_1o1hxre5";
9
+ var spb_container = "_1o1hxre6";
10
+ var lp_hover = "_1o1hxre7";
11
+ var spb_hover = "_1o1hxre8";
12
+ var svg_fill = createRuntimeFn({ defaultClassName: "_1o1hxre9", variantClassNames: { variant: { primary: "_1o1hxrea", secondary: "_1o1hxreb", tertiary: "_1o1hxrec", quaternary: "_1o1hxred" } }, defaultVariants: {}, compoundVariants: [] });
13
13
  export {
14
14
  lp_container,
15
15
  lp_hover,
package/dist/LandingPageHeader/LandingPageHeader.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { QuaternaryTypes } from '../utils/variant.types';
2
+ import { ImageInterface } from '../main';
2
3
 
3
4
  export interface LandingPageHeaderProps {
4
5
  id: string;
5
6
  variant: QuaternaryTypes;
6
7
  project?: string;
7
8
  alt?: string;
9
+ logo?: ImageInterface;
8
10
  }
9
- export declare const LandingPageHeader: ({ id, variant: fullVariant, project, alt, }: LandingPageHeaderProps) => import("react/jsx-runtime").JSX.Element;
11
+ export declare const LandingPageHeader: ({ id, variant: fullVariant, project, alt, logo, }: LandingPageHeaderProps) => import("react/jsx-runtime").JSX.Element;
package/dist/LandingPageHeader/LandingPageHeader.js CHANGED
@@ -13,28 +13,45 @@ import SvgComponent from "../icons/Logos/AXA.js";
13
13
  import SvgComponent$2 from "../icons/Logos/AXC.js";
14
14
  import SvgComponent$4 from "../icons/Logos/AXI.js";
15
15
  import SvgComponent$5 from "../icons/Logos/AXOS.js";
16
- import SvgComponent$7 from "../icons/Logos/GBLVF.js";
17
- import SvgComponent$6 from "../icons/Logos/LVF.js";
18
- import SvgComponent$8 from "../icons/Logos/SPB.js";
16
+ import SvgComponent$6 from "../icons/Logos/GBLVF.js";
17
+ import SvgComponent$7 from "../icons/Logos/SPB.js";
19
18
  import { getVariant } from "../utils/getVariant.js";
20
- import { lp_theme, spb_container, lp_container, spb_hover, lp_hover, svg_fill } from "./LandingPageHeader.css.js";
19
+ import { svg_fill, lp_theme, spb_container, lp_container, spb_hover, lp_hover } from "./LandingPageHeader.css.js";
21
20
  const LandingPageHeader = ({
22
21
  id,
23
22
  variant: fullVariant = "primary",
24
23
  project = "AXB",
25
- alt
24
+ alt,
25
+ logo
26
26
  }) => {
27
27
  const variant = getVariant(fullVariant);
28
28
  const website = /* @__PURE__ */ new Map([
29
- ["AXA", /* @__PURE__ */ jsx(SvgComponent, { classNameFill: svg_fill, height: 36, width: 120 })],
30
- ["AFS", /* @__PURE__ */ jsx(SvgComponent$1, { classNameFill: svg_fill, height: 36, width: 120 })],
31
- ["AXC", /* @__PURE__ */ jsx(SvgComponent$2, { classNameFill: svg_fill, height: 36, width: 120 })],
32
- ["AAS", /* @__PURE__ */ jsx(SvgComponent$3, { classNameFill: svg_fill, height: 36, width: 120 })],
33
- ["AXI", /* @__PURE__ */ jsx(SvgComponent$4, { classNameFill: svg_fill, height: 36, width: 120 })],
34
- ["AXB", /* @__PURE__ */ jsx(SvgComponent$5, { height: 30, width: 120, classNameFill: svg_fill })],
35
- ["LVF", /* @__PURE__ */ jsx(SvgComponent$6, { height: 30, width: 120, classNameFill: `${svg_fill}` })],
36
- ["GBLVF", /* @__PURE__ */ jsx(SvgComponent$7, { height: 60, width: 220 })],
37
- ["SPB", /* @__PURE__ */ jsx(SvgComponent$8, { height: "100%", width: "100%" })]
29
+ [
30
+ "AXA",
31
+ /* @__PURE__ */ jsx(SvgComponent, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
32
+ ],
33
+ [
34
+ "AFS",
35
+ /* @__PURE__ */ jsx(SvgComponent$1, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
36
+ ],
37
+ [
38
+ "AXC",
39
+ /* @__PURE__ */ jsx(SvgComponent$2, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
40
+ ],
41
+ [
42
+ "AAS",
43
+ /* @__PURE__ */ jsx(SvgComponent$3, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
44
+ ],
45
+ [
46
+ "AXI",
47
+ /* @__PURE__ */ jsx(SvgComponent$4, { classNameFill: svg_fill({ variant }), height: 36, width: 120 })
48
+ ],
49
+ [
50
+ "AXB",
51
+ /* @__PURE__ */ jsx(SvgComponent$5, { height: 30, width: 120, classNameFill: svg_fill({ variant }) })
52
+ ],
53
+ ["GBLVF", /* @__PURE__ */ jsx(SvgComponent$6, { height: 60, width: 220 })],
54
+ ["SPB", /* @__PURE__ */ jsx(SvgComponent$7, { height: "100%", width: "100%" })]
38
55
  ]);
39
56
  const isSPBPage = project === "SPB";
40
57
  return /* @__PURE__ */ jsx("header", { className: `${lp_theme({ variant })}`, id: `id_${id}`, children: /* @__PURE__ */ jsx(
@@ -46,8 +63,17 @@ const LandingPageHeader = ({
46
63
  {
47
64
  href: project == "AXI" ? "/invest" : "/",
48
65
  className: isSPBPage ? spb_hover : lp_hover,
49
- "aria-label": alt ?? "axos logo, return to homepage",
50
- children: website.get(project)
66
+ "aria-label": alt ?? "return to homepage",
67
+ children: logo ? /* @__PURE__ */ jsx(
68
+ "img",
69
+ {
70
+ src: logo.src,
71
+ alt: logo.alt ?? "",
72
+ height: Number(logo.height),
73
+ width: Number(logo.width),
74
+ className: "img_fluid"
75
+ }
76
+ ) : website.get(project)
51
77
  }
52
78
  )
53
79
  }
package/dist/assets/LandingPageHeader/LandingPageHeader.css CHANGED
@@ -2,56 +2,68 @@
2
2
  background: var(--_1073cm81);
3
3
  }
4
4
  ._1o1hxre2 {
5
- background: var(--_1073cm81);
5
+ background: var(--_1073cm88);
6
6
  }
7
7
  ._1o1hxre3 {
8
- background: var(--_1073cm81);
8
+ background: var(--_1073cm8f);
9
9
  }
10
10
  ._1o1hxre4 {
11
- padding: 0 24px;
12
- min-height: 59px;
11
+ background: var(--_1073cm8m);
13
12
  }
14
13
  ._1o1hxre5 {
15
- padding: 32px 24px;
14
+ padding: 7px 24px;
16
15
  min-height: 59px;
17
16
  }
18
17
  ._1o1hxre6 {
18
+ padding: 32px 24px;
19
+ min-height: 59px;
20
+ }
21
+ ._1o1hxre7 {
19
22
  transition: opacity 0.35s ease;
20
23
  }
21
- ._1o1hxre6:hover {
24
+ ._1o1hxre7:hover {
22
25
  opacity: 0.6;
23
26
  }
24
- ._1o1hxre6:active {
27
+ ._1o1hxre7:active {
25
28
  opacity: 1;
26
29
  }
27
- ._1o1hxre7 {
30
+ ._1o1hxre8 {
28
31
  transition: opacity 0.35s ease;
29
32
  width: 568px;
30
33
  height: 78px;
31
34
  }
32
- ._1o1hxre7:hover {
35
+ ._1o1hxre8:hover {
33
36
  opacity: 0.6;
34
37
  }
35
- ._1o1hxre7:active {
38
+ ._1o1hxre8:active {
36
39
  opacity: 1;
37
40
  }
38
- ._1o1hxre8 {
41
+ ._1o1hxrea {
39
42
  fill: var(--_1073cm85);
40
43
  }
44
+ ._1o1hxreb {
45
+ fill: var(--_1073cm8c);
46
+ }
47
+ ._1o1hxrec {
48
+ fill: var(--_1073cm8j);
49
+ }
50
+ ._1o1hxred {
51
+ fill: var(--_1073cm8q);
52
+ }
41
53
  @media screen and (max-width: 1023px) {
42
- ._1o1hxre5 {
54
+ ._1o1hxre6 {
43
55
  padding: 28px 24px;
44
56
  }
45
- ._1o1hxre7 {
57
+ ._1o1hxre8 {
46
58
  width: 454px;
47
59
  height: 62px;
48
60
  }
49
61
  }
50
62
  @media screen and (max-width: 768px) {
51
- ._1o1hxre5 {
63
+ ._1o1hxre6 {
52
64
  padding: 24px 24px;
53
65
  }
54
- ._1o1hxre7 {
66
+ ._1o1hxre8 {
55
67
  width: 340px;
56
68
  height: 46px;
57
69
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@axos-web-dev/shared-components",
3
3
  "description": "Axos shared components library for web.",
4
- "version": "1.0.100-dev.76",
4
+ "version": "1.0.100-dev.76-feature-lp-logos",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",