@vcita/design-system 1.3.2 → 1.3.4

package/src/components/list/VcList/VcList.vue

@@ -1,7 +1,6 @@
 <template>
-  <div :data-qa="dataQa">
-    <ul v-if="!isEmptyList"
-        class="vc-list">
+  <div :data-qa="dataQa" class="vc-list-container">
+    <ul v-if="!isEmptyList" class="vc-list">
       <VcBaseListItem v-for="item in items"
                       v-bind="item"
                       :key="item.identifier"
@@ -15,7 +14,7 @@
     </ul>
     <template v-else>
       <slot name="emptyList">
-        <VcEmptyState :title="noItemsTitle" :subtitle="noItemsMsg" size="sm"
+        <VcEmptyState :title="noItemsTitle" :subtitle="noItemsMsg" size="sm" class="VcListEmptyState"
                       :data-qa="`${dataQa}-empty`"
                       :image="imagePath"/>
       </slot>
@@ -73,9 +72,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.vc-list-container {
+  width: 100%;
+}
 
 .vc-list {
+  width: 100%;
   margin: var(--size-value0);
   padding: var(--size-value0);
 }
+
+.VcListEmptyState {
+  margin: var(--size-value4);
+}
 </style>

package/src/components/page/layouts/centeredPage/CenteredPageLayout.stories.js

@@ -9,24 +9,24 @@ const Template = (args, {argTypes}) => ({
     template: `
       <div>
       <div :style="{borderBottom: '2px solid black', paddingBottom: '5px', marginBottom: '20px'}">
-        A simple centered layout, which expands and collapses the content area based on minimum and maximum width, 
+        A simple centered layout, which expands and collapses the content area based on minimum and maximum width,
         and keeps the header in sync.
         <br>To use, go to "Docs" and click "show code".
       </div>
-      <VcLayout justify-center :style="{padding: 'var(--size-value5)'}">
-          <VcLayout column :style="{minWidth: 'var(--centered-layout-min-width)', maxWidth: 'var(--centered-layout-max-width)', flexBasis: 'var(--centered-layout-min-width)'}">
-            <VcPageHeader :title="title"
-                          :subtitle="subtitle"
-                          :show-back-button="showBackButton"
-                          :breadcrumbs="breadcrumbs"
-                          :button-data="headerButtonData"
-                          @onSaveClicked="onSaveClicked"
-                          @onBackClicked="onBackClicked"/>
-            <VcLayout align-center justify-center
-                      :style="{ minHeight: '300px', backgroundColor: 'var(--green-lighten-2)'}">
-              Your content goes here
-            </VcLayout>
+      <VcLayout justify-center align-start :style="{margin: 'var(--size-value5)', height: '100%'}">
+        <VcLayout column :style="{minWidth: 'var(--centered-layout-min-width)', maxWidth: 'var(--centered-layout-max-width)', flexBasis: 'var(--centered-layout-min-width)'}">
+          <VcPageHeader :title="title"
+                        :subtitle="subtitle"
+                        :show-back-button="showBackButton"
+                        :breadcrumbs="breadcrumbs"
+                        :button-data="headerButtonData"
+                        @onSaveClicked="onSaveClicked"
+                        @onBackClicked="onBackClicked"/>
+          <VcLayout align-center justify-center
+                    :style="{ minHeight: '300px', backgroundColor: 'var(--green-lighten-2)'}">
+            Your content goes here
           </VcLayout>
+        </VcLayout>
       </VcLayout>
       </div>`,
 })
