tide-design-system 2.1.13 → 2.2.0

package/index.ts

@@ -1,6 +1,5 @@
 import TideAccordionItem from '@/components/TideAccordionItem.vue';
 import TideAlert from '@/components/TideAlert.vue';
-import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
 import TideBadge from '@/components/TideBadge.vue';
 import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
 import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
@@ -17,6 +16,7 @@ import TideColumns from '@/components/TideColumns.vue';
 import TideDivider from '@/components/TideDivider.vue';
 import TideIcon from '@/components/TideIcon.vue';
 import TideImage from '@/components/TideImage.vue';
+import TideImageBackground from '@/components/TideImageBackground.vue';
 import TideIndicator from '@/components/TideIndicator.vue';
 import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
 import TideInputRadio from '@/components/TideInputRadio.vue';
@@ -26,6 +26,7 @@ import TideInputTextarea from '@/components/TideInputTextarea.vue';
 import TideLink from '@/components/TideLink.vue';
 import TideModal from '@/components/TideModal.vue';
 import TidePagination from '@/components/TidePagination.vue';
+import TidePopover from '@/components/TidePopover.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
 import { ALERT } from '@/types/Alert';
@@ -182,7 +183,6 @@ export {
 export {
   TideAccordionItem,
   TideAlert,
-  TideBackgroundImage,
   TideBadge,
   TideBadgeTrustedPartner,
   TideBreadCrumbs,
@@ -199,6 +199,7 @@ export {
   TideDivider,
   TideIcon,
   TideImage,
+  TideImageBackground,
   TideIndicator,
   TideInputCheckbox,
   TideInputRadio,
@@ -208,6 +209,7 @@ export {
   TideLink,
   TideModal,
   TidePagination,
+  TidePopover,
   TideSeoLinks,
   TideSwitch,
 };

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.1.13",
+  "version": "2.2.0",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideButtonSegmented.vue

@@ -26,7 +26,7 @@
       CSS.BG.SURFACE.VARIANT,
       CSS.DISPLAY.FLEX,
       CSS.GAP.QUARTER,
-      CSS.BORDER.RADIUS.HALF,
+      CSS.BORDER.RADIUS.FULL,
       CSS.PADDING.FULL.QUARTER,
       CSS.OVERFLOW.XY.HIDDEN,
       CSS.WIDTH.FULL,
@@ -39,7 +39,8 @@
           ? [CSS.BG.SURFACE.DEFAULT, CSS.FONT.COLOR.SURFACE.DEFAULT, CSS.SHADOW.BOTTOM]
           : ['inactive', CSS.FONT.COLOR.SURFACE.VARIANT],
         CSS.FLEX.GROW.ON,
-        CSS.BORDER.RADIUS.QUARTER,
+        CSS.BORDER.FULL.TWO,
+        CSS.BORDER.RADIUS.FULL,
         CSS.PADDING.Y.QUARTER,
         CSS.WIDTH.FULL,
         CSS.FONT.ROLE.BUTTON_1,
@@ -50,12 +51,12 @@
       @click="handleClick(index)"
       v-for="(tab, index) in props.tabs"
     >
-      <span :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
+      <span :class="[CSS.FONT.ROLE.LABEL_2_SEMIBOLD]">
         {{ tab.label }}
       </span>
 
       <span
-        :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD]"
+        :class="[CSS.FONT.ROLE.LABEL_2_SEMIBOLD]"
         v-if="tab.count && tab.count > 0"
       >
         ({{ tab.count }})
@@ -75,10 +76,11 @@
   }
 
   .inactive:not(:hover) {
-    border: 1px solid var(--tide-surface-variant);
+    border-color: var(--tide-surface-variant);
   }
 
   .inactive:hover {
-    border: 1px solid var(--tide-border);
+    border-color: var(--tide-border);
+    color: var(--tide-surface-default);
   }
 </style>

package/src/components/TideImage.vue

@@ -26,7 +26,7 @@
   const picture = ref();
   const img = ref();
 
-  const imageDefault = 'https://cdn-static-rec.tilabs.io/image-coming-soon-512.png';
+  const imageDefault = 'https://cdn-static.tilabs.io/marketplace/common/image-coming-soon.svg';
 
   const setImageFromDefault = () => {
     const currentSrc = img.value?.currentSrc;

package/src/components/{TideBackgroundImage.vue → TideImageBackground.vue}

@@ -32,7 +32,7 @@
       ]"
     >
       <TideImage
-        :class="['tide-background-image', CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
+        :class="['tide-image-background', CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
         :is-lazy="props.isLazy"
         :sources="props.sources"
         :src="props.src"
@@ -45,11 +45,11 @@
 </template>
 
 <style scoped lang="scss">
-  .tide-background-image {
+  .tide-image-background {
     z-index: -1;
   }
 
-  :deep(.tide-background-image img) {
+  :deep(.tide-image-background img) {
     width: 100%;
     height: 100%;
     object-fit: cover;

package/src/components/TideInputCheckbox.vue

@@ -81,7 +81,7 @@
       :class="[
         CSS.DISPLAY.FLEX,
         CSS.GAP.HALF,
-        CSS.FONT.ROLE.LABEL_1,
+        CSS.FONT.ROLE.BODY_1,
         disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
       ]"
       :for="props.inputId"

package/src/components/TideInputSelect.vue

@@ -105,7 +105,13 @@
         </label>
 
         <select
-          :class="[CSS.PADDING.BOTTOM.HALF, CSS.PADDING.X.ONE, CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED]"
+          :class="[
+            CSS.PADDING.BOTTOM.HALF,
+            CSS.PADDING.X.ONE,
+            CSS.WIDTH.FULL,
+            disabled && CSS.CURSOR.NOT_ALLOWED,
+            CSS.FONT.ROLE.BODY_1,
+          ]"
           :disabled="disabled"
           :name="name"
           ref="input"

package/src/components/TideInputText.vue

@@ -199,7 +199,7 @@
 
           <input
             :autocomplete="autocomplete ? 'on' : 'off'"
-            :class="[CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED]"
+            :class="[CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED, CSS.FONT.ROLE.BODY_1]"
             :data-track="props.dataTrack"
             :disabled="props.disabled"
             :maxlength="props.maxlength"

package/src/components/TideInputTextarea.vue

@@ -120,7 +120,7 @@
       </label>
 
       <textarea
-        :class="[CSS.WIDTH.FULL]"
+        :class="[CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1]"
         :data-track="props.dataTrack"
         :maxlength="props.maxlength"
         :minlength="props.minlength"

package/src/stories/{TideBackgroundImage.stories.ts → TideImageBackground.stories.ts}

@@ -1,4 +1,4 @@
-import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
+import TideImageBackground from '@/components/TideImageBackground.vue';
 import { MEDIA } from '@/types/Breakpoint';
 import { argTypeBooleanUnrequired, disabledArgType } from '@/utilities/storybook';
 
@@ -15,7 +15,7 @@ const formatSnippet = (_code: string, context: StoryContext) => {
   if (hasSources && hasSourcesLength) argsWithValues.push(`:sources="sources"`);
   if (args.src) argsWithValues.push(`:src="${args.src}"`);
 
-  return `<TideBackgroundImage ${argsWithValues.join(' ')} />`;
+  return `<TideImageBackground ${argsWithValues.join(' ')} />`;
 };
 
 const parameters = {
@@ -29,16 +29,16 @@ const parameters = {
 };
 
 const render = (args: any) => ({
-  components: { TideBackgroundImage },
+  components: { TideImageBackground },
   setup() {
     return { args };
   },
   template: `
-    <TideBackgroundImage v-bind="args">
+    <TideImageBackground v-bind="args">
       <div class="tide-padding-4 tide-font-700 tide-font-20">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque est nibh, convallis vel aliquam non, elementum a lorem.
       </div>
-    </TideBackgroundImage>
+    </TideImageBackground>
   `,
 });
 
@@ -99,11 +99,11 @@ export default {
     sources,
     src: 'https://placedog.net/375/400',
   },
-  component: TideBackgroundImage,
+  component: TideImageBackground,
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideBackgroundImage',
+  title: 'Basic Components/TideImageBackground',
 };
 
 export const Demo = {};