Skip to content

Commit

Permalink
Merge cbefd03 into 9ce8018
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjskillingstad
cjskillingstad authored Jan 15, 2019
2 parents 9ce8018 + cbefd03 commit dc1af50
Show file tree
Hide file tree
Showing 96 changed files with 1,275 additions and 1,161 deletions.
4 changes: 2 additions & 2 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,15 +120,15 @@ rules:
react/jsx-max-props-per-line: [2, { "maximum": 2 }]
react/jsx-no-undef: 2
react/jsx-tag-spacing: [2, { "beforeSelfClosing": "always" }]
#react/jsx-sort-props: 2
react/jsx-sort-props: 2
react/jsx-uses-react: 2
react/jsx-uses-vars: 2
react/jsx-wrap-multilines: 2
react/no-did-mount-set-state: 2
react/no-did-update-set-state: 2
#react/no-multi-comp: 2
react/no-unknown-property: 2
#react/prop-types: 2
react/prop-types: 2
react/react-in-jsx-scope: 2
react/self-closing-comp: 2
react/sort-prop-types: [2, { 'callbacksLast' : true, 'ignoreCase' : true, 'requiredFirst' : true, } ]
Expand Down
30 changes: 15 additions & 15 deletions src/ActionBar/ActionBar.Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ const clickBackBtn = () => {
<Separator />

<Properties
type='Inputs'
properties={[
{ name: 'mobile', description: 'bool - set to "true" for mobile view of the Action Bar.' },
{
Expand All @@ -118,15 +117,16 @@ const clickBackBtn = () => {
name: 'onClick',
description: 'func - The function that is executed when the back button is clicked.'
}
]} />
]}
type='Inputs' />

<Separator />

