@@ -53,7 +69,7 @@ export const AlertComponent = () => {
- Default alert with a {' '}
+ Default alert with a{' '}
{defaultAlertCode}
@@ -82,14 +98,41 @@ export const AlertComponent = () => {
rectified the error. The user will need to dismiss the message. Apply type="error".
-
- Error message with a {' '}
+
+
+ Learn More
+
{errorAlertCode}
+
Success Alert
+
+
+
+ Learn More
+
+
+
+
{sucessAlertCode}
+
+
+
+
Information Alert
+
+
+
+ Learn More
+
+
+
+
{informationAlertCode}
+
Playground
@@ -99,7 +142,7 @@ export const AlertComponent = () => {
{
attribute: 'type',
typeOfAttribute: 'string',
- enum: ['', 'warning', 'error']
+ enum: ['', 'warning', 'error', 'information', 'success']
},
{
attribute: 'dismissable',
diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
index c5bbafede..015f23dc6 100644
--- a/src/Alert/Alert.js
+++ b/src/Alert/Alert.js
@@ -51,7 +51,7 @@ export class Alert extends Component {
}
Alert.propTypes = {
- type: PropTypes.oneOf(['', 'warning', 'error']),
+ type: PropTypes.oneOf(['', 'warning', 'error', 'success', 'information']),
link: PropTypes.string,
linkText: PropTypes.string,
dismissable: PropTypes.bool
diff --git a/src/App.scss b/src/App.scss
index 27353c5d3..117333ff5 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,6 +6,10 @@ $fd-fonts-path: '../node_modules/fiori-fundamentals/dist/fonts/';
background-color: white;
}
+.fd-counter--notification {
+ position: relative;
+}
+
.fd-tile__content {
.fd-badge,
.fd-label,
@@ -13,8 +17,8 @@ $fd-fonts-path: '../node_modules/fiori-fundamentals/dist/fonts/';
.fd-token,
.fd-dropdown,
.fd-button-group,
- [class*='fd-identifier'],
- {
+ .fd-counter,
+ [class*='fd-identifier'] {
margin-right: 20px;
}
diff --git a/src/Badge/Badge.Component.js b/src/Badge/Badge.Component.js
index 42421cc72..73d741ade 100644
--- a/src/Badge/Badge.Component.js
+++ b/src/Badge/Badge.Component.js
@@ -1,38 +1,29 @@
import React from 'react';
-import { Badge, Label, Status } from '../';
-import {
- DocsTile,
- DocsText,
- Separator,
- Header,
- Description,
- Import,
- Properties,
- Playground
-} from '../';
+import { Badge, Label, Status, Counter, Button } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
export const BadgeComponent = () => {
- const defaultBadgeCode = `
Default
+ const defaultBadgeCode = `
Default
Default
Default
Default `;
- const pillBadgeCode = `
Default
+ const pillBadgeCode = `
Default
Default
Default
Default `;
- const filledBadgeCode = `
Default
+ const filledBadgeCode = `
Default
Default
Default
Default `;
- const labelCode = `
Default
+ const labelCode = `
Default
Default
Default
Default `;
- const statusCode = `
Default
+ const statusCode = `
Default
Default
Default
Default
@@ -43,806 +34,853 @@ export const BadgeComponent = () => {
Busy
Appear Offline `;
- const statusIconCode = `
Custom Icon
+ const statusIconCode = `
Custom Icon
Success
Warning
Error `;
- return (
-
-
-
- Badges and labels are used to indicate status. Colors, generally in
- combination with text, are used to easily highlight the state of an
- object. The following colors should be used: Black: default or inactive
- status; Green: positive status, used for active, published, approved;
- Orange: a warning status or to indicate that an action can be taken;
- Red: error status.
-
-
-
-
-
-
-
-
-
-
Default Badge
-
- Default
- Default
- Default
- Default
-
-
{defaultBadgeCode}
-
-
-
-
Pill Badge
-
- Apply modifier="pill" to render a pill version of the
- badge.
-
-
- Default
-
- Default
-
-
- Default
-
-
- Default
-
-
-
{pillBadgeCode}
-
-
-
-
Filled Badge
-
- Apply modifier="filled" to render a filled version of the
- badge.
-
-
- Default
-
- Default
-
-
- Default
-
-
- Default
-
-
-
{filledBadgeCode}
-
-
-
-
Label
-
- Default
- Default
- Default
- Default
-
-
{labelCode}
-
-
-
-
Status Indicator Label with build in status icons
-
- Default
- Default
- Default
- Default
- Available
- Away
- Busy
- Appear Offline
-
-
{statusCode}
-
-
Status Indicator Label with any icons
-
- Custom Icon
- Success
- Warning
- Error
-
-
{statusIconCode}
-
-
-
-
Playground
-
-
- Default
-
-
-
-
- );
+ const defaultCounterCode = `
5
+
25
+
101
+
999+ `;
+
+ const notificationCounterCode = `
+ 5
+
+
+ 25
+
+
+ 101
+
+
+ 999+
+ `;
+
+ const inlineCounterCode = `
Lorem ipsum 5
`;
+
+ return (
+
+
+
Status Indicators are used to easily highlight the state of an object.
+
+
+
+
+
+
+
+
+
Default Badge
+
+ Default
+ Default
+ Default
+ Default
+
+
{defaultBadgeCode}
+
+
+
+
Pill Badge
+
+ Apply modifier="pill" to render a pill version of the badge.
+
+
+ Default
+
+ Default
+
+
+ Default
+
+
+ Default
+
+
+
{pillBadgeCode}
+
+
+
+
Filled Badge
+
+ Apply modifier="filled" to render a filled version of the badge.
+
+
+ Default
+
+ Default
+
+
+ Default
+
+
+ Default
+
+
+
{filledBadgeCode}
+
+
+
+
Label
+
+ Default
+ Default
+ Default
+ Default
+
+
{labelCode}
+
+
+
+
Status Indicator Label with build in status icons
+
+ Default
+ Default
+ Default
+ Default
+ Available
+ Away
+ Busy
+ Appear Offline
+
+
{statusCode}
+
+
Status Indicator Label with any icons
+
+ Custom Icon
+ Success
+ Warning
+ Error
+
+
{statusIconCode}
+
+
+
+
Default Counter
+
Counter has a minimum value 1. Maximum display is 999+
+
+ 5
+ 25
+ 101
+ 999+
+
+
{defaultCounterCode}
+
+
+
+
Counter inline with a paragraph
+
+
+ Lorem ipsum 5
+
+
+
{inlineCounterCode}
+
+
+
+
Notification counter
+
Use the property 'notification' to enable notification counter.
+
+
+ 5
+
+
+ 25
+
+
+ 101
+
+
+ 999+
+
+
+
{notificationCounterCode}
+
+
+
+
Playground
+
+
+ Default
+
+
+
+
+ );
};
diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js
index c2a0fc8ea..470c512b0 100644
--- a/src/Badge/Badge.js
+++ b/src/Badge/Badge.js
@@ -2,49 +2,52 @@ import React from 'react';
import PropTypes from 'prop-types';
export const Badge = props => {
- const { type, modifier, children } = props;
- return (
-
- {children}
-
- );
+ const { type, modifier, children } = props;
+ return (
+
+ {children}
+
+ );
};
Badge.propTypes = {
- type: PropTypes.oneOf(['', 'success', 'warning' , 'error']),
- modifier: PropTypes.oneOf(['', 'pill', 'filled'])
+ type: PropTypes.oneOf(['', 'success', 'warning', 'error']),
+ modifier: PropTypes.oneOf(['', 'pill', 'filled'])
};
export const Label = props => {
- const { type, children } = props;
- return (
-
- {children}
-
- );
+ const { type, children } = props;
+ return
{children} ;
};
Label.propTypes = {
- type: PropTypes.oneOf(['', 'success', 'warning' , 'error'])
+ type: PropTypes.oneOf(['', 'success', 'warning', 'error'])
};
export const Status = props => {
- const { type, glyph, children } = props;
- return (
-
- {children}
-
- );
+ const { type, glyph, children } = props;
+ return (
+
+ {children}
+
+ );
};
Status.propTypes = {
- type: PropTypes.oneOf(['', 'success', 'warning' , 'error', 'available', 'away', 'busy', 'offline']),
- glyph: PropTypes.string
+ type: PropTypes.oneOf(['', 'success', 'warning', 'error', 'available', 'away', 'busy', 'offline']),
+ glyph: PropTypes.string
+};
+
+export const Counter = props => {
+ const { notification, children } = props;
+ return (
+
+ {children}
+
+ );
+};
+
+Counter.propTypes = {
+ notification: PropTypes.bool
};
diff --git a/src/Routes.js b/src/Routes.js
index 19bb88b07..17f473b65 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -55,11 +55,6 @@ export default class Routes extends Component {
component: ActionBarComponent
},
{ url: '/alert', name: 'Alert', component: AlertComponent },
- {
- url: '/badge',
- name: 'Badge, Label & Status',
- component: BadgeComponent
- },
{
url: '/breadcrumb',
name: 'Breadcrumb',
@@ -141,6 +136,11 @@ export default class Routes extends Component {
name: 'Side Navigation',
component: SideNavigationComponent
},
+ {
+ url: '/statusIndicators',
+ name: 'Status Indicators',
+ component: BadgeComponent
+ },
{ url: '/table', name: 'Table', component: TableComponent },
{ url: '/tabs', name: 'Tabs', component: TabsComponent },
{ url: '/tile', name: 'Tile', component: TileComponent },
diff --git a/src/index.js b/src/index.js
index 713626b45..af9fb171a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,7 +16,8 @@ import {
import {
Badge,
Label,
- Status
+ Status,
+ Counter
} from '../src/Badge/Badge';
import {
Breadcrumb,
@@ -196,6 +197,7 @@ export {
ComboboxInput,
Label,
Status,
+ Counter,
Breadcrumb,
BreadcrumbItem,
Button,