feat(components): Carousel and Step components #482

voronianski · 2019-09-28T11:11:01Z

Closes #409.

Approach and changes

add generic Step component and hook for managing state in step/index based UIs and components
add generic AspectRatio component for keeping proper image proportions
add stateful version Carousel component powered by Step and AspectRatio components
add smaller blocks of the Carousel like Buttons, Progress, Status, Slide, etc. for composing them in a Custom carousel experience

Step component

Technically component uses the "function as child" and "prop getter" patterns but it's also possible to use it just as a hook:

import { Step } from '@sumup/circuit-ui';

const config = { ... };

<Step {...config}>
  {({ state, actions, ...propGetters }) => {
    // render your component here
  }}
</Step>

vs.

import { useStep } from '@sumup/circuit-ui';

const config = { ... };
const { state, actions, ...propGetters } = useStep(config);

Here are the examples below of how Step component can be used in a different ways to build index-based UIs.

Simple image slider

import { Step, Button, ButtonGroup, Image } from '@sumup/circuit-ui';

const figureStyles = ({ step, animationDuration }) => css`
  transform: translate3d(${-step * 300}px, 0, 0);
  transition: all ${animationDuration}ms ease-in-out;
`;
const Figure = styled('figure')(figureStyles);

const ImagelSlider = ({ images = [] }) => (
  <Step totalSteps={images.length}>
    {({
      state,
      getNextControlProps,
      getPreviousControlProps,
      getPauseControlProps,
      getPlayControlProps
    }) => (
      <div>
        <Figure
          step={state.step}
          animationDuration={state.animationDuration}
        >
          {images.map((image, i) => (
            <Image
              key={i}
              src={image}
              alt="random pic"
            />
          ))}
        </Figure>
        <ButtonGroup>
          <Button {...getPreviousControlProps()}>Prev</Button>
          <Button
            primary
            {...(state.paused ? getPlayControlProps() : getPauseControlProps())}
          >
            {state.paused ? 'Play' : 'Pause'}
          </Button>
          <Button {...getNextControlProps()}>Next</Button>
        </ButtonGroup>
      </div>
    )}
  </Step>
);

Multistep form

Step is suitable not only for image sliders. Any multi-step guides or slideshows can be achieved with it too:

import { Step, Label, Input, Select, Button, ButtonGroup, Heading, ProgressBar } from '@sumup/circuit-ui';

const FormOne = ({ onNextClick }) => (
  <section>
    <Label htmlFor="first">First Name</Label>
    <Input placeholder="John" id="first" />
    <Label htmlFor="second">Second Name</Label>
    <Input placeholder="Doe" id="second" />
    <Button primary onClick={() => onNextClick()}>
      Next
    </Button>
  </section>
);

const FormTwo = ({ onNextClick, onBackClick }) => (
  <section>
    <Label htmlFor="street">Street</Label>
    <Input placeholder="Madison Ave 5" id="street" />
    <Label htmlFor="state">State</Label>
    <Select id="state">
      <option>CA</option>
      <option>TX</option>
      <option>NY</option>
    </Select>
    <Label htmlFor="postal">Postal Code</Label>
    <Input placeholder="10179" id="postal" />
    <ButtonGroup align={ButtonGroup.LEFT}>
      <Button primary onClick={() => onNextClick()}>
        Submit
      </Button>
      <Button onClick={() => onBackClick()}>Back</Button>
    </ButtonGroup>
  </section>
);

const Thanks = () => (
  <section>
    <Heading>Thanks!</Heading>
  </section>
);

const MultiStepForm = () => {
  const steps = [FormOne, FormTwo, Thanks];
  const totalSteps = steps.length;

  return (
    <Step total={totalSteps}>
      {({ state, actions }) => {
        const StepComponent = steps[state.step];
        const stepNumber = state.step + 1;

        return (
          <div>
            <Heading size={Heading.GIGA}>
              Step {stepNumber} of {totalSteps}
            </Heading>
            <ProgressBar
              value={stepNumber}
              max={totalSteps}
              size={ProgressBar.KILO}
            />
            <StepComponent
              onNextClick={actions.next}
              onBackClick={actions.previous}
            />
          </div>
        );
      }}
    </Step>
  );
};

Yes/No slider with react-swipeable

And here is the interesting example of how you can easily add swipe/touch support into your slider-like UI if it's necessary:

import { Swipeable } from 'react-swipeable';
import { Step, Button, ButtonGroup } from '@sumup/circuit-ui';

