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(component-index): 1555-component-index-filter-ui-functionality #1584

Merged
merged 17 commits into from
Aug 25, 2020
Merged

feat(component-index): 1555-component-index-filter-ui-functionality #1584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
3a7880e
feat(component-index): 1555-component-index-filter-ui-functionality
Aug 18, 2020
0d74f13
all design updates done - except grid
Aug 20, 2020
31bf865
responsive breakpoints updated - need to fix left grid alignment
Aug 20, 2020
d60dedc
feat(component-index): 1555-component-index-filter-ui-functionality -…
Aug 20, 2020
97c76f8
things working
Aug 21, 2020
4966686
feat(component-index): all features should be working
Aug 21, 2020
ebca6b4
updated filter refactor
Aug 21, 2020
ac03b3e
Merge branch 'master' of github.com:carbon-design-system/carbon-websi…
Aug 21, 2020
492622b
feat(component-index): 1555-component-index-filter-ui-functionality -…
Aug 23, 2020
a9fedf7
Merge branch 'master' into 1555-component-index-filter-ui-functionality
andreancardona Aug 24, 2020
1d66716
Update src/components/ComponentIndexPage/index.js
andreancardona Aug 24, 2020
491dce0
feat(component-index): redirect, and css updates
Aug 24, 2020
b9c4ef4
Merge branch '1555-component-index-filter-ui-functionality' of github…
Aug 24, 2020
227d05b
feat(component-index): deleted components mdx file
Aug 24, 2020
e7b028b
Merge branch 'master' into 1555-component-index-filter-ui-functionality
vpicone Aug 24, 2020
126915c
Merge branch 'master' into 1555-component-index-filter-ui-functionality
andreancardona Aug 25, 2020
41bd797
Update src/data/nav-items.yaml
andreancardona Aug 25, 2020
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
5 changes: 4 additions & 1 deletion conf.d/rewrite.conf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,7 @@ rewrite /experimental/dashboard-widgets/(.*) https://pages.github.ibm.com/CDAI-d
rewrite /experimental/order-summary-template/(.*) https://pages.github.ibm.com/CDAI-design/CDAI-design-website/patterns/order-summary/\$1 permanent;

# Experimental -> community
rewrite /experimental/(.*) /community/patterns/\$1 permanent;
rewrite /experimental/(.*) /community/patterns/\$1 permanent;

# Community index
rewrite /community/components /community/component-index permanent;
125 changes: 60 additions & 65 deletions src/components/ComponentIndexPage/ComponentIndexListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import figmaIcon from './images/Figma.svg';
import sketchIcon from './images/Sketch.svg';
import xdIcon from './images/XD.svg';

