@asd20/ui 3.2.1039 → 3.2.1041

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1039",
+  "version": "3.2.1041",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     "focus-trap": "^6.9.4",
     "focus-trap-vue": "^1.1.1",
     "js-cookie": "^2.2.1",
-    "lodash-es": "^4.17.15",
+    "lodash": "^4.17.21",
     "swiper": "^5.4.5",
     "uuid": "^3.3.2",
     "v-scroll-lock": "^1.3.1",
@@ -51,14 +51,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@release-it/conventional-changelog": "^2.0.0",
+    "@release-it/conventional-changelog": "^1",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-controls": "^6.5.16",
     "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-knobs": "^6.3.0",
+    "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-notes": "^5.3.12",
     "@storybook/vue": "^6.5.16",
     "@vue/cli-plugin-babel": "^3.4.0",
     "@vue/cli-plugin-e2e-cypress": "^3.4.0",
@@ -80,9 +79,9 @@
     "html-webpack-plugin": "^3.2.0",
     "jest-image-snapshot": "^2.5.0",
     "lint-staged": "^8.1.0",
-    "lodash": "^4.17.15",
     "puppeteer": "^1.9.0",
-    "react": "^16.8.3",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "release-it": "^10.2.0",
     "sass": "^1.69.0",
     "sass-loader": "10.1.1",

package/src/components/atoms/Asd20Button/index.vue

@@ -1,29 +1,16 @@
 <template>
-  <component
-    :is="tag"
-    :href="link || undefined"
-    :class="classes"
-    :aria-label="hideLabel ? label : undefined"
-    :aria-disabled="disabled ? 'true' : undefined"
-    :title="hideLabel ? label : undefined"
-    :target="
-      !link || link.startsWith('/') || link.includes('asd20.org')
-        ? undefined
-        : '_blank'
-    "
-    v-bind="[trackingCode ? { [trackingCode]: '' } : {}]"
-  >
+  <component :is="tag" v-bind="rootAttrs">
     <asd20-icon
       v-if="icon"
       :name="icon"
       :size="size"
-      :style="`transform: rotate(${iconAngle}deg)`"
+      :style="{ transform: `rotate(${iconAngle}deg)` }"
     />
     <span
       v-if="(label && !hideLabel) || $slots.default"
       class="asd20-button__label"
       v-html="label"
-    ></span>
+    />
     <slot />
   </component>
 </template>
@@ -40,16 +27,13 @@ export default {
     opposite: { type: Boolean, default: false },
     hideLabel: { type: Boolean, default: false },
     link: { type: String, default: '' },
-    trackingCode: { type: String, default: '' },
+    trackingCode: { type: String, default: '' }, // e.g., 'data-analytics-id'
     icon: { type: String, default: '' },
     badge: { type: Number, default: 0 },
     size: {
       type: String,
       default: 'lg',
-      validator: value => {
-        // The value must match one of these strings
-        return ['xs', 'sm', 'md', 'lg'].indexOf(value) !== -1
-      },
+      validator: v => ['xs', 'sm', 'md', 'lg'].indexOf(v) !== -1,
     },
     textOnly: { type: Boolean, default: false },
     horizontal: { type: Boolean, default: false },
@@ -74,15 +58,53 @@ export default {
         'asd20-button--centered': this.centered,
         'asd20-button--disabled': this.disabled,
         'asd20-button--opposite': this.opposite,
-
       }
     },
     tag() {
-      if (!this.link || this.link === ' ') {
-        return 'button'
-      } else {
-        return 'a'
+      return !this.link || this.link === ' ' ? 'button' : 'a'
+    },
+    // === link policy per your latest rules ===
+    isExternal() {
+      const l = this.link || ''
+      if (!l) return false
+      if (l.startsWith('/')) return false
+      if (l.startsWith('https://asd20.org')) return false
+      // treat other *.asd20.org as same-window links
+      return !l.includes('.asd20.org')
+    },
+    target() {
+      return this.isExternal ? '_blank' : undefined
+    },
+    rel() {
+      return this.isExternal ? 'noopener noreferrer' : undefined
+    },
+    rootAttrs() {
+      // Build once, spread with v-bind
+      const a = {
+        class: this.classes,
+        'aria-label': this.hideLabel ? this.label : undefined,
+        'aria-disabled': this.disabled ? 'true' : undefined,
+        title: this.hideLabel ? this.label : undefined,
       }
+
+      // Anchor-specific attrs (only when tag is <a> AND not disabled)
+      if (this.tag === 'a' && !this.disabled) {
+        a.href = this.link || undefined
+        a.target = this.target
+        a.rel = this.rel
+      }
+
+      // Button-specific attrs
+      if (this.tag === 'button') {
+        a.type = 'button'
+        // prevent focusable-but-disabled behavior for accessibility
+        if (this.disabled) a.disabled = true
+      }
+
+      // Optional tracking code (dynamic attribute key)
+      if (this.trackingCode) a[this.trackingCode] = ''
+
+      return a
     },
   },
 }

