@eturnity/eturnity_reusable_components 9.22.2 → 9.25.0

package/src/components/modals/modalContent/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <ContentElement
+    :background-color="backgroundColor"
+    :height="height"
+    :max-height="resolvedMaxHeight"
+    :max-width="resolvedMaxWidth"
+    :min-height="resolvedMinHeight"
+    :min-width="resolvedMinWidth"
+    :width="width"
+  >
+    <slot></slot>
+  </ContentElement>
+</template>
+
+<script>
+  // To use:
+  // import ModalContent from "@eturnity/eturnity_reusable_components/src/components/modals/modalContent"
+  // <modal-content size="medium">{{ $gettext('Create a new main component template') }}</modal-content>
+
+  import styled from 'vue3-styled-components'
+
+  const SIZE_PRESETS = {
+    small: {
+      minWidth: '320px',
+      maxWidth: '450px',
+      minHeight: undefined,
+      maxHeight: '80vh',
+    },
+    medium: {
+      minWidth: '450px',
+      maxWidth: '650px',
+      minHeight: undefined,
+      maxHeight: '95vh',
+    },
+    large: {
+      minWidth: '500px',
+      maxWidth: '95vw',
+      minHeight: undefined,
+      maxHeight: '95vh',
+    },
+  }
+
+  const contentElementAttrs = {
+    backgroundColor: String,
+    maxWidth: String,
+    minWidth: String,
+    maxHeight: String,
+    minHeight: String,
+    width: String,
+    height: String,
+  }
+  const ContentElement = styled('div', contentElementAttrs)`
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    ${(props) =>
+      props.backgroundColor && `background-color: ${props.backgroundColor};`}
+    ${(props) => props.maxWidth && `max-width: ${props.maxWidth};`}
+    ${(props) => props.minWidth && `min-width: ${props.minWidth};`}
+    ${(props) => props.maxHeight && `max-height: ${props.maxHeight};`}
+    ${(props) => props.minHeight && `min-height: ${props.minHeight};`}
+    ${(props) => props.width && `width: ${props.width};`}
+    ${(props) => props.height && `height: ${props.height};`}
+  `
+
+  export default {
+    name: 'ModalContent',
+    components: {
+      ContentElement,
+    },
+    props: {
+      backgroundColor: {
+        type: String,
+        required: false,
+      },
+      size: {
+        type: String,
+        default: 'medium',
+        validator: (value) => ['small', 'medium', 'large'].includes(value),
+      },
+      maxWidth: {
+        type: String,
+        required: false,
+      },
+      minWidth: {
+        type: String,
+        required: false,
+      },
+      maxHeight: {
+        type: String,
+        required: false,
+      },
+      minHeight: {
+        type: String,
+        required: false,
+      },
+      width: {
+        type: String,
+        required: false,
+      },
+      height: {
+        type: String,
+        required: false,
+      },
+    },
+    computed: {
+      sizePreset() {
+        return SIZE_PRESETS[this.size]
+      },
+      resolvedMinWidth() {
+        return this.minWidth ?? this.sizePreset.minWidth
+      },
+      resolvedMaxWidth() {
+        return this.maxWidth ?? this.sizePreset.maxWidth
+      },
+      resolvedMinHeight() {
+        return this.minHeight ?? this.sizePreset.minHeight
+      },
+      resolvedMaxHeight() {
+        return this.maxHeight ?? this.sizePreset.maxHeight
+      },
+    },
+  }
+</script>

package/src/components/modals/modalTitle/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <TitleElement>
+    <slot></slot>
+  </TitleElement>
+</template>
+
+<script>
+  // To use:
+  // import ModalTitle from "@eturnity/eturnity_reusable_components/src/components/modals/modalTitle"
+  // <modal-title>{{ $gettext('Create a new main component template') }}</modal-title>
+
+  import styled from 'vue3-styled-components'
+
+  const TitleElement = styled.div`
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+    font-family: inherit;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: -0.14px;
+    margin-right: 30px;
+    &::first-letter {
+      text-transform: uppercase;
+    }
+  `
+
+  export default {
+    name: 'ModalTitle',
+    components: {
+      TitleElement,
+    },
+  }
+</script>

