} 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 |
12 |
7 |
--------------------------------------------------------------------------------
/src/elements/GeoCompactButton/GeoDangerCompactButton.vue:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/elements/GeoFeedbackBox/GeoInfoFeedbackBox.vue:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 | Element 1
7 | Element 2
8 | Element 3
9 |
10 |
11 |
13 | ```
14 |
--------------------------------------------------------------------------------
/src/elements/GeoHorizontalLayout/GeoHorizontalLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/src/elements/GeoInput/GeoInputLabel.examples.md:
--------------------------------------------------------------------------------
1 | ```jsx live
2 |
3 |
4 |
5 | Label
6 |
7 |
8 |
2 |
11 |
12 |
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 |
17 |
18 |
19 | This is a success message
20 |
21 |
22 |
29 |
30 |
31 | This is an error message
32 |
33 |
34 |
5 |
9 |
10 | meters
11 |
12 |
13 |
20 |
24 |
25 |
30 |
31 |
2 |
3 |
4 |
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 |
20 |
24 |
25 |
30 |
31 |
2 |
3 |
4 |
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 |
2 |
3 |
4 |
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 |
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 |
17 |
18 |
19 | Some text for the marquee
20 |
21 |
22 |
29 |
30 |
31 | Some text for the marquee
32 |
33 |
34 |
41 |
42 |
43 | Some text
44 |
45 |
46 |
5 |
6 |
7 |
12 | Notification message about something important.
13 |
14 |
15 |
16 |
23 |
24 |
25 |
30 | Notification message about something important.
31 | Button
32 |
33 |
34 |
35 |
5 |
6 | Pill's content
7 |
8 |
15 |
16 | Pill's content
17 |
18 |
25 |
26 | Pill's content
27 |
28 |
35 |
36 | Pill's content
37 |
38 |
45 |
46 | Pill's content
47 |
48 |
2 |
3 |
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 |
15 |
16 |
44 | ```
45 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoDangerSegmentedControlItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
18 |
19 |
20 |
39 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoInfoSegmentedControlItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
18 |
19 |
20 |
37 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoSegmentedControl.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
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 |
18 |
19 |
20 |
37 |
--------------------------------------------------------------------------------
/src/elements/GeoSegmentedControl/GeoWarningSegmentedControlItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
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 |
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 |
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 |
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 |
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 |
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 |
8 |
9 |
10 |
11 | Table is empty!
12 |
13 |
14 |
15 |
2 |
10 |
11 |
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 |
5 |
--------------------------------------------------------------------------------
/src/elements/GeoVerticalLayout/GeoVerticalLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
10 |
11 |
13 |
14 |
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 |
--------------------------------------------------------------------------------