Add dense option for Card (#39)

Author: adamkudrna

src/demo/pages/DemoContainer.jsx

@@ -872,6 +872,23 @@ class DemoContainer extends React.Component {
                 </div>
               )}
             />
+            <Documentation
+              name="Dense raised card"
+              component={(
+                <div>
+                  <Card dense raised>
+                    <CardBody>
+                      <h4>Dense raised card</h4>
+                      <p>
+                        Dense card content <br />
+                        and the other one.
+                      </p>
+                      <Button clickHandler={loggerClick} label="Click" variant="secondary" block />
+                    </CardBody>
+                  </Card>
+                </div>
+              )}
+            />
             <Documentation
               name="Disabled card"
               component={(

src/lib/components/ui/Card/Card.jsx

@@ -5,6 +5,7 @@ import styles from './Card.scss';
 export const Card = (props) => {
   const {
     children,
+    dense,
     disabled,
     id,
     inList,
@@ -21,6 +22,11 @@ export const Card = (props) => {
     typeClass = styles.isTypeBordered;
   }
 
+  let denseClass = '';
+  if (dense) {
+    denseClass = styles.isDense;
+  }
+
   let disabledClass = '';
   if (disabled) {
     disabledClass = styles.isDisabled;
@@ -41,6 +47,7 @@ export const Card = (props) => {
       className={(`
         ${styles.root}
         ${typeClass}
+        ${denseClass}
         ${disabledClass}
         ${inListClass}
         ${raisedClass}
@@ -53,6 +60,7 @@ export const Card = (props) => {
 };
 
 Card.defaultProps = {
+  dense: false,
   disabled: false,
   id: undefined,
   inList: false,
@@ -65,6 +73,7 @@ Card.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]).isRequired,
+  dense: PropTypes.bool,
   disabled: PropTypes.bool,
   id: PropTypes.string,
   inList: PropTypes.bool,

src/lib/components/ui/Card/Card.scss

@@ -1,4 +1,5 @@
 @import 'mixins';
+@import 'theme';
 
 .root {
   display: flex;
@@ -46,3 +47,8 @@
 .isRaised {
   box-shadow: map-get($card-raised, box-shadow);
 }
+
+.isDense .body,
+.isDense .footer {
+  padding: $card-dense-padding;
+}

src/lib/components/ui/Card/_theme.scss

@@ -1,4 +1,5 @@
 $card-padding: var(--rui-card-padding);
+$card-dense-padding: var(--rui-card-dense-padding);
 $card-background-color: var(--rui-card-background-color);
 $card-border-width: var(--rui-card-border-width);
 $card-border-radius: var(--rui-card-border-radius);

src/lib/components/ui/Card/tests/Card.test.jsx

@@ -30,6 +30,7 @@ describe('rendering', () => {
   it('renders correctly with all props', () => {
     const tree = shallow(
       <Card
+        dense
         disabled
         id="custom-id"
         raised

src/lib/components/ui/Card/tests/__snapshots__/Card.test.jsx.snap

@@ -15,6 +15,7 @@ exports[`rendering renders correctly disabled 1`] = `
 <div
   className="root
         isTypeFlat
+        
         isDisabled"
 >
   <p>
@@ -40,6 +41,7 @@ exports[`rendering renders correctly raised 1`] = `
         isTypeFlat
         
         
+        
         isRaised"
 >
   <p>
@@ -52,6 +54,7 @@ exports[`rendering renders correctly with all props 1`] = `
 <div
   className="root
         isTypeWarning
+        isDense
         isDisabled
         
         isRaised"

src/lib/theme.scss

@@ -423,6 +423,7 @@
 
   // Cards: common properties
   --rui-card-padding: var(--rui-offset-4);
+  --rui-card-dense-padding: var(--rui-offset-2);
   --rui-card-border-width: var(--rui-border-width);
   --rui-card-border-radius: var(--rui-border-radius);
   --rui-card-background-color: var(--rui-color-white);