@eturnity/eturnity_reusable_components 8.19.2 → 8.19.4

package/src/components/tabsHeader/index.vue

@@ -8,11 +8,24 @@
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
-        <NameContainer>
-          <div>{{ item.text }}</div>
-          <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
+        <RCIcon
+          v-if="item.icon"
+          :color="
+            activeTab === item.id
+              ? theme.semanticColors.purple[500]
+              : theme.semanticColors.teal[800]
+          "
+          :hovered-color="
+            activeTab === item.id
+              ? theme.semanticColors.purple[500]
+              : theme.semanticColors.teal[800]
+          "
+          :name="item.icon"
+          size="14px"
+        />
+        <div>{{ item.text }}</div>
+        <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
           <SubText v-if="item.subText">{{ item.subText }}</SubText>
-        </NameContainer>
         <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>
@@ -39,6 +52,7 @@
   // />
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
+  import theme from '@/assets/theme'
 
   const NameContainer = styled.div`
     display: flex;
@@ -79,12 +93,17 @@
     gap: 8px;
     padding: 10px 25px;
     font-size: 14px;
-    font-weight: 400;
+    font-weight: ${(props) => (props.isActive ? '500' : '400')};
     color: ${(props) =>
-      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
-    border-bottom: ${(props) =>
-      props.isActive ? '1px solid' + props.theme.colors.purple6 : 'unset'};
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
     flex-grow: ${(props) => (props.fullSize ? 1 : 0)};
+    background-color: ${(props) => props.theme.colors.white};
+    border-bottom: ${(props) =>
+      props.isActive
+        ? '1px solid' + props.theme.semanticColors.purple[400]
+        : '1px solid' + props.theme.semanticColors.grey[400]};
   `
 
   export default {
@@ -105,7 +124,7 @@
       },
       activeTab: {
         required: true,
-        type: Number,
+        type: [Number, String],
       },
       fullSize: {
         type: Boolean,
@@ -113,6 +132,11 @@
       },
     },
     emits: ['on-tab-change'],
