Skip to content

Commit

Permalink
update the content in the section Card by replacing icons, updating c…
Browse files Browse the repository at this point in the history
…ard titles, changing button labels, removing the lens card, and modiffingthe beta badge to use the experimental label (#534) (#550)

(cherry picked from commit ad015c6)

Signed-off-by: AbhishekReddy1127 <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Sean Neumann <[email protected]>
  • Loading branch information
3 people authored Mar 2, 2023
1 parent 7ad56ac commit 0a78c0c
Show file tree
Hide file tree
Showing 9 changed files with 84 additions and 75 deletions.
27 changes: 22 additions & 5 deletions src-docs/src/views/card/card.js
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {}}
/>
Expand Down
53 changes: 22 additions & 31 deletions src-docs/src/views/card/card_beta.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
4 changes: 2 additions & 2 deletions src-docs/src/views/card/card_children.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 1 addition & 5 deletions src-docs/src/views/card/card_display.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
OuiCard,
OuiFlexGroup,
OuiFlexItem,
OuiIcon,
OuiSpacer,
} from '../../../../src/components';

Expand All @@ -26,7 +25,6 @@ export default () => (
<OuiFlexItem>
<OuiCard
layout="horizontal"
icon={<OuiIcon size="xl" type="logoLogging" />}
onClick={() => {}}
title="Plain"
display="plain"
Expand All @@ -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."
Expand All @@ -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={() => {}}
/>
Expand Down
33 changes: 17 additions & 16 deletions src-docs/src/views/card/card_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>`,
},
{
Expand Down Expand Up @@ -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}
/>`,
},
{
Expand Down Expand Up @@ -242,7 +242,7 @@ export const CardExample = {
/>`,
},
{
title: 'Beta badge',
title: 'Experimental badge',
source: [
{
type: GuideSectionTypes.JS,
Expand All @@ -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 },
Expand Down
14 changes: 8 additions & 6 deletions src-docs/src/views/card/card_footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src-docs/src/views/card/card_image.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
const cardFooterContent = (
<OuiFlexGroup justifyContent="flexEnd">
<OuiFlexItem grow={false}>
<OuiButton>Go for it</OuiButton>
<OuiButton>View Details</OuiButton>
</OuiFlexItem>
</OuiFlexGroup>
);
Expand All @@ -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}
/>
Expand All @@ -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}
/>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src-docs/src/views/card/card_layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {}}
/>
Expand Down
6 changes: 4 additions & 2 deletions src-docs/src/views/card/card_selectable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 0a78c0c

Please sign in to comment.