From 506120bb81cc87430854b49ea4942844fd6b2961 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 19 Jan 2021 14:23:11 +0200
Subject: [PATCH] Grafana-UI: Make Card story public (#30388)

* Grafana-ui: Enable customisable separator for metadata

* Grafana-ui: Make Card story public
---
 .../grafana-ui/src/components/Card/Card.mdx   | 19 +++++++++++++++++++
 ...Card.story.internal.tsx => Card.story.tsx} |  0
 .../grafana-ui/src/components/Card/Card.tsx   |  6 +++---
 3 files changed, 22 insertions(+), 3 deletions(-)
 rename packages/grafana-ui/src/components/Card/{Card.story.internal.tsx => Card.story.tsx} (100%)

diff --git a/packages/grafana-ui/src/components/Card/Card.mdx b/packages/grafana-ui/src/components/Card/Card.mdx
index 7c5622615ac..4594e8e1529 100644
--- a/packages/grafana-ui/src/components/Card/Card.mdx
+++ b/packages/grafana-ui/src/components/Card/Card.mdx
@@ -67,6 +67,25 @@ Metadata also accepts HTML elements, which could be links, for example. For elem
   </Card>
 </Preview>
 
+The separator for multiple metadata elements defaults to a vertical line `|`, but can be customised.
+
+```jsx
+<Card heading="Test dashboard">
+   <Card.Meta separator={'-'}>
+    Grafana
+    <a key='prom-link' href="https://ops-us-east4.grafana.net/api/prom">https://ops-us-east4.grafana.net/api/prom</a>
+    </Card.Meta>
+</Card>
+```
+
+<Preview>
+  <Card heading="Test dashboard">
+    <Card.Meta separator={'-'}>
+      Grafana
+      <a key='prom-link' href="https://ops-us-east4.grafana.net/api/prom">https://ops-us-east4.grafana.net/api/prom</a>
+    </Card.Meta>
+  </Card>
+</Preview>
 
 ### Tags
 Tags can be rendered inside the Card, by being wrapped in `Card.Tags` component. Note that this component does not provide any tag styling and that should be handled by the children. It is recommended to use it with Grafana-UI's `TagList` component.
diff --git a/packages/grafana-ui/src/components/Card/Card.story.internal.tsx b/packages/grafana-ui/src/components/Card/Card.story.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Card/Card.story.internal.tsx
rename to packages/grafana-ui/src/components/Card/Card.story.tsx
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index de7c2a4adb9..8bfffe33a7c 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -290,15 +290,15 @@ const Figure: FC<ChildProps & { align?: 'top' | 'center' }> = ({ children, style
 
 Figure.displayName = 'Figure';
 
-const Meta: FC<ChildProps> = memo(({ children, styles }) => {
+const Meta: FC<ChildProps & { separator?: string }> = memo(({ children, styles, separator = '|' }) => {
   let meta = children;
 
-  // Join meta data elements by '|'
+  // Join meta data elements by separator
   if (Array.isArray(children)) {
     meta = React.Children.toArray(children).reduce((prev, curr, i) => [
       prev,
       <span key={`separator_${i}`} className={styles?.separator}>
-        |
+        {separator}
       </span>,
       curr,
     ]);