chore(docs): add example for carousel with padding

Grsmto · Sep 26, 2022 · b913dcf · b913dcf
1 parent 68d5c85
commit b913dcf
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/packages/core/src/smoothScroll.ts b/packages/core/src/smoothScroll.ts
@@ -82,5 +82,6 @@ export const smoothScroll = (
   duration: number
 ) => {
   if (!node) return;
+  // Can't use scrollIntoView() yet since Safari support is still weak: https://caniuse.com/scrollintoview
   return smoothScrollPolyfill({ node, scrollTarget, duration });
 };
diff --git a/packages/docs/stories/carousel.css b/packages/docs/stories/carousel.css
@@ -12,8 +12,8 @@
   object-fit: contain;
 }
 
-.carousel-story.thumbnails .slide {
-  scroll-snap-align: start;
+.carousel-story .slide {
+  scroll-snap-align: center;
 }
 
 /* .slide:first-child {
@@ -57,3 +57,12 @@
     display: none;
   }
 } */
+
+.carousel-story.with-padding .carousel-container {
+  padding-left: 300px;
+  scroll-padding-left: 300px;
+}
+
+.carousel-story.with-padding-child .carousel-container .slide:first-child {
+  padding-left: 300px;
+}
diff --git a/packages/docs/stories/carousel.stories.tsx b/packages/docs/stories/carousel.stories.tsx
@@ -23,6 +23,7 @@ const Carousel: FC<{
 
   const scrollTo = useScroll({ ref });
   const index = useActiveSnap({ ref });
+
   // const index = 0;
   const slides = Array.from(new Array(6));
 
@@ -121,9 +122,7 @@ Thumbnails.args = {
 Thumbnails.play = async ({ args, canvasElement }) => {
   const canvas = within(canvasElement);
 
-  const nextBtn = canvas.getByText('Next', {
-    selector: 'button',
-  });
+  const nextBtn = canvasElement.querySelector('.carousel-nav__btn--next');
 
   await userEvent.click(nextBtn);
 
@@ -134,3 +133,15 @@ Thumbnails.play = async ({ args, canvasElement }) => {
   );
   await waitFor(() => expect(args.onChange).toHaveBeenCalled());
 };
+
+export const WithPadding = Template.bind({});
+WithPadding.args = {
+  className: 'with-padding',
+  onChange: () => {},
+};
+
+export const WithPaddingChild = Template.bind({});
+WithPaddingChild.args = {
+  className: 'with-padding-child',
+  onChange: () => {},
+};
diff --git a/packages/docs/stories/styles.css b/packages/docs/stories/styles.css
@@ -38,7 +38,6 @@ button {
   height: 100%;
   scroll-snap-align: center;
   background-color: #c9edf2;
-  background-clip: content-box;
   box-sizing: border-box;
   display: grid;
   place-items: center;
@@ -78,22 +77,24 @@ button {
   overflow: hidden;
   position: absolute;
   text-align: center;
-  transition: background-color .1s linear, color .1s linear, opacity .1s linear;
+  transition: background-color 0.1s linear, color 0.1s linear,
+    opacity 0.1s linear;
   width: 52px;
   height: 52px;
   border-radius: 52px;
   top: 49%;
   margin-top: -21px;
-  transform: scale(.8);
+  transform: scale(0.8);
   opacity: 0;
-  transition: transform .5s ease-in,opacity .7s cubic-bezier(.15,0,.2,1) .1s;
-  background-color: rgba(0,0,0,.2);
+  transition: transform 0.5s ease-in,
+    opacity 0.7s cubic-bezier(0.15, 0, 0.2, 1) 0.1s;
+  background-color: rgba(0, 0, 0, 0.2);
   color: #fff;
   line-height: 0;
 }
 
 .carousel-nav button:hover {
-  background-color: rgba(0,0,0,.6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .carousel:hover .carousel-nav button:hover:not([disabled]),
@@ -107,7 +108,7 @@ button {
 }
 
 .carousel-nav__btn--previous svg {
-  transform: rotateZ(90deg)
+  transform: rotateZ(90deg);
 }
 
 .carousel-nav__btn--next {