diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx index af22770d..b17254b0 100644 --- a/src/demo/pages/DemoContainer.jsx +++ b/src/demo/pages/DemoContainer.jsx @@ -14,7 +14,7 @@ import { Card, CardBody, CardFooter, - CardList, + Center, CTA, CTACenter, CTAEnd, @@ -23,7 +23,7 @@ import { ForgotPassword, FormLayout, FormLayoutCustomField, - LayoutCenter, + Grid, List, ListItem, Login, @@ -266,33 +266,17 @@ class DemoContainer extends React.Component {
-

Layout Components

-

Card List

-

- Card List can be used to render Cards in grid. -

- - - - - - - - )} - /> -

Centered Layout

+

Center

- Centered layout takes 100 % of viewport height. + The Center layout spreads over its parent and aligns the content to center, both + vertically and horizontally.

+
- +
)} />

CTA

@@ -807,6 +791,23 @@ class DemoContainer extends React.Component { )} /> +

Layout Components

+

Grid

+

+ Grid can be used eg. to render Cards in grid. +

+ + + + + + + + )} + />

List

Card

- You might want to use Cards along with Card List layout. + You might want to use Cards along with the Grid layout.

+

Flat card

@@ -1418,7 +1419,7 @@ class DemoContainer extends React.Component {
diff --git a/src/demo/pages/navigation.js b/src/demo/pages/navigation.js index 09db6e62..3c5c58be 100644 --- a/src/demo/pages/navigation.js +++ b/src/demo/pages/navigation.js @@ -24,12 +24,8 @@ export default [ { items: [ { - link: '#layout-components-card-list', - title: 'Card List', - }, - { - link: '#layout-components-centered-layout', - title: 'Centered Layout', + link: '#layout-components-center', + title: 'Center', }, { link: '#layout-components-cta', @@ -39,6 +35,10 @@ export default [ link: '#layout-components-form-layout', title: 'Form Layout', }, + { + link: '#layout-components-grid', + title: 'Grid', + }, { link: '#layout-components-list', title: 'List', diff --git a/src/lib/components/layout/CardList/_theme.scss b/src/lib/components/layout/CardList/_theme.scss deleted file mode 100644 index 3e278a51..00000000 --- a/src/lib/components/layout/CardList/_theme.scss +++ /dev/null @@ -1,3 +0,0 @@ -$card-list-card-min-width: var(--rui-card-list-card-min-width); -$card-list-card-max-width: var(--rui-card-list-card-max-width); -$card-list-grid-gap: var(--rui-card-list-grid-gap); diff --git a/src/lib/components/layout/CardList/index.js b/src/lib/components/layout/CardList/index.js deleted file mode 100644 index 813ef117..00000000 --- a/src/lib/components/layout/CardList/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CardList'; diff --git a/src/lib/components/layout/LayoutCenter/LayoutCenter.jsx b/src/lib/components/layout/Center/Center.jsx similarity index 56% rename from src/lib/components/layout/LayoutCenter/LayoutCenter.jsx rename to src/lib/components/layout/Center/Center.jsx index ff327c4f..baa6439f 100644 --- a/src/lib/components/layout/LayoutCenter/LayoutCenter.jsx +++ b/src/lib/components/layout/Center/Center.jsx @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styles from './LayoutCenter.scss'; +import styles from './Center.scss'; -const LayoutCenter = (props) => ( +export const Center = (props) => (
{props.children} @@ -10,12 +10,12 @@ const LayoutCenter = (props) => (
); -LayoutCenter.defaultProps = { +Center.defaultProps = { children: null, }; -LayoutCenter.propTypes = { +Center.propTypes = { children: PropTypes.node, }; -export default LayoutCenter; +export default Center; diff --git a/src/lib/components/layout/LayoutCenter/LayoutCenter.scss b/src/lib/components/layout/Center/Center.scss similarity index 83% rename from src/lib/components/layout/LayoutCenter/LayoutCenter.scss rename to src/lib/components/layout/Center/Center.scss index d59571ea..25f890be 100644 --- a/src/lib/components/layout/LayoutCenter/LayoutCenter.scss +++ b/src/lib/components/layout/Center/Center.scss @@ -4,5 +4,4 @@ justify-content: center; width: 100%; height: 100%; - min-height: 100vh; } diff --git a/src/lib/components/layout/LayoutCenter/__tests__/LayoutCenter.test.jsx b/src/lib/components/layout/Center/__tests__/Center.test.jsx similarity index 70% rename from src/lib/components/layout/LayoutCenter/__tests__/LayoutCenter.test.jsx rename to src/lib/components/layout/Center/__tests__/Center.test.jsx index 235bedd0..5172631f 100644 --- a/src/lib/components/layout/LayoutCenter/__tests__/LayoutCenter.test.jsx +++ b/src/lib/components/layout/Center/__tests__/Center.test.jsx @@ -1,17 +1,17 @@ import React from 'react'; import { shallow } from 'enzyme'; import { shallowToJson } from 'enzyme-to-json'; -import LayoutCenter from '..'; +import { Center } from '../Center'; describe('rendering', () => { it('renders correctly', () => { - const tree = shallow(); + const tree = shallow(
); expect(shallowToJson(tree)).toMatchSnapshot(); }); it('renders correctly with children', () => { - const tree = shallow(
test
); + const tree = shallow(
test
); expect(shallowToJson(tree)).toMatchSnapshot(); }); diff --git a/src/lib/components/layout/LayoutCenter/__tests__/__snapshots__/LayoutCenter.test.jsx.snap b/src/lib/components/layout/Center/__tests__/__snapshots__/Center.test.jsx.snap similarity index 100% rename from src/lib/components/layout/LayoutCenter/__tests__/__snapshots__/LayoutCenter.test.jsx.snap rename to src/lib/components/layout/Center/__tests__/__snapshots__/Center.test.jsx.snap diff --git a/src/lib/components/layout/Center/index.js b/src/lib/components/layout/Center/index.js new file mode 100644 index 00000000..be22068a --- /dev/null +++ b/src/lib/components/layout/Center/index.js @@ -0,0 +1 @@ +export { default } from './Center'; diff --git a/src/lib/components/layout/CardList/CardList.jsx b/src/lib/components/layout/Grid/Grid.jsx similarity index 72% rename from src/lib/components/layout/CardList/CardList.jsx rename to src/lib/components/layout/Grid/Grid.jsx index e46b8ebe..df57eba9 100644 --- a/src/lib/components/layout/CardList/CardList.jsx +++ b/src/lib/components/layout/Grid/Grid.jsx @@ -1,9 +1,9 @@ import flattenChildren from 'react-keyed-flatten-children'; import PropTypes from 'prop-types'; import React from 'react'; -import styles from './CardList.scss'; +import styles from './Grid.scss'; -const CardList = (props) => { +export const Grid = (props) => { const { children, id, @@ -25,22 +25,20 @@ const CardList = (props) => { return null; } - return React.cloneElement(child, { - inList: true, - }); + return React.cloneElement(child); })}
); }; -CardList.defaultProps = { +Grid.defaultProps = { children: null, id: undefined, }; -CardList.propTypes = { +Grid.propTypes = { children: PropTypes.node, id: PropTypes.string, }; -export default CardList; +export default Grid; diff --git a/src/lib/components/layout/CardList/CardList.scss b/src/lib/components/layout/Grid/Grid.scss similarity index 70% rename from src/lib/components/layout/CardList/CardList.scss rename to src/lib/components/layout/Grid/Grid.scss index 2463a9a3..65e22001 100644 --- a/src/lib/components/layout/CardList/CardList.scss +++ b/src/lib/components/layout/Grid/Grid.scss @@ -7,11 +7,11 @@ display: grid; grid-template-columns: 1fr; grid-template-rows: auto; - grid-gap: $card-list-grid-gap; + grid-gap: $grid-gap; margin-bottom: $layout-common-bottom-spacing; @include breakpoint-up(sm) { - grid-template-columns: repeat(auto-fit, minmax($card-list-card-min-width, $card-list-card-max-width)); + grid-template-columns: repeat(auto-fit, minmax($grid-item-min-width, $grid-item-max-width)); justify-content: start; } } diff --git a/src/lib/components/layout/CardList/__tests__/CardList.test.jsx b/src/lib/components/layout/Grid/__tests__/Grid.test.jsx similarity index 84% rename from src/lib/components/layout/CardList/__tests__/CardList.test.jsx rename to src/lib/components/layout/Grid/__tests__/Grid.test.jsx index 93d37c7e..a6a4ccd4 100644 --- a/src/lib/components/layout/CardList/__tests__/CardList.test.jsx +++ b/src/lib/components/layout/Grid/__tests__/Grid.test.jsx @@ -1,12 +1,12 @@ import React from 'react'; import { shallow } from 'enzyme'; import { Card } from '../../../ui/Card/Card'; -import CardList from '../CardList'; +import { Grid } from '../Grid'; describe('rendering', () => { it('renders correctly with no children', () => { const tree = shallow(( - + )); expect(tree).toMatchSnapshot(); @@ -14,9 +14,9 @@ describe('rendering', () => { it('renders correctly with a single child', () => { const tree = shallow(( - + content - + )); expect(tree).toMatchSnapshot(); @@ -24,11 +24,11 @@ describe('rendering', () => { it('renders correctly with multiple children', () => { const tree = shallow(( - + content 1 content 2 content 3 - + )); expect(tree).toMatchSnapshot(); diff --git a/src/lib/components/layout/CardList/__tests__/__snapshots__/CardList.test.jsx.snap b/src/lib/components/layout/Grid/__tests__/__snapshots__/Grid.test.jsx.snap similarity index 92% rename from src/lib/components/layout/CardList/__tests__/__snapshots__/CardList.test.jsx.snap rename to src/lib/components/layout/Grid/__tests__/__snapshots__/Grid.test.jsx.snap index 6246de32..5eb9e14e 100644 --- a/src/lib/components/layout/CardList/__tests__/__snapshots__/CardList.test.jsx.snap +++ b/src/lib/components/layout/Grid/__tests__/__snapshots__/Grid.test.jsx.snap @@ -7,7 +7,6 @@ exports[`rendering renders correctly with a single child 1`] = ` { dense, disabled, id, - inList, raised, type, variant, @@ -48,11 +47,6 @@ export const Card = (props) => { disabledClass = styles.isDisabled; } - let inListClass = ''; - if (inList) { - inListClass = styles.isInList; - } - let raisedClass = ''; if (raised) { raisedClass = styles.isRaised; @@ -66,7 +60,6 @@ export const Card = (props) => { ${variantClass} ${denseClass} ${disabledClass} - ${inListClass} ${raisedClass} `).trim()} id={id} @@ -80,7 +73,6 @@ Card.defaultProps = { dense: false, disabled: false, id: undefined, - inList: false, raised: false, type: null, variant: 'flat', @@ -91,7 +83,6 @@ Card.propTypes = { dense: PropTypes.bool, disabled: PropTypes.bool, id: PropTypes.string, - inList: PropTypes.bool, raised: PropTypes.bool, type: PropTypes.oneOf(['success', 'warning', 'error', 'help', 'info', 'note']), variant: PropTypes.oneOf(['flat', 'bordered']), diff --git a/src/lib/components/ui/Card/Card.scss b/src/lib/components/ui/Card/Card.scss index 0a46744f..653b5463 100644 --- a/src/lib/components/ui/Card/Card.scss +++ b/src/lib/components/ui/Card/Card.scss @@ -56,10 +56,6 @@ background-color: map-get($card-disabled, background-color); } -.isInList { - max-width: $card-in-list-max-width; -} - .isRaised { box-shadow: map-get($card-raised, box-shadow); } diff --git a/src/lib/components/ui/Card/_theme.scss b/src/lib/components/ui/Card/_theme.scss index 91286780..89a7f74f 100644 --- a/src/lib/components/ui/Card/_theme.scss +++ b/src/lib/components/ui/Card/_theme.scss @@ -39,8 +39,6 @@ $card-disabled: ( opacity: var(--rui-card-disabled-opacity), ); -$card-in-list-max-width: var(--rui-card-in-list-max-width); - $card-raised: ( box-shadow: var(--rui-card-raised-box-shadow), ); diff --git a/src/lib/components/ui/Card/tests/__snapshots__/Card.test.jsx.snap b/src/lib/components/ui/Card/tests/__snapshots__/Card.test.jsx.snap index 85724333..9de79c8e 100644 --- a/src/lib/components/ui/Card/tests/__snapshots__/Card.test.jsx.snap +++ b/src/lib/components/ui/Card/tests/__snapshots__/Card.test.jsx.snap @@ -45,7 +45,6 @@ exports[`rendering renders correctly raised 1`] = ` isVariantFlat - isRaised" >

@@ -61,7 +60,6 @@ exports[`rendering renders correctly with all props 1`] = ` isVariantBordered isDense isDisabled - isRaised" id="custom-id" > diff --git a/src/lib/index.js b/src/lib/index.js index b29c9713..09574c23 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,20 +1,30 @@ // Layout components -export { default as CardList } from './components/layout/CardList'; -export { default as LayoutCenter } from './components/layout/LayoutCenter'; -export { CTA } from './components/layout/CTA'; -export { CTACenter } from './components/layout/CTA'; -export { CTAEnd } from './components/layout/CTA'; -export { CTAStart } from './components/layout/CTA'; -export { FormLayout } from './components/layout/FormLayout'; -export { FormLayoutCustomField } from './components/layout/FormLayout'; -export { List } from './components/layout/List'; -export { ListItem } from './components/layout/List'; -export { Media } from './components/layout/Media'; -export { MediaBody } from './components/layout/Media'; -export { MediaObject } from './components/layout/Media'; -export { Toolbar } from './components/layout/Toolbar'; -export { ToolbarGroup } from './components/layout/Toolbar'; -export { ToolbarItem } from './components/layout/Toolbar'; +export { default as Center } from './components/layout/Center'; +export { + CTA, + CTACenter, + CTAEnd, + CTAStart, +} from './components/layout/CTA'; +export { + FormLayout, + FormLayoutCustomField, +} from './components/layout/FormLayout'; +export { default as Grid } from './components/layout/Grid'; +export { + List, + ListItem, +} from './components/layout/List'; +export { + Media, + MediaBody, + MediaObject, +} from './components/layout/Media'; +export { + Toolbar, + ToolbarGroup, + ToolbarItem, +} from './components/layout/Toolbar'; // Screens export { default as ForgotPassword } from './components/screens/Login/ForgotPassword'; @@ -26,9 +36,11 @@ export { default as Alert } from './components/ui/Alert'; export { default as Badge } from './components/ui/Badge'; export { default as Button } from './components/ui/Button'; export { default as ButtonGroup } from './components/ui/ButtonGroup'; -export { Card } from './components/ui/Card'; -export { CardBody } from './components/ui/Card'; -export { CardFooter } from './components/ui/Card'; +export { + Card, + CardBody, + CardFooter, +} from './components/ui/Card'; export { default as CheckboxField } from './components/ui/CheckboxField'; export { default as Modal } from './components/ui/Modal'; export { default as MultipleSelectField } from './components/ui/MultipleSelectField'; diff --git a/src/lib/theme.scss b/src/lib/theme.scss index 92d6bde3..3db59e9c 100644 --- a/src/lib/theme.scss +++ b/src/lib/theme.scss @@ -413,14 +413,6 @@ --rui-button-large-padding-x: var(--rui-spacing-5); --rui-button-large-font-size: var(--rui-typography-size-1); - // - // Card List - // ========= - - --rui-card-list-card-min-width: 300px; - --rui-card-list-card-max-width: auto; - --rui-card-list-grid-gap: var(--rui-spacing-4); - // // Cards // ===== @@ -447,9 +439,6 @@ // Cards: raised --rui-card-raised-box-shadow: 0 0.01rem 0.65rem -0.1rem #{rgba(0, 0, 0, 0.3)}; - // Cards: in Card List - --rui-card-in-list-max-width: 400px; - // Cards: disabled --rui-card-disabled-background-color: var(--rui-color-gray-50); --rui-card-disabled-opacity: 0.6; @@ -545,6 +534,14 @@ --rui-form-layout-horizontal-label-limited-width-fallback: 10em; --rui-form-layout-horizontal-label-default-width: 10em; + // + // Grid + // ==== + + --rui-grid-item-min-width: 300px; + --rui-grid-item-max-width: auto; + --rui-grid-gap: var(--rui-spacing-4); + // // Modal // =====