package/src/components/atoms/Asd20Icon/index.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import camelCase from 'lodash-es/camelCase'
+import camelCase from 'lodash/camelCase'
 export default {
   props: {
     name: { type: String, default: 'search' },

package/src/components/molecules/Asd20Card/index.vue

@@ -113,7 +113,7 @@
 <script>
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Tag from '../../atoms/Asd20Tag'
-import truncate from 'lodash-es/truncate'
+import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20Card',

package/src/components/molecules/Asd20Swiper/index.vue

@@ -39,7 +39,7 @@ import {
   Navigation,
   Mousewheel,
 } from 'swiper/js/swiper.esm'
-import merge from 'lodash-es/merge'
+import merge from 'lodash/merge'
 import 'swiper/css/swiper.css'
 
 // see http://idangero.us/swiper/api/#custom-build

package/src/components/organisms/Asd20EventModal/index.vue

@@ -61,7 +61,7 @@ import Asd20List from '../../organisms/Asd20List'
 import Asd20ListItem from '../../molecules/Asd20ListItem'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
 import formattedTime from '../../../helpers/formatEventTime'
-import truncate from 'lodash-es/truncate'
+import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20EventModal',

package/src/components/organisms/Asd20ImageGallery/index.vue

@@ -55,7 +55,7 @@ import Asd20Swipe from '../../../components/molecules/Asd20Swipe'
 import Asd20SwipeItem from '../../../components/atoms/Asd20SwipeItem'
 import Asd20Icon from '../../../components/atoms/Asd20Icon'
 
-import truncate from 'lodash-es/truncate'
+import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20ImageGallery',

package/src/components/organisms/Asd20ImageHeader/index.vue

@@ -164,7 +164,7 @@ import Asd20Share from '../../molecules/Asd20Share'
 import Asd20FormattedDate from '../../atoms/Asd20FormattedDate'
 import Asd20TagGroup from '../../organisms/Asd20TagGroup'
 
-import truncate from 'lodash-es/truncate'
+import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20ImageHeader',

package/src/components/organisms/Asd20PageHeader/index.vue

@@ -159,7 +159,7 @@ import Asd20Share from '../../molecules/Asd20Share'
 import Asd20FormattedDate from '../../atoms/Asd20FormattedDate'
 import Asd20TagGroup from '../../organisms/Asd20TagGroup'
 
-import truncate from 'lodash-es/truncate'
+import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20PageHeader',

package/src/components/organisms/Asd20PrimaryHeader/index.vue

@@ -26,7 +26,7 @@
 
 <script>
 import Asd20Messaging from '../../atoms/Asd20Messaging'
-import _get from 'lodash-es/get'
+import _get from 'lodash/get'
 
 export default {
   name: 'Asd20PrimaryHeader',

package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue

@@ -55,7 +55,7 @@
 import scrollTrack from '../../../directives/scroll-track'
 import Asd20Button from '../../atoms/Asd20Button'
 
-import truncate from 'lodash-es/truncate'
+import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20SchoolHomepageHeader',

package/src/components/organisms/Asd20SiteSearch/index.vue

@@ -95,7 +95,7 @@ import Asd20DepartmentContactCard from '../../molecules/Asd20DepartmentContactCa
 import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 
 // Helpers
-import debounce from 'lodash-es/debounce'
+import debounce from 'lodash/debounce'
 import mapPagesToListItems from '../../../helpers/mapPagesToListItems'
 import mapFilesToListItems from '../../../helpers/mapFilesToListItems'
 

package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.stories.js

@@ -6,7 +6,7 @@ import mockPageMixin from '../../../mixins/mockPageMixin'
 import Asd20ArticleDigestCompactTemplate from '.'
 import pageQueryResult from '../../../data/page-queries/digest-page-query-result.json'
 import notifications from '../../../data/messages/notifications'
-import debounce from 'lodash-es/debounce'
+import debounce from 'lodash/debounce'
 
 
 const info = {

package/src/components/templates/Asd20ArticleDigestTemplate/index.stories.js

@@ -6,7 +6,7 @@ import mockPageMixin from '../../../mixins/mockPageMixin'
 import Asd20ArticleDigestTemplate from '.'
 import pageQueryResult from '../../../data/page-queries/digest-page-query-result.json'
 import notifications from '../../../data/messages/notifications'
-import debounce from 'lodash-es/debounce'
+import debounce from 'lodash/debounce'
 
 
 const info = {

package/src/components/templates/Asd20ArticleListTemplate/index.stories.js

@@ -5,7 +5,7 @@ import mockPageMixin from '../../../mixins/mockPageMixin'
 import Asd20ArticleListTemplate from '.'
 import pageQueryResult from '../../../data/page-queries/story-index-page-query-result.json'
 import notifications from '../../../data/messages/notifications'
-import debounce from 'lodash-es/debounce'
+import debounce from 'lodash/debounce'
 
 const info = {
   summary: 'Article List Template',

package/src/components/templates/Asd20ClubsTemplate/index.stories.js

@@ -6,7 +6,7 @@ import mockPageMixin from '../../../mixins/mockPageMixin'
 import Asd20ClubsTemplate from '.'
 import pageQueryResult from '../../../data/page-queries/digest-page-query-result.json'
 import notifications from '../../../data/messages/notifications'
-import debounce from 'lodash-es/debounce'
+import debounce from 'lodash/debounce'
 
 
 const info = {

package/src/components/templates/Asd20LoginsTemplate/index.vue

@@ -168,7 +168,7 @@ import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Modal from '../../molecules/Asd20Modal'
 import Asd20MessagingGroup from '../../molecules/Asd20MessagingGroup'
 
-import { toKebab } from '../../../helpers/toKebab'
+import kebabCase from 'lodash/kebabCase'
 
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
@@ -267,8 +267,8 @@ export default {
 
       return sortedCategories.map(c => ({
         label: c,
-        hash: `#tab-${toKebab(c)}`,
-        active: this.tab === `#tab-${toKebab(c)}`,
+        hash: `#tab-${kebabCase(c)}`,
+        active: this.tab === `#tab-${kebabCase(c)}`,
       }))
     },
     logins() {

package/src/components/templates/Asd20SchoolHomeTemplate/index.vue

@@ -191,7 +191,7 @@ import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
 
 // Helpers
-import _get from 'lodash-es/get'
+import _get from 'lodash/get'
 
 export default {
   name: 'Asd20SchoolHomeTemplate',

package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue

@@ -191,7 +191,7 @@ import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
 import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
 
 // Helpers
-import _get from 'lodash-es/get'
+import _get from 'lodash/get'
 
 export default {
   name: 'Asd20SchoolHomeVideoTemplate',

package/src/helpers/mapPageQueryResultToPageTemplateProps.js

@@ -1,4 +1,4 @@
-import _get from 'lodash-es/get'
+import _get from 'lodash/get'
 
 function getConfigurationValueOrDefault({
   configurations,

package/src/mixins/inputComponentMixin.js

@@ -1,4 +1,4 @@
-import { toKebab } from '../helpers/toKebab'
+import kebabCase from 'lodash/kebabCase'
 
 export default {
   inheritAttrs: false,
@@ -44,7 +44,7 @@ export default {
 
   computed: {
     kebabComponentName() {
-      return toKebab(this.$options.name).replace(/-([0-9])/g, '$1')
+      return kebabCase(this.$options.name).replace(/-([0-9])/g, '$1')
     },
     classes() {
       let classes = {}

package/src/helpers/toKebab.js

@@ -1,27 +0,0 @@
-/**
- * Convert a string to kebab-case (lodash-like).
- * - lowercases
- * - strips accents
- * - splits camelCase / numbers
- * - collapses non-alphanumerics to single hyphens
- * - trims hyphens
- * @param {string} input
- * @returns {string}
- */
-export function toKebab(input) {
-  if (input == null) return ''
-
-  let s = String(input)
-    .normalize('NFKD')
-    .replace(/[\u0300-\u036f]/g, '')
-
-  s = s
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')   // lower/num → Upper
-    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2') // HTMLParser → HTML-Parser
-    .replace(/([A-Za-z])([0-9])/g, '$1-$2')   // word→digit
-    .replace(/([0-9])([A-Za-z])/g, '$1-$2')   // digit→word
-
-  s = s.replace(/[^A-Za-z0-9]+/g, '-')
-
-  return s.replace(/^-+|-+$/g, '').toLowerCase()
-}