Merge pull request #370 from mxenabled/wes/CT-2472/MXLogo

Wes/ct 2472/mx logo

Author: wesrisenmay-mx

.claude/skills/adr-review/SKILL.md

@@ -15,7 +15,7 @@ skill can review either — it always evaluates against the connect-widget ADRs.
 ## Scope: what to review
 
 Review **only the code the PR adds or changes** (the diff), not the whole repo. ADR
-0002 states that a PR is judged on whether its *new* code adheres to the ADRs; you
+0002 states that a PR is judged on whether its _new_ code adheres to the ADRs; you
 are not auditing pre-existing code except where the PR modifies it. When a PR edits a
 line that was already non-conforming, note that conforming it would be ideal but is
 not blocking unless the PR is making that area worse.
@@ -80,6 +80,7 @@ check every applicable ADR. Only flag things you can point to in the diff. Prefe
 being specific and actionable over exhaustive nitpicking.
 
 Assign each finding a severity:
+
 - **Blocking** — clearly violates an ADR's decision (would fail review per ADR 0002).
 - **Should fix** — likely violation or strongly discouraged pattern; confirm intent.
 - **Consider** — judgment call, style, or a heads-up (e.g. PR getting large).
@@ -123,4 +124,4 @@ confidence the review was real. If nothing in the diff is in scope for a given A
   as "acceptable only if this is an urgent hotfix — file a follow-up ticket."
 - **Legacy code:** the repo is mid-migration (e.g. `@kyper/*` → MXUI). Editing legacy
   files doesn't require rewriting them, but new code must conform.
-- Keep the review grounded in the *diff* — never invent violations you can't cite.
+- Keep the review grounded in the _diff_ — never invent violations you can't cite.

.claude/skills/adr-review/reference/adr-checklist.md

@@ -35,7 +35,7 @@ Check added/changed `.tsx`/`.jsx`/`.css` code:
 - **CSS Modules required.** New stylesheets must be `*.module.css` and imported as a
   module (`import styles from './Foo.module.css'`). Flag new plain `.css`/global CSS
   files, or Tailwind / other global CSS-framework classes, or styled-components.
-- **No `sx` prop for styling.** Flag `sx={...}` on MUI/MXUI components. *Exception:*
+- **No `sx` prop for styling.** Flag `sx={...}` on MUI/MXUI components. _Exception:_
   `xs` is allowed **only** for breakpoint-specific code (MUI doesn't expose breakpoints
   as CSS variables). Ordinary styling via `sx`/`xs` → move to a CSS Module.
 - **Spacing between elements → MUI `<Stack spacing={n}>`.** Flag margins/padding added
@@ -102,7 +102,7 @@ used together in close proximity; move code to `shared/` only once actually shar
   `shared/` that only one domain uses (premature sharing).
 
 Because the current repo is mid-migration, treat structure findings as guidance for
-*new* domains/files rather than demanding relocation of existing ones.
+_new_ domains/files rather than demanding relocation of existing ones.
 
 ---
 

GEMINI.md

@@ -23,7 +23,7 @@ The project relies on standard npm scripts for development, building, and testin
 - **Development Build (Watch Mode):** `npm run dev`
 - **Production Build:** `npm run build`
 - **Run Tests:** `npm run test`
-- **Watch Tests:** `npm run watch`
+- **Watch Tests:** `npm run test:watch`
 - **Lint Code:** `npm run lint`
 - **Link locally:** Use `npm link` in the root and then `npm link @mxenabled/connect-widget` in the consuming application to test local changes.
 

package.json

@@ -32,7 +32,7 @@
     "prepare": "husky",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "watch": "vitest",
+    "test:watch": "vitest",
     "i18n": "node scripts/i18n.js",
     "logBuildDate": "echo 'Last build: '$(date \"+%c\") | tee ./dist/lastBuild.txt",
     "testAndBuild": "npm run test && npm run build",

src/views/disclosure/PoweredByMXText.js

@@ -0,0 +1,13 @@
+.text:global(.MuiTypography-root) {
+  color: var(--mui-palette-text-secondary);
+}
+
+.accessibleAriaLabel {
+  position: absolute;
+  color: transparent;
+  overflow: hidden;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}

src/views/disclosure/PoweredByMXText.module.css

@@ -0,0 +1,15 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from 'src/utilities/testingLibrary'
+import PoweredByMXText from 'src/views/disclosure/PoweredByMXText'
+
+describe('<PoweredByMXText />', () => {
+  it('renders the visible "Data access by" text with an aria hidden, the logo, and the full string for screen readers', () => {
+    const { container } = render(<PoweredByMXText />)
+
+    expect(screen.getByText('Data access by')).toHaveAttribute('aria-hidden', 'true')
+    expect(screen.getByText('Data access by MX')).toBeInTheDocument()
+
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+})

src/views/disclosure/PoweredByMXText.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { MXLogoIcon, Text } from '@mxenabled/mxui'
+
+import { __ } from 'src/utilities/Intl'
+import { Stack, useTheme } from '@mui/material'
+import styles from 'src/views/disclosure/PoweredByMXText.module.css'
+
+const PoweredByMXText = () => {
+  const theme = useTheme()
+
+  return (
+    <Stack alignItems="center" direction="row" justifyContent="center" spacing={0.5}>
+      <Text
+        aria-hidden={true}
+        bold={true}
+        className={styles.text}
+        component="span"
+        truncate={false}
+        variant="Small"
+      >
+        {
+          // --TR: Full string "Data access by MX(Logo)"
+          __('Data access by')
+        }{' '}
+      </Text>
+      <MXLogoIcon color={theme.palette.text.primary} size={25} />
+      <span className={styles.accessibleAriaLabel}>{`${__('Data access by')} MX`}</span>
+    </Stack>
+  )
+}
+
+export default PoweredByMXText

src/views/disclosure/PoweredByMXText.tsx

@@ -86,7 +86,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: './src/testSetup.ts',
-    include: ['**/*-{test,spec}.?(c|m)[jt]s?(x)'],
+    include: ['**/*-{test,spec}.?(c|m)[jt]s?(x)', '**/*.{test,spec}.?(c|m)[jt]s?(x)'],
     server: {
       deps: {
         inline: ['@mxenabled/mx-icons'],