+    data() {
+      return {
+        theme,
+      }
+    },
     methods: {
       onTabClick({ id }) {
         if (id === this.activeTab) {

package/src/components/videoThumbnail/videoThumbnail.stories.js

@@ -1,33 +1,106 @@
 import VideoThumbnail from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
   title: 'VideoThumbnail',
   component: VideoThumbnail,
-  // argTypes: {},
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'URL of the thumbnail image',
+    },
+    fit: {
+      control: 'select',
+      options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+      description: 'How the image should fit within its container',
+    },
+    width: {
+      control: 'text',
+      description: 'Width of the thumbnail (e.g., "300px")',
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the thumbnail (e.g., "200px")',
+    },
+    playIconSize: {
+      control: 'text',
+      description: 'Size of the play icon (e.g., "50px")',
+    },
+    playIconColor: {
+      control: 'color',
+      description: 'Color of the play icon',
+    },
+  },
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { VideoThumbnail },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<VideoThumbnail v-bind="$props"/>`,
-  // import VideoThumbnail from "@eturnity/eturnity_reusable_components/src/components/videoThumbnail"
-  //  How to use:
-  //<videoThumbnail src="https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080"
-  //   playIconColor="red"
-  //   playIconSize="20px"
-  //   width="400px"
-  //   height="600px"
-  //   />
+  setup() {
+    return { args }
+  },
+  template: '<VideoThumbnail v-bind="args" />',
+  provide: {
+    theme,
+  },
 })
 
 export const Default = Template.bind({})
 Default.args = {
-  src: 'https://musicart.xboxlive.com/6/cfaf1e9d-0000-0000-0000-000000000009/504/image.jpg?w=1920&h=1080',
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
+  fit: 'cover',
+  width: '300px',
+  height: '200px',
+  playIconSize: '50px',
+  playIconColor: 'blue',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=200&h=150&fit=crop',
+  fit: 'cover',
+  width: '200px',
+  height: '150px',
+  playIconSize: '30px',
+  playIconColor: 'blue',
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=800&h=600&fit=crop',
+  fit: 'cover',
+  width: '600px',
+  height: '400px',
+  playIconSize: '80px',
+  playIconColor: 'blue',
+}
+
+export const CustomFit = Template.bind({})
+CustomFit.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
+  fit: 'contain',
+  width: '300px',
+  height: '200px',
+  playIconSize: '50px',
+  playIconColor: 'blue',
+}
+
+export const CustomIconColor = Template.bind({})
+CustomIconColor.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=300&fit=crop',
+  fit: 'cover',
+  width: '300px',
+  height: '200px',
   playIconSize: '50px',
   playIconColor: 'red',
-  width: '400px',
-  height: '300px',
+}
+
+export const Square = Template.bind({})
+Square.args = {
+  src: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=400&h=400&fit=crop',
   fit: 'cover',
+  width: '300px',
+  height: '300px',
+  playIconSize: '50px',
+  playIconColor: 'blue',
 }

package/src/helpers/translateLang.js

@@ -1,3 +1,21 @@
+import {
+  enUS,
+  enGB,
+  de,
+  fr,
+  it,
+  es,
+  da,
+  pl,
+  sv,
+  nb,
+  nl,
+  cs,
+  fi,
+  pt,
+  ca,
+} from 'date-fns/locale'
+
 export const translateLang = (lang) => {
   // this is needed so that we use the correct keys for Phrase
   if (lang === 'en') {
@@ -55,30 +73,83 @@ export const translateLang = (lang) => {
   }
 }
 
+export const getDateFormat = (lang) => {
+  const formatMap = {
+    'en-us': 'MM/dd/yyyy',
+    'en-gb': 'dd/MM/yyyy',
+    en: 'MM/dd/yyyy',
+    'de-de': 'dd.MM.yyyy',
+    'de-at': 'dd.MM.yyyy',
+    'de-ch': 'dd.MM.yyyy',
+    'de-lu': 'dd.MM.yyyy',
+    'de-be': 'dd.MM.yyyy',
+    de: 'dd.MM.yyyy',
+    'fr-fr': 'dd/MM/yyyy',
+    'fr-be': 'dd/MM/yyyy',
+    'fr-lu': 'dd/MM/yyyy',
+    'fr-ch': 'dd/MM/yyyy',
+    fr: 'dd/MM/yyyy',
+    'it-it': 'dd/MM/yyyy',
+    'it-ch': 'dd/MM/yyyy',
+    it: 'dd/MM/yyyy',
+    'da-dk': 'dd.MM.yyyy',
+    'pl-pl': 'dd.MM.yyyy',
+    'sv-se': 'yyyy-MM-dd',
+    'no-no': 'dd.MM.yyyy',
+    'nb-no': 'dd.MM.yyyy',
+    'nl-nl': 'dd-MM-yyyy',
+    'nl-be': 'dd-MM-yyyy',
+    cs: 'dd.MM.yyyy',
+    'fi-fi': 'dd.MM.yyyy',
+    'pt-pt': 'dd/MM/yyyy',
+    'es-es': 'dd/MM/yyyy',
+    'ca-es': 'dd/MM/yyyy',
+  }
+
+  return formatMap[lang.toLowerCase()] || 'MM/dd/yyyy' // Fallback to en-US format
+}
+
 export const datePickerLang = (lang) => {
-  if (
-    lang === 'de-de' ||
-    lang === 'de-ch' ||
-    lang === 'de-lu' ||
-    lang === 'de-be'
-  ) {
-    return 'de'
-  } else if (
-    lang === 'fr-fr' ||
-    lang === 'fr-ch' ||
-    lang === 'fr-lu' ||
-    lang === 'fr-be'
-  ) {
-    return 'fr'
-  } else if (lang === 'it-it' || lang === 'it-ch') {
-    return 'it'
-  } else if (lang === 'en-us' || lang === 'en-gb') {
-    return 'en'
-  } else if (lang === 'es-es' || lang === 'ca-es' || lang === 'pt-pt') {
-    return 'es'
-  } else {
-    return lang
+  const localeMap = {
+    'en-us': enUS,
+    'en-gb': enGB,
+    en: enUS,
+    'de-de': de,
+    'de-at': de,
+    'de-ch': de,
+    'de-lu': de,
+    'de-be': de,
+    de: de,
+    'fr-fr': fr,
+    'fr-be': fr,
+    'fr-lu': fr,
+    'fr-ch': fr,
+    fr: fr,
+    'it-it': it,
+    'it-ch': it,
+    it: it,
+    'da-dk': da,
+    'pl-pl': pl,
+    'sv-se': sv,
+    'no-no': nb,
+    'nb-no': nb,
+    'nl-nl': nl,
+    'nl-be': nl,
+    cs: cs,
+    'fi-fi': fi,
+    'pt-pt': pt,
+    'es-es': es,
+    'ca-es': ca,
+  }
+
+  const normalizedLang = lang ? lang.toLowerCase() : 'en-us'
+  const locale = localeMap[normalizedLang] || enUS
+  if (!localeMap[normalizedLang]) {
+    console.warn(
+      `Unsupported language for datePickerLang: ${lang}, falling back to enUS`
+    )
   }
+  return locale
 }
 
 export const tinyLanguage = (lang) => {
@@ -123,6 +194,6 @@ export const langForLocaleString = () => {
       : localStorage.getItem('lang') === 'ca-es'
       ? 'es-es'
       : localStorage.getItem('lang')
-    : 'en-US'
-  return selectedLang !== 'null' ? selectedLang : 'en-US'
+    : 'en-us'
+  return selectedLang !== 'null' ? selectedLang : 'en-us'
 }

package/src/components/icon/Icons.stories.js

@@ -1,31 +0,0 @@
-import IconCollection from './iconCollection.vue'
-
-export default {
-  title: 'icon',
-  component: IconCollection,
-}
-
-const Template = (args) => ({
-  components: { IconCollection },
-  setup() {
-    return { args }
-  },
-  template: '<IconCollection v-bind="args" />',
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  size: '30px',
-}
-
-export const WithColor = Template.bind({})
-WithColor.args = {
-  size: '30px',
-  color: 'red',
-  hoveredColor: 'crimson',
-}
-
-export const Large = Template.bind({})
-Large.args = {
-  size: '60px',
-}