Docs: new setup for shared component content

Author: jffortier

packages/ui-extensions/src/docs/shared/components/Abbreviation.ts

@@ -0,0 +1,11 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Abbreviation',
+  description:
+    'A text that represents an abbreviation or acronym. Abbreviation has an inline layout. Surfaces may apply styling to this component.',
+  category: 'Polaris web components',
+  subCategory: 'Titles and text',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Banner.ts

@@ -0,0 +1,11 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Banner',
+  description:
+    'Use `s-banner` to communicate important status updates or indicate that there are important actions that users must take. \n\n You can use banners both as a standalone component on a page or inside of a `s-section`.',
+  category: 'Polaris web components',
+  subCategory: 'Feedback',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Box.ts

@@ -0,0 +1,11 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Box',
+  description:
+    'The `s-box` component is an escape hatch for building custom user interfaces. You should only use `s-box` when you cannot build what you need with the existing components.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Button.ts

@@ -0,0 +1,11 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Button',
+  description:
+    'Use `s-button` when you want to provide users the ability to perform specific actions, submitting forms, or opening dialogs.',
+  category: 'Polaris web components',
+  subCategory: 'Actions',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts

@@ -0,0 +1,16 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'ClipboardItem',
+  description: `
+  This component is used alongside a \`Button\` or \`Link\` component to facilitate writing to the user's clipboard.
+
+  ClipboardItem's \`--auto\` command is \`--copy\`, which copies the content of the text prop to the clipboard.
+
+  \`ClipboardItem\` is a non-rendering component.
+`,
+  category: 'Polaris web components',
+  subCategory: 'utilities',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/DropZone.ts

@@ -0,0 +1,12 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'DropZone',
+  description: `DropZone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, DropZone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains.
+    \n Any element focused within the Dropzone component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed.
+    `,
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Form.ts

@@ -0,0 +1,11 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Form',
+  description:
+    'The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible.\n\nUnlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript.',
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Heading.ts

@@ -0,0 +1,11 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Heading',
+  description:
+    'The `s-heading` component renders hierarchical titles similar to HTML’s `h1-h6` elements. Heading levels are automatically determined by parent `s-section` nesting depth starting from h2. Always prefer using the `heading` property on `s-section` and `s-banner` components before constructing custom layout with `s-heading`.',
+  category: 'Polaris web components',
+  subCategory: 'Titles and text',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Image.ts

@@ -0,0 +1,11 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Image',
+  description:
+    'Use `s-image` when you want to display an image. \n\n When using images or illustrations in your app, ensure that they add clarity and clearly direct users to the next step. Make sure to use high-resolution images to ensure a professional, high-quality experience.',
+  category: 'Polaris web components',
+  subCategory: 'Media',
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Link.ts

@@ -0,0 +1,11 @@
+import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Link',
+  description:
+    '`s-link` is an interactive component that directs users to a specified URL. It even supports custom protocols.',
+  category: 'Polaris web components',
+  subCategory: 'Actions',
+};
+
+export default data;