├── .nvmrc ├── .prettierignore ├── src ├── components │ ├── alert │ │ ├── README.md │ │ ├── index.js │ │ ├── __tests__ │ │ │ └── alert.test.js │ │ └── alert.module.css │ ├── tag │ │ ├── README.md │ │ ├── index.js │ │ └── tag.react.js │ ├── skeleton │ │ ├── README.md │ │ ├── skeleton.react.js │ │ └── components │ │ │ ├── skeleton-content.react.js │ │ │ ├── skeleton-paper.react.js │ │ │ ├── skeleton-grid.react.js │ │ │ ├── skeleton-page.react.js │ │ │ ├── skeleton-page-header.react.js │ │ │ ├── skeleton-list.react.js │ │ │ ├── skeleton-page-header-tabs.react.js │ │ │ ├── skeleton-page-header-heading.react.js │ │ │ ├── skeleton-avatar.react.js │ │ │ ├── skeleton-button.react.js │ │ │ ├── skeleton-text.react.js │ │ │ ├── skeleton-page-header-toolbar.react.js │ │ │ ├── skeleton-list-item.react.js │ │ │ ├── skeleton-card.react.js │ │ │ ├── skeleton-shape.react.js │ │ │ └── skeleton-spacer-box.react.js │ ├── tabs │ │ ├── README.md │ │ ├── index.js │ │ ├── __tests__ │ │ │ └── tabs.test.js │ │ ├── tabs.react.js │ │ ├── tabs.module.css │ │ └── tab.react.js │ ├── lozenge │ │ ├── README.md │ │ ├── index.js │ │ ├── lozenge.module.css │ │ └── lozenge.react.js │ ├── paper-menu │ │ ├── README.md │ │ ├── index.js │ │ └── paper-menu.module.css │ ├── button-group │ │ ├── README.md │ │ ├── index.js │ │ ├── button-group.module.css │ │ └── __tests__ │ │ │ └── button-group.test.js │ ├── drop-menu │ │ ├── README.md │ │ └── index.js │ ├── helper-text │ │ ├── README.md │ │ ├── index.js │ │ └── helper-text.react.js │ ├── avatar-group │ │ ├── README.md │ │ └── index.js │ ├── button-dropdown │ │ ├── README.md │ │ ├── index.js │ │ ├── button-dropdown.module.css │ │ └── __tests__ │ │ │ └── button-dropdown.test.js │ ├── image-input │ │ ├── README.md │ │ └── index.js │ ├── inline-alert │ │ ├── README.md │ │ ├── index.js │ │ ├── inline-alert.module.css │ │ ├── __examples__ │ │ │ └── inline-alert.examples.js │ │ └── inline-alert.react.js │ ├── jumbo-button │ │ ├── README.md │ │ ├── index.js │ │ ├── jumbo-button.module.css │ │ └── __examples__ │ │ │ └── jumbo-button.examples.js │ ├── loading-spinner │ │ ├── README.md │ │ ├── index.js │ │ ├── __examples__ │ │ │ └── loading-spinner.examples.js │ │ ├── loading-spinner.module.css │ │ └── __tests__ │ │ │ └── loading-spinner.test.js │ ├── service-tag │ │ ├── README.md │ │ ├── index.js │ │ ├── __tests__ │ │ │ └── service-tag.test.js │ │ ├── service-tag.module.css │ │ └── service-tag.react.js │ ├── star-rating │ │ ├── README.md │ │ ├── index.js │ │ ├── __examples__ │ │ │ └── star-rating.examples.js │ │ ├── __tests__ │ │ │ └── star-rating.test.js │ │ └── star-rating.module.css │ ├── seamless-button │ │ ├── README.md │ │ ├── index.js │ │ ├── seamless-button.module.css │ │ └── __examples__ │ │ │ └── seamless-button.examples.js │ ├── h1 │ │ ├── index.js │ │ ├── h1.react.js │ │ └── __tests__ │ │ │ ├── __snapshots__ │ │ │ └── h1.test.js.snap │ │ │ └── h1.test.js │ ├── h2 │ │ ├── index.js │ │ ├── h2.react.js │ │ └── __tests__ │ │ │ ├── __snapshots__ │ │ │ └── h2.test.js.snap │ │ │ └── h2.test.js │ ├── h3 │ │ ├── index.js │ │ ├── h3.react.js │ │ └── __tests__ │ │ │ ├── __snapshots__ │ │ │ └── h3.test.js.snap │ │ │ └── h3.test.js │ ├── h4 │ │ ├── index.js │ │ ├── h4.react.js │ │ └── __tests__ │ │ │ ├── __snapshots__ │ │ │ └── h4.test.js.snap │ │ │ └── h4.test.js │ ├── text │ │ ├── README.md │ │ ├── index.js │ │ └── __tests__ │ │ │ ├── __snapshots__ │ │ │ └── text.test.js.snap │ │ │ └── text.test.js │ ├── field │ │ ├── index.js │ │ ├── README.md │ │ └── field.module.css │ ├── form │ │ ├── index.js │ │ ├── __tests__ │ │ │ └── form.test.js │ │ └── form.react.js │ ├── icon │ │ ├── index.js │ │ ├── icon.module.css │ │ └── README.md │ ├── input │ │ ├── index.js │ │ ├── README.md │ │ └── __tests__ │ │ │ ├── __snapshots__ │ │ │ └── input.test.js.snap │ │ │ └── input.test.js │ ├── modal │ │ ├── index.js │ │ └── README.md │ ├── radio │ │ ├── index.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── radio.test.js.snap │ │ │ └── radio.test.js │ │ └── README.md │ ├── avatar │ │ ├── index.js │ │ ├── README.md │ │ └── __tests__ │ │ │ └── avatar.test.js │ ├── button │ │ ├── index.js │ │ ├── README.md │ │ └── __tests__ │ │ │ └── __snapshots__ │ │ │ └── button.test.js.snap │ ├── callout │ │ ├── index.js │ │ ├── README.md │ │ ├── callout.module.css │ │ ├── __examples__ │ │ │ └── callout.examples.js │ │ └── callout.react.js │ ├── checkbox │ │ ├── index.js │ │ ├── README.md │ │ └── __tests__ │ │ │ └── checkbox.test.js │ ├── fieldset │ │ ├── README.md │ │ ├── index.js │ │ ├── fieldset.module.css │ │ ├── __examples__ │ │ │ └── fieldset.examples.js │ │ └── __tests__ │ │ │ └── fieldset.test.js │ ├── heading │ │ ├── index.js │ │ ├── README.md │ │ └── __tests__ │ │ │ └── __snapshots__ │ │ │ └── heading.test.js.snap │ ├── sticky │ │ └── index.js │ ├── textarea │ │ ├── index.js │ │ ├── README.md │ │ ├── __tests__ │ │ │ ├── textarea.test.js │ │ │ └── __snapshots__ │ │ │ │ └── textarea.test.js.snap │ │ └── __examples__ │ │ │ └── textarea.examples.js │ ├── field-hint │ │ ├── index.js │ │ ├── field-hint.module.css │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── field-hint.test.js.snap │ │ │ └── field-hint.test.js │ │ ├── __examples__ │ │ │ └── field-hint.examples.js │ │ └── field-hint.react.js │ ├── field-row │ │ ├── index.js │ │ ├── field-row.module.css │ │ └── README.md │ ├── grid │ │ ├── index.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── grid.test.js.snap │ │ │ └── grid.test.js │ │ └── README.md │ ├── select │ │ ├── README.md │ │ ├── index.js │ │ └── option.react.js │ ├── tag-group │ │ ├── index.js │ │ ├── tag-group.module.css │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── tag-group.examples.js │ │ └── __tests__ │ │ │ └── tag-group.test.js │ ├── field-label │ │ ├── index.js │ │ ├── __examples__ │ │ │ └── field-label.examples.js │ │ ├── field-label.module.css │ │ └── __tests__ │ │ │ └── __snapshots__ │ │ │ └── field-label.test.js.snap │ ├── icon-symbols │ │ └── index.js │ ├── tooltip-box │ │ ├── index.js │ │ └── README.md │ ├── field-validation │ │ ├── index.js │ │ ├── field-validation.module.css │ │ └── field-validation.react.js │ ├── field-validations │ │ ├── index.js │ │ ├── field-validations.module.css │ │ ├── README.md │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── field-validations.test.js.snap │ │ │ └── field-validations.test.js │ │ ├── __examples__ │ │ │ └── field-validations.examples.js │ │ └── field-validations.react.js │ ├── toggle-button │ │ ├── index.js │ │ ├── README.md │ │ └── __tests__ │ │ │ ├── toggle-button.test.js │ │ │ └── __snapshots__ │ │ │ └── toggle-button.test.js.snap │ ├── feature-callout-card │ │ ├── index.js │ │ ├── README.md │ │ └── feature-callout-card.module.css │ ├── layout │ │ ├── index.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── utils.test.js.snap │ │ │ └── utils.test.js │ │ ├── layout.react.module.css │ │ ├── __examples__ │ │ │ └── layout.examples.js │ │ └── README.md │ ├── paper │ │ ├── index.js │ │ ├── components │ │ │ ├── paper-toolbar.module.css │ │ │ └── paper-toolbar.react.js │ │ ├── README.md │ │ ├── __tests__ │ │ │ └── __snapshots__ │ │ │ │ └── paper.test.js.snap │ │ └── __examples__ │ │ │ └── paper.examples.js │ └── table │ │ ├── README.md │ │ ├── index.js │ │ ├── __tests__ │ │ ├── table.test.js │ │ ├── table-row.test.js │ │ ├── table-body.test.js │ │ └── table-head.test.js │ │ ├── table-head.react.js │ │ ├── table.react.js │ │ ├── table-body.react.js │ │ └── table-row.react.js ├── utils │ ├── test │ │ ├── mocks │ │ │ └── file-mock.js │ │ ├── random-string.js │ │ └── global-context.js │ ├── array.js │ ├── __tests__ │ │ ├── dom.test.js │ │ └── array.test.js │ ├── type.js │ ├── react.js │ └── string.js ├── design-tokens │ ├── README.md │ └── __tests__ │ │ └── tokens.test.js ├── icons │ └── svg │ │ ├── remove.svg │ │ ├── arrow_drop_down.svg │ │ ├── arrow_drop_up.svg │ │ ├── add.svg │ │ ├── send.svg │ │ ├── file_upload.svg │ │ ├── check.svg │ │ ├── done.svg │ │ ├── chevron_left.svg │ │ ├── chevron_right.svg │ │ ├── warning.svg │ │ ├── keyboard_arrow_up.svg │ │ ├── keyboard_arrow_down.svg │ │ ├── keyboard_arrow_left.svg │ │ ├── keyboard_arrow_right.svg │ │ ├── keyboard_return.svg │ │ ├── view_headline.svg │ │ ├── swap_vert.svg │ │ ├── delete.svg │ │ ├── remove_circle.svg │ │ ├── view_module.svg │ │ ├── account_balance.svg │ │ ├── info.svg │ │ ├── arrow_drop_down_circle.svg │ │ ├── book.svg │ │ ├── clear.svg │ │ ├── close.svg │ │ ├── check_box_outline_blank.svg │ │ ├── email.svg │ │ ├── insert_drive_file.svg │ │ ├── mail.svg │ │ ├── tv.svg │ │ ├── chat.svg │ │ ├── person.svg │ │ ├── check_circle.svg │ │ ├── comment.svg │ │ ├── message.svg │ │ ├── notifications.svg │ │ ├── payment.svg │ │ ├── verified_user.svg │ │ ├── credit_card.svg │ │ ├── security.svg │ │ ├── launch.svg │ │ ├── star.svg │ │ ├── check_box.svg │ │ ├── kalo_messages.svg │ │ ├── note_add.svg │ │ ├── open_in_new.svg │ │ ├── edit.svg │ │ ├── more_vert.svg │ │ ├── person_add.svg │ │ ├── present_to_all.svg │ │ ├── create.svg │ │ ├── mode_edit.svg │ │ ├── done_all.svg │ │ ├── info_outline.svg │ │ ├── location_on.svg │ │ ├── date_range.svg │ │ ├── art_track.svg │ │ ├── exit_to_app.svg │ │ ├── location_city.svg │ │ ├── error_outline.svg │ │ ├── access_time.svg │ │ ├── account_box.svg │ │ ├── folder_shared.svg │ │ ├── border_color.svg │ │ ├── check_circle_outline.svg │ │ ├── radio_button_checked.svg │ │ ├── domain.svg │ │ ├── content_paste.svg │ │ ├── remove_red_eye.svg │ │ ├── link.svg │ │ ├── perm_contact_calendar.svg │ │ ├── lock.svg │ │ ├── loop.svg │ │ ├── receipt.svg │ │ ├── short_text.svg │ │ ├── account_balance_wallet.svg │ │ ├── assignment.svg │ │ ├── local_atm.svg │ │ ├── archive.svg │ │ ├── autorenew.svg │ │ ├── account_circle.svg │ │ ├── highlight_off.svg │ │ ├── kalo_index.svg │ │ ├── phone.svg │ │ ├── view_week.svg │ │ ├── help_outline.svg │ │ ├── perm_identity.svg │ │ ├── attach_file.svg │ │ ├── local_offer.svg │ │ ├── person_outline.svg │ │ ├── how_to_reg.svg │ │ ├── kalo_tasks.svg │ │ ├── assignment_ind.svg │ │ ├── group.svg │ │ ├── people.svg │ │ ├── extension.svg │ │ ├── format_color_fill.svg │ │ ├── playlist_add_check.svg │ │ ├── picture_as_pdf.svg │ │ ├── kalo_projects.svg │ │ ├── attach_money.svg │ │ ├── youtube.svg │ │ ├── megaphone.svg │ │ ├── linkedin.svg │ │ ├── monetization_on.svg │ │ ├── add_a_photo.svg │ │ ├── kalo_clients.svg │ │ ├── kalo_reporting.svg │ │ ├── kalo_premium.svg │ │ ├── instagram.svg │ │ ├── search.svg │ │ ├── settings.svg │ │ ├── question_help_message.svg │ │ ├── kalo_verified.svg │ │ ├── kalo_categories.svg │ │ └── file_xls.svg └── styles │ └── kalo-ui-typography.css ├── .eslintignore ├── site ├── src │ ├── components │ │ ├── wrapper │ │ │ ├── index.js │ │ │ └── wrapper.js │ │ ├── action-card │ │ │ └── index.js │ │ ├── navigation │ │ │ └── index.js │ │ ├── prop-table │ │ │ └── index.js │ │ ├── documentation-content │ │ │ └── index.js │ │ ├── toc │ │ │ ├── index.js │ │ │ └── toc.js │ │ └── side-nav │ │ │ └── index.js │ ├── data │ │ └── README.md │ ├── static │ │ └── favicon.png │ ├── pages │ │ ├── 404.js │ │ └── foundations │ │ │ └── spacing.js │ └── html.js └── README.md ├── .browserslistrc ├── .prettierrc ├── config └── design-tokens │ ├── grid.yml │ ├── table.yml │ ├── tokens.yml │ ├── alerts.yml │ ├── font-weight.yml │ ├── layout.yml │ ├── box-shadow.yml │ ├── font-size.yml │ ├── input.yml │ └── gradients.yml ├── .gitignore ├── scripts └── custom-token-formats │ ├── custom-properties-as-an-object.js │ ├── theme.js │ ├── css-helper-colors.js │ ├── css-helper-hover-colors.js │ └── css-helper-fills.js ├── .istanbul.yml ├── postcss.config.js ├── .babelrc └── wallaby.js /.nvmrc: -------------------------------------------------------------------------------- 1 | v10.14.1 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json -------------------------------------------------------------------------------- /src/components/alert/README.md: -------------------------------------------------------------------------------- 1 | # Alert -------------------------------------------------------------------------------- /src/components/tag/README.md: -------------------------------------------------------------------------------- 1 | # Tag 2 | -------------------------------------------------------------------------------- /src/components/skeleton/README.md: -------------------------------------------------------------------------------- 1 | # Skeleton -------------------------------------------------------------------------------- /src/components/tabs/README.md: -------------------------------------------------------------------------------- 1 | # Tabs 2 | -------------------------------------------------------------------------------- /src/components/lozenge/README.md: -------------------------------------------------------------------------------- 1 | # Lozenge 2 | -------------------------------------------------------------------------------- /src/components/paper-menu/README.md: -------------------------------------------------------------------------------- 1 | # Paper Menu -------------------------------------------------------------------------------- /src/components/button-group/README.md: -------------------------------------------------------------------------------- 1 | # Button Group -------------------------------------------------------------------------------- /src/components/drop-menu/README.md: -------------------------------------------------------------------------------- 1 | # Drop Menu 2 | -------------------------------------------------------------------------------- /src/components/helper-text/README.md: -------------------------------------------------------------------------------- 1 | # HelperText 2 | -------------------------------------------------------------------------------- /src/components/avatar-group/README.md: -------------------------------------------------------------------------------- 1 | # Avatar Group 2 | -------------------------------------------------------------------------------- /src/components/button-dropdown/README.md: -------------------------------------------------------------------------------- 1 | # Button Dropdown -------------------------------------------------------------------------------- /src/components/image-input/README.md: -------------------------------------------------------------------------------- 1 | # Image Input 2 | -------------------------------------------------------------------------------- /src/components/inline-alert/README.md: -------------------------------------------------------------------------------- 1 | # Inline Alert 2 | -------------------------------------------------------------------------------- /src/components/jumbo-button/README.md: -------------------------------------------------------------------------------- 1 | # Jumbo Button 2 | -------------------------------------------------------------------------------- /src/components/loading-spinner/README.md: -------------------------------------------------------------------------------- 1 | # Loading Spinner -------------------------------------------------------------------------------- /src/components/service-tag/README.md: -------------------------------------------------------------------------------- 1 | # Service Tag 2 | -------------------------------------------------------------------------------- /src/components/star-rating/README.md: -------------------------------------------------------------------------------- 1 | # Star Rating 2 | -------------------------------------------------------------------------------- /src/components/seamless-button/README.md: -------------------------------------------------------------------------------- 1 | # Seamless Button 2 | -------------------------------------------------------------------------------- /src/components/h1/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './h1.react'; 2 | -------------------------------------------------------------------------------- /src/components/h2/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './h2.react'; 2 | -------------------------------------------------------------------------------- /src/components/h3/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './h3.react'; 2 | -------------------------------------------------------------------------------- /src/components/h4/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './h4.react'; 2 | -------------------------------------------------------------------------------- /src/components/tag/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './tag.react'; 2 | -------------------------------------------------------------------------------- /src/components/text/README.md: -------------------------------------------------------------------------------- 1 | # Text 2 | 3 | The core text component -------------------------------------------------------------------------------- /src/utils/test/mocks/file-mock.js: -------------------------------------------------------------------------------- 1 | export default 'path/to/file'; 2 | -------------------------------------------------------------------------------- /src/components/field/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './field.react'; 2 | -------------------------------------------------------------------------------- /src/components/form/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './form.react'; 2 | -------------------------------------------------------------------------------- /src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './icon.react'; 2 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './input.react'; 2 | -------------------------------------------------------------------------------- /src/components/modal/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './modal.react'; 2 | -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './radio.react'; 2 | -------------------------------------------------------------------------------- /src/components/text/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './text.react'; 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/design-tokens/** 2 | src/components/icon-symbols/ 3 | config -------------------------------------------------------------------------------- /site/src/components/wrapper/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './wrapper'; 2 | -------------------------------------------------------------------------------- /src/components/avatar/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './avatar.react'; 2 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './button.react'; 2 | -------------------------------------------------------------------------------- /src/components/callout/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './callout.react'; 2 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './checkbox.react'; 2 | -------------------------------------------------------------------------------- /src/components/fieldset/README.md: -------------------------------------------------------------------------------- 1 | # Fieldset 2 | 3 | Fieldset for basic forms -------------------------------------------------------------------------------- /src/components/fieldset/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './fieldset.react'; 2 | -------------------------------------------------------------------------------- /src/components/heading/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './heading.react'; 2 | -------------------------------------------------------------------------------- /src/components/image-input/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './image-input'; 2 | -------------------------------------------------------------------------------- /src/components/lozenge/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './lozenge.react'; 2 | -------------------------------------------------------------------------------- /src/components/sticky/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './sticky.react'; 2 | -------------------------------------------------------------------------------- /src/components/textarea/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './textarea.react'; 2 | -------------------------------------------------------------------------------- /site/src/components/action-card/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './action-card'; 2 | -------------------------------------------------------------------------------- /site/src/components/navigation/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './navigation'; 2 | -------------------------------------------------------------------------------- /site/src/components/prop-table/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './prop-table'; 2 | -------------------------------------------------------------------------------- /src/components/field-hint/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './field-hint.react'; 2 | -------------------------------------------------------------------------------- /src/components/field-row/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './field-row.react'; 2 | -------------------------------------------------------------------------------- /src/components/grid/index.js: -------------------------------------------------------------------------------- 1 | export {Grid, Row, Column} from './grid.react'; 2 | -------------------------------------------------------------------------------- /src/components/jumbo-button/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './jumbo-button'; 2 | -------------------------------------------------------------------------------- /src/components/select/README.md: -------------------------------------------------------------------------------- 1 | # Select 2 | 3 | The kalo generic select component -------------------------------------------------------------------------------- /src/components/tag-group/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './tag-group.react'; 2 | -------------------------------------------------------------------------------- /site/src/data/README.md: -------------------------------------------------------------------------------- 1 | ## ⚠️ Don't edit. The contents of this directory is autogenerated -------------------------------------------------------------------------------- /src/components/avatar-group/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './avatar-group.react'; 2 | -------------------------------------------------------------------------------- /src/components/button-group/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './button-group.react'; 2 | -------------------------------------------------------------------------------- /src/components/field-label/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './field-label.react'; 2 | -------------------------------------------------------------------------------- /src/components/helper-text/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './helper-text.react'; 2 | -------------------------------------------------------------------------------- /src/components/icon-symbols/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './icon-symbols.react'; 2 | -------------------------------------------------------------------------------- /src/components/inline-alert/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './inline-alert.react'; 2 | -------------------------------------------------------------------------------- /src/components/service-tag/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './service-tag.react'; 2 | -------------------------------------------------------------------------------- /src/components/star-rating/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './star-rating.react'; 2 | -------------------------------------------------------------------------------- /src/components/tooltip-box/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './tooltip-box.react'; 2 | -------------------------------------------------------------------------------- /src/components/button-dropdown/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './button-dropdown.react'; 2 | -------------------------------------------------------------------------------- /src/components/loading-spinner/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './loading-spinner.react'; 2 | -------------------------------------------------------------------------------- /src/components/seamless-button/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './seamless-button.react'; 2 | -------------------------------------------------------------------------------- /src/components/field-validation/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './field-validation.react'; 2 | -------------------------------------------------------------------------------- /src/components/field-validations/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './field-validations.react'; 2 | -------------------------------------------------------------------------------- /src/components/toggle-button/index.js: -------------------------------------------------------------------------------- 1 | export {default, HEIGHT} from './toggle-button.react'; 2 | -------------------------------------------------------------------------------- /src/components/tooltip-box/README.md: -------------------------------------------------------------------------------- 1 | # TooltipBox 2 | 3 | It creates a tooltip-ready element 4 | -------------------------------------------------------------------------------- /site/src/components/documentation-content/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './documentation-content'; 2 | -------------------------------------------------------------------------------- /site/src/components/toc/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './toc'; 2 | export {TocTitle} from './toc'; 3 | -------------------------------------------------------------------------------- /site/src/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalohq/ui/HEAD/site/src/static/favicon.png -------------------------------------------------------------------------------- /src/components/feature-callout-card/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './feature-callout-card.react'; 2 | -------------------------------------------------------------------------------- /site/src/components/side-nav/index.js: -------------------------------------------------------------------------------- 1 | export {default, NAV_IN_FOOTER_BREAKPOINT} from './side-nav.js'; 2 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% in alt-EU 2 | > 1% in alt-NA 3 | Firefox ESR 4 | last 2 iOS major versions 5 | not dead 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "bracketSpacing": false, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | export {Box, Flex, Block, Inline, InlineFlex, A, UIBase} from './layout.react'; 2 | -------------------------------------------------------------------------------- /src/components/toggle-button/README.md: -------------------------------------------------------------------------------- 1 | # ToggleButton 2 | 3 | A standard toggle button for toggling between two states -------------------------------------------------------------------------------- /src/components/button/README.md: -------------------------------------------------------------------------------- 1 | # Button 2 | 3 | Buttons are the primary way that a user interacts with the platform. 4 | -------------------------------------------------------------------------------- /src/components/textarea/README.md: -------------------------------------------------------------------------------- 1 | # Textarea 2 | 3 | The textarea component can expand automatically based on user input. -------------------------------------------------------------------------------- /src/components/select/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './select.react'; 2 | export {default as Option} from './option.react'; 3 | -------------------------------------------------------------------------------- /src/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | export {default as Tabs} from './tabs.react'; 2 | export {default as Tab} from './tab.react'; 3 | -------------------------------------------------------------------------------- /config/design-tokens/grid.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: unit 3 | category: grid 4 | props: 5 | GRID_MAX_WIDTH: 6 | value: 1200 7 | -------------------------------------------------------------------------------- /src/components/field-row/field-row.module.css: -------------------------------------------------------------------------------- 1 | .ui-field-row { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: top; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/paper/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './paper.react'; 2 | export {PaperToolbar} from './components/paper-toolbar.react'; 3 | -------------------------------------------------------------------------------- /src/components/tag-group/tag-group.module.css: -------------------------------------------------------------------------------- 1 | .ui-tag-group { 2 | display: flex; 3 | align-items: center; 4 | flex-wrap: wrap; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/alert/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './alert.react'; 2 | export {default as AlertPopover} from './components/alert-popover.react'; 3 | -------------------------------------------------------------------------------- /src/components/drop-menu/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './drop-menu.react'; 2 | 3 | export {default as DropMenuItem} from './drop-menu-item.react'; 4 | -------------------------------------------------------------------------------- /src/components/feature-callout-card/README.md: -------------------------------------------------------------------------------- 1 | # Feature Callout Card 2 | 3 | This card component is used to provide prompts about a particular feature to a user 4 | -------------------------------------------------------------------------------- /src/components/paper-menu/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './paper-menu.react'; 2 | 3 | export {default as PaperMenuItem} from './components/paper-menu-item.react'; 4 | -------------------------------------------------------------------------------- /src/components/tag-group/README.md: -------------------------------------------------------------------------------- 1 | # Tag Group 2 | 3 | Use the TagGroup component to implement consistent vertical spacing between Tags, Lozenges, and ServiceTags 4 | -------------------------------------------------------------------------------- /src/components/field-hint/field-hint.module.css: -------------------------------------------------------------------------------- 1 | .ui-field-hint { 2 | font-size: 1.2rem; 3 | font-weight: 400; 4 | color: var(--grey800); 5 | margin-top: 0.4rem; 6 | } 7 | -------------------------------------------------------------------------------- /src/design-tokens/README.md: -------------------------------------------------------------------------------- 1 | # Design Tokens 2 | 3 | > **Note**: The files in this directory are autogenerated. See [config/design-tokens](/config/design-tokens) for the source. -------------------------------------------------------------------------------- /src/components/button-dropdown/button-dropdown.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | position: absolute; 3 | top: calc(100% + 2px); 4 | min-width: calc(100% + 4px); 5 | left: -2px; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/field/README.md: -------------------------------------------------------------------------------- 1 | # Field 2 | 3 | The field component is responsible for implementing many of the lower level form components such as labels, validations, and hints. 4 | -------------------------------------------------------------------------------- /src/utils/array.js: -------------------------------------------------------------------------------- 1 | /** Checks if a value is an array, if not, returns the value wrapped in one */ 2 | export const returnArray = value => (Array.isArray(value) ? value : [value]); 3 | -------------------------------------------------------------------------------- /config/design-tokens/table.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: 'border' 3 | category: 'table' 4 | imports: 5 | - ./color.yml 6 | props: 7 | TABLE_DEFAULT_BORDER: 8 | value: 1px solid {!GREY100} 9 | -------------------------------------------------------------------------------- /src/components/field-validations/field-validations.module.css: -------------------------------------------------------------------------------- 1 | .ui-field-validations { 2 | text-align: left; 3 | } 4 | 5 | .ui-field-validations--align-center { 6 | text-align: center; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/table/README.md: -------------------------------------------------------------------------------- 1 | # Table 2 | 3 | Simple Table, TableHead, TableBody, TableRow and TableCell components. Customisation can be done outside of the core components (sorting, pagination, etc). 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | coverage 4 | npm-debug* 5 | src/design-tokens/* 6 | 7 | ## 8 | # Documentation site 9 | ## 10 | 11 | site/public 12 | site/src/data/examples.js 13 | site/.cache 14 | -------------------------------------------------------------------------------- /src/components/field-validations/README.md: -------------------------------------------------------------------------------- 1 | # FieldValidations 2 | 3 | The FieldValidations component is rarely used by itself. Instead, validations should be sent via the validations prop on the `Field` component. -------------------------------------------------------------------------------- /src/utils/test/random-string.js: -------------------------------------------------------------------------------- 1 | import {random} from 'lodash'; 2 | 3 | export default () => 4 | `${random(0.0001, 0.9999).toString(36)}justsomebufferforpeaceofmind`.substr( 5 | 2, 6 | 10 7 | ); 8 | -------------------------------------------------------------------------------- /src/components/field-validation/field-validation.module.css: -------------------------------------------------------------------------------- 1 | .ui-field-validation { 2 | font-weight: 500; 3 | font-size: 1.2rem; 4 | color: var(--pink600); 5 | margin-top: 4px; 6 | display: block; 7 | } 8 | -------------------------------------------------------------------------------- /src/icons/svg/remove.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/callout/README.md: -------------------------------------------------------------------------------- 1 | # Callout 2 | 3 | Callouts are used to display persisent notices. They are used to highlight parts of particular feature. 4 | 5 | For flash style alerts, consider the Alert component. 6 | -------------------------------------------------------------------------------- /src/icons/svg/arrow_drop_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/arrow_drop_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/field-row/README.md: -------------------------------------------------------------------------------- 1 | # FieldRow 2 | 3 | The FieldRow component is responsible for managing horizontal spacing between child form fields, as well as the vertical spacing between itself and other FieldRow elements. -------------------------------------------------------------------------------- /src/icons/svg/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/send.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/file_upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/done.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/chevron_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/chevron_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/keyboard_arrow_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/input/README.md: -------------------------------------------------------------------------------- 1 | # Input 2 | 3 | ## Best practices 4 | - Use placeholder copy to display the expected shape of data. For example, for a field that asks for a twitter handle, a placeholder of '@kalohq' rather than 'your twitter handle' is better. -------------------------------------------------------------------------------- /src/icons/svg/keyboard_arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/keyboard_arrow_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/keyboard_arrow_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/keyboard_return.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/view_headline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /site/src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const NotFoundPage = () => ( 4 |
5 |

