Home

Purpose of katapult-pro-elements

This repository serves as a storage place for all of Katapult's custom elements. Any newly developed elements should be added here instead of in our photoheight repository. Any old elements that we don't plan to replace should also be moved here eventually. Elements that are still being developed should live in the src/elements-in-development folder. When elements are satisfactorily finished, they should be moved to the public/elements folder, while all dependencies (modules and external stylesheets or non-modular elements) should remain in the src folder.

When is an element satisfactory?

Since this repository is intended to be used only for iterating and publishing new versions of our @katapult-engineering/elements package, an element is considered satisfactory when:

• Its base functionality exists by importing the element and adding its html tag, without any additional know-how. (Elements should be self explanatory and easy to manipulate as needed, rather than needing to know exact pre-requisites to get it to work.)
• Nothing in the element includes data sensitive to Katapult. DO NOT MAKE ANY COMMITS WITH SENSITIVE DATA AS THIS IS A PUBLIC REPOSITORY.
• Nothing in the element is innately Katapult branded. Elements should look like Katapult, but not include our colors, our logo, our support numbers, emails, or any other Katapult-specific data. The colors should default to either grayscale or shoelace colors when a color hasn't been set by either a global CSS variable or element property.
• The new element has been added to the README.md file with sufficient detail. This should include details such as what the element is, its HTML tag, how to import it, the events it emits, its public properties, its public functions/methods, and its slots.

What is this repository for?

This repository allows us to develop highly polished elements for both internal and external use. It also clears up our photoheight repository by putting our elements and all of their dependencies into one location. While this is intended for internal use, the main goal to keep in mind is that this is also for public/client use. Any elements developed here will make our exact elements available to the public to use. This is through publishing to NPM. Everything in the public/elements folder of this repository will be published to NPM, as well as the README.md, package-lock.json, and package.json files.

What parts of this repository are being exported to external users?

The public/elements folder is being published to NPM. Anything inside of that folder must be built in a way to allow both internal and external developers to use it. While this is the only folder being given to clients, everything in the repository is public.

How do we use this internally if the elements aren't Katapult branded?

We will need to use a style sheet to set global CSS variables that are used in all elements in the package. This style sheet will need to be applied to high-level/wrapper locations like the index.html files to ensure its applied on all pages. If this is accomplished, elements from the package should be automatically Katapult-branded when we use them in photoheight.