@adyen/bento-mcp 0.12.0 → 0.12.2

package/dist/assets/components/summary-grid/summary-grid.docs.mdx

@@ -55,37 +55,84 @@ following code:
 
 ## Column Width
 
-You are able to sets the responsive columns widths for any of the 3 rows in the BentoSummaryGrid.
+Use `columnWidth` to control the width of each item at small, medium, and large container sizes.
 
-Each row can be set by setting the `row{ROW_NUMBER_TO_SET_COLUMN_WIDTHS_ON}` in the `columnWidth` prop.
+### Quick rules
 
-e.g.
+- Configure a row with `row1`, `row2`, or `row3`.
+- Use a number from `1` to `12` for a fixed width.
+- Use `auto` to share the available space.
+- If you omit `columnWidth`, all items in the row have equal widths.
+
+### Fixed widths
+
+The grid has 12 columns. A value of `6` takes half of the row. A value of `12` takes the full row.
 
 ```typescript
 columnWidth: {
     row2: [
         { small: 12, medium: 6, large: 8 },
         { small: 6, medium: 3, large: 2 },
-        { small: 6, medium: 3, large: 2 }
+        { small: 6, medium: 3, large: 2 },
     ],
 },
 ```
 
-The code above will set the responsive column widths for all 3 columns on the second row.
+This configures the three items in the second row. When every value is numeric, SummaryGrid uses CSS Grid.
+
+Try to make the widths in each row add up to `12`. A smaller total leaves empty space. A larger total wraps onto another
+line.
+
+### Auto widths
+
+If any item uses `auto` at any breakpoint, that row uses flex layout at every breakpoint:
 
-Each of your items can have one of the following widths: 2 (minimal), 3, 4, or 6.
+- Numeric values keep their fixed proportions.
+- Auto items divide the remaining width equally.
+- If every item is `auto`, all items have equal widths.
+
+For example:
+
+```typescript
+columnWidth: {
+    row1: [
+        { small: 12, medium: 6, large: 'auto' },
+        { small: 6, medium: 6, large: 'auto' },
+        { small: 6, medium: 6, large: 2 },
+        { small: 12, medium: 6, large: 2 },
+    ],
+},
+```
+
+At the large breakpoint, the two fixed items use `2/12` each. The two auto items divide the remaining `8/12`, so the
+result is `4 + 4 + 2 + 2`.
+
+If only `large` is `auto`, the row still uses flex layout at small and medium sizes. The numeric `small` and `medium`
+values continue to control the item widths at those sizes.
+
+You can also make an item automatic at every breakpoint:
+
+```typescript
+columnWidth: {
+    row1: ['auto'],
+},
+```
 
-You can construct any layout you wish from available width keeping in mind that in total you should fill 12 columns (not
-less, not more).
+These three items each use one third of the available width.
 
-We provide 2 breakpoints Small size (0-549px) Medium size (550px-1089px) Large size (1090px+)
+### Breakpoints
 
-Users have to pass config setting for each breakpoint to define what happens with the grid.
+| Size   | Container width |
+| ------ | --------------- |
+| Small  | Below `550px`   |
+| Medium | `550px–919px`   |
+| Large  | `920px` or more |
 
-Please note that these are container queries, not media queries, so the breakpoints are defined by the size of the
-container the grid sits in. Therefore, if you place it in a sidebar, a small size will apply.
+These are container queries, not viewport media queries. SummaryGrid responds to the width of its container. For
+example, a grid inside a narrow sidebar may use the small layout on a wide screen.
 
-If you do not supply any columns widths for a row, the columns will automatically fill up the row being of equal width.
+> **Gap note:** In flex layout, fixed percentage widths do not subtract the row gap. Items whose fixed widths add up to
+> 100% may wrap because the gap needs additional space.
 
 ## Modifiers
 

package/dist/assets/components/summary-grid/summary-grid.stories.ts

