Skip to content

Commit

Permalink
Merge 1516cdc into feat/cwc-v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibmdotcom-bot
ibmdotcom-bot committed Sep 11, 2023
2 parents 5d19efe + 1516cdc commit 191457f
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 117 deletions.
112 changes: 83 additions & 29 deletions ...ges/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* @license
*
* Copyright IBM Corp. 2020, 2022
* Copyright IBM Corp. 2020, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand All @@ -24,43 +24,85 @@ import DDSFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/c

import readme from './README.stories.react.mdx';

export const Default = args => {
export const Default = (args) => {
const { heading, gridKnobs } = args?.FilterPanel ?? {};

return (
<>
<div
className={`grid-alignment ${gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'}`}
className={`grid-alignment ${
gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'
}`}
style={{ paddingRight: '1rem' }}>
<DDSFilterPanelComposite>
<DDSFilterPanelHeading slot="heading">{heading}</DDSFilterPanelHeading>
<DDSFilterPanelHeading slot="heading">
{heading}
</DDSFilterPanelHeading>
<DDSFilterGroup>
<DDSFilterGroupItem title-text="Product types">
<DDSFilterPanelCheckbox value="API">API</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Application">Application</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Data Set">Data Set</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Free Trial">Free Trial</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Hardware">Hardware</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Service">Service</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Service Assets">Service Assets</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Software">Software</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="API" checked>
API
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Application" checked>
Application
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Data Set" checked>
Data Set
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Free Trial">
Free Trial
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Hardware">
Hardware
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Service">
Service
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Service Assets">
Service Assets
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="Software">
Software
</DDSFilterPanelCheckbox>
</DDSFilterGroupItem>
<DDSFilterGroupItem title-text="Technologies">
<DDSFilterPanelInputSelect header-value="Analytics" title="Analytics"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Artificial intelligence" title="Artificial intelligence">
<DDSFilterPanelInputSelectItem value="Machine Learning">Machine Learning</DDSFilterPanelInputSelectItem>
<DDSFilterPanelInputSelect
header-value="Analytics"
title="Analytics"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Artificial intelligence"
title="Artificial intelligence">
<DDSFilterPanelInputSelectItem value="Machine Learning">
Machine Learning
</DDSFilterPanelInputSelectItem>
<DDSFilterPanelInputSelectItem value="Natural language processing">
Natural language processing
</DDSFilterPanelInputSelectItem>
<DDSFilterPanelInputSelectItem value="Speech recognition">Speech recognition</DDSFilterPanelInputSelectItem>
<DDSFilterPanelInputSelectItem value="Speech recognition">
Speech recognition
</DDSFilterPanelInputSelectItem>
</DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Automation" title="Automation"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Blockchain" title="Blockchain"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Cloud computing" title="Cloud computing"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="IT infrastructure" title="IT infrastructure"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="IT management" title="IT management"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Mobile technologys" title="Mobile technology"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Security" title="Security"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Automation"
title="Automation"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Blockchain"
title="Blockchain"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Cloud computing"
title="Cloud computing"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="IT infrastructure"
title="IT infrastructure"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="IT management"
title="IT management"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Mobile technologys"
title="Mobile technology"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Security"
title="Security"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Software development"
title="Software development"></DDSFilterPanelInputSelect>
Expand All @@ -69,9 +111,15 @@ export const Default = args => {
<DDSFilterPanelInputSelect
header-value="Business operations"
title="Business operations"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Content Management" title="Content Management"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Customer service" title="Customer service"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect header-value="Finance" title="Finance"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Content Management"
title="Content Management"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Customer service"
title="Customer service"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Finance"
title="Finance"></DDSFilterPanelInputSelect>
<DDSFilterPanelInputSelect
header-value="Marketing and sales"
title="Marketing and sales"></DDSFilterPanelInputSelect>
Expand All @@ -80,7 +128,9 @@ export const Default = args => {
title="Supply chain management"></DDSFilterPanelInputSelect>
</DDSFilterGroupItem>
<DDSFilterGroupItem title-text="Deployment types">
<DDSFilterPanelCheckbox value="On-premises">On-premises</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="On-premises">
On-premises
</DDSFilterPanelCheckbox>
<DDSFilterPanelCheckbox value="SaaS">SaaS</DDSFilterPanelCheckbox>
</DDSFilterGroupItem>
</DDSFilterGroup>
Expand All @@ -93,7 +143,7 @@ export const Default = args => {
export default {
title: 'Components/Filter panel',
decorators: [
story => (
(story) => (
<div className="bx--grid bx--grid--condensed">
<div className="bx--row">{story()}</div>
</div>
Expand All @@ -105,7 +155,11 @@ export default {
knobs: {
FilterPanel: () => ({
heading: text('heading', 'Filter'),
gridKnobs: select('Grid alignment', ['3 columns', '4 columns'], '4 columns'),
gridKnobs: select(
'Grid alignment',
['3 columns', '4 columns'],
'4 columns'
),
}),
},
},
Expand Down
48 changes: 38 additions & 10 deletions packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import readme from './README.stories.mdx';
export const Default = (args) => {
const { heading, filterCutoff, maxFilters, viewAllText, gridKnobs } =
args?.FilterPanel ?? {};
const selectedItems = args?.FilterPanel?.selectedItems
? parseInt(args?.FilterPanel?.selectedItems)
: 0;

const filterPanelHeading = document.querySelector('dds-filter-panel-heading');
if (filterPanelHeading) {
Expand All @@ -35,28 +38,44 @@ export const Default = (args) => {
filter-cutoff="${filterCutoff}"
max-filters="${maxFilters}"
view-all-text="${viewAllText}">
<dds-filter-panel-checkbox value="API"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 1}
value="API"
>API</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="Application"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 2}
value="Application"
>Application</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="Data Set"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 3}
value="Data Set"
>Data Set</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="Free Trial"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 4}
value="Free Trial"
>Free Trial</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="Hardware"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 5}
value="Hardware"
>Hardware</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="Service"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 6}
value="Service"
>Service</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="Service Assets"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 7}
value="Service Assets"
>Service Assets</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="Software"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 8}
value="Software"
>Software</dds-filter-panel-checkbox
>
</dds-filter-group-item>
Expand Down Expand Up @@ -124,10 +143,14 @@ export const Default = (args) => {
title="Supply chain management"></dds-filter-panel-input-select>
</dds-filter-group-item>
<dds-filter-group-item title-text="Deployment types">
<dds-filter-panel-checkbox value="On-premises"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 9}
value="On-premises"
>On-premises</dds-filter-panel-checkbox
>
<dds-filter-panel-checkbox value="SaaS"
<dds-filter-panel-checkbox
?checked=${selectedItems >= 10}
value="SaaS"
>SaaS</dds-filter-panel-checkbox
>
</dds-filter-group-item>
Expand Down Expand Up @@ -161,6 +184,11 @@ export default {
['3 columns', '4 columns'],
'4 columns'
),
selectedItems: select(
'Number of selected items',
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
'2'
),
}),
},
propsSet: {
Expand Down
Loading

0 comments on commit 191457f

Please sign in to comment.