forked from patternfly/patternfly-react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react-core/card): added Card Components
affects: @patternfly/react-core, @patternfly/react-docs Added Card, CardHeader, CardBody, and CardFooter components ISSUES CLOSED: patternfly#386
- Loading branch information
1 parent
a6224ff
commit c43e41b
Showing
43 changed files
with
633 additions
and
143 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,45 @@ | ||
| /* eslint-disable no-case-declarations */ | ||
| const { copySync, readFileSync, writeFileSync } = require('fs-extra'); | ||
| const { resolve, dirname, join } = require('path'); | ||
| const { parse: parseCSS, stringify: stringifyCSS } = require('css'); | ||
|
|
||
| const baseCSSFilename = 'patternfly-base.css'; | ||
| const stylesDir = resolve(__dirname, '../dist/styles'); | ||
| const pfDir = dirname( | ||
| require.resolve('@patternfly/patternfly-next/patternfly.css') | ||
| require.resolve(`@patternfly/patternfly-next/${baseCSSFilename}`) | ||
| ); | ||
|
|
||
| copySync(join(pfDir, 'assets/'), stylesDir); | ||
| const css = readFileSync(join(pfDir, 'patternfly.css'), 'utf8').replace( | ||
| /\/assets\//gi, | ||
| './' | ||
| ); | ||
| writeFileSync(join(stylesDir, 'patternfly.css'), css); | ||
| const css = readFileSync(join(pfDir, baseCSSFilename), 'utf8'); | ||
| const ast = parseCSS(css); | ||
|
|
||
| const unusedSelectorRegEx = /(\.fas?|\.sr-only)/; | ||
| const unusedKeyFramesRegEx = /fa-/; | ||
| const unusedFontFamilyRegEx = /Font Awesome 5 Free/; | ||
| const ununsedFontFilesRegExt = /(fa-|\.html$|\.css$)/; | ||
|
|
||
| // Core provides font awesome fonts and utlities. React does not use these | ||
| ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => { | ||
| switch (rule.type) { | ||
| case 'rule': | ||
| return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel)); | ||
| case 'keyframes': | ||
| return !unusedKeyFramesRegEx.test(rule.name); | ||
| case 'charset': | ||
| case 'comment': | ||
| return false; | ||
| case 'font-face': | ||
| const fontFamilyDecl = rule.declarations.find( | ||
| decl => decl.property === 'font-family' | ||
| ); | ||
| return !unusedFontFamilyRegEx.test(fontFamilyDecl.value); | ||
| default: | ||
| return true; | ||
| } | ||
| }); | ||
|
|
||
| copySync(join(pfDir, 'assets/fonts'), join(stylesDir, 'assets/fonts'), { | ||
| filter(src) { | ||
| return !ununsedFontFilesRegExt.test(src); | ||
| } | ||
| }); | ||
| writeFileSync(join(stylesDir, 'base.css'), stringifyCSS(ast)); |
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,9 @@ | ||
| import { SFC, HTMLProps, ReactType } from 'react'; | ||
|
|
||
| export interface CardProps extends HTMLProps<HTMLDivElement> { | ||
| component?: ReactType<CardProps>; | ||
| } | ||
|
|
||
| declare const Card: SFC<CardProps>; | ||
|
|
||
| export default Card; |
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,28 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { css } from '@patternfly/react-styles'; | ||
| import styles from '@patternfly/patternfly-next/components/Card/styles.css'; | ||
| import { componentShape } from '../../internal/componentShape'; | ||
|
|
||
| const propTypes = { | ||
| children: PropTypes.any, | ||
| className: PropTypes.string, | ||
| component: componentShape | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| children: null, | ||
| className: '', | ||
| component: 'article' | ||
| }; | ||
|
|
||
| const Card = ({ children, className, component: Component, ...props }) => ( | ||
| <Component className={css(styles.card, className)} {...props}> | ||
| {children} | ||
| </Component> | ||
| ); | ||
|
|
||
| Card.propTypes = propTypes; | ||
| Card.defaultProps = defaultProps; | ||
|
|
||
| export default Card; |
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,31 @@ | ||
| import React from 'react'; | ||
| import Card from './Card'; | ||
| import { shallow } from 'enzyme'; | ||
|
|
||
| test('renders with PatternFly Core styles', () => { | ||
| const view = shallow(<Card />); | ||
| expect(view).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('className is added to the root element', () => { | ||
| const view = shallow(<Card className="extra-class" />); | ||
| expect(view.prop('className')).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('extra props are spread to the root element', () => { | ||
| const testId = 'card'; | ||
| const view = shallow(<Card data-testid={testId} />); | ||
| expect(view.prop('data-testid')).toBe(testId); | ||
| }); | ||
|
|
||
| test('allows passing in a string as the component', () => { | ||
| const component = 'section'; | ||
| const view = shallow(<Card component={component} />); | ||
| expect(view.type()).toBe(component); | ||
| }); | ||
|
|
||
| test('allows passing in a React Component as the component', () => { | ||
| const Component = () => null; | ||
| const view = shallow(<Card component={Component} />); | ||
| expect(view.type()).toBe(Component); | ||
| }); |
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,9 @@ | ||
| import { SFC, HTMLProps, ReactType } from 'react'; | ||
|
|
||
| export interface CardBodyProps extends HTMLProps<HTMLDivElement> { | ||
| component?: ReactType<CardBodyProps>; | ||
| } | ||
|
|
||
| declare const CardBody: SFC<CardBodyProps>; | ||
|
|
||
| export default CardBody; |
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,28 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { css } from '@patternfly/react-styles'; | ||
| import styles from '@patternfly/patternfly-next/components/Card/styles.css'; | ||
| import { componentShape } from '../../internal/componentShape'; | ||
|
|
||
| const propTypes = { | ||
| children: PropTypes.any, | ||
| className: PropTypes.string, | ||
| component: componentShape | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| children: null, | ||
| className: '', | ||
| component: 'div' | ||
| }; | ||
|
|
||
| const CardBody = ({ children, className, component: Component, ...props }) => ( | ||
| <Component className={css(styles.cardBody, className)} {...props}> | ||
| {children} | ||
| </Component> | ||
| ); | ||
|
|
||
| CardBody.propTypes = propTypes; | ||
| CardBody.defaultProps = defaultProps; | ||
|
|
||
| export default CardBody; |
Oops, something went wrong.