@@ -1 +1 @@
-import { BentoStatus } from '@/components/status'; import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import { BentoDate, BentoDateFormat } from '@/components/date'; import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoSummaryGridItemAmount, BentoSummaryGridItemCustom, BentoSummaryGridItemNumeric, BentoSummaryGridItemPercentage, BentoSummaryGridItemText, } from './index'; import BentoSummaryGrid from './summary-grid.vue'; const SummaryGridDefaultExample = "<template>\n <bento-summary-grid :column-width=\"columnWidth\">\n <template #cell-1-1>\n <bento-summary-grid-item-custom\n title=\"Status Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <bento-status variant=\"red\">Status</bento-status>\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-1-2>\n <bento-summary-grid-item-custom\n title=\"Payment Method Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <template #dashed-underline>Extra popover information</template>\n <bento-payment-method type=\"ideal\" label=\"923601322401537F\" />\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-1-3>\n <bento-summary-grid-item-custom\n title=\"Country/Region Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <bento-country code=\"NL\" />\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-1-4>\n <bento-summary-grid-item-custom\n title=\"Date/Time Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <bento-date :date=\"date\" :format=\"BentoDateFormat.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD\" />\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-2-1>\n <bento-summary-grid-item-percentage\n title=\"Percentage Item\"\n label=\"123\"\n info-icon-tooltip-text=\"text for icon\"\n trend=\"12\"\n copy=\"copy this to clipboard\"\n />\n </template>\n\n <template #cell-2-2>\n <bento-summary-grid-item-amount\n title=\"Text Item\"\n label=\"14\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n underline-tooltip-text=\"text for underline tooltip\"\n />\n </template>\n\n <template #cell-2-3>\n <bento-summary-grid-item-numeric\n title=\"Numeric Item\"\n label=\"123\"\n info-icon-tooltip-text=\"text for icon\"\n trend=\"12%\"\n trend-direction=\"positive\"\n copy=\"copy this to clipboard\"\n size=\"large\"\n />\n </template>\n\n <template #cell-2-4>\n <bento-summary-grid-item-text\n title=\"Text Item\"\n label=\"text label\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n />\n </template>\n </bento-summary-grid>\n</template>\n\n<script setup lang=\"ts\">\n import {\n BentoCountry,\n BentoDate,\n BentoDateFormat,\n BentoPaymentMethod,\n BentoStatus,\n BentoSummaryGrid,\n type BentoSummaryGridColumnWidth,\n BentoSummaryGridItemAmount,\n BentoSummaryGridItemCustom,\n BentoSummaryGridItemNumeric,\n BentoSummaryGridItemPercentage,\n BentoSummaryGridItemText,\n } from '@adyen/bento-vue2';\n\n const date = new Date('2024-03-15T10:00:00Z');\n const columnWidth = {\n row2: [\n { small: 12, medium: 6, large: 6 },\n { small: 6, medium: 6, large: 2 },\n { small: 6, medium: 6, large: 2 },\n { small: 12, medium: 6, large: 2 },\n ],\n } as BentoSummaryGridColumnWidth;\n</script>\n"; import './summary-grid.stories.scss?module'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Summary Grid', component: BentoSummaryGrid, }; export default meta; type Story = StoryObj<typeof BentoSummaryGrid>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStatus, BentoDate, BentoPaymentMethod, BentoCountry, BentoSummaryGrid, BentoSummaryGridItemCustom, BentoSummaryGridItemAmount, BentoSummaryGridItemNumeric, BentoSummaryGridItemPercentage, BentoSummaryGridItemText, }, template: ` <div class="b-summary-grid-story"> <bento-summary-grid v-bind="args" > <template #cell-1-1> <bento-summary-grid-item-custom title="Status Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-status variant="red"> Status </bento-status> </bento-summary-grid-item-custom> </template> <template #cell-1-2> <bento-summary-grid-item-custom title="Payment Method Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <template #dashed-underline> Extra popover information </template> <bento-payment-method type="ideal" label='923601322401537F'/> </bento-summary-grid-item-custom> </template> <template #cell-1-3> <bento-summary-grid-item-custom title="Country/Region Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-country :code="BentoCountryCode.NL" /> </bento-summary-grid-item-custom> </template> <template #cell-1-4> <bento-summary-grid-item-custom title="Date/Time Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-date :date="dateNow" :format="BentoDateFormat.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD"/> </bento-summary-grid-item-custom> </template> <template #cell-2-1> <bento-summary-grid-item-percentage title="Percentage Item" label="123" info-icon-tooltip-text="text for icon" trend="12" copy="copy this to clipboard" /> </template> <template #cell-2-2> <bento-summary-grid-item-amount title="Text Item" label="14" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" underline-tooltip-text="text for underline tooltip" /> </template> <template #cell-2-3> <bento-summary-grid-item-numeric title="Numeric Item" label="123" info-icon-tooltip-text="text for icon" trend="12%" trend-direction="positive" copy="copy this to clipboard" size="large" /> </template> <template #cell-2-4> <bento-summary-grid-item-text title="Text Item" label="text label" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" /> </template> </bento-summary-grid> </div> `, props: Object.keys(argTypes), setup(props) { const DATE_OBJECT = new Date(); return { // Values args: isVue2 ? props : _args, dateNow: DATE_OBJECT, BentoCountryCode, BentoDateFormat, }; }, }), args: { columnWidth: { row2: [ { small: 12, medium: 6, large: 6 }, { small: 6, medium: 6, large: 2 }, { small: 6, medium: 6, large: 2 }, { small: 12, medium: 6, large: 2 }, ], }, }, parameters: storybookDocsParameter(SummaryGridDefaultExample), }; 
+import { BentoStatus } from '@/components/status'; import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoCountry } from '@/components/country'; import { BentoDate, BentoDateFormat } from '@/components/date'; import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoSummaryGridItemAmount, BentoSummaryGridItemCustom, BentoSummaryGridItemNumeric, BentoSummaryGridItemPercentage, BentoSummaryGridItemText, } from './index'; import BentoSummaryGrid from './summary-grid.vue'; const SummaryGridDefaultExample = "<template>\n <bento-summary-grid :column-width=\"columnWidth\">\n <template #cell-1-1>\n <bento-summary-grid-item-custom\n title=\"Status Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <bento-status variant=\"red\">Status</bento-status>\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-1-2>\n <bento-summary-grid-item-custom\n title=\"Payment Method Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <template #dashed-underline>Extra popover information</template>\n <bento-payment-method type=\"ideal\" label=\"923601322401537F\" />\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-1-3>\n <bento-summary-grid-item-custom\n title=\"Country/Region Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <bento-country code=\"NL\" />\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-1-4>\n <bento-summary-grid-item-custom\n title=\"Date/Time Item\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n >\n <bento-date :date=\"date\" :format=\"BentoDateFormat.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD\" />\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-2-1>\n <bento-summary-grid-item-percentage\n title=\"Percentage Item\"\n label=\"123\"\n info-icon-tooltip-text=\"text for icon\"\n trend=\"12\"\n copy=\"copy this to clipboard\"\n />\n </template>\n\n <template #cell-2-2>\n <bento-summary-grid-item-amount\n title=\"Amount Item\"\n label=\"14\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n underline-tooltip-text=\"text for underline tooltip\"\n />\n </template>\n\n <template #cell-2-3>\n <bento-summary-grid-item-numeric\n title=\"Numeric Item\"\n label=\"123\"\n info-icon-tooltip-text=\"text for icon\"\n trend=\"12%\"\n trend-direction=\"positive\"\n copy=\"copy this to clipboard\"\n size=\"large\"\n />\n </template>\n\n <template #cell-2-4>\n <bento-summary-grid-item-text\n title=\"Text Item\"\n label=\"text label\"\n info-icon-tooltip-text=\"text for icon\"\n copy=\"copy this to clipboard\"\n />\n </template>\n\n <template #cell-2-5>\n <bento-summary-grid-item-custom title=\"Custom Item\">\n <bento-status variant=\"green\">Available</bento-status>\n </bento-summary-grid-item-custom>\n </template>\n\n <template #cell-3-1>\n <bento-summary-grid-item-percentage title=\"Auto Percentage Item\" label=\"25\" />\n </template>\n\n <template #cell-3-2>\n <bento-summary-grid-item-amount title=\"Auto Amount Item\" label=\"100\" />\n </template>\n\n <template #cell-3-3>\n <bento-summary-grid-item-text title=\"Fixed Text Item\" label=\"Fixed at large\" />\n </template>\n </bento-summary-grid>\n</template>\n\n<script setup lang=\"ts\">\n import {\n BentoCountry,\n BentoDate,\n BentoDateFormat,\n BentoPaymentMethod,\n BentoStatus,\n BentoSummaryGrid,\n type BentoSummaryGridColumnWidth,\n BentoSummaryGridItemAmount,\n BentoSummaryGridItemCustom,\n BentoSummaryGridItemNumeric,\n BentoSummaryGridItemPercentage,\n BentoSummaryGridItemText,\n } from '@adyen/bento-vue2';\n\n const date = new Date('2024-03-15T10:00:00Z');\n const columnWidth: BentoSummaryGridColumnWidth = {\n row1: [\n { small: 12, medium: 6, large: 3 },\n { small: 12, medium: 6, large: 3 },\n { small: 12, medium: 6, large: 3 },\n { small: 12, medium: 6, large: 3 },\n ],\n row2: [\n { small: 12, medium: 5, large: 'auto' },\n { small: 12, medium: 5, large: 'auto' },\n { small: 12, medium: 5, large: 'auto' },\n { small: 12, medium: 5, large: 'auto' },\n { small: 12, medium: 5, large: 'auto' },\n ],\n row3: [\n { small: 12, medium: 5, large: 'auto' },\n { small: 12, medium: 5, large: 'auto' },\n { small: 12, medium: 12, large: 2 },\n ],\n };\n</script>\n"; import './summary-grid.stories.scss?module'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Summary Grid', component: BentoSummaryGrid, }; export default meta; type Story = StoryObj<typeof BentoSummaryGrid>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStatus, BentoDate, BentoPaymentMethod, BentoCountry, BentoSummaryGrid, BentoSummaryGridItemCustom, BentoSummaryGridItemAmount, BentoSummaryGridItemNumeric, BentoSummaryGridItemPercentage, BentoSummaryGridItemText, }, template: ` <div class="b-summary-grid-story"> <bento-summary-grid v-bind="args" > <template #cell-1-1> <bento-summary-grid-item-custom title="Status Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-status variant="red"> Status </bento-status> </bento-summary-grid-item-custom> </template> <template #cell-1-2> <bento-summary-grid-item-custom title="Payment Method Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <template #dashed-underline> Extra popover information </template> <bento-payment-method type="ideal" label='923601322401537F'/> </bento-summary-grid-item-custom> </template> <template #cell-1-3> <bento-summary-grid-item-custom title="Country/Region Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-country code="NL" /> </bento-summary-grid-item-custom> </template> <template #cell-1-4> <bento-summary-grid-item-custom title="Date/Time Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-date :date="date" :format="BentoDateFormat.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD"/> </bento-summary-grid-item-custom> </template> <template #cell-2-1> <bento-summary-grid-item-percentage title="Percentage Item" label="123" info-icon-tooltip-text="text for icon" trend="12" copy="copy this to clipboard" /> </template> <template #cell-2-2> <bento-summary-grid-item-amount title="Amount Item" label="14" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" underline-tooltip-text="text for underline tooltip" /> </template> <template #cell-2-3> <bento-summary-grid-item-numeric title="Numeric Item" label="123" info-icon-tooltip-text="text for icon" trend="12%" trend-direction="positive" copy="copy this to clipboard" size="large" /> </template> <template #cell-2-4> <bento-summary-grid-item-text title="Text Item" label="text label" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" /> </template> <template #cell-2-5> <bento-summary-grid-item-custom title="Custom Item"> <bento-status variant="green">Available</bento-status> </bento-summary-grid-item-custom> </template> <template #cell-3-1> <bento-summary-grid-item-percentage title="Auto Percentage Item" label="25" /> </template> <template #cell-3-2> <bento-summary-grid-item-amount title="Auto Amount Item" label="100" /> </template> <template #cell-3-3> <bento-summary-grid-item-text title="Fixed Text Item" label="Fixed at large" /> </template> </bento-summary-grid> </div> `, props: Object.keys(argTypes), setup(props) { const date = new Date('2024-03-15T10:00:00Z'); return { // Values args: isVue2 ? props : _args, date, BentoDateFormat, }; }, }), args: { columnWidth: { row1: [ { small: 12, medium: 6, large: 3 }, { small: 12, medium: 6, large: 3 }, { small: 12, medium: 6, large: 3 }, { small: 12, medium: 6, large: 3 }, ], row2: [ { small: 12, medium: 5, large: 'auto' }, { small: 12, medium: 5, large: 'auto' }, { small: 12, medium: 5, large: 'auto' }, { small: 12, medium: 5, large: 'auto' }, { small: 12, medium: 5, large: 'auto' }, ], row3: [ { small: 12, medium: 5, large: 'auto' }, { small: 12, medium: 5, large: 'auto' }, { small: 12, medium: 12, large: 2 }, ], }, }, parameters: storybookDocsParameter(SummaryGridDefaultExample), }; 

