├── .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 |
2 |
3 |
4 |
5 |
6 | Elements
7 | Released in
8 | Status
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationConstants.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Name
6 | Value
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
20 |
31 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationConstantsRow.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ name }}
4 |
5 |
10 | Hide definition
11 |
12 |
17 | Show definition
18 |
19 |
20 | {{ definition }}
21 |
22 |
23 |
24 |
25 |
55 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationEvents.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Name
6 | Type
7 | Description
8 |
9 |
10 |
11 |
15 | {{ eventMetadata.name }}
16 |
17 |
21 | {{ type }}
22 |
23 |
24 | {{ eventMetadata.description }}
25 |
26 |
27 |
28 |
29 |
30 |
41 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationExamplesCollection.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 | Examples
12 |
13 |
14 |
20 |
21 |
22 |
23 |
34 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationProperties.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Prop name
6 | Type
7 | Default value
8 | Description
9 |
10 |
11 |
12 |
23 |
24 |
25 |
26 |
44 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationSingleExample.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
14 | {{ title }}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
43 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationSlots.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Name
6 | Description
7 |
8 |
9 |
10 |
16 |
17 |
18 |
19 |
20 |
31 |
--------------------------------------------------------------------------------
/.vuepress/components/ComponentDocumentationSlotsRow.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ name }}
4 |
5 |
9 |
10 |
11 |
12 |
13 |
47 |
--------------------------------------------------------------------------------
/.vuepress/components/DesignTokensListAllTokens.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Token Name
7 | Value
8 | Category
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/.vuepress/components/DesignTokensListColorToken.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
13 |
14 |
15 |
{{ colorName }}
16 |
RGB: {{ rgbColor }}
17 |
SCSS: ${{ scssVariable }}
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/.vuepress/components/DesignTokensListColors.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
27 |
--------------------------------------------------------------------------------
/.vuepress/components/DesignTokensListSpacing.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
25 |
--------------------------------------------------------------------------------
/.vuepress/components/DesignTokensListSpacingToken.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
13 | {{ spacingName }}
14 | ({{ spacingValue }})
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/.vuepress/components/ElementDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
27 |
--------------------------------------------------------------------------------
/.vuepress/components/ElementDemoActions.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.vuepress/components/ElementDemoBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.vuepress/components/ElementDemoHorizontalLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/.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 |
5 |
6 |
7 |
8 |
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 |
8 |
9 |
10 | <<%= dashedName %>><%= dashedName %>>
11 |
12 |
13 |
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 |
6 |
10 |
15 |
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 |
2 |
12 |
13 |
14 |
15 |
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 |
2 |
12 |
13 |
14 |
15 |
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 |
2 |
12 |
13 |
14 |
15 |
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 |
2 |
12 |
13 |
14 |
15 |
16 |
17 |
39 |
--------------------------------------------------------------------------------
/src/elements/GeoBorderedBox/GeoBorderedBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
20 |
--------------------------------------------------------------------------------
/src/elements/GeoBorderedBox/GeoBorderedBoxColumn.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
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 |
2 |
6 |
7 |
8 |
20 |
--------------------------------------------------------------------------------
/src/elements/GeoBorderedToken/GeoBorderedToken.examples.md:
--------------------------------------------------------------------------------
1 | ### Simple
2 |
3 | ```jsx live
4 |
11 | ```
12 |
13 |
14 | ### With icon
15 |
16 | ```jsx live
17 |
25 | ```
26 |
27 | ### Disabled
28 |
29 | ```jsx live
30 |
38 | ```
39 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoButton.template.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
11 |
12 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoDangerButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoDangerLinkButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoLinkButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
28 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoPrimaryButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
26 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoSecondaryButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoTertiaryButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
--------------------------------------------------------------------------------
/src/elements/GeoButton/GeoTooltipButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarDateIndicators.mixin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @mixin
3 | */
4 | export default {
5 | props: {
6 | /**
7 | * Number of the month within a year that is currently being displayed in the grid (ie: `0 -> january`, `11 -> december`)
8 | */
9 | currentMonth: {
10 | type: Number,
11 | required: true,
12 | validator (value) {
13 | return value >= 0 && value <= 11
14 | }
15 | },
16 |
17 | /**
18 | * Year that is currently being displayed in the grid
19 | */
20 | currentYear: {
21 | type: Number,
22 | required: true
23 | },
24 |
25 | /**
26 | * Earliest date that can be selected
27 | */
28 | earliestDate: {
29 | type: Date,
30 | required: false
31 | },
32 |
33 | /**
34 | * Latest date that can be selected
35 | */
36 | latestDate: {
37 | type: Date,
38 | required: false
39 | },
40 |
41 | /**
42 | * Object provided by date-fns specifying the locale being used.
43 | * To import a locale just require it from date-fns in the following form:
44 | * require('date-fns/locale')[ISO_CODE_ALPHA_2]
45 | * See available locales here https://date-fns.org/v1.30.1/docs/I18n#supported-languages
46 | */
47 | locale: {
48 | type: Object,
49 | required: false
50 | }
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarGrid/GeoCalendarGrid.mixin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @mixin
3 | */
4 | export default {
5 | props: {
6 | /**
7 | * Selected initial date
8 | */
9 | selectedFromDay: {
10 | type: Date,
11 | required: false
12 | },
13 |
14 | /**
15 | * Selected end date
16 | */
17 | selectedToDay: {
18 | type: Date,
19 | required: false
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerDateUnit.mixin.js:
--------------------------------------------------------------------------------
1 | import { PICKER_DATE_UNITS } from './GeoCalendar.utils'
2 | import { enumPropertyFactory } from '../../utils/enumPropertyFactory'
3 |
4 | /**
5 | * @mixin
6 | */
7 | export default {
8 | props: {
9 | /**
10 | * Type of grid being displayed.
11 | *
12 | * Supported values are:
13 | *
14 | * - `day` - The minimal date unit available. The grid will consist of each
15 | * one of the days pertaining to the current month in the current selected
16 | * year, with the days pertaining to the previous and next month greyed out.
17 | *
18 | * - `month` - The grid will consist of the 12 months of the year
19 | * distributed in quarters. This grid is visually constant, no matter which
20 | * year is selected.
21 | *
22 | * - `year` - The maximum date unit available. The grid will consist of 16
23 | * year ranges.
24 | *
25 | * Values are also available in `PICKER_DATE_UNITS` named export:
26 | *
27 | * - `PICKER_DATE_UNITS.day`
28 | * - `PICKER_DATE_UNITS.month`
29 | * - `PICKER_DATE_UNITS.year`
30 | */
31 | pickerDateUnit: enumPropertyFactory({
32 | componentName: 'GeoCalendar',
33 | propertyName: 'pickerDateUnit',
34 | enumDictionary: PICKER_DATE_UNITS,
35 | required: true
36 | })
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerGranularity/GeoCalendarPickerGranularity.mixin.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | /**
4 | * Is current granularity selector active
5 | */
6 | isActive: {
7 | type: Boolean,
8 | required: true
9 | },
10 |
11 | /**
12 | * Font Awesome 5 icon to be displayed next to each granularity selector
13 | *
14 | * See [vue-fontawesome](https://www.npmjs.com/package/@fortawesome/vue-fontawesome#explicit-prefix-note-the-vue-bind-shorthand-because-this-uses-an-array)
15 | * for more info about this.
16 | */
17 | pickerGranularityIcon: {
18 | type: Array,
19 | required: false,
20 | default: function () {
21 | return ['fal', 'arrow-right']
22 | }
23 | }
24 | },
25 | methods: {
26 | handleClick ($event) {
27 | /**
28 | * User picks a granularity
29 | *
30 | * @event click
31 | * @type {MouseEvent}
32 | */
33 | this.$emit('click', {
34 | event: $event,
35 | pickerDateUnit: this.pickerDateUnit,
36 | granularityId: this.granularityId
37 | })
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerGranularity/GeoCalendarPickerGranularityBase.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
14 |
15 |
16 |
17 |
50 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerGranularity/GeoCalendarPickerGranularityDay.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
33 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerGranularity/GeoCalendarPickerGranularityMonth.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
33 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerGranularity/GeoCalendarPickerGranularityQuarter.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
33 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerGranularity/GeoCalendarPickerGranularityWeek.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
33 |
--------------------------------------------------------------------------------
/src/elements/GeoCalendar/GeoCalendarPickerGranularity/GeoCalendarPickerGranularityYear.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
33 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChart.d.ts:
--------------------------------------------------------------------------------
1 | import 'd3'
2 | import 'd3-tip'
3 |
4 | import './GeoChartAnchoredShapes/GeoChartAnchoredShapes'
5 | import './GeoChartAxis/GeoChartAxis'
6 | import './GeoChartAxisGuidelines/GeoChartAxisGuidelines'
7 | import './GeoChartBars/GeoChartBars'
8 | import './GeoChartColorBar/GeoChartColorBar'
9 | import './GeoChartLabels/GeoChartLabels'
10 | import './GeoChartLine/GeoChartLine'
11 | import './GeoChartLineSegments/GeoChartLineSegments'
12 | import './GeoChartPie/GeoChartPie'
13 | import './GeoChartStackedBars/GeoChartStackedBars'
14 | import './GeoChartScatterPlot/GeoChartScatterPlot'
15 | import './GeoChartQuadrant/GeoChartQuadrant'
16 | import './GeoChartScale/GeoChartScale'
17 | import './GeoChartUtils/GeoChartTextDescription'
18 | import './GeoChartDimensions'
19 | import './GeoChartGlobalOptions'
20 | import './GeoChartSizing'
21 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartAnchoredShapes/GeoChartAnchoredShapes.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | enum AnchorPosition {
3 | leading = 'leading',
4 | trailing = 'trailing'
5 | }
6 |
7 | interface SingleAnchoredShapesGroupConfig extends BidimensionalGroupConfig {
8 | offset?: number
9 | normalOffset?: number
10 | naturalNormalOffset?: number
11 | normalValue: number
12 | getShapeSize: (item: object, index: number) => { width: number, height: number }
13 | getShapePath: (item: object, index: number, size: object) => string
14 | getAnchorPosition: (item: object, index: number) => AnchorPosition
15 | text: {
16 | content: (item: object, index: number) => string[]
17 | }
18 | trackByKey?: () => string
19 | }
20 | }
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartAxisGuidelines/GeoChartAxisGuidelines.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleAxisGuidelinesGroupConfig {
3 | id: string
4 | axisConfig: GeoChart.AxisConfig
5 | cssClasses?: (defaultClasses: string[], item: object, index: number) => string[]
6 | guidelines: {
7 | count?: number
8 | outerLines?: boolean
9 | cssClasses?: (originalClasses: string[], item: object, index: number) => string[]
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartBars/GeoChartBars.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleBarGroupConfig extends BidimensionalGroupConfig {
3 | normalOffset?: number
4 | naturalNormalOffset?: number
5 | width?: number
6 | naturalWidth?: number
7 | tooltip?: {
8 | getContent: (item: object, index: number) => string | null | undefined
9 | getOffset?: (event: MouseEvent) => { x: number, y: number } | null | undefined
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartColorBar/GeoChartColorBar.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleColorBarGroupConfig extends BidimensionalGroupConfig {
3 | normalOffset?: number
4 | naturalNormalOffset?: number
5 | width?: number
6 | naturalWidth?: number
7 | highlightedWidth?: number
8 | naturalHighlightedWidth?: number
9 | normalValue: number
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartConfigs/GeoChartConfigAdapter.guidelines.mixin.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 |
3 | import { parseAxisConfig } from './GeoChartConfigAdapterUtils'
4 | import * as ChartSizing from '../GeoChartUtils/GeoChartSizing'
5 | import * as ChartAxisGuidelines from '../GeoChartAxisGuidelines/GeoChartAxisGuidelines'
6 |
7 | export default {
8 | methods: {
9 | redrawGuidelines () {
10 | if (!this.config.guidelinesGroups) return
11 |
12 | const chartSize = this.svgSize
13 | const chartMargin = _.get(this.config.chart, 'margin', ChartSizing.EMPTY_MARGIN)
14 | const globalGuidelinesConfig = {
15 | chart: {
16 | animationsDurationInMilliseconds: this.animationsDurationInMilliseconds,
17 | size: chartSize,
18 | margin: chartMargin
19 | }
20 | }
21 |
22 | const guidelinesConfig = _.map(this.config.guidelinesGroups, (groupConfig, index) => {
23 | const axisConfig = this.axesConfigById[groupConfig.idAxis] || parseAxisConfig(this, groupConfig.axisConfig)
24 |
25 | return {
26 | id: axisConfig.id,
27 | axisConfig: axisConfig,
28 | guidelines: groupConfig.guidelines,
29 | cssClasses: groupConfig.cssClasses
30 | }
31 | })
32 |
33 | ChartAxisGuidelines.render(this.d3Instance, guidelinesConfig, globalGuidelinesConfig)
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartDimensions.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | declare namespace DIMENSIONS {
3 | type DIMENSIONS_2D = 'horizontal' | 'vertical'
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartGlobalOptions.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface GlobalOptions {
3 | chart: {
4 | animationsDurationInMilliseconds: number
5 | size: GeoChart.Size
6 | margin: GeoChart.Margin
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartLabels/GeoChartLabels.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleLabelConfig {
3 | text: string
4 | padding?: {
5 | top: number
6 | right: number
7 | bottom: number
8 | left: number
9 | }
10 | margin?: {
11 | top: number
12 | right: number
13 | bottom: number
14 | left: number
15 | }
16 | cornerRadius?: number
17 | cssClasses?: (defaultClasses: string[], item: object, index: number) => string[]
18 | customClass?: string
19 | }
20 |
21 | interface SingleLabelLineConfig {
22 | labels: SingleLabelConfig[]
23 | }
24 |
25 | interface LabelGroupConfig {
26 | id: string
27 | axis: {
28 | horizontal: GeoChart.AxisConfig
29 | vertical: GeoChart.AxisConfig
30 | }
31 | data: SingleLabelLineConfig[]
32 | mainDimension: string
33 | }
34 | }
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartLine/GeoChartLine.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleLineGroupConfig extends BidimensionalGroupConfig {
3 | data: [number, number][]
4 | lineWidth?: number
5 | hoverCircleRadius?: number
6 | interpolationFn?: () => d3.CurveGenerator
7 | tooltip?: {
8 | getContent?: (item: object, index: number) => string | null | undefined
9 | getOffset?: (event: MouseEvent) => { x: number, y: number } | null | undefined
10 | }
11 | cssClasses?: (defaultClasses: string[], item: object, index: number) => string[]
12 | groupKey?: string,
13 | isInteractive?: boolean
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartLineSegments/GeoChartLineSegments.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleLineSegmentsGroupConfig extends BidimensionalGroupConfig {
3 | lineWidth?: number,
4 | lineNaturalWidth?: number,
5 | circleRadius?: number,
6 | circleNaturalRadius?: number,
7 | circleMargin?: number,
8 | circleNaturalMargin?: number,
9 | normalValue: number,
10 | trackByKey?: () => string
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartPie/GeoChartPie.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface PieGlobalConfig {
3 | chart: {
4 | animationsDurationInMilliseconds: number
5 | size: GeoChart.Size
6 | margin: GeoChart.Margin
7 | chartHeight: GeoChart.Size.height
8 | chartWidth: GeoChart.Size.width
9 | }
10 | }
11 |
12 | interface PieConfig {
13 | data: { valueOf (): number }[]
14 | innerRadius: number
15 | outerRadius: number
16 | keyForValues: string
17 | tooltip?: {
18 | getContent: (item: object, index: number) => string | null | undefined
19 | getOffset?: (event: MouseEvent) => { x: number, y: number } | null | undefined
20 | }
21 | text: {
22 | margin?: number
23 | content: (item: object, index: number) => GeoChart.TextDescriptionOptions[]
24 | cssClassesGroups?: (defaultClasses: string[], item: object, index: number) => string[]
25 | cssClassesTexts?: (defaultClasses: string[], item: object, index: number) => string[]
26 | }
27 | cssClasses?: (defaultClasses: string[], item: object, index: number) => string[]
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartQuadrant/GeoChartQuadrant.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleQuadrantGroupConfig {
3 | horizontalAxisConfig: GeoChart.AxisConfig
4 | verticalAxisConfig: GeoChart.AxisConfig
5 | horizontalThreshold?: number | string | Date
6 | verticalThreshold?: number | string | Date
7 | quadrantTopLeftName?: string
8 | quadrantTopRightName?: string
9 | quadrantBottomLeftName?: string
10 | quadrantBottomRightName?: number
11 | fontSize?: number
12 | tooltip?: {
13 | getContent?: (item: object, index: number) => string | null | undefined
14 | getOffset?: (event: MouseEvent) => { x: number, y: number } | null | undefined
15 | }
16 | cssClasses?: (defaultClasses: string[], item: object, index: number) => string[]
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartScale/GeoChartScale.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | enum ScaleType {
3 | linear = 'linear',
4 | logarithmic = 'logarithmic',
5 | categorical = 'categorical',
6 | time = 'time'
7 | }
8 |
9 | enum NiceType {
10 | timeDay = 'timeDay',
11 | timeWeek = 'timeWeek',
12 | timeMonth = 'timeMonth',
13 | timeYear = 'timeYear'
14 | }
15 |
16 | interface ScaleNumericalRangeDomain {
17 | start: number
18 | end: number
19 | }
20 |
21 | interface BandScalePadding {
22 | outer?: number
23 | innert?: number
24 | }
25 |
26 | interface BaseScaleConfig {
27 | type: ScaleType
28 | valueForOrigin: Domain
29 | }
30 |
31 | interface NumericalScaleConfig extends BaseScaleConfig {
32 | domain: ScaleNumericalRangeDomain | number[]
33 | }
34 |
35 | interface BandScaleConfig extends BaseScaleConfig {
36 | domain: string[]
37 | padding?: BandScalePadding
38 | }
39 |
40 | type ScaleConfig = NumericalScaleConfig | BandScaleConfig
41 |
42 | type AxisScale = d3.ScaleLinear | d3.ScaleLogarithmic | d3.ScaleBand | d3.ScaleTime
43 | }
44 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartScatterPlot/GeoChartScatterPlot.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface ScatterPlotGroupConfig extends BidimensionalGroupConfig {
3 | data: [number, number][]
4 | blockMouseEvents?: boolean
5 | animationsDuration?: number
6 | getRadius?: (item: object, index: number) => string | number | null | undefined
7 | getFillColor?: (item: object, index: number) => string | null | undefined
8 | getOpacity?: (item: object, index: number) => string | number | null | undefined
9 | onDotClick?: (item: object, index: number) => string | null | undefined
10 | tooltip?: {
11 | getContent?: (item: object, index: number) => string | null | undefined
12 | getOffset?: (event: MouseEvent) => { x: number, y: number } | null | undefined
13 | }
14 | cssClasses?: (defaultClasses: string[], item: object, index: number) => string[]
15 | groupKey?: string
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartSizing.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface Size {
3 | height: number
4 | width: number
5 | }
6 |
7 | interface Margin {
8 | top: number
9 | right: number
10 | bottom: number
11 | left: number
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartStackedBars/GeoChartStackedBars.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface SingleStackedBarGroupConfig extends BidimensionalGroupConfig {
3 | width?: number,
4 | naturalWidth?: number,
5 | tooltip?: {
6 | getContent: (item: object, index: number) => string | null | undefined
7 | getOffset?: (event: MouseEvent) => { x: number, y: number } | null | undefined
8 | }
9 | }
10 | }
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartUtils/GeoChartSizing.js:
--------------------------------------------------------------------------------
1 | /** @type {GeoChart.Margin} */
2 | export const EMPTY_MARGIN = {
3 | top: 0,
4 | right: 0,
5 | bottom: 0,
6 | left: 0
7 | }
8 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartUtils/GeoChartTextDescription.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace GeoChart {
2 | interface TextDescriptionOptions {
3 | margin?: number
4 | content: (item: Datum, index: number) => {
5 | text: string
6 | cssClass: string
7 | newLine: boolean
8 | }[]
9 | cssClassesGroups?: (defaultClasses: string[], item: Datum, index: number) => string[]
10 | cssClassesTexts?: (defaultClasses: string[], item: Datum, index: number) => string[]
11 | }
12 |
13 | interface TextDescriptionSettingsData {
14 | data: Datum[]
15 | keyForId: string
16 | textOptions: GeoChart.TextDescriptionOptions
17 | // y coordinate to position the text
18 | getTextPositionMainDirection: (item: Datum, index: number) => number
19 | // [x, y] coordinates where the main group will be translated
20 | textOrigin: number[]
21 | textAnchor: string
22 | minY: number
23 | maxY: number
24 | algorithm: GeoChart.TextDescriptionUtilsAlgorithms
25 | }
26 | }
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartUtils/dimensionUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @enum {string}
3 | * @readonly
4 | */
5 | export const DIMENSIONS_2D = {
6 | horizontal: 'horizontal',
7 | vertical: 'vertical'
8 | }
9 |
10 | /**
11 | * @enum {string}
12 | */
13 | export const ANCHOR_POSITIONS_1D = {
14 | leading: 'leading',
15 | trailing: 'trailing'
16 | }
17 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartUtils/numericUtils.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 |
3 | /**
4 | * @param {any} [options]
5 | * @param {string} [key]
6 | * @return {boolean}
7 | */
8 | export function isNumberForced (options, key) {
9 | return _.isFinite(_.get(options, key))
10 | }
11 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartUtils/scaleUtils.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 |
3 | /**
4 | * @enum {GeoChart.ScaleType}
5 | */
6 | export const SCALE_TYPES = {
7 | linear: 'linear',
8 | logarithmic: 'logarithmic',
9 | categorical: 'categorical',
10 | time: 'time'
11 | }
12 |
13 | /**
14 | * @enum {GeoChart.NiceType}
15 | */
16 | export const NICE_TYPES = {
17 | timeDay: 'timeDay',
18 | timeWeek: 'timeWeek',
19 | timeMonth: 'timeMonth',
20 | timeYear: 'timeYear'
21 | }
22 |
23 | /**
24 | * @param {GeoChart.AxisScale} axisScale
25 | * @returns {boolean}
26 | * @see https://github.com/d3/d3-scale#scaleBand
27 | */
28 | export function isScaleBand (axisScale) {
29 | return !!_.get(axisScale, 'bandwidth')
30 | }
31 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/GeoChartUtils/textUtils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @template GElement
3 | * @template Datum
4 | * @template PElement
5 | * @template PDatum
6 | * @typedef {import('d3').Selection} d3.Selection
7 | */
8 |
9 | /**
10 | * @callback GetTextContent
11 | * @param {Object} item
12 | * @param {number} index
13 | * @returns string[]
14 | */
15 |
16 | /**
17 | * @typedef {Object} TextOptions
18 | * @property {GetTextContent} content
19 | */
20 |
21 | /**
22 | * @template GElement
23 | * @template Datum
24 | * @template PElement
25 | * @template PDatum
26 | * @param {d3.Selection} textElems
27 | * @param {TextOptions} textOptions
28 | * @param {GeoChart.GlobalOptions} globalOptions
29 | */
30 | export function setTextContent (textElems, textOptions, globalOptions) {
31 | const tspans = textElems
32 | .selectAll('tspan')
33 | .data((d, i) => textOptions.content(d, i))
34 |
35 | const newtspans = tspans
36 | .enter()
37 | .append('tspan')
38 | .attr('class', (d) => d.cssClass)
39 |
40 | const updatedtspans = tspans
41 | const alltspans = newtspans.merge(updatedtspans)
42 |
43 | alltspans
44 | .attr('class', (d) => d.cssClass)
45 | .text((d) => d.text)
46 |
47 | tspans
48 | .exit()
49 | .transition()
50 | .duration(globalOptions.chart.animationsDurationInMilliseconds)
51 | .style('opacity', 0)
52 | .remove()
53 | }
54 |
--------------------------------------------------------------------------------
/src/elements/GeoChart/constants.js:
--------------------------------------------------------------------------------
1 | import * as axisUtils from './GeoChartUtils/axisUtils'
2 | import * as barsUtils from './GeoChartUtils/barsUtils'
3 | import * as dimensionUtils from './GeoChartUtils/dimensionUtils'
4 | import * as scaleUtils from './GeoChartUtils/scaleUtils'
5 |
6 | export const AXIS = {
7 | POSITIONS: axisUtils.POSITIONS,
8 | SIMPLE_POSITIONS: axisUtils.SIMPLE_POSITIONS
9 | }
10 |
11 | export const BARS = {
12 | DEFAULT_WIDTH: barsUtils.DEFAULT_WIDTH
13 | }
14 |
15 | export const DIMENSIONS = {
16 | DIMENSIONS_2D: dimensionUtils.DIMENSIONS_2D,
17 | ANCHOR_POSITIONS_1D: dimensionUtils.ANCHOR_POSITIONS_1D
18 | }
19 |
20 | export const SCALES = {
21 | SCALE_TYPES: scaleUtils.SCALE_TYPES
22 | }
23 |
24 | export const NICES = {
25 | NICE_TYPES: scaleUtils.NICE_TYPES
26 | }
27 |
28 | export const FOCUS_ON_DOT = 'focus'
29 |
30 | export const QUADRANT_LABEL = {
31 | topLeft: 'topLeft',
32 | topRight: 'topRight',
33 | bottomLeft: 'bottomLeft',
34 | bottomRight: 'bottomRight'
35 | }
36 |
--------------------------------------------------------------------------------
/src/elements/GeoCircle/GeoCircle.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | ```
14 |
--------------------------------------------------------------------------------
/src/elements/GeoCompactButton/GeoCompactButton.template.html:
--------------------------------------------------------------------------------
1 |
7 |
11 |
--------------------------------------------------------------------------------
/src/elements/GeoCompactButton/GeoDangerCompactButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
33 |
--------------------------------------------------------------------------------
/src/elements/GeoCompactButton/GeoInputAccessoryCompactButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
34 |
--------------------------------------------------------------------------------
/src/elements/GeoCompactButton/GeoPrimaryCompactButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
34 |
--------------------------------------------------------------------------------
/src/elements/GeoCompactButton/GeoSecondaryCompactButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
34 |
--------------------------------------------------------------------------------
/src/elements/GeoDropdown/GeoDropdown.constants.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 |
3 | export const X_AXIS_POSITION = {
4 | right: 'right',
5 | left: 'left'
6 | }
7 |
8 | export const Y_AXIS_POSITION = {
9 | top: 'top',
10 | bottom: 'bottom'
11 | }
12 |
13 | export function geoDropdownMixinFactory (idDropdown) {
14 | const camelCaseIdDropdown = _.camelCase(idDropdown)
15 | const pascalCasedIdDropdown = `${camelCaseIdDropdown[0].toUpperCase()}${camelCaseIdDropdown.slice(1)}`
16 | const isDropdownOpenedKeyPath = `is${pascalCasedIdDropdown}DropdownOpened`
17 |
18 | return {
19 | data () {
20 | return {
21 | [isDropdownOpenedKeyPath]: false
22 | }
23 | },
24 | methods: {
25 | [`dismiss${pascalCasedIdDropdown}Dropdown`] () {
26 | (/** @type {any} */ (this))[isDropdownOpenedKeyPath] = false
27 | },
28 |
29 | [`toggle${pascalCasedIdDropdown}Dropdown`] () {
30 | (/** @type {any} */ (this))[isDropdownOpenedKeyPath] = !this[isDropdownOpenedKeyPath]
31 | }
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/elements/GeoDropdown/GeoDropdownCompactButton.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
8 | ```
9 |
--------------------------------------------------------------------------------
/src/elements/GeoEditableInput/GeoEditableInput.constants.js:
--------------------------------------------------------------------------------
1 | export const VARIANTS = {
2 | table: 'table',
3 | normal: 'normal'
4 | }
5 |
6 | export const TYPES = {
7 | text: 'text',
8 | number: 'number'
9 | }
10 |
--------------------------------------------------------------------------------
/src/elements/GeoFeedbackBox/GeoErrorFeedbackBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
--------------------------------------------------------------------------------
/src/elements/GeoFeedbackBox/GeoFeedbackBox.mixin.js:
--------------------------------------------------------------------------------
1 | const VARIANTS = {
2 | success: 'success',
3 | info: 'info',
4 | warning: 'warning',
5 | error: 'error',
6 | progress: 'progress'
7 | }
8 |
9 | export { VARIANTS }
10 |
11 | /**
12 | * @mixin
13 | */
14 | export default {
15 | props: {
16 | /**
17 | * Whether this alert is floating or not. Floating alerts get special CSS
18 | * classes with default floating behaviour to reduce boilerplate.
19 | */
20 | floating: {
21 | type: Boolean,
22 | default: false
23 | },
24 |
25 | /**
26 | * Icon used for alert dismissal button.
27 | */
28 | closeIcon: {
29 | type: Array,
30 | default: function () {
31 | return ['fal', 'times']
32 | }
33 | }
34 | },
35 | computed: {
36 | hasLeadingAccessoryItem () {
37 | return !!(this.$slots.leadingAccessoryItem || []).length
38 | },
39 |
40 | hasActions () {
41 | return !!(this.$slots.actions || []).length
42 | },
43 |
44 | shouldShowCloseButton () {
45 | return !!this.$listeners.close
46 | }
47 | },
48 | methods: {
49 | close (event) {
50 | /**
51 | * User clicked on the *Close* button.
52 | *
53 | * @event close
54 | * @type {MouseEvent}
55 | */
56 | this.$emit('close', event)
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/elements/GeoFeedbackBox/GeoFeedbackBox.template.html:
--------------------------------------------------------------------------------
1 |
6 |
12 |
13 |
17 |
18 |
22 |
--------------------------------------------------------------------------------
/src/elements/GeoFeedbackBox/GeoInfoFeedbackBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
--------------------------------------------------------------------------------
/src/elements/GeoFeedbackBox/GeoSuccessFeedbackBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
--------------------------------------------------------------------------------
/src/elements/GeoFeedbackBox/GeoWarningFeedbackBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
42 |
--------------------------------------------------------------------------------
/src/elements/GeoFileUpload/GeoFileUpload.mixin.js:
--------------------------------------------------------------------------------
1 | const STATUS = {
2 | initial: 'initial',
3 | success: 'success',
4 | warning: 'warning',
5 | error: 'error',
6 | loading: 'loading'
7 | }
8 |
9 | export { STATUS }
10 |
11 | /**
12 | * @mixin
13 | */
14 | export default {
15 | props: {
16 | /**
17 | * Whether this input is in loading state (`true`) or not.
18 | */
19 | loading: {
20 | type: Boolean,
21 | default: false
22 | }
23 | },
24 | data () {
25 | return {
26 | hasErrors: false,
27 | hasWarnings: false,
28 | fileName: ''
29 | }
30 | },
31 | computed: {
32 | $_GeoFileUpload_currentStatus () {
33 | if (this.loading) return STATUS.loading
34 | if (this.hasErrors) return STATUS.error
35 | if (this.hasWarnings) return STATUS.warning
36 | if (this.fileName) return STATUS.success
37 | return STATUS.initial
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/elements/GeoHighlightedString/GeoHighlightedString.examples.md:
--------------------------------------------------------------------------------
1 | ### Short string
2 |
3 | ```jsx live
4 |
12 | ```
13 |
14 | ### Long string
15 |
16 | ```jsx live
17 |
25 | ```
26 |
--------------------------------------------------------------------------------
/src/elements/GeoHorizontalLayout/GeoHorizontalLayout.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
3 |
4 |
5 |
6 | Element 1
7 | Element 2
8 | Element 3
9 |
10 |
11 |
12 |
13 | ```
14 |
--------------------------------------------------------------------------------
/src/elements/GeoHorizontalLayout/GeoHorizontalLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputLabel.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
3 |
4 |
5 | Label
6 |
7 |
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputLabel.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
14 |
15 |
16 |
26 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputMessage.constants.js:
--------------------------------------------------------------------------------
1 | const VARIANTS = {
2 | success: 'success',
3 | error: 'error'
4 | }
5 |
6 | export { VARIANTS }
7 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputMessage.examples.md:
--------------------------------------------------------------------------------
1 | ### Default message
2 |
3 | ```jsx live
4 |
5 |
6 |
7 | This is the default message
8 |
9 |
10 |
11 | ```
12 |
13 | ### Success message
14 |
15 | ```jsx live
16 |
17 |
18 |
19 | This is a success message
20 |
21 |
22 |
23 | ```
24 |
25 | ### Error message
26 |
27 | ```jsx live
28 |
29 |
30 |
31 | This is an error message
32 |
33 |
34 |
35 | ```
36 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputPrefix.examples.md:
--------------------------------------------------------------------------------
1 | ### Prefix with text
2 |
3 | ```jsx live
4 |
5 |
9 |
10 | meters
11 |
12 |
13 |
14 | ```
15 |
16 | ### Prefix with icon
17 |
18 | ```jsx live
19 |
20 |
24 |
25 |
29 |
30 |
31 |
32 | ```
33 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputPrefix.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputSuffix.examples.md:
--------------------------------------------------------------------------------
1 | ### Suffix with text
2 |
3 | ```jsx live
4 |
5 |
9 |
10 | meters
11 |
12 |
13 |
14 | ```
15 |
16 | ### Suffix with icon
17 |
18 | ```jsx live
19 |
20 |
24 |
25 |
29 |
30 |
31 |
32 | ```
33 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputSuffix.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/src/elements/GeoList/GeoListClearItem.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
3 |
4 |
5 | No results found
6 |
7 |
8 |
9 | Nothing more here
10 |
11 |
12 |
13 | First item
14 | Second item
15 | Third item
16 | Nothing more here
17 |
18 |
19 |
20 | ```
21 |
--------------------------------------------------------------------------------
/src/elements/GeoList/GeoListClearItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
22 |
--------------------------------------------------------------------------------
/src/elements/GeoList/GeoListFooterButton.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
3 |
7 | Load more results
8 |
9 |
10 | First item
11 | Second item
12 | Third item
13 | Load more results
14 |
15 |
16 |
17 | ```
18 |
--------------------------------------------------------------------------------
/src/elements/GeoList/GeoListFooterButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
35 |
--------------------------------------------------------------------------------
/src/elements/GeoMarquee/GeoMarquee.examples.md:
--------------------------------------------------------------------------------
1 | ### Long content
2 |
3 | ```jsx live
4 |
5 |
6 |
7 | Some text for the marquee
8 |
9 |
10 |
11 | ```
12 |
13 | ### Long content and slow animation
14 |
15 | ```jsx live
16 |
17 |
18 |
19 | Some text for the marquee
20 |
21 |
22 |
23 | ```
24 |
25 | ### Long content and fast animation
26 |
27 | ```jsx live
28 |
29 |
30 |
31 | Some text for the marquee
32 |
33 |
34 |
35 | ```
36 |
37 | ### Short content
38 |
39 | ```jsx live
40 |
41 |
42 |
43 | Some text
44 |
45 |
46 |
47 | ```
48 |
--------------------------------------------------------------------------------
/src/elements/GeoNotificationBar/GeoNotificationBar.examples.md:
--------------------------------------------------------------------------------
1 | ### Simple
2 |
3 | ```jsx live
4 |
5 |
6 |
7 |
12 | Notification message about something important.
13 |
14 |
15 |
16 |
17 | ```
18 |
19 | ### With action
20 |
21 | ```jsx live
22 |
23 |
24 |
25 |
30 | Notification message about something important.
31 | Button
32 |
33 |
34 |
35 |
36 | ```
37 |
--------------------------------------------------------------------------------
/src/elements/GeoPill/GeoPill.examples.md:
--------------------------------------------------------------------------------
1 | ### Default
2 |
3 | ```jsx live
4 |
5 |
6 | Pill's content
7 |
8 |
9 | ```
10 |
11 | ### Light variant
12 |
13 | ```jsx live
14 |
15 |
16 | Pill's content
17 |
18 |
19 | ```
20 |
21 | ### Dark variant
22 |
23 | ```jsx live
24 |
25 |
26 | Pill's content
27 |
28 |
29 | ```
30 |
31 | ### Opaque variant
32 |
33 | ```jsx live
34 |
35 |
36 | Pill's content
37 |
38 |
39 | ```
40 |
41 | ### Outline variant
42 |
43 | ```jsx live
44 |
45 |
46 | Pill's content
47 |
48 |
49 | ```
50 |
--------------------------------------------------------------------------------
/src/elements/GeoPill/GeoPill.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
53 |
--------------------------------------------------------------------------------
/src/elements/GeoScrollableContainer/GeoScrollableContainer.examples.md:
--------------------------------------------------------------------------------
1 | ```vue live
2 |
3 |
4 |
5 |
9 | {{ item.label }}
10 | Load more results
11 |
12 |
13 |
14 |
15 |
16 |
44 | ```
45 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoDangerSegmentedControlItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
18 |
19 |
20 |
39 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoInfoSegmentedControlItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
18 |
19 |
20 |
37 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoSegmentedControl.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
40 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoSegmentedControlItem.constants.js:
--------------------------------------------------------------------------------
1 | const VARIANTS = {
2 | success: 'success',
3 | info: 'info',
4 | warning: 'warning',
5 | danger: 'danger'
6 | }
7 |
8 | export { VARIANTS }
9 |
10 | /**
11 | * @mixin
12 | */
13 | export default {
14 | props: {
15 | /**
16 | * Whether this item should be styled as active (`true`) or not (default).
17 | */
18 | active: {
19 | type: Boolean,
20 | default: false
21 | },
22 |
23 | /**
24 | * Whether this item should be displayed using outline style (`true`) or not.
25 | *
26 | * Outline style takes more vertical space while default style is more
27 | * compact.
28 | */
29 | outline: {
30 | type: Boolean,
31 | default: false
32 | },
33 |
34 | /**
35 | * Whether this item is disabled (`true`) or not be (default).
36 | *
37 | * Disabled items won't emit click events.
38 | */
39 | disabled: {
40 | type: Boolean,
41 | default: false
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoSuccessSegmentedControlItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
18 |
19 |
20 |
37 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoWarningSegmentedControlItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
18 |
19 |
20 |
39 |
--------------------------------------------------------------------------------
/src/elements/GeoSidebarLayout/GeoSidebarLayout.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
3 |
4 |
5 |
6 | Sidebar header
7 | Sidebar header button
8 |
9 |
10 | Sidebar step 1
11 | Sidebar step 2
12 | Sidebar step 3
13 | SIdebar step 4
14 |
15 |
16 | Sidebar's footer
17 |
18 |
19 |
20 |
21 | ```
22 |
--------------------------------------------------------------------------------
/src/elements/GeoSidebarLayout/GeoSidebarLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
18 |
19 |
20 |
31 |
--------------------------------------------------------------------------------
/src/elements/GeoSwitch/GeoSwitch.examples.md:
--------------------------------------------------------------------------------
1 | ### Simple switch
2 |
3 | ```vue live
4 |
5 |
10 |
11 |
12 |
21 | ```
22 |
23 | ### Switch with label
24 |
25 | ```vue live
26 |
27 |
28 |
29 | Click to toggle
30 |
31 |
32 |
33 |
34 |
43 | ```
44 |
45 | ### Disabled switch with label
46 |
47 | ```vue live
48 |
49 |
50 |
51 | This can't be toggled (active)
52 | This can be toggled (inactive)
53 |
54 |
55 |
56 |
57 |
67 | ```
68 |
--------------------------------------------------------------------------------
/src/elements/GeoTabBar/GeoTabBar.mixin.js:
--------------------------------------------------------------------------------
1 | import { enumPropertyFactory } from '../../utils/enumPropertyFactory'
2 |
3 | const VARIANTS = {
4 | default: 'default',
5 | modal: 'modal'
6 | }
7 |
8 | export { VARIANTS }
9 |
10 | /**
11 | * @mixin
12 | */
13 | export default {
14 | props: {
15 | /**
16 | * Variant of the tab bar, supporting:
17 | *
18 | * - `default`
19 | * - `modal`
20 | *
21 | * Those values are exported under `VARIANTS` name. See
22 | * [Component Constants](/docs/guides/using-constants) for more info on how to
23 | * use those constants in your code.
24 | *
25 | * Variant only affects default CSS styling and no icon nor behaviour is
26 | * affected. However, using
27 | */
28 | variant: enumPropertyFactory({
29 | componentName: 'GeoTabBar',
30 | propertyName: 'variant',
31 | enumDictionary: VARIANTS,
32 | defaultValue: VARIANTS.default
33 | })
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/elements/GeoTabBar/GeoTabBar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
26 |
--------------------------------------------------------------------------------
/src/elements/GeoTabBar/GeoTabBarItem.examples.md:
--------------------------------------------------------------------------------
1 | ### Regular variant
2 |
3 | ```jsx live
4 |
5 |
6 |
7 | A tab
8 |
9 |
10 |
11 | Active tab
12 |
13 |
14 |
15 | Hovered tab
16 |
17 |
18 |
19 | Hovered & active tab
20 |
21 |
22 |
23 | ```
24 |
25 | ### Modal variant
26 |
27 | ```jsx live
28 |
29 |
30 |
31 | A tab
32 |
33 |
34 |
35 | Active tab
36 |
37 |
38 |
39 | Hovered tab
40 |
41 |
42 |
43 | Hovered & active tab
44 |
45 |
46 |
47 | ```
48 |
--------------------------------------------------------------------------------
/src/elements/GeoTable/GeoTable.4.empty-state.examples.md:
--------------------------------------------------------------------------------
1 | ## Empty state
2 |
3 | If table has no content to be displayed, its `empty` slot will be rendered. You
4 | can use that slot to easily show an empty state for any table.
5 |
6 | ```jsv live
7 |
8 |
9 |
10 |
11 | Table is empty!
12 |
13 |
14 |
15 |
16 | ```
17 |
--------------------------------------------------------------------------------
/src/elements/GeoTable/GeoTable.constants.js:
--------------------------------------------------------------------------------
1 | const HEADER_VARIANTS = {
2 | main: 'main',
3 | aux: 'aux',
4 | single: 'single',
5 | multiLine: 'multiLine'
6 | }
7 |
8 | export { HEADER_VARIANTS }
9 |
10 | const SORTING_DIRECTIONS = {
11 | asc: 'asc',
12 | desc: 'desc'
13 | }
14 |
15 | export { SORTING_DIRECTIONS }
16 |
--------------------------------------------------------------------------------
/src/elements/GeoTable/GeoTableBodyRowCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
13 |
14 |
15 |
29 |
--------------------------------------------------------------------------------
/src/elements/GeoTable/GeoTableHeaderRowCellMixin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @mixin
3 | */
4 | export default {
5 | props: {
6 | /**
7 | * Maximum width that this cell's column might take.
8 | */
9 | columnMaxWidth: {
10 | type: Number,
11 | required: false
12 | },
13 |
14 | /**
15 | * Minimum width that this cell's column must take.
16 | */
17 | columnMinWidth: {
18 | type: Number,
19 | required: false
20 | },
21 |
22 | /**
23 | * Width that this cell's column must take. Overrides both, minimum and
24 | * maximum width.
25 | */
26 | columnWidth: {
27 | type: Number,
28 | required: false
29 | },
30 |
31 | /**
32 | * Whether this header row cell should be ignored when computing this cell's
33 | * column's required width.
34 | */
35 | ignoreContentWidth: {
36 | type: Boolean,
37 | default: false
38 | },
39 |
40 | /**
41 | * If set to `true` this column won't grow after it's content fits,
42 | * otherwise (default) remaining space will be distributed and this column
43 | * might grow.
44 | */
45 | growingDisabled: {
46 | type: Boolean,
47 | default: false
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/elements/GeoTooltip/GeoTooltip.constants.js:
--------------------------------------------------------------------------------
1 | const POSITIONS = {
2 | bottom: 'bottom',
3 | leading: 'leading',
4 | top: 'top',
5 | trailing: 'trailing'
6 | }
7 |
8 | const ALIGNMENTS = {
9 | start: 'start',
10 | end: 'end',
11 | middle: 'middle'
12 | }
13 |
14 | export {
15 | POSITIONS,
16 | ALIGNMENTS
17 | }
18 |
--------------------------------------------------------------------------------
/src/elements/GeoTree/GeoTree.constants.js:
--------------------------------------------------------------------------------
1 | const INPUT_MODES = {
2 | SINGLE: 'single',
3 | MULTIPLE: 'multiple',
4 | HIDDEN: 'hidden'
5 | }
6 |
7 | export {
8 | INPUT_MODES
9 | }
10 |
--------------------------------------------------------------------------------
/src/elements/GeoTree/GeoTreeMixin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @mixin
3 | */
4 | export default {
5 | props: {
6 | /**
7 | * Object needed in case you want to support drag elements
8 | *
9 | * You have to use the same format as group prop of [vuedraggable](https://www.npmjs.com/package/vuedraggable)
10 | * for more info about this.
11 | */
12 | draggableGroup: {
13 | type: Object,
14 | required: false
15 | }
16 | },
17 | computed: {
18 | // Vuedraggable library allows to visually pull elements even with pull disabled, we don't want that
19 | dragClassToIgnore () {
20 | if (!this.group) return ''
21 |
22 | return !this.group.pull
23 | ? 'geo-tree__drag-disabled'
24 | : ''
25 | }
26 | },
27 | methods: {
28 | startDrag ($event) {
29 | this.$emit('start-drag', $event)
30 | },
31 | endDrag ($event) {
32 | this.$emit('end-drag', $event)
33 | },
34 | emitChangeDrag ($event) {
35 | this.$emit('change-drag', $event)
36 | },
37 | changeDrag ($event, parentCategory) {
38 | this.emitChangeDrag({
39 | event: $event,
40 | parentCategory
41 | })
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/elements/GeoValue/GeoNegativeValue.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
24 |
--------------------------------------------------------------------------------
/src/elements/GeoValue/GeoNeutralValue.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
24 |
--------------------------------------------------------------------------------
/src/elements/GeoValue/GeoPositiveValue.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
24 |
--------------------------------------------------------------------------------
/src/elements/GeoValue/GeoValue.mixin.js:
--------------------------------------------------------------------------------
1 | const TYPES = {
2 | positive: 'positive',
3 | neutral: 'neutral',
4 | negative: 'negative',
5 | standard: ''
6 | }
7 |
8 | export { TYPES }
9 | /**
10 | * @mixin
11 | */
12 | export default {
13 | props: {
14 | /**
15 | * Determines if the value is primary or not
16 | */
17 | isPrimary: {
18 | type: Boolean,
19 | required: true
20 | },
21 | /**
22 | * Value
23 | */
24 | value: {
25 | type: String,
26 | required: true
27 | },
28 | /**
29 | * Unit
30 | */
31 | unit: {
32 | type: String,
33 | required: false
34 | },
35 | /**
36 | * Description
37 | */
38 | description: {
39 | type: String,
40 | required: false
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/elements/GeoValue/GeoValue.template.html:
--------------------------------------------------------------------------------
1 |
5 |
9 |
13 |
--------------------------------------------------------------------------------
/src/elements/GeoVerticalLayout/GeoVerticalLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
39 |
--------------------------------------------------------------------------------
/src/mixins/debugUpdatedHookMixin.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 |
3 | const PREVIOUS_STATE_KEY = '$_geoblinkDesignSystem_debugUpdatedHookMixin_previousState'
4 | /**
5 | * @mixin
6 | *
7 | * This mixin will log any changes that trigger `updated` lifecycle hook. Use it
8 | * to find out which property is responsible for unexpected render cycles.
9 | *
10 | * **Note:** This should not be used in production.
11 | */
12 | export default {
13 | updated () {
14 | if (!this[PREVIOUS_STATE_KEY]) {
15 | this[PREVIOUS_STATE_KEY] = this.$options.data()
16 | }
17 |
18 | const changedPropName = _.findKey(this._data, (value, key) => !_.isEqual(value, this[PREVIOUS_STATE_KEY][key]))
19 |
20 | this[PREVIOUS_STATE_KEY] = _.clone(this._data)
21 |
22 | console.warn(`GeoDebugUpdatedHookMixin [mixin] :: Updated hook called due to a change in property named «${changedPropName}»`)
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/mixins/extendedListenersMixin.js:
--------------------------------------------------------------------------------
1 | import { assign } from 'lodash'
2 |
3 | export default {
4 | computed: {
5 | computedListeners () {
6 | return assign({}, this.$listeners, { click: this.handleClick })
7 | }
8 | },
9 | methods: {
10 | handleClick (e) {
11 | if (!this.disabled) {
12 | this.$emit('click', e)
13 | }
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/patterns/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geoblink/design-system/935a43e99f814a63fa192da37bde724919187d0b/src/patterns/.gitkeep
--------------------------------------------------------------------------------
/src/styles/_spacing.scss:
--------------------------------------------------------------------------------
1 | /* VUE DESIGN SYSTEM SPACING HELPERS
2 | --------------------------------------------- */
3 |
4 | $spacing-ratio: 1.618;
5 |
6 | /*
7 | INSET-SPACE: For interface containers.
8 | INSET-SQUISH-SPACE: For buttons, form elements, cells.
9 | STACK-SPACE: For vertically stacked content.
10 | INLINE-SPACE: For things displayed inline.
11 | */
12 |
13 | // Create inset-space
14 | //
15 | // @param {Number} inset-space to set
16 | @mixin inset-space($value) {
17 | padding: $value;
18 | }
19 |
20 | // Create inset-squish-space
21 | //
22 | // @param {Number} inset-squish-space to set
23 | @mixin inset-squish-space($value) {
24 | padding: round($value / $spacing-ratio) $value;
25 | }
26 |
27 | // Create stack-space
28 | //
29 | // @param {Number} stack-space to set
30 | @mixin stack-space($value) {
31 | margin-bottom: $value;
32 | &:last-child {
33 | margin-bottom: 0;
34 | }
35 | }
36 |
37 | // Create inline-space
38 | //
39 | // @param {Number} inline-space to set
40 | @mixin inline-space($value) {
41 | margin-right: $value;
42 | &:last-child {
43 | margin-right: 0;
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoAlert/_geo-alert.scss:
--------------------------------------------------------------------------------
1 | .geo-alert {
2 | align-items: flex-start;
3 | border: 1px solid transparent;
4 | border-radius: $border-radius-default;
5 | display: flex;
6 | flex-direction: row;
7 | padding: $space-x-small $space-small;
8 | width: 100%;
9 |
10 | .geo-alert__icon {
11 | flex-grow: 0;
12 | flex-shrink: 0;
13 | font-size: $font-size-regular;
14 | margin: ($space-x-small - 2px) $space-small 0 0;
15 | }
16 |
17 | .geo-alert__content {
18 | @include font($body);
19 |
20 | flex-grow: 1;
21 | flex-shrink: 1;
22 | overflow: hidden;
23 | }
24 | }
25 |
26 | .geo-alert--info {
27 | background: $color-blue-readable-background;
28 | border-color: $color-blue-readable-border;
29 |
30 | .geo-alert__icon {
31 | color: $color-blue;
32 | }
33 | }
34 |
35 | .geo-alert--success {
36 | background: $color-green-readable-background;
37 | border-color: $color-green-readable-border;
38 |
39 | .geo-alert__icon {
40 | color: $color-green;
41 | }
42 | }
43 |
44 | .geo-alert--warning {
45 | background: $color-yellow-readable-background;
46 | border-color: $color-yellow-readable-border;
47 |
48 | .geo-alert__icon {
49 | color: $color-yellow;
50 | }
51 | }
52 |
53 | .geo-alert--error {
54 | background: $color-red-readable-background;
55 | border-color: $color-red-readable-border;
56 |
57 | .geo-alert__icon {
58 | color: $color-red;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoBorderedBox/_geo-bordered-box-column.scss:
--------------------------------------------------------------------------------
1 | .geo-bordered-box-column {
2 | background: $color-white;
3 | display: flex;
4 | flex-direction: column;
5 | flex-grow: 1;
6 | justify-content: start;
7 | overflow: hidden;
8 | padding: $space-small;
9 |
10 | &:not(:first-child) {
11 | border-left: 1px solid $color-grey;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoBorderedBox/_geo-bordered-box-footer.scss:
--------------------------------------------------------------------------------
1 | .geo-bordered-box-footer {
2 | background: $color-white-dark;
3 | border-top: 1px solid $color-grey;
4 | flex-grow: 0;
5 | flex-shrink: 0;
6 | padding: 10px;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoBorderedBox/_geo-bordered-box-header-search-form.scss:
--------------------------------------------------------------------------------
1 | .geo-bordered-box-header-search-form {
2 | align-items: center;
3 | margin: $space-small;
4 | display: flex;
5 | flex-direction: row;
6 | flex-grow: 0;
7 | flex-shrink: 0;
8 |
9 | .geo-input .geo-input__input {
10 | height: 30px;
11 | font-size: $font-size-small;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoBorderedBox/_geo-bordered-box-header.scss:
--------------------------------------------------------------------------------
1 | .geo-bordered-box-header {
2 | @include font($heading-small);
3 |
4 | align-items: center;
5 | background: $color-white-dark;
6 | border-bottom: 1px solid $color-grey;
7 | color: $color-grey-darker;
8 | display: flex;
9 | flex-direction: row;
10 | flex-grow: 0;
11 | flex-shrink: 0;
12 | height: 40px;
13 | justify-content: space-between;
14 | padding: 0 7px 0 5px;
15 | white-space: nowrap;
16 |
17 | .geo-bordered-box-header__icon-and-label {
18 | align-items: center;
19 | display: flex;
20 | flex-direction: row;
21 | overflow: hidden;
22 |
23 | &:first-child:last-child {
24 | margin-right: 10px;
25 | }
26 | }
27 |
28 | .geo-bordered-box-header__label {
29 | overflow: hidden;
30 | }
31 |
32 | .geo-bordered-box-header__label:first-child:last-child {
33 | margin-left: 10px;
34 | }
35 |
36 | .geo-bordered-box-header__icon-container {
37 | color: $color-grey-light;
38 | cursor: pointer;
39 | margin-right: 10px;
40 |
41 | &:hover {
42 | color: $color-grey-darker;
43 | }
44 | }
45 |
46 | .geo-bordered-box-header__trailing-button {
47 | align-items: center;
48 | color: $color-grey-light;
49 | cursor: pointer;
50 | display: flex;
51 | justify-content: center;
52 | margin-left: 10px;
53 |
54 | &:hover {
55 | color: $color-grey-darker;
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoBorderedBox/_geo-bordered-box.scss:
--------------------------------------------------------------------------------
1 | .geo-bordered-box {
2 | background: $color-white;
3 | border: 1px solid $color-grey;
4 | border-radius: $border-radius-default;
5 | box-shadow: $box-shadow-regular;
6 | display: flex;
7 | flex-direction: column;
8 | overflow: hidden;
9 | }
10 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoBorderedToken/_geo-bordered-token.scss:
--------------------------------------------------------------------------------
1 | .geo-bordered-token {
2 | align-items: center;
3 | background: $color-white-dark;
4 | border: 1px solid $color-grey;
5 | border-radius: $border-radius-default;
6 | display: flex;
7 | min-height: 30px;
8 | padding: 0 $space-small;
9 | user-select: none;
10 |
11 | .geo-bordered-token__icon {
12 | color: $color-grey-light;
13 | margin-right: 5px;
14 | }
15 |
16 | .geo-bordered-token__label {
17 | color: $color-grey-darker;
18 | font-family: $font-family-text;
19 | }
20 |
21 | &--disabled {
22 | background: $color-grey;
23 | cursor: not-allowed;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoCalendar/_geo-calendar-dropdown.scss:
--------------------------------------------------------------------------------
1 | .geo-calendar-dropdown__popup {
2 | .geo-bordered-box {
3 | box-sizing: border-box;
4 | }
5 |
6 | .geo-scrollable-container__body {
7 | max-height: var(--available-height);
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoCalendar/_geo-calendar-picker.scss:
--------------------------------------------------------------------------------
1 | .geo-calendar-picker {
2 | // GEO CALENDAR NAVIGATION STYLES
3 | .geo-calendar-navigation {
4 | align-items: center;
5 | display: flex;
6 | justify-content: space-between;
7 | margin: $space-base 0;
8 | }
9 |
10 | .geo-button--link--calendar-navigation-toggle-button {
11 | font-weight: $font-weight-bold;
12 | }
13 |
14 | .geo-button__label--calendar-navigation-toggle-button {
15 | align-items: flex-end;
16 | display: flex;
17 | text-transform: capitalize;
18 | }
19 |
20 | .geo-calendar-navigation__selects-container {
21 | align-items: center;
22 | display: flex;
23 | justify-content: space-evenly;
24 | width: 50%;
25 | }
26 |
27 | .geo-calendar-navigation-toggle-button-icon {
28 | @include font($label-optional);
29 |
30 | margin-left: $space-x-small;
31 | }
32 |
33 | .geo-calendar-navigation__nav-icon {
34 | @include font($label-optional);
35 |
36 | cursor: pointer;
37 | }
38 |
39 | .geo-calendar-navigation__nav-icon--disabled {
40 | color: $color-grey;
41 | cursor: not-allowed;
42 | }
43 |
44 | .geo-calendar-navigation--disabled {
45 | color: $color-grey;
46 | cursor: not-allowed;
47 | text-decoration: line-through;
48 | }
49 | }
50 |
51 | .geo-calendar-navigation-selection .geo-list-item {
52 | margin: 0;
53 | padding: $space-small $space-small;
54 | }
55 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoCircle/_geo-circle.scss:
--------------------------------------------------------------------------------
1 | @mixin make-circle-variants {
2 | $background-color-by-variant: (
3 | default: $color-blue,
4 | primary: $color-blue,
5 | success: $color-green,
6 | info: $color-blue-light,
7 | warn: $color-yellow,
8 | error: $color-red,
9 | disabled: $color-grey
10 | );
11 |
12 | @each $variant, $background-color in $background-color-by-variant {
13 | .geo-#{$variant}-circle {
14 | background: $background-color;
15 | }
16 | }
17 | }
18 |
19 | .geo-circle {
20 | border-radius: 100%;
21 | height: 10px;
22 | width: 10px;
23 | }
24 |
25 | @include make-circle-variants;
26 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoDropdown/_geo-dropdown-compact-button.scss:
--------------------------------------------------------------------------------
1 | .geo-dropdown__compact-button-container {
2 | align-items: center;
3 |
4 | background-color: transparent;
5 | border: 1px solid transparent;
6 | border-radius: 3px;
7 | color: $color-grey-darker;
8 |
9 | cursor: pointer;
10 | display: flex;
11 | font-size: $font-size-regular;
12 | height: 2em;
13 | justify-content: center;
14 | padding: 0.35em;
15 | width: 1.2em;
16 |
17 | &:hover {
18 | background-color: $color-white;
19 | border-color: $color-blue;
20 | color: $color-blue;
21 | }
22 | }
23 |
24 | .geo-dropdown__compact-button-container--disabled {
25 | cursor: not-allowed;
26 |
27 | .geo-dropdown__compact-button-container__icon {
28 | color: $color-grey-light;
29 | }
30 | &:hover {
31 | background-color: transparent;
32 | border: none;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoDropdown/_geo-dropdown-select-button.scss:
--------------------------------------------------------------------------------
1 | .geo-dropdown__select-button {
2 | &.geo-dropdown-regular-button-container {
3 | justify-content: space-between;
4 | }
5 |
6 | .geo-dropdown-regular-button-container__icon {
7 | transition: transform .08s ease-in-out;
8 | }
9 | }
10 |
11 | .geo-dropdown--is-open {
12 | .geo-dropdown__select-button .geo-dropdown-regular-button-container__icon {
13 | transform: rotateZ(-180deg);
14 | }
15 | }
--------------------------------------------------------------------------------
/src/styles/elements/GeoDropdown/_geo-dropdown.scss:
--------------------------------------------------------------------------------
1 | .geo-dropdown {
2 | display: flex;
3 | font-family: $font-family-text;
4 | font-size: $font-size-regular;
5 | user-select: none;
6 | }
7 |
8 | .geo-dropdown__popup {
9 | // Use this variable to customize the space between toggle button popup
10 | --spacing-to-toggle-button: 5;
11 |
12 | // You can use these variables to consider available space depending on the
13 | // position of the tooltip. They are automatically set whenever tooltip is
14 | // positioned:
15 | //
16 | // --available-width
17 | // --available-height
18 |
19 | display: none;
20 | overflow: hidden;
21 | position: fixed;
22 | user-select: none;
23 | z-index: $z-index-sticky;
24 | }
25 |
26 | .geo-dropdown__popup--is-open {
27 | display: flex;
28 | flex-direction: column;
29 | }
30 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoHighlightedString/_geo-highlighted-string.scss:
--------------------------------------------------------------------------------
1 | .highlighted-string__container {
2 | align-items: center;
3 | display: inline;
4 | }
5 |
6 | .highlighted-string--normal {
7 | display: inline;
8 | }
9 |
10 | .highlighted-string--highlighted {
11 | background: $color-yellow-highlight;
12 | display: inline;
13 | font-weight: $font-weight-bold;
14 | }
15 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoHorizontalLayout/_geo-horizontal-layout.scss:
--------------------------------------------------------------------------------
1 | .geo-horizontal-layout {
2 | display: flex;
3 | flex-direction: row;
4 | }
5 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoInput/_geo-input-label.scss:
--------------------------------------------------------------------------------
1 | .geo-input-label {
2 | @include font($label);
3 | margin-bottom: $space-small;
4 | }
5 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoInput/_geo-input-message.scss:
--------------------------------------------------------------------------------
1 | .geo-input-message {
2 | @include font($body-small);
3 | color: $color-grey-light;
4 | margin-top: $space-x-small;
5 | }
6 |
7 | .geo-input-message--error {
8 | color: $color-red;
9 | }
10 |
11 | .geo-input-message--success {
12 | color: $color-green;
13 | }
14 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoInput/_geo-input-prefix.scss:
--------------------------------------------------------------------------------
1 | .geo-input-prefix {
2 | @include font($body);
3 |
4 | $border-size: 1px;
5 |
6 | background-color: $color-white-darker;
7 | border-right: $border-size solid $color-grey;
8 | border-radius: $border-radius-default 0 0 $border-radius-default;
9 | box-sizing: border-box;
10 | color: $color-grey-darker;
11 | height: $space-x-large - 2 * $border-size;
12 | margin-left: -$space-small + $border-size;
13 | padding: $space-small;
14 | }
15 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoInput/_geo-input-suffix.scss:
--------------------------------------------------------------------------------
1 | .geo-input-suffix {
2 | @include font($body);
3 |
4 | $border-size: 1px;
5 |
6 | background-color: $color-white-darker;
7 | border-radius: 0 $border-radius-default $border-radius-default 0;
8 | border-left: $border-size solid $color-grey;
9 | box-sizing: border-box;
10 | color: $color-grey-darker;
11 | height: $space-x-large - 2 * $border-size;
12 | margin-right: -$space-small + $border-size;
13 | padding: $space-small;
14 | }
15 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoList/_geo-list-clear-item.scss:
--------------------------------------------------------------------------------
1 | .geo-list-clear-item {
2 | align-items: center;
3 | border-radius: $border-radius-default;
4 | color: $color-grey-light;
5 | cursor: default;
6 | display: flex;
7 | font-family: $font-family-text;
8 | font-weight: $font-weight-regular;
9 | justify-content: center;
10 | margin: 20px 10px;
11 | min-height: 20px;
12 | }
13 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoList/_geo-list-footer-button.scss:
--------------------------------------------------------------------------------
1 | .geo-list-footer-button {
2 | align-items: center;
3 | background: $color-white;
4 | border-top: 1px solid $color-grey;
5 | display: flex;
6 | flex-grow: 0;
7 | flex-shrink: 0;
8 | height: 40px;
9 | justify-content: center;
10 | padding: 0 10px;
11 | }
12 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoList/_geo-list-group.scss:
--------------------------------------------------------------------------------
1 | .geo-list-group {
2 | background: $color-white;
3 |
4 | & + & {
5 | border-top: 1px solid $color-grey;
6 | margin-top: $space-x-small;
7 | }
8 | }
9 |
10 | .geo-list-group-header {
11 | align-items: center;
12 | background: $color-white;
13 | border-radius: $border-radius-default;
14 | color: $color-grey-dark;
15 | cursor: default;
16 | display: flex;
17 | flex-direction: row;
18 | font-family: $font-family-heading;
19 | font-size: $font-size-regular;
20 | font-weight: $font-weight-semi-bold;
21 | height: $space-large;
22 | justify-content: space-between;
23 | line-height: $line-height-base;
24 | margin: $space-x-small;
25 | padding: 0 $space-x-small;
26 | white-space: nowrap;
27 | }
28 |
29 | .geo-list-group-header__icon-and-label {
30 | align-items: center;
31 | display: flex;
32 | flex-direction: row;
33 | }
34 |
35 | .geo-list-group-header__icon-container {
36 | margin-right: $space-small;
37 | }
38 |
39 | .geo-list-group-header__trailing-accessory-items {
40 | color: $color-grey-light;
41 | margin-left: $space-small;
42 | }
43 |
44 | .geo-list-group__content {
45 | margin-left: $space-small;
46 | }
47 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoMarkdownContent/_geo-markdown-content.scss:
--------------------------------------------------------------------------------
1 | .geo-markdown-content {
2 | strong {
3 | &, span {
4 | font-weight: bold;
5 | }
6 | }
7 |
8 | em {
9 | &, span {
10 | font-style: italic;
11 | }
12 | }
13 |
14 | .geo-markdown-content-node-link__link {
15 | cursor: pointer;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoMarquee/_geo-marquee.scss:
--------------------------------------------------------------------------------
1 | @keyframes marquee-animation {
2 | 0% {
3 | transform: translateX(0);
4 | }
5 |
6 | 65% {
7 | transform: translateX(-100%);
8 | }
9 |
10 | 100% {
11 | transform: translateX(-100%);
12 | }
13 | }
14 |
15 | .geo-marquee {
16 | cursor: pointer;
17 | display: flex;
18 | overflow: hidden;
19 | width: 100%;
20 | }
21 |
22 | .geo-marquee__text-content {
23 | padding-right: $space-small;
24 | white-space: nowrap;
25 | }
26 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoModal/_geo-modal.scss:
--------------------------------------------------------------------------------
1 | .geo-modal {
2 | align-items: center;
3 | bottom: 0;
4 | display: flex;
5 | justify-content: center;
6 | left: 0;
7 | position: absolute;
8 | right: 0;
9 | top: 0;
10 | z-index: $z-index-modal;
11 |
12 | .geo-modal__backdrop {
13 | bottom: 0;
14 | background: $color-grey-backdrop;
15 | left: 0;
16 | position: absolute;
17 | right: 0;
18 | top: 0;
19 | z-index: 0;
20 | }
21 |
22 | .geo-modal__content {
23 | align-items: center;
24 | display: flex;
25 | justify-content: center;
26 | z-index: 1;
27 | }
28 |
29 | .geo-modal__content-body {
30 | padding: $space-base;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoNotificationBar/_geo-notification-bar.scss:
--------------------------------------------------------------------------------
1 | .geo-notification-bar {
2 | align-items: center;
3 | background: $color-green-notification;
4 | display: flex;
5 | height: 45px;
6 | justify-content: space-between;
7 | padding: 0 25px;
8 | width: 100%;
9 |
10 | .geo-notification-bar__message-body {
11 | align-items: center;
12 | display: flex;
13 | width: 100%;
14 | }
15 |
16 | .geo-notification-bar__close-icon,
17 | .geo-notification-bar__icon {
18 | font-size: 18px;
19 | color: $color_white;
20 | }
21 |
22 | .geo-notification-bar__message-text {
23 | @include font($body);
24 | color: $color-black;
25 | margin: 0 15px;
26 | user-select: none;
27 | }
28 |
29 | .geo-notification-bar__close-icon {
30 | cursor: pointer;
31 | margin-left: 15px;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoPill/_geo-pill.scss:
--------------------------------------------------------------------------------
1 | .geo-pill {
2 | @include font($body);
3 | align-items: center;
4 | border-radius: 50vh;
5 | border: 1px solid $color-grey;
6 | box-sizing: border-box;
7 | display: flex;
8 | flex-direction: row;
9 | font-family: $font-family-text;
10 | padding: 0 $space-small;
11 | user-select: none;
12 | }
13 |
14 | .geo-pill--default,
15 | .geo-pill--light {
16 | background: $color-white;
17 | font-size: $font-size-xxsmall;
18 | font-weight: $font-weight-bold;
19 | height: $space-base;
20 | text-transform: uppercase;
21 | }
22 |
23 | .geo-pill--dark {
24 | background: $color-white-dark;
25 | color: $color-grey-darker;
26 | min-height: $space-large;
27 | }
28 |
29 | .geo-pill--opaque {
30 | background: $color-yellow-light;
31 | border: none;
32 | color: $color-grey-darker;
33 | font-size: $font-size-small;
34 | height: $space-large;
35 | }
36 |
37 | .geo-pill--outline {
38 | background: $color-white;
39 | border: 1px solid $color-yellow-light;
40 | color: $color-grey-darker;
41 | font-size: $font-size-small;
42 | height: $space-large;
43 | }
44 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoScrollableContainer/_geo-scrollable-container.scss:
--------------------------------------------------------------------------------
1 | .geo-scrollable-container {
2 | display: flex;
3 | flex-direction: column;
4 | flex-grow: 1;
5 | flex-shrink: 1;
6 | min-width: 150px;
7 | overflow: hidden;
8 | }
9 |
10 | .geo-scrollable-container__body {
11 | flex-grow: 1;
12 | flex-shrink: 1;
13 | max-height: 350px;
14 | overflow-y: auto;
15 | overflow-x: hidden;
16 | }
17 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoSelect/_geo-multi-select.scss:
--------------------------------------------------------------------------------
1 | .geo-multi-select {
2 | flex-grow: 1;
3 |
4 | .geo-multi-select__pills-container {
5 | display: flex;
6 | flex-wrap: wrap;
7 | margin-bottom: -$space-x-small;
8 | max-height: 128px;
9 | overflow-y: auto;
10 | }
11 |
12 | .geo-multi-select__pill {
13 | height: 28px;
14 | margin: 0 $space-x-small $space-x-small 0;
15 |
16 | &:last-child {
17 | margin-right: 0
18 | }
19 | }
20 |
21 | .geo-multi-select__pill-remove {
22 | color: $color-grey-light;
23 | margin-left: $space-x-small;
24 |
25 | &:hover {
26 | color: $color-red;
27 | }
28 | }
29 | }
30 |
31 | .geo-multi-select__popup {
32 | .geo-multi-select__label-group,
33 | .geo-multi-select__label {
34 | align-items: center;
35 | display: flex;
36 | font-weight: $font-weight-regular;
37 | }
38 |
39 | .geo-multi-select__label-group {
40 | font-weight: $font-weight-semi-bold;
41 | }
42 |
43 | .geo-multi-select_input {
44 | margin-left: $space-small;
45 | }
46 | }
47 |
48 | .geo-multi-select {
49 | .geo-select-toggle-button {
50 | box-sizing: border-box;
51 | height: auto;
52 | min-height: $space-x-large;
53 | padding: $space-x-small $space-small;
54 | width: 100%;
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoSelect/_geo-select-base.scss:
--------------------------------------------------------------------------------
1 | .geo-select-base {
2 | .geo-select-toggle-button__toggle-icon {
3 | transition: transform $duration-quickly $easing-base;
4 | }
5 |
6 | &.geo-dropdown--is-open {
7 | .geo-select-toggle-button__toggle-icon {
8 | transform: rotateZ(-180deg);
9 | }
10 | }
11 | }
12 |
13 | .geo-select-base__options-container {
14 | flex-grow: 0;
15 | flex-shrink: 1;
16 | overflow-y: auto;
17 | }
18 |
19 | .geo-select-base__popup {
20 | &.geo-dropdown__popup--is-open {
21 | display: flex;
22 | flex-direction: column;
23 | }
24 |
25 | .geo-trimmed-content {
26 | width: calc(100% - 10px - 0.875em);
27 | }
28 |
29 | .geo-list-group-header__label,
30 | .geo-list-item__icon-and-label,
31 | .geo-list-item__label,
32 | .geo-list-group-header__icon-and-label{
33 | width: 100%;
34 |
35 | .geo-trimmed-content {
36 | width: 100%;
37 | }
38 | }
39 |
40 | .geo-scrollable-container {
41 | flex-grow: 1;
42 | flex-shrink: 1;
43 | }
44 |
45 | .geo-list-group {
46 | &:not(:first-child) {
47 | border-top: 1px solid $color-grey;
48 | margin-top: $space-small;
49 | }
50 | }
51 | }
52 |
53 | .geo-select-base__popup--disabled {
54 | .geo-marquee {
55 | cursor: not-allowed;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoSelect/_geo-select.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geoblink/design-system/935a43e99f814a63fa192da37bde724919187d0b/src/styles/elements/GeoSelect/_geo-select.scss
--------------------------------------------------------------------------------
/src/styles/elements/GeoSidebarLayout/_geo-sidebar-layout.scss:
--------------------------------------------------------------------------------
1 | .geo-sidebar-layout {
2 | background-color: $color-white-dark;
3 | border-right: 1px solid $color-grey;
4 | box-sizing: border-box;
5 | display: flex;
6 | flex-direction: column;
7 | flex-shrink: 0;
8 | height: 100%;
9 | padding: $space-base;
10 | }
11 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoSwitch/_geo-switch.scss:
--------------------------------------------------------------------------------
1 | .geo-switch {
2 | @include font($body);
3 |
4 | align-items: center;
5 | cursor: pointer;
6 | display: flex;
7 |
8 | &.geo-switch--disabled {
9 | cursor: not-allowed;
10 |
11 | .geo-switch__background {
12 | background: $color-white-disabled;
13 | }
14 |
15 | &.geo-switch--checked {
16 | .geo-switch__background {
17 | background: $color-blue-light;
18 | }
19 | }
20 | }
21 |
22 | &.geo-switch--checked {
23 | .geo-switch__background {
24 | background: $color-blue;
25 | }
26 |
27 | .geo-switch__handle {
28 | transform: translateX(8px);
29 | }
30 | }
31 |
32 | .geo-switch__input {
33 | display: none;
34 | }
35 |
36 | .geo-switch__background {
37 | background: $color-grey-light;
38 | border-radius: calc($space-small / 2);
39 | height: $space-small;
40 | margin-right: $space-small;
41 | position: relative;
42 | transition: background-color $duration-noticeable $easing-base;
43 | width: 18px;
44 | }
45 |
46 | .geo-switch__handle {
47 | $size: 6px;
48 |
49 | background: $color-white;
50 | border-radius: calc($size / 2);
51 | height: $size;
52 | left: calc(($space-small - $size) / 2);
53 | position: absolute;
54 | top: calc(($space-small - $size) / 2);
55 | transition: transform $duration-noticeable $easing-base;
56 | width: $size;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTabBar/_geo-tab-bar.scss:
--------------------------------------------------------------------------------
1 | @mixin geo-tab-bar-common {
2 | align-items: center;
3 | display: flex;
4 | flex-direction: row;
5 | justify-content: flex-start;
6 | padding: 0 $space-small;
7 | }
8 |
9 | .geo-tab-bar-default {
10 | @include geo-tab-bar-common;
11 |
12 | background-color: $color-blue-dark;
13 | height: 50px;
14 | }
15 |
16 | .geo-tab-bar-modal {
17 | @include geo-tab-bar-common;
18 |
19 | background-color: $color-white-dark;
20 | height: 40px;
21 | }
22 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTable/_geo-table-0.constants.scss:
--------------------------------------------------------------------------------
1 | $geo-table-border-color: $color-white-darker;
2 | $geo-table-shadow-background-dark: rgba(205, 205, 205, .7);
3 | $geo-table-shadow-background-transparent: rgba(255, 255, 255, 0);
4 | $geo-table-shadow-size: $space-small;
5 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTable/_geo-table-0.row.common.scss:
--------------------------------------------------------------------------------
1 | @mixin geo-table-make-row ($background-color) {
2 | background: $background-color;
3 | display: flex;
4 | flex-direction: row;
5 | height: $space-large;
6 |
7 | &:first-child {
8 | > * {
9 | border-top: 0;
10 | }
11 | }
12 | }
13 |
14 | @mixin geo-table-make-cell ($background-color) {
15 | align-items: center;
16 | border-left: 1px solid $geo-table-border-color;
17 | border-top: 1px solid $geo-table-border-color;
18 | box-sizing: border-box;
19 | display: flex;
20 | flex: 0 0 auto;
21 | flex-direction: row;
22 | padding: 0 $space-small;
23 |
24 | &:first-child {
25 | border-left: 0;
26 | }
27 | }
--------------------------------------------------------------------------------
/src/styles/elements/GeoTable/_geo-table-body-row-cell.scss:
--------------------------------------------------------------------------------
1 | .geo-table-body-row-cell {
2 | @include geo-table-make-cell($color-white);
3 | @include font($table-value);
4 |
5 | white-space: nowrap;
6 | }
7 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTable/_geo-table-body-row.scss:
--------------------------------------------------------------------------------
1 | .geo-table-body-row--default,
2 | .geo-table-body-row--highlighted,
3 | .geo-table-body-row--active,
4 | .geo-table-body-row--highlighted-active {
5 | @include geo-table-make-row($color-white);
6 |
7 | height: $space-large;
8 | }
9 |
10 | .geo-table-body-row--default:hover {
11 | background: rgba($color-blue-light, .1);
12 | }
13 |
14 | .geo-table-body-row--highlighted {
15 | background: rgba($color-yellow-light, .2);
16 |
17 | &:hover {
18 | background: rgba($color-yellow-light, .4);
19 | }
20 | }
21 |
22 | .geo-table-body-row--highlighted-active {
23 | background: rgba($color-yellow-light, .6);
24 |
25 | &:hover {
26 | background: rgba($color-yellow-light, .4);
27 | }
28 | }
29 |
30 | .geo-table-body-row--active {
31 | background: rgba($color-blue-light, .2);
32 |
33 | &:hover {
34 | background: rgba($color-blue-light, .1);
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTable/_geo-table-header-row-cell.scss:
--------------------------------------------------------------------------------
1 | @mixin geo-table-header-row-cell-make-common {
2 | @include geo-table-make-cell($color-white);
3 | @include font($table-title);
4 |
5 | justify-content: space-between;
6 | white-space: nowrap;
7 |
8 | &:hover {
9 | .geo-table-sort {
10 | visibility: visible;
11 | }
12 | }
13 | }
14 |
15 | .geo-table-header-row-cell--main,
16 | .geo-table-header-row-cell--single {
17 | @include geo-table-header-row-cell-make-common;
18 |
19 | position: relative;
20 | }
21 |
22 | .geo-table-header-row-cell--aux {
23 | @include geo-table-header-row-cell-make-common;
24 | @include font($heading-xsmall);
25 | }
26 |
27 | .geo-table-header-row-cell--multiLine {
28 | @include geo-table-header-row-cell-make-common;
29 |
30 | align-items: flex-start;
31 | flex-direction: column;
32 | justify-content: center;
33 | padding: $space-x-small $space-small;
34 | position: relative;
35 | }
36 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTable/_geo-table-header-row.scss:
--------------------------------------------------------------------------------
1 | .geo-table-header-row--main {
2 | @include geo-table-make-row($color-white-darker);
3 |
4 | color: $color-grey-darker;
5 | position: relative;
6 | }
7 |
8 | .geo-table-header-row--aux {
9 | @include geo-table-make-row($color-white-dark);
10 |
11 | color: $color-grey-darker;
12 | }
13 |
14 | .geo-table-header-row--single {
15 | @include geo-table-make-row($color-white-dark);
16 |
17 | color: $color-grey-darker;
18 | position: relative;
19 | }
20 |
21 | .geo-table-header-row--multiLine {
22 | @include geo-table-make-row($color-white-dark);
23 |
24 | color: $color-grey-darker;
25 | height: auto;
26 | position: relative;
27 | }
28 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTable/_geo-table-sort.scss:
--------------------------------------------------------------------------------
1 | .geo-table-sort {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | margin-left: $space-small;
6 |
7 | .geo-table-sort__button {
8 | color: $color-grey-light;
9 | cursor: pointer;
10 |
11 | &:hover {
12 | color: $color-link;
13 | }
14 | }
15 |
16 | .geo-table-sort__button--active {
17 | color: $color-link;
18 | }
19 |
20 | .geo-table-sort__button--asc {
21 | margin-bottom: -1px;
22 | }
23 |
24 | .geo-table-sort__button--desc {
25 | margin-top: -1px;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTree/_geo-tree-item.scss:
--------------------------------------------------------------------------------
1 | .geo-tree-item {
2 | cursor: pointer;
3 | }
4 |
5 | .geo-tree-item__label {
6 | cursor: pointer;
7 | .highlighted-string__container {
8 | white-space: normal;
9 | }
10 | }
11 |
12 | .geo-tree-item__list {
13 | list-style: none;
14 | }
15 |
16 | .geo-tree-item .geo-list-item__icon-container {
17 | text-align: center;
18 | width: 14px;
19 | }
20 |
21 | .geo-tree-item .geo-list-item__icon {
22 | color: $color-grey-backdrop;
23 | width: 5px;
24 | }
25 |
26 | .geo-tree-item__total-items {
27 | @include font($body-small);
28 | color: $color-grey-light;
29 | font-style: italic;
30 | }
31 |
32 | .geo-tree-item .geo-list-item__icon {
33 | transition: transform 0.25s;
34 | }
35 |
36 | .geo-tree-item--rotated-icon .geo-list-item__icon {
37 | transform: rotate(90deg);
38 | }
39 |
40 | .geo-tree-item--single {
41 | margin-left: $space-small;
42 | }
43 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTree/_geo-tree.scss:
--------------------------------------------------------------------------------
1 | .geo-tree__list {
2 | list-style: none;
3 | }
4 |
5 | .geo-tree__no-results-found {
6 | @include font($body);
7 | align-items: center;
8 | color: $color-grey-light;
9 | display: flex;
10 | justify-content: center;
11 | margin: $space-base $space-small;
12 | min-height: 20px;
13 | }
14 |
15 | .geo-tree .geo-list-footer-button{
16 | background: transparent;
17 | }
18 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoTrimmedContent/_geo-trimmed-content.scss:
--------------------------------------------------------------------------------
1 | .geo-trimmed-content {
2 | display: flex;
3 | flex-direction: row;
4 | width: 100%;
5 |
6 | .geo-trimmed-content__content {
7 | overflow: hidden;
8 | text-overflow: ellipsis;
9 | white-space: nowrap;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoVerticalLayout/_geo-vertical-layout.scss:
--------------------------------------------------------------------------------
1 | .geo-vertical-layout {
2 | display: flex;
3 | flex-direction: column;
4 | }
5 |
6 | .geo-vertical-layout__body {
7 | padding: $space-base;
8 |
9 | & > .geo-scrollable-container__body {
10 | justify-content: center;
11 | height: 100%;
12 | display: flex;
13 | flex-direction: column;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/styles/elements/GeoWizardLayout/_geo-wizard-layout.scss:
--------------------------------------------------------------------------------
1 | .geo-wizard-layout {
2 | height: 100%;
3 | width: 100%;
4 | }
5 |
6 | .geo-wizard-layout__content-container {
7 | width: 100%;
8 | }
9 |
10 | .geo-wizard-layout__header {
11 | align-items: center;
12 | display: flex;
13 | flex-direction: row;
14 | margin-top: auto;
15 | }
16 |
17 | .geo-wizard-layout__footer {
18 | align-items: center;
19 | display: flex;
20 | flex-direction: row;
21 |
22 | border-top: 1px solid $color-grey;
23 | margin-top: auto;
24 | padding: 0 $space-base;
25 | }
26 |
27 | .geo-wizard-layout__footer--trailing {
28 | margin-left: auto;
29 | }
30 |
--------------------------------------------------------------------------------
/src/templates/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geoblink/design-system/935a43e99f814a63fa192da37bde724919187d0b/src/templates/.gitkeep
--------------------------------------------------------------------------------
/src/tokens/border-radius.yml:
--------------------------------------------------------------------------------
1 | #
2 | # BORDER RADIUS TOKENS
3 | # Use these tokens to change border-radius size.
4 | #
5 |
6 | props:
7 | border_radius_default:
8 | value: "3px"
9 | border_radius_circle:
10 | value: "50%"
11 | global:
12 | type: number
13 | category: border-radius
14 |
--------------------------------------------------------------------------------
/src/tokens/box-shadow.yml:
--------------------------------------------------------------------------------
1 | #
2 | # BOX SHADOW TOKENS
3 | # Use these tokens to set a box-shadow.
4 | #
5 |
6 | props:
7 | box_shadow_small:
8 | value: "0 2px 5px -3px rgba(0, 0, 0, 0.5)"
9 | box_shadow_small_inset:
10 | value: "inset 0 2px 5px 0 rgba(0, 0, 0, 0.3)"
11 | box_shadow_regular:
12 | value: "0 14px 24px -12px rgba(0, 0, 0, 0.2)"
13 | box_shadow_focus:
14 | value: "0 0 0 2px rgba(#1464A5, 0.3)"
15 | box_shadow_focus_success:
16 | value: "0 0 0 2px rgba(#3FAD4D, 0.3)"
17 | box_shadow_focus_error:
18 | value: "0 0 0 2px rgba(#FF594F, 0.3)"
19 | box_shadow_button_hover:
20 | value: "0 2px 10px 0 rgba(0, 0, 0, 0.3)"
21 | global:
22 | type: ...
23 | category: box-shadow
24 |
--------------------------------------------------------------------------------
/src/tokens/easing.yml:
--------------------------------------------------------------------------------
1 | #
2 | # EASING TOKENS
3 | # Use these tokens for animation ease functions.
4 | #
5 |
6 | props:
7 | easing_base:
8 | value: "ease-in-out"
9 | global:
10 | type: easing
11 | category: easing
12 |
--------------------------------------------------------------------------------
/src/tokens/font-family.yml:
--------------------------------------------------------------------------------
1 | #
2 | # FONT TOKENS
3 | # Use these tokens to set font-family.
4 | #
5 |
6 | props:
7 | font_family_heading:
8 | value: "'Montserrat', Times New Roman, serif"
9 | font_family_text:
10 | value: "'Lato', Helvetica, sans-serif"
11 | global:
12 | type: font-family
13 | category: font-family
14 |
--------------------------------------------------------------------------------
/src/tokens/font-size.yml:
--------------------------------------------------------------------------------
1 | #
2 | # FONT-SIZE TOKENS
3 | # Use these tokens to set a font-size.
4 | #
5 |
6 | props:
7 | font_size_xlarge:
8 | value: "28px"
9 | font_size_large:
10 | value: "24px"
11 | font_size_medium:
12 | value: "18px"
13 | font_size_regular:
14 | value: "14px"
15 | font_size_small:
16 | value: "12px"
17 | font_size_xsmall:
18 | value: "10px"
19 | font_size_xxsmall:
20 | value: "8px"
21 | global:
22 | type: number
23 | category: font-size
24 |
--------------------------------------------------------------------------------
/src/tokens/font-weight.yml:
--------------------------------------------------------------------------------
1 | #
2 | # FONT TOKENS
3 | # Use these tokens to set font-weight.
4 | #
5 |
6 | props:
7 | font_weight_bold:
8 | value: "700"
9 | font_weight_semi_bold:
10 | value: "600"
11 | font_weight_medium:
12 | value: "500"
13 | font_weight_regular:
14 | value: "400"
15 | font_weight_light:
16 | value: "300"
17 | global:
18 | type: number
19 | category: font-weight
20 |
--------------------------------------------------------------------------------
/src/tokens/font.yml:
--------------------------------------------------------------------------------
1 | #
2 | # FONT TOKENS
3 | # Use these tokens to set font-weight and font-family.
4 | #
5 |
6 | #
7 | # FONT-SIZE TOKENS
8 | # Use these tokens to set a font-size.
9 | #
10 |
11 | props:
12 |
13 | display_large:
14 | value: "display_large"
15 | display_medium:
16 | value: "display_medium"
17 | display_small:
18 | value: "display_small"
19 |
20 | heading:
21 | value: "heading"
22 | heading_light:
23 | value: "heading_light"
24 | heading_small:
25 | value: "heading_small"
26 | heading_xsmall:
27 | value: "heading_xsmall"
28 |
29 | body:
30 | value: "body"
31 | body_small:
32 | value: "body_small"
33 | body_xsmall:
34 | value: "body_xsmall"
35 |
36 | highlight:
37 | value: "highlight"
38 | highlight_small:
39 | value: "highlight_small"
40 |
41 | label_big:
42 | value: "label_big"
43 | label:
44 | value: "label"
45 | label_optional:
46 | value: "label_optional"
47 |
48 | table_title:
49 | value: "table_title"
50 | table_value:
51 | value: "table_value"
52 |
53 | global:
54 | type: mixin-name
55 | category: font
56 |
--------------------------------------------------------------------------------
/src/tokens/letter-spacing.yml:
--------------------------------------------------------------------------------
1 | #
2 | # LETTER SPACING TOKENS
3 | # Use these tokens to adjust letter-spacing.
4 | #
5 |
6 | props:
7 | letter_spacing_x_large:
8 | value: "2px"
9 | letter_spacing_large:
10 | value: "1px"
11 | letter_spacing_base:
12 | value: "0"
13 | letter_spacing_small:
14 | value: "-0.5px"
15 | letter_spacing_x_small:
16 | value: "-1px"
17 | global:
18 | type: number
19 | category: letter-spacing
20 |
--------------------------------------------------------------------------------
/src/tokens/line-height.yml:
--------------------------------------------------------------------------------
1 | #
2 | # LINE HEIGHT
3 | # Use these tokens to set line-height.
4 | #
5 |
6 | props:
7 | line_height_base:
8 | value: "1.5"
9 | line_height_small:
10 | value: "1.3"
11 | line_height_heading:
12 | value: "1"
13 | global:
14 | type: number
15 | category: line-height
16 |
--------------------------------------------------------------------------------
/src/tokens/media-query.yml:
--------------------------------------------------------------------------------
1 | #
2 | # MEDIA QUERY TOKENS
3 | # Use these tokens to set media query width ranges.
4 | #
5 |
6 | props:
7 | media_query_medium:
8 | value: "(min-width: 768px)"
9 | media_query_large:
10 | value: "(min-width: 1024px)"
11 | global:
12 | type: ...
13 | category: media-query
14 |
--------------------------------------------------------------------------------
/src/tokens/opacity.yml:
--------------------------------------------------------------------------------
1 | #
2 | # OPACITY TOKENS
3 | # Use these tokens to set opacity.
4 | #
5 |
6 | props:
7 | opacity_disabled:
8 | value: "0.5"
9 | global:
10 | type: number
11 | category: opacity
12 |
--------------------------------------------------------------------------------
/src/tokens/size.yml:
--------------------------------------------------------------------------------
1 | #
2 | # SIZING TOKENS
3 | # Use these tokens for the width and height properties.
4 | #
5 |
6 | props:
7 | height_footer:
8 | value: "64px"
9 | tappable_square:
10 | value: "44px"
11 | size_medium:
12 | value: "18px"
13 | global:
14 | type: number
15 | category: size
16 |
--------------------------------------------------------------------------------
/src/tokens/spacing.yml:
--------------------------------------------------------------------------------
1 | #
2 | # SPACING TOKENS
3 | # Use these tokens to set padding, margin and position coordinates.
4 | #
5 |
6 | props:
7 | space_xx_large:
8 | value: "50px"
9 | space_x_large:
10 | value: "40px"
11 | space_large:
12 | value: "30px"
13 | space_base:
14 | value: "20px"
15 | space_small:
16 | value: "10px"
17 | space_x_small:
18 | value: "5px"
19 | global:
20 | type: number
21 | category: space
22 |
--------------------------------------------------------------------------------
/src/tokens/timing.yml:
--------------------------------------------------------------------------------
1 | #
2 | # TIMING TOKENS
3 | # Use these tokens for animation durations.
4 | #
5 |
6 | props:
7 | duration_quickly:
8 | value: "0.08s"
9 | duration_noticeable:
10 | value: "0.2s"
11 | duration_slowly:
12 | value: "0.5s"
13 | global:
14 | type: number
15 | category: time
16 |
--------------------------------------------------------------------------------
/src/tokens/tokens.yml:
--------------------------------------------------------------------------------
1 | #
2 | # GLOBAL: DESIGN TOKENS
3 | #
4 |
5 | imports:
6 | - ./color.yml
7 | - ./font-family.yml
8 | - ./font-size.yml
9 | - ./font-weight.yml
10 | - ./font.yml
11 | - ./opacity.yml
12 | - ./size.yml
13 | - ./timing.yml
14 | - ./easing.yml
15 | - ./z-index.yml
16 | - ./media-query.yml
17 | - ./box-shadow.yml
18 | - ./letter-spacing.yml
19 | - ./border-radius.yml
20 | - ./spacing.yml
21 | - ./line-height.yml
22 | global:
23 | type: global
24 | category: all
25 |
--------------------------------------------------------------------------------
/src/tokens/z-index.yml:
--------------------------------------------------------------------------------
1 | #
2 | # Z-INDEX TOKENS
3 | # Use these tokens to set z-index.
4 | #
5 |
6 | props:
7 | z_index_modal:
8 | value: "9999"
9 | z_index_over_modal:
10 | value: "10000"
11 | z_index_tooltip:
12 | value: "10001"
13 | z_index_sticky:
14 | value: "100"
15 | global:
16 | type: number
17 | category: z-index
18 |
--------------------------------------------------------------------------------
/src/utils/counterFactory.js:
--------------------------------------------------------------------------------
1 | export default function counterFactory () {
2 | let value = 0
3 | return function () {
4 | return value++
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/utils/enumPropertyFactory.js:
--------------------------------------------------------------------------------
1 | export {
2 | enumPropertyFactory
3 | }
4 |
5 | /**
6 | * @param {object} params
7 | * @param {string} [params.defaultValue]
8 | * @param {Boolean} [params.required]
9 | * @param {Boolean} [params.checkUndefined]
10 | * @param {Object} params.enumDictionary
11 | * @param {string} params.componentName
12 | * @param {string} params.propertyName
13 | */
14 | function enumPropertyFactory (params) {
15 | const enumProperty = {
16 | type: String,
17 | validator (value) {
18 | if (params.checkUndefined && value === undefined) return true
19 |
20 | const allValues = Object.values(params.enumDictionary)
21 | if (allValues.includes(value)) return true
22 |
23 | const supportedValues = allValues.map(i => `«${i}»`).join(', ')
24 | console.warn(`${params.componentName} [component] :: Unsupported value («${value}») for «${params.propertyName}» property. Use one of ${supportedValues}`)
25 | return false
26 | }
27 | }
28 |
29 | if ('defaultValue' in params) {
30 | enumProperty.default = params.defaultValue
31 | }
32 | if ('required' in params) {
33 | enumProperty.required = !!params.required
34 | }
35 |
36 | return enumProperty
37 | }
38 |
--------------------------------------------------------------------------------
/src/utils/getDOMElementOffset.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns the offset of given element relative to document's body.
3 | *
4 | * @param {HTMLElement} initialElement Element whose offset will be returned.
5 | * @returns {{left: number, top: number}} Offset of given element relative to
6 | * document body.
7 | */
8 | export default function (initialElement) {
9 | const boundingRect = initialElement.getBoundingClientRect()
10 |
11 | const body = document.body
12 | const docEl = document.documentElement
13 |
14 | const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop
15 | const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft
16 |
17 | const clientTop = docEl.clientTop || body.clientTop || 0
18 | const clientLeft = docEl.clientLeft || body.clientLeft || 0
19 |
20 | const top = boundingRect.top + scrollTop - clientTop
21 | const left = boundingRect.left + scrollLeft - clientLeft
22 |
23 | return {
24 | top: Math.round(top),
25 | left: Math.round(left)
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/utils/isServer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns whether Vue is currently running in the server (for server-side
3 | * rendering).
4 | *
5 | * @return boolean `true` if Vue is currently running in the server.
6 | */
7 | export default function (vNode) {
8 | return vNode.componentInstance && vNode.componentInstance.$isServer
9 | }
10 |
--------------------------------------------------------------------------------
/src/utils/ssrProxy.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns a server-side-friendly document object.
3 | *
4 | * When this code is run outside a browser, an empty object is returned.
5 | *
6 | * @returns {object}
7 | */
8 | export function getDocument () {
9 | return typeof document !== 'undefined'
10 | ? document
11 | : {}
12 | }
13 |
--------------------------------------------------------------------------------
/src/utils/throttle.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 |
3 | /**
4 | * Returns a throttled version of given function, using a proper delay so the UI
5 | * isn't blocked.
6 | *
7 | * It will run the function both: at the leading and trailing edge of the interval,
8 | * more info about this in [Lodash docs](https://lodash.com/docs/4.17.5#throttle).
9 | *
10 | * @parameter Function callback Function to be run.
11 | * @parameter time in ms to throttle (default 10)
12 | * @returns Function Throttled function.
13 | */
14 | export default function (callback, time = 10) {
15 | return _.throttle(callback, time, {
16 | leading: true,
17 | trailing: true
18 | })
19 | }
20 |
--------------------------------------------------------------------------------
/src/utils/vueInstance.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates a new Vue instance. Used in /src/system.js
3 | */
4 | import Vue from 'vue'
5 | export default new Vue()
6 |
--------------------------------------------------------------------------------
/src/utils/webFontLoader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Web Font Loader takes care of Vue Design System’s font loading.
3 | * For full documentation, see: https://github.com/typekit/webfontloader
4 | */
5 | import WebFont from 'webfontloader'
6 |
7 | WebFont.load({
8 | google: {
9 | families: [
10 | 'Montserrat:300,400,400i,600,700',
11 | 'Lato:300,400,400i,600,700'
12 | ]
13 | }
14 | })
15 |
--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
3 |
4 | Vue.component('font-awesome-icon', FontAwesomeIcon)
5 | Vue.config.productionTip = false
6 |
7 | // require all test files (files that ends with .spec.js)
8 | const testsContext = require.context('./specs', true, /\.spec$/)
9 | testsContext.keys().forEach(testsContext)
10 |
11 | // require all src files for coverage.
12 | // you can also change this to match only the subset of files that
13 | // you want coverage for.
14 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
15 | srcContext.keys().forEach(srcContext)
16 |
--------------------------------------------------------------------------------
/test/unit/jest.conf.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | rootDir: path.resolve(__dirname, '../../'),
5 | modulePaths: [''],
6 | moduleFileExtensions: ['js', 'json', 'vue'],
7 | moduleNameMapper: {
8 | '^@/(.*)$': '/src/$1'
9 | },
10 | transform: {
11 | '.*\\.js$': '/node_modules/babel-jest',
12 | '.*\\.vue$': '/node_modules/vue-jest'
13 | },
14 | testResultsProcessor: '/node_modules/jest-junit-reporter',
15 | snapshotSerializers: ['/node_modules/jest-serializer-vue'],
16 | setupFiles: ['/test/unit/setup'],
17 | coverageDirectory: '/test/unit/coverage',
18 | coverageReporters: ['json', 'text', 'html', 'lcov'],
19 | collectCoverageFrom: [
20 | '/src/util/**/*.{js,vue}',
21 | '/src/elements/**/*.{js,vue}',
22 | '/docs/**/*.{js,vue}',
23 | '!/node_modules/**',
24 | '!/src/system.js',
25 | '!/docs/docs.helper.js',
26 | '!/docs/components/status/*'
27 | ],
28 | // TODO: Remove this on task https://geoblink.atlassian.net/browse/CORE-8494
29 | testPathIgnorePatterns: [
30 | 'test/unit/specs/utils/throttle.spec.js'
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
/test/unit/setup.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | Vue.config.productionTip = false
4 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoBorderedBox/GeoBorderedBox.spec.js:
--------------------------------------------------------------------------------
1 | import { createLocalVue, mount } from '@vue/test-utils'
2 | import GeoBorderedBox from '@/elements/GeoBorderedBox/GeoBorderedBox.vue'
3 |
4 | // create an extended `Vue` constructor
5 | const localVue = createLocalVue()
6 | localVue.component('geo-bordered-box', GeoBorderedBox)
7 |
8 | describe('GeoBorderedBox', () => {
9 | it('Should render GeoBorderedBox component', function () {
10 | const wrapper = mount(GeoBorderedBox, {})
11 | expect(wrapper.find('.geo-bordered-box').exists()).toBe(true)
12 | })
13 |
14 | it('Should render default slot', function () {
15 | const wrapper = mount(GeoBorderedBox, {
16 | slots: {
17 | default: ['Just some unique demo content ']
18 | }
19 | })
20 | expect(wrapper.find('.my-demo-content').exists()).toBe(true)
21 | })
22 | })
23 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoBorderedBox/GeoBorderedBoxColumn.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoBorderedBoxColumn from '@/elements/GeoBorderedBox/GeoBorderedBoxColumn.vue'
3 |
4 | describe('GeoBorderedBoxColumn', function () {
5 | it('Should render GeoBorderedBoxColumn component', function () {
6 | const wrapper = mount(GeoBorderedBoxColumn)
7 | expect(wrapper.find('.geo-bordered-box-column').exists()).toBe(true)
8 | })
9 |
10 | it('Should render default slot', function () {
11 | const wrapper = mount(GeoBorderedBoxColumn, {
12 | slots: {
13 | default: ['Just some unique demo content ']
14 | }
15 | })
16 | expect(wrapper.find('.my-demo-content').exists()).toBe(true)
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoBorderedBox/GeoBorderedBoxFooter.spec.js:
--------------------------------------------------------------------------------
1 | import { createLocalVue, mount } from '@vue/test-utils'
2 | import GeoBorderedBoxFooter from '@/elements/GeoBorderedBox/GeoBorderedBoxFooter.vue'
3 |
4 | // create an extended `Vue` constructor
5 | const localVue = createLocalVue()
6 | localVue.component('geo-bordered-box-footer', GeoBorderedBoxFooter)
7 |
8 | describe('GeoBorderedBoxFooter', () => {
9 | it('Should render default slot', function () {
10 | const wrapper = mount(GeoBorderedBoxFooter, {
11 | slots: {
12 | default: ['Just some unique demo content ']
13 | }
14 | })
15 |
16 | expect(wrapper.find('.my-demo-content').exists()).toBe(true)
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoChart/GeoChart.spec.js:
--------------------------------------------------------------------------------
1 | import GeoChart from '@/elements/GeoChart/GeoChart.vue'
2 |
3 | import * as GeoChartScale from '@/elements/GeoChart/GeoChartScale/GeoChartScale'
4 | import * as GeoChartAxis from '@/elements/GeoChart/GeoChartAxis/GeoChartAxis'
5 | import * as GeoChartBars from '@/elements/GeoChart/GeoChartBars/GeoChartBars'
6 |
7 | describe('GeoChart', () => {
8 | describe('Constants', function () {
9 | it('Should export SCALE_TYPES', function () {
10 | expect(GeoChart).toHaveProperty('constants.SCALE_TYPES', GeoChartScale.SCALE_TYPES)
11 | })
12 |
13 | it('Should export POSITIONS', function () {
14 | expect(GeoChart).toHaveProperty('constants.POSITIONS', GeoChartAxis.POSITIONS)
15 | })
16 |
17 | it('Should export BARS_DIMENSIONS', function () {
18 | expect(GeoChart).toHaveProperty('constants.BARS_DIMENSIONS', GeoChartBars.DIMENSIONS)
19 | })
20 | })
21 | })
22 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoChart/GeoChartSizing.spec.js:
--------------------------------------------------------------------------------
1 | import * as GeoChartSizing from '@/elements/GeoChart/GeoChartUtils/GeoChartSizing.js'
2 |
3 | describe('GeoChartSizing', () => {
4 | it('Should export EMPTY_MARGIN', function () {
5 | expect(GeoChartSizing.EMPTY_MARGIN).toHaveProperty('top')
6 | expect(GeoChartSizing.EMPTY_MARGIN).toHaveProperty('right')
7 | expect(GeoChartSizing.EMPTY_MARGIN).toHaveProperty('bottom')
8 | expect(GeoChartSizing.EMPTY_MARGIN).toHaveProperty('left')
9 | })
10 | })
11 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoCircle.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoCircle from '@/elements/GeoCircle/GeoCircle.vue'
3 |
4 | describe('GeoCircle', () => {
5 | it('Should render', function () {
6 | const wrapper = mount(GeoCircle)
7 | expect(wrapper.find('.geo-circle').exists()).toBe(true)
8 | })
9 |
10 | it('Should use proper variant', function () {
11 | const wrapper = mount(GeoCircle, {
12 | propsData: {
13 | variant: 'primary'
14 | }
15 | })
16 |
17 | expect(wrapper.find('.geo-primary-circle').exists()).toBe(true)
18 | })
19 | })
20 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoHorizontalLayout/GeoHorizontalLayout.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoHorizontalLayout from '@/elements/GeoHorizontalLayout/GeoHorizontalLayout.vue'
3 |
4 | describe('GeoHorizontalLayout', function () {
5 | it('Should render GeoHorizontalLayout component', function () {
6 | const wrapper = mount(GeoHorizontalLayout)
7 | expect(wrapper.find('.geo-horizontal-layout').exists()).toBe(true)
8 | })
9 |
10 | it('Should render default slot', function () {
11 | const wrapper = mount(GeoHorizontalLayout, {
12 | slots: {
13 | default: ['Just some unique demo content ']
14 | }
15 | })
16 | expect(wrapper.find('.my-demo-content').exists()).toBe(true)
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoInput/GeoInputLabel.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoInputLabel from '@/elements/GeoInput/GeoInputLabel.vue'
3 |
4 | describe('GeoInputLabel', () => {
5 | it('Should render', function () {
6 | const wrapper = mount(GeoInputLabel)
7 | expect(wrapper.find('.geo-input-label').exists()).toBe(true)
8 | })
9 | })
10 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoInput/GeoInputMessage.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoInputMessage from '@/elements/GeoInput/GeoInputMessage.vue'
3 |
4 | describe('GeoInputMessage', () => {
5 | it('Should render', function () {
6 | const wrapper = mount(GeoInputMessage)
7 | expect(wrapper.find('.geo-input-message').exists()).toBe(true)
8 | })
9 |
10 | it('Should render with variant', function () {
11 | const wrapper = mount(GeoInputMessage, {
12 | context: {
13 | props: {
14 | variant: 'error'
15 | }
16 | }
17 | })
18 |
19 | expect(wrapper.find('.geo-input-message--error').exists()).toBe(true)
20 | })
21 |
22 | it('Should check variant validator is correct', () => {
23 | const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
24 |
25 | const variant = GeoInputMessage.props.variant
26 | expect(variant.validator(undefined)).toBeTruthy()
27 | expect(variant.validator('success')).toBeTruthy()
28 | expect(variant.validator('test')).toBeFalsy()
29 | expect(consoleWarnSpy).toHaveBeenCalledTimes(1)
30 | })
31 | })
32 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoInput/GeoInputPrefix.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoInputPrefix from '@/elements/GeoInput/GeoInputPrefix.vue'
3 |
4 | describe('GeoInputPrefix', function () {
5 | it('Should render', function () {
6 | const wrapper = mount(GeoInputPrefix)
7 | expect(wrapper.find('.geo-input-prefix').exists()).toBe(true)
8 | })
9 |
10 | it('Should render default slot when provided', function () {
11 | const wrapper = mount(GeoInputPrefix, {
12 | slots: {
13 | default: 'Prefix
'
14 | }
15 | })
16 | expect(wrapper.find('.my-prefix').exists()).toBe(true)
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoInput/GeoInputSuffix.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoInputSuffix from '@/elements/GeoInput/GeoInputSuffix.vue'
3 |
4 | describe('GeoInputSuffix', function () {
5 | it('Should render', function () {
6 | const wrapper = mount(GeoInputSuffix)
7 | expect(wrapper.find('.geo-input-suffix').exists()).toBe(true)
8 | })
9 |
10 | it('Should render default slot when provided', function () {
11 | const wrapper = mount(GeoInputSuffix, {
12 | slots: {
13 | default: 'Suffix
'
14 | }
15 | })
16 | expect(wrapper.find('.my-suffix').exists()).toBe(true)
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoList/GeoListClearItem.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import GeoListClearItem from '@/elements/GeoList/GeoListClearItem.vue'
3 |
4 | describe('GeoListClearItem', () => {
5 | it('Should render default slot', () => {
6 | const wrapper = mount(GeoListClearItem, {
7 | slots: {
8 | default: ['Some read only entry text ']
9 | }
10 | })
11 |
12 | expect(wrapper.find('.read-only-entry-content').exists()).toBe(true)
13 | expect(wrapper.find('.read-only-entry-content').element.innerHTML).toBe('Some read only entry text')
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoSegmentedControl/GeoSegmentedControl.spec.js:
--------------------------------------------------------------------------------
1 | import { createLocalVue, mount } from '@vue/test-utils'
2 | import GeoSegmentedControl from '@/elements/GeoSegmentedControl/GeoSegmentedControl.vue'
3 |
4 | // create an extended `Vue` constructor
5 | const localVue = createLocalVue()
6 | localVue.component('geo-segmented-control', GeoSegmentedControl)
7 |
8 | describe('GeoSegmentedControlItem', () => {
9 | it('Should render GeoSegmentedControl component', function () {
10 | const wrapper = mount(GeoSegmentedControl)
11 | expect(wrapper.find('.geo-segmented-control').exists()).toBe(true)
12 | })
13 |
14 | it('Should display default slot', function () {
15 | const wrapper = mount(GeoSegmentedControl, {
16 | slots: {
17 | default: 'test'
18 | }
19 | })
20 | expect(wrapper.find('.geo-segmented-control').text()).toBe('test')
21 | })
22 |
23 | it('Should apply an outline style when specified', function () {
24 | const wrapper = mount(GeoSegmentedControl, {
25 | propsData: {
26 | outline: true
27 | }
28 | })
29 | expect(wrapper.find('.geo-segmented-control--outline').exists()).toBe(true)
30 | })
31 | })
32 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoTabBar/GeoTabBar.spec.js:
--------------------------------------------------------------------------------
1 | import { createLocalVue, mount } from '@vue/test-utils'
2 | import GeoTabBar from '@/elements/GeoTabBar/GeoTabBar.vue'
3 |
4 | // create an extended `Vue` constructor
5 | const localVue = createLocalVue()
6 | localVue.component('geo-tab-bar', GeoTabBar)
7 |
8 | describe('GeoTabBar', () => {
9 | it('Should render tabBar\'s content', function () {
10 | const wrapper = mount(GeoTabBar, {
11 | slots: {
12 | default: 'Some content '
13 | }
14 | })
15 | const tabBar = wrapper.find('.geo-tab-bar-default')
16 | expect(tabBar.exists()).toBe(true)
17 | expect(tabBar.find('span').exists()).toBe(true)
18 | })
19 |
20 | it('Should add CSS varian when given', function () {
21 | const wrapper = mount(GeoTabBar, {
22 | propsData: {
23 | variant: 'modal'
24 | }
25 | })
26 |
27 | expect(wrapper.find('.geo-tab-bar-modal').exists()).toBe(true)
28 | })
29 | })
30 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoTable/GeoTable.spec-utils.js:
--------------------------------------------------------------------------------
1 | // We import in this way because we also import this way in `GeoChart`
2 | import _ from 'lodash'
3 | import * as sinon from 'sinon'
4 |
5 | // These utils require faking timers
6 | jest.useFakeTimers()
7 |
8 | export function stubLodashThrottleFactory () {
9 | const sandbox = sinon.createSandbox()
10 |
11 | return { setup, teardown }
12 |
13 | function setup () {
14 | sandbox.stub(_, 'throttle').returnsArg(0)
15 | }
16 |
17 | function teardown () {
18 | sandbox.restore()
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/test/unit/specs/elements/GeoTable/GeoTableBodyRowCell.spec.js:
--------------------------------------------------------------------------------
1 | import { createLocalVue, mount } from '@vue/test-utils'
2 | import GeoTableBodyRowCell from '@/elements/GeoTable/GeoTableBodyRowCell'
3 |
4 | // create an extended `Vue` constructor
5 | const localVue = createLocalVue()
6 | localVue.component('geo-table-body-row-cell', GeoTableBodyRowCell)
7 |
8 | describe('GeoTableBodyRowCell', () => {
9 | it('Should render component', function () {
10 | const wrapper = mount(GeoTableBodyRowCell, {
11 | scopedSlots: {
12 | default () { }
13 | }
14 | })
15 |
16 | const instance = wrapper.find('.geo-table-body-row-cell')
17 | expect(instance.exists()).toBe(true)
18 | })
19 |
20 | it('Should render content', function () {
21 | const wrapper = mount(GeoTableBodyRowCell, {
22 | slots: {
23 | default: 'Demo content
'
24 | }
25 | })
26 |
27 | const instance = wrapper.find('.geo-table-body-row-cell')
28 | expect(instance.exists()).toBe(true)
29 | expect(instance.text()).toEqual('Demo content')
30 | })
31 | })
32 |
--------------------------------------------------------------------------------
/test/unit/specs/utils/counterFactory.spec.js:
--------------------------------------------------------------------------------
1 | import counterFactory from 'src/utils/counterFactory.js'
2 |
3 | describe('counterFactory.js', () => {
4 | let counter
5 |
6 | beforeEach(() => {
7 | counter = counterFactory()
8 | })
9 |
10 | it('Should return a function', () => {
11 | expect(counter).toEqual(expect.any(Function))
12 | })
13 |
14 | it('Should return 0 on first tick', () => {
15 | expect(counter()).toBe(0)
16 | })
17 |
18 | it('Should increase counter on 1 on each tick', () => {
19 | expect(counter()).toBe(0)
20 | expect(counter()).toBe(1)
21 | expect(counter()).toBe(2)
22 | })
23 | })
24 |
--------------------------------------------------------------------------------
/test/unit/specs/utils/getDOMElementOffset.spec.js:
--------------------------------------------------------------------------------
1 | import getDOMElementOffset from 'src/utils/getDOMElementOffset'
2 | import GeoButton from '@/elements/GeoButton/GeoButton.vue'
3 | import { mount } from '@vue/test-utils'
4 |
5 | describe('getDOMElementOffset.js', () => {
6 | const getBoundingClientRectMock = function () {
7 | return {
8 | top: 100,
9 | left: 200
10 | }
11 | }
12 | const wrapper = mount(GeoButton, { propsData: { type: 'primary' } })
13 | wrapper.getBoundingClientRect = jest.fn(getBoundingClientRectMock)
14 |
15 | it('Should call element\'s getBoundingClientRect', () => {
16 | getDOMElementOffset(wrapper)
17 | expect(wrapper.getBoundingClientRect).toHaveBeenCalled()
18 | })
19 |
20 | it('Should consider page vertical offset', () => {
21 | window.pageYOffset = 400
22 | const returnValue = getDOMElementOffset(wrapper)
23 |
24 | expect(returnValue.top).toBe(500)
25 | })
26 |
27 | it('Should consider page horizontal offset', () => {
28 | window.pageXOffset = 100
29 | const returnValue = getDOMElementOffset(wrapper)
30 |
31 | expect(returnValue.left).toBe(300)
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/test/unit/specs/utils/isServer.spec.js:
--------------------------------------------------------------------------------
1 | import isServer from 'src/utils/isServer'
2 |
3 | describe('isServer.js', () => {
4 | it('Should return true when $isServer is true', () => {
5 | const vNode = {
6 | componentInstance: {
7 | $isServer: true
8 | }
9 | }
10 | const isServerResult = isServer(vNode)
11 |
12 | expect(isServerResult).toBe(true)
13 | })
14 |
15 | it('Should return false when $isServer is false', () => {
16 | const vNode = {
17 | componentInstance: {
18 | $isServer: false
19 | }
20 | }
21 | const isServerResult = isServer(vNode)
22 |
23 | expect(isServerResult).toBe(false)
24 | })
25 |
26 | it('Should not throw error when componentInstance is undefined', () => {
27 | const vNode = {}
28 | const isServerResult = isServer(vNode)
29 |
30 | expect(isServerResult).toBe(undefined)
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/test/unit/specs/utils/throttle.spec.js:
--------------------------------------------------------------------------------
1 | import throttle from 'src/utils/throttle'
2 |
3 | describe('throttle.js', () => {
4 | const mockFn = jest.fn()
5 | const throttleCallback = throttle(mockFn)
6 |
7 | beforeEach(() => {
8 | mockFn.mockClear()
9 | })
10 |
11 | it('Should return a function', () => {
12 | expect(throttleCallback).toEqual(expect.any(Function))
13 | })
14 |
15 | it('Should be called once when run consecutively', () => {
16 | throttleCallback()
17 | throttleCallback()
18 |
19 | expect(mockFn).toHaveBeenCalledTimes(1)
20 | })
21 |
22 | it('Should be called more than once when there is some delay between calls', (done) => {
23 | throttleCallback()
24 | setTimeout(function () {
25 | throttleCallback()
26 | expect(mockFn).toHaveBeenCalledTimes(2)
27 | done()
28 | }, 11)
29 | })
30 | })
31 |
--------------------------------------------------------------------------------
/test/unit/utils/FontAwesomeIconMock.js:
--------------------------------------------------------------------------------
1 | export const FontAwesomeIconMock = {
2 | props: ['icon'],
3 | template: '
'
4 | }
5 |
6 | export function expectFontAwesomeIconProp (elem, icon) {
7 | expect(elem.props().icon).toStrictEqual(icon)
8 | }
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "checkJs": true,
5 | "moduleResolution": "node",
6 | "baseUrl": ".",
7 | "noEmit": true,
8 | "target": "es2015",
9 | "resolveJsonModule": true
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/vue-shims.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 | import Vue from "vue"
3 | export default Vue
4 | }
5 |
--------------------------------------------------------------------------------