package/src/components/navigationTabs/navigationTabs.stories.js

@@ -0,0 +1,58 @@
+import { action } from '@storybook/addon-actions'
+import NavigationTabs from './index.vue'
+import theme from '@/assets/theme'
+
+const tabsData = [
+  { id: 1, slug: 'overview', label: 'Overview' },
+  {
+    id: 2,
+    slug: 'billing',
+    label: 'Billing',
+    labelInfoText: 'Invoices and payment methods',
+    labelInfoAlign: 'left',
+  },
+  { id: 3, slug: 'users', label: 'Users', isDisabled: true },
+]
+
+export default {
+  title: 'Components/Navigation/NavigationTabs',
+  component: NavigationTabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+const Template = (args) => ({
+  components: { NavigationTabs },
+  setup() {
+    const logTab = (key) => action('tab-click')(key)
+    return { args, logTab }
+  },
+  template: `
+    <div data-test-id="navigation-tabs-story" style="padding: 16px;">
+      <NavigationTabs v-bind="args" @tab-click="logTab" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const BySlug = Template.bind({})
+BySlug.args = {
+  tabsData,
+  activeTab: 'billing',
+  isIndexKey: false,
+  tabKey: 'slug',
+  tabLabel: 'label',
+}
+
+export const ByIndex = Template.bind({})
+ByIndex.args = {
+  tabsData,
+  activeTab: 0,
+  isIndexKey: true,
+  tabKey: 'slug',
+  tabLabel: 'label',
+}

package/src/components/pageSubtitle/PageSubtitle.stories.js

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

package/src/components/pageTitle/PageTitle.stories.js

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

package/src/components/pagination/pagination.stories.js

@@ -0,0 +1,79 @@
+import { action } from '@storybook/addon-actions'
+import Pagination from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Pagination/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+const Template = (args) => ({
+  components: { Pagination },
+  setup() {
+    const fetchPage = (page) => {
+      action('fetch-page')(page)
+      args.fetchPage(page)
+    }
+    return { args, fetchPage }
+  },
+  template: `
+    <div data-test-id="pagination-story" style="min-width: 320px;">
+      <Pagination
+        :fetch-page="fetchPage"
+        :current-page="args.currentPage"
+        :pagination-params="args.paginationParams"
+      />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const MidRange = Template.bind({})
+MidRange.args = {
+  currentPage: 4,
+  paginationParams: {
+    pages: 10,
+    previous: 3,
+    next: 5,
+  },
+  fetchPage: (n) => {},
+}
+
+export const FirstPage = Template.bind({})
+FirstPage.args = {
+  currentPage: 1,
+  paginationParams: {
+    pages: 6,
+    previous: null,
+    next: 2,
+  },
+  fetchPage: (n) => {},
+}
+
+export const LastPage = Template.bind({})
+LastPage.args = {
+  currentPage: 8,
+  paginationParams: {
+    pages: 8,
+    previous: 7,
+    next: null,
+  },
+  fetchPage: (n) => {},
+}
+
+export const TwoPagesOnly = Template.bind({})
+TwoPagesOnly.args = {
+  currentPage: 1,
+  paginationParams: {
+    pages: 2,
+    previous: null,
+    next: 2,
+  },
+  fetchPage: (n) => {},
+}

package/src/components/paginationV2/paginationV2.spec.js

@@ -0,0 +1,132 @@
+/* eslint-disable */
+import { mount, DOMWrapper } from '@vue/test-utils'
+import PaginationV2 from './index.vue'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+beforeAll(() => {
+  global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }))
+})
+
+/** Direct children of `<nav>` match template order: optional prev links, select block, optional next links. */
+async function clickNavChild(wrapper, index) {
+  const nav = wrapper.get('nav')
+  const el = nav.element.children[index]
+  await new DOMWrapper(el).trigger('click')
+}
+
+describe('PaginationV2', () => {
+  const mountPagination = (props = {}) => {
+    const fetchPage = jest.fn()
+    const wrapper = mount(PaginationV2, {
+      props: {
+        fetchPage,
+        currentPage: 1,
+        paginationParams: { pages: 3, previous: null, next: 2 },
+        ...props,
+      },
+      global: {
+        provide: { theme },
+      },
+    })
+    return { wrapper, fetchPage }
+  }
+
+  it('does not render the nav when there is only one page', () => {
+    const { wrapper } = mountPagination({
+      paginationParams: { pages: 1, previous: null, next: null },
+    })
+    expect(wrapper.find('nav').exists()).toBe(false)
+  })
+
+  it('does not render the nav when pages is zero', () => {
+    const { wrapper } = mountPagination({
+      paginationParams: { pages: 0, previous: null, next: null },
+    })
+    expect(wrapper.find('nav').exists()).toBe(false)
+  })
+
+  it('renders the nav and page label when there is more than one page', async () => {
+    const { wrapper } = mountPagination({
+      currentPage: 2,
+      paginationParams: { pages: 5, previous: 1, next: 3 },
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('nav').exists()).toBe(true)
+    expect(wrapper.text()).toContain('2 of 5')
+  })
+
+  it('calls fetchPage(1) and fetchPage(previous) for the first two controls when previous is set', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 2,
+      paginationParams: { pages: 5, previous: 1, next: 3 },
+    })
+    await wrapper.vm.$nextTick()
+
+    await clickNavChild(wrapper, 0)
+    expect(fetchPage).toHaveBeenCalledWith(1)
+
+    await clickNavChild(wrapper, 1)
+    expect(fetchPage).toHaveBeenCalledWith(1)
+    expect(fetchPage).toHaveBeenCalledTimes(2)
+  })
+
+  it('calls fetchPage(next) and fetchPage(pages) for the last two controls when next is set', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 2,
+      paginationParams: { pages: 5, previous: 1, next: 3 },
+    })
+    await wrapper.vm.$nextTick()
+
+    await clickNavChild(wrapper, 3)
+    expect(fetchPage).toHaveBeenCalledWith(3)
+
+    await clickNavChild(wrapper, 4)
+    expect(fetchPage).toHaveBeenCalledWith(5)
+  })
+
+  it('omits previous controls on the first page so the select is the first nav child', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 1,
+      paginationParams: { pages: 4, previous: null, next: 2 },
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.get('nav').element.children).toHaveLength(3)
+    await clickNavChild(wrapper, 1)
+    expect(fetchPage).toHaveBeenCalledWith(2)
+    await clickNavChild(wrapper, 2)
+    expect(fetchPage).toHaveBeenCalledWith(4)
+  })
+
+  it('omits next controls on the last page', async () => {
+    const { wrapper } = mountPagination({
+      currentPage: 4,
+      paginationParams: { pages: 4, previous: 3, next: null },
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.get('nav').element.children).toHaveLength(3)
+    expect(wrapper.text()).toContain('4 of 4')
+  })
+
+  it('forwards fetchPage when the page select emits input-change', async () => {
+    const { wrapper, fetchPage } = mountPagination({
+      currentPage: 1,
+      paginationParams: { pages: 6, previous: null, next: 2 },
+    })
+    await wrapper.vm.$nextTick()
+
+    const select = wrapper.findComponent({ name: 'RCselect' })
+    expect(select.exists()).toBe(true)
+    await select.vm.$emit('input-change', 5)
+    expect(fetchPage).toHaveBeenCalledWith(5)
+  })
+})

