diff --git a/package.json b/package.json index 4e9721d3..412e29fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.2.7", + "version": "0.2.8", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/" diff --git a/src/assets/fonts/soramitsu-icons.woff b/src/assets/fonts/soramitsu-icons.woff new file mode 100644 index 00000000..d7fe06f0 Binary files /dev/null and b/src/assets/fonts/soramitsu-icons.woff differ diff --git a/src/assets/icons/activity.svg b/src/assets/icons/activity.svg deleted file mode 100644 index f0c76a4a..00000000 --- a/src/assets/icons/activity.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg deleted file mode 100644 index 13216e69..00000000 --- a/src/assets/icons/arrow-left.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/icons/arrow-top.svg b/src/assets/icons/arrow-top.svg deleted file mode 100644 index 2436d0c7..00000000 --- a/src/assets/icons/arrow-top.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/create.svg b/src/assets/icons/create.svg deleted file mode 100644 index 0ef0864d..00000000 --- a/src/assets/icons/create.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/icons/email.svg b/src/assets/icons/email.svg deleted file mode 100644 index eb67d2e9..00000000 --- a/src/assets/icons/email.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/file-upload.svg b/src/assets/icons/file-upload.svg deleted file mode 100644 index 60eac80c..00000000 --- a/src/assets/icons/file-upload.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/globe.svg b/src/assets/icons/globe.svg deleted file mode 100644 index bdaaf594..00000000 --- a/src/assets/icons/globe.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/icons/link-off.svg b/src/assets/icons/link-off.svg deleted file mode 100644 index c9aebc1f..00000000 --- a/src/assets/icons/link-off.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/link-on.svg b/src/assets/icons/link-on.svg deleted file mode 100644 index bd161522..00000000 --- a/src/assets/icons/link-on.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/log-out.svg b/src/assets/icons/log-out.svg deleted file mode 100644 index 98cfd13c..00000000 --- a/src/assets/icons/log-out.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/assets/icons/more-horizontal.svg b/src/assets/icons/more-horizontal.svg deleted file mode 100644 index dc1ec966..00000000 --- a/src/assets/icons/more-horizontal.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg deleted file mode 100644 index 6d53a8df..00000000 --- a/src/assets/icons/play.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg deleted file mode 100644 index 4977f632..00000000 --- a/src/assets/icons/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/refresh-red.svg b/src/assets/icons/refresh-red.svg deleted file mode 100644 index d4db0de1..00000000 --- a/src/assets/icons/refresh-red.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/icons/refresh.svg b/src/assets/icons/refresh.svg deleted file mode 100644 index 3c460cf8..00000000 --- a/src/assets/icons/refresh.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg deleted file mode 100644 index 44135c3e..00000000 --- a/src/assets/icons/stop.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/warning.svg b/src/assets/icons/warning.svg deleted file mode 100644 index e8a57025..00000000 --- a/src/assets/icons/warning.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 5622b21b..37513e00 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -13,7 +13,7 @@ :icon="elementIcon" @click="handleClick" > - + @@ -24,11 +24,12 @@ import { Vue, Component, Prop, Inject } from 'vue-property-decorator' import { ElForm } from 'element-ui/types/form' import { ElFormItem } from 'element-ui/types/form-item' +import { SIcon } from '../Icon' import { STooltip } from '../Tooltip' import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts' @Component({ - components: { STooltip } + components: { SIcon, STooltip } }) export default class SButton extends Vue { readonly ButtonTypes = ButtonTypes @@ -138,9 +139,8 @@ export default class SButton extends Vue { this.elementIcon = this.icon return '' } - // TODO: add checks for invalid icons this.elementIcon = '' - return `s-icon-${this.icon}` + return this.icon } get isLoading (): boolean { @@ -235,31 +235,60 @@ export default class SButton extends Vue { .action { &.big { width: $size-big; + i { + font-size: 20px; + } } &.medium { width: $size-medium; + i { + font-size: 18px; + } } &.small { width: $size-small; + i { + font-size: 16px; + margin-left: -2px; + margin-top: -2px; + } } + color: $color-basic-black; background-color: $color-neutral-placeholder; border-color: $color-neutral-placeholder; &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + color: $color-basic-black; background-color: $color-neutral-hover; border-color: $color-neutral-hover; } + &:disabled, &:disabled:hover { + color: $color-neutral-inactive; + } &.alternative { background-color: $color-basic-white; border-color: $color-neutral-border; &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + color: $color-basic-black; background-color: $color-neutral-placeholder; border-color: $color-neutral-placeholder; } + &:disabled, &:disabled:hover { + color: $color-neutral-inactive; + } } } -button > span > i { - top: -10px; - left: -10px; +button { + > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + display: inline-block; + color: inherit; + } + } + &:not(.action) > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + margin-right: 6px; + } + } } diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts index 6105f843..78f1e9da 100644 --- a/src/components/Button/consts.ts +++ b/src/components/Button/consts.ts @@ -1,4 +1,4 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export enum ButtonTypes { PRIMARY = 'primary', diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts index 96554de5..f7d55fd0 100644 --- a/src/components/Checkbox/consts.ts +++ b/src/components/Checkbox/consts.ts @@ -1,3 +1,3 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export const CheckboxSize = Size diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue index d1feb8db..7d16c283 100644 --- a/src/components/Collapse/SCollapse.vue +++ b/src/components/Collapse/SCollapse.vue @@ -2,6 +2,7 @@ @@ -9,7 +10,7 @@ diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue new file mode 100644 index 00000000..6517e44c --- /dev/null +++ b/src/components/Divider/SDivider.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/components/Divider/consts.ts b/src/components/Divider/consts.ts new file mode 100644 index 00000000..10f7624d --- /dev/null +++ b/src/components/Divider/consts.ts @@ -0,0 +1,9 @@ +import { Direction } from '../../types' + +export enum ContentPosition { + LEFT = 'left', + RIGHT = 'right', + CENTER = 'center' +} + +export const DividerDirection = Direction diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts new file mode 100644 index 00000000..7426c29d --- /dev/null +++ b/src/components/Divider/index.ts @@ -0,0 +1,3 @@ +import SDivider from './SDivider.vue' + +export { SDivider } diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue index 9483244e..276436f2 100644 --- a/src/components/Dropdown/SDropdown.vue +++ b/src/components/Dropdown/SDropdown.vue @@ -29,7 +29,7 @@ - + @@ -222,9 +222,8 @@ export default class SDropdown extends Vue { > i { cursor: pointer; } -} -.ellipsis.el-popper[x-placement^=bottom] { - margin-top: 25px; - margin-left: 12px; + .s-icon-more-horizontal { + font-size: 24px; + } } diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts index c6d7fb5f..8fd34a23 100644 --- a/src/components/Dropdown/consts.ts +++ b/src/components/Dropdown/consts.ts @@ -1,4 +1,4 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export enum DropdownType { DEFAULT = 'default', diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue index 1c286c97..7fc292a5 100644 --- a/src/components/Form/SFormItem.vue +++ b/src/components/Form/SFormItem.vue @@ -179,9 +179,10 @@ export default class SFormItem extends Vue { } .s-icon-error { position: absolute; - width: 21px; - height: 21px; - background-position: 4px bottom; + bottom: 0; + left: 4px; + font-size: 16px; + color: $color-error; } } } diff --git a/src/components/Form/consts.ts b/src/components/Form/consts.ts index 722d430f..0b7baf42 100644 --- a/src/components/Form/consts.ts +++ b/src/components/Form/consts.ts @@ -1,4 +1,4 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export enum LabelPosition { LEFT = 'left', diff --git a/src/components/Icon/SIcon.vue b/src/components/Icon/SIcon.vue new file mode 100644 index 00000000..67103ad3 --- /dev/null +++ b/src/components/Icon/SIcon.vue @@ -0,0 +1,50 @@ + + + diff --git a/src/components/Icon/consts.ts b/src/components/Icon/consts.ts new file mode 100644 index 00000000..c8537cb3 --- /dev/null +++ b/src/components/Icon/consts.ts @@ -0,0 +1,155 @@ +export enum Icons { + Back = 'back', + Warning = 'warning', + Error = 'error', + Logout = 'logout', + Create = 'create', + Refresh = 'refresh', + Activity = 'activity', + Play = 'play', + Stop = 'stop', + BarChart = 'bar-chart', + Book = 'book', + BookmarkAdd = 'bookmark-add', + BookmarkNo = 'bookmark-no', + Bookmark = 'bookmark', + Bookmarks = 'bookmarks', + Box = 'box', + BrowserNo = 'browser-no', + Browser = 'browser', + Brush = 'brush', + Calculator = 'calculator', + CameraCreate = 'camera-create', + CameraNo = 'camera-no', + Camera = 'camera', + Case = 'case', + CheckMark = 'check-mark', + CheckMarks = 'check-marks', + CircleBlock = 'circle-block', + CircleChecked = 'circle-checked', + CircleMenu = 'circle-menu', + CircleMinus = 'circle-minus', + CircleMoreHorizontal = 'circle-more-horizontal', + CircleMoreVertical = 'circle-more-vertical', + CirclePlus = 'circle-plus', + CircleStar = 'circle-star', + CircleX = 'circle-x', + Circle = 'circle', + ClearStyle = 'clear-style', + Copy = 'copy', + Cut = 'cut', + Dashboard = 'dashboard', + Delete = 'delete', + DownloadBold = 'download-bold', + Download = 'download', + Drop = 'drop', + ExternalLink = 'external-link', + EyeNo = 'eye-no', + Eye = 'eye', + Flag = 'flag', + Flame = 'flame', + Glasses = 'glasses', + GlobeNo = 'globe-no', + Globe = 'globe', + HeartNo = 'heart-no', + Heart = 'heart', + Home = 'home', + Image = 'image', + Inbox = 'inbox', + Layers = 'layers', + LightningNo = 'lightning-no', + Lightning = 'lightning', + LinkNo = 'link-no', + Link = 'link', + List = 'list', + Mail = 'mail', + Maximize = 'maximize', + MenuDots = 'menu-dots', + Menu = 'menu', + MicNo = 'mic-no', + Mic = 'mic', + Minimize = 'minimize', + Minus = 'minus', + MoreHorizontal = 'more-horizontal', + MoreVertical = 'more-vertical', + Newspaper = 'newspaper', + Options = 'options', + PaperclipNo = 'paperclip-no', + Paperclip = 'paperclip', + PencilCreate = 'pencil-create', + PencilEdit = 'pencil-edit', + Plus = 'plus', + Presentation = 'presentation', + Printer = 'printer', + Pulse = 'pulse', + Scan = 'scan', + Screenshot = 'screenshot', + Search = 'search', + Send = 'send', + Settings = 'settings', + ShareArrow = 'share-arrow', + Share = 'share', + StarNo = 'star-no', + Star = 'star', + Sticker = 'sticker', + table = 'table', + TextAlignCenter = 'text-align-center', + TextAlignJustify = 'text-align-justify', + TextAlignLeft = 'text-align-left', + TextAlignRight = 'text-align-right', + TextBgcolor = 'text-bgcolor', + TextBold = 'text-bold', + TextColor = 'text-color', + TextItalic = 'text-italic', + TextUnderline = 'text-underline', + ThumbsDown = 'thumbs-down', + ThumbsUp = 'thumbs-up', + ToggleLeft = 'toggle-left', + ToggleRight = 'toggle-right', + TrashEmpty = 'trash-empty', + Trash = 'trash', + User = 'user', + VideoNo = 'video-no', + Video = 'video', + ZoomIn = 'zoom-in', + ZoomOut = 'zoom-out', + ArrowBottomLeft = 'arrow-bottom-left', + ArrowBottomRight = 'arrow-bottom-right', + ArrowBottom = 'arrow-bottom', + ArrowLeft = 'arrow-left', + ArrowRight = 'arrow-right', + ArrowTopLeft = 'arrow-top-left', + ArrowTopRight = 'arrow-top-right', + ArrowTop = 'arrow-top', + Calendar = 'calendar', + CallPhone = 'call-phone', + ChevronBottom = 'chevron-bottom', + ChevronLeft = 'chevron-left', + ChevronRight = 'chevron-right', + ChevronTop = 'chevron-top', + ChevronsBottom = 'chevrons-bottom', + ChevronsLeft = 'chevrons-left', + ChevronsRight = 'chevrons-right', + CircleArrowBottom = 'circle-arrow-bottom', + CircleArrowLeft = 'circle-arrow-left', + CircleArrowRight = 'circle-arrow-right', + CircleArrowTop = 'circle-arrow-top', + CircleChevronBottom = 'circle-chevron-bottom', + CircleChevronLeft = 'circle-chevron-left', + CircleChevronRight = 'circle-chevron-right', + CircleChevronTop = 'circle-chevron-top', + CircleChevronsTop = 'circle-chevrons-top', + File = 'file', + FileUpload = 'file-upload', + Folder = 'folder', + Info = 'info', + Lock = 'lock', + PaperclipVertical = 'paperclip-vertical', + Pencil = 'pencil', + Pin = 'pin', + QuestionCircle = 'question-circle', + Target = 'target', + Time = 'time', + WiFi = 'wi-fi', + X = 'x' +} diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts new file mode 100644 index 00000000..03323d1c --- /dev/null +++ b/src/components/Icon/index.ts @@ -0,0 +1,4 @@ +import SIcon from './SIcon.vue' +import { Icons } from './consts' + +export { SIcon, Icons } diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue index 8cf14ce6..5f8a87fc 100644 --- a/src/components/Input/SInput.vue +++ b/src/components/Input/SInput.vue @@ -29,7 +29,7 @@ @focus="handleFocus" /> @@ -121,8 +121,21 @@ export default class SInput extends Vue { @Inject({ default: '', from: 'elForm' }) elForm!: ElForm focused = false + autofill = false model = this.value + mounted (): void { + this.$el.addEventListener('animationstart', this.changeAutofillValue) + } + + destroyed (): void { + this.$el.removeEventListener('animationstart', this.changeAutofillValue) + } + + private changeAutofillValue (e: any): void { + this.autofill = e.animationName === 'onAutoFillStart' + } + @Watch('value') private handlePropChange (value: string | number): void { this.model = value @@ -153,6 +166,9 @@ export default class SInput extends Vue { if (this.type === InputType.TEXT_FILE) { cssClasses.push('text-file') } + if (this.autofill) { + cssClasses.push('autofill') + } return cssClasses } @@ -298,6 +314,26 @@ export default class SInput extends Vue { border-color: $color-neutral-border; } } + &.autofill { + .placeholder { + background-color: transparent !important; + } + } + .el-input > input { + &:-webkit-autofill { + color: $color-basic-black !important; + animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown + } + &:not(:-webkit-autofill) { + animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel + } + &:-internal-autofill-selected { + animation-name: onAutoFillStart; + } + &:not(:-internal-autofill-selected) { + animation-name: onAutoFillCancel; + } + } .placeholder + .el-input { > input { padding-top: 12px; @@ -313,10 +349,12 @@ export default class SInput extends Vue { .el-input > input { padding-right: 56px; } - .s-icon-file { + .s-icon-file-upload { top: 16px; right: 16px; + font-size: 24px; z-index: 1; + position: absolute; + input { cursor: pointer; position: absolute; @@ -330,5 +368,12 @@ export default class SInput extends Vue { } } } - +@keyframes onAutoFillStart { + from {/**/} + to {/**/} +} +@keyframes onAutoFillCancel { + from {/**/} + to {/**/} +} diff --git a/src/components/Layout/Container/consts.ts b/src/components/Layout/Container/consts.ts index 1865dc9b..fc6aae38 100644 --- a/src/components/Layout/Container/consts.ts +++ b/src/components/Layout/Container/consts.ts @@ -1,4 +1,3 @@ -export enum ContainerDirection { - VERTICAL = 'vertical', - HORIZONTAL = 'horizontal' -} +import { Direction } from '../../../types' + +export const ContainerDirection = Direction diff --git a/src/components/Layout/Header/SHeader.vue b/src/components/Layout/Header/SHeader.vue index 2715d822..8fb34577 100644 --- a/src/components/Layout/Header/SHeader.vue +++ b/src/components/Layout/Header/SHeader.vue @@ -24,5 +24,6 @@ export default class SHeader extends Vue { padding: 12px; box-shadow: 0px 0px 8px rgba(45, 41, 38, 0.2); font-size: 18px; + z-index: 1; } diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue index 802a8e64..fa76ffaf 100644 --- a/src/components/Menu/SMenu.vue +++ b/src/components/Menu/SMenu.vue @@ -2,6 +2,7 @@ @@ -78,10 +63,17 @@ export default class SSubmenu extends Vue { border-radius: 6px; [class^=s-icon-] { margin-right: 12px; + font-size: 20px; + } + i { + color: var(--s-menu-text-color); } .is-active > & { border-bottom-color: transparent !important; background-color: var(--s-menu-color-hover) !important; + i { + color: var(--s-menu-text-color-active); + } } &:not(.is-disabled):hover { background-color: var(--s-menu-color-hover) !important; diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue index 43406972..915db4dc 100644 --- a/src/components/ScrollSections/SScrollSectionItem.vue +++ b/src/components/ScrollSections/SScrollSectionItem.vue @@ -3,13 +3,18 @@ {{ title }} + @@ -39,6 +50,9 @@ export default class SScrollSectionItem extends Vue { } &:last-child { margin-bottom: 10px; + .el-divider.el-divider--horizontal { + height: 0; + } } .title { font-weight: bold; diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue index 18ec3e78..fe3bc35f 100644 --- a/src/components/ScrollSections/SScrollSections.vue +++ b/src/components/ScrollSections/SScrollSections.vue @@ -24,7 +24,7 @@ + + diff --git a/src/components/Tab/consts.ts b/src/components/Tab/consts.ts new file mode 100644 index 00000000..5ae902a9 --- /dev/null +++ b/src/components/Tab/consts.ts @@ -0,0 +1,12 @@ +export enum TabsType { + ROUNDED = 'rounded', + CARD = 'card', + BORDER_CARD = 'border-card' +} + +export enum TabsPosition { + TOP = 'top', + BOTTOM = 'bottom', + RIGHT = 'right', + LEFT = 'left' +} diff --git a/src/components/Tab/index.ts b/src/components/Tab/index.ts new file mode 100644 index 00000000..7381c960 --- /dev/null +++ b/src/components/Tab/index.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' +import { TabPane } from 'element-ui' + +import STabs from './STabs.vue' +import { TabsType, TabsPosition } from './consts' + +const STab = Vue.component('STab', TabPane) + +export { STab, STabs, TabsType, TabsPosition } diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts index ec3b1914..bb5ff572 100644 --- a/src/components/Table/consts.ts +++ b/src/components/Table/consts.ts @@ -1,4 +1,4 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' import { TooltipPlacement } from '../Tooltip' export enum ColumnType { diff --git a/src/components/index.ts b/src/components/index.ts index 16e8ad4e..e44872bf 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -11,15 +11,18 @@ import { SCol } from './Layout/Col' import { SCollapse, SCollapseItem } from './Collapse' import { SContainer } from './Layout/Container' import { SDialog } from './Dialog' +import { SDivider } from './Divider' import { SDropdown, SDropdownItem } from './Dropdown' import { SFooter } from './Layout/Footer' import { SForm, SFormItem } from './Form' import { SHeader } from './Layout/Header' +import { SIcon } from './Icon' import { SInput, SJsonInput } from './Input' import { SMain } from './Layout/Main' import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu' import { SRow } from './Layout/Row' import { SScrollSectionItem, SScrollSections } from './ScrollSections' +import { STab, STabs } from './Tab' import { STable, STableColumn } from './Table' import { STooltip } from './Tooltip' @@ -37,12 +40,14 @@ export { SCollapseItem, SContainer, SDialog, + SDivider, SDropdown, SDropdownItem, SFooter, SForm, SFormItem, SHeader, + SIcon, SInput, SJsonInput, SMain, @@ -53,6 +58,8 @@ export { SScrollSectionItem, SScrollSections, SSubmenu, + STab, + STabs, STable, STableColumn, STooltip diff --git a/src/index.ts b/src/index.ts index 12c29690..8359691c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,12 +14,14 @@ import { SCollapseItem, SContainer, SDialog, + SDivider, SDropdown, SDropdownItem, SFooter, SForm, SFormItem, SHeader, + SIcon, SInput, SJsonInput, SMain, @@ -30,12 +32,14 @@ import { SScrollSectionItem, SScrollSections, SSubmenu, + STab, + STabs, STable, STableColumn, STooltip } from './components' import { Components } from './types/components' -import { Message, MessageBox, Notification } from './plugins/elementUI' +import { Loading, Message, MessageBox, Notification } from './plugins/elementUI' const elements = [ { component: SApp, name: Components.SApp }, @@ -51,12 +55,14 @@ const elements = [ { component: SCollapseItem, name: Components.SCollapseItem }, { component: SContainer, name: Components.SContainer }, { component: SDialog, name: Components.SDialog }, + { component: SDivider, name: Components.SDivider }, { component: SDropdown, name: Components.SDropdown }, { component: SDropdownItem, name: Components.SDropdownItem }, { component: SFooter, name: Components.SFooter }, { component: SForm, name: Components.SForm }, { component: SFormItem, name: Components.SFormItem }, { component: SHeader, name: Components.SHeader }, + { component: SIcon, name: Components.SIcon }, { component: SInput, name: Components.SInput }, { component: SJsonInput, name: Components.SJsonInput }, { component: SMain, name: Components.SMain }, @@ -67,6 +73,8 @@ const elements = [ { component: SScrollSectionItem, name: Components.SScrollSectionItem }, { component: SScrollSections, name: Components.SScrollSections }, { component: SSubmenu, name: Components.SSubmenu }, + { component: STab, name: Components.STab }, + { component: STabs, name: Components.STabs }, { component: STable, name: Components.STable }, { component: STableColumn, name: Components.STableColumn }, { component: STooltip, name: Components.STooltip } @@ -83,6 +91,7 @@ if (typeof window !== 'undefined' && window.Vue) { } export { + Loading, Message, MessageBox, Notification, @@ -99,12 +108,14 @@ export { SCollapseItem, SContainer, SDialog, + SDivider, SDropdown, SDropdownItem, SFooter, SForm, SFormItem, SHeader, + SIcon, SInput, SJsonInput, SMain, @@ -115,6 +126,8 @@ export { SScrollSectionItem, SScrollSections, SSubmenu, + STab, + STabs, STable, STableColumn, STooltip diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts index 8ffc0b74..36d59aff 100644 --- a/src/plugins/elementUI.ts +++ b/src/plugins/elementUI.ts @@ -13,6 +13,7 @@ import { Container, DatePicker, Dialog, + Divider, Dropdown, DropdownItem, DropdownMenu, @@ -53,6 +54,7 @@ Vue.use(BreadcrumbItem) Vue.use(Collapse) Vue.use(CollapseItem) Vue.use(Dialog) +Vue.use(Divider) Vue.use(Footer) Vue.use(Menu) Vue.use(MenuItem) @@ -94,12 +96,14 @@ MsgBox.setDefaults({ cancelButtonText: 'Cancel', confirmButtonText: 'OK' }) +Vue.prototype.$loading = Loading.service Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$alert = MessageBox.alert Vue.prototype.$message = Message Vue.prototype.$notify = Notification // locale.use(lang) // TODO: it will be used later export { + Loading, MessageBox, Message, Notification diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts index fdc90126..fb86361b 100644 --- a/src/stories/Collapse/SCollapse.stories.ts +++ b/src/stories/Collapse/SCollapse.stories.ts @@ -10,7 +10,7 @@ export default { export const configurable = () => ({ components: { SCollapse, SCollapseItem }, - template: ` + 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.
@@ -32,6 +32,9 @@ export const configurable = () => ({ props: { accordion: { default: boolean('Accordion', false) + }, + borders: { + default: boolean('Borders', true) } }, methods: { diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 602a0e6f..c491af8c 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,6 +1,6 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components' import { ButtonSize, ButtonTypes } from '../components/Button' export default { @@ -142,6 +142,37 @@ export const loading = () => ({ } }) +export const withIcon = () => ({ + components: { SButton, SRow, SCol, SMain }, + template: ` + + + + {{ item.label }} + + + + + {{ item.label }} + + + + + {{ item.label }} + + + + `, + props: { + differentSizeData: { + default: () => differentSizeData + }, + differentTypesData: { + default: () => differentTypesData + } + } +}) + export const buttonGroup = () => ({ components: { SButton, SButtonGroup, SRow }, template: ` diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts new file mode 100644 index 00000000..1c43f88a --- /dev/null +++ b/src/stories/SDivider.stories.ts @@ -0,0 +1,33 @@ +import { withKnobs, select } from '@storybook/addon-knobs' + +import { SDivider, SRow } from '../components' +import { DividerDirection, ContentPosition } from '../components/Divider/consts' + +export default { + component: SDivider, + title: 'Design System/Divider', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SRow, SDivider }, + template: ` + First text paragraph + + Content between divider + + Second text paragraph + `, + props: { + direction: { + default: select('Direction', Object.values(DividerDirection), DividerDirection.HORIZONTAL) + }, + contentPosition: { + default: select('Content position', Object.values(ContentPosition), ContentPosition.CENTER) + } + } +}) diff --git a/src/stories/SIcon.stories.ts b/src/stories/SIcon.stories.ts new file mode 100644 index 00000000..c9f13cc1 --- /dev/null +++ b/src/stories/SIcon.stories.ts @@ -0,0 +1,48 @@ +import { withKnobs, select, number } from '@storybook/addon-knobs' + +import { SCol, SRow, SMain, SIcon } from '../components' +import { Icons } from '../components/Icon' + +export default { + component: SIcon, + title: 'Design System/Icon', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SMain, SRow, SCol, SIcon }, + template: ` + + + + `, + props: { + name: { + default: select('Name', Object.values(Icons), Icons.Activity) + }, + size: { + default: number('Content position', 16) + } + } +}) + +export const allIcons = () => ({ + components: { SMain, SRow, SCol, SIcon }, + template: ` + + + + s-icon-{{ icon }} + + + `, + data: () => ({ + icons: Object.values(Icons) + }) +}) diff --git a/src/stories/ScrollSections/SScrollSectionItem.stories.ts b/src/stories/ScrollSections/SScrollSectionItem.stories.ts index b713ab5a..db980f2c 100644 --- a/src/stories/ScrollSections/SScrollSectionItem.stories.ts +++ b/src/stories/ScrollSections/SScrollSectionItem.stories.ts @@ -1,4 +1,5 @@ import StoryRouter from 'storybook-vue-router' + import { SScrollSectionItem, SScrollSections } from '../../components' export default { diff --git a/src/stories/ScrollSections/SScrollSections.stories.ts b/src/stories/ScrollSections/SScrollSections.stories.ts index aa8e59a6..1607c1c8 100644 --- a/src/stories/ScrollSections/SScrollSections.stories.ts +++ b/src/stories/ScrollSections/SScrollSections.stories.ts @@ -1,15 +1,17 @@ +import { boolean, withKnobs } from '@storybook/addon-knobs' import StoryRouter from 'storybook-vue-router' + import { SScrollSectionItem, SScrollSections } from '../../components' export default { component: SScrollSections, title: 'Design System/Scroll Sections', - decorators: [StoryRouter({}, { initialEntry: '/' })] + decorators: [StoryRouter({}, { initialEntry: '/' }), withKnobs] } export const defaultUsage = () => ({ components: { SScrollSections, SScrollSectionItem }, - template: ` + template: ` ({ >

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?

 - ` + `, + props: { + withDivider: { + default: boolean('With Divider', false) + } + } }) diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts new file mode 100644 index 00000000..12a66950 --- /dev/null +++ b/src/stories/Tab/STabs.stories.ts @@ -0,0 +1,46 @@ +import { boolean, select, withKnobs } from '@storybook/addon-knobs' + +import { STabs, STab } from '../../components' +import { TabsPosition, TabsType } from '../../components/Tab' + +export default { + component: STabs, + title: 'Design System/Tabs', + decorators: [withKnobs] +} + +export const defaultUsage = () => ({ + components: { STabs, STab }, + template: ` + First + Second + Third + `, + data: () => ({ + activeName: 'first' + }), + props: { + type: { + default: select('Type', [...Object.values(TabsType), '––'], '––') + }, + position: { + default: select('Position', Object.values(TabsPosition), TabsPosition.TOP) + }, + closable: { + default: boolean('Closable', false) + }, + addable: { + default: boolean('Addable', false) + }, + editable: { + default: boolean('Editable', false) + } + } +}) diff --git a/src/styles/icons.scss b/src/styles/icons.scss index 623c651e..73248705 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -1,140 +1,921 @@ -/* TODO: fix icons due to external usage */ -.s-icon- { - &file { - position: absolute; - background-image: url('~@/assets/icons/file-upload.svg'); - width: 24px; - height: 24px; - } +@import "./variables.scss"; - &refresh { - position: absolute; - background-image: url('~@/assets/icons/refresh.svg'); - width: 16px; - height: 16px; +[class^="s-icon-"], [class*=" s-icon-"] { + font-family: 'soramitsu-icons' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: $color-basic-black; +} +/*_____________________________________________Icons variables_____________________________________________*/ +$s-icon-warning: "\e96c"; +$s-icon-logout: "\e98c"; +$s-icon-create: "\e979"; +$s-icon-refresh: "\e976"; +$s-icon-activity: "\e902"; +$s-icon-play: "\e900"; +$s-icon-stop: "\e901"; +$s-icon-bar-chart: "\e903"; +$s-icon-book: "\e904"; +$s-icon-bookmark-add: "\e905"; +$s-icon-bookmark-no: "\e906"; +$s-icon-bookmark: "\e907"; +$s-icon-bookmarks: "\e908"; +$s-icon-box: "\e909"; +$s-icon-browser-no: "\e90a"; +$s-icon-browser: "\e90b"; +$s-icon-brush: "\e90c"; +$s-icon-calculator: "\e90d"; +$s-icon-camera-create: "\e90e"; +$s-icon-camera-no: "\e90f"; +$s-icon-camera: "\e910"; +$s-icon-case: "\e911"; +$s-icon-check-mark: "\e912"; +$s-icon-check-marks: "\e913"; +$s-icon-circle-block: "\e914"; +$s-icon-circle-checked: "\e915"; +$s-icon-circle-menu: "\e916"; +$s-icon-circle-minus: "\e917"; +$s-icon-circle-more-horizontal: "\e918"; +$s-icon-circle-more-vertical: "\e919"; +$s-icon-circle-plus: "\e91a"; +$s-icon-circle-star: "\e91b"; +$s-icon-circle-x: "\e91c"; +$s-icon-circle: "\e91d"; +$s-icon-clear-style: "\e91e"; +$s-icon-copy: "\e91f"; +$s-icon-cut: "\e920"; +$s-icon-dashboard: "\e921"; +$s-icon-delete: "\e922"; +$s-icon-download-bold: "\e923"; +$s-icon-download: "\e924"; +$s-icon-drop: "\e925"; +$s-icon-external-link: "\e926"; +$s-icon-eye-no: "\e927"; +$s-icon-eye: "\e928"; +$s-icon-flag: "\e929"; +$s-icon-flame: "\e92a"; +$s-icon-glasses: "\e92b"; +$s-icon-globe-no: "\e92c"; +$s-icon-globe: "\e92d"; +$s-icon-heart-no: "\e92e"; +$s-icon-heart: "\e92f"; +$s-icon-home: "\e930"; +$s-icon-image: "\e931"; +$s-icon-inbox: "\e932"; +$s-icon-layers: "\e933"; +$s-icon-lightning-no: "\e934"; +$s-icon-lightning: "\e935"; +$s-icon-link-no: "\e936"; +$s-icon-link: "\e937"; +$s-icon-list: "\e938"; +$s-icon-mail: "\e939"; +$s-icon-maximize: "\e93a"; +$s-icon-menu-dots: "\e93b"; +$s-icon-menu: "\e93c"; +$s-icon-mic-no: "\e93d"; +$s-icon-mic: "\e93e"; +$s-icon-minimize: "\e93f"; +$s-icon-minus: "\e940"; +$s-icon-more-horizontal: "\e941"; +$s-icon-more-vertical: "\e942"; +$s-icon-newspaper: "\e943"; +$s-icon-options: "\e944"; +$s-icon-paperclip-no: "\e945"; +$s-icon-paperclip: "\e946"; +$s-icon-pencil-create: "\e947"; +$s-icon-pencil-edit: "\e948"; +$s-icon-plus: "\e949"; +$s-icon-presentation: "\e94a"; +$s-icon-printer: "\e94b"; +$s-icon-pulse: "\e94c"; +$s-icon-scan: "\e94d"; +$s-icon-screenshot: "\e94e"; +$s-icon-search: "\e94f"; +$s-icon-send: "\e950"; +$s-icon-settings: "\e951"; +$s-icon-share-arrow: "\e952"; +$s-icon-share: "\e953"; +$s-icon-star-no: "\e954"; +$s-icon-star: "\e955"; +$s-icon-sticker: "\e956"; +$s-icon-table: "\e957"; +$s-icon-text-align-center: "\e958"; +$s-icon-text-align-justify: "\e959"; +$s-icon-text-align-left: "\e95a"; +$s-icon-text-align-right: "\e95b"; +$s-icon-text-bgcolor: "\e95c"; +$s-icon-text-bold: "\e95d"; +$s-icon-text-color: "\e95e"; +$s-icon-text-italic: "\e95f"; +$s-icon-text-underline: "\e960"; +$s-icon-thumbs-down: "\e961"; +$s-icon-thumbs-up: "\e962"; +$s-icon-toggle-left: "\e963"; +$s-icon-toggle-right: "\e964"; +$s-icon-trash-empty: "\e965"; +$s-icon-trash: "\e966"; +$s-icon-user: "\e967"; +$s-icon-video-no: "\e968"; +$s-icon-video: "\e969"; +$s-icon-zoom-in: "\e96a"; +$s-icon-zoom-out: "\e96b"; +$s-icon-arrow-bottom-left: "\e96d"; +$s-icon-arrow-bottom-right: "\e96e"; +$s-icon-arrow-bottom: "\e96f"; +$s-icon-arrow-left: "\e970"; +$s-icon-arrow-right: "\e971"; +$s-icon-arrow-top-left: "\e972"; +$s-icon-arrow-top-right: "\e973"; +$s-icon-arrow-top: "\e974"; +$s-icon-calendar: "\e977"; +$s-icon-call-phone: "\e978"; +$s-icon-chevron-bottom: "\e97a"; +$s-icon-chevron-left: "\e97b"; +$s-icon-chevron-right: "\e97c"; +$s-icon-chevron-top: "\e97d"; +$s-icon-chevrons-bottom: "\e97e"; +$s-icon-chevrons-left: "\e97f"; +$s-icon-chevrons-right: "\e980"; +$s-icon-circle-arrow-bottom: "\e981"; +$s-icon-circle-arrow-left: "\e982"; +$s-icon-circle-arrow-right: "\e983"; +$s-icon-circle-arrow-top: "\e984"; +$s-icon-circle-chevron-bottom: "\e985"; +$s-icon-circle-chevron-left: "\e986"; +$s-icon-circle-chevron-right: "\e987"; +$s-icon-circle-chevron-top: "\e988"; +$s-icon-circle-chevrons-top: "\e989"; +$s-icon-file: "\e990"; +$s-icon-file-upload: "\e98a"; +$s-icon-folder: "\e991"; +$s-icon-info: "\e994"; +$s-icon-lock: "\e995"; +$s-icon-paperclip-vertical: "\e99a"; +$s-icon-pencil: "\e99c"; +$s-icon-pin: "\e99d"; +$s-icon-question-circle: "\e9a0"; +$s-icon-target: "\e9a3"; +$s-icon-time: "\e9a4"; +$s-icon-wi-fi: "\e9a5"; +$s-icon-x: "\e9a6"; +/*_____________________________________________Icons classes_____________________________________________*/ +.s-icon-warning, .s-icon-error { + &:before { + content: $s-icon-warning; } - - &refresh-red { - position: absolute; - background-image: url('~@/assets/icons/refresh-red.svg'); - width: 16px; - height: 16px; +} +.s-icon-logout { + &:before { + content: $s-icon-logout; } - - &create { - position: absolute; - background-image: url('~@/assets/icons/create.svg'); - width: 16px; - height: 16px; +} +.s-icon-create { + &:before { + content: $s-icon-create; } - - &play { - position: absolute; - background-image: url('~@/assets/icons/play.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-refresh { + &:before { + content: $s-icon-refresh; } - - &stop { - position: absolute; - background-image: url('~@/assets/icons/stop.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-activity { + &:before { + content: $s-icon-activity; } - - &link-on { - position: absolute; - background-image: url('~@/assets/icons/link-on.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-play { + &:before { + content: $s-icon-play; } - - &link-off { - position: absolute; - background-image: url('~@/assets/icons/link-off.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-stop { + &:before { + content: $s-icon-stop; } - - &plus-small { - position: absolute; - background-image: url('~@/assets/icons/plus.svg'); - background-size: contain; - width: 12px; - height: 12px; - top: -6px; - left: -6px; +} +.s-icon-bar-chart { + &:before { + content: $s-icon-bar-chart; } - - &back { - position: absolute; - background-image: url('~@/assets/icons/arrow-left.svg'); - width: 20px; - height: 20px; +} +.s-icon-book { + &:before { + content: $s-icon-book; } - - &more { - position: absolute; - background-image: url('~@/assets/icons/more-horizontal.svg'); - width: 21px; - height: 20px; +} +.s-icon-bookmark-add { + &:before { + content: $s-icon-bookmark-add; } - - &more-small { - position: absolute; - background-image: url('~@/assets/icons/more-horizontal.svg'); - background-size: contain; - width: 12px; - height: 12px; - top: -6px; - left: -6px; +} +.s-icon-bookmark-no { + &:before { + content: $s-icon-bookmark-no; } - - &back-small { - position: absolute; - background-image: url('~@/assets/icons/arrow-left.svg'); - background-size: contain; - width: 12px; - height: 12px; - top: -6px; - left: -6px; +} +.s-icon-bookmark { + &:before { + content: $s-icon-bookmark; } - - &globe { - background-image: url('~@/assets/icons/globe.svg'); - width: 20px; - height: 20px; +} +.s-icon-bookmarks { + &:before { + content: $s-icon-bookmarks; } - - &activity { - background-image: url('~@/assets/icons/activity.svg'); - width: 20px; - height: 20px; +} +.s-icon-box { + &:before { + content: $s-icon-box; } - - &logout { - background-image: url('~@/assets/icons/log-out.svg'); - width: 20px; - height: 20px; +} +.s-icon-browser-no { + &:before { + content: $s-icon-browser-no; } - - &error { - background-image: url('~@/assets/icons/warning.svg'); - background-repeat: no-repeat; - background-position: 2px center; +} +.s-icon-browser { + &:before { + content: $s-icon-browser; } - - &arrow-top { - background-image: url('~@/assets/icons/arrow-top.svg'); - background-repeat: no-repeat; - background-position: center; +} +.s-icon-brush { + &:before { + content: $s-icon-brush; + } +} +.s-icon-calculator { + &:before { + content: $s-icon-calculator; + } +} +.s-icon-camera-create { + &:before { + content: $s-icon-camera-create; + } +} +.s-icon-camera-no { + &:before { + content: $s-icon-camera-no; + } +} +.s-icon-camera { + &:before { + content: $s-icon-camera; + } +} +.s-icon-case { + &:before { + content: $s-icon-case; + } +} +.s-icon-check-mark { + &:before { + content: $s-icon-check-mark; + } +} +.s-icon-check-marks { + &:before { + content: $s-icon-check-marks; + } +} +.s-icon-circle-block { + &:before { + content: $s-icon-circle-block; + } +} +.s-icon-circle-checked { + &:before { + content: $s-icon-circle-checked; + } +} +.s-icon-circle-menu { + &:before { + content: $s-icon-circle-menu; + } +} +.s-icon-circle-minus { + &:before { + content: $s-icon-circle-minus; + } +} +.s-icon-circle-more-horizontal { + &:before { + content: $s-icon-circle-more-horizontal; + } +} +.s-icon-circle-more-vertical { + &:before { + content: $s-icon-circle-more-vertical; + } +} +.s-icon-circle-plus { + &:before { + content: $s-icon-circle-plus; + } +} +.s-icon-circle-star { + &:before { + content: $s-icon-circle-star; + } +} +.s-icon-circle-x { + &:before { + content: $s-icon-circle-x; + } +} +.s-icon-circle { + &:before { + content: $s-icon-circle; + } +} +.s-icon-clear-style { + &:before { + content: $s-icon-clear-style; + } +} +.s-icon-copy { + &:before { + content: $s-icon-copy; + } +} +.s-icon-cut { + &:before { + content: $s-icon-cut; + } +} +.s-icon-dashboard { + &:before { + content: $s-icon-dashboard; + } +} +.s-icon-delete { + &:before { + content: $s-icon-delete; + } +} +.s-icon-download-bold { + &:before { + content: $s-icon-download-bold; + } +} +.s-icon-download { + &:before { + content: $s-icon-download; + } +} +.s-icon-drop { + &:before { + content: $s-icon-drop; + } +} +.s-icon-external-link { + &:before { + content: $s-icon-external-link; + } +} +.s-icon-eye-no { + &:before { + content: $s-icon-eye-no; + } +} +.s-icon-eye { + &:before { + content: $s-icon-eye; + } +} +.s-icon-flag { + &:before { + content: $s-icon-flag; + } +} +.s-icon-flame { + &:before { + content: $s-icon-flame; + } +} +.s-icon-glasses { + &:before { + content: $s-icon-glasses; + } +} +.s-icon-globe-no { + &:before { + content: $s-icon-globe-no; + } +} +.s-icon-globe { + &:before { + content: $s-icon-globe; + } +} +.s-icon-heart-no { + &:before { + content: $s-icon-heart-no; + } +} +.s-icon-heart { + &:before { + content: $s-icon-heart; + } +} +.s-icon-home { + &:before { + content: $s-icon-home; + } +} +.s-icon-image { + &:before { + content: $s-icon-image; + } +} +.s-icon-inbox { + &:before { + content: $s-icon-inbox; + } +} +.s-icon-layers { + &:before { + content: $s-icon-layers; + } +} +.s-icon-lightning-no { + &:before { + content: $s-icon-lightning-no; + } +} +.s-icon-lightning { + &:before { + content: $s-icon-lightning; + } +} +.s-icon-link-no { + &:before { + content: $s-icon-link-no; + } +} +.s-icon-link { + &:before { + content: $s-icon-link; + } +} +.s-icon-list { + &:before { + content: $s-icon-list; + } +} +.s-icon-mail { + &:before { + content: $s-icon-mail; + } +} +.s-icon-maximize { + &:before { + content: $s-icon-maximize; + } +} +.s-icon-menu-dots { + &:before { + content: $s-icon-menu-dots; + } +} +.s-icon-menu { + &:before { + content: $s-icon-menu; + } +} +.s-icon-mic-no { + &:before { + content: $s-icon-mic-no; + } +} +.s-icon-mic { + &:before { + content: $s-icon-mic; + } +} +.s-icon-minimize { + &:before { + content: $s-icon-minimize; + } +} +.s-icon-minus { + &:before { + content: $s-icon-minus; + } +} +.s-icon-more-horizontal { + &:before { + content: $s-icon-more-horizontal; + } +} +.s-icon-more-vertical { + &:before { + content: $s-icon-more-vertical; + } +} +.s-icon-newspaper { + &:before { + content: $s-icon-newspaper; + } +} +.s-icon-options { + &:before { + content: $s-icon-options; + } +} +.s-icon-paperclip-no { + &:before { + content: $s-icon-paperclip-no; + } +} +.s-icon-paperclip { + &:before { + content: $s-icon-paperclip; + } +} +.s-icon-pencil-create { + &:before { + content: $s-icon-pencil-create; + } +} +.s-icon-pencil-edit { + &:before { + content: $s-icon-pencil-edit; + } +} +.s-icon-plus { + &:before { + content: $s-icon-plus; + } +} +.s-icon-presentation { + &:before { + content: $s-icon-presentation; + } +} +.s-icon-printer { + &:before { + content: $s-icon-printer; + } +} +.s-icon-pulse { + &:before { + content: $s-icon-pulse; + } +} +.s-icon-scan { + &:before { + content: $s-icon-scan; + } +} +.s-icon-screenshot { + &:before { + content: $s-icon-screenshot; + } +} +.s-icon-search { + &:before { + content: $s-icon-search; + } +} +.s-icon-send { + &:before { + content: $s-icon-send; + } +} +.s-icon-settings { + &:before { + content: $s-icon-settings; + } +} +.s-icon-share-arrow { + &:before { + content: $s-icon-share-arrow; + } +} +.s-icon-share { + &:before { + content: $s-icon-share; + } +} +.s-icon-star-no { + &:before { + content: $s-icon-star-no; + } +} +.s-icon-star { + &:before { + content: $s-icon-star; + } +} +.s-icon-sticker { + &:before { + content: $s-icon-sticker; + } +} +.s-icon-table { + &:before { + content: $s-icon-table; + } +} +.s-icon-text-align-center { + &:before { + content: $s-icon-text-align-center; + } +} +.s-icon-text-align-justify { + &:before { + content: $s-icon-text-align-justify; + } +} +.s-icon-text-align-left { + &:before { + content: $s-icon-text-align-left; + } +} +.s-icon-text-align-right { + &:before { + content: $s-icon-text-align-right; + } +} +.s-icon-text-bgcolor { + &:before { + content: $s-icon-text-bgcolor; + } +} +.s-icon-text-bold { + &:before { + content: $s-icon-text-bold; + } +} +.s-icon-text-color { + &:before { + content: $s-icon-text-color; + } +} +.s-icon-text-italic { + &:before { + content: $s-icon-text-italic; + } +} +.s-icon-text-underline { + &:before { + content: $s-icon-text-underline; + } +} +.s-icon-thumbs-down { + &:before { + content: $s-icon-thumbs-down; + } +} +.s-icon-thumbs-up { + &:before { + content: $s-icon-thumbs-up; + } +} +.s-icon-toggle-left { + &:before { + content: $s-icon-toggle-left; + } +} +.s-icon-toggle-right { + &:before { + content: $s-icon-toggle-right; + } +} +.s-icon-trash-empty { + &:before { + content: $s-icon-trash-empty; + } +} +.s-icon-trash { + &:before { + content: $s-icon-trash; + } +} +.s-icon-user { + &:before { + content: $s-icon-user; + } +} +.s-icon-video-no { + &:before { + content: $s-icon-video-no; + } +} +.s-icon-video { + &:before { + content: $s-icon-video; + } +} +.s-icon-zoom-in { + &:before { + content: $s-icon-zoom-in; + } +} +.s-icon-zoom-out { + &:before { + content: $s-icon-zoom-out; + } +} +.s-icon-arrow-bottom-left { + &:before { + content: $s-icon-arrow-bottom-left; + } +} +.s-icon-arrow-bottom-right { + &:before { + content: $s-icon-arrow-bottom-right; + } +} +.s-icon-arrow-bottom { + &:before { + content: $s-icon-arrow-bottom; + } +} +.s-icon-arrow-left, .s-icon-back { + &:before { + content: $s-icon-arrow-left; + } +} +.s-icon-arrow-right { + &:before { + content: $s-icon-arrow-right; + } +} +.s-icon-arrow-top-left { + &:before { + content: $s-icon-arrow-top-left; + } +} +.s-icon-arrow-top-right { + &:before { + content: $s-icon-arrow-top-right; + } +} +.s-icon-arrow-top { + &:before { + content: $s-icon-arrow-top; + } +} +.s-icon-calendar { + &:before { + content: $s-icon-calendar; + } +} +.s-icon-call-phone { + &:before { + content: $s-icon-call-phone; + } +} +.s-icon-chevron-bottom { + &:before { + content: $s-icon-chevron-bottom; + } +} +.s-icon-chevron-left { + &:before { + content: $s-icon-chevron-left; + } +} +.s-icon-chevron-right { + &:before { + content: $s-icon-chevron-right; + } +} +.s-icon-chevron-top { + &:before { + content: $s-icon-chevron-top; + } +} +.s-icon-chevrons-bottom { + &:before { + content: $s-icon-chevrons-bottom; + } +} +.s-icon-chevrons-left { + &:before { + content: $s-icon-chevrons-left; + } +} +.s-icon-chevrons-right { + &:before { + content: $s-icon-chevrons-right; + } +} +.s-icon-circle-arrow-bottom { + &:before { + content: $s-icon-circle-arrow-bottom; + } +} +.s-icon-circle-arrow-left { + &:before { + content: $s-icon-circle-arrow-left; + } +} +.s-icon-circle-arrow-right { + &:before { + content: $s-icon-circle-arrow-right; + } +} +.s-icon-circle-arrow-top { + &:before { + content: $s-icon-circle-arrow-top; + } +} +.s-icon-circle-chevron-bottom { + &:before { + content: $s-icon-circle-chevron-bottom; + } +} +.s-icon-circle-chevron-left { + &:before { + content: $s-icon-circle-chevron-left; + } +} +.s-icon-circle-chevron-right { + &:before { + content: $s-icon-circle-chevron-right; + } +} +.s-icon-circle-chevron-top { + &:before { + content: $s-icon-circle-chevron-top; + } +} +.s-icon-circle-chevrons-top { + &:before { + content: $s-icon-circle-chevrons-top; + } +} +.s-icon-file { + &:before { + content: $s-icon-file; + } +} +.s-icon-file-upload { + &:before { + content: $s-icon-file-upload; + } +} +.s-icon-folder { + &:before { + content: $s-icon-folder; + } +} +.s-icon-info { + &:before { + content: $s-icon-info; + } +} +.s-icon-lock { + &:before { + content: $s-icon-lock; + } +} +.s-icon-paperclip-vertical { + &:before { + content: $s-icon-paperclip-vertical; + } +} +.s-icon-pencil { + &:before { + content: $s-icon-pencil; + } +} +.s-icon-pin { + &:before { + content: $s-icon-pin; + } +} +.s-icon-question-circle { + &:before { + content: $s-icon-question-circle; + } +} +.s-icon-target { + &:before { + content: $s-icon-target; + } +} +.s-icon-time { + &:before { + content: $s-icon-time; + } +} +.s-icon-wi-fi { + &:before { + content: $s-icon-wi-fi; + } +} +.s-icon-x { + &:before { + content: $s-icon-x; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d1cc7572..5b688981 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -24,6 +24,13 @@ $size-small: 32px; $border-radius-default: 4px; // Fonts +@font-face { + font-family: "soramitsu-icons"; + src: url("~@/assets/fonts/soramitsu-icons.woff"); + font-weight: normal; + font-style: normal; + font-display: block; +} @font-face { font-family: "SoraB"; src: url("~@/assets/fonts/Sora-Bold.otf"); diff --git a/src/types/components.ts b/src/types/components.ts index ed91efee..981a0733 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -12,12 +12,14 @@ export enum Components { SCollapseItem = 'SCollapseItem', SContainer = 'SContainer', SDialog = 'SDialog', + SDivider = 'SDivider', SDropdown = 'SDropdown', SDropdownItem = 'SDropdownItem', SFooter = 'SFooter', SForm = 'SForm', SFormItem = 'SFormItem', SHeader = 'SHeader', + SIcon = 'SIcon', SInput = 'SInput', SJsonInput = 'SJsonInput', SMain = 'SMain', @@ -28,6 +30,8 @@ export enum Components { SScrollSectionItem = 'SScrollSectionItem', SScrollSections = 'SScrollSections', SSubmenu = 'SSubmenu', + STab = 'STab', + STabs = 'STabs', STable = 'STable', STableColumn = 'STableColumn', STooltip = 'STooltip' diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 00000000..70855221 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,10 @@ +export enum Size { + BIG = 'big', + MEDIUM = 'medium', + SMALL = 'small' +} + +export enum Direction { + HORIZONTAL = 'horizontal', + VERTICAL = 'vertical' +} diff --git a/src/types/size.ts b/src/types/size.ts deleted file mode 100644 index 4c1784de..00000000 --- a/src/types/size.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum Size { - BIG = 'big', - MEDIUM = 'medium', - SMALL = 'small' -}