@phillips/seldon 1.26.2 → 1.28.0

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 (52) hide show
  1. package/dist/assets/account_circle.svg.js +5 -0
  2. package/dist/assets/search.svg.js +5 -0
  3. package/dist/components/Header/Header.d.ts +26 -9
  4. package/dist/components/Header/Header.js +70 -24
  5. package/dist/components/Link/utils.d.ts +7 -1
  6. package/dist/components/Link/utils.js +6 -6
  7. package/dist/components/Navigation/Navigation.d.ts +10 -0
  8. package/dist/components/Navigation/Navigation.js +50 -0
  9. package/dist/components/Navigation/NavigationItem/NavigationItem.d.ts +30 -0
  10. package/dist/components/Navigation/NavigationItem/NavigationItem.js +35 -0
  11. package/dist/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.d.ts +9 -0
  12. package/dist/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js +31 -0
  13. package/dist/components/Navigation/NavigationList/NavigationList.d.ts +9 -0
  14. package/dist/components/Navigation/NavigationList/NavigationList.js +32 -0
  15. package/dist/components/Search/Search.d.ts +7 -0
  16. package/dist/components/Search/Search.js +49 -0
  17. package/dist/components/UserManagement/UserManagement.d.ts +19 -0
  18. package/dist/components/UserManagement/UserManagement.js +52 -0
  19. package/dist/index.d.ts +7 -0
  20. package/dist/index.js +65 -51
  21. package/dist/pages/Page.js +38 -54
  22. package/dist/scss/_vars.scss +1 -1
  23. package/dist/scss/components/Button/_button.scss +3 -3
  24. package/dist/scss/components/DatePicker/_datePicker.scss +2 -2
  25. package/dist/scss/components/Footer/_footer.scss +4 -4
  26. package/dist/scss/components/Grid/_grid.scss +2 -2
  27. package/dist/scss/components/GridItem/_gridItem.scss +1 -1
  28. package/dist/scss/components/Header/_header.scss +144 -24
  29. package/dist/scss/components/HeroBanner/_heroBanner.scss +2 -2
  30. package/dist/scss/components/Input/_input.scss +2 -2
  31. package/dist/scss/components/Link/_link.scss +77 -3
  32. package/dist/scss/components/LinkBlock/_linkBlock.scss +2 -2
  33. package/dist/scss/components/LinkList/_linkList.scss +1 -1
  34. package/dist/scss/components/Modal/_modal.scss +2 -2
  35. package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss +272 -0
  36. package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss +1 -0
  37. package/dist/scss/components/Navigation/NavigationList/_navigationList.scss +96 -0
  38. package/dist/scss/components/Navigation/_navigation.scss +114 -0
  39. package/dist/scss/components/Row/_row.scss +1 -1
  40. package/dist/scss/components/Search/_search.scss +101 -0
  41. package/dist/scss/components/Social/_social.scss +3 -3
  42. package/dist/scss/components/SplitPanel/_splitPanel.scss +2 -2
  43. package/dist/scss/components/SplitPanel/_splitPanel.stories.scss +1 -1
  44. package/dist/scss/components/Subscribe/_subscribe.scss +4 -4
  45. package/dist/scss/components/Text/_text.scss +1 -1
  46. package/dist/scss/components/Toggle/_toggle.scss +2 -2
  47. package/dist/scss/components/UserManagement/_userManagement.scss +115 -0
  48. package/dist/scss/components/ViewingsList/_viewingsList.scss +3 -3
  49. package/dist/scss/styles.scss +6 -0
  50. package/dist/types/commonTypes.d.ts +4 -0
  51. package/dist/types/commonTypes.js +4 -0
  52. package/package.json +12 -12
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const C = (t) => /* @__PURE__ */ e.createElement("svg", { width: 19, height: 20, viewBox: "0 0 19 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M9.5026 0.833984C4.4426 0.833984 0.335938 4.94065 0.335938 10.0007C0.335938 15.0607 4.4426 19.1673 9.5026 19.1673C14.5626 19.1673 18.6693 15.0607 18.6693 10.0007C18.6693 4.94065 14.5626 0.833984 9.5026 0.833984ZM9.5026 3.58398C11.0243 3.58398 12.2526 4.81232 12.2526 6.33398C12.2526 7.85565 11.0243 9.08398 9.5026 9.08398C7.98094 9.08398 6.7526 7.85565 6.7526 6.33398C6.7526 4.81232 7.98094 3.58398 9.5026 3.58398ZM9.5026 16.6007C7.21094 16.6007 5.1851 15.4273 4.0026 13.649C4.0301 11.8248 7.66927 10.8257 9.5026 10.8257C11.3268 10.8257 14.9751 11.8248 15.0026 13.649C13.8201 15.4273 11.7943 16.6007 9.5026 16.6007Z", fill: "#ADADAD" }));
3
+ export {
4
+ C as default
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const a = (t) => /* @__PURE__ */ e.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Search" }, /* @__PURE__ */ e.createElement("path", { id: "Vector", d: "M12.0209 10.9563H11.4603L11.2616 10.7647C12.1131 9.77122 12.5531 8.41582 12.3118 6.97527C11.9783 5.00249 10.3319 3.4271 8.34498 3.18583C5.34323 2.81682 2.81694 5.34311 3.18595 8.34486C3.42723 10.3318 5.00261 11.9782 6.97539 12.3117C8.41594 12.553 9.77134 12.113 10.7648 11.2614L10.9564 11.4601V12.0208L13.9724 15.0367C14.2633 15.3276 14.7388 15.3276 15.0297 15.0367C15.3207 14.7457 15.3207 14.2703 15.0297 13.9793L12.0209 10.9563ZM7.76308 10.9563C5.99609 10.9563 4.56973 9.52994 4.56973 7.76296C4.56973 5.99597 5.99609 4.56961 7.76308 4.56961C9.53006 4.56961 10.9564 5.99597 10.9564 7.76296C10.9564 9.52994 9.53006 10.9563 7.76308 10.9563Z", fill: "black" })));
3
+ export {
4
+ a as default
5
+ };
@@ -1,11 +1,28 @@
1
- type User = {
2
- name: string;
3
- };
4
- export interface HeaderProps {
5
- user?: User;
6
- onLogin?: () => void;
7
- onLogout?: () => void;
8
- onCreateAccount?: () => void;
1
+ import * as React from 'react';
2
+ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
3
+ /**
4
+ * Default mobile menu label
5
+ */
6
+ defaultMobileMenuLabel?: string;
7
+ /**
8
+ * Logo src
9
+ */
10
+ logo?: React.ReactElement<React.Component> | string;
11
+ /**
12
+ * Toggle open text
13
+ */
14
+ toggleOpenText?: string;
15
+ /**
16
+ * Toggle close text
17
+ */
18
+ toggleCloseText?: string;
9
19
  }
10
- declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
20
+ export declare const HeaderContext: React.Context<{
21
+ defaultMobileMenuLabel: string;
22
+ expandedItem: string;
23
+ setExpandedItem: (_item: string) => void;
24
+ isExpanded: boolean;
25
+ onSelect: (_label: string) => void;
26
+ }>;
27
+ declare const Header: ({ defaultMobileMenuLabel, logo, className, children, toggleOpenText, toggleCloseText, ...props }: React.PropsWithChildren<HeaderProps>) => import("react/jsx-runtime").JSX.Element;
11
28
  export default Header;
@@ -1,26 +1,72 @@
1
- import { jsx as l, jsxs as e, Fragment as d } from "react/jsx-runtime";
2
- import i from "../Button/Button.js";
3
- const a = ({ user: n, onLogin: h, onLogout: r, onCreateAccount: c }) => /* @__PURE__ */ l("header", { children: /* @__PURE__ */ e("div", { className: "storybook-header", children: [
4
- /* @__PURE__ */ e("div", { children: [
5
- /* @__PURE__ */ l("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: [
6
- /* @__PURE__ */ l("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
7
- /* @__PURE__ */ l("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
8
- /* @__PURE__ */ l("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })
9
- ] }) }),
10
- /* @__PURE__ */ l("h1", { children: "Acme" })
11
- ] }),
12
- /* @__PURE__ */ l("div", { children: n ? /* @__PURE__ */ e(d, { children: [
13
- /* @__PURE__ */ e("span", { className: "welcome", children: [
14
- "Welcome, ",
15
- /* @__PURE__ */ l("b", { children: n.name }),
16
- "!"
17
- ] }),
18
- /* @__PURE__ */ l(i, { size: "sm", onClick: r, children: "Log out" })
19
- ] }) : /* @__PURE__ */ e(d, { children: [
20
- /* @__PURE__ */ l(i, { size: "sm", onClick: h, children: "Log in" }),
21
- /* @__PURE__ */ l(i, { size: "sm", onClick: c, children: "Sign up" })
22
- ] }) })
23
- ] }) });
1
+ import { jsxs as u, jsx as t } from "react/jsx-runtime";
2
+ import o from "../../node_modules/classnames/index.js";
3
+ import * as i from "react";
4
+ import { px as a } from "../../utils/index.js";
5
+ import I from "../Search/Search.js";
6
+ const y = i.createContext({
7
+ defaultMobileMenuLabel: "",
8
+ expandedItem: "",
9
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
10
+ setExpandedItem: (e) => {
11
+ },
12
+ isExpanded: !1,
13
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
14
+ onSelect: (e) => {
15
+ }
16
+ }), k = ({
17
+ defaultMobileMenuLabel: e = "Main Menu",
18
+ logo: s,
19
+ className: _,
20
+ children: g,
21
+ toggleOpenText: m = "Open Menu",
22
+ toggleCloseText: l = "Close Menu",
23
+ ...x
24
+ }) => {
25
+ const [r, v] = i.useState(!1), [h, c] = i.useState(e), d = r ? l : m, S = h !== e, p = function() {
26
+ v((n) => !n), c(e);
27
+ }, $ = function(n) {
28
+ c((f) => f === e ? n : e);
29
+ };
30
+ return /* @__PURE__ */ u("header", { ...x, className: o(`${a}-header`, _), children: [
31
+ /* @__PURE__ */ t(
32
+ "div",
33
+ {
34
+ className: o(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: r }),
35
+ "data-testid": "header-overlay",
36
+ onClick: p
37
+ }
38
+ ),
39
+ /* @__PURE__ */ t(
40
+ "button",
41
+ {
42
+ "aria-label": d,
43
+ "data-testid": "mobile-menu-toggle",
44
+ type: "button",
45
+ onClick: p,
46
+ className: o(`${a}-header__toggle-btn`, {
47
+ [`${a}-header__toggle-btn--open`]: d === l
48
+ }),
49
+ children: /* @__PURE__ */ t("span", { children: d })
50
+ }
51
+ ),
52
+ /* @__PURE__ */ t("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, tabIndex: d === m ? 0 : -1, children: typeof s == "object" ? s : /* @__PURE__ */ t("img", { "data-testid": "header-logo-img", src: s, height: "14" }) }),
53
+ /* @__PURE__ */ t("div", { className: o(`${a}-header__nav`, { [`${a}-header__nav--open`]: r }), children: /* @__PURE__ */ t(
54
+ y.Provider,
55
+ {
56
+ value: {
57
+ defaultMobileMenuLabel: e,
58
+ expandedItem: h,
59
+ setExpandedItem: (n) => c(n),
60
+ isExpanded: S,
61
+ onSelect: (n) => $(n)
62
+ },
63
+ children: g
64
+ }
65
+ ) }),
66
+ /* @__PURE__ */ t(I, {})
67
+ ] });
68
+ };
24
69
  export {
25
- a as default
70
+ y as HeaderContext,
71
+ k as default
26
72
  };
