Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/cookie bar #9

Merged
merged 8 commits into from
Dec 7, 2023
Merged

Feat/cookie bar #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b93d2da
build: add react-cookie-consent
aliceoq Dec 5, 2023
dc437fd
feat: add cookie bar messages
aliceoq Dec 5, 2023
b5237b0
feat: create cookie bar component
aliceoq Dec 5, 2023
021778c
build: update build files
aliceoq Dec 5, 2023
21ed527
docs: add cookies bar stories
aliceoq Dec 5, 2023
f4efc1c
fix: cookie consent import
aliceoq Dec 5, 2023
b0ef776
build: update build files
aliceoq Dec 5, 2023
598140b
docs: add providers to cookie bar stories
aliceoq Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions dist/index.d.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ interface Item extends SubItem {
children: SubItem[];
}

interface Props$1 {
interface Props$2 {
/** List of headings in the current documentation page */
headingList?: Item[];
}
/** Table of contents for documentation pages. */
declare const TableOfContents: ({ headingList }: Props$1) => react_jsx_runtime.JSX.Element;
declare const TableOfContents: ({ headingList }: Props$2) => react_jsx_runtime.JSX.Element;

interface SideBarSectionState {
/** Array containing the name of the parents of the expanded page in the menu. */
Expand Down Expand Up @@ -65,6 +65,11 @@ declare const Search: () => react_jsx_runtime.JSX.Element;

declare function SearchInput(): react_jsx_runtime.JSX.Element;

interface Props$1 {
onAccept: () => void;
}
declare const CookieBar: ({ onAccept }: Props$1) => react_jsx_runtime.JSX.Element;

type Section = {
link: string;
title: string;
Expand Down Expand Up @@ -127,4 +132,4 @@ interface AlgoliaConfig {
}
declare const createAlgoliaClient: (config: AlgoliaConfig) => void;

export { FeedbackSection, HamburgerMenu, Item, LibraryContext, LibraryContextProvider, MarkdownRenderer, Search, createAlgoliaClient as SearchConfig, SearchInput, Sidebar, TableOfContents };
export { CookieBar, FeedbackSection, HamburgerMenu, Item, LibraryContext, LibraryContextProvider, MarkdownRenderer, Search, createAlgoliaClient as SearchConfig, SearchInput, Sidebar, TableOfContents };
155 changes: 138 additions & 17 deletions dist/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5619,13 +5619,13 @@ var styles_default4 = { container: container2, title, description, linkContainer
// src/components/whats-next-card/index.tsx
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
var WhatsNextCard = ({
title: title5,
title: title6,
description: description4,
linkTitle,
linkTo
}) => {
return /* @__PURE__ */ jsx7(Link, { href: linkTo, sx: styles_default4.container, children: /* @__PURE__ */ jsxs5(Box4, { children: [
/* @__PURE__ */ jsx7(Text, { sx: styles_default4.title, className: "title", children: title5 }),
/* @__PURE__ */ jsx7(Text, { sx: styles_default4.title, className: "title", children: title6 }),
/* @__PURE__ */ jsx7(Text, { sx: styles_default4.description, className: "description", children: description4 }),
/* @__PURE__ */ jsxs5(Flex3, { sx: styles_default4.linkContainer, children: [
/* @__PURE__ */ jsx7(Text, { sx: styles_default4.link, className: "link", children: linkTitle }),
Expand Down Expand Up @@ -5703,10 +5703,10 @@ var LibraryContextProvider = ({ children, ...props }) => {
setActiveSectionName(props.sectionSelected);
}, [props.sectionSelected]);
const { fallback } = props;
const toggleSidebarElementStatus = (title5) => {
const toggleSidebarElementStatus = (title6) => {
setSidebarElementStatus((sidebarElementStatus2) => {
const open = sidebarElementStatus2.has(title5) === false ? true : !sidebarElementStatus2.get(title5);
return new Map(sidebarElementStatus2.set(title5, open));
const open = sidebarElementStatus2.has(title6) === false ? true : !sidebarElementStatus2.get(title6);
return new Map(sidebarElementStatus2.set(title6, open));
});
};
const closeSidebarElements = (parentsArray) => {
Expand All @@ -5718,9 +5718,9 @@ var LibraryContextProvider = ({ children, ...props }) => {
}
});
};
const openSidebarElement = (title5) => {
const openSidebarElement = (title6) => {
setSidebarElementStatus((sidebarElementStatus2) => {
return new Map(sidebarElementStatus2.set(title5, true));
return new Map(sidebarElementStatus2.set(title6, true));
});
};
const goToPreviousItem = () => {
Expand Down Expand Up @@ -5864,7 +5864,11 @@ var en_default = {
"sidebar_search.placeholder": "Search in",
"image.error_loading": "An error occurred while trying to load the image.",
api_reference_sidebar_filter_clear: "Clear all",
api_reference_sidebar_filter: "Filter by"
api_reference_sidebar_filter: "Filter by",
"cookie_bar.title": "We use cookies",
"cookie_bar.description": "This website uses cookies to improve site navigation, analyze website usage, and assist in our marketing efforts.",
"cookie_bar.accept": "I understand",
"cookie_bar.decline": "I decline"
};

// src/messages/es.json
Expand All @@ -5881,7 +5885,11 @@ var es_default = {
"sidebar_search.placeholder": "Search in",
"image.error_loading": "An error occurred while trying to load the image.",
api_reference_sidebar_filter_clear: "Clear all",
api_reference_sidebar_filter: "Filter by"
api_reference_sidebar_filter: "Filter by",
"cookie_bar.title": "We use cookies",
"cookie_bar.description": "This website uses cookies to improve site navigation, analyze website usage, and assist in our marketing efforts.",
"cookie_bar.accept": "I understand",
"cookie_bar.decline": "I decline"
};

// src/messages/pt.json
Expand All @@ -5898,7 +5906,11 @@ var pt_default = {
"sidebar_search.placeholder": "Search in",
"image.error_loading": "An error occurred while trying to load the image.",
api_reference_sidebar_filter_clear: "Clear all",
api_reference_sidebar_filter: "Filter by"
api_reference_sidebar_filter: "Filter by",
"cookie_bar.title": "We use cookies",
"cookie_bar.description": "This website uses cookies to improve site navigation, analyze website usage, and assist in our marketing efforts.",
"cookie_bar.accept": "I understand",
"cookie_bar.decline": "I decline"
};

// src/utils/get-message.ts
Expand Down Expand Up @@ -6172,7 +6184,7 @@ var TableOfContents = ({ headingList }) => {
setHeadingItems(headings);
}, [router.asPath, headingList]);
const Item = ({
title: title5,
title: title6,
slug,
level,
active
Expand All @@ -6187,7 +6199,7 @@ var TableOfContents = ({ headingList }) => {
subItem: level === 1 ? "" : slug
}));
},
children: /* @__PURE__ */ jsx11(Text2, { sx: styles_default5.item(level, active), children: title5 })
children: /* @__PURE__ */ jsx11(Text2, { sx: styles_default5.item(level, active), children: title6 })
}
);
};
Expand Down Expand Up @@ -7965,7 +7977,7 @@ var cardTitle = (containerType) => {
// src/components/documentation-card/index.tsx
import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
var DocumentationCard = ({
title: title5,
title: title6,
description: description4,
link: link2,
containerType,
Expand All @@ -7975,7 +7987,7 @@ var DocumentationCard = ({
return /* @__PURE__ */ jsx23(Link5, { href: link2, legacyBehavior: true, children: /* @__PURE__ */ jsx23("a", { onClick, style: { width: "100%" }, children: /* @__PURE__ */ jsxs17(Box13, { sx: cardContainer3(containerType), children: [
/* @__PURE__ */ jsxs17(Flex11, { sx: titleContainer2(containerType), children: [
/* @__PURE__ */ jsx23(Icon24, { sx: { color: "#4A596B" }, size: 24 }),
/* @__PURE__ */ jsx23(Text7, { className: "title", sx: cardTitle(containerType), children: title5 })
/* @__PURE__ */ jsx23(Text7, { className: "title", sx: cardTitle(containerType), children: title6 })
] }),
/* @__PURE__ */ jsx23(Text7, { className: "description", sx: styles_default13.description, children: description4 })
] }) }) });
Expand Down Expand Up @@ -10111,7 +10123,7 @@ var expanded_results_icon_default = ExpandedResultsIcon;
import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
var SearchCard = ({
Icon: Icon24,
title: title5,
title: title6,
method,
breadcrumbs,
actionType,
Expand All @@ -10133,8 +10145,8 @@ var SearchCard = ({
active: false
}
) : null,
title5 === "overview" && `${hit.doccategory} `,
title5
title6 === "overview" && `${hit.doccategory} `,
title6
] }),
/* @__PURE__ */ jsxs41(Text13, { className: "searchCardDescription", sx: styles_default19.description, children: [
/* @__PURE__ */ jsx49(Flex17, { children: /* @__PURE__ */ jsx49(
Expand Down Expand Up @@ -10485,7 +10497,116 @@ var Search = () => {
] });
};
var search_default2 = Search;

// src/lib/cookie-bar/index.tsx
import { useContext as useContext17 } from "react";
import { CookieConsent } from "react-cookie-consent";

// src/lib/cookie-bar/styles.ts
var bar = {
backgroundColor: "#FFF",
borderRadius: "8px",
color: "#5E6E84",
padding: "20px",
width: "80%",
left: "50%",
transform: "translateX(-50%)",
maxWidth: "1280px",
alignItems: "center",
justifyContent: "center",
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)"
};
var barContent = {
display: "flex",
flex: "1 0 300px",
flexDirection: "column",
maxWidth: "100%"
};
var title5 = {
color: "#5E6E84",
marginBottom: "10px",
lineHeight: "28px",
fontSize: "25px",
fontWeight: "400"
};
var buttonContainer = {
display: "flex",
flexWrap: "wrap",
gap: "10px",
justifyContent: "center",
margin: "15px"
};
var acceptButton = {
background: "#F71963",
color: "#FFF",
padding: "7px 16px",
borderRadius: "2px",
margin: "0",
height: "32px",
fontWeight: "400",
":hover": {
opacity: "0.7"
}
};
var declineButton = {
border: "1px solid #F71963",
background: "#FFF",
color: "#F71963",
borderRadius: "2px",
fontWeight: "400",
margin: "0",
height: "32px",
":hover": {
opacity: "0.7"
}
};
var styles_default23 = {
bar,
barContent,
title: title5,
acceptButton,
declineButton,
buttonContainer
};

// src/lib/cookie-bar/index.tsx
import { Flex as Flex21, Text as Text16 } from "@vtex/brand-ui";
import aa3 from "search-insights";
import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
var Button6 = ({ children, style, ...props }) => {
return /* @__PURE__ */ jsx54(Flex21, { sx: style, ...props, children });
};
var CookieBar = ({ onAccept }) => {
const { locale } = useContext17(LibraryContext);
return /* @__PURE__ */ jsxs46(
CookieConsent,
{
enableDeclineButton: true,
buttonStyle: styles_default23.acceptButton,
declineButtonStyle: styles_default23.declineButton,
style: styles_default23.bar,
onAccept: () => {
aa3("init", {
partial: true,
useCookie: true
});
onAccept();
},
declineButtonText: messages[locale]["cookie_bar.decline"],
buttonText: messages[locale]["cookie_bar.accept"],
ButtonComponent: Button6,
customButtonWrapperAttributes: { style: styles_default23.buttonContainer },
customContentAttributes: { style: styles_default23.barContent },
children: [
/* @__PURE__ */ jsx54(Text16, { sx: styles_default23.title, children: messages[locale]["cookie_bar.title"] }),
/* @__PURE__ */ jsx54(Text16, { children: messages[locale]["cookie_bar.description"] })
]
}
);
};
var cookie_bar_default = CookieBar;
export {
cookie_bar_default as CookieBar,
feedback_section_default as FeedbackSection,
hamburger_menu_default as HamburgerMenu,
LibraryContext,
Expand Down
2 changes: 1 addition & 1 deletion dist/index.mjs.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading
Loading