const href = '/get-started/about-carbon';
const frameworkIcons = {
Angular: angularIcon,
React: reactIcon,
Expand All @@ -51,7 +50,7 @@ const ComponentIndexListItem = React.memo(
name,
websiteUrl,
}) => {
let img = undefined;
let img;

if (image?.fluid) {
img = (
Expand All @@ -71,69 +70,65 @@ const ComponentIndexListItem = React.memo(
}

return (
<Row>
<Column sm={4} md={8} lg={9}>
<article className="component-index-item">
<div className="component-index-item__image bx--aspect-ratio bx--aspect-ratio--4x3">
{img}
</div>
<div className="component-index-item__content">
<header className="component-index-item__name">{name}</header>
<p className="component-index-item__description">{description}</p>
<footer className="component-index-item__info">
<div className="component-index-item__links">
<Link
className="component-index-item__link"
href={websiteUrl}
rel="noopener noreferrer">
Website
</Link>
{codeUrl && (
<>
<div className="component-index-item__divider" />
<Link
className="component-index-item__link"
href={codeUrl}
rel="noopener noreferrer">
Code
</Link>
</>
)}
</div>
<ul className="component-index-item__tags">
{framework && (
<li className="component-index-item__tag component-index-item__tag--framework">
<TooltipIcon direction="top" tooltipText={framework}>
<img
src={frameworkIcons[framework] || null}
alt={framework}
/>
</TooltipIcon>
</li>
)}
{designAsset && (
<li className="component-index-item__tag component-index-item__tag--design-asset">
<TooltipIcon direction="top" tooltipText={designAsset}>
<img
src={designAssetIcons[designAsset] || null}
alt={designAsset}
/>
</TooltipIcon>
</li>
)}
{maintainer && (
<li className="component-index-item__tag component-index-item__tag--maintainer">
<TooltipIcon direction="top" tooltipText="Maintainer">
<Tag>{maintainer}</Tag>
</TooltipIcon>
</li>
)}
</ul>
</footer>
</div>
</article>
</Column>
</Row>
<>
<article className="component-index-item">
<div className="component-index-item__image">{img}</div>
<div className="component-index-item__content">
<header className="component-index-item__name">{name}</header>
<p className="component-index-item__description">{description}</p>
<footer className="component-index-item__info">
<div className="component-index-item__links">
<Link
className="component-index-item__link"
href={websiteUrl}
rel="noopener noreferrer">
Website
</Link>
{codeUrl && (
<>
<div className="component-index-item__divider" />
<Link
className="component-index-item__link"
href={codeUrl}
rel="noopener noreferrer">
Code
</Link>
</>
)}
</div>
<ul className="component-index-item__tags">
{framework && (
<li className="component-index-item__tag component-index-item__tag--framework">
<TooltipIcon direction="top" tooltipText={framework}>
<img
src={frameworkIcons[framework] || null}
alt={framework}
/>
</TooltipIcon>
</li>
)}
{designAsset && (
<li className="component-index-item__tag component-index-item__tag--design-asset">
<TooltipIcon direction="top" tooltipText={designAsset}>
<img
src={designAssetIcons[designAsset] || null}
alt={designAsset}
/>
</TooltipIcon>
</li>
)}
{maintainer && (
<li className="component-index-item__tag component-index-item__tag--maintainer">
<TooltipIcon direction="top" tooltipText="Maintainer">
<Tag>{maintainer}</Tag>
</TooltipIcon>
</li>
)}
</ul>
</footer>
</div>
</article>
</>
);
}
);
Expand Down
16 changes: 12 additions & 4 deletions src/components/ComponentIndexPage/ComponentIndexNotFound.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@
* LICENSE file in the root directory of this source tree.
*/

import { Row, Column } from 'carbon-components-react';
import { Row, Column, Link } from 'carbon-components-react';
import React from 'react';

const coreComponentsLink = '/components/overview';

function ComponentIndexNotFound() {
return (
<div className="component-index-not-found">
<h2 className="component-index-not-found__title">No results found</h2>
<Row>
<Column sm={4} md={6} lg={6}>
<h2 className="component-index-not-found__title">No results found</h2>
<p className="component-index-not-found__text">
It appears we don’t have a communtiy component that matches your
search. Try different search terms.
Expand All @@ -24,8 +26,14 @@ function ComponentIndexNotFound() {
<Column sm={4} md={6} lg={6}>
<p className="component-index-not-found__text">
This community component index does not include the Carbon core
components and you may find what you’re looking for in the core
component list.
components and you may find what you're looking for in the
<Link
className="component-index-not-found__link"
href={coreComponentsLink}
rel="noopener noreferrer">
core component
</Link>
list.
</p>
</Column>
</Row>
Expand Down
22 changes: 9 additions & 13 deletions src/components/ComponentIndexPage/ComponentIndexSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Search, Row, Column } from 'carbon-components-react';
import { Search } from 'carbon-components-react';
import PropTypes from 'prop-types';
import React from 'react';

Expand All @@ -9,18 +9,14 @@ function ComponentIndexSearch({ value, onChange }) {

return (
<div className="component-index-search">
<Row>
<Column sm={4} md={8} lg={9}>
<Search
light
id="component-index-search"
labelText="Search component index by name, keyword, or domain"
placeHolderText="Component name, keyword, domain"
value={value}
onChange={handleOnChange}
/>
</Column>
</Row>
<Search
light
id="component-index-search"
labelText="Search component index by name, keyword, or domain"
placeHolderText="Component name, keyword, domain"
value={value}
onChange={handleOnChange}
/>
</div>
);
}
Expand Down
34 changes: 16 additions & 18 deletions src/components/ComponentIndexPage/ComponentIndexSort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,27 @@
* LICENSE file in the root directory of this source tree.
*/

import { Dropdown, Row, Column } from 'carbon-components-react';
import { Dropdown } from 'carbon-components-react';
import PropTypes from 'prop-types';
import React from 'react';

function ComponentIndexSort({ initialSortOption, options, onChange }) {
return (
<Row className="component-index-sort-container">
<Column sm={4} md={8} lg={9}>
<div className="component-index-sort">
<Dropdown
id="component-index-sort"
initialSelectedItem={initialSortOption}
items={options}
label="Sort"
light
onChange={({ selectedItem }) => {
onChange(selectedItem);
}}
type="inline"
/>
</div>
</Column>
</Row>
<div className="component-index-sort-container">
<div className="component-index-sort">
<Dropdown
id="component-index-sort"
initialSelectedItem={initialSortOption}
items={options}
label="Sort"
light
onChange={({ selectedItem }) => {
onChange(selectedItem);
}}
type="inline"
/>
</div>
</div>
);
}

Expand Down
Loading