From e978af535809913dbc2917c00402d2cea1eb64d2 Mon Sep 17 00:00:00 2001 From: Ola Date: Fri, 9 Apr 2021 17:53:53 +0200 Subject: [PATCH 01/12] update tab component --- {_src => src}/atoms/tab/Tab.html | 0 {_src => src}/atoms/tab/Tab.js | 0 {_src => src}/atoms/tab/Tab.spec.js | 2 +- {_src => src}/atoms/tab/Tab.vue | 0 4 files changed, 1 insertion(+), 1 deletion(-) rename {_src => src}/atoms/tab/Tab.html (100%) rename {_src => src}/atoms/tab/Tab.js (100%) rename {_src => src}/atoms/tab/Tab.spec.js (96%) rename {_src => src}/atoms/tab/Tab.vue (100%) diff --git a/_src /atoms/tab/Tab.html b/src/atoms/tab/Tab.html similarity index 100% rename from _src /atoms/tab/Tab.html rename to src/atoms/tab/Tab.html diff --git a/_src /atoms/tab/Tab.js b/src/atoms/tab/Tab.js similarity index 100% rename from _src /atoms/tab/Tab.js rename to src/atoms/tab/Tab.js diff --git a/_src /atoms/tab/Tab.spec.js b/src/atoms/tab/Tab.spec.js similarity index 96% rename from _src /atoms/tab/Tab.spec.js rename to src/atoms/tab/Tab.spec.js index 8acbb04c0..10099065a 100644 --- a/_src /atoms/tab/Tab.spec.js +++ b/src/atoms/tab/Tab.spec.js @@ -9,7 +9,7 @@ describe('Tab', () => { } }) - expect(wrapper.is('div')).toBe(true) + expect(wrapper).toBe('DIV') expect(wrapper.attributes().role).toBeDefined() expect(wrapper.attributes().role).toEqual('tabpanel') expect(wrapper.attributes('data-tab')).toBeDefined() diff --git a/_src /atoms/tab/Tab.vue b/src/atoms/tab/Tab.vue similarity index 100% rename from _src /atoms/tab/Tab.vue rename to src/atoms/tab/Tab.vue From 4f872d1e5539651cc99625adfff0dc5b18b5db76 Mon Sep 17 00:00:00 2001 From: Ola Date: Fri, 9 Apr 2021 18:03:29 +0200 Subject: [PATCH 02/12] WIP: update tabs component --- _src /molecules/tabs/Tabs.scss | 59 --------------- _src /molecules/tabs/Tabs.stories.js | 91 ----------------------- {_src => src}/molecules/tabs/Tabs.html | 17 +++-- {_src => src}/molecules/tabs/Tabs.js | 28 +++++-- src/molecules/tabs/Tabs.stories.js | 98 +++++++++++++++++++++++++ {_src => src}/molecules/tabs/Tabs.vue | 2 - 6 files changed, 129 insertions(+), 166 deletions(-) delete mode 100644 _src /molecules/tabs/Tabs.scss delete mode 100644 _src /molecules/tabs/Tabs.stories.js rename {_src => src}/molecules/tabs/Tabs.html (65%) rename {_src => src}/molecules/tabs/Tabs.js (66%) create mode 100644 src/molecules/tabs/Tabs.stories.js rename {_src => src}/molecules/tabs/Tabs.vue (82%) diff --git a/_src /molecules/tabs/Tabs.scss b/_src /molecules/tabs/Tabs.scss deleted file mode 100644 index 4f67175c1..000000000 --- a/_src /molecules/tabs/Tabs.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import '../../../assets/styles/_globals.scss'; - -// common -$tabs__border-width : 8px !default; -$tabs__outline-focus : $blue solid 1px !default; - -// button -$tabs__button-padding : $spacer--medium !default; -$tabs__button-border : $tabs__border-width solid $gray-lightest !default; -$tabs__button-border--active : $tabs__border-width solid $color-primary !default; -$tabs__button-color : $gray !default; -$tabs__button-color--active : $gray-darker !default; -$tabs__button-font-weight : $font-weight-bold !default; -$tabs__button-background : $bg-color-base !default; -$tabs__button-background--active: $gray-lightest !default; - -// content -$tabs__content-padding : $spacer--medium 0 !default; -$tabs__content-padding\@large : $spacer--large $spacer--extra-large !default; - -.a-tabs { - display: flex; - flex-wrap: wrap; - - &__nav-button { - flex: 1; - padding: $tabs__button-padding; - color: $tabs__button-color; - font-weight: $tabs__button-font-weight; - background: $tabs__button-background; - border: none; - border-bottom: $tabs__button-border; - cursor: pointer; - - &--active { - color: $tabs__button-color--active; - background-color: $tabs__button-background--active; - border-bottom: $tabs__button-border--active; - } - - &:focus { - z-index: 1; - outline: $tabs__outline-focus; - } - } - - &__content { - flex: 100%; - padding: $tabs__content-padding; - - &:focus { - outline: $tabs__outline-focus; - } - - @include mq($screen-l) { - padding: $tabs__content-padding\@large; - } - } -} diff --git a/_src /molecules/tabs/Tabs.stories.js b/_src /molecules/tabs/Tabs.stories.js deleted file mode 100644 index de182b71f..000000000 --- a/_src /molecules/tabs/Tabs.stories.js +++ /dev/null @@ -1,91 +0,0 @@ -import { storiesOf } from '@storybook/vue' -import { action } from '@storybook/addon-actions' - -import ATabs from './Tabs.vue' -import ATab from './../../atoms/tab/Tab.vue' -import AButton from './../../atoms/button/Button.vue' -import AParagraph from './../../atoms/paragraph/Paragraph.vue' -import AIcon from './../../atoms/icon/Icon.vue' -import AIconStarBorder from './../../atoms/icon/templates/IconStarBorder.vue' - -storiesOf('Molecules/Tabs', module) - .addParameters({ info: true }) - .add('Default', () => ({ - components: { - ATabs, - ATab, - AParagraph - }, - methods: { - tabClick: action('Clicked tab') - }, - template: ` - - - - Toe in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - Sed do eiusmod tempor incididunt ut labo. Ut enim ad minim veniam, re et dolore magna aliqua. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - ` - })) - .add('With slot', () => ({ - components: { - ATabs, - ATab, - AButton, - AParagraph, - AIcon, - AIconStarBorder - }, - methods: { - tabClick: action('Clicked tab') - }, - template: ` - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - Alpaca Button - - - - - Sed do eiusmod tempor incididunt ut labo. Ut enim ad minim veniam, re et dolore magna aliqua. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - ` - })) diff --git a/_src /molecules/tabs/Tabs.html b/src/molecules/tabs/Tabs.html similarity index 65% rename from _src /molecules/tabs/Tabs.html rename to src/molecules/tabs/Tabs.html index 7da8bb083..e7ae6f205 100644 --- a/_src /molecules/tabs/Tabs.html +++ b/src/molecules/tabs/Tabs.html @@ -1,6 +1,6 @@
diff --git a/_src /molecules/tabs/Tabs.js b/src/molecules/tabs/Tabs.js similarity index 66% rename from _src /molecules/tabs/Tabs.js rename to src/molecules/tabs/Tabs.js index c03be6b9f..26774f7d6 100644 --- a/_src /molecules/tabs/Tabs.js +++ b/src/molecules/tabs/Tabs.js @@ -1,12 +1,28 @@ import KeyCodes from '../../utils/key-codes' - -// @vue/component +import getClass from '../../../utils/helpers/get-class.js' export default { + mixins: [getClass], data () { return { tabs: null, - activeFocusedTab: 0 + activeFocusedTab: 0, + config: { + base: { + tabs: [ + 'lg:flex', 'lg:flex-wrap', 'justify-center' + ], + 'tabs__nav-button': [ + 'text-gray-600', 'py-4', 'px-6', 'block', 'hover:text-blue-500' + ], + 'tabs__nav-button--active': [ + 'text-gray-600', 'py-4', 'px-6', 'block', 'hover:text-blue-500', 'text-blue-500', 'border-b-2', 'font-medium', 'border-blue-500' + ], + tabs__content: [ + 'py-4' + ] + } + } } }, computed: { @@ -50,7 +66,7 @@ export default { this.focus('button_0') } else { this.activeFocusedTab = this.activeFocusedTab - 1 - this.focus('button_' + this.activeFocusedTab) + this.focus(`button_${this.activeFocusedTab}`) } } else if ( (key === KeyCodes.RIGHT || @@ -59,10 +75,10 @@ export default { this.activeFocusedTab < this.tabs.length - 1 ) { if (key === KeyCodes.END) { - this.focus('button_' + (this.tabs.length - 1)) + this.focus(`button_${this.tabs.length - 1}`) } else { this.activeFocusedTab = this.activeFocusedTab + 1 - this.focus('button_' + this.activeFocusedTab) + this.focus(`button_${this.activeFocusedTab}`) } } this.selectTab(this.activeFocusedTab) diff --git a/src/molecules/tabs/Tabs.stories.js b/src/molecules/tabs/Tabs.stories.js new file mode 100644 index 000000000..4011ca988 --- /dev/null +++ b/src/molecules/tabs/Tabs.stories.js @@ -0,0 +1,98 @@ +import ATabs from './Tabs.vue' +import ATab from './../../atoms/tab/Tab.vue' +import AButton from './../../atoms/button/Button.vue' +import AParagraph from './../../atoms/paragraph/Paragraph.vue' +import AIcon from './../../atoms/icon/Icon.vue' +import AIconStarBorder from './../../atoms/icon/templates/IconStarBorder.vue' + +export default { + title: 'Molecules/Tabs', + component: ATabs, + argTypes: { + tabClick: { + action: 'clicked tab' + } + } +} + +const Template = (args, { argTypes }) => ({ + components: { + ATabs, + ATab, + AButton, + AParagraph, + AIcon, + AIconStarBorder + }, + props: Object.keys(argTypes), + template: ` + + + + Toe in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + + + + Sed do eiusmod tempor incididunt ut labo. Ut enim ad minim veniam, re et dolore magna aliqua. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + + + ` +}) + +export const Default = Template.bind({}) + +export const WithSlots = (args, { argTypes }) => ({ + components: { + ATabs, + ATab, + AButton, + AParagraph, + AIcon, + AIconStarBorder + }, + props: Object.keys(argTypes), + template: ` + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + + + + Alpaca Button + + + + + Sed do eiusmod tempor incididunt ut labo. Ut enim ad minim veniam, re et dolore magna aliqua. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + + + ` +}) diff --git a/_src /molecules/tabs/Tabs.vue b/src/molecules/tabs/Tabs.vue similarity index 82% rename from _src /molecules/tabs/Tabs.vue rename to src/molecules/tabs/Tabs.vue index b2f3a7786..7f43547f5 100644 --- a/_src /molecules/tabs/Tabs.vue +++ b/src/molecules/tabs/Tabs.vue @@ -10,5 +10,3 @@ export default { mixins: [ATabs] } - -