From 36ae2e82d3d39140eb6e07c08bcc34f2f724d6a7 Mon Sep 17 00:00:00 2001 From: "Andrea N. Cardona" Date: Tue, 25 Aug 2020 14:52:05 -0400 Subject: [PATCH] feat(component-index): 1555-component-index-filter-ui-functionality (#1584) * feat(component-index): 1555-component-index-filter-ui-functionality * all design updates done - except grid * responsive breakpoints updated - need to fix left grid alignment * feat(component-index): 1555-component-index-filter-ui-functionality - soft launch preview * things working * feat(component-index): all features should be working * updated filter refactor * feat(component-index): 1555-component-index-filter-ui-functionality - soft launch * Update src/components/ComponentIndexPage/index.js Co-authored-by: Josh Black * feat(component-index): redirect, and css updates * feat(component-index): deleted components mdx file * Update src/data/nav-items.yaml Co-authored-by: jillianhowarth Co-authored-by: andrea.cardonaibm.com Co-authored-by: Josh Black Co-authored-by: Vince Picone Co-authored-by: jillianhowarth --- conf.d/rewrite.conf | 5 +- .../ComponentIndexListItem.js | 125 +++++++++--------- .../ComponentIndexNotFound.js | 16 ++- .../ComponentIndexSearch.js | 22 ++- .../ComponentIndexPage/ComponentIndexSort.js | 34 +++-- .../ComponentIndexPage/component-index.scss | 85 ++++++++++-- src/components/ComponentIndexPage/index.js | 105 +++++++++++++-- .../useComponentIndexData.js | 1 + src/data/nav-items.yaml | 4 +- src/pages/community/component-index.mdx | 11 +- src/pages/community/components.mdx | 31 ----- 11 files changed, 274 insertions(+), 165 deletions(-) delete mode 100644 src/pages/community/components.mdx diff --git a/conf.d/rewrite.conf b/conf.d/rewrite.conf index fc584811bb7..7cf01adfe47 100644 --- a/conf.d/rewrite.conf +++ b/conf.d/rewrite.conf @@ -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; \ No newline at end of file +rewrite /experimental/(.*) /community/patterns/\$1 permanent; + +# Community index +rewrite /community/components /community/component-index permanent; \ No newline at end of file diff --git a/src/components/ComponentIndexPage/ComponentIndexListItem.js b/src/components/ComponentIndexPage/ComponentIndexListItem.js index e2119588490..bfb48196be6 100644 --- a/src/components/ComponentIndexPage/ComponentIndexListItem.js +++ b/src/components/ComponentIndexPage/ComponentIndexListItem.js @@ -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, @@ -51,7 +50,7 @@ const ComponentIndexListItem = React.memo( name, websiteUrl, }) => { - let img = undefined; + let img; if (image?.fluid) { img = ( @@ -71,69 +70,65 @@ const ComponentIndexListItem = React.memo( } return ( - - -
-
- {img} -
-
-
{name}
-

{description}

-
-
- - Website - - {codeUrl && ( - <> -
- - Code - - - )} -
-
    - {framework && ( -
  • - - {framework} - -
    • - )} - {designAsset && ( -
  • - - {designAsset} - -
    • - )} - {maintainer && ( -
  • - - {maintainer} - -
    • - )} -
-
-
-
- - + <> +
+
{img}
+
+
{name}
+

{description}

+
+
+ + Website + + {codeUrl && ( + <> +
+ + Code + + + )} +
+
    + {framework && ( +
  • + + {framework} + +
    • + )} + {designAsset && ( +
  • + + {designAsset} + +
    • + )} + {maintainer && ( +
  • + + {maintainer} + +
    • + )} +
+
+
+
+ ); } ); diff --git a/src/components/ComponentIndexPage/ComponentIndexNotFound.js b/src/components/ComponentIndexPage/ComponentIndexNotFound.js index 7692f81caf3..43ba921b2f6 100644 --- a/src/components/ComponentIndexPage/ComponentIndexNotFound.js +++ b/src/components/ComponentIndexPage/ComponentIndexNotFound.js @@ -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 (
-

No results found

+

No results found

It appears we don’t have a communtiy component that matches your search. Try different search terms. @@ -24,8 +26,14 @@ function ComponentIndexNotFound() {

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 + + core component + + list.

diff --git a/src/components/ComponentIndexPage/ComponentIndexSearch.js b/src/components/ComponentIndexPage/ComponentIndexSearch.js index 97e7ddd740f..8ac6b8d43f1 100644 --- a/src/components/ComponentIndexPage/ComponentIndexSearch.js +++ b/src/components/ComponentIndexPage/ComponentIndexSearch.js @@ -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'; @@ -9,18 +9,14 @@ function ComponentIndexSearch({ value, onChange }) { return (
- - - - - +
); } diff --git a/src/components/ComponentIndexPage/ComponentIndexSort.js b/src/components/ComponentIndexPage/ComponentIndexSort.js index ea77cf5135c..7c5acf46da5 100644 --- a/src/components/ComponentIndexPage/ComponentIndexSort.js +++ b/src/components/ComponentIndexPage/ComponentIndexSort.js @@ -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 ( - - -
- { - onChange(selectedItem); - }} - type="inline" - /> -
- - +
+
+ { + onChange(selectedItem); + }} + type="inline" + /> +
+
); } diff --git a/src/components/ComponentIndexPage/component-index.scss b/src/components/ComponentIndexPage/component-index.scss index 1772f9bc337..28331cf43ff 100644 --- a/src/components/ComponentIndexPage/component-index.scss +++ b/src/components/ComponentIndexPage/component-index.scss @@ -4,6 +4,12 @@ // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. // +//---------------------------------------------------------------------------- +// Component Index Container +//---------------------------------------------------------------------------- +.component-index-container .bx--no-gutter--start { + width: 100%; +} //---------------------------------------------------------------------------- // Component Index Search @@ -20,7 +26,7 @@ .component-index-sort { background-color: $white-0; - height: 2.5rem; + height: $spacing-08; } //---------------------------------------------------------------------------- @@ -29,7 +35,7 @@ .component-index-item { display: flex; flex-wrap: wrap; - margin-bottom: 1px; + border-bottom: 1px solid $ui-03; } .component-index-item .component-index-item__image, @@ -42,13 +48,21 @@ .component-index-item__image { display: none; - @include carbon--breakpoint(md) { + @include carbon--breakpoint(md) { //672 4:3 display: flex; justify-content: center; align-items: center; - margin-right: 1px; + border-right: 1px solid $ui-03; // TODO: replace with appropriate aspect ratio handling - width: 238px; + width: 14.875rem; + } + + @include carbon--breakpoint(lg) { //1056 1:1 + width: 11.25rem; + } + + @include carbon--breakpoint(xlg) { //1312 4:3 + width: 14.875rem; } } @@ -69,7 +83,7 @@ // Description .component-index-item__description { @include carbon--type-style('body-short-01'); - padding-right: 3rem; + padding-right: $spacing-09; color: $text-01; display: -webkit-box; -webkit-line-clamp: 3; @@ -80,7 +94,7 @@ // Content .component-index-item__content { - padding: 1rem; + padding: $spacing-05; display: flex; flex-direction: column; flex: 1; @@ -104,7 +118,7 @@ // Divider .component-index-item__divider { width: 1px; - height: 1rem; + height: $spacing-05; background-color: $ui-03; margin: 0 $spacing-05; } @@ -116,20 +130,23 @@ } .component-index-item__tag--framework { + padding-top: $spacing-02; padding-right: $spacing-02; } .component-index-item__tag--design-asset { + padding-top: $spacing-02; padding-right: $spacing-02; } .component-index-item__tag--maintainer { - @include carbon--type-style('body-short-01'); - color: $text-01; -} + display: none; -.component-index-item__tags li { - display: inline-block; + @media screen and (min-width: 850px) { + display: flex; + @include carbon--type-style('body-short-01'); + color: $text-01; + } } //---------------------------------------------------------------------------- @@ -148,3 +165,45 @@ color: $text-01; margin-bottom: $spacing-06; } + +.component-index-not-found__link { + @include carbon--type-style('body-long-02'); + + margin-bottom: $spacing-06; + padding: 0 $spacing-02 0 $spacing-02; +} + +//---------------------------------------------------------------------------- +// Component Index Filter +//---------------------------------------------------------------------------- +.component-index-filter-container { + margin-top: 12.5rem; + padding-left: $spacing-07; +} +// Header +.component-index-filter__header { + @include carbon--type-style('heading-01'); + color: $text-01; +} + +// Filter fieldset & label +.component-index-filter__fieldset { + padding-bottom: $spacing-05; + margin-top: $spacing-05; +} +.component-index-filter__label { + border-top: 1px solid $ui-03; + padding-top: $spacing-05; + padding-bottom: $spacing-03; + font-size: 0.875rem; + line-height: 1.125rem; + letter-spacing: 0.16px; + color: $carbon--gray-70; + font-weight: 400; + vertical-align: initial +} + +// Filter option +.component-index-filter__option { + padding-bottom: $spacing-05; +} \ No newline at end of file diff --git a/src/components/ComponentIndexPage/index.js b/src/components/ComponentIndexPage/index.js index 80ceb8aeaec..8faec7f6683 100644 --- a/src/components/ComponentIndexPage/index.js +++ b/src/components/ComponentIndexPage/index.js @@ -6,7 +6,8 @@ */ import Fuse from 'fuse.js'; -import React, { useEffect, useState, useMemo } from 'react'; +import React, { useState, useMemo } from 'react'; +import { Column, Checkbox, Row } from 'carbon-components-react'; import ComponentIndexList from './ComponentIndexList'; import ComponentIndexNotFound from './ComponentIndexNotFound'; import ComponentIndexSearch from './ComponentIndexSearch'; @@ -26,6 +27,7 @@ const searchOptions = { name: 'name', weight: 2, }, + 'availability', 'description', 'maintainer.name', 'maintainer.friendly_name', @@ -58,15 +60,65 @@ function sortByNewest(a, b) { return dateA - dateB; } +const filterLabels = [ + { + title: 'Framework', + options: ['React', 'Angular', 'Vue', 'Vanilla'], + }, + { + title: 'Design asset', + options: ['Sketch', 'Azure', 'Adobe XD', 'Figma'], + }, + { + title: 'Availability', + options: ['Open Source', 'IBM Internal'], + }, + { + title: 'Maintainer', + options: ['Cloud Data & AI', 'Cloud PAL', 'Watson Health', 'Watson IoT'], + }, +]; + +function filterItems(items, filters) { + return items.filter((item) => { + // If there are no filters, return true. + if (filters.length === 0) { + return true; + } + const { framework, designAsset, availability, maintainer } = item; + const fields = [framework, designAsset, availability, maintainer]; + return filters.every((filter) => + filter === 'Cloud Data & AI' + ? fields.includes('CD&AI') + : fields.includes(filter) + ); + }); +} + function ComponentIndexPage() { const components = useComponentIndexData(); const [activeSortOption, setActiveSortOption] = useState(initialSortOption); + const [selected, setSelected] = useState([]); const [searchValue, setSearchValue] = useState(''); const [debouncedSearchValue] = useDebounce(searchValue, 300); const searchClient = useMemo(() => new Fuse(components, searchOptions), [ components, ]); + + const handleOnChange = (checkedOption, selectedFilter) => { + // Remove unchecked filter option(s) from setSelected state. + if (selected.includes(selectedFilter)) { + setSelected( + selected.filter((checkedOption) => checkedOption !== selectedFilter) + ); + + // Add checked filter option(s) to setSeleted state. + } else { + setSelected([...selected, selectedFilter]); + } + }; + let searchResults = components; if (debouncedSearchValue !== '') { searchResults = searchClient @@ -74,11 +126,14 @@ function ComponentIndexPage() { .map((result) => result.item); } - let results = undefined; + let results; + if (searchResults.length > 0) { results = ( ); } else { @@ -86,15 +141,41 @@ function ComponentIndexPage() { } return ( - <> - - - {results} - + + + + + {results} + + +
Filters
+
+ {filterLabels.map(({ title, options, key }) => ( +
+ {title} + {options.map((selectedFilter) => ( + + handleOnChange(checkedOption, selectedFilter) + } + /> + ))} +
+ ))} +
+ + ); } diff --git a/src/components/ComponentIndexPage/useComponentIndexData.js b/src/components/ComponentIndexPage/useComponentIndexData.js index 7e7eac031db..72a6cea0eff 100644 --- a/src/components/ComponentIndexPage/useComponentIndexData.js +++ b/src/components/ComponentIndexPage/useComponentIndexData.js @@ -24,6 +24,7 @@ const COMPONENT_INDEX_DATA = graphql` allComponentIndexEntry { edges { node { + availability aliases code_url date_added diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 022287665a7..43c9ac1b3b4 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -201,8 +201,8 @@ pages: - title: Overview path: /community/overview - - title: Components - path: /community/components + - title: Component index + path: /community/component-index - title: Patterns path: /community/patterns - title: Domain guidance diff --git a/src/pages/community/component-index.mdx b/src/pages/community/component-index.mdx index efd3e3b4a35..b09babbede9 100644 --- a/src/pages/community/component-index.mdx +++ b/src/pages/community/component-index.mdx @@ -9,12 +9,6 @@ description: import ComponentIndexPage from '../../components/ComponentIndexPage'; - - -The community index is a work in progress and is not ready for production use. - - - These components are developed and maintained by members of the IBM Carbon @@ -24,4 +18,9 @@ the contributors listed on each page. + + +The community index is a work in progress and is not ready for production use. + + diff --git a/src/pages/community/components.mdx b/src/pages/community/components.mdx deleted file mode 100644 index 6c099a44284..00000000000 --- a/src/pages/community/components.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Components -description: - These components are developed and maintained by members of the Carbon - community. ---- - -## Community components - -These components are developed and maintained by members of the Carbon -community. For support, contact the contributors listed on each page. They are -not supported by the core Carbon team. - -These components may change over time, and they may be incomplete or -experimental. For work that has been approved for universal use by the Carbon -governance board, see [Carbon components](/components/overview). - -_This content is accessible to IBMers only._ - -
- -| Community components | | -| ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Cards](https://pages.github.ibm.com/cdai-design/pal/components/card/usage) | A flexible container that groups related blocks of content and information into one understandable unit. | -| [Chips](https://pages.github.ibm.com/Watson-IoT/IoT-Design-Site/components/chips/overview) | Displays user initials as a simple indicator of ownership. | -| [Enhanced data table](https://pages.github.ibm.com/ibmcloud/pal/components/enhanced-data-table/code) | Offers additional components that can be layered onto the default Carbon data table. Functionalities include row height settings, hide and show columns, and several filtering options. | -| [Error boundary](https://pages.github.ibm.com/ibmcloud/pal/components/error-boundary/code) | Used to prevent JavaScript code from crashing React apps. | -| [List builder](https://pages.github.ibm.com/Watson-IoT/IoT-Design-Site/components/listbuilder/overview) | Allows users to create lists by selecting from a predefined set of items. | -| [Rule builder](https://pages.github.ibm.com/Watson-IoT/IoT-Design-Site/components/rulebuilder/overview) | Used to visually build rules from logical statements with AND and OR operators. | -| [Side panel](https://pages.github.ibm.com/ibmcloud/pal/components/side-panel/usage) | Used for keeping context while performing a task like editing, viewing details, or creating something new on a page. | -| [Widget](https://pages.github.ibm.com/cdai-design/pal/components/widget/usage) | Provides a summary of a platform functionality, status, or individual service. |