diff --git a/config/storybook/preview.js b/config/storybook/preview.js index 1d12b586..ff3d2695 100644 --- a/config/storybook/preview.js +++ b/config/storybook/preview.js @@ -7,10 +7,15 @@ import ElColorPicker from 'element-ui/lib/color-picker' import '../../src/styles/index.scss' import './index.scss' import mainStore from '../../src/store' +import { setTheme } from '../../src/utils' import { ElementUIPlugin } from '../../src/plugins' +import { SDesignSystemProvider } from '../../src/components' Vue.use(ElementUIPlugin) Vue.use(ElColorPicker) +setTheme() +document.documentElement.style.setProperty('color', 'var(--s-color-base-content-primary)') +document.documentElement.style.setProperty('background-color', 'var(--s-color-utility-body)') addParameters({ options: { @@ -30,8 +35,14 @@ addParameters({ addDecorator(withA11y) addDecorator(() => ({ + components: { SDesignSystemProvider }, template: `
- + + +
`, - store: mainStore + store: mainStore, + computed: { + designSystem: () => mainStore?.getters?.libraryDesignSystem + } })) diff --git a/src/components/Button/SButton/SButton.vue b/src/components/Button/SButton/SButton.vue index 771c8b69..03a03e06 100644 --- a/src/components/Button/SButton/SButton.vue +++ b/src/components/Button/SButton/SButton.vue @@ -180,14 +180,16 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design } get isRounded (): boolean { - if (([ButtonTypes.ACTION] as Array).includes(this.type)) return this.rounded - + if (this.type === ButtonTypes.ACTION) { + return this.rounded + } return false } get isLoading (): boolean { - if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) return false - + if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) { + return false + } return this.loading } diff --git a/src/store/LibraryTheme.ts b/src/store/LibraryTheme.ts index 9bdfea2b..0b80b1a3 100644 --- a/src/store/LibraryTheme.ts +++ b/src/store/LibraryTheme.ts @@ -24,7 +24,8 @@ type State = { function initialState (): State { return { - theme: Theme.LIGHT, + // "light" is set by default + theme: localStorage.getItem('libraryTheme') as Theme || Theme.LIGHT, designSystem: DesignSystem.DEFAULT } } @@ -43,6 +44,7 @@ const getters = { const mutations = { [types.SET_THEME] (state: State, theme: Theme) { state.theme = theme + localStorage.setItem('libraryTheme', theme) }, [types.SET_DESIGN_SYSTEM] (state: State, designSystem: DesignSystem) { state.designSystem = designSystem @@ -50,8 +52,12 @@ const mutations = { } const actions = { - setTheme ({ commit }, theme: Theme) { - commit(types.SET_THEME, theme) + setTheme ({ commit, state: { theme } }, newTheme?: Theme) { + const computedTheme = newTheme || theme + if (!newTheme || theme !== newTheme) { + commit(types.SET_THEME, computedTheme) + } + document.documentElement.setAttribute('design-system-theme', computedTheme) }, setDesignSystem ({ commit }, designSystem: DesignSystem) { commit(types.SET_DESIGN_SYSTEM, designSystem) diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts index 79899a72..9e76a169 100644 --- a/src/stories/Collapse/SCollapse.stories.ts +++ b/src/stories/Collapse/SCollapse.stories.ts @@ -1,8 +1,7 @@ import { withKnobs, boolean, select } from '@storybook/addon-knobs' -import { SCollapse, SCollapseItem, SDesignSystemProvider } from '../../components' +import { SCollapse, SCollapseItem } from '../../components' import { BorderTypes } from '../../components/Collapse' -import DesignSystem from '../../types/DesignSystem' export default { component: SCollapse, @@ -11,9 +10,8 @@ export default { } export const configurable = () => ({ - components: { SCollapse, SCollapseItem, SDesignSystemProvider }, - template: ` - + components: { SCollapse, SCollapseItem }, + template: `
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
@@ -31,12 +29,8 @@ export const configurable = () => ({
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
 - - `, + `, props: { - designSystem: { - default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT) - }, accordion: { default: boolean('Accordion', false) }, diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts index 1f1d4ed0..fb63624c 100644 --- a/src/stories/Intro/Customization.stories.ts +++ b/src/stories/Intro/Customization.stories.ts @@ -1,6 +1,6 @@ import { withKnobs } from '@storybook/addon-knobs' -import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, BorderRadius } from '../../types' +import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, BorderRadius, ColorPrefix } from '../../types' import { SRow, SButton, SInput, SCol, SDivider } from '../../components' import { differentTypeButtonsData } from '../SButton.stories' @@ -16,9 +16,8 @@ const getRadiusData = (BorderRadius) => Object.values(BorderRadius).map(borderRa return { label: borderRadiusPropertyName, value } }) -const colorPropertyPrefix = '--s-color-' const getColorsData = (colors) => Object.values(colors).map(colorPropertyName => { - const value = getComputedStyle(document.documentElement).getPropertyValue(`${colorPropertyPrefix}${colorPropertyName}`) + const value = getComputedStyle(document.documentElement).getPropertyValue(`${ColorPrefix}${colorPropertyName}`) const isRgb = value.includes('rgb') return { label: colorPropertyName, value, isRgb } }) @@ -114,7 +113,7 @@ export const configurable = () => ({ }), methods: { handleColorChange: (label: string, color: string) => { - document.documentElement.style.setProperty(`${colorPropertyPrefix}${label}`, color) + document.documentElement.style.setProperty(`${ColorPrefix}${label}`, color) }, handleBorderRadiusChange: (label: string, borderRadius: string) => { document.documentElement.style.setProperty(`${borderRadiusPropertyPrefix}${label}`, `${+borderRadius > 0 ? borderRadius : '0'}px`) diff --git a/src/stories/Intro/Theming.stories.ts b/src/stories/Intro/Theming.stories.ts new file mode 100644 index 00000000..e08b55b9 --- /dev/null +++ b/src/stories/Intro/Theming.stories.ts @@ -0,0 +1,41 @@ +import { withKnobs } from '@storybook/addon-knobs' + +import Theme from '../../types/Theme' +import DesignSystem from '../../types/DesignSystem' +import { SButton, SDivider } from '../../components' +import { setTheme, setDesignSystem } from '../../utils' +import mainStore from '../../store' + +export default { + title: 'Design System/Intro/Theming (WIP)', + decorators: [withKnobs], + excludeStories: /.*Data$/ +} + +export const configurable = () => ({ + components: { SButton, SDivider }, + template: `
+

This feature has Work In Progress status

+
+

Theme:

+ {{ theme }} + {{ designSystem || 'default' }} +
+ +

You can check all components, these theme settings are applied to the whole library

+
`, + computed: { + theme: () => mainStore?.getters?.libraryTheme, + designSystem: () => mainStore?.getters?.libraryDesignSystem + }, + methods: { + handleThemeChange: (theme: Theme) => { + const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT + setTheme(newTheme) + }, + handleDesignSystemChange: (designSystem: DesignSystem) => { + const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT + setDesignSystem(newDesignSystem) + } + } +}) diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 3f12aab1..7604f2ec 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,9 +1,8 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow, SCol, SMain, SIcon, SDesignSystemProvider } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain, SIcon } from '../components' import { ButtonTypes, ButtonIconPosition } from '../components/Button' import { Size, BorderRadius } from '../types' -import DesignSystem from '../types/DesignSystem' export default { component: SButton, @@ -13,10 +12,8 @@ export default { } export const configurable = () => ({ - components: { SButton, SIcon, SDesignSystemProvider }, - template: ` - - ({ :alternative="alternative" :primary="primary" @click="handleClick" - > - - {{ content }} - - `, + > + + {{ content }} + `, props: { - designSystem: { - default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT) - }, disabled: { default: boolean('Disabled', false) }, @@ -96,25 +89,19 @@ export const differentTypeButtonsData = Object.values(ButtonTypes).map(type => { return data }) export const withDifferentTypes = () => ({ - components: { SButton, SRow, SDesignSystemProvider }, - template: ` - - - - {{ item.label }} - - - `, + components: { SButton, SRow }, + template: ` + + {{ item.label }} + + `, props: { - designSystem: { - default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT) - }, items: { default: () => differentTypeButtonsData } diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts index 73bd9996..b959eb97 100644 --- a/src/stories/SCard.stories.ts +++ b/src/stories/SCard.stories.ts @@ -1,9 +1,8 @@ import { text, withKnobs, select, boolean } from '@storybook/addon-knobs' -import { SCard, SRow, SDropdown, SDropdownItem, SDesignSystemProvider } from '../components' +import { SCard, SRow, SDropdown, SDropdownItem } from '../components' import { CardShadow } from '../components/Card' import { BorderRadius, Status, Size } from '../types' -import DesignSystem from '../types/DesignSystem' export default { component: SCard, @@ -12,10 +11,8 @@ export default { } export const configurable = () => ({ - components: { SCard, SRow, SDropdown, SDropdownItem, SDesignSystemProvider }, - template: ` - - + components: { SCard, SRow, SDropdown, SDropdownItem }, + template: `