package/dist/assets/components/timeline/components/timeline-item/timeline-item.stories.ts

@@ -1 +1 @@
-import BentoTimelineItem from './timeline-item.vue'; import BentoTimeline from '../../timeline.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { BentoDateFormat } from '@/components/date'; const meta: Meta = { title: 'Timeline/Timeline Item', component: BentoTimelineItem, argTypes: { type: { control: { type: 'select', }, }, status: { control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { title: 'Milestone', timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', tag: { label: 'Tag' }, status: 'black', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline> <bento-timeline-item v-bind="args" /> </bento-timeline> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS, }, }; 
+import BentoTimelineItem from './timeline-item.vue'; import BentoTimeline from '../../timeline.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { BentoDateFormat } from '@/components/date'; import { BentoTypography } from '@/components/typography'; import { storybookDocsParameter } from '@/utils/ts/storybook'; const TimelineItemTitleSlotExampleSource = "<template>\n <bento-timeline>\n <bento-timeline-item :timestamp=\"timestamp\">\n <template #title>\n Captured (Auth adjustment)\n\n <bento-typography variant=\"body\" el=\"span\">-EUR 1.00</bento-typography>\n </template>\n\n The authorised amount was adjusted before capture.\n </bento-timeline-item>\n </bento-timeline>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTimeline, BentoTimelineItem, BentoTypography } from '@adyen/bento-vue2';\n\n const timestamp = {\n date: new Date('2023-06-30T13:56:09.498Z'),\n value: 'AuthorName',\n };\n</script>\n"; const meta: Meta = { title: 'Timeline/Timeline Item', component: BentoTimelineItem, argTypes: { 'slot:title': { name: 'title', description: 'Custom title content. Overrides the `title` prop and supports rich content, including links.', table: { category: 'slots', type: { summary: 'VNode[]' }, }, control: { disable: true }, }, 'slot:default': { name: 'default', description: 'Custom description content. Overrides the `description` prop and supports rich content, including links.', table: { category: 'slots', type: { summary: 'VNode[]' }, }, control: { disable: true }, }, type: { control: { type: 'select', }, }, status: { control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimelineItem>; const DEFAULT_PROPS = { title: 'Milestone', timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', tag: { label: 'Tag' }, status: 'black', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline> <bento-timeline-item v-bind="args" /> </bento-timeline> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS, }, }; export const WithTitleSlot: Story = { render: () => ({ components: { BentoTimeline, BentoTimelineItem, BentoTypography }, template: ` <bento-timeline> <bento-timeline-item :timestamp="timestamp"> <template #title> Captured (Auth adjustment) <bento-typography variant="body" el="span">-EUR 1.00</bento-typography> </template> The authorised amount was adjusted before capture. </bento-timeline-item> </bento-timeline> `, setup() { const timestamp = { date: new Date('2023-06-30T13:56:09.498Z'), value: 'AuthorName', }; return { timestamp }; }, }), parameters: storybookDocsParameter(TimelineItemTitleSlotExampleSource), }; 

