@designcrowd/fe-shared-lib 1.5.1-icontranslation → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.1-icontranslation",
+  "version": "1.5.1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/design-com/Icon/Icon.stories.js

@@ -80,65 +80,3 @@ export const IconSample = () => {
 IconSample.story = {
   name: 'Dcom Icon Library',
 };
-
-export const IconInternationalization = () => {
-  return {
-    components: {
-      Icon,
-    },
-    data() {
-      return {
-        languages: [
-          { code: 'en', name: 'English' },
-          { code: 'fr', name: 'French' },
-          { code: 'es', name: 'Spanish' },
-          { code: 'pt', name: 'Portuguese' },
-          { code: 'de', name: 'German' },
-        ],
-      };
-    },
-    template: `
-      <div>
-        <h3 class="tw-font-sans tw-mb-4 tw-text-lg tw-font-bold">Internationalization (i18n) Support</h3>
-        <p class="tw-font-sans tw-mb-4">The <code>lang</code> prop allows you to specify the language code for screen readers. This is crucial for proper accessibility in internationalized applications.</p>
-
-        <table class="tw-w-full tw-mb-6">
-          <thead>
-            <tr>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Language</th>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon</th>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-            </tr>
-          </thead>
-          <tr v-for="(language, i) in languages" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
-            <td class="tw-p-4 tw-font-sans">{{ language.name }} ({{ language.code }})</td>
-            <td class="tw-p-4">
-              <Icon name="heart" size="md" :lang="language.code" />
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Icon name="heart" size="md" lang="{{ language.code }}" /&gt;
-              </code>
-            </td>
-          </tr>
-        </table>
-
-        <div class="tw-font-sans tw-bg-blue-50 tw-p-4 tw-rounded tw-border tw-border-blue-200">
-          <h4 class="tw-font-bold tw-mb-2">Usage in i18n Applications:</h4>
-          <p class="tw-mb-2">In Vue applications with i18n, you can dynamically pass the current locale:</p>
-          <pre class="tw-bg-gray-100 tw-p-3 tw-rounded tw-text-sm tw-overflow-x-auto"><code>&lt;Icon
-  name="feature.iconName"
-  size="md"
-  :lang="$i18n.locale.split('-')[0]"
-  :alt-text="$t('icons.heart.title')"
-/&gt;</code></pre>
-          <p class="tw-mt-2 tw-text-sm tw-text-gray-600">Note: The lang prop defaults to 'en' for backward compatibility.</p>
-        </div>
-      </div>
-    `,
-  };
-};
-
-IconInternationalization.story = {
-  name: 'Internationalization (lang prop)',
-};

package/src/atoms/components/design-com/Icon/Icon.vue

@@ -18,8 +18,8 @@
       aria-labelledby="title"
       aria-describedby="desc"
     >
-      <title :id="`${name}-${id}-title`" :lang="lang">{{ title }}</title>
-      <desc :id="`${name}-${id}-desc`" :lang="lang">{{ description }}</desc>
+      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
+      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
       <component :is="`icon-${iconName}`"></component>
     </svg>
   </div>
@@ -118,11 +118,6 @@ export default {
       required: false,
       default: '',
     },
-    lang: {
-      type: String,
-      required: false,
-      default: 'en',
-    },
   },
   data() {
     return {

package/.claude/settings.local.json

@@ -1,17 +0,0 @@
-{
-  "env": {
-    "CLAUDE_CODE_USE_BEDROCK": "1",
-    "AWS_PROFILE": "default",
-    "AWS_REGION": "us-east-1",
-    "ANTHROPIC_MODEL": "global.anthropic.claude-sonnet-4-5-20250929-v1:0",
-    "CLAUDE_CODE_MAX_OUTPUT_TOKENS": "10000",
-    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
-  },
-  "outputStyle": "default",
-  "spinnerTipsEnabled": false,
-  "permissions": {
-    "allow": [
-      "Bash(mkdir:*)"
-    ]
-  }
-}

package/.claude/skills/publishing-test-versions.md

@@ -1,285 +0,0 @@
----
-name: publishing-test-versions
-description: Use when you need to publish an experimental/test version of fe-shared-lib to NPM for testing in consuming applications before releasing a stable version
----
-
-# Publishing Test Versions of fe-shared-lib
-
-This skill guides you through publishing experimental versions of `@designcrowd/fe-shared-lib` to NPM for testing in consuming applications (BrandCrowd.Net, DesignCrowd, Design.com, etc.) before cutting an official release.
-
-## When to Use This Skill
-
-Use this skill when:
-- You've implemented changes that need testing in a real consuming application
-- You want to share work-in-progress for integration testing
-- You're verifying a bug fix works in production-like environments
-- You need to test changes across multiple consuming apps before release
-
-**Do NOT use for:**
-- Final production releases (use standard release process instead)
-- Changes you haven't tested locally in Storybook
-- Untested or broken code
-
-## Pre-Publishing Checklist
-
-Before publishing a test version, create TodoWrite todos for these items:
-
-1. ☐ Verify all changes work correctly in Storybook (`npm start`)
-2. ☐ Run linting and fix any issues (`npm run lint:fix`)
-3. ☐ Ensure translations are bundled if you modified i18n files
-4. ☐ Check git status - know what changes you're publishing
-5. ☐ Verify NPM_TOKEN environment variable is set
-6. ☐ Verify you're on the correct git account (use `gh auth status`)
-
-**IMPORTANT:** NEVER run `npm run build` - it takes too long and isn't required for publishing.
-
-## Publishing Workflow
-
-### Step 1: Create Descriptive Test Version Number
-
-Test versions follow the format: `[current-version]-[description]`
-
-**Examples:**
-- `1.5.1-icon-lang-fix` - Testing icon language attribute fix
-- `1.5.1-spinner-variant` - Testing new spinner variant
-- `1.5.1-dcom-checkout` - Testing Design.com checkout changes
-- `1.5.1-test-GT-8753` - Testing specific Jira ticket
-
-**Rules:**
-- Use lowercase and hyphens (no spaces, underscores, or special chars)
-- Keep description short but meaningful (2-4 words)
-- Include ticket number if relevant (GT-1234, BP-5678)
-
-### Step 2: Update package.json Version
-
-1. Read the current version from package.json
-2. Edit package.json to set the test version number
-3. **Example:**
-   ```json
-   "version": "1.5.1-icon-lang-fix"
-   ```
-
-### Step 3: Update package-lock.json
-
-Run npm install to update the lock file with the new version:
-
-```bash
-npm i
-```
-
-**Important:** This MUST be done before building Docker image, or the lock file will be out of sync.
-
-### Step 4: Verify NPM_TOKEN Environment Variable
-
-Check that NPM_TOKEN is set:
-
-```bash
-echo $NPM_TOKEN
-```
-
-**If empty or undefined:**
-- STOP and ask the user to set NPM_TOKEN
-- The user will need to add it to their environment
-- Do NOT proceed without a valid token
-
-### Step 5: Build and Publish via Docker
-
-Run the Docker build command which will:
-1. Create a Node 20.11.0 container
-2. Install all dependencies
-3. Bundle translations
-4. Publish to NPM registry
-
-```bash
-npm run docker:publish
-```
-
-Or directly:
-```bash
-docker build . --build-arg NPM_TOKEN=$NPM_TOKEN
-```
-
-**Expected output:**
-- You should see npm install logs
-- Translation bundling messages
-- NPM publish success message
-- Final output: "Nothing to do."
-
-**If publish fails:**
-- Check Docker output for error messages
-- Common issues:
-  - NPM_TOKEN not set or invalid
-  - Version number already exists on NPM
-  - Network connectivity issues
-  - Authentication problems
-
-### Step 6: Verify Publication
-
-Check that the version was published to NPM:
-
-```bash
-npm view @designcrowd/fe-shared-lib versions --json | grep -i "[version-substring]"
-```
-
-**Example:**
-```bash
-npm view @designcrowd/fe-shared-lib versions --json | grep -i "icon-lang"
-```
-
-This confirms the test version is available for consumers to install.
-
-### Step 7: Document Test Version for Consumers
-
-Create a summary for the user explaining:
-1. The test version number that was published
-2. How to install it in consuming applications:
-   ```bash
-   npm install @designcrowd/fe-shared-lib@1.5.1-icon-lang-fix
-   ```
-3. What changes are included in this test version
-4. Any testing notes or known limitations
-
-**Example message:**
-```
-Successfully published test version: @designcrowd/fe-shared-lib@1.5.1-icon-lang-fix
-
-To test in consuming applications:
-npm install @designcrowd/fe-shared-lib@1.5.1-icon-lang-fix
-
-Changes in this version:
-- Added lang prop to DcomIcon component
-- Updated SVG title/desc to use dynamic lang attribute
-- Maintains backward compatibility (defaults to 'en')
-
-Testing notes:
-- Test with different locales (fr-FR, es-ES, pt-PT)
-- Verify screen readers announce correct language
-- Check that existing usage without lang prop still works
-```
-
-## Post-Publishing Workflow
-
-After publishing:
-
-1. **Do NOT commit the version change** to git yet - test versions are temporary
-2. Test in consuming application(s)
-3. If issues found:
-   - Fix the issues
-   - Publish a new test version (e.g., `1.5.1-icon-lang-fix-v2`)
-   - Repeat testing
-4. Once testing passes:
-   - Revert package.json back to stable version (e.g., `1.5.1`)
-   - Make a proper release with version bump (e.g., `1.5.2`)
-   - Commit and push the stable release
-
-## Git Account Verification
-
-**Before publishing, verify you're using the correct GitHub account:**
-
-```bash
-gh auth status
-```
-
-Expected output for DesignCrowd work:
-```
-Logged in to github.com as KnowlesZ
-```
-
-If you're on the wrong account:
-- STOP and inform the user
-- Ask them to switch accounts using `gh auth switch`
-
-## Common Pitfalls
-
-**Don't:**
-- ❌ Skip updating package-lock.json (causes version mismatch errors)
-- ❌ Commit test versions to git (they're temporary)
-- ❌ Publish with generic names like `1.5.1-test` (not descriptive)
-- ❌ Forget to bundle translations if you modified i18n files
-- ❌ Run `npm run build` (takes forever, not needed)
-- ❌ Publish without linting first
-- ❌ Use the same test version name twice (causes NPM conflicts)
-
-**Do:**
-- ✅ Use descriptive test version names
-- ✅ Update both package.json and package-lock.json
-- ✅ Verify NPM_TOKEN before starting
-- ✅ Test in Storybook before publishing
-- ✅ Document what's in the test version for consumers
-- ✅ Clean up by reverting version after testing
-
-## Understanding What Gets Published
-
-The `.npmignore` file excludes:
-- `node_modules/`
-- `./src` directory (source code is excluded!)
-- `.storybook-static/`
-- Logs, cache files, and IDE configs
-
-**What DOES get published:**
-- Compiled/built files in `dist/`
-- `index.js` and `index.cjs` (entry points)
-- Translation bundles
-- `package.json` and lock file
-
-This is why the Docker build bundles translations but doesn't require a full build - the source files are published directly.
-
-## Docker Build Process Explained
-
-The Dockerfile performs these steps:
-1. Creates Node 20.11.0 environment
-2. Copies package files and installs dependencies
-3. Copies the entire project
-4. Runs `npm run bundle-translation` (required for i18n)
-5. Runs `npm publish` (publishes to NPM registry)
-6. Copies package.json to artifacts for verification
-
-**Why Docker?**
-- Ensures consistent Node version (20.11.0)
-- Isolates publish environment from local machine
-- Handles NPM authentication securely via build arg
-- Creates reproducible builds
-
-## Troubleshooting
-
-### "npm publish failed"
-- Check if version already exists: `npm view @designcrowd/fe-shared-lib@[version]`
-- Verify NPM_TOKEN is valid
-- Check network connectivity
-- Look at Docker build output for specific error
-
-### "Cannot find NPM_TOKEN"
-- User needs to set environment variable: `export NPM_TOKEN=[token]`
-- Verify with: `echo $NPM_TOKEN`
-- Token must have publish permissions for @designcrowd scope
-
-### "Version already exists"
-- Choose a different test version name
-- Append `-v2`, `-v3`, etc. to your description
-- Example: `1.5.1-icon-lang-fix-v2`
-
-### Package-lock.json out of sync
-- Always run `npm i` after changing package.json version
-- Commit lock file changes along with package.json
-
-### Consumer can't install test version
-- Verify version published: `npm view @designcrowd/fe-shared-lib versions`
-- Check for typos in version string
-- Ensure consuming app has access to @designcrowd scoped packages
-
-## Summary Checklist
-
-Use TodoWrite to create todos for each step:
-
-1. ☐ Run linting (`npm run lint:fix`)
-2. ☐ Test changes in Storybook (`npm start`)
-3. ☐ Verify git account is correct (`gh auth status`)
-4. ☐ Create descriptive test version number
-5. ☐ Update package.json version
-6. ☐ Run `npm i` to update lock file
-7. ☐ Verify NPM_TOKEN is set (`echo $NPM_TOKEN`)
-8. ☐ Run `npm run docker:publish`
-9. ☐ Verify publication with `npm view`
-10. ☐ Document test version for user
-
-Remember: Test versions are temporary. Don't commit them to git. After testing succeeds, revert the version and create a proper release.

package/.storybook/test.md

@@ -1,3 +0,0 @@
-![alt text](image.png)
-![alt text](image-1.png)
-![alt text](image-2.png)

package/APasking.md

@@ -1,9 +0,0 @@
-Ask brooke about the critical gap between speed curve and DD rum
- - Missing data points like blocking time?
-
-
-Get questions together to give to DD solution architect before 
- - How do we get metrics on the nuxt internals
- - How can get get API calls made correlated?
- - Would be good to just have the different types of processing that happens in the SSR/client tracked and mapped.
- 

package/GT-8753.md

@@ -1,127 +0,0 @@
-# GT-8753: SVG Icon Translation Issue - Problem & Solution
-
-## Problem Description
-
-The `DcomIcon` component in `@designcrowd/fe-shared-lib` (v1.4.9) has hardcoded `lang="en"` attributes in its SVG `<title>` and `<desc>` accessibility elements, preventing proper internationalization.
-
-**Current Code** (`Icon.vue` lines 21-22):
-```vue
-<title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-<desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
-```
-
-**Impact**: All Design.com pages using DcomIcon display English accessibility text regardless of the user's locale (fr-FR, es-ES, pt-PT, etc.), creating a poor experience for non-English users and failing accessibility standards for internationalized content.
-
-**Affected Pages in BrandCrowd.Net**:
-- `/maker/free-logos`
-- `/business-name-generator`
-- `/maker/contact`
-- `/logo-maker`
-- Multi-Asset homemaker pages (e.g., `/facebook-covers`)
-
-**Used in 6 components** across BrandCrowd.Net's Nuxt application.
-
----
-
-## Proposed Solution
-
-### 1. Add a `lang` Prop to DcomIcon Component
-
-**File**: `src/atoms/components/design-com/Icon/Icon.vue`
-
-Add a new optional prop to accept the language code:
-
-```vue
-<script>
-export default {
-  props: {
-    // ... existing props ...
-    lang: {
-      type: String,
-      required: false,
-      default: 'en', // fallback to English
-    },
-  },
-  // ... rest of component ...
-}
-</script>
-```
-
-### 2. Update Template to Use Dynamic Lang Attribute
-
-**Change lines 21-22** from:
-```vue
-<title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-<desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
-```
-
-To:
-```vue
-<title :id="`${name}-${id}-title`" :lang="lang">{{ title }}</title>
-<desc :id="`${name}-${id}-desc`" :lang="lang">{{ description }}</desc>
-```
-
-### 3. Consumer Usage Pattern
-
-Consumers (like BrandCrowd.Net) can then pass the current locale:
-
-```vue
-<template>
-  <DcomIcon
-    :name="feature.iconName"
-    size="md"
-    :lang="currentLang"
-    :alt-text="$t(`icons.${feature.iconName}.title`)"
-  />
-</template>
-
-<script setup>
-const { locale } = useI18n();
-// Convert 'fr-FR' to 'fr' for HTML lang attribute
-const currentLang = computed(() => locale.value.split('-')[0]);
-</script>
-```
-
----
-
-## Benefits
-
-✅ **Backward Compatible**: Default value of `'en'` preserves existing behavior
-✅ **Minimal Change**: Only 3 lines modified in the component
-✅ **Flexible**: Consumers control the language based on their i18n setup
-✅ **Standards Compliant**: Proper `lang` attributes improve accessibility
-✅ **Simple**: No complex translation logic needed in the shared library
-
----
-
-## Testing Checklist
-
-- [ ] Verify `lang` prop defaults to `'en'` when not provided
-- [ ] Test passing different language codes ('fr', 'es', 'pt', 'de')
-- [ ] Confirm rendered HTML shows correct `lang` attribute in title/desc
-- [ ] Update Storybook story to demonstrate lang prop usage
-- [ ] Verify no breaking changes to existing consumers
-
----
-
-## Implementation Notes
-
-**Why this approach works well:**
-
-1. **Separation of Concerns**: The shared library handles rendering with the correct lang attribute, while consumers handle translation logic specific to their i18n setup
-2. **Accessibility Best Practice**: The `lang` attribute tells screen readers which language pronunciation rules to use, critical for international users
-3. **Minimal Surface Area**: Adding a single prop is safer than building complex translation logic into a shared component library
-
----
-
-## File Location in fe-shared-lib
-
-**Primary file to modify:**
-- `src/atoms/components/design-com/Icon/Icon.vue`
-
-**Lines to change:**
-- Line 21-22 (template)
-- Props definition (add `lang` prop)
-
-**Current component location in BrandCrowd.Net node_modules:**
-- `/home/zknowles/BrandCrowd.Net/BrandCrowd.Nuxt/node_modules/@designcrowd/fe-shared-lib/src/atoms/components/design-com/Icon/Icon.vue`