@eturnity/eturnity_reusable_components 9.22.2 → 9.25.0

package/src/components/accordion/Accordion.stories.js

@@ -2,7 +2,7 @@ import Accordion from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'Accordion',
+  title: 'Components/Accordion/Accordion',
   component: Accordion,
   // argTypes: {},
 }

package/src/components/addNewButton/AddNewButton.stories.js

@@ -1,17 +1,49 @@
 import AddNewButton from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
-  title: 'AddNewButton',
+  title: 'Components/AddNewButton/AddNewButton',
   component: AddNewButton,
   tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    shouldPosition: {
+      control: 'boolean',
+      description: 'Fixed to bottom-right vs inline in flow',
+    },
+    dataId: { control: 'text' },
+    dataQaId: { control: 'text' },
+  },
 }
 
-// import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-// To use:
-// <add-new-button :shouldPosition="true" />
-
-export const Default = {
-  args: {
-    shouldPosition: true,
+const Template = (args) => ({
+  components: { AddNewButton },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="add-new-story" style="min-height: 200px; padding: 24px; position: relative; background: #f0f2f5;">
+      <p style="margin: 0 0 8px;">Floating action pattern for primary “create” entry points.</p>
+      <AddNewButton v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
   },
+})
+
+export const FixedPosition = Template.bind({})
+FixedPosition.args = {
+  shouldPosition: true,
+  dataId: 'add_new_fab',
+  dataQaId: 'add_new_fab',
+}
+
+export const InlineInLayout = Template.bind({})
+InlineInLayout.args = {
+  shouldPosition: false,
+  dataId: 'add_new_inline',
+  dataQaId: 'add_new_inline',
 }

package/src/components/banner/actionBanner/ActionBanner.stories.js

@@ -1,7 +1,7 @@
 import ActionBanner from './index.vue'
 import theme from '@/assets/theme'
 export default {
-  title: 'ActionBanner',
+  title: 'Components/Banner/ActionBanner',
   component: ActionBanner,
   tags: ['autodocs'],
 }

package/src/components/banner/actionBanner/index.vue

@@ -42,9 +42,11 @@
     font-family: inherit;
     font-size: 18px;
     font-style: normal;
-    font-weight: 700;
+    font-weight: 500;
     line-height: 120%;
-    text-transform: uppercase;
+    &:first-letter {
+      text-transform: uppercase;
+    }
   `
   const ButtonContainer = styled.div`
     display: inline-flex;

package/src/components/banner/banner/Banner.stories.js

@@ -2,7 +2,7 @@ import Banner from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'Banner',
+  title: 'Components/Banner/Banner',
   component: Banner,
   tags: ['autodocs'],
   argTypes: {

package/src/components/banner/infoBanner/InfoBanner.stories.js

@@ -2,7 +2,7 @@ import InfoBanner from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'InfoBanner',
+  title: 'Components/Banner/InfoBanner',
   component: InfoBanner,
   tags: ['autodocs'],
   argTypes: {

package/src/components/banner/infoBanner/index.vue

@@ -41,9 +41,11 @@
     font-family: inherit;
     font-size: 18px;
     font-style: normal;
-    font-weight: 700;
+    font-weight: 500;
     line-height: 120%;
-    text-transform: uppercase;
+    &:first-letter {
+      text-transform: uppercase;
+    }
   `
   const ButtonContainer = styled.div`
     display: inline-flex;

package/src/components/banner/notificationBanner/notificationBanner.stories.js

@@ -0,0 +1,81 @@
+import { ref } from 'vue'
+import NotificationBanner from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Banner/NotificationBanner',
+  component: NotificationBanner,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    mainText: { control: 'text' },
+    buttonText: { control: 'text' },
+    backgroundColor: { control: 'text', description: 'Theme color key' },
+    textColor: { control: 'text' },
+    iconName: { control: 'text' },
+    isOpen: { control: 'boolean', description: 'When true, banner appears (auto-dismiss ~10s)' },
+  },
+}
+
+export const TriggerFromButton = {
+  render: () => ({
+    components: { NotificationBanner },
+    setup() {
+      const isOpen = ref(false)
+      return { isOpen }
+    },
+    template: `
+      <div data-test-id="notification-banner-story" style="padding: 24px;">
+        <p style="margin-bottom: 12px;">Snack-style banner fixed to the bottom of the viewport.</p>
+        <button type="button" style="padding: 8px 14px;" @click="isOpen = true">
+          Show notification
+        </button>
+        <NotificationBanner
+          :is-open="isOpen"
+          main-text="Your report has been generated and is ready to download."
+          button-text="Download PDF"
+          background-color="green"
+          text-color="white"
+          icon-name="checkmark"
+          @on-button-click="() => {}"
+          @on-close="isOpen = false"
+        />
+      </div>
+    `,
+    provide: {
+      theme,
+    },
+  }),
+}
+
+export const DarkStripe = {
+  render: () => ({
+    components: { NotificationBanner },
+    setup() {
+      const isOpen = ref(false)
+      return { isOpen }
+    },
+    template: `
+      <div data-test-id="notification-banner-dark" style="padding: 24px;">
+        <button type="button" style="padding: 8px 14px;" @click="isOpen = true">
+          Show update banner
+        </button>
+        <NotificationBanner
+          :is-open="isOpen"
+          main-text="Maintenance tonight from 22:00–23:00 UTC."
+          button-text="Learn more"
+          background-color="black"
+          text-color="white"
+          icon-name="warning_triangle"
+          @on-button-click="() => {}"
+          @on-close="isOpen = false"
+        />
+      </div>
+    `,
+    provide: {
+      theme,
+    },
+  }),
+}

package/src/components/buttons/buttonIcon/index.vue

@@ -19,26 +19,20 @@
       <IconContainer
         :app-theme="appTheme"
         :button-size="buttonSize"
+        class="button-icon-container"
         data-test-id="button-icon-icon-container"
         :height="height"
+        :is-active="isActive"
+        :is-disabled="isDisabled"
+        :is-hovered="isHovered"
         :type="type"
         :variant="variant"
       >
         <Icon
-          :color="
-            iconColor ||
-            (isDisabled
-              ? theme.mainButton[appTheme][type][variant].disabled.textColor
-              : theme.mainButton[appTheme][type][variant].default.textColor)
-          "
+          :color="getIconColor"
           :disable-hover="disableIconHover"
           :fill-type="fillType"
-          :hovered-color="
-            iconColor ||
-            (isDisabled
-              ? theme.mainButton[appTheme][type][variant].disabled.textColor
-              : theme.mainButton[appTheme][type][variant].default.textColor)
-          "
+          :hovered-color="getIconColor"
           :name="iconName"
           size="14px"
         />
@@ -52,20 +46,10 @@
         {{ isFirstLetterCapitalized ? capitalizeFirstLetter(text) : text }}
         <Icon
           v-if="showCaret"
-          :color="
-            iconColor ||
-            (isDisabled
-              ? theme.mainButton[appTheme][type][variant].disabled.textColor
-              : theme.mainButton[appTheme][type][variant].default.textColor)
-          "
+          :color="getIconColor"
           data-test-id="button-icon-caret"
           :disable-hover="disableIconHover"
-          :hovered-color="
-            iconColor ||
-            (isDisabled
-              ? theme.mainButton[appTheme][type][variant].disabled.textColor
-              : theme.mainButton[appTheme][type][variant].default.textColor)
-          "
+          :hovered-color="getIconColor"
           name="arrow_down"
           size="8px"
         />
@@ -103,7 +87,87 @@
 
   import Icon from '../../icon'
   import styled from 'vue3-styled-components'
-  import Theme from '../../../assets/theme'
+  import theme from '../../../assets/theme'
+
+  const getButtonState = (props) => {
+    if (props.isDisabled) return 'disabled'
+    if (props.isActive) return 'active'
+    if (props.isHovered) return 'hover'
+    return 'default'
+  }
+
+  const getInteractionState = (props) => {
+    if (props.isActive) return 'active'
+    if (props.isHovered) return 'hover'
+    return 'default'
+  }
+
+  const getButtonTextColor = (variantStyles, state) =>
+    variantStyles[state]?.textColor ?? variantStyles.default?.textColor
+
+  const getButtonBorder = (variantStyles, state) => {
+    const borderColor = variantStyles[state]?.borderColor
+    return borderColor ? `1px solid ${borderColor}` : 'none'
+  }
+
+  const getIconBackgroundColor = (variantStyles, state) =>
+    variantStyles[state]?.iconBackgroundColor ??
+    variantStyles.default?.iconBackgroundColor
+
+  const resolveButtonTextColor = (
+    variantStyles,
+    props,
+    interactionState = 'default'
+  ) => {
+    if (props.isDisabled) {
+      return getButtonTextColor(variantStyles, 'disabled')
+    }
+    return getButtonTextColor(variantStyles, interactionState)
+  }
+
+  const resolveButtonBackgroundColor = (
+    variantStyles,
+    props,
+    interactionState = 'default'
+  ) => {
+    if (props.isDisabled) {
+      return variantStyles.disabled?.backgroundColor
+    }
+    if (props.isTransparent) return 'transparent'
+    if (props.customColor) return props.customColor
+    return (
+      variantStyles[interactionState]?.backgroundColor ??
+      variantStyles.default?.backgroundColor
+    )
+  }
+
+  const resolveButtonBorder = (
+    variantStyles,
+    props,
+    interactionState = 'default'
+  ) => {
+    if (props.isDisabled) {
+      return getButtonBorder(variantStyles, 'disabled')
+    }
+    if (props.customColor) {
+      return `1px solid ${props.customColor}`
+    }
+    return getButtonBorder(variantStyles, interactionState)
+  }
+
+  const resolveIconBackgroundColor = (
+    variantStyles,
+    props,
+    interactionState = 'default'
+  ) => {
+    if (props.isDisabled) {
+      return getIconBackgroundColor(variantStyles, 'disabled')
+    }
+    return getIconBackgroundColor(variantStyles, interactionState)
+  }
+
+  const getVariantStyles = (props) =>
+    props.theme.mainButton[props.appTheme][props.type][props.variant]
 
   const PageContainer = styled.div`
     position: relative;
@@ -125,43 +189,34 @@
   const ButtonWrapper = styled('div', ButtonAttrs)`
     position: relative;
     display: grid;
-    align-content: center
+    align-content: center;
     grid-template-columns: auto 1fr auto;
     height: ${({ height }) => height};
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) => {
-      return props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor
+      const variantStyles = getVariantStyles(props)
+      return resolveButtonTextColor(
+        variantStyles,
+        props,
+        getInteractionState(props)
+      )
+    }};
+    background-color: ${(props) => {
+      const variantStyles = getVariantStyles(props)
+      return resolveButtonBackgroundColor(
+        variantStyles,
+        props,
+        getInteractionState(props)
+      )
     }};
