Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OUI Docs] Updated the section Card #530

Closed
wants to merge 2 commits into from
Closed

[OUI Docs] Updated the section Card #530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ce167f
Updated the section Card
AbhishekReddy1127 Feb 28, 2023
05c9973
Merge branch 'main' into OUI_Docs_Card
seanneumann Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src-docs/src/images/figma.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 21 additions & 4 deletions src-docs/src/views/card/card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,31 @@ import {
OuiFlexItem,
} from '../../../../src/components';

const icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
const cards = {
Beats: {
title: 'Dashboards',
iconType: 'dashboardApp',
},
Cloud: {
title: 'Visualize',
iconType: 'visualizeApp',
},
Logging: {
title: 'Discover',
iconType: 'discoverApp',
},
Kibana: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels like some of these var names should be updated to not be so Elastic. Beats and Kibana should def be changed. Maybe update them to something similar to the title?

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}`}
icon={<OuiIcon size="xxl" type={cards[item].iconType} />}
title={cards[item].title}
isDisabled={item === 'Kibana' ? true : false}
description="Example of a card's description. Stick to one or two sentences."
onClick={() => {}}
Expand Down
41 changes: 16 additions & 25 deletions src-docs/src/views/card/card_beta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,25 @@ import {
OuiFlexItem,
} from '../../../../src/components';

const icons = ['dashboard', 'monitoring'];
const badges = [null, 'Beta'];
const badges = [null, 'Experimental'];

const cardNodes = icons.map(function (item, index) {
const cards = {
dashboard: {
title: 'Dashboards',
icon: 'dashboardApp',
},
monitoring: {
title: 'Discover',
icon: 'discoverApp',
},
};
Comment on lines +21 to +32
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could badges be added as another field in the cards object?


const cardNodes = Object.keys(cards).map(function (item, index) {
return (
<OuiFlexItem key={index}>
<OuiCard
icon={<OuiIcon size="xxl" type={`${item}App`} />}
title={`Kibana ${item}`}
icon={<OuiIcon size="xxl" type={cards[item].icon} />}
title={cards[item].title}
description="Example of a card's description. Stick to one or two sentences."
betaBadgeLabel={badges[index]}
betaBadgeTooltipContent={
Expand All @@ -40,23 +50,4 @@ const cardNodes = icons.map(function (item, index) {
);
});

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
View file
Open in desktop
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
View file
Open in desktop
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
13 changes: 7 additions & 6 deletions src-docs/src/views/card/card_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
OuiFlexItem,
} from '../../../../src/components';

import figmaSvg from '../../images/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={figmaSvg} />}
title="Figma"
description="Example of a short card description."
footer={
<OuiButtonEmpty
Expand Down