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

himerus commented 1 year ago

Description

[x] Create stub for outline-core-image.
[x] Create stub for outline-core-card.
[x] Create stub for outline-core-icon.
[x] Create stub for outline-core-container.
[x] Create stub for outline-core-alert.
[x] Create stub for outline-core-form.
[x] Create stub for outline-core-text (styled text).
[x] Create stub for outline-core-accordion.
[x] Create stub for outline-core-youtube.
[x] Create stub for outline-core-breadcrumb.
[x] Create stub for outline-core-list
[x] 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[bot] commented 1 year ago

⚠️ No Changeset found

Latest commit: ec02013b03664e28fe65fb009e49bb88f7e0610d

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[bot] commented 1 year ago

Deploy Preview for outlinejs ready!

Name	Link
Latest commit	ec02013b03664e28fe65fb009e49bb88f7e0610d
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.

phase2 / outline