@veracity/vui
Version:
Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.
308 lines (306 loc) • 9.21 kB
JavaScript
import { getCurrentYear } from "../utils/dates.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import { useDown } from "../core/media.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { T } from "../t/t.js";
import { Divider } from "../divider/divider.js";
import { Link } from "../link/link.js";
import { Menu } from "../menu/menu.js";
import { FooterProvider } from "./context.js";
import { FooterHeading } from "./footerHeading.js";
import { FooterLink } from "./footerLink.js";
import { FooterSection } from "./footerSection.js";
import FooterColumn from "./footerColumn.js";
import FooterRow from "./footerRow.js";
import FooterColumns from "./footerColumns.js";
import { FooterContent } from "./footerContent.js";
import FooterSlimColumn from "./footerSlimColumn.js";
import { FooterTrademark, defaultLinkedInUrl } from "./footerTrademark.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/footer/footer.tsx
const FooterBase = styled.divBox`
background-color: darkBlue.main;
color: white;
`;
const currentYear = getCurrentYear();
/** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
const Footer = vui((props, ref) => {
const { applicationLinks, applicationSocialLinks = [], applicationStaticItems = [], children, className, columns, isApplication = false, isDNV = false, linkedIn, size, variant, isSlim, ...rest } = props;
const context = {
size,
variant
};
const styles = useStyleConfig("Footer", props);
if (isApplication && !applicationLinks) console.error("Footer: isApplication is true but applicationLinks not set.");
const slimLinks = [{
id: "home",
text: "veracity.com",
url: "https://www.veracity.com/"
}];
columns?.map((column) => {
column.map((section) => {
section.links?.map((link) => {
if (!link) return;
if ([
"home",
"support",
"status"
].includes(link.id || "")) slimLinks.push(link);
});
});
});
const downMd = useDown("md");
const downLg = useDown("lg");
return /* @__PURE__ */ jsx(FooterProvider, {
value: context,
children: /* @__PURE__ */ jsxs(FooterBase, {
className: cs("vui-footer", isApplication ? "vui-footer-app" : "", className),
px: isApplication ? "40px" : downMd ? 2 : 3,
py: isSlim ? downMd ? "16px" : "9px" : downMd ? 4 : 5,
role: "contentinfo",
...styles.container,
ref,
...rest,
children: [
isApplication && /* @__PURE__ */ jsx(FooterContent, {
alignContent: "center",
alignItems: "center",
maxW: "100%",
children: /* @__PURE__ */ jsxs(FooterRow, {
alignContent: "space-between",
w: 1,
children: [
/* @__PURE__ */ jsx(Box, {
alignItems: "self-start",
columnGap: 3,
flex: {
xs: "0 0 100%",
sm: "0 0 100%",
md: "0 0 100%",
lg: "0 1 50%"
},
py: {
xs: 1,
sm: 1,
md: 1.25,
lg: 1.5
},
pr: {
_: 0,
lg: 1
},
wrap: true,
children: applicationLinks?.map((link, index) => /* @__PURE__ */ jsxs(Box, {
flex: {
xs: "0 0 100%",
sm: "0 0 auto"
},
children: [link.items && /* @__PURE__ */ jsxs(Menu, {
isLazy: false,
offset: [-16, 9],
placement: "top-start",
size: "sm",
...rest,
children: [/* @__PURE__ */ jsx(Menu.Button, {
as: Link,
className: "vui-footerLink-trigger",
pt: "1px",
role: "button",
text: link.text,
title: link.text,
size: {
_: "sm",
md: "md"
},
...styles.link,
...rest
}), /* @__PURE__ */ jsx(Menu.List, {
maxH: 400,
right: 0,
w: 320,
...styles.list,
children: link.items.map(({ text, url, target }, index) => /* @__PURE__ */ jsx(Menu.Item, {
isTruncated: true,
linkProps: {
href: url,
target
},
text,
title: text,
...styles.item
}, index))
})]
}), !link.items && /* @__PURE__ */ jsx(FooterLink, {
...link,
href: link.url,
py: "1px"
})]
}, index))
}),
downLg && /* @__PURE__ */ jsx(Divider, {
borderColor: "sandstone.main",
mb: .5,
mt: 1,
w: 1
}),
/* @__PURE__ */ jsxs(Box, {
centerV: true,
columnGap: 3,
flex: {
xs: "0 0 100%",
sm: "0 0 100%",
md: "0 0 100%",
lg: "0 1 50%"
},
justifyContent: {
sm: "center",
lg: "flex-end"
},
py: {
xs: 1,
sm: 1,
md: 1.25,
lg: 1.5
},
pl: {
_: 0,
lg: 1
},
wrap: true,
children: [
applicationStaticItems?.map((text, index) => /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(T, {
size: "sm",
children: text
}) }, index)),
isDNV ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(T, {
size: "sm",
children: ["© DNV AS ", currentYear]
}) }) : /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(T, {
size: "sm",
children: [/* @__PURE__ */ jsx(T, {
fontWeight: "600",
children: "Veracity by DNV"
}), ", DNV AS"]
}) }),
/* @__PURE__ */ jsxs(Box, { children: [applicationSocialLinks?.map((link, index) => /* @__PURE__ */ jsx(Link, {
"aria-label": link.text,
fontWeight: "demi",
href: link.url,
startIcon: /* @__PURE__ */ jsx(Link.Icon, {
name: `${link.text === "Twitter" ? "brandX" + link.text + "Solid" : "brandCircle" + link.text}`,
radius: "50%",
left: 0,
size: "xs"
}),
isExternal: true,
size: {
_: "sm",
md: "md"
},
minH: 24,
...styles.link
}, index)), /* @__PURE__ */ jsx(Link, {
fontWeight: "demi",
href: linkedIn ?? "https://www.linkedin.com/showcase/veracity-data-platform",
isExternal: true,
size: {
_: "sm",
md: "md"
},
...styles.link,
children: /* @__PURE__ */ jsx(FooterHeading, {
fontSize: "16px",
mb: 0,
text: "Follow us"
})
})] })
]
})
]
})
}),
!isApplication && isSlim && /* @__PURE__ */ jsx(FooterContent, {
alignContent: "center",
alignItems: "center",
maxW: {
xs: 343,
sm: 305,
md: 720,
lg: 975
},
children: /* @__PURE__ */ jsxs(FooterRow, { children: [
slimLinks.map(({ text, url, target, id }, index) => {
/** if the screen is small drop one specific link */
if (downLg && id === "support") return;
return /* @__PURE__ */ jsx(FooterSlimColumn, { children: /* @__PURE__ */ jsx(FooterLink, {
href: url,
text,
target
}) }, index);
}),
downMd && /* @__PURE__ */ jsx(Divider, {
borderColor: "sandstone.main",
mb: .5,
mt: 1,
w: 1
}),
/* @__PURE__ */ jsx(FooterSlimColumn, {
centerV: true,
children: /* @__PURE__ */ jsxs(T, {
size: "xs",
children: [/* @__PURE__ */ jsx(T, {
fontWeight: "demi",
children: "Veracity by DNV"
}), ", DNV AS"]
})
}),
/* @__PURE__ */ jsx(FooterSlimColumn, { children: /* @__PURE__ */ jsx(Link, {
fontWeight: "demi",
href: linkedIn ?? "https://www.linkedin.com/showcase/veracity-data-platform",
startIcon: /* @__PURE__ */ jsx(Link.Icon, {
mr: 1,
left: 0,
name: "brandCircleLinkedIn",
radius: "50%",
size: "xs"
}),
isExternal: true,
size: {
_: "sm",
md: "md"
},
...styles.link,
children: /* @__PURE__ */ jsx(FooterHeading, {
fontSize: "16px",
mb: 0,
text: "Follow us"
})
}) })
] })
}),
!isApplication && !isSlim && /* @__PURE__ */ jsxs(FooterContent, { children: [
columns ? /* @__PURE__ */ jsx(FooterColumns, { columns }) : children,
children || columns ? /* @__PURE__ */ jsx(Divider, {
borderColor: "sandstone.main",
my: 4
}) : null,
/* @__PURE__ */ jsx(FooterRow, { children: /* @__PURE__ */ jsx(FooterTrademark, { linkedIn }) })
] })
]
})
});
});
Footer.Column = FooterColumn;
Footer.Content = FooterContent;
Footer.Heading = FooterHeading;
Footer.Link = FooterLink;
Footer.Row = FooterRow;
Footer.Section = FooterSection;
Footer.displayName = "Footer";
//#endregion
export { Footer, Footer as default, FooterBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=footer.js.map