const YesOrNoSlider = ({ images = [] }) => {
  const [swipe, setSwipe] = useState({});
  const handleSwipe = (eventData, actions) => {
    setSwipe(eventData);

    if (eventData.dir === LEFT_DIRECTION) {
      actions.previous();
    }

    if (eventData.dir === RIGHT_DIRECTION) {
      actions.next();
    }
  };

  return (
    <Step totalSteps={images.length}>
      {({ state, actions, getPreviousControlProps, getNextControlProps }) => (
        <div>
          <Swipeable onSwiped={eventData => handleSwipe(eventData, actions)}>
            <SliderImage
              src={images[state.step]}
              alt="random pic"
              swipe={swipe}
            />
          </Swipeable>
          <ButtonGroup align={ButtonGroup.CENTER}>
            <Button
              primary={swipe.dir === LEFT_DIRECTION}
              {...getPreviousControlProps()}
            >
              No
            </Button>
            <Button
              primary={swipe.dir === RIGHT_DIRECTION}
              {...getNextControlProps()}
            >
              Yes
            </Button>
          </ButtonGroup>
        </div>
      )}
    </Step>
  );
};

Carousel component

Carousel is a port of component designed for the website and you can also see it in action as part of Testimonials component on careers page (more details in proposal - #409).

So currently there are 2 ways of using it.

Stateful

First one is just as simple as passing array of images into it. All internal state management is handled by Step component automatically:

import { Carousel } from '@sumup/circuit-ui';

const slides = [
  {  image: { src, alt } }, 
  {  image: { src, alt } }
  //...
];

<Carousel slides={slides} />

Composed

Second approach is compositional which means you get the building blocks and arrange them in a way that you want. Keep in mind that you will need to manage state by yourself (or via Step):

import { CarouselComposed } from '@sumup/circuit-ui';

const { 
  Container, 
  Slides, 
  Slide, 
  SlideImage, 
  Controls, 
  Status,
  PrevButton,
  NextButton
} = CarouselComposed

const slides = [
  {  image: { src, alt } }, 
  {  image: { src, alt } }
  //...
];

const CustomCarousel = () => {
  const total = slides.length;
  const [step, setStep] = useState(0);
  const goBack = () => setStep(step === 0 ? total - 1 : step - 1);
  const goForward = () => setStep(step === total - 1 ? 0 : step + 1);

  return (
    <Container>
      <Slides>
        {slides.map(({ image }, index) => (
          <Slide
            key={index}
            index={index}
            step={step}
          >
            <SlideImage
              src={image.src}
              alt={image.alt}
            />
          </Slide>
        ))}
      </Slides>
      <Controls>
        <PrevButton onClick={goBack} />
        <Status step={step} total={total}  />
        <NextButton onClick={goForward} />
      </Controls>
    </Container>
  );
};

Limitations

As I mentioned before Step is just purely state management abstraction and it doesn't contain any touch/swipe event support into it. I also decided not to introduce any 3rd party "swipeable" component dependency for now. This means that currently Carousel component doesn't support swiping of images on mobiles. I see 2 ways of solving it:

obviously adding something like react-swipeable as a dependency to Circuit UI
creating light Swipe component inside Circuit UI by ourselves (which should be addressed in a separate PR)

I leave it as an open question and your feedback is welcome.

Definition of done

codecov · 2019-09-28T11:11:04Z

Codecov Report

Merging #482 into alpha will increase coverage by 0.03%.
The diff coverage is 88.88%.

@@            Coverage Diff             @@
##            alpha     #482      +/-   ##
==========================================
+ Coverage   79.76%   79.79%   +0.03%     
==========================================
  Files         187      188       +1     
  Lines        3251     3256       +5     
  Branches      887      887              
==========================================
+ Hits         2593     2598       +5     
  Misses        542      542              
  Partials      116      116

Impacted Files	Coverage Δ
src/util/numbers.js	`96.66% <ø> (ø)`	⬆️
src/components/Step/StepService.js	`100% <ø> (ø)`	⬆️
src/util/fp.js	`72.41% <0%> (ø)`	⬆️
src/components/Carousel/Carousel.js	`100% <100%> (+3.03%)`	⬆️
src/components/Pagination/PaginationService.js	`100% <100%> (ø)`	⬆️
src/components/Sidebar/Sidebar.js	`100% <100%> (ø)`	⬆️
...mponents/Sidebar/components/Separator/Separator.js	`100% <100%> (ø)`
src/components/Col/utils.js	`94.87% <100%> (ø)`	⬆️
src/util/currency.js	`100% <100%> (ø)`	⬆️
.../components/Carousel/components/Buttons/Buttons.js	`100% <100%> (ø)`	⬆️
... and 3 more

connor-baer

I love how clean and flexible this code is! Beautifully done ✨

What did you think of the new testing setup?

src/components/AspectRatio/AspectRatio.js

src/components/AspectRatio/AspectRatio.spec.js

src/components/Step/hooks/use-step.js

src/components/Carousel/hooks/use-component-size.spec.js

src/components/Step/examples/MultiStepForm.js

src/components/Carousel/components/Progress/Progress.js

src/components/Carousel/components/SlideImage/SlideImage.js

fernandofleury

Thanks for pushing it through, and thanks for also providing such in depth examples. I just wrote down some small ideas.

src/components/Carousel/Carousel.js

fernandofleury · 2019-10-10T15:03:24Z

src/components/Carousel/Carousel.spec.js

+import Carousel from './Carousel';
+import { SLIDES } from './__fixtures__';
+
+describe('Carousel', () => {


Shouldn't we also add functional tests to the Carousel?

Like:

clicking the next slide and expecting it to be the active one

clicking on the last slide and expecting it to loop

waiting for the timer to change the active slide

yo @fernandofleury, thanks for suggestion, however all the points you mentioned are covered by the tests in useStep hook which is used inside Carousel component and is responsible for managing the state - https://github.com/sumup-oss/circuit-ui/blob/feature/add-carousel-and-step-components/src/components/Step/hooks/use-step.spec.js

Also all possible variations of internal Carousel component styles are tested separately inside components itself by passing necessary props and matching the snapshots (e.g. Slide component and its' different animations).

All components in Step and Carousel have 100% code coverage.

I agree that having functional/e2e test is nice addition but in current setup (react-testing-library) we will end up with just testing React onClick handlers calling the right functions. This is totally fine but it also feels like having too match hassle (e.g. adding a lot of data-selectors) for no real benefit.

WDYT?

fernandofleury · 2019-10-10T15:04:50Z

src/components/Carousel/components/Slide/Slide.js

+
+const slideIn = keyframes`
+  from {
+    width: 0%;


Is it possible to use transform: scaleX instead of width? This way the animation can be optimised by the GPU.

it's possible but animation doesn't look the way it should be unfortunately.

fernandofleury · 2019-10-10T15:07:35Z

src/components/Carousel/components/Slide/Slide.js

+  ${isAnimating &&
+    css`
+      animation-name: ${animationName};
+      animation-duration: ${animationDuration}ms;
+      animation-fill-mode: forwards;
+      animation-timing-function: ${theme.transitions.easeInOutCubic};
+    `};


Suggested change

${isAnimating &&

css`

animation-name: ${animationName};

animation-duration: ${animationDuration}ms;

animation-fill-mode: forwards;

animation-timing-function: ${theme.transitions.easeInOutCubic};

`};

animation-name: ${animationName};

animation-duration: ${animationDuration}ms;

animation-fill-mode: forwards;

animation-timing-function: ${theme.transitions.easeInOutCubic};

animation-play-state: ${isAnimating ? 'running' : 'paused'}

Maybe we can use the play-state here? This way you don't have to conditionally add rules, just one value

Due to the way animation-play-state prop works, it leads to inconsistent sliding animations -

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

src/components/Carousel/hooks/use-component-size.js

src/components/Step/StepService.js

src/components/Step/examples/CarouselSlider.js

Co-Authored-By: Connor Bär <[email protected]>

scripts/static-styles/index.js

connor-baer · 2020-01-22T01:22:37Z

@voronianski What's the state of this PR? Could you please address the review comments so we can merge it soon? Is there anything I can help you with? :)

voronianski · 2020-01-22T11:03:35Z

@voronianski What's the state of this PR? Could you please address the review comments so we can merge it soon? Is there anything I can help you with? :)

@connor-baer, thanks a lot but no help is needed, it's just a question of time :) will address this asap

vercel · 2020-01-24T11:08:22Z

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/sumup-oss/circuit-ui/1zg2bhx28
✅ Preview: https://circuit-ui-git-feature-add-carousel-and-step-components.sumup-oss.now.sh

voronianski · 2020-01-24T18:03:22Z

yo @connor-baer, I addressed all the comments, feel free to recheck the PR.

connor-baer

I loooooove the work you've put into this pull request. So much attention to detail! Also kudos for keeping it in sync with the many upstream changes 👏👏

Let's merge this baby!

github-actions · 2020-01-28T15:32:24Z

🎉 This PR is included in version 2.0.0-alpha.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

larimaza · 2020-01-28T17:26:29Z

Can we close #409? @connor-baer

github-actions · 2020-06-08T08:45:11Z

🎉 This PR is included in version 2.0.0-beta.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions · 2020-07-30T16:37:05Z

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

voronianski added 5 commits September 27, 2019 23:22

add Step, Carousel and AspectRatio components

a501813

add comment to disabled specs

b3265e8

remove logs, refine code parts

e0c4ad2

update snapshots

884f826

add exports, enable skipped tests

b4a4293

voronianski mentioned this pull request Sep 28, 2019

tech: Update React to latest v16.10 #481

Closed

5 tasks

voronianski requested review from connor-baer, fernandofleury and herberthenrique September 28, 2019 11:17

voronianski mentioned this pull request Sep 28, 2019

[Proposal] Carousel Component #409

Closed

voronianski added the ready for review label Sep 28, 2019

connor-baer reviewed Oct 7, 2019

View reviewed changes

fernandofleury approved these changes Oct 10, 2019

View reviewed changes

voronianski changed the base branch from canary to alpha November 15, 2019 09:16

voronianski and others added 5 commits November 15, 2019 10:16

Update src/components/AspectRatio/AspectRatio.spec.js

72d3bb7

Co-Authored-By: Connor Bär <[email protected]>

Update src/components/Step/Step.spec.js

2b716de

Co-Authored-By: Connor Bär <[email protected]>

Update src/components/Carousel/hooks/use-component-size.spec.js

e351a13

Co-Authored-By: Connor Bär <[email protected]>

remove comment

6e7aaf9

Merge branch 'alpha' into feature/add-carousel-and-step-components

14b232a

voronianski commented Nov 15, 2019

View reviewed changes

scripts/static-styles/index.js Show resolved Hide resolved

updates re review comments + update stories

09aecdc

Merge branch 'alpha' into feature/add-carousel-and-step-components

f6acb37

vercel bot deployed to Preview January 24, 2020 11:03 View deployment

use _.over instead of custom func

f36ea41

vercel bot deployed to Preview January 24, 2020 11:14 View deployment

throttle resize events + update story files

a6ddb80

vercel bot deployed to Preview January 24, 2020 14:34 View deployment

add browser support note to doc

9050f48

vercel bot deployed to Preview January 24, 2020 15:26 View deployment

voronianski requested review from connor-baer and fernandofleury January 24, 2020 18:01

add missed test to hit 100% codecov

b73c34a

vercel bot deployed to Preview January 24, 2020 18:06 View deployment

connor-baer approved these changes Jan 27, 2020

View reviewed changes

voronianski merged commit 979a36f into alpha Jan 28, 2020

voronianski deleted the feature/add-carousel-and-step-components branch January 28, 2020 15:26

github-actions bot added the released on @alpha label Jan 28, 2020

github-actions bot added the released on @beta label Jun 8, 2020

github-actions bot added the released label Jul 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): Carousel and Step components #482

feat(components): Carousel and Step components #482

voronianski commented Sep 28, 2019 •

edited by connor-baer

Loading

codecov bot commented Sep 28, 2019 •

edited

Loading

connor-baer left a comment

fernandofleury left a comment

fernandofleury Oct 10, 2019

voronianski Jan 24, 2020 •

edited

Loading

fernandofleury Oct 10, 2019

voronianski Jan 24, 2020

fernandofleury Oct 10, 2019

voronianski Jan 24, 2020

connor-baer commented Jan 22, 2020

voronianski commented Jan 22, 2020

vercel bot commented Jan 24, 2020 •

edited

Loading

voronianski commented Jan 24, 2020 •

edited

Loading

connor-baer left a comment

github-actions bot commented Jan 28, 2020

larimaza commented Jan 28, 2020

github-actions bot commented Jun 8, 2020

github-actions bot commented Jul 30, 2020

feat(components): Carousel and Step components #482

feat(components): Carousel and Step components #482

Conversation

voronianski commented Sep 28, 2019 • edited by connor-baer Loading

Approach and changes

Step component

Simple image slider

Multistep form

Yes/No slider with react-swipeable

Carousel component

Stateful

Composed

Limitations

Definition of done

codecov bot commented Sep 28, 2019 • edited Loading

Codecov Report

connor-baer left a comment

Choose a reason for hiding this comment

fernandofleury left a comment

Choose a reason for hiding this comment

fernandofleury Oct 10, 2019

Choose a reason for hiding this comment

voronianski Jan 24, 2020 • edited Loading

Choose a reason for hiding this comment

fernandofleury Oct 10, 2019

Choose a reason for hiding this comment

voronianski Jan 24, 2020

Choose a reason for hiding this comment

fernandofleury Oct 10, 2019

Choose a reason for hiding this comment

voronianski Jan 24, 2020

Choose a reason for hiding this comment

connor-baer commented Jan 22, 2020

voronianski commented Jan 22, 2020

vercel bot commented Jan 24, 2020 • edited Loading

voronianski commented Jan 24, 2020 • edited Loading

connor-baer left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 28, 2020

larimaza commented Jan 28, 2020

github-actions bot commented Jun 8, 2020

github-actions bot commented Jul 30, 2020

voronianski commented Sep 28, 2019 •

edited by connor-baer

Loading

codecov bot commented Sep 28, 2019 •

edited

Loading

voronianski Jan 24, 2020 •

edited

Loading

vercel bot commented Jan 24, 2020 •

edited

Loading

voronianski commented Jan 24, 2020 •

edited

Loading