diff --git a/packages/carousel/package.json b/packages/carousel/package.json
index ec430a7ed..8fae14e7e 100644
--- a/packages/carousel/package.json
+++ b/packages/carousel/package.json
@@ -29,6 +29,8 @@
"react"
],
"peerDependencies": {
+ "@crave/farmblocks-icon": "^1.0.0",
+ "@crave/farmblocks-button": "^10.0.5",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"styled-components": "^5.2.2"
@@ -36,6 +38,7 @@
"dependencies": {
"@crave/farmblocks-image": "^3.2.6",
"@crave/farmblocks-text": "^3.6.5",
- "@crave/farmblocks-theme": "^1.10.1"
+ "@crave/farmblocks-theme": "^1.10.1",
+ "lodash.debounce": "^4.0.8"
}
}
diff --git a/packages/carousel/src/Carousel.js b/packages/carousel/src/Carousel.js
index 5f05d324e..38247080b 100644
--- a/packages/carousel/src/Carousel.js
+++ b/packages/carousel/src/Carousel.js
@@ -1,139 +1,190 @@
-import * as React from "react";
+import React, { useState, useEffect, useMemo } from "react";
import PropTypes from "prop-types";
-import Image from "@crave/farmblocks-image";
-import Text from "@crave/farmblocks-text";
-
-import Container from "./styledComponents/Carousel";
-
-const defaultConfig = {
- width: 656,
- height: 328,
- margin: 20,
- fontSize: 88,
- displayTime: 4,
- transitionTime: 2,
- border: "4px solid rgba(255, 255, 255, 0.56)",
- borderRadius: "16px",
-};
+import debounce from "lodash.debounce";
+import { SmChevronRight, SmChevronLeft } from "@crave/farmblocks-icon";
+import {
+ Container,
+ Wrapper,
+ Content,
+ ButtonContainer,
+ ArrowButton,
+} from "./styledComponents/Carousel";
+
+import Dots from "./components/Dots";
+import useTouch from "./hooks/useTouch";
+
+function Carousel(
+ {
+ qtyOfSlidesPerSet,
+ infiniteLoop,
+ children,
+ leftButtonProps,
+ rightButtonProps,
+ },
+ ...props
+) {
+ const CAROUSEL_DELAY = 300;
+
+ const displayNumber =
+ qtyOfSlidesPerSet < children.length ? qtyOfSlidesPerSet : children.length;
+
+ const [dotIndex, setDotIndex] = useState(0);
+ const [currentIndex, setCurrentIndex] = useState(
+ infiniteLoop && displayNumber < children.length ? displayNumber : 0,
+ );
+
+ useEffect(() => {
+ if (infiniteLoop) setCurrentIndex(dotIndex + displayNumber);
+ else if (currentIndex > children.length - qtyOfSlidesPerSet)
+ setCurrentIndex(children.length - qtyOfSlidesPerSet);
+ }, [displayNumber]);
+
+ const totalOfCards = children.length;
+ const isRepeating = useMemo(
+ () => infiniteLoop && children.length > displayNumber,
+ [children, infiniteLoop, displayNumber],
+ );
+
+ const [transitionEnabled, setTransitionEnabled] = useState(true);
+
+ useEffect(() => {
+ if (isRepeating) {
+ if (currentIndex === displayNumber || currentIndex === totalOfCards) {
+ setTransitionEnabled(true);
+ }
+ }
+ }, [currentIndex, isRepeating, displayNumber, totalOfCards]);
-class Carousel extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeItem: 0,
- };
+ function handleDotClick(index) {
+ setDotIndex(index);
+ setCurrentIndex(index + displayNumber);
}
- componentDidMount = () => {
- this.setInterval();
- };
+ const nextSlide = debounce(() => {
+ if (dotIndex < totalOfCards - 1) setDotIndex((prevState) => prevState + 1);
+ else if (isRepeating && dotIndex === totalOfCards - 1) {
+ setDotIndex(0);
+ }
+ const result = totalOfCards - displayNumber;
- componentDidUpdate(prevProps) {
- if (prevProps.imageSet !== this.props.imageSet) {
- this.setState({ activeItem: 0 });
- this.setInterval();
+ if (isRepeating || currentIndex < result) {
+ setCurrentIndex((prevState) => prevState + 1);
}
- }
+ }, CAROUSEL_DELAY);
- componentWillUnmount = () => {
- this.clearInterval();
- };
+ const prevSlide = debounce(() => {
+ if (dotIndex === 0) setDotIndex(totalOfCards - 1);
+ else setDotIndex((prevState) => prevState - 1);
- nextItem = () => {
- const activeItem = this.state.activeItem + 1; // eslint-disable-line
- if (activeItem === this.props.imageSet.length) {
- this.clearInterval();
- this.props.onEnd();
- return;
+ if (isRepeating || currentIndex > 0) {
+ setCurrentIndex((prevState) => prevState - 1);
}
- this.props.onChange(activeItem);
- this.setState({ activeItem });
- };
-
- setInterval = () => {
- if (this.transitionId) {
- return;
+ }, CAROUSEL_DELAY);
+
+ const { handleTouchStart, handleTouchMove } = useTouch({
+ nextSlide,
+ prevSlide,
+ });
+
+ function handleTransitionEnd() {
+ if (isRepeating) {
+ if (currentIndex === 0) {
+ setTransitionEnabled(false);
+ setCurrentIndex(totalOfCards);
+ } else if (currentIndex === totalOfCards + displayNumber) {
+ setTransitionEnabled(false);
+ setCurrentIndex(displayNumber);
+ }
}
+ }
- const { displayTime } = { ...defaultConfig, ...this.props.itemConfig };
-
- this.transitionId = window.setInterval(this.nextItem, displayTime * 1000);
- };
-
- clearInterval = () => {
- if (this.transitionId) {
- window.clearInterval(this.transitionId);
- delete this.transitionId;
+ const renderExtraPrev = useMemo(() => {
+ const output = [];
+ for (let index = 0; index < displayNumber; index += 1) {
+ output.push(children[totalOfCards - 1 - index]);
}
- };
-
- render() {
- const { imageSet, itemConfig } = this.props;
- const configProps = { ...defaultConfig, ...itemConfig };
-
- return (
-
-
- {imageSet.map((item, index) => {
- const isActive = index === this.state.activeItem;
- return (
- -
-
-
- {item.name}
-
-
- );
- })}
-
-
- );
- }
+ output.reverse();
+ return output;
+ }, [children, totalOfCards, displayNumber]);
+
+ const renderExtraNext = useMemo(() => {
+ const output = [];
+ for (let index = 0; index < displayNumber; index += 1) {
+ output.push(children[index]);
+ }
+ return output;
+ }, [children, displayNumber]);
+
+ const showLeftArrow = isRepeating || currentIndex > 0;
+ const showRightArrow =
+ isRepeating || currentIndex < totalOfCards - displayNumber;
+ const renderExtras = totalOfCards > displayNumber && isRepeating;
+
+ return (
+
+
+
+ {showLeftArrow && (
+ }
+ {...leftButtonProps}
+ onClick={(event) => {
+ prevSlide();
+ leftButtonProps?.onClick?.(event);
+ }}
+ />
+ )}
+
+
+ handleTouchStart(event)}
+ onTouchMove={(event) => handleTouchMove(event)}
+ >
+ {renderExtras && renderExtraPrev}
+ {children}
+ {renderExtras && renderExtraNext}
+
+
+
+ {showRightArrow && (
+ }
+ {...rightButtonProps}
+ onClick={(event) => {
+ nextSlide();
+ rightButtonProps?.onClick?.(event);
+ }}
+ />
+ )}
+
+
+ {isRepeating && (
+
+ )}
+
+ );
}
Carousel.propTypes = {
- imageSet: PropTypes.arrayOf(
- PropTypes.shape({ image: PropTypes.string, name: PropTypes.string }),
- ),
- onChange: PropTypes.func,
- onEnd: PropTypes.func,
- scale: PropTypes.bool,
- itemConfig: PropTypes.shape({
- width: PropTypes.number,
- height: PropTypes.number,
- margin: PropTypes.number,
- fontSize: PropTypes.number,
- displayTime: PropTypes.number,
- transitionTime: PropTypes.number,
- border: PropTypes.string,
- }),
- className: PropTypes.string,
+ children: PropTypes.node.isRequired,
+ qtyOfSlidesPerSet: PropTypes.number,
+ infiniteLoop: PropTypes.bool,
+ leftButtonProps: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+ rightButtonProps: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};
-
Carousel.defaultProps = {
- itemConfig: defaultConfig,
- scale: true,
- onChange: () => null,
- onEnd: () => null,
+ infiniteLoop: false,
+ qtyOfSlidesPerSet: 1,
};
export default Carousel;
diff --git a/packages/carousel/src/Carousel.story.js b/packages/carousel/src/Carousel.story.js
index 77b9d5d4c..b16a5a727 100644
--- a/packages/carousel/src/Carousel.story.js
+++ b/packages/carousel/src/Carousel.story.js
@@ -1,101 +1,159 @@
import React from "react";
import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import Carousel from ".";
+import { MdArrowLeft, MdArrowRight } from "@crave/farmblocks-icon";
+
+import { Carousel, Slide, useResizeWindow } from ".";
const imageSet = [
- {
- image: "https://picsum.photos/640/?image=1080",
- name: "Organic Pepper",
- },
- {
- image: "https://picsum.photos/640/?image=824",
- name: "Tomato",
- },
- {
- image: "https://picsum.photos/640/?image=889",
- name: "Grapefruit",
- },
- {
- image: "https://picsum.photos/640/?image=674",
- name: "Tomato",
- },
- {
- image: "https://picsum.photos/640/?image=292",
- name: "Tomato",
- },
- {
- image: "https://picsum.photos/640/?image=517",
- name: "Tomato",
- },
- {
- image: "https://picsum.photos/640/?image=627",
- name: "Tomato",
- },
- {
- image: "https://picsum.photos/640/?image=75",
- name: "Tomato",
+ 
,
+ 
,
+ 
,
+ 
,
+ 
,
+ 
,
+ 
,
+ 
,
+ 
,
+];
+
+const leftButtonStyle = {
+ icon: ,
+ style: {
+ borderRadius: "0px",
},
- {
- image: "https://picsum.photos/640/?image=766",
- name: "Romaine Lettuce",
+};
+const rightButtonStyle = {
+ icon: ,
+ style: {
+ borderRadius: "0px",
},
-];
+};
storiesOf("Carousel", module)
- .add("1 photo", () => )
+ .add("1 photo", () => (
+
+
+ {imageSet[0]}
+
+
+ ))
- .add("1 photo with onEnd", () => (
-
+ .add("2 photos", () => (
+
+
+ {imageSet[0]}
+ {imageSet[1]}
+
+
))
- .add("2 photos", () => )
+ .add("all photos", () => {
+ const AllPhotos = () => {
+ const { displayNumber } = useResizeWindow({
+ breakpoints: [
+ {
+ width: 768,
+ slidesToShow: 1,
+ },
+ {
+ width: 1200,
+ slidesToShow: 3,
+ },
+ {
+ width: 1000,
+ slidesToShow: 2,
+ },
+ ],
+ qtyOfSlidesPerSet: 4,
+ });
+ return (
+
+
+ {imageSet.map((value) => (
+ {value}
+ ))}
+
+
+ );
+ };
- .add("all photos", () => )
- .add("no scale", () => )
+ return ;
+ })
+ .add("infinite loop", () => {
+ const InfinitLoop = () => {
+ const { displayNumber } = useResizeWindow({
+ breakpoints: [
+ {
+ width: 768,
+ slidesToShow: 1,
+ },
+ {
+ width: 1200,
+ slidesToShow: 2,
+ },
+ ],
+ infiniteLoop: true,
+ qtyOfSlidesPerSet: 3,
+ numberOfCards: imageSet.length,
+ dotIndex: 0,
+ });
+ return (
+
+
+ {imageSet.map((value) => (
+ {value}
+ ))}
+
+
+ );
+ };
- .add("all photos with onChange and onEnd", () => (
-
- ))
- .add("partial custom config", () => (
-
- ))
- .add("custom config", () => (
- ;
+ })
+ .add("Custom carousel", () => (
+
- ))
- .add("extended style", () => (
-
+ >
+
+ {imageSet.map((value) => (
+ {value}
+ ))}
+
+
));
diff --git a/packages/carousel/src/Carousel.test.js b/packages/carousel/src/Carousel.test.js
index 964876d56..7e0dbca2b 100644
--- a/packages/carousel/src/Carousel.test.js
+++ b/packages/carousel/src/Carousel.test.js
@@ -1,122 +1,89 @@
import React from "react";
-import renderer from "react-test-renderer";
-import { configure, mount } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-import Carousel from ".";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
-describe("Carousel", () => {
- configure({ adapter: new Adapter() });
- jest.useFakeTimers();
-
- let clearIntervalSpy;
- let setIntervalSpy;
-
- beforeEach(() => {
- clearIntervalSpy = jest.spyOn(window, "clearInterval");
- setIntervalSpy = jest.spyOn(window, "setInterval");
- });
-
- afterEach(() => {
- clearTimeout.mockClear();
- clearIntervalSpy.mockClear();
- setIntervalSpy.mockClear();
- });
-
- test("active photo should change after displayTime", () => {
- const imageSet = [
- { image: "http://example.com/1.png", name: "1" },
- { image: "http://example.com/2.png", name: "2" },
- { image: "http://example.com/3.png", name: "3" },
- ];
- const component = renderer.create();
- const state = component.getInstance().state;
- expect(state.activeItem).toBe(0);
-
- jest.runOnlyPendingTimers();
-
- const finalState = component.getInstance().state;
- expect(finalState.activeItem).toBe(1);
- });
-
- test("onEnd event handler should be called after the last photo", () => {
- const imageSet = [
- { image: "http://example.com/1.png", name: "1" },
- { image: "http://example.com/2.png", name: "2" },
- { image: "http://example.com/3.png", name: "3" },
- ];
- const onEndMock = jest.fn();
- renderer.create();
- jest.runAllTimers();
-
- expect(onEndMock).toBeCalled();
- });
-
- test("setInterval should be called on mount and not called if there's a transitionId", () => {
- const imageSet = [{ image: "http://example.com/1.png", name: "1" }];
- const component = renderer.create();
+import { Carousel, Slide } from ".";
- const cb = component.getInstance().nextItem;
-
- expect(setIntervalSpy).toHaveBeenCalledWith(cb, 4000);
- expect(setIntervalSpy).toHaveBeenCalledTimes(1);
-
- // set interval should not be called again
- component.getInstance().setInterval();
- expect(setIntervalSpy).toHaveBeenCalledTimes(1);
+describe("Carousel", () => {
+ const imageSet = [
+ ,
+ ,
+ ,
+ ];
+
+ const makeSut = ({ ...props }) => {
+ render(
+
+ {imageSet.map((value) => (
+ {value}
+ ))}
+ ,
+ );
+ };
+
+ it("should render component without arrows and dots", () => {
+ const initialValues = {
+ qtyOfSlidesPerSet: imageSet.length,
+ };
+ makeSut(initialValues);
+
+ expect(screen.queryByTestId("left-arrow")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("right-arrow")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("dots-container")).not.toBeInTheDocument();
});
+ it("should render component with arrows", () => {
+ const initialValues = {
+ qtyOfSlidesPerSet: imageSet.length - 1,
+ };
+ makeSut(initialValues);
- test("clearInterval should be called on unmount", () => {
- const imageSet = [
- { image: "http://example.com/1.png", name: "1" },
- { image: "http://example.com/2.png", name: "2" },
- { image: "http://example.com/3.png", name: "3" },
- ];
- const component = renderer.create();
-
- const transitionId = component.getInstance().transitionId;
-
- expect(transitionId).toBeDefined();
- component.unmount();
- expect(clearIntervalSpy).toHaveBeenCalledWith(transitionId);
- });
+ // check if proper elements are renderer
+ const rightArrow = screen.queryByTestId("right-arrow");
- test("clearInterval should not be called if there is no transitionId on unmount", () => {
- const imageSet = [{ image: "http://example.com/1.png", name: "1" }];
- const component = renderer.create();
+ expect(screen.queryByTestId("left-arrow")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("dots-container")).not.toBeInTheDocument();
+ expect(rightArrow).toBeInTheDocument();
- delete component.getInstance().transitionId;
+ // click o right arrow
+ userEvent.click(rightArrow);
- component.unmount();
- expect(clearIntervalSpy).not.toHaveBeenCalled();
+ // check if proper elements are renderer
+ expect(rightArrow).not.toBeInTheDocument();
+ expect(screen.queryByTestId("left-arrow")).toBeInTheDocument();
});
- describe("Receiving new props", () => {
- const imageSet = [{ image: "http://example.com/1.png", name: "1" }];
- let component, setStateSpy, setIntervSpy;
-
- beforeEach(() => {
- component = mount();
- setStateSpy = jest.spyOn(component.instance(), "setState");
- setIntervSpy = jest.spyOn(component.instance(), "setInterval");
- });
-
- afterEach(() => {
- setStateSpy.mockClear();
- setIntervSpy.mockClear();
- });
-
- test("activeItem should be set to 0 when imageSet changes", () => {
- component.setProps({ imageSet: [] });
-
- expect(setStateSpy).toHaveBeenCalledWith({ activeItem: 0 });
- expect(setIntervSpy).toHaveBeenCalledTimes(1);
- });
-
- test("state should not change when imageSet doesn't change", () => {
- component.setProps({ imageSet });
-
- expect(setStateSpy).not.toHaveBeenCalled();
- expect(setIntervSpy).not.toHaveBeenCalled();
- });
+ it("should render component with infinite scroll", () => {
+ const initialValues = {
+ qtyOfSlidesPerSet: 2,
+ infiniteLoop: true,
+ };
+ makeSut(initialValues);
+
+ // check if proper elements are renderer
+ const rightArrow = screen.queryByTestId("right-arrow");
+ const leftArrow = screen.queryByTestId("left-arrow");
+ const dotsContainer = screen.queryByTestId("dots-container");
+
+ expect(dotsContainer.children[0].classList.contains("active")).toBe(true);
+ expect(rightArrow).toBeInTheDocument();
+ expect(leftArrow).toBeInTheDocument();
+
+ // click on last Dot
+ userEvent.click(dotsContainer.children[2]);
+
+ // check if active dot has changed and arrows are still in screen
+ expect(rightArrow).toBeInTheDocument();
+ expect(leftArrow).toBeInTheDocument();
+ expect(dotsContainer.children[0].classList.contains("active")).toBe(false);
+ expect(dotsContainer.children[2].classList.contains("active")).toBe(true);
+
+ // click on next
+ userEvent.click(rightArrow);
+
+ // check if active dot has go back to first position
+ expect(rightArrow).toBeInTheDocument();
+ expect(leftArrow).toBeInTheDocument();
+ expect(dotsContainer.children[2].classList.contains("active")).toBe(false);
+ expect(dotsContainer.children[0].classList.contains("active")).toBe(true);
});
});
diff --git a/packages/carousel/src/__snapshots__/Carousel.story.storyshot b/packages/carousel/src/__snapshots__/Carousel.story.storyshot
index c99a21eee..4d7200a07 100644
--- a/packages/carousel/src/__snapshots__/Carousel.story.storyshot
+++ b/packages/carousel/src/__snapshots__/Carousel.story.storyshot
@@ -1,1905 +1,1972 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Carousel 1 photo 1`] = `
-.c3 {
- font-family: Lato,sans-serif;
- font-size: 88px;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- color: #2f313a;
- text-align: center;
- font-weight: 600;
+.c5 {
+ padding: 8px;
}
-.c1 {
- box-sizing: border-box;
- border-radius: 16px;
- object-fit: cover;
+.c5 * {
+ width: 100%;
+ border-radius: 20px;
+ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
}
-.c0 {
- position: relative;
-}
-
-.c0 ul {
- position: relative;
- left: 50%;
- margin-left: -399.83200000000005px;
- height: 439.83200000000005px;
- list-style: none;
- padding: 0;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
+.c4 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
- -webkit-transform: translateX( 0px );
- -ms-transform: translateX( 0px );
- transform: translateX( 0px );
- -webkit-transition: -webkit-transform 2s;
- -webkit-transition: transform 2s;
- transition: transform 2s;
- will-change: transform;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
-.c0 ul li {
- margin: 20px;
- min-width: 656px;
- width: 656px;
- height: 328px;
- -webkit-transition: all 2s;
- transition: all 2s;
- will-change: transform;
+.c0 {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
-.c0 ul li .image {
- box-shadow: 0 4px 40px 0 rgba(0,0,0,0.32);
+.c1 {
+ display: grid;
+ grid-template-columns: 1fr 10fr 1fr;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
}
-.c0 ul li.active {
- -webkit-transform: scale(1.219);
- -ms-transform: scale(1.219);
- transform: scale(1.219);
- -webkit-transform-origin: bottom;
- -ms-transform-origin: bottom;
- transform-origin: bottom;
- margin: 0 91.83200000000005px;
+.c3 {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-transition: all 250ms linear;
+ transition: all 250ms linear;
+ -ms-overflow-style: none;
+ -webkit-scrollbar-width: none;
+ -moz-scrollbar-width: none;
+ -ms-scrollbar-width: none;
+ scrollbar-width: none;
+ -webkit-transform: translateX( -NaN% );
+ -ms-transform: translateX( -NaN% );
+ transform: translateX( -NaN% );
+}
+
+.c3 > * {
+ width: NaN%;
+ -webkit-flex-shrink: 0;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.c3::-webkit-scrollbar {
+ display: none;
}
.c2 {
- border: 4px solid rgba(255,255,255,0.56);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-right: 16px;
+}
+
+.c6 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-left: 16px;
}
-
- -
+
-
- Organic Pepper
+
+
+
+
+
+
+
-
-
+
+
-
- -
+
-
- Organic Pepper
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
- -
-
-
- Organic Pepper
-
-
- -
-
-
- Tomato
-
-
-
-
-
- -
-
-
- Organic Pepper
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Grapefruit
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Romaine Lettuce
-
-
-
-
-
- -
+
-
-
-
-
-
- Tomato
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Romaine Lettuce
-
-
-
+
+
+
+
-
- -
-
-
- Organic Pepper
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Grapefruit
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Romaine Lettuce
-
-
-
-
-
- -
-
-
- Organic Pepper
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Grapefruit
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
+
-
- Tomato
-
-
-
-
-
- Tomato
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- Romaine Lettuce
+
-
+
-
- -
-
-
- Organic Pepper
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Grapefruit
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Tomato
-
-
- -
-
-
- Romaine Lettuce
-
-
-
-
-
- -
+
-
-
-
-
-
- Tomato
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Tomato
-
-
-
-
-
-
- Romaine Lettuce
-
-
-
+
+
+
+
+
+