<h2>Action bar with back button, description and action buttons.</h2>
<DocsTile>
<ActionBar>
<ActionBarBack onClick={clickBackBtn} />
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarHeader description={'Action Bar Description'} title={'Page Title'} />
<ActionBarActions>
<Button>Button</Button>
<Button option='emphasized'>Button</Button>
Expand All @@ -140,7 +140,7 @@ const clickBackBtn = () => {
<h2>Action bar with no Back button</h2>
<DocsTile>
<ActionBar>
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarHeader description={'Action Bar Description'} title={'Page Title'} />
<ActionBarActions>
<Button>Button</Button>
<Button option='emphasized'>Button</Button>
Expand All @@ -159,10 +159,9 @@ const clickBackBtn = () => {
</Description>
<DocsTile>
<ActionBar>
<ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
<ActionBarHeader description={'Action Bar Description'} title={'Page Title'} />
<ActionBarActions>
<Popover
control={<Button option='light' glyph='vertical-grip' />}
body={
<Menu>
<MenuList>
Expand All @@ -172,7 +171,8 @@ const clickBackBtn = () => {
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
</Menu>
} />
}
control={<Button glyph='vertical-grip' option='light' />} />
</ActionBarActions>
</ActionBar>
</DocsTile>
Expand All @@ -185,11 +185,10 @@ const clickBackBtn = () => {
<ActionBar mobile>
<ActionBarBack />
<ActionBarHeader
title={'Action Bar with description and back button'}
description={'Action Bar Description'} />
description={'Action Bar Description'}
title={'Action Bar with description and back button'} />
<ActionBarActions>
<Popover
control={<Button option='light' glyph='vertical-grip' />}
body={
<Menu>
<MenuList>
Expand All @@ -199,7 +198,8 @@ const clickBackBtn = () => {
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
</Menu>
} />
}
control={<Button glyph='vertical-grip' option='light' />} />
</ActionBarActions>
</ActionBar>
</DocsTile>
Expand All @@ -212,11 +212,10 @@ const clickBackBtn = () => {
<ActionBar mobile width='768px'>
<ActionBarBack />
<ActionBarHeader
title={'Action Bar with description and back button'}
description={'Action Bar Description'} />
description={'Action Bar Description'}
title={'Action Bar with description and back button'} />
<ActionBarActions>
<Popover
control={<Button option='light' glyph='vertical-grip' />}
body={
<Menu>
<MenuList>
Expand All @@ -226,7 +225,8 @@ const clickBackBtn = () => {
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
</Menu>
} />
}
control={<Button glyph='vertical-grip' option='light' />} />
</ActionBarActions>
</ActionBar>
</DocsTile>
Expand Down
16 changes: 8 additions & 8 deletions src/ActionBar/ActionBar.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ describe('<ActionBar />', () => {
<ActionBarBack className='blue' />
<ActionBarHeader
className='blue'
title={'Page Title'}
description={'Action Bar Description'} />
description={'Action Bar Description'}
title={'Page Title'} />
<ActionBarActions className='blue'>
<button>Button</button>
</ActionBarActions>
Expand All @@ -27,8 +27,8 @@ describe('<ActionBar />', () => {
<ActionBarBack className='blue' />
<ActionBarHeader
className='blue'
title={'Page Title'}
description={'Action Bar Description'} />
description={'Action Bar Description'}
title={'Page Title'} />
<ActionBarActions className='blue'>
<button>Button</button>
</ActionBarActions>
Expand All @@ -39,8 +39,8 @@ describe('<ActionBar />', () => {
<ActionBar className='blue' mobile>
<ActionBarBack />
<ActionBarHeader
title={'Page Title'}
description={'Action Bar Description'} />
description={'Action Bar Description'}
title={'Page Title'} />
<ActionBarActions>
<button>Button</button>
</ActionBarActions>
Expand All @@ -51,8 +51,8 @@ describe('<ActionBar />', () => {
<ActionBar mobile width='500px'>
<ActionBarBack />
<ActionBarHeader
title={'Page Title'}
description={'Action Bar Description'} />
description={'Action Bar Description'}
title={'Page Title'} />
<ActionBarActions>
<button>Button</button>
</ActionBarActions>
Expand Down
26 changes: 13 additions & 13 deletions src/Alert/Alert.Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export const AlertComponent = () => {
<Separator />

<Properties
type='Inputs'
properties={[
{
name: 'type',
Expand All @@ -53,10 +52,11 @@ export const AlertComponent = () => {
name: 'dismissible',
description: 'bool - Shows a dismissible button if set to true. Default is false.'
}
]} />
]}
type='Inputs' />
<Properties
type='Outputs'
properties={[{ name: 'close', description: 'Emitted when the close button is clicked.' }]} />
properties={[{ name: 'close', description: 'Emitted when the close button is clicked.' }]}
type='Outputs' />

<Separator />

Expand All @@ -81,7 +81,7 @@ export const AlertComponent = () => {
message. Apply type="warning".
</Description>
<DocsTile>
<Alert type='warning' dismissable>
<Alert dismissable type='warning'>
<h3>A dismissible error type alert with template.</h3>
<p>More information...</p>
</Alert>
Expand All @@ -97,9 +97,9 @@ export const AlertComponent = () => {
rectified the error. The user will need to dismiss the message. Apply type="error".
</Description>
<DocsTile>
<Alert type='error' dismissable>
<Alert dismissable type='error'>
<Icon glyph='message-error' /> Error Message.{' '}
<a href='#' className='fd-link'>
<a className='fd-link' href='#'>
Learn More
</a>
</Alert>
Expand All @@ -110,9 +110,9 @@ export const AlertComponent = () => {

<h2>Success Alert</h2>
<DocsTile>
<Alert type='success' dismissable>
<Alert dismissable type='success'>
<Icon glyph='message-success' /> Message Success.{' '}
<a href='#' className='fd-link'>
<a className='fd-link' href='#'>
Learn More
</a>
</Alert>
Expand All @@ -123,9 +123,9 @@ export const AlertComponent = () => {

<h2>Information Alert</h2>
<DocsTile>
<Alert type='information' dismissable>
<Alert dismissable type='information'>
<Icon glyph='message-information' /> Information Message.{' '}
<a href='#' className='fd-link'>
<a className='fd-link' href='#'>
Learn More
</a>
</Alert>
Expand All @@ -148,8 +148,8 @@ export const AlertComponent = () => {
typeOfAttribute: 'boolean'
}
]}>
<Alert type='' dismissable={false}
link='#' linkText='link'>
<Alert dismissable={false} link='#'
linkText='link' type=''>
Default alert with a{' '}
</Alert>
</Playground>
Expand Down
4 changes: 2 additions & 2 deletions src/Alert/Alert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ export class Alert extends Component {
{...props}>
{dismissable && (
<button
className='fd-alert__close'
aria-controls='j2ALl423'
aria-label='Close'
className='fd-alert__close'
onClick={() => this.closeAlertHandler()} />
)}
{children}
{link && (
<a href={link} className='fd-link'>
<a className='fd-link' href={link}>
{linkText}{' '}
<span className='sap-icon--arrow-right sap-icon--s' />
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/Alert/Alert.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ describe('<Alert />', () => {
);

const basicErrorAlert = (
<Alert dismissable type='error'
linkText='link'>
<Alert dismissable linkText='link'
type='error'>
Error message with a
</Alert>
);
Expand Down
28 changes: 14 additions & 14 deletions src/Badge/Badge.Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ export const BadgeComponent = () => {
<Separator />

<Properties
type='Inputs'
properties={[
{
name: 'type',
Expand All @@ -88,7 +87,8 @@ export const BadgeComponent = () => {
name: 'notification',
description: 'bool - Set to \'true\' to enable counter with notification. '
}
]} />
]}
type='Inputs' />

<Separator />

Expand All @@ -112,13 +112,13 @@ export const BadgeComponent = () => {
<DocsTile centered>
<div className='fd-doc__margin--statusIndicator'>
<Badge modifier='pill'>Default</Badge>
<Badge type='success' modifier='pill'>
<Badge modifier='pill' type='success'>
Default
</Badge>
<Badge type='warning' modifier='pill'>
<Badge modifier='pill' type='warning'>
Default
</Badge>
<Badge type='error' modifier='pill'>
<Badge modifier='pill' type='error'>
Default
</Badge>
</div>
Expand All @@ -134,13 +134,13 @@ export const BadgeComponent = () => {
<DocsTile centered>
<div className='fd-doc__margin--statusIndicator'>
<Badge modifier='filled'>Default</Badge>
<Badge type='success' modifier='filled'>
<Badge modifier='filled' type='success'>
Default
</Badge>
<Badge type='warning' modifier='filled'>
<Badge modifier='filled' type='warning'>
Default
</Badge>
<Badge type='error' modifier='filled'>
<Badge modifier='filled' type='error'>
Default
</Badge>
</div>
Expand Down Expand Up @@ -222,16 +222,16 @@ export const BadgeComponent = () => {
<Description>Use the property 'notification' to enable notification counter.</Description>
<DocsTile centered>
<div className='fd-doc__margin--statusIndicator'>
<Button option='light' glyph='bell'>
<Button glyph='bell' option='light'>
<Counter notification>5</Counter>
</Button>
<Button option='light' glyph='bell'>
<Button glyph='bell' option='light'>
<Counter notification>25</Counter>
</Button>
<Button option='light' glyph='bell'>
<Button glyph='bell' option='light'>
<Counter notification>101</Counter>
</Button>
<Button option='light' glyph='bell'>
<Button glyph='bell' option='light'>
<Counter notification>999+</Counter>
</Button>
</div>
Expand Down Expand Up @@ -892,8 +892,8 @@ export const BadgeComponent = () => {
]
}
]}>
<Badge type='success' modifier='filled'
glyph='message-error'>
<Badge glyph='message-error' modifier='filled'
type='success'>
Default
</Badge>
</Playground>
Expand Down
2 changes: 1 addition & 1 deletion src/Badge/Badge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Status.propTypes = {

export const Counter = ({ notification, children, className, ...props }) => {
return (
<span className={`fd-counter${notification ? ' fd-counter--notification' : ''}${className ? ' ' + className : ''}`} aria-label='Unread count'
<span aria-label='Unread count' className={`fd-counter${notification ? ' fd-counter--notification' : ''}${className ? ' ' + className : ''}`}
{...props}>
{children}
</span>
Expand Down
6 changes: 3 additions & 3 deletions src/Breadcrumb/Breadcrumb.Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ export const BreadcrumbComponent = () => {
<Description>An example using url (href attribute)</Description>
<DocsTile>
<Breadcrumb>
<BreadcrumbItem url='#' name='Link Text' />
<BreadcrumbItem url='#' name='Link Text' />
<BreadcrumbItem url='#' name='Link Text' />
<BreadcrumbItem name='Link Text' url='#' />
<BreadcrumbItem name='Link Text' url='#' />
<BreadcrumbItem name='Link Text' url='#' />
</Breadcrumb>
</DocsTile>
<DocsText>{breadcrumbHrefCode}</DocsText>
Expand Down
4 changes: 4 additions & 0 deletions src/Breadcrumb/Breadcrumb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export const Breadcrumb = props => {
return <ul className='fd-breadcrumb'>{children}</ul>;
};

Breadcrumb.propTypes = {
children: PropTypes.node
};

export const BreadcrumbItem = ({ url, link, name, className, ...props }) => {
return (
<BrowserRouter>
Expand Down
Loading

0 comments on commit dc1af50

Please sign in to comment.