@jetshop/template-trend 5.8.2 → 5.10.0

package/.linaria-cache/packages/template-trend/src/components/SearchPage/CategoryList.linaria.css

@@ -0,0 +1,7 @@
+.ScrollWrapper_sybdtro{margin:0 -1.5rem;padding:0 1.5rem 3rem;}@media (max-width:49.99rem){.ScrollWrapper_sybdtro{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}}@media (max-width:39.99rem){.ScrollWrapper_sybdtro{margin:0 0;padding:0 1rem 3rem;}}
+.CategoriesWrapper_c1xlv6vs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:-0.5rem;margin-left:-0.5rem;}.CategoriesWrapper_c1xlv6vs:hover > a > div{opacity:0.8;}@media (max-width:49.99rem){.CategoriesWrapper_c1xlv6vs > a{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:160px;}}
+.CategoryCard_c1p4xe4z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:#ffffff;box-shadow:4px 8px 32px rgba(0,0,0,0.1);-webkit-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out;width:100%;height:100%;position:relative;}
+.CardPaddingWrapper_c1r4522t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;width:50%;padding-left:0.5rem;padding-right:0.5rem;max-width:16rem;-webkit-text-decoration:none;text-decoration:none;}@media (min-width:50rem){.CardPaddingWrapper_c1r4522t{width:33.33333333333333%;}}@media (min-width:64rem){.CardPaddingWrapper_c1r4522t{width:20%;}}.CardPaddingWrapper_c1r4522t:hover > div,.CardPaddingWrapper_c1r4522t:focus > div,.CardPaddingWrapper_c1r4522t:active > div{opacity:1 !important;box-shadow:4px 8px 32px rgba(0,0,0,0.1), 4px 8px 40px rgba(0,0,0,0.1);-webkit-transform:translate(0,-2px);-ms-transform:translate(0,-2px);transform:translate(0,-2px);-webkit-transition-duration:100ms;transition-duration:100ms;z-index:2;}
+.CategoryName_c1o377cd{text-align:center;font-weight:bold;font-size:16px;text-transform:uppercase;color:#000;-webkit-text-decoration:none;text-decoration:none;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-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:3rem;}@media (min-width:50rem){.CategoryName_c1o377cd{height:5rem;}}
+.CategoriesHeader_czlhuxe{margin-bottom:1rem;font-size:24px;}@media (max-width:39.99rem){.CategoriesHeader_czlhuxe{font-size:18px;margin-left:1rem;}}
+.CategoryListWrapper_c1ig1tri{padding:1rem 0;}

package/.linaria-cache/packages/ui/ChannelSelector/Region.linaria.css

@@ -0,0 +1,3 @@
+.RegionName_r1biyodf{text-transform:uppercase;font-size:1rem;line-height:1.5rem;font-weight:600;margin:1rem 0 0.5rem 0;}
+
+

package/cypress/integration/essentials.spec.js

@@ -0,0 +1,50 @@
+// This file contains essential tests to ensure that the basic purchase flow is working
+// Make sure to update the URLs below to pages that are relevant to your shop
+const CATEGORY_PAGE = '/se/sv/nyheter';
+const PRODUCT_PAGE = '/se/sv/mobler/nice-chair';
+
+describe('Start page', () => {
+  it('successfully loads', () => {
+    cy.visit('/');
+  });
+});
+
+describe('Category page', () => {
+  it('successfully loads', () => {
+    cy.visit(CATEGORY_PAGE);
+  });
+
+  it('links to products', () => {
+    cy.visit(CATEGORY_PAGE);
+    const url = cy.url();
+    cy.findAllByTestId('product').first().click();
+    cy.url().should('not.be', url);
+  });
+});
+
+describe('Product page', () => {
+  it('successfully loads', () => {
+    cy.visit(PRODUCT_PAGE);
+  });
+
+  it('lets you add to cart', () => {
+    cy.visit(PRODUCT_PAGE);
+    cy.findByTestId('add-to-cart').click();
+    // Cart now contains one item
+    cy.findByTestId('cart-button').next().contains('1');
+  });
+});
+
+describe('Cart', () => {
+  it('can be successfully opened', () => {
+    cy.findByTestId('cart-button').click();
+  });
+
+  it('lets you go to the checkout', () => {
+    cy.visit(PRODUCT_PAGE);
+    cy.findByTestId('add-to-cart').click();
+    cy.findByTestId('cart-button').click();
+    cy.findByTestId('checkout-button').click();
+    cy.url().should('contain', '/checkout');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetshop/template-trend",
-  "version": "5.8.2",
+  "version": "5.10.0",
   "license": "MIT",
   "scripts": {
     "build": "react-scripts build",
@@ -45,11 +45,11 @@
     ]
   },
   "dependencies": {
-    "@jetshop/core": "^5.8.2",
+    "@jetshop/core": "^5.10.0",
     "@jetshop/flight-shortcodes": "^2.0.10",
-    "@jetshop/intl": "^5.8.2",
-    "@jetshop/react-scripts": "^5.8.2",
-    "@jetshop/ui": "^5.8.2",
+    "@jetshop/intl": "^5.10.0",
+    "@jetshop/react-scripts": "^5.10.0",
+    "@jetshop/ui": "^5.10.0",
     "@react-google-maps/api": "~1.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.9.0",

package/schema.graphql

@@ -1043,10 +1043,17 @@ type Mutation {
 
   """
   This mutation's purpose is to update a existing customer's information. An
-  authorization token is needed in the request, in order to be able to delete the customer.
+  authorization token is needed in the request, in order to be able to update the customer.
   """
   updateCustomer(input: CustomerUpdateInput!): CustomerUpdateResponse
 
+  """
+  This mutation's purpose is to update a existing customer's price list using an
+  access code. An authorization token is needed in the request, in order to be
+  able to update the customer.
+  """
+  updateCustomerPriceList(priceListAccessCode: String!): UpdateCustomerPriceListResult
+
   """
   The updatePassword mutation updates the customers password. Both the old password and a new password is a requirement.
   """
@@ -1314,18 +1321,19 @@ type Page implements Document {
   data: Content
 
   """
-  If this page was fetched by ID using the `page(id)` query, parent will be
-  returned even if it is hidden. If this page was fetched using the `pages`
-  query, parent will not be returned if it is hidden
+  * If this page was fetched by ID using the `page(id)` query, `parent` will be returned even if it is hidden.
+  * If this page was fetched using the `pages` query, `parent` will not be returned if it is hidden
   """
   parent: Page
 
   """
-  If this page was fetched by ID using the page(id) query, subPages will be
-  returned even if they are hidden. If this page was fetched using the pages
-  query, subPages will not be returned if they are hidden
+  * If this page was fetched by ID using the `page(id)` query, `subPages` will
+  be returned even if they are hidden. This can be overridden with the
+  `includeHidden` flag.
+  * If this page was fetched using the `pages` query, `subPages` will not be
+  returned if they are hidden. The `includeHidden` flag has no effect on this.
   """
-  subPages: [Page!]
+  subPages(includeHidden: Boolean = true): [Page!]
 }
 
 type PagedResult {
@@ -1450,6 +1458,7 @@ type Product implements Document {
   """
   campaigns: [Category]
   hasVariants: Boolean!
+  hasVariantsWithDifferingPrices: Boolean!
   variants: ProductVariants
   images(
     """
@@ -1507,9 +1516,7 @@ type Product implements Document {
 
   """
   Specifies input field(s) for the Customer to populate on the Product that will then carry through to the Order.
-                      If 'required' is true the Product should not be purchasable
-  until the field is populated.NB: Carries a performance cost, as asking for
-  this will result in a separate API call in the backend.
+                      If 'required' is true the Product should not be purchasable until the field is populated.
   """
   customerComments: [ProductComment]
 
@@ -1523,10 +1530,6 @@ type Product implements Document {
   NB: Carries a performance cost, as asking for this will result in a separate API call in the backend.
   """
   warehouseStock(includeInactive: Boolean = false): [Warehouse]
-
-  """
-  NB: Carries a performance cost, as asking for this will result in a separate API call in the backend.
-  """
   head: HtmlHead
 
   """
@@ -1563,9 +1566,7 @@ type Product implements Document {
   """
   configurationPrice(options: [ProductConfigurationPriceInput!]): ProductConfigurationPrice
 
-  """
-  NB: Carries a performance cost, as asking for this will result in a separate API call in the backend.
-  """
+  """Quantity suffix e.g pcs, box, etc."""
   quantitySuffix: String
   isPreOrder: Boolean
   preOrder: ProductPreOrder
@@ -1946,6 +1947,12 @@ type Route {
   another language.NB: Carries no additional performance cost.
   """
   alternateRoutes: [AlternateRoute]
+
+  """N.B. for troubleshooting routes only!"""
+  debug: String
+
+  """Breadcrumb texts; starting with the root parent, ending on this route."""
+  breadcrumbs: [String]
 }
 
 type SearchAutoCompleteResult {
@@ -2051,6 +2058,7 @@ input SignUpInput {
   preferences: SignUpPreferencesInput
   consents: [SignUpConsentInput]
   dynamicContent: String
+  priceListAccessCode: String
 }
 
 input SignUpPreferencesCommunicationInput {
@@ -2183,6 +2191,10 @@ type UpdateCartMutation {
   cart: Cart
 }
 
+type UpdateCustomerPriceListResult {
+  success: Boolean!
+}
+
 input UpdateCustomerProductListInput {
   id: ID!
   typeId: ID!

package/src/components/Auth/ForgotPassword.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./ForgotPassword'), {
+  fallback: <LoadingPage />
+});

package/src/components/Auth/LogInPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./LogInPage'), {
+  fallback: <LoadingPage />
+});

package/src/components/Auth/ResetPassword.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./ResetPassword'), {
+  fallback: <LoadingPage />
+});

package/src/components/Auth/Signup/SignUpPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../../LoadingPage';
+
+export default loadable(() => import('./SignUpPage'), {
+  fallback: <LoadingPage />
+});

package/src/components/Cart/CartFragment.gql

@@ -82,6 +82,14 @@ fragment Cart on Cart {
         id
         path
       }
+      customFields {
+        key
+        type
+        title
+        ... on CustomStringField {
+          stringValue: value
+        }
+      }
       images {
         modifiedDate
         alt

package/src/components/CategoryPage/CategoryPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./CategoryPage'), {
+  fallback: <LoadingPage />
+});

package/src/components/CategoryPage/Filters/ListFilters.js

@@ -45,8 +45,7 @@ function ListFilter({ filter }) {
               item.resultCount === 0
                 ? {
                     opacity: 0.4,
-                    cursor: 'not-allowed',
-                    cursor: 'pointer'
+                    cursor: 'not-allowed'
                   }
                 : { cursor: 'pointer' }
             }

package/src/components/CategoryPage/ProductGridFragment.gql

@@ -27,4 +27,12 @@ fragment ProductGrid on Product {
       path
     }
   }
+  customFields {
+    key
+    type
+    title
+    ... on CustomStringField {
+      stringValue: value
+    }
+  }
 }

package/src/components/CategoryPage/WindowedCategoryPage.js

@@ -47,9 +47,10 @@ const WindowedCategory = ({ category, result }) => {
   const location = useLocation();
   const params = qs.parse(location.search, { ignoreQueryPrefix: true });
   const routePath = category?.isDynamic ? null : result?.data?.route?.path;
-  const categoryPath = useMemo(() => routePath && { path: routePath }, [
-    routePath
-  ]);
+  const categoryPath = useMemo(
+    () => routePath && { path: routePath },
+    [routePath]
+  );
 
   if (!category) {
     return (
@@ -106,7 +107,7 @@ const WindowedCategory = ({ category, result }) => {
           {previous.hasProducts && (
             <ButtonWrapper>
               <TrendLink
-                secondary
+                className="secondary"
                 onClick={e => {
                   e.preventDefault();
                   previous.fetchProducts();
@@ -135,7 +136,7 @@ const WindowedCategory = ({ category, result }) => {
           {next.hasProducts && (
             <ButtonWrapper>
               <TrendLink
-                secondary
+                className="secondary"
                 onClick={e => {
                   e.preventDefault();
                   next.fetchProducts();

package/src/components/ContentPage/ContentPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./ContentPage'), {
+  fallback: <LoadingPage />
+});

package/src/components/Forms/Input.js

@@ -71,11 +71,8 @@ const InputWithLabel = ({
         <span>{label || name}</span>
         {required && <span className="req">{t('(Required)')}</span>}
       </Label>
-      <Field
-        className={cx(disabled && 'disabled')}
-        id={name}
-        name={name}
-        render={({ field, form: { touched, errors } }) => (
+      <Field className={cx(disabled && 'disabled')} id={name} name={name}>
+        {({ field, form: { touched, errors } }) => (
           <div>
             <Input
               {...props}
@@ -104,7 +101,7 @@ const InputWithLabel = ({
             )}
           </div>
         )}
-      />
+      </Field>
       {!disableValidation && <ErrorMessage name={name} component={ErrorSpan} />}
     </Wrapper>
   );

package/src/components/Layout/Header/RecommendedChannel/RecommendedChannelSelector.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { styled } from 'linaria/react';
-import { css, cx } from 'linaria';
+import { cx } from 'linaria';
 import t from '@jetshop/intl';
 import ChannelSelector, {
   LangCurrWrapper,

package/src/components/Layout/Header/TopNav.js

@@ -47,14 +47,16 @@ const List = styled('ul')`
   }
 `;
 
-export default ({ children, searchOpen, left, ...rest }) => (
-  <List
-    className={cx(left ? 'left' : null, searchOpen && 'searchOpen')}
-    {...rest}
-  >
-    {React.Children.map(
-      children,
-      item => item && <li className="top-nav-list-item">{item}</li>
-    )}
-  </List>
-);
+export default function TopNav({ children, searchOpen, left, ...rest }) {
+  return (
+    <List
+      className={cx(left ? 'left' : null, searchOpen && 'searchOpen')}
+      {...rest}
+    >
+      {React.Children.map(
+        children,
+        item => item && <li className="top-nav-list-item">{item}</li>
+      )}
+    </List>
+  );
+}

package/src/components/MyPages/MyPages.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./MyPages'), {
+  fallback: <LoadingPage />
+});

package/src/components/MyPages/MyPagesSidebar.js

@@ -1,4 +1,3 @@
-import useAuth from '@jetshop/core/components/AuthContext/useAuth';
 import t from '@jetshop/intl';
 import React from 'react';
 import { css } from 'linaria';

package/src/components/NavigationTree/NavTreePage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./NavTreePage'), {
+  fallback: <LoadingPage />
+});

package/src/components/NotFoundPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from './LoadingPage';
+
+export default loadable(() => import('./NotFoundPage'), {
+  fallback: <LoadingPage />
+});

package/src/components/ProductPage/AddToCart/ProductToast.js

@@ -8,7 +8,7 @@ import { Price } from '@jetshop/ui/Price';
 import { theme } from '../../Theme';
 import React from 'react';
 import { styled } from 'linaria/react';
-import { TrendLink, baseStyles } from '../../ui/Button';
+import { baseStyles } from '../../ui/Button';
 import cartQuery from '../../Cart/CartQuery.gql';
 
 const Container = styled('aside')`

package/src/components/ProductPage/ProductPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./ProductPage'), {
+  fallback: <LoadingPage />
+});

package/src/components/SearchPage/SearchPage.loadable.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import loadable from '@loadable/component';
+import LoadingPage from '../LoadingPage';
+
+export default loadable(() => import('./SearchPage'), {
+  fallback: <LoadingPage />
+});

package/src/components/Shop.js

@@ -27,22 +27,20 @@ import routeQuery from './RouteQuery.gql';
 import { theme } from './Theme';
 import '../globalStyles';
 import CookieConsent from './CookieConsent';
-
-const Store = loadable(() => import('./Store/Store'), {
-  fallback: <LoadingPage />
-});
-
-const StoreLocator = loadable(() => import('./StoreLocator/StoreLocator'), {
-  fallback: <LoadingPage />
-});
-
-const NotFound = loadable(() => import('./NotFoundPage'), {
-  fallback: <LoadingPage />
-});
-
-const LogInPage = loadable(() => import('./Auth/LogInPage'), {
-  fallback: <LoadingPage />
-});
+import Store from './Store/Store.loadable';
+import StoreLocator from './StoreLocator/StoreLocator.loadable';
+import NotFoundPage from './NotFoundPage.loadable';
+import LogInPage from './Auth/LogInPage.loadable';
+import NavTreePage from './NavigationTree/NavTreePage.loadable';
+import StartPage from './StartPage/StartPage.loadable';
+import ProductPage from './ProductPage/ProductPage.loadable';
+import CategoryPage from './CategoryPage/CategoryPage.loadable';
+import ContentPage from './ContentPage/ContentPage.loadable';
+import SearchPage from './SearchPage/SearchPage.loadable';
+import SignUpPage from './Auth/Signup/SignUpPage.loadable';
+import ForgotPassword from './Auth/ForgotPassword.loadable';
+import ResetPassword from './Auth/ResetPassword.loadable';
+import MyPages from './MyPages/MyPages.loadable';
 
 const LogOutPage = loadable(
   () => import('@jetshop/core/components/AuthContext/LogOut'),
@@ -58,53 +56,6 @@ const PreviewRoute = loadable(
   }
 );
 
-const NavTreePage = loadable(() => import('./NavigationTree/NavTreePage'), {
-  fallback: <LoadingPage />
-});
-
-const LoadableStartPage = loadable(() => import('./StartPage/StartPage'), {
-  fallback: <LoadingPage />
-});
-
-export const LoadableProductPage = loadable(
-  () => import('./ProductPage/ProductPage'),
-  {
-    fallback: <LoadingPage />
-  }
-);
-
-export const LoadableCategoryPage = loadable(
-  () => import('./CategoryPage/CategoryPage'),
-  {
-    fallback: <LoadingPage />
-  }
-);
-
-export const LoadableContentPage = loadable(
-  () => import('./ContentPage/ContentPage'),
-  {
-    fallback: <LoadingPage />
-  }
-);
-
-const LoadableSearchPage = loadable(() => import('./SearchPage/SearchPage'), {
-  fallback: <LoadingPage />
-});
-const LoadableSignUpPage = loadable(() => import('./Auth/Signup/SignUpPage'), {
-  fallback: <LoadingPage />
-});
-
-const ForgotPassword = loadable(() => import('./Auth/ForgotPassword'), {
-  fallback: <LoadingPage />
-});
-
-const ResetPassword = loadable(() => import('./Auth/ResetPassword'), {
-  fallback: <LoadingPage />
-});
-const LoadableMyPages = loadable(() => import('./MyPages/MyPages'), {
-  fallback: <LoadingPage />
-});
-
 function Shop() {
   const { routes } = useShopConfig();
   return (
@@ -126,16 +77,16 @@ function Shop() {
               <PaginationProvider defaultProductsPerPage={24}>
                 <Switch>
                   <Route exact path="/">
-                    <LoadableStartPage />
+                    <StartPage />
                   </Route>
                   <Route path="/favourites">
                     <Favourites />
                   </Route>
                   <Route path={routes.search.path}>
-                    <LoadableSearchPage />
+                    <SearchPage />
                   </Route>
                   <Route path={routes.signup.path}>
-                    <LoadableSignUpPage />
+                    <SignUpPage />
                   </Route>
                   <Route path={routes.login.path}>
                     <LogInPage />
@@ -153,7 +104,7 @@ function Shop() {
                     <NavTreePage />
                   </Route>
                   <Route path={routes.myPages.path}>
-                    <LoadableMyPages />
+                    <MyPages />
                   </Route>
                   <Route exact path={routes.forgotPassword.path}>
                     <ForgotPassword />
@@ -168,20 +119,20 @@ function Shop() {
                         productQuery={ProductPreviewQuery}
                         categoryQuery={CategoryPreviewQuery}
                         pageQuery={PagePreviewQuery}
-                        productPage={LoadableProductPage}
-                        categoryPage={LoadableCategoryPage}
-                        contentPage={LoadableContentPage}
-                        StartPage={LoadableStartPage}
+                        productPage={ProductPage}
+                        categoryPage={CategoryPage}
+                        contentPage={ContentPage}
+                        StartPage={StartPage}
                         {...props}
                       />
                     )}
                   />
                   <DynamicRoute
                     routeQuery={routeQuery}
-                    productPage={LoadableProductPage}
-                    categoryPage={LoadableCategoryPage}
-                    contentPage={LoadableContentPage}
-                    notFoundPage={NotFound}
+                    productPage={ProductPage}
+                    categoryPage={CategoryPage}
+                    contentPage={ContentPage}
+                    notFoundPage={NotFoundPage}
                     LoadingPage={LoadingPage}
                   />
                 </Switch>

package/src/components/StartPage/Content/Row.js

@@ -2,9 +2,6 @@ import React from 'react';
 import MaxWidth from '../../Layout/MaxWidth';
 import { styled } from 'linaria/react';
 import { theme } from '../../Theme';
-import { ReactComponent as Caret } from '@jetshop/ui/svg/Carrot.svg';
-import { Above } from '@jetshop/ui/Breakpoints';
-import { useAnimation, swipeEffect } from '@jetshop/ui/hooks';
 
 const Container = styled('div')`
   position: relative;
@@ -37,40 +34,6 @@ const ItemsContainer = styled('div')`
   }
 `;
 
-const Button = styled('button')`
-  position: absolute;
-  font-family: initial;
-  margin: 0 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.6);
-  }
-
-  &.left svg {
-    transform: rotateZ(90deg);
-  }
-
-  &.right {
-    right: 0;
-
-    svg {
-      transform: rotateZ(-90deg);
-    }
-  }
-`;
-
 const Row = ({ header, children }) => {
   return (
     <MaxWidth>