NOT FOUND

6 |

You just hit a route that doesn't exist... the sadness.

7 |
8 | ); 9 | 10 | export default NotFoundPage; 11 | -------------------------------------------------------------------------------- /src/components/field-hint/__tests__/__snapshots__/field-hint.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`FieldHint should render shallow component ok 1`] = ` 4 | 8 | `; 9 | -------------------------------------------------------------------------------- /src/icons/svg/swap_vert.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/field-validations/__tests__/__snapshots__/field-validations.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`FieldValidations should render shallow component ok 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /src/icons/svg/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /config/design-tokens/tokens.yml: -------------------------------------------------------------------------------- 1 | props: {} 2 | imports: 3 | - ./color.yml 4 | - ./gradients.yml 5 | - ./font-weight.yml 6 | - ./font-size.yml 7 | - ./box-shadow.yml 8 | - ./alerts.yml 9 | - ./grid.yml 10 | - ./layout.yml 11 | - ./table.yml 12 | - ./input.yml 13 | -------------------------------------------------------------------------------- /src/icons/svg/remove_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/view_module.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/account_balance.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /config/design-tokens/alerts.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: color 3 | category: alerts 4 | imports: 5 | - ./color.yml 6 | props: 7 | INFO: 8 | value: '#E8FAFC' 9 | CONFIRMATION: 10 | value: '#E5F7F1' 11 | ERROR: 12 | value: '#FFEBEE' 13 | WARNING: 14 | value: '#FFF6D8' 15 | -------------------------------------------------------------------------------- /src/icons/svg/arrow_drop_down_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/book.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/clear.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/check_box_outline_blank.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/insert_drive_file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/tv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /site/src/components/wrapper/wrapper.js: -------------------------------------------------------------------------------- 1 | import styled from 'react-emotion'; 2 | 3 | const horizontalPadding = '5vw'; 4 | 5 | export default styled.div` 6 | width: 100%; 7 | max-width: calc(780px + 2 * ${horizontalPadding}); 8 | padding: 0 ${horizontalPadding}; 9 | margin: 0 auto; 10 | `; 11 | -------------------------------------------------------------------------------- /src/icons/svg/chat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/person.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/table/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './table.react'; 2 | export {default as TableBody} from './table-body.react'; 3 | export {default as TableCell} from './table-cell.react'; 4 | export {default as TableHead} from './table-head.react'; 5 | export {default as TableRow} from './table-row.react'; 6 | -------------------------------------------------------------------------------- /src/icons/svg/check_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/message.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/icons/svg/payment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/verified_user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/credit_card.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/security.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/utils/test/global-context.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | /* eslint-disable no-var, no-console, func-names, global-require */ 3 | 4 | // This gets run before each test run 5 | 6 | import {configure} from 'enzyme'; 7 | import Adapter from 'enzyme-adapter-react-15'; 8 | 9 | configure({adapter: new Adapter()}); 10 | -------------------------------------------------------------------------------- /src/components/paper/components/paper-toolbar.module.css: -------------------------------------------------------------------------------- 1 | .ui-paper-toolbar { 2 | display: flex; 3 | border-bottom: 1px solid var(--grey100); 4 | position: relative; 5 | flex-direction: column; 6 | align-items: stretch; 7 | flex-shrink: 0; 8 | align-content: flex-start; 9 | padding: 0 2.4rem; 10 | } 11 | -------------------------------------------------------------------------------- /src/icons/svg/launch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/field-hint/__examples__/field-hint.examples.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import FieldHint from '../'; 4 | 5 | export const examples = [ 6 | { 7 | title: 'FieldHint (default)', 8 | description: 'An example of FieldHint (default)', 9 | render: () => , 10 | }, 11 | ]; 12 | -------------------------------------------------------------------------------- /src/components/field-label/__examples__/field-label.examples.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import FieldLabel from '../'; 4 | 5 | export const examples = [ 6 | { 7 | title: 'FieldLabel', 8 | description: 'A basic label for a field', 9 | render: () => Name, 10 | }, 11 | ]; 12 | -------------------------------------------------------------------------------- /src/components/heading/README.md: -------------------------------------------------------------------------------- 1 | # Heading 2 | 3 | We have four main heading components (H1, H2, H3, and H4). 4 | 5 | **Note:** All of the heading components (`H1`, `H2`, etc.) inherit their props from `Heading`, however we recommend to avoid using the `Heading` component directly. All of the props displayed below are still applicable. -------------------------------------------------------------------------------- /src/icons/svg/check_box.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/kalo_messages.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/note_add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/open_in_new.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/more_vert.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/person_add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/present_to_all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /config/design-tokens/font-weight.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: font-weight 3 | category: typography 4 | props: 5 | FONT_WEIGHT_LIGHT: 6 | value: 300 7 | FONT_WEIGHT_NORMAL: 8 | value: 400 9 | FONT_WEIGHT_MEDIUM: 10 | value: 500 11 | FONT_WEIGHT_SEMIBOLD: 12 | value: 600 13 | FONT_WEIGHT_BOLD: 14 | value: 700 15 | -------------------------------------------------------------------------------- /src/icons/svg/create.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/mode_edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/fieldset/fieldset.module.css: -------------------------------------------------------------------------------- 1 | .ui-fieldset { 2 | border: 0; 3 | border-bottom: 1px solid var(--grey100); 4 | } 5 | 6 | .ui-fieldset--no-border { 7 | border-bottom: 0; 8 | } 9 | 10 | .ui-fieldset--inset { 11 | background-color: var(--grey000); 12 | } 13 | 14 | .ui-fieldset--interactive { 15 | cursor: pointer; 16 | } 17 | -------------------------------------------------------------------------------- /src/icons/svg/done_all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/heading/__tests__/__snapshots__/heading.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Heading should match snapshot 1`] = ` 4 | 8 | A medium sized header 9 | 10 | `; 11 | -------------------------------------------------------------------------------- /src/icons/svg/info_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/location_on.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/date_range.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/art_track.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/exit_to_app.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/location_city.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/error_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/skeleton/skeleton.react.js: -------------------------------------------------------------------------------- 1 | /** Multiplier for textual content "size" */ 2 | export const TEXT_SIZE_MULTIPLIER = 10; 3 | 4 | /** Multiplier for an avatar diameter */ 5 | export const AVATAR_SIZE_MULTIPLIER = 20; 6 | 7 | /** Height of text */ 8 | export const TEXT_HEIGHT = 12; 9 | 10 | /** Height of a button */ 11 | export const BUTTON_HEIGHT = 36; 12 | -------------------------------------------------------------------------------- /src/icons/svg/access_time.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/account_box.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/paper/README.md: -------------------------------------------------------------------------------- 1 | # Paper 2 | 3 | A generic wrapping visual component, used to implement the box-shadow and focus/blur animations. 4 | 5 | ## Usage guidelines 6 | - Paper should always be used to house content, especially when on a non-white background. 7 | - Use a minimum of 16px padding. 8 | - If you're building out a list type UI, consider using the `Card` component. -------------------------------------------------------------------------------- /src/icons/svg/folder_shared.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/utils/__tests__/dom.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node, jest */ 2 | /* eslint func-names: 0 */ 3 | import {getFixedOffset} from '../dom'; 4 | 5 | describe('utils/dom', () => { 6 | describe('getFixedOffset', () => { 7 | it('should handle null elements gracefully', () => { 8 | expect(getFixedOffset(null)).toEqual({top: 0, left: 0}); 9 | }); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /scripts/custom-token-formats/custom-properties-as-an-object.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A custom token format to pass in non-camelCased CSS variables 3 | * in to the post-css build step as a standard JS object. 4 | */ 5 | module.exports = ` 6 | module.exports = { 7 | {{#each props as |prop|}} 8 | '{{kebabcase prop.name}}': '{{prop.value}}', 9 | {{/each}} 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /src/icons/svg/border_color.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | # @kalo/ui documentation site 2 | 3 | Welcome to the @kalo-ui documentation. The docs are built using [Gatsby](https://www.gatsbyjs.org). 4 | 5 | ## Running locally 6 | - Clone the UI repo locally. 7 | - `cd site` to change in to the site directory 8 | - `npm install` 9 | - `npm run start` 10 | - And you should be up and running at [localhost:8000](http://localhost:8000) -------------------------------------------------------------------------------- /src/icons/svg/check_circle_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/radio_button_checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/layout/__tests__/__snapshots__/utils.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`makePrimitive should render correctly 1`] = ` 4 |

