diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css index 3c6c3df11a243..3902690f33a33 100644 --- a/ui_framework/dist/ui_framework_theme_dark.css +++ b/ui_framework/dist/ui_framework_theme_dark.css @@ -340,6 +340,66 @@ table { width: 64px; height: 64px; } +.kuiBadge { + font-size: 12px; + line-height: 24px; + display: inline-block; + text-decoration: none; + border: solid 1px transparent; + border-radius: 24px; + padding: 0 8px; + background-color: transparent; + white-space: nowrap; + vertical-align: middle; } + .kuiBadge .kuiBadge__content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kuiBadge .kuiBadge__icon { + margin-left: 4px; } + .kuiBadge.kuiBadge--iconLeft .kuiBadge__content { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + .kuiBadge.kuiBadge--iconLeft .kuiBadge__content .kuiBadge__icon { + margin-right: 4px; + margin-left: 0; } + +.kuiBadge--default { + border-color: #444; + background-color: rgba(68, 68, 68, 0.1); } + +.kuiBadge--primary { + border-color: #4da1c0; + background-color: rgba(77, 161, 192, 0.1); } + +.kuiBadge--secondary { + border-color: #00A69B; + background-color: rgba(0, 166, 155, 0.1); } + +.kuiBadge--warning { + border-color: #E5830E; + background-color: rgba(229, 131, 14, 0.1); } + +.kuiBadge--danger { + border-color: #bf4d4d; + background-color: rgba(191, 77, 77, 0.1); } + +.kuiBadge--accent { + border-color: #DD0A73; + background-color: rgba(221, 10, 115, 0.1); } + .kuiButton { display: inline-block; -webkit-appearance: none; diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css index 422c3e41afd9d..069ffe4391802 100644 --- a/ui_framework/dist/ui_framework_theme_light.css +++ b/ui_framework/dist/ui_framework_theme_light.css @@ -340,6 +340,66 @@ table { width: 64px; height: 64px; } +.kuiBadge { + font-size: 12px; + line-height: 24px; + display: inline-block; + text-decoration: none; + border: solid 1px transparent; + border-radius: 24px; + padding: 0 8px; + background-color: transparent; + white-space: nowrap; + vertical-align: middle; } + .kuiBadge .kuiBadge__content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + .kuiBadge .kuiBadge__icon { + margin-left: 4px; } + .kuiBadge.kuiBadge--iconLeft .kuiBadge__content { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + .kuiBadge.kuiBadge--iconLeft .kuiBadge__content .kuiBadge__icon { + margin-right: 4px; + margin-left: 0; } + +.kuiBadge--default { + border-color: #D9D9D9; + background-color: rgba(217, 217, 217, 0.1); } + +.kuiBadge--primary { + border-color: #0079a5; + background-color: rgba(0, 121, 165, 0.1); } + +.kuiBadge--secondary { + border-color: #00A69B; + background-color: rgba(0, 166, 155, 0.1); } + +.kuiBadge--warning { + border-color: #E5830E; + background-color: rgba(229, 131, 14, 0.1); } + +.kuiBadge--danger { + border-color: #A30000; + background-color: rgba(163, 0, 0, 0.1); } + +.kuiBadge--accent { + border-color: #DD0A73; + background-color: rgba(221, 10, 115, 0.1); } + .kuiButton { display: inline-block; -webkit-appearance: none; diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index d257c1f77ddd9..a83232d0f6c2c 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/ui_framework/doc_site/src/services/routes/routes.js @@ -3,6 +3,9 @@ import Slugify from '../string/slugify'; import AccessibilityExample from '../../views/accessibility/accessibility_example'; +import BadgeExample + from '../../views/badge/badge_example'; + import ButtonExample from '../../views/button/button_example'; @@ -63,6 +66,10 @@ const components = [{ name: 'Button', component: ButtonExample, hasReact: true, +}, { + name: 'Badge', + component: BadgeExample, + hasReact: true, }, { name: 'CallOut', component: CallOutExample, diff --git a/ui_framework/doc_site/src/views/badge/badge.js b/ui_framework/doc_site/src/views/badge/badge.js new file mode 100644 index 0000000000000..d559dca1a7dcf --- /dev/null +++ b/ui_framework/doc_site/src/views/badge/badge.js @@ -0,0 +1,44 @@ +import React from 'react'; + +import { + KuiBadge, +} from '../../../../components'; + +export default () => ( +
+ + Default + + +    + + + Primary + + +    + + + Secondary + + +    + + + Accent + + +    + + + Warning + + +    + + + Danger + +
+ +); diff --git a/ui_framework/doc_site/src/views/badge/badge_example.js b/ui_framework/doc_site/src/views/badge/badge_example.js new file mode 100644 index 0000000000000..d683fd8f47eac --- /dev/null +++ b/ui_framework/doc_site/src/views/badge/badge_example.js @@ -0,0 +1,61 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import Badge from './badge'; +const badgeSource = require('!!raw!./badge'); +const badgeHtml = renderToHtml(Badge); + +import BadgeWithIcon from './badge_with_icon'; +const badgeWithIconSource = require('!!raw!./badge_with_icon'); +const badgeWithIconHtml = renderToHtml(BadgeWithIcon); + +export default props => ( + + + + Badges are used to focus on important bits of information. + + + + + + + + + + Badges can use icons on the left and right (default) sides. + + + + + + + +); diff --git a/ui_framework/doc_site/src/views/badge/badge_with_icon.js b/ui_framework/doc_site/src/views/badge/badge_with_icon.js new file mode 100644 index 0000000000000..e599ab74b611d --- /dev/null +++ b/ui_framework/doc_site/src/views/badge/badge_with_icon.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { + KuiBadge, +} from '../../../../components'; + +export default () => ( +
+ + + Primary + + +    + + + Secondary + + +
+ +); diff --git a/ui_framework/src/components/badge/_badge.scss b/ui_framework/src/components/badge/_badge.scss new file mode 100644 index 0000000000000..4c802e4b58da7 --- /dev/null +++ b/ui_framework/src/components/badge/_badge.scss @@ -0,0 +1,49 @@ +.kuiBadge { + font-size: $kuiSizeM; + line-height: $kuiSizeL; + display: inline-block; + text-decoration: none; + border: solid 1px transparent; + border-radius: $kuiSizeL; + padding: 0 $kuiSizeS; + background-color: transparent; + white-space: nowrap; + vertical-align: middle; + + .kuiBadge__content { + display: flex; + justify-content: center; + align-items: center; + } + + .kuiBadge__icon { + margin-left: $kuiSizeXS; + } + + &.kuiBadge--iconLeft .kuiBadge__content { + flex-direction: row-reverse; + + .kuiBadge__icon { + margin-right: $kuiSizeXS; + margin-left: 0; + } + } +} + + +// Modifier naming and colors. +$badgeTypes: ( + default: $kuiColorLightShade, + primary: $kuiColorPrimary, + secondary: $kuiColorSecondary, + warning: $kuiColorWarning, + danger: $kuiColorDanger, + accent: $kuiColorAccent +); + +@each $name, $color in $badgeTypes { + .kuiBadge--#{$name} { + border-color: $color; + background-color: transparentize($color, .9); + } +} diff --git a/ui_framework/src/components/badge/_index.scss b/ui_framework/src/components/badge/_index.scss new file mode 100644 index 0000000000000..fa960083a9727 --- /dev/null +++ b/ui_framework/src/components/badge/_index.scss @@ -0,0 +1 @@ +@import 'badge'; diff --git a/ui_framework/src/components/badge/badge.js b/ui_framework/src/components/badge/badge.js new file mode 100644 index 0000000000000..dd35147b09669 --- /dev/null +++ b/ui_framework/src/components/badge/badge.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + ICON_TYPES, + KuiIcon, +} from '../icon'; + +const typesToClassNameMap = { + default: 'kuiBadge--default', + primary: 'kuiBadge--primary', + secondary: 'kuiBadge--secondary', + accent: 'kuiBadge--accent', + warning: 'kuiBadge--warning', + danger: 'kuiBadge--danger', +}; + +export const TYPES = Object.keys(typesToClassNameMap); + +const iconSideToClassNameMap = { + left: 'kuiBadge--iconLeft', + right: '', +}; + +export const ICON_SIDES = Object.keys(iconSideToClassNameMap); + +export const KuiBadge = ({ children, type, iconType, iconSide, className, ...rest }) => { + const classes = classNames('kuiBadge', typesToClassNameMap[type], iconSideToClassNameMap[iconSide], className); + + let optionalIcon = null; + if (iconType) { + optionalIcon = ( + + ); + } + + return ( +
+ + + {children} + + {optionalIcon} + +
+ ); +}; + +KuiBadge.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + iconType: PropTypes.oneOf(ICON_TYPES), + iconSide: PropTypes.string, + type: PropTypes.string, +}; + +KuiBadge.defaultProps = { + type: 'default', + iconSide: 'right', +}; diff --git a/ui_framework/src/components/badge/badge.test.js b/ui_framework/src/components/badge/badge.test.js new file mode 100644 index 0000000000000..01f6b5ed60fe0 --- /dev/null +++ b/ui_framework/src/components/badge/badge.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { KuiBadge } from './badge'; + +describe('KuiBadge', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/ui_framework/src/components/badge/index.js b/ui_framework/src/components/badge/index.js new file mode 100644 index 0000000000000..e375d5e57a1d5 --- /dev/null +++ b/ui_framework/src/components/badge/index.js @@ -0,0 +1,3 @@ +export { + KuiBadge, +} from './badge'; diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index eaf165c7790d6..ee6217e5dc547 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -6,6 +6,10 @@ export { KuiButton, } from './button'; +export { + KuiBadge, +} from './badge'; + export { KuiCallOut, } from './call_out'; diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss index 017c8029b6277..54d9ec1f6032c 100644 --- a/ui_framework/src/components/index.scss +++ b/ui_framework/src/components/index.scss @@ -1,4 +1,5 @@ @import 'avatar/index'; +@import 'badge/index'; @import 'button/index'; @import 'call_out/index'; @import 'form/index';