Merge pull request #152 from pantheon-systems/ag/clean-component-defs

Improve component definition readability
pantheon-systems · Dec 26, 2023 · 37205e0 · 37205e0
2 parents 29818d1 + 588f8a8
commit 37205e0
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 111 deletions.
diff --git a/packages/react-sample-library/src/components/Avatar/index.tsx b/packages/react-sample-library/src/components/Avatar/index.tsx
@@ -30,7 +30,7 @@ export const smartComponentDefinition = {
     image: {
       type: "file",
       required: false,
-      displayName: "Image",
+      displayName: "Image URL",
     },
     /**
      * Size of the avatar

diff --git a/packages/react-sample-library/src/components/Badge/Badge.stories.ts b/packages/react-sample-library/src/components/Badge/Badge.stories.ts
@@ -14,7 +14,6 @@ export default meta;
 export const Default: Story = {
   args: {
     label: "Info",
-    hasStatusType: true,
     statusType: "info",
   },
 };
diff --git a/packages/react-sample-library/src/components/Badge/index.tsx b/packages/react-sample-library/src/components/Badge/index.tsx
@@ -7,14 +7,13 @@ import { type InferSmartComponentProps } from "@pantheon-systems/pcc-sdk-core";
 export const reactComponent = ({
   statusType,
   label,
-  hasStatusType,
   className,
 }: InferSmartComponentProps<typeof smartComponentDefinition>) => {
   return (
     <BaseBadge
-      statusType={statusType}
       label={label}
-      hasStatusType={hasStatusType}
+      statusType={statusType}
+      hasStatusType={statusType != null}
       className={className}
     />
   );
@@ -24,13 +23,21 @@ export const smartComponentDefinition = {
   title: "Badge",
   iconUrl: null,
   fields: {
+    /**
+     * Text to display in the badge
+     */
+    label: {
+      displayName: "Label",
+      type: "string",
+      required: true,
+    },
     /**
      * Status type for badge. Only renders if `hasStatusType` is true.
      */
     statusType: {
       displayName: "Status Type",
       type: "enum",
-      required: true,
+      required: false,
       options: [
         {
           label: "Status",
@@ -62,22 +69,6 @@ export const smartComponentDefinition = {
         },
       ],
     },
-    /**
-     * Text to display in the badge
-     */
-    label: {
-      displayName: "Label",
-      type: "string",
-      required: true,
-    },
-    /**
-     * Should the badge be associated with a certain status type
-     */
-    hasStatusType: {
-      displayName: "Has status type",
-      type: "boolean",
-      required: false,
-    },
     className: {
       displayName: "Additional CSS classes",
       type: "string",

diff --git a/packages/react-sample-library/src/components/BannerNotification/index.tsx b/packages/react-sample-library/src/components/BannerNotification/index.tsx
@@ -22,6 +22,14 @@ export const smartComponentDefinition = {
   title: "Banner Notification",
   iconUrl: null,
   fields: {
+    /**
+     * The message to display
+     */
+    message: {
+      displayName: "Message",
+      type: "string",
+      required: true,
+    },
     /**
      * Banner style and Icon types
      */
@@ -44,14 +52,6 @@ export const smartComponentDefinition = {
         },
       ],
     },
-    /**
-     * The message to display
-     */
-    message: {
-      displayName: "Message",
-      type: "string",
-      required: true,
-    },
     className: {
       displayName: "Additional CSS classes",
       type: "string",

diff --git a/packages/react-sample-library/src/components/Blockquote/index.tsx b/packages/react-sample-library/src/components/Blockquote/index.tsx
@@ -26,25 +26,6 @@ export const smartComponentDefinition = {
   title: "Blockquote",
   iconUrl: null,
   fields: {
-    /**
-     * Set type to full width or inline blockquote
-     * @default full-width
-     */
-    type: {
-      displayName: "Type",
-      type: "enum",
-      required: false,
-      options: [
-        {
-          label: "Full width",
-          value: "full-width",
-        },
-        {
-          label: "Inline",
-          value: "inline",
-        },
-      ],
-    },
     /**
      * Quote text
      */
@@ -69,6 +50,25 @@ export const smartComponentDefinition = {
       type: "string",
       required: true,
     },
+    /**
+     * Set type to full width or inline blockquote
+     * @default full-width
+     */
+    type: {
+      displayName: "Type",
+      type: "enum",
+      required: false,
+      options: [
+        {
+          label: "Full width",
+          value: "full-width",
+        },
+        {
+          label: "Inline",
+          value: "inline",
+        },
+      ],
+    },
     className: {
       displayName: "Additional CSS classes",
       type: "string",

diff --git a/packages/react-sample-library/src/components/CTALink/index.tsx b/packages/react-sample-library/src/components/CTALink/index.tsx
@@ -23,6 +23,22 @@ export const smartComponentDefinition = {
   title: "CTA Link",
   iconUrl: null,
   fields: {
+    /**
+     * Link text
+     */
+    linkText: {
+      displayName: "Link text",
+      type: "string",
+      required: true,
+    },
+    /**
+     * Link location
+     */
+    href: {
+      displayName: "Link URL",
+      type: "string",
+      required: true,
+    },
     /**
      * Size of the CTA Link
      * @default md
@@ -42,22 +58,6 @@ export const smartComponentDefinition = {
         },
       ],
     },
-    /**
-     * Link location
-     */
-    href: {
-      displayName: "Href",
-      type: "string",
-      required: true,
-    },
-    /**
-     * Link text
-     */
-    linkText: {
-      displayName: "Link text",
-      type: "string",
-      required: true,
-    },
     className: {
       displayName: "Additional CSS classes",
       type: "string",

diff --git a/packages/react-sample-library/src/components/Card/index.tsx b/packages/react-sample-library/src/components/Card/index.tsx
@@ -77,7 +77,7 @@ export const smartComponentDefinition = {
      * Url for primary link
      */
     primaryLinkUrl: {
-      displayName: "Primary Link Url",
+      displayName: "Primary Link URL",
       type: "string",
       required: true,
     },
@@ -152,7 +152,7 @@ export const smartComponentDefinition = {
      * Url for secondary link
      */
     secondaryLinkUrl: {
-      displayName: "Secondary Link Url",
+      displayName: "Secondary Link URL",
       type: "string",
       required: false,
     },

diff --git a/packages/react-sample-library/src/components/InlineBannerNotification/index.tsx b/packages/react-sample-library/src/components/InlineBannerNotification/index.tsx
@@ -24,6 +24,14 @@ export const smartComponentDefinition = {
   title: "Inline Banner Notification",
   iconUrl: null,
   fields: {
+    /**
+     * Text for the title section
+     */
+    title: {
+      displayName: "Title",
+      type: "string",
+      required: true,
+    },
     /**
      * Banner style and Icon types
      */
@@ -50,19 +58,11 @@ export const smartComponentDefinition = {
         },
       ],
     },
-    /**
-     * Text for the title section
-     */
-    title: {
-      displayName: "Title",
-      type: "string",
-      required: true,
-    },
     /**
      * Text for the message section
      */
     text: {
-      displayName: "Text",
+      displayName: "Message Text",
       type: "string",
       required: false,
     },

diff --git a/packages/react-sample-library/src/components/SectionBannerNotification/index.tsx b/packages/react-sample-library/src/components/SectionBannerNotification/index.tsx
@@ -28,6 +28,22 @@ export const smartComponentDefinition = {
   title: "Section Banner Notification",
   iconUrl: null,
   fields: {
+    /**
+     * Message text.
+     */
+    message: {
+      displayName: "Message",
+      type: "string",
+      required: true,
+    },
+    /**
+     * Message id.
+     */
+    id: {
+      displayName: "Message ID",
+      type: "number",
+      required: true,
+    },
     /**
      * Message type.
      */
@@ -58,13 +74,10 @@ export const smartComponentDefinition = {
         },
       ],
     },
-    /**
-     * Message text.
-     */
-    message: {
-      displayName: "Message",
+    title: {
+      displayName: "Title",
       type: "string",
-      required: true,
+      required: false,
     },
     /**
      * Includes dismiss functionality.
@@ -74,19 +87,6 @@ export const smartComponentDefinition = {
       type: "boolean",
       required: false,
     },
-    /**
-     * Message id.
-     */
-    id: {
-      displayName: "Id",
-      type: "number",
-      required: true,
-    },
-    title: {
-      displayName: "Title",
-      type: "string",
-      required: false,
-    },
     className: {
       displayName: "Additional CSS classes",
       type: "string",

diff --git a/packages/react-sample-library/src/components/Tooltip/index.tsx b/packages/react-sample-library/src/components/Tooltip/index.tsx
@@ -26,6 +26,22 @@ export const smartComponentDefinition = {
   title: "Tooltip",
   iconUrl: null,
   fields: {
+    /**
+     * Text to display in tooltip
+     */
+    content: {
+      displayName: "Content",
+      type: "string",
+      required: true,
+    },
+    /**
+     * Text to use as the trigger instead of an icon. Leave blank to use the icon.
+     */
+    triggerText: {
+      displayName: "Trigger text",
+      type: "string",
+      required: false,
+    },
     /**
      * Icon to trigger tooltip
      * @default circleInfo
@@ -49,22 +65,6 @@ export const smartComponentDefinition = {
         },
       ],
     },
-    /**
-     * Text to display in tooltip
-     */
-    content: {
-      displayName: "Content",
-      type: "string",
-      required: true,
-    },
-    /**
-     * Text to use as the trigger instead of an icon. Leave blank to use the icon.
-     */
-    triggerText: {
-      displayName: "Trigger text",
-      type: "string",
-      required: false,
-    },
     /**
      * The accessible text for the trigger. Only necessary when the trigger is an icon.
      */