-    background-color: ${(props) =>
-      props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
-        : props.isTransparent
-        ? 'transparent'
-        : props.customColor
-        ? props.customColor
-        : props.isActive
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .active.backgroundColor
-        : props.isHovered
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .hover.backgroundColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
     border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.customColor
-        ? props.customColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
+      const variantStyles = getVariantStyles(props)
+      return resolveButtonBorder(
+        variantStyles,
+        props,
+        getButtonState(props)
+      )
     }};
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
     user-select: none;
@@ -169,26 +224,71 @@
     overflow: visible;
     min-width: ${(props) => props.minWidth || 'initial'};
 
+    .button-icon-container {
+      border-right: ${(props) => {
+        const variantStyles = getVariantStyles(props)
+        return getButtonBorder(variantStyles, getInteractionState(props))
+      }};
+    }
+
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        background-color: ${(props) =>
-          props.isDisabled
-            ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-                .disabled.backgroundColor
-            : props.customColor
-            ? props.customColor
-            : props.theme.mainButton[props.appTheme][props.type][props.variant]
-                .hover.backgroundColor};
+        background-color: ${(props) => {
+          const variantStyles = getVariantStyles(props)
+          return resolveButtonBackgroundColor(variantStyles, props, 'hover')
+        }};
+        color: ${(props) => {
+          const variantStyles = getVariantStyles(props)
+          return resolveButtonTextColor(variantStyles, props, 'hover')
+        }};
+        border: ${(props) => {
+          const variantStyles = getVariantStyles(props)
+          return resolveButtonBorder(
+            variantStyles,
+            props,
+            props.isDisabled ? 'disabled' : 'hover'
+          )
+        }};
+
+        .button-icon-container {
+          border-right: ${(props) => {
+            const variantStyles = getVariantStyles(props)
+            return getButtonBorder(
+              variantStyles,
+              props.isDisabled ? 'disabled' : 'hover'
+            )
+          }};
+        }
       }
     }
 
     &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active.backgroundColor};
