fix(Accordion): Accordion sticky footer story

kiwicom · Nov 9, 2020 · 1864f34 · 1864f34
1 parent 1ed203b
commit 1864f34
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/packages/orbit-components/src/Accordion/Accordion.stories.js b/packages/orbit-components/src/Accordion/Accordion.stories.js
@@ -6,15 +6,24 @@ import Text from "../Text";
 import Button from "../Button";
 import Stack from "../Stack";
 import AccordionSection from "./AccordionSection";
+import useMediaQuery from "../hooks/useMediaQuery";
 
 import Accordion from "./index";
 
-const tmpFooter = (
-  <Stack direction="row" justify="between">
-    <Button type="secondary">Back to previous segment</Button>
-    <Button type="primarySubtle">Continue to next segment</Button>
-  </Stack>
-);
+const Footer = () => {
+  const { isTablet, isMediumMobile } = useMediaQuery();
+
+  return (
+    <Stack flex shrink justify="between" direction={isMediumMobile ? "row" : "column"}>
+      <Button fullWidth={!isTablet} type="secondary">
+        Back to previous segment
+      </Button>
+      <Button fullWidth={!isTablet} type="primarySubtle">
+        Continue to next segment
+      </Button>
+    </Stack>
+  );
+};
 
 storiesOf("Accordion", module)
   .add("Default", () => {
@@ -185,7 +194,7 @@ storiesOf("Accordion", module)
               <Text size="small">This is a header label</Text>
             </Stack>
           }
-          footer={tmpFooter}
+          footer={<Footer />}
         >
           <Text type="primary">This is a content text</Text>
           <Text type="primary">This is a content text</Text>
@@ -212,7 +221,7 @@ storiesOf("Accordion", module)
               <Text size="small">This is a content text</Text>
             </Stack>
           }
-          footer={tmpFooter}
+          footer={<Footer />}
         >
           <Text type="primary">This is a content text</Text>
           <Text type="primary">This is a content text</Text>

diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.js b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionFooter.js
@@ -11,6 +11,7 @@ const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.orbit.paletteWhite};
   position: sticky;
   bottom: 0;
+  box-sizing: border-box;
   box-shadow: ${({ theme }) => theme.orbit.boxShadowActionActive};
 `;