@@ -8,5 +8,11 @@ export declare enum LinkVariants {
8
8
  /** these links are being rendered in a list */
9
9
  list = "list",
10
10
  /** link is being rendered within body copy */
11
- inline = "inline"
11
+ inline = "inline",
12
+ /** link is being rendered in the main nav bar */
13
+ navMain = "navMain",
14
+ /** link is being rendered in a nav bar flyout*/
15
+ navLinkLg = "navLinkLg",
16
+ /** link is being rendered in a nav bar flyout*/
17
+ navLinkSm = "navLinkSm"
12
18
  }
@@ -1,10 +1,10 @@
1
- import { px as t } from "../../utils/index.js";
2
- const a = (l) => `${t}-link--${l}`, o = (l) => !!(l != null && l.match(
1
+ import { px as l } from "../../utils/index.js";
2
+ const m = (n) => `${l}-link--${n}`, t = (n) => !!(n != null && n.match(
3
3
  /(http[s]?:\/\/)(?!.*phillips\.com)([a-zA-Z0-9\-.]+)(:[0-9]{1,4})?([a-zA-Z0-9/\-._~:?#[\]@!$&'()*+,;=]*)/g
4
4
  ));
5
- var i = /* @__PURE__ */ ((l) => (l.standalone = "standalone", l.email = "email", l.list = "list", l.inline = "inline", l))(i || {});
5
+ var a = /* @__PURE__ */ ((n) => (n.standalone = "standalone", n.email = "email", n.list = "list", n.inline = "inline", n.navMain = "navMain", n.navLinkLg = "navLinkLg", n.navLinkSm = "navLinkSm", n))(a || {});
6
6
  export {
7
- i as LinkVariants,
8
- a as getLinkVariantClassName,
9
- o as isLinkExternal
7
+ a as LinkVariants,
8
+ m as getLinkVariantClassName,
9
+ t as isLinkExternal
10
10
  };
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
3
+ backBtnLabel?: string;
4
+ /**
5
+ * Optional visible state
6
+ */
7
+ visible?: boolean;
8
+ }
9
+ declare const Navigation: ({ backBtnLabel, children, className, id, visible, }: React.PropsWithChildren<NavigationProps>) => import("react/jsx-runtime").JSX.Element;
10
+ export default Navigation;
@@ -0,0 +1,50 @@
1
+ import { jsxs as p, jsx as o } from "react/jsx-runtime";
2
+ import * as x from "react";
3
+ import { px as e } from "../../utils/index.js";
4
+ import d from "../../node_modules/classnames/index.js";
5
+ import { HeaderContext as v } from "../Header/Header.js";
6
+ const _ = ({
7
+ backBtnLabel: i,
8
+ children: r,
9
+ className: b,
10
+ id: a,
11
+ visible: n = !0
12
+ }) => {
13
+ const { defaultMobileMenuLabel: l, isExpanded: s, expandedItem: t, setExpandedItem: m } = x.useContext(v), c = () => m(t === l ? t : l);
14
+ return /* @__PURE__ */ p(
15
+ "nav",
16
+ {
17
+ role: "navigation",
18
+ "aria-labelledby": `${a}-label`,
19
+ "data-testid": a,
20
+ id: a,
21
+ className: d(`${e}-nav`, b, { [`${e}-nav--expanded`]: s }),
22
+ children: [
23
+ /* @__PURE__ */ o(
24
+ "button",
25
+ {
26
+ "data-testid": `${a}-back-btn`,
27
+ tabIndex: s ? 0 : -1,
28
+ className: `${e}-nav__back-btn`,
29
+ onClick: c,
30
+ children: i
31
+ }
32
+ ),
33
+ /* @__PURE__ */ o(
34
+ "h2",
35
+ {
36
+ id: `${a}-label`,
37
+ "data-testid": `${a}-label`,
38
+ className: d(`${e}-nav__label`, { [`${e}-nav__label--hidden`]: !n }),
39
+ style: { "--visible": n ? "visible" : "hidden" },
40
+ children: t || "Main Menu"
41
+ }
42
+ ),
43
+ r
44
+ ]
45
+ }
46
+ );
47
+ };
48
+ export {
49
+ _ as default
50
+ };
@@ -0,0 +1,30 @@
1
+ import * as React from 'react';
2
+ import { LinkVariants } from '../../Link/utils';
3
+ export interface NavigationItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
4
+ /**
5
+ * Optional badge for navigation item. Used currently for location of auctions
6
+ */
7
+ badge?: React.ReactNode;
8
+ /**
9
+ * href link
10
+ */
11
+ href?: string;
12
+ /**
13
+ * Optional listen to onClick event
14
+ */
15
+ onClick?: (event: React.MouseEvent<HTMLLIElement>) => void;
16
+ /**
17
+ * Label for the navigation item
18
+ */
19
+ label?: React.ReactNode;
20
+ /**
21
+ * Optional group for navigation items
22
+ */
23
+ navGroup?: 'nav-link-lg' | 'nav-link-sm';
24
+ /**
25
+ * Optional type for navigation item
26
+ */
27
+ navType?: LinkVariants;
28
+ }
29
+ declare const NavigationItem: ({ badge, className, href, label, navGroup, navType, onClick, ...props }: React.PropsWithChildren<NavigationItemProps>) => import("react/jsx-runtime").JSX.Element;
30
+ export default NavigationItem;
@@ -0,0 +1,35 @@
1
+ import { jsx as a, jsxs as d } from "react/jsx-runtime";
2
+ import * as p from "react";
3
+ import { px as t } from "../../../utils/index.js";
4
+ import f from "../../../node_modules/classnames/index.js";
5
+ import x from "../../Link/Link.js";
6
+ import { LinkVariants as v } from "../../Link/utils.js";
7
+ import { HeaderContext as _ } from "../../Header/Header.js";
8
+ const k = ({
9
+ badge: e,
10
+ className: m = "",
11
+ href: r,
12
+ label: n,
13
+ navGroup: s,
14
+ navType: i,
15
+ onClick: o,
16
+ ...l
17
+ }) => {
18
+ const { expandedItem: c } = p.useContext(_);
19
+ return /* @__PURE__ */ a(
20
+ "li",
21
+ {
22
+ ...l,
23
+ onClick: o,
24
+ "data-testid": `nav-item-${n}`,
25
+ className: f(`${t}-nav__item`, s, m),
26
+ children: /* @__PURE__ */ d(x, { href: r, variant: i || v.navMain, tabIndex: c === "" ? 0 : -1, children: [
27
+ /* @__PURE__ */ a("span", { className: `${t}-nav__item--label`, children: n }),
28
+ e ? /* @__PURE__ */ a("span", { className: `${t}-nav__item--badge `, children: e }) : null
29
+ ] })
30
+ }
31
+ );
32
+ };
33
+ export {
34
+ k as default
35
+ };
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ export interface NavigationItemTriggerProps extends React.HTMLAttributes<HTMLElement> {
3
+ /**
4
+ * Label for the navigation item
5
+ */
6
+ label: string;
7
+ }
8
+ declare const NavigationItemTrigger: ({ id, label, children, className, ...props }: React.PropsWithChildren<NavigationItemTriggerProps>) => import("react/jsx-runtime").JSX.Element;
9
+ export default NavigationItemTrigger;
@@ -0,0 +1,31 @@
1
+ import { jsxs as d, jsx as n } from "react/jsx-runtime";
2
+ import * as l from "react";
3
+ import { px as t } from "../../../utils/index.js";
4
+ import p from "../../../node_modules/classnames/index.js";
5
+ import { HeaderContext as x } from "../../Header/Header.js";
6
+ const u = ({
7
+ id: r,
8
+ label: e,
9
+ children: i,
10
+ className: m,
11
+ ...o
12
+ }) => {
13
+ const { expandedItem: a, onSelect: s } = l.useContext(x), c = () => s(e);
14
+ return /* @__PURE__ */ d(
15
+ "li",
16
+ {
17
+ "aria-expanded": a === e,
18
+ "data-testid": `nav-item-trigger-${r}`,
19
+ className: p(m, `${t}-nav__item`, { [`${t}-nav__item--expanded`]: a === e }),
20
+ onClick: c,
21
+ ...o,
22
+ children: [
23
+ /* @__PURE__ */ n("button", { className: `${t}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ n("label", { className: `${t}-nav__item--label`, children: e }) }),
24
+ i
25
+ ]
26
+ }
27
+ );
28
+ };
29
+ export {
30
+ u as default
31
+ };
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ export interface NavigationListProps extends React.HTMLAttributes<HTMLElement> {
3
+ /**
4
+ * id for the navigation list
5
+ */
6
+ id: string;
7
+ }
8
+ declare const NavigationList: ({ id, children, className }: React.PropsWithChildren<NavigationListProps>) => import("react/jsx-runtime").JSX.Element;
9
+ export default NavigationList;
@@ -0,0 +1,32 @@
1
+ import { jsxs as p, jsx as m } from "react/jsx-runtime";
2
+ import * as r from "react";
3
+ import { px as a } from "../../../utils/index.js";
4
+ import l from "../../../node_modules/classnames/index.js";
5
+ import { HeaderContext as v } from "../../Header/Header.js";
6
+ const x = ({ id: o, children: n, className: _ }) => {
7
+ const { isExpanded: i } = r.useContext(v), s = r.Children.toArray(n).filter((t) => {
8
+ if (t && t.props.navGroup === "nav-link-lg")
9
+ return t;
10
+ }), e = r.Children.toArray(n).filter((t) => {
11
+ if (t && t.props.navGroup === "nav-link-sm")
12
+ return t;
13
+ });
14
+ return /* @__PURE__ */ p(
15
+ "ul",
16
+ {
17
+ id: o,
18
+ "data-testid": o,
19
+ role: "list",
20
+ "aria-expanded": i,
21
+ className: l(_, `${a}-nav__list`, { [`${a}-nav__list--expanded`]: i }),
22
+ children: [
23
+ s.length > 0 ? /* @__PURE__ */ m("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--large-cta`), children: s.map((t) => t) }) : null,
24
+ e.length > 0 ? /* @__PURE__ */ m("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--small-cta`), children: e.map((t) => t) }) : null,
25
+ !s.length && !e.length ? n : null
26
+ ]
27
+ }
28
+ );
29
+ };
30
+ export {
31
+ x as default
32
+ };
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ export interface SearchProps extends React.HTMLAttributes<HTMLElement> {
3
+ altText?: string;
4
+ useIcon?: boolean;
5
+ }
6
+ declare const Search: ({ altText, useIcon }: React.PropsWithChildren<SearchProps>) => import("react/jsx-runtime").JSX.Element;
7
+ export default Search;
@@ -0,0 +1,49 @@
1
+ import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
+ import * as n from "react";
3
+ import { px as a } from "../../utils/index.js";
4
+ import o from "../../node_modules/classnames/index.js";
5
+ import p from "../Input/Input.js";
6
+ import i from "../../assets/search.svg.js";
7
+ const v = ({ altText: h = "Search", useIcon: r = !0 }) => {
8
+ const [t, l] = n.useState(!1), s = () => {
9
+ l(!t);
10
+ };
11
+ return /* @__PURE__ */ c("div", { "data-testid": "header-search", className: `${a}-search`, role: "search", children: [
12
+ /* @__PURE__ */ e(
13
+ "div",
14
+ {
15
+ "data-testid": "search-overlay",
16
+ className: o(`${a}-search__overlay`, { [`${a}-search__overlay--active`]: t }),
17
+ onClick: s
18
+ }
19
+ ),
20
+ /* @__PURE__ */ e("button", { "data-testid": "search-button", className: `${a}-search__button`, onClick: s, children: r ? /* @__PURE__ */ e(i, { "data-testid": "search-button-icon", className: `${a}-search__button__icon` }) : "Search" }),
21
+ /* @__PURE__ */ c(
22
+ "form",
23
+ {
24
+ "data-testid": "search-form",
25
+ className: o(
26
+ `${a}-search__input-wrapper`,
27
+ { [`${a}-search__input-wrapper--active`]: t },
28
+ { [`${a}-search__input-wrapper--use-icon`]: r }
29
+ ),
30
+ children: [
31
+ r ? /* @__PURE__ */ e(i, { "data-testid": "search-form-icon", className: `${a}-search__input-wrapper__icon` }) : null,
32
+ /* @__PURE__ */ e(
33
+ p,
34
+ {
35
+ className: `${a}-search__input`,
36
+ alt: h,
37
+ hideLabel: !0,
38
+ placeholder: "Type to search",
39
+ type: "text"
40
+ }
41
+ )
42
+ ]
43
+ }
44
+ )
45
+ ] });
46
+ };
47
+ export {
48
+ v as default
49
+ };
@@ -0,0 +1,19 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { LinkProps } from '../Link/Link';
3
+ import { SupportedLanguages } from '../../types/commonTypes';
4
+ export interface UserManagementProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ languageOptions?: {
6
+ label: string;
7
+ value: SupportedLanguages;
8
+ }[];
9
+ currentLanguage?: SupportedLanguages;
10
+ onLanguageChange?: (language: SupportedLanguages) => void;
11
+ isLoggedIn?: boolean;
12
+ onLogin?: () => void;
13
+ onLogout?: () => void;
14
+ accountDetailsLink?: React.ElementType<LinkProps>;
15
+ loginLabel?: ReactNode;
16
+ logoutLabel?: ReactNode;
17
+ }
18
+ declare const UserManagement: ({ accountDetailsLink, children, className, currentLanguage, languageOptions, onLanguageChange, isLoggedIn, onLogin, onLogout, loginLabel, logoutLabel, ...props }: React.PropsWithChildren<UserManagementProps>) => import("react/jsx-runtime").JSX.Element;
19
+ export default UserManagement;
@@ -0,0 +1,52 @@
1
+ import { jsxs as g, jsx as a } from "react/jsx-runtime";
2
+ import { getCommonProps as x, px as j, noOp as s } from "../../utils/index.js";
3
+ import A from "../Input/Input.js";
4
+ import E from "../../assets/account_circle.svg.js";
5
+ import M from "../Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
6
+ import P from "../Navigation/NavigationList/NavigationList.js";
7
+ import S from "../Navigation/NavigationItem/NavigationItem.js";
8
+ import { SupportedLanguages as o } from "../../types/commonTypes.js";
9
+ import T from "../../node_modules/classnames/index.js";
10
+ const H = ({
11
+ accountDetailsLink: m,
12
+ children: p,
13
+ className: v,
14
+ currentLanguage: n = o.en,
15
+ languageOptions: i = [
16
+ { label: "English", value: o.en },
17
+ { label: "中文", value: o.zh }
18
+ ],
19
+ onLanguageChange: d = s,
20
+ isLoggedIn: r = !1,
21
+ onLogin: f = s,
22
+ onLogout: h = s,
23
+ loginLabel: N = "Login",
24
+ logoutLabel: _ = "Logout",
25
+ ...t
26
+ }) => {
27
+ var c, u;
28
+ const { className: l, ...b } = x(t, "UserManagement"), C = (u = (c = i.find((e) => e.value === n)) == null ? void 0 : c.label) != null ? u : "English", $ = m != null ? m : "a";
29
+ return /* @__PURE__ */ g("div", { ...b, className: T(l, v), ...t, children: [
30
+ /* @__PURE__ */ g("ul", { className: `${l}__account-wrapper`, children: [
31
+ r && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(E, { className: `${l}__account-icon` }) }),
32
+ /* @__PURE__ */ a(S, { onClick: r ? h : f, label: r ? _ : N })
33
+ ] }),
34
+ /* @__PURE__ */ a(M, { className: `${l}__language`, label: C, children: /* @__PURE__ */ a(P, { id: `${j}-langauge-selection-list`, className: `${l}__language__selections`, children: i.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
35
+ A,
36
+ {
37
+ type: "radio",
38
+ id: `radio-${e.value}`,
39
+ labelText: e.label,
40
+ value: e.value,
41
+ inline: !0,
42
+ name: "languages",
43
+ checked: e.value === n,
44
+ onChange: () => d(e.value)
45
+ }
46
+ ) }, e.value)) }) }),
47
+ p
48
+ ] });
49
+ };
50
+ export {
51
+ H as default
52
+ };
package/dist/index.d.ts CHANGED
@@ -6,6 +6,10 @@ export { default as ErrorBoundary, type ErrorBoundaryProps } from './components/
6
6
  export { default as Footer, type FooterProps } from './components/Footer/Footer';