package/dist/assets/components/timeline/components/timeline-item/timeline-item.vue

@@ -1 +1 @@
-<template> <li v-if="isVisible" class="b-timeline-item" :class="conditionalClasses"> <div v-if="timegap" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__icon b-timeline-item__icon--timegap"></div> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-typography class="b-timeline-item__timegap" :aria-label="timegapAriaLabel"> {{ timegap }} </bento-typography> </div> </div> <div class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <square-small-icon class="b-timeline-item__icon" :class="iconConditionalClasses" /> <div v-if="!isLastItem" class="b-timeline-item__separator" data-testid="last-timeline-item-separator" ></div> </div> <div class="b-timeline-item__content"> <bento-typography v-if="!isNoteType" el="div" variant="body" strongest class="b-timeline-item__title" role="heading" aria-level="2" > <bento-link v-if="isLinkTitle" v-bind="linkTitleProps" disable-typography>{{ linkTitleProps.title }}</bento-link> <span v-else>{{ title }}</span> </bento-typography> <bento-typography v-if="isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <bento-typography v-if="timestamp" class="b-timeline-item__timestamp" el="div" variant="caption"> <bento-date :date="timestamp.date" :format="timestamp.format" disable-typography /> <bento-dashed-underline v-if="timestamp.description" v-bind="timestamp.description"> {{ timestamp.value }} </bento-dashed-underline> <span v-else>{{ timestamp.value }}</span> </bento-typography> <bento-typography v-if="!isNoteType && additionalTimestamp" class="b-timeline-item__timestamp" el="div" variant="caption" > <bento-date :date="additionalTimestamp.date" :format="additionalTimestamp.format" disable-typography /> <bento-dashed-underline v-if="additionalTimestamp.description" v-bind="additionalTimestamp.description" > {{ additionalTimestamp.value }} </bento-dashed-underline> <span v-else> {{ additionalTimestamp.value }} </span> </bento-typography> <bento-typography v-if="!isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <div v-if="!isNoteType && dataList" class="b-timeline-item__data-list"> <bento-structured-list> <bento-structured-list-item v-for="listEntry in dataList" :key="generateUid(listEntry.label)" :label="listEntry.label" > <bento-typography variant="caption">{{ listEntry.value }}</bento-typography> </bento-structured-list-item> </bento-structured-list> </div> <bento-tag v-if="!isNoteType && tag" v-bind="tag" class="b-timeline-item__tag" /> </div> </div> <div v-if="displayShowMoreButton" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-button class="b-timeline__show-more" variant="tertiary" @click="showAll = !showAll"> <template v-if="!showAll">{{ t('showMore', { items: hiddenItems }) }}</template> <template v-else>{{ t('showLess') }}</template> </bento-button> </div> </div> </li> </template> <script setup lang="ts"> import { computed, defineComponent, inject, onUnmounted, provide, useSlots } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoDashedUnderline } from '@/components/dashed-underline'; import { BentoDate } from '@/components/date'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill'; // Utils import { generateUid } from '@/utils/ts/generate-uid'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'; // Types import { type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineItemProps, type BentoTimelineItemTitle, } from '../../timeline.types'; import { type BentoTimelineRegisterEntry } from '../../timeline.internal.types'; // Keys import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineItemProps>(), { additionalTimestamp: null, dataList: null, description: null, status: 'black', tag: undefined, title: null, type: 'milestone', }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const isNoteType = computed(() => props.type === 'note'); const iconConditionalClasses = computed(() => ({ [`b-timeline-item__icon--${props.status}`]: props.status && !isNoteType.value, })); const conditionalClasses = computed(() => ({ 'b-timeline-item--note': isNoteType.value, })); // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true); const entry: BentoTimelineEntry = { title: props.title, date: props.timestamp.date, }; // Register timeline entry to the timeline entries array const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY); const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry); // On unmounting timeline item, unregister it from the parent timeline component onUnmounted(() => unregisterTimelineEntry()); // Get timeline config data from the parent Timeline comp const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData = inject(TIMELINE_CONFIG_INJECTION_KEY); const index = computed(() => timelineEntries.value.indexOf(entry)); const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value); const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index.value))); const isLinkTitle = computed(() => typeof props.title === 'object'); const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle); const timegap = computed(() => { if (!timegapLimit.value) { return null; } const previousDate = timelineEntries.value[index.value - 1]?.date; const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1); if (!previousDate || !isPreviousItemVisible) { return null; } const { date } = timelineEntries.value[index.value]; const timegapInSelectedUnit = parseInt( formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }), 10 ); return timegapLimit.value.amount < timegapInSelectedUnit ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' }) : null; }); const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : '')); const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value); const isLastItem = computed(() => { // The index can be -1 before the parent has had a chance to sort the array. return index.value !== -1 && index.value === timelineEntries.value.length - 1; }); </script> <script lang="ts"> /** * BentoTimelineItem renders each event in the Timeline component * * @example * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimelineItem }, * template: ` * <bento-timeline-item * title="Milestone" * :timestamp="{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * :tag="{ label: 'Tag'}" * /> * ` * } */ export default defineComponent({ name: 'bento-timeline-item', i18n: { messages }, }); </script> <style lang="scss" scoped src="./timeline-item.scss" /> 
+<template> <li v-if="isVisible" class="b-timeline-item" :class="conditionalClasses"> <div v-if="timegap" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__icon b-timeline-item__icon--timegap"></div> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-typography class="b-timeline-item__timegap" :aria-label="timegapAriaLabel"> {{ timegap }} </bento-typography> </div> </div> <div class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <square-small-icon class="b-timeline-item__icon" :class="iconConditionalClasses" /> <div v-if="!isLastItem" class="b-timeline-item__separator" data-testid="last-timeline-item-separator" ></div> </div> <div class="b-timeline-item__content"> <bento-typography v-if="!isNoteType" el="div" variant="body" strongest class="b-timeline-item__title" role="heading" aria-level="2" > <slot name="title"> <bento-link v-if="isLinkTitle" v-bind="linkTitleProps" disable-typography>{{ linkTitleProps.title }}</bento-link> <span v-else>{{ title }}</span> </slot> </bento-typography> <bento-typography v-if="isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <bento-typography v-if="timestamp" class="b-timeline-item__timestamp" el="div" variant="caption"> <bento-date :date="timestamp.date" :format="timestamp.format" disable-typography /> <bento-dashed-underline v-if="timestamp.description" v-bind="timestamp.description"> {{ timestamp.value }} </bento-dashed-underline> <span v-else>{{ timestamp.value }}</span> </bento-typography> <bento-typography v-if="!isNoteType && additionalTimestamp" class="b-timeline-item__timestamp" el="div" variant="caption" > <bento-date :date="additionalTimestamp.date" :format="additionalTimestamp.format" disable-typography /> <bento-dashed-underline v-if="additionalTimestamp.description" v-bind="additionalTimestamp.description" > {{ additionalTimestamp.value }} </bento-dashed-underline> <span v-else> {{ additionalTimestamp.value }} </span> </bento-typography> <bento-typography v-if="!isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <div v-if="!isNoteType && dataList" class="b-timeline-item__data-list"> <bento-structured-list> <bento-structured-list-item v-for="listEntry in dataList" :key="generateUid(listEntry.label)" :label="listEntry.label" > <bento-typography variant="caption">{{ listEntry.value }}</bento-typography> </bento-structured-list-item> </bento-structured-list> </div> <bento-tag v-if="!isNoteType && tag" v-bind="tag" class="b-timeline-item__tag" /> </div> </div> <div v-if="displayShowMoreButton" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-button class="b-timeline__show-more" variant="tertiary" @click="showAll = !showAll"> <template v-if="!showAll">{{ t('showMore', { items: hiddenItems }) }}</template> <template v-else>{{ t('showLess') }}</template> </bento-button> </div> </div> </li> </template> <script setup lang="ts"> import { computed, defineComponent, inject, onUnmounted, provide, useSlots, watch } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoDashedUnderline } from '@/components/dashed-underline'; import { BentoDate } from '@/components/date'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill'; // Utils import { generateUid } from '@/utils/ts/generate-uid'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'; // Types import { type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineItemProps, type BentoTimelineItemTitle, } from '../../timeline.types'; import { type BentoTimelineRegisterEntry } from '../../timeline.internal.types'; // Keys import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys'; import messages from './messages.json'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineItemProps>(), { additionalTimestamp: null, dataList: null, description: null, status: 'black', tag: undefined, title: null, type: 'milestone', }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const isNoteType = computed(() => props.type === 'note'); const iconConditionalClasses = computed(() => ({ [`b-timeline-item__icon--${props.status}`]: props.status && !isNoteType.value, })); const conditionalClasses = computed(() => ({ 'b-timeline-item--note': isNoteType.value, })); // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true); const entry: BentoTimelineEntry = { title: props.title, date: props.timestamp.date, }; // Register timeline entry to the timeline entries array const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY); const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry); // On unmounting timeline item, unregister it from the parent timeline component onUnmounted(() => unregisterTimelineEntry()); // Get timeline config data from the parent Timeline comp const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData = inject(TIMELINE_CONFIG_INJECTION_KEY); const index = computed(() => timelineEntries.value.indexOf(entry)); const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value); const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index.value))); const isLinkTitle = computed(() => props.title !== null && typeof props.title === 'object'); const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle); const timegap = computed(() => { if (!timegapLimit.value) { return null; } const previousDate = timelineEntries.value[index.value - 1]?.date; const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1); if (!previousDate || !isPreviousItemVisible) { return null; } const { date } = timelineEntries.value[index.value]; const timegapInSelectedUnit = parseInt( formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }), 10 ); return timegapLimit.value.amount < timegapInSelectedUnit ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' }) : null; }); const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : '')); const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value); const isLastItem = computed(() => { // The index can be -1 before the parent has had a chance to sort the array. return index.value !== -1 && index.value === timelineEntries.value.length - 1; }); watch( isLinkTitle, isLinkTitle => { if (isLinkTitle) { deprecate( 'BentoTimelineItem object value for the "title" prop', 'Use a slot <template #title></template> to render a link instead', '3.0.0' ); } }, { immediate: true } ); </script> <script lang="ts"> /** * BentoTimelineItem renders each event in the Timeline component * * @example * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimelineItem }, * template: ` * <bento-timeline-item * title="Milestone" * :timestamp="{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * :tag="{ label: 'Tag'}" * /> * ` * } */ export default defineComponent({ name: 'bento-timeline-item', i18n: { messages }, }); </script> <style lang="scss" scoped src="./timeline-item.scss" /> 

package/dist/assets/components/timeline/timeline.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks';
 import * as TimelineStories from './timeline.stories';
+import * as TimelineItemStories from './components/timeline-item/timeline-item.stories';
 
 <Meta of={TimelineStories} />
 
@@ -23,11 +24,11 @@ separate components.
 
 ### Links
 
-It’s possible to add links to either title or description of a timeline item. To make the timeline item title render as
-a link, pass an object containing the `bento-link` props to the `title` prop. If you want to render a link in your
-description, don't pass the `description` prop but instead use a `default slot`.
+It’s possible to add links to either the title or description of a timeline item. Use the `#title` slot for a linked
+title and the default slot for a linked description. Render a `bento-link` inside the relevant slot.
 
-<Canvas of={TimelineStories.WithLinks} />
+If you are previously passing a link into the `title` prop, take note that this object form is deprecated and will be
+removed in v3.0.0. Use the `#title` slot instead.
 
 ### Notes
 
@@ -57,6 +58,21 @@ It's also possible to add timeline items dynamically. For a correct implementati
 
 <Canvas of={TimelineStories.DynamicItemAddition} />
 
+### Slots
+
+#### Title
+
+Use the `#title` slot to customize a timeline item's title with formatted or interactive content. The slot overrides the
+`title` prop while preserving the title's heading semantics and default typography. To render a linked title, place a
+`bento-link` inside this slot.
+
+<Canvas of={TimelineItemStories.WithTitleSlot} />
+
+#### Description
+
+Use the default slot to customize a timeline item's description with formatted or interactive content. The slot
+overrides the `description` prop. This slot is available for both milestones and notes.
+
 ## Modifiers
 
 ### Show more

package/dist/assets/components/timeline/timeline.types.ts

@@ -1 +1 @@
-import { type BentoDashedUnderlineProps } from '@/components/dashed-underline/dashed-underline.types'; import { type BentoDateFormat } from '@/components/date/date.types'; import { type BentoTag } from '@/components/tag'; import { type Ref } from 'vue'; import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; export enum BentoTimelineShowMorePlacement { BOTTOM = 'bottom', AFTER_FIRST = 'after-first', BEFORE_LAST = 'before-last', } export interface BentoTimelineShowMoreObject { limit: number; placement?: BentoTimelineShowMorePlacement; } export enum BentoTimelineGapUnit { SECOND = 'second', MINUTE = 'minute', HOUR = 'hour', DAY = 'day', MONTH = 'month', YEAR = 'year', } export interface BentoTimelineGapObject { amount: number; unit: BentoTimelineGapUnit; } /** * @deprecated Since v3.0.0. Do not use. Use the `status` prop instead. */ export enum BentoTimelineItemVariant { DEFAULT = 'SquareSmallIcon', SUCCESS = 'CheckedCircleIcon', CRITICAL = 'CrossCircleIcon', } export enum BentoTimelineStatus { BLACK = 'black', BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoTimelineItemTitle extends RouterLinkProps { /** * Link label. */ title: string; /** * Set the rendered link to a regular external anchor link. */ external?: boolean; /** * Sets the target of the rendered link. */ target?: string; // This has been added to allow users to add HTML and Aria attribute // eslint-disable-next-line @typescript-eslint/no-explicit-any [name: string]: any; } export interface BentoTimelineTimestamp { date: Date | number; format?: BentoDateFormat; value?: string; description?: BentoDashedUnderlineProps; } export interface BentoTimelineDataListObject { label: string; value: string; } export type BentoTimelineDataList = Array<BentoTimelineDataListObject>; export type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props']; export interface BentoTimelineEntry { title?: string | BentoTimelineItemTitle; description?: string; date: Date | number; } export interface BentoTimelineConfigData { showAll: Ref<boolean>; showMoreIndex: Ref<number>; hiddenItems: Ref<number>; visibleIndexes: Ref<Array<number>>; timegapLimit: Ref<BentoTimelineGapObject>; timelineEntries: Ref<Array<BentoTimelineEntry>>; } export interface BentoTimelineProps { /** * If set to true, gives the possibility to manually add notes to the timeline via a textarea */ addNote?: boolean; /** * Object that determines the max number of items to show without clicking the show more button * and where in the timeline is the show more button placed */ showMore?: BentoTimelineShowMoreObject; /** * Object that determines minimum amount of time for the automatic timegap indicator; * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }). * If null, automatic timegap detection will be turned off */ timegapLimit?: BentoTimelineGapObject; } export interface BentoTimelineItemProps { /** * Additional timestamp of the event */ additionalTimestamp?: BentoTimelineTimestamp; /** * Relevant key-value pair data to display in the event */ dataList?: BentoTimelineDataList; /** * Description of the event */ description?: string; /** * Modifier that changes the color of the timeline icon * @values blue, black, green, grey, orange, red, yellow */ status?: string; /** * Tag props that will be passed down to inner tag component */ tag?: BentoTimelineTagProps; /** * Main timestamp of the event. Used for timegap detection. */ timestamp: BentoTimelineTimestamp; /** * Title of the event */ title?: BentoTimelineItemTitle | string; /** * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'. * @values milestone, note */ type?: string; } 
+import { type BentoDashedUnderlineProps } from '@/components/dashed-underline/dashed-underline.types'; import { type BentoDateFormat } from '@/components/date/date.types'; import { type BentoTag } from '@/components/tag'; import { type Ref } from 'vue'; import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; export enum BentoTimelineShowMorePlacement { BOTTOM = 'bottom', AFTER_FIRST = 'after-first', BEFORE_LAST = 'before-last', } export interface BentoTimelineShowMoreObject { limit: number; placement?: BentoTimelineShowMorePlacement; } export enum BentoTimelineGapUnit { SECOND = 'second', MINUTE = 'minute', HOUR = 'hour', DAY = 'day', MONTH = 'month', YEAR = 'year', } export interface BentoTimelineGapObject { amount: number; unit: BentoTimelineGapUnit; } /** * @deprecated Since v3.0.0. Do not use. Use the `status` prop instead. */ export enum BentoTimelineItemVariant { DEFAULT = 'SquareSmallIcon', SUCCESS = 'CheckedCircleIcon', CRITICAL = 'CrossCircleIcon', } export enum BentoTimelineStatus { BLACK = 'black', BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } /** * @deprecated Since v3.0.0. Do not use. Use a slot `<template #title></template>` to render a link instead. */ export interface BentoTimelineItemTitle extends RouterLinkProps { /** * Link label. */ title: string; /** * Set the rendered link to a regular external anchor link. */ external?: boolean; /** * Sets the target of the rendered link. */ target?: string; // This has been added to allow users to add HTML and Aria attribute // eslint-disable-next-line @typescript-eslint/no-explicit-any [name: string]: any; } export interface BentoTimelineTimestamp { date: Date | number; format?: BentoDateFormat; value?: string; description?: BentoDashedUnderlineProps; } export interface BentoTimelineDataListObject { label: string; value: string; } export type BentoTimelineDataList = Array<BentoTimelineDataListObject>; export type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props']; export interface BentoTimelineEntry { title?: string | BentoTimelineItemTitle; description?: string; date: Date | number; } export interface BentoTimelineConfigData { showAll: Ref<boolean>; showMoreIndex: Ref<number>; hiddenItems: Ref<number>; visibleIndexes: Ref<Array<number>>; timegapLimit: Ref<BentoTimelineGapObject>; timelineEntries: Ref<Array<BentoTimelineEntry>>; } export interface BentoTimelineProps { /** * If set to true, gives the possibility to manually add notes to the timeline via a textarea */ addNote?: boolean; /** * Object that determines the max number of items to show without clicking the show more button * and where in the timeline is the show more button placed */ showMore?: BentoTimelineShowMoreObject; /** * Object that determines minimum amount of time for the automatic timegap indicator; * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }). * If null, automatic timegap detection will be turned off */ timegapLimit?: BentoTimelineGapObject; } export interface BentoTimelineItemProps { /** * Additional timestamp of the event */ additionalTimestamp?: BentoTimelineTimestamp; /** * Relevant key-value pair data to display in the event */ dataList?: BentoTimelineDataList; /** * Description of the event */ description?: string; /** * Modifier that changes the color of the timeline icon * @values blue, black, green, grey, orange, red, yellow */ status?: string; /** * Tag props that will be passed down to inner tag component */ tag?: BentoTimelineTagProps; /** * Main timestamp of the event. Used for timegap detection. */ timestamp: BentoTimelineTimestamp; /** * Title of the event */ title?: BentoTimelineItemTitle | string; /** * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'. * @values milestone, note */ type?: string; } 

package/dist/assets/components/typography/typography.types.ts

@@ -1 +1 @@
-/** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoTypographyVariant { CAPTION = 'caption', BODY = 'body', /** @deprecated Since v3.0.0. Use `TITLE` instead. */ SUBTITLE = 'subtitle', TITLE = 'title', } export enum BentoTypographyModifier { WIDE = 'wide', STRONGER = 'stronger', STRONGER_WIDE = 'stronger-wide', STRONGEST = 'strongest', STRONGEST_WIDE = 'strongest-wide', MEDIUM = 'm', LARGE = 'l', MOBILE = 'mobile', MONOSPACE = 'monospace', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoTypographyElement { H1 = 'h1', H2 = 'h2', H3 = 'h3', H4 = 'h4', H5 = 'h5', H6 = 'h6', DIV = 'div', PARAGRAPH = 'p', SPAN = 'span', } export interface BentoTypographyProps { /** * Sets the HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ el?: BentoTypographyElement | `${BentoTypographyElement}`; /** * Adds the large class modifier. * Applicable to the Title variant. */ large?: boolean; /** * Adds the medium class modifier. * Applicable to the Title variant. */ medium?: boolean; /** * Changes the font family to monospace. * Applicable to all variants. */ monospace?: boolean; /** * Adds the rich-text modifier, which allows for the use of HTML tags inside typography. */ richText?: boolean; /** * Adds the stronger class modifier. * Applicable to Caption, Body and Subtitle variants. */ stronger?: boolean; /** * Adds the strongest class modifier. * Applicable to Caption, Body and Subtitle variants. */ strongest?: boolean; /** * Sets the type of typography variant. * @values caption, body, title. */ variant?: BentoTypographyVariant | `${BentoTypographyVariant}`; /** * Adds the medium class modifier. * Applicable to the Body variant. */ wide?: boolean; } 
+/** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoTypographyVariant { CAPTION = 'caption', BODY = 'body', /** @deprecated Since v3.0.0. Use `TITLE` instead. */ SUBTITLE = 'subtitle', TITLE = 'title', } export enum BentoTypographyModifier { WIDE = 'wide', STRONGER = 'stronger', STRONGER_WIDE = 'stronger-wide', STRONGEST = 'strongest', STRONGEST_WIDE = 'strongest-wide', MEDIUM = 'm', LARGE = 'l', MOBILE = 'mobile', MONOSPACE = 'monospace', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoTypographyElement { H1 = 'h1', H2 = 'h2', H3 = 'h3', H4 = 'h4', H5 = 'h5', H6 = 'h6', DIV = 'div', PARAGRAPH = 'p', SPAN = 'span', } export interface BentoTypographyProps { /** * Sets the HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ el?: BentoTypographyElement | `${BentoTypographyElement}`; /** * Adds the large class modifier. * Applicable to the Title variant. */ large?: boolean; /** * Adds the medium class modifier. * Applicable to the Title variant. */ medium?: boolean; /** * Changes the font family to monospace. * Applicable to all variants. */ monospace?: boolean; /** * Adds the rich-text modifier, which allows for the use of HTML tags inside typography. */ richText?: boolean; /** * Adds the stronger class modifier. * Applicable to Caption, Body and Subtitle variants. */ stronger?: boolean; /** * Adds the strongest class modifier. * Applicable to Caption, Body and Subtitle variants. */ strongest?: boolean; /** * Sets the type of typography variant. * @values caption, body, title. */ variant?: BentoTypographyVariant | `${BentoTypographyVariant}`; /** * Adds the wide class modifier. * Applicable to the Caption and Body variants. */ wide?: boolean; } 

package/dist/assets/deprecations.md

@@ -145,6 +145,14 @@ This file contains a list of all deprecated components, properties, and features
 - ../vue2/src/components/inspector/inspector.vue-            active-page prop will be required in the next version`
 - ../vue2/src/components/inspector/inspector.vue-            3.0.0
 - ../vue2/src/components/inspector/inspector.vue-        );
+### Deprecation Found
+
+- deprecate(
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                    BentoTimelineItem object value for the title prop
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                    Use a slot <template #title></template> to render a link instead
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                    3.0.0
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-                );
+- ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue-            }
 
 ---
 

package/dist/assets/templates/dashboard-template/dashboard-template.vue

@@ -1 +1 @@
-<template> <main class="b-dashboard-template"> <bento-header v-bind="header" variant="page" class="b-dashboard-template__header"> <template v-if="hasSlot('infoIconTooltipContent')" #infoIconTooltipContent> <slot name="infoIconTooltipContent" /> </template> </bento-header> <div class="b-dashboard-template__top-section" :class="dashboardTopSectionConditionalClasses"> <div v-if="hasSlot('filters')" ref="filtersRef" class="b-dashboard-template__filters" :class="dashboardFiltersConditionalClasses" data-testid="filters" > <slot name="filters" /> </div> <bento-tabs v-if="tabsSlots.length > 1" ref="tabsRef" :active-tab-index="tabs.activeTabIndex" :sticky="stickyTabs" :sticky-options="computedTabsOptions" data-testid="tabs" > <bento-tab v-for="(_item, index) in tabsSlots" :key="`tab-${index}`" :title="getTabTitle(index)"> <div class="b-dashboard-template__container b-dashboard-template__container--tabs"> <slot :name="`tab-${index + 1}`" /> </div> </bento-tab> </bento-tabs> <div v-else class="b-dashboard-template__container"> <slot /> </div> </div> </main> </template> <script setup lang="ts"> import { computed, onUnmounted, ref, useSlots, watch } from 'vue'; import { BentoHeader } from '@/components/header'; import { BentoTab, BentoTabs } from '@/components/tabs'; import { useWindowScroll } from '@vueuse/core'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useHasSlot } from '@/composables'; import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types'; const props = withDefaults( defineProps<{ /** * The header that goes to the top of the template */ header: BentoDashboardTemplateHeader; /** * All the tab properties that can be set on the inner tab components. * - tabs.activeTabIndex: the currently active tab index. * - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on. */ tabs?: BentoDashboardTemplateTabs; /** * Renders the tabs with a sticky positioning */ stickyTabs?: boolean; /** * Renders the tabs with a sticky positioning */ stickyFilters?: boolean; }>(), { tabs: undefined, stickyTabs: false, stickyFilters: false, } ); const slots = useSlots(); const hasSlot = useHasSlot(slots); const tabsRef = ref<InstanceType<typeof BentoTabs>>(); const filtersRef = ref<HTMLDivElement>(null); const isFiltersPinned = ref(false); let filtersElementObserver: ResizeObserver | null = null; const tabsPosition = ref(0); const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters); const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs); const dashboardFiltersConditionalClasses = computed(() => ({ 'b-dashboard-template__filters--sticky': props.stickyFilters, 'b-dashboard-template__filters--show-border': hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value, })); const dashboardTopSectionConditionalClasses = computed(() => ({ 'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters, })); const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-'))); const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`; const computedTabsOptions = computed(() => (tabsPosition.value ? { top: tabsPosition.value } : undefined)); const { y } = useWindowScroll(); watch( () => filtersRef.value, () => { if (!filtersElementObserver && filtersRef.value) { filtersElementObserver = observeSizeOfElement(filtersRef.value, () => { if (filtersRef.value && hasStickyTabs.value) { const filtersHeight = filtersRef.value.offsetHeight; tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0; } }); } } ); watch( () => y.value, () => { if (hasStickyFilters.value) { isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0; } } ); onUnmounted(() => { filtersElementObserver?.disconnect(); }); </script> <script lang="ts"> /** * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports. * * @example * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2'; * * export default { * components: { BentoDashboardTemplate, BentoDashboardSection }, * template: ` * <bento-dashboard-template :header="{ title: 'Dashboard'}" :tabs="tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]" sticky-tabs sticky-filters> * <template #tab-1> * <bento-dashboard-section :header="{ title: 'Section'}"> * <template #controls> * // Add your controls here * </template> * // Add your content here * </bento-dashboard-section> * </template> * <template #tab-2> * <bento-dashboard-section :header="{ title: 'Section'}"> * // Add your content here * </bento-dashboard-section> * </template> * </bento-dashboard-template> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./dashboard-template.scss" /> 
+<template> <main class="b-dashboard-template"> <bento-header v-bind="header" variant="page" class="b-dashboard-template__header"> <template v-if="hasSlot('infoIconTooltipContent')" #infoIconTooltipContent> <slot name="infoIconTooltipContent" /> </template> </bento-header> <div class="b-dashboard-template__top-section" :class="dashboardTopSectionConditionalClasses"> <div v-if="hasSlot('filters')" ref="filtersRef" class="b-dashboard-template__filters" :class="dashboardFiltersConditionalClasses" data-testid="filters" > <slot name="filters" /> </div> <bento-tabs v-if="tabsSlots.length > 1" ref="tabsRef" :active-tab-index="tabs.activeTabIndex" :sticky="stickyTabs" :sticky-options="computedTabsOptions" data-testid="tabs" > <bento-tab v-for="(_item, index) in tabsSlots" :key="`tab-${index}`" :title="getTabTitle(index)"> <div class="b-dashboard-template__container b-dashboard-template__container--tabs"> <slot :name="`tab-${index + 1}`" /> </div> </bento-tab> </bento-tabs> <div v-else class="b-dashboard-template__container"> <slot /> </div> </div> </main> </template> <script setup lang="ts"> import { computed, onUnmounted, ref, useSlots, watch } from 'vue'; import { BentoHeader } from '@/components/header'; import { BentoTab, BentoTabs } from '@/components/tabs'; import { useWindowScroll } from '@vueuse/core'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useHasSlot } from '@/composables'; import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types'; const props = withDefaults( defineProps<{ /** * The header that goes to the top of the template */ header: BentoDashboardTemplateHeader; /** * All the tab properties that can be set on the inner tab components. * - tabs.activeTabIndex: the currently active tab index. * - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on. */ tabs?: BentoDashboardTemplateTabs; /** * Renders the tabs with a sticky positioning */ stickyTabs?: boolean; /** * Renders the filters with a sticky positioning */ stickyFilters?: boolean; }>(), { tabs: undefined, stickyTabs: false, stickyFilters: false, } ); const slots = useSlots(); const hasSlot = useHasSlot(slots); const tabsRef = ref<InstanceType<typeof BentoTabs>>(); const filtersRef = ref<HTMLDivElement>(null); const isFiltersPinned = ref(false); let filtersElementObserver: ResizeObserver | null = null; const tabsPosition = ref(0); const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters); const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs); const dashboardFiltersConditionalClasses = computed(() => ({ 'b-dashboard-template__filters--sticky': props.stickyFilters, 'b-dashboard-template__filters--show-border': hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value, })); const dashboardTopSectionConditionalClasses = computed(() => ({ 'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters, })); const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-'))); const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`; const computedTabsOptions = computed(() => (tabsPosition.value ? { top: tabsPosition.value } : undefined)); const { y } = useWindowScroll(); watch( () => filtersRef.value, () => { if (!filtersElementObserver && filtersRef.value) { filtersElementObserver = observeSizeOfElement(filtersRef.value, () => { if (filtersRef.value && hasStickyTabs.value) { const filtersHeight = filtersRef.value.offsetHeight; tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0; } }); } } ); watch( () => y.value, () => { if (hasStickyFilters.value) { isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0; } } ); onUnmounted(() => { filtersElementObserver?.disconnect(); }); </script> <script lang="ts"> /** * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports. * * @example * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2'; * * export default { * components: { BentoDashboardTemplate, BentoDashboardSection }, * template: ` * <bento-dashboard-template :header="{ title: 'Dashboard'}" :tabs="tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]" sticky-tabs sticky-filters> * <template #tab-1> * <bento-dashboard-section :header="{ title: 'Section'}"> * <template #controls> * // Add your controls here * </template> * // Add your content here * </bento-dashboard-section> * </template> * <template #tab-2> * <bento-dashboard-section :header="{ title: 'Section'}"> * // Add your content here * </bento-dashboard-section> * </template> * </bento-dashboard-template> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./dashboard-template.scss" />