@@ -47,7 +47,7 @@ Playground.parameters = {
         source: {
             code: `
               <template>
-                  <VcLayout justify-center class="LayoutContainer">
+                  <VcLayout justify-center align-start class="LayoutContainer">
                       <VcLayout column class="MainLayout">
                           <VcPageHeader :title="$t([YourPageTitle])" 
                                         :subtitle="$t([YourPageSubtitle])"
@@ -124,7 +124,8 @@ Playground.parameters = {
             
              <style lang="scss" scoped>
                 .LayoutContainer {
-                    padding: var(--size-value5);
+                    margin: var(--size-value5);
+                    height: 100%;
                 }
                 
                 .MainLayout {

package/styles/variables.scss

@@ -28,6 +28,7 @@
   }
 
   --border-radius: 6px;
+  --border-radius-circle: 50%;
   --border-frame: 1px solid #e0e0e0;
   --border-focused-frame: 1px solid var(--v-secondary-base);
   --shadow-focused-frame: 0px 0px 0px 3px var(--v-secondary-lighten1);

package/styles/vuetify-variables.scss

@@ -33,4 +33,12 @@ $switch-ripple-top: calc(50% - 20px);
 $snackbar-content-padding: 0;
 
 // Select Field
-$select-field-height: 52px;
+$select-field-height: 52px;
+
+// Color Picker
+$color-picker-swatch-color-width: 24px;
+$color-picker-swatch-color-height: 24px;
+$color-picker-swatch-color-margin: 5px;
+$color-picker-controls-padding: 8px;
+$color-picker-swatch-color-border-radius: 50%;
+$color-picker-border-radius: 4px;

package/CHANGELOG.md

@@ -1,342 +0,0 @@
-# Change log
-All notable changes to this project will be documented in this file.
-
-Format based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-### Unreleased changes
-
-### v1.3.2(2022-11-06)
-- VcGalleryItem - fix ui on small desktop
-- VcChip - added 'selected' state
-
-### v1.3.1(2022-10-30)
-- VcGalleryItem - add 'selected' indication
-- VcGalleryItem - add ability to disable
-- VcRadio and VcRadioGroup - add ability to disable
-
-### v1.3.0(2022-10-25)
-- Adding SideNav layout
-- Adding centered layout
-- Adding VcPageHeader
-- Adding VcBreadcrumbs
-- Ability to disable VcLink
-- modal container can show close button on flavor input
-- upsell dialog fix dimension issue
-
-### v1.2.3 (2022-10-03)
-- VcMiniBanner - added new component
-- VcSearchPicker - removed redundant event emission from pointer
-- VcGalleryItem - added new component
-- VcGalleryList - added new component
-
-### v1.2.2 (2022-09-19)
-- VcTextField - fix alignment
-- VcSideNav
-- VcIcon - fix color prop
-
-### v1.2.1 (2022-09-08)
-- VcDocItem - added fileSize prop, event object added to emit
-- SvgIcons - added viewBox attribute on doc_Sheet
-
-### v1.2.0 (2022-09-08)
-- VcChipList - added new component
-- VcChip - added slot
-
-### v1.1.10 (2022-09-07)
-- VcTabs - fix scrollbar issue
-
-### v1.1.9 (2022-09-07)
-- Adding VcTabs component
-
-### v1.1.8 (2022-09-05)
-- VcInputModal - added closeOnEsc prop, passed to VcModalContainer 
-- VcModalContainer - added closeOnEsc prop, passed to VcModalWrapper
-- VcModalWrapper - added closeOnEsc prop, used as condition for esc keydown event
-- VcSearchPicker - use secondary brand hues
-- VcSearchPicker - keep menu open if focusing the text input
-
-### v1.1.7 (2022-09-04)
-- VcDocItem - added svg as an image type
-- VcSearchPicker - caret and pointer color
-- VcSearchPicker - add menu custom class name prop
-- VcSearchPicker - use brand colors
-
-### v1.1.6 (2022-08-28)
-- VcDocItem - added 'xlsx' as a spreadsheet format
-- VcDocItem - added max width
-- VcSearchPicker - add background color to input
-
-### v1.1.5 (2022-08-24)
-- VcDraggableList - remove hover from mobile
-
-### v1.1.4 (2022-08-21)
-- Adding composition and slots examples
-- VcModalFooter - added disabled option to VcButton
-
-### v1.1.3 (2022-08-21)
-- VcDraggableList - add story with slot and fix icon size
-
-### v1.1.2 (2022-08-16)
-- VcModalHeader - add right button icon
-- VcList
-- VcBaseListItem
-- VcMobilePicker - new mobile picker pattern based on VcList
-- VcTextField - add appendIcon and readonly properties + CSS
-- VcInputModal - add showFooter + CSS
-- VcModalContainer - remove the auto height on the VcModalContainerContent class
-- VcDraggableList - added component
-- VcTextField - fix label alignment
-- VcWizard - add dynamic step names and description
-- VcTextField - add google address autocomplete
-- VcAvatar - fix image path prop
-
-### 1.1.1 (2022-08-11)
-- Update translations
-
-### 1.1.0 (2022-08-08)
-- VcDocItem - implemented uploaded and corrupted states
-- VcStepperContent - add link color under the description
-- VcWizard - BREAKING CHANGE: v-model current-step fixes
-- VcSearchPicker - added component
-
-### 1.0.7 (2022-07-26)
-- VcEmptyState - change color for button ghost
-
-### 1.0.6 BREAKING CHANGES (2022-07-24)
-- Split variables.scss into vuetify-variables.scss and variables.scss
-- Consuming project changes required
-
-### 0.6.27 (2022-07-17)
-- VcButton - add ghost mode. fix storybook props inherit
-- VcEmptyState - add ability to choose ghost mode btn
-- VcDocItem - added document formats
-- VcAutoComplete, VcTextArea, VcTextField - remove branding color when not needed
-
-### 0.6.26 (2022-07-03)
-- VcDocItem - component added to ds
-- VcTimeSince
-- VcSwitch - add option to show label before switch
-- Translations with parameters
-
-### 0.6.25 (2022-06-23)
-- VcInputPopover - add click outside will not close the popover support
-
-### 0.6.24 (2022-06-14)
-- VcInputBottomSheet - add switch support
-
-### 0.6.23 (2022-06-13)
-- VcWizard - css fix
-
-### 0.6.22 (2022-05-31)
-- VcRadioGroup - fix tooltip slots
-
-### 0.6.21 (2022-05-16)
-- VcRadioGroup - create
-- VcRadio - create
-- VcTooltip - add slots and fallback icon as an activator
-
-### 0.6.20 (2022-05-16)
-- VcStepperContent fix height
-- VcInputPopover - add toggle to header
-
-### 0.6.19 (2022-05-10)
-- VcSegmentedControl added
-
-### 0.6.18 (2022-05-02)
-- VcListbox - add validator 
-
-### 0.6.17 (2022-04-27)
-- VcListbox - improve CSS 
-
-### 0.6.16 (2022-04-27)
-- VcListbox - add a search bar option
-
-### 0.6.15 (2022-04-25)
-- VcTooltip - opacity 100%
-- VcDropzone - fix active styles
-- VcSelectField - add error-messages, add tooltip nudge
-- VcTextField - add tooltip nudge
-- VcLink - add click action
-- VcSwitch - fix clickable icons
-- VcSearchBar
-
-### 0.6.14 (2022-03-21)
-- VcDropzone - component added
-- VcTextField - add prefix and error-messages
-- VcConfirmModal - fix for rtl button position
-
-### 0.6.13 (2022-03-14)
-- Updated localization files
-
-### 0.6.12 (2022-03-14)
-- VcSelectField - fix border colors for some variations
-
-### 0.6.11 (2022-03-13)
-- VcListbox - small fix for distinguishing data qa on the list
-
-### 0.6.10 (2022-03-06)
-- VcModalContainer - fix for overflow-x scroll
-
-### 0.6.9 (2022-03-02)
-- VcButton - fix for button flavor
-
-### 0.6.8 (2022-03-02)
-- VcTextArea - add fixed-height state
-- VcPopover - fix corners radius 
-- VcUpsellBlock - background overflow bug fix
-- VcLink - add target as prop
-- VcModalContainer - add xl size
-
-### 0.6.7 (2022-03-01)
-- VcButton - fix for color flavor
-
-### 0.6.6 (2022-03-01)
-- VcAvatar - support the 0 color id
-- VcBanner - fix background to be branded
-
-### 0.6.4 (2022-02-28)
-- VcButton - add flavor prop
-- VcBanner - Change component design
-
-### 0.6.3 (2022-02-23)
-- VcListbox - performance improve
-
-### 0.6.2 (2022-02-22)
-- VcListbox - minor fix
-
-### 0.6.1 (2022-02-21)
-- VcTextField - add tooltip, placeholder
-- VcUpsellBlock - css fixes
-
-### 0.6.0 (2022-02-20)
-- VcModalHeader - add no close button new style
-- VcPopover - add white background color
-- VcActionList - fix icon size
-- VcListbox - fix clicking not responding on the edges of the labels
-- VcListbox - use v-list-item-group to get the full "checked" array
-- VcListbox - tooltip option for a disabled item
-- VcUpsellBlock
-
-### 0.5.0 (2022-02-15)
-- VcButton - add outlined and prepend default icon.
-- VcBottomSheet
-- VcInputBottomSheet
-- VcModalHeader - add close button option
-- VcLink - add cursor pointer
-- VcModalHeader - add description
-- VcPopover
-- VcInputPopover
-- VcBadge - update parameters, add test, enrich the story book 
-- VcWizard fix content height
-- VcExpansionCard fix color
-
-
-### 0.4.0 (2022-02-08)
-- Added VcBadge component
-- fix icon name in VcActionList
-- add parameters to VcTextArea
-- add button the ability to be link
-- VcLink - add secondary
-- VcLink - add prepend icon
-- VcLink - change text context to label
-- SvgIcons - rename chevron_left to chevron_right
-- SvgIcons - add trash, copy, chevron_left
-
-### 0.3.17 (2022-02-06)
-- VcLink - add secondary
-- VcLink - add prepend icon
-- VcLink - change text context to label
-- SvgIcons - rename chevron_left to chevron_right
-- SvgIcons - add trash, copy, chevron_left
-
-### 0.3.16 (2022-01-31)
-- Center image in VcImage
-- bug fix in VcBanner
-- Bug fix in VcImage
-- VcChip
-- fix expansion card content slot to have padding
-- text-area auto grow
-
-### 0.3.15 (2022-01-24)
-- rename wizard event to move forward
-- move breakpoint from mixin to wizard component
-- modify expansion card content slot to have padding
-
-### 0.3.14 (2022-01-24)
-- add the ability to use image path or object in all relevant places
-- add VcImage to facilitate use of different types of images and SVGs
-- add title to wizard stepsBar
-
-### 0.3.12 (2022-01-18)
-- add animation to shadow for hover on card
-- fix border radius on action list
-- fix v-model value in VcListEntity and VcExpansionCard
-- added boolean useOffset prop on VcInputModal, VcNoticeModal, VcConfirmProminentModal
-- VcChecklistItem
-- VcListbox
-- Add option to disable the tooltip on VcTooltip
-- Add option to show the avatar on black & white
-- Add option to remove the avatar border
-
-### 0.2.10 (2022-01-13)
-- small fixes on VcActions
-- add icon option for switch component
-- VcExpansionCard
-- VcListEntity
-
-### 0.2.9 (2022-01-12)
-- update design on list item
-- add loading option for confirm modal
-
-### 0.2.4 (2022-01-05)
-- adding svg images to vue object
-- move VcSvg to global components
-
-### 0.2.3 (2022-01-03)
-- bug fix related to $ds
-
-### 0.2.2 (2022-01-03)
-- VcStepsBar
-- VcMobileWizardProgress
-- VcProgressCircular
-- Separate init of i18n for easier unit testing in consuming project
-
-### 0.2.1 (2021-12-29)
-- adding mastercard and visa to icon
-
-### 0.2.0 (2021-12-29)
-- Adding VcEmptyState
-- Adding VcLink
-- Adding VcFocusArea
-- Migrate the VcListItem component from FG
-- Migrate the VcGroupHeader component from FG
-- Adding VcEmptyState
-- Adding VcLink
-- update for VcButton - added pill (rounded) prop
-- Migrate VcFilterPanel component from FG
-- Migrate VcInfiniteScroll component from FG
-- Add translation utility
-- update VcToast
-
-### 0.1.5 (2021-12-07)
-- update for VcAlert - added inline state
-- update for VcCard - update all design and add test and story
-- simplify the process of adding svg icons
-- Migrate the VcCheckbox component from FG
-- add disabled css for VcButton
-
-## 0.1.4 (2021-11-28)
-- VcConfirmModal - added support for loader in modal buttons
-- VcConfirmModal, VcModalContainer, VcModalWrapper - added support to add or remove the offset class
-
-## 0.1.2 (2021-11-21)
-### Added components
-- VcActionsList
-- VcBottomActions 
-- VcActions - A wrapper for VcActionsList and VcBottomActions that chooses which one to display, depending if it is used in desktop or mobile
-- VcTooltip
-- VcIconWithTooltip
-
-### Added utilities
-- util/colorUtil.js - utility functions commonly used for setting the theme