7
7
  export { default as Grid, type GridProps } from './components/Grid/Grid';
8
8
  export { default as Header, type HeaderProps } from './components/Header/Header';
9
+ export { default as Navigation, type NavigationProps } from './components/Navigation/Navigation';
10
+ export { default as NavigationItem, type NavigationItemProps, } from './components/Navigation/NavigationItem/NavigationItem';
11
+ export { default as NavigationItemTrigger, type NavigationItemTriggerProps, } from './components/Navigation/NavigationItemTrigger/NavigationItemTrigger';
12
+ export { default as NavigationList, type NavigationListProps, } from './components/Navigation/NavigationList/NavigationList';
9
13
  export { default as HeroBanner, type HeroBannerProps } from './components/HeroBanner/HeroBanner';
10
14
  export { default as Input, type InputProps } from './components/Input/Input';
11
15
  export { default as Link, type LinkProps } from './components/Link/Link';
@@ -15,6 +19,7 @@ export { default as LinkList, type LinkListProps } from './components/LinkList/L
15
19
  export { default as Row, type RowProps } from './components/Row/Row';
16
20
  export { default as GridItem, type GridItemProps } from './components/GridItem/GridItem';
17
21
  export { GridItemAlign } from './components/GridItem/types';
22
+ export { default as Search, type SearchProps } from './components/Search/Search';
18
23
  export { default as Select, type SelectProps } from './components/Select/Select';
19
24
  export { default as SplitPanel, type SplitPanelProps } from './components/SplitPanel/SplitPanel';
20
25
  export { default as Subscribe, type SubscribeProps } from './components/Subscribe/Subscribe';
@@ -24,3 +29,5 @@ export { default as ViewingsList, type ViewingsListProps } from './components/Vi
24
29
  export { default as Modal, type ModalProps } from './components/Modal/Modal';
25
30
  export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './components/ViewingsList/StatefulViewingsList';
26
31
  export * from './components/Text';
32
+ export { default as UserManagement, type UserManagementProps } from './components/UserManagement/UserManagement';
33
+ export * from './types/commonTypes';