Merge pull request #165 from warp-ds/next

Release 2.0.0

.github/workflows/i18n.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Install pnpm and dependencies
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: true
       - name: Validate extracted messages
         run: pnpm messages:compile

.github/workflows/lint.pr.yaml

@@ -15,7 +15,7 @@ jobs:
     - name: Install pnpm and dependencies
       uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 9
         run_install: true
     - name: Lint
       run: pnpm lint:check

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Install pnpm and dependencies
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9
           run_install: true
       - name: Build
         run: pnpm build

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     - name: Install pnpm and dependencies
       uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 9
         run_install: true
     - name: Test
       run: pnpm test

CHANGELOG.md

@@ -1,3 +1,43 @@
+# [2.0.0-next.4](https://github.com/warp-ds/vue/compare/v2.0.0-next.3...v2.0.0-next.4) (2024-05-14)
+
+
+### Bug Fixes
+
+* **textfield/textarea:** clean up classes  ([#163](https://github.com/warp-ds/vue/issues/163)) ([2babe15](https://github.com/warp-ds/vue/commit/2babe1537ac826d1f00681a7912f91106f9b7667))
+
+# [2.0.0-next.3](https://github.com/warp-ds/vue/compare/v2.0.0-next.2...v2.0.0-next.3) (2024-04-30)
+
+
+### Features
+
+* add more functionality to attention component ([#161](https://github.com/warp-ds/vue/issues/161)) ([a8ed8ab](https://github.com/warp-ds/vue/commit/a8ed8ab2ed01bd44b3bdb35d510e29b785a0d2d0))
+
+# [2.0.0-next.2](https://github.com/warp-ds/vue/compare/v2.0.0-next.1...v2.0.0-next.2) (2024-04-22)
+
+
+### Features
+
+* Individual imports ([#162](https://github.com/warp-ds/vue/issues/162)) ([42c72d5](https://github.com/warp-ds/vue/commit/42c72d5bb15319c32c9661ca2ef581311d655bd4))
+
+# [2.0.0-next.1](https://github.com/warp-ds/vue/compare/v1.2.8-next.1...v2.0.0-next.1) (2024-04-16)
+
+
+### Features
+
+* test release ([#160](https://github.com/warp-ds/vue/issues/160)) ([85bf2d6](https://github.com/warp-ds/vue/commit/85bf2d6ff3d726184b69ae98067ab66c03debd6c)), closes [#2](https://github.com/warp-ds/vue/issues/2)
+
+
+### BREAKING CHANGES
+
+* The attention component
+
+## [1.2.8-next.1](https://github.com/warp-ds/vue/compare/v1.2.7...v1.2.8-next.1) (2024-04-16)
+
+
+### Bug Fixes
+
+* Styling fixes for Card component ([#157](https://github.com/warp-ds/vue/issues/157)) ([646fcc4](https://github.com/warp-ds/vue/commit/646fcc4d756900c1c06dd67a62bb7b4415392441))
+
 ## [1.2.7](https://github.com/warp-ds/vue/compare/v1.2.6...v1.2.7) (2024-04-09)
 
 

README.md

@@ -47,7 +47,6 @@ Storybook can be started by running `pnpm storybook`.
 This project is continuously published to [NPM](https://www.npmjs.com/package/@warp-ds/vue) and [Eik](https://assets.finn.no/pkg/@warp-ds/vue) using a `next` tag (e.g. `1.1.0-next.1`).
 Anyone needing to use the latest changes of this package can point to the `next` version while waiting for the stable release.
 
-
 ## Changelog
 
 Detailed changes for each release can be found in the [CHANGELOG](CHANGELOG.md) file.
@@ -62,7 +61,6 @@ pnpm lingui extract --clean
 
 This command should no longer be necessary to run once the bug in Crowdin is fixed.
 
-
 ## License
 
 @warp-ds/vue is available under the [Apache-2.0 software license](https://github.com/warp-ds/vue/blob/main/LICENSE).

components/attention/attentionUtil.js

@@ -1,21 +1,10 @@
 import { attention as ccAttention } from '@warp-ds/css/component-classes';
 
-const TOP = 'top';
-const BOTTOM = 'bottom';
-const LEFT = 'left';
-const RIGHT = 'right';
-export const opposites = {
-  [TOP]: BOTTOM,
-  [BOTTOM]: TOP,
-  [LEFT]: RIGHT,
-  [RIGHT]: LEFT,
-};
-export const directions = [TOP, BOTTOM, LEFT, RIGHT];
-
 const TOOLTIP = 'tooltip';
 const POPOVER = 'popover';
 const CALLOUT = 'callout';
 const HIGHLIGHT = 'highlight';
+
 export const variants = [CALLOUT, POPOVER, TOOLTIP, HIGHLIGHT];
 
 export const getVariantClasses = (props) => {
@@ -27,23 +16,10 @@ export const getVariantClasses = (props) => {
   };
 };
 
-export const rotation = { [LEFT]: -45, [TOP]: 45, [RIGHT]: 135, [BOTTOM]: -135 };
-
 export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const props = {
   noArrow: Boolean,
   canClose: Boolean,
   ...variants.reduce((acc, e) => ((acc[e] = Boolean), acc), {}),
-  ...directions.reduce((acc, e) => ((acc[e] = Boolean), acc), {}),
-};
-
-const middlePosition = 'calc(50% - 7px)';
-const isDirectionVertical = (name) => [TOP, BOTTOM].includes(name);
-
-export const computeCalloutArrow = ({ actualDirection, directionName, arrowEl }) => {
-  actualDirection.value = directionName.value;
-  const directionIsVertical = isDirectionVertical(directionName.value);
-  arrowEl.value.$el.style.left = directionIsVertical ? middlePosition : null;
-  arrowEl.value.$el.style.top = !directionIsVertical ? middlePosition : null;
 };

components/attention/w-attention-arrow.vue

@@ -1,36 +1,24 @@
 <script setup>
   import { computed } from 'vue'
-  import { props as attentionProps, opposites, rotation, getVariantClasses } from './attentionUtil.js'
+  import { opposites, arrowDirectionClassname } from '@warp-ds/core/attention'
+  import { props as attentionProps, getVariantClasses } from './attentionUtil.js'
   import { attention as ccAttention } from '@warp-ds/css/component-classes'
   
   const props = defineProps({
     ...attentionProps,
     direction: String
   })
-
-  const arrowDirectionClassname = computed(() => {
-    const direction = arrowDirection.value?.charAt(0).toUpperCase() + arrowDirection.value?.slice(1);
-
-    return `arrowDirection${direction}`;
-  })
-
   const arrowDirection = computed(() => opposites[props.direction])
 
   const arrowClasses = computed(() => [
     ccAttention.arrowBase,
-    ccAttention[arrowDirectionClassname.value],
+    ccAttention[`arrowDirection${arrowDirectionClassname(arrowDirection.value)}`],
     getVariantClasses(props).arrow
   ]);
-
-  const arrowStyle = computed(() => ({
-    // border alignment is off by a fraction of a pixel, this fixes it
-    [`margin-${arrowDirection.value}`]: '-0.5px',
-    transform: `rotate(${rotation[arrowDirection.value]}deg)`,
-  }))
 </script>
 
 <template>
-  <div :class="arrowClasses" :style="arrowStyle" />
+  <div :class="arrowClasses"/>
 </template>
 
 <script>