-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of github.com:carbon-design-system/gatsby-theme…
…-carbon into homepage-updates
- Loading branch information
Showing
17 changed files
with
422 additions
and
285 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| --- | ||
| title: Aside | ||
| --- | ||
|
|
||
| import { Row, Column, Aside } from 'gatsby-theme-carbon'; | ||
|
|
||
| ## Aside | ||
|
|
||
| <Row> | ||
| <Column colMd={5} colLg={7} className="bx--type-expressive-heading-03"> | ||
|
|
||
| <p className="bx--type-expressive-heading-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in pulvinar ipsum. Etiam sit amet nibh ultricies, pretium quam vitae, auctor nunc. Curabitur hendrerit lectus eros, eget imperdiet ante interdum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis nisi dictum sapien euismod facilisis. Donec in nisl urna. Sed pellentesque ex dui, vitae egestas ante laoreet id. Ut eros odio, cursus vitae finibus vel, laoreet vel quam.</p> | ||
|
|
||
| > Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in pulvinar ipsum. Etiam sit amet nibh ultricies, pretium quam vitae, auctor nunc. | ||
|
|
||
| <p className="bx--type-expressive-heading-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in pulvinar ipsum. Etiam sit amet nibh ultricies, pretium quam vitae, auctor nunc. Curabitur hendrerit lectus eros, eget imperdiet ante interdum non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis nisi dictum sapien euismod facilisis. Donec in nisl urna. Sed pellentesque ex dui, vitae egestas ante laoreet id. Ut eros odio, cursus vitae finibus vel, laoreet vel quam.</p> | ||
|
|
||
| </Column> | ||
| <Column colSm={0} colMd={2} colLg={3} offsetMd={1} noGutterSm> | ||
| <Aside> | ||
|
|
||
| **Good design is always good design.** | ||
|
|
||
| What we borrow from our own design history is not a mid-century aesthetic in stylistic terms, but the modernist attitudes and approach used at the time. | ||
|
|
||
| Eliot Noyes taught us brand is character, and should be built through curation. Paul Rand taught us the importance of endless experimentation. Charles and Ray Eames brought out our playful nature, and were pioneering what is now referred to as “branded content” and “experiential.” | ||
|
|
||
| Their methods are as modern today as ever before, maybe more so. | ||
|
|
||
| </Aside> | ||
|
|
||
| </Column> | ||
| </Row> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
packages/gatsby-theme-carbon/src/components/Aside/Aside.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classnames from 'classnames'; | ||
| import { settings } from 'carbon-components'; | ||
|
|
||
| const { prefix } = settings; | ||
|
|
||
| export default class Aside extends React.Component { | ||
| static propTypes = { | ||
| children: PropTypes.node, | ||
|
|
||
| /** | ||
| * Specify a custom class | ||
| */ | ||
| className: PropTypes.string, | ||
| }; | ||
|
|
||
| render() { | ||
| const { children, className } = this.props; | ||
|
|
||
| const captionClasses = classnames([`${prefix}--aside`], { | ||
| [className]: className, | ||
| }); | ||
|
|
||
| return <aside className={captionClasses}>{children}</aside>; | ||
| } | ||
| } |
20 changes: 20 additions & 0 deletions
20
packages/gatsby-theme-carbon/src/components/Aside/aside.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .#{$prefix}--aside { | ||
| @include carbon--type-style('body-long-01'); | ||
| position: relative; | ||
| padding-top: $spacing-04; | ||
| } | ||
|
|
||
| .#{$prefix}--aside:before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: -1rem; | ||
| width: 75%; | ||
| height: 1px; | ||
| background: $ui-05; | ||
| } | ||
|
|
||
| .#{$prefix}--aside .#{$prefix}--paragraph { | ||
| @include carbon--type-style('body-long-01'); | ||
| width: 75%; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import Aside from './Aside'; | ||
|
|
||
| export default Aside; |
47 changes: 29 additions & 18 deletions
47
packages/gatsby-theme-carbon/src/components/markdown/P.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,33 @@ | ||
| import React from 'react'; | ||
| import responsiveStyles from '../shared/responsiveStyles'; | ||
| import PropTypes from 'prop-types'; | ||
| import classnames from 'classnames'; | ||
| import { settings } from 'carbon-components'; | ||
|
|
||
| const pCss = ({ typeStyles, layout }) => [ | ||
| typeStyles.bodyLong02, | ||
| responsiveStyles, | ||
| { | ||
| marginBottom: layout[1], | ||
| '& :empty': { | ||
| padding: 0, | ||
| margin: 0, | ||
| }, | ||
| }, | ||
| ]; | ||
| const { prefix } = settings; | ||
|
|
||
| const P = ({ children }) => ( | ||
| <p css={pCss} className="carbon--mdx__p"> | ||
| {children} | ||
| </p> | ||
| ); | ||
| export default class P extends React.Component { | ||
| static propTypes = { | ||
| children: PropTypes.node, | ||
|
|
||
| export default P; | ||
| /** | ||
| * Set to full width | ||
| */ | ||
| fullWidth: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Specify a custom class | ||
| */ | ||
| className: PropTypes.string, | ||
| }; | ||
|
|
||
| render() { | ||
| const { children, className, fullWidth } = this.props; | ||
|
|
||
| const paragraphClasses = classnames([`${prefix}--paragraph`], { | ||
| [className]: className, | ||
| [`${prefix}--paragraph--responsive`]: !fullWidth, | ||
| }); | ||
|
|
||
| return <p className={paragraphClasses}>{children}</p>; | ||
| } | ||
| } |
Oops, something went wrong.