@@ -226,9 +232,7 @@ const SlotsPage: React.FC = () => {
})}
-
+
{canEdit ? (
{
className="h-11 text-gray-600"
aria-label={t(SlotsAria.EnableEdit)}
>
- Edit
+ Edit{" "}
+
+
+
)}
diff --git a/packages/ui/src/CalendarNav/CalendarNav.stories.tsx b/packages/ui/src/CalendarNav/CalendarNav.stories.tsx
index e406a049b..e28dbba34 100644
--- a/packages/ui/src/CalendarNav/CalendarNav.stories.tsx
+++ b/packages/ui/src/CalendarNav/CalendarNav.stories.tsx
@@ -2,11 +2,11 @@ import React, { useState } from "react";
import { ComponentMeta } from "@storybook/react";
import { DateTime } from "luxon";
-import { Printer, PlusCircle, Copy, XCircle, Pencil } from "@eisbuk/svg"
+import { Printer, PlusCircle, Copy } from "@eisbuk/svg";
import CalendarNav from "./CalendarNav";
import EmptySpace from "../EmptySpace";
-import Button, { ButtonColor } from "../Button"
+import Button, { ButtonColor } from "../Button";
export default {
title: "Calendar Nav",
@@ -53,8 +53,8 @@ const countdown = (
);
export const WithAdditionalContent = (): JSX.Element => {
- const [canEdit, setCanEdit] = useState(false)
- const toggleEdit = () => setCanEdit(!canEdit)
+ const [canEdit, setCanEdit] = useState(false);
+ const toggleEdit = () => setCanEdit(!canEdit);
return (
<>
@@ -89,7 +89,11 @@ export const WithAdditionalContent = (): JSX.Element => {
@@ -97,7 +101,7 @@ export const WithAdditionalContent = (): JSX.Element => {
}
/>
>
- )
+ );
};
export const WithCountdown = (): JSX.Element => (
@@ -107,4 +111,3 @@ export const WithCountdown = (): JSX.Element => (
additionalContent={countdown}
/>
);
-
diff --git a/packages/ui/src/SlotCard/SlotCard.stories.tsx b/packages/ui/src/SlotCard/SlotCard.stories.tsx
index 05efead36..f01a3492c 100644
--- a/packages/ui/src/SlotCard/SlotCard.stories.tsx
+++ b/packages/ui/src/SlotCard/SlotCard.stories.tsx
@@ -54,8 +54,8 @@ export const PackedWithContent = (): JSX.Element => (
);
export const ButtonsToggle = (): JSX.Element => {
- const [canEdit, setCanEdit] = React.useState(false)
- const toggleEdit = () => setCanEdit(!canEdit)
+ const [canEdit, setCanEdit] = React.useState(false);
+ const toggleEdit = () => setCanEdit(!canEdit);
return (
<>
@@ -69,14 +69,15 @@ export const ButtonsToggle = (): JSX.Element => {
>
- )
+ );
};
export const Selected = (): JSX.Element => {
diff --git a/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx b/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx
index d51f55d7d..4583d31df 100644
--- a/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx
+++ b/packages/ui/src/SlotsDayContainer/SlotsDayContainer.stories.tsx
@@ -89,7 +89,7 @@ export const WithButtons = (): JSX.Element => (
);
export const PrototypeSlotsPage = (): JSX.Element => {
- const [canEdit, setCanEdit] = React.useState(false)
+ const [canEdit, setCanEdit] = React.useState(false);
return (
@@ -99,19 +99,17 @@ export const PrototypeSlotsPage = (): JSX.Element => {
}
+ additionalContent={
+ canEdit ? additionalContent :
+ }
>
))}
-
+
{canEdit ? (
-
+
@@ -134,6 +132,6 @@ export const PrototypeSlotsPage = (): JSX.Element => {
)}
-
- )
+
+ );
};