From 28f9c1a17f6b0a6a9180293391f6b515ae7f6689 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 21 Jul 2017 16:17:30 -0700 Subject: [PATCH 01/12] Add Typography documentation. Add PageTitle component. --- ui_framework/dist/ui_framework.css | 41 ++++++++++------- .../doc_site/src/services/routes/routes.js | 7 +++ .../src/views/typography/page_title.js | 17 +++++++ .../views/typography/typography_example.js | 45 +++++++++++++++++++ ui_framework/src/components/index.js | 4 ++ ui_framework/src/components/index.scss | 3 +- .../src/components/typography/_index.scss | 1 + .../src/components/typography/index.js | 3 ++ .../__snapshots__/page_title.test.js.snap | 11 +++++ .../typography/page_title/_index.scss | 1 + .../typography/page_title/_page_title.scss | 5 +++ .../components/typography/page_title/index.js | 1 + .../typography/page_title/page_title.js | 20 +++++++++ .../typography/page_title/page_title.test.js | 19 ++++++++ 14 files changed, 161 insertions(+), 17 deletions(-) create mode 100644 ui_framework/doc_site/src/views/typography/page_title.js create mode 100644 ui_framework/doc_site/src/views/typography/typography_example.js create mode 100644 ui_framework/src/components/typography/_index.scss create mode 100644 ui_framework/src/components/typography/index.js create mode 100644 ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap create mode 100644 ui_framework/src/components/typography/page_title/_index.scss create mode 100644 ui_framework/src/components/typography/page_title/_page_title.scss create mode 100644 ui_framework/src/components/typography/page_title/index.js create mode 100644 ui_framework/src/components/typography/page_title/page_title.js create mode 100644 ui_framework/src/components/typography/page_title/page_title.test.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index b74c811e8c825..f9d2f5e3ad99c 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -3,6 +3,11 @@ font-size: 0.875rem; line-height: 24px; } +.kuiPageTitle { + font-size: 32px; + font-size: 2rem; + line-height: 48px; } + /** * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). * @@ -131,22 +136,6 @@ table { .kui--bottomShadow { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } -.kuiIcon { - display: inline-block; - fill: #3F3F3F; } - .kuiIcon--medium { - width: 16px; - height: 16px; } - .kuiIcon--large { - width: 24px; - height: 24px; } - .kuiIcon--xLarge { - width: 32px; - height: 32px; } - .kuiIcon--xxLarge { - width: 40px; - height: 40px; } - .kuiHeader { background: #FFF; border-bottom: 1px solid #D9D9D9; } @@ -236,6 +225,22 @@ table { .kuiHeaderItem__button:focus { background: #e6f2f6; } +.kuiIcon { + display: inline-block; + fill: #3F3F3F; } + .kuiIcon--medium { + width: 16px; + height: 16px; } + .kuiIcon--large { + width: 24px; + height: 24px; } + .kuiIcon--xLarge { + width: 32px; + height: 32px; } + .kuiIcon--xxLarge { + width: 40px; + height: 40px; } + .kuiKeyPad { display: -webkit-box; display: -webkit-flex; @@ -335,3 +340,7 @@ table { .kuiPopMenu--anchorRight .kuiPopMenu__body:before, .kuiPopMenu--anchorRight .kuiPopMenu__body:after { right: 16px; left: auto; } + +.kuiPageTitle { + color: #3F3F3F; + font-weight: 300; } diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index 70c5e1829010d..dbcab9ddf94fe 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/ui_framework/doc_site/src/services/routes/routes.js @@ -9,6 +9,9 @@ import IconExample import HeaderExample from '../../views/header/header_example'; +import TypographyExample + from '../../views/typography/typography_example'; + // Component route names should match the component name exactly. const components = [{ name: 'Accessibility', @@ -20,6 +23,10 @@ const components = [{ }, { name: 'Header', component: HeaderExample, +}, { + name: 'Typography', + component: TypographyExample, + hasReact: true, }]; const sandboxes = []; diff --git a/ui_framework/doc_site/src/views/typography/page_title.js b/ui_framework/doc_site/src/views/typography/page_title.js new file mode 100644 index 0000000000000..a7a92a2cfa8e7 --- /dev/null +++ b/ui_framework/doc_site/src/views/typography/page_title.js @@ -0,0 +1,17 @@ +import React from 'react'; + +import { + KuiPageTitle, +} from '../../../../components'; + +export default () => ( +
+ +

This is the title of the page

+ + + +

This is a PageTitle applied to an h2 element

+ +
+); diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js new file mode 100644 index 0000000000000..d3dfc407bfa33 --- /dev/null +++ b/ui_framework/doc_site/src/views/typography/typography_example.js @@ -0,0 +1,45 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideCode, + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import PageTitle from './page_title'; +const pageTitleSource = require('!!raw!./page_title'); +const pageTitleHtml = renderToHtml(PageTitle); + +export default props => ( + + + + The PageTitle component identifies the page you're on. Generally, there should + only be one of these used at a time. + + + + You can specify which heading element to use by passing it in + as a child. The heading element can be absolutely anything. + + + + + + + +); diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index 47c94a80694b2..2f0970b23282a 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -5,3 +5,7 @@ export { export { KuiIcon, } from './icon'; + +export { + KuiPageTitle, +} from './typography'; diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss index d5e1d0cdfeb7b..24b89f6d8a3c1 100644 --- a/ui_framework/src/components/index.scss +++ b/ui_framework/src/components/index.scss @@ -1,4 +1,5 @@ -@import './icon/index'; @import './header/index'; +@import './icon/index'; @import './key_pad/index'; @import './pop_menu/index'; +@import './typography/index'; diff --git a/ui_framework/src/components/typography/_index.scss b/ui_framework/src/components/typography/_index.scss new file mode 100644 index 0000000000000..836e7b8fdfb59 --- /dev/null +++ b/ui_framework/src/components/typography/_index.scss @@ -0,0 +1 @@ +@import 'page_title/index'; diff --git a/ui_framework/src/components/typography/index.js b/ui_framework/src/components/typography/index.js new file mode 100644 index 0000000000000..3db636e7bb40c --- /dev/null +++ b/ui_framework/src/components/typography/index.js @@ -0,0 +1,3 @@ +export { + KuiPageTitle, +} from './page_title'; diff --git a/ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap b/ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap new file mode 100644 index 0000000000000..8fced9461d3c4 --- /dev/null +++ b/ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiPageTitle is rendered 1`] = ` +

+ Hello +

+`; diff --git a/ui_framework/src/components/typography/page_title/_index.scss b/ui_framework/src/components/typography/page_title/_index.scss new file mode 100644 index 0000000000000..232e6d947ca3b --- /dev/null +++ b/ui_framework/src/components/typography/page_title/_index.scss @@ -0,0 +1 @@ +@import 'page_title'; diff --git a/ui_framework/src/components/typography/page_title/_page_title.scss b/ui_framework/src/components/typography/page_title/_page_title.scss new file mode 100644 index 0000000000000..a42501cb674b1 --- /dev/null +++ b/ui_framework/src/components/typography/page_title/_page_title.scss @@ -0,0 +1,5 @@ +@include component('kuiPageTitle') { + @extend %kuiFontSizeXL; + color: $kuiTextColor; + font-weight: $kuiFontWeightLight; +} diff --git a/ui_framework/src/components/typography/page_title/index.js b/ui_framework/src/components/typography/page_title/index.js new file mode 100644 index 0000000000000..16953686bd1e0 --- /dev/null +++ b/ui_framework/src/components/typography/page_title/index.js @@ -0,0 +1 @@ +export { KuiPageTitle } from './page_title'; diff --git a/ui_framework/src/components/typography/page_title/page_title.js b/ui_framework/src/components/typography/page_title/page_title.js new file mode 100644 index 0000000000000..384def727ad08 --- /dev/null +++ b/ui_framework/src/components/typography/page_title/page_title.js @@ -0,0 +1,20 @@ +import React, { + cloneElement, + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +export const KuiPageTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiPageTitle', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiPageTitle.PropTypes = { + children: PropTypes.any.isRequired, +}; diff --git a/ui_framework/src/components/typography/page_title/page_title.test.js b/ui_framework/src/components/typography/page_title/page_title.test.js new file mode 100644 index 0000000000000..ddee24d0856ea --- /dev/null +++ b/ui_framework/src/components/typography/page_title/page_title.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { render, shallow } from 'enzyme'; +import sinon from 'sinon'; +import { requiredProps } from '../../../test/required_props'; + +import { KuiPageTitle } from './page_title'; + +describe('KuiPageTitle', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From f90fa48ca86207d222d11d90047e193d686ad0e0 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 21 Jul 2017 16:43:01 -0700 Subject: [PATCH 02/12] Add SectionTitle component. --- ui_framework/dist/ui_framework.css | 9 ++++++++ .../src/views/typography/section_title.js | 11 +++++++++ .../views/typography/typography_example.js | 23 +++++++++++++++++++ ui_framework/src/components/index.js | 1 + .../src/components/typography/_index.scss | 1 + .../src/components/typography/index.js | 4 ++++ .../__snapshots__/section_title.test.js.snap | 11 +++++++++ .../typography/section_title/_index.scss | 1 + .../section_title/_section_title.scss | 5 ++++ .../typography/section_title/index.js | 1 + .../typography/section_title/section_title.js | 20 ++++++++++++++++ .../section_title/section_title.test.js | 19 +++++++++++++++ 12 files changed, 106 insertions(+) create mode 100644 ui_framework/doc_site/src/views/typography/section_title.js create mode 100644 ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap create mode 100644 ui_framework/src/components/typography/section_title/_index.scss create mode 100644 ui_framework/src/components/typography/section_title/_section_title.scss create mode 100644 ui_framework/src/components/typography/section_title/index.js create mode 100644 ui_framework/src/components/typography/section_title/section_title.js create mode 100644 ui_framework/src/components/typography/section_title/section_title.test.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index f9d2f5e3ad99c..ff794def7c59a 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -3,6 +3,11 @@ font-size: 0.875rem; line-height: 24px; } +.kuiSectionTitle { + font-size: 24px; + font-size: 1.5rem; + line-height: 36px; } + .kuiPageTitle { font-size: 32px; font-size: 2rem; @@ -344,3 +349,7 @@ table { .kuiPageTitle { color: #3F3F3F; font-weight: 300; } + +.kuiSectionTitle { + color: #3F3F3F; + font-weight: 300; } diff --git a/ui_framework/doc_site/src/views/typography/section_title.js b/ui_framework/doc_site/src/views/typography/section_title.js new file mode 100644 index 0000000000000..06511050b1a1a --- /dev/null +++ b/ui_framework/doc_site/src/views/typography/section_title.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { + KuiSectionTitle, +} from '../../../../components'; + +export default () => ( + +

Here's the title of a section

+ +); diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js index d3dfc407bfa33..d1fa417887d37 100644 --- a/ui_framework/doc_site/src/views/typography/typography_example.js +++ b/ui_framework/doc_site/src/views/typography/typography_example.js @@ -15,6 +15,10 @@ import PageTitle from './page_title'; const pageTitleSource = require('!!raw!./page_title'); const pageTitleHtml = renderToHtml(PageTitle); +import SectionTitle from './section_title'; +const sectionTitleSource = require('!!raw!./section_title'); +const sectionTitleHtml = renderToHtml(SectionTitle); + export default props => ( ( + + + + The SectionTitle component identifies sections within a page. + + + + + + ); diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index 2f0970b23282a..6af70d3fbfe39 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -8,4 +8,5 @@ export { export { KuiPageTitle, + KuiSectionTitle, } from './typography'; diff --git a/ui_framework/src/components/typography/_index.scss b/ui_framework/src/components/typography/_index.scss index 836e7b8fdfb59..d7371a9ac9561 100644 --- a/ui_framework/src/components/typography/_index.scss +++ b/ui_framework/src/components/typography/_index.scss @@ -1 +1,2 @@ @import 'page_title/index'; +@import 'section_title/index'; diff --git a/ui_framework/src/components/typography/index.js b/ui_framework/src/components/typography/index.js index 3db636e7bb40c..df9fa1a720c10 100644 --- a/ui_framework/src/components/typography/index.js +++ b/ui_framework/src/components/typography/index.js @@ -1,3 +1,7 @@ export { KuiPageTitle, } from './page_title'; + +export { + KuiSectionTitle, +} from './section_title'; diff --git a/ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap b/ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap new file mode 100644 index 0000000000000..048fbf77f38b5 --- /dev/null +++ b/ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiSectionTitle is rendered 1`] = ` +

+ Hello +

+`; diff --git a/ui_framework/src/components/typography/section_title/_index.scss b/ui_framework/src/components/typography/section_title/_index.scss new file mode 100644 index 0000000000000..e185c4a877316 --- /dev/null +++ b/ui_framework/src/components/typography/section_title/_index.scss @@ -0,0 +1 @@ +@import 'section_title'; diff --git a/ui_framework/src/components/typography/section_title/_section_title.scss b/ui_framework/src/components/typography/section_title/_section_title.scss new file mode 100644 index 0000000000000..4ee683706c0bd --- /dev/null +++ b/ui_framework/src/components/typography/section_title/_section_title.scss @@ -0,0 +1,5 @@ +@include component('kuiSectionTitle') { + @extend %kuiFontSizeL; + color: $kuiTextColor; + font-weight: $kuiFontWeightLight; +} diff --git a/ui_framework/src/components/typography/section_title/index.js b/ui_framework/src/components/typography/section_title/index.js new file mode 100644 index 0000000000000..e884b669165e0 --- /dev/null +++ b/ui_framework/src/components/typography/section_title/index.js @@ -0,0 +1 @@ +export { KuiSectionTitle } from './section_title'; diff --git a/ui_framework/src/components/typography/section_title/section_title.js b/ui_framework/src/components/typography/section_title/section_title.js new file mode 100644 index 0000000000000..113124f5fda1d --- /dev/null +++ b/ui_framework/src/components/typography/section_title/section_title.js @@ -0,0 +1,20 @@ +import React, { + cloneElement, + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +export const KuiSectionTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiSectionTitle', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiSectionTitle.PropTypes = { + children: PropTypes.any.isRequired, +}; diff --git a/ui_framework/src/components/typography/section_title/section_title.test.js b/ui_framework/src/components/typography/section_title/section_title.test.js new file mode 100644 index 0000000000000..ac810519b9f93 --- /dev/null +++ b/ui_framework/src/components/typography/section_title/section_title.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { render, shallow } from 'enzyme'; +import sinon from 'sinon'; +import { requiredProps } from '../../../test/required_props'; + +import { KuiSectionTitle } from './section_title'; + +describe('KuiSectionTitle', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From 64ad346c83e8d85cbdb9bef9a12010e88e92247a Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 21 Jul 2017 16:49:30 -0700 Subject: [PATCH 03/12] Fix PageTitle and SectionTitle children propType to be node. --- ui_framework/src/components/typography/page_title/page_title.js | 2 +- .../src/components/typography/section_title/section_title.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui_framework/src/components/typography/page_title/page_title.js b/ui_framework/src/components/typography/page_title/page_title.js index 384def727ad08..f39e23c477547 100644 --- a/ui_framework/src/components/typography/page_title/page_title.js +++ b/ui_framework/src/components/typography/page_title/page_title.js @@ -16,5 +16,5 @@ export const KuiPageTitle = ({ children, className, ...rest }) => { }; KuiPageTitle.PropTypes = { - children: PropTypes.any.isRequired, + children: PropTypes.node.isRequired, }; diff --git a/ui_framework/src/components/typography/section_title/section_title.js b/ui_framework/src/components/typography/section_title/section_title.js index 113124f5fda1d..ee2c3f51e9032 100644 --- a/ui_framework/src/components/typography/section_title/section_title.js +++ b/ui_framework/src/components/typography/section_title/section_title.js @@ -16,5 +16,5 @@ export const KuiSectionTitle = ({ children, className, ...rest }) => { }; KuiSectionTitle.PropTypes = { - children: PropTypes.any.isRequired, + children: PropTypes.node.isRequired, }; From 11003353340d47f7c5c3600fd01b498bf3ba6d6f Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 21 Jul 2017 16:55:44 -0700 Subject: [PATCH 04/12] Add ObjectTitle component. --- ui_framework/dist/ui_framework.css | 9 ++++++++ .../src/views/typography/object_title.js | 11 +++++++++ .../views/typography/typography_example.js | 23 +++++++++++++++++++ ui_framework/src/components/index.js | 1 + .../src/components/typography/_index.scss | 1 + .../src/components/typography/index.js | 4 ++++ .../__snapshots__/object_title.test.js.snap | 11 +++++++++ .../typography/object_title/_index.scss | 1 + .../object_title/_object_title.scss | 5 ++++ .../typography/object_title/index.js | 1 + .../typography/object_title/object_title.js | 20 ++++++++++++++++ .../object_title/object_title.test.js | 19 +++++++++++++++ 12 files changed, 106 insertions(+) create mode 100644 ui_framework/doc_site/src/views/typography/object_title.js create mode 100644 ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap create mode 100644 ui_framework/src/components/typography/object_title/_index.scss create mode 100644 ui_framework/src/components/typography/object_title/_object_title.scss create mode 100644 ui_framework/src/components/typography/object_title/index.js create mode 100644 ui_framework/src/components/typography/object_title/object_title.js create mode 100644 ui_framework/src/components/typography/object_title/object_title.test.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index ff794def7c59a..e1c6c7785db51 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -3,6 +3,11 @@ font-size: 0.875rem; line-height: 24px; } +.kuiObjectTitle { + font-size: 16px; + font-size: 1rem; + line-height: 24px; } + .kuiSectionTitle { font-size: 24px; font-size: 1.5rem; @@ -346,6 +351,10 @@ table { right: 16px; left: auto; } +.kuiObjectTitle { + color: #3F3F3F; + font-weight: 300; } + .kuiPageTitle { color: #3F3F3F; font-weight: 300; } diff --git a/ui_framework/doc_site/src/views/typography/object_title.js b/ui_framework/doc_site/src/views/typography/object_title.js new file mode 100644 index 0000000000000..83d56678072c6 --- /dev/null +++ b/ui_framework/doc_site/src/views/typography/object_title.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { + KuiObjectTitle, +} from '../../../../components'; + +export default () => ( + +

An h3 element is used for this object title

+ +); diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js index d1fa417887d37..b7bcbe8e2294b 100644 --- a/ui_framework/doc_site/src/views/typography/typography_example.js +++ b/ui_framework/doc_site/src/views/typography/typography_example.js @@ -19,6 +19,10 @@ import SectionTitle from './section_title'; const sectionTitleSource = require('!!raw!./section_title'); const sectionTitleHtml = renderToHtml(SectionTitle); +import ObjectTitle from './object_title'; +const objectTitleSource = require('!!raw!./object_title'); +const objectTitleHtml = renderToHtml(ObjectTitle); + export default props => ( ( + + + + This component identifies subsections within a section. + + + + + + ); diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index 6af70d3fbfe39..34d8d1f613a1b 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -7,6 +7,7 @@ export { } from './icon'; export { + KuiObjectTitle, KuiPageTitle, KuiSectionTitle, } from './typography'; diff --git a/ui_framework/src/components/typography/_index.scss b/ui_framework/src/components/typography/_index.scss index d7371a9ac9561..6ad9b4971c4d9 100644 --- a/ui_framework/src/components/typography/_index.scss +++ b/ui_framework/src/components/typography/_index.scss @@ -1,2 +1,3 @@ +@import 'object_title/index'; @import 'page_title/index'; @import 'section_title/index'; diff --git a/ui_framework/src/components/typography/index.js b/ui_framework/src/components/typography/index.js index df9fa1a720c10..841e1db5baa6d 100644 --- a/ui_framework/src/components/typography/index.js +++ b/ui_framework/src/components/typography/index.js @@ -1,3 +1,7 @@ +export { + KuiObjectTitle, +} from './object_title'; + export { KuiPageTitle, } from './page_title'; diff --git a/ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap b/ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap new file mode 100644 index 0000000000000..d694754141bcf --- /dev/null +++ b/ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiObjectTitle is rendered 1`] = ` +

+ Hello +

+`; diff --git a/ui_framework/src/components/typography/object_title/_index.scss b/ui_framework/src/components/typography/object_title/_index.scss new file mode 100644 index 0000000000000..f0a720d9bb611 --- /dev/null +++ b/ui_framework/src/components/typography/object_title/_index.scss @@ -0,0 +1 @@ +@import 'object_title'; diff --git a/ui_framework/src/components/typography/object_title/_object_title.scss b/ui_framework/src/components/typography/object_title/_object_title.scss new file mode 100644 index 0000000000000..be77b2b2c3379 --- /dev/null +++ b/ui_framework/src/components/typography/object_title/_object_title.scss @@ -0,0 +1,5 @@ +@include component('kuiObjectTitle') { + @extend %kuiFontSizeM; + color: $kuiTextColor; + font-weight: $kuiFontWeightLight; +} diff --git a/ui_framework/src/components/typography/object_title/index.js b/ui_framework/src/components/typography/object_title/index.js new file mode 100644 index 0000000000000..6a0467ea26016 --- /dev/null +++ b/ui_framework/src/components/typography/object_title/index.js @@ -0,0 +1 @@ +export { KuiObjectTitle } from './object_title'; diff --git a/ui_framework/src/components/typography/object_title/object_title.js b/ui_framework/src/components/typography/object_title/object_title.js new file mode 100644 index 0000000000000..1eeff5f575ec7 --- /dev/null +++ b/ui_framework/src/components/typography/object_title/object_title.js @@ -0,0 +1,20 @@ +import React, { + cloneElement, + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +export const KuiObjectTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiObjectTitle', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiObjectTitle.PropTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/ui_framework/src/components/typography/object_title/object_title.test.js b/ui_framework/src/components/typography/object_title/object_title.test.js new file mode 100644 index 0000000000000..a9e892df373c6 --- /dev/null +++ b/ui_framework/src/components/typography/object_title/object_title.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { render, shallow } from 'enzyme'; +import sinon from 'sinon'; +import { requiredProps } from '../../../test/required_props'; + +import { KuiObjectTitle } from './object_title'; + +describe('KuiObjectTitle', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From 192516100d57c361b9141247a47413970802b012 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 21 Jul 2017 17:09:36 -0700 Subject: [PATCH 05/12] Add Text. Make ObjectTitle italic. --- ui_framework/dist/ui_framework.css | 9 +++- .../doc_site/src/views/typography/text.js | 15 +++++++ .../src/views/typography/typography.js | 38 +++++++++++++++++ .../views/typography/typography_example.js | 42 +++++++++++++++++++ ui_framework/src/components/index.js | 1 + .../src/components/typography/_index.scss | 1 + .../src/components/typography/index.js | 4 ++ .../object_title/_object_title.scss | 1 + .../text/__snapshots__/text.test.js.snap | 11 +++++ .../components/typography/text/_index.scss | 1 + .../src/components/typography/text/_text.scss | 5 +++ .../src/components/typography/text/index.js | 1 + .../src/components/typography/text/text.js | 20 +++++++++ .../components/typography/text/text.test.js | 19 +++++++++ 14 files changed, 166 insertions(+), 2 deletions(-) create mode 100644 ui_framework/doc_site/src/views/typography/text.js create mode 100644 ui_framework/doc_site/src/views/typography/typography.js create mode 100644 ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap create mode 100644 ui_framework/src/components/typography/text/_index.scss create mode 100644 ui_framework/src/components/typography/text/_text.scss create mode 100644 ui_framework/src/components/typography/text/index.js create mode 100644 ui_framework/src/components/typography/text/text.js create mode 100644 ui_framework/src/components/typography/text/text.test.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index e1c6c7785db51..16b68c2fc5661 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -3,7 +3,7 @@ font-size: 0.875rem; line-height: 24px; } -.kuiObjectTitle { +.kuiObjectTitle, .kuiText { font-size: 16px; font-size: 1rem; line-height: 24px; } @@ -353,7 +353,8 @@ table { .kuiObjectTitle { color: #3F3F3F; - font-weight: 300; } + font-weight: 300; + font-style: italic; } .kuiPageTitle { color: #3F3F3F; @@ -362,3 +363,7 @@ table { .kuiSectionTitle { color: #3F3F3F; font-weight: 300; } + +.kuiText { + color: #3F3F3F; + font-weight: 400; } diff --git a/ui_framework/doc_site/src/views/typography/text.js b/ui_framework/doc_site/src/views/typography/text.js new file mode 100644 index 0000000000000..ded0b11c1126a --- /dev/null +++ b/ui_framework/doc_site/src/views/typography/text.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import { + KuiText, +} from '../../../../components'; + +export default () => ( + +

+ The quick brown fox jumped over the lazy dog. But the lazy dog wasn't lazy, it was just + practicing mindfulness, so really in the long run it was much more satisfied with its + life than that fox was. +

+ +); diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js new file mode 100644 index 0000000000000..bad5f0d377de8 --- /dev/null +++ b/ui_framework/doc_site/src/views/typography/typography.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { + KuiObjectTitle, + KuiPageTitle, + KuiSectionTitle, + KuiText, +} from '../../../../components'; + +export default () => ( +
+ +

This is the title of the page -- descriptive enough for ya?

+ + + +

And this is a section within the page

+ + + +

Note

+ + + +

+ The quick brown fox jumped over the lazy dog. +

+ + + +

+ But the lazy dog wasn't lazy, it was just + practicing mindfulness, so really in the long run it was much more satisfied with its + life than that fox was. +

+ +
+); diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js index b7bcbe8e2294b..74ec57caad6c2 100644 --- a/ui_framework/doc_site/src/views/typography/typography_example.js +++ b/ui_framework/doc_site/src/views/typography/typography_example.js @@ -11,6 +11,10 @@ import { GuideText, } from '../../components'; +import Typography from './typography'; +const typographySource = require('!!raw!./typography'); +const typographyHtml = renderToHtml(Typography); + import PageTitle from './page_title'; const pageTitleSource = require('!!raw!./page_title'); const pageTitleHtml = renderToHtml(PageTitle); @@ -23,8 +27,27 @@ import ObjectTitle from './object_title'; const objectTitleSource = require('!!raw!./object_title'); const objectTitleHtml = renderToHtml(ObjectTitle); +import Text from './text'; +const textSource = require('!!raw!./text'); +const textHtml = renderToHtml(Text); + export default props => ( + + + + + + ( + + + + You'll generally use this component for paragraphs. + + + + + + ); diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index 34d8d1f613a1b..904bc7d974f4d 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -10,4 +10,5 @@ export { KuiObjectTitle, KuiPageTitle, KuiSectionTitle, + KuiText, } from './typography'; diff --git a/ui_framework/src/components/typography/_index.scss b/ui_framework/src/components/typography/_index.scss index 6ad9b4971c4d9..6dc972f9ae7f5 100644 --- a/ui_framework/src/components/typography/_index.scss +++ b/ui_framework/src/components/typography/_index.scss @@ -1,3 +1,4 @@ @import 'object_title/index'; @import 'page_title/index'; @import 'section_title/index'; +@import 'text/index'; diff --git a/ui_framework/src/components/typography/index.js b/ui_framework/src/components/typography/index.js index 841e1db5baa6d..687753e2a6e3a 100644 --- a/ui_framework/src/components/typography/index.js +++ b/ui_framework/src/components/typography/index.js @@ -9,3 +9,7 @@ export { export { KuiSectionTitle, } from './section_title'; + +export { + KuiText, +} from './text'; diff --git a/ui_framework/src/components/typography/object_title/_object_title.scss b/ui_framework/src/components/typography/object_title/_object_title.scss index be77b2b2c3379..61a4bc507f263 100644 --- a/ui_framework/src/components/typography/object_title/_object_title.scss +++ b/ui_framework/src/components/typography/object_title/_object_title.scss @@ -2,4 +2,5 @@ @extend %kuiFontSizeM; color: $kuiTextColor; font-weight: $kuiFontWeightLight; + font-style: italic; } diff --git a/ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap b/ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap new file mode 100644 index 0000000000000..af1519396f820 --- /dev/null +++ b/ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiText is rendered 1`] = ` +

+ Hello +

+`; diff --git a/ui_framework/src/components/typography/text/_index.scss b/ui_framework/src/components/typography/text/_index.scss new file mode 100644 index 0000000000000..dcec0867b44d4 --- /dev/null +++ b/ui_framework/src/components/typography/text/_index.scss @@ -0,0 +1 @@ +@import 'text'; diff --git a/ui_framework/src/components/typography/text/_text.scss b/ui_framework/src/components/typography/text/_text.scss new file mode 100644 index 0000000000000..517394f024153 --- /dev/null +++ b/ui_framework/src/components/typography/text/_text.scss @@ -0,0 +1,5 @@ +@include component('kuiText') { + @extend %kuiFontSizeM; + color: $kuiTextColor; + font-weight: $kuiFontWeightRegular; +} diff --git a/ui_framework/src/components/typography/text/index.js b/ui_framework/src/components/typography/text/index.js new file mode 100644 index 0000000000000..b6a8bef37094f --- /dev/null +++ b/ui_framework/src/components/typography/text/index.js @@ -0,0 +1 @@ +export { KuiText } from './text'; diff --git a/ui_framework/src/components/typography/text/text.js b/ui_framework/src/components/typography/text/text.js new file mode 100644 index 0000000000000..c8ed46d44b50b --- /dev/null +++ b/ui_framework/src/components/typography/text/text.js @@ -0,0 +1,20 @@ +import React, { + cloneElement, + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +export const KuiText = ({ children, className, ...rest }) => { + const classes = classNames('kuiText', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiText.PropTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/ui_framework/src/components/typography/text/text.test.js b/ui_framework/src/components/typography/text/text.test.js new file mode 100644 index 0000000000000..03f3e4416e574 --- /dev/null +++ b/ui_framework/src/components/typography/text/text.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { render, shallow } from 'enzyme'; +import sinon from 'sinon'; +import { requiredProps } from '../../../test/required_props'; + +import { KuiText } from './text'; + +describe('KuiText', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From 1995e0470999657edcb26d0fc2b8591489cc49b1 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Jul 2017 09:33:17 -0700 Subject: [PATCH 06/12] Use black for titles. Remove italics. --- ui_framework/dist/ui_framework.css | 9 ++++----- .../typography/object_title/_object_title.scss | 3 +-- .../components/typography/page_title/_page_title.scss | 2 +- .../typography/section_title/_section_title.scss | 2 +- ui_framework/src/global_styling/variables/_colors.scss | 1 + 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 16b68c2fc5661..3a09b61c777dc 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -352,16 +352,15 @@ table { left: auto; } .kuiObjectTitle { - color: #3F3F3F; - font-weight: 300; - font-style: italic; } + color: #000; + font-weight: 300; } .kuiPageTitle { - color: #3F3F3F; + color: #000; font-weight: 300; } .kuiSectionTitle { - color: #3F3F3F; + color: #000; font-weight: 300; } .kuiText { diff --git a/ui_framework/src/components/typography/object_title/_object_title.scss b/ui_framework/src/components/typography/object_title/_object_title.scss index 61a4bc507f263..2c64d9e974639 100644 --- a/ui_framework/src/components/typography/object_title/_object_title.scss +++ b/ui_framework/src/components/typography/object_title/_object_title.scss @@ -1,6 +1,5 @@ @include component('kuiObjectTitle') { @extend %kuiFontSizeM; - color: $kuiTextColor; + color: $kuiTitleColor; font-weight: $kuiFontWeightLight; - font-style: italic; } diff --git a/ui_framework/src/components/typography/page_title/_page_title.scss b/ui_framework/src/components/typography/page_title/_page_title.scss index a42501cb674b1..efe156f4890cc 100644 --- a/ui_framework/src/components/typography/page_title/_page_title.scss +++ b/ui_framework/src/components/typography/page_title/_page_title.scss @@ -1,5 +1,5 @@ @include component('kuiPageTitle') { @extend %kuiFontSizeXL; - color: $kuiTextColor; + color: $kuiTitleColor; font-weight: $kuiFontWeightLight; } diff --git a/ui_framework/src/components/typography/section_title/_section_title.scss b/ui_framework/src/components/typography/section_title/_section_title.scss index 4ee683706c0bd..c8481d548b5d2 100644 --- a/ui_framework/src/components/typography/section_title/_section_title.scss +++ b/ui_framework/src/components/typography/section_title/_section_title.scss @@ -1,5 +1,5 @@ @include component('kuiSectionTitle') { @extend %kuiFontSizeL; - color: $kuiTextColor; + color: $kuiTitleColor; font-weight: $kuiFontWeightLight; } diff --git a/ui_framework/src/global_styling/variables/_colors.scss b/ui_framework/src/global_styling/variables/_colors.scss index 0b0734f503657..552fd0ccf75a8 100644 --- a/ui_framework/src/global_styling/variables/_colors.scss +++ b/ui_framework/src/global_styling/variables/_colors.scss @@ -30,5 +30,6 @@ $kuiColorFullShade: #000; // Every color below must be based mathmatically on the set above. $kuiTextColor: $kuiColorDarkestShade; +$kuiTitleColor: $kuiColorFullShade; $kuiLinkColor: $kuiColorPrimary; $kuiFocusBackgroundColor: tint($kuiColorPrimary, 90%); From b3023e0eea857adccdb1d51201357d4d91c23a30 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Jul 2017 09:40:50 -0700 Subject: [PATCH 07/12] Condense Typography components and reduce boilerplate. --- ui_framework/dist/ui_framework.css | 6 +- .../src/views/typography/typography.js | 6 +- .../src/components/typography/_index.scss | 5 +- .../components/typography/_typography.scss | 23 +++++++ .../src/components/typography/index.js | 13 +--- .../__snapshots__/object_title.test.js.snap | 11 ---- .../typography/object_title/_index.scss | 1 - .../object_title/_object_title.scss | 5 -- .../typography/object_title/index.js | 1 - .../typography/object_title/object_title.js | 20 ------ .../object_title/object_title.test.js | 19 ------ .../__snapshots__/page_title.test.js.snap | 11 ---- .../typography/page_title/_index.scss | 1 - .../typography/page_title/_page_title.scss | 5 -- .../components/typography/page_title/index.js | 1 - .../typography/page_title/page_title.js | 20 ------ .../typography/page_title/page_title.test.js | 19 ------ .../__snapshots__/section_title.test.js.snap | 11 ---- .../typography/section_title/_index.scss | 1 - .../section_title/_section_title.scss | 5 -- .../typography/section_title/index.js | 1 - .../typography/section_title/section_title.js | 20 ------ .../section_title/section_title.test.js | 19 ------ .../text/__snapshots__/text.test.js.snap | 11 ---- .../components/typography/text/_index.scss | 1 - .../src/components/typography/text/_text.scss | 5 -- .../src/components/typography/text/index.js | 1 - .../src/components/typography/text/text.js | 20 ------ .../components/typography/text/text.test.js | 19 ------ .../src/components/typography/typography.js | 65 +++++++++++++++++++ .../components/typography/typography.test.js | 63 ++++++++++++++++++ 31 files changed, 160 insertions(+), 249 deletions(-) create mode 100644 ui_framework/src/components/typography/_typography.scss delete mode 100644 ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap delete mode 100644 ui_framework/src/components/typography/object_title/_index.scss delete mode 100644 ui_framework/src/components/typography/object_title/_object_title.scss delete mode 100644 ui_framework/src/components/typography/object_title/index.js delete mode 100644 ui_framework/src/components/typography/object_title/object_title.js delete mode 100644 ui_framework/src/components/typography/object_title/object_title.test.js delete mode 100644 ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap delete mode 100644 ui_framework/src/components/typography/page_title/_index.scss delete mode 100644 ui_framework/src/components/typography/page_title/_page_title.scss delete mode 100644 ui_framework/src/components/typography/page_title/index.js delete mode 100644 ui_framework/src/components/typography/page_title/page_title.js delete mode 100644 ui_framework/src/components/typography/page_title/page_title.test.js delete mode 100644 ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap delete mode 100644 ui_framework/src/components/typography/section_title/_index.scss delete mode 100644 ui_framework/src/components/typography/section_title/_section_title.scss delete mode 100644 ui_framework/src/components/typography/section_title/index.js delete mode 100644 ui_framework/src/components/typography/section_title/section_title.js delete mode 100644 ui_framework/src/components/typography/section_title/section_title.test.js delete mode 100644 ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap delete mode 100644 ui_framework/src/components/typography/text/_index.scss delete mode 100644 ui_framework/src/components/typography/text/_text.scss delete mode 100644 ui_framework/src/components/typography/text/index.js delete mode 100644 ui_framework/src/components/typography/text/text.js delete mode 100644 ui_framework/src/components/typography/text/text.test.js create mode 100644 ui_framework/src/components/typography/typography.js create mode 100644 ui_framework/src/components/typography/typography.test.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 3a09b61c777dc..6543e9600d511 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -351,15 +351,15 @@ table { right: 16px; left: auto; } -.kuiObjectTitle { +.kuiPageTitle { color: #000; font-weight: 300; } -.kuiPageTitle { +.kuiSectionTitle { color: #000; font-weight: 300; } -.kuiSectionTitle { +.kuiObjectTitle { color: #000; font-weight: 300; } diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js index bad5f0d377de8..bf7622ed43927 100644 --- a/ui_framework/doc_site/src/views/typography/typography.js +++ b/ui_framework/doc_site/src/views/typography/typography.js @@ -29,9 +29,9 @@ export default () => (

- But the lazy dog wasn't lazy, it was just - practicing mindfulness, so really in the long run it was much more satisfied with its - life than that fox was. + But the dog wasn't lazy, it was just + practicing mindfulness, so it had a greater sense of + life-satisfaction than that fox with all its jumping.

diff --git a/ui_framework/src/components/typography/_index.scss b/ui_framework/src/components/typography/_index.scss index 6dc972f9ae7f5..3be796aeb3fd5 100644 --- a/ui_framework/src/components/typography/_index.scss +++ b/ui_framework/src/components/typography/_index.scss @@ -1,4 +1 @@ -@import 'object_title/index'; -@import 'page_title/index'; -@import 'section_title/index'; -@import 'text/index'; +@import 'typography'; diff --git a/ui_framework/src/components/typography/_typography.scss b/ui_framework/src/components/typography/_typography.scss new file mode 100644 index 0000000000000..2b6227c0bf889 --- /dev/null +++ b/ui_framework/src/components/typography/_typography.scss @@ -0,0 +1,23 @@ +@include component('kuiPageTitle') { + @extend %kuiFontSizeXL; + color: $kuiTitleColor; + font-weight: $kuiFontWeightLight; +} + +@include component('kuiSectionTitle') { + @extend %kuiFontSizeL; + color: $kuiTitleColor; + font-weight: $kuiFontWeightLight; +} + +@include component('kuiObjectTitle') { + @extend %kuiFontSizeM; + color: $kuiTitleColor; + font-weight: $kuiFontWeightLight; +} + +@include component('kuiText') { + @extend %kuiFontSizeM; + color: $kuiTextColor; + font-weight: $kuiFontWeightRegular; +} diff --git a/ui_framework/src/components/typography/index.js b/ui_framework/src/components/typography/index.js index 687753e2a6e3a..036f244101f3c 100644 --- a/ui_framework/src/components/typography/index.js +++ b/ui_framework/src/components/typography/index.js @@ -1,15 +1,6 @@ -export { - KuiObjectTitle, -} from './object_title'; - export { KuiPageTitle, -} from './page_title'; - -export { KuiSectionTitle, -} from './section_title'; - -export { + KuiObjectTitle, KuiText, -} from './text'; +} from './typography'; diff --git a/ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap b/ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap deleted file mode 100644 index d694754141bcf..0000000000000 --- a/ui_framework/src/components/typography/object_title/__snapshots__/object_title.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`KuiObjectTitle is rendered 1`] = ` -

- Hello -

-`; diff --git a/ui_framework/src/components/typography/object_title/_index.scss b/ui_framework/src/components/typography/object_title/_index.scss deleted file mode 100644 index f0a720d9bb611..0000000000000 --- a/ui_framework/src/components/typography/object_title/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'object_title'; diff --git a/ui_framework/src/components/typography/object_title/_object_title.scss b/ui_framework/src/components/typography/object_title/_object_title.scss deleted file mode 100644 index 2c64d9e974639..0000000000000 --- a/ui_framework/src/components/typography/object_title/_object_title.scss +++ /dev/null @@ -1,5 +0,0 @@ -@include component('kuiObjectTitle') { - @extend %kuiFontSizeM; - color: $kuiTitleColor; - font-weight: $kuiFontWeightLight; -} diff --git a/ui_framework/src/components/typography/object_title/index.js b/ui_framework/src/components/typography/object_title/index.js deleted file mode 100644 index 6a0467ea26016..0000000000000 --- a/ui_framework/src/components/typography/object_title/index.js +++ /dev/null @@ -1 +0,0 @@ -export { KuiObjectTitle } from './object_title'; diff --git a/ui_framework/src/components/typography/object_title/object_title.js b/ui_framework/src/components/typography/object_title/object_title.js deleted file mode 100644 index 1eeff5f575ec7..0000000000000 --- a/ui_framework/src/components/typography/object_title/object_title.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { - cloneElement, - PropTypes, -} from 'react'; -import classNames from 'classnames'; - -export const KuiObjectTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiObjectTitle', className); - - const props = { - className: classes, - ...rest, - }; - - return cloneElement(children, props); -}; - -KuiObjectTitle.PropTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/ui_framework/src/components/typography/object_title/object_title.test.js b/ui_framework/src/components/typography/object_title/object_title.test.js deleted file mode 100644 index a9e892df373c6..0000000000000 --- a/ui_framework/src/components/typography/object_title/object_title.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { render, shallow } from 'enzyme'; -import sinon from 'sinon'; -import { requiredProps } from '../../../test/required_props'; - -import { KuiObjectTitle } from './object_title'; - -describe('KuiObjectTitle', () => { - test('is rendered', () => { - const component = render( - -

Hello

- - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap b/ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap deleted file mode 100644 index 8fced9461d3c4..0000000000000 --- a/ui_framework/src/components/typography/page_title/__snapshots__/page_title.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`KuiPageTitle is rendered 1`] = ` -

- Hello -

-`; diff --git a/ui_framework/src/components/typography/page_title/_index.scss b/ui_framework/src/components/typography/page_title/_index.scss deleted file mode 100644 index 232e6d947ca3b..0000000000000 --- a/ui_framework/src/components/typography/page_title/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'page_title'; diff --git a/ui_framework/src/components/typography/page_title/_page_title.scss b/ui_framework/src/components/typography/page_title/_page_title.scss deleted file mode 100644 index efe156f4890cc..0000000000000 --- a/ui_framework/src/components/typography/page_title/_page_title.scss +++ /dev/null @@ -1,5 +0,0 @@ -@include component('kuiPageTitle') { - @extend %kuiFontSizeXL; - color: $kuiTitleColor; - font-weight: $kuiFontWeightLight; -} diff --git a/ui_framework/src/components/typography/page_title/index.js b/ui_framework/src/components/typography/page_title/index.js deleted file mode 100644 index 16953686bd1e0..0000000000000 --- a/ui_framework/src/components/typography/page_title/index.js +++ /dev/null @@ -1 +0,0 @@ -export { KuiPageTitle } from './page_title'; diff --git a/ui_framework/src/components/typography/page_title/page_title.js b/ui_framework/src/components/typography/page_title/page_title.js deleted file mode 100644 index f39e23c477547..0000000000000 --- a/ui_framework/src/components/typography/page_title/page_title.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { - cloneElement, - PropTypes, -} from 'react'; -import classNames from 'classnames'; - -export const KuiPageTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiPageTitle', className); - - const props = { - className: classes, - ...rest, - }; - - return cloneElement(children, props); -}; - -KuiPageTitle.PropTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/ui_framework/src/components/typography/page_title/page_title.test.js b/ui_framework/src/components/typography/page_title/page_title.test.js deleted file mode 100644 index ddee24d0856ea..0000000000000 --- a/ui_framework/src/components/typography/page_title/page_title.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { render, shallow } from 'enzyme'; -import sinon from 'sinon'; -import { requiredProps } from '../../../test/required_props'; - -import { KuiPageTitle } from './page_title'; - -describe('KuiPageTitle', () => { - test('is rendered', () => { - const component = render( - -

Hello

- - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap b/ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap deleted file mode 100644 index 048fbf77f38b5..0000000000000 --- a/ui_framework/src/components/typography/section_title/__snapshots__/section_title.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`KuiSectionTitle is rendered 1`] = ` -

- Hello -

-`; diff --git a/ui_framework/src/components/typography/section_title/_index.scss b/ui_framework/src/components/typography/section_title/_index.scss deleted file mode 100644 index e185c4a877316..0000000000000 --- a/ui_framework/src/components/typography/section_title/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'section_title'; diff --git a/ui_framework/src/components/typography/section_title/_section_title.scss b/ui_framework/src/components/typography/section_title/_section_title.scss deleted file mode 100644 index c8481d548b5d2..0000000000000 --- a/ui_framework/src/components/typography/section_title/_section_title.scss +++ /dev/null @@ -1,5 +0,0 @@ -@include component('kuiSectionTitle') { - @extend %kuiFontSizeL; - color: $kuiTitleColor; - font-weight: $kuiFontWeightLight; -} diff --git a/ui_framework/src/components/typography/section_title/index.js b/ui_framework/src/components/typography/section_title/index.js deleted file mode 100644 index e884b669165e0..0000000000000 --- a/ui_framework/src/components/typography/section_title/index.js +++ /dev/null @@ -1 +0,0 @@ -export { KuiSectionTitle } from './section_title'; diff --git a/ui_framework/src/components/typography/section_title/section_title.js b/ui_framework/src/components/typography/section_title/section_title.js deleted file mode 100644 index ee2c3f51e9032..0000000000000 --- a/ui_framework/src/components/typography/section_title/section_title.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { - cloneElement, - PropTypes, -} from 'react'; -import classNames from 'classnames'; - -export const KuiSectionTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiSectionTitle', className); - - const props = { - className: classes, - ...rest, - }; - - return cloneElement(children, props); -}; - -KuiSectionTitle.PropTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/ui_framework/src/components/typography/section_title/section_title.test.js b/ui_framework/src/components/typography/section_title/section_title.test.js deleted file mode 100644 index ac810519b9f93..0000000000000 --- a/ui_framework/src/components/typography/section_title/section_title.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { render, shallow } from 'enzyme'; -import sinon from 'sinon'; -import { requiredProps } from '../../../test/required_props'; - -import { KuiSectionTitle } from './section_title'; - -describe('KuiSectionTitle', () => { - test('is rendered', () => { - const component = render( - -

Hello

- - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap b/ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap deleted file mode 100644 index af1519396f820..0000000000000 --- a/ui_framework/src/components/typography/text/__snapshots__/text.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`KuiText is rendered 1`] = ` -

- Hello -

-`; diff --git a/ui_framework/src/components/typography/text/_index.scss b/ui_framework/src/components/typography/text/_index.scss deleted file mode 100644 index dcec0867b44d4..0000000000000 --- a/ui_framework/src/components/typography/text/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'text'; diff --git a/ui_framework/src/components/typography/text/_text.scss b/ui_framework/src/components/typography/text/_text.scss deleted file mode 100644 index 517394f024153..0000000000000 --- a/ui_framework/src/components/typography/text/_text.scss +++ /dev/null @@ -1,5 +0,0 @@ -@include component('kuiText') { - @extend %kuiFontSizeM; - color: $kuiTextColor; - font-weight: $kuiFontWeightRegular; -} diff --git a/ui_framework/src/components/typography/text/index.js b/ui_framework/src/components/typography/text/index.js deleted file mode 100644 index b6a8bef37094f..0000000000000 --- a/ui_framework/src/components/typography/text/index.js +++ /dev/null @@ -1 +0,0 @@ -export { KuiText } from './text'; diff --git a/ui_framework/src/components/typography/text/text.js b/ui_framework/src/components/typography/text/text.js deleted file mode 100644 index c8ed46d44b50b..0000000000000 --- a/ui_framework/src/components/typography/text/text.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { - cloneElement, - PropTypes, -} from 'react'; -import classNames from 'classnames'; - -export const KuiText = ({ children, className, ...rest }) => { - const classes = classNames('kuiText', className); - - const props = { - className: classes, - ...rest, - }; - - return cloneElement(children, props); -}; - -KuiText.PropTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/ui_framework/src/components/typography/text/text.test.js b/ui_framework/src/components/typography/text/text.test.js deleted file mode 100644 index 03f3e4416e574..0000000000000 --- a/ui_framework/src/components/typography/text/text.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { render, shallow } from 'enzyme'; -import sinon from 'sinon'; -import { requiredProps } from '../../../test/required_props'; - -import { KuiText } from './text'; - -describe('KuiText', () => { - test('is rendered', () => { - const component = render( - -

Hello

- - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js new file mode 100644 index 0000000000000..7ddd59df2b87d --- /dev/null +++ b/ui_framework/src/components/typography/typography.js @@ -0,0 +1,65 @@ +import React, { + cloneElement, + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +export const KuiPageTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiPageTitle', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiPageTitle.PropTypes = { + children: PropTypes.node.isRequired, +}; + +export const KuiObjectTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiObjectTitle', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiObjectTitle.PropTypes = { + children: PropTypes.node.isRequired, +}; + +export const KuiSectionTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiSectionTitle', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiSectionTitle.PropTypes = { + children: PropTypes.node.isRequired, +}; + +export const KuiText = ({ children, className, ...rest }) => { + const classes = classNames('kuiText', className); + + const props = { + className: classes, + ...rest, + }; + + return cloneElement(children, props); +}; + +KuiText.PropTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/ui_framework/src/components/typography/typography.test.js b/ui_framework/src/components/typography/typography.test.js new file mode 100644 index 0000000000000..a1d69e061e9bd --- /dev/null +++ b/ui_framework/src/components/typography/typography.test.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { render, shallow } from 'enzyme'; +import sinon from 'sinon'; +import { requiredProps } from '../../../test/required_props'; + +import { + KuiPageTitle, + KuiSectionTitle, + KuiObjectTitle, + KuiText, +} from './typography'; + +describe('KuiPageTitle', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); + +describe('KuiSectionTitle', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); + +describe('KuiObjectTitle', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); + +describe('KuiText', () => { + test('is rendered', () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From a48a19b700ede33e4987278160fc5cd311f4d500 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Jul 2017 10:52:32 -0700 Subject: [PATCH 08/12] Use t-shirt sizes for Typography component names. --- ui_framework/dist/ui_framework.css | 12 +++---- .../{page_title.js => large_title.js} | 12 +++---- .../{section_title.js => medium_title.js} | 6 ++-- .../{object_title.js => small_title.js} | 6 ++-- .../src/views/typography/typography.js | 18 +++++----- .../views/typography/typography_example.js | 34 +++++++++---------- ui_framework/src/components/index.js | 6 ++-- .../components/typography/_typography.scss | 6 ++-- .../src/components/typography/index.js | 6 ++-- .../src/components/typography/typography.js | 18 +++++----- .../components/typography/typography.test.js | 24 ++++++------- 11 files changed, 74 insertions(+), 74 deletions(-) rename ui_framework/doc_site/src/views/typography/{page_title.js => large_title.js} (50%) rename ui_framework/doc_site/src/views/typography/{section_title.js => medium_title.js} (70%) rename ui_framework/doc_site/src/views/typography/{object_title.js => small_title.js} (72%) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 6543e9600d511..a20d327e87670 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -3,17 +3,17 @@ font-size: 0.875rem; line-height: 24px; } -.kuiObjectTitle, .kuiText { +.kuiSmallTitle, .kuiText { font-size: 16px; font-size: 1rem; line-height: 24px; } -.kuiSectionTitle { +.kuiMediumTitle { font-size: 24px; font-size: 1.5rem; line-height: 36px; } -.kuiPageTitle { +.kuiLargeTitle { font-size: 32px; font-size: 2rem; line-height: 48px; } @@ -351,15 +351,15 @@ table { right: 16px; left: auto; } -.kuiPageTitle { +.kuiLargeTitle { color: #000; font-weight: 300; } -.kuiSectionTitle { +.kuiMediumTitle { color: #000; font-weight: 300; } -.kuiObjectTitle { +.kuiSmallTitle { color: #000; font-weight: 300; } diff --git a/ui_framework/doc_site/src/views/typography/page_title.js b/ui_framework/doc_site/src/views/typography/large_title.js similarity index 50% rename from ui_framework/doc_site/src/views/typography/page_title.js rename to ui_framework/doc_site/src/views/typography/large_title.js index a7a92a2cfa8e7..c96dfdfe98b5d 100644 --- a/ui_framework/doc_site/src/views/typography/page_title.js +++ b/ui_framework/doc_site/src/views/typography/large_title.js @@ -1,17 +1,17 @@ import React from 'react'; import { - KuiPageTitle, + KuiLargeTitle, } from '../../../../components'; export default () => (
- +

This is the title of the page

- + - -

This is a PageTitle applied to an h2 element

- + +

This is a LargeTitle applied to an h2 element

+
); diff --git a/ui_framework/doc_site/src/views/typography/section_title.js b/ui_framework/doc_site/src/views/typography/medium_title.js similarity index 70% rename from ui_framework/doc_site/src/views/typography/section_title.js rename to ui_framework/doc_site/src/views/typography/medium_title.js index 06511050b1a1a..7e9a66d5ac60f 100644 --- a/ui_framework/doc_site/src/views/typography/section_title.js +++ b/ui_framework/doc_site/src/views/typography/medium_title.js @@ -1,11 +1,11 @@ import React from 'react'; import { - KuiSectionTitle, + KuiMediumTitle, } from '../../../../components'; export default () => ( - +

Here's the title of a section

- + ); diff --git a/ui_framework/doc_site/src/views/typography/object_title.js b/ui_framework/doc_site/src/views/typography/small_title.js similarity index 72% rename from ui_framework/doc_site/src/views/typography/object_title.js rename to ui_framework/doc_site/src/views/typography/small_title.js index 83d56678072c6..21bb4175aa70f 100644 --- a/ui_framework/doc_site/src/views/typography/object_title.js +++ b/ui_framework/doc_site/src/views/typography/small_title.js @@ -1,11 +1,11 @@ import React from 'react'; import { - KuiObjectTitle, + KuiSmallTitle, } from '../../../../components'; export default () => ( - +

An h3 element is used for this object title

- + ); diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js index bf7622ed43927..73da2d3547dc4 100644 --- a/ui_framework/doc_site/src/views/typography/typography.js +++ b/ui_framework/doc_site/src/views/typography/typography.js @@ -1,25 +1,25 @@ import React from 'react'; import { - KuiObjectTitle, - KuiPageTitle, - KuiSectionTitle, + KuiSmallTitle, + KuiLargeTitle, + KuiMediumTitle, KuiText, } from '../../../../components'; export default () => (
- +

This is the title of the page -- descriptive enough for ya?

- + - +

And this is a section within the page

- + - +

Note

- +

diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js index 74ec57caad6c2..f412c214ac5ba 100644 --- a/ui_framework/doc_site/src/views/typography/typography_example.js +++ b/ui_framework/doc_site/src/views/typography/typography_example.js @@ -15,17 +15,17 @@ import Typography from './typography'; const typographySource = require('!!raw!./typography'); const typographyHtml = renderToHtml(Typography); -import PageTitle from './page_title'; -const pageTitleSource = require('!!raw!./page_title'); -const pageTitleHtml = renderToHtml(PageTitle); +import LargeTitle from './large_title'; +const pageTitleSource = require('!!raw!./large_title'); +const pageTitleHtml = renderToHtml(LargeTitle); -import SectionTitle from './section_title'; -const sectionTitleSource = require('!!raw!./section_title'); -const sectionTitleHtml = renderToHtml(SectionTitle); +import MediumTitle from './medium_title'; +const sectionTitleSource = require('!!raw!./medium_title'); +const sectionTitleHtml = renderToHtml(MediumTitle); -import ObjectTitle from './object_title'; -const objectTitleSource = require('!!raw!./object_title'); -const objectTitleHtml = renderToHtml(ObjectTitle); +import SmallTitle from './small_title'; +const objectTitleSource = require('!!raw!./small_title'); +const objectTitleHtml = renderToHtml(SmallTitle); import Text from './text'; const textSource = require('!!raw!./text'); @@ -49,7 +49,7 @@ export default props => ( ( }]} > - The PageTitle component identifies the page you're on. Generally, there should + The LargeTitle component identifies the page you're on. Generally, there should only be one of these used at a time. @@ -69,12 +69,12 @@ export default props => ( - + ( }]} > - The SectionTitle component identifies sections within a page. + The MediumTitle component identifies sections within a page. - + ( - + diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index 904bc7d974f4d..9f80633846a42 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -7,8 +7,8 @@ export { } from './icon'; export { - KuiObjectTitle, - KuiPageTitle, - KuiSectionTitle, + KuiSmallTitle, + KuiLargeTitle, + KuiMediumTitle, KuiText, } from './typography'; diff --git a/ui_framework/src/components/typography/_typography.scss b/ui_framework/src/components/typography/_typography.scss index 2b6227c0bf889..b7c9309e5b082 100644 --- a/ui_framework/src/components/typography/_typography.scss +++ b/ui_framework/src/components/typography/_typography.scss @@ -1,16 +1,16 @@ -@include component('kuiPageTitle') { +@include component('kuiLargeTitle') { @extend %kuiFontSizeXL; color: $kuiTitleColor; font-weight: $kuiFontWeightLight; } -@include component('kuiSectionTitle') { +@include component('kuiMediumTitle') { @extend %kuiFontSizeL; color: $kuiTitleColor; font-weight: $kuiFontWeightLight; } -@include component('kuiObjectTitle') { +@include component('kuiSmallTitle') { @extend %kuiFontSizeM; color: $kuiTitleColor; font-weight: $kuiFontWeightLight; diff --git a/ui_framework/src/components/typography/index.js b/ui_framework/src/components/typography/index.js index 036f244101f3c..3dd95e0ce1e1b 100644 --- a/ui_framework/src/components/typography/index.js +++ b/ui_framework/src/components/typography/index.js @@ -1,6 +1,6 @@ export { - KuiPageTitle, - KuiSectionTitle, - KuiObjectTitle, + KuiLargeTitle, + KuiMediumTitle, + KuiSmallTitle, KuiText, } from './typography'; diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js index 7ddd59df2b87d..494828c9b2276 100644 --- a/ui_framework/src/components/typography/typography.js +++ b/ui_framework/src/components/typography/typography.js @@ -4,8 +4,8 @@ import React, { } from 'react'; import classNames from 'classnames'; -export const KuiPageTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiPageTitle', className); +export const KuiLargeTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiLargeTitle', className); const props = { className: classes, @@ -15,12 +15,12 @@ export const KuiPageTitle = ({ children, className, ...rest }) => { return cloneElement(children, props); }; -KuiPageTitle.PropTypes = { +KuiLargeTitle.PropTypes = { children: PropTypes.node.isRequired, }; -export const KuiObjectTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiObjectTitle', className); +export const KuiSmallTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiSmallTitle', className); const props = { className: classes, @@ -30,12 +30,12 @@ export const KuiObjectTitle = ({ children, className, ...rest }) => { return cloneElement(children, props); }; -KuiObjectTitle.PropTypes = { +KuiSmallTitle.PropTypes = { children: PropTypes.node.isRequired, }; -export const KuiSectionTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiSectionTitle', className); +export const KuiMediumTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiMediumTitle', className); const props = { className: classes, @@ -45,7 +45,7 @@ export const KuiSectionTitle = ({ children, className, ...rest }) => { return cloneElement(children, props); }; -KuiSectionTitle.PropTypes = { +KuiMediumTitle.PropTypes = { children: PropTypes.node.isRequired, }; diff --git a/ui_framework/src/components/typography/typography.test.js b/ui_framework/src/components/typography/typography.test.js index a1d69e061e9bd..23c6783293298 100644 --- a/ui_framework/src/components/typography/typography.test.js +++ b/ui_framework/src/components/typography/typography.test.js @@ -4,18 +4,18 @@ import sinon from 'sinon'; import { requiredProps } from '../../../test/required_props'; import { - KuiPageTitle, - KuiSectionTitle, - KuiObjectTitle, + KuiLargeTitle, + KuiMediumTitle, + KuiSmallTitle, KuiText, } from './typography'; -describe('KuiPageTitle', () => { +describe('KuiLargeTitle', () => { test('is rendered', () => { const component = render( - +

Hello

- + ); expect(component) @@ -23,12 +23,12 @@ describe('KuiPageTitle', () => { }); }); -describe('KuiSectionTitle', () => { +describe('KuiMediumTitle', () => { test('is rendered', () => { const component = render( - +

Hello

- + ); expect(component) @@ -36,12 +36,12 @@ describe('KuiSectionTitle', () => { }); }); -describe('KuiObjectTitle', () => { +describe('KuiSmallTitle', () => { test('is rendered', () => { const component = render( - +

Hello

- + ); expect(component) From 1cd0cb3d40349d3c1d15c7de97e81c4778955eda Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Jul 2017 11:03:57 -0700 Subject: [PATCH 09/12] Switch from Ubuntu Mono to Roboto Mono. Add codeFont utility. --- ui_framework/dist/ui_framework.css | 3 +++ ui_framework/doc_site/build/index.html | 2 +- .../doc_site/src/components/guide_code/_guide_code.scss | 2 +- .../src/components/guide_code_viewer/_guide_code_viewer.scss | 2 +- ui_framework/src/global_styling/utilities/_typography.scss | 4 ++++ 5 files changed, 10 insertions(+), 3 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index a20d327e87670..1cf1837f7c754 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1,3 +1,6 @@ +.kui--codeFont { + font-family: "Roboto Mono", monospace; } + .kui--fontSizeSmall, .kuiKeyPad { font-size: 14px; font-size: 0.875rem; diff --git a/ui_framework/doc_site/build/index.html b/ui_framework/doc_site/build/index.html index 89d860033feb2..9d5a832497347 100644 --- a/ui_framework/doc_site/build/index.html +++ b/ui_framework/doc_site/build/index.html @@ -2,7 +2,7 @@ - + diff --git a/ui_framework/doc_site/src/components/guide_code/_guide_code.scss b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss index 084c74fec9219..8ae357af031de 100644 --- a/ui_framework/doc_site/src/components/guide_code/_guide_code.scss +++ b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss @@ -1,6 +1,6 @@ .guideCode { padding: 2px 4px; - font-family: 'Ubuntu Mono', monospace; + font-family: 'Roboto Mono', monospace; background-color: #e8e8e8; color: #565656; } diff --git a/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss index 11883f9e79cbe..0e1bffeaf92a8 100644 --- a/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss +++ b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss @@ -64,7 +64,7 @@ color: #637c84; font-size: 14px; line-height: 1.3; - font-family: 'Ubuntu Mono', monospace; + font-family: 'Roboto Mono', monospace; } .hljs-keyword { diff --git a/ui_framework/src/global_styling/utilities/_typography.scss b/ui_framework/src/global_styling/utilities/_typography.scss index 836166025e443..2f7e2791d3b09 100644 --- a/ui_framework/src/global_styling/utilities/_typography.scss +++ b/ui_framework/src/global_styling/utilities/_typography.scss @@ -17,3 +17,7 @@ @include utility('fontSizeSmall') { @extend %kuiFontSizeS; } + +@include utility('codeFont') { + @extend %kuiCodeFont; +} From 6ad9b40d150e79befbc46e8e2158a7a13e1af9fe Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Jul 2017 11:07:06 -0700 Subject: [PATCH 10/12] Add subduedText utility. --- ui_framework/dist/ui_framework.css | 3 +++ ui_framework/doc_site/src/views/typography/subdued_text.js | 0 ui_framework/src/global_styling/utilities/_typography.scss | 4 ++++ 3 files changed, 7 insertions(+) create mode 100644 ui_framework/doc_site/src/views/typography/subdued_text.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 1cf1837f7c754..78bf0cfa13f91 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -146,6 +146,9 @@ table { .kui--verticalAlignMiddle { vertical-align: middle !important; } +.kui--subduedText { + color: #666; } + .kui--bottomShadow { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } diff --git a/ui_framework/doc_site/src/views/typography/subdued_text.js b/ui_framework/doc_site/src/views/typography/subdued_text.js new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/ui_framework/src/global_styling/utilities/_typography.scss b/ui_framework/src/global_styling/utilities/_typography.scss index 2f7e2791d3b09..d7fa32bd9563d 100644 --- a/ui_framework/src/global_styling/utilities/_typography.scss +++ b/ui_framework/src/global_styling/utilities/_typography.scss @@ -21,3 +21,7 @@ @include utility('codeFont') { @extend %kuiCodeFont; } + +@include utility('subduedText') { + color: $kuiColorDarkShade; +} From 30a47fdc4378d84a55c25d95ef52645ff86d5015 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Jul 2017 11:12:14 -0700 Subject: [PATCH 11/12] Fix tests. --- .../__snapshots__/typography.test.js.snap | 41 +++++++++++++++++++ .../components/typography/typography.test.js | 2 +- 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 ui_framework/src/components/typography/__snapshots__/typography.test.js.snap diff --git a/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap b/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap new file mode 100644 index 0000000000000..723f84a968d06 --- /dev/null +++ b/ui_framework/src/components/typography/__snapshots__/typography.test.js.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiLargeTitle is rendered 1`] = ` +

+ Hello +

+`; + +exports[`KuiMediumTitle is rendered 1`] = ` +

+ Hello +

+`; + +exports[`KuiSmallTitle is rendered 1`] = ` +

+ Hello +

+`; + +exports[`KuiText is rendered 1`] = ` +

+ Hello +

+`; diff --git a/ui_framework/src/components/typography/typography.test.js b/ui_framework/src/components/typography/typography.test.js index 23c6783293298..061aed93c2ddf 100644 --- a/ui_framework/src/components/typography/typography.test.js +++ b/ui_framework/src/components/typography/typography.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render, shallow } from 'enzyme'; import sinon from 'sinon'; -import { requiredProps } from '../../../test/required_props'; +import { requiredProps } from '../../test/required_props'; import { KuiLargeTitle, From 18cc84c3822971ae8a2f96ee272a1d3e2cd1dc1f Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Jul 2017 15:00:19 -0700 Subject: [PATCH 12/12] Refactor Title to use size modifiers. --- ui_framework/dist/ui_framework.css | 16 ++----- .../doc_site/src/services/routes/routes.js | 1 + .../doc_site/src/views/header/header.html | 2 +- .../src/views/typography/large_title.js | 10 ++-- .../src/views/typography/medium_title.js | 6 +-- .../src/views/typography/small_title.js | 8 ++-- .../src/views/typography/subdued_text.js | 0 .../src/views/typography/typography.js | 16 +++---- .../views/typography/typography_example.js | 13 +++-- ui_framework/src/components/index.js | 4 +- .../components/typography/_typography.scss | 20 ++++---- .../src/components/typography/index.js | 4 +- .../src/components/typography/typography.js | 38 ++++----------- .../components/typography/typography.test.js | 48 +++++++------------ 14 files changed, 67 insertions(+), 119 deletions(-) delete mode 100644 ui_framework/doc_site/src/views/typography/subdued_text.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 78bf0cfa13f91..cf7a2540edfba 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -6,17 +6,17 @@ font-size: 0.875rem; line-height: 24px; } -.kuiSmallTitle, .kuiText { +.kuiTitle--small, .kuiText { font-size: 16px; font-size: 1rem; line-height: 24px; } -.kuiMediumTitle { +.kuiTitle { font-size: 24px; font-size: 1.5rem; line-height: 36px; } -.kuiLargeTitle { +.kuiTitle--large { font-size: 32px; font-size: 2rem; line-height: 48px; } @@ -357,15 +357,7 @@ table { right: 16px; left: auto; } -.kuiLargeTitle { - color: #000; - font-weight: 300; } - -.kuiMediumTitle { - color: #000; - font-weight: 300; } - -.kuiSmallTitle { +.kuiTitle { color: #000; font-weight: 300; } diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index dbcab9ddf94fe..f5ca05abd224a 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/ui_framework/doc_site/src/services/routes/routes.js @@ -20,6 +20,7 @@ const components = [{ }, { name: 'Icon', component: IconExample, + hasReact: true, }, { name: 'Header', component: HeaderExample, diff --git a/ui_framework/doc_site/src/views/header/header.html b/ui_framework/doc_site/src/views/header/header.html index 073e9c94288af..a37152915ce64 100644 --- a/ui_framework/doc_site/src/views/header/header.html +++ b/ui_framework/doc_site/src/views/header/header.html @@ -58,7 +58,7 @@

Discover

- +

Discover

diff --git a/ui_framework/doc_site/src/views/typography/large_title.js b/ui_framework/doc_site/src/views/typography/large_title.js index c96dfdfe98b5d..f2e32893fd288 100644 --- a/ui_framework/doc_site/src/views/typography/large_title.js +++ b/ui_framework/doc_site/src/views/typography/large_title.js @@ -1,17 +1,17 @@ import React from 'react'; import { - KuiLargeTitle, + KuiTitle, } from '../../../../components'; export default () => (
- +

This is the title of the page

- + - +

This is a LargeTitle applied to an h2 element

- +
); diff --git a/ui_framework/doc_site/src/views/typography/medium_title.js b/ui_framework/doc_site/src/views/typography/medium_title.js index 7e9a66d5ac60f..4f1faaf2a4d67 100644 --- a/ui_framework/doc_site/src/views/typography/medium_title.js +++ b/ui_framework/doc_site/src/views/typography/medium_title.js @@ -1,11 +1,11 @@ import React from 'react'; import { - KuiMediumTitle, + KuiTitle, } from '../../../../components'; export default () => ( - +

Here's the title of a section

- + ); diff --git a/ui_framework/doc_site/src/views/typography/small_title.js b/ui_framework/doc_site/src/views/typography/small_title.js index 21bb4175aa70f..e48c5a4bde803 100644 --- a/ui_framework/doc_site/src/views/typography/small_title.js +++ b/ui_framework/doc_site/src/views/typography/small_title.js @@ -1,11 +1,11 @@ import React from 'react'; import { - KuiSmallTitle, + KuiTitle, } from '../../../../components'; export default () => ( - -

An h3 element is used for this object title

- + +

An h3 element is used for this title

+ ); diff --git a/ui_framework/doc_site/src/views/typography/subdued_text.js b/ui_framework/doc_site/src/views/typography/subdued_text.js deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js index 73da2d3547dc4..7b38493da33d4 100644 --- a/ui_framework/doc_site/src/views/typography/typography.js +++ b/ui_framework/doc_site/src/views/typography/typography.js @@ -1,25 +1,23 @@ import React from 'react'; import { - KuiSmallTitle, - KuiLargeTitle, - KuiMediumTitle, + KuiTitle, KuiText, } from '../../../../components'; export default () => (
- +

This is the title of the page -- descriptive enough for ya?

- + - +

And this is a section within the page

- + - +

Note

- +

diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js index f412c214ac5ba..a0c73ad360954 100644 --- a/ui_framework/doc_site/src/views/typography/typography_example.js +++ b/ui_framework/doc_site/src/views/typography/typography_example.js @@ -3,7 +3,6 @@ import React from 'react'; import { renderToHtml } from '../../services'; import { - GuideCode, GuideDemo, GuidePage, GuideSection, @@ -49,7 +48,7 @@ export default props => ( ( }]} > - The LargeTitle component identifies the page you're on. Generally, there should + The large size is usually used to identify the page you're on. Generally, there should only be one of these used at a time. @@ -74,7 +73,7 @@ export default props => ( ( }]} > - The MediumTitle component identifies sections within a page. + This size is commonly used to identify sections within a page. It's also the default size. @@ -93,7 +92,7 @@ export default props => ( ( }]} > - This component identifies subsections within a section. + This size is commonly used to identify subsections within a section. diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index 9f80633846a42..6d87fe0041152 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -7,8 +7,6 @@ export { } from './icon'; export { - KuiSmallTitle, - KuiLargeTitle, - KuiMediumTitle, + KuiTitle, KuiText, } from './typography'; diff --git a/ui_framework/src/components/typography/_typography.scss b/ui_framework/src/components/typography/_typography.scss index b7c9309e5b082..db672c0b086af 100644 --- a/ui_framework/src/components/typography/_typography.scss +++ b/ui_framework/src/components/typography/_typography.scss @@ -1,19 +1,15 @@ -@include component('kuiLargeTitle') { - @extend %kuiFontSizeXL; - color: $kuiTitleColor; - font-weight: $kuiFontWeightLight; -} - -@include component('kuiMediumTitle') { +@include component('kuiTitle') { @extend %kuiFontSizeL; color: $kuiTitleColor; font-weight: $kuiFontWeightLight; -} -@include component('kuiSmallTitle') { - @extend %kuiFontSizeM; - color: $kuiTitleColor; - font-weight: $kuiFontWeightLight; + @include modifier('small') { + @extend %kuiFontSizeM; + } + + @include modifier('large') { + @extend %kuiFontSizeXL; + } } @include component('kuiText') { diff --git a/ui_framework/src/components/typography/index.js b/ui_framework/src/components/typography/index.js index 3dd95e0ce1e1b..bcadbc4df2a44 100644 --- a/ui_framework/src/components/typography/index.js +++ b/ui_framework/src/components/typography/index.js @@ -1,6 +1,4 @@ export { - KuiLargeTitle, - KuiMediumTitle, - KuiSmallTitle, + KuiTitle, KuiText, } from './typography'; diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js index 494828c9b2276..f0c70587b314b 100644 --- a/ui_framework/src/components/typography/typography.js +++ b/ui_framework/src/components/typography/typography.js @@ -4,38 +4,15 @@ import React, { } from 'react'; import classNames from 'classnames'; -export const KuiLargeTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiLargeTitle', className); - - const props = { - className: classes, - ...rest, - }; - - return cloneElement(children, props); +const sizeToClassNameMap = { + small: 'kuiTitle--small', + large: 'kuiTitle--large', }; -KuiLargeTitle.PropTypes = { - children: PropTypes.node.isRequired, -}; - -export const KuiSmallTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiSmallTitle', className); - - const props = { - className: classes, - ...rest, - }; - - return cloneElement(children, props); -}; - -KuiSmallTitle.PropTypes = { - children: PropTypes.node.isRequired, -}; +const SIZES = Object.keys(sizeToClassNameMap); -export const KuiMediumTitle = ({ children, className, ...rest }) => { - const classes = classNames('kuiMediumTitle', className); +export const KuiTitle = ({ size, children, className, ...rest }) => { + const classes = classNames('kuiTitle', sizeToClassNameMap[size], className); const props = { className: classes, @@ -45,8 +22,9 @@ export const KuiMediumTitle = ({ children, className, ...rest }) => { return cloneElement(children, props); }; -KuiMediumTitle.PropTypes = { +KuiTitle.PropTypes = { children: PropTypes.node.isRequired, + size: PropTypes.oneOf(SIZES), }; export const KuiText = ({ children, className, ...rest }) => { diff --git a/ui_framework/src/components/typography/typography.test.js b/ui_framework/src/components/typography/typography.test.js index 061aed93c2ddf..549b57fd43951 100644 --- a/ui_framework/src/components/typography/typography.test.js +++ b/ui_framework/src/components/typography/typography.test.js @@ -4,48 +4,36 @@ import sinon from 'sinon'; import { requiredProps } from '../../test/required_props'; import { - KuiLargeTitle, - KuiMediumTitle, - KuiSmallTitle, + KuiTitle, KuiText, + SIZES, } from './typography'; -describe('KuiLargeTitle', () => { +describe('KuiTitle', () => { test('is rendered', () => { const component = render( - +

Hello

- + ); expect(component) .toMatchSnapshot(); }); -}); - -describe('KuiMediumTitle', () => { - test('is rendered', () => { - const component = render( - -

Hello

- - ); - - expect(component) - .toMatchSnapshot(); - }); -}); -describe('KuiSmallTitle', () => { - test('is rendered', () => { - const component = render( - -

Hello

- - ); - - expect(component) - .toMatchSnapshot(); + describe('renders size', () => { + SIZES.forEach(size => { + test(size, () => { + const component = render( + +

Hello

+ + ); + + expect(component) + .toMatchSnapshot(); + }); + }); }); });