From ece34385bcb173a6724d6be3204f6bb4dea6f71b Mon Sep 17 00:00:00 2001
From: Dmitrii Pikulin <aspirisen@gmail.com>
Date: Tue, 22 Feb 2022 13:03:23 +0300
Subject: [PATCH 1/2] Add Coverage settings story

---
 .../components/Toolbox/Toolbox.stories.tsx    | 79 ++++++++++++++++++-
 1 file changed, 77 insertions(+), 2 deletions(-)

diff --git a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx
index 5dfbdb87d..f7dbdf0a9 100644
--- a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx
+++ b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx
@@ -39,12 +39,12 @@ export function WebBookmark() {
     const cardLayoutOptions: OptionsGroupOption<'vertical' | 'horizontal'>[] = [
         {
             value: 'vertical',
-            label: 'Left',
+            label: 'Certical',
             icon: (props) => <ItemsLayoutVertical fill={props.isActive ? '#F9CA7B' : 'white'} />,
         },
         {
             value: 'horizontal',
-            label: 'Center',
+            label: 'Horizontal',
             icon: (props) => <ItemsLayoutHorizontal fill={props.isActive ? '#F9CA7B' : 'white'} />,
         },
     ];
@@ -269,3 +269,78 @@ export function GallerySettings() {
         </div>
     );
 }
+
+export function CoverageCard() {
+    const [cardLayout, setCardLayout] = React.useState<
+        typeof cardLayoutOptions[number]['value'] | undefined
+    >('horizontal');
+
+    const cardLayoutOptions: OptionsGroupOption<'vertical' | 'horizontal'>[] = [
+        {
+            value: 'horizontal',
+            label: 'Horizontal',
+            icon: (props) => <ItemsLayoutHorizontal fill={props.isActive ? '#F9CA7B' : 'white'} />,
+        },
+        {
+            value: 'vertical',
+            label: 'Vertical',
+            icon: (props) => <ItemsLayoutVertical fill={props.isActive ? '#F9CA7B' : 'white'} />,
+        },
+    ];
+
+    return (
+        <div style={{ width: 280 }}>
+            <Toolbox.Panel>
+                <Toolbox.Header withCloseButton>Coverage card settings</Toolbox.Header>
+
+                <Toolbox.Section noPadding>
+                    <ButtonGroup>
+                        {[
+                            <Button
+                                key="edit"
+                                variant="clear"
+                                icon={ExternalLink}
+                                iconPosition="right"
+                                fullWidth
+                            >
+                                Edit
+                            </Button>,
+                            <Button
+                                key="view"
+                                variant="clear"
+                                icon={ExternalLink}
+                                iconPosition="right"
+                                fullWidth
+                            >
+                                View
+                            </Button>,
+                        ]}
+                    </ButtonGroup>
+                </Toolbox.Section>
+
+                <Toolbox.Section caption="Preview image">
+                    <Toggle name="show_preview">Show preview image</Toggle>
+                </Toolbox.Section>
+
+                <Toolbox.Section caption="Card layout">
+                    <VStack spacing="2-5">
+                        <OptionsGroup
+                            name="layout"
+                            options={cardLayoutOptions}
+                            selectedValue={cardLayout}
+                            onChange={setCardLayout}
+                            columns={3}
+                        />
+                        <Toggle name="new_tab">Open in new tab</Toggle>
+                    </VStack>
+                </Toolbox.Section>
+
+                <Toolbox.Footer>
+                    <Button variant="clear-faded" icon={Delete} fullWidth>
+                        Remove web bookmark
+                    </Button>
+                </Toolbox.Footer>
+            </Toolbox.Panel>
+        </div>
+    );
+}

From 20306dbbcc3171eabe3331ba2bc2caf164cbbfb4 Mon Sep 17 00:00:00 2001
From: Dmitrii Pikulin <aspirisen@gmail.com>
Date: Thu, 24 Feb 2022 17:28:27 +0300
Subject: [PATCH 2/2] Fix typo

---
 .../slate-editor/src/components/Toolbox/Toolbox.stories.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx
index f7dbdf0a9..47da894ec 100644
--- a/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx
+++ b/packages/slate-editor/src/components/Toolbox/Toolbox.stories.tsx
@@ -39,7 +39,7 @@ export function WebBookmark() {
     const cardLayoutOptions: OptionsGroupOption<'vertical' | 'horizontal'>[] = [
         {
             value: 'vertical',
-            label: 'Certical',
+            label: 'Vertical',
             icon: (props) => <ItemsLayoutVertical fill={props.isActive ? '#F9CA7B' : 'white'} />,
         },
         {