Skip to content

Commit

Permalink
Showing 4 changed files with 31 additions and 35 deletions.
42 changes: 13 additions & 29 deletions src/components/ResourceLinks/ResourceLinks.js
Original file line number Diff line number Diff line change
@@ -3,9 +3,9 @@ import H2 from 'gatsby-theme-carbon/src/components/markdown/H2';
import H3 from 'gatsby-theme-carbon/src/components/markdown/H3';
import MiniCard from 'gatsby-theme-carbon/src/components/MiniCard/MiniCard';
import CardGroup from 'gatsby-theme-carbon/src/components/MiniCard/CardGroup';
import githubIcon from '../../images/icon/github-icon.svg';
// import githubIcon from '../../images/icon/github-icon.svg';
import reactIcon from '../../images/icon/react-icon.svg';
import sketchSymbol from '../../images/icon/sketch-symbol.svg';
// import sketchSymbol from '../../images/icon/sketch-symbol.svg';
import webComponentsIcon from '../../images/icon/web-components-icon.svg';
import components from '../../data/components.json';

@@ -23,40 +23,24 @@ import components from '../../data/components.json';
export const ResourceLinks = ({
type,
name,
designLink = '',
functionalLink = '',
// designLink = '',
// functionalLink = '',
multiComponent,
}) => {
const component = components[type][name];
const wikiURLBase =
'https://github.com/carbon-design-system/carbon-for-ibm-dotcom-website/wiki/';
const wikiName = name.replace(/ /g, '-');
const functionalSpecLink =
functionalLink || component.functionalLink || wikiURLBase + wikiName;
const designSpecLink = designLink || component.designLink;
// const component = components[type][name];
// const wikiURLBase =

'https://github.com/carbon-design-system/carbon-for-ibm-dotcom-website/wiki/';

// const wikiName = name.replace(/ /g, '-');
// const functionalSpecLink =
// functionalLink || component.functionalLink || wikiURLBase + wikiName;
// const designSpecLink = designLink || component.designLink;

return (
<>
{multiComponent ? <H3>Resources for {name}</H3> : <H2>Resources</H2>}
<CardGroup>
{designSpecLink && (
<MiniCard
linkProps={{ target: '_blank', rel: 'noopener' }}
title="Design specifications"
href={designSpecLink}
>
<img src={sketchSymbol} alt="Sketch" />
</MiniCard>
)}
{functionalSpecLink && (
<MiniCard
linkProps={{ target: '_blank', rel: 'noopener' }}
title="Functional specifications"
href={functionalSpecLink}
>
<img src={githubIcon} alt="GitHub" />
</MiniCard>
)}
{components[type][name].storybook.react && (
<MiniCard
linkProps={{ target: '_blank', rel: 'noopener' }}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/images/pattern/callout-quote/callout-quote.jpg
Binary file not shown.
24 changes: 18 additions & 6 deletions src/pages/components/callout-quote.mdx
Original file line number Diff line number Diff line change
@@ -15,24 +15,36 @@ import ResourceLinks from 'components/ResourceLinks';

<AnchorLinks>

<AnchorLink>Resources</AnchorLink>
<AnchorLink>Overview</AnchorLink>
<AnchorLink>Modifiers</AnchorLink>
<AnchorLink>Resources</AnchorLink>
<AnchorLink>Content guidance</AnchorLink>
<AnchorLink>Feedback</AnchorLink>

</AnchorLinks>

<ResourceLinks name="Callout quote" type="layout" />

## Overview

The Callout quote pattern uses high contrast colors to create a delightful pause in the narrative and create a powerful
impression on the user.
Callout quote enables a high impact moment in page content that highlights a key quote that reinforces the goals of the page. Callout quote is best used as a visual break (for example, between two [content sections](/components/content-section)) to vary the overall structure of the page and draw attention.

Callout quote can optionally include attribution information beneath the quote, as well as a link to relevant information.

![Default](../../images/pattern/callout-quote/callout-quote.jpg)
![Default](../../images/component/callout-quote/cq-overview.png)

<br />

## Modifiers

### Color schemes

Callout quote has additional color schemes to enable more flexibility in visual expression and variation. These include the default `regular` color scheme, as well as `layer`, `inverse`, `purple` , and `cyan`. When selecting a color scheme, keep in mind the adjacent colors from other components in the page layout.

### Quotation marks

Callout quote has additional options for the quotation marks that are displayed at the beginning and end of the quote.

<ResourceLinks name="Callout quote" type="layout" />

## Content guidance

| Element | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes |

0 comments on commit 64063f1

Please sign in to comment.