From cb773eb2ce77880bcad68bbff5f3545a9dc1b3c5 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Mon, 14 Jan 2019 13:57:52 +0100 Subject: [PATCH 01/21] Upgrade Styleguide --- components/Author.vue | 2 +- components/FollowButton.vue | 2 +- pages/login.vue | 8 +- pages/logout.vue | 6 +- styleguide/package.json | 1 + .../src/styleguide/components/CodeExample.vue | 6 +- .../styleguide/components/ComponentDoc.vue | 5 +- .../components/ComponentOptionsDoc.vue | 193 ++++++++--- .../src/styleguide/components/Navigation.vue | 45 ++- styleguide/src/styleguide/router/index.js | 8 +- .../data-display/CopyField/CopyField.vue | 2 +- .../CopyField/__snapshots__/spec.js.snap | 2 +- .../components/data-display/CopyField/demo.md | 2 +- .../components/data-display/List/style.scss | 2 - .../components/data-display/Table/Table.vue | 4 +- .../data-display/Table/TableCol.vue | 2 +- .../data-display/Table/TableHeadCol.vue | 2 +- .../components/data-input/Form/Form.vue | 139 ++++++++ .../system/components/data-input/Form/demo.md | 130 +++++++ .../components/data-input/Form/style.scss | 0 .../data-input/FormItem/FormItem.vue | 5 +- .../data-input/FormItem/InputError.vue | 0 .../data-input/FormItem/InputLabel.vue | 0 .../components/data-input/FormItem/style.scss | 0 .../components/data-input/Input/Input.vue | 19 +- .../components/data-input/Input/demo.md | 0 .../components/data-input/Input/style.scss | 0 .../components/data-input/Radio/Radio.vue | 123 +++++++ .../components/data-input/Radio/demo.md | 74 ++++ .../components/data-input/Radio/style.scss | 56 ++++ .../components/data-input/Select/Select.vue | 129 +++++-- .../Select/__snapshots__/spec.js.snap | 0 .../components/data-input/Select/demo.md | 13 +- .../components/data-input/Select/spec.js | 6 +- .../components/data-input/Select/style.scss | 21 +- .../components/data-input/shared/input.js | 20 +- .../components/data-input/shared/input.scss | 36 +- .../data-input/shared/multiinput.js | 10 +- styleguide/src/system/components/index.js | 1 - .../system/components/layout/Card/Card.vue | 37 +- .../system/components/layout/Card/style.scss | 17 + .../components/layout/Container/Container.vue | 17 +- .../components/layout/Container/style.scss | 4 +- .../system/components/layout/Flex/Flex.vue | 10 +- .../components/layout/Flex/FlexItem.vue | 9 +- .../system/components/layout/Page/Page.vue | 1 - .../system/components/layout/Space/Space.vue | 2 +- .../system/components/layout/Space/style.scss | 3 + .../components/layout/Spinner/Spinner.vue | 70 ++++ .../system/components/layout/Spinner/demo.md | 21 ++ .../components/layout/Spinner/style.scss | 59 ++++ .../components/navigation/Button/Button.vue | 46 +-- .../components/navigation/Button/demo.md | 20 +- .../components/navigation/Button/style.scss | 72 +++- .../components/navigation/Menu/MenuItem.vue | 4 - .../components/navigation/Menu/style.scss | 20 +- .../components/typography/Chip/Chip.vue | 5 +- .../system/components/typography/Chip/demo.md | 0 .../components/typography/Chip/style.scss | 10 + .../components/typography/Code/Code.vue | 1 - .../components/typography/Code/style.scss | 1 + .../components/typography/Text/Text.vue | 19 +- .../components/typography/Text/style.scss | 5 + styleguide/src/system/plugins/utils.js | 20 +- styleguide/src/system/styles/core/reset.scss | 3 +- .../src/system/styles/shared/_mixins.scss | 6 +- .../system/tokens/_examples/airbnb/color.yml | 48 ++- .../tokens/_examples/dark-purple/color.yml | 61 +++- .../_examples/digital-ocean/box-shadow.yml | 24 ++ .../tokens/_examples/digital-ocean/color.yml | 316 ++++++++++++++++++ .../tokens/_examples/digital-ocean/font.yml | 25 ++ .../tokens/_examples/discord/box-shadow.yml | 24 ++ .../system/tokens/_examples/discord/color.yml | 316 ++++++++++++++++++ .../system/tokens/_examples/discord/font.yml | 25 ++ .../src/system/tokens/_examples/vue/color.yml | 54 ++- styleguide/src/system/tokens/color.yml | 2 +- 76 files changed, 2126 insertions(+), 325 deletions(-) create mode 100644 styleguide/src/system/components/data-input/Form/Form.vue create mode 100644 styleguide/src/system/components/data-input/Form/demo.md create mode 100644 styleguide/src/system/components/data-input/Form/style.scss mode change 100755 => 100644 styleguide/src/system/components/data-input/FormItem/FormItem.vue mode change 100755 => 100644 styleguide/src/system/components/data-input/FormItem/InputError.vue mode change 100755 => 100644 styleguide/src/system/components/data-input/FormItem/InputLabel.vue mode change 100755 => 100644 styleguide/src/system/components/data-input/FormItem/style.scss mode change 100755 => 100644 styleguide/src/system/components/data-input/Input/demo.md mode change 100755 => 100644 styleguide/src/system/components/data-input/Input/style.scss create mode 100644 styleguide/src/system/components/data-input/Radio/Radio.vue create mode 100644 styleguide/src/system/components/data-input/Radio/demo.md create mode 100644 styleguide/src/system/components/data-input/Radio/style.scss mode change 100755 => 100644 styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap mode change 100755 => 100644 styleguide/src/system/components/data-input/Select/demo.md mode change 100755 => 100644 styleguide/src/system/components/data-input/Select/spec.js mode change 100755 => 100644 styleguide/src/system/components/data-input/Select/style.scss mode change 100755 => 100644 styleguide/src/system/components/data-input/shared/input.scss mode change 100755 => 100644 styleguide/src/system/components/data-input/shared/multiinput.js create mode 100644 styleguide/src/system/components/layout/Spinner/Spinner.vue create mode 100644 styleguide/src/system/components/layout/Spinner/demo.md create mode 100644 styleguide/src/system/components/layout/Spinner/style.scss mode change 100755 => 100644 styleguide/src/system/components/typography/Chip/Chip.vue mode change 100755 => 100644 styleguide/src/system/components/typography/Chip/demo.md mode change 100755 => 100644 styleguide/src/system/components/typography/Chip/style.scss create mode 100644 styleguide/src/system/tokens/_examples/digital-ocean/box-shadow.yml create mode 100644 styleguide/src/system/tokens/_examples/digital-ocean/color.yml create mode 100644 styleguide/src/system/tokens/_examples/digital-ocean/font.yml create mode 100644 styleguide/src/system/tokens/_examples/discord/box-shadow.yml create mode 100644 styleguide/src/system/tokens/_examples/discord/color.yml create mode 100644 styleguide/src/system/tokens/_examples/discord/font.yml diff --git a/components/Author.vue b/components/Author.vue index 377b74b7f..c9b5ecec8 100644 --- a/components/Author.vue +++ b/components/Author.vue @@ -100,7 +100,7 @@ /> - + diff --git a/components/FollowButton.vue b/components/FollowButton.vue index 04818dc94..3540726d2 100644 --- a/components/FollowButton.vue +++ b/components/FollowButton.vue @@ -4,7 +4,7 @@ :loading="loading" icon="plus" primary - full-width + fullwidth @click.prevent="follow" > Folgen diff --git a/pages/login.vue b/pages/login.vue index bb065f8c9..36829e0ee 100644 --- a/pages/login.vue +++ b/pages/login.vue @@ -17,7 +17,7 @@ @@ -70,7 +70,7 @@
@@ -85,6 +86,7 @@ ${code} border: $border-size-base solid $border-color-softer; padding: $space-base; margin-bottom: $space-small; + overflow: visible; .vuep-iframe & { padding: 0; @@ -163,4 +165,4 @@ $codemirror-primary: $color-primary; color: $text-color-softer; } } - + \ No newline at end of file diff --git a/styleguide/src/styleguide/components/ComponentDoc.vue b/styleguide/src/styleguide/components/ComponentDoc.vue index 12e6109f0..5ec16ab66 100644 --- a/styleguide/src/styleguide/components/ComponentDoc.vue +++ b/styleguide/src/styleguide/components/ComponentDoc.vue @@ -95,10 +95,11 @@ export default { }) }, docParts() { - if (!this.component.docs) { + const component = this.component.component + if (!component.__docs) { return [] } - const parts = this.component.docs.split('```') + const parts = component.__docs.split('```') let i = 0 const parsed = parts.reduce((result, part, index) => { if (index % 2 === 0) { diff --git a/styleguide/src/styleguide/components/ComponentOptionsDoc.vue b/styleguide/src/styleguide/components/ComponentOptionsDoc.vue index 87e82f1ad..9c262a474 100644 --- a/styleguide/src/styleguide/components/ComponentOptionsDoc.vue +++ b/styleguide/src/styleguide/components/ComponentOptionsDoc.vue @@ -2,44 +2,99 @@
{{ component.name | componentName }} Props - - - - @@ -57,8 +112,7 @@ export default { return { propFields: { name: { - label: 'Name', - width: '20%' + label: 'Name' }, type: { label: 'Type', @@ -67,8 +121,7 @@ export default { default: { label: 'Default', width: '20%' - }, - description: 'Description' + } }, slotFields: { name: { @@ -91,34 +144,68 @@ export default { if (!this.component.props) { return null } - return Object.keys(this.component.props).map(name => { - return { - name, - ...this.component.props[name] - } - }) + return Object.keys(this.component.props) + .map(name => { + return this.getPropAttributes(name, this.component.props[name]) + }) + .sort((a, b) => { + return a.name.localeCompare(b.name) + }) }, componentSlots() { if (!this.component.slots) { return null } - return Object.keys(this.component.slots).map(name => { - return { - name: (name.match(/[^/"\\]+/g) || []).join(''), - ...this.component.slots[name] - } - }) + return Object.keys(this.component.slots) + .map(name => { + return { + name: (name.match(/[^/"\\]+/g) || []).join(''), + ...this.component.slots[name] + } + }) + .sort((a, b) => { + return a.name.localeCompare(b.name) + }) }, componentEvents() { if (!this.component.events) { return null } - return Object.keys(this.component.events).map(name => { - return { - name, - ...this.component.events[name] - } - }) + return Object.keys(this.component.events) + .map(name => { + return { + name, + ...this.component.events[name] + } + }) + .sort((a, b) => { + return a.name.localeCompare(b.name) + }) + } + }, + methods: { + getPropAttributes(name, oldAttributes) { + const attributes = { + name, + ...oldAttributes, + ...this.getAttributesFromComment(oldAttributes.comment) + } + if (attributes.type && attributes.type.name) { + attributes.types = attributes.type.name.split('|') + } + return attributes + }, + getAttributesFromComment(comment) { + const attributes = {} + const optionsMatch = comment.match(/@options[ ]+(\S[ \S]*)\n/) + if (optionsMatch) { + attributes.options = optionsMatch[1].split('|') + } + const defaultMatch = comment.match(/@default[ ]+(\S[ \S]*)\n/) + if (defaultMatch) { + attributes.default = defaultMatch[1] + } + return attributes } } } diff --git a/styleguide/src/styleguide/components/Navigation.vue b/styleguide/src/styleguide/components/Navigation.vue index 3935d9403..2cbdfedf0 100644 --- a/styleguide/src/styleguide/components/Navigation.vue +++ b/styleguide/src/styleguide/components/Navigation.vue @@ -1,5 +1,12 @@ @@ -21,6 +21,5 @@ export default { } - diff --git a/styleguide/src/system/components/data-input/FormItem/InputError.vue b/styleguide/src/system/components/data-input/FormItem/InputError.vue old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/FormItem/InputLabel.vue b/styleguide/src/system/components/data-input/FormItem/InputLabel.vue old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/FormItem/style.scss b/styleguide/src/system/components/data-input/FormItem/style.scss old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/Input/Input.vue b/styleguide/src/system/components/data-input/Input/Input.vue index 22b7cbb42..6fb3d6eca 100755 --- a/styleguide/src/system/components/data-input/Input/Input.vue +++ b/styleguide/src/system/components/data-input/Input/Input.vue @@ -13,7 +13,7 @@ iconRight && `ds-input-has-icon-right` ]" :id="id" - :name="name" + :name="name ? name : model" :type="type" :autofocus="autofocus" :placeholder="placeholder" @@ -48,7 +48,8 @@ export default { mixins: [inputMixin], props: { /** - * The type of this input `url, text, password, email, search, textarea`. + * The type of this input. + * @options url|text|password|email|search|textarea */ type: { type: String, @@ -64,13 +65,6 @@ export default { type: String, default: null }, - /** - * The name of the field for better accessibility - */ - name: { - type: String, - default: null - }, /** * Whether the input should be automatically focused */ @@ -78,13 +72,6 @@ export default { type: Boolean, default: false }, - /** - * Whether the input should be read-only - */ - readonly: { - type: Boolean, - default: false - }, /** * How many rows this input should have (only for type="textarea") */ diff --git a/styleguide/src/system/components/data-input/Input/demo.md b/styleguide/src/system/components/data-input/Input/demo.md old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/Input/style.scss b/styleguide/src/system/components/data-input/Input/style.scss old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/Radio/Radio.vue b/styleguide/src/system/components/data-input/Radio/Radio.vue new file mode 100644 index 000000000..06524f98d --- /dev/null +++ b/styleguide/src/system/components/data-input/Radio/Radio.vue @@ -0,0 +1,123 @@ + + + + + + + diff --git a/styleguide/src/system/components/data-input/Radio/demo.md b/styleguide/src/system/components/data-input/Radio/demo.md new file mode 100644 index 000000000..7f9c8f59c --- /dev/null +++ b/styleguide/src/system/components/data-input/Radio/demo.md @@ -0,0 +1,74 @@ +## Basic usage + +``` + +``` + +## Usage with label + +``` + +``` + +## Bind to a value + +Use v-model to bind a value to the select input. + +``` + + +``` + +## Style variations + +``` + +``` + +## Validation + +We use async-validator schemas for validation. + +If you need to validate more than one field it is better to use the form component. + +``` + + +``` diff --git a/styleguide/src/system/components/data-input/Radio/style.scss b/styleguide/src/system/components/data-input/Radio/style.scss new file mode 100644 index 000000000..39c4a8c29 --- /dev/null +++ b/styleguide/src/system/components/data-input/Radio/style.scss @@ -0,0 +1,56 @@ +.ds-radio { + outline: none; + + .ds-input-is-disabled &, + &:disabled { + color: $text-color-disabled; + opacity: $opacity-disabled; + pointer-events: none; + cursor: not-allowed; + } +} + +.ds-radio-option { + &:not(.ds-button) { + @include inline-space($space-small); + } + display: inline-flex; + align-items: center; + cursor: pointer; + user-select: none; +} + +.ds-radio-option-mark { + display: inline-block; + position: relative; + width: $font-size-base; + height: $font-size-base; + border: $input-border-size solid $border-color-base; + background-color: $background-color-base; + border-radius: $border-radius-circle; + margin-right: $space-xx-small; + + &:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%) scale(0); + opacity: 0; + width: $font-size-x-small; + height: $font-size-x-small; + border-radius: $border-radius-circle; + background-color: $text-color-primary; + transition: all $duration-short $ease-in-sharp; + + .ds-radio-option-is-selected & { + opacity: 1; + transform: translateY(-50%) translateX(-50%) scale(1); + } + } +} + +.ds-radio-option-label { + font-size: $font-size-base; + cursor: pointer; +} \ No newline at end of file diff --git a/styleguide/src/system/components/data-input/Select/Select.vue b/styleguide/src/system/components/data-input/Select/Select.vue index e615dd6ea..382e328d1 100755 --- a/styleguide/src/system/components/data-input/Select/Select.vue +++ b/styleguide/src/system/components/data-input/Select/Select.vue @@ -2,8 +2,12 @@
+ :key="value[labelProp] || value"> - {{ value }} + color="primary" + :size="size"> + {{ value[labelProp] || value }}
+ + + {{ innerValue[labelProp] || innerValue }} +
{{ placeholder }}
- - - {{ innerValue }} -
-
    +
    + {{ noOptionsAvailable }} +
    +
    + {{ noOptionsFound }} "{{ searchString }}" +
    +
    • + :key="option[labelProp] || option"> - {{ option.label || option }} + {{ option[labelProp] || option }}
    @@ -132,7 +151,7 @@ import DsChip from '@@/components/typography/Chip/Chip' import DsIcon from '@@/components/typography/Icon/Icon' /** - * Used for handling basic user input. + * Used for letting the user choose values from a set of options. * @version 1.0.0 */ export default { @@ -149,7 +168,8 @@ export default { data() { return { searchString: '', - pointer: 0 + pointer: 0, + isOpen: false } }, props: { @@ -167,13 +187,6 @@ export default { type: Boolean, default: false }, - /** - * Whether the input should be read-only - */ - readonly: { - type: Boolean, - default: false - }, /** * The name of the input's icon. */ @@ -197,12 +210,33 @@ export default { return [] } }, + /** + * The prop to use as the label when options are objects + */ + labelProp: { + type: String, + default: 'label' + }, /** * Whether the options are searchable */ searchable: { type: Boolean, default: true + }, + /** + * Message to show when no options are available + */ + noOptionsAvailable: { + type: String, + default: 'No options available.' + }, + /** + * Message to show when the search result is empty + */ + noOptionsFound: { + type: String, + default: 'No options found for:' } }, computed: { @@ -249,13 +283,22 @@ export default { resetSearch() { this.searchString = '' }, - handleClick() { + openAndFocus() { + this.open() if (!this.focus || this.multiple) { this.$refs.search.focus() this.handleFocus() } }, + open() { + this.resetSearch() + this.isOpen = true + }, close() { + this.isOpen = false + }, + closeAndBlur() { + this.close() this.$refs.search.blur() this.handleBlur() }, @@ -269,6 +312,20 @@ export default { this.deselectOption(this.innerValue.length - 1) } }, + handleKeyUp() { + if (!this.isOpen) { + this.open() + return + } + this.pointerPrev() + }, + handleKeyDown() { + if (!this.isOpen) { + this.open() + return + } + this.pointerNext() + }, setPointer(index) { this.pointer = index }, diff --git a/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap b/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/Select/demo.md b/styleguide/src/system/components/data-input/Select/demo.md old mode 100755 new mode 100644 index c80c9c391..1eae59135 --- a/styleguide/src/system/components/data-input/Select/demo.md +++ b/styleguide/src/system/components/data-input/Select/demo.md @@ -65,7 +65,7 @@ Use the multiple prop to allow the user selecting multiple values. ## Options as objects -Options can be objects with a label and a value property. +Options can be objects. You can define which property to show as the label by defining label-prop. Defaults to "label". ``` + + + + \ No newline at end of file diff --git a/styleguide/src/system/components/layout/Spinner/demo.md b/styleguide/src/system/components/layout/Spinner/demo.md new file mode 100644 index 000000000..dd47915c0 --- /dev/null +++ b/styleguide/src/system/components/layout/Spinner/demo.md @@ -0,0 +1,21 @@ +## Spinning loading indicator + +Multiple sizes + +```html + + + + + +``` + +Inverse color + +```html + + + + + +``` \ No newline at end of file diff --git a/styleguide/src/system/components/layout/Spinner/style.scss b/styleguide/src/system/components/layout/Spinner/style.scss new file mode 100644 index 000000000..9aa1b2c78 --- /dev/null +++ b/styleguide/src/system/components/layout/Spinner/style.scss @@ -0,0 +1,59 @@ +.ds-spinner { + $scale: 40px; + + animation: rotate 16s linear infinite; + position: relative; + display: inline-block; + width: $scale; + height: $scale; + + & .path { + stroke: $text-color-soft; + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; + } + &.ds-spinner-inverse .path { + stroke: $color-primary-inverse; + } + &.ds-spinner-primary .path { + stroke: $text-color-primary; + } + &.ds-spinner-secondary .path { + stroke: $text-color-secondary; + } + &.ds-spinner-danger .path { + stroke: $text-color-danger; + } + + &.ds-size-small { + width: $scale * 0.5; + height: $scale * 0.5; + } + &.ds-size-large { + width: $scale * 1.5; + height: $scale * 1.5; + } + +} + +@keyframes rotate { + 100% { + transform: rotate(2160deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} + diff --git a/styleguide/src/system/components/navigation/Button/Button.vue b/styleguide/src/system/components/navigation/Button/Button.vue index d806a9d6e..10daf3a89 100644 --- a/styleguide/src/system/components/navigation/Button/Button.vue +++ b/styleguide/src/system/components/navigation/Button/Button.vue @@ -10,26 +10,28 @@ ghost && `ds-button-ghost`, iconOnly && `ds-button-icon-only`, hover && `ds-button-hover`, - fullWidth && `ds-button-full-width`, - loading && `ds-button-loading` + fullwidth && `ds-button-fullwidth`, + loading && `ds-button-loading`, + right && `ds-button-right` ]" :name="name" v-bind="bindings" :is="linkTag"> - - - - - - +
    + + + + +
    + @@ -130,16 +132,16 @@ export default { default: null }, /** - * The name of the buttons right icon. + * Put the icon to the right. */ - iconRight: { - type: String, - default: null + right: { + type: Boolean, + default: false }, /** * Should the button spread to the full with of the parent? */ - fullWidth: { + fullwidth: { type: Boolean, default: false }, @@ -166,7 +168,7 @@ export default { return bindings }, iconOnly() { - return !this.$slots.default && this.icon && !this.iconRight + return !this.$slots.default && this.icon } }, methods: { diff --git a/styleguide/src/system/components/navigation/Button/demo.md b/styleguide/src/system/components/navigation/Button/demo.md index 5e1b0f4ae..b98278dc8 100644 --- a/styleguide/src/system/components/navigation/Button/demo.md +++ b/styleguide/src/system/components/navigation/Button/demo.md @@ -4,7 +4,7 @@ Use a primary button to draw the users attention to important actions. Use defau A danger button should be used only for destructive actions. -``` +```html Default Primary Secondary @@ -15,7 +15,7 @@ A danger button should be used only for destructive actions. Use a ghost button for secondary actions. -``` +```html Default Primary Secondary @@ -26,7 +26,7 @@ Use a ghost button for secondary actions. Use different sizes to create hierarchy. -``` +```html Small Base Large @@ -35,15 +35,15 @@ Use different sizes to create hierarchy. ## Button full width -``` -Full Width +```html +Full Width ``` ## Button states A button can take different states. -``` +```html Default state Disabled state Hover state @@ -54,9 +54,9 @@ A button can take different states. Add an icon to a button to help the user identify the button's action. -``` -Click me -Click me +```html +Click me +Click me ``` @@ -65,7 +65,7 @@ Add an icon to a button to help the user identify the button's action. Provide a path to the button. You can pass a url string or a Vue router path object. -``` +```html Click me Click me ``` diff --git a/styleguide/src/system/components/navigation/Button/style.scss b/styleguide/src/system/components/navigation/Button/style.scss index 2646719e3..d125c6592 100644 --- a/styleguide/src/system/components/navigation/Button/style.scss +++ b/styleguide/src/system/components/navigation/Button/style.scss @@ -37,10 +37,25 @@ border-radius: $border-radius-base; // box-shadow: $box-shadow-inset; opacity: 0; - visiblity: hidden; + visibility: hidden; pointer-events: none; } + &:after { + position: absolute; + content: ''; + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; + border-radius: $border-radius-base; + border: 1px dotted currentColor; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: all $duration-short $ease-out; + } + &:focus { outline: none; } @@ -181,7 +196,8 @@ padding: 0; border-radius: $border-radius-rounded; - &:before { + &:before, + &:after { border-radius: $border-radius-rounded; } @@ -202,17 +218,49 @@ line-height: inherit; display: inline-block; white-space: nowrap; - margin: 0 $font-space-small; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } } -.ds-button-full-width { +.ds-button-fullwidth { width: 100%; } + +.ds-button-wrap { + transition: opacity 150ms ease-in-out; + display: flex; + align-items: center; + + & > * { + margin: 0 $font-space-small; + } + & > *:first-child { + margin-left: 0; + } + & > *:last-child { + margin-right: 0; + } + + .ds-button-loading & { + opacity: 0.1; + } +} + +.ds-button-right > .ds-button-wrap { + & > *:first-child { + margin-right: 0; + margin-left: $font-space-small; + } + & > *:last-child { + margin-right: 0; + margin-left: 0; + } +} + +.ds-button-right .ds-button-wrap { + flex-flow: row-reverse; +} + +.ds-button .ds-spinner { + position: absolute; + width: 60% !important; + height: 60% !important; +} diff --git a/styleguide/src/system/components/navigation/Menu/MenuItem.vue b/styleguide/src/system/components/navigation/Menu/MenuItem.vue index 0926d0803..83ce8fa2c 100644 --- a/styleguide/src/system/components/navigation/Menu/MenuItem.vue +++ b/styleguide/src/system/components/navigation/Menu/MenuItem.vue @@ -14,10 +14,6 @@ - + class="ds-chip-close" + tabindex="-1"> diff --git a/styleguide/src/system/components/typography/Chip/demo.md b/styleguide/src/system/components/typography/Chip/demo.md old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/typography/Chip/style.scss b/styleguide/src/system/components/typography/Chip/style.scss old mode 100755 new mode 100644 index f1f96abb7..c8660333d --- a/styleguide/src/system/components/typography/Chip/style.scss +++ b/styleguide/src/system/components/typography/Chip/style.scss @@ -6,11 +6,16 @@ font-family: $font-family-text; line-height: $line-height-base; padding: $space-xx-small $space-x-small; + margin-right: $font-space-xx-small; border-radius: $border-radius-base; font-weight: $font-weight-bold; color: $text-color-base; background-color: $background-color-softest; + &:last-child { + margin-right: 0; + } + &.ds-chip-removable { padding-right: $space-x-small + $space-small; } @@ -47,14 +52,19 @@ .ds-chip-size-base { font-size: $font-size-small; + padding-left: $space-small * 0.9; + padding-right: $space-small * 0.9; } .ds-chip-size-small { font-size: $font-size-x-small; + padding: $space-xxx-small $space-x-small * 1.2; } .ds-chip-size-large { font-size: $font-size-base; + padding-left: $space-small; + padding-right: $space-small; } .ds-chip-close { diff --git a/styleguide/src/system/components/typography/Code/Code.vue b/styleguide/src/system/components/typography/Code/Code.vue index 57d2e5265..be9fe5d6b 100644 --- a/styleguide/src/system/components/typography/Code/Code.vue +++ b/styleguide/src/system/components/typography/Code/Code.vue @@ -3,7 +3,6 @@ class="ds-code" :is="inline ? 'code' : 'pre'" :class="[ - size && `ds-code-size-${size}`, inline && `ds-code-inline` ]" > diff --git a/styleguide/src/system/components/typography/Code/style.scss b/styleguide/src/system/components/typography/Code/style.scss index 7fce31059..5ae7acc7c 100644 --- a/styleguide/src/system/components/typography/Code/style.scss +++ b/styleguide/src/system/components/typography/Code/style.scss @@ -12,6 +12,7 @@ .ds-code-inline { display: inline-block; padding: $space-xxx-small $space-x-small; + margin-bottom: 0; } .ds-code-size-small { diff --git a/styleguide/src/system/components/typography/Text/Text.vue b/styleguide/src/system/components/typography/Text/Text.vue index c1da4adfd..6d09c83f1 100644 --- a/styleguide/src/system/components/typography/Text/Text.vue +++ b/styleguide/src/system/components/typography/Text/Text.vue @@ -6,6 +6,7 @@ size && `ds-text-size-${size}`, color && `ds-text-${color}`, bold && `ds-text-bold`, + inline && `ds-text-inline`, align && `ds-text-${align}`, uppercase && `ds-text-uppercase` ]" @@ -36,7 +37,7 @@ export default { props: { /** * The color used for the text. - * `default, soft, softer, primary, inverse, success, warning, danger` + * @options default|soft|softer|primary|inverse|success|warning|danger */ color: { type: String, @@ -54,9 +55,19 @@ export default { type: Boolean, default: null }, + /** + * Whether the text is inline. + * @default false + */ + inline: { + type: Boolean, + default() { + return !!this.$parentText + } + }, /** * The size used for the text. - * `small, base, large, x-large` + * @options small|base|large|x-large|xx-large|xxx-large */ size: { type: String, @@ -66,12 +77,12 @@ export default { } }, /** - * The html element name used for the text. + * The html tag used for the text. */ tag: { type: String, default() { - return this.$parentText ? 'span' : 'p' + return this.inline ? 'span' : 'p' } }, /** diff --git a/styleguide/src/system/components/typography/Text/style.scss b/styleguide/src/system/components/typography/Text/style.scss index c00524dea..39aaca02c 100644 --- a/styleguide/src/system/components/typography/Text/style.scss +++ b/styleguide/src/system/components/typography/Text/style.scss @@ -3,12 +3,17 @@ @include stack-space($font-space-x-large); font-family: $font-family-text; line-height: $line-height-base; + display: block; } .ds-text-bold { font-weight: $font-weight-bold; } +.ds-text-inline { + display: inline; +} + .ds-text-left { text-align: left; } diff --git a/styleguide/src/system/plugins/utils.js b/styleguide/src/system/plugins/utils.js index a09921a2f..09b5c31ed 100644 --- a/styleguide/src/system/plugins/utils.js +++ b/styleguide/src/system/plugins/utils.js @@ -1,25 +1,11 @@ +import copy from 'clipboard-copy' + export default { install(Vue) { Vue.mixin({ methods: { $copyToClipboard(content) { - const el = document.createElement('textarea') - el.value = content - el.setAttribute('readonly', '') - el.style.position = 'absolute' - el.style.left = '-9999px' - document.body.appendChild(el) - const selected = - document.getSelection().rangeCount > 0 - ? document.getSelection().getRangeAt(0) - : false - el.select() - document.execCommand('copy') - document.body.removeChild(el) - if (selected) { - document.getSelection().removeAllRanges() - document.getSelection().addRange(selected) - } + return copy(content) } } }) diff --git a/styleguide/src/system/styles/core/reset.scss b/styleguide/src/system/styles/core/reset.scss index 9e9205932..d4a556aa9 100644 --- a/styleguide/src/system/styles/core/reset.scss +++ b/styleguide/src/system/styles/core/reset.scss @@ -35,6 +35,7 @@ input::-ms-clear, input::-ms-reveal { html { font-family: sans-serif; // 2 + font-size: $font-size-body; line-height: 1.15; // 3 -webkit-text-size-adjust: 100%; // 4 -ms-text-size-adjust: 100%; // 4 @@ -63,7 +64,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: $text-color-base; - background-color: $background-color-softer; // 2 + background-color: $background-color-base; // 2 } // Suppress the focus outline on elements that cannot be accessed via keyboard. diff --git a/styleguide/src/system/styles/shared/_mixins.scss b/styleguide/src/system/styles/shared/_mixins.scss index 922577750..2e8dcf1fc 100644 --- a/styleguide/src/system/styles/shared/_mixins.scss +++ b/styleguide/src/system/styles/shared/_mixins.scss @@ -2,11 +2,15 @@ --------------------------------------------- */ /* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES + @param {Number} $responsive - Viewport-based size @param {Number} $min - Minimum font size (px) @param {Number} $max - Maximum font size (px) (optional) + @param {Number} $fallback - Fallback for viewport-based units (optional) + @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback: + @include responsive-font(5vw, 35px, 150px, 50px); */ @mixin responsive-font($responsive, $min, $max: false, $fallback: false) { @@ -126,4 +130,4 @@ border-bottom-left-radius: $size; border-bottom-right-radius: $size; } -} +} \ No newline at end of file diff --git a/styleguide/src/system/tokens/_examples/airbnb/color.yml b/styleguide/src/system/tokens/_examples/airbnb/color.yml index c828c36cb..d7cc39a07 100644 --- a/styleguide/src/system/tokens/_examples/airbnb/color.yml +++ b/styleguide/src/system/tokens/_examples/airbnb/color.yml @@ -132,11 +132,11 @@ props: category: text-color - name: text-color-link - value: *color-secondary + value: *color-primary category: text-color - name: text-color-link-active - value: *color-secondary-active + value: *color-primary-active category: text-color - name: text-color-primary @@ -147,6 +147,14 @@ props: value: *color-primary-inverse category: text-color + - name: text-color-secondary + value: *color-secondary + category: text-color + + - name: text-color-secondary-inverse + value: *color-secondary-inverse + category: text-color + - name: text-color-success value: *color-success category: text-color @@ -176,11 +184,15 @@ props: value: *color-neutral-100 category: background-color + - name: background-color-soft + value: *color-neutral-95 + category: background-color + - name: background-color-softer value: *color-neutral-90 category: background-color - - name: background-color-soft + - name: background-color-softer-active value: *color-neutral-95 category: background-color @@ -192,20 +204,20 @@ props: value: *color-neutral-90 category: background-color - - name: background-color-inverse-softer - value: *color-neutral-20 - category: background-color - - - name: background-color-inverse-softer-active - value: *color-neutral-30 + - name: background-color-inverse + value: *color-neutral-0 category: background-color - name: background-color-inverse-soft value: *color-neutral-10 category: background-color - - name: background-color-inverse - value: *color-neutral-0 + - name: background-color-inverse-softer + value: *color-neutral-20 + category: background-color + + - name: background-color-inverse-softer-active + value: *color-neutral-30 category: background-color - name: background-color-primary @@ -220,6 +232,18 @@ props: value: *color-primary-inverse category: background-color + - name: background-color-secondary + value: *color-secondary + category: background-color + + - name: background-color-secondary-active + value: *color-secondary-active + category: background-color + + - name: background-color-secondary-inverse + value: *color-secondary-inverse + category: background-color + - name: background-color-success value: *color-success category: background-color @@ -270,7 +294,7 @@ props: category: border-color - name: border-color-active - value: *color-secondary + value: *color-primary category: border-color - name: border-color-primary diff --git a/styleguide/src/system/tokens/_examples/dark-purple/color.yml b/styleguide/src/system/tokens/_examples/dark-purple/color.yml index 0eeaedb43..3894d8114 100644 --- a/styleguide/src/system/tokens/_examples/dark-purple/color.yml +++ b/styleguide/src/system/tokens/_examples/dark-purple/color.yml @@ -34,7 +34,7 @@ props: # # Color Choices # - # Set definite color choices here. + # Set color choices here. # Use different lightness variations of the base hues. # # Light theme: darkest color | Dark theme: lightest color @@ -73,33 +73,40 @@ props: - name: color-primary-inverse value: &color-primary-inverse "hsla({!teal}, 5%, 1)" + - name: color-secondary + value: &color-secondary "hsla({!purple}, 45%, 1)" + - name: color-secondary-active + value: &color-secondary-active "hsla({!purple}, 52%, 1)" + - name: color-secondary-inverse + value: &color-secondary-inverse "hsla({!purple}, 97%, 1)" + - name: color-success value: &color-success "hsla({!green}, 40%, 1)" - name: color-success-active value: &color-success-active "hsla({!green}, 45%, 1)" - name: color-success-inverse - value: &color-success-inverse "hsla({!green}, 5%, 1)" + value: &color-success-inverse "hsla({!green}, 97%, 1)" - name: color-danger value: &color-danger "hsla({!red}, 50%, 1)" - name: color-danger-active value: &color-danger-active "hsla({!red}, 56%, 1)" - name: color-danger-inverse - value: &color-danger-inverse "hsla({!red}, 5%, 1)" + value: &color-danger-inverse "hsla({!red}, 97%, 1)" - name: color-warning value: &color-warning "hsla({!orange}, 50%, 1)" - name: color-warning-active value: &color-warning-active "hsla({!orange}, 56%, 1)" - name: color-warning-inverse - value: &color-warning-inverse "hsla({!orange}, 5%, 1)" + value: &color-warning-inverse "hsla({!orange}, 97%, 1)" - name: color-yellow value: &color-yellow "hsla({!yellow}, 48%, 1)" - name: color-yellow-active value: &color-yellow-active "hsla({!yellow}, 52%, 1)" - name: color-yellow-inverse - value: &color-yellow-inverse "hsla({!yellow}, 5%, 1)" + value: &color-yellow-inverse "hsla({!yellow}, 97%, 1)" # Text Colors - name: text-color-base @@ -138,6 +145,14 @@ props: value: *color-primary-inverse category: text-color + - name: text-color-secondary + value: *color-secondary + category: text-color + + - name: text-color-secondary-inverse + value: *color-secondary-inverse + category: text-color + - name: text-color-success value: *color-success category: text-color @@ -167,11 +182,15 @@ props: value: *color-neutral-100 category: background-color + - name: background-color-soft + value: *color-neutral-95 + category: background-color + - name: background-color-softer value: *color-neutral-90 category: background-color - - name: background-color-soft + - name: background-color-softer-active value: *color-neutral-95 category: background-color @@ -180,7 +199,15 @@ props: category: background-color - name: background-color-softest-active - value: *color-neutral-80 + value: *color-neutral-90 + category: background-color + + - name: background-color-inverse + value: *color-neutral-0 + category: background-color + + - name: background-color-inverse-soft + value: *color-neutral-10 category: background-color - name: background-color-inverse-softer @@ -191,14 +218,6 @@ props: value: *color-neutral-30 category: background-color - - name: background-color-inverse-soft - value: *color-neutral-10 - category: background-color - - - name: background-color-inverse - value: *color-neutral-0 - category: background-color - - name: background-color-primary value: *color-primary category: background-color @@ -211,6 +230,18 @@ props: value: *color-primary-inverse category: background-color + - name: background-color-secondary + value: *color-secondary + category: background-color + + - name: background-color-secondary-active + value: *color-secondary-active + category: background-color + + - name: background-color-secondary-inverse + value: *color-secondary-inverse + category: background-color + - name: background-color-success value: *color-success category: background-color diff --git a/styleguide/src/system/tokens/_examples/digital-ocean/box-shadow.yml b/styleguide/src/system/tokens/_examples/digital-ocean/box-shadow.yml new file mode 100644 index 000000000..bad2f9e1d --- /dev/null +++ b/styleguide/src/system/tokens/_examples/digital-ocean/box-shadow.yml @@ -0,0 +1,24 @@ +# +# BOX SHADOW TOKENS +# +# Use these tokens to set a box-shadow. +# + +props: + - name: box-shadow-large + value: "0 20px 60px 0 rgba(0, 0, 0, .15)" + - name: box-shadow-base + value: "0 2px 4px rgba(3,27,78,.06)" + - name: box-shadow-small + value: "0px 8px 18px -2px rgba(0, 0, 0, .1)" + - name: box-shadow-x-small + value: "0px 0px 3px 0px rgba(0, 0, 0, .1)" + - name: box-shadow-active + value: "0 0 6px 1px rgba(20, 100, 160, 0.5)" + - name: box-shadow-inset + value: "inset 0 0 20px 1px rgba(0,0,0,.15)" + - name: box-shadow-small-inset + value: "inset 0 0 0 1px rgba(0,0,0,.05)" +global: + type: ... + category: box-shadow diff --git a/styleguide/src/system/tokens/_examples/digital-ocean/color.yml b/styleguide/src/system/tokens/_examples/digital-ocean/color.yml new file mode 100644 index 000000000..64fd539fa --- /dev/null +++ b/styleguide/src/system/tokens/_examples/digital-ocean/color.yml @@ -0,0 +1,316 @@ +# +# COLOR TOKENS +# +# We use HSL in order to keep consistent hues +# For reference, see http://hslpicker.com/ +# + +# +# Base Hues +# +# Set hues here (these don't set lightness) +# +aliases: + neutral: + value: "221, 40%" + green: + value: "100, 69%" + orange: + value: "28, 80%" + yellow: + value: "48, 100%" + blue: + value: "215, 100%" + purple: + value: "264, 88%" + pink: + value: "330, 86%" + teal: + value: "178, 100%" + red: + value: "3, 65%" + +props: + # + # Color Choices + # + # Set color choices here. + # Use different lightness variations of the base hues. + # + # Light theme: darkest color | Dark theme: lightest color + - name: color-neutral-0 + value: &color-neutral-0 "hsla({!neutral}, 10%, 1)" + - name: color-neutral-10 + value: &color-neutral-10 "hsla({!neutral}, 16%, 1)" + - name: color-neutral-20 + value: &color-neutral-20 "hsla({!neutral}, 30%, 1)" + - name: color-neutral-30 + value: &color-neutral-30 "hsla({!neutral}, 40%, 1)" + - name: color-neutral-40 + value: &color-neutral-40 "hsla({!neutral}, 45%, 1)" + - name: color-neutral-50 + value: &color-neutral-50 "hsla({!neutral}, 60%, 1)" + - name: color-neutral-60 + value: &color-neutral-60 "hsla({!neutral}, 70%, 1)" + - name: color-neutral-70 + value: &color-neutral-70 "hsla({!neutral}, 80%, 1)" + - name: color-neutral-80 + value: &color-neutral-80 "hsla({!neutral}, 90%, 1)" + - name: color-neutral-85 + value: &color-neutral-85 "hsla({!neutral}, 94%, 1)" + - name: color-neutral-90 + value: &color-neutral-90 "hsla({!neutral}, 96%, 1)" + - name: color-neutral-95 + value: &color-neutral-95 "hsla({!neutral}, 98%, 1)" + # Light theme: lightest color | Dark theme: darkest color + - name: color-neutral-100 + value: &color-neutral-100 "hsla({!neutral}, 100%, 1)" + + - name: color-primary + value: &color-primary "hsla({!blue}, 50%, 1)" + - name: color-primary-active + value: &color-primary-active "hsla({!blue}, 54%, 1)" + - name: color-primary-inverse + value: &color-primary-inverse "hsla({!blue}, 97%, 1)" + + - name: color-secondary + value: &color-secondary "hsla({!teal}, 40%, 1)" + - name: color-secondary-active + value: &color-secondary-active "hsla({!teal}, 42%, 1)" + - name: color-secondary-inverse + value: &color-secondary-inverse "hsla({!teal}, 97%, 1)" + + - name: color-success + value: &color-success "hsla({!green}, 40%, 1)" + - name: color-success-active + value: &color-success-active "hsla({!green}, 45%, 1)" + - name: color-success-inverse + value: &color-success-inverse "hsla({!green}, 97%, 1)" + + - name: color-danger + value: &color-danger "hsla({!red}, 50%, 1)" + - name: color-danger-active + value: &color-danger-active "hsla({!red}, 56%, 1)" + - name: color-danger-inverse + value: &color-danger-inverse "hsla({!red}, 97%, 1)" + + - name: color-warning + value: &color-warning "hsla({!orange}, 50%, 1)" + - name: color-warning-active + value: &color-warning-active "hsla({!orange}, 56%, 1)" + - name: color-warning-inverse + value: &color-warning-inverse "hsla({!orange}, 97%, 1)" + + - name: color-yellow + value: &color-yellow "hsla({!yellow}, 48%, 1)" + - name: color-yellow-active + value: &color-yellow-active "hsla({!yellow}, 52%, 1)" + - name: color-yellow-inverse + value: &color-yellow-inverse "hsla({!yellow}, 97%, 1)" + + # Text Colors + - name: text-color-base + value: *color-neutral-20 + category: text-color + + - name: text-color-soft + value: *color-neutral-40 + category: text-color + + - name: text-color-softer + value: *color-neutral-60 + category: text-color + + - name: text-color-disabled + value: *color-neutral-60 + category: text-color + + - name: text-color-inverse + value: *color-neutral-95 + category: text-color + + - name: text-color-link + value: *color-primary + category: text-color + + - name: text-color-link-active + value: *color-primary-active + category: text-color + + - name: text-color-primary + value: *color-primary + category: text-color + + - name: text-color-primary-inverse + value: *color-primary-inverse + category: text-color + + - name: text-color-secondary + value: *color-secondary + category: text-color + + - name: text-color-secondary-inverse + value: *color-secondary-inverse + category: text-color + + - name: text-color-success + value: *color-success + category: text-color + + - name: text-color-success-inverse + value: *color-success-inverse + category: text-color + + - name: text-color-warning + value: *color-warning + category: text-color + + - name: text-color-warning-inverse + value: *color-warning-inverse + category: text-color + + - name: text-color-danger + value: *color-danger + category: text-color + + - name: text-color-danger-inverse + value: *color-danger-inverse + category: text-color + + # Background Colors + - name: background-color-base + value: *color-neutral-100 + category: background-color + + - name: background-color-soft + value: *color-neutral-95 + category: background-color + + - name: background-color-softer + value: *color-neutral-90 + category: background-color + + - name: background-color-softer-active + value: *color-neutral-95 + category: background-color + + - name: background-color-softest + value: *color-neutral-85 + category: background-color + + - name: background-color-softest-active + value: *color-neutral-90 + category: background-color + + - name: background-color-inverse + value: *color-neutral-0 + category: background-color + + - name: background-color-inverse-soft + value: *color-neutral-10 + category: background-color + + - name: background-color-inverse-softer + value: *color-neutral-20 + category: background-color + + - name: background-color-inverse-softer-active + value: *color-neutral-30 + category: background-color + + - name: background-color-primary + value: *color-primary + category: background-color + + - name: background-color-primary-active + value: *color-primary-active + category: background-color + + - name: background-color-primary-inverse + value: *color-primary-inverse + category: background-color + + - name: background-color-secondary + value: *color-secondary + category: background-color + + - name: background-color-secondary-active + value: *color-secondary-active + category: background-color + + - name: background-color-secondary-inverse + value: *color-secondary-inverse + category: background-color + + - name: background-color-success + value: *color-success + category: background-color + + - name: background-color-success-active + value: *color-success-active + category: background-color + + - name: background-color-success-inverse + value: *color-success-inverse + category: background-color + + - name: background-color-warning + value: *color-warning + category: background-color + + - name: background-color-warning-active + value: *color-warning-active + category: background-color + + - name: background-color-warning-inverse + value: *color-warning-inverse + category: background-color + + - name: background-color-danger + value: *color-danger + category: background-color + + - name: background-color-danger-active + value: *color-danger-active + category: background-color + + - name: background-color-danger-inverse + value: *color-danger-inverse + category: background-color + + # Border Colors + - name: border-color-base + value: *color-neutral-60 + category: border-color + + - name: border-color-soft + value: *color-neutral-70 + category: border-color + + - name: border-color-softer + value: *color-neutral-80 + category: border-color + + - name: border-color-active + value: *color-primary + category: border-color + + - name: border-color-primary + value: *color-primary + category: border-color + + - name: border-color-success + value: *color-success + category: border-color + + - name: border-color-warning + value: *color-warning + category: border-color + + - name: border-color-danger + value: *color-danger + category: border-color + +global: + type: color + category: color diff --git a/styleguide/src/system/tokens/_examples/digital-ocean/font.yml b/styleguide/src/system/tokens/_examples/digital-ocean/font.yml new file mode 100644 index 000000000..452644250 --- /dev/null +++ b/styleguide/src/system/tokens/_examples/digital-ocean/font.yml @@ -0,0 +1,25 @@ +# +# FONT TOKENS +# Use these tokens to set font-weight and font-family. +# + +props: + - name: font-family-heading + value: "Sailec-Bold,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif" + category: "font-family" + - name: font-family-text + value: "Sailec-Regular,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif" + category: "font-family" + - name: font-family-code + value: "inconsolata, monospace" + category: "font-family" + + - name: font-weight-regular + value: "normal" + category: "font-weight" + - name: font-weight-bold + value: "600" + category: "font-weight" +global: + type: ... + category: font diff --git a/styleguide/src/system/tokens/_examples/discord/box-shadow.yml b/styleguide/src/system/tokens/_examples/discord/box-shadow.yml new file mode 100644 index 000000000..0b8a5ccf1 --- /dev/null +++ b/styleguide/src/system/tokens/_examples/discord/box-shadow.yml @@ -0,0 +1,24 @@ +# +# BOX SHADOW TOKENS +# +# Use these tokens to set a box-shadow. +# + +props: + - name: box-shadow-large + value: "0 20px 60px 0 rgba(0, 0, 0, .5)" + - name: box-shadow-base + value: "0px 12px 26px -4px rgba(0, 0, 0, .5)" + - name: box-shadow-small + value: "0px 8px 18px -2px rgba(0, 0, 0, .5)" + - name: box-shadow-x-small + value: "0px 0px 3px 0px rgba(0, 0, 0, .5)" + - name: box-shadow-active + value: "0 0 6px 1px rgba(20, 100, 160, 0.5)" + - name: box-shadow-inset + value: "inset 0 0 20px 1px rgba(0,0,0,.15)" + - name: box-shadow-small-inset + value: "inset 0 0 0 1px rgba(0,0,0,.05)" +global: + type: ... + category: box-shadow diff --git a/styleguide/src/system/tokens/_examples/discord/color.yml b/styleguide/src/system/tokens/_examples/discord/color.yml new file mode 100644 index 000000000..0c5c4c4f9 --- /dev/null +++ b/styleguide/src/system/tokens/_examples/discord/color.yml @@ -0,0 +1,316 @@ +# +# COLOR TOKENS +# +# We use HSL in order to keep consistent hues +# For reference, see http://hslpicker.com/ +# + +# +# Base Hues +# +# Set hues here (these don't set lightness) +# +aliases: + neutral: + value: "240, 6%" + green: + value: "100, 69%" + orange: + value: "28, 80%" + yellow: + value: "48, 100%" + blue: + value: "200, 100%" + purple: + value: "227, 58%" + pink: + value: "330, 86%" + teal: + value: "153, 46%" + red: + value: "3, 80%" + +props: + # + # Color Choices + # + # Set color choices here. + # Use different lightness variations of the base hues. + # + # Light theme: darkest color | Dark theme: lightest color + - name: color-neutral-0 + value: &color-neutral-0 "hsla({!neutral}, 100%, 1)" + - name: color-neutral-10 + value: &color-neutral-10 "hsla({!neutral}, 90%, 1)" + - name: color-neutral-20 + value: &color-neutral-20 "hsla({!neutral}, 80%, 1)" + - name: color-neutral-30 + value: &color-neutral-30 "hsla({!neutral}, 70%, 1)" + - name: color-neutral-40 + value: &color-neutral-40 "hsla({!neutral}, 60%, 1)" + - name: color-neutral-50 + value: &color-neutral-50 "hsla({!neutral}, 50%, 1)" + - name: color-neutral-60 + value: &color-neutral-60 "hsla({!neutral}, 45%, 1)" + - name: color-neutral-70 + value: &color-neutral-70 "hsla({!neutral}, 40%, 1)" + - name: color-neutral-80 + value: &color-neutral-80 "hsla({!neutral}, 30%, 1)" + - name: color-neutral-85 + value: &color-neutral-85 "hsla({!neutral}, 24%, 1)" + - name: color-neutral-90 + value: &color-neutral-90 "hsla({!neutral}, 20%, 1)" + - name: color-neutral-95 + value: &color-neutral-95 "hsla({!neutral}, 16%, 1)" + # Light theme: lightest color | Dark theme: darkest color + - name: color-neutral-100 + value: &color-neutral-100 "hsla({!neutral}, 14%, 1)" + + - name: color-primary + value: &color-primary "hsla({!purple}, 65%, 1)" + - name: color-primary-active + value: &color-primary-active "hsla({!purple}, 62%, 1)" + - name: color-primary-inverse + value: &color-primary-inverse "hsla({!purple}, 98%, 1)" + + - name: color-secondary + value: &color-secondary "hsla({!teal}, 46%, 1)" + - name: color-secondary-active + value: &color-secondary-active "hsla({!teal}, 52%, 1)" + - name: color-secondary-inverse + value: &color-secondary-inverse "hsla({!teal}, 98%, 1)" + + - name: color-success + value: &color-success "hsla({!green}, 40%, 1)" + - name: color-success-active + value: &color-success-active "hsla({!green}, 45%, 1)" + - name: color-success-inverse + value: &color-success-inverse "hsla({!green}, 98%, 1)" + + - name: color-danger + value: &color-danger "hsla({!red}, 50%, 1)" + - name: color-danger-active + value: &color-danger-active "hsla({!red}, 56%, 1)" + - name: color-danger-inverse + value: &color-danger-inverse "hsla({!red}, 98%, 1)" + + - name: color-warning + value: &color-warning "hsla({!orange}, 50%, 1)" + - name: color-warning-active + value: &color-warning-active "hsla({!orange}, 56%, 1)" + - name: color-warning-inverse + value: &color-warning-inverse "hsla({!orange}, 98%, 1)" + + - name: color-yellow + value: &color-yellow "hsla({!yellow}, 48%, 1)" + - name: color-yellow-active + value: &color-yellow-active "hsla({!yellow}, 52%, 1)" + - name: color-yellow-inverse + value: &color-yellow-inverse "hsla({!yellow}, 98%, 1)" + + # Text Colors + - name: text-color-base + value: *color-neutral-10 + category: text-color + + - name: text-color-soft + value: *color-neutral-30 + category: text-color + + - name: text-color-softer + value: *color-neutral-50 + category: text-color + + - name: text-color-disabled + value: *color-neutral-50 + category: text-color + + - name: text-color-inverse + value: *color-neutral-95 + category: text-color + + - name: text-color-link + value: *color-primary + category: text-color + + - name: text-color-link-active + value: *color-primary-active + category: text-color + + - name: text-color-primary + value: *color-primary + category: text-color + + - name: text-color-primary-inverse + value: *color-primary-inverse + category: text-color + + - name: text-color-secondary + value: *color-secondary + category: text-color + + - name: text-color-secondary-inverse + value: *color-secondary-inverse + category: text-color + + - name: text-color-success + value: *color-success + category: text-color + + - name: text-color-success-inverse + value: *color-success-inverse + category: text-color + + - name: text-color-warning + value: *color-warning + category: text-color + + - name: text-color-warning-inverse + value: *color-warning-inverse + category: text-color + + - name: text-color-danger + value: *color-danger + category: text-color + + - name: text-color-danger-inverse + value: *color-danger-inverse + category: text-color + + # Background Colors + - name: background-color-base + value: *color-neutral-100 + category: background-color + + - name: background-color-soft + value: *color-neutral-95 + category: background-color + + - name: background-color-softer + value: *color-neutral-90 + category: background-color + + - name: background-color-softer-active + value: *color-neutral-95 + category: background-color + + - name: background-color-softest + value: *color-neutral-85 + category: background-color + + - name: background-color-softest-active + value: *color-neutral-90 + category: background-color + + - name: background-color-inverse + value: *color-neutral-0 + category: background-color + + - name: background-color-inverse-soft + value: *color-neutral-10 + category: background-color + + - name: background-color-inverse-softer + value: *color-neutral-20 + category: background-color + + - name: background-color-inverse-softer-active + value: *color-neutral-30 + category: background-color + + - name: background-color-primary + value: *color-primary + category: background-color + + - name: background-color-primary-active + value: *color-primary-active + category: background-color + + - name: background-color-primary-inverse + value: *color-primary-inverse + category: background-color + + - name: background-color-secondary + value: *color-secondary + category: background-color + + - name: background-color-secondary-active + value: *color-secondary-active + category: background-color + + - name: background-color-secondary-inverse + value: *color-secondary-inverse + category: background-color + + - name: background-color-success + value: *color-success + category: background-color + + - name: background-color-success-active + value: *color-success-active + category: background-color + + - name: background-color-success-inverse + value: *color-success-inverse + category: background-color + + - name: background-color-warning + value: *color-warning + category: background-color + + - name: background-color-warning-active + value: *color-warning-active + category: background-color + + - name: background-color-warning-inverse + value: *color-warning-inverse + category: background-color + + - name: background-color-danger + value: *color-danger + category: background-color + + - name: background-color-danger-active + value: *color-danger-active + category: background-color + + - name: background-color-danger-inverse + value: *color-danger-inverse + category: background-color + + # Border Colors + - name: border-color-base + value: *color-neutral-60 + category: border-color + + - name: border-color-soft + value: *color-neutral-70 + category: border-color + + - name: border-color-softer + value: *color-neutral-80 + category: border-color + + - name: border-color-active + value: *color-primary + category: border-color + + - name: border-color-primary + value: *color-primary + category: border-color + + - name: border-color-success + value: *color-success + category: border-color + + - name: border-color-warning + value: *color-warning + category: border-color + + - name: border-color-danger + value: *color-danger + category: border-color + +global: + type: color + category: color diff --git a/styleguide/src/system/tokens/_examples/discord/font.yml b/styleguide/src/system/tokens/_examples/discord/font.yml new file mode 100644 index 000000000..543d2b381 --- /dev/null +++ b/styleguide/src/system/tokens/_examples/discord/font.yml @@ -0,0 +1,25 @@ +# +# FONT TOKENS +# Use these tokens to set font-weight and font-family. +# + +props: + - name: font-family-heading + value: "Whitney,Helvetica Neue,Helvetica,Arial,sans-serif" + category: "font-family" + - name: font-family-text + value: "Whitney,Helvetica Neue,Helvetica,Arial,sans-serif" + category: "font-family" + - name: font-family-code + value: "inconsolata, monospace" + category: "font-family" + + - name: font-weight-regular + value: "normal" + category: "font-weight" + - name: font-weight-bold + value: "700" + category: "font-weight" +global: + type: ... + category: font diff --git a/styleguide/src/system/tokens/_examples/vue/color.yml b/styleguide/src/system/tokens/_examples/vue/color.yml index 48c834578..a6772c5ed 100644 --- a/styleguide/src/system/tokens/_examples/vue/color.yml +++ b/styleguide/src/system/tokens/_examples/vue/color.yml @@ -5,6 +5,11 @@ # For reference, see http://hslpicker.com/ # +# +# Base Hues +# +# Set hues here (these don't set lightness) +# # # Base Hues # @@ -73,6 +78,13 @@ props: - name: color-primary-inverse value: &color-primary-inverse "hsla({!teal}, 97%, 1)" + - name: color-secondary + value: &color-secondary "hsla({!pink}, 45%, 1)" + - name: color-secondary-active + value: &color-secondary-active "hsla({!pink}, 52%, 1)" + - name: color-secondary-inverse + value: &color-secondary-inverse "hsla({!pink}, 97%, 1)" + - name: color-success value: &color-success "hsla({!green}, 40%, 1)" - name: color-success-active @@ -138,6 +150,14 @@ props: value: *color-primary-inverse category: text-color + - name: text-color-secondary + value: *color-secondary + category: text-color + + - name: text-color-secondary-inverse + value: *color-secondary-inverse + category: text-color + - name: text-color-success value: *color-success category: text-color @@ -167,11 +187,15 @@ props: value: *color-neutral-100 category: background-color + - name: background-color-soft + value: *color-neutral-95 + category: background-color + - name: background-color-softer value: *color-neutral-90 category: background-color - - name: background-color-soft + - name: background-color-softer-active value: *color-neutral-95 category: background-color @@ -183,20 +207,20 @@ props: value: *color-neutral-90 category: background-color - - name: background-color-inverse-softer - value: *color-neutral-20 - category: background-color - - - name: background-color-inverse-softer-active - value: *color-neutral-30 + - name: background-color-inverse + value: *color-neutral-0 category: background-color - name: background-color-inverse-soft value: *color-neutral-10 category: background-color - - name: background-color-inverse - value: *color-neutral-0 + - name: background-color-inverse-softer + value: *color-neutral-20 + category: background-color + + - name: background-color-inverse-softer-active + value: *color-neutral-30 category: background-color - name: background-color-primary @@ -211,6 +235,18 @@ props: value: *color-primary-inverse category: background-color + - name: background-color-secondary + value: *color-secondary + category: background-color + + - name: background-color-secondary-active + value: *color-secondary-active + category: background-color + + - name: background-color-secondary-inverse + value: *color-secondary-inverse + category: background-color + - name: background-color-success value: *color-success category: background-color diff --git a/styleguide/src/system/tokens/color.yml b/styleguide/src/system/tokens/color.yml index 2ba577e73..cedb25e74 100644 --- a/styleguide/src/system/tokens/color.yml +++ b/styleguide/src/system/tokens/color.yml @@ -291,7 +291,7 @@ props: value: *color-neutral-80 category: border-color - - name: border-color-light + - name: border-color-softest value: *color-neutral-90 category: border-color From 07c437ccaa520a2617f04c31e42ca9513cc8ff57 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Mon, 14 Jan 2019 14:45:42 +0100 Subject: [PATCH 02/21] Fixed issues after styleguide upgrade --- assets/styles/main.scss | 10 ++++++++++ components/LoadMore.vue | 4 ++-- pages/post/_slug/index.vue | 10 ++-------- .../src/system/components/layout/Container/style.scss | 2 +- styleguide/src/system/styles/core/reset.scss | 2 +- styleguide/yarn.lock | 5 +++++ 6 files changed, 21 insertions(+), 12 deletions(-) diff --git a/assets/styles/main.scss b/assets/styles/main.scss index 91b040f54..2f2bb58c6 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -146,3 +146,13 @@ hr { transition-delay: 0; } } + +.ds-card .ds-section { + padding: 0; + margin-left: -$space-base; + margin-right: -$space-base; + + .ds-container { + padding: $space-base; + } +} diff --git a/components/LoadMore.vue b/components/LoadMore.vue index 5bec2684a..15d0edbca 100644 --- a/components/LoadMore.vue +++ b/components/LoadMore.vue @@ -4,8 +4,8 @@ style="text-align: center" > diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue index 949263e95..be13d2973 100644 --- a/pages/post/_slug/index.vue +++ b/pages/post/_slug/index.vue @@ -53,9 +53,7 @@ - +

    @@ -234,11 +232,7 @@ export default { } } .ds-card-footer { - padding: 0; - - .ds-section { - padding: $space-base; - } + padding-bottom: 0; } } diff --git a/styleguide/src/system/components/layout/Container/style.scss b/styleguide/src/system/components/layout/Container/style.scss index 5af76e2de..580d0c559 100644 --- a/styleguide/src/system/components/layout/Container/style.scss +++ b/styleguide/src/system/components/layout/Container/style.scss @@ -34,4 +34,4 @@ .ds-container-x-large { max-width: #{$xl}px; -} \ No newline at end of file +} diff --git a/styleguide/src/system/styles/core/reset.scss b/styleguide/src/system/styles/core/reset.scss index d4a556aa9..5db715688 100644 --- a/styleguide/src/system/styles/core/reset.scss +++ b/styleguide/src/system/styles/core/reset.scss @@ -64,7 +64,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: $text-color-base; - background-color: $background-color-base; // 2 + background-color: $background-color-softer; } // Suppress the focus outline on elements that cannot be accessed via keyboard. diff --git a/styleguide/yarn.lock b/styleguide/yarn.lock index fcd471314..3ff5206a4 100644 --- a/styleguide/yarn.lock +++ b/styleguide/yarn.lock @@ -2578,6 +2578,11 @@ cli-width@^2.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk= +clipboard-copy@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-2.0.1.tgz#25214db3aabc282109cfa3429ffd885b014fc8b3" + integrity sha512-/JBr7ryeWwl2w33SRMYGfOZU5SWPVNtpB9oTxUzFp7olKKd2HM+cnhSMeETblJMnjgqtL581ncI/pcZX7o7Big== + clipboardy@^1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef" From 1cb4156422c7fca30608ec194f8b7eacd46ddae3 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Mon, 14 Jan 2019 14:52:16 +0100 Subject: [PATCH 03/21] Fixed linting issue --- .../components/data-input/shared/input.scss | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss index 1c14f754c..c2d0df638 100644 --- a/styleguide/src/system/components/data-input/shared/input.scss +++ b/styleguide/src/system/components/data-input/shared/input.scss @@ -2,7 +2,7 @@ .#{$class}-wrap { position: relative; } - + .#{$class} { appearance: none; box-sizing: border-box; @@ -12,25 +12,25 @@ width: 100%; padding: $input-padding-vertical $space-x-small; height: $input-height; - + color: $text-color-base; background: $background-color-base; - + border: $input-border-size solid $border-color-base; border-radius: $border-radius-base; outline: none; transition: all $duration-short $ease-out; - + &::placeholder { color: $text-color-disabled; } - + .ds-input-has-focus &, &:focus { border-color: $border-color-active; background: $background-color-base; } - + .ds-input-is-disabled &, &:disabled { color: $text-color-disabled; @@ -43,32 +43,32 @@ .ds-input-is-readonly & { pointer-events: none; } - + .ds-input-has-error & { border-color: $border-color-danger; } } - + .ds-input-size-small { font-size: $font-size-small; - + .#{$class} { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; } } - + .ds-input-size-large { font-size: $font-size-large; - + .#{$class} { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; } } - + .#{$class}-icon, .#{$class}-icon-right { position: absolute; @@ -82,7 +82,7 @@ color: $text-color-softer; transition: color $duration-short $ease-out; pointer-events: none; - + .ds-input-has-focus & { color: $text-color-base; } @@ -95,15 +95,15 @@ width: $input-height-large; } } - + .#{$class}-icon-right { right: 0; left: auto; } - + .#{$class}-has-icon { padding-left: $input-height; - + .ds-input-size-small & { padding-left: $input-height-small; } @@ -112,7 +112,7 @@ padding-left: $input-height-large; } } - + .#{$class}-has-icon-right { padding-right: $input-height; @@ -123,5 +123,5 @@ .ds-input-size-large & { padding-right: $input-height-large; } - } + } } From 598dd9cda75dd8a57310ed0c6855808a56f79067 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Mon, 14 Jan 2019 16:05:55 +0100 Subject: [PATCH 04/21] Added matcher prop for menu --- .../src/system/components/navigation/Menu/Menu.vue | 9 +++++++++ .../src/system/components/navigation/Menu/MenuItem.vue | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/styleguide/src/system/components/navigation/Menu/Menu.vue b/styleguide/src/system/components/navigation/Menu/Menu.vue index 7d36fd6cc..6ff19120a 100644 --- a/styleguide/src/system/components/navigation/Menu/Menu.vue +++ b/styleguide/src/system/components/navigation/Menu/Menu.vue @@ -98,6 +98,15 @@ export default { return route.name } }, + /** + * Function that matches items exactly + */ + matcher: { + type: Function, + default: () => { + return false + } + }, /** * Function that checks if the url must be matched exactly in order to activate the menu item. By default only '/' must be matched exactly. */ diff --git a/styleguide/src/system/components/navigation/Menu/MenuItem.vue b/styleguide/src/system/components/navigation/Menu/MenuItem.vue index 83ce8fa2c..047537e51 100644 --- a/styleguide/src/system/components/navigation/Menu/MenuItem.vue +++ b/styleguide/src/system/components/navigation/Menu/MenuItem.vue @@ -14,6 +14,9 @@ Date: Mon, 14 Jan 2019 16:06:09 +0100 Subject: [PATCH 05/21] use standard exact router link class in nuxt --- nuxt.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/nuxt.config.js b/nuxt.config.js index be8da36c5..24b406263 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -72,7 +72,8 @@ module.exports = { router: { middleware: ['authenticated'], - linkActiveClass: 'router-active-link' + linkActiveClass: 'router-link-active', + linkExactActiveClass: 'router-link-exact-active' }, /* From c9008a23cbba7a77ad30ff2ebed35eb4c17b5b92 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Mon, 14 Jan 2019 16:07:42 +0100 Subject: [PATCH 06/21] Use matcher for user menu --- layouts/default.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/layouts/default.vue b/layouts/default.vue index f79b00db5..303f80c0b 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -43,7 +43,7 @@ {{ $t('login.hello') }} {{ user.name }} Date: Mon, 14 Jan 2019 16:07:58 +0100 Subject: [PATCH 07/21] remove disabled styling for inputs --- styleguide/src/system/components/data-input/shared/input.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss index c2d0df638..316c94b86 100644 --- a/styleguide/src/system/components/data-input/shared/input.scss +++ b/styleguide/src/system/components/data-input/shared/input.scss @@ -37,7 +37,6 @@ opacity: $opacity-disabled; pointer-events: none; cursor: not-allowed; - background-color: $color-neutral-80; } .ds-input-is-readonly & { From 6e0380e5f6938968041ed2eaf537103eff87e858 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Mon, 14 Jan 2019 16:10:26 +0100 Subject: [PATCH 08/21] Fixed LocaleSwitch issue with new Menu --- components/LocaleSwitch.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue index 76060bd20..be88dcd3a 100644 --- a/components/LocaleSwitch.vue +++ b/components/LocaleSwitch.vue @@ -25,7 +25,7 @@ slot="popover" slot-scope="{toggleMenu}" class="locale-menu-popover" - :is-exact="isExact" + :matcher="matcher" :routes="routes" > Date: Mon, 14 Jan 2019 17:12:04 +0100 Subject: [PATCH 09/21] Fixed settings and admin menues --- pages/admin.vue | 5 ++++- pages/settings.vue | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/pages/admin.vue b/pages/admin.vue index ce2c50960..b7a3049ba 100644 --- a/pages/admin.vue +++ b/pages/admin.vue @@ -5,7 +5,10 @@ - + - + Date: Thu, 17 Jan 2019 09:33:41 +0100 Subject: [PATCH 10/21] Fix border-radius for card --- styleguide/src/system/components/layout/Card/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styleguide/src/system/components/layout/Card/style.scss b/styleguide/src/system/components/layout/Card/style.scss index 2ce09bff2..9dd85b665 100644 --- a/styleguide/src/system/components/layout/Card/style.scss +++ b/styleguide/src/system/components/layout/Card/style.scss @@ -1,4 +1,4 @@ -$border-radius: $border-radius-large; +$border-radius: $border-radius-x-large; .ds-card { @include reset; From df9e4ddcf6f18b9eabc8ffc51074bb433c3a5945 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 10:38:56 +0100 Subject: [PATCH 11/21] Updated from pr's --- .../src/styleguide/components/Navigation.vue | 3 +- .../data-display/CopyField/CopyField.vue | 2 +- .../components/data-display/List/List.vue | 2 +- .../components/data-input/Input/demo.md | 10 +++- .../components/data-input/shared/input.scss | 37 ++++++------ .../system/components/layout/Card/style.scss | 2 +- .../components/layout/Container/style.scss | 2 +- .../components/layout/Section/Section.vue | 4 -- .../system/components/layout/Space/style.scss | 3 +- .../components/layout/Spinner/Spinner.vue | 13 ++-- .../components/layout/Spinner/style.scss | 59 ++++++++++--------- .../components/navigation/Button/Button.vue | 9 +-- .../components/navigation/Menu/Menu.vue | 14 +---- .../components/navigation/Menu/MenuItem.vue | 2 +- .../components/typography/Chip/Chip.vue | 6 +- .../components/typography/Chip/style.scss | 30 ++++------ .../components/typography/Code/Code.vue | 1 - .../components/typography/Heading/Heading.vue | 6 +- .../components/typography/Logo/Logo.vue | 1 - .../system/components/typography/Tag/Tag.vue | 5 +- styleguide/src/system/tokens/color.yml | 4 ++ styleguide/src/system/tokens/font-spacing.yml | 1 + 22 files changed, 101 insertions(+), 115 deletions(-) diff --git a/styleguide/src/styleguide/components/Navigation.vue b/styleguide/src/styleguide/components/Navigation.vue index 2cbdfedf0..237519edc 100644 --- a/styleguide/src/styleguide/components/Navigation.vue +++ b/styleguide/src/styleguide/components/Navigation.vue @@ -4,8 +4,7 @@ + icon="search" />

+ ``` ## Usage with label @@ -10,7 +10,13 @@ + placeholder="Name ..." /> +``` + +## Disabled + +``` + ``` ## Input types diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss index 316c94b86..cbb022e6f 100644 --- a/styleguide/src/system/components/data-input/shared/input.scss +++ b/styleguide/src/system/components/data-input/shared/input.scss @@ -2,7 +2,7 @@ .#{$class}-wrap { position: relative; } - + .#{$class} { appearance: none; box-sizing: border-box; @@ -12,62 +12,63 @@ width: 100%; padding: $input-padding-vertical $space-x-small; height: $input-height; - + color: $text-color-base; background: $background-color-base; - + border: $input-border-size solid $border-color-base; border-radius: $border-radius-base; outline: none; transition: all $duration-short $ease-out; - + &::placeholder { color: $text-color-disabled; } - + .ds-input-has-focus &, &:focus { border-color: $border-color-active; background: $background-color-base; } - + .ds-input-is-disabled &, &:disabled { color: $text-color-disabled; opacity: $opacity-disabled; pointer-events: none; cursor: not-allowed; + background-color: $background-color-disabled; } .ds-input-is-readonly & { pointer-events: none; } - + .ds-input-has-error & { border-color: $border-color-danger; } } - + .ds-input-size-small { font-size: $font-size-small; - + .#{$class} { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; } } - + .ds-input-size-large { font-size: $font-size-large; - + .#{$class} { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; } } - + .#{$class}-icon, .#{$class}-icon-right { position: absolute; @@ -81,7 +82,7 @@ color: $text-color-softer; transition: color $duration-short $ease-out; pointer-events: none; - + .ds-input-has-focus & { color: $text-color-base; } @@ -94,15 +95,15 @@ width: $input-height-large; } } - + .#{$class}-icon-right { right: 0; left: auto; } - + .#{$class}-has-icon { padding-left: $input-height; - + .ds-input-size-small & { padding-left: $input-height-small; } @@ -111,7 +112,7 @@ padding-left: $input-height-large; } } - + .#{$class}-has-icon-right { padding-right: $input-height; @@ -122,5 +123,5 @@ .ds-input-size-large & { padding-right: $input-height-large; } - } + } } diff --git a/styleguide/src/system/components/layout/Card/style.scss b/styleguide/src/system/components/layout/Card/style.scss index 9dd85b665..2ce09bff2 100644 --- a/styleguide/src/system/components/layout/Card/style.scss +++ b/styleguide/src/system/components/layout/Card/style.scss @@ -1,4 +1,4 @@ -$border-radius: $border-radius-x-large; +$border-radius: $border-radius-large; .ds-card { @include reset; diff --git a/styleguide/src/system/components/layout/Container/style.scss b/styleguide/src/system/components/layout/Container/style.scss index 580d0c559..5af76e2de 100644 --- a/styleguide/src/system/components/layout/Container/style.scss +++ b/styleguide/src/system/components/layout/Container/style.scss @@ -34,4 +34,4 @@ .ds-container-x-large { max-width: #{$xl}px; -} +} \ No newline at end of file diff --git a/styleguide/src/system/components/layout/Section/Section.vue b/styleguide/src/system/components/layout/Section/Section.vue index 59e59978d..4b89a44c1 100644 --- a/styleguide/src/system/components/layout/Section/Section.vue +++ b/styleguide/src/system/components/layout/Section/Section.vue @@ -27,7 +27,6 @@ export default { props: { /** * Whether this section should be fullheight - * `true, false` */ fullheight: { type: Boolean, @@ -35,7 +34,6 @@ export default { }, /** * Highlight with primary color - * `true, false` */ primary: { type: Boolean, @@ -43,7 +41,6 @@ export default { }, /** * Highlight with secondary color - * `true, false` */ secondary: { type: Boolean, @@ -51,7 +48,6 @@ export default { }, /** * Center the content - * `true, false` */ centered: { type: Boolean, diff --git a/styleguide/src/system/components/layout/Space/style.scss b/styleguide/src/system/components/layout/Space/style.scss index d6db22087..203986a94 100644 --- a/styleguide/src/system/components/layout/Space/style.scss +++ b/styleguide/src/system/components/layout/Space/style.scss @@ -1,6 +1,7 @@ .ds-space { @include reset; } + .ds-space-centered { text-align: center; -} \ No newline at end of file +} diff --git a/styleguide/src/system/components/layout/Spinner/Spinner.vue b/styleguide/src/system/components/layout/Spinner/Spinner.vue index 3fe573ef7..f40576b9f 100644 --- a/styleguide/src/system/components/layout/Spinner/Spinner.vue +++ b/styleguide/src/system/components/layout/Spinner/Spinner.vue @@ -10,7 +10,7 @@ danger && !inverse && `ds-spinner-danger`, ]" > - + @@ -20,7 +20,7 @@ export default { props: { /** * The size used for the spinner. - * `small, base, large` + * @options small|base|large */ size: { type: String, @@ -38,7 +38,6 @@ export default { }, /** * Primary style - * `true, false` */ primary: { type: Boolean, @@ -46,7 +45,6 @@ export default { }, /** * Secondary style - * `true, false` */ secondary: { type: Boolean, @@ -54,7 +52,6 @@ export default { }, /** * Danger style - * `true, false` */ danger: { type: Boolean, @@ -64,7 +61,7 @@ export default { } - - \ No newline at end of file + + + diff --git a/styleguide/src/system/components/layout/Spinner/style.scss b/styleguide/src/system/components/layout/Spinner/style.scss index 9aa1b2c78..4d961269d 100644 --- a/styleguide/src/system/components/layout/Spinner/style.scss +++ b/styleguide/src/system/components/layout/Spinner/style.scss @@ -1,41 +1,47 @@ +$size-small: $space-base; +$size-base: $space-large; +$size-large: $space-x-large; + .ds-spinner { - $scale: 40px; - animation: rotate 16s linear infinite; position: relative; display: inline-block; - width: $scale; - height: $scale; - - & .path { - stroke: $text-color-soft; - stroke-linecap: round; - animation: dash 1.5s ease-in-out infinite; - } - &.ds-spinner-inverse .path { - stroke: $color-primary-inverse; - } - &.ds-spinner-primary .path { - stroke: $text-color-primary; - } - &.ds-spinner-secondary .path { - stroke: $text-color-secondary; - } - &.ds-spinner-danger .path { - stroke: $text-color-danger; - } + width: $size-base; + height: $size-base; &.ds-size-small { - width: $scale * 0.5; - height: $scale * 0.5; + width: $size-small; + height: $size-small; } &.ds-size-large { - width: $scale * 1.5; - height: $scale * 1.5; + width: $size-large; + height: $size-large; } } +.ds-spinner-circle { + stroke: $text-color-soft; + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; + + .ds-spinner-inverse & { + stroke: $color-primary-inverse; + } + + .ds-spinner-primary & { + stroke: $text-color-primary; + } + + .ds-spinner-secondary & { + stroke: $text-color-secondary; + } + + .ds-spinner-danger & { + stroke: $text-color-danger; + } +} + @keyframes rotate { 100% { transform: rotate(2160deg); @@ -56,4 +62,3 @@ stroke-dashoffset: -124; } } - diff --git a/styleguide/src/system/components/navigation/Button/Button.vue b/styleguide/src/system/components/navigation/Button/Button.vue index 10daf3a89..971d156ca 100644 --- a/styleguide/src/system/components/navigation/Button/Button.vue +++ b/styleguide/src/system/components/navigation/Button/Button.vue @@ -54,7 +54,7 @@ export default { }, /** * The size used for the text. - * `small, base, large` + * @options small|base|large */ size: { type: String, @@ -65,7 +65,7 @@ export default { }, /** * The component / tag used for this button - * `router-link, a` + * @options router-link|a|button */ linkTag: { type: String, @@ -86,7 +86,6 @@ export default { }, /** * Primary style - * `true, false` */ primary: { type: Boolean, @@ -94,7 +93,6 @@ export default { }, /** * Secondary style - * `true, false` */ secondary: { type: Boolean, @@ -102,7 +100,6 @@ export default { }, /** * Danger style - * `true, false` */ danger: { type: Boolean, @@ -110,7 +107,6 @@ export default { }, /** * Toggle the hover state - * `true, false` */ hover: { type: Boolean, @@ -118,7 +114,6 @@ export default { }, /** * Make the buttons background transparent - * `true, false` */ ghost: { type: Boolean, diff --git a/styleguide/src/system/components/navigation/Menu/Menu.vue b/styleguide/src/system/components/navigation/Menu/Menu.vue index 6ff19120a..72172692c 100644 --- a/styleguide/src/system/components/navigation/Menu/Menu.vue +++ b/styleguide/src/system/components/navigation/Menu/Menu.vue @@ -13,9 +13,10 @@ :route="route" :parents="[]" :name="route.name"> + + name="menuitem"> @@ -64,7 +65,7 @@ export default { }, /** * The default component / tag used for the link of menu items - * `router-link, a` + * @options router-link|a */ linkTag: { type: String, @@ -98,15 +99,6 @@ export default { return route.name } }, - /** - * Function that matches items exactly - */ - matcher: { - type: Function, - default: () => { - return false - } - }, /** * Function that checks if the url must be matched exactly in order to activate the menu item. By default only '/' must be matched exactly. */ diff --git a/styleguide/src/system/components/navigation/Menu/MenuItem.vue b/styleguide/src/system/components/navigation/Menu/MenuItem.vue index 047537e51..39979df1e 100644 --- a/styleguide/src/system/components/navigation/Menu/MenuItem.vue +++ b/styleguide/src/system/components/navigation/Menu/MenuItem.vue @@ -75,7 +75,7 @@ export default { }, /** * The component / tag used for the link of this route - * `router-link, a` + * @options router-link|a */ linkTag: { type: String, diff --git a/styleguide/src/system/components/typography/Chip/Chip.vue b/styleguide/src/system/components/typography/Chip/Chip.vue index 90ccda6b6..ad57f3267 100644 --- a/styleguide/src/system/components/typography/Chip/Chip.vue +++ b/styleguide/src/system/components/typography/Chip/Chip.vue @@ -31,7 +31,7 @@ export default { props: { /** * The background color used for the chip. - * `medium, inverse, primary, success, warning, danger` + * @options medium|inverse|primary|success|warning|danger */ color: { type: String, @@ -42,7 +42,7 @@ export default { }, /** * The size used for the text. - * `base, large, small` + * @options base|large|small */ size: { type: String, @@ -53,7 +53,6 @@ export default { }, /** * Whether the chip should be removeable - * `true, false` */ removable: { type: Boolean, @@ -61,7 +60,6 @@ export default { }, /** * Whether the chip should be rounded - * `true, false` */ round: { type: Boolean, diff --git a/styleguide/src/system/components/typography/Chip/style.scss b/styleguide/src/system/components/typography/Chip/style.scss index c8660333d..79315a449 100644 --- a/styleguide/src/system/components/typography/Chip/style.scss +++ b/styleguide/src/system/components/typography/Chip/style.scss @@ -1,21 +1,17 @@ .ds-chip { @include reset; @include stack-space($space-xx-small); + @include inline-space($font-space-xx-small); position: relative; display: inline-block; font-family: $font-family-text; line-height: $line-height-base; - padding: $space-xx-small $space-x-small; - margin-right: $font-space-xx-small; + padding: $font-space-xx-small $font-space-large; border-radius: $border-radius-base; font-weight: $font-weight-bold; color: $text-color-base; background-color: $background-color-softest; - &:last-child { - margin-right: 0; - } - &.ds-chip-removable { padding-right: $space-x-small + $space-small; } @@ -50,27 +46,27 @@ border-radius: $border-radius-rounded; } -.ds-chip-size-base { - font-size: $font-size-small; - padding-left: $space-small * 0.9; - padding-right: $space-small * 0.9; +.ds-chip-size-small { + font-size: $font-size-xx-small; + padding: $font-space-xxx-small ($font-space-large + $font-space-xxx-small); } -.ds-chip-size-small { - font-size: $font-size-x-small; - padding: $space-xxx-small $space-x-small * 1.2; +.ds-chip-size-base { + font-size: $font-size-small; + padding-left: $font-space-large + $font-space-xx-small; + padding-right: $font-space-large + $font-space-xx-small; } .ds-chip-size-large { font-size: $font-size-base; - padding-left: $space-small; - padding-right: $space-small; + padding-left: $font-space-x-large; + padding-right: $font-space-x-large; } .ds-chip-close { @include reset-button; position: absolute; - right: $space-xx-small; + right: $font-space-base; top: 50%; transform: translateY(-50%); display: inline-flex; @@ -88,4 +84,4 @@ &:hover { opacity: 1; } -} \ No newline at end of file +} diff --git a/styleguide/src/system/components/typography/Code/Code.vue b/styleguide/src/system/components/typography/Code/Code.vue index be9fe5d6b..be70d6562 100644 --- a/styleguide/src/system/components/typography/Code/Code.vue +++ b/styleguide/src/system/components/typography/Code/Code.vue @@ -20,7 +20,6 @@ export default { props: { /** * Display the code inline. - * `true, false` */ inline: { type: Boolean, diff --git a/styleguide/src/system/components/typography/Heading/Heading.vue b/styleguide/src/system/components/typography/Heading/Heading.vue index 9e000d931..b48920b32 100644 --- a/styleguide/src/system/components/typography/Heading/Heading.vue +++ b/styleguide/src/system/components/typography/Heading/Heading.vue @@ -26,7 +26,7 @@ export default { props: { /** * The heading type used for the heading. - * `h1, h2, h3, h4, h5, h6` + * @options h1|h2|h3|h4|h5|h6 */ tag: { type: String, @@ -37,7 +37,7 @@ export default { }, /** * The size used for the heading. - * `h1, h2, h3, h4, h5, h6` + * @options h1|h2|h3|h4|h5|h6 */ size: { type: String, @@ -48,7 +48,6 @@ export default { }, /** * Primary style - * `true, false` */ primary: { type: Boolean, @@ -56,7 +55,6 @@ export default { }, /** * Muted style - * `true, false` */ soft: { type: Boolean, diff --git a/styleguide/src/system/components/typography/Logo/Logo.vue b/styleguide/src/system/components/typography/Logo/Logo.vue index dcfdcacd5..0ec97d577 100644 --- a/styleguide/src/system/components/typography/Logo/Logo.vue +++ b/styleguide/src/system/components/typography/Logo/Logo.vue @@ -30,7 +30,6 @@ export default { props: { /** * Inverse the logo - * `true, false` */ inverse: { type: Boolean, diff --git a/styleguide/src/system/components/typography/Tag/Tag.vue b/styleguide/src/system/components/typography/Tag/Tag.vue index f5031ba2e..457d4bd18 100644 --- a/styleguide/src/system/components/typography/Tag/Tag.vue +++ b/styleguide/src/system/components/typography/Tag/Tag.vue @@ -23,7 +23,7 @@ export default { props: { /** * The background color used for the tag. - * `medium, inverse, primary, success, warning, danger` + * @options medium|inverse|primary|success|warning|danger */ color: { type: String, @@ -34,7 +34,7 @@ export default { }, /** * The size used for the text. - * `base, large, small` + * @options base|large|small */ size: { type: String, @@ -45,7 +45,6 @@ export default { }, /** * Whether the tag should be round - * `true, false` */ round: { type: Boolean, diff --git a/styleguide/src/system/tokens/color.yml b/styleguide/src/system/tokens/color.yml index cedb25e74..705de97eb 100644 --- a/styleguide/src/system/tokens/color.yml +++ b/styleguide/src/system/tokens/color.yml @@ -218,6 +218,10 @@ props: value: *color-neutral-30 category: background-color + - name: background-color-disabled + value: *color-neutral-90 + category: background-color + - name: background-color-primary value: *color-primary category: background-color diff --git a/styleguide/src/system/tokens/font-spacing.yml b/styleguide/src/system/tokens/font-spacing.yml index 9e106feae..14e42af89 100644 --- a/styleguide/src/system/tokens/font-spacing.yml +++ b/styleguide/src/system/tokens/font-spacing.yml @@ -24,6 +24,7 @@ props: value: "0.2em" - name: font-space-xxx-small value: "0.1em" + global: type: number category: font-spacing From 4bd1028a38d674b714d41dcaad61c12254b48432 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 10:45:53 +0100 Subject: [PATCH 12/21] Updated menu usage to new slotname --- components/LocaleSwitch.vue | 2 +- layouts/default.vue | 2 +- .../src/system/components/navigation/Menu/Menu.vue | 9 +++++++++ styleguide/src/system/components/navigation/Menu/demo.md | 2 +- 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue index be88dcd3a..a326d4616 100644 --- a/components/LocaleSwitch.vue +++ b/components/LocaleSwitch.vue @@ -29,7 +29,7 @@ :routes="routes" > { + return false + } + }, /** * Function that checks if the url must be matched exactly in order to activate the menu item. By default only '/' must be matched exactly. */ diff --git a/styleguide/src/system/components/navigation/Menu/demo.md b/styleguide/src/system/components/navigation/Menu/demo.md index ffdc13169..45f97247c 100644 --- a/styleguide/src/system/components/navigation/Menu/demo.md +++ b/styleguide/src/system/components/navigation/Menu/demo.md @@ -214,7 +214,7 @@ If you want to keep the sub menu for this menu item, be sure to use the `ds-menu From e0e1aa907dd3c77ca63862279cea92a0d27f8d47 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 11:02:09 +0100 Subject: [PATCH 13/21] Updated chip and tag --- styleguide/src/system/components/typography/Chip/style.scss | 4 ++++ styleguide/src/system/components/typography/Tag/style.scss | 1 + 2 files changed, 5 insertions(+) diff --git a/styleguide/src/system/components/typography/Chip/style.scss b/styleguide/src/system/components/typography/Chip/style.scss index 79315a449..95a331488 100644 --- a/styleguide/src/system/components/typography/Chip/style.scss +++ b/styleguide/src/system/components/typography/Chip/style.scss @@ -7,6 +7,7 @@ font-family: $font-family-text; line-height: $line-height-base; padding: $font-space-xx-small $font-space-large; + padding-bottom: $font-space-xxx-small; border-radius: $border-radius-base; font-weight: $font-weight-bold; color: $text-color-base; @@ -55,12 +56,15 @@ font-size: $font-size-small; padding-left: $font-space-large + $font-space-xx-small; padding-right: $font-space-large + $font-space-xx-small; + padding-top: $font-space-xxx-small; } .ds-chip-size-large { font-size: $font-size-base; padding-left: $font-space-x-large; padding-right: $font-space-x-large; + padding-top: $font-space-xx-small; + padding-bottom: $font-space-xxx-small; } .ds-chip-close { diff --git a/styleguide/src/system/components/typography/Tag/style.scss b/styleguide/src/system/components/typography/Tag/style.scss index 9fa9b5a41..48256e8fe 100644 --- a/styleguide/src/system/components/typography/Tag/style.scss +++ b/styleguide/src/system/components/typography/Tag/style.scss @@ -5,6 +5,7 @@ font-family: $font-family-text; line-height: $line-height-large; padding: $font-space-xx-small $font-space-x-large; + padding-top: $font-space-xxx-small; border-radius: $border-radius-base; font-weight: $font-weight-bold; letter-spacing: $letter-spacing-large; From f785fc8de6510583928e72dfb6f670b7b91c4588 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 11:21:11 +0100 Subject: [PATCH 14/21] Fixed tags --- assets/styles/main.scss | 6 ------ styleguide/src/system/components/typography/Tag/style.scss | 7 ++++++- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/assets/styles/main.scss b/assets/styles/main.scss index 5b0779d30..61cc21c48 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -34,12 +34,6 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1); background: #fff; } -.tags { - .ds-tag { - margin-right: $space-xx-small; - } -} - blockquote { display: block; padding: 15px 20px 15px 45px; diff --git a/styleguide/src/system/components/typography/Tag/style.scss b/styleguide/src/system/components/typography/Tag/style.scss index 48256e8fe..76cad1505 100644 --- a/styleguide/src/system/components/typography/Tag/style.scss +++ b/styleguide/src/system/components/typography/Tag/style.scss @@ -1,11 +1,12 @@ .ds-tag { @include reset; @include stack-space($space-xx-small); + @include inline-space($font-space-xx-small); display: inline-block; font-family: $font-family-text; line-height: $line-height-large; padding: $font-space-xx-small $font-space-x-large; - padding-top: $font-space-xxx-small; + padding-top: $font-space-x-small; border-radius: $border-radius-base; font-weight: $font-weight-bold; letter-spacing: $letter-spacing-large; @@ -42,15 +43,19 @@ .ds-tag-round { border-radius: $border-radius-rounded; padding: 0 $font-space-base; + padding-top: $font-space-xxx-small; } .ds-tag-size-base { font-size: $font-size-x-small; + padding-top: $font-space-x-small; + padding-bottom: $font-space-xx-small; } .ds-tag-size-small { font-size: $font-size-xx-small; padding: $font-space-xxx-small $font-space-large; + padding-top: $font-space-x-small; } .ds-tag-size-large { From e048771125744dc773757d08c1c109ff3b1ec79d Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 14:39:38 +0100 Subject: [PATCH 15/21] Fixed rounded tag --- styleguide/src/system/components/typography/Tag/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styleguide/src/system/components/typography/Tag/style.scss b/styleguide/src/system/components/typography/Tag/style.scss index 76cad1505..ea1eed14d 100644 --- a/styleguide/src/system/components/typography/Tag/style.scss +++ b/styleguide/src/system/components/typography/Tag/style.scss @@ -4,7 +4,7 @@ @include inline-space($font-space-xx-small); display: inline-block; font-family: $font-family-text; - line-height: $line-height-large; + line-height: $line-height-base; padding: $font-space-xx-small $font-space-x-large; padding-top: $font-space-x-small; border-radius: $border-radius-base; @@ -42,8 +42,8 @@ .ds-tag-round { border-radius: $border-radius-rounded; - padding: 0 $font-space-base; - padding-top: $font-space-xxx-small; + padding-left: $font-space-large + $font-space-xxx-small; + padding-right: $font-space-large + $font-space-xxx-small; } .ds-tag-size-base { From 912ff6f645c75ff756ab04bb50330eb009e4e006 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 14:45:57 +0100 Subject: [PATCH 16/21] Use native tag sizeing --- pages/post/_slug/index.vue | 3 ++- styleguide/src/system/components/layout/Card/demo.md | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue index 09c8efef9..4a7d93703 100644 --- a/pages/post/_slug/index.vue +++ b/pages/post/_slug/index.vue @@ -59,8 +59,9 @@ {{ post.commentsCount }} diff --git a/styleguide/src/system/components/layout/Card/demo.md b/styleguide/src/system/components/layout/Card/demo.md index 398e4e157..0bfb4a8f3 100644 --- a/styleguide/src/system/components/layout/Card/demo.md +++ b/styleguide/src/system/components/layout/Card/demo.md @@ -209,8 +209,9 @@ Here we apply a section footer without margin
2 @@ -226,8 +227,9 @@ Here we apply a section footer without margin
34 From 24cfe07e9524dbda05deac6c062b72749da1e482 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 15:31:51 +0100 Subject: [PATCH 17/21] Fixed space centered property --- styleguide/src/system/components/layout/Space/Space.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/styleguide/src/system/components/layout/Space/Space.vue b/styleguide/src/system/components/layout/Space/Space.vue index e9824bb5d..235392267 100644 --- a/styleguide/src/system/components/layout/Space/Space.vue +++ b/styleguide/src/system/components/layout/Space/Space.vue @@ -2,7 +2,11 @@ + class="ds-space" + :class="[ + centered && 'ds-space-centered' + ]" + > From c9508e37cc69125f1d5c2c4b278c1988f80f4303 Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Thu, 17 Jan 2019 15:39:21 +0100 Subject: [PATCH 18/21] Fixed linting error --- .../components/data-input/shared/input.scss | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss index cbb022e6f..4d97e16b0 100644 --- a/styleguide/src/system/components/data-input/shared/input.scss +++ b/styleguide/src/system/components/data-input/shared/input.scss @@ -2,7 +2,7 @@ .#{$class}-wrap { position: relative; } - + .#{$class} { appearance: none; box-sizing: border-box; @@ -12,25 +12,25 @@ width: 100%; padding: $input-padding-vertical $space-x-small; height: $input-height; - + color: $text-color-base; background: $background-color-base; - + border: $input-border-size solid $border-color-base; border-radius: $border-radius-base; outline: none; transition: all $duration-short $ease-out; - + &::placeholder { color: $text-color-disabled; } - + .ds-input-has-focus &, &:focus { border-color: $border-color-active; background: $background-color-base; } - + .ds-input-is-disabled &, &:disabled { color: $text-color-disabled; @@ -43,32 +43,32 @@ .ds-input-is-readonly & { pointer-events: none; } - + .ds-input-has-error & { border-color: $border-color-danger; } } - + .ds-input-size-small { font-size: $font-size-small; - + .#{$class} { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; } } - + .ds-input-size-large { font-size: $font-size-large; - + .#{$class} { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; } } - + .#{$class}-icon, .#{$class}-icon-right { position: absolute; @@ -82,7 +82,7 @@ color: $text-color-softer; transition: color $duration-short $ease-out; pointer-events: none; - + .ds-input-has-focus & { color: $text-color-base; } @@ -95,15 +95,15 @@ width: $input-height-large; } } - + .#{$class}-icon-right { right: 0; left: auto; } - + .#{$class}-has-icon { padding-left: $input-height; - + .ds-input-size-small & { padding-left: $input-height-small; } @@ -112,7 +112,7 @@ padding-left: $input-height-large; } } - + .#{$class}-has-icon-right { padding-right: $input-height; @@ -123,5 +123,5 @@ .ds-input-size-large & { padding-right: $input-height-large; } - } + } } From 23a07786a44ce4fee2f26dffb6b4f9b04a1bb64a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Fri, 18 Jan 2019 04:22:18 +0000 Subject: [PATCH 19/21] Bump graphql-tag from 2.10.0 to 2.10.1 Bumps [graphql-tag](https://github.com/apollostack/graphql-tag) from 2.10.0 to 2.10.1. - [Release notes](https://github.com/apollostack/graphql-tag/releases) - [Changelog](https://github.com/apollographql/graphql-tag/blob/master/CHANGELOG.md) - [Commits](https://github.com/apollostack/graphql-tag/commits) Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 0ef5f9373..4707e273a 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "date-fns": "^2.0.0-alpha.26", "express": "^4.16.3", "graphql": "^14.0.2", - "graphql-tag": "^2.10.0", + "graphql-tag": "^2.10.1", "jsonwebtoken": "^8.3.0", "nuxt": "^2.0.0", "nuxt-env": "^0.0.4", diff --git a/yarn.lock b/yarn.lock index a225ef6d4..d3ffae4a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5763,10 +5763,10 @@ graphql-subscriptions@^1.0.0: dependencies: iterall "^1.2.1" -graphql-tag@^2.10.0, graphql-tag@^2.9.2: - version "2.10.0" - resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.10.0.tgz#87da024be863e357551b2b8700e496ee2d4353ae" - integrity sha512-9FD6cw976TLLf9WYIUPCaaTpniawIjHWZSwIRZSjrfufJamcXbVVYfN2TWvJYbw0Xf2JjYbl1/f2+wDnBVw3/w== +graphql-tag@^2.10.1, graphql-tag@^2.9.2: + version "2.10.1" + resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.10.1.tgz#10aa41f1cd8fae5373eaf11f1f67260a3cad5e02" + integrity sha512-jApXqWBzNXQ8jYa/HLkZJaVw9jgwNqZkywa2zfFn16Iv1Zb7ELNHkJaXHR7Quvd5SIGsy6Ny7SUKATgnu05uEg== graphql-tools@^4.0.0: version "4.0.3" From d59a060b55c66e409715e5ee3cd898d1452e5dca Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Fri, 18 Jan 2019 12:43:56 +0100 Subject: [PATCH 20/21] Try to fix travis --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 241fb2577..049f097ca 100644 --- a/.travis.yml +++ b/.travis.yml @@ -23,7 +23,7 @@ install: - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT --target production -t humanconnection/nitro-web . - docker-compose -f docker-compose.yml -f docker-compose.travis.yml up -d - git clone https://github.com/Human-Connection/Nitro-Backend.git ../Nitro-Backend - - git -C "../Nitro-Backend" checkout $BACKEND_BRANCH + - git -C "../Nitro-Backend" checkout $BACKEND_BRANCH || git -C "../Nitro-Backend" checkout master - docker-compose -f ../Nitro-Backend/docker-compose.yml -f ../Nitro-Backend/docker-compose.travis.yml up -d - yarn global add cypress wait-on - yarn add cypress-cucumber-preprocessor From 4d80dab441381caecfcb5d1493db57bf7a096dfd Mon Sep 17 00:00:00 2001 From: Grzegorz Leoniec Date: Fri, 18 Jan 2019 13:45:40 +0100 Subject: [PATCH 21/21] Fixed settings form and its test --- cypress/integration/common/settings.js | 12 ++- pages/settings/index.vue | 100 ++++++++++++++----------- 2 files changed, 63 insertions(+), 49 deletions(-) diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js index 048f37b7a..b7b283e2b 100644 --- a/cypress/integration/common/settings.js +++ b/cypress/integration/common/settings.js @@ -16,9 +16,9 @@ const setUserName = name => { cy.get('input[id=name]') .clear() .type(name) - cy.contains('Save') + cy.get('[type=submit]') .click() - .wait(200) + .not('[disabled]') myName = name } @@ -31,7 +31,9 @@ When('I save {string} as my location', location => { cy.get('.ds-select-option') .contains(location) .click() - cy.contains('Save').click() + cy.get('[type=submit]') + .click() + .not('[disabled]') myLocation = location }) @@ -39,7 +41,9 @@ When('I have the following self-description:', text => { cy.get('textarea[id=bio]') .clear() .type(text) - cy.contains('Save').click() + cy.get('[type=submit]') + .click() + .not('[disabled]') aboutMeText = text }) diff --git a/pages/settings/index.vue b/pages/settings/index.vue index 94120ddf0..9db497906 100644 --- a/pages/settings/index.vue +++ b/pages/settings/index.vue @@ -1,45 +1,51 @@