Issue #3300012: Switch Alert component to use yaml config file instead of settings.json

src/components/atoms/alert/alert.config.yml

+title: "Atoms/Alert"
+description:
+  component: "Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages."
+## Canvas height
+height: 150
+## Background Color settings
+color:
+  options:
+    Primary: primary
+    Secondary: secondary
+    Success: success
+    Danger: danger
+    warning: warning
+    Info: info
+    Light: light
+    Dark: dark
+  default: primary
+  description: Bootstrap class
+  table:
+    category: settings
+## Heading tag settings
+heading:
+  description: string
+  default: string
+  table:
+    category: fields
+## Content settings
+content:
+  description: string
+  default: string
+  table:
+    category: fields
+## Dismissable button settings
+dismissible:
+  description: boolean
+  default: true
+  table:
+    category: fields

src/components/atoms/alert/alert.settings.json

-{
-  "title": "Atoms/Alert",
-  "description": {
-    "component": "Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages."
-  },
-  "argTypes": {
-    "color": {
-      "types": {
-        "Primary": "primary",
-        "Secondary": "secondary",
-        "Success": "success",
-        "Danger": "danger",
-        "Warning": "warning",
-        "Info": "info",
-        "Light": "light",
-        "Dark": "dark"
-      },
-      "description": "Bootstrap class",
-      "table": {
-        "category": "Settings"
-      }
-    },
-    "heading": {
-      "description": "String",
-      "table": {
-        "category": "Fields"
-      }
-    },
-    "content": {
-      "description": "String",
-      "table": {
-        "category": "Fields"
-      }
-    },
-    "dismissible": {
-      "description": "Boolean",
-      "table": {
-        "category": "Fields"
-      }
-    }
-  },
-  "height": 150
-}
\ No newline at end of file

src/components/atoms/alert/alert.stories.js

 import alert from './alert.twig';
 import DrupalAttribute from 'drupal-attribute';
 import codeTwig from '!!raw-loader!./alert.twig';
-import alertSettings from './alert.settings.json';
+import config from "./alert.config.yml";
 import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
 
 export default {
-  title : alertSettings.title,
+  title : config.title,
   component: alert,
-  height: 200,
   parameters: {
+    options: { showPanel: false },
     docs: {
       container: DocsContainer,
       page: DocsPage,
       source: {code: codeTwig},
-      description: alertSettings.description,
-      iframeHeight: alertSettings.height
+      description: config.description,
+      iframeHeight: config.height
     },
   },
   argTypes: {
     color: {
       control: { type: "select" },
-      options: alertSettings.argTypes.color.types,
-      description: alertSettings.argTypes.color.description,
-      defaultValue: {summary: "primary"},
-      table: alertSettings.argTypes.color.table,
+      options: config.color.options,
+      description: config.color.description,
+      defaultValue: {summary: config.color.default},
+      table: config.color.table,
     },
     heading: {
       heading: { control: 'text' },
-      description: alertSettings.argTypes.heading.description,
-      defaultValue: {summary: "string"},
-      table: alertSettings.argTypes.heading.table,
+      description: config.heading.description,
+      defaultValue: {summary: config.heading.default},
+      table: config.heading.table,
     },
     content: {
       content: { control: 'text' },
-      description: alertSettings.argTypes.content.description,
-      defaultValue: {summary: "string"},
-      table: alertSettings.argTypes.content.table,
+      description: config.content.description,
+      defaultValue: {summary: config.content.default},
+      table: config.content.table,
     },
     dismissible: {
       control: { type: 'boolean' },
-      description: alertSettings.argTypes.dismissible.description,
-      defaultValue: {summary: true},
-      table: alertSettings.argTypes.dismissible.table,
+      description: config.dismissible.description,
+      defaultValue: {summary: config.dismissible.default},
+      table: config.dismissible.table,
     }
   }
 };