feedback

elastic · May 19, 2021 · 308edca · 308edca
1 parent b3dfaac
commit 308edca
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 3 deletions.
diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
@@ -41,5 +41,20 @@ export default () => (
         />
       </h3>
     </EuiTitle>
+    <EuiTitle size="xxs">
+      <h4>Clickable beta badges</h4>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiBetaBadge
+      label="Lens"
+      iconType="lensApp"
+      onClick={() => alert('Goes to Lens')}
+    />
+    &emsp;
+    <EuiBetaBadge
+      label="Basic"
+      href="http://www.elastic.co/subscriptions"
+      target="_blank"
+    />
   </div>
 );
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
@@ -23,10 +23,15 @@
   }
 
   &.euiBetaBadge--small {
-    @include fontSize($euiFontSize * .625)
+    @include fontSize($euiFontSize * .625);
     line-height: $euiSize + $euiSizeXS;
     padding: 0 $euiSizeM;
   }
+
+  &.euiBetaBadge-isClickable {
+    color: inherit;
+  }
+
 }
 
 // When it's just an icon, make it a circle
@@ -59,10 +64,18 @@
   $backgroundColor: tint($euiColorLightShade, 30%);
   background: $backgroundColor;
   color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+
+  &.euiBetaBadge-isClickable {
+    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+  }
 }
 
 .euiBetaBadge--accent {
   $backgroundColor: $euiColorAccentText;
   background: $backgroundColor;
   color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+
+  &.euiBetaBadge-isClickable {
+    color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
+  }
 }
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
@@ -168,6 +168,9 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
     {
       'euiBetaBadge--singleLetter': singleLetter,
     },
+    {
+      'euiBetaBadge-isClickable': onClick || href,
+    },
     colorToClassMap[color],
     sizeToClassMap[size],
     className

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCard betaBadgeProps renders href 1`] = `
+<div
+  class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+  <span
+    class="euiCard__betaBadgeWrapper"
+  >
+    <a
+      class="euiBetaBadge euiBetaBadge-isClickable euiBetaBadge--hollow euiCard__betaBadge"
+      href="http://www.elastic.co/"
+      id="generated-idBetaBadge"
+      rel=""
+    >
+      Link
+    </a>
+  </span>
+</div>
+`;
+
 exports[`EuiCard horizontal selectable 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--horizontal euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text"

diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
@@ -287,4 +287,19 @@ describe('EuiCard', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('betaBadgeProps renders href', () => {
+    const component = render(
+      <EuiCard
+        title="Card title"
+        description="Card description"
+        betaBadgeProps={{
+          href: 'http://www.elastic.co/',
+        }}
+        betaBadgeLabel="Link"
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
@@ -30,7 +30,7 @@ import { CommonProps, ExclusiveUnion, keysOf } from '../common';
 import { getSecureRelForTarget } from '../../services';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
-import { EuiBetaBadge } from '../badge/beta_badge';
+import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge';
 import { EuiIconProps } from '../icon';
 import {
   EuiCardSelect,
@@ -147,6 +147,10 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
      * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used
      */
     betaBadgeTitle?: string;
+    betaBadgeProps?: Omit<
+      EuiBetaBadgeProps,
+      'label' | 'tooltipContent' | 'title'
+    >;
     /**
      * Matches to the color property of EuiPanel. If defined, removes any border & shadow.
      * Leave as `undefined` to display as a default panel.
@@ -192,6 +196,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   betaBadgeLabel,
   betaBadgeTooltipContent,
   betaBadgeTitle,
+  betaBadgeProps,
   layout = 'vertical',
   selectable,
   display,
@@ -298,6 +303,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
           label={betaBadgeLabel}
           title={betaBadgeTitle}
           tooltipContent={betaBadgeTooltipContent}
+          {...betaBadgeProps}
           className="euiCard__betaBadge"
         />
       </span>

diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss
@@ -24,7 +24,11 @@
       #{$selector}__betaBadge {
         overflow: hidden;
         text-overflow: ellipsis;
-        background-color: $euiColorEmptyShade;
+
+        &.euiBetaBadge--hollow {
+          background-color: $euiColorEmptyShade;
+          color: inherit;
+        }
       }
     }
   }