├── .babelrc ├── .eslintignore ├── .eslintrc ├── .github ├── README.md └── button-example.png ├── .gitignore ├── .hygen.js ├── .npmignore ├── .npmrc ├── .postcssrc.js ├── .theo.setup.js ├── .travis.yml ├── .vscode └── extensions.json ├── .vuepress ├── components │ ├── AllElementsList.vue │ ├── AllElementsListItem.vue │ ├── ComponentDemo.vue │ ├── ComponentDocumentationConstants.vue │ ├── ComponentDocumentationConstantsRow.vue │ ├── ComponentDocumentationEvents.vue │ ├── ComponentDocumentationExamplesCollection.vue │ ├── ComponentDocumentationProperties.vue │ ├── ComponentDocumentationPropertiesRow.vue │ ├── ComponentDocumentationSingleExample.vue │ ├── ComponentDocumentationSlots.vue │ ├── ComponentDocumentationSlotsRow.vue │ ├── DesignTokensListAllTokens.vue │ ├── DesignTokensListAllTokensItem.vue │ ├── DesignTokensListColorToken.vue │ ├── DesignTokensListColors.vue │ ├── DesignTokensListFonts.vue │ ├── DesignTokensListSpacing.vue │ ├── DesignTokensListSpacingToken.vue │ ├── ElementDemo.vue │ ├── ElementDemoActions.vue │ ├── ElementDemoBox.vue │ ├── ElementDemoHorizontalLayout.vue │ └── tokens.mixin.js ├── config.js ├── enhanceApp.js ├── public │ └── assets │ │ └── img │ │ ├── favicon.ico │ │ └── logo.svg └── styles │ ├── _color-utils.scss │ ├── _component-demo.scss │ ├── _component-documentation.scss │ ├── _cursor-utils.scss │ ├── _design-tokens-list-all-tokens.scss │ ├── _design-tokens-list-colors.scss │ ├── _design-tokens-list-fonts.scss │ ├── _design-tokens-list-spacing.scss │ ├── _design-tokens-list.scss │ ├── _element-demo.scss │ ├── _geo-chart-demos.scss │ ├── _legacy.scss │ ├── _text-align-utils.scss │ ├── index.scss │ ├── index.styl │ └── palette.styl ├── .yarnrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── _templates ├── new │ └── component │ │ ├── component.ejs.t │ │ ├── md.ejs.t │ │ ├── prompt.js │ │ ├── style.ejs.t │ │ ├── styles.ejs.t │ │ └── test.ejs.t └── vuepress │ ├── component │ ├── constants.ejs.t │ ├── documentation.ejs.t │ └── prompt.js │ └── example │ ├── example.ejs.t │ └── prompt.js ├── build ├── build-markdown-components.js ├── build-system.js ├── markdown-components.utils.js ├── utils.js ├── watch-markdown-components.js ├── webpack.base.conf.js ├── webpack.system.conf.js └── webpack.test.conf.js ├── config ├── index.js ├── prod.env.js └── test.env.js ├── docs ├── design-tokens.md ├── elements.md └── guides │ ├── developing.md │ ├── getting-started.md │ └── using-constants.md ├── package.json ├── src ├── directives │ ├── GeoClickOutside.js │ ├── GeoContextMenuClickOutside.js │ ├── GeoOnResize.js │ ├── GeoScrollAnywhere.js │ └── Tooltip.js ├── elements │ ├── GeoActivityIndicator │ │ ├── GeoActivityIndicator.examples.md │ │ └── GeoActivityIndicator.vue │ ├── GeoAlert │ │ ├── GeoAlert.constants.js │ │ ├── GeoAlert.examples.md │ │ ├── GeoAlert.vue │ │ ├── GeoErrorAlert.examples.md │ │ ├── GeoErrorAlert.vue │ │ ├── GeoInfoAlert.examples.md │ │ ├── GeoInfoAlert.vue │ │ ├── GeoSuccessAlert.examples.md │ │ ├── GeoSuccessAlert.vue │ │ ├── GeoWarningAlert.examples.md │ │ └── GeoWarningAlert.vue │ ├── GeoBorderedBox │ │ ├── GeoBorderedBox.examples.md │ │ ├── GeoBorderedBox.vue │ │ ├── GeoBorderedBoxColumn.examples.md │ │ ├── GeoBorderedBoxColumn.vue │ │ ├── GeoBorderedBoxFooter.examples.md │ │ ├── GeoBorderedBoxFooter.vue │ │ ├── GeoBorderedBoxHeader.examples.md │ │ ├── GeoBorderedBoxHeader.vue │ │ ├── GeoBorderedBoxHeaderSearchForm.examples.md │ │ └── GeoBorderedBoxHeaderSearchForm.vue │ ├── GeoBorderedToken │ │ ├── GeoBorderedToken.examples.md │ │ └── GeoBorderedToken.vue │ ├── GeoButton │ │ ├── GeoButton.examples.md │ │ ├── GeoButton.mixin.js │ │ ├── GeoButton.template.html │ │ ├── GeoButton.vue │ │ ├── GeoDangerButton.examples.md │ │ ├── GeoDangerButton.vue │ │ ├── GeoDangerLinkButton.examples.md │ │ ├── GeoDangerLinkButton.vue │ │ ├── GeoExternalLinkButton.examples.md │ │ ├── GeoExternalLinkButton.vue │ │ ├── GeoLinkButton.examples.md │ │ ├── GeoLinkButton.vue │ │ ├── GeoPrimaryButton.examples.md │ │ ├── GeoPrimaryButton.vue │ │ ├── GeoSecondaryButton.examples.md │ │ ├── GeoSecondaryButton.vue │ │ ├── GeoTertiaryButton.examples.md │ │ ├── GeoTertiaryButton.vue │ │ ├── GeoTooltipButton.examples.md │ │ └── GeoTooltipButton.vue │ ├── GeoCalendar │ │ ├── GeoCalendar.examples.md │ │ ├── GeoCalendar.utils.js │ │ ├── GeoCalendar.vue │ │ ├── GeoCalendarDateIndicators.mixin.js │ │ ├── GeoCalendarDropdown.examples.md │ │ ├── GeoCalendarDropdown.vue │ │ ├── GeoCalendarGranularityId.mixin.js │ │ ├── GeoCalendarGrid │ │ │ ├── GeoCalendarDayGrid.vue │ │ │ ├── GeoCalendarDayGridDayUnit.vue │ │ │ ├── GeoCalendarDayGridWeekUnit.vue │ │ │ ├── GeoCalendarGrid.mixin.js │ │ │ ├── GeoCalendarGrid.vue │ │ │ ├── GeoCalendarMonthGrid.vue │ │ │ ├── GeoCalendarMonthGridMonthUnit.vue │ │ │ ├── GeoCalendarMonthGridQuarterUnit.vue │ │ │ ├── GeoCalendarYearGrid.vue │ │ │ └── GeoCalendarYearGridYearUnit.vue │ │ ├── GeoCalendarNavigation │ │ │ ├── GeoCalendarNavigation.vue │ │ │ ├── GeoCalendarNavigationDay.vue │ │ │ ├── GeoCalendarNavigationMonth.vue │ │ │ ├── GeoCalendarNavigationYear.mixin.js │ │ │ └── GeoCalendarNavigationYear.vue │ │ ├── GeoCalendarPicker.examples.md │ │ ├── GeoCalendarPicker.vue │ │ ├── GeoCalendarPickerDateUnit.mixin.js │ │ ├── GeoCalendarPickerGranularity │ │ │ ├── GeoCalendarPickerGranularity.mixin.js │ │ │ ├── GeoCalendarPickerGranularityBase.vue │ │ │ ├── GeoCalendarPickerGranularityDay.vue │ │ │ ├── GeoCalendarPickerGranularityMonth.vue │ │ │ ├── GeoCalendarPickerGranularityQuarter.vue │ │ │ ├── GeoCalendarPickerGranularityWeek.vue │ │ │ └── GeoCalendarPickerGranularityYear.vue │ │ └── GeoCalendarRoot.mixin.js │ ├── GeoChart │ │ ├── GeoChart.00.playground.examples.md │ │ ├── GeoChart.01.scales.examples.md │ │ ├── GeoChart.02.chart-axes.examples.md │ │ ├── GeoChart.03.axes-guidelines.examples.md │ │ ├── GeoChart.04.bar-charts.examples.md │ │ ├── GeoChart.05.labels.examples.md │ │ ├── GeoChart.06.color-bar-charts.examples.md │ │ ├── GeoChart.07.0.line-charts.examples.md │ │ ├── GeoChart.07.1.categorical-line-chart.examples.md │ │ ├── GeoChart.07.2.horizontal-line-chart.examples.md │ │ ├── GeoChart.07.3.horizontal-time-line-chart.examples.md │ │ ├── GeoChart.07.4.vertical-line-chart.examples.md │ │ ├── GeoChart.08.line-segments-charts.examples.md │ │ ├── GeoChart.09.anchored-shapes-charts.examples.md │ │ ├── GeoChart.10.pie-charts.examples.md │ │ ├── GeoChart.11.stacked-bars.examples.md │ │ ├── GeoChart.12.quadrant.examples.md │ │ ├── GeoChart.13.0.scatter-plot-chart-data.examples.md │ │ ├── GeoChart.13.1.scatter-plot-chart-groups-color.examples.md │ │ ├── GeoChart.13.2.scatter-plot-chart-groups-radius.examples.md │ │ ├── GeoChart.13.3.scatter-plot-chart-quadrants.examples.md │ │ ├── GeoChart.13.4.scatter-plot-not-interactive.examples.md │ │ ├── GeoChart.d.ts │ │ ├── GeoChart.vue │ │ ├── GeoChartAnchoredShapes │ │ │ ├── GeoChartAnchoredShapes.d.ts │ │ │ └── GeoChartAnchoredShapes.js │ │ ├── GeoChartAxis │ │ │ ├── GeoChartAxis.d.ts │ │ │ └── GeoChartAxis.js │ │ ├── GeoChartAxisGuidelines │ │ │ ├── GeoChartAxisGuidelines.d.ts │ │ │ └── GeoChartAxisGuidelines.js │ │ ├── GeoChartBars │ │ │ ├── GeoChartBars.d.ts │ │ │ └── GeoChartBars.js │ │ ├── GeoChartColorBar │ │ │ ├── GeoChartColorBar.d.ts │ │ │ └── GeoChartColorBar.js │ │ ├── GeoChartConfigs │ │ │ ├── GeoChartConfig.js │ │ │ ├── GeoChartConfigAdapter.anchoredShapes.mixin.js │ │ │ ├── GeoChartConfigAdapter.guidelines.mixin.js │ │ │ ├── GeoChartConfigAdapter.line.mixin.js │ │ │ ├── GeoChartConfigAdapter.lineSegments.mixin.js │ │ │ ├── GeoChartConfigAdapter.mixin.js │ │ │ ├── GeoChartConfigAdapter.quadrant.mixin.js │ │ │ ├── GeoChartConfigAdapter.scatterPlot.mixin.js │ │ │ └── GeoChartConfigAdapterUtils.js │ │ ├── GeoChartDimensions.d.ts │ │ ├── GeoChartGlobalOptions.d.ts │ │ ├── GeoChartLabels │ │ │ ├── GeoChartLabels.d.ts │ │ │ └── GeoChartLabels.js │ │ ├── GeoChartLine │ │ │ ├── GeoChartLine.d.ts │ │ │ └── GeoChartLine.js │ │ ├── GeoChartLineSegments │ │ │ ├── GeoChartLineSegments.d.ts │ │ │ └── GeoChartLineSegments.js │ │ ├── GeoChartPie │ │ │ ├── GeoChartPie.d.ts │ │ │ └── GeoChartPie.js │ │ ├── GeoChartQuadrant │ │ │ ├── GeoChartQuadrant.d.ts │ │ │ └── GeoChartQuadrant.js │ │ ├── GeoChartScale │ │ │ ├── GeoChartScale.d.ts │ │ │ └── GeoChartScale.js │ │ ├── GeoChartScatterPlot │ │ │ ├── GeoChartScatterPlot.d.ts │ │ │ └── GeoChartScatterPlot.js │ │ ├── GeoChartSizing.d.ts │ │ ├── GeoChartStackedBars │ │ │ ├── GeoChartStackedBars.d.ts │ │ │ └── GeoChartStackedBars.js │ │ ├── GeoChartUtils │ │ │ ├── GeoChartSizing.js │ │ │ ├── GeoChartTextDescription.d.ts │ │ │ ├── GeoChartTextDescription.js │ │ │ ├── GeoChartTooltip.js │ │ │ ├── axisUtils.js │ │ │ ├── barsUtils.js │ │ │ ├── dimensionUtils.js │ │ │ ├── numericUtils.js │ │ │ ├── scaleUtils.js │ │ │ ├── textDescriptionUtils.js │ │ │ └── textUtils.js │ │ └── constants.js │ ├── GeoCircle │ │ ├── GeoCircle.examples.md │ │ └── GeoCircle.vue │ ├── GeoCollapsableBox │ │ ├── GeoCollapsableBox.examples.md │ │ └── GeoCollapsableBox.vue │ ├── GeoCompactButton │ │ ├── GeoCompactButton.examples.md │ │ ├── GeoCompactButton.mixin.js │ │ ├── GeoCompactButton.template.html │ │ ├── GeoCompactButton.vue │ │ ├── GeoDangerCompactButton.examples.md │ │ ├── GeoDangerCompactButton.vue │ │ ├── GeoInputAccessoryCompactButton.examples.md │ │ ├── GeoInputAccessoryCompactButton.vue │ │ ├── GeoPrimaryCompactButton.examples.md │ │ ├── GeoPrimaryCompactButton.vue │ │ ├── GeoSecondaryCompactButton.examples.md │ │ └── GeoSecondaryCompactButton.vue │ ├── GeoDropdown │ │ ├── GeoDropdown.constants.js │ │ ├── GeoDropdown.examples.md │ │ ├── GeoDropdown.vue │ │ ├── GeoDropdownCompactButton.examples.md │ │ ├── GeoDropdownCompactButton.vue │ │ ├── GeoDropdownRegularButton.examples.md │ │ ├── GeoDropdownRegularButton.vue │ │ ├── GeoDropdownSelectButton.examples.md │ │ └── GeoDropdownSelectButton.vue │ ├── GeoEditableInput │ │ ├── GeoEditableInput.constants.js │ │ ├── GeoEditableInput.examples.md │ │ └── GeoEditableInput.vue │ ├── GeoFeedbackBox │ │ ├── GeoErrorFeedbackBox.examples.md │ │ ├── GeoErrorFeedbackBox.vue │ │ ├── GeoFeedbackBox.examples.md │ │ ├── GeoFeedbackBox.mixin.js │ │ ├── GeoFeedbackBox.template.html │ │ ├── GeoFeedbackBox.vue │ │ ├── GeoInfoFeedbackBox.examples.md │ │ ├── GeoInfoFeedbackBox.vue │ │ ├── GeoProgressFeedbackBox.examples.md │ │ ├── GeoProgressFeedbackBox.vue │ │ ├── GeoSuccessFeedbackBox.examples.md │ │ ├── GeoSuccessFeedbackBox.vue │ │ ├── GeoWarningFeedbackBox.examples.md │ │ └── GeoWarningFeedbackBox.vue │ ├── GeoFileUpload │ │ ├── GeoFileUpload.examples.md │ │ ├── GeoFileUpload.mixin.js │ │ └── GeoFileUpload.vue │ ├── GeoHighlightedString │ │ ├── GeoHighlightedString.examples.md │ │ └── GeoHighlightedString.vue │ ├── GeoHorizontalLayout │ │ ├── GeoHorizontalLayout.examples.md │ │ └── GeoHorizontalLayout.vue │ ├── GeoInput │ │ ├── GeoInput.examples.md │ │ ├── GeoInput.vue │ │ ├── GeoInputLabel.examples.md │ │ ├── GeoInputLabel.vue │ │ ├── GeoInputMessage.constants.js │ │ ├── GeoInputMessage.examples.md │ │ ├── GeoInputMessage.vue │ │ ├── GeoInputPrefix.examples.md │ │ ├── GeoInputPrefix.vue │ │ ├── GeoInputSuffix.examples.md │ │ └── GeoInputSuffix.vue │ ├── GeoList │ │ ├── GeoListActionableItem.examples.md │ │ ├── GeoListActionableItem.vue │ │ ├── GeoListClearItem.examples.md │ │ ├── GeoListClearItem.vue │ │ ├── GeoListFooterButton.examples.md │ │ ├── GeoListFooterButton.vue │ │ ├── GeoListGroup.examples.md │ │ ├── GeoListGroup.vue │ │ ├── GeoListItem.examples.md │ │ └── GeoListItem.vue │ ├── GeoMarkdownContent │ │ ├── GeoMarkdownContent.examples.md │ │ ├── GeoMarkdownContent.vue │ │ ├── GeoMarkdownContentNode.vue │ │ ├── GeoMarkdownContentNodeLink.vue │ │ ├── GeoMarkdownParser.js │ │ └── VariableInterpolationPlugin.js │ ├── GeoMarquee │ │ ├── GeoMarquee.examples.md │ │ └── GeoMarquee.vue │ ├── GeoModal │ │ ├── GeoModal.examples.md │ │ └── GeoModal.vue │ ├── GeoNotificationBar │ │ ├── GeoNotificationBar.examples.md │ │ └── GeoNotificationBar.vue │ ├── GeoPill │ │ ├── GeoPill.examples.md │ │ └── GeoPill.vue │ ├── GeoScrollableContainer │ │ ├── GeoScrollableContainer.examples.md │ │ └── GeoScrollableContainer.vue │ ├── GeoSegmentedControl │ │ ├── GeoDangerSegmentedControlItem.examples.md │ │ ├── GeoDangerSegmentedControlItem.vue │ │ ├── GeoInfoSegmentedControlItem.examples.md │ │ ├── GeoInfoSegmentedControlItem.vue │ │ ├── GeoSegmentedControl.examples.md │ │ ├── GeoSegmentedControl.vue │ │ ├── GeoSegmentedControlItem.constants.js │ │ ├── GeoSegmentedControlItem.examples.md │ │ ├── GeoSegmentedControlItem.vue │ │ ├── GeoSuccessSegmentedControlItem.examples.md │ │ ├── GeoSuccessSegmentedControlItem.vue │ │ ├── GeoWarningSegmentedControlItem.examples.md │ │ └── GeoWarningSegmentedControlItem.vue │ ├── GeoSelect │ │ ├── GeoMultiSelect.examples.md │ │ ├── GeoMultiSelect.vue │ │ ├── GeoSelect.examples.md │ │ ├── GeoSelect.mixin.js │ │ ├── GeoSelect.vue │ │ ├── GeoSelectBase.examples.md │ │ ├── GeoSelectBase.vue │ │ ├── GeoSelectToggleButton.examples.md │ │ └── GeoSelectToggleButton.vue │ ├── GeoSidebarLayout │ │ ├── GeoSidebarLayout.examples.md │ │ └── GeoSidebarLayout.vue │ ├── GeoSwitch │ │ ├── GeoSwitch.examples.md │ │ └── GeoSwitch.vue │ ├── GeoTabBar │ │ ├── GeoTabBar.examples.md │ │ ├── GeoTabBar.mixin.js │ │ ├── GeoTabBar.vue │ │ ├── GeoTabBarItem.examples.md │ │ └── GeoTabBarItem.vue │ ├── GeoTable │ │ ├── GeoTable.0.basic.examples.md │ │ ├── GeoTable.1.headers.examples.md │ │ ├── GeoTable.2.customizing-columns-widths.examples.md │ │ ├── GeoTable.3.body.examples.md │ │ ├── GeoTable.4.empty-state.examples.md │ │ ├── GeoTable.5.pagination.examples.md │ │ ├── GeoTable.6.sorting.examples.md │ │ ├── GeoTable.constants.js │ │ ├── GeoTable.utils.js │ │ ├── GeoTable.vue │ │ ├── GeoTableBodyRow.examples.md │ │ ├── GeoTableBodyRow.vue │ │ ├── GeoTableBodyRowCell.examples.md │ │ ├── GeoTableBodyRowCell.vue │ │ ├── GeoTableHeaderRow.examples.md │ │ ├── GeoTableHeaderRow.vue │ │ ├── GeoTableHeaderRowCell.examples.md │ │ ├── GeoTableHeaderRowCell.vue │ │ ├── GeoTableHeaderRowCellMixin.js │ │ ├── GeoTablePagination.examples.md │ │ ├── GeoTablePagination.vue │ │ ├── GeoTablePaginationMixin.js │ │ ├── GeoTableSort.examples.md │ │ └── GeoTableSort.vue │ ├── GeoTooltip │ │ ├── GeoTooltip.constants.js │ │ ├── GeoTooltip.examples.md │ │ └── GeoTooltip.vue │ ├── GeoTree │ │ ├── GeoTree.constants.js │ │ ├── GeoTree.examples.md │ │ ├── GeoTree.vue │ │ ├── GeoTreeItem.vue │ │ └── GeoTreeMixin.js │ ├── GeoTrimmedContent │ │ ├── GeoTrimmedContent.examples.md │ │ └── GeoTrimmedContent.vue │ ├── GeoValue │ │ ├── GeoNegativeValue.examples.md │ │ ├── GeoNegativeValue.vue │ │ ├── GeoNeutralValue.examples.md │ │ ├── GeoNeutralValue.vue │ │ ├── GeoPositiveValue.examples.md │ │ ├── GeoPositiveValue.vue │ │ ├── GeoValue.examples.md │ │ ├── GeoValue.mixin.js │ │ ├── GeoValue.template.html │ │ └── GeoValue.vue │ ├── GeoVerticalLayout │ │ ├── GeoVerticalLayout.examples.md │ │ └── GeoVerticalLayout.vue │ └── GeoWizardLayout │ │ ├── GeoWizardLayout.examples.md │ │ └── GeoWizardLayout.vue ├── mixins │ ├── debugUpdatedHookMixin.js │ ├── extendedListenersMixin.js │ └── inferPageSizeMixin.js ├── patterns │ └── .gitkeep ├── styles │ ├── _fontsMaps.scss │ ├── _functions.scss │ ├── _mixins.scss │ ├── _spacing.scss │ ├── elements │ │ ├── GeoActivityIndicator │ │ │ └── _geo-activity-indicator.scss │ │ ├── GeoAlert │ │ │ └── _geo-alert.scss │ │ ├── GeoBorderedBox │ │ │ ├── _geo-bordered-box-column.scss │ │ │ ├── _geo-bordered-box-footer.scss │ │ │ ├── _geo-bordered-box-header-search-form.scss │ │ │ ├── _geo-bordered-box-header.scss │ │ │ └── _geo-bordered-box.scss │ │ ├── GeoBorderedToken │ │ │ └── _geo-bordered-token.scss │ │ ├── GeoButton │ │ │ └── _geo-button.scss │ │ ├── GeoCalendar │ │ │ ├── _geo-calendar-dropdown.scss │ │ │ ├── _geo-calendar-grid.scss │ │ │ ├── _geo-calendar-picker.scss │ │ │ └── _geo-calendar.scss │ │ ├── GeoChart │ │ │ └── _geo-chart.scss │ │ ├── GeoCircle │ │ │ └── _geo-circle.scss │ │ ├── GeoCollapsableBox │ │ │ └── _geo-collapsable-box.scss │ │ ├── GeoCompactButton │ │ │ └── _geo-compact-button.scss │ │ ├── GeoDropdown │ │ │ ├── _geo-dropdown-compact-button.scss │ │ │ ├── _geo-dropdown-regular-button.scss │ │ │ ├── _geo-dropdown-select-button.scss │ │ │ └── _geo-dropdown.scss │ │ ├── GeoEditableInput │ │ │ └── _geo-editable-input.scss │ │ ├── GeoFeedbackBox │ │ │ └── _geo-feedback-box.scss │ │ ├── GeoFileUpload │ │ │ └── _geo-file-upload.scss │ │ ├── GeoHighlightedString │ │ │ └── _geo-highlighted-string.scss │ │ ├── GeoHorizontalLayout │ │ │ └── _geo-horizontal-layout.scss │ │ ├── GeoInput │ │ │ ├── _geo-input-label.scss │ │ │ ├── _geo-input-message.scss │ │ │ ├── _geo-input-prefix.scss │ │ │ ├── _geo-input-suffix.scss │ │ │ └── _geo-input.scss │ │ ├── GeoList │ │ │ ├── _geo-list-actionable-item.scss │ │ │ ├── _geo-list-clear-item.scss │ │ │ ├── _geo-list-footer-button.scss │ │ │ ├── _geo-list-group.scss │ │ │ └── _geo-list-item.scss │ │ ├── GeoMarkdownContent │ │ │ └── _geo-markdown-content.scss │ │ ├── GeoMarquee │ │ │ └── _geo-marquee.scss │ │ ├── GeoModal │ │ │ └── _geo-modal.scss │ │ ├── GeoNotificationBar │ │ │ └── _geo-notification-bar.scss │ │ ├── GeoPill │ │ │ └── _geo-pill.scss │ │ ├── GeoScrollableContainer │ │ │ └── _geo-scrollable-container.scss │ │ ├── GeoSegmentedControl │ │ │ ├── _geo-segmented-control-item.scss │ │ │ └── _geo-segmented-control.scss │ │ ├── GeoSelect │ │ │ ├── _geo-multi-select.scss │ │ │ ├── _geo-select-base.scss │ │ │ ├── _geo-select-toggle-button.scss │ │ │ └── _geo-select.scss │ │ ├── GeoSidebarLayout │ │ │ └── _geo-sidebar-layout.scss │ │ ├── GeoSwitch │ │ │ └── _geo-switch.scss │ │ ├── GeoTabBar │ │ │ ├── _geo-tab-bar-item.scss │ │ │ └── _geo-tab-bar.scss │ │ ├── GeoTable │ │ │ ├── _geo-table-0.constants.scss │ │ │ ├── _geo-table-0.row.common.scss │ │ │ ├── _geo-table-body-row-cell.scss │ │ │ ├── _geo-table-body-row.scss │ │ │ ├── _geo-table-header-row-cell.scss │ │ │ ├── _geo-table-header-row.scss │ │ │ ├── _geo-table-pagination.scss │ │ │ ├── _geo-table-sort.scss │ │ │ └── _geo-table.scss │ │ ├── GeoTooltip │ │ │ └── _geo-tooltip.scss │ │ ├── GeoTree │ │ │ ├── _geo-tree-item.scss │ │ │ └── _geo-tree.scss │ │ ├── GeoTrimmedContent │ │ │ └── _geo-trimmed-content.scss │ │ ├── GeoValue │ │ │ └── _geo-value.scss │ │ ├── GeoVerticalLayout │ │ │ └── _geo-vertical-layout.scss │ │ └── GeoWizardLayout │ │ │ └── _geo-wizard-layout.scss │ └── styles.scss ├── system.js ├── templates │ └── .gitkeep ├── tokens │ ├── border-radius.yml │ ├── box-shadow.yml │ ├── color.yml │ ├── easing.yml │ ├── font-family.yml │ ├── font-size.yml │ ├── font-weight.yml │ ├── font.yml │ ├── letter-spacing.yml │ ├── line-height.yml │ ├── media-query.yml │ ├── opacity.yml │ ├── size.yml │ ├── spacing.yml │ ├── timing.yml │ ├── tokens.yml │ └── z-index.yml └── utils │ ├── counterFactory.js │ ├── enumPropertyFactory.js │ ├── getDOMElementOffset.js │ ├── isServer.js │ ├── mockFontAwesomeProIcons.js │ ├── ssrProxy.js │ ├── throttle.js │ ├── vueInstance.js │ └── webFontLoader.js ├── test └── unit │ ├── .eslintrc │ ├── index.js │ ├── jest.conf.js │ ├── setup.js │ ├── specs │ ├── elements │ │ ├── GeoActivityIndicator.spec.js │ │ ├── GeoAlert │ │ │ └── GeoAlert.spec.js │ │ ├── GeoBorderedBox │ │ │ ├── GeoBorderedBox.spec.js │ │ │ ├── GeoBorderedBoxColumn.spec.js │ │ │ ├── GeoBorderedBoxFooter.spec.js │ │ │ ├── GeoBorderedBoxHeader.spec.js │ │ │ └── GeoBorderedBoxHeaderSearchForm.spec.js │ │ ├── GeoBorderedToken │ │ │ └── GeoBorderedToken.spec.js │ │ ├── GeoButton.spec.js │ │ ├── GeoCalendar │ │ │ ├── GeoCalendar.spec.js │ │ │ ├── GeoCalendarDropdown.spec.js │ │ │ ├── GeoCalendarGrid │ │ │ │ ├── GeoCalendarDayGrid.spec.js │ │ │ │ ├── GeoCalendarDayGridDayUnit.spec.js │ │ │ │ ├── GeoCalendarDayGridWeekUnit.spec.js │ │ │ │ ├── GeoCalendarGrid.spec.js │ │ │ │ ├── GeoCalendarMonthGrid.spec.js │ │ │ │ ├── GeoCalendarMonthGridMonthUnit.spec.js │ │ │ │ ├── GeoCalendarMonthGridQuarterUnit.spec.js │ │ │ │ ├── GeoCalendarYearGrid.spec.js │ │ │ │ └── GeoCalendarYearGridYearUnit.spec.js │ │ │ ├── GeoCalendarNavigation │ │ │ │ ├── GeoCalendarNavigation.spec.js │ │ │ │ ├── GeoCalendarNavigationDay.spec.js │ │ │ │ ├── GeoCalendarNavigationMonth.spec.js │ │ │ │ └── GeoCalendarNavigationYear.spec.js │ │ │ ├── GeoCalendarPicker.spec.js │ │ │ └── GeoCalendarPickerGranularity │ │ │ │ ├── GeoCalendarPickerGranularityBase.spec.js │ │ │ │ ├── GeoCalendarPickerGranularityDay.spec.js │ │ │ │ ├── GeoCalendarPickerGranularityMonth.spec.js │ │ │ │ ├── GeoCalendarPickerGranularityQuarter.spec.js │ │ │ │ ├── GeoCalendarPickerGranularityWeek.spec.js │ │ │ │ └── GeoCalendarPickerGranularityYear.spec.js │ │ ├── GeoChart │ │ │ ├── GeoChart.spec-utils.js │ │ │ ├── GeoChart.spec.js │ │ │ ├── GeoChartAnchoredShapes.spec.js │ │ │ ├── GeoChartAxis.spec.js │ │ │ ├── GeoChartAxisGuidelines.spec.js │ │ │ ├── GeoChartBars.spec.js │ │ │ ├── GeoChartColorBar.spec.js │ │ │ ├── GeoChartLine.spec.js │ │ │ ├── GeoChartLineSegments.spec.js │ │ │ ├── GeoChartPie.spec.js │ │ │ ├── GeoChartQuadrant.spec.js │ │ │ ├── GeoChartScale.spec.js │ │ │ ├── GeoChartScatterPlot.spec.js │ │ │ ├── GeoChartSizing.spec.js │ │ │ ├── GeoChartStackedBars.spec.js │ │ │ ├── GeoChartTextDescription.spec.js │ │ │ └── GeoChartTextDescriptionUtils.spec.js │ │ ├── GeoChartLabel │ │ │ └── GeoChartLabel.spec.js │ │ ├── GeoCircle.spec.js │ │ ├── GeoCollapsableBox │ │ │ └── GeoCollapsableBox.spec.js │ │ ├── GeoCompactButton │ │ │ ├── GeoCompactButton.spec.js │ │ │ └── GeoDangerCompactButton.spec.js │ │ ├── GeoDropdown │ │ │ ├── GeoDropdown.spec.js │ │ │ ├── GeoDropdownCompactButton.spec.js │ │ │ ├── GeoDropdownRegularButton.spec.js │ │ │ └── GeoDropdownSelectButton.spec.js │ │ ├── GeoEditableInput.spec.js │ │ ├── GeoFeedbackBox.spec.js │ │ ├── GeoFileUpload │ │ │ └── GeoFileUpload.spec.js │ │ ├── GeoHighlightedString.spec.js │ │ ├── GeoHorizontalLayout │ │ │ └── GeoHorizontalLayout.spec.js │ │ ├── GeoInput │ │ │ ├── GeoInput.spec.js │ │ │ ├── GeoInputLabel.spec.js │ │ │ ├── GeoInputMessage.spec.js │ │ │ ├── GeoInputPrefix.spec.js │ │ │ └── GeoInputSuffix.spec.js │ │ ├── GeoList │ │ │ ├── GeoListClearItem.spec.js │ │ │ ├── GeoListFooterButton.spec.js │ │ │ ├── GeoListGroup.spec.js │ │ │ └── GeoListItem.spec.js │ │ ├── GeoListActionableItem.spec.js │ │ ├── GeoMarkdownContent │ │ │ └── GeoMarkdownContent.spec.js │ │ ├── GeoMarquee.spec.js │ │ ├── GeoModal │ │ │ └── GeoModal.spec.js │ │ ├── GeoNotificationBar │ │ │ └── GeoNotificationBar.spec.js │ │ ├── GeoPill.spec.js │ │ ├── GeoScrollableContainer │ │ │ └── GeoScrollableContainer.spec.js │ │ ├── GeoSegmentedControl │ │ │ ├── GeoSegmentedControl.spec.js │ │ │ └── GeoSegmentedControlItem.spec.js │ │ ├── GeoSelect │ │ │ ├── GeoMultiSelect.spec.js │ │ │ ├── GeoSelect.spec.js │ │ │ ├── GeoSelectBase.spec.js │ │ │ └── GeoSelectToggleButton.spec.js │ │ ├── GeoSidebarLayout │ │ │ └── GeoSidebarLayout.spec.js │ │ ├── GeoSwitch │ │ │ └── GeoSwitch.spec.js │ │ ├── GeoTabBar │ │ │ ├── GeoTabBar.spec.js │ │ │ └── GeoTabBarItem.spec.js │ │ ├── GeoTable │ │ │ ├── GeoTable.spec-utils.js │ │ │ ├── GeoTable.spec.js │ │ │ ├── GeoTable.utils.spec.js │ │ │ ├── GeoTableBodyRow.spec.js │ │ │ ├── GeoTableBodyRowCell.spec.js │ │ │ ├── GeoTableHeaderRow.spec.js │ │ │ ├── GeoTableHeaderRowCell.spec.js │ │ │ ├── GeoTablePagination.spec.js │ │ │ └── GeoTableSort.spec.js │ │ ├── GeoTooltip │ │ │ ├── GeoTooltip.spec.js │ │ │ └── GeoTooltip.utils.spec.js │ │ ├── GeoTree │ │ │ ├── GeoTree.spec.js │ │ │ └── GeoTreeItem.spec.js │ │ ├── GeoTrimmedContent.spec.js │ │ ├── GeoValue │ │ │ └── GeoValue.spec.js │ │ ├── GeoVerticalLayout │ │ │ └── GeoVerticalLayout.spec.js │ │ └── GeoWizardLayout │ │ │ └── GeoWizardLayout.spec.js │ └── utils │ │ ├── counterFactory.spec.js │ │ ├── enumPropertyFactory.spec.js │ │ ├── getDOMElementOffset.spec.js │ │ ├── isServer.spec.js │ │ └── throttle.spec.js │ └── utils │ └── FontAwesomeIconMock.js ├── tsconfig.json ├── vue-shims.d.ts └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ], 5 | "plugins": [ 6 | "@babel/plugin-syntax-dynamic-import", 7 | "@babel/plugin-transform-runtime" 8 | ], 9 | "env": { 10 | "test": { 11 | "presets": [ 12 | "@babel/preset-env" 13 | ], 14 | "plugins": [ 15 | "@babel/plugin-syntax-dynamic-import" 16 | ] 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | dist/* 3 | test/unit/coverage/* 4 | public/* 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "extends": [ 6 | "standard", 7 | "plugin:vue/recommended" 8 | ], 9 | "rules": { 10 | "vue/require-default-prop": "off", 11 | "no-console": ["error", { "allow": ["warn", "error"] }] 12 | }, 13 | "parserOptions": { 14 | "sourceType": "module", 15 | "ecmaVersion": 8, 16 | "ecmaFeatures": { 17 | "jsx": true 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /.github/button-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoblink/design-system/935a43e99f814a63fa192da37bde724919187d0b/.github/button-example.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .eslintcache 3 | node_modules/ 4 | dist/ 5 | public/ 6 | /test/unit/coverage/ 7 | test-report.xml 8 | test-reports/ 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | 20 | # Ignore compiled tokens 21 | .vuepress/public/tokens/ 22 | src/assets/tokens/ 23 | 24 | # Ignore webpack stats 25 | webpack.stats.* 26 | 27 | # Ignore automatically generated Markdown files 28 | docs/components 29 | # Ignore automatically generated Vue components 30 | .vuepress/components/constants 31 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .idea 9 | .vscode 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | 15 | # Static images for landing and documentation 16 | dist/system/icons/ 17 | dist/system/*.png 18 | dist/system/*.ico 19 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | //registry.npmjs.org/:_authToken=${NPM_TOKEN} 2 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: { 5 | 'postcss-import': {}, 6 | 'postcss-url': {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | autoprefixer: {} 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 16 4 | 5 | branches: 6 | except: 7 | - gh-pages 8 | 9 | cache: 10 | yarn: true 11 | 12 | stages: 13 | - lint 14 | - test 15 | - build 16 | 17 | jobs: 18 | include: 19 | - stage: lint 20 | script: 21 | - yarn lint 22 | 23 | - stage: test 24 | node_js: 12 25 | script: 26 | - yarn test 27 | - stage: test 28 | node_js: 14 29 | script: 30 | - yarn test 31 | - stage: test 32 | node_js: 16 33 | script: 34 | - yarn test 35 | 36 | - stage: build 37 | name: build docs and system 38 | script: 39 | - yarn build:docs && yarn build:system 40 | 41 | after_success: 42 | - yarn global add codecov 43 | - codecov 44 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "mrmlnc.vscode-scss", 5 | "shinnn.stylelint", 6 | "wayou.vscode-todo-highlight", 7 | "octref.vetur", 8 | "dariofuzinato.vue-peek", 9 | "redhat.vscode-yaml" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.vuepress/components/AllElementsList.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationConstants.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 31 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationConstantsRow.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 55 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationEvents.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 41 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationExamplesCollection.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 34 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationProperties.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 44 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationSingleExample.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 43 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationSlots.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 31 | -------------------------------------------------------------------------------- /.vuepress/components/ComponentDocumentationSlotsRow.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 47 | -------------------------------------------------------------------------------- /.vuepress/components/DesignTokensListAllTokens.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | -------------------------------------------------------------------------------- /.vuepress/components/DesignTokensListColorToken.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | -------------------------------------------------------------------------------- /.vuepress/components/DesignTokensListColors.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /.vuepress/components/DesignTokensListSpacing.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /.vuepress/components/DesignTokensListSpacingToken.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /.vuepress/components/ElementDemo.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 27 | -------------------------------------------------------------------------------- /.vuepress/components/ElementDemoActions.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vuepress/components/ElementDemoBox.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vuepress/components/ElementDemoHorizontalLayout.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vuepress/components/tokens.mixin.js: -------------------------------------------------------------------------------- 1 | import * as tokens from './../public/tokens/tokens.raw.json' 2 | 3 | export default { 4 | computed: { 5 | allTokens () { 6 | return tokens 7 | }, 8 | 9 | allTokensProps () { 10 | return this.allTokens.default.props 11 | }, 12 | 13 | allTokensByType () { 14 | return _.groupBy(this.allTokensProps, 'type') 15 | }, 16 | 17 | allTokensByCategory () { 18 | return _.groupBy(this.allTokensProps, 'category') 19 | }, 20 | 21 | colorTokens () { 22 | return this.allTokensByType.color 23 | }, 24 | 25 | fontTokens () { 26 | return this.allTokensByCategory.font 27 | }, 28 | 29 | spacingTokens () { 30 | return this.allTokensByCategory.space 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import './styles/index.scss' 2 | 3 | import { library } from '@fortawesome/fontawesome-svg-core' 4 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 5 | 6 | import { fab } from '@fortawesome/free-brands-svg-icons' 7 | import { fas } from '@fortawesome/free-solid-svg-icons' 8 | import { far } from '@fortawesome/free-regular-svg-icons' 9 | 10 | import mockFontAwesomeProIcons from '../src/utils/mockFontAwesomeProIcons' 11 | import GeoblinkDesignSystem from '../src/system' 12 | 13 | // We only want to load this in client-side rendering. 14 | if (typeof window !== 'undefined') { 15 | require('../src/utils/webFontLoader') 16 | } 17 | 18 | library.add(fab, fas, far) 19 | mockFontAwesomeProIcons(library) 20 | 21 | export default ({ Vue }) => { 22 | Vue.component('font-awesome-icon', FontAwesomeIcon) 23 | Vue.use(GeoblinkDesignSystem) 24 | } 25 | -------------------------------------------------------------------------------- /.vuepress/public/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geoblink/design-system/935a43e99f814a63fa192da37bde724919187d0b/.vuepress/public/assets/img/favicon.ico -------------------------------------------------------------------------------- /.vuepress/styles/_color-utils.scss: -------------------------------------------------------------------------------- 1 | .u-background--primary { 2 | background: $color-blue; 3 | } 4 | 5 | .u-background--info { 6 | background: $color-blue-light; 7 | } 8 | 9 | .u-background--success { 10 | background: $color-green; 11 | } 12 | 13 | .u-background--error { 14 | background: $color-red; 15 | } 16 | 17 | .u-background--warn { 18 | background: $color-yellow; 19 | } 20 | 21 | .u-background--progress { 22 | background: $color-blue-dark; 23 | } 24 | 25 | .u-background--dark-transparent { 26 | background: rgba(0, 0, 0, .8); 27 | } 28 | 29 | .u-color--white { 30 | color: $color-white; 31 | } 32 | 33 | .u-color--primary { 34 | color: $color-blue; 35 | } 36 | 37 | .u-color--info { 38 | color: $color-blue-light; 39 | } 40 | 41 | .u-color--success { 42 | color: $color-green; 43 | } 44 | 45 | .u-color--error { 46 | color: $color-red; 47 | } 48 | 49 | .u-color--warn { 50 | color: $color-yellow; 51 | } 52 | 53 | .u-color--progress { 54 | color: $color-blue-dark; 55 | } 56 | 57 | .u-fill--red { 58 | fill: $color-red; 59 | } 60 | 61 | .u-fill--green { 62 | fill: $color-green; 63 | } 64 | -------------------------------------------------------------------------------- /.vuepress/styles/_component-documentation.scss: -------------------------------------------------------------------------------- 1 | $odd-row-background: #f6f8fa; 2 | 3 | .c-component-documentation { 4 | .c-component-documentation__even-row { 5 | background: $color-white; 6 | } 7 | 8 | .c-component-documentation__odd-row { 9 | background: $odd-row-background; 10 | } 11 | 12 | table { 13 | display: table; 14 | width: 100%; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.vuepress/styles/_cursor-utils.scss: -------------------------------------------------------------------------------- 1 | .u-cursor--pointer { 2 | cursor: pointer; 3 | } 4 | -------------------------------------------------------------------------------- /.vuepress/styles/_design-tokens-list-all-tokens.scss: -------------------------------------------------------------------------------- 1 | .c-design-tokens-list-all-tokens { 2 | @include reset; 3 | 4 | table { 5 | display: table; 6 | width: 100%; 7 | } 8 | 9 | .c-design-tokens-list-all-tokens-token-item-row__value { 10 | align-items: center; 11 | display: flex; 12 | flex-direction: row; 13 | } 14 | 15 | .c-design-tokens-list-all-tokens-token-item-row__example { 16 | border-radius: $border-radius-default; 17 | background: $color-white; 18 | box-shadow: $box-shadow-small-inset, $box-shadow-small-inset, $box-shadow-small-inset; 19 | margin-right: $space-small; 20 | width: $space-base; 21 | height: $space-base; 22 | } 23 | 24 | .c-design-tokens-list-all-tokens-token-item-row__example--color { 25 | box-shadow: none; 26 | } 27 | } -------------------------------------------------------------------------------- /.vuepress/styles/_design-tokens-list-colors.scss: -------------------------------------------------------------------------------- 1 | .c-design-tokens-list-colors__color-tokens-list { 2 | display: grid; 3 | display: -ms-grid; 4 | grid-template-columns: repeat(3, 1fr); 5 | grid-column-gap: $space-base; 6 | grid-row-gap: $space-base; 7 | -ms-grid-column-gap: $space-base; 8 | -ms-grid-row-gap: $space-base; 9 | -ms-grid-template-columns: repeat(3, 1fr); 10 | } 11 | 12 | .c-design-tokens-list-color-token { 13 | border-radius: $border-radius-default; 14 | box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15); 15 | cursor: pointer; 16 | overflow: hidden; 17 | } 18 | 19 | .c-design-tokens-list-color-token__background { 20 | border-bottom: 1px solid $color-white-dark; 21 | height: 75px; 22 | } 23 | 24 | .c-design-tokens-list-color-token__description { 25 | padding: $space-base $space-small; 26 | } 27 | 28 | .c-design-tokens-list-color-token__name { 29 | @include reset; 30 | @include font($heading); 31 | 32 | text-transform: capitalize; 33 | padding-bottom: $space-small; 34 | } 35 | 36 | .c-design-tokens-list-color-token__code, 37 | .c-design-tokens-list-color-token__variable { 38 | @include reset; 39 | @include font($label-optional); 40 | } 41 | 42 | .c-design-tokens-list-color-token__code { 43 | padding-bottom: $space-small; 44 | } 45 | -------------------------------------------------------------------------------- /.vuepress/styles/_design-tokens-list-spacing.scss: -------------------------------------------------------------------------------- 1 | .c-design-tokens-list-spacing__token { 2 | @include font($label-optional); 3 | 4 | align-items: center; 5 | background: $color-white-dark; 6 | box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.3); 7 | border-radius: $border-radius-default; 8 | display: flex; 9 | justify-content: center; 10 | margin-bottom: $space-base; 11 | } 12 | 13 | .c-design-tokens-list-spacing__name { 14 | color: $color-grey-darker; 15 | } 16 | 17 | .c-design-tokens-list-spacing__description--offset { 18 | margin-top: 40px; 19 | } -------------------------------------------------------------------------------- /.vuepress/styles/_design-tokens-list.scss: -------------------------------------------------------------------------------- 1 | .c-design-tokens-list__section { 2 | margin-top: $space-large; 3 | } 4 | -------------------------------------------------------------------------------- /.vuepress/styles/_text-align-utils.scss: -------------------------------------------------------------------------------- 1 | .u-text-align--right { 2 | text-align: right; 3 | } 4 | -------------------------------------------------------------------------------- /.vuepress/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import '~vue-directive-tooltip/src/css/index.scss'; 2 | @import '../public/tokens/tokens.scss'; 3 | 4 | @import '../../src/styles/mixins'; 5 | @import '../../src/styles/fontsMaps'; 6 | 7 | @import './component-demo'; 8 | @import './component-documentation'; 9 | @import './design-tokens-list'; 10 | @import './design-tokens-list-fonts'; 11 | @import './design-tokens-list-colors'; 12 | @import './design-tokens-list-spacing'; 13 | @import './design-tokens-list-all-tokens'; 14 | @import './element-demo'; 15 | 16 | @import './color-utils'; 17 | @import './cursor-utils'; 18 | @import './text-align-utils'; 19 | 20 | @import './geo-chart-demos'; 21 | 22 | @import './legacy'; 23 | -------------------------------------------------------------------------------- /.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | .theme-default-content:not(.custom) 2 | max-width: 960px 3 | 4 | .theme-default-content table 5 | display table 6 | table-layout: fixed 7 | width: 100% 8 | 9 | th, td 10 | text-overflow: ellipsis; 11 | overflow: hidden; 12 | 13 | .code-copy { 14 | display: flex; 15 | } 16 | -------------------------------------------------------------------------------- /.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #1464A5 2 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | version-git-message ":bookmark: %s" -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-present Geoblink 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /assets/img/logo.svg 4 | heroText: Geoblink Design system 5 | tagline: A production-ready Open Source Design System for Vue.js applications 6 | actionText: Components → 7 | actionLink: ./docs/Elements.html 8 | features: 9 | - title: Highly composable 10 | details: Use our components standalone or mix them to composed complex layouts. 11 | - title: Battle-tested 12 | details: We intensively test all components in automated unit tests and use them in production. 13 | - title: Locale Agnostic 14 | details: We do not make assumptions on the languages and formats supported by your application. 15 | footer: MIT Licensed | Copyright © 2018-present Geoblink 16 | --- 17 | -------------------------------------------------------------------------------- /_templates/new/component/component.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: src/elements/<%= name %>/<%= name %>.vue 3 | --- 4 | 9 | 10 | 34 | -------------------------------------------------------------------------------- /_templates/new/component/md.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: src/elements/<%= name %>/<%= name %>.examples.md 3 | --- 4 | <% dashedName = h.changeCase.param(name) -%> 5 | 6 | ```vue live 7 | 14 | 15 | 31 | ``` 32 | -------------------------------------------------------------------------------- /_templates/new/component/prompt.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | type: 'input', 4 | name: 'name', 5 | message: 'Component name (for example GeoComponent):', 6 | validate (value) { 7 | if (!value.length) { 8 | return 'Components must have a name.' 9 | } 10 | const nameRegex = RegExp('^Geo[A-Z]\\w*$') 11 | 12 | if (!nameRegex.test(value)) { 13 | return 'Component names should start with Geo and in PascalCase, example GeoComponent.' 14 | } 15 | 16 | return true 17 | } 18 | } 19 | ] 20 | -------------------------------------------------------------------------------- /_templates/new/component/style.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: src/styles/elements/<%= name %>/_<%= h.changeCase.param(name) %>.scss 3 | --- 4 | <% dashedName = h.changeCase.param(name) -%> 5 | 6 | .<%= dashedName %> { 7 | // TODO: Put some SCSS code here 8 | } 9 | -------------------------------------------------------------------------------- /_templates/new/component/styles.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | inject: true 3 | to: src/styles/styles.scss 4 | append: true 5 | --- 6 | @import "../styles/elements/<%= name %>/<%= h.changeCase.param(name) %>"; -------------------------------------------------------------------------------- /_templates/new/component/test.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: test/unit/specs/elements/<%= name %>/<%= name %>.spec.js 3 | --- 4 | import { mount } from '@vue/test-utils' 5 | import <%= name %> from '@/elements/<%= name %>/<%= name %>.vue' 6 | 7 | describe('<%= name %>', function () { 8 | it('Should render', function () { 9 | const wrapper = mount(<%= name %>) 10 | expect(wrapper.find('.<%= h.changeCase.param(name) %>').exists()).toBe(true) 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /_templates/vuepress/component/constants.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: .vuepress/components/constants/<%= h.withoutExtension(path) %>Constants.vue 3 | --- 4 | 5 | 16 | 17 | -------------------------------------------------------------------------------- /_templates/vuepress/component/prompt.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | module.exports = [ 4 | { 5 | type: 'input', 6 | name: 'path', 7 | message: 'Component path (for example «elements/GeoActivityIndicator/GeoActivityIndicator.vue»):', 8 | validate (value) { 9 | if (!value) return 'Path cannot be empty.' 10 | 11 | if (!fs.existsSync(value)) return 'Path must point to an existing file' 12 | 13 | return true 14 | } 15 | }, 16 | { 17 | type: 'input', 18 | name: 'jsonDocumentation', 19 | message: 'Documentation in JSON format:', 20 | validate (value) { 21 | if (!value) return 'Documentation cannot be empty.' 22 | 23 | try { 24 | JSON.parse(value) 25 | 26 | return true 27 | } catch (error) { 28 | return 'Documentation should be a valid JSON' 29 | } 30 | } 31 | } 32 | ] 33 | -------------------------------------------------------------------------------- /_templates/vuepress/example/example.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | inject: true 3 | to: docs/components/<%= h.withoutExtension(path) %>.md 4 | append: true 5 | --- 6 | 7 | <%- h.renderFileContent(exampleMarkdownPath) %> 8 | -------------------------------------------------------------------------------- /_templates/vuepress/example/prompt.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | module.exports = [ 4 | { 5 | type: 'input', 6 | name: 'path', 7 | message: 'Component path (for example «elements/GeoActivityIndicator/GeoActivityIndicator.vue»):', 8 | validate (value) { 9 | if (!value) return 'Path cannot be empty.' 10 | 11 | if (!fs.existsSync(value)) return 'Path must point to an existing file' 12 | 13 | return true 14 | } 15 | }, 16 | { 17 | type: 'input', 18 | name: 'exampleMarkdownPath', 19 | message: 'Example path (for example «elements/GeoActivityIndicator/GeoActivityIndicator.examples.md»):', 20 | validate (value) { 21 | if (!value) return 'Path to example cannot be empty.' 22 | 23 | if (!fs.existsSync(value)) return 'Path to example must point to an existing file' 24 | 25 | return true 26 | } 27 | } 28 | ] 29 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // This is the webpack config used for unit tests. 3 | 4 | const webpack = require('webpack') 5 | const merge = require('webpack-merge') 6 | 7 | const utils = require('./utils') 8 | const baseWebpackConfig = require('./webpack.base.conf') 9 | 10 | const webpackConfig = merge(baseWebpackConfig, { 11 | // use inline sourcemap for karma-sourcemap-loader 12 | module: { 13 | rules: utils.styleLoaders() 14 | }, 15 | devtool: '#inline-source-map', 16 | resolveLoader: { 17 | alias: { 18 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 19 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 20 | 'scss-loader': 'sass-loader' 21 | } 22 | }, 23 | plugins: [ 24 | new webpack.DefinePlugin({ 25 | 'process.env': require('../config/test.env') 26 | }) 27 | ] 28 | }) 29 | 30 | // no need for app entry during tests 31 | delete webpackConfig.entry 32 | 33 | module.exports = webpackConfig 34 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: "'production'" 4 | } 5 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: "'testing'" 7 | }) 8 | -------------------------------------------------------------------------------- /docs/design-tokens.md: -------------------------------------------------------------------------------- 1 | # Design Tokens 2 | 3 | Design tokens are the atoms of the system as [Salesforce](https://www.lightningdesignsystem.com/design-tokens/) describes them. 4 | In [Geoblink Design System](/) they are used instead of hard coded values to ensure a better consistency across any platform. 5 | 6 | ## Color Palette 7 | 8 | 9 | 10 | ## Fonts 11 | 12 | 13 | 14 | ## Spacing 15 | 16 | 17 | 18 | ## All tokens 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | --- 4 | 5 | Elements are the smallest basic structures of an user interface. They cannot be broken down any further. Buttons, links, and inputs are good examples. Elements utilize decisions made on the [design token](./design-tokens.md) level. 6 | 7 | ::: tip 8 | To add a new `Element`, use NPM script `new:component`: 9 | 10 | ```bash 11 | npm run new:component 12 | # alternatively 13 | yarn new:component 14 | ``` 15 | ::: 16 | 17 | # Elements 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/guides/using-constants.md: -------------------------------------------------------------------------------- 1 | --- 2 | prev: ./getting-started 3 | next: ./developing 4 | --- 5 | 6 | # Using constants 7 | 8 | ::: danger 9 | Avoid hardcoding literals for variants and types: their values might change at any time. 10 | 11 | **Use exported constants instead**. 12 | ::: 13 | 14 | The library exports a collection of constants under `constants` named export. 15 | You can import them using CommonJS or ES6 modules: 16 | 17 | ```js 18 | // CommonJS 19 | const { constants } = require('@geoblink/design-system') 20 | 21 | // ES6 22 | import { constants } from '@geoblink/design-system' 23 | ``` 24 | 25 | `constants` is an object where keys correspond to the names of the components and values hold the constants exposed by each one. 26 | 27 | ::: warning 28 | **Not all the components export constants** so not all of them are present in `constants` object. 29 | ::: 30 | 31 | ::: tip EXAMPLE 32 | For instance, to get the proper value for a primary [GeoButton](/components/GeoButton/GeoButton.html) 33 | you could use: 34 | 35 | ```js 36 | import { constants } from '@geoblink/design-system' 37 | const primary = constants.GeoButton.TYPES.primary // "primary" 38 | ``` 39 | ::: 40 | 41 | A complete list of exported constants appear in each component's documentation page. 42 | -------------------------------------------------------------------------------- /src/directives/GeoScrollAnywhere.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash' 2 | import throttle from '../utils/throttle' 3 | import isServer from '../utils/isServer' 4 | import counterFactory from '../utils/counterFactory' 5 | const getNextCallbackId = counterFactory() 6 | 7 | const runCallbacks = throttle(function (event) { 8 | for (const callback of Object.values(callbacks)) { 9 | callback(event) 10 | } 11 | }) 12 | 13 | let callbacks = {} 14 | 15 | export default { 16 | bind: function (el, binding, vNode) { 17 | if (!isValidBinding(binding) || isServer(vNode)) { 18 | return 19 | } 20 | 21 | if (_.isEmpty(callbacks)) { 22 | window.addEventListener('scroll', runCallbacks, true) 23 | } 24 | 25 | el.__geoOnAnyScrollCallbackId__ = getNextCallbackId() 26 | callbacks[el.__geoOnAnyScrollCallbackId__] = function (event) { 27 | binding.value(event) 28 | } 29 | }, 30 | 31 | unbind: function (el) { 32 | callbacks = _.omit(callbacks, el.__geoOnAnyScrollCallbackId__) 33 | if (_.isEmpty(callbacks)) { 34 | window.removeEventListener('scroll', runCallbacks) 35 | } 36 | } 37 | } 38 | 39 | function isValidBinding (binding) { 40 | if (typeof binding.value !== 'function') { 41 | console.error(`GeoScrollAnywhere [directive] :: provided expression ${binding.expression} is not a function`) 42 | return false 43 | } 44 | 45 | return true 46 | } 47 | -------------------------------------------------------------------------------- /src/directives/Tooltip.js: -------------------------------------------------------------------------------- 1 | const vueDirectiveTooltip = (function () { 2 | try { 3 | const vueDirectiveTooltip = require('vue-directive-tooltip') 4 | let vueDirectiveTooltipConfig = null 5 | // We need this since `vue-directive-tooltip` does not expose directive's 6 | // config explicitly 7 | vueDirectiveTooltip.install({ 8 | directive (name, config) { 9 | vueDirectiveTooltipConfig = config 10 | } 11 | }) 12 | return vueDirectiveTooltipConfig 13 | } catch (error) { 14 | return null 15 | } 16 | })() 17 | 18 | const tooltipDirective = vueDirectiveTooltip || { } 19 | 20 | export default tooltipDirective 21 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoAlert.constants.js: -------------------------------------------------------------------------------- 1 | const VARIANTS = { 2 | success: 'success', 3 | info: 'info', 4 | warning: 'warning', 5 | error: 'error' 6 | } 7 | 8 | export { VARIANTS } 9 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoErrorAlert.examples.md: -------------------------------------------------------------------------------- 1 | ### Simple 2 | 3 | ```jsx live 4 |
5 |
6 | 7 | A simple alert 8 | 9 |
10 |
11 | ``` 12 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoErrorAlert.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 38 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoInfoAlert.examples.md: -------------------------------------------------------------------------------- 1 | ### Simple 2 | 3 | ```jsx live 4 |
5 |
6 | 7 | A simple alert 8 | 9 |
10 |
11 | ``` 12 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoInfoAlert.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 38 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoSuccessAlert.examples.md: -------------------------------------------------------------------------------- 1 | ### Simple 2 | 3 | ```jsx live 4 |
5 |
6 | 7 | A simple alert 8 | 9 |
10 |
11 | ``` 12 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoSuccessAlert.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 37 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoWarningAlert.examples.md: -------------------------------------------------------------------------------- 1 | ### Simple 2 | 3 | ```jsx live 4 |
5 |
6 | 7 | A simple alert 8 | 9 |
10 |
11 | ``` 12 | -------------------------------------------------------------------------------- /src/elements/GeoAlert/GeoWarningAlert.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 39 | -------------------------------------------------------------------------------- /src/elements/GeoBorderedBox/GeoBorderedBox.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /src/elements/GeoBorderedBox/GeoBorderedBoxColumn.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /src/elements/GeoBorderedBox/GeoBorderedBoxFooter.examples.md: -------------------------------------------------------------------------------- 1 | ```jsx live 2 |
3 |
4 | 5 | Footer content 6 | 7 | 8 | 9 | Save changes 10 | 11 |
12 |
13 | ``` 14 | -------------------------------------------------------------------------------- /src/elements/GeoBorderedBox/GeoBorderedBoxFooter.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /src/elements/GeoBorderedToken/GeoBorderedToken.examples.md: -------------------------------------------------------------------------------- 1 | ### Simple 2 | 3 | ```jsx live 4 |
5 |
6 | 9 |
10 |
11 | ``` 12 | 13 | 14 | ### With icon 15 | 16 | ```jsx live 17 |
18 |
19 | 23 |
24 |
25 | ``` 26 | 27 | ### Disabled 28 | 29 | ```jsx live 30 |
31 |
32 | 36 |
37 |
38 | ``` 39 | -------------------------------------------------------------------------------- /src/elements/GeoButton/GeoButton.template.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /src/elements/GeoButton/GeoDangerButton.vue: -------------------------------------------------------------------------------- 1 |