Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): update search result ui #420

Merged
merged 1 commit into from
Jan 15, 2019
Merged

feat(ui): update search result ui #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 24 additions & 44 deletions packages/code-du-travail-css/docs/css/components/_search_results.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,28 @@
.search-results__list {
list-style-type: none;
padding: 0;
margin: 0;

list-style-type: none;
padding: 0;
& li:first-child a {
margin: 0;

& li:first-child a {
margin: 0;
}

& a,
& a:link,
& a:visited {
display: flex;
margin: var(--spacing-medium) 0 0 0;
padding: var(--spacing-medium);
border: 1px solid var(--color-element-border);
border-radius: var(--border-radius-base);
text-decoration: none;
color: var(--color-dark-text);
}

& a:focus,
& a:hover,
& a:active {
text-decoration: underline;
background: var(--color-white);
}

}

.search-results__list .search-results__item {

& header * {
font-size: var(--font-size-h6);
margin: 0;
}

& blockquote {
margin: 0;
}

& footer {
margin: var(--spacing-small) 0 0 0;
font-style: italic;
}

}

& a,
& a:link,
& a:visited {
display: flex;
margin: var(--spacing-medium) 0 0 0;
padding: var(--spacing-medium);
border: 1px solid var(--color-element-border);
border-radius: var(--border-radius-base);
text-decoration: none;
color: var(--color-dark-text);
}

& a:focus,
& a:hover,
& a:active {
text-decoration: underline;
background: var(--color-white);
}
}
38 changes: 24 additions & 14 deletions packages/code-du-travail-frontend/src/search/SearchResults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

import { Alert, NoAnswer, Button } from "@cdt/ui";

Expand All @@ -9,18 +10,18 @@ import { Link } from "../../routes";

import { getLabelBySource, getRouteBySource } from "../sources";

const ContentBody = ({ _source, excerpt, footer = null }) => (
const ContentBody = ({ _source, excerpt, sourceType }) => (
<article className={_source.source}>
<header>
<h3>{_source.title}</h3>
<Title>
<SourceType>{sourceType} | </SourceType>
{_source.title}
</Title>
</header>
<blockquote
className="text-quote"
<Excerpt
dangerouslySetInnerHTML={{ __html: excerpt }}
className="text-quote"
/>
<footer>
<span className="external-link__before">{footer}</span>
</footer>
</article>
);

Expand All @@ -41,7 +42,6 @@ const ResultItem = ({ _source, highlight, query }) => {

const route = getRouteBySource(_source.source);
const anchor = _source.anchor ? _source.anchor.slice(1) : "";

// internal links
if (route) {
return (
Expand All @@ -54,8 +54,8 @@ const ResultItem = ({ _source, highlight, query }) => {
<a className="search-results-link">
<ContentBody
_source={_source}
sourceType={getLabelBySource(_source.source)}
excerpt={excerpt}
footer={getLabelBySource(_source.source)}
/>
</a>
</Link>
Expand All @@ -72,11 +72,7 @@ const ResultItem = ({ _source, highlight, query }) => {
rel="noopener noreferrer"
className="search-results-link"
>
<ContentBody
_source={_source}
excerpt={excerpt}
footer={getLabelBySource(_source.source)}
/>
<ContentBody _source={_source} excerpt={excerpt} />
</a>
</li>
);
Expand Down Expand Up @@ -172,3 +168,17 @@ class SearchResults extends React.Component {
}

export default SearchResults;
const Title = styled.h3`
font-size: 1.1rem;
margin-top: 0;
`;

const SourceType = styled.span`
color: #53657d;
font-size: 1rem;
margin-left: 0.25em;
`;

const Excerpt = styled.blockquote`
margin: 0;
`;
19 changes: 10 additions & 9 deletions ...ages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchQuery.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,21 @@ exports[`<SearchQuery/> should render results 1`] = `
class="faq"
>
<header>
<h3>
<h3
class="sc-bdVaJa kBfMAi"
>
<span
class="sc-bwzfXH aKpTk"
>
FAQ
|
</span>
Mer il est fou!
</h3>
</header>
<blockquote
class="text-quote"
class="text-quote sc-htpNat bhpHJD"
/>
<footer>
<span
class="external-link__before"
>
FAQ
</span>
</footer>
</article>
</a>
</li>
Expand Down
19 changes: 10 additions & 9 deletions ...es/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,20 +103,21 @@ exports[`<SearchResults/> should render results 1`] = `
class="faq"
>
<header>
<h3>
<h3
class="sc-bdVaJa kBfMAi"
>
<span
class="sc-bwzfXH aKpTk"
>
FAQ
|
</span>
Mer il est fou!
</h3>
</header>
<blockquote
class="text-quote"
class="text-quote sc-htpNat bhpHJD"
/>
<footer>
<span
class="external-link__before"
>
FAQ
</span>
</footer>
</article>
</a>
</li>
Expand Down