soramitsu · stefashkaa · Aug 2, 2021 · Jul 27, 2021 · Jul 30, 2021 · Jul 30, 2021
diff --git 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: `<div class="s-flex" style="padding: 20px;">
-               <story/>
+               <s-design-system-provider :value="designSystem">
+                 <story />
+               </s-design-system-provider>
              </div>`,
-  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
@@ -180,14 +180,16 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design
   }
 
   get isRounded (): boolean {
-    if (([ButtonTypes.ACTION] as Array<string>).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<string>).includes(this.type)) return false
-
+    if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array<string>).includes(this.type)) {
+      return false
+    }
     return this.loading
   }
 

diff --git 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,15 +44,20 @@ 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
   }
 }
 
 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
@@ -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: `<s-design-system-provider :value="designSystem">
-              <s-collapse :accordion="accordion" :borders="borders" :borders-type="bordersType" @change="handleChange" style="flex: 1;">
+  components: { SCollapse, SCollapseItem },
+  template: `<s-collapse :accordion="accordion" :borders="borders" :borders-type="bordersType" @change="handleChange" style="flex: 1;">
                <s-collapse-item title="Consistency" name="1">
                  <div>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;</div>
                  <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
@@ -31,12 +29,8 @@ export const configurable = () => ({
                  <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
                  <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
                </s-collapse-item>
-             </s-collapse>
-             </s-design-system-provider>`,
+             </s-collapse>`,
   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
@@ -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
@@ -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: `<div>
+               <h4>This feature has Work In Progress status</h4>
+               <div class="s-flex" style="align-items: center;">
+                 <h4 style="margin-right: 10px;">Theme:</h4>
+                 <s-button @click="handleThemeChange(theme)">{{ theme }}</s-button>
+                 <s-button @click="handleDesignSystemChange(designSystem)">{{ designSystem || 'default' }}</s-button>
+               </div>
+               <s-divider />
+               <h4>You can check all components, these theme settings are applied to the whole library</h4>
+             </div>`,
+  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
@@ -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: `
-            <s-design-system-provider :value="designSystem">
-              <s-button
+  components: { SButton, SIcon },
+  template: `<s-button
                :class="typography"
                :disabled="disabled"
                :loading="loading"
@@ -28,15 +25,11 @@ export const configurable = () => ({
                :alternative="alternative"
                :primary="primary"
                @click="handleClick"
-              >
-                <s-icon v-if="isAction" :name="icon"/>
-                <span v-else>{{ content }}</span>
-              </s-button>
-            </s-design-system-provider>`,
+             >
+               <s-icon v-if="isAction" :name="icon"/>
+               <span v-else>{{ content }}</span>
+             </s-button>`,
   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: `
-            <s-design-system-provider :value="designSystem">
-              <s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
-                <s-button
-                  v-for="item in items"
-                  :key="item.type"
-                  :type="item.type"
-                  :tooltip="item.tooltip"
-                  :icon="item.icon"
-                >
-                  {{ item.label }}
-                </s-button>
-              </s-row>
-            </s-design-system-provider>`,
+  components: { SButton, SRow },
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-button
+                 v-for="item in items"
+                 :key="item.type"
+                 :type="item.type"
+                 :tooltip="item.tooltip"
+                 :icon="item.icon"
+               >
+                 {{ item.label }}
+               </s-button>
+             </s-row>`,
   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
@@ -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: `
-            <s-design-system-provider :value="designSystem">
-              <s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  components: { SCard, SRow, SDropdown, SDropdownItem },
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-card style="width: 80%;" :shadow="shadow" :border-radius="borderRadius" :clickable="clickable" :pressed="pressed" :primary="primary" :status="status" :size="size" @click="handleClick">
                  <template slot="header" v-if="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
@@ -34,12 +31,8 @@ export const configurable = () => ({
                    {{'List item ' + o }}
                  </div>
                </s-card>
-              </s-row>
-            </s-design-system-provider>`,
+             </s-row>`,
   props: {
-    designSystem: {
-      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
-    },
     shadow: {
       default: select('Shadow', Object.values(CardShadow), CardShadow.HOVER)
     },

diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
@@ -1,8 +1,7 @@
 import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
-import { SDialog, SRow, SButton, SDesignSystemProvider } from '../components'
+import { SDialog, SRow, SButton } from '../components'
 import { BorderRadius } from '../types'
-import DesignSystem from '../types/DesignSystem'
 
 export default {
   component: SDialog,
@@ -11,45 +10,40 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SDialog, SRow, SButton, SDesignSystemProvider },
-  template: `<s-design-system-provider :value="designSystem">
-              <s-row
-                class="s-flex"
-                style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
-              >
-                <s-button size="medium" @click="visible = true">Open Dialog</s-button>
-                <s-dialog
-                  :visible.sync="visible"
-                  :modal="modal"
-                  :title="title"
-                  :width="width"
-                  :fullscreen="fullscreen"
-                  :top="top"
-                  :border-radius="borderRadius"
-                  :show-close="showClose"
-                  :close-on-click-modal="closeOnClickModal"
-                  :close-on-esc="closeOnEsc"
-                  :center="center"
-                  @open="handleOpen"
-                  @close="handleClose"
-                  @after-opened="handleAfterOpened"
-                  @after-closed="handleAfterClosed"
-                >
-                  <span>Default content</span>
-                  <template #footer>
-                    <s-button type="primary" size="medium" @click="visible = false">Confirm</s-button>
-                    <s-button type="secondary" size="medium" @click="visible = false">Cancel</s-button>
-                  </template>
-                </s-dialog>
-              </s-row>
-            </s-design-system-provider>`,
+  components: { SDialog, SRow, SButton },
+  template: `<s-row
+               class="s-flex"
+               style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
+             >
+               <s-button size="medium" @click="visible = true">Open Dialog</s-button>
+               <s-dialog
+                 :visible.sync="visible"
+                 :modal="modal"
+                 :title="title"
+                 :width="width"
+                 :fullscreen="fullscreen"
+                 :top="top"
+                 :border-radius="borderRadius"
+                 :show-close="showClose"
+                 :close-on-click-modal="closeOnClickModal"
+                 :close-on-esc="closeOnEsc"
+                 :center="center"
+                 @open="handleOpen"
+                 @close="handleClose"
+                 @after-opened="handleAfterOpened"
+                 @after-closed="handleAfterClosed"
+               >
+                 <span>Default content</span>
+                 <template #footer>
+                   <s-button type="primary" size="medium" @click="visible = false">Confirm</s-button>
+                   <s-button type="secondary" size="medium" @click="visible = false">Cancel</s-button>
+                 </template>
+               </s-dialog>
+             </s-row>`,
   data: () => ({
     visible: false
   }),
   props: {
-    designSystem: {
-      default: select('Design System', Object.values(DesignSystem), DesignSystem.DEFAULT)
-    },
     modal: {
       default: boolean('Modal', true)
     },