+      background-color: ${(props) => {
+        const variantStyles = getVariantStyles(props)
+        return resolveButtonBackgroundColor(variantStyles, props, 'active')
+      }};
+      color: ${(props) => {
+        const variantStyles = getVariantStyles(props)
+        return resolveButtonTextColor(variantStyles, props, 'active')
+      }};
+      border: ${(props) => {
+        const variantStyles = getVariantStyles(props)
+        return resolveButtonBorder(
+          variantStyles,
+          props,
+          props.isDisabled ? 'disabled' : 'active'
+        )
+      }};
+
+      .button-icon-container {
+        border-right: ${(props) => {
+          const variantStyles = getVariantStyles(props)
+          return getButtonBorder(
+            variantStyles,
+            props.isDisabled ? 'disabled' : 'active'
+          )
+        }};
+      }
     }
   `
 
@@ -213,6 +313,9 @@
     type: String,
     variant: String,
     height: String,
+    isDisabled: Boolean,
+    isActive: Boolean,
+    isHovered: Boolean,
   }
   const IconContainer = styled('div', IconContainerAttrs)`
     display: grid;
@@ -221,14 +324,39 @@
     justify-items: center;
     width: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px 0 0 4px;
-    border-right: ${(props) => {
-      const borderColor =
-        props.theme.mainButton[props.appTheme][props.type][props.variant]
-          .default.borderColor
-      return borderColor ? `1px solid ${borderColor}` : 'none'
+    background: ${(props) => {
+      const variantStyles = getVariantStyles(props)
+      return resolveIconBackgroundColor(
+        variantStyles,
+        props,
+        getInteractionState(props)
+      )
     }};
+    border-radius: 4px 0 0 4px;
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: ${(props) => {
+          const variantStyles = getVariantStyles(props)
+          return resolveIconBackgroundColor(
+            variantStyles,
+            props,
+            props.isDisabled ? 'disabled' : 'hover'
+          )
+        }};
+      }
+    }
+
+    &:active {
+      background: ${(props) => {
+        const variantStyles = getVariantStyles(props)
+        return resolveIconBackgroundColor(
+          variantStyles,
+          props,
+          props.isDisabled ? 'disabled' : 'active'
+        )
+      }};
+    }
   `
 
   const NumberContainer = styled.div`
