Skip to content

Commit

Permalink
Merge pull request #2805 from salesforce-ux/winter-to-spring-merge
Browse files Browse the repository at this point in the history
Winter to spring merge
  • Loading branch information
brandonferrua authored Oct 3, 2017
2 parents d951326 + 6407c01 commit 92933ad
Show file tree
Hide file tree
Showing 22 changed files with 355 additions and 76 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"cssstats": "3.0.0",
"data.either": "1.5.0",
"del": "2.2.2",
"enzyme": "2.9.1",
"eslint": "3.19.0",
"eslint-config-prettier": "2.3.0",
"eslint-config-standard": "10.2.0",
Expand Down
22 changes: 22 additions & 0 deletions shared/components/Blockquote.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

import React from 'react';
import classNames from 'classnames';

class Blockquote extends React.Component {
render() {
const { type = 'note' } = this.props;
return (
// types include: note (default), ally, warning
<blockquote className={`doc site-blockquote_${type}`}>
{this.props.header ? (
<p className="doc lead">{this.props.header}</p>
) : null}
<p className="doc">{this.props.children}</p>
</blockquote>
);
}
}

export default Blockquote;
25 changes: 25 additions & 0 deletions shared/components/__tests__/blockquote.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import { shallow } from 'enzyme';
import Blockquote from '../Blockquote';

describe('Blockquote', () => {
it('Renders the note blockquote', () => {
const wrapper = shallow(<Blockquote />);
expect(wrapper.find('.site-blockquote_note').length).toEqual(1);
});

it('Renders the a11y blockquote', () => {
const wrapper = shallow(<Blockquote type="ally" />);
expect(wrapper.find('.site-blockquote_ally').length).toEqual(1);
});

it('Renders the warning blockquote', () => {
const wrapper = shallow(<Blockquote type="warning" />);
expect(wrapper.find('.site-blockquote_warning').length).toEqual(1);
});

it('Renders a header in the blockquote', () => {
const wrapper = shallow(<Blockquote header="Some header text goes here" />);
expect(wrapper.find('.lead').length).toEqual(1);
});
});
40 changes: 35 additions & 5 deletions shared/styles/doc.scss
Original file line number Diff line number Diff line change
Expand Up @@ -66,21 +66,51 @@ p.doc {
}

blockquote.doc {
background-color: #f7f7f7;
color: #5876a3;
background-color: #fafaf9;
font-size: 1.125rem;
font-weight: 300;
padding: 1rem;
border-left: 2px solid #5876a3;
margin: 1.5rem 0;
border: 1px solid #f2f2f2;
margin: 1.5rem;
border-left-width: 0.125rem;

.lead {
margin-bottom: 0;
font-weight: 400;
}
}

blockquote.doc p:only-child,
blockquote.doc p:last-child {
margin-bottom: 0;
}

// this is the default blockquote color
.site-blockquote_note.doc {
border-left-color: #00396b;

.lead {
color: #00396b;
}
}

.site-blockquote_ally.doc {
border-left-color: #0070d2;

.lead {
color: #0070d2;
}
}

.site-blockquote_warning.doc {
border-left-color: #ffb75d;

// the following text color is different to meet the a11y ratio
.lead {
color: #d47500;
}
}

ul.doc,
ol.doc {
margin: 0 0 1.5rem 3rem;
Expand All @@ -107,7 +137,7 @@ th.doc {

thead.doc th.doc,
thead.doc td.doc {
padding: 0.5rem 0.5rem;
padding: 0.5rem;
}

tr.doc td.doc,
Expand Down
12 changes: 7 additions & 5 deletions ui/components/cards/base/_blame.scss
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,18 @@
margin-left: 0;
margin-right: 0;
}
}
// Restore cards inside .slds-tabs_card as needed
.slds-tabs_card,
.slds-tabs_card.slds-tabs_card,
.slds-card-wrapper {

// Restore cards inside .slds-tabs_card when needed
.slds-card_boundary {
border: $border-width-thin solid $card-color-border;
border-radius: $border-radius-medium;

.slds-card__header {
padding-left: $card-header-padding;
padding-right: $card-header-padding;
padding: $card-header-padding;
}

.slds-card__body_inner,
Expand All @@ -97,8 +100,7 @@
}

.slds-card__footer {
padding-left: $card-footer-padding;
padding-right: $card-footer-padding;
padding: $card-footer-padding;
}
}
}
163 changes: 145 additions & 18 deletions ui/components/cards/base/example.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,32 +283,159 @@ export let examples = [
</Card>
)
},
{
id: 'nested-cards',
label: 'Nested cards',
element: (
<Card>
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Outer Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<Card>
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card` to show how styling is
removed when cards are nested inside each other.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
<Card>
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card` to show how styling is
removed when cards are nested inside each other.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
<Card className="slds-card_boundary">
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card` to illustrate how
`.slds-card_boundary` adds a rounded border when desired.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
<Card className="slds-card_boundary">
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card` to illustrate how
`.slds-card_boundary` adds a rounded border when desired.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
)
},
{
id: 'card-wrapper',
label: 'Wrapped cards',
element: (
<div className="slds-card-wrapper">
<header>
<h2 className="slds-text-heading_medium">
Outer card wrapper header
</h2>
</header>
<Card>
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card-wrapper` to show how styling
is removed when cards are nested inside.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
<Card>
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Contacts (3)</span>
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card-wrapper` to show how styling
is removed when cards are nested inside.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
<Card className="slds-card_boundary">
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card-wrapper` to illustrate how
`.slds-card_boundary` adds a rounded border when desired.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
<Card className="slds-card_boundary">
<CardHeader actions symbol="contact">
<span className="slds-text-heading_small">Card Header</span>
</CardHeader>
<CardBody>
<Card>
<CardBody>
<p>
This is a card inside a card wrapper to show the lack of
styling when nested.
</p>
</CardBody>
</Card>
<Card>
<CardBody>
<p>
This is a card inside a card wrapper to show the lack of
styling when nested.
</p>
</CardBody>
</Card>
<CardBody className="slds-card__body_inner">
<p>
This is a card inside an `.slds-card-wrapper` to illustrate how
`.slds-card_boundary` adds a rounded border when desired.
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
Expand Down
Loading

0 comments on commit 92933ad

Please sign in to comment.