turned content into array

elastic · Oct 31, 2019 · acdedc3 · acdedc3
1 parent c467681
commit acdedc3
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 93 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,7 @@
 - Improved `EuiSwitch` a11y by aligning to aria roles ([#2491](https://github.com/elastic/eui/pull/2491))
 - Converted `EuiSwitch` to TypeScript ([#2491](https://github.com/elastic/eui/pull/2491))
 - Added an accessible label-less `EuiSwitch` variation ([#2491](https://github.com/elastic/eui/pull/2491))
-- Updated `EuiHeaderAlert` to add `badge` prop ([#2506](https://github.com/elastic/eui/pull/2506))
+- Added `badge` prop and new styles `EuiHeaderAlert` ([#2506](https://github.com/elastic/eui/pull/2506))
 
 **Bug fixes**
 

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -140,10 +140,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
-.guideDemo__alertsFlyout {
-  height: calc(100vh - 49px);
-}
-
 .dpTest__purpleCal {
   background: $euiColorVis3;
 }

diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js
@@ -117,7 +117,7 @@ export const HeaderExample = {
       demo: <HeaderLinks />,
     },
     {
-      title: 'Alerts',
+      title: 'Display header alerts',
       source: [
         {
           type: GuideSectionTypes.JS,

diff --git a/src-docs/src/views/header/header_updates.js b/src-docs/src/views/header/header_updates.js
@@ -26,6 +26,78 @@ export default class extends Component {
       isFlyoutVisible: false,
       showBadge: true,
     };
+
+    this.alerts = [
+      {
+        title: 'Control access to features',
+        text: 'Show or hide applications and features per space in Kibana.',
+        action: <EuiLink href="#">Learn about feature controls</EuiLink>,
+        date: '1 May 2019',
+        badge: <EuiBadge>7.1</EuiBadge>,
+      },
+      {
+        title: 'Kibana 7.0 is turning heads',
+        text:
+          'Simplified navigation, responsive dashboards, dark mode… pick your favorite.',
+        action: (
+          <EuiLink
+            target="_blank"
+            href="https://www.elastic.co/blog/kibana-7-0-0-released">
+            Read the blog <EuiIcon type="popout" size="s" />
+          </EuiLink>
+        ),
+        date: '10 April 2019',
+        badge: <EuiBadge color="hollow">7.0</EuiBadge>,
+      },
+      {
+        title: 'Enter dark mode',
+        text:
+          'Kibana now supports the easy-on-the-eyes theme across the entire UI.',
+        action: <EuiLink href="#">Go to Advanced Settings</EuiLink>,
+        date: '10 April 2019',
+        badge: <EuiBadge color="hollow">7.0</EuiBadge>,
+      },
+      {
+        title: 'Pixel-perfect Canvas is production ready',
+        text: 'Your creative space for visualizing data awaits.',
+        action: (
+          <EuiLink
+            target="_blank"
+            href="https://www.elastic.co/webinars/intro-to-canvas-a-new-way-to-tell-visual-stories-in-kibana">
+            Watch the webinar <EuiIcon type="popout" size="s" />
+          </EuiLink>
+        ),
+        date: '26 March 2019',
+        badge: <EuiBadge color="hollow">6.7</EuiBadge>,
+      },
+      {
+        title: '6.7 release notes',
+        text: 'Stay up-to-date on the latest and greatest features.',
+        action: (
+          <EuiLink
+            target="_blank"
+            href="https://www.elastic.co/guide/en/kibana/6.7/release-notes-6.7.0.html">
+            Check out the docs <EuiIcon type="popout" size="s" />
+          </EuiLink>
+        ),
+        date: '26 March 2019',
+        badge: <EuiBadge color="hollow">6.7</EuiBadge>,
+      },
+      {
+        title: 'Rollups made simple in Kibana',
+        text:
+          'Save space and preserve the integrity of your data directly in the UI.',
+        action: (
+          <EuiLink
+            target="_blank"
+            href="https://www.elastic.co/blog/how-to-create-manage-and-visualize-elasticsearch-rollup-data-in-kibana">
+            Read the blog <EuiIcon type="popout" size="s" />
+          </EuiLink>
+        ),
+        date: '10 January 2019',
+        badge: <EuiBadge color="hollow">6.5</EuiBadge>,
+      },
+    ];
   }
 
   closeFlyout = () => {
@@ -42,10 +114,10 @@ export default class extends Component {
   render() {
     const button = (
       <EuiHeaderSectionItemButton
-        aria-controls="keyPadMenu"
+        aria-controls="News feed"
         aria-expanded={this.state.isFlyoutVisible}
         aria-haspopup="true"
-        aria-label="Apps menu"
+        aria-label="News feed"
         onClick={this.showFlyout}>
         <EuiIcon type="email" size="m" />
 
@@ -58,90 +130,31 @@ export default class extends Component {
     );
 
     let flyout;
+    const flyoutStyle = {
+      top: '49px',
+      height: 'calc(100vh - 49px)',
+    };
     if (this.state.isFlyoutVisible) {
       flyout = (
         <EuiFlyout
           onClose={this.closeFlyout}
           size="s"
-          className="guideDemo__alertsFlyout"
           aria-labelledby="flyoutSmallTitle"
-          style={{ top: '49px' }}>
+          style={flyoutStyle}>
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="s">
               <h2 id="flyoutSmallTitle">What&apos;s new</h2>
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
-            <EuiHeaderAlert
-              title="Control access to features"
-              text="Show or hide applications and features per space in Kibana."
-              action={
-                <EuiLink href="/guides/feature-controls">
-                  Learn about feature controls
-                </EuiLink>
-              }
-              date="1 May 2019"
-              badge={<EuiBadge>7.1</EuiBadge>}
-            />
-            <EuiHeaderAlert
-              title="Kibana 7.0 is turning heads"
-              text="Simplified navigation, responsive dashboards, dark mode… pick your favorite."
-              action={
-                <EuiLink
-                  target="_blank"
-                  href="https://www.elastic.co/blog/kibana-7-0-0-released">
-                  Read the blog <EuiIcon type="popout" size="s" />
-                </EuiLink>
-              }
-              date="10 April 2019"
-              badge={<EuiBadge color="hollow">7.0</EuiBadge>}
-            />
-            <EuiHeaderAlert
-              title="Enter dark mode"
-              text="Kibana now supports the easy-on-the-eyes theme across the entire UI."
-              action={<EuiLink href="#">Go to Advanced Settings</EuiLink>}
-              date="10 April 2019"
-              badge={<EuiBadge color="hollow">7.0</EuiBadge>}
-            />
-            <EuiHeaderAlert
-              title="Pixel-perfect Canvas is production ready"
-              text="Your creative space for visualizing data awaits."
-              action={
-                <EuiLink
-                  target="_blank"
-                  href="https://www.elastic.co/webinars/intro-to-canvas-a-new-way-to-tell-visual-stories-in-kibana">
-                  Watch the webinar <EuiIcon type="popout" size="s" />
-                </EuiLink>
-              }
-              date="26 March 2019"
-              badge={<EuiBadge color="hollow">6.7</EuiBadge>}
-            />
-            <EuiHeaderAlert
-              title="6.7 release notes"
-              text="Stay up-to-date on the latest and greatest features."
-              action={
-                <EuiLink
-                  target="_blank"
-                  href="https://www.elastic.co/guide/en/kibana/6.7/release-notes-6.7.0.html">
-                  Check out the docs <EuiIcon type="popout" size="s" />
-                </EuiLink>
-              }
-              date="26 March 2019"
-              badge={<EuiBadge color="hollow">6.7</EuiBadge>}
-            />
-            <EuiHeaderAlert
-              title="Rollups made simple in Kibana"
-              text="Save space and preserve the integrity of your data directly in the UI."
-              action={
-                <EuiLink
-                  target="_blank"
-                  href="https://www.elastic.co/blog/how-to-create-manage-and-visualize-elasticsearch-rollup-data-in-kibana">
-                  Read the blog <EuiIcon type="popout" size="s" />
-                </EuiLink>
-              }
-              date="10 January 2019"
-              badge={<EuiBadge color="hollow">6.5</EuiBadge>}
-            />
+            {this.alerts.map(alert => (
+              <EuiHeaderAlert
+                title={alert.title}
+                action={alert.action}
+                date={alert.date}
+                badge={alert.badge}
+              />
+            ))}
           </EuiFlyoutBody>
           <EuiFlyoutFooter>
             <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">

diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap
@@ -18,9 +18,6 @@ exports[`EuiHeaderAlert is rendered 1`] = `
         date
       </div>
     </div>
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
-    />
   </div>
   <div
     class="euiHeaderAlert__title"
@@ -54,9 +51,6 @@ exports[`EuiHeaderAlert renders action 1`] = `
         date
       </div>
     </div>
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
-    />
   </div>
   <div
     class="euiHeaderAlert__title"
@@ -96,9 +90,6 @@ exports[`EuiHeaderAlert renders date as an element 1`] = `
         </h2>
       </div>
     </div>
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
-    />
   </div>
   <div
     class="euiHeaderAlert__title"
@@ -132,9 +123,6 @@ exports[`EuiHeaderAlert renders title as an element 1`] = `
         date
       </div>
     </div>
-    <div
-      class="euiFlexItem euiFlexItem--flexGrowZero"
-    />
   </div>
   <div
     class="euiHeaderAlert__title"

diff --git a/src/components/header/header_alert/header_alert.tsx b/src/components/header/header_alert/header_alert.tsx
@@ -31,7 +31,7 @@ export const EuiHeaderAlert: FunctionComponent<EuiHeaderAlertProps> = ({
         <EuiFlexItem>
           <div className="euiHeaderAlert__date">{date}</div>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>{badge}</EuiFlexItem>
+        {badge ? <EuiFlexItem grow={false}>{badge}</EuiFlexItem> : undefined}
       </EuiFlexGroup>
 
       <div className="euiHeaderAlert__title">{title}</div>