update the content in the section Card by replacing icons, updating c…

…ard titles, changing button labels, removing the lens card, and modiffingthe beta badge to use the experimental label (#534) Signed-off-by: AbhishekReddy1127 <[email protected]> Co-authored-by: Sean Neumann <[email protected]>
opensearch-project · Mar 1, 2023 · ad015c6 · ad015c6
1 parent 6cc3b74
commit ad015c6
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 75 deletions.
diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js
@@ -18,15 +18,32 @@ import {
   OuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
+const cards = {
+  Dashboards: {
+    title: 'Dashboards',
+    iconType: 'dashboardApp',
+  },
+  Cloud: {
+    title: 'Visualize',
+    iconType: 'visualizeApp',
+  },
+  Logging: {
+    title: 'Discover',
+    iconType: 'discoverApp',
+  },
+  Search: {
+    title: 'Search',
+    iconType: 'search',
+  },
+};
 
-const cardNodes = icons.map(function (item, index) {
+const cardNodes = Object.keys(cards).map(function (item, index) {
   return (
     <OuiFlexItem key={index}>
       <OuiCard
-        icon={<OuiIcon size="xxl" type={`logo${item}`} />}
-        title={`Elastic ${item}`}
-        isDisabled={item === 'Kibana' ? true : false}
+        icon={<OuiIcon size="xxl" type={cards[item].iconType} />}
+        title={cards[item].title}
+        isDisabled={item === 'Search' ? true : false}
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => {}}
       />

diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js
@@ -18,45 +18,36 @@ import {
   OuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['dashboard', 'monitoring'];
-const badges = [null, 'Beta'];
+const cards = {
+  dashboard: {
+    title: 'Dashboards',
+    icon: 'dashboardApp',
+    betaBadgeLabel: null,
+    betaBadgeTooltipContent: undefined,
+  },
+  monitoring: {
+    title: 'Discover',
+    icon: 'discoverApp',
+    betaBadgeLabel: 'Experimental',
+    betaBadgeTooltipContent:
+      'This module is not GA. Please help us by reporting any bugs.',
+  },
+};
 
-const cardNodes = icons.map(function (item, index) {
+const cardNodes = Object.keys(cards).map(function (item, index) {
+  const { title, icon, betaBadgeLabel, betaBadgeTooltipContent } = cards[item];
   return (
     <OuiFlexItem key={index}>
       <OuiCard
-        icon={<OuiIcon size="xxl" type={`${item}App`} />}
-        title={`Kibana ${item}`}
+        icon={<OuiIcon size="xxl" type={icon} />}
+        title={title}
         description="Example of a card's description. Stick to one or two sentences."
-        betaBadgeLabel={badges[index]}
-        betaBadgeTooltipContent={
-          badges[index]
-            ? 'This module is not GA. Please help us by reporting any bugs.'
-            : undefined
-        }
+        betaBadgeLabel={betaBadgeLabel}
+        betaBadgeTooltipContent={betaBadgeTooltipContent}
         onClick={() => {}}
       />
     </OuiFlexItem>
   );
 });
 
-export default () => (
-  <OuiFlexGroup gutterSize="l">
-    {cardNodes}
-    <OuiFlexItem>
-      <OuiCard
-        icon={<OuiIcon size="xxl" type="lensApp" />}
-        title="Lens"
-        isDisabled
-        description="Disabled cards can have active links using OuiBetaBadge."
-        betaBadgeProps={{
-          href: 'http://www.elastic.co/subscriptions',
-          target: '_blank',
-        }}
-        betaBadgeLabel="Basic"
-        betaBadgeTooltipContent="This feature requires a Basic License"
-        onClick={() => {}}
-      />
-    </OuiFlexItem>
-  </OuiFlexGroup>
-);
+export default () => <OuiFlexGroup gutterSize="l">{cardNodes}</OuiFlexGroup>;
diff --git a/src-docs/src/views/card/card_children.js b/src-docs/src/views/card/card_children.js
@@ -84,15 +84,15 @@ export default () => {
       <OuiFlexItem>
         <OuiCard
           textAlign="left"
-          title="Just about anything"
+          title="Written content"
           description={
             <span>
               Just be sure not to add any <OuiCode>onClick</OuiCode> handler to
               the card if the children are also interactable.
             </span>
           }>
           <OuiCodeBlock language="html" paddingSize="s">
-            {'<yoda>Hello, young Skywalker</yoda>'}
+            {'<yoda>Hello, world!</yoda>'}
           </OuiCodeBlock>
         </OuiCard>
       </OuiFlexItem>

diff --git a/src-docs/src/views/card/card_display.js b/src-docs/src/views/card/card_display.js
@@ -15,7 +15,6 @@ import {
   OuiCard,
   OuiFlexGroup,
   OuiFlexItem,
-  OuiIcon,
   OuiSpacer,
 } from '../../../../src/components';
 
@@ -26,7 +25,6 @@ export default () => (
       <OuiFlexItem>
         <OuiCard
           layout="horizontal"
-          icon={<OuiIcon size="xl" type="logoLogging" />}
           onClick={() => {}}
           title="Plain"
           display="plain"
@@ -35,7 +33,6 @@ export default () => (
       </OuiFlexItem>
       <OuiFlexItem>
         <OuiCard
-          icon={<OuiIcon size="xl" type="logoLogging" />}
           title="Subdued"
           display="subdued"
           description="This one has a subdued background color."
@@ -45,11 +42,10 @@ export default () => (
       <OuiFlexItem>
         <OuiCard
           layout="horizontal"
-          icon={<OuiIcon size="xl" type="logoLogging" />}
           title="Transparent"
           display="transparent"
           description="This one doesn't have a background color anymore."
-          betaBadgeLabel="Beta"
+          betaBadgeLabel="experimental"
           betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs."
           onClick={() => {}}
         />

diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js
@@ -148,11 +148,11 @@ export const CardExample = {
         color: 'subdued',
       },
       snippet: `<OuiCard
-  layout="horizontal"
-  icon={icon}
-  title="title"
-  description="description"
-  onClick={handleClick}
+layout="horizontal"
+icon={icon}
+title="title"
+description="description"
+onClick={handleClick}
 />`,
     },
     {
@@ -193,11 +193,11 @@ export const CardExample = {
         color: 'subdued',
       },
       snippet: `<OuiCard
-  textAlign="left"
-  image="https://source.unsplash.com/400x200/?Nature"
-  title="title"
-  description="description"
-  onClick={handleClick}
+textAlign="left"
+image="https://source.unsplash.com/400x200/?Nature"
+title="title"
+description="description"
+onClick={handleClick}
 />`,
     },
     {
@@ -242,7 +242,7 @@ export const CardExample = {
 />`,
     },
     {
-      title: 'Beta badge',
+      title: 'Experimental badge',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -252,11 +252,12 @@ export const CardExample = {
       text: (
         <p>
           If the card links to or references a module that is not GA (beta, lab,
-          etc), you can add a <OuiCode>betaBadgeLabel</OuiCode> and{' '}
-          <OuiCode>betaBadgeTooltipContent</OuiCode> to the card and it will
-          properly create and position an <strong>OuiBetaBadge</strong>. If you
-          want to change the title of the tooltip, supply a{' '}
-          <OuiCode>betaBadgeTitle</OuiCode> prop.
+          etc), you can add a <OuiCode>ExperimentalBadgeLabel</OuiCode> and{' '}
+          <OuiCode>experimentalBadgeTooltipContent</OuiCode> to the card and it
+          will properly create and position an{' '}
+          <strong>OuiExperimentalBadge</strong>. If you want to change the title
+          of the tooltip, supply a <OuiCode>experimentalBadgeTitle</OuiCode>{' '}
+          prop.
         </p>
       ),
       props: { OuiCard },

diff --git a/src-docs/src/views/card/card_footer.js b/src-docs/src/views/card/card_footer.js
@@ -31,11 +31,13 @@ export default () => (
         description="Example of a short card description."
         footer={
           <div>
-            <OuiButton aria-label="Go to Developers Tools">Go for it</OuiButton>
+            <OuiButton aria-label="Go to Developers Tools">
+              Choice One
+            </OuiButton>
             <OuiSpacer size="xs" />
             <OuiText size="s">
               <p>
-                Or try <OuiLink href="http://google.com">this</OuiLink>
+                Choice <OuiLink href="https://opensearch.org">Two</OuiLink>
               </p>
             </OuiText>
           </div>
@@ -49,11 +51,11 @@ export default () => (
         description="Example of a longer card description. See how the footers stay lined up."
         footer={
           <div>
-            <OuiButton aria-label="Go to Dashboards">Go for it</OuiButton>
+            <OuiButton aria-label="Go to Dashboards">Choice One</OuiButton>
             <OuiSpacer size="xs" />
             <OuiText size="s">
               <p>
-                Or try <OuiLink href="http://google.com">this</OuiLink>
+                Choice <OuiLink href="https://opensearch.org">Two</OuiLink>
               </p>
             </OuiText>
           </div>
@@ -67,11 +69,11 @@ export default () => (
         description="Example of a short card description."
         footer={
           <div>
-            <OuiButton aria-label="Go to Save Objects">Go for it</OuiButton>
+            <OuiButton aria-label="Go to Save Objects">Choice One</OuiButton>
             <OuiSpacer size="xs" />
             <OuiText size="s">
               <p>
-                Or try <OuiLink href="http://google.com">this</OuiLink>
+                Choice <OuiLink href="https://opensearch.org">Two</OuiLink>
               </p>
             </OuiText>
           </div>

diff --git a/src-docs/src/views/card/card_image.js b/src-docs/src/views/card/card_image.js
@@ -22,7 +22,7 @@ import {
 const cardFooterContent = (
   <OuiFlexGroup justifyContent="flexEnd">
     <OuiFlexItem grow={false}>
-      <OuiButton>Go for it</OuiButton>
+      <OuiButton>View Details</OuiButton>
     </OuiFlexItem>
   </OuiFlexGroup>
 );
@@ -40,7 +40,7 @@ export default () => (
             />
           </div>
         }
-        title="Elastic in Nature"
+        title="Title"
         description="Example of a card's description. Stick to one or two sentences."
         footer={cardFooterContent}
       />
@@ -49,7 +49,7 @@ export default () => (
       <OuiCard
         textAlign="left"
         image="https://source.unsplash.com/400x200/?Water"
-        title="Elastic in Water"
+        title="Title"
         description="Example of a card's description. Stick to one or two sentences."
         footer={cardFooterContent}
       />
@@ -60,7 +60,7 @@ export default () => (
         href="https://elastic.github.io/eui/"
         image="https://source.unsplash.com/400x200/?City"
         icon={<OuiIcon size="xxl" type="logoBeats" />}
-        title={'Beats in the City'}
+        title={'Title'}
         description="This card has an href and should be a link."
       />
     </OuiFlexItem>

diff --git a/src-docs/src/views/card/card_layout.js b/src-docs/src/views/card/card_layout.js
@@ -23,18 +23,18 @@ export default () => (
     <OuiFlexItem>
       <OuiCard
         layout="horizontal"
-        icon={<OuiIcon size="xl" type={'logoBeats'} />}
-        title={'Elastic Beats'}
+        icon={<OuiIcon size="xl" type="dashboardApp" />}
+        title={'Dashboards'}
         description="This card adds uses an 'xl' size icon which works well in a horizontal layout."
         onClick={() => {}}
       />
     </OuiFlexItem>
     <OuiFlexItem>
       <OuiCard
         layout="horizontal"
-        icon={<OuiIcon size="l" type={'logoCloud'} />}
+        icon={<OuiIcon size="l" type="visualizeApp" />}
         titleSize="xs"
-        title={'Elastic Cloud'}
+        title={'Visualize'}
         description="This card uses an 'l' size icon but also shrinks the 'titleSize' to 'xs'."
         onClick={() => {}}
       />

diff --git a/src-docs/src/views/card/card_selectable.js b/src-docs/src/views/card/card_selectable.js
@@ -19,6 +19,8 @@ import {
   OuiFlexItem,
 } from '../../../../src/components';
 
+import logoFigma from '../../images/logo-figma.svg';
+
 export default () => {
   const [card1Selected, setCard1] = useState(true);
   const [card2Selected, setCard2] = useState(false);
@@ -79,8 +81,8 @@ export default () => {
       </OuiFlexItem>
       <OuiFlexItem>
         <OuiCard
-          icon={<OuiIcon size="xxl" type="logoAerospike" />}
-          title="Not Adobe"
+          icon={<OuiIcon size="xxl" type={logoFigma} />}
+          title="Figma"
           description="Example of a short card description."
           footer={
             <OuiButtonEmpty