OUTLINE-165: Creating ready to develop placeholders for upcoming components

[himerus]

Description

• Create stub for outline-core-image.
• Create stub for outline-core-card.
• Create stub for outline-core-icon.
• Create stub for outline-core-container.
• Create stub for outline-core-alert.
• Create stub for outline-core-form.
• Create stub for outline-core-text (styled text).
• Create stub for outline-core-accordion.
• Create stub for outline-core-youtube.
• Create stub for outline-core-breadcrumb.
• Create stub for outline-core-list
• Create stub for outline-core-modal.

Patterns

outline-core-*.ts Component file:

import { html, TemplateResult, CSSResultGroup } from 'lit';
import { customElement } from 'lit/decorators.js';

// Our base component, which all others extend.
import { OutlineElement } from '@phase2/outline-core';

import componentStyles from './outline-core-image.css.lit';

/** The element name, reused throughout the codebase */
const componentName = 'outline-core-image';

/**
 *
 * The Outline Core Image component
 *
 * @element outline-core-image
 * @extends OutlineElement
 * @slot - The default slot for this element.
 *
 * @todo: Complete component.
 * @todo: Update `../docs/outline-core-image.mdx` to accurately document the component.
 * @todo: Run `yarn analyze` to generate README.md.
 * @todo: Update `package.json` to remove the `private` flag.
 * @todo: Update `.changeset/config.json` to remove this component from the `ignore` list.
 * @todo: Create PR for updated and completed component.
 */
@customElement(componentName)
export class OutlineCoreImage extends OutlineElement {
  static styles: CSSResultGroup = [componentStyles];

  render(): TemplateResult {
    return html`
      <slot></slot>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [componentName]: OutlineCoreImage;
  }
}

Basic folder structure:

• component-name - Top level component directory
  • docs - Folder for documentation
    • component-name.mdx - MDX formatted documentation
  • src
    • config.ts - Shared configuration for this and other components
    • component-name.ts - The component file, declaring the Class and component itself
    • component-name.css - The CSS styling for the component
  • index.ts - The default exported file, with any component exports, variable, exports, etc.
  • package.json - The required NPM configuration, scripts and dependencies
  • tsconfig.build.json - TypeScript configuration that extends the base one

[changeset-bot]

⚠️ No Changeset found

Latest commit: ec02013

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for outlinejs ready!

Name	Link
🔨 Latest commit	ec02013
🔍 Latest deploy log	https://app.netlify.com/sites/outlinejs/deploys/64d66be9cdbcb00008be928d
😎 Deploy Preview	https://deploy-preview-414--outlinejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[himerus]

The following Is what updates the system to look for .mdx file inside any Outline component in the packages directory.

Due to the nature of some of the components, we should adopt a policy to utilize a docs folder PER component to make the glob for looking for the MDX files much easier.