feat: add toggles to consent options

allows setting each consent category separately
dekk-app · Aug 22, 2021 · 50dda56 · 50dda56
1 parent 1f4c1a4
commit 50dda56
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 15 deletions.
diff --git a/src/molecules/input-field/styled.ts b/src/molecules/input-field/styled.ts
@@ -28,7 +28,7 @@ export const StyledInput = styled("input", {
 
 		&:focus {
 			outline: 0;
-			box-shadow: inset 0 0 0 1px
+			box-shadow: inset 0 0 0 ${theme.borders.focusRing}
 				${invalid
 					? theme.ui.molecules.inputField.error.border
 					: theme.ui.colors.focusRing.border};

diff --git a/src/pages/legal/cookie-policy/index.tsx b/src/pages/legal/cookie-policy/index.tsx
@@ -1,5 +1,7 @@
 import Button from "@/atoms/button";
 import ButtonGroup from "@/atoms/button/button-group";
+import Toggle from "@/atoms/toggle";
+import { StyledToggleLabel } from "@/atoms/toggle/styled";
 import Typography from "@/atoms/typography";
 import { useCookieConsentContext } from "@/ions/contexts/cookie-consent";
 import { GET_LEGAL_PAGE } from "@/ions/queries/legal-page";
@@ -41,22 +43,47 @@ const Page: NextPage<PageProps> = props => {
 	);
 	const { t } = useTranslation(["cookie-banner"]);
 
-	const { consent, acceptAllCookies, declineAllCookies } = useCookieConsentContext();
+	const { consent, acceptAllCookies, declineAllCookies, acceptCookies } =
+		useCookieConsentContext();
 
 	return (
 		<WrappedLegalPage data={data} error={error} loading={loading}>
 			<div>
 				<Typography variant="h3">{t("cookie-banner:consent-given")}</Typography>
-				<ol>
-					{consentKeys.map(key => {
-						return (
-							<Typography key={key} raw component="li">
-								{t(`cookie-banner:${key}`)}:{" "}
-								{consent[key] ? t("common:yes") : t("common:no")}
-							</Typography>
-						);
-					})}
-				</ol>
+				<table>
+					<tbody>
+						{consentKeys.map(key => {
+							return (
+								<tr key={key}>
+									<td>
+										<Typography raw>
+											{t(`cookie-banner:${key}`)}&nbsp;
+										</Typography>
+									</td>
+									<td>
+										<label>
+											<Toggle
+												checked={consent[key] as boolean}
+												disabled={key === "necessary"}
+												onChange={event_ => {
+													acceptCookies({
+														...consent,
+														[key]: (event_.target as HTMLInputElement)
+															.checked,
+													});
+												}}
+											/>
+											<StyledToggleLabel>
+												{consent[key] ? t("common:yes") : t("common:no")}
+											</StyledToggleLabel>
+										</label>
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+				<br />
 			</div>
 			<ButtonGroup>
 				<Button

diff --git a/src/templates/design-system/index.tsx b/src/templates/design-system/index.tsx
@@ -34,22 +34,25 @@ const DesignSystem = () => {
 				<Column>
 					<ul>
 						<li>
-							<I18nLink href="/design-system/typography">Typography</I18nLink>
+							<I18nLink href="/design-system/accordion">Accordion</I18nLink>
 						</li>
 						<li>
 							<I18nLink href="/design-system/button">Button</I18nLink>
 						</li>
+						<li>
+							<I18nLink href="/design-system/grid">Grid</I18nLink>
+						</li>
 						<li>
 							<I18nLink href="/design-system/space">Space</I18nLink>
 						</li>
 						<li>
 							<I18nLink href="/design-system/spinner">Spinner</I18nLink>
 						</li>
 						<li>
-							<I18nLink href="/design-system/accordion">Accordion</I18nLink>
+							<I18nLink href="/design-system/toggle">Toggle</I18nLink>
 						</li>
 						<li>
-							<I18nLink href="/design-system/grid">Grid</I18nLink>
+							<I18nLink href="/design-system/typography">Typography</I18nLink>
 						</li>
 					</ul>
 				</Column>