Release 1.2.4

.gitignore

@@ -3,3 +3,5 @@ dist/
 .idea/
 .vscode
 settings.json
+storybook-static/
+coverage/

.storybook/main.js

@@ -0,0 +1,19 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: [
+    "../components/**/*.stories.[tj]s",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "false",
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/finn-no.css" />
+<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v1/tokens/finn-no.css" />
+<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v1/resets.css" />
+
+<script>
+  document.documentElement.setAttribute("lang", 'en');
+</script>

.storybook/preview.js

@@ -0,0 +1 @@
+import 'uno.css';

CHANGELOG.md

@@ -1,3 +1,38 @@
+## [1.2.4-next.5](https://github.com/warp-ds/vue/compare/v1.2.4-next.4...v1.2.4-next.5) (2024-02-15)
+
+
+### Bug Fixes
+
+* Slider active track disabled state fix ([#139](https://github.com/warp-ds/vue/issues/139)) ([a756c4c](https://github.com/warp-ds/vue/commit/a756c4c3e68b0e39a4eadaba50ed21f8fe091035))
+
+## [1.2.4-next.4](https://github.com/warp-ds/vue/compare/v1.2.4-next.3...v1.2.4-next.4) (2024-02-14)
+
+
+### Bug Fixes
+
+* Remove redundant component css class from Modal ([#137](https://github.com/warp-ds/vue/issues/137)) ([3d783f9](https://github.com/warp-ds/vue/commit/3d783f92d9b0cb9b14b6f0b206771a41974d4eb7))
+
+## [1.2.4-next.3](https://github.com/warp-ds/vue/compare/v1.2.4-next.2...v1.2.4-next.3) (2024-02-13)
+
+
+### Bug Fixes
+
+* rename deleted icons after @warp-ds/icons update to 2.0.0 ([#136](https://github.com/warp-ds/vue/issues/136)) ([e9ad066](https://github.com/warp-ds/vue/commit/e9ad0667ec6b4b5acbbac52329bba3b7c3fe52e7))
+
+## [1.2.4-next.2](https://github.com/warp-ds/vue/compare/v1.2.4-next.1...v1.2.4-next.2) (2024-02-01)
+
+
+### Bug Fixes
+
+* **deps:** update dependency scroll-doctor to v2 ([#134](https://github.com/warp-ds/vue/issues/134)) ([7e7e919](https://github.com/warp-ds/vue/commit/7e7e919b03ca60bb39b281e879a08b5cfe184190))
+
+## [1.2.4-next.1](https://github.com/warp-ds/vue/compare/v1.2.3...v1.2.4-next.1) (2024-01-09)
+
+
+### Bug Fixes
+
+* replace letter x with icon close ([#129](https://github.com/warp-ds/vue/issues/129)) ([56763e5](https://github.com/warp-ds/vue/commit/56763e5c754d04ad250347e1e76a3137a764f7f2))
+
 ## [1.2.3](https://github.com/warp-ds/vue/compare/v1.2.2...v1.2.3) (2023-12-20)
 
 

README.md

@@ -38,6 +38,9 @@ pnpm add @warp-ds/vue
 For information on the components available in the package and how to use them,
 see the [Warp Design System documentation](https://warp-ds.github.io/tech-docs/).
 
+### Storybook
+
+Storybook can be started by running `pnpm storybook`. 
 
 ## Releases
 

components/alert/stories/Alert.stories.js

@@ -0,0 +1,24 @@
+import wAlert from '../w-alert.vue';
+import { ref } from 'vue';
+
+import { within, expect } from '@storybook/test';
+
+const showAlert = ref(true);
+
+export default { title: 'FeedbackIndicators/Alert', component: wAlert };
+
+const Template = (args) => ({
+    components: { wAlert },
+    setup() { return { args, showAlert }; },
+    template: '<w-alert v-model="showAlert" v-bind="args"><p>I am an excellent message for the user.</p></w-alert>',
+});
+
+export const MainStory = Template.bind({});
+MainStory.args = { info: true, title: "I am a title" };
+
+export const NegativeAlertTask = Template.bind({});
+NegativeAlertTask.args = { negative: true, title: 'This is "negative" variant of the alert component' };
+NegativeAlertTask.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await expect(canvas.getByRole('alert')).toBeInTheDocument();
+};

components/alert/w-alert.vue

@@ -3,10 +3,10 @@ import { computed } from "vue";
 import { wExpandTransition } from "#generics";
 import { createModel, modelProps } from "create-v-model";
 import { alert as ccAlert } from "@warp-ds/css/component-classes";
-import IconAlertError16 from "@warp-ds/icons/vue/alert-error-16";
-import IconAlertSuccess16 from "@warp-ds/icons/vue/alert-success-16";
-import IconAlertWarning16 from "@warp-ds/icons/vue/alert-warning-16";
-import IconAlertInfo16 from "@warp-ds/icons/vue/alert-info-16";
+import IconError16 from "@warp-ds/icons/vue/error-16";
+import IconSuccess16 from "@warp-ds/icons/vue/success-16";
+import IconWarning16 from "@warp-ds/icons/vue/warning-16";
+import IconInfo16 from "@warp-ds/icons/vue/info-16";
 
 const props = defineProps({
   title: String,
@@ -38,12 +38,12 @@ const iconClass = computed(() => [ccAlert.icon, activeIconClassNames.value]);
 
 const iconComponent = computed(() =>
   props.negative
-    ? IconAlertError16
+    ? IconError16
     : props.positive
-    ? IconAlertSuccess16
+    ? IconSuccess16
     : props.warning
-    ? IconAlertWarning16
-    : IconAlertInfo16
+    ? IconWarning16
+    : IconInfo16
 );
 </script>
 

components/button/stories/Button.stories.js

@@ -0,0 +1,12 @@
+import wButton from '../w-button.vue';
+
+export default { title: 'Buttons/Button', component: wButton };
+
+const Template = (args) => ({
+    components: { wButton },
+    setup() { return { args }; },
+    template: '<w-button v-bind="args">Click me</w-button>',
+});
+
+export const MainStory = Template.bind({});
+MainStory.args = { primary: true };

components/modal/w-modal.vue

@@ -10,7 +10,7 @@ import { messages as enMessages} from './locales/en/messages.mjs';
 import { messages as nbMessages} from './locales/nb/messages.mjs';
 import { messages as fiMessages} from './locales/fi/messages.mjs';
 import IconClose16 from '@warp-ds/icons/vue/close-16';
-import IconTableSortDown16 from '@warp-ds/icons/vue/table-sort-down-16';
+import IconArrowLeft16 from '@warp-ds/icons/vue/arrow-left-16';
 
 activateI18n(enMessages, nbMessages, fiMessages);
 
@@ -111,7 +111,7 @@ const emit = defineEmits(['dismiss', 'left', 'right', 'shown', 'hidden']);
     enter-from-class="opacity-0"
     leave-to-class="opacity-0"
     >
-    <div :class="[ccModal.backdrop, ccModal.transparentBg]" v-if="showModal" @click.self="emitDismiss" ref="backdropEl" data-test="backdrop">
+    <div v-if="showModal" ref="backdropEl" :class="ccModal.backdrop" @click.self="emitDismiss" data-test="backdrop">
       <transition
         name="slide"
         enter-from-class="translate-y-full"
@@ -128,7 +128,7 @@ const emit = defineEmits(['dismiss', 'left', 'right', 'shown', 'hidden']);
               >
               <button v-if="left" :aria-label="ariaBack" @click="$emit('left')" :class="titleLeftClasses" key="left" v-bind="left">
                 <slot name="left">
-                    <icon-table-sort-down-16 :class="[ccModal.titleButtonIcon, ccModal.titleButtonIconRotated]" />
+                    <icon-arrow-left-16 :class="ccModal.titleButtonIcon" />
                 </slot>
               </button>
               <div :class="titleCenterClasses" key="title" v-bind="titleAttrs">
@@ -142,10 +142,10 @@ const emit = defineEmits(['dismiss', 'left', 'right', 'shown', 'hidden']);
               </button>
             </transition-group>
           </div>
-          <div :class="[ccModal.content, contentClasses]" v-if="$slots.default" ref="contentEl" :id="contentId">
+          <div v-if="$slots.default" :class="[ccModal.content, contentClasses]" ref="contentEl" :id="contentId">
             <slot />
           </div>
-          <div :class="ccModal.footer" v-if="$slots.footer">
+          <div v-if="$slots.footer" :class="ccModal.footer">
             <slot name="footer" />
           </div>
         </div>

components/pill/w-pill.vue

@@ -2,6 +2,7 @@
 import { i18n } from '@lingui/core';
 import { computed } from 'vue';
 import { pill as ccPill } from '@warp-ds/css/component-classes';
+import IconClose16 from "@warp-ds/icons/vue/close-16";
 import { activateI18n } from '../util/i18n';
 import { messages as enMessages} from './locales/en/messages.mjs';
 import { messages as nbMessages} from './locales/nb/messages.mjs';
@@ -50,7 +51,7 @@ const removeFilterSrText = i18n._({
     </button>
     <button v-if="p.canClose" type="button" :class="closeClasses" @click="$emit('close')">
       <span v-if="!p.suggestion" :class="ccPill.a11y">{{ p.closeSRLabel || removeFilterSrText }}</span>
-      <span>x</span>
+      <icon-close-16 />
     </button>
   </div>
 </template>

components/slider/w-slider.vue

@@ -121,12 +121,10 @@ const trackClasses = computed(() => [
     [ccSlider.trackDisabled]: props.disabled,
   },
 ]);
-const activeTrackClasses = computed(() => [
-  ccSlider.activeTrack,
-  {
-    [ccSlider.activeTrackDisabled]: props.disabled,
-  },
-]);
+const activeTrackClasses = computed(() => ({
+  [ccSlider.activeTrack]: !props.disabled,
+  [ccSlider.activeTrackDisabled]: props.disabled,
+}));
 const thumbClasses = computed(() => [
   ccSlider.thumb,
   props.disabled ? ccSlider.thumbDisabled : ccSlider.thumbEnabled,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/vue",
   "repository": "git@github.com:warp-ds/vue.git",
-  "version": "1.2.3",
+  "version": "1.2.4-next.5",
   "description": "Warp components for Vue 3",
   "type": "module",
   "exports": {
@@ -15,58 +15,76 @@
     "#dev-util": "./dev/src/util.js"
   },
   "scripts": {
+    "build-storybook": "storybook build",
+    "build": "vite build --mode lib && vite build --mode eik",
     "commit": "cz",
     "dev": "vite dev dev --config ./vite.config.js",
-    "test": "vitest run",
-    "watch": "vitest watch",
-    "build": "vite build --mode lib && vite build --mode eik",
-    "site": "vite build dev --config ./vite.config.js",
-    "postsite": "cd dev/dist && cp index.html 200.html && cp index.html 404.html",
+    "messages:compile": "lingui compile",
     "messages:extract": "lingui extract",
-    "messages:compile": "lingui compile"
+    "postsite": "cd dev/dist && cp index.html 200.html && cp index.html 404.html",
+    "site": "vite build dev --config ./vite.config.js",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest run --coverage",
+    "watch": "vitest watch"
   },
   "keywords": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@floating-ui/dom": "^1.5.1",
-    "@lingui/core": "^4.3.0",
+    "@floating-ui/dom": "^1.5.4",
+    "@lingui/core": "^4.7.0",
     "@warp-ds/core": "^1.0.2",
-    "@warp-ds/css": "^1.6.1",
-    "@warp-ds/icons": "1.3.0",
-    "@warp-ds/uno": "^1.1.0",
+    "@warp-ds/css": "1.8.3",
+    "@warp-ds/icons": "2.0.0",
+    "@warp-ds/uno": "1.8.1",
     "create-v-model": "^2.2.0",
     "dom-focus-lock": "^1.1.0",
     "element-collapse": "^1.1.0",
     "femtobounce": "^1.0.0",
-    "scroll-doctor": "^1.0.1"
+    "scroll-doctor": "^2.0.0"
   },
   "devDependencies": {
-    "@eik/cli": "^2.0.22",
-    "@eik/rollup-plugin": "^4.0.50",
+    "@eik/cli": "2.0.33",
+    "@eik/rollup-plugin": "4.0.62",
     "@itsy/token": "^2.0.0-next.0",
-    "@lingui/cli": "^4.3.0",
-    "@lingui/conf": "^4.3.0",
-    "@lingui/extractor-vue": "^4.3.0",
+    "@lingui/cli": "^4.7.0",
+    "@lingui/conf": "^4.7.0",
+    "@lingui/extractor-vue": "^4.7.0",
     "@lukeed/uuid": "^2.0.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@vitejs/plugin-vue": "^4.3.3",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/builder-vite": "^7.6.10",
+    "@storybook/cli": "^7.6.10",
+    "@storybook/test": "^7.6.10",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/vue3": "^7.6.10",
+    "@storybook/vue3-vite": "^7.6.10",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitest/coverage-v8": "^1.2.2",
+    "@vue/compiler-sfc": "^3.4.14",
     "@vue/test-utils": "^2.4.1",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "drnm": "^0.9.0",
-    "esbuild": "^0.19.2",
-    "fuse.js": "^6.6.2",
-    "happy-dom": "^12.0.0",
-    "semantic-release": "^21.1.1",
-    "shikiji": "^0.6.8",
-    "unocss": "^0.56.0",
-    "vite": "^4.4.9",
+    "esbuild": "^0.19.11",
+    "fuse.js": "^7.0.0",
+    "happy-dom": "^13.0.0",
+    "playwright": "^1.41.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^23.0.0",
+    "shikiji": "^0.9.0",
+    "storybook": "^7.6.10",
+    "unocss": "0.58.5",
+    "vite": "5.0.12",
     "viteik": "^1.0.3",
-    "vitest": "^0.34.3",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vitest": "^1.2.1",
+    "vue": "^3.4.14",
+    "vue-router": "^4.2.5"
   },
   "publishConfig": {
     "access": "public"