14 | `; 15 | -------------------------------------------------------------------------------- /src/icons/svg/domain.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/content_paste.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/remove_red_eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/icons/svg/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/perm_contact_calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/field-label/field-label.module.css: -------------------------------------------------------------------------------- 1 | .ui-field-label { 2 | font-size: 14px; 3 | font-weight: 600; 4 | color: var(--navy800); 5 | display: inline-block; 6 | vertical-align: bottom; 7 | margin-bottom: 4px; 8 | cursor: inherit; 9 | text-align: unset; 10 | text-decoration: inherit; 11 | text-overflow: initial; 12 | overflow: visible; 13 | word-break: break-word; 14 | } 15 | -------------------------------------------------------------------------------- /config/design-tokens/layout.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: unit 3 | category: layout 4 | props: 5 | SPACING_NONE: 6 | value: 0px 7 | SPACING_EXTRA_SMALL: 8 | value: 4px 9 | SPACING_SMALL: 10 | value: 8px 11 | SPACING_MEDIUM: 12 | value: 16px 13 | SPACING_LARGE: 14 | value: 24px 15 | SPACING_EXTRA_LARGE: 16 | value: 32px 17 | SPACING_EXTRA_EXTRA_LARGE: 18 | value: 48px 19 | -------------------------------------------------------------------------------- /src/icons/svg/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/loop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/receipt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/short_text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/icons/svg/account_balance_wallet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/assignment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/local_atm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/archive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/autorenew.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.istanbul.yml: -------------------------------------------------------------------------------- 1 | instrumentation: 2 | extensions: ['.js', '.jsx'] 3 | excludes: [ 4 | "docs/**", 5 | "build/**", 6 | "vendor/**", 7 | "coverage/**", 8 | "flow/**", 9 | "flow-typed/**", 10 | "webpack/**", 11 | "code-templates/**", 12 | "e2e-test/**", 13 | "src/**/components/**/index.js", 14 | "serve.js", 15 | "src/**/*manifest.js", 16 | ] 17 | include-all-sources: False 18 | -------------------------------------------------------------------------------- /src/components/star-rating/__examples__/star-rating.examples.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import StarRating from '../'; 4 | 5 | export const examples = [ 6 | { 7 | title: 'Star rating', 8 | description: '', 9 | render: () => , 10 | }, 11 | { 12 | title: 'Star rating with half score', 13 | render: () => , 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /src/icons/svg/account_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/utils/type.js: -------------------------------------------------------------------------------- 1 | import {isNumber} from 'lodash'; 2 | 3 | /** 4 | * Return the size of an array-like-iterable object (arrays or immutable iterables) 5 | * @param obj 6 | * @returns Number 7 | */ 8 | export function size(obj) { 9 | if (obj && isNumber(obj.size)) { 10 | return obj.size; 11 | } 12 | 13 | if (obj && isNumber(obj.length)) { 14 | return obj.length; 15 | } 16 | 17 | return 0; 18 | } 19 | -------------------------------------------------------------------------------- /src/icons/svg/highlight_off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/kalo_index.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/icons/svg/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/view_week.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/checkbox/README.md: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | Checkboxes can be used to provide a user with a binary choice, for example, toggling email notifications on and off. 4 | 5 | ## Best practices 6 | 7 | - When changing a setting, checkboxes should always be accompanied with a label. 8 | - Labels should be descriptive enough, that they can stand up on their own. For example: 'Enable email notifications' is better than 'Enable/Disable'. 9 | -------------------------------------------------------------------------------- /src/components/tag-group/__examples__/tag-group.examples.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Tag from '../../tag'; 4 | import TagGroup from '../'; 5 | 6 | export const examples = [ 7 | { 8 | title: 'Tag group', 9 | render: () => ( 10 | 11 | Tag one 12 | Another tag 13 | A third tag 14 | 15 | ), 16 | }, 17 | ]; 18 | -------------------------------------------------------------------------------- /src/components/button-group/button-group.module.css: -------------------------------------------------------------------------------- 1 | .ui-btn-group { 2 | display: flex; 3 | align-items: center; 4 | width: auto; 5 | } 6 | 7 | .ui-btn-group--wide { 8 | width: 100%; 9 | } 10 | 11 | .ui-btn-group--align-left { 12 | justify-content: flex-start; 13 | } 14 | 15 | .ui-btn-group--align-center { 16 | justify-content: center; 17 | } 18 | 19 | .ui-btn-group--align-right { 20 | justify-content: flex-end; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/field-validations/__examples__/field-validations.examples.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import FieldValidations from '../'; 4 | 5 | export const examples = [ 6 | { 7 | title: 'FieldValidations (default)', 8 | description: 'An example of FieldValidations (default)', 9 | render: () => ( 10 | 11 | ), 12 | }, 13 | ]; 14 | -------------------------------------------------------------------------------- /src/icons/svg/help_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/perm_identity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/field-label/__tests__/__snapshots__/field-label.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`FieldLabel should render shallow component ok 1`] = ` 4 | 17 | `; 18 | -------------------------------------------------------------------------------- /src/components/inline-alert/inline-alert.module.css: -------------------------------------------------------------------------------- 1 | .ui-inline-alert { 2 | display: flex; 3 | font-size: 1.2rem; 4 | font-weight: 400; 5 | line-height: 1.6rem; 6 | background-color: pink; 7 | padding: 0.8rem 1.6rem; 8 | } 9 | 10 | .ui-inline-alert__content { 11 | padding-left: 8px; 12 | padding-top: 2px; 13 | } 14 | 15 | .ui-inline-alert--info { 16 | background-color: var(--blue000); 17 | color: var(--blue800); 18 | } 19 | -------------------------------------------------------------------------------- /src/icons/svg/attach_file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/local_offer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/person_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/callout/callout.module.css: -------------------------------------------------------------------------------- 1 | .ui-callout { 2 | width: 100%; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | padding: 1.6rem 2.4rem; 7 | line-height: 1.6; 8 | } 9 | 10 | .ui-callout--variant-blue { 11 | background-color: var(--blue000); 12 | border: 1px solid var(--blue300); 13 | color: var(--blue500); 14 | font-weight: var(--font-weight-semibold); 15 | font-size: 1.6rem; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/star-rating/__tests__/star-rating.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import renderer from 'react-test-renderer'; 4 | 5 | import StarRating from '../star-rating.react'; 6 | 7 | describe('StarRating', () => { 8 | test('should render properly', () => { 9 | const wrapper = renderer.create().toJSON(); 10 | 11 | expect(wrapper).toMatchSnapshot(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/components/table/__tests__/table.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import {shallow} from 'enzyme'; 4 | import Table from '../'; 5 | 6 | describe('', () => { 7 | it('should render children', () => { 8 | const result = shallow( 9 |
10 | 11 |
12 | ); 13 | const tbody = result.find('tbody'); 14 | expect(tbody.length).toBe(1); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/skeleton/components/skeleton-content.react.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import {Box} from '../../layout'; 5 | 6 | const SkeletonContent = ({children, ...otherProps}) => ( 7 | 8 | {children} 9 | 10 | ); 11 | 12 | SkeletonContent.propTypes = { 13 | children: PropTypes.node.isRequired, 14 | }; 15 | 16 | export default SkeletonContent; 17 | -------------------------------------------------------------------------------- /src/components/table/__tests__/table-row.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import {shallow} from 'enzyme'; 4 | import TableRow from '../'; 5 | 6 | describe('', () => { 7 | it('should render children', () => { 8 | const result = shallow( 9 | 10 | 11 | 12 | ); 13 | const td = result.find('td'); 14 | expect(td.length).toBe(1); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/h3/h3.react.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Heading from '../heading'; 4 | 5 | const H3 = props => { 6 | const {children} = props; 7 | return ( 8 | 9 | {children} 10 | 11 | ); 12 | }; 13 | 14 | H3.propTypes = { 15 | children: PropTypes.node.isRequired, 16 | }; 17 | 18 | export default H3; 19 | -------------------------------------------------------------------------------- /src/components/table/__tests__/table-body.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import {shallow} from 'enzyme'; 4 | import TableBody from '../'; 5 | 6 | describe('', () => { 7 | it('should render children', () => { 8 | const result = shallow( 9 | 10 | 11 | 12 | ); 13 | const tr = result.find('tr'); 14 | expect(tr.length).toBe(1); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/components/table/__tests__/table-head.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import {shallow} from 'enzyme'; 4 | import TableHead from '../'; 5 | 6 | describe('', () => { 7 | it('should render children', () => { 8 | const result = shallow( 9 | 10 | 11 | 12 | ); 13 | const tr = result.find('tr'); 14 | expect(tr.length).toBe(1); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/icons/svg/how_to_reg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/icons/svg/kalo_tasks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/h2/h2.react.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import Heading from '../heading'; 5 | 6 | const H2 = props => { 7 | const {children} = props; 8 | 9 | return ( 10 | 11 | {children} 12 | 13 | ); 14 | }; 15 | 16 | H2.propTypes = { 17 | children: PropTypes.node.isRequired, 18 | }; 19 | 20 | export default H2; 21 | -------------------------------------------------------------------------------- /src/components/h4/h4.react.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import Heading from '../heading'; 5 | 6 | const H4 = props => { 7 | const {children} = props; 8 | 9 | return ( 10 | 11 | {children} 12 | 13 | ); 14 | }; 15 | 16 | H4.propTypes = { 17 | children: PropTypes.node.isRequired, 18 | }; 19 | 20 | export default H4; 21 | -------------------------------------------------------------------------------- /src/icons/svg/assignment_ind.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/h1/h1.react.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import Heading from '../heading'; 5 | 6 | const H1 = props => { 7 | const {children} = props; 8 | 9 | return ( 10 | 11 | {children} 12 | 13 | ); 14 | }; 15 | 16 | H1.propTypes = { 17 | children: PropTypes.node.isRequired, 18 | }; 19 | 20 | export default H1; 21 | -------------------------------------------------------------------------------- /src/icons/svg/people.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/extension.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/svg/format_color_fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/icons/svg/playlist_add_check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/toggle-button/__tests__/toggle-button.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import renderer from 'react-test-renderer'; 4 | 5 | import ToggleButton from '../toggle-button.react'; 6 | 7 | describe('ToggleButton', () => { 8 | test('should render shallow component ok', () => { 9 | const element = renderer 10 | .create( {}} />) 11 | .toJSON(); 12 | expect(element).toMatchSnapshot(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /config/design-tokens/box-shadow.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: box-shadow 3 | category: layout 4 | props: &BOX_SHADOW 5 | BOX_SHADOW_LEVEL_0: 6 | value: none 7 | BOX_SHADOW_LEVEL_1: 8 | value: 0 3px 6px rgba(140, 140, 140, 0.08) 9 | BOX_SHADOW_LEVEL_2: 10 | value: 0 10px 25px rgba(140, 140, 140, 0.14) 11 | BOX_SHADOW_LEVEL_3: 12 | value: 0 12px 25px rgba(140, 140, 140, 0.21) 13 | BOX_SHADOW_LEVEL_4: 14 | value: 0 14px 25px rgba(140, 140, 140, 0.27) 15 | aliases: *BOX_SHADOW 16 | -------------------------------------------------------------------------------- /src/icons/svg/picture_as_pdf.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/helper-text/helper-text.react.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import Text from '../text'; 5 | 6 | const HelperText = props => { 7 | const {children, ...otherProps} = props; 8 | 9 | return ( 10 | 11 | {children} 12 | 13 | ); 14 | }; 15 | 16 | HelperText.propTypes = { 17 | children: PropTypes.string, 18 | }; 19 | 20 | export default HelperText; 21 | -------------------------------------------------------------------------------- /src/components/star-rating/star-rating.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .star { 7 | position: relative; 8 | overflow: hidden; 9 | } 10 | 11 | .icon { 12 | transition: all 0.2s linear; 13 | position: absolute; 14 | } 15 | 16 | .background { 17 | display: flex; 18 | color: var(--grey300); 19 | } 20 | 21 | .foreground { 22 | display: flex; 23 | color: var(--grey300); 24 | } 25 | 26 | .half { 27 | width: 50%; 28 | overflow: hidden; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/textarea/__tests__/textarea.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import renderer from 'react-test-renderer'; 4 | 5 | import Textarea from '../'; 6 | 7 | describe('Input', () => { 8 | const defaultProps = { 9 | size: 'medium', 10 | theme: 'default', 11 | }; 12 | 13 | test('should render shallow component ok', () => { 14 | const element = renderer.create(