package/src/components/paginationV2/paginationV2.stories.js

@@ -0,0 +1,68 @@
+import { action } from '@storybook/addon-actions'
+import PaginationV2 from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Pagination/PaginationV2',
+  component: PaginationV2,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+const Template = (args) => ({
+  components: { PaginationV2 },
+  setup() {
+    const fetchPage = (page) => {
+      action('fetch-page')(page)
+      args.fetchPage(page)
+    }
+    return { args, fetchPage }
+  },
+  template: `
+    <div data-test-id="pagination-v2-story" style="min-width: 280px;">
+      <PaginationV2
+        :fetch-page="fetchPage"
+        :current-page="args.currentPage"
+        :pagination-params="args.paginationParams"
+      />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const PageThreeOfTen = Template.bind({})
+PageThreeOfTen.args = {
+  currentPage: 3,
+  paginationParams: {
+    pages: 10,
+    previous: 2,
+    next: 4,
+  },
+  fetchPage: () => {},
+}
+
+export const FirstPage = Template.bind({})
+FirstPage.args = {
+  currentPage: 1,
+  paginationParams: {
+    pages: 5,
+    previous: null,
+    next: 2,
+  },
+  fetchPage: () => {},
+}
+
+export const LastPage = Template.bind({})
+LastPage.args = {
+  currentPage: 12,
+  paginationParams: {
+    pages: 12,
+    previous: 11,
+    next: null,
+  },
+  fetchPage: () => {},
+}

package/src/components/panelRangeInfo/panelRangeInfo.stories.js

@@ -0,0 +1,60 @@
+import PanelRangeInfo from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/PanelRangeInfo/PanelRangeInfo',
+  component: PanelRangeInfo,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    minValue: { control: 'number' },
+    maxValue: { control: 'number' },
+    value: { control: 'number' },
+    arrowColor: { control: 'text' },
+    width: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { PanelRangeInfo },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="panel-range-story" style="padding: 24px;">
+      <PanelRangeInfo v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const LowInRange = Template.bind({})
+LowInRange.args = {
+  minValue: 0,
+  maxValue: 100,
+  value: 18,
+  arrowColor: 'white',
+  width: '280px',
+}
+
+export const MidRange = Template.bind({})
+MidRange.args = {
+  minValue: 10,
+  maxValue: 90,
+  value: 50,
+  arrowColor: 'white',
+  width: '280px',
+}
+
+export const NarrowBand = Template.bind({})
+NarrowBand.args = {
+  minValue: 40,
+  maxValue: 60,
+  value: 55,
+  arrowColor: 'white',
+  width: '200px',
+}

package/src/components/progressBar/ProgressBar.stories.js

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

package/src/components/progressStep/progressStep.stories.js

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

package/src/components/projectMarker/ProjectMarker.stories.js

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

package/src/components/rangeSlider/RangeSlider.stories.js

@@ -1,7 +1,7 @@
 import RangeSlider from './index.vue'
 
 export default {
-  title: 'Components/RangeSlider',
+  title: 'Components/RangeSlider/RangeSlider',
   component: RangeSlider,
   argTypes: {
     dataLocation: { control: 'text' },

package/src/components/roundTabs/roundTabs.stories.js

@@ -0,0 +1,54 @@
+import RoundTabs from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/RoundTabs/RoundTabs',
+  component: RoundTabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    height: { control: 'text' },
+    width: { control: 'text' },
+    backgroundColor: { control: 'text', description: 'Theme colour token name' },
+    borderRadius: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { RoundTabs },
+  setup() {
+    return { args }
+  },
+  template: `
+    <RoundTabs v-bind="args">
+      <div
+        data-test-id="round-tabs-slot"
+        style="display: flex; gap: 12px; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 600;"
+      >
+        <span style="opacity: 0.9;">Summary</span>
+        <span style="opacity: 0.5;">Details</span>
+      </div>
+    </RoundTabs>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  height: '40px',
+  width: '240px',
+  backgroundColor: 'white',
+  borderRadius: '20px',
+}
+
+export const WidePill = Template.bind({})
+WidePill.args = {
+  height: '44px',
+  width: '360px',
+  backgroundColor: 'grey6',
+  borderRadius: '22px',
+}

package/src/components/selectedOptions/selectedOptions.stories.js

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