From ecff32932361a6fd43c6d9c983f8ada13036c108 Mon Sep 17 00:00:00 2001 From: yenilikci Date: Fri, 7 Apr 2023 14:18:26 +0300 Subject: [PATCH] Enhancement[TabGroup] - New properties were added to the Tab Group component, and a fix was made to the icon in the badge stories. --- package.json | 2 +- src/components/fp-badge/fp-badge.stories.mdx | 4 +- src/components/fp-icon/general-icon-list.ts | 2 +- .../fp-icon/icons/general-icons/warning.svg | 1 + src/components/fp-tab-group/fp-tab-group.css | 146 ++++++++++++++++-- src/components/fp-tab-group/fp-tab-group.ts | 24 ++- 6 files changed, 158 insertions(+), 21 deletions(-) create mode 100644 src/components/fp-icon/icons/general-icons/warning.svg diff --git a/package.json b/package.json index 2cf0912..2c74a57 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "finpro", - "version": "1.0.2-beta", + "version": "1.0.3-beta", "description": "Design System", "main": "dist/finpro.js", "module": "dist/finpro.js", diff --git a/src/components/fp-badge/fp-badge.stories.mdx b/src/components/fp-badge/fp-badge.stories.mdx index a061c09..f227d9a 100644 --- a/src/components/fp-badge/fp-badge.stories.mdx +++ b/src/components/fp-badge/fp-badge.stories.mdx @@ -34,11 +34,11 @@ ${BadgeTemplate({ content:'Winner', styles: { '--fp-badge-bg-color' : 'var(--fp- `; export const WithIconTemplate = (args) => html` -${BadgeTemplate({ content:'In Progress', icon: 'waiting', styles: { '--fp-badge-bg-color' : 'var(--fp-color-accent-primary-background)', '--fp-badge-color': 'var(--fp-color-primary)' },...args})} +${BadgeTemplate({ content:'In Progress', icon: 'clock', styles: { '--fp-badge-bg-color' : 'var(--fp-color-accent-primary-background)', '--fp-badge-color': 'var(--fp-color-primary)' },...args})} ${BadgeTemplate({ content:'Approved', icon: 'check-circle', styles: { '--fp-badge-bg-color' : 'var(--fp-color-success-background)', '--fp-badge-color': 'var(--fp-color-success)' },...args})} ${BadgeTemplate({ content:'Warning', icon: 'warning', styles: { '--fp-badge-bg-color' : 'var(--fp-color-warning-background)', '--fp-badge-color': 'var(--fp-color-warning)' },...args})} ${BadgeTemplate({ content:'Denied', icon: 'x-circle', styles: { '--fp-badge-bg-color' : 'var(--fp-color-danger-background)', '--fp-badge-color': 'var(--fp-color-danger)' },...args})} -${BadgeTemplate({ content:'Offer', icon: 'my_offers', styles: { '--fp-badge-bg-color' : 'var(--fp-color-alternative-background)', '--fp-badge-color': 'var(--fp-color-alternative)' },...args})} +${BadgeTemplate({ content:'Offer', icon: 'star', styles: { '--fp-badge-bg-color' : 'var(--fp-color-alternative-background)', '--fp-badge-color': 'var(--fp-color-alternative)' },...args})} ${BadgeTemplate({ content:'Winner', icon: 'award', styles: { '--fp-badge-bg-color' : 'var(--fp-color-featured-background)', '--fp-badge-color': 'var(--fp-color-featured)' },...args})} `; diff --git a/src/components/fp-icon/general-icon-list.ts b/src/components/fp-icon/general-icon-list.ts index f58d9ce..5f2f2a4 100644 --- a/src/components/fp-icon/general-icon-list.ts +++ b/src/components/fp-icon/general-icon-list.ts @@ -1 +1 @@ -export default ["activity", "airplay", "alert-circle", "alert-octagon", "alert-triangle", "align-center", "align-justify", "align-left", "align-right", "anchor", "aperture", "archive", "arrow-down-circle", "arrow-down-left", "arrow-down-right", "arrow-down", "arrow-left-circle", "arrow-left", "arrow-right-circle", "arrow-right", "arrow-up-circle", "arrow-up-left", "arrow-up-right", "arrow-up", "at-sign", "award", "bar-chart-2", "bar-chart", "battery-charging", "battery", "bell-off", "bell", "bluetooth", "bold", "book-open", "book", "bookmark", "box", "briefcase", "calendar", "camera-off", "camera", "cast", "check-circle", "check-square", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "chrome", "circle", "clipboard", "clock", "cloud-drizzle", "cloud-lightning", "cloud-off", "cloud-rain", "cloud-snow", "cloud", "code", "codepen", "codesandbox", "coffee", "columns", "command", "compass", "copy", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "cpu", "credit-card", "crop", "crosshair", "database", "delete", "disc", "divide-circle", "divide-square", "divide", "dollar-sign", "download-cloud", "download", "dribbble", "droplet", "edit-2", "edit-3", "edit", "external-link", "eye-off", "eye", "facebook", "fast-forward", "feather", "figma", "file-minus", "file-plus", "file-text", "file", "film", "filter", "flag", "folder-minus", "folder-plus", "folder", "framer", "frown", "gift", "git-branch", "git-commit", "git-merge", "git-pull-request", "github", "gitlab", "globe", "grid", "hard-drive", "hash", "headphones", "heart", "help-circle", "hexagon", "home", "image", "inbox", "info", "instagram", "italic", "key", "layers", "layout", "life-buoy", "link-2", "link", "linkedin", "list", "loading", "lock", "log-in", "log-out", "mail", "map-pin", "map", "maximize-2", "maximize", "meh", "menu", "message-circle", "message-square", "mic-off", "mic", "minimize-2", "minimize", "minus-circle", "minus-square", "minus", "monitor", "moon", "more-horizontal", "more-vertical", "mouse-pointer", "move", "music", "navigation-2", "navigation", "octagon", "package", "paperclip", "pause-circle", "pause", "pen-tool", "percent", "phone-call", "phone-forwarded", "phone-incoming", "phone-missed", "phone-off", "phone-outgoing", "phone", "pie-chart", "play-circle", "play", "plus-circle", "plus-square", "plus", "pocket", "power", "printer", "radio", "refresh-ccw", "refresh-cw", "repeat", "rewind", "rotate-ccw", "rotate-cw", "rss", "save", "scissors", "search", "send", "server", "settings", "share-2", "share", "shield-off", "shield", "shopping-bag", "shopping-cart", "shuffle", "sidebar", "skip-back", "skip-forward", "slack", "slash", "sliders", "smartphone", "smile", "speaker", "square", "star", "stop-circle", "sun", "sunrise", "sunset", "table", "tablet", "tag", "target", "terminal", "thermometer", "thumbs-down", "thumbs-up", "toggle-left", "toggle-right", "tool", "trash-2", "trash", "trello", "trending-down", "trending-up", "triangle", "truck", "tv", "twitch", "twitter", "type", "umbrella", "underline", "unlock", "upload-cloud", "upload", "user-check", "user-minus", "user-plus", "user-x", "user", "users", "video-off", "video", "voicemail", "volume-1", "volume-2", "volume-x", "volume", "watch", "wifi-off", "wifi", "wind", "x-circle", "x-octagon", "x-square", "x", "youtube", "zap-off", "zap", "zoom-in", "zoom-out"] \ No newline at end of file +export default ["activity", "airplay", "alert-circle", "alert-octagon", "alert-triangle", "align-center", "align-justify", "align-left", "align-right", "anchor", "aperture", "archive", "arrow-down-circle", "arrow-down-left", "arrow-down-right", "arrow-down", "arrow-left-circle", "arrow-left", "arrow-right-circle", "arrow-right", "arrow-up-circle", "arrow-up-left", "arrow-up-right", "arrow-up", "at-sign", "award", "bar-chart-2", "bar-chart", "battery-charging", "battery", "bell-off", "bell", "bluetooth", "bold", "book-open", "book", "bookmark", "box", "briefcase", "calendar", "camera-off", "camera", "cast", "check-circle", "check-square", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-down", "chevrons-left", "chevrons-right", "chevrons-up", "chrome", "circle", "clipboard", "clock", "cloud-drizzle", "cloud-lightning", "cloud-off", "cloud-rain", "cloud-snow", "cloud", "code", "codepen", "codesandbox", "coffee", "columns", "command", "compass", "copy", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "cpu", "credit-card", "crop", "crosshair", "database", "delete", "disc", "divide-circle", "divide-square", "divide", "dollar-sign", "download-cloud", "download", "dribbble", "droplet", "edit-2", "edit-3", "edit", "external-link", "eye-off", "eye", "facebook", "fast-forward", "feather", "figma", "file-minus", "file-plus", "file-text", "file", "film", "filter", "flag", "folder-minus", "folder-plus", "folder", "framer", "frown", "gift", "git-branch", "git-commit", "git-merge", "git-pull-request", "github", "gitlab", "globe", "grid", "hard-drive", "hash", "headphones", "heart", "help-circle", "hexagon", "home", "image", "inbox", "info", "instagram", "italic", "key", "layers", "layout", "life-buoy", "link-2", "link", "linkedin", "list", "loading", "lock", "log-in", "log-out", "mail", "map-pin", "map", "maximize-2", "maximize", "meh", "menu", "message-circle", "message-square", "mic-off", "mic", "minimize-2", "minimize", "minus-circle", "minus-square", "minus", "monitor", "moon", "more-horizontal", "more-vertical", "mouse-pointer", "move", "music", "navigation-2", "navigation", "octagon", "package", "paperclip", "pause-circle", "pause", "pen-tool", "percent", "phone-call", "phone-forwarded", "phone-incoming", "phone-missed", "phone-off", "phone-outgoing", "phone", "pie-chart", "play-circle", "play", "plus-circle", "plus-square", "plus", "pocket", "power", "printer", "radio", "refresh-ccw", "refresh-cw", "repeat", "rewind", "rotate-ccw", "rotate-cw", "rss", "save", "scissors", "search", "send", "server", "settings", "share-2", "share", "shield-off", "shield", "shopping-bag", "shopping-cart", "shuffle", "sidebar", "skip-back", "skip-forward", "slack", "slash", "sliders", "smartphone", "smile", "speaker", "square", "star", "stop-circle", "sun", "sunrise", "sunset", "table", "tablet", "tag", "target", "terminal", "thermometer", "thumbs-down", "thumbs-up", "toggle-left", "toggle-right", "tool", "trash-2", "trash", "trello", "trending-down", "trending-up", "triangle", "truck", "tv", "twitch", "twitter", "type", "umbrella", "underline", "unlock", "upload-cloud", "upload", "user-check", "user-minus", "user-plus", "user-x", "user", "users", "video-off", "video", "voicemail", "volume-1", "volume-2", "volume-x", "volume", "warning", "watch", "wifi-off", "wifi", "wind", "x-circle", "x-octagon", "x-square", "x", "youtube", "zap-off", "zap", "zoom-in", "zoom-out"] \ No newline at end of file diff --git a/src/components/fp-icon/icons/general-icons/warning.svg b/src/components/fp-icon/icons/general-icons/warning.svg new file mode 100644 index 0000000..6dcb096 --- /dev/null +++ b/src/components/fp-icon/icons/general-icons/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/fp-tab-group/fp-tab-group.css b/src/components/fp-tab-group/fp-tab-group.css index fb11c3e..654def5 100644 --- a/src/components/fp-tab-group/fp-tab-group.css +++ b/src/components/fp-tab-group/fp-tab-group.css @@ -1,16 +1,132 @@ .tabs { - background-color: var(--fp-color-primary-background); - border-bottom: var(--fp-size-5xs) solid var(--fp-color-secondary-background); - display: flex; - flex-direction: row; - } - - .tabs-list { - overflow-x: scroll; - border-radius: var(--fp-border-radius-l) var(--fp-border-radius-l) 0 0; - } - - .panels { - border-radius: 0 0 var(--fp-border-radius-l) var(--fp-border-radius-l); - } - \ No newline at end of file + background-color: var(--fp-color-primary-background); + border-bottom: var(--fp-size-5xs) solid var(--fp-color-secondary-background); + display: flex; + flex-direction: row; +} + +.tabs-list { + --overflow-x: 'auto'; + --overflow-y: 'auto'; + --border-radius: var(--fp-border-radius-l); + + overflow-x: var(--overflow-x); + overflow-y: var(--overflow-y); + border-radius: var(--border-radius); +} + +:host([overflowX='auto']) .tabs-list { + --overflow-x: 'auto' +} + +:host([overflowX='clip']) .tabs-list { + --overflow-x: clip; +} + +:host([overflowX='hidden']) .tabs-list { + --overflow-x: hidden; +} + +:host([overflowX='inherit']) .tabs-list { + --overflow-x: inherit; +} + +:host([overflowX='initial']) .tabs-list { + --overflow-x: initial; +} + +:host([overflowX='overlay']) .tabs-list { + --overflow-x: overlay; +} + +:host([overflowX='revert']) .tabs-list { + --overflow-x: revert; +} + +:host([overflowX='scroll']) .tabs-list { + --overflow-x: scroll; +} + +:host([overflowX='unset']) .tabs-list { + --overflow-x: unset; +} + +:host([overflowX='visible']) .tabs-list { + --overflow-x: visible; +} + +:host([overflowY='auto']) .tabs-list { + --overflow-y: auto; +} + +:host([overflowY='clip']) .tabs-list { + --overflow-y: clip; +} + +:host([overflowY='hidden']) .tabs-list { + --overflow-y: hidden; +} + +:host([overflowY='inherit']) .tabs-list { + --overflow-y: inherit; +} + +:host([overflowY='initial']) .tabs-list { + --overflow-y: initial; +} + +:host([overflowY='overlay']) .tabs-list { + --overflow-y: overlay; +} + +:host([overflowY='revert']) .tabs-list { + --overflow-y: revert; +} + +:host([overflowY='scroll']) .tabs-list { + --overflow-y: scroll; +} + +:host([overflowY='unset']) .tabs-list { + --overflow-y: unset; +} + +:host([overflowY='visible']) .tabs-list { + --overflow-y: visible; +} + +:host([borderRadius='n']) .tabs-list { + --border-radius: 0px; +} + +:host([borderRadius='2xs']) .tabs-list { + --border-radius: var(--fp-border-radius-2xs) var(--fp-border-radius-2xs) 0 0; +} + +:host([borderRadius='xs']) .tabs-list { + --border-radius: var(--fp-border-radius-xs) var(--fp-border-radius-xs) 0 0; +} + +:host([borderRadius='s']) .tabs-list { + --border-radius: var(--fp-border-radius-s) var(--fp-border-radius-s) 0 0; +} + +:host([borderRadius='m']) .tabs-list { + --border-radius: var(--fp-border-radius-m) var(--fp-border-radius-m) 0 0; +} + +:host([borderRadius='l']) .tabs-list { + --border-radius: var(--fp-border-radius-l) var(--fp-border-radius-l) 0 0; +} + +:host([borderRadius='xl']) .tabs-list { + --border-radius: var(--fp-border-radius-xl) var(--fp-border-radius-xl) 0 0; +} + +:host([borderRadius='2xl']) .tabs-list { + --border-radius: var(--fp-border-radius-2xl) var(--fp-border-radius-2xl) 0 0; +} + +.panels { + border-radius: 0 0 var(--fp-border-radius-l) var(--fp-border-radius-l); +} \ No newline at end of file diff --git a/src/components/fp-tab-group/fp-tab-group.ts b/src/components/fp-tab-group/fp-tab-group.ts index d2db606..a6b6dd0 100644 --- a/src/components/fp-tab-group/fp-tab-group.ts +++ b/src/components/fp-tab-group/fp-tab-group.ts @@ -1,11 +1,14 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import style from './fp-tab-group.css'; import './fp-tab-panel/fp-tab-panel'; import './fp-tab/fp-tab'; import FpTabPanel from './fp-tab-panel/fp-tab-panel'; import FpTab from './fp-tab/fp-tab'; +export type TabGroupOverflow = 'auto' | 'clip' | 'hidden' | 'inherit' | 'initial' | 'overlay' | 'revert' | 'scroll' | 'unset' | 'visible'; +export type TabGroupBorderRadius = 'n' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'; + /** * @tag fp-tab-group * @summary Finpro Tab group component @@ -16,6 +19,22 @@ export default class FpTabGroup extends LitElement { return [style]; } + /** + * Sets the tab group overflow-x + */ + @property({ type: String, reflect: true }) + overflowX: TabGroupOverflow = 'auto'; + /** + * Sets the tab group overflow-y + */ + @property({ type: String, reflect: true }) + overflowY: TabGroupOverflow = 'auto'; + /** + * Sets the tab group border radius + */ + @property({ type: String, reflect: true }) + borderRadius: TabGroupBorderRadius = 'l' + private _connectedTabs: FpTab[] = []; private _connectedPanels: FpTabPanel[] = []; @@ -35,7 +54,7 @@ export default class FpTabGroup extends LitElement { const isFirstAndNotDisabled = this._connectedTabs.filter(t => !t.disabled).length === 0 && !tab.disabled; this._connectedTabs.push(tab); - + if ((!tab.disabled && tab.selected) || isFirstAndNotDisabled) { this.selectedTabName = tab.name; } @@ -69,6 +88,7 @@ export default class FpTabGroup extends LitElement { this._connectedTabs.splice(this._connectedPanels.indexOf(panel), 1); } + private _selectedTabName: string; get selectedTabName() {