@bethinkpl/design-system 20.0.1 → 20.1.0

package/.github/workflows/build-to-review-on-trigger.yml

@@ -0,0 +1,68 @@
+name: Build Storybook to Design Review on trigger
+
+on:
+  issue_comment:
+    types: [ created ]
+
+jobs:
+  deploy-for-review:
+    runs-on: ubuntu-latest
+
+    if: |
+      github.event.comment &&
+      github.event.issue.pull_request &&
+      startsWith(github.event.comment.body, '/review')
+
+    steps:
+      - name: Get PR branch name
+        id: comment-pr-ref
+        uses: actions/github-script@v6
+        with:
+          result-encoding: string
+          script: |
+            const pr = await github.rest.pulls.get({
+              owner: context.issue.owner,
+              repo: context.issue.repo,
+              pull_number: context.issue.number,
+            });
+            return pr.data.head.ref
+
+      - name: Set short branch name
+        run: |
+          echo "BRANCH_NAME=$(echo "${{ steps.comment-pr-ref.outputs.result }}" | grep -oE -- '[A-Z]+-[0-9]+')" >> $GITHUB_ENV
+
+      - name: Checkout PR code based on trigger comment
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ steps.comment-pr-ref.outputs.result }}
+
+      - name: Insert auth font awesome auth token
+        run: echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc && echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONT_AWESOME_AUTH_TOKEN }}" >> .npmrc
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '20.9.0'
+          cache: 'yarn'
+
+      - name: Install and Build 🔧
+        run: |
+          yarn install --pure-lockfile
+          yarn storybook:build
+
+      - name: Set up S3cmd cli tool
+        uses: s3-actions/s3cmd@v1.4.0
+        with:
+          provider: aws
+          region: 'eu-central-1'
+          access_key: ${{ secrets.S3_ACCESS_KEY }}
+          secret_key: ${{ secrets.S3_SECRET_KEY }}
+
+      - name: Push to S3 🚀
+        run: s3cmd put -r -P public/storybook/* s3://${{ vars.S3_REVIEW_BUCKET }}/${{ env.BRANCH_NAME }}/
+
+      - name: Add comment with URL
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          pr_number: ${{ github.event.issue.number }}
+          message: |
+            Your storybook is available on: https://${{ vars.S3_REVIEW_BUCKET }}.s3.amazonaws.com/${{ env.BRANCH_NAME }}/index.html

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1712053350724,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1712062915821,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/js/components/RichList/{RichListItemBasic/RichListItemBasic.stories.ts → BasicRichListItem/BasicRichListItem.stories.ts}

@@ -1,28 +1,29 @@
-import RichListItemBasic from './RichListItemBasic.vue';
+import BasicRichListItem from './BasicRichListItem.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
+	RICH_LIST_ITEM_BACKGROUND_COLOR,
 	RICH_LIST_ITEM_BORDER_COLOR,
-	RICH_LIST_ITEM_ICON_COLOR,
+	RICH_LIST_ITEM_ELEVATION,
 	RICH_LIST_ITEM_SIZE,
 	RICH_LIST_ITEM_STATE,
 	RICH_LIST_ITEM_TYPE,
 } from '../RichListItem';
-import { ICONS } from '../../Icons/Icon';
+import { ICON_COLORS, ICONS } from '../../Icons/Icon';
 
 export default {
-	title: 'Components/RichList/RichListItemBasic',
-	component: RichListItemBasic,
+	title: 'Components/RichList/BasicRichListItem',
+	component: BasicRichListItem,
 	decorators: [
 		(story) => ({
 			components: { story },
 			template: "<div style='display: flex;padding: 16px;'><story /></div>",
 		}),
 	],
-} as Meta<typeof RichListItemBasic>;
+} as Meta<typeof BasicRichListItem>;
 
-const StoryTemplate: StoryFn<typeof RichListItemBasic> = (args) => ({
-	components: { RichListItemBasic },
+const StoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs }) => ({
+	components: { BasicRichListItem },
 	setup() {
 		return { ...args };
 	},
@@ -31,8 +32,13 @@ const StoryTemplate: StoryFn<typeof RichListItemBasic> = (args) => ({
 			ICONS: Object.freeze(ICONS),
 		};
 	},
+	methods: {
+		updateIsSelected(isSelected) {
+			updateArgs({ isSelected });
+		},
+	},
 	template: `
-    <rich-list-item-basic
+    <basic-rich-list-item
       :size="size"
       :type="type"
       :is-interactive="isInteractive"
@@ -47,14 +53,21 @@ const StoryTemplate: StoryFn<typeof RichListItemBasic> = (args) => ({
       :text="text"
       :eyebrow="eyebrow"
       :is-eyebrow-uppercase="isEyebrowUppercase"
+      :background-color="backgroundColor"
+      :elevation="elevation"
+      :has-draggable-handler="hasDraggableHandler"
+      :has-actions-slot-divider="hasActionsSlotDivider"
+      :is-selectable="isSelectable"
+      :is-selected="isSelected"
+      @update:isSelected="updateIsSelected"
     >
       <template v-if="meta" #meta>
         <div v-html="meta" />
       </template>
-      <template v-if="trailing" #trailing>
-        <div v-html="trailing" />
+      <template v-if="actions" #actions>
+        <div v-html="actions" />
       </template>
-    </rich-list-item-basic>`,
+    </basic-rich-list-item>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -62,22 +75,29 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	size: RICH_LIST_ITEM_SIZE.MEDIUM,
 	type: RICH_LIST_ITEM_TYPE.DEFAULT,
-	isInteractive: true,
+	backgroundColor: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
+	elevation: null,
+	isDimmed: false,
 	isDraggable: true,
+	hasDraggableHandler: true,
 	icon: null,
 	iconColor: null,
 	iconColorHex: '',
-	isDimmed: false,
+	hasActionsSlotDivider: true,
+	isSelectable: true,
+	isSelected: true,
 	borderColor: null,
 	borderColorHex: '',
 	state: RICH_LIST_ITEM_STATE.DEFAULT,
+	isInteractive: true,
+	draggableIconClassName: 'draggableIconClassName-1',
 
 	eyebrow: 'Eyebrow Uppercase',
 	text: 'Długa nazwa gdy się nie mieści Praesentium dicta sit. Molestiae unde voluptatem eaque labore.',
 	isEyebrowUppercase: false,
 
 	meta: 'Meta Slot',
-	trailing: 'Tailing Slot',
+	actions: 'ACS',
 } as Args;
 
 const argTypes = {
@@ -94,7 +114,7 @@ const argTypes = {
 		control: { type: 'select' },
 	},
 	iconColor: {
-		options: [null, ...Object.values(RICH_LIST_ITEM_ICON_COLOR)],
+		options: [null, ...Object.values(ICON_COLORS)],
 		control: { type: 'select' },
 	},
 	borderColor: {
@@ -120,15 +140,29 @@ const argTypes = {
 	meta: {
 		control: { type: 'text' },
 	},
-	trailing: {
+	actions: {
+		control: { type: 'text' },
+	},
+	draggableIconClassName: {
 		control: { type: 'text' },
 	},
+	backgroundColor: {
+		options: [null, ...Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR)],
+		control: { type: 'select' },
+	},
+	elevation: {
+		options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
+		control: { type: 'select' },
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
 Interactive.args = args;
 
 Interactive.parameters = {
+	actions: {
+		handles: ['icon-click', 'click', 'update:isSelected'],
+	},
 	layout: 'fullscreen',
 	design: {
 		type: 'figma',

package/lib/js/components/RichList/{RichListItemBasic/RichListItemBasic.vue → BasicRichListItem/BasicRichListItem.vue}

@@ -11,18 +11,28 @@
 		:border-color="borderColor"
 		:border-color-hex="borderColorHex"
 		:state="state"
-		class="richListItemBasic"
+		:background-color="backgroundColor"
+		:elevation="elevation"
+		:has-draggable-handler="hasDraggableHandler"
+		:has-actions-slot-divider="hasActionsSlotDivider"
+		:is-selectable="isSelectable"
+		:is-selected="isSelected"
+		class="basicRichListItem"
+		:class="{
+			'-small': size === RICH_LIST_ITEM_SIZE.SMALL,
+		}"
+		@update:is-selected="$emit('update:isSelected', $event)"
 	>
 		<template #content>
-			<div class="richListItemBasic__content">
+			<div class="basicRichListItem__content">
 				<div
-					class="richListItemBasic__eyebrow"
+					class="basicRichListItem__eyebrow"
 					:class="{ '-uppercase': isEyebrowUppercase }"
 				>
 					{{ eyebrow }}
 				</div>
 
-				<div class="richListItemBasic__text">
+				<div class="basicRichListItem__text">
 					{{ text }}
 				</div>
 			</div>
@@ -30,8 +40,8 @@
 		<template v-if="$slots.meta" #meta>
 			<slot name="meta" />
 		</template>
-		<template v-if="$slots.trailing" #trailing>
-			<slot name="trailing" />
+		<template v-if="$slots.actions" #actions>
+			<slot name="actions" />
 		</template>
 	</rich-list-item>
 </template>
@@ -40,8 +50,12 @@
 @import '../../../../styles/settings/colors/tokens';
 @import '../../../../styles/settings/typography/tokens';
 @import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/media-queries';
+@import '../../../../styles/mixins/scrollbars';
+
+.basicRichListItem {
+	$root: &;
 
-.richListItemBasic {
 	max-width: 100%;
 
 	&__content {
@@ -50,11 +64,11 @@
 		gap: $space-xxxxs;
 		justify-content: center;
 		min-width: 0; // to prevent the component from being pushed by the ellipses
-		padding: $space-xxs 0;
+		padding: $space-xs 0;
 	}
 
 	&__eyebrow {
-		@include info-s-extensive-bold;
+		@include info-s-default-bold;
 
 		color: $color-neutral-text-weak;
 		min-width: 0;
@@ -65,37 +79,59 @@
 		&.-uppercase {
 			@include info-s-extensive-bold-uppercase;
 		}
+
+		&:hover {
+			color: $color-neutral-text-weak-hovered;
+		}
 	}
 
 	&__text {
 		@include text-m-compact-bold;
+		@include invisible-scrollbar;
 
 		color: $color-neutral-text;
 		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		overflow-x: scroll;
 		white-space: nowrap;
+
+		@media #{breakpoint-s()} {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&:hover {
+			color: $color-neutral-text-hovered;
+		}
+	}
+
+	&.-small {
+		#{$root}__content {
+			padding: $space-xxxs 0;
+		}
 	}
 }
 </style>
 
 <script lang="ts">
 import RichListItem, {
+	RICH_LIST_ITEM_BACKGROUND_COLOR,
 	RICH_LIST_ITEM_BORDER_COLOR,
-	RICH_LIST_ITEM_ICON_COLOR,
+	RICH_LIST_ITEM_ELEVATION,
 	RICH_LIST_ITEM_SIZE,
 	RICH_LIST_ITEM_STATE,
 	RICH_LIST_ITEM_TYPE,
+	RichListItemBackgroundColor,
 	RichListItemBorderColor,
-	RichListItemIconColor,
+	RichListItemElevation,
 	RichListItemSize,
 	RichListItemState,
 	RichListItemType,
 } from '../RichListItem';
 import { PropType } from 'vue';
+import { ICON_COLORS, IconColor } from '../../Icons/Icon';
 
 export default {
-	name: 'RichListItemBasic',
+	name: 'BasicRichListItem',
 	components: {
 		RichListItem,
 	},
@@ -138,10 +174,10 @@ export default {
 			default: null,
 		},
 		iconColor: {
-			type: String as PropType<RichListItemIconColor>,
+			type: String as PropType<IconColor>,
 			default: null,
 			validator(iconColor) {
-				return Object.values(RICH_LIST_ITEM_ICON_COLOR).includes(iconColor);
+				return Object.values(ICON_COLORS).includes(iconColor);
 			},
 		},
 		iconColorHex: {
@@ -171,6 +207,44 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		backgroundColor: {
+			type: String as PropType<RichListItemBackgroundColor>,
+			default: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
+			validator(backgroundColor) {
+				return Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR).includes(backgroundColor);
+			},
+		},
+		elevation: {
+			type: String as PropType<RichListItemElevation>,
+			default: null,
+			validator(evolution) {
+				return Object.values(RICH_LIST_ITEM_ELEVATION).includes(evolution);
+			},
+		},
+		hasDraggableHandler: {
+			type: Boolean,
+			default: true,
+		},
+		hasActionsSlotDivider: {
+			type: Boolean,
+			default: true,
+		},
+		isSelectable: {
+			type: Boolean,
+			default: true,
+		},
+		isSelected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: {
+		'update:isSelected': (value: boolean) => true,
+	},
+	data() {
+		return {
+			RICH_LIST_ITEM_SIZE: Object.freeze(RICH_LIST_ITEM_SIZE),
+		};
 	},
 };
 </script>

package/lib/js/components/RichList/BasicRichListItem/index.ts

@@ -0,0 +1,3 @@
+import BasicRichListItem from './BasicRichListItem.vue';
+
+export default BasicRichListItem;

package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.consts.ts

@@ -0,0 +1,18 @@
+import {
+	RICH_LIST_ITEM_BACKGROUND_COLOR,
+	RICH_LIST_ITEM_BORDER_COLOR,
+	RichListItemBackgroundColor,
+	RichListItemBorderColor,
+} from '../RichListItem';
+
+export const GROUP_RICH_LIST_ITEM_BORDER_COLOR = {
+	...RICH_LIST_ITEM_BORDER_COLOR,
+} as const;
+
+export type GroupRichListItemBorderColor = RichListItemBorderColor;
+
+export const GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR = {
+	...RICH_LIST_ITEM_BACKGROUND_COLOR,
+} as const;
+
+export type GroupRichListItemBackgroundColor = RichListItemBackgroundColor;