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 Signed-off-by: AbhishekReddy1127 <[email protected]>
opensearch-project · Feb 28, 2023 · b5cdc46 · b5cdc46
1 parent b945c86
commit b5cdc46
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