⚠️ NOTE: this package should ONLY be used in Origami components. If you are not developing a component that is part of Origami, please do not use this package.
A collection of Origami components for use in other Origami components.
Instructions for the component. We've broken this down by Markup, JavaScript, Sass, etc. You may add more sections as needed.
Check out how to include Origami components in your project to get started with o-private-foundation.
o-private-foundation Behaviour description.
Markup documentation for the component. Including css classes, data attributes, and tags for variations of the component. Demo markup is also shown in the registry. For complex markup it can be useful to describe the markup and link to the registry demos for a full example. Remember to start your codeblocks with three backticks and "html" so your markup is syntax highlighted correctly.
<div data-o-component="o-private-foundation" class='o-private-foundation'>
</div>Sass documentation. With instructions to include styles with a primary mixin, what options are available, brand support where applicable. For complex components it may be helpful to document apis with SassDoc and link to the components SassDoc in the Origami Registry. Remember to start your codeblocks with three backticks and "scss" so your markup is syntax highlighted correctly.
Use @include oPrivateFoundation() to include styles for all o-private-foundation features.
@import "@financial-times/o-private-foundation";
@include oPrivateFoundation();JavaScript documentation. Including how to initialise the component, available options, and common usecases. For complex components it may be helpful to document apis with JSDoc and link to the components JSDocs in the Origami Registry. Remember to start your codeblocks with three backticks and "js" so your js is syntax highlighted correctly.
JavaScript is initialised automatically for Origami Build Service users. If your project is using a manual build process, initialise o-private-foundation manually.
For example call the init method to initialise all o-private-foundation instances in the document:
import oPrivateFoundation from 'o-private-foundation';
oPrivateFoundation.init();Or pass an element to initialise a specific o-private-foundation instance:
import oPrivateFoundation from 'o-private-foundation';
const oPrivateFoundationElement = document.getElementById('#my-o-private-foundation-element');
oPrivateFoundation.init(oPrivateFoundationElement);Answers to questions or problems that come up repeatedly. It's likely you can delete this section for now. Remember to remove it from the table of contents.
Contributing documentation for non typical components. It's likely you can delete this section if your component conforms with other components. Remember to update the table of contents is you remove this section.
Guides to upgrade from one major version of a component to another.
This section includes a table of major versions with links to MIGRATION.md.
MIGRATION.md would provide upgrade instructions, but since this is a new component there is no MIGRATION.md.
Delete this section, including from the table of contents, until there is a second major version of this component.
| State | Major Version | Last Minor Release | Migration guide |
|---|---|---|---|
| ✨ active | 3 | N/A | migrate to v3 |
| ⚠ maintained | 2 | 2.0 | migrate to v2 |
| ╳ deprecated | 1 | 1.0 | N/A |
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email origami.support@ft.com.
This software is published by the Financial Times under the MIT licence. `; };