@@ -418,10 +546,18 @@
         type: Boolean,
       },
     },
-    data() {
-      return {
-        theme: Theme,
-      }
+    computed: {
+      theme() {
+        return theme
+      },
+      getIconColor() {
+        if (this.iconColor) return this.iconColor
+        if (this.isDisabled) {
+          return this.theme.mainButton[this.appTheme][this.type][this.variant]
+            .disabled.textColor
+        }
+        return 'currentColor'
+      },
     },
     methods: {
       capitalizeFirstLetter(word) {

package/src/components/buttons/closeButton/CloseButton.stories.js

@@ -1,7 +1,7 @@
 import CloseButton from './index.vue'
 
 export default {
-  title: 'CloseButton',
+  title: 'Components/Buttons/CloseButton',
   component: CloseButton,
   tags: ['autodocs'],
 }

package/src/components/buttons/collection/index.vue

@@ -191,9 +191,7 @@
   const ThemeSectionAttrs = { isDark: Boolean }
   const ThemeSection = styled('div', ThemeSectionAttrs)`
     background-color: ${(props) =>
-      props.isDark
-        ? props.theme.semanticColors.teal[800]
-        : props.theme.colors.white};
+      props.isDark ? 'black' : props.theme.colors.white};
     border-radius: 16px;
     padding: 24px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);