conflict resolve and merge

src/app/core/routes/StaticRoutes.js

@@ -25,6 +25,14 @@ export default [
       loading: Loading,
     }),
   },
+  {
+    path: '/andy-test',
+    exact: true,
+    component: Loadable({
+      loader: () => import('~/pages/AndyTestPages/AndyTestPage'),
+      loading: Loading,
+    }),
+  },
   // ********************************
   // ˅˅ Do not delete these routes ˅˅
   {

src/app/features/andyTest/components.styled/AndyTestContent.styled.js

+import styled, { css } from 'styled-components';
+
+const AndyTestContentStyled = styled.div`
+  ${() => {
+    return css`
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+      justify-content: space-between;
+      max-width: 1100px;
+      width: 100%;
+      margin: auto;
+      @media only screen and (min-width: 768px) {
+        flex-direction: row;
+      }
+      article {
+        max-width: 750px;
+        width: 100%;
+        padding: 20px;
+        @media only screen and (min-width: 1100px) {
+          padding: 0;
+        }
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+      aside {
+        width: 100%;
+        @media only screen and (min-width: 1100px) {
+          max-width: 250px;
+        }
+      }
+    `;
+  }};
+`;
+
+export default AndyTestContentStyled;

src/app/features/andyTest/components.styled/BlogCard.styled.js

+import styled, { css } from 'styled-components';
+
+const BlogCardStyled = styled.article`
+  ${() => {
+    return css`
+      display: block;
+      width: 100%;
+      max-width: 550px;
+      margin-bottom: 80px;
+      &:hover {
+        cursor: pointer;
+      }
+      h3 {
+        margin: 10px 0;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 1.3;
+      }
+      p {
+        margin: 0;
+        margin-bottom: 30px;
+        font-size: 16px;
+        line-height: 1.7;
+      }
+      img {
+        width: 100%;
+        height: auto;
+      }
+    `;
+  }};
+`;
+
+export default BlogCardStyled;

src/app/features/andyTest/components.styled/BlogFilters.styled.js

+import styled, { css } from 'styled-components';
+
+const BlogFiltersStyled = styled.div`
+  ${() => {
+    return css`
+      @media only screen and (min-width: 1024px) {
+        padding-right: 32px;
+      }
+
+      .filterGroup:not(:first-child) {
+        margin-top: 24px;
+      }
+
+      .filterGroup .open .feToggle {
+        border-radius: 16px 16px 0 0;
+        &:after {
+          transform: translateY(-50%) rotate(180deg);
+        }
+      }
+
+      .feLabel {
+        display: none;
+      }
+
+      .feToggle {
+        position: relative;
+        padding-right: 32px;
+        display: block;
+        width: 100%;
+        padding: 12px 16px;
+
+        background: rgba(163, 183, 148, 0.2);
+        border-radius: 16px;
+        border: none;
+
+        font-size: 16px;
+        line-height: 24px;
+        color: #333333;
+        text-align: left;
+
+        &:after {
+          content: '';
+          background-image: url('/static/img/icons/chevron_down.svg');
+          width: 10px;
+          height: 5px;
+          position: absolute;
+          right: 16px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+
+      .toggleFiltersWrap {
+        text-align: right;
+        @media only screen and (min-width: 1024px) {
+          display: none;
+        }
+      }
+
+      .toggleFilters {
+        border: none;
+        margin-top: 24px;
+        background: transparent;
+        font-size: 14px;
+        color: #879b79;
+        text-decoration: underline;
+
+        &:after {
+          content: '';
+          display: inline-block;
+          margin-left: 8px;
+          background-image: url('/static/img/icons/chevron_down_green.svg');
+          width: 8px;
+          height: 5px;
+        }
+      }
+
+      .feList {
+        border-top: 1px solid #fff;
+        list-style: none;
+        margin: 0;
+        padding: 24px 16px;
+        background: rgba(163, 183, 148, 0.2);
+        border-radius: 0 0 16px 16px;
+      }
+
+      .feItem:not(:first-child) {
+        margin-top: 24px;
+      }
+
+      .feItemInput {
+        display: none;
+      }
+
+      .feItemInput:checked + .feItemLabel {
+        font-weight: bold;
+      }
+    `;
+  }};
+`;
+
+export default BlogFiltersStyled;

src/app/features/andyTest/components.styled/BlogListing.styled.js

+import styled, { css } from 'styled-components';
+
+const BlogListingStyled = styled.div`
+  ${() => {
+    return css`
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      width: 100%;
+      max-width: 1200px;
+      margin: 30px auto;
+      .resultsInfo {
+        width: 100%;
+        margin-bottom: 30px;
+      }
+      a {
+        text-decoration: none;
+        width: 100%;
+        margin: 20px;
+        @media only screen and (min-width: 550px) {
+          margin: 0;
+          width: calc(50% - 15px);
+        }
+
+        @media only screen and (min-width: 1100px) {
+          margin: 0;
+          width: calc(33% - 15px);
+        }
+
+        p {
+          text-decoration: none;
+        }
+      }
+    `;
+  }};
+`;
+
+export default BlogListingStyled;

src/app/features/andyTest/components/AndyTestContent.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AndyTestContentStyled from '../components.styled/AndyTestContent.styled';
+
+import ContentComposer from '~/features/composer/components/Composer';
+
+const AndyTestContent = ({ className, entry }) => {
+  if (!entry) return null;
+
+  return (
+    <AndyTestContentStyled className={className}>
+      <div className="container">
+        {entry.image && (
+          <img src={entry.image.asset.sys.uri} alt={entry.image.altText} />
+        )}
+
+        <div className="eventContent">
+          <h1 className="pageTitle">{entry.entryTitle}</h1>
+          {entry.content && <ContentComposer composer={entry.postContent} />}
+        </div>
+      </div>
+    </AndyTestContentStyled>
+  );
+};
+
+AndyTestContent.propTypes = {
+  className: PropTypes.string,
+  entry: PropTypes.object,
+};
+
+export default AndyTestContent;

src/app/features/andyTest/components/BlogCard.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import BlogCardStyled from '../components.styled/BlogCard.styled';
+
+const BlogCard = ({ title, description, image, uri, className }) => {
+  return (
+    <Link to={uri}>
+      <BlogCardStyled className={className}>
+        {image && (
+          <img
+            src={`${image.asset.sys.uri}?width=500&height=300&fit=crop`}
+            alt={image.asset.altText}
+          />
+        )}
+
+        <h3>{title}</h3>
+
+        {description && <p>{description}</p>}
+      </BlogCardStyled>
+    </Link>
+  );
+};
+
+BlogCard.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.object,
+  uri: PropTypes.string,
+};
+
+export default BlogCard;

src/app/features/andyTest/components/BlogFilters.js

+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import BlogFiltersStyled from '../components.styled/BlogFilters.styled';
+
+import FilterEntryDropdown from '~/features/listings/components/FilterEntryDropdown';
+
+const BlogFilters = ({ className, filters, updateFilters }) => {
+  const [filtersVisible, toggleFilters] = useState(false);
+
+  const renderFilter = filterGroup => {
+    switch (filterGroup.type) {
+      case 'entry': {
+        return (
+          <FilterEntryDropdown
+            className="tfCategory"
+            entries={filterGroup.params.entries}
+            id={filterGroup.id}
+            label={filterGroup.label}
+            update={updateFilters}
+            value={filterGroup.value}
+          />
+        );
+      }
+      case 'list': {
+        return (
+          <FilterEntryDropdown
+            className="tfCategory"
+            entries={filterGroup.params.options}
+            id={filterGroup.id}
+            label={filterGroup.label}
+            update={updateFilters}
+            type={'list'}
+            value={filterGroup.value}
+          />
+        );
+      }
+      default:
+        return;
+    }
+  };
+
+  return (
+    <BlogFiltersStyled className={className} filtersVisible={filtersVisible}>
+      <div className="tfInner">
+        {filters &&
+          filters.map((filterGroup, idx) => {
+            return (
+              <div key={idx} className="filterGroup">
+                {renderFilter(filterGroup)}
+              </div>
+            );
+          })}
+        <div className="toggleFiltersWrap">
+          <button
+            onClick={() => toggleFilters(!filtersVisible)}
+            className="toggleFilters"
+          >
+            Additional filters
+          </button>
+        </div>
+      </div>
+    </BlogFiltersStyled>
+  );
+};
+
+BlogFilters.propTypes = {
+  className: PropTypes.string,
+  clearFilters: PropTypes.func,
+  filters: PropTypes.array,
+  updateFilters: PropTypes.func,
+};
+
+export default BlogFilters;

src/app/features/andyTest/components/BlogListing.js

+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import { selectVersionStatus } from '~/core/redux/selectors';
+import { Op, Query } from 'contensis-delivery-api';
+import { cachedSearch } from '~/core/util/ContensisDeliveryApi';
+
+import BlogListingStyled from '../components.styled/BlogListing.styled';
+import BlogCard from './BlogCard';
+
+const fetchEntries = async versionStatus => {
+  const triggerSearch = async versionStatus => {
+    try {
+      //DELIVERY API QUERY START//
+      let query = new Query(
+        Op.equalTo('sys.contentTypeId', 'blogPost'),
+        Op.equalTo('sys.versionStatus', versionStatus)
+      );
+      query.pageSize = 3;
+      query.fields = ['title', 'summary', 'image', 'sys'];
+      //DELIVERY API QUERY END//
+
+      //DELIVERY API SEARCH START//
+      return await cachedSearch.search(query, 1);
+      //DELIVERY API SEARCH END//
+    } catch (error) {
+      throw new Error(error);
+    }
+  };
+
+  const entries = await triggerSearch(versionStatus);
+  return entries;
+};
+
+const BlogListing = ({ className }) => {
+  const [results, setResults] = useState();
+  //GET VERSION STATUS
+  const versionStatus = useSelector(selectVersionStatus);
+  //const versionStatus = 'latest';
+  useEffect(() => {
+    fetchEntries(versionStatus).then(results => {
+      setResults(results);
+    });
+  }, [versionStatus]);
+
+  let resultsInfo = null;
+
+  //DELIVERY API PAGING INFO START//
+  if (results && results.totalCount > 0) {
+    const start = results.pageIndex * results.pageSize + 1;
+    let end = results.pageSize;
+    if (end > results.totalCount) end = results.totalCount;
+
+    resultsInfo = `Displaying ${start}-${end} of ${results.totalCount} results`;
+  }
+  //DELIVERY API PAGING INFO END//
+
+  return (
+    <BlogListingStyled className={className}>
+      {resultsInfo && (
+        <div
+          className="resultsInfo"
+          dangerouslySetInnerHTML={{ __html: resultsInfo }}
+        />
+      )}
+
+      {/* DELIVERY API RENDER ENTRIES START */}
+      {results &&
+        results.items &&
+        results.items.map((entry, idx) => {
+          return (
+            <BlogCard
+              title={entry.title}
+              description={entry.summary}
+              image={entry.image}
+              uri={entry.sys && entry.sys.uri}
+              key={idx}
+            />
+          );
+        })}
+      {!results || (results.length < 1 && <p>No results found.</p>)}
+      {/* DELIVERY API RENDER ENTRIES END */}
+    </BlogListingStyled>
+  );
+};
+
+BlogListing.propTypes = {
+  className: PropTypes.string,
+};
+
+export default BlogListing;

src/app/features/andyTest/stories/BlogCard.stories.js

+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text } from '@storybook/addon-knobs';
+import BlogCard from '~/features/blogListing/components/BlogCard';
+
+storiesOf('Features | Listings', module).add(
+  'Blog card',
+  () => {
+    return (
+      <BlogCard
+        title={text('Title', 'Example Title')}
+        description={text('Title', 'Example description')}
+        uri="/blog/example-post"
+      />
+    );
+  },
+  {
+    knobs: {
+      escapeHTML: false,
+    },
+  }
+);

src/app/features/composer/components/Composer.js

@@ -42,8 +42,14 @@ const ContentComposer = ({ className, composer }) => {
                 dangerouslySetInnerHTML={{ __html: field.value }}
               />
             );
-          case 'contactDetailsComposer':
-            return <ContactDetails name={field.value.name} />;
+          case 'quoteBlock':
+            return (
+              <div
+                key={idx}
+                className="compField"
+                dangerouslySetInnerHTML={{ __html: field.value }}
+              />
+            );
           default:
             break;
         }

src/app/layouts/Main.layout.js

 import React from 'react';
 import PropTypes from 'prop-types';
-
 import GlobalStyles from '~/themes/contensis/global';
 import Header from '~/features/header/components/header';
 import Footer from '~/features/footer/footer';

src/app/pages/AndyTestPages/AndyTestPage.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import MainLayout from '~/layouts/Main.layout';
+import AndyTestContent from '~/features/andyTest/components/AndyTestContent';
+import { Loading } from '~/core/routes/Loading';
+
+const AndyTest = ({ entry }) => {
+  if (!entry) return <Loading />;
+
+  return (
+    <MainLayout>
+      <AndyTestContent entry={entry} />
+    </MainLayout>
+  );
+};
+
+AndyTest.propTypes = {
+  entry: PropTypes.object,
+};
+
+export default AndyTest;