env:

$ npm --version
6.14.7
$ node --version
v12.18.3

Hi

Wanted to check out your package, I cloned your repo and ran:

npm i --save
npm run storybook

but can't run storybook, get this error:

ERROR in ./stories/search.stories.jsx
Module not found: Error: Can't resolve '../src/components/InputLarge' in '/home/avery/Projects/data-catalog-components/stories'
 @ ./stories/search.stories.jsx 12:0-54 56:42-52
 @ ./stories sync .stories.jsx$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.34 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.13 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Any recommendations?
Thanks

When adding the new scss files for distribution with the components, I accidentally introduced a second folder of scss files. Since this is no longer a theme, we should remove the theme folder and integrate the files in there with the styles folder. Updating any index.scss files as needed.

User Story

As a user I want to be able to easily navigate the site via a menu
As a client I would like to be able to change the color of the menu bar

Acceptance Criteria

This work involves adding a component which can be used for the main navigation. It will allow
users should be able to browse anv visit menu items. It will need to:

• Allow for both top level menus and submenus
• On mobile resolutions, work as a mobile menu which opens/ closes via a clickable item (Also keyboard) and presents a stacked list of mobile elements.
• Be accessible. Include Aria markup and be easy to navigate through to all of the menu items just with a keyboard.
• Be custom color themable.

##Estimate: 1 day

ERROR in ./stories/dataset.stories.jsx
Module not found: Error: Can't resolve '../src/services/resource/resource_tools' in '/home/fmizzell/Workspace/data-catalog-components/stories'
@ ./stories/dataset.stories.jsx 20:0-75 212:42-58
@ ./stories sync .stories.jsx$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Need to add a button to the data table header to open the data table in a modal full screen.

We want to inject color variables farther down the chain so they are easier to modify.

Should clear the text field.

Hello, I have seen a problem, when selecting a theme it takes me to the datasets related to this theme, but when clicking on the themes button in the top navigation bar, it does not "clean the theme filter" the url if it changes, but the same front is kept.

1. select the topic and the url path is: https://demo.getdkan.org/search?theme=Transportation

2. inside the theme the url is https://demo.getdkan.org/search/?theme=Transportation and the datasets are filtered
   

3. when click the datasets button the url change but kept the filter dataset: https://demo.getdkan.org/search/

The frontend is currently English only. Look into how to integrate something like https://react.i18next.com/ to the component library. Or is this better for the frontend.

Add a navbar component to the rest of the components. It will take
navLinks: a set of default links pulled from a JSON file.

User Story:

Acceptance criteria:

Estimate:

Note: We need a frontender full time to be able to work on USWDS work so until that happens this will be on hold

Extract the hooks and functions from resource component into their own file. This will allow developers to create downstream resources while maintaining the logic upstream.

The DatatablePageResults component should display in the format of

• Viewing # - # of # rows

I know we are waiting for UX team results but just jotting down some thoughts

• Show 'no result found' message rather than lose access to the table.
• option for horizontal scroll at the top
• keep row data from wrapping by adding ... when it overruns the column width
• option to freeze header row
• restore the 'view in full screen modal' button
• zebra striping does not carry through when scrolling to the right

and use human-readable names

Cleanup and test for the components

Allow users to distinguish which selection of the DataTableDensity component is currently active.

• Allow users to pass a prop for 'active' to DataTableDensity component which can be used to match against the icon text to add an additional class 'active' in the case of a match.

The Organization component can be the first text for the new 2.0.0 update.

• Change component to arrow function
• Pass props in instead of destructuring a single props prop
• remove hard coded Organization Image alt name prop
• Make search url path a prop, some sites may not use /search for dataset searches
• all classNames are now props and their default is based on USWDS (maybe cards?)
• Link alt text is not hardcoded
• Prop types all defined and each has a commented line above it explaining it's purpose.
• Complete or almost complete test coverage for the component
• Tests include jest axe to have no violations test.
• Docz file updated to document the component to explain it's usage

The prop type comments should look like

/**
   * This is a pretty good description for this prop.
   */

This will result appear in the Docz file for this component, see https://www.docz.site/docs/built-in-components for more examples.

Our current build process and babel setup is very fragile. Swapping to create react app and using something like Rollup js will give us more time to focus on the components instead of build tools. Also most things that are built to work with Create React App should now work out of the box with our tool set.

The Hero component should be able to pass a search param to the dataset search page. It should be able to take a custom text input and button, along with props for each of the paths and search filters.

Include a class object to style with a different design system.

• Title
• Description
• search url
• search key
• Textfield
• Submit

Heya, we have a community push to get @scarf/scarf removed from packages. It's a data protection and library expectations issue.

There's a considerable backlog of conversation on Reactiflux #news-and-links, with a reasonable starting point here: https://discordapp.com/channels/102860784329052160/105816607976095744/727600754646450206

The conversation also included the author of scarf as well.

The result being TanStack/query#676

When scrolling down a data table the header should stick to the top of the page? Another option would maybe to have an option to contain the data table to the page with overflow x and y, then you could scroll in the table div itself.

Search page: When changing the amount of search results from 10 to 25 or 50 or even 100 (at the bottom of the page), always lists 10 search results per page

We use buttons in many places in the data catalogs. We should get a React component that uses the USWDS styles and classes: https://designsystem.digital.gov/components/button/

It should take props for:

• Variant [default, secondary, accent, accent, warm, base, outline, unstyled]
• Disabled
• inverse bool
• big bool
• children (the button should take children so anything can be passed in from text to images)

Have documented props, default props, unit tests, and jest test.

Return SearchListItem here (

Addresses GetDKAN/dkan#3266

Jest tests are not running in CircleCI

User Story

Allow users to track events associated with the 'View X more' and 'View Less' buttons associated with the SearchFacets.

Acceptance Criteria

• The SearchFacets component can receives an additional conditional two props that will be function definitions: 'onMore' and 'onLess.
• The SearchFacets component passes these two props conditionally to the ShowMoreContainer.
• When the ShowMore button is clicked, if the prop for 'onMore' is supplied, invoke the 'onMore' function if the button text reads 'Show X More'
• When the ShowLess button is clicked, if the prop for 'onLess' is supplied, invoke the 'onLess' function if the button text reads 'Show Less'

This looks like it might require some custom coding. I did a quick look and didn't see a css only solution for adding a second scroll bar to the top of a div.

The datastore.js is one of the oldest parts of our component library. It has been updated a few times, but still has a lot of legacy code that isn't used. I'm proposing dropping the class structure and moving to something more akin to just a JS object structure. http://aaditmshah.github.io/why-prototypal-inheritance-matters/

This structure so far has seemed useful on other builds as works similar to how we currently use the class but is much easier to extend or change to meet the requirements on a particular build. With this the create method can always be overwritten to add what is needed for the particular component and it's easy to store extra information like fields or custom datastore requests. As the DKAN datastore api continues to grow we should be able to easily update the components datastore without breaking older builds as much.

I'll try to explain more how it works in the PR where code will be easier to see.

In order to get a sense of what are the new changes that would be included in 1.8x of the frontend, do an audit of commits.

Acceptance criteria:

• A checklist that can be used for each of our clients

Estimate: 1 hour

Currently SearchFacets component is a list component that renders individual SearchFacet components.

In order to allow for skeleton loading components to load independent of the SearchFacets list render, allow users to import individually import SearchFacet components for conditional rendering.

Storybook has been updated to include MDX for documentation. The reason we left for Docz was the MDX feature, but also lost all the other cool things with Storybook. Now we can have both and it's a good time to make the switch.

• Can build storybook locally
• Has example of MDX Story