diff --git a/package.json b/package.json index 076606e5..a7f990b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.7", + "version": "1.0.8", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/store/LibraryTheme.ts b/src/store/LibraryTheme.ts index 0b80b1a3..725ecbc9 100644 --- a/src/store/LibraryTheme.ts +++ b/src/store/LibraryTheme.ts @@ -11,6 +11,7 @@ const types = flow( flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']), concat([ 'SET_THEME', + 'SWITCH_THEME', 'SET_DESIGN_SYSTEM' ]), map(x => [x, x]), @@ -46,6 +47,7 @@ const mutations = { state.theme = theme localStorage.setItem('libraryTheme', theme) }, + [types.SWITCH_THEME] (state: State) {}, [types.SET_DESIGN_SYSTEM] (state: State, designSystem: DesignSystem) { state.designSystem = designSystem } @@ -59,6 +61,11 @@ const actions = { } document.documentElement.setAttribute('design-system-theme', computedTheme) }, + async switchTheme ({ commit, state: { theme }, dispatch }) { + const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT + commit(types.SWITCH_THEME) + await dispatch('setTheme', newTheme) + }, setDesignSystem ({ commit }, designSystem: DesignSystem) { commit(types.SET_DESIGN_SYSTEM, designSystem) } diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 7604f2ec..b804b5a8 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -14,7 +14,7 @@ export default { export const configurable = () => ({ components: { SButton, SIcon }, template: ` ({ content: { default: text('Button text', 'Default') }, + withTypography: { + default: boolean('With Typography css class', false) + }, typography: { default: text('Typographic css class', 's-typography-button--large') }, diff --git a/src/utils/index.ts b/src/utils/index.ts index 80159a57..bc28d4b5 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -7,6 +7,10 @@ export const setTheme = async (theme?: Theme) => { await store.dispatch('setTheme', theme) } +export const switchTheme = async () => { + await store.dispatch('switchTheme') +} + export const setDesignSystem = async (designSystem: DesignSystem) => { await store.dispatch('setDesignSystem', designSystem) }