stackbit · JugglerX · Nov 15, 2021 · Nov 15, 2021 · Nov 15, 2021 · Nov 16, 2021
diff --git a/models/AlertSection.yaml b/models/AlertSection.yaml
@@ -0,0 +1,12 @@
+type: object
+name: AlertSection
+label: Alert Section
+labelField: title
+extends:
+  - Section
+groups:
+  - sectionComponent
+fields:
+  - type: text
+    name: body
+    default: 'Warning, this is an alert'
diff --git a/src/components-manifest.json b/src/components-manifest.json
@@ -4,6 +4,11 @@
         "modelName": null,
         "isDynamic": false
     },
+    "AlertSection": {
+        "path": "components/AlertSection",
+        "modelName": "AlertSection",
+        "isDynamic": true
+    },
     "CheckboxFormControl": {
         "path": "components/CheckboxFormControl",
         "modelName": "CheckboxFormControl",

diff --git a/src/components/AlertSection/alert-section.stories.tsx b/src/components/AlertSection/alert-section.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import AlertSection from './index';
+
+export default {
+    title: 'Components/AlertSection',
+    component: AlertSection,
+    argTypes: {
+        type: { table: { disable: true } },
+        elementId: {
+            defaultValue: ''
+        }
+    }
+};
+
+const Template = (args) => <AlertSection {...args} />;
+
+const args = {
+    type: 'AlertSection',
+    elementId: '',
+    body: 'Join our club'
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Standard Alert';
+Primary.args = args;
diff --git a/src/components/AlertSection/index.tsx b/src/components/AlertSection/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export default function AlertSection(props) {
+    const cssId = props.elementId || null;
+    return (
+        <div id={cssId} className={classNames('sb-component', 'sb-component-section', 'sb-component-alert-section')}>
+            <h1>Alert</h1>
+            <p data-sb-field-path=".body">{props.body}</p>
+        </div>
+    );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,4 +1,5 @@
 import Action from './Action';
+import AlertSection from './AlertSection';
 import CheckboxFormControl from './CheckboxFormControl';
 import ContactSection from './ContactSection';
 import CtaSection from './CtaSection';
@@ -25,6 +26,7 @@ import VideoBlock from './VideoBlock';
 
 export {
     Action,
+    AlertSection,
     CheckboxFormControl,
     ContactSection,
     CtaSection,