From c5f9dac59d1e232922ce630e89d935d5f391878f Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 23 Sep 2019 15:09:27 -0400 Subject: [PATCH 01/98] Updated scss-lint for codeclimate --- .sass-lint.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.sass-lint.yml b/.sass-lint.yml index d422f7de7..3ef28d6d4 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -54,22 +54,22 @@ rules: # Name Formats class-name-format: - 1 - - convention: hyphenatedbem + - convention: hyphenated_BEM function-name-format: - 1 - - convention: hyphenatedbem + - convention: hyphenated_BEM id-name-format: - 1 - - convention: hyphenatedbem + - convention: hyphenated_BEM mixin-name-format: - 1 - - convention: hyphenatedbem + - convention: hyphenated_BEM placeholder-name-format: - 1 - - convention: hyphenatedbem + - convention: hyphenated_BEM variable-name-format: - 1 - - convention: hyphenatedbem + - convention: hyphenated_BEM # Style Guide attribute-quotes: 1 From 6d7080d73282a6a29e9a53458148be28a0d139d0 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Wed, 2 Oct 2019 10:25:42 -0400 Subject: [PATCH 02/98] Migrated Style Guide and setup build process --- angular.json | 112 ++- package-lock.json | 18 + package.json | 7 +- projects/go-style-guide/karma.conf.js | 32 + projects/go-style-guide/src/_redirects | 1 + .../go-style-guide/src/app/app.animations.ts | 35 + .../go-style-guide/src/app/app.component.html | 6 + .../go-style-guide/src/app/app.component.scss | 106 +++ .../src/app/app.component.spec.ts | 35 + .../go-style-guide/src/app/app.component.ts | 47 ++ projects/go-style-guide/src/app/app.module.ts | 54 ++ .../app/config/routes/app-routing.module.ts | 12 + .../src/app/core/core.module.ts | 42 ++ .../dashboard/dashboard.component.html | 1 + .../dashboard/dashboard.component.ts | 13 + .../getting-started.component.html | 131 ++++ .../getting-started.component.spec.ts | 25 + .../getting-started.component.ts | 17 + .../features/dashboard/dashboard.module.ts | 26 + .../routes/dashboard-routing.module.ts | 20 + .../src/app/features/features.module.ts | 23 + .../components/colors/colors.component.html | 163 +++++ .../components/colors/colors.component.scss | 64 ++ .../colors/colors.component.spec.ts | 25 + .../components/colors/colors.component.ts | 79 ++ .../components/forms/forms.component.html | 678 ++++++++++++++++++ .../components/forms/forms.component.ts | 389 ++++++++++ .../components/grid/grid.component.html | 232 ++++++ .../components/grid/grid.component.scss | 7 + .../components/grid/grid.component.ts | 85 +++ .../standards/standards.component.html | 20 + .../standards/standards.component.ts | 13 + .../typography/typography.component.html | 85 +++ .../typography/typography.component.ts | 37 + .../routes/standards-routing.module.ts | 26 + .../features/standards/standards.module.ts | 33 + .../accordion-docs.component.html | 174 +++++ .../accordion-docs.component.ts | 82 +++ .../accordion-panel-docs.component.html | 99 +++ .../accordion-panel-docs.component.spec.ts | 25 + .../accordion-panel-docs.component.ts | 51 ++ .../badge-docs/badge-docs.component.html | 120 ++++ .../badge-docs/badge-docs.coponent.ts | 39 + .../basic-test/basic-test.component.html | 31 + .../basic-test/basic-test.component.scss | 5 + .../basic-test/basic-test.component.ts | 27 + .../button-docs/button-docs.component.html | 354 +++++++++ .../button-docs/button-docs.component.spec.ts | 25 + .../button-docs/button-docs.component.ts | 111 +++ .../card-docs/card-docs.component.html | 45 ++ .../card-docs/card-docs.component.spec.ts | 25 + .../card-docs/card-docs.component.ts | 39 + .../copy-docs/copy-docs.component.html | 43 ++ .../copy-docs/copy-docs.component.scss | 7 + .../copy-docs/copy-docs.component.spec.ts | 25 + .../copy-docs/copy-docs.component.ts | 20 + .../datepicker-docs.component.html | 353 +++++++++ .../datepicker-docs.component.ts | 153 ++++ .../form-control-docs.component.html | 25 + .../form-control-docs.component.ts | 21 + .../forms-overview.component.html | 29 + .../forms-overview.component.ts | 14 + .../input-docs/input-docs.component.html | 286 ++++++++ .../input-docs/input-docs.component.ts | 111 +++ .../text-area-docs.component.html | 249 +++++++ .../text-area-docs.component.ts | 114 +++ .../form-docs/form-docs.component.html | 1 + .../form-docs/form-docs.component.ts | 19 + .../icon-docs/icon-docs.component.html | 149 ++++ .../icon-docs/icon-docs.component.scss | 10 + .../icon-docs/icon-docs.component.spec.ts | 25 + .../icon-docs/icon-docs.component.ts | 63 ++ .../layout-example.component.html | 31 + .../layout-example.component.spec.ts | 25 + .../layout-example.component.ts | 114 +++ .../layout-header.component.html | 66 ++ .../layout-header.component.spec.ts | 25 + .../layout-header/layout-header.component.ts | 56 ++ .../layout-nav/layout-nav.component.html | 108 +++ .../layout-nav/layout-nav.component.spec.ts | 25 + .../layout-nav/layout-nav.component.ts | 94 +++ .../layout-overview.component.html | 39 + .../layout-overview.component.spec.ts | 25 + .../layout-overview.component.ts | 48 ++ .../layout-search.component.html | 84 +++ .../layout-search.component.spec.ts | 25 + .../layout-search/layout-search.component.ts | 116 +++ .../layout-docs/layout-docs.component.html | 1 + .../layout-docs/layout-docs.component.spec.ts | 25 + .../layout-docs/layout-docs.component.ts | 21 + .../loader-docs/loader-docs.component.html | 90 +++ .../loader-docs/loader-docs.component.spec.ts | 25 + .../loader-docs/loader-docs.component.ts | 31 + .../modal-docs/modal-docs.component.html | 88 +++ .../modal-docs/modal-docs.component.spec.ts | 25 + .../modal-docs/modal-docs.component.ts | 76 ++ .../modal-test/modal-test.component.html | 1 + .../modal-test/modal-test.component.spec.ts | 25 + .../modal-test/modal-test.component.ts | 11 + .../off-canvas-docs.component.html | 106 +++ .../off-canvas-docs.component.ts | 88 +++ .../server-integration.component.html | 105 +++ .../server-integration.component.ts | 60 ++ .../table-actions-docs.component.html | 35 + .../table-actions-docs.component.spec.ts | 25 + .../table-actions-docs.component.ts | 41 ++ .../table-overview.component.html | 55 ++ .../table-overview.component.ts | 59 ++ .../table-pagination.component.html | 63 ++ .../table-pagination.component.ts | 64 ++ .../table-selection.component.html | 136 ++++ .../table-selection.component.spec.ts | 25 + .../table-selection.component.ts | 182 +++++ .../table-sorting.component.html | 67 ++ .../table-sorting/table-sorting.component.ts | 79 ++ .../table-templates.component.html | 102 +++ .../table-templates.component.scss | 9 + .../table-templates.component.ts | 66 ++ .../table-docs/table-docs.component.html | 1 + .../table-docs/table-docs.component.ts | 23 + .../table-docs/table-docs.service.ts | 22 + .../toast-docs/toast-docs.component.html | 104 +++ .../toast-docs/toast-docs.component.spec.ts | 25 + .../toast-docs/toast-docs.component.ts | 82 +++ .../components/ui-kit/ui-kit.component.html | 21 + .../components/ui-kit/ui-kit.component.ts | 13 + .../ui-kit/routes/ui-kit-routing.module.ts | 81 +++ .../src/app/features/ui-kit/ui-kit.module.ts | 136 ++++ .../components/sub-nav/sub-nav.component.html | 26 + .../components/sub-nav/sub-nav.component.scss | 113 +++ .../sub-nav/sub-nav.component.spec.ts | 25 + .../components/sub-nav/sub-nav.component.ts | 43 ++ .../components/sub-nav/sub-nav.service.ts | 8 + .../src/app/shared/shared.module.ts | 28 + projects/go-style-guide/src/assets/.gitkeep | 0 .../src/assets/images/favicon.png | Bin 0 -> 439 bytes .../src/assets/images/goDesign.svg | 1 + projects/go-style-guide/src/browserslist | 11 + .../src/environments/environment.prod.ts | 3 + .../src/environments/environment.ts | 16 + projects/go-style-guide/src/index.html | 14 + projects/go-style-guide/src/main.ts | 12 + projects/go-style-guide/src/polyfills.ts | 63 ++ projects/go-style-guide/src/styles.css | 1 + .../go-style-guide/src/styles/_reset.scss | 51 ++ .../go-style-guide/src/styles/_settings.scss | 6 + .../src/styles/_typography.scss | 45 ++ .../go-style-guide/src/styles/styles.scss | 78 ++ projects/go-style-guide/src/test.ts | 20 + projects/go-style-guide/tsconfig.app.json | 11 + projects/go-style-guide/tsconfig.spec.json | 18 + projects/go-style-guide/tslint.json | 17 + 152 files changed, 9451 insertions(+), 2 deletions(-) create mode 100644 projects/go-style-guide/karma.conf.js create mode 100644 projects/go-style-guide/src/_redirects create mode 100644 projects/go-style-guide/src/app/app.animations.ts create mode 100644 projects/go-style-guide/src/app/app.component.html create mode 100644 projects/go-style-guide/src/app/app.component.scss create mode 100644 projects/go-style-guide/src/app/app.component.spec.ts create mode 100644 projects/go-style-guide/src/app/app.component.ts create mode 100644 projects/go-style-guide/src/app/app.module.ts create mode 100644 projects/go-style-guide/src/app/config/routes/app-routing.module.ts create mode 100644 projects/go-style-guide/src/app/core/core.module.ts create mode 100644 projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.html create mode 100644 projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.ts create mode 100644 projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html create mode 100644 projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts create mode 100644 projects/go-style-guide/src/app/features/dashboard/dashboard.module.ts create mode 100644 projects/go-style-guide/src/app/features/dashboard/routes/dashboard-routing.module.ts create mode 100644 projects/go-style-guide/src/app/features/features.module.ts create mode 100644 projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html create mode 100644 projects/go-style-guide/src/app/features/standards/components/colors/colors.component.scss create mode 100644 projects/go-style-guide/src/app/features/standards/components/colors/colors.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/standards/components/colors/colors.component.ts create mode 100644 projects/go-style-guide/src/app/features/standards/components/forms/forms.component.html create mode 100644 projects/go-style-guide/src/app/features/standards/components/forms/forms.component.ts create mode 100644 projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html create mode 100644 projects/go-style-guide/src/app/features/standards/components/grid/grid.component.scss create mode 100644 projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts create mode 100644 projects/go-style-guide/src/app/features/standards/components/standards/standards.component.html create mode 100644 projects/go-style-guide/src/app/features/standards/components/standards/standards.component.ts create mode 100644 projects/go-style-guide/src/app/features/standards/components/typography/typography.component.html create mode 100644 projects/go-style-guide/src/app/features/standards/components/typography/typography.component.ts create mode 100644 projects/go-style-guide/src/app/features/standards/routes/standards-routing.module.ts create mode 100644 projects/go-style-guide/src/app/features/standards/standards.module.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.coponent.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.scss create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.scss create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.scss create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.scss create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.service.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts create mode 100644 projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.html create mode 100644 projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss create mode 100644 projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.spec.ts create mode 100644 projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.ts create mode 100644 projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service.ts create mode 100644 projects/go-style-guide/src/app/shared/shared.module.ts create mode 100644 projects/go-style-guide/src/assets/.gitkeep create mode 100644 projects/go-style-guide/src/assets/images/favicon.png create mode 100644 projects/go-style-guide/src/assets/images/goDesign.svg create mode 100644 projects/go-style-guide/src/browserslist create mode 100644 projects/go-style-guide/src/environments/environment.prod.ts create mode 100644 projects/go-style-guide/src/environments/environment.ts create mode 100644 projects/go-style-guide/src/index.html create mode 100644 projects/go-style-guide/src/main.ts create mode 100644 projects/go-style-guide/src/polyfills.ts create mode 100644 projects/go-style-guide/src/styles.css create mode 100644 projects/go-style-guide/src/styles/_reset.scss create mode 100644 projects/go-style-guide/src/styles/_settings.scss create mode 100644 projects/go-style-guide/src/styles/_typography.scss create mode 100644 projects/go-style-guide/src/styles/styles.scss create mode 100644 projects/go-style-guide/src/test.ts create mode 100644 projects/go-style-guide/tsconfig.app.json create mode 100644 projects/go-style-guide/tsconfig.spec.json create mode 100644 projects/go-style-guide/tslint.json diff --git a/angular.json b/angular.json index e24502714..612078cbc 100644 --- a/angular.json +++ b/angular.json @@ -168,7 +168,117 @@ } } } + }, + "go-style-guide": { + "root": "projects/go-style-guide/", + "sourceRoot": "projects/go-style-guide/src", + "projectType": "application", + "prefix": "app", + "schematics": { + "@schematics/angular:component": { + "styleext": "scss" + } + }, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/go-style-guide", + "index": "projects/go-style-guide/src/index.html", + "main": "projects/go-style-guide/src/main.ts", + "polyfills": "projects/go-style-guide/src/polyfills.ts", + "tsConfig": "projects/go-style-guide/tsconfig.app.json", + "assets": [ + "projects/go-style-guide/src/favicon.ico", + "projects/go-style-guide/src/assets", + "projects/go-style-guide/src/_redirects" + ], + "styles": [ + "projects/go-style-guide/src/styles/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": [ + "projects/go-style-guide/src/styles" + ] + }, + "es5BrowserSupport": true + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "projects/go-style-guide/src/environments/environment.ts", + "with": "projects/go-style-guide/src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "go-style-guide:build" + }, + "configurations": { + "production": { + "browserTarget": "go-style-guide:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "go-style-guide:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "projects/go-style-guide/src/test.ts", + "polyfills": "projects/go-style-guide/src/polyfills.ts", + "tsConfig": "projects/go-style-guide/tsconfig.spec.json", + "karmaConfig": "projects/go-style-guide/karma.conf.js", + "styles": [ + "projects/go-style-guide/src/styles.css" + ], + "scripts": [], + "assets": [ + "projects/go-style-guide/src/favicon.ico", + "projects/go-style-guide/src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "projects/go-style-guide/tsconfig.app.json", + "projects/go-style-guide/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } } }, "defaultProject": "go-lib" -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7f2087c28..1e63985bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4286,6 +4286,11 @@ "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", "dev": true }, + "faker": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/faker/-/faker-4.1.0.tgz", + "integrity": "sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=" + }, "fast-deep-equal": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", @@ -5486,6 +5491,11 @@ "minimalistic-assert": "^1.0.1" } }, + "highlight.js": { + "version": "9.15.10", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz", + "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7679,6 +7689,14 @@ } } }, + "ngx-highlightjs": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/ngx-highlightjs/-/ngx-highlightjs-3.0.3.tgz", + "integrity": "sha512-/Eh+uJL9CiePWXzyT7VpLaQoWQyyNEUQaHhJ4faUBQZLBpachCBY55iDX0mi50zG9dapTiiapH5Vz/sL2GDxlg==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index f28f42dbb..47a6fae16 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,9 @@ "package": "npm run build_lib && npm run npm_pack", "publish": "npm run package && cd dist/go-lib && npm publish", "publish_local": "npm run package && node ./local_install.js", - "sass-lint": "node_modules/.bin/sass-lint -c .sass-lint.yml" + "sass-lint": "node_modules/.bin/sass-lint -c .sass-lint.yml", + "style_guide": "ng serve --project=go-style-guide", + "style_guide_publish": "ng build --prod --project=go-style-guide" }, "private": true, "engines": { @@ -43,6 +45,9 @@ "@ng-select/ng-select": "^2.20.5", "classlist.js": "^1.1.20150312", "core-js": "^2.5.4", + "faker": "4.1.0", + "highlight.js": "^9.13.1", + "ngx-highlightjs": "^3.0.1", "npm": "^6.10.1", "rxjs": "~6.5.2", "web-animations-js": "^2.3.2", diff --git a/projects/go-style-guide/karma.conf.js b/projects/go-style-guide/karma.conf.js new file mode 100644 index 000000000..badbe3f7f --- /dev/null +++ b/projects/go-style-guide/karma.conf.js @@ -0,0 +1,32 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../../coverage/go-style-guide'), + reports: ['html', 'lcovonly', 'text-summary'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/projects/go-style-guide/src/_redirects b/projects/go-style-guide/src/_redirects new file mode 100644 index 000000000..b21f6cb71 --- /dev/null +++ b/projects/go-style-guide/src/_redirects @@ -0,0 +1 @@ +/* /index.html 200 \ No newline at end of file diff --git a/projects/go-style-guide/src/app/app.animations.ts b/projects/go-style-guide/src/app/app.animations.ts new file mode 100644 index 000000000..2fdb61971 --- /dev/null +++ b/projects/go-style-guide/src/app/app.animations.ts @@ -0,0 +1,35 @@ +import { + animate, + AnimationTriggerMetadata, + query, + style, + transition, + trigger +} from '@angular/animations'; + +export const routerAnimation: AnimationTriggerMetadata = +trigger('routerAnimation', [ + transition('* <=> *', [ + // Initial state of new route + query(':enter', + [ + style({ opacity: 0 }) + ], + { optional: true } + ), + query(':leave', + [ + style({ opacity: 1 }), + animate('0.2s', style({ opacity: 0 })) + ], + { optional: true } + ), + query(':enter', + [ + style({ opacity: 0 }), + animate('0.2s', style({ opacity: 1 })) + ], + { optional: true } + ) + ]) +]); diff --git a/projects/go-style-guide/src/app/app.component.html b/projects/go-style-guide/src/app/app.component.html new file mode 100644 index 000000000..bee619b25 --- /dev/null +++ b/projects/go-style-guide/src/app/app.component.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/projects/go-style-guide/src/app/app.component.scss b/projects/go-style-guide/src/app/app.component.scss new file mode 100644 index 000000000..978d3308d --- /dev/null +++ b/projects/go-style-guide/src/app/app.component.scss @@ -0,0 +1,106 @@ +@import '../../../go-lib/src/styles/variables'; +@import '../../../go-lib/src/styles/mixins'; + +// GLOBAL +a { + text-decoration: none; +} + +// MAIN +body { + background: $theme-light-app-bg; + color: $theme-light-color; + font-family: $base-font-stack; + font-weight: 300; +} + +code { + margin: .5rem 0 1.5rem; + + &.code-block--no-bottom-margin { + margin-bottom: 0; + } +} + +.main { + display: flex; + flex-direction: column; + max-height: 100vh; + min-height: 100vh; + overflow: hidden; +} + +.main__content { + display: flex; + flex-grow: 1; +} + +.main__route-container { + display: flex; + flex-grow: 1; + position: relative; +} + +.main__route-container-outlet ~ * { + height: 100%; + overflow-x: hidden; + overflow-y: auto; + padding: 3rem; + position: absolute; + width: 100%; +} + +// NAV +.main__nav { + background: $theme-dark-bg; + border-right: 1px solid $theme-dark-border; + color: $theme-dark-color; +} + +// HEADER +.main__header { + align-items: center; + background: $theme-light-bg; + border-bottom: 1px solid $theme-light-border; + display: flex; + height: 60px; + justify-content: space-around; + width: 100%; +} + +.header__logo { + height: 100%; + padding: 1rem; + + img { + height: 100%; + } +} + +.header__search { + background: $theme-light-app-bg; + border-radius: $global-radius; + color: $theme-light-color; + padding: 0.75rem; + width: 450px; +} + +.header__theme-switcher { + align-items: center; + color: $theme-light-color; + cursor: pointer; + display: flex; + height: 100%; + padding: 1rem; + @include transition(all); + + &:hover { + background: $theme-light-bg-hover; + } +} + +.dark-example-area { + background: $theme-dark-bg; + border-radius: $global-radius; + padding: $column-gutter; +} diff --git a/projects/go-style-guide/src/app/app.component.spec.ts b/projects/go-style-guide/src/app/app.component.spec.ts new file mode 100644 index 000000000..97c4e51dd --- /dev/null +++ b/projects/go-style-guide/src/app/app.component.spec.ts @@ -0,0 +1,35 @@ +import { TestBed, async } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + RouterTestingModule + ], + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'styleGuide'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('styleGuide'); + }); + + it('should render title in a h1 tag', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('Welcome to styleGuide!'); + }); +}); diff --git a/projects/go-style-guide/src/app/app.component.ts b/projects/go-style-guide/src/app/app.component.ts new file mode 100644 index 000000000..78d587286 --- /dev/null +++ b/projects/go-style-guide/src/app/app.component.ts @@ -0,0 +1,47 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { routerAnimation } from './app.animations'; + +import { NavGroup, NavItem } from '../../../go-lib/src/public_api'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], + encapsulation: ViewEncapsulation.None, + animations: [routerAnimation] +}) +export class AppComponent { + + menuItems: Array = [ + { route: 'getting-started', routeIcon: 'power_settings_new', routeTitle: 'Getting Started' }, + { route: 'standards', routeIcon: 'gavel', routeTitle: 'Standards', subRoutes: [ + { route: 'standards/colors', routeTitle: 'Colors' }, + { route: 'standards/forms', routeTitle: 'Forms' }, + { route: 'standards/grid', routeTitle: 'Grid System' }, + { route: 'standards/typography', routeTitle: 'Typography' } + ]}, + { route: 'ui-kit', routeIcon: 'widgets', routeTitle: 'Components', subRoutes: [ + { route: 'ui-kit/accordion', routeTitle: 'Accordion' }, + { route: 'ui-kit/accordion-panel', routeTitle: 'Accordion Panel' }, + { route: 'ui-kit/badge', routeTitle: 'Badge' }, + { route: 'ui-kit/button', routeTitle: 'Button' }, + { route: 'ui-kit/card', routeTitle: 'Card' }, + { route: 'ui-kit/copy', routeTitle: 'Copy' }, + { route: 'ui-kit/forms', routeTitle: 'Forms' }, + { route: 'ui-kit/layout', routeTitle: 'Layout' }, + { route: 'ui-kit/loader', routeTitle: 'Loader' }, + { route: 'ui-kit/icon', routeTitle: 'Icon' }, + { route: 'ui-kit/modal', routeTitle: 'Modal' }, + { route: 'ui-kit/off-canvas', routeTitle: 'Off Canvas' }, + { route: 'ui-kit/table', routeTitle: 'Table'}, + { route: 'ui-kit/toast', routeTitle: 'Toast' } + ]} + ]; + + constructor (router: Router) { } + + getRouteAnimation(outlet: any): void { + return outlet.isActivated ? outlet.activatedRoute : ''; + } +} diff --git a/projects/go-style-guide/src/app/app.module.ts b/projects/go-style-guide/src/app/app.module.ts new file mode 100644 index 000000000..b8deb293e --- /dev/null +++ b/projects/go-style-guide/src/app/app.module.ts @@ -0,0 +1,54 @@ +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; +import { AppRoutingModule } from './config/routes/app-routing.module'; + +import { + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule, + GoModalModule, + GoOffCanvasModule, + GoSideNavModule, + GoToasterModule +} from '../../../go-lib/src/public_api'; + +import { CoreModule } from './core/core.module'; +import { FeaturesModule } from './features/features.module'; + +import { HighlightModule } from 'ngx-highlightjs'; +import bash from 'highlight.js/lib/languages/bash'; +import typescript from 'highlight.js/lib/languages/typescript'; +import scss from 'highlight.js/lib/languages/scss'; +import xml from 'highlight.js/lib/languages/xml'; + +export function hljsLanguages(): any[] { + return [ + { name: 'bash', func: bash }, + { name: 'scss', func: scss }, + { name: 'typescript', func: typescript }, + { name: 'xml', func: xml } + ]; +} + +@NgModule({ + declarations: [ + AppComponent, + ], + imports: [ + AppRoutingModule, + CoreModule, + FeaturesModule, + GoIconButtonModule, + GoHeaderModule, + GoLayoutModule, + GoModalModule, + GoOffCanvasModule, + GoSideNavModule, + GoToasterModule, + HighlightModule.forRoot({ languages: hljsLanguages }), + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/projects/go-style-guide/src/app/config/routes/app-routing.module.ts b/projects/go-style-guide/src/app/config/routes/app-routing.module.ts new file mode 100644 index 000000000..80fa08ffb --- /dev/null +++ b/projects/go-style-guide/src/app/config/routes/app-routing.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { path: '', redirectTo: 'getting-started', pathMatch: 'full' } +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/projects/go-style-guide/src/app/core/core.module.ts b/projects/go-style-guide/src/app/core/core.module.ts new file mode 100644 index 000000000..e5d64bd50 --- /dev/null +++ b/projects/go-style-guide/src/app/core/core.module.ts @@ -0,0 +1,42 @@ + +import { NgModule, Optional, SkipSelf } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterModule } from '@angular/router'; +import { HttpClientModule } from '@angular/common/http'; +import { CommonModule } from '@angular/common'; + +// ==================================================================================== +// Core Module +// --------------------------------------------------------------------------------- +// The CoreModule is a location where we can include all of the modules that our +// other modules need. This provides a single location to provide those things to the +// application. +// **NOTE** +// Be careful about adding things here. If you add something here, you add overhead +// to the entire application. +// ==================================================================================== + +@NgModule({ + imports: [ + BrowserModule, + CommonModule, + RouterModule, + HttpClientModule + ], + exports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + RouterModule, + HttpClientModule + ] +}) + +export class CoreModule { + constructor(@Optional() @SkipSelf() parentModule: CoreModule) { + if (parentModule) { + throw new Error(`CoreModule has already been loaded. Import Core modules in the AppModule only.`); + } + } +} diff --git a/projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.html b/projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.html new file mode 100644 index 000000000..959503bcb --- /dev/null +++ b/projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.html @@ -0,0 +1 @@ +

{{ pageTitle }}

diff --git a/projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.ts b/projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.ts new file mode 100644 index 000000000..78c702700 --- /dev/null +++ b/projects/go-style-guide/src/app/features/dashboard/components/dashboard/dashboard.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + templateUrl: './dashboard.component.html' +}) +export class DashboardComponent implements OnInit { + + pageTitle: String; + + ngOnInit(): void { + this.pageTitle = 'Home'; + } +} diff --git a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html new file mode 100644 index 000000000..74b8be3be --- /dev/null +++ b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html @@ -0,0 +1,131 @@ +
+

Getting Started

+
+
+ + +

Step 0: Before You Go

+ + +
+
+

+ To utlize the design system modules we assume: +

+
    +
  • You have Node installed
    • +
  • You have Angular installed (for goponents)
    • +
  • You're ulitizing SCSS
    • +
+
+

+ The current iteration of our design system is made up of two node modules: +

+
+

+ @tangoe/goponents + (npmjs / + GitHub) +

+

+ This package contains all of the custom Angular Components and Services + outlined in the Components + section of this Style Guide. +

+
+
+

+ @tangoe/gosheets + (npmjs / + GitHub) +

+

+ This package contains all of the global styles for the Go Design. Items included + in this package are: +

+
    +
  • Color/Setting Variables
    • +
  • Various SCSS Mixins
    • +
  • Grid System
    • +
  • Form Styles
    • +
  • Type Styles
    • +
+
+
+ + + + +

Step 1: Installation

+ + +
+

+ Both goponents & gosheets are open source projects and can easily be installed through NPM. +

+
+
+ Install goponents: +
+ +
+ Install gosheets: +
+ +
+
+

Hey, Listen!

+

+ The latest version of goponents may not always have a dependency of the + latest version of gosheets. To avoid problems, install goponents first and look + for the warning output from NPM about peer dependency requirements. +

+

+ Alternatively, you can check for the version of @tangoe/gosheets + on the devDependencies object in + ./node_modules/@tangoe/goponents/package.json +

+
+
+

+ After discovering the version requirements, install that version specifically: +

+ +
+
+ + + + +

Step 2: Setup

+ + +
+
+

Goponents

+

+ For goponents, the setup will depend upon which component you need to implement. + To find that information, check each components' documenation for instructions. + Typically it involves importing the specific module for each component you use. +

+

+ DO NOT import every component into every module. ONLY + import what is needed for each module. +

+
+
+

Gosheets

+

+ To utlize all of the benefits gosheets has to offer, in the root styles.scss + of the project import: +

+ +

+ Alternatively, partials can be imported individually. These can be found: +

+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts new file mode 100644 index 000000000..19747738e --- /dev/null +++ b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GettingStartedComponent } from './getting-started.component'; + +describe('GettingStartedComponent', () => { + let component: GettingStartedComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GettingStartedComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GettingStartedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts new file mode 100644 index 000000000..f809d02cb --- /dev/null +++ b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-getting-started', + templateUrl: './getting-started.component.html' +}) +export class GettingStartedComponent { + + installGoponents: string = `npm install @tangoe/goponents`; + installGosheets: string = `npm install @tangoe/gosheets`; + installGosheetsVersion: string = `npm install @tangoe/gosheets@1.0.0`; + importGosheetsBase: string = `@import "~@tangoe/gosheets/gosheets"`; + importGosheetsPartials: string = `@import "~@tangoe/gosheets/base/*"`; + + constructor() { } + +} diff --git a/projects/go-style-guide/src/app/features/dashboard/dashboard.module.ts b/projects/go-style-guide/src/app/features/dashboard/dashboard.module.ts new file mode 100644 index 000000000..a2c5b0c15 --- /dev/null +++ b/projects/go-style-guide/src/app/features/dashboard/dashboard.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { HighlightModule } from 'ngx-highlightjs'; + +// Module Imports +import { GoCardModule } from '../../../../../go-lib/src/public_api'; + +// Module Routes +import { DashboardRoutesModule } from './routes/dashboard-routing.module'; + +// Module Components +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { GettingStartedComponent } from './components/getting-started/getting-started.component'; + +@NgModule({ + imports: [ + DashboardRoutesModule, + GoCardModule, + HighlightModule + ], + declarations: [ + DashboardComponent, + GettingStartedComponent + ] +}) + +export class DashboardModule { } diff --git a/projects/go-style-guide/src/app/features/dashboard/routes/dashboard-routing.module.ts b/projects/go-style-guide/src/app/features/dashboard/routes/dashboard-routing.module.ts new file mode 100644 index 000000000..9ed8467cb --- /dev/null +++ b/projects/go-style-guide/src/app/features/dashboard/routes/dashboard-routing.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { DashboardComponent } from '../components/dashboard/dashboard.component'; +import { GettingStartedComponent } from '../components/getting-started/getting-started.component'; + + const routes: Routes = [ + { path: 'dashboard', component: DashboardComponent }, + { path: 'getting-started', component: GettingStartedComponent } +]; + + @NgModule({ + imports: [ + RouterModule.forChild(routes) + ], + exports: [ + RouterModule + ] +}) +export class DashboardRoutesModule { } diff --git a/projects/go-style-guide/src/app/features/features.module.ts b/projects/go-style-guide/src/app/features/features.module.ts new file mode 100644 index 000000000..533e5743f --- /dev/null +++ b/projects/go-style-guide/src/app/features/features.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; + +import { DashboardModule } from './dashboard/dashboard.module'; +import { StandardsModule } from './standards/standards.module'; +import { UiKitModule } from './ui-kit/ui-kit.module'; + +// ==================================================================================== +// Features Module +// --------------------------------------------------------------------------------- +// The FeaturesModule is a location where we can include all of the feature modules +// that our application has. A feature would be defined as a group of functionality. +// For example, the Dashboard would be considered a feature. Activities would be +// considered another feature. +// ==================================================================================== + +@NgModule({ + imports: [ + DashboardModule, + StandardsModule, + UiKitModule + ] +}) +export class FeaturesModule { } diff --git a/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html new file mode 100644 index 000000000..f3e3d4940 --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html @@ -0,0 +1,163 @@ +
+

{{ pageTitle }}

+
+
+
+ + +

SASS Color Variables

+ + +

+ All of the available sass variables for theming, branding, & other + UI states are available via the gosheets package. + If the gosheets package is installed, these can be imported in an + scss file with: + @import '~@tangoe/gosheets/base/variables'; +

+ + +
+ +
+ + +

Base Colors

+ + +
+
+
+
+ #65B360 +
+
+ #FFFFFF +
+
+ #B1B1B1 +
+
+ #313536 +
+
+ #202626 +
+
+
+
+ +
+
+ + +
+ +
+ + +

Galaxy Blue

+ + +
+
+

+ Galaxy Blue should be used when an action will result in a completion (ex: form submission), to indicate a positive event + (ex: form completion), a positive status (ex: indicator), or to show a numerical positive (ex: currency).
+ Base SASS variable: $ui-color-positive +

+
+
+ #00838f +
+
+ #00737D +
+
+ #00626B +
+
+ $ui-color-positive-gradient +
+
+
+
+ +
+
+ + +
+ +
+ + +

Horizon Red

+ + +
+
+

+ Horizon Red should be used when an action will result in a negative result (ex: deletion), when + an event has resulted in an error (ex: failed form submission), a sense of urgency is needed (ex: alerts or warnings), or + numerical negative (ex: currency).
+ Base SASS variable: $ui-color-negative +

+
+
+ #DD4C4C +
+
+ #BA3F3F +
+
+ #A83939 +
+
+ $ui-color-negative-gradient +
+
+
+
+ +
+
+ + +
+ +
+ + +

Nebula Purple

+ + +
+
+

+ Nebula Purple should be used to present additional information (ex: notice), or when taking a neutral action (ex: data refresh).
+ Base SASS variable: $ui-color-neutral +

+
+
+ #8A4EDE +
+
+ #7F47CC +
+
+ #7441BA +
+
+ $ui-color-neutral-gradient +
+
+
+
+ +
+
+ + +
+
diff --git a/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.scss b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.scss new file mode 100644 index 000000000..6c4ec5dca --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.scss @@ -0,0 +1,64 @@ +@import '../../../../../../../go-lib/src/styles/variables'; + +$colors: ( + base: ( + $base-primary, + $base-light, + $base-light-secondary, + $base-dark, + $base-dark-secondary + ), + positive: ( + $ui-color-positive, + $ui-color-positive-active, + $ui-color-positive-hover, + $ui-color-positive-gradient + ), + negative: ( + $ui-color-negative, + $ui-color-negative-active, + $ui-color-negative-hover, + $ui-color-negative-gradient + ), + neutral: ( + $ui-color-neutral, + $ui-color-neutral-active, + $ui-color-neutral-hover, + $ui-color-neutral-gradient + ) +); + +@each $name, $palette in $colors { + $index: 1; + + #go-color-#{$name} { + @each $color in $palette { + .go-color-items__item:nth-of-type(#{$index}) { + background: nth($palette, $index); + } + + $index: $index + 1; + } + } +} + +.go-color-items { + border-radius: $global-radius; + display: flex; + flex-direction: row; + flex-wrap: wrap; + overflow: hidden; +} + +.go-color-items__item { + align-items: center; + color: $base-light; + display: flex; + flex-grow: 1; + height: 150px; + justify-content: center; +} + +.go-color-items__item--dark { + color: $base-dark; +} diff --git a/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.spec.ts b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.spec.ts new file mode 100644 index 000000000..65dda2b7b --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ColorsComponent } from './colors.component'; + +describe('ColorsComponent', () => { + let component: ColorsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ColorsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ColorsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.ts b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.ts new file mode 100644 index 000000000..8ebcea01d --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.ts @@ -0,0 +1,79 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './colors.component.html', + styleUrls: ['./colors.component.scss'] +}) +export class ColorsComponent { + pageTitle: string = 'Colors'; + + baseColors: string = ` + $base-primary: #65B360; + $base-light: #FFFFFF; + $base-light-secondary: #B1B1B1; + $base-dark: #313536; + $base-dark-secondary: #202626; + `; + + lightTheme: string = ` + // Use as the app background + $theme-light-app-bg: #F0F0F0; + // Used as the base background for all components + $theme-light-bg: $base-light; + // Used when the background needs an active state + $theme-light-bg-active: darken($base-light, 4); + // Used when the background needs a hover state + $theme-light-bg-hover: darken($base-light, 7); + // Used for the font color + $theme-light-color: $base-dark; + // Used when the font color needs a hover state + $theme-light-color-hover: lighten($base-dark, 20); + // Used to apply a border to an element + $theme-light-border: $base-light-secondary; + `; + + galaxyBlue: string = ` + // Use this to apply the positive (success) state color + $ui-color-positive: #4EDED2; + + // Used when the ui color needs an active state + $ui-color-positive-active: #47CCC1; + + // Used when the ui color needs a hover state + $ui-color-positive-hover: #41BAB0; + + // Use this to apply the brand color as a gradient. + // Should only be used as a small accent + $ui-color-positive-gradient: linear-gradient(to bottom, $ui-color-positive, $ui-color-positive-hover); + `; + + horizonRed: string = ` + // Use this to apply the negative (error) state color + $ui-color-negative: #DD4C4C; + + // Used when the ui color needs an active state + $ui-color-negative-active: #BA3F3F; + + // Used when the ui color needs a hover state + $ui-color-negative-hover: #A83939; + + // Use this to apply the brand color as a gradient. + // Should only be used as a small accent + $ui-color-negative-gradient: linear-gradient(to bottom, $ui-color-negative, $ui-color-negative-hover); + `; + + nebulaPurple: string = ` + // Use this to apply the neutral (info) state color + $ui-color-neutral: #8A4EDE; + + // Used when the ui color needs an active state + $ui-color-neutral-active: #7F47CC; + + // Used when the ui color needs a hover state + $ui-color-neutral-hover: #7441BA; + + // Use this to apply the brand color as a gradient. + // Should only be used as a small accent + $ui-color-neutral-gradient: linear-gradient(to bottom, $ui-color-neutral, $ui-color-neutral-hover); + `; +} diff --git a/projects/go-style-guide/src/app/features/standards/components/forms/forms.component.html b/projects/go-style-guide/src/app/features/standards/components/forms/forms.component.html new file mode 100644 index 000000000..3522d7fb4 --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/forms/forms.component.html @@ -0,0 +1,678 @@ +
+

{{ pageTitle }}

+
+
+ + +

Basic Forms

+ + +
+
+

+ All forms follow several simple rules. +

+
    +
  1. + Be sure to use an appropriate type attribute on all inputs. +
    2. +
  2. + All inputs should also have a corresponding label. +
    3. +
  3. + Outlines on inputs should never be hidden as to have better + visibility and accessibility. +
    4. +
  4. + Outlines should also correspond consistently with error states. +
    5. +
  5. + Hints are to be used as help text and as a way to display more + robust validation errors. +
    6. +
  6. + UI controls should never apply brand colors. +
    7. +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + Submit + +
+
+
+ + + + + + + + + + + +

Form Hints

+ + +
+
+

+ Form hints exist to help give more information about the inputs they + are attached to. They should be directly preceded by the input in + which they describe. +

+

+ Hints have two states. The default state is established by the + go-hint class. +

+
+
+
+
+
+ + +

+ This is the phone number for your work phone. + Please use the following format: +0(000)000-0000. + If you have any further questions please contact support. +

+
+
+

+ If more information is needed to describe an input in an error state + the go-hint--error modifier + class can be additionally added to make the errors more prominent. +

+

+ For better accessibility in the error state, an additional + go-hint__status + element can be added directly inside the hint to better + distinguish between different types of hints. +

+
+
+ + +

+ Error: + Phone number is a required input. +

+

+ This is the phone number for your work phone. + Please use the following format: +0(000)000-0000. + If you have any further questions please contact support. +

+
+
+
+ + + + + + + + + + + +

Text Input Modifiers

+ + +
+
+

All inputs have three basic states.

+

+ The default state is established by the go-form__input + class on text based inputs. +

+

+ The disabled state can be achieved by the addition of the + disabled attribute, + while the error state can be applied by the addition of the + go-form__input--error + modifier class. +

+

+ An input with an error modifier should be followed by an error hint describing + why it is in such a state. +

+

+ If there is an instance where an individual label or input + needs to be displayed on top of a dark background the + --dark modifiers + can be added. +

+
    +
  1. + .go-form__label--dark + - To apply the dark theme styles to a label +
    2. +
  2. + .go-form__input--dark + - To apply the dark theme styles to an input +
    3. +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +

+ Error: + This input is required. Please fill this out to proceed. +

+
+
+ + +
+
+
+ + + + + + + + + + + +

Select Box Modifiers

+ + +
+
+

+ Similar to the input element, the default state of select boxes are established + by the go-form__select class. +

+

+ The disabled state can be achieved by the addition of the + disabled + attribute, while the error state can be applied by the addition of the + go-form__select--error + modifier class. +

+

+ A select box with an error modifier should be followed by an error hint + describing why it is in such a state. +

+

+ If there is an instance where an individual label or select + box needs to be displayed on top of a dark background the + --dark modifiers + can be added. +

+
    +
  1. + .go-form__label--dark + - To apply the dark theme styles to a label +
    2. +
  2. + .go-form__select--dark + - To apply the dark theme styles to the select box +
    3. +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +

+ Error: + This input is required. Please select an option to proceed. +

+
+
+ + +
+
+
+ + + + + + + + + + + +

Check Box / Radio Button Modifiers

+ + +
+
+

+ Similar to the input element, the default state of check boxes and radio buttons + are established by the go-form__checkbox + class. +

+

+ These types of inputs often appear in groups and should always be wrapped in a + fieldset element with an additional + legend element describing the choice + that is being made. +

+

+ The disabled state can be achieved by the addition of the + disabled + attribute to the parent + fieldset + , while the error state can be applied by the addition of the + go-form__select--error + modifier class to the same element. +

+

+ A input with an error modifier should be followed by an error hint + describing why it is in such a state. +

+

+ If there is an instance where an individual label or fieldset + needs to be displayed on top of a dark background the + --dark modifiers + can be added. +

+
    +
  1. + .go-form__label--dark + - To apply the dark theme styles to a label +
    2. +
  2. + .go-form__fieldset--dark + - To apply the dark theme styles to the fieldset +
    3. +
+
+
+
+
+
+
+ Select a Default Option +
+ + +
+
+ + +
+
+ +
+ Select a Disabled Option +
+ + +
+
+ + +
+
+ +
+ Select an Error Option +
+ + +
+
+ + +

+ Error: + This input is required. Please select an option to proceed. +

+
+
+
+
+
+ Select a dark option +
+ + +
+
+ + +
+
+
+
+
+
+
+ + + + + + + + + + + +

Dark Forms

+ + +

+ Dark forms are mostly like the default forms with a few + alterations based on the state of the input. Labels and + text show up as a light color so they are legible on a + dark background. When the input is in a disabled state, + the input will darken slightly to better portray itself + as such. +

+ +

Implementation

+

+ The dark form effect can be achieved in one of two ways. + Generally speaking we will have a whole form that we need + to make dark. In this case, we can simply add the + .go-form--dark + modifier class to the surrounding form element. +

+

+ There might be cases, however, where individual inputs are + not contained within a form element. The dark input styles + can be applied to individual elements by adding the + --dark + modifier to any individual element as well. See documentation + above for individual examples of how to implement dark forms. +

+ +

Example

+

+ One of the most common use cases of a dark form is when forms + are being displayed in the off canvas. +

+ + Open Off Canvas + + + + + + + + + + + + +

+ Advanced Form Example +

+ + +
+
+

+ Below is an example of all of the pieces working together. + This includes a good example of how to use the grid system + in conjunction with the form inputs to create a more robust layout. +

+
+
+
+
+
+
+
+ + +
+
+ + +
+
+ + +

+ This is the phone number for your work phone. + Please use the following format: +0(000)000-0000. + If you have any further questions please contact support. +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ Employee Information +
+
+ + +
+
+ + +

+ This setting specifies the country in which the shipping + address is located. +

+
+ +
+
+ Select A Favorite Character +
+ + +
+
+ + +
+
+ + +
+

+ These are all characters from the beloved Harry Potter series + written by J.R.R. Tolkien. +

+
+
+
+
+ Best Golden Girl? +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ +
+
+ Submit +
+
+
+
+ +
+
+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/standards/components/forms/forms.component.ts b/projects/go-style-guide/src/app/features/standards/components/forms/forms.component.ts new file mode 100644 index 000000000..0628470b3 --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/forms/forms.component.ts @@ -0,0 +1,389 @@ +import { Component } from '@angular/core'; +import { GoOffCanvasService } from '../../../../../../../go-lib/src/public_api'; +import { BasicTestComponent } from '../../../ui-kit/components/basic-test/basic-test.component'; + +@Component({ + templateUrl: './forms.component.html' +}) +export class FormsComponent { + pageTitle: string = 'Forms'; + basicForm: string = this.basicFormTemplate(); + darkForm: string = this.basicFormTemplate(true); + + formHints: string = ` +
+
+
+ + +

+ This is the phone number for your work phone. + Please us the following format: +0(000)000-0000. + If you have any further questions please contact support. +

+
+ +
+ + +

+ Error: + Phone number is a required input. +

+

+ This is the phone number for your work phone. + Please us the following format: +0(000)000-0000. + If you have any further questions please contact support. +

+
+
+
+ `; + + inputModifiers: string = ` +
+
+
+ + +
+
+ + +
+
+ + +

+ Error: + This input is required. Please fill this out to proceed. +

+
+
+ + +
+
+
+ `; + + selectModifiers: string = ` +
+
+
+ + +
+
+ + +
+
+ + +

+ Error: + This input is required. Please select an option to proceed. +

+
+
+ + +
+
+
+ `; + + checkboxModifiers: string = ` +
+
+ Select a Default Option +
+ + +
+
+ + +
+
+
+ Select a Disabled Option +
+ + +
+
+ + +
+
+
+ Select a Error Option +
+ + +
+
+ + +

+ Error: + This input is required. Please select an option to proceed. +

+
+
+
+ Select a dark option +
+ + +
+
+ + +
+
+
+ `; + + advancedForm: string = ` +
+
+
+
+
+ + +
+
+ + +
+
+ + +

+ This is the phone number for your work phone. + Please us the following format: +0(000)000-0000. + If you have any further questions please contact support. +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ Employee Information +
+
+ + +
+
+ + +

+ This setting specifies the country in which the shipping + address is located. +

+
+ +
+
+ Select a Favorite Character +
+ + +
+
+ + +
+
+ + +
+

+ These are all characters from the beloved Harry Potter series + written by J.R.R. Tolkien. +

+
+
+
+
+ Best Golden Girl? +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ +
+ Submit +
+
+
+ `; + + constructor( + private goOffCanvasService: GoOffCanvasService + ) { } + + public openOffCanvas(): void { + this.goOffCanvasService.openOffCanvas({ + component: BasicTestComponent, + bindings: {} + }); + } + + private basicFormTemplate(useDark: boolean = false): string { + const formElement: string = useDark ? '
' : ''; + const buttonAttribute: string = useDark ? ' [useDarkTheme]="true"' : ''; + + return ` + ${formElement} +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + Submit + +
+
+
+ `; + } +} diff --git a/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html new file mode 100644 index 000000000..93debde5d --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html @@ -0,0 +1,232 @@ +
+

{{ pageTitle }}

+
+
+ + +

Flexbox

+ + +

+ The Flexible Box Layout Module (flexbox), makes it easier to + design flexible responsive layout structure without using float or + positioning. Using flexbox we are able to build a lightweight, percentage + based, grid system that suits all of our needs. +

+

+ By default the grid will add a 2rem (32px) + gutter around the grid items. This helps estabilsh a more consistent + vertial and horizontal rhythm. This can be overridden on the column + to help when nesting grids (see "Nested Grid Example"). +

+

+ The nature of flexbox is flexible. For that reason the proportion of + the columns might differ depending on the amount of columns in the + container and the size of the viewport. + Each .go-column--xx item will + attempt to constrain to the designated xx + percentage before filling the remaining space for that row. +

+ + +
+
+ + +

Basic Examples

+ + +

4 Column (~25%)

+

+ The .go-column--25 will create + a column that starts at 25% of the width of the container before filling + the remaining space. It can be used to create a basic 4 column grid. +

+

+ On devices that are tablet sized and smaller the 4 columns created with + the .go-column--25 class will + stretch to being 2 columns per row. Giving it more space on smaller + devices. +

+
+
1 of 4
+
2 of 4
+
3 of 4
+
4 of 4
+
+ + +

3 Column (~33%)

+

+ The .go-column--33 will create + a column that starts at 33% of the width of the container before filling + the remaining space. It can be used to create a basic 3 column grid. +

+

+ On devices that are tablet sized and smaller the 3 columns created with + the .go-column--33 class will + stretch to being 1 column per row. Giving it more space on smaller devices. +

+
+
1 of 3
+
2 of 3
+
3 of 3
+
+ + +

2 Column (~50%)

+

+ The .go-column--50 will create + a column that starts at 50% of the width of the container before filling + the remaining space. It can be used to create a basic 2 column grid. +

+

+ On devices that are tablet sized and smaller the 2 columns created with + the .go-column--50 class will + stretch to being 1 column per row. Giving it more space on smaller devices. +

+
+
1 of 2
+
2 of 2
+
+ + + +
+ +
+ + +

Offset Examples

+ + +

~66% Column

+

+ The .go-column--66 will create + a column that starts at 66% of the width of the container before filling + the remaining space. It can be used to create an offset 2 column grid. +

+

+ On devices that are tablet sized and smaller the 66% column created with + the .go-column--66 class will + stretch to being 1 column per row. Giving it more space on smaller devices. +

+
+
33.33333%
+
66.66667%
+
+ + +

~75% Column

+

+ The .go-column--75 will create + a column that starts at 75% of the width of the container before filling + the remaining space. It can be used to create an offset 2 column grid. +

+

+ On devices that are tablet sized and smaller the 2 columns created with + the .go-column--75 class will + stretch to being 1 column per row. Giving it more space on smaller devices. +

+
+
75%
+
25%
+
+ + + +
+ +
+ + +

Advanced Example

+ + +

Mix Columns

+

+ Below is an example of a mixed column grid. All of the columns can be contained + within a single .go-container element. +

+
+
25%
+
25%
+
50%
+
66%
+
33%
+
100%
+
+ + + +
+ +
+ + +

Nested Grid Example

+ + +

+ Below is an example of a grid nested inside of another grid. All of the columns + can be contained within a single .go-container + element. Note the use of the .go-column--no-padding + modifier class to remove the padding added by default. This ensures that the nested + grid is flush with the bottom of the parent grid. +

+
+
25%
+
+

75%

+
+
50%
+
50%
+
+
+
+ + + +
+ +
+ + +

Collapsable Column

+ + +

+ In some cases, it may be necessary for columns in the grid to collapse to the size of its content. + A modifier class can be added to the column to acheive this: +

+
+
Column 1
+
Column 2
+
+ + + +
+ +
+ + +

Center Alignment

+ + +

+ In some cases, it may be necessary to align items in a container vertically centered. + A modifier class can be added to acheive this: +

+
+
+

Column 1, Row 1

+

Column 1, Row 2

+

Column 1, Row 3

+
+
Column 2
+
+ + + +
diff --git a/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.scss b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.scss new file mode 100644 index 000000000..53d3298fd --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.scss @@ -0,0 +1,7 @@ +@import '../../../../../../../go-lib/src/styles/variables'; + +.example-grid__column { + border: 1px dashed $base-light-secondary; + padding-top: 2rem; + text-align: center; +} diff --git a/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts new file mode 100644 index 000000000..2b9eab8bb --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts @@ -0,0 +1,85 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './grid.component.html', + styleUrls: ['./grid.component.scss'] +}) +export class GridComponent { + pageTitle: string = 'Grid System'; + + basicExample25: string = ` +
+
1 of 4
+
2 of 4
+
3 of 4
+
4 of 4
+
+ `; + + basicExample33: string = ` +
+
1 of 3
+
2 of 3
+
3 of 3
+
+ `; + + basicExample50: string = ` +
+
1 of 2
+
2 of 2
+
+ `; + + offsetExample66: string = ` +
+
33.33333%
+
66.66667%
+
+ `; + + offsetExample75: string = ` +
+
75%
+
25%
+
+ `; + + advancedExampleMixed: string = ` +
+
25%
+
25%
+
50%
+
66%
+
33%
+
100%
+
+ `; + + nestedExample: string = ` +
+
25%
+
+

75%

+
+
50%
+
50%
+
+
+
+ `; + + collapseColumn: string = ` +
+
Column 1
+
Column 2
+
+ `; + + alignCenterContainer: string = ` +
+
Column 1
+
Column 2
+
+ `; +} diff --git a/projects/go-style-guide/src/app/features/standards/components/standards/standards.component.html b/projects/go-style-guide/src/app/features/standards/components/standards/standards.component.html new file mode 100644 index 000000000..c88ab64fd --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/standards/standards.component.html @@ -0,0 +1,20 @@ +
+

{{ pageTitle }}

+
+
+ +
+

+ The goDesign standards detail all that goes into creating and maintaining our design system. + This is the foundation we build all of our components on top of. Every component is designed + with these standards in mind and all elements, when implemented, are expected to comply with + these guidelines. +

+

+ This methodology is heavily based on Atomic Design + which lends itself towards thinking of our UIs as thoughtful hierarchies, discusses the qualities of + effective pattern libraries, and showcases techniques to transform your team's design and development workflow. +

+
+ +
diff --git a/projects/go-style-guide/src/app/features/standards/components/standards/standards.component.ts b/projects/go-style-guide/src/app/features/standards/components/standards/standards.component.ts new file mode 100644 index 000000000..67d66ac64 --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/standards/standards.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + templateUrl: './standards.component.html' +}) +export class StandardsComponent implements OnInit { + + pageTitle: String; + + ngOnInit(): void { + this.pageTitle = 'Standards'; + } +} diff --git a/projects/go-style-guide/src/app/features/standards/components/typography/typography.component.html b/projects/go-style-guide/src/app/features/standards/components/typography/typography.component.html new file mode 100644 index 000000000..e8339b962 --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/typography/typography.component.html @@ -0,0 +1,85 @@ +
+

{{ pageTitle }}

+
+
+ + +

Default Usage

+ + + +

+ By default we apply margin to the bottom of all of the basic typograhical elements. + This allows us to establish a more clear vertical rhythm to enhance readibility. +

+

+ To learn how to remove this margin see below. +

+ + + + + + +
+ + +
+ +
+ + +

Removing Margin

+ + + +

+ The default heading margin can be removed by adding the + go-heading--no-margin + modifier class to any heading. +

+

+ The same styles can be applied on body copy by adding the + body-copy--no-margin + modifier class to any paragraph. +

+ + + + + + +

+ Heading with margin +

+

+ Heading with margin +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +

+

+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, + sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. +

+ +

+ Heading without margin +

+

+ Heading without margin +

+

+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et + dolore magnam aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit + laboriosam, nisi ut aliquid ex ea commodi consequatur? +

+ + +
diff --git a/projects/go-style-guide/src/app/features/standards/components/typography/typography.component.ts b/projects/go-style-guide/src/app/features/standards/components/typography/typography.component.ts new file mode 100644 index 000000000..9214c92ca --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/components/typography/typography.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + templateUrl: './typography.component.html' +}) +export class TypographyComponent implements OnInit { + pageTitle: String; + + basicExample: string = ` +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet repudiandae deserunt voluptas reprehenderit tempora! + Eveniet sunt itaque molestias obcaecati, quasi sit quod deleniti iure incidunt repellat ipsam nam dolore! +

+ `; + + noMarginExample: string = ` +

+ Heading without margin +

+

+ Heading without margin +

+

+ Body copy without margin +

+ `; + + ngOnInit(): void { + this.pageTitle = 'Typography'; + } +} diff --git a/projects/go-style-guide/src/app/features/standards/routes/standards-routing.module.ts b/projects/go-style-guide/src/app/features/standards/routes/standards-routing.module.ts new file mode 100644 index 000000000..dcc4e6109 --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/routes/standards-routing.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { ColorsComponent } from '../components/colors/colors.component'; +import { FormsComponent } from '../components/forms/forms.component'; +import { GridComponent } from '../components/grid/grid.component'; +import { StandardsComponent } from '../components/standards/standards.component'; +import { TypographyComponent } from '../components/typography/typography.component'; + +const routes: Routes = [ + { path: 'standards', component: StandardsComponent }, + { path: 'standards/colors', component: ColorsComponent }, + { path: 'standards/forms', component: FormsComponent }, + { path: 'standards/grid', component: GridComponent }, + { path: 'standards/typography', component: TypographyComponent } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(routes) + ], + exports: [ + RouterModule + ] +}) +export class StandardsRoutesModule { } diff --git a/projects/go-style-guide/src/app/features/standards/standards.module.ts b/projects/go-style-guide/src/app/features/standards/standards.module.ts new file mode 100644 index 000000000..cbdb2771c --- /dev/null +++ b/projects/go-style-guide/src/app/features/standards/standards.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core'; +import { HighlightModule } from 'ngx-highlightjs'; + +// Module Routes +import { StandardsRoutesModule } from './routes/standards-routing.module'; + +import { GoCardModule } from '../../../../../go-lib/src/public_api'; +import { GoButtonModule } from '../../../../../go-lib/src/public_api'; + +// Module Components +import { ColorsComponent } from './components/colors/colors.component'; +import { FormsComponent } from './components/forms/forms.component'; +import { GridComponent } from './components/grid/grid.component'; +import { StandardsComponent } from './components/standards/standards.component'; +import { TypographyComponent } from './components/typography/typography.component'; + +@NgModule({ + imports: [ + HighlightModule, + StandardsRoutesModule, + GoCardModule, + GoButtonModule + ], + declarations: [ + ColorsComponent, + FormsComponent, + GridComponent, + StandardsComponent, + TypographyComponent + ] +}) + +export class StandardsModule { } diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html new file mode 100644 index 000000000..422010785 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html @@ -0,0 +1,174 @@ +
+

{{ pageTitle }}

+
+ +
+ +
+ +

Usage

+

The Go Accordion Component should be used when multiple sets of data need to be rendered, but vertical space is a concern.

+ +

+ The go-accordion element must be accompanied by + go-accordion-panel children. + See Accordion Panel for details. +

+ + +

Bindings

+ + + +

expandAll

+

+ expandAll + will ensure each panel in the accordion is expanded on first render. + expandAll will also override + multiExpand and set it to true. +

+ + +

multiExpand

+

+ multiExpand + will allow for multiple panels to be expanded at any given time. +

+ + +

showIcons

+

+ This will enable each panel to have an icon shown to the left of the heading. +

+ + Note: even if the icon binding is passed to an + accordion-panel, it will not be displayed unless + showIcons is set to true. + This is to encourage a consistent UI. If one accordion-panel + has an icon, they all should. + + + + +
+ + + +
+

Default

+
+
+
+
+

Code

+ +
+
+

View

+ + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
+
+
+ + + +
+

Expand All

+
+
+
+
+

Code

+ +
+
+

View

+ + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
+
+
+ + + +
+

Multiple Expansion

+
+
+
+
+

Code

+ +
+
+

View

+ + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
+
+
+ + + +
+

With Icons

+
+
+
+
+

Code

+ +
+
+

View

+ + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
+
+
+ +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts new file mode 100644 index 000000000..8a6b2c1b4 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts @@ -0,0 +1,82 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + templateUrl: './accordion-docs.component.html' +}) +export class AccordionDocsComponent implements OnInit { + + pageTitle: String; + + defaultExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + expandAllExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + multiExpandExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + showIconsExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + componentBindings: string = ` + @Input() expandAll: boolean = false; + @Input() multiExpand: boolean = false; + @Input() showIcons: boolean = false; + @Input() theme: string = 'light'; + `; + + themeOptions: string = ` + // valid options + - 'light' + - 'dark' + `; + + ngOnInit(): void { + this.pageTitle = 'Accordion'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.html new file mode 100644 index 000000000..0116c9d9c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.html @@ -0,0 +1,99 @@ +
+

{{ pageTitle }}

+
+ +
+ +
+ +

Usage

+

+ The Go Accordion Panel should be used inside of a <go-accordion> + component. See Accordion for details. +

+ + +

Bindings

+ + +

expanded

+

+ This will expand then panel. This is only true at at first render, depending on the Behavior + of the parent go-accordion it will override this. + Typically, you can set This binding to true + for the first go-accordion-panel in the accordion. +

+ +

icon

+

+ This will set an icon for the panel, shown to the left of the heading. +

+ + Note: the icon will only appear if the parent go-accordion + has [showIcons]="true" set. + + +

heading - (required)

+

+ The heading for the panel accepted as a string. +

+ +
+ + + +
+

Default

+
+
+
+
+

Code

+ +
+
+

View

+ + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
+
+
+ + + +
+

With Icons

+
+
+
+
+

Code

+ +
+
+

View

+ + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
+
+
+ +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts new file mode 100644 index 000000000..16a672fe7 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AccordionPanelDocsComponent } from './accordion-panel-docs.component'; + +describe('AccordionPanelDocsComponent', () => { + let component: AccordionPanelDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AccordionPanelDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AccordionPanelDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.ts new file mode 100644 index 000000000..0a4c69609 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.ts @@ -0,0 +1,51 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-accordion-panel-docs', + templateUrl: './accordion-panel-docs.component.html' +}) +export class AccordionPanelDocsComponent implements OnInit { + + pageTitle: string; + + defaultExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + showIconsExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + componentBindings: string = ` + @Input() expanded: boolean = false; + @Input() icon: string = null; + @Input() heading: string; + `; + + constructor() { } + + ngOnInit(): void { + this.pageTitle = 'Accordion Panel'; + } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html new file mode 100644 index 000000000..47115c64f --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html @@ -0,0 +1,120 @@ +
+

{{ pageTitle }}

+
+
+
+ + +
+
+ +

Usage

+

+ The <go-badge> + component should be used for times when we want to show a short notification + to a user over an icon for more information. A good example of this would be + the number of notifications a user has over an icon that goes to their + notifications. +

+ + +

Bindings

+ +
+
+

badgeData

+

+ This is the text or data that we want to show up inside of the badge +

+

badgeColor

+

+ The color can be one of three things neutral, + positive or negative. + These will denote what type of badge it is whether it's a good thing, bad thing or just information. The badgeColor + defaults to `neutral` +

+ +

displayData

+

+ This can be used to override whether the information inside of the badge shows up or not. + Setting this to false will cause the badge to just be an empty circle without displaying + the `badgeData`. +

+
+
+ + + + + +
+

Basic Example

+

+ The badge uses content projection to apply itself to an inline element inside of it. You + can apply it to any element by wrapping the element in the go-badge +

+

Icon

+
+
+ +
+
+ + + +
+
+
+ + + + + +
+

Badge Color

+

Positive

+
+
+ +
+
+ + + +
+
+ +

Negative

+
+
+ +
+
+ + + +
+
+
+ + + + + +
+

Display Data

+
+
+ +
+
+ + + +
+
+
+ + +
+
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.coponent.ts b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.coponent.ts new file mode 100644 index 000000000..c031332f1 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.coponent.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-badge-docs', + templateUrl: './badge-docs.component.html' +}) +export class BadgeDocsComponent { + componentBindings: string = ` + @Input() badgeData: string; + @Input() badgeColor: string = 'neutral'; + @Input() displayData: boolean = true; + `; + + iconBadge: string = ` + + + + `; + + iconBadgePositive: string = ` + + + + `; + + iconBadgeNegative: string = ` + + + + `; + + iconBadgeDisplay: string = ` + + + + `; + + pageTitle: string = 'Badge'; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.html new file mode 100644 index 000000000..007c63dbf --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.html @@ -0,0 +1,31 @@ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + Submit + +
+
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.scss b/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.scss new file mode 100644 index 000000000..812213f4d --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.scss @@ -0,0 +1,5 @@ +@import '../../../../../../../go-lib/src/styles/variables'; + +.basic-test { + padding: $column-gutter--double $column-gutter $column-gutter; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.ts new file mode 100644 index 000000000..48d75dedd --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/basic-test/basic-test.component.ts @@ -0,0 +1,27 @@ +import { Component, ViewChild } from '@angular/core'; +import * as faker from 'faker'; +import { GoButtonComponent, GoOffCanvasService } from '../../../../../../../go-lib/src/public_api'; + +@Component({ + selector: 'app-basic-test', + templateUrl: './basic-test.component.html', + styleUrls: ['./basic-test.component.scss'] +}) +export class BasicTestComponent { + @ViewChild('submitButton') submitButton: GoButtonComponent; + + fakeTitle: string = faker.company.companyName(); + fakeCompanyBs: string = faker.company.bs(); + fakePhrase: string = faker.company.catchPhrase(); + + constructor( + private goOffCanvasService: GoOffCanvasService + ) { } + + public fakeSubmit(): void { + setTimeout(() => { + this.submitButton.reset(); + this.goOffCanvasService.closeOffCanvas(); + }, 2000); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html new file mode 100644 index 000000000..1e81aa30d --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html @@ -0,0 +1,354 @@ +
+

{{ pageTitle }}

+
+
+
+ + +
+
+ +

Usage

+

+ The <go-button> + component should be used for any instance of a button throughout + the app. +

+ + +

Bindings

+ +
+
+

buttonDisabled

+

+ Disables the button. This should be handled by the parent + component. +

+ +

buttonIcon

+

+ Add an icon to the left of the text in the button. See the + Material Design System Icons + page for available icons. +

+ +

buttonType

+

+ Changes the type attribute of the button. This attribute + defaults to "button" but other options are necessary when + doing things like submitting or resetting forms. +

+ +

handleClick

+

+ This event fires when the button is clicked. Use this event + to handle the click event. +

+
+
+

buttonVariant

+

+ The buttonVariant + binding controls the style of the button. This includes + options that allow us to implement the following + modifications: +

+
    +
  1. Default: .go-button
    2. +
  2. Negative: .go-button--negative
    3. +
  3. Neutral: .go-button--neutral
    4. +
  4. Positive: .go-button--positive
    5. +
+ +

isProcessing

+

+ Turns the loading state on/off. It is recommended to use this when + processing data that will take longer than 250ms. Examples: + submitting a form, sorting data, refreshing data from the + server, etc. +

+

useDarkTheme

+

+ Applies a dark theme to the button component. + The dark button styles can be applied by setting the + useDarkTheme + binding to true. +

+
+
+ + +
+ + + +

Default Button

+ + +

+ The default button is preferred when the action being performed + is of little importance. Ideally, the button itself describes + what it does. For example, a button to close a modal would be + a good use case for the default button. It isn't important or + informational, it is just a simple action. +

+ +
+
+ Default +
+
+ Disabled +
+
+ With Icon +
+
+ + + + + +

Negative Buttons

+ + +

+ Negative buttons are displayed in red. Use negative buttons to designate + an action as being dangerous or negative. Deleting a resource + is a good example of when to use this button. It could also be + used to guide a user away from an action we don't want them to + take. +

+ +
+
+ Negative +
+
+ Disabled +
+
+ With Icon +
+
+ + + + + +

Neutral Buttons

+ + +

+ Neutral buttons are displayed in purple. Use neutral buttons to designate + an action as being informational. Opening up a chat modal or + sending a user to an external resource might be a good example + of when to use this button. It could also be used to guide a + user towards an action that isn't necessarily positive, but still + important. +

+ +
+
+ Neutral +
+
+ Disabled +
+
+ With Icon +
+
+ + + + + +

Positive Buttons

+ + +

+ Positive buttons are displayed in blue. Use positive buttons to + designate an action as being positive. Creating a resource or + submitting a form might be a good example of when to use this + button variant. It could also be used to guide a user towards + an action we want them to make, such as signing up for something +

+ +
+
+ Positive +
+
+ Disabled +
+
+ With Icon +
+
+ + + + + +

Button with loader

+ + +

+ Loading buttons display the loading animation inside the + button. By default this is false. It is recommended to use + this when processing data that will take longer than 250ms. + Examples might include submitting a form, sorting data, + refreshing data from the server, etc. While in this state, + a button will additionally be disabled to prevent the action + from being taken more than once. +

+

example.ts

+ +

example.html

+ +
View
+
+
+ + Default Loading + +
+
+ + Negative Loading + +
+
+ + Neutral Loading + +
+
+ + Positive Loading + +
+
+ + + + + +

Dark buttons

+ + +
+
+

+ Dark buttons work all the same as the rest of the buttons, + the difference being that some of the colors have been tweaked + to allow this button to maintain an appropriate amount of + contrast when displayed on a dark background. +

+

+ The dark button styles can be applied by setting the + useDarkTheme + binding to true. +

+ + +
+
+
+
+
+ + Default + +
+
+ + With Icon + +
+
+ + Negative Loading + +
+
+ + Positive Disabled + +
+
+
+
+
+ + + + + +

Button Groups

+ + +
+
+

+ Sometimes it will be necessary to group buttons together. There are a set of helper + classes available to accomplish this. +

+ +
+
+
    +
  • + Button 1 +
    • +
  • + Button 2 +
    • +
+
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.spec.ts new file mode 100644 index 000000000..8f468122c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonDocsComponent } from './button-docs.component'; + +describe('ButtonDocsComponent', () => { + let component: ButtonDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ButtonDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ButtonDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts new file mode 100644 index 000000000..ae792aa66 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts @@ -0,0 +1,111 @@ +import { Component, ViewChild } from '@angular/core'; + +import { GoButtonComponent } from '../../../../../../../go-lib/src/public_api'; + +@Component({ + selector: 'app-button-docs', + templateUrl: './button-docs.component.html' +}) +export class ButtonDocsComponent { + + @ViewChild('defaultButton') defaultButton: GoButtonComponent; + @ViewChild('negativeButton') negativeButton: GoButtonComponent; + @ViewChild('negativeDarkButton') negativeDarkButton: GoButtonComponent; + @ViewChild('neutralButton') neutralButton: GoButtonComponent; + @ViewChild('positiveButton') positiveButton: GoButtonComponent; + + defaultButtonLoading: boolean = false; + negativeButtonLoading: boolean = false; + neutralButtonLoading: boolean = false; + positiveButtonLoading: boolean = false; + negativeDarkButtonLoading: boolean = false; + + pageTitle: string = 'Button'; + + componentBindings: string = ` + @Input() buttonDisabled: boolean; + @Input() buttonIcon: string; + @Input() buttonType: string = 'button'; + @Input() buttonVariant: string; + @Input() isProcessing: boolean; + @Input() useDarkTheme: boolean; + + @Output() handleClick = new EventEmitter(); + `; + + defaultExample: string = ` + Default + + Disabled + + With Icon + `; + + negativeExample: string = this.buttonTemplate('negative', 'delete'); + neutralExample: string = this.buttonTemplate('neutral', 'live_help'); + positiveExample: string = this.buttonTemplate('positive', 'check'); + + loadingExampleTS: string = ` + import { GoButtonComponent } from 'goponents'; + + @ViewChild('submitButton') submitButton: GoButtonComponent; + + submitButtonLoading: boolean = false; + + testSubmit() { + this.submitButtonLoading = true; + + // Do something with click, then reset the button + this.submitButton.reset(); + } + `; + + loadingExampleHTML: string = ` + Load Me + `; + + darkButtonExample: string = ` + + Default + + `; + + buttonGroup: string = ` +
    +
  • + Button 1 +
    • +
  • + Button 2 +
    • +
+ `; + + public testClick(): void { + alert('Button clicked!'); + } + + public testSubmit(button: string): void { + this[button + 'Loading'] = true; + setTimeout(() => { + this[button + 'Loading'] = false; + }, 3800); + } + + + private buttonTemplate (variant: string, icon: string): string { + return ` + + Negative + + + + Disabled + + + + With Icon + + `; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.html new file mode 100644 index 000000000..c0a2724ed --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.html @@ -0,0 +1,45 @@ +
+

{{ pageTitle }}

+
+ +
+ + + +

Usage

+

The <go-card> component should be the default container for all content.

+ + +

Bindings

+ + + +

showHeader

+

+ showHeader + by default is true, but if set to false it will hide the header + of the card even if one is passed. +

+ + + + + +

Default

+ + +

Code (for this card)

+ + + + + + +

Default

+ + +

Code (for this card, no header example)

+ + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.spec.ts new file mode 100644 index 000000000..a93e854e7 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CardDocsComponent } from './card-docs.component'; + +describe('CardDocsComponent', () => { + let component: CardDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CardDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CardDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.ts new file mode 100644 index 000000000..e26f1050f --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/card-docs/card-docs.component.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-card-docs', + templateUrl: './card-docs.component.html' +}) +export class CardDocsComponent { + + pageTitle: string = 'Card'; + + componentBindings: string = ` + @Input() showHeader: boolean = true; + `; + + defaultExample: string = ` + + +
Default
+ + + + + + `; + + showHeaderExample: string = ` + + +
Default
+ + + + + + `; + + constructor() { } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.html new file mode 100644 index 000000000..2a7182c48 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.html @@ -0,0 +1,43 @@ +
+

{{ pageTitle }}

+
+
+
+ + +
+
+ +

Usage

+

+ The <go-copy> + component should be used for any instance where we want to provide a user + a way to copy information from the page by using a button. +

+ + +

Bindings

+ +
+
+

text

+

+ This is the text that will be copied to a users clipboard when they click the button. +

+
+
+ + + + + +

Basic Example

+

+ Click the button to copy the link! + +

+ + + +
+
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.scss b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.scss new file mode 100644 index 000000000..072b6b814 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.scss @@ -0,0 +1,7 @@ +.copy-docs__inline-button { + display: inline-flex; +} + +.copy-docs__link { + margin-right: 1rem; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.spec.ts new file mode 100644 index 000000000..7f9cc11b5 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CopyDocsComponent } from './copy-docs.component'; + +describe('ButtonDocsComponent', () => { + let component: CopyDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CopyDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.ts new file mode 100644 index 000000000..148b97a05 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/copy-docs/copy-docs.component.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-copy-docs', + styleUrls: ['./copy-docs.component.scss'], + templateUrl: './copy-docs.component.html' +}) +export class CopyDocsComponent { + componentBindings: string = ` + @Input() text: string; + `; + + exampleCopy: string = ` + Click the button to copy the link! + + `; + + url: string = 'google.com'; + pageTitle: string = 'Copy'; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.html new file mode 100644 index 000000000..d20e41671 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.html @@ -0,0 +1,353 @@ +
+ + + +

Component Control

+ + +

+ As with most of the form components, the only @Input + required of the datepicker component is a FormControl. + The FormControl can be passed in via the [control] + attribute on the <go-datepicker> component. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Label

+ + +

+ All form components include an @Input() label: string; + that can be used to add a label to the input components. + In addition to displaying an HTML label, the text passed + in via the [label] + attribute is used to generate a unique ID to associate the + label with the datepicker. If no label is passed in, a generic, + but still unique ID will be generated. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Key

+ + +

+ As stated above the label attribute is used to generate a + unique ID to associate the label with the datepicker. As this might + not be desired, the @Input() key: string; + can be used to configure the ID attribute of the datepicker directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the datepicker and + associate the label with the datepicker. +

+
+
+

View

+ +
+
+

Code

+ +
+
+

Example Output

+

+ Notice in the below example output that the key has been assigned + to both the id attribute on + the input and the for attribute + on the label. +

+ +
+
+ + + + +

Component Hints

+ + +

+ Form hints exist to help give more information about the + inputs they are attached to. The @Input() key: Array<string> + can be used to pass in an array of hints to the datepicker component. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Component Errors

+ + +

+ FormControls all have a consistent way of setting errors + via the setErrors() function. + All goponents use this API to display errors on our components, but the + data needs to be displayed in a specific structure. +

+

+ By default the input type is set to "Error", however this can be + overrides as shown below. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Disable Component

+ + +

+ FormControls can be either created as disable or later disabled + and re-enabled directly after they are created. +

+
+
+

View

+
+
+ +
+
+ +
+
+
+
+

Code

+ + +
+
+ + + + + +

Component Placeholder

+ + +

+ The datepicker components placeholder attribute can be set via + @Input() placeholder: string; + and the [placeholder] attribute. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + + +

Component Locale

+ + +

+ The locale can be set via the + @Input() locale: string; + and the [locale] attribute. + By default this is set to 'en-US', but it should be used to reflect the locale + of the user logged in. This is important because the locale is how we decide what format + a date gets shown in and how we parse a date that the user types in. For example the + format for 'en-US' is mm/dd/yyyy while the format + for 'de' is dd.mm.yyyy. Regardless of locale a user + can always type in the date yyyy/mm/dd which is the + international date standard +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + + +

Component Max Date

+ + +

+ A max date can be set via the @Input() maxDate: Date | string; + and the [maxDate] attribute. The max date attribute can be + used to restrict the date that a user can pick to a date before the max date. The date + can be passed in as a Date object or in the 'en-US' format which is + mm/dd/yyyy +

+ +
+
+

View

+ +
+
+

Code

+ +
+
+ + + + + +

Component Min Date

+ + +

+ A min date can be set via the @Input() minDate: Date | string; + and the [minDate] attribute. The min date attribute can be + used to restrict the date that a user can pick to a date after the min date. The date + can be passed in as a Date object or in the 'en-US' format which is + mm/dd/yyyy +

+ +
+
+

View

+ +
+
+

Code

+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts new file mode 100644 index 000000000..6cf185c37 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts @@ -0,0 +1,153 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + templateUrl: './datepicker-docs.component.html' +}) +export class DatepickerDocsComponent implements OnInit { + dob: FormControl = new FormControl(''); + dob2: FormControl = new FormControl(''); + dob3: FormControl = new FormControl(''); + dob4: FormControl = new FormControl(''); + dob5: FormControl = new FormControl(''); + dob6: FormControl = new FormControl({ value: '', disabled: true }); + dob7: FormControl = new FormControl(''); + dob8: FormControl = new FormControl(''); + locale: FormControl = new FormControl(''); + max: FormControl = new FormControl(''); + min: FormControl = new FormControl(''); + + hints: Array = [ + 'Please enter your date of birth', + 'This is a second hint for no reason' + ]; + + basicFormControl: string = ` + import { Component } from '@angular/core'; + import { FormControl } from '@angular/forms'; + + @Component({ + selector: 'app-name-editor', + templateUrl: './name-editor.component.html', + styleUrls: ['./name-editor.component.css'] + }) + export class NameEditorComponent { + name = new FormControl(''); + } + `; + + basicInputExample: string = ` + + `; + + basicInputLabelExample: string = ` + + `; + + basicInputKeyExample: string = ` + + `; + + basicInputKeyExampleOutput: string = ` + + + `; + + basicHintsTemplate: string = ` + hints: Array = [ + 'Please enter your date of birth', + 'This is a second hint for no reason' + ]; + `; + + basicInputHintsExample: string = ` + + `; + + basicErrorsTemplate: string = ` + this.dob.setErrors([ + { + message: 'This date is invalid' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + `; + + basicDisabledExample: string = ` + firstDate: new FormControl({ + value: '', + disabled: true + }); + `; + + basicDisabledExample2: string = ` + lastDate: new FormControl(''); + + ngOnInit(): void { + this.lastDate.disable(); + // Use this.lastDate.enable(); to re-enable the input. + } + `; + + basicPlaceholderExample: string = ` + + `; + + basicLocaleExample: string = ` + + `; + + maxDateExample: string = ` + + `; + + minDateExample: string = ` + + `; + + ngOnInit(): void { + setTimeout((): void => { + this.dob5.setErrors([ + { + message: 'This date is invalid' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + + this.dob7.disable(); + }, 500); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.html new file mode 100644 index 000000000..fec580dc1 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.html @@ -0,0 +1,25 @@ + + +

Form Controls

+ + +

+ All of the form components in goponents are built on the + concept of Angular's reactive forms + and require a FormControl. +

+

As per the Angular Documentation:

+

+ The FormControl class is the basic building block when + using reactive forms. To register a single form control, + import the FormControl + class into your component and create a new instance of + the form control to save as a class property. +

+

Creating a basic FormControl

+ + + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.ts new file mode 100644 index 000000000..1e2e9abb5 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/form-control-docs/form-control-docs.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; + +@Component({ + templateUrl: './form-control-docs.component.html', + selector: 'app-form-control-docs' +}) +export class FormControlDocsComponent { + basicFormControl: string = ` + import { Component } from '@angular/core'; + import { FormControl } from '@angular/forms'; + + @Component({ + selector: 'app-name-editor', + templateUrl: './name-editor.component.html', + styleUrls: ['./name-editor.component.css'] + }) + export class NameEditorComponent { + controlName = new FormControl(''); + } + `; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html new file mode 100644 index 000000000..eb956131a --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.html @@ -0,0 +1,29 @@ +
+ + +

Reactive Forms

+ + +

As per the Angular Documentation:

+

+ Reactive forms use an explicit and immutable approach to + managing the state of a form at a given point in time. + Each change to the form state returns a new state, which + maintains the integrity of the model between changes. + Reactive forms are built around observable streams, where + form inputs and values are provided as streams of input + values, which can be accessed synchronously. +

+

+ Reactive forms differ from template-driven forms in distinct + ways. Reactive forms provide more predictability with + synchronous access to the data model, immutability with + observable operators, and change tracking through observable + streams. If you prefer direct access to modify data in your + template, template-driven forms are less explicit because they + rely on directives embedded in the template, along with mutable + data to track changes asynchronously. +

+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.ts new file mode 100644 index 000000000..3d4cbf971 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/forms-overview/forms-overview.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + templateUrl: './forms-overview.component.html' +}) +export class FormsOverviewComponent { + + constructor( + private subNavService: SubNavService + ) { + this.subNavService.pageTitle = 'Forms Overview'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.html new file mode 100644 index 000000000..181ae4ac4 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.html @@ -0,0 +1,286 @@ +
+ + + +

Component Control

+ + +

+ As with most of the form components, the only @Input + required of the input component is a FormControl. + The FormControl can be passed in via the [control] + attribute on the <go-input> component. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Label

+ + +

+ All form components include an @Input() label: string; + that can be used to add a label to the input components. + In addition to displaying an HTML label, the text passed + in via the [label] + attribute is used to generate a unique ID to associate the + label with the input. If no label is passed in, a generic, + but still unique ID will be generated. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Key

+ + +

+ As stated above the label attribute is used to generate a + unique ID to associate the label with the input. As this might + not be desired, the @Input() key: string; + can be used to configure the ID attribute of the input directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the input and + associate the label with the input. +

+
+
+

View

+ +
+
+

Code

+ +
+
+

Example Output

+

+ Notice in the below example output that the key has been assigned + to both the id attribute on + the input and the for attribute + on the label. +

+ +
+
+ + + + +

Component Hints

+ + +

+ Form hints exist to help give more information about the + inputs they are attached to. The @Input() key: Array<string> + can be used to pass in an array of hints to the input component. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Component Errors

+ + +

+ FormControls all have a consistent way of setting errors + via the setErrors() function. + All goponents use this API to display errors on our components, but the + data needs to be displayed in a specific structure. +

+

+ By default the input type is set to "Error", however this can be + overridden as shown below. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Disable Component

+ + +

+ FormControls can be either created as disable or later disabled + and re-enabled directly after they are created. +

+
+
+

View

+
+
+ +
+
+ +
+
+
+
+

Code

+ + +
+
+ + + + + +

Component Placeholder

+ + +

+ The input component's placeholder attribute can be set via + @Input() placeholder: string; + and the [placeholder] attribute. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + + +

Component Type

+ + +

+ The input type can be set via the + @Input() inputType: string; + and the [inputType] attribute. + By default this is set to text, but it should be changed to implement + other basic text based input types. +

+

+ In the example below we show how to use [inputType] + to build a password input. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts new file mode 100644 index 000000000..ddc1f0633 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts @@ -0,0 +1,111 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + templateUrl: './input-docs.component.html' +}) +export class InputDocsComponent implements OnInit { + name: FormControl = new FormControl(''); + name2: FormControl = new FormControl(''); + name3: FormControl = new FormControl(''); + name4: FormControl = new FormControl(''); + name5: FormControl = new FormControl(''); + name6: FormControl = new FormControl({ value: '', disabled: true }); + name7: FormControl = new FormControl(''); + name8: FormControl = new FormControl(''); + password: FormControl = new FormControl(''); + + hints: Array = [ + 'Please put your first and last name here', + 'This is a second hint for no reason' + ]; + + basicInputExample: string = ` + + `; + basicInputLabelExample: string = ` + + `; + basicInputKeyExample: string = ` + + `; + basicInputKeyExampleOutput: string = ` + + + `; + basicHintsTemplate: string = ` + hints: Array = [ + 'Please put your first and last name here', + 'This is a second hint for no reason' + ]; + `; + basicInputHintsExample: string = ` + + `; + basicErrorsTemplate: string = ` + this.name.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + `; + basicDisabledExample: string = ` + firstName: new FormControl({ + value: '', + disabled: true + }); + `; + basicDisabledExample2: string = ` + lastName: new FormControl(''); + + ngOnInit(): void { + this.lastName.disable(); + // Use this.lastName.enable(); to re-enable the input. + } + `; + basicPlaceholderExample: string = ` + + `; + basicPasswordExample: string = ` + + `; + + ngOnInit(): void { + setTimeout((): void => { + this.name5.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + + this.name7.disable(); + }, 500); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html new file mode 100644 index 000000000..f56bafb8b --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html @@ -0,0 +1,249 @@ +
+ + + +

Component Control

+ + +

+ As with most of the form components, the only @Input + required of the text area component is a FormControl. + The FormControl can be passed in via the [control] + attribute on the <go-text-area> component. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Label

+ + +

+ All form components include an @Input() label: string; + that can be used to add a label to the textarea components. + In addition to displaying an HTML label, the text passed + in via the [label] + attribute is used to generate a unique ID to associate the + label with the textarea. If no label is passed in, a generic, + but still unique ID will be generated. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Key

+ + +

+ As stated above the label attribute is used to generate a + unique ID to associate the label with the textarea. As this might + not be desired, the @Input() key: string; + can be used to configure the ID attribute of the textarea directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the textarea and + associate the label with the textarea. +

+
+
+

View

+ +
+
+

Code

+ +
+
+

Example Output

+

+ Notice in the below example output that the key has been assigned + to both the id attribute on + the textarea and the for attribute + on the label. +

+ +
+
+ + + + +

Component Hints

+ + +

+ Form hints exist to help give more information about the + textareas they are attached to. The @Input() key: Array<string> + can be used to pass in an array of hints to the textarea component. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Component Errors

+ + +

+ FormControls all have a consistent way of setting errors + via the setErrors() function. + All goponents use this API to display errors on our components, but the + data needs to be displayed in a specific structure. +

+

+ By default the error type is set to "Error", however this can be + overridden as shown below. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Disable Component

+ + +

+ FormControls can be either created as disable or later disabled + and re-enabled directly after they are created. +

+
+
+

View

+
+
+ +
+
+ +
+
+
+
+

Code

+ + +
+
+ + + + +

Component Placeholder

+ + +

+ The text area component's placeholder attribute can be set via + @Input() placeholder: string; + and the [placeholder] attribute. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts new file mode 100644 index 000000000..6713a8875 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts @@ -0,0 +1,114 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + templateUrl: './text-area-docs.component.html' +}) +export class TextAreaDocsComponent implements OnInit { + message: FormControl = new FormControl(''); + message2: FormControl = new FormControl(''); + message3: FormControl = new FormControl(''); + message4: FormControl = new FormControl(''); + message5: FormControl = new FormControl(''); + message6: FormControl = new FormControl({ value: '', disabled: true }); + message7: FormControl = new FormControl(''); + message8: FormControl = new FormControl(''); + + hints: Array = [ + 'Please type your message here', + 'This is a second hint for no reason' + ]; + + basicExample: string = ` + + `; + + basicLabelExample: string = ` + + `; + + basicKeyExample: string = ` + + `; + + basicKeyExampleOutput: string = ` + + + `; + + basicHintsTemplate: string = ` + hints: Array = [ + 'Please type your message here', + 'This is a second hint for no reason' + ]; + `; + + basicHintsExample: string = ` + + `; + + basicErrorsTemplate: string = ` + this.message.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + `; + + basicDisabledExample: string = ` + message: new FormControl({ + value: '', + disabled: true + }); + `; + + basicDisabledExample2: string = ` + otherMessage: new FormControl(''); + + ngOnInit(): void { + this.otherMessage.disable(); + // Use this.otherMessage.enable(); to re-enable the input. + } + `; + + basicPlaceholderExample: string = ` + + `; + + ngOnInit(): void { + setTimeout((): void => { + this.message5.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + + this.message7.disable(); + }); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.html new file mode 100644 index 000000000..5f465498a --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.html @@ -0,0 +1 @@ + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts new file mode 100644 index 000000000..f1f18df76 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; + +import { NavGroup } from '../../../../../../../go-lib/src/public_api'; + +@Component({ + templateUrl: './form-docs.component.html' +}) +export class FormDocsComponent { + menuItems: Array = [ + { + routeTitle: 'Basics', subRoutes: [ + { route: './', routeTitle: 'Overview' }, + { route: './datepicker', routeTitle: 'Datepicker' }, + { route: './input', routeTitle: 'Input' }, + { route: './textarea', routeTitle: 'Text Area' } + ] + } + ]; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.html new file mode 100644 index 000000000..f899deefa --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.html @@ -0,0 +1,149 @@ +
+

{{ pageTitle }}

+
+ +
+ + +
+
+
+
+ +

Usage

+

+ The <go-icon> + component should be the only way an icon is displayed in the + app. +

+
+
+ +

Bindings

+ +
+
+

icon - (required)

+

+ The icon + binding must be passed. This component requires the + + Material Icons Font + + to be included in the application. To use, just pass the name + of the icon to this binding. +

+

+ See the Material Design System Icons + page for available icons. +

+

+ See the full Material Icons Developer Guide + for more information. +

+
+
+

iconModifier

+

+ The iconModifier + binding can be used to modify the state of the icon. Icons + come in several different states that are represented with + different colors: +

+
    +
  1. + light + - Displays as a light gray color. Useful when + icons are of little importance. +
    2. +
  2. + negative + - Displays as a red color. Useful when icons + reinforce a dangerous or destructive content or + actions. +
    3. +
  3. + neutral + - Displays as a purple color. Useful when icons + reinforce informational content or actions. +
    4. +
  4. + positive + - Displays as a blue color. Useful when icons + reinforce positive content or actions. +
    5. +
+
+
+

iconClass

+

+ The iconClass + binding can be used to add additional classes directly + on to the icon element inside of the component. This + becomes useful when implementing icons inside of other + components and especially when following the + BEM methodology + This allows us to hand off the responsibility of modifying + the icons to the thing that is implementing them. +

+
+
+
+
+ + + + +

Basic

+ + +

Code

+ +

View

+ + + + + + + + + +

Modified

+ + +

Code

+ +

View

+ + + + + + + + + + + +

Overriding Icon Styles

+ + +

component.scss

+ +

component.html

+ +

View

+
    +
  • + + Face +
    • +
  • + + Toys +
    • +
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.scss b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.scss new file mode 100644 index 000000000..d69cbe761 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.scss @@ -0,0 +1,10 @@ +.list { + line-height: 4rem; + list-style: none; +} + +:host ::ng-deep .list__icon { + font-size: 4rem; + vertical-align: middle; +} + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.spec.ts new file mode 100644 index 000000000..d278fbfa6 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IconDocsComponent } from './icon-docs.component'; + +describe('IconDocsComponent', () => { + let component: IconDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ IconDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(IconDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.ts new file mode 100644 index 000000000..a617aa2da --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/icon-docs/icon-docs.component.ts @@ -0,0 +1,63 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-icon-docs', + templateUrl: './icon-docs.component.html', + styleUrls: ['./icon-docs.component.scss'] +}) +export class IconDocsComponent { + pageTitle: string = 'Icon'; + + componentBindings: string = ` + @Input() icon: string; + @Input() iconModifier: string; + @Input() iconClass: string; + `; + + basicExample: string = ` + + + + + `; + + modifiedExample: string = ` + + + + + `; + + overriddenStyles: string = ` + .list { + line-height: 4rem; + list-style: none; + } + + :host ::ng-deep .list__icon { + font-size: 4rem; + vertical-align: middle; + } + `; + + overriddenExample: string = ` +
    +
  • + + Face +
    • +
  • + + Toys +
    • +
+ `; + + iconOverrideWarning: string = ` + You most likely will never need to perform an override like the one shown below. + This functionality goes against the guidelines Angular sets, but we've included it just in case this is absolutely necessary. + If possible, apply a class directly to the element before performing this override. + `; + + constructor() { } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.html new file mode 100644 index 000000000..c4065b7e4 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.html @@ -0,0 +1,31 @@ +
+ + +

Full Example

+ + +
+
+

+ This example shows the GoLayout, GoSideNav, GoHeader, and GoSearch components in a cohesive example. +

+ +
app.module
+ + +
app.component.html
+ + +
app.component.ts
+ + +
search-test.component.ts
+ + +
search-test.component.html
+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.spec.ts new file mode 100644 index 000000000..d2ca8be8e --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutExampleComponent } from './layout-example.component'; + +describe('LayoutExampleComponent', () => { + let component: LayoutExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LayoutExampleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LayoutExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.ts new file mode 100644 index 000000000..d00c699f2 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-example/layout-example.component.ts @@ -0,0 +1,114 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-layout-example', + templateUrl: './layout-example.component.html' +}) +export class LayoutExampleComponent { + + example_app_module: string = ` + import { + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule, + GoSearchModule, + GoSideNavModule + } from '@tangoe/goponents'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule, + GoSearchModule, + GoSideNavModule + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + `; + + example_app_html: string = ` + + + + + + + + + + + + + `; + + example_app_ts: string = ` + import { + NavGroup, + NavItem + } from '@tangoe/goponents'; + + logo: string = 'url-to-your-logo/go-design.png'; + title: string = 'Go Design'; + + menuItems: Array = [ + { routeIcon: 'dashboard', routeTitle: 'Tests', description: 'Test Routes', subRoutes: [ + { route: 'test-page-1', routeTitle: 'Test 1', description: 'Test Route 1' }, + { route: 'test-page-2', routeTitle: 'Test 2' } + ]} + ]; + `; + + example_search_html: string = ` + + + + + + + + + +
{{ item.id }}{{ item.name.first }}{{ item.name.last }}{{ item.email }}{{ item.gender }}{{ item.ip_address }}
+ `; + + example_search_ts: string = ` + import { GoSearchService } from '@tangoe/goponents'; + import { YourService } from './your.service'; + + @Component({ + selector: 'app-search-test', + templateUrl: './search-test.component.html' + }) + export class SearchTestComponent implements OnInit { + + results: any[]; + + constructor( + private searchService: GoSearchService, + private yourService: YourService + ) { } + + ngOnInit(): void { + this.searchService.searchTerm.subscribe((searchTerm: string) => { + + this.yourService + .getData(searchTerm) + .subscribe((results: any[]) => { + if (results.length === 0) { + this.results = null; + this.searchService.notFoundResponse(); + } else { + this.results = results; + this.searchService.successResponse(); + } + }); + }); + } + } + `; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.html new file mode 100644 index 000000000..dc8bec7ed --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.html @@ -0,0 +1,66 @@ +
+ + +

Usage

+ + +
+
+

+ The <go-header> component should only be used once, at the root level component. + It should be placed inside a <go-layout> and be given the attribute of + <go-layout-header>. + This component will render a header across the top of the application that contains an icon button to collapse the side nav, bindings + for a logo, a slot for the search component in the middle, and a slot for actions on the right. +

+
+ +
+
Bindings
+ + +
altText
+

+ This binding will output the alt text for the logo image. This is optional, but recommended. +

+ +
logo
+

+ This binding takes the path to the logo. +

+
+ +
+
Content Projection
+

+ In addtiion to the bindings, there are two areas used for content projection: go-header-middle + and go-header-right. These should be applied to the <go-search> + component and an <ng-container> element respectively. Check the example below for details. +

+
+
+ + + + + +

Simple Setup

+ + +
+
+

+ For the sake of this example, we'll be referencing the layout of this application because it's a living example of the + entire layout component and family. It is also being shown inside of the layout component because it's required to be inside it. +

+ +
app.module
+ + +
app.component.html
+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.spec.ts new file mode 100644 index 000000000..ea2eab542 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutHeaderComponent } from './layout-header.component'; + +describe('LayoutHeaderComponent', () => { + let component: LayoutHeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LayoutHeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LayoutHeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.ts new file mode 100644 index 000000000..b263c6f93 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-header/layout-header.component.ts @@ -0,0 +1,56 @@ +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + selector: 'app-layout-header', + templateUrl: './layout-header.component.html' +}) +export class LayoutHeaderComponent { + + componentBindings: string = ` + @Input() altText: string = ''; + @Input() logo: string = ''; + `; + + basicExample_module: string = ` + // Required imports for the layout & side nav: + import { + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule + } from '@tangoe/goponents'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + `; + + basicExample_html: string = ` + + + + + + + + + + + + + + `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Header'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.html new file mode 100644 index 000000000..daaeba0e2 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.html @@ -0,0 +1,108 @@ +
+ + +

Usage

+ + +
+
+

+ The <go-side-nav> component should only be used once, at the root level component. + It should be placed inside a <go-layout> and be given the attribute of + go-layout-nav. + This component will generate a set of links and accordions on the left of the application and uses the built in routing provided + by Angular. +

+
+ +
+
Bindings
+ + +
menuItems
+

+ The data passed to this binding contains the structure of the navigation. There are variations of how this + data could look, but it has to conform to either a NavItem or a + NavGroup model. These models have the following properties: +

+ +
+ +
+
Important Notes:
+
    +
  1. + Providing data to menuItems does not mean you no longer have + to define your Angular routes. You still have to do this. +
    2. +
  2. + Root level navigation elements must have an icon associated with them, but any other level underneath should not. +
    3. +
  3. + NavGroup objects will not prodive routing themselves, any routes should be defined + within the subRoutes array. If there are no subRoutes + for this object, then it should be a NavItem instead. +
    4. +
  4. + The maximum number of levels that should be nested is 2. Exceeding this number breaks the experience. +
    5. +
  5. + The full route should be provided from root. + (ex: ui-kit has a child of button, the route provided should be 'ui-kit/button') +
    6. +
  6. + Lastly, for security reasons, the data provided for menuItems should be generated + and obtained from the server. There is no functionality in place to show/hide routes within this component. Any behavior of this + kind should be generated by the server. +
    7. +
+
+
+ + + + + +

Simple Setup

+ + +
+
+

+ For the sake of this example, we'll be referencing the layout of this application because it's a living example of the + entire layout component and family. It is also being shown inside of the layout component because it's required to be inside it. +

+ +
app.module
+ + +
app.component.html
+ + +
app.component.ts
+ +
+
+ + + + + +

Side Nav Service

+ + +
+
+

+ If there is an instance where the side nav needs collapsed based on some action performed in the rest of + the UI the GoSideNavService can be used. Note: the GoHeaderComponent + handles expanding/collapsing of the navigation and should be used as the primary way to do this. +

+ +
component.ts
+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.spec.ts new file mode 100644 index 000000000..6f1242313 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutNavComponent } from './layout-nav.component'; + +describe('LayoutNavComponent', () => { + let component: LayoutNavComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LayoutNavComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LayoutNavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.ts new file mode 100644 index 000000000..029c4bb6b --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-nav/layout-nav.component.ts @@ -0,0 +1,94 @@ +import { Component } from '@angular/core'; + +import { SubNavService } from '../../../../../../shared/components/sub-nav/sub-nav.service'; + +@Component({ + selector: 'app-layout-nav', + templateUrl: './layout-nav.component.html' +}) +export class LayoutNavComponent { + + componentBindings: string = ` + @Input() menuItems: Array; + `; + + bindings_menuItems: string = ` + export interface NavItem { + description?: string; + route: string; + routeIcon?: string; + routeTitle: string; + } + + export interface NavGroup { + description?: string; + expanded?: boolean; + routeIcon?: string; + routeTitle: string; + subRoutes: Array; + } + `; + + basicExample_module: string = ` + // Required imports for the layout & side nav: + import { + GoIconButtonModule, + GoLayoutModule, + GoSideNavModule + } from '@tangoe/goponents'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + GoIconButtonModule, + GoLayoutModule, + GoSideNavModule + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + `; + + basicExample_html: string = ` + + + + + + + + `; + + basicExample_ts: string = ` + import { NavGroup, NavItem } from '@tangoe/goponents'; + + menuItems: Array = [ + { route: 'getting-started', routeIcon: 'power_settings_new', routeTitle: 'Getting Started' }, + { route: 'standards', routeIcon: 'gavel', routeTitle: 'Standards', subRoutes: [ + { route: 'standards/colors', routeTitle: 'Colors' }, + { route: 'standards/forms', routeTitle: 'Forms' } + ]}, + { route: 'ui-kit', routeIcon: 'widgets', routeTitle: 'Components', subRoutes: [ + { route: 'ui-kit/accordion', routeTitle: 'Accordion' }, + { route: 'ui-kit/accordion-panel', routeTitle: 'Accordion Panel' }, + { route: 'ui-kit/button', routeTitle: 'Button' } + ]} + ]; + `; + + serviceExample_ts: string = ` + import { GoSideNavService } from '@tangoe/goponents'; + + constructor(private sideNavService: GoSideNavService) { + this.sideNavService.navOpen = true; + // or, you can toggle navOpen with: + this.sideNavService.toggleNav(); + } + `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Side Navigation'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.html new file mode 100644 index 000000000..2404dfd30 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.html @@ -0,0 +1,39 @@ +
+ + +

Usage

+ + +

+ The <go-layout> component should only be used once, at the root level component + (typically the app component). This component is used to create an application layout that includes routing, navigation, and + slots in the header for a logo, a search component, and actions. +

+ +
Bindings
+

+ There are none! Instead, there are two areas used for content projection: go-layout-header + and go-layout-nav. These should be applied to the <go-header> + and <go-side-nav> components respectively. Check the simple setup example below. +

+ + + + + +

Simple Setup

+ + +

+ For the sake of this example, we'll be referencing the layout of this application because it's a living example of the + entire layout component and family. +

+ +
app.module
+ + +
app.component
+ + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.spec.ts new file mode 100644 index 000000000..d7663651e --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutOverviewComponent } from './layout-overview.component'; + +describe('LayoutOverviewComponent', () => { + let component: LayoutOverviewComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LayoutOverviewComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LayoutOverviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.ts new file mode 100644 index 000000000..ecb4fdef7 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-overview/layout-overview.component.ts @@ -0,0 +1,48 @@ +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + selector: 'app-layout-overview', + templateUrl: './layout-overview.component.html' +}) +export class LayoutOverviewComponent { + + basicExample_module: string = ` + // Required imports for the layout: + import { + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule, + GoSideNavModule + } from '@tangoe/goponents'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule, + GoSideNavModule + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + `; + + basicExample_html: string = ` + + + + + + + + + `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Layout Overview'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.html new file mode 100644 index 000000000..72f6c35bf --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.html @@ -0,0 +1,84 @@ +
+ + +

Usage

+ + +
+
+

+ The <go-search> component should only be used once, at the root level component. + It should be placed inside the <go-header> and be given the attribute of + go-header-middle. + This component acts as a search bar for the header. Upon implementation, it should act as a "global" search. +

+
+ +
+
Bindings
+

+ There are none! Instead, to interact with this component, the GoSearchService can + be used. +

+
+ +
+
GoSearchService:
+

The GoSearchService is how to interact with the GoSearchComponent. It has these available properties and methods:

+
    +
  • + noResultsMessage (string) - The message to be shown when no results are returned from the server that match the search term. + By default the message is: 'No Results Found'. +
    • +
  • + searchTerm (Subject<string>) - The term entered by the user to search. This is a Subject which means it can be watched + for changes using a subscription. +
    • +
  • + termLength (number) - Minimum number of characters to trigger a search +
    • +
  • + successResponse (void method) - Use this method when you get a response from the server that was successful, with results +
    • +
  • + notFoundResponse (void method) - Use this method when you get a response from the server that was successful, but with no results +
    • +
+
+
+ + + + + +

Simple Setup

+ + +
+
+

+ For the sake of this example, it is being shown inside of the layout and header components because it's required to be inside it. +

+

+ Because search implementation can vary greatly between projects, what the results look like are totally dependent upon your implementation. + For this reason, there is not styling associated with the results section and the GoSearchComponent does not render the results. + Start by creating a component that will interact with the GoSearchService and render the results. In this example, the component showing this + is named SearchTestComponent. +

+ +
app.module
+ + +
app.component.html
+ + +
search-test.component.ts
+ + +
search-test.component.html
+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.spec.ts new file mode 100644 index 000000000..c501dd60d --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutSearchComponent } from './layout-search.component'; + +describe('LayoutSearchComponent', () => { + let component: LayoutSearchComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LayoutSearchComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LayoutSearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.ts new file mode 100644 index 000000000..ff60894ac --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/components/layout-search/layout-search.component.ts @@ -0,0 +1,116 @@ +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + selector: 'app-layout-search', + templateUrl: './layout-search.component.html' +}) +export class LayoutSearchComponent { + + basicExample_htmlLayout: string = ` + + + + + + + + + + + `; + + basicExample_module: string = ` + // Required imports for the layout, header, & search: + import { + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule, + GoSearchModule + } from '@tangoe/goponents'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + GoHeaderModule, + GoIconButtonModule, + GoLayoutModule, + GoSearchModule + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + `; + + basicExample_ts: string = ` + import { GoSearchService } from '@tangoe/goponents'; + import { YourService } from './your.service'; + + @Component({ + selector: 'app-search-test', + templateUrl: './search-test.component.html' + }) + export class SearchTestComponent implements OnInit { + + results: any[]; + + constructor( + private searchService: GoSearchService, + private yourService: YourService + ) { + // Do this if you need to change the minimum number of + // characters to trigger the search, default is 3. + this.searchService.termLength = 2; + + // Do this if you need to set a custom message if you have + // no results from the service, default is 'No Results Found' + this.searchService.noResultsMessage = 'Custom Message Here'; + } + + ngOnInit(): void { + // subscribe to events of searchTerm + this.searchService.searchTerm.subscribe((searchTerm: string) => { + + // this section is dependent upon what the data looks like, + // but when a new searchTerm is fired, go get data + this.yourService + .getData(searchTerm) + .subscribe((results: any[]) => { + if (results.length === 0) { + // if yourService did not return any results + this.results = null; + this.searchService.notFoundResponse(); + } else { + // if yourService did return results + this.results = results; + this.searchService.successResponse(); + } + }); + }); + } + } + `; + + basicExample_html: string = ` + + + + + + + + + + +
{{ item.id }}{{ item.name.first }}{{ item.name.last }}{{ item.email }}{{ item.gender }}{{ item.ip_address }}
+ `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Search'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.html new file mode 100644 index 000000000..b00e766cd --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.spec.ts new file mode 100644 index 000000000..0a2a2e16e --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutDocsComponent } from './layout-docs.component'; + +describe('LayoutDocsComponent', () => { + let component: LayoutDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LayoutDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LayoutDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.ts new file mode 100644 index 000000000..4481f5cb3 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/layout-docs/layout-docs.component.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; + +import { NavGroup } from '../../../../../../../go-lib/src/public_api'; + +@Component({ + selector: 'app-layout-docs', + templateUrl: './layout-docs.component.html' +}) +export class LayoutDocsComponent { + + menuItems: Array = [ + { routeTitle: 'Basics', subRoutes: [ + { route: './', routeTitle: 'Overview' }, + { route: './header', routeTitle: 'Header' }, + { route: './search', routeTitle: 'Search' }, + { route: './side-nav', routeTitle: 'Side Nav' }, + { route: './example', routeTitle: 'Full Example' } + ]} + ]; + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html new file mode 100644 index 000000000..c72b59189 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html @@ -0,0 +1,90 @@ +
+

{{ pageTitle }}

+
+ +
+ + + +
Usage
+

+ The <go-loader> component should be used to + indicate the processing of data, awaiting a server request, or any other time the user may + need to wait on the application to do something. +

+ + +
Bindings
+ + +
loaderSize
+

+ This binding determines what size of loader is generated. The available options are: +

+
    +
  1. small
    2. +
  2. medium
    3. +
  3. large
    4. +
+ +
loaderType
+

+ This binding determines what type of loader is generated. The available options are: +

+
    +
  1. negative
    2. +
  2. neutral
    3. +
  3. positive
    4. +
+ + + + + +
Basic Example
+ + +

+ Shows a basic use case of each type and size. +

+ +
+
+ + + +
+
+ + + + + +
Show/Hide Example
+ + +
+
+

+ The Loader has an animation built into Angular's *ngIf + syntax that fades the loader in/out. To implement this, simply throw an *ngIf + on the <go-loader> +

+ +
+
+
+
+ Toggle Me +
+
+ +
+
+
+
+ + + +
+ \ No newline at end of file diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.spec.ts new file mode 100644 index 000000000..d64ca6cea --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoaderDocsComponent } from './loader-docs.component'; + +describe('LoaderDocsComponent', () => { + let component: LoaderDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LoaderDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LoaderDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts new file mode 100644 index 000000000..93e6877a3 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-loader-docs', + templateUrl: './loader-docs.component.html' +}) +export class LoaderDocsComponent { + + showLoader: boolean = true; + + pageTitle: string = 'Loader'; + + componentBindings: string = ` + @Input() loaderSize: string = 'medium'; + @Input() loaderType: string = 'neutral'; + `; + + basicHtml: string = ` + + + + `; + + fadeHtml: string = ` + + `; + + toggleLoader(): void { + this.showLoader = !this.showLoader; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.html new file mode 100644 index 000000000..3738e023d --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.html @@ -0,0 +1,88 @@ +
+

{{ pageTitle }}

+
+ +
+ + + +

Usage

+

+ The <go-modal> component should be the only instance + of a modal in the app. +

+ +

Setup

+

To use the modal anywhere in the app, you must first add it to the app level. This should only be done once per application.

+
    +
  1. +

    + Import the GoModalModule into app.module.ts +

    + +
    2. +
  2. +

    + Add the <go-modal> element to app.component.html. +

    +
    3. +
+ + + + + +

Using the Modal service

+ + +
+
+

+ For this example, the component we want to render in the modal is ModalTestComponent. + This component lives in the UiKitModule. + To make use of the modal in our component: +

+
    +
  1. +

    + In the module that imports your component, import the GoModalModule, + add the component that will be rendered in the modal to the entryComponents, + and add the GoModalService to the providers. +

    + +
    2. +
  2. +

    + In the component that is telling the modal to open, import the GoModalService, + and the component that is being rendered inside the modal. +

    + +
    3. +
  3. +

    + To open the modal, use the service to call openModal. This method takes the component type + (ModalTestComponent in our case), and the bindings for that component as an object. +

    + +
    4. +
  4. +

    + Lastly, the button that triggers the openModal method. +

    +
    +
    +

    component.html

    + +
    +
    +

    View

    + Click Me +
    +
    +
    5. +
+
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.spec.ts new file mode 100644 index 000000000..201976822 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModalDocsComponent } from './modal-docs.component'; + +describe('ModalDocsComponent', () => { + let component: ModalDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ModalDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ModalDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.ts new file mode 100644 index 000000000..cce36157b --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/modal-docs/modal-docs.component.ts @@ -0,0 +1,76 @@ +import { Component } from '@angular/core'; + +import { GoModalService } from '../../../../../../../go-lib/src/public_api'; + +import { ModalTestComponent } from '../modal-test/modal-test.component'; + +@Component({ + selector: 'app-modal-docs', + templateUrl: './modal-docs.component.html' +}) +export class ModalDocsComponent { + + pageTitle: string = 'Modal'; + + appModuleImport: string = ` + import { GoModalModule } from '@tangoe/goponents'; + + @NgModule({ + declarations: [ + AppComponent, + ], + imports: [ + GoModalModule + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + `; + + ex_UiKitModule: string = ` + import { GoModalModule, GoModalService } from '@tangoe/goponents'; + + import { ModalDocsComponent } from './components/modal-docs/modal-docs.component'; + import { ModalTestComponent } from './components/modal-test/modal-test.component'; + + @NgModule({ + imports: [ + GoModalModule + ], + declarations: [ + ModalDocsComponent, + ModalTestComponent + ], + entryComponents: [ + ModalTestComponent + ], + providers: [ + GoModalService + ] + }) + + export class UiKitModule { } + `; + + ex_ModalDocsImports: string = ` + import { GoModalService } from '@tangoe/goponents'; + import { ModalTestComponent } from '../modal-test/modal-test.component'; + + constructor(private goModalService: GoModalService) { } + `; + + ex_ModalDocsOpenModal: string = ` + openModal() { + this.goModalService.openModal(ModalTestComponent, { title: 'This is a modal!' }); + } + `; + + ex_ModalDocsHtml: string = `Click Me`; + + constructor(private goModalService: GoModalService) { } + + openModal(): void { + this.goModalService.openModal(ModalTestComponent, { title: 'This is a modal!' }); + } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.html new file mode 100644 index 000000000..736a54692 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.html @@ -0,0 +1 @@ +

{{ title }}

diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.spec.ts new file mode 100644 index 000000000..a30e38951 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModalTestComponent } from './modal-test.component'; + +describe('ModalTestComponent', () => { + let component: ModalTestComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ModalTestComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ModalTestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.ts new file mode 100644 index 000000000..221a0e136 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/modal-test/modal-test.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-modal-test', + templateUrl: './modal-test.component.html' +}) +export class ModalTestComponent { + + @Input() title: string; + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.html new file mode 100644 index 000000000..08b31441c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.html @@ -0,0 +1,106 @@ +
+

Off Canvas

+
+
+ + +

Usage

+

+ The <go-off-canvas> + component should be the only instance of the off canvas in the app. +

+ +

Setup

+

+ To use the off canvas anywhere in the app, you must first add + it to the app level. This should only be done once per application. +

+
    +
  1. +

    + Import the GoOffCanvasModule + into the main app module. +

    + +
    2. +
  2. +

    + Add the <go-off-canvas> + element to app.component.html. +

    +
    3. +
+ + + + + + + +

Using the Off Canvas service

+ + +

To make use of the off canvas in our component:

+
    +
  1. +

    + In the module that imports your component, import the + GoOffCanvasModule, + add the component that will be rendered in the off canvas to + the entryComponents, + and add the GoOffCanvasService + to the providers. +

    + +
    2. +
  2. +

    + In the component that is telling the off canvas to open, import the + GoOffCanvasService, and the + component that is being rendered inside the off canvas. +

    + +
    3. +
  3. +

    + To open the off canvas, use the service to call + openOffCanvas. + This method takes the component type (BasicTestComponent in our case), + and the bindings for that component as an object. +

    + +
    4. +
  4. +
    +
    +

    + Lastly, we need something to trigger that function. + In our case we will use a button that triggers the + openOffCanvas method, + but it could be triggered by any event. +

    +
    +
    +

    component.html

    + +
    +
    +

    View

    + + Open Off Canvas + +
    +
    +
    5. +
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.ts new file mode 100644 index 000000000..fc4fecc9d --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/off-canvas-docs/off-canvas-docs.component.ts @@ -0,0 +1,88 @@ +import { Component } from '@angular/core'; +import { GoOffCanvasService } from '../../../../../../../go-lib/src/public_api'; + +import { BasicTestComponent } from '../basic-test/basic-test.component'; + +@Component({ + selector: 'app-off-canvas-docs', + templateUrl: './off-canvas-docs.component.html' +}) +export class OffCanvasDocsComponent { + noteMessage: string = `For this example, the component we want to render in the off canvas is "BasicTestComponent", + but we can follow the same pattern to render any component inside of the off canvas.`; + + appModuleImport: string = ` + import { GoOffCanvasModule } from '@tangoe/goponents'; + + @NgModule({ + declarations: [AppComponent], + imports: [ + GoOffCanvasModule + ], + bootstrap: [AppComponent] + }) + export class AppModule { } + `; + + uiKitExample: string = ` + import { GoOffCanvasModule, GoOffCanvasService } from '@tangoe/goponents'; + import { BasicTestComponent } from './components/basic-test/basic-test.component'; + + @NgModule({ + imports: [ + GoOffCanvasModule + ], + declarations: [ + BasicTestComponent + ], + entryComponents: [ + BasicTestComponent + ], + providers: [ + GoOffCanvasService + ] + }) + export class UiKitModule { } + `; + + implementationExample: string = ` + import { GoOffCanvasService } from '@tangoe/goponents'; + import { BasicTestComponent } from '../basic-test/basic-test.component'; + + constructor(private goOffCanvasService: GoOffCanvasService) { } + `; + + functionExample: string = ` + openOffCanvas() : void { + this.goOffCanvasService.openOffCanvas({ + component: BasicTestComponent, + bindings: { + someBinding: 'monkey' + } + }); + } + `; + + htmlExample: string = ` + + Open Off Canvas + + `; + + constructor( + private goOffCanvasService: GoOffCanvasService + ) { } + + public openOffCanvas(): void { + this.goOffCanvasService.openOffCanvas({ + component: BasicTestComponent, + bindings: { + someBinding: 'Basic Off Canvas Component' + } + }); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.html new file mode 100644 index 000000000..51a897922 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.html @@ -0,0 +1,105 @@ +
+ + +

Integrating with a Server

+ + +

+ By default the table component is setup for client side + data manipulation. What if there is too much data to send + to the front end? Implementing server-side data manipulation + is what is required. +
+ (This means paging and sorting) +

+ + + + + +

Setting it up

+ + +
+
+

+ For server-side integration to work properly, the + following must be present on go-table: +

+
    +
  1. (tableChange) - to handle the table events
    2. +
  2. [loadingData] - to handle the loading of the table
    3. +
  3. [tableConfig] - because it's required
    4. +
+

example.html

+ +
+
+

+ There are 4 properties of the table config that are + important when building out server-side integration: +

+
    +
  1. pageConfig.offset - the current place in the data set
    2. +
  2. pageConfig.perPage - the current number of items on each page
    3. +
  3. sortConfig.column - the current column that is sorted (if table is sorted)
    4. +
  4. sortConfig.direction - the current sort direction (if table is sorted)
    5. +
+

example.ts

+ +

+ It is recommended to pass the entire GoTableConfig + to the service that is retrieving the data and map + the properties of the object to the corresponding + parameters of the endpoint that is being hit. +

+

+ When the data is successfully returned, the properties + shown below must be set. +

+ +
+
+ + + + +

Important Notes

+ + +

Total Results

+

+ For the best user experience with server-side integrations, + the data returned from the server should have two properties: +

+ +

+ These properties should then be set, upon a successful response, + to the corresponding properties on the GoTableConfig, + tableData and totalCount. +

+

[loadingData]

+

+ When server mode is enabled, this property will be set to + true whenever the + tableChange event + is fired. The responsibility to set it back to + false falls upon + on the parent component after data is received from the server. + This is to provide a consistent and helpful experience to + users and should not be overridden. +

+

(tableChange)

+

+ The tableChange + event is emitted anytime a trigger is fired in the table + component. These triggers are: +

+
    +
  1. Any page change
    2. +
  2. Page size change
    3. +
  3. Sort change
    4. +
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.ts new file mode 100644 index 000000000..b4d31d2c9 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/server-integration/server-integration.component.ts @@ -0,0 +1,60 @@ +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + templateUrl: './server-integration.component.html' +}) +export class ServerIntegrationComponent { + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Table Server Integration'; + } + + //////////////////////////// + + tableConfig_ts: string = ` + tableConfig: GoTableConfig = new GoTableConfig({ + dataMode: GoTableDataSource.server, + tableData: [] + }); + tableLoading: boolean = true; + + constructor(private mockService: TableMockDataService) { } + + ngOnInit() { + this.handleTableChange(this.tableConfig); + } + `; + + tableConfig_ts_tableChange: string = ` + handleTableChange(currentTableConfig: GoTableConfig) : void { + this.mockService.getMockData(currentTableConfig).subscribe(data => { + currentTableConfig.tableData = data.results; + currentTableConfig.totalCount = data.totalCount; + + this.tableConfig = currentTableConfig; + this.tableLoading = false; + }); + } + `; + + tableConfig_html: string = ` + + + + + + + + + `; + + server_response: string = ` + { + results: [{}], // the actual results for the table + totalCount: 12345 // the total count for the entire table, not just this page + } + `; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.html new file mode 100644 index 000000000..dcdb593cc --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.html @@ -0,0 +1,35 @@ +
+ + +

Implementing Table Actions

+ + +

+ Table actions are a set of icon buttons and other tools meant to perform actions on the table or the data inside of it. + In the table you can provide a series of components via content projection. +

+ + + +

+ For the table actions to appear, you must toggle them on by using showTableActions +

+ + + + + + + + + + + + + + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.spec.ts new file mode 100644 index 000000000..da5359a69 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TableActionsDocsComponent } from './table-actions-docs.component'; + +describe('TableActionsDocsComponent', () => { + let component: TableActionsDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TableActionsDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TableActionsDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.ts new file mode 100644 index 000000000..aed5ee152 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-actions-docs/table-actions-docs.component.ts @@ -0,0 +1,41 @@ +import { Component } from '@angular/core'; +import { GoTableConfig } from 'projects/go-lib/src/public_api'; +import { TableDocsService } from '../../table-docs.service'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + selector: 'app-table-actions-docs', + templateUrl: './table-actions-docs.component.html' +}) +export class TableActionsDocsComponent { + + tableActions_html: string = ` + + + + + + + + + + + + + `; + + tableConfig: GoTableConfig = new GoTableConfig({ + selectBy: 'id', + selectable: true, + tableData: this.tableDocsService.generateData(20) + }); + + constructor( + private tableDocsService: TableDocsService, + private subNavService: SubNavService + ) { + this.subNavService.pageTitle = 'Table Actions'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.html new file mode 100644 index 000000000..ecb23de6f --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.html @@ -0,0 +1,55 @@ +
+ + +

Usage

+ + +

+ The <go-table> component should be used for any instance + of a data table throughout the app. +

+ +

Bindings

+ + +

loadingData

+

+ This binding can be used to apply a loading state to the table. + Typically, this should only be used for server-side integration while awaiting data. +

+

tableConfig

+

+ This is a class to represent the entire table data and its configurations. + The only required property is tableData. +

+

+ It has these properties: + +

+

tableTitle

+

+ This property adds a title above the table, this is optional. +

+ + + + + +

Default Usage

+ + +

example.html

+ +

example.ts

+ + + + + + + + + + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.ts new file mode 100644 index 000000000..7bfc0ab11 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-overview/table-overview.component.ts @@ -0,0 +1,59 @@ +import { Component } from '@angular/core'; + +import { GoTableConfig } from 'projects/go-lib/src/public_api'; +import { TableDocsService } from '../../table-docs.service'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + templateUrl: './table-overview.component.html' +}) +export class TableOverviewComponent { + constructor( + private subNavService: SubNavService, + private tableDocsService: TableDocsService + ) { + this.subNavService.pageTitle = 'Table Overview'; + } + + //////////////////////////// + + componentBindings: string = ` + @Input() loadingData: boolean = false; + @Input() tableConfig: GoTableConfig; + @Input() tableTitle: string; + `; + + tableConfigClass: string = ` + class GoTableConfig { + dataMode: GoTableDataSource = GoTableDataSource.client; + noDataText: string = 'No Data'; + pageable: boolean = true; + pageConfig: GoTablePageConfig = new GoTablePageConfig(); + sortConfig?: GoTableSortConfig; + sortable: boolean = true; + tableData: any[]; // Only required property + totalCount: number = null; + } + `; + + basicExample_html: string = ` + + + + + + + + + `; + + basicExample_ts: string = ` + tableConfig = new GoTableConfig({ + tableData: this.data + }); + `; + + tableConfig: object = new GoTableConfig({ + tableData: this.tableDocsService.generateData(20) + }); +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.html new file mode 100644 index 000000000..34d124d9b --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.html @@ -0,0 +1,63 @@ +
+ + +

Implementing Paging

+ + +

+ By default, pagination is enabled. To configure the paging setup, you can pass a GoTablePageConfig class + to pageConfig on the GoTableConfig class. +

+ + + +

offset

+

+ This property represents the number of records to offset the paging by. + This is set and updated internally by the table component, but it may need updated externally if you're implementing server-side paging. +
+ See Server Integration for more details. +

+

pageSizes

+

+ This property determines what page sizes are available to the user. It takes an array of numbers, but has defaults. + It is recommended to stick with the predefined options, but if needed, pass whole numbers in increments of 5 for more options. +

+

perPage

+

+ This property represents the current items per page. It is set and updated internally by the table component. +
+ If you're implementing server-side paging, this is important. See Server Integration for more details. +

+ + + + + +
+

Simple Paging

+

+ Nothing extra for client-side paging is required, it just works. To set different page sizes, the following is requried. +

+
+ + +
+
+

example.html

+ +

example.ts

+ +
+
+ + + + + + + + + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.ts new file mode 100644 index 000000000..e7ae76268 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-pagination/table-pagination.component.ts @@ -0,0 +1,64 @@ +import { Component } from '@angular/core'; + +import { TableDocsService } from '../../table-docs.service'; +import { GoTableConfig, GoTablePageConfig } from 'projects/go-lib/src/public_api'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + templateUrl: './table-pagination.component.html' +}) +export class TablePaginationComponent { + constructor( + private tableDocsService: TableDocsService, + private subNavService: SubNavService + ) { + this.subNavService.pageTitle = 'Table Pagination'; + } + + //////////////////////////// + + pageConfig: string = ` + class GoTablePageConfig { + offset: number = 0; + pageSizes: number[] = [10, 25, 50]; + perPage: number = 10; + } + + /** + * Default values are assigned in when the class is instantiated + * so that there is consistency among the various tables throughout + * the app. + * + * We recommend not changing these. + **/ + `; + + tableConfig_html: string = ` + + + + + + + + + `; + + tableConfig_ts: string = ` + tableConfig = new GoTableConfig({ + pageConfig: new GoTablePageConfig({ + pageSizes: [5, 10, 15], + perPage: 5 + }), + tableData: this.data + }); + `; + + tableConfig: object = new GoTableConfig({ + pageConfig: new GoTablePageConfig({ + pageSizes: [5, 10, 15], + perPage: 5 + }), + tableData: this.tableDocsService.generateData(25) + }); +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.html new file mode 100644 index 000000000..86c4b3c1d --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.html @@ -0,0 +1,136 @@ +
+ + +

Implementing Selection

+ + +

+ By default, selection is disabled. To add row selection capabilities to the table, there are two properties of the GoTableConfig + that must be set, selectable and selectBy. +

+ + + +
selectable
+

+ This property enables selection within the table. Without this enabled, selection will not be possible. +

+
selectBy
+

+ This property determines which column will be used to keep track of row selection. It corresponds to one of the fields in the columns. + Typically, this should be an id, or some other unique identifier in the data set. +

+ + + + + +
Imporant Notes
+ + +

+ Selection is persistant. This means that if the user changes the page or sorts the data, previous selections will persist through these actions. + This applies to both client side and server side implementations. +

+ + + + + +

Interacting with the Selection

+ + +

+ There are two ways to interact with the selected items of the table. + By using an element reference on the table and/or using the (rowSelectionEvent) event. +

+

+ First, you must understand how the table handle selection. See the SelectionState interface for an explanation: +

+ +

+ In selection mode, the user is selecting individual rows. This means that these selected rows are being added to the selectedRows array. + In deselection mode, the user has checked the 'check all' check box and is now removing items from the selection; we call this deselection. + In this case, items are added to the deselectedRows array as the user unchecks them. +

+

+ Interact with the table below to see how the selection works. +

+ + + + + + State + + + + + + + + + + + +

Element Reference Interaction

+ + +

+ This approach should be used when an action is performed after a user has finished their selecting (ex. button click). +

+

example.html

+ +

example.ts

+ + + + + + + Selection State + + + + + + + + + + + +

Row Event Interaction

+ + +

+ This approach should be used when an action necessary upon individual row selection or deselection. +

+

example.html

+ +

example.ts

+ + + + + + + + + + + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.spec.ts new file mode 100644 index 000000000..6daf0b84c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TableSelectionComponent } from './table-selection.component'; + +describe('TableSelectionComponent', () => { + let component: TableSelectionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TableSelectionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TableSelectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.ts new file mode 100644 index 000000000..6918020ed --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-selection/table-selection.component.ts @@ -0,0 +1,182 @@ +import { Component, ViewChild } from '@angular/core'; +import { TableDocsService } from '../../table-docs.service'; +import { + GoTableComponent, + GoTableConfig, + GoToasterService, + RowSelectionEvent, + SelectionState +} from 'projects/go-lib/src/public_api'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + selector: 'app-table-selection', + templateUrl: './table-selection.component.html' +}) +export class TableSelectionComponent { + + @ViewChild('interactiveTable') interactiveTable: GoTableComponent; + @ViewChild('eleRefTable') eleRefTable: GoTableComponent; + + tableSelectConfig: string = ` + class GoTableConfig { + selectable: boolean; // defaults to false + selectBy: string; + } + `; + + tableSelectModels: string = ` + export interface SelectionState { + /** + * Defines the current mode of selection. 'selection' will add items to 'selectedRows' + * and 'deselection' will add items to 'deselectedRows'. + * + * If in 'deselection' mode, the UI toggles all checkboxes to true. Items instead will be added to 'deselectedRows' + * because they're being removed from the selection. + */ + selectionMode: SelectionMode; + + /** + * The current deselected rows; if 'selectionMode' is 'selection' then this will always be an empty array + */ + deselectedRows?: any[]; + + /** + * The current selected rows; if 'selectionMode' is 'deselection' then this will always be an empty array + */ + selectedRows?: any[]; + } + + export enum SelectionMode { + selection = 'selection', + deselection = 'deselection' + } + `; + + eleRef_html: string = ` + + + Selection State + + + + + + + + + `; + + eleRef_ts: string = ` + import { + GoTableComponent, + GoTableConfig, + SelectionState + } from '@tangoe/goponents'; + + eleRefTableConfig = new GoTableConfig({ + selectBy: 'id', + selectable: true, + tableData: [] // your array of data + }); + + @ViewChild('eleRefTable', { static: false }) eleRefTable: GoTableComponent; + + getSelectionState(): void { + const state: SelectionState = this.eleRefTable.getSelectionState(); + + // do something with the state + } + `; + + rowEvent_html: string = ` + + + + + + + + + `; + + rowEvent_ts: string = ` + import { + GoTableConfig, + RowSelectionEvent, + SelectionState + } from '@tangoe/goponents'; + + rowEventTableConfig = new GoTableConfig({ + selectBy: 'id', + selectable: true, + tableData: [] // your array of data + }); + + tableRowEvent(rowEvent: RowSelectionEvent): void { + // do something with rowEvent + } + `; + + interactiveTableConfig: GoTableConfig = new GoTableConfig({ + selectBy: 'id', + selectable: true, + tableData: this.tableDocsService.generateData(20) + }); + + eleRefTableConfig: GoTableConfig = new GoTableConfig({ + selectBy: 'id', + selectable: true, + tableData: this.tableDocsService.generateData(20) + }); + + rowEventTableConfig: GoTableConfig = new GoTableConfig({ + selectBy: 'id', + selectable: true, + tableData: this.tableDocsService.generateData(20) + }); + + constructor( + private tableDocsService: TableDocsService, + private subNavService: SubNavService, + private toasterService: GoToasterService + ) { + this.subNavService.pageTitle = 'Table Selection'; + } + + tableRowEvent(rowEvent: RowSelectionEvent): void { + this.toasterService.toastInfo({ header: 'Row Event', message: 'Selection Mode: ' + rowEvent.selectionMode + '. ' }, 6000); + this.toasterService.toastInfo( + { + header: 'Row Event', + // tslint:disable-next-line: max-line-length + message: 'Current Row Id: ' + rowEvent.currentRow.data['id'] + ', ' + (rowEvent.currentRow.selected ? 'selected' : 'deselected') + '. ' + }, 6000); + this.toasterService.toastInfo({ header: 'Row Event', message: 'Selected Row Count: ' + rowEvent.selectedRows.length + '. ' }, 6000); + this.toasterService.toastInfo({ header: 'Row Event', message: 'Deselected Row Count: ' + rowEvent.deselectedRows.length + '. ' }, 6000); + } + + interactiveTableState(): void { + const state: SelectionState = this.interactiveTable.getSelectionState(); + this.tableSelectionState(state); + } + + getSelectionState(): void { + const state: SelectionState = this.eleRefTable.getSelectionState(); + this.tableSelectionState(state); + } + + private tableSelectionState(state: SelectionState): void { + this.toasterService.toastSuccess({ header: 'Selection State', message: 'Selection Mode: ' + state.selectionMode + '. ' }, 6000); + // tslint:disable-next-line: max-line-length + this.toasterService.toastSuccess({ header: 'Selection State', message: 'Selected Row Count: ' + state.selectedRows.length + '. ' }, 6000); + // tslint:disable-next-line: max-line-length + this.toasterService.toastSuccess({ header: 'Selection State', message: 'Deselected Row Count: ' + state.deselectedRows.length + '. ' }, 6000); + } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html new file mode 100644 index 000000000..342e8e42a --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html @@ -0,0 +1,67 @@ +
+ + +

Implementing Sorting

+ + +

+ By default, sorting is enabled. To set the sorted column and direction, you may pass an GoTableSortConfig + class to the sortConfig property on the GoTableConfig object. +

+ + + +

column

+

+ This property determines which column to set as the default sort as a string. + To sort a column in a nested object in the array, you may pass the path to the property. "address.state" +

+

direction

+

+ This property determines the direction to sort the data. By default, it will sort ascending. + This property is an enum, SortDirection (see below). +

+ + + + + + +

Setting the Sort

+ + +

example.html

+ +

example.ts

+ + + + + + + + + + + + + + +

Restricting Sort Example

+ + +

example.html

+ +

example.ts

+ + + + + + + + + + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts new file mode 100644 index 000000000..22462bf1c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts @@ -0,0 +1,79 @@ +import { Component } from '@angular/core'; +import { TableDocsService } from '../../table-docs.service'; +import { GoTableConfig, GoTableSortConfig, SortDirection } from 'projects/go-lib/src/public_api'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + templateUrl: './table-sorting.component.html' +}) +export class TableSortingComponent { + constructor( + private tableDocsService: TableDocsService, + private subNavService: SubNavService + ) { + this.subNavService.pageTitle = 'Table Sorting'; + } + + //////////////////////////// + + tableSortConfig: string = ` + class GoTableSortConfig { + column: string; + direction?: SortDirection = SortDirection.ascending; + } + `; + + tableSortDir: string = ` + enum SortDirection { + ascending = 1, + descending = 0 + } + `; + + tableConfigEx: string = ` + // import these at the top of the file + import { GoTableConfig, GoTableSortConfig, SortDirection } from '@tangoe/goponents'; + + this.tableConfig = new GoTableConfig({ + sortConfig: new GoTableSortConfig({ + column: 'name.first', + direction: SortDirection.descending + }), + tableData: data + }); + `; + + tableConfigEx_html: string = ` + + + + + + + + + `; + + tableConfigEx_nosort: string = ` + // import these at the top of the file + import { GoTableConfig, GoTableSortConfig, SortDirection } from '@tangoe/goponents'; + + this.tableConfig = new GoTableConfig({ + sortable: false, + tableData: data + }); + `; + + tableConfig: GoTableConfig = new GoTableConfig({ + sortConfig: new GoTableSortConfig({ + column: 'name.first', + direction: SortDirection.descending + }), + tableData: this.tableDocsService.generateData(20) + }); + + tableConfig_nosort: GoTableConfig = new GoTableConfig({ + sortable: false, + tableData: this.tableDocsService.generateData(20) + }); +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.html new file mode 100644 index 000000000..910dbcc75 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.html @@ -0,0 +1,102 @@ +
+ + +

Implementing Templating

+ + +

+ It is possible to add custom templates for column's heading or cell + by using #goTableHead and + #goTableCell respectively. +

+

+ The content within these areas can be any HTML and is supported by + Angular so you can make use of components, pipes, etc. +

+ + + + + +

Adding Cell Templating

+ + +

example.html

+ + + + + + + + + + + {{ item.email }} + + + + + + + + +

Adding Header Templating

+ + +

example.html

+ + + + + + + +
+ Person + ID +
+ + + + +
+ Person + First Name +
+ + + + +
+ Person + Last Name +
+ + + + +
+ Person + Primary Email +
+ + + + +
+ Person + Gender +
+ + + + +
+ Person + IP Address +
+ + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.scss b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.scss new file mode 100644 index 000000000..93fe96b76 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.scss @@ -0,0 +1,9 @@ +@import '../../../../../../../../../go-lib/src/styles/variables'; + +.stacked-header__type { + color: $base-dark; + display: block; + font-weight: normal; + margin-bottom: $column-gutter--quarter; + text-transform: capitalize; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.ts new file mode 100644 index 000000000..2a9eafc86 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-templates/table-templates.component.ts @@ -0,0 +1,66 @@ +import { Component } from '@angular/core'; +import { GoTableConfig } from 'projects/go-lib/src/public_api'; +import { TableDocsService } from '../../table-docs.service'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + templateUrl: './table-templates.component.html', + styleUrls: ['./table-templates.component.scss'] +}) +export class TableTemplatesComponent { + constructor( + private tableDocsService: TableDocsService, + private subNavService: SubNavService + ) { + this.subNavService.pageTitle = 'Table Templating'; + } + + //////////////////////////// + + columnTemplating: string = ` + + + + + + + {{ item.email }} + + + + + + `; + + headerTemplating: string = ` + + ${this.customHeader('id', 'ID')} + ${this.customHeader('name.first', 'First Name')} + ${this.customHeader('name.last', 'Last Name')} + ${this.customHeader('email', 'Primary Email')} + ${this.customHeader('gender', 'Gender')} + ${this.customHeader('ip_address', 'IP Address')} + + `; + + tableConfig: object = new GoTableConfig({ + tableData: this.tableDocsService.generateData(20) + }); + + + // Private Functions + // =================== + + private customHeader(column: string, field: string): string { + return ` + + +
+ Person + ${field} +
+ + + `.trim(); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.html new file mode 100644 index 000000000..b00e766cd --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.ts new file mode 100644 index 000000000..c83a30ab8 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; + +import { NavGroup } from 'projects/go-lib/src/public_api'; + +@Component({ + templateUrl: './table-docs.component.html' +}) +export class TableDocsComponent { + + menuItems: Array = [ + { routeTitle: 'Basics', subRoutes: [ + { route: './', routeTitle: 'Overview' }, + { route: './actions', routeTitle: 'Actions' }, + { route: './pagination', routeTitle: 'Pagination' }, + { route: './selection', routeTitle: 'Selection' }, + { route: './sorting', routeTitle: 'Sorting' }, + { route: './templating', routeTitle: 'Templating' } + ]}, + { routeTitle: 'Advanced', subRoutes: [ + { route: './server-integration', routeTitle: 'Server-Side Integration' } + ]} + ]; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.service.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.service.ts new file mode 100644 index 000000000..15282d394 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/table-docs.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; +import * as faker from 'faker'; + +@Injectable({ + providedIn: 'root' +}) +export class TableDocsService { + public generateData(length: number): Array<{}> { + return Array.from({ length: length }, (_: any, key: number) => key).map((index: any) => { + return { + id: index + 1, + name: { + first: faker.name.firstName(), + last: faker.name.lastName() + }, + email: faker.internet.email(), + gender: index % 3 ? 'Male' : 'Female', + ip_address: faker.internet.ip() + }; + }); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html new file mode 100644 index 000000000..93e59a995 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html @@ -0,0 +1,104 @@ +
+

{{ pageTitle }}

+
+ +
+ + + +

Usage

+

+ The <go-toast> component should be used to notify the user of event responses + or show notices. These should be used for short messages. +

+ + +

Bindings

+ + +

dismissable

+

+ By default this is false, but if set to true it will show an icon + on the toast and allow the toast to be removed from the UI. +

+ +

header

+

+ The text to be displayed as the header of the toast. This is optional, however either this binding or the + message binding must be set. +

+ +

message

+

+ The text to be displayed as the message of the toast. This is optional, however either this binding or the + header binding must be set. +

+ +

type

+

+ This binding determines which type of toast to display. By default, it will be set to neutral. + Options for this are: +

+
    +
  1. positive
    2. +
  2. neutral
    3. +
  3. negative
    4. +
+ +

handleDismiss

+

+ This event gets emitted when the dismiss button is clicked. dismissable must be + set to true for the button to appear. +

+ + + + + +

Basic Example

+ + +

+ Shows a basic use case of each type. +

+ + + + + + + + + +

Dismiss Example

+ + +

component.html

+ +

component.ts

+ + + + + + + + +

Toaster Example

+ + +

component.ts

+ +

app.module.ts

+ +

app.component.html

+ + Make Toast + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.spec.ts new file mode 100644 index 000000000..b2dd06362 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToastDocsComponent } from './toast-docs.component'; + +describe('ToastDocsComponent', () => { + let component: ToastDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ToastDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ToastDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts new file mode 100644 index 000000000..748356077 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts @@ -0,0 +1,82 @@ +import { Component } from '@angular/core'; +import { GoToasterService } from 'projects/go-lib/src/public_api'; + +@Component({ + selector: 'app-toast-docs', + templateUrl: './toast-docs.component.html' +}) +export class ToastDocsComponent { + + showDismissToast: boolean = true; + + pageTitle: string = 'Toasts'; + + componentBindings: string = ` + @Input() dismissable: boolean = false; + @Input() header: string; + @Input() message: string; + @Input() type: string; + + @Output() handleDismiss = new EventEmitter(); + `; + + basic_html: string = ` + + + + `; + + dismiss_html: string = ` + + `; + + dismiss_ts: string = ` + showDismissToast = true; + + dismissed() { + this.showDismissToast = false; + } + `; + + toaster_ts: string = ` + import { GoToasterService } from '@tangoe/goponents'; + + constructor(private toasterService: GoToasterService) { } + + this.toasterService.toastSuccess({ message: 'You clicked the button!' }); + `; + + toaster_app_ts: string = ` + import { GoToasterModule } from '@tangoe/goponents'; + + NgModule({ + imports: [ + GoToasterModule + ] + }); + `; + + toaster_app_html: string = ` + + `; + + constructor(private toasterService: GoToasterService) { } + + dismissed(): void { + this.showDismissToast = false; + this.toasterService.toastInfo({ message: 'Dismissed Item' }); + + setTimeout(() => { + this.showDismissToast = true; + }, 3000); + } + + sendToast(): void { + this.toasterService.toastSuccess({ message: 'You clicked the button!' }); + } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.html new file mode 100644 index 000000000..848ccf3c3 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.html @@ -0,0 +1,21 @@ +
+

{{ pageTitle }}

+
+
+ +
+

+ The goDesign components represent complex implementations of our goDesign standard elements. +

+

+ Using a node module and NPM we will be able to distribute and + maintain our components quickly and efficiently. +

+

+ This methodology is heavily based on Atomic Design + which lends itself towards thinking of our UIs as thoughtful hierarchies, discusses the qualities of + effective pattern libraries, and showcases techniques to transform your team's design and development workflow. +

+
+ +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.ts new file mode 100644 index 000000000..58819d55e --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/ui-kit/ui-kit.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + templateUrl: './ui-kit.component.html' +}) +export class UiKitComponent implements OnInit { + + pageTitle: String; + + ngOnInit(): void { + this.pageTitle = 'Components'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts new file mode 100644 index 000000000..55b65a11e --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -0,0 +1,81 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { AccordionDocsComponent } from '../components/accordion-docs/accordion-docs.component'; +import { AccordionPanelDocsComponent } from '../components/accordion-panel-docs/accordion-panel-docs.component'; +import { BadgeDocsComponent } from '../components/badge-docs/badge-docs.coponent'; +import { ButtonDocsComponent } from '../components/button-docs/button-docs.component'; +import { CardDocsComponent } from '../components/card-docs/card-docs.component'; +import { CopyDocsComponent } from '../components/copy-docs/copy-docs.component'; +import { DatepickerDocsComponent } from '../components/form-docs/components/datepicker-docs/datepicker-docs.component'; +import { FormDocsComponent } from '../components/form-docs/form-docs.component'; +import { FormsOverviewComponent } from '../components/form-docs/components/forms-overview/forms-overview.component'; +import { IconDocsComponent } from '../components/icon-docs/icon-docs.component'; +import { InputDocsComponent } from '../components/form-docs/components/input-docs/input-docs.component'; +import { ModalDocsComponent } from '../components/modal-docs/modal-docs.component'; +import { ServerIntegrationComponent } from '../components/table-docs/components/server-integration/server-integration.component'; +import { TableDocsComponent } from '../components/table-docs/table-docs.component'; +import { TableOverviewComponent } from '../components/table-docs/components/table-overview/table-overview.component'; +import { TablePaginationComponent } from '../components/table-docs/components/table-pagination/table-pagination.component'; +import { TableSortingComponent } from '../components/table-docs/components/table-sorting/table-sorting.component'; +import { TableTemplatesComponent } from '../components/table-docs/components/table-templates/table-templates.component'; +import { ToastDocsComponent } from '../components/toast-docs/toast-docs.component'; +import { UiKitComponent } from '../components/ui-kit/ui-kit.component'; +import { OffCanvasDocsComponent } from '../components/off-canvas-docs/off-canvas-docs.component'; +import { LoaderDocsComponent } from '../components/loader-docs/loader-docs.component'; +import { LayoutDocsComponent } from '../components/layout-docs/layout-docs.component'; +import { LayoutOverviewComponent } from '../components/layout-docs/components/layout-overview/layout-overview.component'; +import { LayoutNavComponent } from '../components/layout-docs/components/layout-nav/layout-nav.component'; +import { LayoutHeaderComponent } from '../components/layout-docs/components/layout-header/layout-header.component'; +import { LayoutSearchComponent } from '../components/layout-docs/components/layout-search/layout-search.component'; +import { LayoutExampleComponent } from '../components/layout-docs/components/layout-example/layout-example.component'; +import { TextAreaDocsComponent } from '../components/form-docs/components/text-area-docs/text-area-docs.component'; +import { TableSelectionComponent } from '../components/table-docs/components/table-selection/table-selection.component'; +import { TableActionsDocsComponent } from '../components/table-docs/components/table-actions-docs/table-actions-docs.component'; + +const routes: Routes = [ + { path: 'ui-kit', component: UiKitComponent }, + { path: 'ui-kit/accordion', component: AccordionDocsComponent }, + { path: 'ui-kit/accordion-panel', component: AccordionPanelDocsComponent }, + { path: 'ui-kit/badge', component: BadgeDocsComponent }, + { path: 'ui-kit/button', component: ButtonDocsComponent }, + { path: 'ui-kit/card', component: CardDocsComponent }, + { path: 'ui-kit/copy', component: CopyDocsComponent }, + { path: 'ui-kit/forms', component: FormDocsComponent, children: [ + { path: '', component: FormsOverviewComponent }, + { path: 'datepicker', component: DatepickerDocsComponent }, + { path: 'input', component: InputDocsComponent }, + { path: 'textarea', component: TextAreaDocsComponent } + ]}, + { path: 'ui-kit/layout', component: LayoutDocsComponent, children: [ + { path: '', component: LayoutOverviewComponent }, + { path: 'header', component: LayoutHeaderComponent }, + { path: 'search', component: LayoutSearchComponent }, + { path: 'side-nav', component: LayoutNavComponent }, + { path: 'example', component: LayoutExampleComponent } + ]}, + { path: 'ui-kit/loader', component: LoaderDocsComponent }, + { path: 'ui-kit/icon', component: IconDocsComponent }, + { path: 'ui-kit/modal', component: ModalDocsComponent }, + { path: 'ui-kit/off-canvas', component: OffCanvasDocsComponent }, + { path: 'ui-kit/table', component: TableDocsComponent, children: [ + { path: '', component: TableOverviewComponent }, + { path: 'actions', component: TableActionsDocsComponent }, + { path: 'pagination', component: TablePaginationComponent }, + { path: 'selection', component: TableSelectionComponent }, + { path: 'server-integration', component: ServerIntegrationComponent }, + { path: 'sorting', component: TableSortingComponent }, + { path: 'templating', component: TableTemplatesComponent } + ]}, + { path: 'ui-kit/toast', component: ToastDocsComponent } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(routes) + ], + exports: [ + RouterModule + ] +}) +export class UiKitRoutesModule { } diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts new file mode 100644 index 000000000..5ded850fb --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -0,0 +1,136 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { HighlightModule } from 'ngx-highlightjs'; +import { SharedModule } from '../../shared/shared.module'; + +// GoPonents +import { + GoAccordionModule, + GoBadgeModule, + GoButtonModule, + GoCardModule, + GoCopyModule, + GoDatepickerModule, + GoIconButtonModule, + GoIconModule, + GoInputModule, + GoLoaderModule, + GoModalModule, + GoModalService, + GoOffCanvasModule, + GoOffCanvasService, + GoTableModule, + GoTextAreaModule, + GoToasterService, + GoToastModule +} from '../../../../../go-lib/src/public_api'; + +// Module Routes +import { UiKitRoutesModule } from './routes/ui-kit-routing.module'; + +// Module Components +import { AccordionDocsComponent } from './components/accordion-docs/accordion-docs.component'; +import { AccordionPanelDocsComponent } from './components/accordion-panel-docs/accordion-panel-docs.component'; +import { BadgeDocsComponent } from './components/badge-docs/badge-docs.coponent'; +import { ButtonDocsComponent } from './components/button-docs/button-docs.component'; +import { CardDocsComponent } from './components/card-docs/card-docs.component'; +import { CopyDocsComponent } from './components/copy-docs/copy-docs.component'; +import { DatepickerDocsComponent } from './components/form-docs/components/datepicker-docs/datepicker-docs.component'; +import { FormControlDocsComponent } from './components/form-docs/components/form-control-docs/form-control-docs.component'; +import { FormDocsComponent } from './components/form-docs/form-docs.component'; +import { FormsOverviewComponent } from './components/form-docs/components/forms-overview/forms-overview.component'; +import { IconDocsComponent } from './components/icon-docs/icon-docs.component'; +import { InputDocsComponent } from './components/form-docs/components/input-docs/input-docs.component'; +import { ModalDocsComponent } from './components/modal-docs/modal-docs.component'; +import { ModalTestComponent } from './components/modal-test/modal-test.component'; +import { ServerIntegrationComponent } from './components/table-docs/components/server-integration/server-integration.component'; +import { TableDocsComponent } from './components/table-docs/table-docs.component'; +import { TableOverviewComponent } from './components/table-docs/components/table-overview/table-overview.component'; +import { TablePaginationComponent } from './components/table-docs/components/table-pagination/table-pagination.component'; +import { TableSortingComponent } from './components/table-docs/components/table-sorting/table-sorting.component'; +import { TableTemplatesComponent } from './components/table-docs/components/table-templates/table-templates.component'; +import { ToastDocsComponent } from './components/toast-docs/toast-docs.component'; +import { UiKitComponent } from './components/ui-kit/ui-kit.component'; +import { BasicTestComponent } from './components/basic-test/basic-test.component'; +import { OffCanvasDocsComponent } from './components/off-canvas-docs/off-canvas-docs.component'; +import { LoaderDocsComponent } from './components/loader-docs/loader-docs.component'; +import { LayoutDocsComponent } from './components/layout-docs/layout-docs.component'; +import { LayoutOverviewComponent } from './components/layout-docs/components/layout-overview/layout-overview.component'; +import { LayoutNavComponent } from './components/layout-docs/components/layout-nav/layout-nav.component'; +import { LayoutHeaderComponent } from './components/layout-docs/components/layout-header/layout-header.component'; +import { LayoutSearchComponent } from './components/layout-docs/components/layout-search/layout-search.component'; +import { LayoutExampleComponent } from './components/layout-docs/components/layout-example/layout-example.component'; +import { TextAreaDocsComponent } from './components/form-docs/components/text-area-docs/text-area-docs.component'; +import { TableSelectionComponent } from './components/table-docs/components/table-selection/table-selection.component'; +import { TableActionsDocsComponent } from './components/table-docs/components/table-actions-docs/table-actions-docs.component'; + +@NgModule({ + imports: [ + CommonModule, + GoAccordionModule, + GoBadgeModule, + GoButtonModule, + GoCardModule, + GoCopyModule, + GoDatepickerModule, + GoIconButtonModule, + GoIconModule, + GoInputModule, + GoTextAreaModule, + GoLoaderModule, + GoModalModule, + GoOffCanvasModule, + GoTableModule, + GoToastModule, + HighlightModule, + SharedModule, + UiKitRoutesModule + ], + declarations: [ + AccordionDocsComponent, + AccordionPanelDocsComponent, + BasicTestComponent, + BadgeDocsComponent, + ButtonDocsComponent, + CardDocsComponent, + CopyDocsComponent, + FormControlDocsComponent, + DatepickerDocsComponent, + FormDocsComponent, + FormsOverviewComponent, + IconDocsComponent, + InputDocsComponent, + ModalDocsComponent, + ModalTestComponent, + OffCanvasDocsComponent, + ServerIntegrationComponent, + TableDocsComponent, + TableOverviewComponent, + TablePaginationComponent, + TableSortingComponent, + TableTemplatesComponent, + TextAreaDocsComponent, + ToastDocsComponent, + UiKitComponent, + LoaderDocsComponent, + LayoutDocsComponent, + LayoutOverviewComponent, + LayoutNavComponent, + LayoutHeaderComponent, + LayoutSearchComponent, + LayoutExampleComponent, + TableSelectionComponent, + TableActionsDocsComponent + ], + entryComponents: [ + BasicTestComponent, + ModalTestComponent + ], + providers: [ + GoModalService, + GoOffCanvasService, + GoToasterService + ] +}) + +export class UiKitModule { } diff --git a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.html b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.html new file mode 100644 index 000000000..37278cfc1 --- /dev/null +++ b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.html @@ -0,0 +1,26 @@ +
+

{{ subNavService.pageTitle }}

+
+
+
+ +
+
+ + +
{{ item.routeTitle }}
+ + + +
+
+ +
+
diff --git a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss new file mode 100644 index 000000000..7cf1f6ce2 --- /dev/null +++ b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss @@ -0,0 +1,113 @@ +@import '../../../../../../go-lib/src/styles/variables'; +@import '../../../../../../go-lib/src/styles/mixins'; + +.sub-nav-container { + align-items: flex-start; + display: flex; + position: relative; +} + +.sub-nav-outlet { + flex: 1; + position: relative; +} + +.sub-nav-container-outlet ~ * { + height: 100%; + position: absolute; + width: 100%; +} + +.sub-nav-submenu { + margin-left: 2rem; + min-width: 200px; + position: relative; + + @media (max-width: $breakpoint-tablet) { + @include transition(all); + + background: $theme-light-bg; + border-radius: $global-radius; + padding: 1rem; + position: fixed; + right: calc(-200px - 3rem); + z-index: 10; + + &.sub-nav-submenu--mobile-show { + box-shadow: $global-box-shadow; + right: 0; + } + } +} + +.sub-nav-submenu-mobile-toggle { + @include transition(all); + + background: $theme-light-bg; + border-radius: $global-radius 0 0 $global-radius; + box-shadow: $global-box-shadow; + cursor: pointer; + display: none; + height: 3rem; + margin-top: 2rem; + position: fixed; + right: 0; + user-select: none; + width: 2rem; + + &:hover { + width: 2.5rem; + } + + @media (max-width: $breakpoint-tablet) { + display: flex; + } +} + +.sub-nav-submenu-mobile-toggle--expand { + right: 200px; +} + +.sub-nav-submenu-mobile-toggle__icon { + display: flex; + flex: 1; + flex-direction: column; + font-size: 1.5rem; + justify-content: center; + line-height: 1.5rem; + text-align: center; +} + +.sub-nav-submenu__title { + border-bottom: 1px solid $theme-light-border; + padding-bottom: .5rem; +} + +.sub-nav-submenu__ul { + padding-bottom: 1rem; +} + +.sub-nav-submenu__a { + @include transition(all); + + border-bottom: 0; + display: inline-block; + margin-bottom: .5rem; + padding: .25rem 0; + position: relative; + + &.sub-nav-submenu__a--active { + padding-left: .75rem; + + &::before { + background: $ui-color-neutral-gradient; + border-radius: 2px; + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 4px; + } + } +} diff --git a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.spec.ts b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.spec.ts new file mode 100644 index 000000000..8708e1cee --- /dev/null +++ b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubNavComponent } from './sub-nav.component'; + +describe('SubNavComponent', () => { + let component: SubNavComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SubNavComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SubNavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.ts b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.ts new file mode 100644 index 000000000..7bb0e27df --- /dev/null +++ b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.ts @@ -0,0 +1,43 @@ +import { + Component, + Input, + OnInit, + ViewEncapsulation +} from '@angular/core'; +import { routerAnimation } from '../../../app.animations'; + +import { NavGroup } from '../../../../../../go-lib/src/public_api'; +import { SubNavService } from './sub-nav.service'; + +@Component({ + animations: [routerAnimation], + selector: 'app-sub-nav', + templateUrl: './sub-nav.component.html', + styleUrls: ['./sub-nav.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class SubNavComponent { + + @Input() menuItems: Array; + + mobileSubmenuShown: boolean; + + constructor(public subNavService: SubNavService) { } + + getRouteAnimation(outlet: any): void { + return outlet.isActivated ? outlet.activatedRoute : ''; + } + + toggleSubmenu(): void { + this.mobileSubmenuShown = this.mobileSubmenuShown ? false : true; + } + + submenuIcon(): string { + return this.mobileSubmenuShown ? 'chevron_right' : 'chevron_left'; + } + + closeMobileMenu(): void { + this.mobileSubmenuShown = false; + } + +} diff --git a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service.ts b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service.ts new file mode 100644 index 000000000..bf0374e23 --- /dev/null +++ b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service.ts @@ -0,0 +1,8 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class SubNavService { + pageTitle: string; +} diff --git a/projects/go-style-guide/src/app/shared/shared.module.ts b/projects/go-style-guide/src/app/shared/shared.module.ts new file mode 100644 index 000000000..fe62035bc --- /dev/null +++ b/projects/go-style-guide/src/app/shared/shared.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; + +import { + GoIconModule +} from 'projects/go-lib/src/public_api'; + +import { SubNavComponent } from './components/sub-nav/sub-nav.component'; +import { SubNavService} from './components/sub-nav/sub-nav.service'; + +@NgModule({ + declarations: [ + SubNavComponent + ], + imports: [ + CommonModule, + GoIconModule, + RouterModule + ], + exports: [ + SubNavComponent, + ], + providers: [ + SubNavService + ] +}) +export class SharedModule { } diff --git a/projects/go-style-guide/src/assets/.gitkeep b/projects/go-style-guide/src/assets/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/projects/go-style-guide/src/assets/images/favicon.png b/projects/go-style-guide/src/assets/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..1687dd76db8da9decf7075ed815b468709df4cc4 GIT binary patch literal 439 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*D5Xj01c^TyMO&zUkJ6o)evqK0f^V>udh5?23J*M;{;AeQ($N zi*w$5d);)ne&w}gQ_oC3|Ke=w*2Mq+|4RvT90zI_ED7=p269mVgX-FuNkGZJo-U3d z6}RS0el6Clz|kORxb^g#zw^s9og$*G)Bk96`sXpev1ie%D)}dPV(FA03_lLX9b#q> z)%edie;Tx%U7TujDph ZaD8V{cV@!cW?(=tc)I$ztaD0e0swwo#qa \ No newline at end of file diff --git a/projects/go-style-guide/src/browserslist b/projects/go-style-guide/src/browserslist new file mode 100644 index 000000000..37371cb04 --- /dev/null +++ b/projects/go-style-guide/src/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/projects/go-style-guide/src/environments/environment.prod.ts b/projects/go-style-guide/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/projects/go-style-guide/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/projects/go-style-guide/src/environments/environment.ts b/projects/go-style-guide/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/projects/go-style-guide/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/projects/go-style-guide/src/index.html b/projects/go-style-guide/src/index.html new file mode 100644 index 000000000..38f030a82 --- /dev/null +++ b/projects/go-style-guide/src/index.html @@ -0,0 +1,14 @@ + + + + + Tangoe Design System + + + + + + + + + diff --git a/projects/go-style-guide/src/main.ts b/projects/go-style-guide/src/main.ts new file mode 100644 index 000000000..c7b673cf4 --- /dev/null +++ b/projects/go-style-guide/src/main.ts @@ -0,0 +1,12 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/projects/go-style-guide/src/polyfills.ts b/projects/go-style-guide/src/polyfills.ts new file mode 100644 index 000000000..75d639398 --- /dev/null +++ b/projects/go-style-guide/src/polyfills.ts @@ -0,0 +1,63 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + * because those flags need to be set before `zone.js` being loaded, and webpack + * will put import in the top of bundle, so user need to create a separate file + * in this directory (for example: zone-flags.ts), and put the following flags + * into that file, and then add the following code before importing zone.js. + * import './zone-flags.ts'; + * + * The flags allowed in zone-flags.ts are listed here. + * + * The following flags will work for all browsers. + * + * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + * + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/projects/go-style-guide/src/styles.css b/projects/go-style-guide/src/styles.css new file mode 100644 index 000000000..90d4ee007 --- /dev/null +++ b/projects/go-style-guide/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/projects/go-style-guide/src/styles/_reset.scss b/projects/go-style-guide/src/styles/_reset.scss new file mode 100644 index 000000000..f5b5a455a --- /dev/null +++ b/projects/go-style-guide/src/styles/_reset.scss @@ -0,0 +1,51 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} diff --git a/projects/go-style-guide/src/styles/_settings.scss b/projects/go-style-guide/src/styles/_settings.scss new file mode 100644 index 000000000..ade6e15ba --- /dev/null +++ b/projects/go-style-guide/src/styles/_settings.scss @@ -0,0 +1,6 @@ +// Fonts +@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); +@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); + +$roboto-code: 'Roboto Mono', monospace; diff --git a/projects/go-style-guide/src/styles/_typography.scss b/projects/go-style-guide/src/styles/_typography.scss new file mode 100644 index 000000000..96517a673 --- /dev/null +++ b/projects/go-style-guide/src/styles/_typography.scss @@ -0,0 +1,45 @@ +strong { + font-weight: $weight-bold; +} + +caption.method-type { + margin: 0; + vertical-align: middle; +} + +em { + font-style: italic; +} + +// Extras +caption { + display: inline-block; + font-size: .75rem; + letter-spacing: .4pt; + line-height: 1.3; + margin: 1rem 0; + text-align: left; +} + +.overline { + display: block; + font-size: .625rem; + letter-spacing: 1.5pt; + margin-bottom: -.25rem; + position: relative; + text-transform: uppercase; +} + +.go-page-title { + padding: 0 1rem 1rem; +} + +.go-heading--underlined { + border-bottom: 1px solid $theme-light-app-bg; + margin-bottom: 1rem; + padding-bottom: .5rem; +} + +pre { + margin: .5rem 0; +} diff --git a/projects/go-style-guide/src/styles/styles.scss b/projects/go-style-guide/src/styles/styles.scss new file mode 100644 index 000000000..4875348f0 --- /dev/null +++ b/projects/go-style-guide/src/styles/styles.scss @@ -0,0 +1,78 @@ +@import 'reset'; +@import '../../../go-lib/src/styles/styles.scss'; + +@import 'settings'; +@import 'typography'; +@import '~highlight.js/styles/github.css'; + +// Base Styling +::-webkit-scrollbar { + width: 12px; + height: 12px; + + @media (max-width: 768px) { + width: 0 !important; + height: 0 !important; + } +} + +::-webkit-scrollbar-track { + background-color: $theme-light-app-bg; +} + +::-webkit-scrollbar-thumb { + background-color: $base-light-secondary; + border: 2px solid $theme-light-app-bg; + border-radius: 6px; +} + +code { + border-radius: $global-radius; + font-family: $roboto-code; + font-size: 0.75rem; + line-height: 1.6; + overflow-x: auto; + white-space: pre; + + &.hljs { + border: 1px solid $theme-light-app-bg; + } + + .hljs-section, .hljs-name, .hljs-strong { + font-weight: normal; + } +} + +.code-block--inline { + background-color: $theme-light-app-bg; + border: 1px solid $theme-light-border; + display: inline-block; + margin: 0; + padding: 0 .25rem; + vertical-align: text-bottom; +} + +.go-column--dark { + background-color: $theme-dark-bg; + padding-top: $column-gutter; +} + +.go-list { + display: flex; + flex-direction: column; + line-height: 1.5; + list-style-type: disc; + padding: 1rem 1.5rem; +} + +.go-list--ordered { + list-style-type: decimal; +} + +.go-container--centered { + padding: 0 25%; + + @media (max-width: $breakpoint_tablet) { + padding: 0; + } +} diff --git a/projects/go-style-guide/src/test.ts b/projects/go-style-guide/src/test.ts new file mode 100644 index 000000000..16317897b --- /dev/null +++ b/projects/go-style-guide/src/test.ts @@ -0,0 +1,20 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/zone-testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: any; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/projects/go-style-guide/tsconfig.app.json b/projects/go-style-guide/tsconfig.app.json new file mode 100644 index 000000000..bb16c46af --- /dev/null +++ b/projects/go-style-guide/tsconfig.app.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/projects/go-style-guide/tsconfig.spec.json b/projects/go-style-guide/tsconfig.spec.json new file mode 100644 index 000000000..a809b0a66 --- /dev/null +++ b/projects/go-style-guide/tsconfig.spec.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "src/test.ts", + "src/polyfills.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/projects/go-style-guide/tslint.json b/projects/go-style-guide/tslint.json new file mode 100644 index 000000000..19e8161a0 --- /dev/null +++ b/projects/go-style-guide/tslint.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ] + } +} From dd93fd64051e62ee00a063bf5e769c42bdd0bd44 Mon Sep 17 00:00:00 2001 From: "Eliezer.Golding" Date: Thu, 3 Oct 2019 14:46:01 -0400 Subject: [PATCH 03/98] Update font stack --- .../go-button/go-button.component.scss | 2 +- .../go-off-canvas.component.scss | 2 +- .../go-search/go-search.component.scss | 2 +- .../go-side-nav/go-side-nav.component.scss | 1 + projects/go-lib/src/styles/_forms.scss | 2 +- projects/go-lib/src/styles/_typography.scss | 19 ++++++++++--------- projects/go-lib/src/styles/_variables.scss | 5 ++--- .../go-style-guide/src/styles/_settings.scss | 1 + projects/go-tester/src/styles.scss | 1 + 9 files changed, 19 insertions(+), 16 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.scss b/projects/go-lib/src/lib/components/go-button/go-button.component.scss index 56b806df4..f827bf537 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.scss +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.scss @@ -52,7 +52,7 @@ $button__background--loading: rgba($theme-light-border, .4); color: $base-dark; cursor: pointer; display: inline-block; - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: .875rem; letter-spacing: .015rem; line-height: 1rem; diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss index 7ac3dee9b..174f190a1 100644 --- a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss +++ b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss @@ -38,7 +38,7 @@ color: $base-light; cursor: pointer; display: block; - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: .8rem; line-height: 1rem; outline-offset: -2px; diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.scss b/projects/go-lib/src/lib/components/go-search/go-search.component.scss index ac83110e6..7970d3344 100644 --- a/projects/go-lib/src/lib/components/go-search/go-search.component.scss +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.scss @@ -89,7 +89,7 @@ background: transparent; border: 0; flex: 1; - font-family: $base-font-stack; + font-family: $primary-font-stack; font-size: 0.875rem; font-weight: 300; letter-spacing: 0.02rem; diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss index 00f81562a..7ef291ec4 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss @@ -8,6 +8,7 @@ display: flex; flex-direction: column; flex-grow: 1; + font-family: $secondary-font-stack; height: 100%; overflow-y: auto; padding: 2rem 0; diff --git a/projects/go-lib/src/styles/_forms.scss b/projects/go-lib/src/styles/_forms.scss index ec0d58814..12534547e 100644 --- a/projects/go-lib/src/styles/_forms.scss +++ b/projects/go-lib/src/styles/_forms.scss @@ -53,7 +53,7 @@ $input--disabled-background: rgba($base-dark-secondary, .4); .go-form__label { color: $theme-light-color; display: block; - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: .875rem; font-weight: $weight-bold; letter-spacing: 1pt; diff --git a/projects/go-lib/src/styles/_typography.scss b/projects/go-lib/src/styles/_typography.scss index fa1d12c5d..0c401e5dc 100644 --- a/projects/go-lib/src/styles/_typography.scss +++ b/projects/go-lib/src/styles/_typography.scss @@ -1,25 +1,26 @@ body { - font-family: $base-font-stack; + font-family: $primary-font-stack; + font-weight: $weight-light; } .go-heading-1 { - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: 6rem; - font-weight: $weight-light; + font-weight: $weight-regular; letter-spacing: -1.5pt; margin-bottom: $column-gutter--quarter; } .go-heading-2 { - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: 3.75rem; - font-weight: $weight-light; + font-weight: $weight-regular; letter-spacing: -.5pt; margin-bottom: $column-gutter--quarter; } .go-heading-3 { - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: 3rem; font-weight: $weight-regular; letter-spacing: 0; @@ -28,7 +29,7 @@ body { } .go-heading-4 { - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: 2.125rem; font-weight: $weight-regular; letter-spacing: .25pt; @@ -37,7 +38,7 @@ body { } .go-heading-5 { - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: 1.5rem; font-weight: $weight-bold; letter-spacing: 0; @@ -46,7 +47,7 @@ body { } .go-heading-6 { - font-family: $heading-font-stack; + font-family: $primary-font-stack; font-size: .875rem; font-weight: $weight-bold; letter-spacing: 1pt; diff --git a/projects/go-lib/src/styles/_variables.scss b/projects/go-lib/src/styles/_variables.scss index 8d5a3d23b..a0e4aaf47 100644 --- a/projects/go-lib/src/styles/_variables.scss +++ b/projects/go-lib/src/styles/_variables.scss @@ -38,9 +38,8 @@ $weight-light: 300; $weight-regular: 400; $weight-bold: 700; -$base-font-stack: 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif; -$heading-font-stack: 'Roboto', 'Bryant', 'Helvetica', 'Arial', sans-serif; - +$primary-font-stack: 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif; +$secondary-font-stack: 'Nunito', 'Helvetica', 'Arial', sans-serif; // Colors // ---------------------------------------------------------------------------- diff --git a/projects/go-style-guide/src/styles/_settings.scss b/projects/go-style-guide/src/styles/_settings.scss index ade6e15ba..3e471bf43 100644 --- a/projects/go-style-guide/src/styles/_settings.scss +++ b/projects/go-style-guide/src/styles/_settings.scss @@ -1,5 +1,6 @@ // Fonts @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); +@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); diff --git a/projects/go-tester/src/styles.scss b/projects/go-tester/src/styles.scss index 928959a5d..a6c18bd67 100644 --- a/projects/go-tester/src/styles.scss +++ b/projects/go-tester/src/styles.scss @@ -1,5 +1,6 @@ /* You can add global styles to this file, and also import other style files */ @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); +@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); /* http://meyerweb.com/eric/tools/css/reset/ From 5ec2d5bc3ab778104f1372a37f5ab96c89a6b0b1 Mon Sep 17 00:00:00 2001 From: "Eliezer.Golding" Date: Thu, 3 Oct 2019 14:54:17 -0400 Subject: [PATCH 04/98] fix invalid variable reference --- projects/go-style-guide/src/app/app.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/go-style-guide/src/app/app.component.scss b/projects/go-style-guide/src/app/app.component.scss index 978d3308d..a0f2788a0 100644 --- a/projects/go-style-guide/src/app/app.component.scss +++ b/projects/go-style-guide/src/app/app.component.scss @@ -10,7 +10,7 @@ a { body { background: $theme-light-app-bg; color: $theme-light-color; - font-family: $base-font-stack; + font-family: $primary-font-stack; font-weight: 300; } From ffb010123aa4aa75d7bfb025535281b3a5345f59 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Thu, 3 Oct 2019 10:22:37 -0400 Subject: [PATCH 05/98] Add go-select documentation --- .../select-docs/select-docs.component.html | 249 ++++++++++++++++++ .../select-docs/select-docs.component.ts | 121 +++++++++ .../form-docs/form-docs.component.ts | 1 + .../ui-kit/routes/ui-kit-routing.module.ts | 2 + .../src/app/features/ui-kit/ui-kit.module.ts | 4 + 5 files changed, 377 insertions(+) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html new file mode 100644 index 000000000..ba1948c4c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html @@ -0,0 +1,249 @@ +
+ + + +

Component Control

+ + +

+ As with most of the form components, the only @Input + required of the text area component is a FormControl. + The FormControl can be passed in via the [control] + attribute on the <go-text-area> component. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Label

+ + +

+ All form components include an @Input() label: string; + that can be used to add a label to the textarea components. + In addition to displaying an HTML label, the text passed + in via the [label] + attribute is used to generate a unique ID to associate the + label with the textarea. If no label is passed in, a generic, + but still unique ID will be generated. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + + + +

Component Key

+ + +

+ As stated above the label attribute is used to generate a + unique ID to associate the label with the select. As this might + not be desired, the @Input() key: string; + can be used to configure the ID attribute of the textarea directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the select and + associate the label with the textarea. +

+
+
+

View

+ +
+
+

Code

+ +
+
+

Example Output

+

+ Notice in the below example output that the key has been assigned + to both the id attribute on + the textarea and the for attribute + on the label. +

+ +
+
+ + + + +

Component Hints

+ + +

+ Form hints exist to help give more information about the + selects they are attached to. The @Input() key: Array<string> + can be used to pass in an array of hints to the select component. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Component Errors

+ + +

+ FormControls all have a consistent way of setting errors + via the setErrors() function. + All goponents use this API to display errors on our components, but the + data needs to be displayed in a specific structure. +

+

+ By default the error type is set to "Error", however this can be + overridden as shown below. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Component Items

+ + +

+ Selects are pretty useless without options to choose from. The @Input() items: any[]; + binding allows an array of options to be passed in. This array can either be an array of strings or objects. If it's + an array of objects you will also need to pass both a @Input() bindLabel: string and a + @Input() bindValue: string attribute. The bindLabel attribute + is used to tell the select what we should show for each option while the bindValue attribute + is used to tell teh select what value we want to save for each option. Both should reference a key on each object in the item array. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + + + +

Component Multiple

+ + +

+ Sometimes we may want to be able to select multiple things. We can achieve this throught the + @Input() multiple: boolean = false; binding. Setting multiple + to true will turn the select into a multi select and will save an array of values instead of a single value. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts new file mode 100644 index 000000000..4296af931 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts @@ -0,0 +1,121 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + templateUrl: './select-docs.component.html' +}) +export class SelectDocsComponent implements OnInit { + items: any = [ + { value: 1, name: 'Reeses' }, + { value: 2, name: 'Mints' } + ]; + select1: FormControl = new FormControl(''); + select2: FormControl = new FormControl(''); + select3: FormControl = new FormControl(''); + select4: FormControl = new FormControl(''); + select5: FormControl = new FormControl(''); + select6: FormControl = new FormControl(''); + select7: FormControl = new FormControl(''); + + hints: Array = ['please select you favorite candy']; + + select1Code: string = ` + + `; + + select2Code: string = ` + + `; + + select3Code: string = ` + + `; + + select3KeyCode: string = ` + + + `; + + select4Code: string = ` + + `; + + select4HintsCode: string = ` + hints: Array = [ + 'please select you favorite candy' + ]; + `; + + select5Code: string = ` + + `; + + select5ErrorsCode: string = ` + this.select5.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + `; + + select6Code: string = ` + + `; + + select6ItemCode: string = ` + items = [ + { value: 1, name: 'Reeses' }, + { value: 2, name: 'Mints' } + ]; + `; + + select7Code: string = ` + + `; + + ngOnInit(): void { + setTimeout((): void => { + this.select5.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + }); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts index f1f18df76..c2fcabc93 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts @@ -12,6 +12,7 @@ export class FormDocsComponent { { route: './', routeTitle: 'Overview' }, { route: './datepicker', routeTitle: 'Datepicker' }, { route: './input', routeTitle: 'Input' }, + { route: './select', routeTitle: 'Select' }, { route: './textarea', routeTitle: 'Text Area' } ] } diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index 55b65a11e..c6bb23a1c 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -29,6 +29,7 @@ import { LayoutNavComponent } from '../components/layout-docs/components/layout- import { LayoutHeaderComponent } from '../components/layout-docs/components/layout-header/layout-header.component'; import { LayoutSearchComponent } from '../components/layout-docs/components/layout-search/layout-search.component'; import { LayoutExampleComponent } from '../components/layout-docs/components/layout-example/layout-example.component'; +import { SelectDocsComponent } from '../components/form-docs/components/select-docs/select-docs.component'; import { TextAreaDocsComponent } from '../components/form-docs/components/text-area-docs/text-area-docs.component'; import { TableSelectionComponent } from '../components/table-docs/components/table-selection/table-selection.component'; import { TableActionsDocsComponent } from '../components/table-docs/components/table-actions-docs/table-actions-docs.component'; @@ -45,6 +46,7 @@ const routes: Routes = [ { path: '', component: FormsOverviewComponent }, { path: 'datepicker', component: DatepickerDocsComponent }, { path: 'input', component: InputDocsComponent }, + { path: 'select', component: SelectDocsComponent }, { path: 'textarea', component: TextAreaDocsComponent } ]}, { path: 'ui-kit/layout', component: LayoutDocsComponent, children: [ diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 5ded850fb..10e80ed65 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -19,6 +19,7 @@ import { GoModalService, GoOffCanvasModule, GoOffCanvasService, + GoSelectModule, GoTableModule, GoTextAreaModule, GoToasterService, @@ -63,6 +64,7 @@ import { LayoutExampleComponent } from './components/layout-docs/components/layo import { TextAreaDocsComponent } from './components/form-docs/components/text-area-docs/text-area-docs.component'; import { TableSelectionComponent } from './components/table-docs/components/table-selection/table-selection.component'; import { TableActionsDocsComponent } from './components/table-docs/components/table-actions-docs/table-actions-docs.component'; +import { SelectDocsComponent } from './components/form-docs/components/select-docs/select-docs.component'; @NgModule({ imports: [ @@ -76,6 +78,7 @@ import { TableActionsDocsComponent } from './components/table-docs/components/ta GoIconButtonModule, GoIconModule, GoInputModule, + GoSelectModule, GoTextAreaModule, GoLoaderModule, GoModalModule, @@ -103,6 +106,7 @@ import { TableActionsDocsComponent } from './components/table-docs/components/ta ModalDocsComponent, ModalTestComponent, OffCanvasDocsComponent, + SelectDocsComponent, ServerIntegrationComponent, TableDocsComponent, TableOverviewComponent, From f204dade21d3e5837135d91264a7c55ebb072f9f Mon Sep 17 00:00:00 2001 From: Matt Wagner Date: Mon, 7 Oct 2019 12:34:57 -0400 Subject: [PATCH 06/98] CHORE: Add Placeholder Binding to GoSelect Some implementations of select boxes require a placeholder to be designated for that select box. With our current version of the GoSelect component, we are not capable of adding a placeholder value. The NgSelect module allows us to pass it a placeholder for the select box. This adds the placeholder option as a binding to the GoSelect component and then leverages that binding when creating an NgSelect instance. I leverged the HTML for Template/Header/Footer[0] example that NgSelect provides in order to best implement this solution. [0] - https://github.com/ng-select/ng-select/blob/master/src/demo/app/examples/template-header-footer-example/template-header-footer-example.component.html --- .../src/lib/components/go-select/go-select.component.html | 3 ++- .../go-lib/src/lib/components/go-select/go-select.component.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.html b/projects/go-lib/src/lib/components/go-select/go-select.component.html index 9c9226709..7a5118c82 100644 --- a/projects/go-lib/src/lib/components/go-select/go-select.component.html +++ b/projects/go-lib/src/lib/components/go-select/go-select.component.html @@ -11,7 +11,8 @@ [bindLabel]="bindLabel" [bindValue]="bindValue" [multiple]="multiple" - [formControl]="control"> + [formControl]="control" + [placeholder]="placeholder"> diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.ts b/projects/go-lib/src/lib/components/go-select/go-select.component.ts index 9c2bc3240..722b8a126 100644 --- a/projects/go-lib/src/lib/components/go-select/go-select.component.ts +++ b/projects/go-lib/src/lib/components/go-select/go-select.component.ts @@ -18,6 +18,7 @@ export class GoSelectComponent implements OnInit { @Input() key: string; @Input() label: string; @Input() multiple: boolean = false; + @Input() placeholder: string; @Input() theme: 'light' | 'dark' = 'light'; ngOnInit(): void { From 8e27f46b82cb95a4b48792416d082c804f4de7db Mon Sep 17 00:00:00 2001 From: Matt Wagner Date: Mon, 7 Oct 2019 12:43:04 -0400 Subject: [PATCH 07/98] Add Placeholder to Test Project --- .../src/app/components/test-page-3/test-page-3.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index 2fe385d79..1cf9c36de 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -104,6 +104,7 @@

bindValue="value" bindLabel="name" [hints]="['Select an option here, whatever you want']" + placeholder="Select Box Placeholder" label="Select Box Here"> From 823a32ea1bd2b9ef7b086b42492784ee4a250f7e Mon Sep 17 00:00:00 2001 From: Matt Wagner Date: Mon, 7 Oct 2019 13:02:10 -0400 Subject: [PATCH 08/98] Add Placeholder to GoSelect Documentation Seeing that are looking to add the Placeholder to the GoSelect box in v1.3.0, we should also release with up to date documentation on the GoSelect box that includes implementing the placeholder. This adds the placeholder documentation to the GoSelect page. --- .../select-docs/select-docs.component.html | 34 +++++++++++++++++++ .../select-docs/select-docs.component.ts | 13 +++++++ 2 files changed, 47 insertions(+) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html index ba1948c4c..102ef2cfe 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html @@ -246,4 +246,38 @@

Code

+ + +

Component Placeholder

+ + +

+ Sometimes we may want to be able to add a placeholder for the select box. We can achieve this through the + @Input() placeholder: string; binding. Setting + placeholder to a string will display that string by default in the + select box. When you select an option in the select box, it will replace the placeholder with the selected item. +

+
+
+

View

+ +
+
+

Code

+ +
+
+ + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts index 4296af931..1b11fa96d 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts @@ -16,6 +16,7 @@ export class SelectDocsComponent implements OnInit { select5: FormControl = new FormControl(''); select6: FormControl = new FormControl(''); select7: FormControl = new FormControl(''); + select8: FormControl = new FormControl(''); hints: Array = ['please select you favorite candy']; @@ -105,6 +106,18 @@ export class SelectDocsComponent implements OnInit { > `; + select8Code: string = ` + + `; + ngOnInit(): void { setTimeout((): void => { this.select5.setErrors([ From 47675c085f8981598bbcfcd93e7f5211ff3c1870 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Mon, 9 Sep 2019 14:49:40 -0400 Subject: [PATCH 09/98] Adds ability to brand selected accordion and side navigation item colors --- .../go-accordion-panel.component.html | 1 + .../go-accordion-panel.component.spec.ts | 4 ++- .../go-accordion-panel.component.ts | 14 +++++++-- .../go-accordion/go-accordion.module.ts | 4 +++ .../go-nav-item/go-nav-item.component.html | 2 +- .../go-nav-item/go-nav-item.component.scss | 29 ++++++++----------- .../go-nav-item/go-nav-item.component.ts | 16 ++++++++-- .../go-side-nav/go-side-nav.module.ts | 4 +++ .../go-lib/src/lib/go-branding.service.ts | 14 +++++++++ projects/go-lib/src/lib/go-shared.module.ts | 3 ++ projects/go-lib/src/public_api.ts | 3 ++ projects/go-tester/src/app/app.component.ts | 3 ++ 12 files changed, 73 insertions(+), 24 deletions(-) create mode 100644 projects/go-lib/src/lib/go-branding.service.ts diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html index 7a45cbd8c..45e979631 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html @@ -2,6 +2,7 @@ class="go-accordion-panel" [ngClass]="containerClasses" > +
{ let component: GoAccordionPanelComponent; @@ -14,7 +15,8 @@ describe('GoAccordionPanelComponent', () => { imports: [ BrowserAnimationsModule, GoIconModule - ] + ], + providers: [ GoBrandingService ] }) .compileComponents(); })); diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts index 22ca99f91..782810b77 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts @@ -9,6 +9,7 @@ import { } from '@angular/core'; import { accordionAnimation } from '../../animations/accordion.animation'; +import { GoBrandingService } from '../../go-branding.service'; @Component({ selector: 'go-accordion-panel', @@ -18,7 +19,7 @@ import { accordionAnimation } from '../../animations/accordion.animation'; accordionAnimation ] }) -export class GoAccordionPanelComponent implements OnInit, OnChanges { +export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnChanges { _expanded: boolean = false; // Note: Use _expanded in the template containerClasses: object = {}; headerClasses: object = {}; @@ -44,7 +45,11 @@ export class GoAccordionPanelComponent implements OnInit, OnChanges { @Output() toggle: EventEmitter = new EventEmitter(); - constructor() { } + @ViewChild('goAccordionPanelSelected') selectedBinding: ElementRef; + + constructor( + private brandingService: GoBrandingService + ) { } ngOnInit(): void { // NOTE: `title` is deprecated and will be removed in later version @@ -70,4 +75,9 @@ export class GoAccordionPanelComponent implements OnInit, OnChanges { 'go-accordion-panel__header--slim': this.slim === true }; } + + ngAfterContentInit(): void { + this.selectedBinding.nativeElement.style.background = this.brandingService.brandColor; + } + } diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts index d370d302a..c32ec749a 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts @@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common'; import { GoAccordionComponent } from './go-accordion.component'; import { GoAccordionPanelComponent } from './go-accordion-panel.component'; import { GoIconModule } from '../go-icon/go-icon.module'; +import { GoBrandingService } from '../../go-branding.service'; @NgModule({ declarations: [ @@ -17,6 +18,9 @@ import { GoIconModule } from '../go-icon/go-icon.module'; exports: [ GoAccordionComponent, GoAccordionPanelComponent + ], + providers: [ + GoBrandingService ] }) diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html index 542f6f567..c3f907f00 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html @@ -21,6 +21,7 @@ + @@ -31,4 +32,3 @@ {{navItem.routeTitle}} - diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss index f76fa401a..c7fbc5851 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss @@ -6,34 +6,29 @@ align-items: center; display: flex; @include transition(all); + position: relative; &:hover { background: $theme-dark-bg-hover; } } -.go-nav-item__link::before { - background: $base-primary; - border-radius: 0 $global-radius $global-radius 0; - content: " "; - height: 1.5rem; - left: 0; - opacity: 0; - position: absolute; - top: 50%; - transform: translateY(-50%); - width: 4px; - @include transition(all); -} - .go-nav-item__link--active { .go-nav-item__title { font-weight: $weight-regular; } -} -.go-nav-item__link--active::before { - opacity: 1; + .go-nav-item--selected { + background: $base-primary; + border-radius: 0 $global-radius $global-radius 0; + content: " "; + height: 1.5rem; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 4px; + @include transition(all); + } } .go-nav-item__link, diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts index 3102c194f..abfc0459c 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts @@ -1,14 +1,24 @@ -import { Component, Input } from '@angular/core'; +import { AfterContentInit, Component, ElementRef, Input, ViewChild } from '@angular/core'; import { NavItem } from '../nav-item.model'; import { GoSideNavService } from '../go-side-nav/go-side-nav.service'; +import { GoBrandingService } from '../../../go-branding.service'; @Component({ selector: 'go-nav-item', templateUrl: './go-nav-item.component.html', styleUrls: ['./go-nav-item.component.scss'] }) -export class GoNavItemComponent { +export class GoNavItemComponent implements AfterContentInit { @Input() navItem: NavItem; - constructor (public navService: GoSideNavService) { } + @ViewChild('goNavItemSelected') selectedBinding: ElementRef; + + constructor ( + public navService: GoSideNavService, + private brandingService: GoBrandingService + ) { } + + ngAfterContentInit(): void { + this.selectedBinding.nativeElement.style.background = this.brandingService.brandColor; + } } diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts index 3c4ca99d6..859efcccb 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts @@ -7,6 +7,7 @@ import { GoIconModule } from '../go-icon/go-icon.module'; import { GoSideNavComponent } from './go-side-nav/go-side-nav.component'; import { GoNavGroupComponent } from './go-nav-group/go-nav-group.component'; import { GoNavItemComponent } from './go-nav-item/go-nav-item.component'; +import { GoBrandingService } from '../../go-branding.service'; @NgModule({ declarations: [ @@ -23,6 +24,9 @@ import { GoNavItemComponent } from './go-nav-item/go-nav-item.component'; GoSideNavComponent, GoNavGroupComponent, GoNavItemComponent + ], + providers: [ + GoBrandingService ] }) diff --git a/projects/go-lib/src/lib/go-branding.service.ts b/projects/go-lib/src/lib/go-branding.service.ts new file mode 100644 index 000000000..459aa2301 --- /dev/null +++ b/projects/go-lib/src/lib/go-branding.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class GoBrandingService { + brandColor: string; + + constructor() { + this.brandColor = '#65B360'; + } + + public setBrandColor(color: string): void { + this.brandColor = color; + } +} diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index 29d82c700..65c6b50d9 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -24,12 +24,14 @@ import { GoSwitchToggleModule } from './components/go-switch-toggle/go-switch-to import { GoCheckboxModule } from './components/go-checkbox/go-checkbox.module'; import { GoToasterModule } from './components/go-toaster/go-toaster.module'; import { GoDatepickerModule } from './components/go-datepicker/go-datepicker.module'; +import { GoBrandingService } from './go-branding.service'; @NgModule({ imports: [ GoAccordionModule, GoActionSheetModule, GoBadgeModule, + GoBrandingService, GoButtonModule, GoCardModule, GoCheckboxModule, @@ -56,6 +58,7 @@ import { GoDatepickerModule } from './components/go-datepicker/go-datepicker.mod exports: [ GoAccordionModule, GoBadgeModule, + GoBrandingService, GoButtonModule, GoCardModule, GoCheckboxModule, diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index ff4b1dcdc..6aa336e59 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -18,6 +18,9 @@ export * from './lib/components/go-action-sheet/go-action-sheet.module'; export * from './lib/components/go-badge/go-badge.component'; export * from './lib/components/go-badge/go-badge.module'; +// Branding +export * from './lib/go-branding.service'; + // Button export * from './lib/components/go-button/go-button.component'; export * from './lib/components/go-button/go-button.module'; diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index de0fb4b7c..15cd7dc6c 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { + GoBrandingService, GoIconComponent, GoModalService, GoOffCanvasService, @@ -46,6 +47,7 @@ export class AppComponent implements OnInit { ]; constructor( + private goBrandingService: GoBrandingService, private goToasterService: GoToasterService, private goOffCanvasService: GoOffCanvasService, private goSideNavService: GoSideNavService, @@ -53,6 +55,7 @@ export class AppComponent implements OnInit { ) { } ngOnInit(): void { + this.goBrandingService.setBrandColor('#8A4EDE'); } openOffCanvas(): void { From edf5addad8af80f2a47c2245748532bd58fbd1af Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Thu, 26 Sep 2019 15:51:51 -0400 Subject: [PATCH 10/98] update branding color to be observable --- .../go-accordion-panel.component.html | 5 +++- .../go-accordion-panel.component.scss | 24 +++++++------------ .../go-accordion-panel.component.spec.ts | 4 +++- .../go-accordion-panel.component.ts | 17 ++++++------- .../go-accordion.component.spec.ts | 4 ++++ .../go-nav-item/go-nav-item.component.html | 5 +++- .../go-nav-item/go-nav-item.component.ts | 14 ++++++----- .../go-lib/src/lib/go-branding.service.ts | 9 +++---- 8 files changed, 41 insertions(+), 41 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html index 45e979631..dd0ae7494 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html @@ -2,7 +2,10 @@ class="go-accordion-panel" [ngClass]="containerClasses" > - +
{ BrowserAnimationsModule, GoIconModule ], - providers: [ GoBrandingService ] + providers: [ + GoBrandingService + ] }) .compileComponents(); })); diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts index 782810b77..f5133b3d5 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts @@ -2,10 +2,9 @@ import { Component, EventEmitter, Input, + OnChanges, OnInit, Output, - ViewEncapsulation, - OnChanges } from '@angular/core'; import { accordionAnimation } from '../../animations/accordion.animation'; @@ -19,10 +18,11 @@ import { GoBrandingService } from '../../go-branding.service'; accordionAnimation ] }) -export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnChanges { +export class GoAccordionPanelComponent implements OnInit, OnChanges { _expanded: boolean = false; // Note: Use _expanded in the template containerClasses: object = {}; headerClasses: object = {}; + brandColor: string; @Input() borderless: boolean; @Input() heading: string; @@ -45,8 +45,6 @@ export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnCh @Output() toggle: EventEmitter = new EventEmitter(); - @ViewChild('goAccordionPanelSelected') selectedBinding: ElementRef; - constructor( private brandingService: GoBrandingService ) { } @@ -54,6 +52,10 @@ export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnCh ngOnInit(): void { // NOTE: `title` is deprecated and will be removed in later version this.heading = this.heading || this.title; + + this.brandingService.brandColor.subscribe((value: string) => { + this.brandColor = value; + }); } ngOnChanges(): void { @@ -75,9 +77,4 @@ export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnCh 'go-accordion-panel__header--slim': this.slim === true }; } - - ngAfterContentInit(): void { - this.selectedBinding.nativeElement.style.background = this.brandingService.brandColor; - } - } diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts index 3ec72d82a..c0ce7c0e5 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts @@ -5,6 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { GoAccordionComponent } from './go-accordion.component'; import { GoIconModule } from '../go-icon/go-icon.module'; import { GoAccordionPanelComponent } from './go-accordion-panel.component'; +import { GoBrandingService } from '../../go-branding.service'; @Component({ selector: 'go-test', @@ -37,6 +38,9 @@ describe('AccordionComponent', () => { imports: [ BrowserAnimationsModule, GoIconModule + ], + providers: [ + GoBrandingService ] }) .compileComponents(); diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html index c3f907f00..c630f75d0 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html @@ -21,7 +21,10 @@ - + diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts index abfc0459c..4f01a06b7 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, Component, ElementRef, Input, ViewChild } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { NavItem } from '../nav-item.model'; import { GoSideNavService } from '../go-side-nav/go-side-nav.service'; import { GoBrandingService } from '../../../go-branding.service'; @@ -8,17 +8,19 @@ import { GoBrandingService } from '../../../go-branding.service'; templateUrl: './go-nav-item.component.html', styleUrls: ['./go-nav-item.component.scss'] }) -export class GoNavItemComponent implements AfterContentInit { - @Input() navItem: NavItem; +export class GoNavItemComponent implements OnInit { + brandColor: string; - @ViewChild('goNavItemSelected') selectedBinding: ElementRef; + @Input() navItem: NavItem; constructor ( public navService: GoSideNavService, private brandingService: GoBrandingService ) { } - ngAfterContentInit(): void { - this.selectedBinding.nativeElement.style.background = this.brandingService.brandColor; + ngOnInit(): void { + this.brandingService.brandColor.subscribe((value: string) => { + this.brandColor = value; + }); } } diff --git a/projects/go-lib/src/lib/go-branding.service.ts b/projects/go-lib/src/lib/go-branding.service.ts index 459aa2301..c7885ff04 100644 --- a/projects/go-lib/src/lib/go-branding.service.ts +++ b/projects/go-lib/src/lib/go-branding.service.ts @@ -1,14 +1,11 @@ import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; @Injectable() export class GoBrandingService { - brandColor: string; - - constructor() { - this.brandColor = '#65B360'; - } + brandColor: BehaviorSubject = new BehaviorSubject('#65B360'); public setBrandColor(color: string): void { - this.brandColor = color; + this.brandColor.next(color); } } From 504f413a535598c1fb582392c9460264058ee21f Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Mon, 7 Oct 2019 11:40:24 -0400 Subject: [PATCH 11/98] update gobranding service to goconfig service --- .../go-accordion-panel.component.spec.ts | 4 ++-- .../go-accordion/go-accordion-panel.component.ts | 14 +++++++++----- .../go-accordion/go-accordion.component.spec.ts | 4 ++-- .../go-accordion/go-accordion.module.ts | 4 ++-- .../go-nav-item/go-nav-item.component.scss | 1 - .../go-nav-item/go-nav-item.component.ts | 14 +++++++++----- .../components/go-side-nav/go-side-nav.module.ts | 4 ++-- projects/go-lib/src/lib/go-branding.service.ts | 11 ----------- projects/go-lib/src/lib/go-config.model.ts | 3 +++ projects/go-lib/src/lib/go-config.service.ts | 16 ++++++++++++++++ projects/go-lib/src/lib/go-shared.module.ts | 6 +++--- projects/go-lib/src/public_api.ts | 2 +- projects/go-tester/src/app/app.component.ts | 6 +++--- 13 files changed, 52 insertions(+), 37 deletions(-) delete mode 100644 projects/go-lib/src/lib/go-branding.service.ts create mode 100644 projects/go-lib/src/lib/go-config.model.ts create mode 100644 projects/go-lib/src/lib/go-config.service.ts diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.spec.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.spec.ts index 3a088d9c8..b10ee9389 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.spec.ts @@ -3,7 +3,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { GoAccordionPanelComponent } from './go-accordion-panel.component'; import { GoIconModule } from '../go-icon/go-icon.module'; -import { GoBrandingService } from '../../go-branding.service'; +import { GoConfigService } from '../../go-config.service'; describe('GoAccordionPanelComponent', () => { let component: GoAccordionPanelComponent; @@ -17,7 +17,7 @@ describe('GoAccordionPanelComponent', () => { GoIconModule ], providers: [ - GoBrandingService + GoConfigService ] }) .compileComponents(); diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts index f5133b3d5..d90ff4fe2 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts @@ -8,7 +8,9 @@ import { } from '@angular/core'; import { accordionAnimation } from '../../animations/accordion.animation'; -import { GoBrandingService } from '../../go-branding.service'; +import { GoConfigService } from '../../go-config.service'; +import { distinctUntilKeyChanged } from 'rxjs/operators'; +import { ConfigInterface } from '../../go-config.model'; @Component({ selector: 'go-accordion-panel', @@ -46,16 +48,18 @@ export class GoAccordionPanelComponent implements OnInit, OnChanges { @Output() toggle: EventEmitter = new EventEmitter(); constructor( - private brandingService: GoBrandingService + private configService: GoConfigService ) { } ngOnInit(): void { // NOTE: `title` is deprecated and will be removed in later version this.heading = this.heading || this.title; - this.brandingService.brandColor.subscribe((value: string) => { - this.brandColor = value; - }); + this.configService.config + .pipe(distinctUntilKeyChanged('brandColor')) + .subscribe((value: ConfigInterface) => { + this.brandColor = value.brandColor; + }); } ngOnChanges(): void { diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts index c0ce7c0e5..34a3b19fc 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.spec.ts @@ -5,7 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { GoAccordionComponent } from './go-accordion.component'; import { GoIconModule } from '../go-icon/go-icon.module'; import { GoAccordionPanelComponent } from './go-accordion-panel.component'; -import { GoBrandingService } from '../../go-branding.service'; +import { GoConfigService } from '../../go-config.service'; @Component({ selector: 'go-test', @@ -40,7 +40,7 @@ describe('AccordionComponent', () => { GoIconModule ], providers: [ - GoBrandingService + GoConfigService ] }) .compileComponents(); diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts index c32ec749a..3d09a26a6 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion.module.ts @@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common'; import { GoAccordionComponent } from './go-accordion.component'; import { GoAccordionPanelComponent } from './go-accordion-panel.component'; import { GoIconModule } from '../go-icon/go-icon.module'; -import { GoBrandingService } from '../../go-branding.service'; +import { GoConfigService } from '../../go-config.service'; @NgModule({ declarations: [ @@ -20,7 +20,7 @@ import { GoBrandingService } from '../../go-branding.service'; GoAccordionPanelComponent ], providers: [ - GoBrandingService + GoConfigService ] }) diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss index c7fbc5851..fb05f64ab 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss @@ -19,7 +19,6 @@ } .go-nav-item--selected { - background: $base-primary; border-radius: 0 $global-radius $global-radius 0; content: " "; height: 1.5rem; diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts index 4f01a06b7..4631d31b4 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts @@ -1,7 +1,9 @@ import { Component, Input, OnInit } from '@angular/core'; import { NavItem } from '../nav-item.model'; import { GoSideNavService } from '../go-side-nav/go-side-nav.service'; -import { GoBrandingService } from '../../../go-branding.service'; +import { GoConfigService } from '../../../go-config.service'; +import { ConfigInterface } from '../../../go-config.model'; +import { distinctUntilKeyChanged } from 'rxjs/operators'; @Component({ selector: 'go-nav-item', @@ -15,12 +17,14 @@ export class GoNavItemComponent implements OnInit { constructor ( public navService: GoSideNavService, - private brandingService: GoBrandingService + private configService: GoConfigService ) { } ngOnInit(): void { - this.brandingService.brandColor.subscribe((value: string) => { - this.brandColor = value; - }); + this.configService.config + .pipe(distinctUntilKeyChanged('brandColor')) + .subscribe((value: ConfigInterface) => { + this.brandColor = value.brandColor; + }); } } diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts index 859efcccb..6f8520b7f 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts @@ -7,7 +7,7 @@ import { GoIconModule } from '../go-icon/go-icon.module'; import { GoSideNavComponent } from './go-side-nav/go-side-nav.component'; import { GoNavGroupComponent } from './go-nav-group/go-nav-group.component'; import { GoNavItemComponent } from './go-nav-item/go-nav-item.component'; -import { GoBrandingService } from '../../go-branding.service'; +import { GoConfigService } from '../../go-config.service'; @NgModule({ declarations: [ @@ -26,7 +26,7 @@ import { GoBrandingService } from '../../go-branding.service'; GoNavItemComponent ], providers: [ - GoBrandingService + GoConfigService ] }) diff --git a/projects/go-lib/src/lib/go-branding.service.ts b/projects/go-lib/src/lib/go-branding.service.ts deleted file mode 100644 index c7885ff04..000000000 --- a/projects/go-lib/src/lib/go-branding.service.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Injectable } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; - -@Injectable() -export class GoBrandingService { - brandColor: BehaviorSubject = new BehaviorSubject('#65B360'); - - public setBrandColor(color: string): void { - this.brandColor.next(color); - } -} diff --git a/projects/go-lib/src/lib/go-config.model.ts b/projects/go-lib/src/lib/go-config.model.ts new file mode 100644 index 000000000..85d42fa67 --- /dev/null +++ b/projects/go-lib/src/lib/go-config.model.ts @@ -0,0 +1,3 @@ +export interface ConfigInterface { + brandColor: string; +} diff --git a/projects/go-lib/src/lib/go-config.service.ts b/projects/go-lib/src/lib/go-config.service.ts new file mode 100644 index 000000000..3284825fa --- /dev/null +++ b/projects/go-lib/src/lib/go-config.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { ConfigInterface } from './go-config.model'; + +@Injectable() +export class GoConfigService { + config: BehaviorSubject = new BehaviorSubject ({ + brandColor: '#65B360' + }); + + public setBrandColor(color: string): void { + const config: ConfigInterface = this.config.getValue(); + config.brandColor = color; + this.config.next(config); + } +} diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index 65c6b50d9..ac4b2c47e 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -24,14 +24,14 @@ import { GoSwitchToggleModule } from './components/go-switch-toggle/go-switch-to import { GoCheckboxModule } from './components/go-checkbox/go-checkbox.module'; import { GoToasterModule } from './components/go-toaster/go-toaster.module'; import { GoDatepickerModule } from './components/go-datepicker/go-datepicker.module'; -import { GoBrandingService } from './go-branding.service'; +import { GoConfigService } from './go-config.service'; @NgModule({ imports: [ GoAccordionModule, GoActionSheetModule, GoBadgeModule, - GoBrandingService, + GoConfigService, GoButtonModule, GoCardModule, GoCheckboxModule, @@ -58,7 +58,7 @@ import { GoBrandingService } from './go-branding.service'; exports: [ GoAccordionModule, GoBadgeModule, - GoBrandingService, + GoConfigService, GoButtonModule, GoCardModule, GoCheckboxModule, diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index 6aa336e59..a860c400e 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -19,7 +19,7 @@ export * from './lib/components/go-badge/go-badge.component'; export * from './lib/components/go-badge/go-badge.module'; // Branding -export * from './lib/go-branding.service'; +export * from './lib/go-config.service'; // Button export * from './lib/components/go-button/go-button.component'; diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index 15cd7dc6c..30ef40a53 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { - GoBrandingService, + GoConfigService, GoIconComponent, GoModalService, GoOffCanvasService, @@ -47,7 +47,7 @@ export class AppComponent implements OnInit { ]; constructor( - private goBrandingService: GoBrandingService, + private goConfigService: GoConfigService, private goToasterService: GoToasterService, private goOffCanvasService: GoOffCanvasService, private goSideNavService: GoSideNavService, @@ -55,7 +55,7 @@ export class AppComponent implements OnInit { ) { } ngOnInit(): void { - this.goBrandingService.setBrandColor('#8A4EDE'); + this.goConfigService.setBrandColor('#8A4EDE'); } openOffCanvas(): void { From f0d6eeae684b745887ce59b831a55b63d699c4c7 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Mon, 7 Oct 2019 12:54:12 -0400 Subject: [PATCH 12/98] add documentation --- .../go-accordion-panel.component.ts | 5 +- .../go-nav-item/go-nav-item.component.ts | 5 +- projects/go-lib/src/lib/go-config.model.ts | 2 +- projects/go-lib/src/lib/go-config.service.ts | 6 +-- .../go-style-guide/src/app/app.component.ts | 1 + .../configuration-docs.component.html | 47 +++++++++++++++++++ .../configuration-docs.component.ts | 41 ++++++++++++++++ .../ui-kit/routes/ui-kit-routing.module.ts | 2 + .../src/app/features/ui-kit/ui-kit.module.ts | 6 ++- 9 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts index d90ff4fe2..edf9e243f 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts @@ -10,7 +10,7 @@ import { import { accordionAnimation } from '../../animations/accordion.animation'; import { GoConfigService } from '../../go-config.service'; import { distinctUntilKeyChanged } from 'rxjs/operators'; -import { ConfigInterface } from '../../go-config.model'; +import { GoConfigInterface } from '../../go-config.model'; @Component({ selector: 'go-accordion-panel', @@ -56,8 +56,7 @@ export class GoAccordionPanelComponent implements OnInit, OnChanges { this.heading = this.heading || this.title; this.configService.config - .pipe(distinctUntilKeyChanged('brandColor')) - .subscribe((value: ConfigInterface) => { + .subscribe((value: GoConfigInterface) => { this.brandColor = value.brandColor; }); } diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts index 4631d31b4..afa8ac05c 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts @@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { NavItem } from '../nav-item.model'; import { GoSideNavService } from '../go-side-nav/go-side-nav.service'; import { GoConfigService } from '../../../go-config.service'; -import { ConfigInterface } from '../../../go-config.model'; +import { GoConfigInterface } from '../../../go-config.model'; import { distinctUntilKeyChanged } from 'rxjs/operators'; @Component({ @@ -22,8 +22,7 @@ export class GoNavItemComponent implements OnInit { ngOnInit(): void { this.configService.config - .pipe(distinctUntilKeyChanged('brandColor')) - .subscribe((value: ConfigInterface) => { + .subscribe((value: GoConfigInterface) => { this.brandColor = value.brandColor; }); } diff --git a/projects/go-lib/src/lib/go-config.model.ts b/projects/go-lib/src/lib/go-config.model.ts index 85d42fa67..05de7d042 100644 --- a/projects/go-lib/src/lib/go-config.model.ts +++ b/projects/go-lib/src/lib/go-config.model.ts @@ -1,3 +1,3 @@ -export interface ConfigInterface { +export interface GoConfigInterface { brandColor: string; } diff --git a/projects/go-lib/src/lib/go-config.service.ts b/projects/go-lib/src/lib/go-config.service.ts index 3284825fa..ef81382c8 100644 --- a/projects/go-lib/src/lib/go-config.service.ts +++ b/projects/go-lib/src/lib/go-config.service.ts @@ -1,15 +1,15 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; -import { ConfigInterface } from './go-config.model'; +import { GoConfigInterface } from './go-config.model'; @Injectable() export class GoConfigService { - config: BehaviorSubject = new BehaviorSubject ({ + config: BehaviorSubject = new BehaviorSubject ({ brandColor: '#65B360' }); public setBrandColor(color: string): void { - const config: ConfigInterface = this.config.getValue(); + const config: GoConfigInterface = this.config.getValue(); config.brandColor = color; this.config.next(config); } diff --git a/projects/go-style-guide/src/app/app.component.ts b/projects/go-style-guide/src/app/app.component.ts index 78d587286..43dd31996 100644 --- a/projects/go-style-guide/src/app/app.component.ts +++ b/projects/go-style-guide/src/app/app.component.ts @@ -27,6 +27,7 @@ export class AppComponent { { route: 'ui-kit/badge', routeTitle: 'Badge' }, { route: 'ui-kit/button', routeTitle: 'Button' }, { route: 'ui-kit/card', routeTitle: 'Card' }, + { route: 'ui-kit/configuration', routeTitle: 'Configuration' }, { route: 'ui-kit/copy', routeTitle: 'Copy' }, { route: 'ui-kit/forms', routeTitle: 'Forms' }, { route: 'ui-kit/layout', routeTitle: 'Layout' }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html new file mode 100644 index 000000000..9e50bb621 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html @@ -0,0 +1,47 @@ +
+

{{ pageTitle }}

+
+ +
+ + +

Branding

+ + +

+ The GoConfigurationService can be used to brand a few select pieces of our design system. Currently + the only things that can be branded are the active indicators on the sidenav and accordions. The + public setBrandColor(color: string): void method can be used + to update the branding color by passing in either a hex number or the name of the color that we want + to update the design system current brand to. +

+ +
+
+
+ + +
+ +
+ + Update Branding Color + +
+
+ +
+ + + + + +
+
+ + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts new file mode 100644 index 000000000..5033f5fe8 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts @@ -0,0 +1,41 @@ +import { Component, OnInit } from '@angular/core'; +import { GoConfigService } from 'projects/go-lib/src/public_api'; +import { FormControl } from '@angular/forms'; + +@Component({ + selector: 'app-configuration-docs', + templateUrl: './configuration-docs.component.html' +}) +export class ConfigurationDocsComponent implements OnInit { + pageTitle: string = 'Configuration'; + formControl: FormControl; + + updateColorExample: string = ` + updateColor(): void { + this.goConfigService.setBrandColor(this.color); + } + `; + + inputExample: string = ` + + + `; + + buttonExample: string = ` + + Update Branding Color + + `; + + constructor(private goConfigService: GoConfigService) { } + + ngOnInit(): void { + this.formControl = new FormControl(this.goConfigService.config.getValue().brandColor); + } + + updateColor(): void { + this.goConfigService.setBrandColor(this.formControl.value); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index c6bb23a1c..e4c0eab78 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -33,6 +33,7 @@ import { SelectDocsComponent } from '../components/form-docs/components/select-d import { TextAreaDocsComponent } from '../components/form-docs/components/text-area-docs/text-area-docs.component'; import { TableSelectionComponent } from '../components/table-docs/components/table-selection/table-selection.component'; import { TableActionsDocsComponent } from '../components/table-docs/components/table-actions-docs/table-actions-docs.component'; +import { ConfigurationDocsComponent } from '../components/configuration-docs/configuration-docs.component'; const routes: Routes = [ { path: 'ui-kit', component: UiKitComponent }, @@ -41,6 +42,7 @@ const routes: Routes = [ { path: 'ui-kit/badge', component: BadgeDocsComponent }, { path: 'ui-kit/button', component: ButtonDocsComponent }, { path: 'ui-kit/card', component: CardDocsComponent }, + { path: 'ui-kit/configuration', component: ConfigurationDocsComponent }, { path: 'ui-kit/copy', component: CopyDocsComponent }, { path: 'ui-kit/forms', component: FormDocsComponent, children: [ { path: '', component: FormsOverviewComponent }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 10e80ed65..70d1e80d2 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -9,6 +9,7 @@ import { GoBadgeModule, GoButtonModule, GoCardModule, + GoConfigService, GoCopyModule, GoDatepickerModule, GoIconButtonModule, @@ -35,6 +36,7 @@ import { AccordionPanelDocsComponent } from './components/accordion-panel-docs/a import { BadgeDocsComponent } from './components/badge-docs/badge-docs.coponent'; import { ButtonDocsComponent } from './components/button-docs/button-docs.component'; import { CardDocsComponent } from './components/card-docs/card-docs.component'; +import { ConfigurationDocsComponent } from './components/configuration-docs/configuration-docs.component'; import { CopyDocsComponent } from './components/copy-docs/copy-docs.component'; import { DatepickerDocsComponent } from './components/form-docs/components/datepicker-docs/datepicker-docs.component'; import { FormControlDocsComponent } from './components/form-docs/components/form-control-docs/form-control-docs.component'; @@ -44,6 +46,7 @@ import { IconDocsComponent } from './components/icon-docs/icon-docs.component'; import { InputDocsComponent } from './components/form-docs/components/input-docs/input-docs.component'; import { ModalDocsComponent } from './components/modal-docs/modal-docs.component'; import { ModalTestComponent } from './components/modal-test/modal-test.component'; +import { SelectDocsComponent } from './components/form-docs/components/select-docs/select-docs.component'; import { ServerIntegrationComponent } from './components/table-docs/components/server-integration/server-integration.component'; import { TableDocsComponent } from './components/table-docs/table-docs.component'; import { TableOverviewComponent } from './components/table-docs/components/table-overview/table-overview.component'; @@ -64,7 +67,6 @@ import { LayoutExampleComponent } from './components/layout-docs/components/layo import { TextAreaDocsComponent } from './components/form-docs/components/text-area-docs/text-area-docs.component'; import { TableSelectionComponent } from './components/table-docs/components/table-selection/table-selection.component'; import { TableActionsDocsComponent } from './components/table-docs/components/table-actions-docs/table-actions-docs.component'; -import { SelectDocsComponent } from './components/form-docs/components/select-docs/select-docs.component'; @NgModule({ imports: [ @@ -96,6 +98,7 @@ import { SelectDocsComponent } from './components/form-docs/components/select-do BadgeDocsComponent, ButtonDocsComponent, CardDocsComponent, + ConfigurationDocsComponent, CopyDocsComponent, FormControlDocsComponent, DatepickerDocsComponent, @@ -131,6 +134,7 @@ import { SelectDocsComponent } from './components/form-docs/components/select-do ModalTestComponent ], providers: [ + GoConfigService, GoModalService, GoOffCanvasService, GoToasterService From fb62d74e0485b273b85fd0e67741aa79efa94600 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Mon, 7 Oct 2019 13:05:12 -0400 Subject: [PATCH 13/98] fix build --- projects/go-lib/src/lib/go-shared.module.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index ac4b2c47e..29d82c700 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -24,14 +24,12 @@ import { GoSwitchToggleModule } from './components/go-switch-toggle/go-switch-to import { GoCheckboxModule } from './components/go-checkbox/go-checkbox.module'; import { GoToasterModule } from './components/go-toaster/go-toaster.module'; import { GoDatepickerModule } from './components/go-datepicker/go-datepicker.module'; -import { GoConfigService } from './go-config.service'; @NgModule({ imports: [ GoAccordionModule, GoActionSheetModule, GoBadgeModule, - GoConfigService, GoButtonModule, GoCardModule, GoCheckboxModule, @@ -58,7 +56,6 @@ import { GoConfigService } from './go-config.service'; exports: [ GoAccordionModule, GoBadgeModule, - GoConfigService, GoButtonModule, GoCardModule, GoCheckboxModule, From b5e8d9c6b59c38ea3faa5fc1fbd9e51be064e385 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 8 Oct 2019 09:27:07 -0400 Subject: [PATCH 14/98] Updated contribution for dev branching --- CONTRIBUTING.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f39176378..af34bdd17 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,13 +4,6 @@ _**Note:** The guide for contributing to this repo is based on the [contribution ## Code of Conduct Please read and follow our [Code of conduct](https://github.com/mobi/goponents/blob/master/CODE_OF_CONDUCT.md). -## Got a question, problem, or feedback? -Feel free to open up [an issue](https://github.com/mobi/goponents/issues/new/choose) using the appropriate template. - -When any sort of issue is created, depending on the impact or urgency of the issue, one of our [contributors](https://github.com/mobi/goponents/graphs/contributors) will respond as quickly as appropriate on the issue itself. We will try to give a timeline and release schedule for any request that is made. - -We would also welcome anyone to open up a [pull request]() for a bug or issue experienced in order to expedite the process. - ## Feature requests You can request a new feature by submitting an issue to our [GitHub Repository](https://github.com/mobi/goponents/issues). If you would like to _implement_ a new feature, please submit an issue with a proposal for your work first. @@ -48,13 +41,19 @@ Before you submit your pull request (PR) consider the following guidelines: ```bash git push origin my-branch-name ``` -9. In GitHub, send a pull request to `goponents:master`. +9. In GitHub, send a pull request to `goponents:dev`. - If we suggest changes then: 1. Make the required updates. 2. Re-run the test suite to ensure tests are still passing. 3. Rebase your branch and force push to your GitHub repository (this will update your Pull Request): ``` - git rebase master -i + git rebase dev -i git push -f ``` +## Got a question, problem, or feedback? +Feel free to open up [an issue](https://github.com/mobi/goponents/issues/new/choose) using the appropriate template. + +When any sort of issue is created, depending on the impact or urgency of the issue, one of our [contributors](https://github.com/mobi/goponents/graphs/contributors) will respond as quickly as appropriate on the issue itself. We will try to give a timeline and release schedule for any request that is made. + +We would also welcome anyone to open up a [pull request]() for a bug or issue experienced in order to expedite the process. \ No newline at end of file From e15fbe20b5d73a5af7ac7c75607d2d5a052de343 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 8 Oct 2019 10:32:17 -0400 Subject: [PATCH 15/98] Updated contributing and pr template --- CONTRIBUTING.md | 19 ++++++++++++------- PULL_REQUEST_TEMPLATE | 6 ++++++ 2 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 PULL_REQUEST_TEMPLATE diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index af34bdd17..366c91602 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,11 +12,15 @@ Our team will first make sure of the following: 2. Where it fits into our current road map. 3. What design resources and support will be needed before the feature work can begin. -Please consider what kind of change it is: +## Working Issues +Before working on an issue, you must claim it. To do so, simply comment on the issue stating that you're looking into it. +Once claimed, a contributor will modify the issue and apply the appropriate labels and milestones. -For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed. This will also allow us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project. +### What issues can be worked? -**Small Features** can be crafted and directly submitted as a Pull Request so long as they have the appropriate design support. +Any issue that does not have the `Needs Triaged` milestone can be worked. + +Issues labeled as `bugs` take priority over general a `chore` or `feature`. ## Submitting a pull request (PR) Before you submit your pull request (PR) consider the following guidelines: @@ -42,10 +46,11 @@ Before you submit your pull request (PR) consider the following guidelines: git push origin my-branch-name ``` 9. In GitHub, send a pull request to `goponents:dev`. - - If we suggest changes then: - 1. Make the required updates. - 2. Re-run the test suite to ensure tests are still passing. - 3. Rebase your branch and force push to your GitHub repository (this will update your Pull Request): + - Please format the description of your PR with our [pull request template](https://github.com/mobi/goponents/blob/master/PULL_REQUEST_TEMPLATE) + - If we suggest changes then: + 1. Make the required updates. + 2. Re-run the test suite to ensure tests are still passing. + 3. Rebase your branch and force push to your GitHub repository (this will update your Pull Request): ``` git rebase dev -i git push -f diff --git a/PULL_REQUEST_TEMPLATE b/PULL_REQUEST_TEMPLATE new file mode 100644 index 000000000..ec0b9f0a8 --- /dev/null +++ b/PULL_REQUEST_TEMPLATE @@ -0,0 +1,6 @@ +## Why do we need this? + +## How does this solve that? + +## Additional Info +Fixes (issue) From 99168f1b440eb4bcf0bb61bddb09c49e6898601d Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 8 Oct 2019 12:00:55 -0400 Subject: [PATCH 16/98] add distinctuntilkeychanged to brand color subscriptions --- .../components/go-accordion/go-accordion-panel.component.ts | 1 + .../go-side-nav/go-nav-item/go-nav-item.component.ts | 1 + projects/go-lib/src/lib/go-config.service.ts | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts index edf9e243f..a9e26f087 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts @@ -56,6 +56,7 @@ export class GoAccordionPanelComponent implements OnInit, OnChanges { this.heading = this.heading || this.title; this.configService.config + .pipe(distinctUntilKeyChanged('brandColor')) .subscribe((value: GoConfigInterface) => { this.brandColor = value.brandColor; }); diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts index afa8ac05c..4d4cbe13a 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts @@ -22,6 +22,7 @@ export class GoNavItemComponent implements OnInit { ngOnInit(): void { this.configService.config + .pipe(distinctUntilKeyChanged('brandColor')) .subscribe((value: GoConfigInterface) => { this.brandColor = value.brandColor; }); diff --git a/projects/go-lib/src/lib/go-config.service.ts b/projects/go-lib/src/lib/go-config.service.ts index ef81382c8..7a85f558d 100644 --- a/projects/go-lib/src/lib/go-config.service.ts +++ b/projects/go-lib/src/lib/go-config.service.ts @@ -9,7 +9,8 @@ export class GoConfigService { }); public setBrandColor(color: string): void { - const config: GoConfigInterface = this.config.getValue(); + // we have to copy the config here or it won't regester a change in components + const config: GoConfigInterface = Object.assign({}, this.config.getValue()); config.brandColor = color; this.config.next(config); } From dae21eb37273519d3d0feb9c3aec7b03e13a0e97 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 8 Oct 2019 12:02:57 -0400 Subject: [PATCH 17/98] export goConfigInterface in public api --- projects/go-lib/src/public_api.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index a860c400e..cfb1a6ec9 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -18,9 +18,6 @@ export * from './lib/components/go-action-sheet/go-action-sheet.module'; export * from './lib/components/go-badge/go-badge.component'; export * from './lib/components/go-badge/go-badge.module'; -// Branding -export * from './lib/go-config.service'; - // Button export * from './lib/components/go-button/go-button.component'; export * from './lib/components/go-button/go-button.module'; @@ -34,6 +31,10 @@ export * from './lib/components/go-checkbox/go-checkbox.component'; export * from './lib/components/go-checkbox/go-checkbox.module'; export * from './lib/components/go-checkbox/go-checkbox-group.component'; +// Configuration +export * from './lib/go-config.service'; +export * from './lib/go-config.model'; + // Copy export * from './lib/components/go-copy/go-copy.component'; export * from './lib/components/go-copy/go-copy.module'; From c0a2d1b3f6cff7337805c59c6426407bfe384996 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Fri, 27 Sep 2019 11:05:49 -0400 Subject: [PATCH 18/98] Ability to choose which columns to sort by in table Currently we have the ability to either have every column on a table sortable or none of them. There are certain cases where we want to be able to just sort by a couple columns on a table. This provides a way for an implementor to decide which columns can be sortable on a table or which columns they want to not be sortable. --- .../go-table/go-table-column.component.ts | 1 + .../components/go-table/go-table.component.html | 5 +++-- .../components/go-table/go-table.component.scss | 13 ++++++++----- .../components/go-table/go-table.component.ts | 16 ++++++++++++---- .../test-page-1/test-page-1.component.html | 8 ++++---- .../test-page-1/test-page-1.component.ts | 3 ++- 6 files changed, 30 insertions(+), 16 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts b/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts index 3faad70ad..07e5815a4 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts +++ b/projects/go-lib/src/lib/components/go-table/go-table-column.component.ts @@ -9,6 +9,7 @@ export class GoTableColumnComponent { @Input() field: string; @Input() title: string; @Input() width: number; + @Input() sortable?: boolean; @ContentChild('goTableCell') goTableCell: TemplateRef; @ContentChild('goTableHead') goTableHead: TemplateRef; diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.html b/projects/go-lib/src/lib/components/go-table/go-table.component.html index c8c0e3c49..683ffe1a8 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.html +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.html @@ -10,7 +10,7 @@
{{ tableTitle *ngIf="hasData(); else noDataTable"> - @@ -18,7 +18,8 @@
{{ tableTitle + (click)="col.sortable && toggleSort(col.field)" + [ngClass]="{'go-table__head--sortable': col.sortable}">
{{ col.title || col.field }} diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.scss b/projects/go-lib/src/lib/components/go-table/go-table.component.scss index 38de2f8d4..eb2b2f2cf 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.scss +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.scss @@ -60,7 +60,6 @@ @include transition(background); color: $theme-light-color; - cursor: pointer; font-size: .75rem; font-weight: bold; letter-spacing: 1pt; @@ -70,10 +69,6 @@ text-transform: uppercase; white-space: nowrap; - &:hover { - background: $theme-light-app-bg; - } - &:first-of-type { border-top-left-radius: $global-radius; } @@ -83,6 +78,14 @@ } } +.go-table__head--sortable { + cursor: pointer; + + &:hover { + background: $theme-light-app-bg; + } +} + .go-table__head-content { display: flex; line-height: 1; diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.ts b/projects/go-lib/src/lib/components/go-table/go-table.component.ts index e126ddee0..9ea5fa559 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.ts +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.ts @@ -1,4 +1,5 @@ import { + AfterContentInit, Component, ContentChildren, ElementRef, @@ -31,7 +32,7 @@ import { fadeTemplateAnimation } from '../../animations/fade.animation'; templateUrl: './go-table.component.html', styleUrls: ['./go-table.component.scss'] }) -export class GoTableComponent implements OnInit, OnChanges { +export class GoTableComponent implements AfterContentInit, OnInit, OnChanges { @Input() loadingData: boolean = false; @Input() showTableActions: boolean = false; @@ -71,6 +72,14 @@ export class GoTableComponent implements OnInit, OnChanges { this.renderTable(); } + ngAfterContentInit(): void { + this.columns.forEach((column: GoTableColumnComponent) => { + if (column.sortable === undefined) { + column.sortable = this.localTableConfig.sortable; + } + }); + } + renderTable(): void { if (this.tableConfig) { this.localTableConfig = JSON.parse(JSON.stringify(this.tableConfig)); @@ -103,14 +112,13 @@ export class GoTableComponent implements OnInit, OnChanges { } toggleSort(columnField: string): void { - const { sortable, sortConfig, tableData }: + const { sortConfig, tableData }: { - sortable: boolean, sortConfig?: GoTableSortConfig, tableData: any[] } = this.localTableConfig; - if (tableData && sortable) { + if (tableData) { if (sortConfig && sortConfig.column === columnField) { this.localTableConfig.sortConfig.direction = this.toggleSortDir(sortConfig.direction); } else { diff --git a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html index 42e802989..ff2a75b7b 100644 --- a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html +++ b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html @@ -49,10 +49,10 @@ Selection State - - - + + + -
\ No newline at end of file + diff --git a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts index 6c700dc16..31fe6aaa1 100644 --- a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts +++ b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts @@ -33,7 +33,8 @@ export class TestPage1Component implements OnInit { selectable: true, selectBy: 'id', tableData: data.results, - totalCount: data.totalCount + totalCount: data.totalCount, + sortable: false }); this.tableLoading = false; }); From 1dc287c03bbf3dc88174b55600a97e4504c0b517 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 8 Oct 2019 13:47:56 -0400 Subject: [PATCH 19/98] add tests for sorting by column --- .../go-table/go-table.component.html | 4 +-- .../go-table/go-table.component.spec.ts | 36 ++++++++++++++++--- .../components/go-table/go-table.component.ts | 20 ++++------- 3 files changed, 41 insertions(+), 19 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.html b/projects/go-lib/src/lib/components/go-table/go-table.component.html index 683ffe1a8..93bce0f96 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.html +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.html @@ -18,8 +18,8 @@
{{ tableTitle + (click)="toggleSort(col.sortable, col.field)" + [ngClass]="{ 'go-table__head--sortable': col.sortable !== undefined ? col.sortable : localTableConfig.sortable }">
{{ col.title || col.field }} diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts b/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts index 1b7fd7e71..034509f15 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts @@ -9,6 +9,10 @@ import { GoTablePageConfig } from './go-table-paging.model'; describe('GoTableComponent', () => { let component: GoTableComponent; let fixture: ComponentFixture; + const tableConfig: GoTableConfig = new GoTableConfig({ + pageable: true, + tableData: [] + }); beforeEach(async(() => { TestBed.configureTestingModule({ @@ -24,10 +28,8 @@ describe('GoTableComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(GoTableComponent); component = fixture.componentInstance; - component.tableConfig = new GoTableConfig({ - pageable: true, - tableData: [] - }); + component.tableConfig = tableConfig; + fixture.detectChanges(); }); @@ -73,4 +75,30 @@ describe('GoTableComponent', () => { expect(resultSet).toBe(firstNumber + ' - ' + secondNumber); }); }); + + describe('toggleSort', () => { + beforeEach(() => { + spyOn(component.tableChange, 'emit'); + }); + + afterEach(() => { + component.tableConfig = tableConfig; + }); + + it('should update columns if column is sortable', () => { + component.toggleSort(true, 'value'); + expect(component.tableChange.emit).toHaveBeenCalled(); + }); + + it('should not update columns if column is not sortable', () => { + component.toggleSort(false, 'value'); + expect(component.tableChange.emit).not.toHaveBeenCalled(); + }); + + it('should update columns if column sortable is undefined, but table is sortable', () => { + component.tableConfig.sortable = true; + component.toggleSort(undefined, 'value'); + expect(component.tableChange.emit).toHaveBeenCalled(); + }); + }); }); diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.ts b/projects/go-lib/src/lib/components/go-table/go-table.component.ts index 9ea5fa559..a654e3c96 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.ts +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.ts @@ -1,5 +1,4 @@ import { - AfterContentInit, Component, ContentChildren, ElementRef, @@ -32,7 +31,7 @@ import { fadeTemplateAnimation } from '../../animations/fade.animation'; templateUrl: './go-table.component.html', styleUrls: ['./go-table.component.scss'] }) -export class GoTableComponent implements AfterContentInit, OnInit, OnChanges { +export class GoTableComponent implements OnInit, OnChanges { @Input() loadingData: boolean = false; @Input() showTableActions: boolean = false; @@ -72,14 +71,6 @@ export class GoTableComponent implements AfterContentInit, OnInit, OnChanges { this.renderTable(); } - ngAfterContentInit(): void { - this.columns.forEach((column: GoTableColumnComponent) => { - if (column.sortable === undefined) { - column.sortable = this.localTableConfig.sortable; - } - }); - } - renderTable(): void { if (this.tableConfig) { this.localTableConfig = JSON.parse(JSON.stringify(this.tableConfig)); @@ -111,14 +102,17 @@ export class GoTableComponent implements AfterContentInit, OnInit, OnChanges { return this.hasData() && this.localTableConfig.pageable; } - toggleSort(columnField: string): void { - const { sortConfig, tableData }: + toggleSort(columnSortable: boolean, columnField: string): void { + const { sortable, sortConfig, tableData }: { + sortable: boolean, sortConfig?: GoTableSortConfig, tableData: any[] } = this.localTableConfig; - if (tableData) { + columnSortable = columnSortable !== undefined ? columnSortable : sortable; + + if (tableData && columnSortable) { if (sortConfig && sortConfig.column === columnField) { this.localTableConfig.sortConfig.direction = this.toggleSortDir(sortConfig.direction); } else { From fdc135b1d1e6ec76fc01d83be96c4580af002138 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Tue, 8 Oct 2019 14:51:13 -0400 Subject: [PATCH 20/98] Add loading input to go-select --- .../go-select/go-select.component.html | 1 + .../go-select/go-select.component.ts | 1 + .../select-docs/select-docs.component.html | 44 +++++++++++++++++-- .../select-docs/select-docs.component.ts | 19 ++++++++ .../test-page-3/test-page-3.component.html | 1 + .../test-page-3/test-page-3.component.ts | 11 ++++- 6 files changed, 72 insertions(+), 5 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.html b/projects/go-lib/src/lib/components/go-select/go-select.component.html index 7a5118c82..52f8ac94a 100644 --- a/projects/go-lib/src/lib/components/go-select/go-select.component.html +++ b/projects/go-lib/src/lib/components/go-select/go-select.component.html @@ -10,6 +10,7 @@ [items]="items" [bindLabel]="bindLabel" [bindValue]="bindValue" + [loading]="loading" [multiple]="multiple" [formControl]="control" [placeholder]="placeholder"> diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.ts b/projects/go-lib/src/lib/components/go-select/go-select.component.ts index 722b8a126..1394d4498 100644 --- a/projects/go-lib/src/lib/components/go-select/go-select.component.ts +++ b/projects/go-lib/src/lib/components/go-select/go-select.component.ts @@ -17,6 +17,7 @@ export class GoSelectComponent implements OnInit { @Input() items: any[]; @Input() key: string; @Input() label: string; + @Input() loading: boolean = false; @Input() multiple: boolean = false; @Input() placeholder: string; @Input() theme: 'light' | 'dark' = 'light'; diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html index 102ef2cfe..5343b1e88 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html @@ -176,7 +176,7 @@

Code

- +

Component Items

 @@ -214,13 +214,13 @@

Code

 - +

Component Multiple

- Sometimes we may want to be able to select multiple things. We can achieve this throught the + Sometimes we may want to be able to select multiple things. We can achieve this through the @Input() multiple: boolean = false; binding. Setting multiple to true will turn the select into a multi select and will save an array of values instead of a single value.

@@ -280,4 +280,42 @@

Code

 + + +

Component Loading

+ + +

+ Sometimes we may want to indicate that the items for our select have not yet been retrieved. We can achieve this through the + @Input() loading: boolean = false; binding. Setting loading + to true will display a loading spinner within the select to indicate that the items are not yet available, + while setting loading to false will remove the spinner and allow the select to function normally. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+ + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts index 1b11fa96d..272575af3 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts @@ -17,9 +17,12 @@ export class SelectDocsComponent implements OnInit { select6: FormControl = new FormControl(''); select7: FormControl = new FormControl(''); select8: FormControl = new FormControl(''); + select9: FormControl = new FormControl(''); hints: Array = ['please select you favorite candy']; + loadingSelectOptions: boolean = true; + select1Code: string = ` `; + select9Code: string = ` + + `; + + select9LoadingCode: string = ` + loadingSelectOptions: boolean = true; + `; + ngOnInit(): void { setTimeout((): void => { this.select5.setErrors([ diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index 1cf9c36de..84fc3e724 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -104,6 +104,7 @@

bindValue="value" bindLabel="name" [hints]="['Select an option here, whatever you want']" + [loading]="loadingSelectOptions" placeholder="Select Box Placeholder" label="Select Box Here"> diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts index 5ac016ec8..0c06be34b 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-test-page-3', templateUrl: './test-page-3.component.html' }) -export class TestPage3Component { +export class TestPage3Component implements OnInit { selectData: any = [{ value: 1, name: 'Harry' @@ -36,6 +36,7 @@ export class TestPage3Component { date2: new FormControl('5/25/2019') }); loading: boolean = false; + loadingSelectOptions: boolean = true; otherThing: FormControl = new FormControl('test'); testOtherThing: FormControl = new FormControl({ value: 'Disabled Input', disabled: true }); @@ -46,6 +47,12 @@ export class TestPage3Component { constructor() { } + ngOnInit(): void { + setTimeout(() => { + this.loadingSelectOptions = false; + }, 3000); + } + onSubmit(): void { this.loading = true; From 6a7f38deac674483110b946560c05a57de12a058 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 8 Oct 2019 16:04:58 -0400 Subject: [PATCH 21/98] Added documentation for action sheet --- .../go-action-sheet.component.scss | 1 + .../go-style-guide/src/app/app.component.ts | 3 +- .../action-sheet-docs.component.html | 1 + .../action-sheet-docs.component.ts | 18 ++ .../action-sheet-overview.component.html | 108 +++++++ .../action-sheet-overview.component.ts | 47 +++ .../action-sheet-panel-docs.component.html | 271 ++++++++++++++++++ .../action-sheet-panel-docs.component.ts | 134 +++++++++ .../ui-kit/routes/ui-kit-routing.module.ts | 9 + .../src/app/features/ui-kit/ui-kit.module.ts | 12 +- 10 files changed, 602 insertions(+), 2 deletions(-) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss index 1681ff33b..dc6a849db 100644 --- a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss @@ -2,6 +2,7 @@ @import '../../../styles/mixins'; .go-action-sheet { + display: inline-block; position: relative; } diff --git a/projects/go-style-guide/src/app/app.component.ts b/projects/go-style-guide/src/app/app.component.ts index 43dd31996..a03c7834d 100644 --- a/projects/go-style-guide/src/app/app.component.ts +++ b/projects/go-style-guide/src/app/app.component.ts @@ -1,5 +1,5 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import { Router } from '@angular/router'; import { routerAnimation } from './app.animations'; import { NavGroup, NavItem } from '../../../go-lib/src/public_api'; @@ -24,6 +24,7 @@ export class AppComponent { { route: 'ui-kit', routeIcon: 'widgets', routeTitle: 'Components', subRoutes: [ { route: 'ui-kit/accordion', routeTitle: 'Accordion' }, { route: 'ui-kit/accordion-panel', routeTitle: 'Accordion Panel' }, + { route: 'ui-kit/action-sheet', routeTitle: 'Action Sheet' }, { route: 'ui-kit/badge', routeTitle: 'Badge' }, { route: 'ui-kit/button', routeTitle: 'Button' }, { route: 'ui-kit/card', routeTitle: 'Card' }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.html new file mode 100644 index 000000000..5f465498a --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.html @@ -0,0 +1 @@ + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.ts new file mode 100644 index 000000000..ac63dc496 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/action-sheet-docs.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; +import { NavGroup } from 'projects/go-lib/src/public_api'; + +@Component({ + selector: 'app-action-sheet-docs', + templateUrl: './action-sheet-docs.component.html' +}) +export class ActionSheetDocsComponent { + menuItems: Array = [ + { + routeTitle: 'Action Sheet', subRoutes: [ + { route: './', routeTitle: 'Overview' }, + { route: './panel', routeTitle: 'Panel' } + ] + } + ]; + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html new file mode 100644 index 000000000..4a20a003c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html @@ -0,0 +1,108 @@ +
+

Action Sheet

+
+ +
+ + + +

Usage

+

The Action Sheet component should be used when a list of actions or links need to be grouped and hidden behind a button.

+ +

+ The go-action-sheet element must be accompanied by + go-panel children. + See Panel for details. +

+ +

Bindings

+ + +

shiftLeft

+

+ If true, shiftLeft + will move the pop up portion of the action sheet to the left and adjust the arrow to the right. + This is useful for items close to the right edge of the page or container. +

+ +

+ For more detailed examples of options available to you, check out the options for the panel. +

+ + + + +
+

Simple

+
+
+
+
+

+ A simple example to show the basic functionality of an action sheet. +

+
+
+

Code

+ +
+
+

View

+ + + + Action Sheet + + + + + + + + + + + +
+
+
+ + + +
+

With an Accordion

+
+
+
+
+

+ This example shows an instance where an accordion is being used inside of an action sheet. +

+
+
+

Code

+ +
+
+

View

+ + + + Action Sheet + + + + + + + + Stuff about home + + + + +
+
+
+ +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts new file mode 100644 index 000000000..d72b00aab --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts @@ -0,0 +1,47 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-action-sheet-overview', + templateUrl: './action-sheet-overview.component.html' +}) +export class ActionSheetOverviewComponent { + + bindings: string = `@Input() shiftLeft: boolean = false;`; + + simpleHtml: string = ` + + + + Action Sheet + + + + + + + + + + + + `; + + accordionHtml: string = ` + + + + Action Sheet + + + + + + + + Stuff about home + + + + + `; +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html new file mode 100644 index 000000000..465125a2b --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html @@ -0,0 +1,271 @@ +
+

Panels

+
+ +
+ + + +

Usage

+

The go-panel should be used in conjuction with the Action Sheet.

+ +

Bindings

+ + +

danger

+

+ This binding will change the color of the text to Horizon red if true. + (ex. to logout) +

+ +

showHeader

+

+ This will alter the appearance of the panel to appear as a header for the action sheet. + Ideally, this should only be used for the first panel in an action sheet. +

+ +

icon

+

+ The Material Icons string for an icon. If not passed, the space for the icon goes away. +

+ +

externalLink

+

+ This binding allows the implementer to target a route outside of Angular. + This should not be used in conjuction with a routerLink +

+ +

panelContent

+

+ This binding is the content of the panel. HTML can be passed into this. +

+ +

action

+

+ This is an event that is emitted from the panel when a user clicks on the panel. +

+ + + + +
+

Icons

+
+
+
+
+

+ A simple example to show the use of icons on the action sheet. +

+
+
+

Code

+ +
+
+

View

+ + + + Icons Sheet + + + + + + + + + + + +
+
+
+ + + +
+

Show Header

+
+
+
+
+

+ This example shows an instance where the action has a header panel. +

+
+
+

Code

+ +
+
+

View

+ + + + Header Sheet + + + + + + + + + + + +
+
+
+ + + +
+

Danger

+
+
+
+
+

+ This example shows an instance where the action sheet has a danger panel. +

+
+
+

Code

+ +
+
+

View

+ + + + Danger Sheet + + + + + + + + + + + +
+
+
+ + + +
+

External Link

+
+
+
+
+

+ This example shows an instance where the action sheet has panels with an external link. +

+
+
+

Code

+ +
+
+

View

+ + + + External Sheet + + + + + + + + + + + +
+
+
+ + + +
+

Actions

+
+
+
+
+

+ This example shows an instance where the action sheet has panels with actions. +

+
+
+

Code

+ +
+
+

View

+ + + + Actions Sheet + + + + + + + + + + + +
+
+
+ + + +
+

Router

+
+
+
+
+

+ This example shows an instance where the action sheet has a panel with routerLink. +

+
+
+

Code

+ +
+
+

View

+ + + + Router Sheet + + + + + + + + + + + +
+
+
+ +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts new file mode 100644 index 000000000..589e267d8 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts @@ -0,0 +1,134 @@ +import { Component } from '@angular/core'; +import { GoToasterService } from 'projects/go-lib/src/public_api'; + +@Component({ + selector: 'app-action-sheet-panel-docs', + templateUrl: './action-sheet-panel-docs.component.html' +}) +export class ActionSheetPanelDocsComponent { + + bindings: string = ` + @Input() danger: boolean; + @Input() showHeader: boolean; + @Input() icon: string; + @Input() externalLink: string; + @Input() panelContent: string; + + @Output() action: EventEmitter = new EventEmitter(); + `; + + iconHtml: string = ` + + + + Icons Sheet + + + + + + + + + + + + `; + + headerHtml: string = ` + + + + Header Sheet + + + + + + + + + + + + `; + + dangerHtml: string = ` + + + + Danger Sheet + + + + + + + + + + + + `; + + externalHtml: string = ` + + + + External Sheet + + + + + + + + + + + + `; + + actionsHtml: string = ` + + + + Actions Sheet + + + + + + + + + + + + `; + + routerHtml: string = ` + + + + Router Sheet + + + + + + + + + + + + `; + + constructor(private toasterService: GoToasterService) { } + + toast(): void { + this.toasterService.toastInfo({ header: 'Accounement', message: 'You completed an action!' }); + } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index e4c0eab78..45c72b0c6 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { AccordionDocsComponent } from '../components/accordion-docs/accordion-docs.component'; import { AccordionPanelDocsComponent } from '../components/accordion-panel-docs/accordion-panel-docs.component'; +import { ActionSheetDocsComponent } from '../components/action-sheet-docs/action-sheet-docs.component'; import { BadgeDocsComponent } from '../components/badge-docs/badge-docs.coponent'; import { ButtonDocsComponent } from '../components/button-docs/button-docs.component'; import { CardDocsComponent } from '../components/card-docs/card-docs.component'; @@ -34,11 +35,19 @@ import { TextAreaDocsComponent } from '../components/form-docs/components/text-a import { TableSelectionComponent } from '../components/table-docs/components/table-selection/table-selection.component'; import { TableActionsDocsComponent } from '../components/table-docs/components/table-actions-docs/table-actions-docs.component'; import { ConfigurationDocsComponent } from '../components/configuration-docs/configuration-docs.component'; +// tslint:disable-next-line: max-line-length +import { ActionSheetOverviewComponent } from '../components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component'; +// tslint:disable-next-line: max-line-length +import { ActionSheetPanelDocsComponent } from '../components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; const routes: Routes = [ { path: 'ui-kit', component: UiKitComponent }, { path: 'ui-kit/accordion', component: AccordionDocsComponent }, { path: 'ui-kit/accordion-panel', component: AccordionPanelDocsComponent }, + { path: 'ui-kit/action-sheet', component: ActionSheetDocsComponent, children: [ + { path: '', component: ActionSheetOverviewComponent }, + { path: 'panel', component: ActionSheetPanelDocsComponent } + ]}, { path: 'ui-kit/badge', component: BadgeDocsComponent }, { path: 'ui-kit/button', component: ButtonDocsComponent }, { path: 'ui-kit/card', component: CardDocsComponent }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 70d1e80d2..42e359d96 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -6,6 +6,7 @@ import { SharedModule } from '../../shared/shared.module'; // GoPonents import { GoAccordionModule, + GoActionSheetModule, GoBadgeModule, GoButtonModule, GoCardModule, @@ -67,11 +68,17 @@ import { LayoutExampleComponent } from './components/layout-docs/components/layo import { TextAreaDocsComponent } from './components/form-docs/components/text-area-docs/text-area-docs.component'; import { TableSelectionComponent } from './components/table-docs/components/table-selection/table-selection.component'; import { TableActionsDocsComponent } from './components/table-docs/components/table-actions-docs/table-actions-docs.component'; +import { ActionSheetDocsComponent } from './components/action-sheet-docs/action-sheet-docs.component'; +// tslint:disable-next-line: max-line-length +import { ActionSheetOverviewComponent } from './components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component'; +// tslint:disable-next-line: max-line-length +import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; @NgModule({ imports: [ CommonModule, GoAccordionModule, + GoActionSheetModule, GoBadgeModule, GoButtonModule, GoCardModule, @@ -127,7 +134,10 @@ import { TableActionsDocsComponent } from './components/table-docs/components/ta LayoutSearchComponent, LayoutExampleComponent, TableSelectionComponent, - TableActionsDocsComponent + TableActionsDocsComponent, + ActionSheetDocsComponent, + ActionSheetOverviewComponent, + ActionSheetPanelDocsComponent ], entryComponents: [ BasicTestComponent, From 468e209ec74e820178e4be33033a5b9df210a728 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 8 Oct 2019 16:23:26 -0400 Subject: [PATCH 22/98] Added documentation on the structure of the action sheet --- .../action-sheet-overview.component.html | 14 +++++++++++++- .../action-sheet-overview.component.ts | 11 +++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html index 4a20a003c..ad14ead43 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html @@ -1,5 +1,5 @@
-

Action Sheet

+

Action Sheets

@@ -30,6 +30,18 @@

shiftLeft

+ + + +

Action Sheet Structure

+

+ The action sheet component is split up into two sections. The trigger and the content. + The simpliest way to get the action sheet working is with two ng-containers. +

+ + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts index d72b00aab..85829a071 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts @@ -8,6 +8,17 @@ export class ActionSheetOverviewComponent { bindings: string = `@Input() shiftLeft: boolean = false;`; + structureHtml: string = ` + + + + + + + + + `; + simpleHtml: string = ` From 51738fa18a94e1238f43d9b2d5603017ec73e586 Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Wed, 9 Oct 2019 09:45:01 -0400 Subject: [PATCH 23/98] Move + update PR template --- .github/PULL_REQUEST_TEMPLATE.md | 42 ++++++++++++++++++++++++++++++++ CONTRIBUTING.md | 4 +-- PULL_REQUEST_TEMPLATE | 6 ----- 3 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 .github/PULL_REQUEST_TEMPLATE.md delete mode 100644 PULL_REQUEST_TEMPLATE diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 000000000..b096be6e6 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,42 @@ +## PR Checklist +Please check if your PR fulfills the following requirements: + +- [ ] The commit message follows our guidelines: https://github.com/mobi/goponents/blob/master/CONTRIBUTING.md +- [ ] Tests for the changes have been added (for bug fixes / features) +- [ ] Docs have been added / updated (for bug fixes / features) + + +## PR Type +What kind of change does this PR introduce? + + + +- [ ] Bugfix +- [ ] Feature +- [ ] Code style update (formatting, local variables) +- [ ] Refactoring (no functional changes, no api changes) +- [ ] Build related changes +- [ ] CI related changes +- [ ] Documentation content changes +- [ ] Other... Please describe: + + +## What is the current behavior? + + +Issue Number: N/A + + +## What is the new behavior? + + +## Does this PR introduce a breaking change? + +- [ ] Yes +- [ ] No + + + + + +## Other information diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 366c91602..bb9af5a7f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -46,7 +46,7 @@ Before you submit your pull request (PR) consider the following guidelines: git push origin my-branch-name ``` 9. In GitHub, send a pull request to `goponents:dev`. - - Please format the description of your PR with our [pull request template](https://github.com/mobi/goponents/blob/master/PULL_REQUEST_TEMPLATE) + - Please format the description of your PR with our [pull request template](https://github.com/mobi/goponents/blob/master/.github/PULL_REQUEST_TEMPLATE.md) - If we suggest changes then: 1. Make the required updates. 2. Re-run the test suite to ensure tests are still passing. @@ -61,4 +61,4 @@ Feel free to open up [an issue](https://github.com/mobi/goponents/issues/new/cho When any sort of issue is created, depending on the impact or urgency of the issue, one of our [contributors](https://github.com/mobi/goponents/graphs/contributors) will respond as quickly as appropriate on the issue itself. We will try to give a timeline and release schedule for any request that is made. -We would also welcome anyone to open up a [pull request]() for a bug or issue experienced in order to expedite the process. \ No newline at end of file +We would also welcome anyone to open up a [pull request]() for a bug or issue experienced in order to expedite the process. diff --git a/PULL_REQUEST_TEMPLATE b/PULL_REQUEST_TEMPLATE deleted file mode 100644 index ec0b9f0a8..000000000 --- a/PULL_REQUEST_TEMPLATE +++ /dev/null @@ -1,6 +0,0 @@ -## Why do we need this? - -## How does this solve that? - -## Additional Info -Fixes (issue) From 518fe87046c62b0ab0898298375c8b5ecfdbbd22 Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Wed, 9 Oct 2019 09:50:09 -0400 Subject: [PATCH 24/98] add additional comments to PR template --- .github/PULL_REQUEST_TEMPLATE.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index b096be6e6..36d521172 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,6 +1,8 @@ ## PR Checklist Please check if your PR fulfills the following requirements: + + - [ ] The commit message follows our guidelines: https://github.com/mobi/goponents/blob/master/CONTRIBUTING.md - [ ] Tests for the changes have been added (for bug fixes / features) - [ ] Docs have been added / updated (for bug fixes / features) @@ -32,6 +34,8 @@ Issue Number: N/A ## Does this PR introduce a breaking change? + + - [ ] Yes - [ ] No From 8a0780b38a762eb1cecf9171330ad6b9b8032ae5 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Wed, 9 Oct 2019 11:12:11 -0400 Subject: [PATCH 25/98] add documentation for column sorting on table --- .../table-sorting.component.html | 53 +++++++++++++++++++ .../table-sorting/table-sorting.component.ts | 22 ++++++++ 2 files changed, 75 insertions(+) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html index 342e8e42a..ce8e283bf 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.html @@ -64,4 +64,57 @@

example.ts

+ + + +

Restricting by Column

+ + +

+ Sometimes we want a table to be sortable, but only want certain columns to be sortable. This can be done in one + of two ways. We can either make the table sortable by default and then disable sorting on certain columns, or we + can disable sorting by default on the table and enable it on a couple columns we want to be sortable. +

+ + + +

sortable

+

+ This property exists on go-table-column and can be used to turn sorting on or + off for a specific column. +

+

example.html

+ +

example.ts

+ + + + + + + + + + + + + + +

Enabling by Column

+ + +

example.html

+ +

example.ts

+ + + + + + + + + + +
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts index 22462bf1c..a22559fe4 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/table-docs/components/table-sorting/table-sorting.component.ts @@ -64,6 +64,28 @@ export class TableSortingComponent { }); `; + tableConfigRestrictColumn_html: string = ` + + + + + + + + + `; + + tableConfigEnableColumn_html: string = ` + + + + + + + + + `; + tableConfig: GoTableConfig = new GoTableConfig({ sortConfig: new GoTableSortConfig({ column: 'name.first', From d286e4a6ef3c97691511369a5545aa22deacaba7 Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Wed, 9 Oct 2019 13:57:48 -0400 Subject: [PATCH 26/98] Fix button group helper class not working per issue https://github.com/mobi/goponents/issues/171 --- .../components/go-button/go-button.component.scss | 4 ++-- .../test-page-2/test-page-2.component.html | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.scss b/projects/go-lib/src/lib/components/go-button/go-button.component.scss index f827bf537..d739d71dc 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.scss +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.scss @@ -181,14 +181,14 @@ $button__background--loading: rgba($theme-light-border, .4); } } -.go-button-group { +::ng-deep .go-button-group { display: inline-flex; justify-content: flex-start; list-style: none; margin: 0; } -.go-button-group__item { +::ng-deep .go-button-group__item { margin-right: 0.5rem; &:last-child { diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html index 084d96693..644a56327 100644 --- a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html @@ -83,6 +83,18 @@

Buttons

+
+

Button Group

+
    +
  • + Button 1 +
    • +
  • + Button 2 +
    • +
+
+

Toasts

Date: Fri, 4 Oct 2019 10:48:39 -0400 Subject: [PATCH 27/98] FEATURE: Add header and icon to Off Canvas Component --- .../go-off-canvas/go-off-canvas.component.html | 11 +++-------- .../go-off-canvas/go-off-canvas.component.scss | 8 ++++++++ .../go-off-canvas/go-off-canvas.component.ts | 5 ++++- .../go-off-canvas/go-off-canvas.interface.ts | 3 ++- .../components/go-off-canvas/go-off-canvas.module.ts | 8 +++++++- projects/go-lib/src/styles/_placeholders.scss | 4 ++++ projects/go-tester/src/app/app.component.ts | 4 +++- .../off-canvas-test/off-canvas-test.component.ts | 4 ++-- 8 files changed, 33 insertions(+), 14 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.html b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.html index 752ca9ec4..305e62cdb 100644 --- a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.html +++ b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.html @@ -1,7 +1,7 @@
@@ -11,13 +11,8 @@ role="dialog" >
- +

{{ header }}

+
diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss index 174f190a1..74d71bff3 100644 --- a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss +++ b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss @@ -30,6 +30,14 @@ align-self: flex-start; flex: 0 0 auto; width: 100%; + display: flex; + justify-content: space-between; + padding: 1rem; + align-items: center; +} + +.go-off-canvas__header:last-child { + margin-left: auto; } .go-off-canvas__button { diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.ts b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.ts index 0ca4cf0cc..34b8cab17 100644 --- a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.ts +++ b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core'; +import { Component, ComponentFactoryResolver, Input, OnInit, ViewChild } from '@angular/core'; import { GoOffCanvasDirective } from './go-off-canvas.directive'; import { GoOffCanvasService } from './go-off-canvas.service'; import { GoOffCanvasItem } from './go-off-canvas.interface'; @@ -20,6 +20,7 @@ import { offCanvasAnimation } from '../../animations/off-canvas.animation'; export class GoOffCanvasComponent implements OnInit { currentOffCanvasItem: GoOffCanvasItem; opened: boolean = false; + header: string; @ViewChild(GoOffCanvasDirective) goOffCanvasHost: GoOffCanvasDirective; @@ -56,5 +57,7 @@ export class GoOffCanvasComponent implements OnInit { Object.keys(this.currentOffCanvasItem.bindings).forEach(key => { componentRef.instance[key] = this.currentOffCanvasItem.bindings[key]; }); + + this.header = this.currentOffCanvasItem.header; } } diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.interface.ts b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.interface.ts index 237deda5f..803f419b0 100644 --- a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.interface.ts +++ b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.interface.ts @@ -1,6 +1,7 @@ -import { Type } from "@angular/core"; +import { Type } from '@angular/core'; export interface GoOffCanvasItem { component: Type<{}>; bindings: {}; + header?: string; } diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.module.ts b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.module.ts index 1f18cf8a2..b8a4820eb 100644 --- a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.module.ts +++ b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.module.ts @@ -1,8 +1,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { GoOffCanvasComponent } from './go-off-canvas.component'; import { GoOffCanvasDirective } from './go-off-canvas.directive'; +import { GoIconModule } from '../go-icon/go-icon.module'; @NgModule({ declarations: [ @@ -10,7 +13,10 @@ import { GoOffCanvasDirective } from './go-off-canvas.directive'; GoOffCanvasDirective ], imports: [ - CommonModule + BrowserAnimationsModule, + BrowserModule, + CommonModule, + GoIconModule ], exports: [ GoOffCanvasComponent diff --git a/projects/go-lib/src/styles/_placeholders.scss b/projects/go-lib/src/styles/_placeholders.scss index 7d7cf2b7b..5dfaedaf3 100644 --- a/projects/go-lib/src/styles/_placeholders.scss +++ b/projects/go-lib/src/styles/_placeholders.scss @@ -5,3 +5,7 @@ %element--no-margin { margin: 0; } + +.clickable { + cursor: pointer; +} diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index 30ef40a53..f3effd98e 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -61,7 +61,9 @@ export class AppComponent implements OnInit { openOffCanvas(): void { this.goOffCanvasService.openOffCanvas({ component: OffCanvasTestComponent, - bindings: {} + bindings: { + }, + header: 'Test Header' }); } diff --git a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts index 538cdf12f..e833fd1cc 100644 --- a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts +++ b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'off-canvas-test', templateUrl: './off-canvas-test.component.html' }) export class OffCanvasTestComponent { - + @Input() header: string = ''; } From e9d5dd0a328100164aef925aa88a7b7ce59ed121 Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Wed, 9 Oct 2019 16:08:17 -0400 Subject: [PATCH 28/98] Support HTML with toast message per issue https://github.com/mobi/goponents/issues/239 --- .../src/lib/components/go-toast/go-toast.component.html | 2 +- .../ui-kit/components/toast-docs/toast-docs.component.html | 4 +++- .../ui-kit/components/toast-docs/toast-docs.component.ts | 2 ++ .../app/components/test-page-2/test-page-2.component.html | 5 +++++ 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.html b/projects/go-lib/src/lib/components/go-toast/go-toast.component.html index 51c15c43f..090f927e6 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.html +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.html @@ -5,7 +5,7 @@
{{ header }}
-

{{ message }}

+

From 9d8e904357083cac1ab70823f979096cbf4c42cb Mon Sep 17 00:00:00 2001 From: "Eliezer.Golding" Date: Fri, 4 Oct 2019 10:34:02 -0400 Subject: [PATCH 29/98] option for Toggle component to render label before or after --- .../go-switch-toggle.component.html | 54 ++++++++++--------- .../go-switch-toggle.component.scss | 10 ++-- .../go-switch-toggle.component.ts | 1 + .../test-page-3/test-page-3.component.html | 11 +++- .../test-page-3/test-page-3.component.ts | 1 + 5 files changed, 46 insertions(+), 31 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html index 79e4cadcb..2ac033100 100644 --- a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html +++ b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.html @@ -1,32 +1,36 @@ -
-
- - -
+ +
+ + +
+ + + + + +
+ +
+ + - - - -
- -
-
+ diff --git a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss index 49064aa79..6e31917d4 100644 --- a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss +++ b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.scss @@ -61,14 +61,14 @@ transform: translateX(1.125rem); } -.go-form__switch-toggle__wrapper { - position: relative; -} - .go-form__switch-toggle__label { line-height: 1.125rem; padding-bottom: 0; padding-left: 0.75rem; - position: absolute; user-select: none; } + +.go-form__switch-toggle__label--before { + padding-left: 0; + padding-right: 0.75rem; +} diff --git a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts index 3c9223f55..009f74f17 100644 --- a/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts +++ b/projects/go-lib/src/lib/components/go-switch-toggle/go-switch-toggle.component.ts @@ -13,6 +13,7 @@ export class GoSwitchToggleComponent implements OnInit { @Input() key: string; @Input() hints: string[]; @Input() label: string; + @Input() labelPosition: 'before' | 'after' = 'after'; @Input() theme: 'light' | 'dark' = 'light'; constructor() { } diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index 84fc3e724..0e2182dfe 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -149,11 +149,20 @@

+
+ +
+
Date: Thu, 10 Oct 2019 16:58:39 -0400 Subject: [PATCH 30/98] Add z-index for loading screens to z-index function --- .../go-lib/src/lib/components/go-layout/go-layout.component.scss | 1 + projects/go-lib/src/styles/_mixins.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss index 32fa929ae..4bbdb2d47 100644 --- a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss @@ -47,4 +47,5 @@ body { overflow: hidden; position: absolute; width: 100%; + z-index: z-index(loading-screen); } diff --git a/projects/go-lib/src/styles/_mixins.scss b/projects/go-lib/src/styles/_mixins.scss index 853af0083..074c1c051 100644 --- a/projects/go-lib/src/styles/_mixins.scss +++ b/projects/go-lib/src/styles/_mixins.scss @@ -12,6 +12,7 @@ $z-index: ( off-canvas: 300, modal: 400, toaster: 500, + loading-screen: 600, ); @function z-index($key) { From c0ac40bd37679ead1a1db1b8b1074647863952f3 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 14 Oct 2019 09:56:22 -0400 Subject: [PATCH 31/98] Added documentation for dark/light loader types --- .../components/loader-docs/loader-docs.component.html | 6 ++++++ .../ui-kit/components/loader-docs/loader-docs.component.ts | 2 ++ 2 files changed, 8 insertions(+) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html index c72b59189..07272bb3d 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.html @@ -35,6 +35,8 @@
loaderType
  • negative
  • neutral
  • positive
    • +
  • dark
    • +
  • light
    • @@ -53,6 +55,10 @@
    Basic Example
    + +
    + +
    diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts index 93e6877a3..3b6cde55f 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/loader-docs/loader-docs.component.ts @@ -19,6 +19,8 @@ export class LoaderDocsComponent { + + `; fadeHtml: string = ` From 7e8263b50ce3cd12843e808e6332dd6f9ed4274c Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 14 Oct 2019 10:08:51 -0400 Subject: [PATCH 32/98] Added docs for a 5 column layout --- .../components/grid/grid.component.html | 21 +++++++++++++++++++ .../components/grid/grid.component.ts | 10 +++++++++ 2 files changed, 31 insertions(+) diff --git a/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html index 93debde5d..bcd234259 100644 --- a/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html +++ b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.html @@ -36,6 +36,27 @@

    Flexbox

    Basic Examples

    +

    5 Column (~20%)

    +

    + The .go-column--20 will create + a column that starts at 20% of the width of the container before filling + the remaining space. It can be used to create a basic 5 column grid. +

    +

    + On devices that are tablet sized and smaller the 5 columns created with + the .go-column--20 class will + stretch to being 2 columns per row. Giving it more space on smaller + devices. +

    +
    +
    1 of 5
    +
    2 of 5
    +
    3 of 5
    +
    4 of 5
    +
    5 of 5
    +
    + +

    4 Column (~25%)

    The .go-column--25 will create diff --git a/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts index 2b9eab8bb..09a1fea87 100644 --- a/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts +++ b/projects/go-style-guide/src/app/features/standards/components/grid/grid.component.ts @@ -7,6 +7,16 @@ import { Component } from '@angular/core'; export class GridComponent { pageTitle: string = 'Grid System'; + basicExample20: string = ` +

    +
    1 of 5
    +
    2 of 5
    +
    3 of 5
    +
    4 of 5
    +
    5 of 5
    +
    + `; + basicExample25: string = `
    1 of 4
    From 35b7a8e2eb826fb11ad2b9a8d5995953a3ad2fff Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 14 Oct 2019 10:36:11 -0400 Subject: [PATCH 33/98] Added documentation for accordion slim and theme bindings Organized accordion docs --- .../go-style-guide/src/app/app.component.ts | 1 - .../accordion-docs.component.html | 175 +------------ .../accordion-docs.component.ts | 89 +------ .../accordion-overview.component.html | 238 ++++++++++++++++++ .../accordion-overview.component.ts | 111 ++++++++ .../accordion-panel-docs.component.html | 0 .../accordion-panel-docs.component.ts | 12 +- .../accordion-panel-docs.component.spec.ts | 25 -- .../action-sheet-overview.component.html | 216 ++++++++-------- .../action-sheet-overview.component.ts | 5 + .../action-sheet-panel-docs.component.ts | 8 +- .../ui-kit/routes/ui-kit-routing.module.ts | 8 +- .../src/app/features/ui-kit/ui-kit.module.ts | 6 +- .../src/styles/_typography.scss | 2 +- 14 files changed, 496 insertions(+), 400 deletions(-) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.ts rename projects/go-style-guide/src/app/features/ui-kit/components/{ => accordion-docs/components}/accordion-panel-docs/accordion-panel-docs.component.html (100%) rename projects/go-style-guide/src/app/features/ui-kit/components/{ => accordion-docs/components}/accordion-panel-docs/accordion-panel-docs.component.ts (79%) delete mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts diff --git a/projects/go-style-guide/src/app/app.component.ts b/projects/go-style-guide/src/app/app.component.ts index a03c7834d..ace134fc5 100644 --- a/projects/go-style-guide/src/app/app.component.ts +++ b/projects/go-style-guide/src/app/app.component.ts @@ -23,7 +23,6 @@ export class AppComponent { ]}, { route: 'ui-kit', routeIcon: 'widgets', routeTitle: 'Components', subRoutes: [ { route: 'ui-kit/accordion', routeTitle: 'Accordion' }, - { route: 'ui-kit/accordion-panel', routeTitle: 'Accordion Panel' }, { route: 'ui-kit/action-sheet', routeTitle: 'Action Sheet' }, { route: 'ui-kit/badge', routeTitle: 'Badge' }, { route: 'ui-kit/button', routeTitle: 'Button' }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html index 422010785..5f465498a 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html @@ -1,174 +1 @@ -
    -

    {{ pageTitle }}

    -
    - -
    - -
    - -

    Usage

    -

    The Go Accordion Component should be used when multiple sets of data need to be rendered, but vertical space is a concern.

    - -

    - The go-accordion element must be accompanied by - go-accordion-panel children. - See Accordion Panel for details. -

    - - -

    Bindings

    - - - -

    expandAll

    -

    - expandAll - will ensure each panel in the accordion is expanded on first render. - expandAll will also override - multiExpand and set it to true. -

    - - -

    multiExpand

    -

    - multiExpand - will allow for multiple panels to be expanded at any given time. -

    - - -

    showIcons

    -

    - This will enable each panel to have an icon shown to the left of the heading. -

    - - Note: even if the icon binding is passed to an - accordion-panel, it will not be displayed unless - showIcons is set to true. - This is to encourage a consistent UI. If one accordion-panel - has an icon, they all should. - - - - -
    -     - - -
    -

    Default

    -
    -
    -
    -
    -

    Code

    - -
    -
    -

    View

    - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - -
    -
    -
    -     - - -
    -

    Expand All

    -
    -
    -
    -
    -

    Code

    - -
    -
    -

    View

    - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - -
    -
    -
    -     - - -
    -

    Multiple Expansion

    -
    -
    -
    -
    -

    Code

    - -
    -
    -

    View

    - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - -
    -
    -
    -     - - -
    -

    With Icons

    -
    -
    -
    -
    -

    Code

    - -
    -
    -

    View

    - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - -
    -
    -
    -     -
    + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts index 8a6b2c1b4..e070adc69 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts @@ -1,82 +1,17 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; +import { NavGroup } from 'projects/go-lib/src/public_api'; @Component({ templateUrl: './accordion-docs.component.html' }) -export class AccordionDocsComponent implements OnInit { - - pageTitle: String; - - defaultExample: string = ` - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - - `; - - expandAllExample: string = ` - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - - `; - - multiExpandExample: string = ` - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - - `; - - showIconsExample: string = ` - - - This is some content for Test 1. - - - This is a second thing. - - - This is a third thing. - - - `; - - componentBindings: string = ` - @Input() expandAll: boolean = false; - @Input() multiExpand: boolean = false; - @Input() showIcons: boolean = false; - @Input() theme: string = 'light'; - `; - - themeOptions: string = ` - // valid options - - 'light' - - 'dark' - `; - - ngOnInit(): void { - this.pageTitle = 'Accordion'; - } +export class AccordionDocsComponent { + + menuItems: Array = [ + { + routeTitle: 'Accordion', subRoutes: [ + { route: './', routeTitle: 'Overview' }, + { route: './panel', routeTitle: 'Panel' } + ] + } + ]; } diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html new file mode 100644 index 000000000..5c3bce583 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html @@ -0,0 +1,238 @@ +
    +

    {{ pageTitle }}

    +
    + +
    + +
    + +

    Usage

    +

    The Go Accordion Component should be used when multiple sets of data need to be rendered, but vertical space is a concern.

    + +

    + The go-accordion element must be accompanied by + go-accordion-panel children. + See Accordion Panel for details. +

    + + +

    Bindings

    + + + +

    expandAll

    +

    + expandAll + will ensure each panel in the accordion is expanded on first render. + expandAll will also override + multiExpand and set it to true. +

    + + +

    multiExpand

    +

    + multiExpand + will allow for multiple panels to be expanded at any given time. +

    + + +

    showIcons

    +

    + This will enable each panel to have an icon shown to the left of the heading. +

    + + Note: even if the icon binding is passed to an + accordion-panel, it will not be displayed unless + showIcons is set to true. + This is to encourage a consistent UI. If one accordion-panel + has an icon, they all should. + + + +

    slim

    +

    + slim + will reduce the height of the accordion panel, making it slimmer vertically. +

    + + +

    theme

    + +

    + This will set the appearance of the accordion. light + is the default theme and should be used in most places. The only time the + dark theme should be used is when the accordion + lives inside a UI element that has a dark themed background by default. (ex: off-canvas) +

    +
    +     + + +
    +

    Default

    +
    +
    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
    +
    +
    +     + + +
    +

    Expand All

    +
    +
    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
    +
    +
    +     + + +
    +

    Multiple Expansion

    +
    +
    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
    +
    +
    +     + + +
    +

    With Icons

    +
    +
    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
    +
    +
    +     + + +
    +

    Slim

    +
    +
    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
    +
    +
    +     + + +
    +

    Theme

    +
    +
    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + +
    +
    +
    +     +
    + \ No newline at end of file diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.ts new file mode 100644 index 000000000..426d2d44e --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.ts @@ -0,0 +1,111 @@ +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; + +@Component({ + selector: 'app-accordion-overview', + templateUrl: './accordion-overview.component.html' +}) +export class AccordionOverviewComponent { + + defaultExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + expandAllExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + multiExpandExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + showIconsExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + slimExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + themeExample: string = ` + + + This is some content for Test 1. + + + This is a second thing. + + + This is a third thing. + + + `; + + componentBindings: string = ` + @Input() expandAll: boolean = false; + @Input() multiExpand: boolean = false; + @Input() showIcons: boolean = false; + @Input() slim: boolean = false; + @Input() theme: string = 'light'; + `; + + themeOptions: string = ` + // valid options + - 'light' + - 'dark' + `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Accordion Overview'; + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component.html similarity index 100% rename from projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.html rename to projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component.html diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component.ts similarity index 79% rename from projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.ts rename to projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component.ts index 0a4c69609..547f603f1 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; @Component({ selector: 'app-accordion-panel-docs', templateUrl: './accordion-panel-docs.component.html' }) -export class AccordionPanelDocsComponent implements OnInit { +export class AccordionPanelDocsComponent { pageTitle: string; @@ -42,10 +43,7 @@ export class AccordionPanelDocsComponent implements OnInit { @Input() heading: string; `; - constructor() { } - - ngOnInit(): void { - this.pageTitle = 'Accordion Panel'; + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Accordion Panel'; } - } diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts deleted file mode 100644 index 16a672fe7..000000000 --- a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-panel-docs/accordion-panel-docs.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AccordionPanelDocsComponent } from './accordion-panel-docs.component'; - -describe('AccordionPanelDocsComponent', () => { - let component: AccordionPanelDocsComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AccordionPanelDocsComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AccordionPanelDocsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html index ad14ead43..ee8d461ae 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.html @@ -1,120 +1,116 @@ -
    -

    Action Sheets

    -
    - -
    - - - -

    Usage

    -

    The Action Sheet component should be used when a list of actions or links need to be grouped and hidden behind a button.

    +
    + + + +

    Usage

    +

    The Action Sheet component should be used when a list of actions or links need to be grouped and hidden behind a button.

    -

    - The go-action-sheet element must be accompanied by - go-panel children. - See Panel for details. -

    - -

    Bindings

    - - -

    shiftLeft

    -

    - If true, shiftLeft - will move the pop up portion of the action sheet to the left and adjust the arrow to the right. - This is useful for items close to the right edge of the page or container. +

    + The go-action-sheet element must be accompanied by + go-panel children. + See Panel for details.

    -

    - For more detailed examples of options available to you, check out the options for the panel. -

    -     -     +

    Bindings

    + - - -

    Action Sheet Structure

    -

    - The action sheet component is split up into two sections. The trigger and the content. - The simpliest way to get the action sheet working is with two ng-containers. -

    +

    shiftLeft

    +

    + If true, shiftLeft + will move the pop up portion of the action sheet to the left and adjust the arrow to the right. + This is useful for items close to the right edge of the page or container. +

    + +

    + For more detailed examples of options available to you, check out the options for the panel. +

    +     +     + + + +

    Action Sheet Structure

    +

    + The action sheet component is split up into two sections. The trigger and the content. + The simpliest way to get the action sheet working is with two ng-containers. +

    + + +     +     - - - - - -
    -

    Simple

    -
    -
    -
    -
    -

    - A simple example to show the basic functionality of an action sheet. -

    -
    -
    -

    Code

    - -
    -
    -

    View

    - - - - Action Sheet - - - - - - - - - - - -
    + +
    +

    Simple

    +
    +
    +
    +
    +

    + A simple example to show the basic functionality of an action sheet. +

    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + + Action Sheet + + + + + + + + + + +
    - +
    +     - -
    -

    With an Accordion

    -
    -
    -
    -
    -

    - This example shows an instance where an accordion is being used inside of an action sheet. -

    -
    -
    -

    Code

    - -
    -
    -

    View

    - - - - Action Sheet - - - - - - - - Stuff about home - - - - -
    + +
    +

    With an Accordion

    +
    +
    +
    +
    +

    + This example shows an instance where an accordion is being used inside of an action sheet. +

    +
    +
    +

    Code

    + +
    +
    +

    View

    + + + + Action Sheet + + + + + + + + Stuff about home + + + +
    - -
    + +     +
    diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts index 85829a071..24a6da0d3 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; @Component({ selector: 'app-action-sheet-overview', @@ -55,4 +56,8 @@ export class ActionSheetOverviewComponent { `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Action Sheet Overview'; + } } diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts index 589e267d8..9b39e475c 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { GoToasterService } from 'projects/go-lib/src/public_api'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; @Component({ selector: 'app-action-sheet-panel-docs', @@ -125,7 +126,12 @@ export class ActionSheetPanelDocsComponent { `; - constructor(private toasterService: GoToasterService) { } + constructor( + private toasterService: GoToasterService, + private subNavService: SubNavService + ) { + this.subNavService.pageTitle = 'Action Sheet Panel'; + } toast(): void { this.toasterService.toastInfo({ header: 'Accounement', message: 'You completed an action!' }); diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index 45c72b0c6..977b60e52 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AccordionDocsComponent } from '../components/accordion-docs/accordion-docs.component'; -import { AccordionPanelDocsComponent } from '../components/accordion-panel-docs/accordion-panel-docs.component'; +import { AccordionPanelDocsComponent } from '../components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component'; import { ActionSheetDocsComponent } from '../components/action-sheet-docs/action-sheet-docs.component'; import { BadgeDocsComponent } from '../components/badge-docs/badge-docs.coponent'; import { ButtonDocsComponent } from '../components/button-docs/button-docs.component'; @@ -39,10 +39,14 @@ import { ConfigurationDocsComponent } from '../components/configuration-docs/con import { ActionSheetOverviewComponent } from '../components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component'; // tslint:disable-next-line: max-line-length import { ActionSheetPanelDocsComponent } from '../components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; +import { AccordionOverviewComponent } from '../components/accordion-docs/components/accordion-overview/accordion-overview.component'; const routes: Routes = [ { path: 'ui-kit', component: UiKitComponent }, - { path: 'ui-kit/accordion', component: AccordionDocsComponent }, + { path: 'ui-kit/accordion', component: AccordionDocsComponent, children: [ + { path: '', component: AccordionOverviewComponent }, + { path: 'panel', component: AccordionPanelDocsComponent } + ]}, { path: 'ui-kit/accordion-panel', component: AccordionPanelDocsComponent }, { path: 'ui-kit/action-sheet', component: ActionSheetDocsComponent, children: [ { path: '', component: ActionSheetOverviewComponent }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 42e359d96..daf22cd6a 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -33,7 +33,7 @@ import { UiKitRoutesModule } from './routes/ui-kit-routing.module'; // Module Components import { AccordionDocsComponent } from './components/accordion-docs/accordion-docs.component'; -import { AccordionPanelDocsComponent } from './components/accordion-panel-docs/accordion-panel-docs.component'; +import { AccordionPanelDocsComponent } from './components/accordion-docs/components/accordion-panel-docs/accordion-panel-docs.component'; import { BadgeDocsComponent } from './components/badge-docs/badge-docs.coponent'; import { ButtonDocsComponent } from './components/button-docs/button-docs.component'; import { CardDocsComponent } from './components/card-docs/card-docs.component'; @@ -73,6 +73,7 @@ import { ActionSheetDocsComponent } from './components/action-sheet-docs/action- import { ActionSheetOverviewComponent } from './components/action-sheet-docs/components/action-sheet-overview/action-sheet-overview.component'; // tslint:disable-next-line: max-line-length import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; +import { AccordionOverviewComponent } from './components/accordion-docs/components/accordion-overview/accordion-overview.component'; @NgModule({ imports: [ @@ -137,7 +138,8 @@ import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/co TableActionsDocsComponent, ActionSheetDocsComponent, ActionSheetOverviewComponent, - ActionSheetPanelDocsComponent + ActionSheetPanelDocsComponent, + AccordionOverviewComponent ], entryComponents: [ BasicTestComponent, diff --git a/projects/go-style-guide/src/styles/_typography.scss b/projects/go-style-guide/src/styles/_typography.scss index 96517a673..aa9a30ce5 100644 --- a/projects/go-style-guide/src/styles/_typography.scss +++ b/projects/go-style-guide/src/styles/_typography.scss @@ -17,7 +17,7 @@ caption { font-size: .75rem; letter-spacing: .4pt; line-height: 1.3; - margin: 1rem 0; + margin: 0 0 1rem; text-align: left; } From cb31eba6efbfc7dfa4ca50db24a5fc57a3ed2493 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Mon, 14 Oct 2019 10:39:51 -0400 Subject: [PATCH 34/98] BUG: fix go-select dropdowns being cut off in go-accordian-panels (#267) * BUG: Fix go-select dropdowns being cut off in go-accordion-panels --- .../src/lib/animations/accordion.animation.ts | 2 ++ .../go-accordion-panel.component.scss | 2 +- .../off-canvas-test.component.html | 20 +++++++++++++++---- .../off-canvas-test.component.ts | 19 +++++++++++++++++- 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/projects/go-lib/src/lib/animations/accordion.animation.ts b/projects/go-lib/src/lib/animations/accordion.animation.ts index 234b39251..64f3f1489 100644 --- a/projects/go-lib/src/lib/animations/accordion.animation.ts +++ b/projects/go-lib/src/lib/animations/accordion.animation.ts @@ -12,10 +12,12 @@ import { easing, timing } from './_configs'; export const accordionAnimation: AnimationTriggerMetadata = trigger('accordionAnimation', [ state('open', style({ height: '*', + overflow: 'visible', visibility: 'visible' })), state('close', style({ height: 0, + overflow: 'hidden', visibility: 'hidden' })), transition('open <=> close', [ diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss index a9efa74ba..30a007fd2 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss @@ -6,7 +6,7 @@ border: 1px solid $theme-light-border; border-bottom-width: 0; color: $theme-light-color; - overflow: hidden; + overflow: visible; position: relative; } diff --git a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.html b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.html index 9fb95ef90..322444f11 100644 --- a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.html +++ b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.html @@ -37,13 +37,25 @@ -

    This is some content for Test 1.

    +
    + + +
    - -

    This is a second thing.

    + +

    This is some content for Test 2.

     - +

    This is a third thing.

     + +

    This is a fourth thing.

    +     diff --git a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts index 538cdf12f..0271ded49 100644 --- a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts +++ b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts @@ -1,9 +1,26 @@ import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; @Component({ selector: 'off-canvas-test', templateUrl: './off-canvas-test.component.html' }) export class OffCanvasTestComponent { - + selectData: any = [{ + value: 1, + name: 'Harry' + }, { + value: 2, + name: 'Hermione' + }, { + value: 3, + name: 'Ron' + }, { + value: 4, + name: 'Voldermort' + }, { + value: 5, + name: 'Snake' + }]; + selectControl: FormControl = new FormControl(); } From 5824be56c6a171a31d84753444bc642a1c1ec34b Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 14 Oct 2019 11:09:29 -0400 Subject: [PATCH 35/98] Fixing issue with style guide building from accordion docs --- .../accordion-overview/accordion-overview.component.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html index 5c3bce583..aef89f25e 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/accordion-docs/components/accordion-overview/accordion-overview.component.html @@ -1,7 +1,3 @@ -
    -

    {{ pageTitle }}

    -
    -
    From 80b2bc8896ac72e80e84caf302d5fa1ed166676d Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 14 Oct 2019 11:24:44 -0400 Subject: [PATCH 36/98] Removed gosheets references from documentation --- .../getting-started.component.html | 70 ++++--------------- .../getting-started.component.spec.ts | 25 ------- .../getting-started.component.ts | 6 +- .../components/colors/colors.component.html | 7 +- 4 files changed, 19 insertions(+), 89 deletions(-) delete mode 100644 projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts diff --git a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html index 74b8be3be..cfe1f2630 100644 --- a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html +++ b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.html @@ -14,43 +14,24 @@

    Step 0: Before You Go

    • You have Node installed
      • -
    • You have Angular installed (for goponents)
      • +
    • You have Angular installed
    • You're ulitizing SCSS

    - The current iteration of our design system is made up of two node modules: + The current iteration of our design system is made up of a single node module:

    -
    +

    @tangoe/goponents (npmjs / GitHub)

    - This package contains all of the custom Angular Components and Services - outlined in the Components - section of this Style Guide. + This package contains all of the custom Angular Components, Services, and styles + outlined in this Style Guide.

    -
    -

    - @tangoe/gosheets - (npmjs / - GitHub) -

    -

    - This package contains all of the global styles for the Go Design. Items included - in this package are: -

    -
      -
    • Color/Setting Variables
      • -
    • Various SCSS Mixins
      • -
    • Grid System
      • -
    • Form Styles
      • -
    • Type Styles
      • -
    -
    @@ -61,36 +42,13 @@

    Step 1: Installation

    - Both goponents & gosheets are open source projects and can easily be installed through NPM. + Goponents is an open source project and can easily be installed through NPM.

    -
    +
    Install goponents:
    -
    - Install gosheets: -
    - -
    -
    -

    Hey, Listen!

    -

    - The latest version of goponents may not always have a dependency of the - latest version of gosheets. To avoid problems, install goponents first and look - for the warning output from NPM about peer dependency requirements. -

    -

    - Alternatively, you can check for the version of @tangoe/gosheets - on the devDependencies object in - ./node_modules/@tangoe/goponents/package.json -

    -
    -
    -

    - After discovering the version requirements, install that version specifically: -

    -
    @@ -102,9 +60,9 @@

    Step 2: Setup

    -

    Goponents

    +

    Components

    - For goponents, the setup will depend upon which component you need to implement. + For components, the setup will depend upon which one you need to implement. To find that information, check each components' documenation for instructions. Typically it involves importing the specific module for each component you use.

    @@ -113,17 +71,17 @@

    Goponents

    import what is needed for each module.

    -
    -

    Gosheets

    +
    +

    Styles

    - To utlize all of the benefits gosheets has to offer, in the root styles.scss + To utlize all of the benefits our styles have to offer, in the root styles.scss of the project import:

    - +

    Alternatively, partials can be imported individually. These can be found:

    - +
    diff --git a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts deleted file mode 100644 index 19747738e..000000000 --- a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GettingStartedComponent } from './getting-started.component'; - -describe('GettingStartedComponent', () => { - let component: GettingStartedComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ GettingStartedComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(GettingStartedComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts index f809d02cb..8bfb30048 100644 --- a/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts +++ b/projects/go-style-guide/src/app/features/dashboard/components/getting-started/getting-started.component.ts @@ -7,10 +7,8 @@ import { Component } from '@angular/core'; export class GettingStartedComponent { installGoponents: string = `npm install @tangoe/goponents`; - installGosheets: string = `npm install @tangoe/gosheets`; - installGosheetsVersion: string = `npm install @tangoe/gosheets@1.0.0`; - importGosheetsBase: string = `@import "~@tangoe/gosheets/gosheets"`; - importGosheetsPartials: string = `@import "~@tangoe/gosheets/base/*"`; + importStylesBase: string = `@import "~@tangoe/goponents/styles/styles"`; + importStylesPartials: string = `@import "~@tangoe/goponents/styles/*"`; constructor() { } diff --git a/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html index f3e3d4940..5b5328a58 100644 --- a/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html +++ b/projects/go-style-guide/src/app/features/standards/components/colors/colors.component.html @@ -10,10 +10,9 @@

    SASS Color Variables

    All of the available sass variables for theming, branding, & other - UI states are available via the gosheets package. - If the gosheets package is installed, these can be imported in an - scss file with: - @import '~@tangoe/gosheets/base/variables'; + UI states are available via the goponents package. + These can be imported in a scss file with: + @import '~@tangoe/goponents/styles/variables';

    From 93b143c043218bbc86f66b8dc5ce2d7bf4f9e89b Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 14 Oct 2019 08:52:25 -0400 Subject: [PATCH 37/98] Updated button variants and general design --- .../go-button/go-button.component.html | 10 +- .../go-button/go-button.component.scss | 274 ++++++++++-------- .../go-button/go-button.component.spec.ts | 80 ++++- .../go-button/go-button.component.ts | 62 +++- .../components/go-button/go-button.module.ts | 4 +- .../components/go-icon/go-icon.component.scss | 35 ++- .../go-loader/go-loader.component.scss | 1 + .../go-loader/go-loader.component.spec.ts | 25 +- .../go-loader/go-loader.component.ts | 1 + .../button-docs/button-docs.component.html | 200 ++++++++----- .../button-docs/button-docs.component.ts | 43 ++- 11 files changed, 481 insertions(+), 254 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.html b/projects/go-lib/src/lib/components/go-button/go-button.component.html index 815bb69bd..0d9bfa71e 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.html +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.html @@ -5,9 +5,17 @@ [ngClass]="classObject" [type]="buttonType" > + + + { let component: GoButtonComponent; @@ -10,7 +13,12 @@ describe('GoButtonComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ GoButtonComponent ], - imports: [ GoIconModule ] + imports: [ + BrowserModule, + BrowserAnimationsModule, + GoIconModule, + GoLoaderModule + ] }) .compileComponents(); })); @@ -43,16 +51,12 @@ describe('GoButtonComponent', () => { describe('classObject()', () => { beforeEach(() => { - expect(component.classObject).toEqual({}); + component.classObject = {}; }); it('returns an object that sets go-button--negative to true based on buttonVariant', () => { expect(component.classObject['go-button--negative']).toBeFalsy(); - component.buttonVariant = 'alert'; - component.ngOnChanges(); - expect(component.classObject['go-button--negative']).toBe(true); - component.buttonVariant = 'negative'; component.ngOnChanges(); expect(component.classObject['go-button--negative']).toBe(true); @@ -66,12 +70,28 @@ describe('GoButtonComponent', () => { expect(component.classObject['go-button--neutral']).toBe(true); }); - it('returns an object that set go-button--positive to true based on buttonVariant', () => { - expect(component.classObject['go-button--positive']).toBeFalsy(); + it('returns an object that set go-button--primary to true based on buttonVariant', () => { + expect(component.classObject['go-button--primary']).toBeFalsy(); + + component.buttonVariant = 'primary'; + component.ngOnChanges(); + expect(component.classObject['go-button--primary']).toBe(true); + }); + + it('returns an object that set go-button--secondary to true based on buttonVariant', () => { + expect(component.classObject['go-button--secondary']).toBeFalsy(); + + component.buttonVariant = 'secondary'; + component.ngOnChanges(); + expect(component.classObject['go-button--secondary']).toBe(true); + }); + + it('returns an object that set go-button--tertiary to true based on buttonVariant', () => { + expect(component.classObject['go-button--tertiary']).toBeFalsy(); - component.buttonVariant = 'positive'; + component.buttonVariant = 'tertiary'; component.ngOnChanges(); - expect(component.classObject['go-button--positive']).toBe(true); + expect(component.classObject['go-button--tertiary']).toBe(true); }); it('returns an object that set other modifiers to true', () => { @@ -142,4 +162,44 @@ describe('GoButtonComponent', () => { expect(buttonElement.type).toBe(component.buttonType); }); }); + + describe('isAlternativeDark', () => { + it('returns true if useDarkTheme is true and buttonVariant is "secondary"', () => { + component.buttonVariant = 'secondary'; + component.useDarkTheme = true; + + const result: boolean = component['isAlternativeDark'](); + + expect(result).toBe(true); + }); + + it('returns true if useDarkTheme is true and buttonVariant is "tertiary"', () => { + component.buttonVariant = 'tertiary'; + component.useDarkTheme = true; + + const result: boolean = component['isAlternativeDark'](); + + expect(result).toBe(true); + }); + }); + + describe('isAlternativeLight', () => { + it('returns true if useDarkTheme is false and buttonVariant is "secondary"', () => { + component.buttonVariant = 'secondary'; + component.useDarkTheme = false; + + const result: boolean = component['isAlternativeLight'](); + + expect(result).toBe(true); + }); + + it('returns true if useDarkTheme is false and buttonVariant is "tertiary"', () => { + component.buttonVariant = 'tertiary'; + component.useDarkTheme = false; + + const result: boolean = component['isAlternativeLight'](); + + expect(result).toBe(true); + }); + }); }); diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.ts b/projects/go-lib/src/lib/components/go-button/go-button.component.ts index 7d1c6bb06..635e88c5a 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.ts +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.ts @@ -1,20 +1,30 @@ -import { Component, EventEmitter, Input, Output, OnChanges } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnChanges, + OnInit, + Output +} from '@angular/core'; +import { fadeTemplateAnimation } from '../../animations/fade.animation'; @Component({ + animations: [fadeTemplateAnimation], selector: 'go-button', templateUrl: './go-button.component.html', styleUrls: ['./go-button.component.scss'] }) -export class GoButtonComponent implements OnChanges { +export class GoButtonComponent implements OnChanges, OnInit { classObject: object = {}; + loaderClassObject: object = {}; + loaderType: 'light' | 'dark' = 'light'; @Input() buttonDisabled: boolean; @Input() buttonIcon: string; @Input() buttonType: string = 'button'; - @Input() buttonVariant: string; + @Input() buttonVariant: string = 'primary'; @Input() isProcessing: boolean = false; @Input() useDarkTheme: boolean = false; - @Input() useLoader: boolean = false; @Output() handleClick: EventEmitter = new EventEmitter(); @@ -25,20 +35,44 @@ export class GoButtonComponent implements OnChanges { reset(): void { } + ngOnInit(): void { + this.setupButton(); + } + ngOnChanges(): void { - // 'alert' as a variant is depreciated and - // will be removed in a later version - const isNegative: boolean = [ - 'alert', - 'negative' - ].includes(this.buttonVariant); + this.setupButton(); + this.buttonLoader(); + } + + private setupButton(): void { + this.buttonVariant = this.buttonVariant === 'positive' ? 'primary' : this.buttonVariant; this.classObject = { 'go-button--dark': this.useDarkTheme, - 'go-button--loading': this.isProcessing, - 'go-button--negative': isNegative, - 'go-button--neutral': (this.buttonVariant === 'neutral'), - 'go-button--positive': (this.buttonVariant === 'positive') + 'go-button--loading': this.isProcessing }; + + this.classObject['go-button--' + this.buttonVariant] = true; + } + + private buttonLoader(): void { + if (this.isAlternativeDark()) { + this.loaderType = 'light'; + this.loaderClassObject['go-button__loader--dark'] = true; + } else if (this.isAlternativeLight()) { + this.loaderType = 'dark'; + this.loaderClassObject['go-button__loader--light'] = true; + } else { + this.loaderType = 'light'; + this.loaderClassObject['go-button__loader--' + this.buttonVariant] = true; + } + } + + private isAlternativeDark(): boolean { + return (this.buttonVariant === 'secondary' || this.buttonVariant === 'tertiary') && this.useDarkTheme; + } + + private isAlternativeLight(): boolean { + return (this.buttonVariant === 'secondary' || this.buttonVariant === 'tertiary') && !this.useDarkTheme; } } diff --git a/projects/go-lib/src/lib/components/go-button/go-button.module.ts b/projects/go-lib/src/lib/components/go-button/go-button.module.ts index d08dd9988..aef150e37 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.module.ts +++ b/projects/go-lib/src/lib/components/go-button/go-button.module.ts @@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common'; import { GoButtonComponent } from './go-button.component'; import { GoIconModule } from '../go-icon/go-icon.module'; +import { GoLoaderModule } from '../go-loader/go-loader.module'; @NgModule({ declarations: [GoButtonComponent], imports: [ CommonModule, - GoIconModule + GoIconModule, + GoLoaderModule ], exports: [GoButtonComponent] }) diff --git a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss index d3642e339..75d7d322d 100644 --- a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss +++ b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss @@ -7,10 +7,10 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); // icons documentation and applied to our own bem style block class. .go-icon { // sass-lint:disable-block no-vendor-prefixes property-sort-order + display: inline-block; font-family: 'Material Icons'; - font-weight: normal; font-style: normal; - display: inline-block; + font-weight: normal; line-height: 1; text-transform: none; letter-spacing: normal; @@ -31,24 +31,23 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); font-feature-settings: 'liga'; } -.go-icon--light { - @include fill-text-background($color: $theme-light-border); -} +.go-icon--dark { + color: $theme-light-color; -.go-icon--negative { - @include fill-text-background($ui-color-negative-gradient, $ui-color-negative); + &.go-icon--disabled { + color: rgba($theme-light-color, .7); + } } +.go-icon--light, +.go-icon--primary, +.go-icon--negative, .go-icon--neutral { - @include fill-text-background($ui-color-neutral-gradient, $ui-color-neutral); -} + color: $theme-dark-color; -.go-icon--positive { - @include fill-text-background($ui-color-positive-gradient, $ui-color-positive); -} - -.go-icon--disabled { - @include fill-text-background($color: $theme-light-border); + &.go-icon--disabled { + color: rgba($theme-dark-color, .7); + } } @each $name, $size in $icon-sizes { @@ -58,11 +57,11 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); } .go-button__icon { - font-size: 1.25rem; + font-size: 1rem; line-height: 1rem; margin-bottom: -.2rem; - margin-left: -$column-gutter--half; - margin-right: $column-gutter--quarter; + margin-left: -$column-gutter--quarter; + margin-right: $column-gutter--half; margin-top: -.2rem; padding: .2rem 0; vertical-align: top; diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss b/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss index f5811ef54..f53f9700d 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss @@ -2,6 +2,7 @@ @import '../../../styles/mixins'; $loader-sizes: ( + xsmall: 1.5rem, small: 50px, medium: 100px, large: 150px diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts b/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts index 72b3309d9..ddc455ebe 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts @@ -26,10 +26,21 @@ describe('GoLoaderComponent', () => { }); describe('loaderClasses()', () => { + it('adds an xsmall modifier class based on loaderSize', () => { + component.loaderSize = 'xsmall'; + + const containerClasses: object = component.loaderClasses(); + expect(containerClasses['go-loader--xsmall']).toBe(true); + expect(containerClasses['go-loader--small']).toBe(false); + expect(containerClasses['go-loader--medium']).toBe(false); + expect(containerClasses['go-loader--large']).toBe(false); + }); + it('adds a small modifier class based on loaderSize', () => { component.loaderSize = 'small'; - const containerClasses = component.loaderClasses(); + const containerClasses: object = component.loaderClasses(); + expect(containerClasses['go-loader--xsmall']).toBe(false); expect(containerClasses['go-loader--small']).toBe(true); expect(containerClasses['go-loader--medium']).toBe(false); expect(containerClasses['go-loader--large']).toBe(false); @@ -38,7 +49,8 @@ describe('GoLoaderComponent', () => { it('adds a medium modifier class based on loaderSize', () => { component.loaderSize = 'medium'; - const containerClasses = component.loaderClasses(); + const containerClasses: object = component.loaderClasses(); + expect(containerClasses['go-loader--xsmall']).toBe(false); expect(containerClasses['go-loader--small']).toBe(false); expect(containerClasses['go-loader--medium']).toBe(true); expect(containerClasses['go-loader--large']).toBe(false); @@ -47,7 +59,8 @@ describe('GoLoaderComponent', () => { it('adds a large modifier class based on loaderSize', () => { component.loaderSize = 'large'; - const containerClasses = component.loaderClasses(); + const containerClasses: object = component.loaderClasses(); + expect(containerClasses['go-loader--xsmall']).toBe(false); expect(containerClasses['go-loader--small']).toBe(false); expect(containerClasses['go-loader--medium']).toBe(false); expect(containerClasses['go-loader--large']).toBe(true); @@ -56,7 +69,7 @@ describe('GoLoaderComponent', () => { it('adds a neutral modifier class based on loaderType', () => { component.loaderType = 'neutral'; - const containerClasses = component.loaderClasses(); + const containerClasses: object = component.loaderClasses(); expect(containerClasses['go-loader--neutral']).toBe(true); expect(containerClasses['go-loader--negative']).toBe(false); expect(containerClasses['go-loader--positive']).toBe(false); @@ -65,7 +78,7 @@ describe('GoLoaderComponent', () => { it('adds a negative modifier class based on loaderType', () => { component.loaderType = 'negative'; - const containerClasses = component.loaderClasses(); + const containerClasses: object = component.loaderClasses(); expect(containerClasses['go-loader--neutral']).toBe(false); expect(containerClasses['go-loader--negative']).toBe(true); expect(containerClasses['go-loader--positive']).toBe(false); @@ -74,7 +87,7 @@ describe('GoLoaderComponent', () => { it('adds a positive modifier class based on loaderType', () => { component.loaderType = 'positive'; - const containerClasses = component.loaderClasses(); + const containerClasses: object = component.loaderClasses(); expect(containerClasses['go-loader--neutral']).toBe(false); expect(containerClasses['go-loader--negative']).toBe(false); expect(containerClasses['go-loader--positive']).toBe(true); diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts b/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts index 9828c188b..6687a2c40 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts @@ -19,6 +19,7 @@ export class GoLoaderComponent { loaderClasses(): object { return { + 'go-loader--xsmall': this.loaderSize === 'xsmall', 'go-loader--small': this.loaderSize === 'small', 'go-loader--medium': this.loaderSize === 'medium', 'go-loader--large': this.loaderSize === 'large', diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html index 1e81aa30d..75d6f2fdd 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html @@ -36,8 +36,9 @@

    buttonIcon

    buttonType

    Changes the type attribute of the button. This attribute - defaults to "button" but other options are necessary when - doing things like submitting or resetting forms. + defaults to button but other options are necessary when + doing things like submitting (submit) + or resetting (reset) forms.

    handleClick

    @@ -55,16 +56,17 @@

    buttonVariant

    modifications:

      -
    1. Default: .go-button
      2. -
    2. Negative: .go-button--negative
      3. -
    3. Neutral: .go-button--neutral
      4. -
    4. Positive: .go-button--positive
      5. +
    5. Primary (default): primary
      6. +
    6. Secondary: secondary
      7. +
    7. Tertiary: tertiary
      8. +
    8. Negative: negative
      9. +
    9. Neutral: neutral

    isProcessing

    Turns the loading state on/off. It is recommended to use this when - processing data that will take longer than 250ms. Examples: + processing data that will take longer than ~250ms. Examples: submitting a form, sorting data, refreshing data from the server, etc.

    @@ -81,22 +83,25 @@

    useDarkTheme

    - +
    + +
    + + -

    Default Button

    +

    Primary Button

    - The default button is preferred when the action being performed - is of little importance. Ideally, the button itself describes - what it does. For example, a button to close a modal would be - a good use case for the default button. It isn't important or - informational, it is just a simple action. + The Primary button is the default button variant and should be used to indicate + the primary action on a page, such as a "save" button.

    - +
    - Default + Primary
    Disabled @@ -108,6 +113,54 @@

    Default Button

    + + +

    Secondary Button

    +     + +

    + The Secondary button variant should be used to indicate a secondary action + on a page. Examples could be: a refresh, opening modals, etc. +

    + +
    +
    + Secondary +
    +
    + Disabled +
    +
    + With Icon +
    +
    +     +     + + + +

    Tertiary Button

    +     + +

    + The Tertiary button variant should be used after both a primary and secondary variants have been used. + It should generally only appear next to secondary variant buttons. +

    + +
    +
    + Tertiary +
    +
    + Disabled +
    +
    + With Icon +
    +
    +     +     +

    Negative Buttons

    @@ -145,7 +198,7 @@

    Neutral Buttons

    an action as being informational. Opening up a chat modal or sending a user to an external resource might be a good example of when to use this button. It could also be used to guide a - user towards an action that isn't necessarily positive, but still + user towards an action that isn't necessarily required, but still important.

    @@ -163,33 +216,6 @@

    Neutral Buttons

         - - -

    Positive Buttons

    -     - -

    - Positive buttons are displayed in blue. Use positive buttons to - designate an action as being positive. Creating a resource or - submitting a form might be a good example of when to use this - button variant. It could also be used to guide a user towards - an action we want them to make, such as signing up for something -

    - -
    -
    - Positive -
    -
    - Disabled -
    -
    - With Icon -
    -
    -     -     -

    Button with loader

    @@ -198,7 +224,7 @@

    Button with loader

    Loading buttons display the loading animation inside the button. By default this is false. It is recommended to use - this when processing data that will take longer than 250ms. + this when processing data that will take longer than ~250ms. Examples might include submitting a form, sorting data, refreshing data from the server, etc. While in this state, a button will additionally be disabled to prevent the action @@ -212,12 +238,34 @@

    View
    + Primary + +
    +
    + + Secondary + +
    +
    + - Default Loading + Tertiary
    @@ -242,17 +290,6 @@
    View
    Neutral Loading
    -
    - - Positive Loading - -
    @@ -283,16 +320,34 @@

    Dark buttons

    - Default + Primary
    - + + Secondary + +
    +
    + + Tertiary + +
    +
    + With Icon
    @@ -309,13 +364,10 @@

    Dark buttons

    - - Positive Disabled + + Disabled
    diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts index ae792aa66..64b7fb41d 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.ts @@ -8,16 +8,22 @@ import { GoButtonComponent } from '../../../../../../../go-lib/src/public_api'; }) export class ButtonDocsComponent { - @ViewChild('defaultButton') defaultButton: GoButtonComponent; + @ViewChild('primaryButton') primaryButton: GoButtonComponent; + @ViewChild('secondaryButton') secondaryButton: GoButtonComponent; + @ViewChild('secondaryDarkButton') secondaryDarkButton: GoButtonComponent; + @ViewChild('tertiaryButton') tertiaryButton: GoButtonComponent; + @ViewChild('tertiaryDarkButton') tertiaryDarkButton: GoButtonComponent; @ViewChild('negativeButton') negativeButton: GoButtonComponent; @ViewChild('negativeDarkButton') negativeDarkButton: GoButtonComponent; @ViewChild('neutralButton') neutralButton: GoButtonComponent; - @ViewChild('positiveButton') positiveButton: GoButtonComponent; - defaultButtonLoading: boolean = false; + primaryButtonLoading: boolean = false; + secondaryButtonLoading: boolean = false; + secondaryDarkButtonLoading: boolean = false; + tertiaryButtonLoading: boolean = false; + tertiaryDarkButtonLoading: boolean = false; negativeButtonLoading: boolean = false; neutralButtonLoading: boolean = false; - positiveButtonLoading: boolean = false; negativeDarkButtonLoading: boolean = false; pageTitle: string = 'Button'; @@ -33,17 +39,38 @@ export class ButtonDocsComponent { @Output() handleClick = new EventEmitter(); `; - defaultExample: string = ` - Default + variantNotice: string = ` + The default buttonVariant is 'primary', however in many cases the variant that should be used will be different. + It is dependent upon the usage context for when to use each variant. Refer to the mock ups for proper usage or + reach out to UX for clarification. + `; + + primaryExample: string = ` + Primary + + Disabled + + With Icon + `; + + secondaryExample: string = ` + Secondary Disabled With Icon `; + tertiaryExample: string = ` + Tertiary + + Disabled + + With Icon + `; + negativeExample: string = this.buttonTemplate('negative', 'delete'); neutralExample: string = this.buttonTemplate('neutral', 'live_help'); - positiveExample: string = this.buttonTemplate('positive', 'check'); loadingExampleTS: string = ` import { GoButtonComponent } from 'goponents'; @@ -66,7 +93,7 @@ export class ButtonDocsComponent { darkButtonExample: string = ` - Default + Primary `; From a34187f2c56cf6d1b4a2efca52e3529b685c01e8 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 14 Oct 2019 11:30:35 -0400 Subject: [PATCH 38/98] Change concatenation to interpolation on button function --- .../go-lib/src/lib/components/go-button/go-button.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.ts b/projects/go-lib/src/lib/components/go-button/go-button.component.ts index 635e88c5a..13849ebaa 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.ts +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.ts @@ -64,7 +64,7 @@ export class GoButtonComponent implements OnChanges, OnInit { this.loaderClassObject['go-button__loader--light'] = true; } else { this.loaderType = 'light'; - this.loaderClassObject['go-button__loader--' + this.buttonVariant] = true; + this.loaderClassObject[`go-button__loader--${this.buttonVariant}`] = true; } } From 1a41c1a48656913171d317ee186da9cdc86b7203 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Mon, 14 Oct 2019 13:41:55 -0400 Subject: [PATCH 39/98] Icon Button Documentation (#268) --- .../go-style-guide/src/app/app.component.ts | 1 + .../icon-button-docs.component.html | 146 ++++++++++++++++++ .../icon-button-docs.component.spec.ts | 25 +++ .../icon-button-docs.component.ts | 50 ++++++ .../ui-kit/routes/ui-kit-routing.module.ts | 2 + .../src/app/features/ui-kit/ui-kit.module.ts | 2 + 6 files changed, 226 insertions(+) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.spec.ts create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.ts diff --git a/projects/go-style-guide/src/app/app.component.ts b/projects/go-style-guide/src/app/app.component.ts index ace134fc5..b859c7d4f 100644 --- a/projects/go-style-guide/src/app/app.component.ts +++ b/projects/go-style-guide/src/app/app.component.ts @@ -30,6 +30,7 @@ export class AppComponent { { route: 'ui-kit/configuration', routeTitle: 'Configuration' }, { route: 'ui-kit/copy', routeTitle: 'Copy' }, { route: 'ui-kit/forms', routeTitle: 'Forms' }, + { route: 'ui-kit/icon-button', routeTitle: 'Icon Button' }, { route: 'ui-kit/layout', routeTitle: 'Layout' }, { route: 'ui-kit/loader', routeTitle: 'Loader' }, { route: 'ui-kit/icon', routeTitle: 'Icon' }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.html new file mode 100644 index 000000000..c4c1a999d --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.html @@ -0,0 +1,146 @@ +
    +

    {{ pageTitle }}

    +
    +
    +
    + + +
    +
    + +

    Usage

    +

    + The <go-icon-button> + component should be used for buttons that have no text. +

    + + +

    Bindings

    + +
    +
    +

    buttonDisabled

    +

    + Disables the button. This should be handled by the parent + component. +

    + +

    buttonIcon

    +

    + Changes the icon that is displayed within the button. See the + Material Design System Icons + page for available icons. +

    + +

    buttonSize

    +

    + Changes the font-size property of the icon. + This attribute defaults to "small", and the size options are as follows: +

    +
      +
    1. small (1 rem)
      2. +
    2. medium (1.5 rem)
      3. +
    3. large (2 rem)
      4. +
    + +

    buttonTitle

    +

    + Changes the title attribute of the button, + causing a tooltip to be displayed when hovering over the button. +

    +
    +
    +     +     +
    + + + +

    Button Disabled

    +     + +
    +
    + +
    +
    + +
    +
    +     +     + + + +

    Button Icon

    +     + +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +     +     + + + +

    Button Size

    +     + +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +     +     + + + +

    Button Title

    +     + +

    Hover the icons to display their tooltips.

    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +     +     +
    + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.spec.ts b/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.spec.ts new file mode 100644 index 000000000..5e1638ab1 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IconButtonDocsComponent } from './icon-button-docs.component'; + +describe('IconButtonDocsComponent', () => { + let component: IconButtonDocsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ IconButtonDocsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(IconButtonDocsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.ts new file mode 100644 index 000000000..fde1b46ec --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/icon-button-docs/icon-button-docs.component.ts @@ -0,0 +1,50 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-icon-button-docs', + templateUrl: './icon-button-docs.component.html' +}) +export class IconButtonDocsComponent { + pageTitle: string = 'Icon Button'; + + componentBindings: string = ` + @Input() buttonDisabled: boolean; + @Input() buttonIcon: string; + @Input() buttonSize: string = 'small'; + @Input() buttonTitle: string; + + @Output() handleClick: EventEmitter = new EventEmitter(); + `; + + disabledExample: string = ` + + `; + + iconExample: string = ` + + + + + + `; + + sizeExample: string = ` + + + + + + `; + + titleExample: string = ` + + + + + + `; + + public testClick(): void { + alert('Button clicked!'); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index 977b60e52..739145937 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -11,6 +11,7 @@ import { CopyDocsComponent } from '../components/copy-docs/copy-docs.component'; import { DatepickerDocsComponent } from '../components/form-docs/components/datepicker-docs/datepicker-docs.component'; import { FormDocsComponent } from '../components/form-docs/form-docs.component'; import { FormsOverviewComponent } from '../components/form-docs/components/forms-overview/forms-overview.component'; +import { IconButtonDocsComponent } from '../components/icon-button-docs/icon-button-docs.component'; import { IconDocsComponent } from '../components/icon-docs/icon-docs.component'; import { InputDocsComponent } from '../components/form-docs/components/input-docs/input-docs.component'; import { ModalDocsComponent } from '../components/modal-docs/modal-docs.component'; @@ -64,6 +65,7 @@ const routes: Routes = [ { path: 'select', component: SelectDocsComponent }, { path: 'textarea', component: TextAreaDocsComponent } ]}, + { path: 'ui-kit/icon-button', component: IconButtonDocsComponent }, { path: 'ui-kit/layout', component: LayoutDocsComponent, children: [ { path: '', component: LayoutOverviewComponent }, { path: 'header', component: LayoutHeaderComponent }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index daf22cd6a..2353e4682 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -43,6 +43,7 @@ import { DatepickerDocsComponent } from './components/form-docs/components/datep import { FormControlDocsComponent } from './components/form-docs/components/form-control-docs/form-control-docs.component'; import { FormDocsComponent } from './components/form-docs/form-docs.component'; import { FormsOverviewComponent } from './components/form-docs/components/forms-overview/forms-overview.component'; +import { IconButtonDocsComponent } from './components/icon-button-docs/icon-button-docs.component'; import { IconDocsComponent } from './components/icon-docs/icon-docs.component'; import { InputDocsComponent } from './components/form-docs/components/input-docs/input-docs.component'; import { ModalDocsComponent } from './components/modal-docs/modal-docs.component'; @@ -112,6 +113,7 @@ import { AccordionOverviewComponent } from './components/accordion-docs/componen DatepickerDocsComponent, FormDocsComponent, FormsOverviewComponent, + IconButtonDocsComponent, IconDocsComponent, InputDocsComponent, ModalDocsComponent, From dcf5a27dbf6d773ae6d2c55f16b742789d1f179b Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Mon, 14 Oct 2019 15:47:19 -0400 Subject: [PATCH 40/98] Add appendTo input to go-select (#260) --- .../go-select/go-select.component.html | 1 + .../go-select/go-select.component.ts | 1 + .../select-docs/select-docs.component.html | 26 ++++++++++++++ .../select-docs/select-docs.component.ts | 36 +++++++++++++++++++ .../src/app/features/ui-kit/ui-kit.module.ts | 4 ++- projects/go-tester/src/app/app.component.ts | 25 ++++++++++--- projects/go-tester/src/app/app.module.ts | 4 ++- 7 files changed, 91 insertions(+), 6 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.html b/projects/go-lib/src/lib/components/go-select/go-select.component.html index 52f8ac94a..59afb637f 100644 --- a/projects/go-lib/src/lib/components/go-select/go-select.component.html +++ b/projects/go-lib/src/lib/components/go-select/go-select.component.html @@ -6,6 +6,7 @@ Code

    + + +

    Component appendTo

    +     + +

    + The @Input() appendTo: string; binding is useful when implementing a + go-select within a go-modal. + Setting appendTo to 'body' will prevent + the modal from closing automatically upon selecting an item from the select dropdown. +

    +
    +
    +

    View

    + Click Me +
    +
    +

    Code

    + +
    +
    +     +     diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts index 272575af3..4cda828c0 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; +import { GoModalService, GoSelectComponent } from 'projects/go-lib/src/public_api'; +import { ModalTestComponent } from '../../../modal-test/modal-test.component'; @Component({ templateUrl: './select-docs.component.html' @@ -9,6 +11,7 @@ export class SelectDocsComponent implements OnInit { { value: 1, name: 'Reeses' }, { value: 2, name: 'Mints' } ]; + select1: FormControl = new FormControl(''); select2: FormControl = new FormControl(''); select3: FormControl = new FormControl(''); @@ -18,6 +21,7 @@ export class SelectDocsComponent implements OnInit { select7: FormControl = new FormControl(''); select8: FormControl = new FormControl(''); select9: FormControl = new FormControl(''); + select10: FormControl = new FormControl(''); hints: Array = ['please select you favorite candy']; @@ -137,6 +141,24 @@ export class SelectDocsComponent implements OnInit { loadingSelectOptions: boolean = true; `; + select10OpenModalCode: string = ` + openModal(): void { + this.goModalService.openModal( + GoSelectComponent, + { + appendTo: 'body', + bindLabel: 'name', + bindValue: 'value', + control: this.select10, + items: this.items, + label: 'Favorite Candy' + } + ); + } + `; + + constructor(private goModalService: GoModalService) { } + ngOnInit(): void { setTimeout((): void => { this.select5.setErrors([ @@ -150,4 +172,18 @@ export class SelectDocsComponent implements OnInit { ]); }); } + + openModal(): void { + this.goModalService.openModal( + GoSelectComponent, + { + appendTo: 'body', + bindLabel: 'name', + bindValue: 'value', + control: this.select10, + items: this.items, + label: 'Favorite Candy', + } + ); + } } diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 2353e4682..e1b9f46a7 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -25,7 +25,8 @@ import { GoTableModule, GoTextAreaModule, GoToasterService, - GoToastModule + GoToastModule, + GoSelectComponent } from '../../../../../go-lib/src/public_api'; // Module Routes @@ -145,6 +146,7 @@ import { AccordionOverviewComponent } from './components/accordion-docs/componen ], entryComponents: [ BasicTestComponent, + GoSelectComponent, ModalTestComponent ], providers: [ diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index 30ef40a53..d3b163041 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -2,15 +2,16 @@ import { Component, OnInit } from '@angular/core'; import { GoConfigService, - GoIconComponent, GoModalService, GoOffCanvasService, + GoSelectComponent, GoSideNavService, GoToasterService, NavGroup, - NavItem + NavItem, } from '../../../go-lib/src/public_api'; import { OffCanvasTestComponent } from './components/off-canvas-test/off-canvas-test.component'; +import { FormControl } from '@angular/forms'; @Component({ selector: 'app-root', @@ -46,6 +47,19 @@ export class AppComponent implements OnInit { } ]; + selectControl: FormControl = new FormControl(''); + + selectItems: any = [ + { value: 1, label: 'Reeses' }, + { value: 2, label: 'Mints' }, + { value: 3, label: 'Snickers' }, + { value: 4, label: 'KitKat' }, + { value: 5, label: 'Milky Way' }, + { value: 6, label: 'Sour Patch Kids' }, + { value: 7, label: 'Gobstoppers' }, + { value: 8, label: 'Spinach' } + ]; + constructor( private goConfigService: GoConfigService, private goToasterService: GoToasterService, @@ -71,9 +85,12 @@ export class AppComponent implements OnInit { openModal(): void { this.goModalService.openModal( - GoIconComponent, + GoSelectComponent, { - icon: 'alarm' + appendTo: 'body', + control: this.selectControl, + items: this.selectItems, + label: 'Testing the appendTo input' } ); } diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index 0dcb01307..31a1a0a4c 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -24,13 +24,14 @@ import { GoOffCanvasModule, GoRadioModule, GoSearchModule, + GoSelectComponent, GoSelectModule, GoSideNavModule, GoSwitchToggleModule, GoTableModule, GoTextAreaModule, GoToasterModule, - GoToastModule + GoToastModule, } from '../../../go-lib/src/public_api'; import { AppRoutesModule } from './app-routing.module'; @@ -95,6 +96,7 @@ import { AppGuard } from './app.guard'; ], entryComponents: [ GoButtonComponent, + GoSelectComponent, OffCanvasTestComponent ], bootstrap: [AppComponent] From 19b831db5f5e2a832a1dd10175a3ae763464244f Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Wed, 9 Oct 2019 09:18:43 -0400 Subject: [PATCH 41/98] Update box-shadows per https://github.com/mobi/goponents/issues/197 --- .../go-action-sheet/go-action-sheet.component.scss | 4 ++-- .../src/lib/components/go-card/go-card.component.scss | 2 +- .../src/lib/components/go-header/go-header.component.scss | 2 +- .../src/lib/components/go-modal/go-modal.component.scss | 2 +- .../src/lib/components/go-search/go-search.component.scss | 2 +- .../src/lib/components/go-table/go-table.component.scss | 2 +- .../src/lib/components/go-toast/go-toast.component.scss | 4 ++-- projects/go-lib/src/styles/_variables.scss | 7 ++++++- .../app/shared/components/sub-nav/sub-nav.component.scss | 4 ++-- 9 files changed, 17 insertions(+), 12 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss index dc6a849db..fbea40c77 100644 --- a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss @@ -26,7 +26,7 @@ go-action-sheet-button { background: $theme-light-bg; border: 1px solid $theme-light-border; border-radius: $global-radius; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + box-shadow: $global-box-shadow--shell-dropdown; left: 50%; opacity: 0; position: absolute; @@ -40,7 +40,7 @@ go-action-sheet-button { background: $theme-light-bg; border: 1px solid $theme-light-border; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + box-shadow: $global-box-shadow--shell-dropdown; content: " "; height: 15px; left: calc(50% - 7.5px); diff --git a/projects/go-lib/src/lib/components/go-card/go-card.component.scss b/projects/go-lib/src/lib/components/go-card/go-card.component.scss index 272053318..d2b1042ec 100644 --- a/projects/go-lib/src/lib/components/go-card/go-card.component.scss +++ b/projects/go-lib/src/lib/components/go-card/go-card.component.scss @@ -4,7 +4,7 @@ .card { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--normal; display: flex; flex-direction: column; padding: 1rem; diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.scss b/projects/go-lib/src/lib/components/go-header/go-header.component.scss index 119fae2ef..ab757166f 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.scss +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.scss @@ -5,7 +5,7 @@ $breakpoint-header-mobile-small: 500px; .go-header { background: $theme-light-bg; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--shell-dropdown; display: flex; height: $header-height; justify-content: space-between; diff --git a/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss b/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss index 22e8ad8b4..d76d6fba3 100644 --- a/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss +++ b/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss @@ -20,7 +20,7 @@ .go-modal__container { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--normal; color: $theme-light-color; max-height: 80%; max-width: 32.5rem; diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.scss b/projects/go-lib/src/lib/components/go-search/go-search.component.scss index 7970d3344..761b356b0 100644 --- a/projects/go-lib/src/lib/components/go-search/go-search.component.scss +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.scss @@ -42,7 +42,7 @@ .go-search__container--active { border: 0; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--search; padding: 0.5rem; top: calc(50% - (2.875rem / 2)); // height of input with padding, halfed diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.scss b/projects/go-lib/src/lib/components/go-table/go-table.component.scss index eb2b2f2cf..ae6528692 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.scss +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.scss @@ -4,7 +4,7 @@ .go-table-container { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--normal; position: relative; } diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss index 556f9f204..282c3c84c 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss @@ -4,7 +4,7 @@ .go-toast { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--normal; display: flex; position: relative; } @@ -25,7 +25,7 @@ align-items: center; background-color: $base-light-secondary; border-radius: 50%; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--normal; color: $base-light; display: flex; font-size: 1rem; diff --git a/projects/go-lib/src/styles/_variables.scss b/projects/go-lib/src/styles/_variables.scss index a0e4aaf47..10eab0fc8 100644 --- a/projects/go-lib/src/styles/_variables.scss +++ b/projects/go-lib/src/styles/_variables.scss @@ -6,7 +6,12 @@ $global-radius: 4px; $global-radius--round: 100%; $global-transition-timing: cubic-bezier(.25, .8, .25, 1); $global-transition-duration: .25s; -$global-box-shadow: 0 3px 6px rgba(0, 0, 0, .2); + +// Box Shadows +$global-box-shadow--normal: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.20); +$global-box-shadow--search: 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.20); +$global-box-shadow--shell: 0 7px 14px 0 rgba(65, 54, 94, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.07); +$global-box-shadow--shell-dropdown: 0 1px 2px 0 rgba(0, 0, 0, 0.20); // Structural $column-gutter: 1rem; diff --git a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss index 7cf1f6ce2..f45bc0a1e 100644 --- a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss +++ b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss @@ -34,7 +34,7 @@ z-index: 10; &.sub-nav-submenu--mobile-show { - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--normal; right: 0; } } @@ -45,7 +45,7 @@ background: $theme-light-bg; border-radius: $global-radius 0 0 $global-radius; - box-shadow: $global-box-shadow; + box-shadow: $global-box-shadow--normal; cursor: pointer; display: none; height: 3rem; From 74240dbf4370cff8254082b1604cbf58c068029b Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Mon, 14 Oct 2019 10:49:21 -0400 Subject: [PATCH 42/98] update box-shadow variable names to be consistent with DSM --- .../go-action-sheet/go-action-sheet.component.scss | 4 ++-- .../src/lib/components/go-card/go-card.component.scss | 2 +- .../src/lib/components/go-header/go-header.component.scss | 2 +- .../src/lib/components/go-modal/go-modal.component.scss | 2 +- .../src/lib/components/go-search/go-search.component.scss | 2 +- .../src/lib/components/go-table/go-table.component.scss | 2 +- .../src/lib/components/go-toast/go-toast.component.scss | 4 ++-- projects/go-lib/src/styles/_variables.scss | 8 ++++---- .../app/shared/components/sub-nav/sub-nav.component.scss | 4 ++-- 9 files changed, 15 insertions(+), 15 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss index fbea40c77..01d3f83d5 100644 --- a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss @@ -26,7 +26,7 @@ go-action-sheet-button { background: $theme-light-bg; border: 1px solid $theme-light-border; border-radius: $global-radius; - box-shadow: $global-box-shadow--shell-dropdown; + box-shadow: $global-box-shadow--small; left: 50%; opacity: 0; position: absolute; @@ -40,7 +40,7 @@ go-action-sheet-button { background: $theme-light-bg; border: 1px solid $theme-light-border; - box-shadow: $global-box-shadow--shell-dropdown; + box-shadow: $global-box-shadow--small; content: " "; height: 15px; left: calc(50% - 7.5px); diff --git a/projects/go-lib/src/lib/components/go-card/go-card.component.scss b/projects/go-lib/src/lib/components/go-card/go-card.component.scss index d2b1042ec..d7eff8284 100644 --- a/projects/go-lib/src/lib/components/go-card/go-card.component.scss +++ b/projects/go-lib/src/lib/components/go-card/go-card.component.scss @@ -4,7 +4,7 @@ .card { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow--normal; + box-shadow: $global-box-shadow--regular; display: flex; flex-direction: column; padding: 1rem; diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.scss b/projects/go-lib/src/lib/components/go-header/go-header.component.scss index ab757166f..524d718f3 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.scss +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.scss @@ -5,7 +5,7 @@ $breakpoint-header-mobile-small: 500px; .go-header { background: $theme-light-bg; - box-shadow: $global-box-shadow--shell-dropdown; + box-shadow: $global-box-shadow--small; display: flex; height: $header-height; justify-content: space-between; diff --git a/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss b/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss index d76d6fba3..9f46a8029 100644 --- a/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss +++ b/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss @@ -20,7 +20,7 @@ .go-modal__container { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow--normal; + box-shadow: $global-box-shadow--regular; color: $theme-light-color; max-height: 80%; max-width: 32.5rem; diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.scss b/projects/go-lib/src/lib/components/go-search/go-search.component.scss index 761b356b0..e776d4079 100644 --- a/projects/go-lib/src/lib/components/go-search/go-search.component.scss +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.scss @@ -42,7 +42,7 @@ .go-search__container--active { border: 0; - box-shadow: $global-box-shadow--search; + box-shadow: $global-box-shadow--inset; padding: 0.5rem; top: calc(50% - (2.875rem / 2)); // height of input with padding, halfed diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.scss b/projects/go-lib/src/lib/components/go-table/go-table.component.scss index ae6528692..d2f566343 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.scss +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.scss @@ -4,7 +4,7 @@ .go-table-container { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow--normal; + box-shadow: $global-box-shadow--regular; position: relative; } diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss index 282c3c84c..92e1298f3 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss @@ -4,7 +4,7 @@ .go-toast { background: $theme-light-bg; border-radius: $global-radius; - box-shadow: $global-box-shadow--normal; + box-shadow: $global-box-shadow--regular; display: flex; position: relative; } @@ -25,7 +25,7 @@ align-items: center; background-color: $base-light-secondary; border-radius: 50%; - box-shadow: $global-box-shadow--normal; + box-shadow: $global-box-shadow--regular; color: $base-light; display: flex; font-size: 1rem; diff --git a/projects/go-lib/src/styles/_variables.scss b/projects/go-lib/src/styles/_variables.scss index 10eab0fc8..8e9159634 100644 --- a/projects/go-lib/src/styles/_variables.scss +++ b/projects/go-lib/src/styles/_variables.scss @@ -8,10 +8,10 @@ $global-transition-timing: cubic-bezier(.25, .8, .25, 1); $global-transition-duration: .25s; // Box Shadows -$global-box-shadow--normal: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.20); -$global-box-shadow--search: 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.20); -$global-box-shadow--shell: 0 7px 14px 0 rgba(65, 54, 94, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.07); -$global-box-shadow--shell-dropdown: 0 1px 2px 0 rgba(0, 0, 0, 0.20); +$global-box-shadow--regular: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.20); +$global-box-shadow--inset: 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.20); +$global-box-shadow--large: 0 7px 14px 0 rgba(65, 54, 94, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.07); +$global-box-shadow--small: 0 1px 2px 0 rgba(0, 0, 0, 0.20); // Structural $column-gutter: 1rem; diff --git a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss index f45bc0a1e..dd357d91f 100644 --- a/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss +++ b/projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.component.scss @@ -34,7 +34,7 @@ z-index: 10; &.sub-nav-submenu--mobile-show { - box-shadow: $global-box-shadow--normal; + box-shadow: $global-box-shadow--regular; right: 0; } } @@ -45,7 +45,7 @@ background: $theme-light-bg; border-radius: $global-radius 0 0 $global-radius; - box-shadow: $global-box-shadow--normal; + box-shadow: $global-box-shadow--regular; cursor: pointer; display: none; height: 3rem; From b49cfb43199b98e645d829908e2700fc4dcb5103 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 15 Oct 2019 09:09:53 -0400 Subject: [PATCH 43/98] Chore Switch Toggle Docs --- .../datepicker-docs.component.ts | 5 + .../input-docs/input-docs.component.ts | 5 + .../select-docs/select-docs.component.ts | 9 +- .../switch-toggle-docs.component.html | 227 ++++++++++++++++++ .../switch-toggle-docs.component.ts | 103 ++++++++ .../text-area-docs.component.ts | 5 + .../form-docs/form-docs.component.ts | 3 +- .../ui-kit/routes/ui-kit-routing.module.ts | 2 + .../src/app/features/ui-kit/ui-kit.module.ts | 6 +- 9 files changed, 361 insertions(+), 4 deletions(-) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.ts diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts index 6cf185c37..69611c35f 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/datepicker-docs/datepicker-docs.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; @Component({ templateUrl: './datepicker-docs.component.html' @@ -135,6 +136,10 @@ export class DatepickerDocsComponent implements OnInit { > `; + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Datepicker'; + } + ngOnInit(): void { setTimeout((): void => { this.dob5.setErrors([ diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts index ddc1f0633..f65611ff3 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/input-docs/input-docs.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; @Component({ templateUrl: './input-docs.component.html' @@ -93,6 +94,10 @@ export class InputDocsComponent implements OnInit { > `; + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Input'; + } + ngOnInit(): void { setTimeout((): void => { this.name5.setErrors([ diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts index 4cda828c0..e173a410a 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { GoModalService, GoSelectComponent } from 'projects/go-lib/src/public_api'; -import { ModalTestComponent } from '../../../modal-test/modal-test.component'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; @Component({ templateUrl: './select-docs.component.html' @@ -157,7 +157,12 @@ export class SelectDocsComponent implements OnInit { } `; - constructor(private goModalService: GoModalService) { } + constructor( + private goModalService: GoModalService, + private subNavService: SubNavService + ) { + this.subNavService.pageTitle = 'Select'; + } ngOnInit(): void { setTimeout((): void => { diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.html new file mode 100644 index 000000000..d1e0ccce2 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.html @@ -0,0 +1,227 @@ +
    + + + +

    Component Control

    +     + +

    + The switch toggle component requires a FormControl + and a label to work properly. + The FormControl can be passed in via the [control] + attribute on the <go-input> component. The label is just a string. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + +
    +
    +     +     + + +

    Component Label

    +     + +

    + All form components include an @Input() label: string; + that can be used to add a label to the component. + In addition to displaying an HTML label, the text passed + in via the [label] + attribute is used to generate a unique ID to associate the + label with the textarea. If no label is passed in, a generic, + but still unique ID will be generated. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + + +
    +
    +     +     + + +

    Component Key

    +     + +

    + As stated above the label attribute is used to generate a + unique ID to associate the label with the switch toggle. As this might + not be desired, the @Input() key: string; + can be used to configure the ID attribute directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the switch toggle and + the associated label. +

    +
    +
    +

    View

    + +
    +
    +

    Code

    + +
    +
    +

    Example Output

    +

    + Notice in the below example output that the key has been assigned + to both the id attribute on + the toggle and the for attribute + on the label. +

    + +
    +
    +     +     + + +

    Component Hints

    +     + +

    + Form hints exist to help give more information about the + toggles they are attached to. The @Input() key: Array<string> + can be used to pass in an array of hints to the component. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + + +
    +
    +     +     + + +

    Component Errors

    +     + +

    + FormControls all have a consistent way of setting errors + via the setErrors() function. + All goponents use this API to display errors on our components, but the + data needs to be displayed in a specific structure. +

    +

    + By default the error type is set to "Error", however this can be + overridden as shown below. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + + +
    +
    +     +     + + +

    Label Position

    +     + +

    + By default the label for the switch toggle appears after the toggle. + If there is a case where the label needs to be positioned before the switch, + there is a binding available for that. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + + +
    +
    +     +     + + +

    Theme

    +     + +

    + By default the theme for the switch toggle is 'light', but there could be + and instance where we need a 'dark' themed toggle. There is a binding + available for that. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + + +
    +
    +     +     +
    \ No newline at end of file diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.ts new file mode 100644 index 000000000..15a1e655e --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component.ts @@ -0,0 +1,103 @@ +import { Component, OnInit } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; +import { FormControl } from '@angular/forms'; + +@Component({ + selector: 'app-switch-toggle-docs', + templateUrl: './switch-toggle-docs.component.html' +}) +export class SwitchToggleDocsComponent implements OnInit { + + control1: FormControl = new FormControl(''); + control2: FormControl = new FormControl(''); + control3: FormControl = new FormControl(''); + control4: FormControl = new FormControl(''); + control5: FormControl = new FormControl(''); + control6: FormControl = new FormControl(''); + control7: FormControl = new FormControl(''); + + hints: Array = ['Toggling this does something.']; + + controlEx: string = ` + + `; + + labelEx: string = ` + + `; + + keyEx: string = ` + + + `; + + customKeyEx: string = ` + + + `; + + hintsExHtml: string = ` + + + `; + + hintsExTs: string = ` + hints: Array = [ + 'Toggling this does something.' + ]; + `; + + errorsExHtml: string = ` + + + `; + + errorsExTs: string = ` + this.control5.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + `; + + labelPositionEx: string = ` + + + `; + + themeEx: string = ` + + + `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Switch Toggle'; + } + + ngOnInit(): void { + setTimeout((): void => { + this.control5.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + }); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts index 6713a8875..4dbd0f88d 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; @Component({ templateUrl: './text-area-docs.component.html' @@ -96,6 +97,10 @@ export class TextAreaDocsComponent implements OnInit { > `; + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Textarea'; + } + ngOnInit(): void { setTimeout((): void => { this.message5.setErrors([ diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts index c2fcabc93..45f9d4176 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts @@ -8,11 +8,12 @@ import { NavGroup } from '../../../../../../../go-lib/src/public_api'; export class FormDocsComponent { menuItems: Array = [ { - routeTitle: 'Basics', subRoutes: [ + routeTitle: 'Forms', subRoutes: [ { route: './', routeTitle: 'Overview' }, { route: './datepicker', routeTitle: 'Datepicker' }, { route: './input', routeTitle: 'Input' }, { route: './select', routeTitle: 'Select' }, + { route: './switch-toggle', routeTitle: 'Switch Toggle' }, { route: './textarea', routeTitle: 'Text Area' } ] } diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index 739145937..796c243a9 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -41,6 +41,7 @@ import { ActionSheetOverviewComponent } from '../components/action-sheet-docs/co // tslint:disable-next-line: max-line-length import { ActionSheetPanelDocsComponent } from '../components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; import { AccordionOverviewComponent } from '../components/accordion-docs/components/accordion-overview/accordion-overview.component'; +import { SwitchToggleDocsComponent } from '../components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component'; const routes: Routes = [ { path: 'ui-kit', component: UiKitComponent }, @@ -63,6 +64,7 @@ const routes: Routes = [ { path: 'datepicker', component: DatepickerDocsComponent }, { path: 'input', component: InputDocsComponent }, { path: 'select', component: SelectDocsComponent }, + { path: 'switch-toggle', component: SwitchToggleDocsComponent }, { path: 'textarea', component: TextAreaDocsComponent } ]}, { path: 'ui-kit/icon-button', component: IconButtonDocsComponent }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index e1b9f46a7..9264488aa 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -22,6 +22,7 @@ import { GoOffCanvasModule, GoOffCanvasService, GoSelectModule, + GoSwitchToggleModule, GoTableModule, GoTextAreaModule, GoToasterService, @@ -76,6 +77,7 @@ import { ActionSheetOverviewComponent } from './components/action-sheet-docs/com // tslint:disable-next-line: max-line-length import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; import { AccordionOverviewComponent } from './components/accordion-docs/components/accordion-overview/accordion-overview.component'; +import { SwitchToggleDocsComponent } from './components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component'; @NgModule({ imports: [ @@ -95,6 +97,7 @@ import { AccordionOverviewComponent } from './components/accordion-docs/componen GoLoaderModule, GoModalModule, GoOffCanvasModule, + GoSwitchToggleModule, GoTableModule, GoToastModule, HighlightModule, @@ -142,7 +145,8 @@ import { AccordionOverviewComponent } from './components/accordion-docs/componen ActionSheetDocsComponent, ActionSheetOverviewComponent, ActionSheetPanelDocsComponent, - AccordionOverviewComponent + AccordionOverviewComponent, + SwitchToggleDocsComponent ], entryComponents: [ BasicTestComponent, From b9acb476d58ffff3b496f82c9df81b7bc07f1774 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Wed, 16 Oct 2019 10:11:44 -0400 Subject: [PATCH 44/98] Chore Radio Button Docs --- .../radio-button-docs.component.html | 193 ++++++++++++++++++ .../radio-button-docs.component.ts | 103 ++++++++++ .../form-docs/form-docs.component.ts | 1 + .../ui-kit/routes/ui-kit-routing.module.ts | 2 + .../src/app/features/ui-kit/ui-kit.module.ts | 6 +- 5 files changed, 304 insertions(+), 1 deletion(-) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html new file mode 100644 index 000000000..bbca0bdec --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html @@ -0,0 +1,193 @@ +
    + + + +

    Setup

    +     + +

    + To use the radio components, you'll need to import the RadioModule into your module: +

    + + +     +     + + +

    Simpliest Implementation

    +     + +

    + This simpliest way to implement the radio buttons requires a <go-radio-group> with the + legend and [control] bindings, + and at least two <go-radio-button> each having a + label and formValue. +

    +

    + On the <go-radio-group>, the + legend is the name of the set of radio options and + the [control] is the corresponding FormControl. +

    +

    + On the <go-radio-button>, the + label is the name of that radio option and + the formValue is the value of that option. +

    +
    +
    +

    View

    + +
    + + +
    +
    + + +
    +     +
    +
    +

    Code

    + + +
    +
    +     +     + + + +

    Radio Keys

    +     + +

    + The label attribute is used to generate a unique ID to associate the label with the radio button. + As this might not be desired, the @Input() key: string; + can be used to configure the ID attribute of the radio directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the radio and + associate the label with the radio button. +

    +
    +
    +

    View

    + +
    + + +
    +
    + + +
    +     +
    +
    +

    Code

    + + +
    +
    +
    +

    Example Output

    +

    + Notice in the below example output that the key has been assigned + to both the id attribute on + the input and the for attribute + on the label. +

    + +
    +     +     + + + +

    Radio Hints

    +     + +

    + Form hints exist to help give more information about the + radio groups they are attached to. The @Input() hints: Array<string> + can be used to pass in an array of hints to the radio group component. +

    +
    +
    +

    View

    + +
    + + +
    +
    + + +
    +     +
    +
    +

    Code

    + + + + +
    +
    +     +     + + + +

    Radio Theme

    +     + +

    + By default the theme for the radio buttons is 'light', but there could be + and instance where we need a 'dark' theme. There is a binding + available for that. +

    +
    +
    +

    View

    + +
    + + +
    +
    + + +
    +     +
    +
    +

    Code

    + + +
    +
    +     +     +
    \ No newline at end of file diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts new file mode 100644 index 000000000..20e87ec71 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts @@ -0,0 +1,103 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + selector: 'app-radio-button-docs', + templateUrl: './radio-button-docs.component.html' +}) +export class RadioButtonDocsComponent implements OnInit { + + radio1: FormControl = new FormControl(''); + radio2: FormControl = new FormControl(''); + radio3: FormControl = new FormControl(''); + radio4: FormControl = new FormControl(''); + + hints: Array = ['this is a hint for the radio group']; + + radioSetup: string = ` + import { GoRadioModule } from '@tangoe/goponents'; + + @NgModule({ + imports: [ + GoRadioModule + ] + }); + `; + + radio1Ex: string = ` + +
    + + +
    +
    + + +
    +     + `; + + radio2Ex: string = ` + +
    + + +
    +
    + + +
    +     + `; + + radio2KeyCode: string = ` + + + `; + + radio3HintsCode: string = ` + hints: Array = [ + 'this is a hint for the radio group' + ]; + `; + + radio3Ex: string = ` + +
    + + +
    +
    + + +
    +     + `; + + radio4Ex: string = ` + +
    + + +
    +
    + + +
    +     + `; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts index 45f9d4176..1090f3a9a 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts @@ -12,6 +12,7 @@ export class FormDocsComponent { { route: './', routeTitle: 'Overview' }, { route: './datepicker', routeTitle: 'Datepicker' }, { route: './input', routeTitle: 'Input' }, + { route: './radio', routeTitle: 'Radio' }, { route: './select', routeTitle: 'Select' }, { route: './switch-toggle', routeTitle: 'Switch Toggle' }, { route: './textarea', routeTitle: 'Text Area' } diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index 796c243a9..87f5cb438 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -42,6 +42,7 @@ import { ActionSheetOverviewComponent } from '../components/action-sheet-docs/co import { ActionSheetPanelDocsComponent } from '../components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; import { AccordionOverviewComponent } from '../components/accordion-docs/components/accordion-overview/accordion-overview.component'; import { SwitchToggleDocsComponent } from '../components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component'; +import { RadioButtonDocsComponent } from '../components/form-docs/components/radio-button-docs/radio-button-docs.component'; const routes: Routes = [ { path: 'ui-kit', component: UiKitComponent }, @@ -63,6 +64,7 @@ const routes: Routes = [ { path: '', component: FormsOverviewComponent }, { path: 'datepicker', component: DatepickerDocsComponent }, { path: 'input', component: InputDocsComponent }, + { path: 'radio', component: RadioButtonDocsComponent }, { path: 'select', component: SelectDocsComponent }, { path: 'switch-toggle', component: SwitchToggleDocsComponent }, { path: 'textarea', component: TextAreaDocsComponent } diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 9264488aa..996a21714 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -21,6 +21,7 @@ import { GoModalService, GoOffCanvasModule, GoOffCanvasService, + GoRadioModule, GoSelectModule, GoSwitchToggleModule, GoTableModule, @@ -78,6 +79,7 @@ import { ActionSheetOverviewComponent } from './components/action-sheet-docs/com import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component'; import { AccordionOverviewComponent } from './components/accordion-docs/components/accordion-overview/accordion-overview.component'; import { SwitchToggleDocsComponent } from './components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component'; +import { RadioButtonDocsComponent } from './components/form-docs/components/radio-button-docs/radio-button-docs.component'; @NgModule({ imports: [ @@ -98,6 +100,7 @@ import { SwitchToggleDocsComponent } from './components/form-docs/components/swi GoModalModule, GoOffCanvasModule, GoSwitchToggleModule, + GoRadioModule, GoTableModule, GoToastModule, HighlightModule, @@ -146,7 +149,8 @@ import { SwitchToggleDocsComponent } from './components/form-docs/components/swi ActionSheetOverviewComponent, ActionSheetPanelDocsComponent, AccordionOverviewComponent, - SwitchToggleDocsComponent + SwitchToggleDocsComponent, + RadioButtonDocsComponent ], entryComponents: [ BasicTestComponent, From 527f17f2dc68d1db6139fcec2e2744c68c1ba5e9 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 17 Oct 2019 09:10:52 -0400 Subject: [PATCH 45/98] Fixing typo in docs --- .../radio-button-docs/radio-button-docs.component.html | 2 +- .../components/radio-button-docs/radio-button-docs.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html index bbca0bdec..5987b4e97 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.html @@ -88,7 +88,7 @@

    View

    + key="option_2">
    diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts index 20e87ec71..addfbfa98 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/radio-button-docs/radio-button-docs.component.ts @@ -48,7 +48,7 @@ export class RadioButtonDocsComponent implements OnInit {
    + key="option_2">
    From 3abfe6b620784f7c73512a7d0f49da5950782d68 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Tue, 15 Oct 2019 13:09:57 -0400 Subject: [PATCH 46/98] Add branding input to tester --- .../test-page-2/test-page-2.component.html | 18 ++++++++++++++++++ .../test-page-2/test-page-2.component.ts | 16 ++++++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html index 946eb2655..76e3bce22 100644 --- a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html @@ -107,4 +107,22 @@

    Toasts

    [dismissable]="true"> + +
    +

    Branding

    +
    + + +
    + +
    + + Update Branding Color + +
    +
    diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts index 8fb533002..be9f632ae 100644 --- a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts @@ -1,9 +1,11 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { GoButtonComponent, + GoConfigService, GoLoaderComponent, - GoToasterService + GoToasterService, } from '../../../../../go-lib/src/public_api'; +import { FormControl } from '@angular/forms'; @Component({ selector: 'app-test-page-2', @@ -13,14 +15,20 @@ export class TestPage2Component implements OnInit { @ViewChild('loader') loader: GoLoaderComponent; + brandingControl: FormControl; title: string = 'Test 2'; shopping: boolean = false; loaderType: string = 'neutral'; loading: boolean = true; - constructor(private goToasterService: GoToasterService) { } + constructor( + private goToasterService: GoToasterService, + private goConfigService: GoConfigService + ) { } ngOnInit(): void { + this.brandingControl = new FormControl(this.goConfigService.config.getValue().brandColor); + setTimeout(() => { this.goToasterService.toastInfo({ message: 'Check this out'}); this.goToasterService.toastSuccess({message: 'Check this out' }); @@ -49,4 +57,8 @@ export class TestPage2Component implements OnInit { openToast(): void { this.goToasterService.toastInfo({ message: 'From the action sheet'}); } + + updateColor(): void { + this.goConfigService.setBrandColor(this.brandingControl.value); + } } From 4c31bd397a25abe6b77509f76910972e69bbcb2c Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Tue, 15 Oct 2019 15:23:34 -0400 Subject: [PATCH 47/98] Add contrast ratio methods --- .../go-header/go-header.component.html | 3 +- .../go-header/go-header.component.ts | 89 +++++++++++++++++-- 2 files changed, 86 insertions(+), 6 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html index fe6a5e051..b55b0dbb7 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.html +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -1,6 +1,7 @@
    + [ngClass]="{ 'go-header__left--collapsed': isNavCollapsed() }" + [ngStyle]="{'background': brandColor}"> = fromEvent(window, 'resize'); private resizeSubsciption: Subscription; - constructor(public sideNavService: GoSideNavService) { + constructor ( + public sideNavService: GoSideNavService, + private configService: GoConfigService + ) { this.setMobileNav(); this.setupResizeSubscription(); } + ngOnInit(): void { + this.configService.config + .pipe(distinctUntilKeyChanged('brandColor')) + .subscribe((value: GoConfigInterface) => { + this.checkContrastRatio('#313536', value.brandColor); + // TODO: set the color of the menu icon based on the above result + + this.brandColor = value.brandColor; + + }); + } + isNavCollapsed(): boolean { return window.innerWidth <= this.minWidthBreakpoint ? true : !this.sideNavService.navOpen; } @@ -49,4 +69,63 @@ export class GoHeaderComponent { this.sideNavService.navOpen = false; } } + + // TODO: extract this methods into config service + hexToRgb(hex) { + const result: RegExpExecArray = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; + } + + componentToHex(c) { + var hex = c.toString(16); + return hex.length === 1 ? '0' + hex : hex; + } + + rgbToHex(rgb) { + const hex = '#' + this.componentToHex(rgb['r']) + this.componentToHex(rgb['g']) + this.componentToHex(rgb['b']); + return hex; + } + + luminanace(r, g, b) { + var a = [r, g, b].map(function (v) { + v /= 255; + return v <= 0.03928 + ? v / 12.92 + : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; + } + + contrast(rgb1, rgb2) { + const luminanace1 = this.luminanace(rgb1['r'], rgb1['g'], rgb1['b']) + 0.05; + const luminanace2 = this.luminanace(rgb2['r'], rgb2['g'], rgb2['b']) + 0.05; + console.log('luminance1: ', luminanace1); + console.log('luminance2: ', luminanace2); + + return (this.luminanace(rgb1['r'], rgb1['g'], rgb1['b']) + 0.05) + / (this.luminanace(rgb2['r'], rgb2['g'], rgb2['b']) + 0.05); + } + + checkContrastRatio(hex1, hex2) { + const rgb1 = this.hexToRgb(hex1); + console.log(rgb1); + const rgb2 = this.hexToRgb(hex2); + console.log(rgb2); + + const contrast = this.contrast(rgb1, rgb2); + console.log('contrast: ', contrast); + + if (contrast < 4.5) { + console.log('nope'); + return false; + } else { + console.log('yep'); + return true; + } + } } From 171d87f941c2a9b0dd23144ee1009aa4b30d0a6e Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Thu, 17 Oct 2019 15:30:58 -0400 Subject: [PATCH 48/98] Make it so color and background of menu icon changes based on brandColor --- .../go-header/go-header.component.html | 3 ++- .../go-header/go-header.component.ts | 27 ++++++++++--------- .../go-icon-button.component.html | 1 + .../go-icon-button.component.scss | 2 +- .../go-icon-button.component.ts | 1 + .../components/go-icon/go-icon.component.scss | 8 +++--- 6 files changed, 23 insertions(+), 19 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html index b55b0dbb7..120b6b350 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.html +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -6,7 +6,8 @@ buttonIcon="menu" buttonSize="medium" buttonTitle="Menu" - (handleClick)="toggleSideMenu()"> + (handleClick)="toggleSideMenu()" + [buttonVariant]="menuIconVariant">
    diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index 3a5ec8006..2d07c91df 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -18,7 +18,8 @@ export class GoHeaderComponent implements OnInit { @ViewChild('middleSection') middleSection: ElementRef; public brandColor: string; - public menuIconColor: string = 'dark'; + public brandColorIsDark: boolean = false; + public menuIconVariant: string; private minWidthBreakpoint: number = 768; private resizeObservable: Observable = fromEvent(window, 'resize'); @@ -36,11 +37,13 @@ export class GoHeaderComponent implements OnInit { this.configService.config .pipe(distinctUntilKeyChanged('brandColor')) .subscribe((value: GoConfigInterface) => { - this.checkContrastRatio('#313536', value.brandColor); - // TODO: set the color of the menu icon based on the above result - this.brandColor = value.brandColor; + console.log('value', value); + this.brandColorIsDark = !this.checkContrastRatio(this.brandColor, '#313536'); + console.log('brandColorIsDark', this.brandColorIsDark); + this.brandColorIsDark ? this.menuIconVariant = 'dark' : this.menuIconVariant = 'light'; + console.log('menuIconVariant', this.menuIconVariant); }); } @@ -104,28 +107,26 @@ export class GoHeaderComponent implements OnInit { contrast(rgb1, rgb2) { const luminanace1 = this.luminanace(rgb1['r'], rgb1['g'], rgb1['b']) + 0.05; const luminanace2 = this.luminanace(rgb2['r'], rgb2['g'], rgb2['b']) + 0.05; - console.log('luminance1: ', luminanace1); - console.log('luminance2: ', luminanace2); return (this.luminanace(rgb1['r'], rgb1['g'], rgb1['b']) + 0.05) / (this.luminanace(rgb2['r'], rgb2['g'], rgb2['b']) + 0.05); } checkContrastRatio(hex1, hex2) { + let contrastIsAccessible: boolean; + const rgb1 = this.hexToRgb(hex1); - console.log(rgb1); const rgb2 = this.hexToRgb(hex2); - console.log(rgb2); const contrast = this.contrast(rgb1, rgb2); - console.log('contrast: ', contrast); + console.log('contrast', contrast); if (contrast < 4.5) { - console.log('nope'); - return false; + contrastIsAccessible = false; } else { - console.log('yep'); - return true; + contrastIsAccessible = true; } + + return contrastIsAccessible; } } diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html index e8fba904a..afdba7630 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html @@ -8,6 +8,7 @@ diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss index 6f5cc5a18..9eb196213 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss @@ -4,7 +4,7 @@ .go-icon-button { @include transition(background-color); - background: $theme-light-bg; + background: transparent; border: 0; border-radius: $global-radius--round; color: $base-dark; diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts index f2ebfdcc4..9c0437583 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts @@ -19,6 +19,7 @@ export class GoIconButtonComponent implements OnChanges { @Input() buttonIcon: string; @Input() buttonSize: string = 'small'; @Input() buttonTitle: string; + @Input() buttonVariant: string; @Output() handleClick: EventEmitter = new EventEmitter(); diff --git a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss index 75d7d322d..0b3399d34 100644 --- a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss +++ b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss @@ -32,10 +32,10 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); } .go-icon--dark { - color: $theme-light-color; + color: $theme-dark-color; &.go-icon--disabled { - color: rgba($theme-light-color, .7); + color: rgba($theme-dark-color, .7); } } @@ -43,10 +43,10 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); .go-icon--primary, .go-icon--negative, .go-icon--neutral { - color: $theme-dark-color; + color: $theme-light-color; &.go-icon--disabled { - color: rgba($theme-dark-color, .7); + color: rgba($theme-light-color, .7); } } From d70f096e391f78e9aa5892b46a2d11c5faa55287 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Thu, 17 Oct 2019 15:58:24 -0400 Subject: [PATCH 49/98] Move contrast methods to config service --- .../go-header/go-header.component.ts | 63 +------------------ projects/go-lib/src/lib/go-config.service.ts | 46 ++++++++++++++ 2 files changed, 47 insertions(+), 62 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index 2d07c91df..eed08206a 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -38,12 +38,8 @@ export class GoHeaderComponent implements OnInit { .pipe(distinctUntilKeyChanged('brandColor')) .subscribe((value: GoConfigInterface) => { this.brandColor = value.brandColor; - - console.log('value', value); - this.brandColorIsDark = !this.checkContrastRatio(this.brandColor, '#313536'); - console.log('brandColorIsDark', this.brandColorIsDark); + this.brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); this.brandColorIsDark ? this.menuIconVariant = 'dark' : this.menuIconVariant = 'light'; - console.log('menuIconVariant', this.menuIconVariant); }); } @@ -72,61 +68,4 @@ export class GoHeaderComponent implements OnInit { this.sideNavService.navOpen = false; } } - - // TODO: extract this methods into config service - hexToRgb(hex) { - const result: RegExpExecArray = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null; - } - - componentToHex(c) { - var hex = c.toString(16); - return hex.length === 1 ? '0' + hex : hex; - } - - rgbToHex(rgb) { - const hex = '#' + this.componentToHex(rgb['r']) + this.componentToHex(rgb['g']) + this.componentToHex(rgb['b']); - return hex; - } - - luminanace(r, g, b) { - var a = [r, g, b].map(function (v) { - v /= 255; - return v <= 0.03928 - ? v / 12.92 - : Math.pow( (v + 0.055) / 1.055, 2.4 ); - }); - return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; - } - - contrast(rgb1, rgb2) { - const luminanace1 = this.luminanace(rgb1['r'], rgb1['g'], rgb1['b']) + 0.05; - const luminanace2 = this.luminanace(rgb2['r'], rgb2['g'], rgb2['b']) + 0.05; - - return (this.luminanace(rgb1['r'], rgb1['g'], rgb1['b']) + 0.05) - / (this.luminanace(rgb2['r'], rgb2['g'], rgb2['b']) + 0.05); - } - - checkContrastRatio(hex1, hex2) { - let contrastIsAccessible: boolean; - - const rgb1 = this.hexToRgb(hex1); - const rgb2 = this.hexToRgb(hex2); - - const contrast = this.contrast(rgb1, rgb2); - console.log('contrast', contrast); - - if (contrast < 4.5) { - contrastIsAccessible = false; - } else { - contrastIsAccessible = true; - } - - return contrastIsAccessible; - } } diff --git a/projects/go-lib/src/lib/go-config.service.ts b/projects/go-lib/src/lib/go-config.service.ts index 7a85f558d..4b75cfcca 100644 --- a/projects/go-lib/src/lib/go-config.service.ts +++ b/projects/go-lib/src/lib/go-config.service.ts @@ -2,6 +2,12 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { GoConfigInterface } from './go-config.model'; +interface RGB { + r: number; + g: number; + b: number; +} + @Injectable() export class GoConfigService { config: BehaviorSubject = new BehaviorSubject ({ @@ -14,4 +20,44 @@ export class GoConfigService { config.brandColor = color; this.config.next(config); } + + public checkContrastRatioAccessibility(hex1: string, hex2: string): boolean { + let contrastIsAccessible: boolean; + + const rgb1: RGB = this.hexToRgb(hex1); + const rgb2: RGB = this.hexToRgb(hex2); + + const contrast: number = this.contrast(rgb1, rgb2); + + contrast > 4.5 ? contrastIsAccessible = true : contrastIsAccessible = false; + + return contrastIsAccessible; + } + + private hexToRgb(hex: string): RGB { + const result: RegExpExecArray = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; + } + + private luminance(r: number, g: number, b: number): number { + const a: number[] = [r, g, b].map((v: number) => { + v /= 255; + return v <= 0.03928 + ? v / 12.92 + : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; + } + + private contrast(rgb1: RGB, rgb2: RGB): number { + const luminance1: number = this.luminance(rgb1['r'], rgb1['g'], rgb1['b']) + 0.05; + const luminance2: number = this.luminance(rgb2['r'], rgb2['g'], rgb2['b']) + 0.05; + + return luminance1 / luminance2; + } } From 00d91823a2d39048a9d13d7f46298f194c942648 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Thu, 17 Oct 2019 16:08:42 -0400 Subject: [PATCH 50/98] Add enableBranding input --- .../components/go-header/go-header.component.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index eed08206a..fb755d3f6 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -14,6 +14,7 @@ export class GoHeaderComponent implements OnInit { @Input() altText: string = ''; @Input() logo: string = ''; + @Input() enableBranding: boolean = false; @ViewChild('middleSection') middleSection: ElementRef; @@ -34,13 +35,15 @@ export class GoHeaderComponent implements OnInit { } ngOnInit(): void { - this.configService.config - .pipe(distinctUntilKeyChanged('brandColor')) - .subscribe((value: GoConfigInterface) => { - this.brandColor = value.brandColor; - this.brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); - this.brandColorIsDark ? this.menuIconVariant = 'dark' : this.menuIconVariant = 'light'; - }); + if (this.enableBranding) { + this.configService.config + .pipe(distinctUntilKeyChanged('brandColor')) + .subscribe((value: GoConfigInterface) => { + this.brandColor = value.brandColor; + this.brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); + this.brandColorIsDark ? this.menuIconVariant = 'dark' : this.menuIconVariant = 'light'; + }); + } } isNavCollapsed(): boolean { From 66981f6ff43a85584ebd7b7a1e18372fcddd1941 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Thu, 17 Oct 2019 16:35:05 -0400 Subject: [PATCH 51/98] Add toggle to test enableBranding and refactor header component --- .../go-header/go-header.component.ts | 26 ++++++++++++------- projects/go-tester/src/app/app.component.html | 6 ++++- projects/go-tester/src/app/app.component.ts | 6 +++++ 3 files changed, 28 insertions(+), 10 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index fb755d3f6..36b9f4d19 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'; import { fromEvent, Observable, Subscription } from 'rxjs'; import { debounceTime, distinctUntilKeyChanged } from 'rxjs/operators'; import { GoConfigInterface } from '../../go-config.model'; @@ -10,7 +10,7 @@ import { GoSideNavService } from '../go-side-nav/go-side-nav/go-side-nav.service templateUrl: './go-header.component.html', styleUrls: ['./go-header.component.scss'] }) -export class GoHeaderComponent implements OnInit { +export class GoHeaderComponent implements OnChanges { @Input() altText: string = ''; @Input() logo: string = ''; @@ -19,12 +19,11 @@ export class GoHeaderComponent implements OnInit { @ViewChild('middleSection') middleSection: ElementRef; public brandColor: string; - public brandColorIsDark: boolean = false; public menuIconVariant: string; private minWidthBreakpoint: number = 768; private resizeObservable: Observable = fromEvent(window, 'resize'); - private resizeSubsciption: Subscription; + private resizeSubscription: Subscription; constructor ( public sideNavService: GoSideNavService, @@ -34,15 +33,15 @@ export class GoHeaderComponent implements OnInit { this.setupResizeSubscription(); } - ngOnInit(): void { + ngOnChanges(): void { if (this.enableBranding) { this.configService.config .pipe(distinctUntilKeyChanged('brandColor')) .subscribe((value: GoConfigInterface) => { - this.brandColor = value.brandColor; - this.brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); - this.brandColorIsDark ? this.menuIconVariant = 'dark' : this.menuIconVariant = 'light'; + this.handleBrandColorChange(value); }); + } else { + this.brandColor = ''; } } @@ -59,7 +58,7 @@ export class GoHeaderComponent implements OnInit { } private setupResizeSubscription(): void { - this.resizeSubsciption = this.resizeObservable + this.resizeSubscription = this.resizeObservable .pipe(debounceTime(250)) .subscribe(event => { this.setMobileNav(); @@ -71,4 +70,13 @@ export class GoHeaderComponent implements OnInit { this.sideNavService.navOpen = false; } } + + private handleBrandColorChange(value: GoConfigInterface): void { + let brandColorIsDark: boolean; + + this.brandColor = value.brandColor; + + brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); + brandColorIsDark ? this.menuIconVariant = 'dark' : this.menuIconVariant = 'light'; + } } diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index 8f9f37d4a..e3e54b199 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -1,9 +1,13 @@ - + + diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index d3b163041..75dbb2590 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -22,6 +22,7 @@ export class AppComponent implements OnInit { logo: string = 'https://mobi.thefutureis.mobi/images/assets/theme_logo/000/000/000/178/header.png?1556627290'; title: string = 'go-tester'; + enableHeaderBranding: boolean = false; menuItems: Array = [ { routeIcon: 'dashboard', routeTitle: 'Tests', description: 'Test Routes', subRoutes: [ @@ -48,6 +49,7 @@ export class AppComponent implements OnInit { ]; selectControl: FormControl = new FormControl(''); + toggleControl: FormControl = new FormControl(false); selectItems: any = [ { value: 1, label: 'Reeses' }, @@ -70,6 +72,10 @@ export class AppComponent implements OnInit { ngOnInit(): void { this.goConfigService.setBrandColor('#8A4EDE'); + + this.toggleControl.valueChanges.subscribe(() => { + this.enableHeaderBranding = !this.enableHeaderBranding; + }); } openOffCanvas(): void { From b397430e7f462e46586b76bff04e172dd042fc31 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Thu, 17 Oct 2019 17:04:23 -0400 Subject: [PATCH 52/98] Fix icon color when toggling off enableBranding --- .../go-lib/src/lib/components/go-header/go-header.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index 36b9f4d19..a9d1db924 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -42,6 +42,7 @@ export class GoHeaderComponent implements OnChanges { }); } else { this.brandColor = ''; + this.menuIconVariant = 'light'; } } From 80990f558ff26db29aa0e02466788a7b95811ae2 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Thu, 17 Oct 2019 17:24:31 -0400 Subject: [PATCH 53/98] Fix bug --- .../go-header/go-header.component.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index a9d1db924..08e0f1a95 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -34,16 +34,16 @@ export class GoHeaderComponent implements OnChanges { } ngOnChanges(): void { - if (this.enableBranding) { - this.configService.config - .pipe(distinctUntilKeyChanged('brandColor')) - .subscribe((value: GoConfigInterface) => { + this.configService.config + .pipe(distinctUntilKeyChanged('brandColor')) + .subscribe((value: GoConfigInterface) => { + if (this.enableBranding) { this.handleBrandColorChange(value); - }); - } else { - this.brandColor = ''; - this.menuIconVariant = 'light'; - } + } else { + this.brandColor = ''; + this.menuIconVariant = 'light'; + } + }); } isNavCollapsed(): boolean { From a683ebe9c8232c4b9cfcb4df3984f585a307aaea Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 18 Oct 2019 10:42:59 -0400 Subject: [PATCH 54/98] Remove buttonVariant input on go-icon-button; handle icon color in header component --- .../lib/components/go-header/go-header.component.html | 5 ++--- .../lib/components/go-header/go-header.component.scss | 4 ++++ .../lib/components/go-header/go-header.component.ts | 11 ++++------- .../go-icon-button/go-icon-button.component.html | 1 - .../go-icon-button/go-icon-button.component.scss | 2 +- .../go-icon-button/go-icon-button.component.ts | 1 - projects/go-tester/src/app/app.component.html | 2 +- projects/go-tester/src/app/app.component.ts | 4 ++-- 8 files changed, 14 insertions(+), 16 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html index 120b6b350..6f66d94db 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.html +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -1,13 +1,12 @@
    + (handleClick)="toggleSideMenu()">
    diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.scss b/projects/go-lib/src/lib/components/go-header/go-header.component.scss index 119fae2ef..bc7e18fb2 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.scss +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.scss @@ -73,6 +73,10 @@ $breakpoint-header-mobile-small: 500px; width: auto; } +.go-header__left--dark { + color: $theme-dark-color +} + .go-header__middle { @include transition(padding); diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index 08e0f1a95..a07bfb431 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -14,11 +14,12 @@ export class GoHeaderComponent implements OnChanges { @Input() altText: string = ''; @Input() logo: string = ''; - @Input() enableBranding: boolean = false; + @Input() brandingEnabled: boolean = false; @ViewChild('middleSection') middleSection: ElementRef; public brandColor: string; + public brandColorIsDark: boolean; public menuIconVariant: string; private minWidthBreakpoint: number = 768; @@ -37,11 +38,10 @@ export class GoHeaderComponent implements OnChanges { this.configService.config .pipe(distinctUntilKeyChanged('brandColor')) .subscribe((value: GoConfigInterface) => { - if (this.enableBranding) { + if (this.brandingEnabled) { this.handleBrandColorChange(value); } else { this.brandColor = ''; - this.menuIconVariant = 'light'; } }); } @@ -73,11 +73,8 @@ export class GoHeaderComponent implements OnChanges { } private handleBrandColorChange(value: GoConfigInterface): void { - let brandColorIsDark: boolean; - this.brandColor = value.brandColor; - brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); - brandColorIsDark ? this.menuIconVariant = 'dark' : this.menuIconVariant = 'light'; + this.brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); } } diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html index afdba7630..e8fba904a 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html @@ -8,7 +8,6 @@ diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss index 9eb196213..83d3290a5 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss @@ -7,7 +7,7 @@ background: transparent; border: 0; border-radius: $global-radius--round; - color: $base-dark; + color: inherit; cursor: pointer; display: inline-flex; outline: none; diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts index 9c0437583..f2ebfdcc4 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts @@ -19,7 +19,6 @@ export class GoIconButtonComponent implements OnChanges { @Input() buttonIcon: string; @Input() buttonSize: string = 'small'; @Input() buttonTitle: string; - @Input() buttonVariant: string; @Output() handleClick: EventEmitter = new EventEmitter(); diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index e3e54b199..d7c554c80 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -1,5 +1,5 @@ - + diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index 75dbb2590..1e0e45fe6 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -22,7 +22,7 @@ export class AppComponent implements OnInit { logo: string = 'https://mobi.thefutureis.mobi/images/assets/theme_logo/000/000/000/178/header.png?1556627290'; title: string = 'go-tester'; - enableHeaderBranding: boolean = false; + headerBrandingEnabled: boolean = false; menuItems: Array = [ { routeIcon: 'dashboard', routeTitle: 'Tests', description: 'Test Routes', subRoutes: [ @@ -74,7 +74,7 @@ export class AppComponent implements OnInit { this.goConfigService.setBrandColor('#8A4EDE'); this.toggleControl.valueChanges.subscribe(() => { - this.enableHeaderBranding = !this.enableHeaderBranding; + this.headerBrandingEnabled = !this.headerBrandingEnabled; }); } From 59c71aa8af47b0b440d5f98551fe795ff428b383 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 18 Oct 2019 12:19:35 -0400 Subject: [PATCH 55/98] Add toggleHeaderBrandingEnabled function to config service --- .../go-header/go-header.component.html | 2 +- .../go-header/go-header.component.ts | 11 +++++----- projects/go-lib/src/lib/go-config.model.ts | 1 + projects/go-lib/src/lib/go-config.service.ts | 22 +++++++++++-------- projects/go-tester/src/app/app.component.html | 2 +- projects/go-tester/src/app/app.component.ts | 3 +-- 6 files changed, 23 insertions(+), 18 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html index 6f66d94db..2226f1cb7 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.html +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -1,6 +1,6 @@
    { - if (this.brandingEnabled) { + if (value.headerBrandingEnabled) { this.handleBrandColorChange(value); } else { this.brandColor = ''; + this.brandColorIsDark = false; } }); } @@ -73,8 +73,9 @@ export class GoHeaderComponent implements OnChanges { } private handleBrandColorChange(value: GoConfigInterface): void { + const baseDarkHex: string = '#313536'; this.brandColor = value.brandColor; - this.brandColorIsDark = !this.configService.checkContrastRatioAccessibility(this.brandColor, '#313536'); + this.brandColorIsDark = !this.configService.contrastIsAccessible(this.brandColor, baseDarkHex); } } diff --git a/projects/go-lib/src/lib/go-config.model.ts b/projects/go-lib/src/lib/go-config.model.ts index 05de7d042..863e08fa5 100644 --- a/projects/go-lib/src/lib/go-config.model.ts +++ b/projects/go-lib/src/lib/go-config.model.ts @@ -1,3 +1,4 @@ export interface GoConfigInterface { brandColor: string; + headerBrandingEnabled: boolean; } diff --git a/projects/go-lib/src/lib/go-config.service.ts b/projects/go-lib/src/lib/go-config.service.ts index 4b75cfcca..c2ff6182f 100644 --- a/projects/go-lib/src/lib/go-config.service.ts +++ b/projects/go-lib/src/lib/go-config.service.ts @@ -11,7 +11,8 @@ interface RGB { @Injectable() export class GoConfigService { config: BehaviorSubject = new BehaviorSubject ({ - brandColor: '#65B360' + brandColor: '#65B360', + headerBrandingEnabled: false }); public setBrandColor(color: string): void { @@ -21,17 +22,20 @@ export class GoConfigService { this.config.next(config); } - public checkContrastRatioAccessibility(hex1: string, hex2: string): boolean { - let contrastIsAccessible: boolean; - - const rgb1: RGB = this.hexToRgb(hex1); - const rgb2: RGB = this.hexToRgb(hex2); + public toggleHeaderBrandingEnabled(): void { + // we have to copy the config here or it won't regester a change in components + const config: GoConfigInterface = Object.assign({}, this.config.getValue()); + config.headerBrandingEnabled = !config.headerBrandingEnabled; + this.config.next(config); + } - const contrast: number = this.contrast(rgb1, rgb2); + public contrastIsAccessible(backgroundHex: string, foregroundHex: string): boolean { + const backgroundRgb: RGB = this.hexToRgb(backgroundHex); + const foregroundRgb: RGB = this.hexToRgb(foregroundHex); - contrast > 4.5 ? contrastIsAccessible = true : contrastIsAccessible = false; + const contrast: number = this.contrast(backgroundRgb, foregroundRgb); - return contrastIsAccessible; + return contrast > 4.5; } private hexToRgb(hex: string): RGB { diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index d7c554c80..5eef8ff0b 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -1,5 +1,5 @@ - + diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index 1e0e45fe6..0106e741d 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -22,7 +22,6 @@ export class AppComponent implements OnInit { logo: string = 'https://mobi.thefutureis.mobi/images/assets/theme_logo/000/000/000/178/header.png?1556627290'; title: string = 'go-tester'; - headerBrandingEnabled: boolean = false; menuItems: Array = [ { routeIcon: 'dashboard', routeTitle: 'Tests', description: 'Test Routes', subRoutes: [ @@ -74,7 +73,7 @@ export class AppComponent implements OnInit { this.goConfigService.setBrandColor('#8A4EDE'); this.toggleControl.valueChanges.subscribe(() => { - this.headerBrandingEnabled = !this.headerBrandingEnabled; + this.goConfigService.toggleHeaderBrandingEnabled(); }); } From 8a5400b7ee45bb453fc325128e0f40b6a601fd77 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 18 Oct 2019 12:50:55 -0400 Subject: [PATCH 56/98] Update config docs --- .../configuration-docs.component.html | 50 ++++++++++++++++--- .../configuration-docs.component.ts | 27 ++++++++-- 2 files changed, 68 insertions(+), 9 deletions(-) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html index 9e50bb621..2d5af9c37 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html @@ -9,18 +9,27 @@

    Branding

    - The GoConfigurationService can be used to brand a few select pieces of our design system. Currently - the only things that can be branded are the active indicators on the sidenav and accordions. The - public setBrandColor(color: string): void method can be used - to update the branding color by passing in either a hex number or the name of the color that we want - to update the design system current brand to. + The GoConfigurationService can be used to brand a few select + pieces of our design system. Currently the only things that can be branded are the active indicators + on the sidenav and accordions as well as the left portion of the header.

    +

    Update Branding Color

    +
    +
    +

    + The public setBrandColor(color: string): void method can be used + to update the branding color by passing in either a hex number or the name of the color that we want + to update the design system current brand to. +

    +
    +
    +
    @@ -42,6 +51,35 @@

    Branding

    + +

    Enable Header Branding

    +
    +
    +
    +

    + The public toggleHeaderBrandingEnabled(): void method can + be used to enable/disable header branding. +

    +
    +
    + +
    +
    + + +
    +
    + +
    + + + + + +
    +
    diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts index 5033f5fe8..357393647 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts @@ -8,7 +8,8 @@ import { FormControl } from '@angular/forms'; }) export class ConfigurationDocsComponent implements OnInit { pageTitle: string = 'Configuration'; - formControl: FormControl; + inputControl: FormControl; + toggleControl: FormControl = new FormControl(false); updateColorExample: string = ` updateColor(): void { @@ -29,13 +30,33 @@ export class ConfigurationDocsComponent implements OnInit { `; + toggleExample: string = ` + + + `; + + toggleHeaderEnabledExample: string = ` + toggleControl: FormControl = new FormControl(false); + + ngOnInit(): void { + this.toggleControl.valueChanges.subscribe(() => { + this.goConfigService.toggleHeaderBrandingEnabled(); + }); + } + `; + constructor(private goConfigService: GoConfigService) { } ngOnInit(): void { - this.formControl = new FormControl(this.goConfigService.config.getValue().brandColor); + this.inputControl = new FormControl(this.goConfigService.config.getValue().brandColor); + this.toggleControl.valueChanges.subscribe(() => { + this.goConfigService.toggleHeaderBrandingEnabled(); + }); } updateColor(): void { - this.goConfigService.setBrandColor(this.formControl.value); + this.goConfigService.setBrandColor(this.inputControl.value); } } From 97be9ed627ff98d475ed6f0d9e7d77e827fe9c2c Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 18 Oct 2019 13:32:19 -0400 Subject: [PATCH 57/98] Fix header component test --- .../src/lib/components/go-header/go-header.component.spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts index 6bfbcfc0e..5120ebc8d 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts @@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { GoHeaderComponent } from './go-header.component'; import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module'; +import { GoConfigService } from '../../go-config.service'; describe('GoHeaderComponent', () => { let component: GoHeaderComponent; @@ -12,6 +13,9 @@ describe('GoHeaderComponent', () => { declarations: [ GoHeaderComponent ], imports: [ GoIconButtonModule + ], + providers: [ + GoConfigService ] }) .compileComponents(); From 1e855e3b5ddad4094d0b2ed907a209f67660f928 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 18 Oct 2019 13:38:35 -0400 Subject: [PATCH 58/98] Remove unused property --- .../go-lib/src/lib/components/go-header/go-header.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index d06a0e270..7413257cb 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -19,7 +19,6 @@ export class GoHeaderComponent implements OnChanges { public brandColor: string; public brandColorIsDark: boolean; - public menuIconVariant: string; private minWidthBreakpoint: number = 768; private resizeObservable: Observable = fromEvent(window, 'resize'); From d59c5a3331cf4f9ea4b07bf5cde109b1bb103edd Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 18 Oct 2019 15:07:27 -0400 Subject: [PATCH 59/98] Remove mention of passing color names into setBrandColor --- .../configuration-docs/configuration-docs.component.html | 3 +-- .../configuration-docs/configuration-docs.component.ts | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html index 2d5af9c37..806b8617c 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html @@ -20,8 +20,7 @@

    Update Branding Color

    The public setBrandColor(color: string): void method can be used - to update the branding color by passing in either a hex number or the name of the color that we want - to update the design system current brand to. + to update the branding color by passing in a hex code.

    diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts index 357393647..892e2050e 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts @@ -38,8 +38,6 @@ export class ConfigurationDocsComponent implements OnInit { `; toggleHeaderEnabledExample: string = ` - toggleControl: FormControl = new FormControl(false); - ngOnInit(): void { this.toggleControl.valueChanges.subscribe(() => { this.goConfigService.toggleHeaderBrandingEnabled(); From cf169f7b1bb1159e136521936ad9de079d01fa5e Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Fri, 18 Oct 2019 15:20:33 -0400 Subject: [PATCH 60/98] Darken go-icon-button hover state background --- .../lib/components/go-icon-button/go-icon-button.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss index 83d3290a5..a184bcf5a 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss @@ -18,7 +18,7 @@ } &:hover, &:focus { - background: $theme-light-bg-hover; + background: $base-light-secondary; } &:active { From 9dd8b499aa3ef6c7539e738db8dd6411e8601e36 Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Mon, 21 Oct 2019 11:17:49 -0400 Subject: [PATCH 61/98] Adjust timezone values to address issue https://github.com/mobi/goponents/issues/277 --- .../src/lib/components/go-datepicker/date-adapter.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts b/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts index dfb2ce35f..0dd2ec92c 100644 --- a/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts +++ b/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts @@ -1,5 +1,6 @@ export class DateAdapter { private _locale: string; + private _timezone: string; public monthNames: Array; public dateNames: Array; public daysOfWeek: Array; @@ -10,13 +11,14 @@ export class DateAdapter { public setLocale(locale: string): void { this._locale = locale; + this._timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; this.setMonthNames(); this.setDateNames(); this.setDayOfWeekNames(); } public getYearName(year: number): string { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {year: 'numeric', timeZone: 'utc'}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {year: 'numeric', timeZone: this._timezone}); return this.format(format, new Date(year, 0, 1)); } @@ -63,7 +65,7 @@ export class DateAdapter { } private getMonthNames(style: 'long' | 'short' | 'narrow'): Array { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {month: style, timeZone: 'utc'}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {month: style, timeZone: this._timezone}); const months: Array = []; for (let i: number = 0; i < 12; i++) { months.push(this.format(format, new Date(2017, i, 1))); @@ -72,7 +74,7 @@ export class DateAdapter { } private getDateNames(): Array { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {day: 'numeric', timeZone: 'utc'}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {day: 'numeric', timeZone: this._timezone}); const dates: Array = []; for (let i: number = 0; i < 31; i++) { @@ -83,7 +85,7 @@ export class DateAdapter { } private getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): Array { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {weekday: style, timeZone: 'utc'}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {weekday: style, timeZone: this._timezone}); const dayNames: Array = []; for (let i: number = 0; i < 7; i++) { From 78889a80593859afbb4cbe45a1a30b4db787f2bc Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Mon, 21 Oct 2019 11:49:19 -0400 Subject: [PATCH 62/98] Update box-shadow for search to original value --- .../src/lib/components/go-search/go-search.component.scss | 2 +- projects/go-lib/src/styles/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.scss b/projects/go-lib/src/lib/components/go-search/go-search.component.scss index e776d4079..761b356b0 100644 --- a/projects/go-lib/src/lib/components/go-search/go-search.component.scss +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.scss @@ -42,7 +42,7 @@ .go-search__container--active { border: 0; - box-shadow: $global-box-shadow--inset; + box-shadow: $global-box-shadow--search; padding: 0.5rem; top: calc(50% - (2.875rem / 2)); // height of input with padding, halfed diff --git a/projects/go-lib/src/styles/_variables.scss b/projects/go-lib/src/styles/_variables.scss index 8e9159634..a9734396f 100644 --- a/projects/go-lib/src/styles/_variables.scss +++ b/projects/go-lib/src/styles/_variables.scss @@ -9,7 +9,7 @@ $global-transition-duration: .25s; // Box Shadows $global-box-shadow--regular: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.20); -$global-box-shadow--inset: 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.20); +$global-box-shadow--search: 0 3px 6px rgba(0, 0, 0, .2); // TODO: verify with UX proper box-shadow for go-search $global-box-shadow--large: 0 7px 14px 0 rgba(65, 54, 94, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.07); $global-box-shadow--small: 0 1px 2px 0 rgba(0, 0, 0, 0.20); From d582ed504822965717ee20259977e035d1bf92bb Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Mon, 21 Oct 2019 14:35:35 -0400 Subject: [PATCH 63/98] PR Revisions --- .../components/go-icon/go-icon.component.scss | 8 +-- .../go-lib/src/lib/go-config.service.spec.ts | 57 +++++++++++++++++++ 2 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 projects/go-lib/src/lib/go-config.service.spec.ts diff --git a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss index 0b3399d34..75d7d322d 100644 --- a/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss +++ b/projects/go-lib/src/lib/components/go-icon/go-icon.component.scss @@ -32,10 +32,10 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); } .go-icon--dark { - color: $theme-dark-color; + color: $theme-light-color; &.go-icon--disabled { - color: rgba($theme-dark-color, .7); + color: rgba($theme-light-color, .7); } } @@ -43,10 +43,10 @@ $icon-sizes: (small: 1rem, medium: 1.5rem, large: 2rem); .go-icon--primary, .go-icon--negative, .go-icon--neutral { - color: $theme-light-color; + color: $theme-dark-color; &.go-icon--disabled { - color: rgba($theme-light-color, .7); + color: rgba($theme-dark-color, .7); } } diff --git a/projects/go-lib/src/lib/go-config.service.spec.ts b/projects/go-lib/src/lib/go-config.service.spec.ts new file mode 100644 index 000000000..106bbf95d --- /dev/null +++ b/projects/go-lib/src/lib/go-config.service.spec.ts @@ -0,0 +1,57 @@ +import { TestBed } from '@angular/core/testing'; +import { skip } from 'rxjs/operators'; +import { GoConfigInterface } from './go-config.model'; +import { GoConfigService } from './go-config.service'; + + +describe('GoConfigService', () => { + let service: GoConfigService; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [], + providers: [GoConfigService] + }); + + service = TestBed.get(GoConfigService); + }); + + it('should create', () => { + expect(service).toBeTruthy(); + }); + + describe('setBrandColor', () => { + it('sets config.brandColor to a new color', () => { + spyOn(service, 'setBrandColor').and.callThrough(); + service.config + .pipe(skip(1)) + .subscribe((updatedConfig: GoConfigInterface) => { + expect(updatedConfig.brandColor).toBe('#f6f6f6'); + }); + service.setBrandColor('#f6f6f6'); + }); + }); + + describe('toggleHeaderBrandingEnabled', () => { + it('toggles config.headerBrandingEnabled', () => { + spyOn(service, 'setBrandColor').and.callThrough(); + service.config + .pipe(skip(1)) + .subscribe((updatedConfig: GoConfigInterface) => { + expect(updatedConfig.headerBrandingEnabled).toBe(true); + }); + service.toggleHeaderBrandingEnabled(); + }); + }); + + describe('contrastIsAccessible', () => { + it('returns false when given a color combo that is not accessible', () => { + expect(service.contrastIsAccessible('#ffffff', '#bababa')).toBeFalsy(); + }); + + it('returns true when given a color combo that is accessible', () => { + expect(service.contrastIsAccessible('#ffffff', '#000000')).toBeTruthy(); + }); + }); +}); + From a68d29fda65c0b76b307b026f0b3adc1550f0af3 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 22 Oct 2019 08:38:46 -0400 Subject: [PATCH 64/98] Added documentation for checkbox --- .../go-checkbox/go-checkbox.component.html | 12 + .../go-checkbox/go-checkbox.component.spec.ts | 7 +- .../button-docs/button-docs.component.html | 2 +- .../checkbox-docs.component.html | 219 ++++++++++++++++++ .../checkbox-docs/checkbox-docs.component.ts | 133 +++++++++++ .../form-docs/form-docs.component.ts | 1 + .../ui-kit/routes/ui-kit-routing.module.ts | 2 + .../src/app/features/ui-kit/ui-kit.module.ts | 10 +- 8 files changed, 381 insertions(+), 5 deletions(-) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts diff --git a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html index d84f2ed10..77b46c8a3 100644 --- a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html +++ b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html @@ -10,4 +10,16 @@ [ngClass]="{'go-form__label--dark': theme === 'dark'}"> {{ label }} + + + +
    + +
    diff --git a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts index 47d94a00d..d58089721 100644 --- a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts @@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { GoCheckboxComponent } from './go-checkbox.component'; +import { GoHintModule } from '../go-hint/go-hint.module'; describe('GoCheckboxComponent', () => { let component: GoCheckboxComponent; @@ -10,7 +11,11 @@ describe('GoCheckboxComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [GoCheckboxComponent], - imports: [FormsModule, ReactiveFormsModule] + imports: [ + FormsModule, + ReactiveFormsModule, + GoHintModule + ] }) .compileComponents(); })); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html index 75d6f2fdd..05da3c776 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html @@ -107,7 +107,7 @@

    Primary Button

    Disabled
    - With Icon +
    diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html new file mode 100644 index 000000000..1dea8e2fe --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html @@ -0,0 +1,219 @@ +
    + + + +

    Setup

    +     + +

    + To use the checkbox components, you'll need to import the CheckboxModule into your module: +

    + + +     +     + + +

    Simpliest Implementation

    +     + +

    + This simpliest way to implement a checkbox requires a <go-checkbox> with the + label and [control] bindings +

    +

    + On the <go-checkbox>, the + label is the name that identifies this checkbox + and the [control] is the corresponding FormControl. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + + +
    +
    +     +     + + + +

    Group Implementation

    +     + +

    + Sometimes it makes sense to combine a series of checkboxes into a group, there is a component for that, + <go-checkbox-group>. +

    +

    + On the <go-checkbox-group>, the only required bindings on + this component are the legend (identifies this set of options) + and the [control] (corresponds to a FormControl). +

    +
    +
    +

    View

    + + + + + + +
    +
    +

    Code

    + + + + +
    +
    +     +     + + + +

    Checkbox Keys

    +     + +

    + The label attribute is used to generate a unique ID to associate the label with the checkbox. + As this might not be desired, the @Input() key: string; + can be used to configure the ID attribute of the checkbox directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the checkbox and + associate the label with the checkbox button. +

    +
    +
    +

    View

    + + +
    +
    +

    Code

    + +
    +
    +
    +

    Example Output

    +

    + Notice in the below example output that the key has been assigned + to both the id attribute on + the input and the for attribute + on the label. +

    + +
    +     +     + + + +

    Checkbox Hints

    +     + +

    + Form hints exist to help give more information about the checkbox & checkbox groups they are attached to. + The @Input() hints: Array<string> + can be used to pass in an array of hints to either the checkbox group or an individual checkbox component. +

    +
    +
    +

    View

    +
    +
    + +
    + + +
    +
    + + +
    +     +
    +
    + + +
    +
    +
    +
    +

    Code

    + + + + +
    +
    +     +     + + + +

    Checkbox Theme

    +     + +

    + By default the theme for the checkboxes is 'light', but there could be + and instance where we need a 'dark' theme. There is a binding + available for that on both the checkbox itself and a checkbox group. +

    +
    +
    +

    View

    +
    +
    + +
    + + +
    +
    + + +
    +     +
    +
    + + +
    +
    +
    +
    +

    Code

    + + +
    +
    +     +     diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts new file mode 100644 index 000000000..fa23b1aaf --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts @@ -0,0 +1,133 @@ +import { Component } from '@angular/core'; +import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service'; +import { FormControl, FormGroup } from '@angular/forms'; + +@Component({ + selector: 'app-checkbox-docs', + templateUrl: './checkbox-docs.component.html' +}) +export class CheckboxDocsComponent { + + checkbox1: FormControl = new FormControl(''); + checkbox2: FormControl = new FormControl(''); + checkbox3: FormControl = new FormControl(''); + checkbox4: FormControl = new FormControl(''); + + checkboxGroup1: FormGroup = new FormGroup({ + option1: new FormControl(''), + option2: new FormControl('') + }); + + checkboxGroup2: FormGroup = new FormGroup({ + option1: new FormControl(''), + option2: new FormControl('') + }); + + checkboxGroup3: FormGroup = new FormGroup({ + option1: new FormControl(''), + option2: new FormControl('') + }); + + groupHints: Array = ['this is a hint for the group']; + checkbox3Hints: Array = ['this is a hint for the this checkbox']; + + checkboxSetup: string = ` + import { GoCheckboxModule } from '@tangoe/goponents'; + + @NgModule({ + imports: [ + GoCheckboxModule + ] + }); + `; + + checkbox1Ex: string = ` + + + `; + + checkboxGroup1Ex: string = ` + + + + + + + + + `; + + checkboxGroup1Ex_ts: string = ` + // component.ts + + checkboxGroup1: FormGroup = new FormGroup({ + option1: new FormControl(''), + option2: new FormControl('') + }); + `; + + checkbox2Ex: string = ` + + + `; + + checkbox2KeyCode: string = ` + + + `; + + checkbox3HintsCode: string = ` + // for the group + groupHints: Array = ['this is a hint for the group']; + + // for a single checkbox + checkbox3Hints: Array = ['this is a hint for the this checkbox']; + `; + + checkbox3Ex: string = ` + + +
    + + +
    +
    + + +
    +     + + + + + `; + + checkbox4Ex: string = ` + + +
    + + +
    +
    + + +
    +     + + + + + `; + + constructor(private subNavService: SubNavService) { + this.subNavService.pageTitle = 'Checkboxes'; + } + +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts index 1090f3a9a..655233ea1 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts @@ -10,6 +10,7 @@ export class FormDocsComponent { { routeTitle: 'Forms', subRoutes: [ { route: './', routeTitle: 'Overview' }, + { route: 'checkbox', routeTitle: 'Checkbox' }, { route: './datepicker', routeTitle: 'Datepicker' }, { route: './input', routeTitle: 'Input' }, { route: './radio', routeTitle: 'Radio' }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index 87f5cb438..c7370e5d1 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -43,6 +43,7 @@ import { ActionSheetPanelDocsComponent } from '../components/action-sheet-docs/c import { AccordionOverviewComponent } from '../components/accordion-docs/components/accordion-overview/accordion-overview.component'; import { SwitchToggleDocsComponent } from '../components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component'; import { RadioButtonDocsComponent } from '../components/form-docs/components/radio-button-docs/radio-button-docs.component'; +import { CheckboxDocsComponent } from '../components/form-docs/components/checkbox-docs/checkbox-docs.component'; const routes: Routes = [ { path: 'ui-kit', component: UiKitComponent }, @@ -62,6 +63,7 @@ const routes: Routes = [ { path: 'ui-kit/copy', component: CopyDocsComponent }, { path: 'ui-kit/forms', component: FormDocsComponent, children: [ { path: '', component: FormsOverviewComponent }, + { path: 'checkbox', component: CheckboxDocsComponent }, { path: 'datepicker', component: DatepickerDocsComponent }, { path: 'input', component: InputDocsComponent }, { path: 'radio', component: RadioButtonDocsComponent }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 996a21714..e3fecbe10 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -10,6 +10,7 @@ import { GoBadgeModule, GoButtonModule, GoCardModule, + GoCheckboxModule, GoConfigService, GoCopyModule, GoDatepickerModule, @@ -22,13 +23,13 @@ import { GoOffCanvasModule, GoOffCanvasService, GoRadioModule, + GoSelectComponent, GoSelectModule, GoSwitchToggleModule, GoTableModule, GoTextAreaModule, GoToasterService, - GoToastModule, - GoSelectComponent + GoToastModule } from '../../../../../go-lib/src/public_api'; // Module Routes @@ -80,6 +81,7 @@ import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/co import { AccordionOverviewComponent } from './components/accordion-docs/components/accordion-overview/accordion-overview.component'; import { SwitchToggleDocsComponent } from './components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component'; import { RadioButtonDocsComponent } from './components/form-docs/components/radio-button-docs/radio-button-docs.component'; +import { CheckboxDocsComponent } from './components/form-docs/components/checkbox-docs/checkbox-docs.component'; @NgModule({ imports: [ @@ -89,6 +91,7 @@ import { RadioButtonDocsComponent } from './components/form-docs/components/radi GoBadgeModule, GoButtonModule, GoCardModule, + GoCheckboxModule, GoCopyModule, GoDatepickerModule, GoIconButtonModule, @@ -150,7 +153,8 @@ import { RadioButtonDocsComponent } from './components/form-docs/components/radi ActionSheetPanelDocsComponent, AccordionOverviewComponent, SwitchToggleDocsComponent, - RadioButtonDocsComponent + RadioButtonDocsComponent, + CheckboxDocsComponent ], entryComponents: [ BasicTestComponent, From 3810fa2c797f16047da1aaeec56765474ca2564a Mon Sep 17 00:00:00 2001 From: Patrick Lewandowski Date: Tue, 22 Oct 2019 11:41:35 -0400 Subject: [PATCH 65/98] use default timezone for Intl.DateTimeFormat --- .../src/lib/components/go-datepicker/date-adapter.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts b/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts index 0dd2ec92c..c3bf152e5 100644 --- a/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts +++ b/projects/go-lib/src/lib/components/go-datepicker/date-adapter.ts @@ -1,6 +1,5 @@ export class DateAdapter { private _locale: string; - private _timezone: string; public monthNames: Array; public dateNames: Array; public daysOfWeek: Array; @@ -11,14 +10,13 @@ export class DateAdapter { public setLocale(locale: string): void { this._locale = locale; - this._timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; this.setMonthNames(); this.setDateNames(); this.setDayOfWeekNames(); } public getYearName(year: number): string { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {year: 'numeric', timeZone: this._timezone}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {year: 'numeric'}); return this.format(format, new Date(year, 0, 1)); } @@ -65,7 +63,7 @@ export class DateAdapter { } private getMonthNames(style: 'long' | 'short' | 'narrow'): Array { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {month: style, timeZone: this._timezone}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {month: style}); const months: Array = []; for (let i: number = 0; i < 12; i++) { months.push(this.format(format, new Date(2017, i, 1))); @@ -74,7 +72,7 @@ export class DateAdapter { } private getDateNames(): Array { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {day: 'numeric', timeZone: this._timezone}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {day: 'numeric'}); const dates: Array = []; for (let i: number = 0; i < 31; i++) { @@ -85,7 +83,7 @@ export class DateAdapter { } private getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): Array { - const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {weekday: style, timeZone: this._timezone}); + const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(this._locale, {weekday: style}); const dayNames: Array = []; for (let i: number = 0; i < 7; i++) { From dd9a0dc0c986fbd784b30b55a6172b2b3a1e3815 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Tue, 22 Oct 2019 15:09:32 -0400 Subject: [PATCH 66/98] Remove iconModifier binding from go-icon within go-button --- .../go-lib/src/lib/components/go-button/go-button.component.html | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.html b/projects/go-lib/src/lib/components/go-button/go-button.component.html index 0d9bfa71e..24ca19fe5 100644 --- a/projects/go-lib/src/lib/components/go-button/go-button.component.html +++ b/projects/go-lib/src/lib/components/go-button/go-button.component.html @@ -15,7 +15,6 @@ Date: Thu, 26 Sep 2019 15:06:23 -0400 Subject: [PATCH 67/98] Adds a go footer to be used with the layout. It uses content project to allow the implementer to decide what they want to put inside. The only thing we are doing is centering the content --- .../go-footer/go-footer.component.html | 3 +++ .../go-footer/go-footer.component.scss | 4 +++ .../go-footer/go-footer.component.spec.ts | 25 +++++++++++++++++++ .../go-footer/go-footer.component.ts | 10 ++++++++ .../components/go-footer/go-footer.module.ts | 18 +++++++++++++ .../go-layout/go-layout.component.html | 19 +++++++++----- .../go-layout/go-layout.component.scss | 17 ++++++++----- .../components/go-layout/go-layout.module.ts | 2 ++ projects/go-lib/src/lib/go-shared.module.ts | 3 +++ projects/go-lib/src/public_api.ts | 4 +++ projects/go-tester/src/app/app.component.html | 3 +++ projects/go-tester/src/app/app.module.ts | 2 ++ 12 files changed, 98 insertions(+), 12 deletions(-) create mode 100644 projects/go-lib/src/lib/components/go-footer/go-footer.component.html create mode 100644 projects/go-lib/src/lib/components/go-footer/go-footer.component.scss create mode 100644 projects/go-lib/src/lib/components/go-footer/go-footer.component.spec.ts create mode 100644 projects/go-lib/src/lib/components/go-footer/go-footer.component.ts create mode 100644 projects/go-lib/src/lib/components/go-footer/go-footer.module.ts diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.html b/projects/go-lib/src/lib/components/go-footer/go-footer.component.html new file mode 100644 index 000000000..f6cf67da9 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.html @@ -0,0 +1,3 @@ +
    + +
    diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.scss b/projects/go-lib/src/lib/components/go-footer/go-footer.component.scss new file mode 100644 index 000000000..0e3b89a0a --- /dev/null +++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.scss @@ -0,0 +1,4 @@ +.go-footer { + justify-content: center; + display: flex; +} diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.spec.ts b/projects/go-lib/src/lib/components/go-footer/go-footer.component.spec.ts new file mode 100644 index 000000000..066895a2c --- /dev/null +++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GoFooterComponent } from './go-footer.component'; + +describe('GoFooterComponent', () => { + let component: GoFooterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoFooterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GoFooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.component.ts b/projects/go-lib/src/lib/components/go-footer/go-footer.component.ts new file mode 100644 index 000000000..2686c618e --- /dev/null +++ b/projects/go-lib/src/lib/components/go-footer/go-footer.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'go-footer', + styleUrls: ['./go-footer.component.scss'], + templateUrl: './go-footer.component.html' +}) +export class GoFooterComponent { + +} diff --git a/projects/go-lib/src/lib/components/go-footer/go-footer.module.ts b/projects/go-lib/src/lib/components/go-footer/go-footer.module.ts new file mode 100644 index 000000000..0ce67f2fa --- /dev/null +++ b/projects/go-lib/src/lib/components/go-footer/go-footer.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { GoFooterComponent } from './go-footer.component'; + +@NgModule({ + declarations: [ + GoFooterComponent + ], + imports: [ + CommonModule + ], + exports: [ + GoFooterComponent + ] +}) + +export class GoFooterModule { } diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html index b26490764..82f7bb44b 100644 --- a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html @@ -7,14 +7,21 @@
    -
    - -
    + #mainRouter="outlet"> + + +
    +
    + +
    diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss index 4bbdb2d47..77df4f979 100644 --- a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss @@ -26,16 +26,21 @@ body { .go-layout__route-container { display: flex; flex-grow: 1; - position: relative; + flex-direction: column; + width: 100%; + overflow-x: hidden; + overflow-y: scroll; + height: calc(100vh - 4rem); } -.go-layout__route-container-outlet ~ * { - height: 100%; - overflow-x: hidden; - overflow-y: auto; +.go-layout__route-container-outlet ~ :not(go-footer) { + width: 100%; padding: 2rem; - position: absolute; +} + +.go-footer { width: 100%; + padding: 0 2rem 2rem 2rem; } .go-route-loader { diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts b/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts index b2e90ebec..6384c458c 100644 --- a/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; +import { GoFooterModule } from '../go-footer/go-footer.module'; import { GoHeaderModule } from '../go-header/go-header.module'; import { GoLoaderModule } from '../go-loader/go-loader.module'; import { GoModalModule } from '../go-modal/go-modal.module'; @@ -23,6 +24,7 @@ import { GoLayoutComponent } from './go-layout.component'; CommonModule, RouterModule, // Goponents + GoFooterModule, GoHeaderModule, GoLoaderModule, GoModalModule, diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index 29d82c700..df59b2a68 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -24,6 +24,7 @@ import { GoSwitchToggleModule } from './components/go-switch-toggle/go-switch-to import { GoCheckboxModule } from './components/go-checkbox/go-checkbox.module'; import { GoToasterModule } from './components/go-toaster/go-toaster.module'; import { GoDatepickerModule } from './components/go-datepicker/go-datepicker.module'; +import { GoFooterModule } from './components/go-footer/go-footer.module'; @NgModule({ imports: [ @@ -35,6 +36,7 @@ import { GoDatepickerModule } from './components/go-datepicker/go-datepicker.mod GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFooterModule, GoHeaderModule, GoHintModule, GoIconButtonModule, @@ -61,6 +63,7 @@ import { GoDatepickerModule } from './components/go-datepicker/go-datepicker.mod GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFooterModule, GoHeaderModule, GoHintModule, GoIconButtonModule, diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index cfb1a6ec9..59d7f0d1d 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -44,6 +44,10 @@ export * from './lib/components/go-datepicker/calendar-cell.model'; export * from './lib/components/go-datepicker/go-datepicker.component'; export * from './lib/components/go-datepicker/go-datepicker.module'; +// Footer +export * from './lib/components/go-footer/go-footer.component'; +export * from './lib/components/go-footer/go-footer.module'; + // Header export * from './lib/components/go-header/go-header.component'; export * from './lib/components/go-header/go-header.module'; diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index 5eef8ff0b..6b857d7ab 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -44,4 +44,7 @@ + + Footer Works + diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index 31a1a0a4c..90f12d0ff 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -14,6 +14,7 @@ import { GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFooterModule, GoHeaderModule, GoIconButtonModule, GoIconComponent, @@ -73,6 +74,7 @@ import { AppGuard } from './app.guard'; GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFooterModule, GoHeaderModule, GoIconModule, GoIconButtonModule, From cf81358ac129d40325630ca37fa8ee4520a32d28 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Mon, 7 Oct 2019 10:46:41 -0400 Subject: [PATCH 68/98] remove scroll from content --- .../go-lib/src/lib/components/go-layout/go-layout.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss index 77df4f979..ab92bd48f 100644 --- a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss @@ -9,6 +9,7 @@ body { display: flex; flex-direction: column; height: 100vh; + width: 100vw; overflow: hidden; } From 1ad556a141441ab9dccdda7112d77a2c396c8072 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 8 Oct 2019 11:44:46 -0400 Subject: [PATCH 69/98] fix css around layout nav with overflow --- .../src/lib/components/go-layout/go-layout.component.html | 2 +- .../src/lib/components/go-layout/go-layout.component.scss | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html index 82f7bb44b..807e5245c 100644 --- a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html @@ -1,7 +1,7 @@
    -