diff --git a/.kiro/README.md b/.kiro/README.md index 1f831cb718..c68f0e0416 100644 --- a/.kiro/README.md +++ b/.kiro/README.md @@ -37,8 +37,7 @@ stage. Seeded once from `ddt-agent-skills-library-foundry` and owned here. ```bash export JIRA_API_TOKEN=... # Jira/Confluence API token export CONFLUENCE_API_TOKEN=... # (same token is fine) - export JIRA_USERNAME="you@asu.edu" # Atlassian account; also used by the Jira v3 REST fallback - export CONFLUENCE_USERNAME="you@asu.edu" # usually the same as JIRA_USERNAME + export JIRA_USER="you@asu.edu" # used by the Jira v3 REST fallback # Unity package install auth (one of): export GITHUB_AUTH_TOKEN=... # GitHub Package Registry token for @asu packages # …or create .env.yarn with GITHUB_AUTH_TOKEN=... (see .env.yarn.example) diff --git a/.kiro/agents/acp-architect.json b/.kiro/agents/acp-architect.json index 356a48aded..951f11c3d1 100644 --- a/.kiro/agents/acp-architect.json +++ b/.kiro/agents/acp-architect.json @@ -6,7 +6,7 @@ "tools": ["fs_read", "fs_write", "execute_bash", "grep", "glob", "code"], "allowedTools": ["fs_read", "grep", "glob", "code"], "resources": [ - "file://../steering/**/*.md", + "file://.kiro/steering/**/*.md", "skill://.kiro/skills/office-hours/SKILL.md", "skill://.kiro/skills/architecture-lock/SKILL.md", "skill://.kiro/skills/jira-figma-intake/SKILL.md", diff --git a/.kiro/agents/acp-coder.json b/.kiro/agents/acp-coder.json index 7f638dbf9d..35b89fb733 100644 --- a/.kiro/agents/acp-coder.json +++ b/.kiro/agents/acp-coder.json @@ -6,7 +6,7 @@ "tools": ["fs_read", "fs_write", "execute_bash", "grep", "glob", "code"], "allowedTools": ["fs_read", "grep", "glob", "code", "execute_bash"], "resources": [ - "file://../steering/**/*.md", + "file://.kiro/steering/**/*.md", "skill://.kiro/skills/tdd-red-green/SKILL.md", "skill://.kiro/skills/review-fix-loop/SKILL.md", "skill://.kiro/skills/unity-components/SKILL.md", diff --git a/.kiro/agents/acp-orchestrator.json b/.kiro/agents/acp-orchestrator.json index 095c0f2c0e..dcb45fda8d 100644 --- a/.kiro/agents/acp-orchestrator.json +++ b/.kiro/agents/acp-orchestrator.json @@ -12,7 +12,7 @@ } }, "resources": [ - "file://../steering/**/*.md", + "file://.kiro/steering/**/*.md", "skill://.kiro/skills/adversarial-coding-pipeline/SKILL.md", "skill://.kiro/skills/jira-figma-intake/SKILL.md", "skill://.kiro/skills/unity-handoff-out/SKILL.md" diff --git a/.kiro/agents/acp-reviewer.json b/.kiro/agents/acp-reviewer.json index 0e41acfd93..67b1f09a96 100644 --- a/.kiro/agents/acp-reviewer.json +++ b/.kiro/agents/acp-reviewer.json @@ -6,7 +6,7 @@ "tools": ["fs_read", "execute_bash", "grep", "glob", "code"], "allowedTools": ["fs_read", "grep", "glob", "code", "execute_bash"], "resources": [ - "file://../steering/**/*.md", + "file://.kiro/steering/**/*.md", "skill://.kiro/skills/spec-compliance/SKILL.md", "skill://.kiro/skills/adversarial-review/SKILL.md", "skill://.kiro/skills/code-quality/SKILL.md", diff --git a/.kiro/agents/acp-visual.json b/.kiro/agents/acp-visual.json index ec531096e7..961a1f117d 100644 --- a/.kiro/agents/acp-visual.json +++ b/.kiro/agents/acp-visual.json @@ -12,7 +12,7 @@ } }, "resources": [ - "file://../steering/**/*.md", + "file://.kiro/steering/**/*.md", "skill://.kiro/skills/visual-diff/SKILL.md", "skill://.kiro/skills/asu-brand/SKILL.md", "skill://.kiro/skills/unity-components/SKILL.md", diff --git a/.kiro/settings/mcp.json b/.kiro/settings/mcp.json index fdc2c8fbcc..9e39b41aef 100644 --- a/.kiro/settings/mcp.json +++ b/.kiro/settings/mcp.json @@ -5,10 +5,10 @@ "args": ["mcp-atlassian", "--read-only"], "env": { "JIRA_URL": "https://asudev.jira.com", - "JIRA_USERNAME": "$JIRA_USERNAME", + "JIRA_USERNAME": "mlsamuel@asu.edu", "JIRA_API_TOKEN": "$JIRA_API_TOKEN", "CONFLUENCE_URL": "https://asudev.jira.com/wiki", - "CONFLUENCE_USERNAME": "$CONFLUENCE_USERNAME", + "CONFLUENCE_USERNAME": "mlsamuel@asu.edu", "CONFLUENCE_API_TOKEN": "$CONFLUENCE_API_TOKEN", "READ_ONLY_MODE": "true" } diff --git a/.kiro/skills/architecture-lock/SKILL.md b/.kiro/skills/architecture-lock/SKILL.md index 4aa4d3ff34..fd63ccb039 100644 --- a/.kiro/skills/architecture-lock/SKILL.md +++ b/.kiro/skills/architecture-lock/SKILL.md @@ -52,24 +52,6 @@ Auth/authz requirements, input validation boundaries, data exposure risks, trust ### 7. Performance Considerations Expected load, bottleneck analysis, caching strategy, resource limits. -### 8. Behavioral Matrix (Interactive Components) - -For components with user interaction (carousels, tabs, accordions, card stacks, etc.), define: - -| User Action | Current State | Next State | Visual Change | Animation | -|-------------|---------------|------------|---------------|-----------|| -| Click card N | Card M active | Card N active | Card N moves to front | translateX transitions | -| ArrowLeft | Card N active | Card N-1 active (clamped) | Previous card moves to front | 0.3s ease-out | -| ArrowRight | Card N active | Card N+1 active (clamped) | Next card moves to front | 0.3s ease-out | - -**Positioning Formula** (for fanned/stacked layouts): -- `offset = index - activeIndex` -- `translateX = offset * spacing` (e.g., 60px) -- `rotation = offset * angle` (e.g., 8deg) -- `zIndex = totalCards - Math.abs(offset)` - -This prevents ambiguity in implementation — the coder should not have to guess behavioral intent. - ## Lock Protocol 1. Present design document to human for approval diff --git a/.kiro/skills/asu-design-a11y/SKILL.md b/.kiro/skills/asu-design-a11y/SKILL.md index 3eace7e7ec..e12c10a088 100644 --- a/.kiro/skills/asu-design-a11y/SKILL.md +++ b/.kiro/skills/asu-design-a11y/SKILL.md @@ -78,33 +78,6 @@ Prefer native HTML over ARIA; add ARIA only when necessary. People-first, respectful language in all user-facing text; follow ASU Inclusion guidelines. No stereotypes about ability/cognition/experience. -## Accessibility Requirements Template (for Design Doc) - -The architect MUST include this section in `.pipeline/design-doc.md` for any interactive component: - -```markdown -## Accessibility Requirements - -### Keyboard Navigation -- Tab order: [describe which elements receive focus in what order] -- Arrow keys: [what ArrowLeft/Right/Up/Down do when focused] -- Enter/Space: [activation behavior] -- Escape: [dismiss behavior if applicable] - -### Focus Management -- Pattern: [roving tabindex / aria-activedescendant / standard] -- Focus moves to: [where focus goes after interaction] - -### Screen Reader -- Live region: [what is announced on state change] -- Labels: [aria-label pattern for each interactive element] - -### Motion -- Reduced motion: [how component adapts to prefers-reduced-motion] -``` - -Failure to specify these leads to implementation guesswork and review rework. - ## Pre-delivery checklist (verify explicitly) Landmarks + one `h1`; keyboard operable + visible focus + no traps + skip link; diff --git a/.kiro/skills/code-quality/SKILL.md b/.kiro/skills/code-quality/SKILL.md index 1e585f95bd..1812d9fa20 100644 --- a/.kiro/skills/code-quality/SKILL.md +++ b/.kiro/skills/code-quality/SKILL.md @@ -43,26 +43,6 @@ Evaluate structural quality, maintainability, and engineering standards. - Could a function parameter, adapter, fake, or temp resource be simpler than a new interface? - Do tests verify observable behavior rather than implementation choreography? -### 8. CSS Invariants - -For components with critical layout properties, verify: - -- **Position dependencies documented**: If `position: absolute` is required for stacking, a comment explains why and warns against removal. -- **No conflicting properties**: Adding `display: flex` to an absolutely positioned element can break layout. -- **Invariant comments**: Critical CSS should have: - ```css - /* INVARIANT: position: absolute required for z-index stacking. - Do not change to relative or remove without updating JS transforms. */ - .card { - position: absolute; - } - ``` - -### CSS Invariant Checklist -- [ ] Critical positioning properties have invariant comments -- [ ] No conflicting display/position combinations introduced -- [ ] Changes to layout CSS verified visually before commit - ## Output Format ``` diff --git a/.kiro/skills/jira-figma-intake/SKILL.md b/.kiro/skills/jira-figma-intake/SKILL.md index 3e4ca6aa92..bb4fc4a027 100644 --- a/.kiro/skills/jira-figma-intake/SKILL.md +++ b/.kiro/skills/jira-figma-intake/SKILL.md @@ -35,9 +35,9 @@ Fetch the **specific issue by key** — do not rely on search. unreliable and can silently return empty — an empty result is NOT proof of "no match". If a by-key fetch comes back empty or errors, fall back to the Jira v3 REST API by key: - `curl -s -u "$JIRA_USERNAME:$JIRA_API_TOKEN" -H "Accept: application/json" \ + `curl -s -u "$JIRA_USER:$JIRA_API_TOKEN" -H "Accept: application/json" \ "https://asudev.jira.com/rest/api/3/issue/?fields=summary,description,issuetype,status,labels"` - (`JIRA_USERNAME` / `JIRA_API_TOKEN` come from the environment — never hardcode + (`JIRA_USER` / `JIRA_API_TOKEN` come from the environment — never hardcode credentials in this repo.) ## Figma intake (Dev Mode MCP) diff --git a/.kiro/skills/qa-verification/SKILL.md b/.kiro/skills/qa-verification/SKILL.md index ef95924de7..125f07bc71 100644 --- a/.kiro/skills/qa-verification/SKILL.md +++ b/.kiro/skills/qa-verification/SKILL.md @@ -25,42 +25,6 @@ If a full suite is too slow or unavailable, report: command not run, reason, ris 2. Did any previously passing tests break (regressions)? 3. Do error conditions produce correct results? -## Browser Interaction Testing (Interactive Components) - -For components with user interaction, QA verification includes browser-based testing via Chrome DevTools MCP or agent-browser: - -### Required Verifications - -1. **Click Navigation** - - Click each interactive element - - Screenshot each resulting state - - Verify state matches Behavioral Matrix from design doc - -2. **Keyboard Navigation** - - Tab into component, verify focus lands correctly - - ArrowLeft/Right through all items - - Verify focus ring visible on active element - - Tab out, verify exit to correct element - -3. **Mobile/Touch** - - Resize to 375×667 (iPhone SE) - - Verify layout adapts (scroll vs stack) - - Test swipe gestures if applicable - -4. **Accessibility Audit** - - Run `mcp_chrome_devtoo_lighthouse_audit` with mode="snapshot" - - Verify Accessibility score ≥ 95 (ideally 100) - - Document any issues - -### Evidence Required -``` -## Browser Interaction Results -- Click navigation: [PASS/FAIL with screenshot paths] -- Keyboard navigation: [PASS/FAIL with test sequence] -- Mobile layout: [PASS/FAIL at 375px] -- Lighthouse a11y: [score] -``` - ## Output PASS or FAIL with specific test results and evidence. diff --git a/.kiro/skills/unity-components/SKILL.md b/.kiro/skills/unity-components/SKILL.md index 6d91b08eb7..9827d53c05 100644 --- a/.kiro/skills/unity-components/SKILL.md +++ b/.kiro/skills/unity-components/SKILL.md @@ -80,21 +80,9 @@ present? Can interactive states be reproduced by toggling classes?" - Preserve `trackGAEvent` / `GaEventWrapper` (push to `window.dataLayer`) when editing existing components. -### JSDoc types must be catharsis-parseable (docs build gotcha) - -`yarn build` runs a `docs` target (`jsdoc-to-markdown`) across packages. JSDoc -`@property`/`@param`/`@typedef` **type expressions** must use JSDoc/catharsis -syntax, NOT TypeScript arrow types. A TS callback type like -`{(index: number, paneData: Pane) => void}` fails the docs build with -`JSDOC_ERROR: Unable to parse a tag's type expression`. Use either: -- closure style: `{function(number, Pane): void}`, or -- a `@callback` typedef referenced by name. -This applies to shared `*-types.js` files even under `// @ts-check`. - ## Validators (run before reporting done) -- `yarn build` — builds packages (also runs lint **and the `docs` target**). - `unity-react-core` builds first. Watch for `JSDOC_ERROR` from bad type syntax. +- `yarn build` — builds packages (also runs lint). `unity-react-core` builds first. - `yarn eslint` / `yarn stylelint` for the package. - `run-story-tests` (Storybook MCP) — interaction + a11y. - HTML-parity: confirm the HTML-addon snapshot matches the React render. diff --git a/.kiro/skills/visual-diff/SKILL.md b/.kiro/skills/visual-diff/SKILL.md index 42a43f836b..0ce2de4af7 100644 --- a/.kiro/skills/visual-diff/SKILL.md +++ b/.kiro/skills/visual-diff/SKILL.md @@ -15,19 +15,6 @@ spec/QA (that is the structural reviewer's job). (Figma Dev Mode MCP, if available). - Intended tokens — `.pipeline/design-doc.md` + the `asu-brand` skill. -## Pre-Implementation Visual Analysis (Optional) - -Before code is written, the visual agent can analyze `.intake/` references to extract positioning constraints for the architect: - -1. **Identify layout pattern**: grid, flex, absolute positioning, stacking -2. **Measure spacing**: card gaps, offsets, rotations from reference -3. **Document states**: which visual states are shown (active, hover, stacked) -4. **Extract formulas**: "cards appear to fan with ~60px horizontal offset and ~8° rotation per index" - -Output to `.pipeline/visual-analysis.md` for architect to incorporate into the Behavioral Matrix. - -This reduces "it doesn't look like the design" rework after implementation. - ## Capture the build (agent-browser) `agent-browser` drives Chrome via CDP. Install: `npm i -g agent-browser` then diff --git a/packages/app-degree-pages/CHANGELOG.md b/packages/app-degree-pages/CHANGELOG.md index 7d16c85a4b..75355e3404 100644 --- a/packages/app-degree-pages/CHANGELOG.md +++ b/packages/app-degree-pages/CHANGELOG.md @@ -1,5 +1,4 @@ -# [@asu/app-degree-pages-v3.2.2](https://github.com/asu/asu-unity-stack/compare/@asu/app-degree-pages-v3.2.1...@asu/app-degree-pages-v3.2.2) (2026-07-07) - +# [@asu/app-degree-pages-v3.2.1](https://github.com/asu/asu-unity-stack/compare/@asu/app-degree-pages-v3.2.0...@asu/app-degree-pages-v3.2.1) (2026-06-18) ### Bug Fixes @@ -7,12 +6,6 @@ * **app-degree-pages:** render plain text instead of empty link for edge case degrees ([944cd7b](https://github.com/asu/asu-unity-stack/commit/944cd7b6efad91da32ee11522083da8a1305c4af)) * **app-degree-pages:** use DOMAIN_URL constant here ([c158f99](https://github.com/asu/asu-unity-stack/commit/c158f999c48f515172aca150465e7abe3bbb4cf4)) -# [@asu/app-degree-pages-v3.2.1](https://github.com/asu/asu-unity-stack/compare/@asu/app-degree-pages-v3.2.0...@asu/app-degree-pages-v3.2.1) (2026-06-18) - - -### Bug Fixes - -* **app-degree-pages:** bumps @vitest/browser from 4.1.6 to 4.1.9 ([e3ae108](https://github.com/asu/asu-unity-stack/commit/e3ae1087d3edb84ee7451e74aab8845847700c84)) # [@asu/app-degree-pages-v3.2.0](https://github.com/asu/asu-unity-stack/compare/@asu/app-degree-pages-v3.1.5...@asu/app-degree-pages-v3.2.0) (2026-05-21) diff --git a/packages/component-header-footer/CHANGELOG.md b/packages/component-header-footer/CHANGELOG.md index 1fb9f19b32..bd9321d19d 100644 --- a/packages/component-header-footer/CHANGELOG.md +++ b/packages/component-header-footer/CHANGELOG.md @@ -1,29 +1,3 @@ -# [@asu/component-header-footer-v1.4.5](https://github.com/asu/asu-unity-stack/compare/@asu/component-header-footer-v1.4.4...@asu/component-header-footer-v1.4.5) (2026-07-06) - - -### Bug Fixes - -* **component-header-footer:** fix arbitrary timeout in header submit function ([05367b9](https://github.com/asu/asu-unity-stack/commit/05367b98afaab13c8e88f460816f47c88071f962)) - -# [@asu/component-header-footer-v1.4.4](https://github.com/asu/asu-unity-stack/compare/@asu/component-header-footer-v1.4.3...@asu/component-header-footer-v1.4.4) (2026-07-01) - - -### Bug Fixes - -* **component-header-footer:** adjust layout add dropdown examples ([07b980c](https://github.com/asu/asu-unity-stack/commit/07b980cdeef62e97669567b604960e06dffd6467)) -* **component-header-footer:** col divider bg fix ([cbc8216](https://github.com/asu/asu-unity-stack/commit/cbc82164b8be4b7561f1c0eb5861040e23b4b6ea)) -* **component-header-footer:** col divider bg fix ([85b69be](https://github.com/asu/asu-unity-stack/commit/85b69be51fec920106251dfc15d26a8ce20f53ba)) -* **component-header-footer:** col divider bg fix ([4dbe1ac](https://github.com/asu/asu-unity-stack/commit/4dbe1ac1a3814be49187b87238e40e5b35b029b6)) -* **component-header-footer:** col divider bg fix ([ffd1bef](https://github.com/asu/asu-unity-stack/commit/ffd1bef442043a6979b99e6d0ee32894c578a5c4)) - -# [@asu/component-header-footer-v1.4.3](https://github.com/asu/asu-unity-stack/compare/@asu/component-header-footer-v1.4.2...@asu/component-header-footer-v1.4.3) (2026-05-28) - - -### Bug Fixes - -* **component-header-footer:** check undefined ([401b606](https://github.com/asu/asu-unity-stack/commit/401b606413eaf8f150cc4c0be7a0dae0f0d204e1)) -* **component-header-footer:** fix animated header option ([267968e](https://github.com/asu/asu-unity-stack/commit/267968e21fed4285c455ec0ad7604f0b571bd72f)) - # [@asu/component-header-footer-v1.4.2](https://github.com/asu/asu-unity-stack/compare/@asu/component-header-footer-v1.4.1...@asu/component-header-footer-v1.4.2) (2026-05-21) diff --git a/packages/component-header-footer/package.json b/packages/component-header-footer/package.json index 52e7c1cf93..d5f9e9faf8 100644 --- a/packages/component-header-footer/package.json +++ b/packages/component-header-footer/package.json @@ -1,6 +1,6 @@ { "name": "@asu/component-header-footer", - "version": "1.4.5", + "version": "1.4.2", "description": "ASU Global Header and Footer", "main": "./dist/asuHeaderFooter.cjs.js", "browser": "./dist/asuHeaderFooter.umd.js", diff --git a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js index 73bddd1078..dd29bd3661 100644 --- a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js +++ b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js @@ -58,7 +58,7 @@ const Search = () => { // Fallback: always submit within 2s regardless of GTM state. Useful for // cases where GTM fails to load or execute for any reason, or if the user - // has blocked GTM. This will only be called if there are any adblockers or analytics blockers. + // has blocked GTM. setTimeout(submit, 2000); trackGAEvent({ diff --git a/packages/component-header-footer/test-results/.last-run.json b/packages/component-header-footer/test-results/.last-run.json deleted file mode 100644 index cbcc1fbac1..0000000000 --- a/packages/component-header-footer/test-results/.last-run.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "status": "passed", - "failedTests": [] -} \ No newline at end of file diff --git a/packages/unity-bootstrap-theme/src/js/card-bodies.js b/packages/unity-bootstrap-theme/src/js/card-bodies.js index 685379c5db..b442c06d47 100644 --- a/packages/unity-bootstrap-theme/src/js/card-bodies.js +++ b/packages/unity-bootstrap-theme/src/js/card-bodies.js @@ -25,7 +25,7 @@ function initCardBodies() { cardBodies.forEach((cardBody, index) => { const paragraph = cardBody.querySelector("div p"); - const originalText = paragraph.textContent; + const originalText = paragraph?.textContent ?? ""; const style = window.getComputedStyle(cardBody); // Get the number of lines allowed (line clamp), usually set via CSS like -webkit-line-clamp @@ -44,7 +44,11 @@ function initCardBodies() { const maxHeight = lineClamp * actualLineHeight; // Check if the paragraph exceeds the maximum allowed height - if (paragraph.offsetHeight >= maxHeight) { + if ( + paragraph && + paragraph.offsetHeight && + paragraph.offsetHeight >= maxHeight + ) { let visibleText = ""; const words = originalText.split(" "); let visibleWordCount = 0; diff --git a/packages/unity-react-core/.storybook/decorators.tsx b/packages/unity-react-core/.storybook/decorators.tsx index d745b5f526..8308b03839 100644 --- a/packages/unity-react-core/.storybook/decorators.tsx +++ b/packages/unity-react-core/.storybook/decorators.tsx @@ -75,7 +75,7 @@ export const withContainer: Decorator = ( window.unloading = true; // variable to prevent calling mount function before the page is reloaded // adding this timeout allows controls time to update - setTimeout(()=>{window.location.reload()}, 100); + setTimeout(()=>{window.location.reload()}, 500); } } diff --git a/packages/unity-react-core/src/components/Article/Article.jsx b/packages/unity-react-core/src/components/Article/Article.jsx index a7c2fba119..71958b4179 100644 --- a/packages/unity-react-core/src/components/Article/Article.jsx +++ b/packages/unity-react-core/src/components/Article/Article.jsx @@ -119,7 +119,7 @@ export const Article = ({

Share this event:

@@ -131,7 +131,7 @@ export const Article = ({ /> @@ -143,7 +143,7 @@ export const Article = ({ /> @@ -181,11 +181,8 @@ export const Article = ({ Location: - {eventLocation && ( -
- )} + {} +
{registrationUrl && zoomUrl && Attend on Zoom}
); diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx index e0da884a8e..a310abcb07 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.jsx @@ -86,6 +86,7 @@ const CardCarousel = ({ width = undefined, maxWidth = undefined, imageAutoSize = true, + bgColor = "", }) => { const perView = parseInt(`${perViewProp}`, 10); const [currentPerView, setCurrentPerView] = useState(perView); @@ -141,7 +142,11 @@ const CardCarousel = ({ hasNavButtons={activateGlideActions} isDraggable={activateGlideActions} hasShadow - /> + bgColor={bgColor} + CustomNavComponent={undefined} + role={undefined} + ariaLabelledBy={undefined} + isFullWidth={undefined} /> ); }; @@ -167,6 +172,7 @@ CardCarousel.propTypes = { width: PropTypes.string, maxWidth: PropTypes.string, imageAutoSize: PropTypes.bool, + bgColor: PropTypes.string, }; export { CardCarousel }; diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx index 5a9b83aaf7..2fecb55649 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/CardCarousel/CardCarousel.stories.jsx @@ -4,10 +4,28 @@ import React from "react"; import { cardCarouselItems } from "../../../../../__mocks__/data/props-mock"; import { CardCarousel } from "./CardCarousel"; +const cardCarouselBgColorClassName = { + "None": "", + "Gray 1": "gray-faint-bg", + "Gray 2": "gray-light-bg", + "Gray 7": "gray-dark-bg" +}; + export default { title: "Components/Card Carousel", component: CardCarousel, - parameters: { controls: { disable: true } }, + parameters: { /*controls: { disable: true }*/ }, + argTypes: { + bgColor: { + name: "Background color of the section", + description: + "Background color is not applied to the component, but to the section wrapper.", + options: Object.keys(cardCarouselBgColorClassName), + control: { + type: "radio", + }, + }, + }, globals: { framework: "react", }, @@ -21,14 +39,16 @@ export default { */ const Wrapper = ({ children }) =>
{children}
; -export const ThreeItemCarousel = () => ( +export const ThreeItemCarousel = ({ bgColor }) => ( - + ); -export const TwoItemCarousel = () => ( +export const TwoItemCarousel = ({ bgColor }) => ( - + ); diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx index 1d7fe9cc58..f417303d36 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx @@ -67,7 +67,7 @@ const htmlTemplate = ({ id, imageSource, imageAltText, title, content }) => ({ /** * @param {ImageCarouselType} props - * @returns { JSX.Element } + * @returns { JSX.Element | null } */ const ImageCarousel = ({ perView: perViewProp = 0, @@ -75,6 +75,7 @@ const ImageCarousel = ({ width = undefined, maxWidth = undefined, imageAutoSize = true, + bgColor = "", }) => { if (!imageItems || imageItems.length === 0) { return null; @@ -95,7 +96,12 @@ const ImageCarousel = ({ hasPositionIndicators={activateGlideActions} hasNavButtons={activateGlideActions} isDraggable={activateGlideActions} + bgColor={bgColor} hasShadow + CustomNavComponent={undefined} + role={undefined} + ariaLabelledBy={undefined} + isFullWidth={undefined} /> ); }; @@ -107,6 +113,7 @@ ImageCarousel.propTypes = { width: PropTypes.string, maxWidth: PropTypes.string, imageAutoSize: PropTypes.bool, + bgColor: PropTypes.string, }; export { ImageCarousel, htmlTemplate }; diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx index a51c750b32..38335dbcfa 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.stories.jsx @@ -4,6 +4,13 @@ import React from "react"; import { imageCarouselItems } from "../../../../../__mocks__/data/props-mock"; import { ImageCarousel } from "./ImageCarousel"; +const cardCarouselBgColorClassName = { + "None": "", + "Gray 1": "gray-faint-bg", + "Gray 2": "gray-light-bg", + "Gray 7": "gray-dark-bg" +}; + const mockItemWithContent = () => imageCarouselItems.map(item => ({ ...item, @@ -43,18 +50,30 @@ export default { perView: { control: { type: "range", min: 1, max: 3, step: 1 }, }, + bgColor: { + name: "Background color of the section", + description: + "Background color is not applied to the component, but to the section wrapper.", + options: Object.keys(cardCarouselBgColorClassName), + control: { + type: "radio", + }, + }, }, + parameters: { /*controls: { disable: true }*/ }, }; const maxWidth = "800px"; // const maxHeight = "600px"; /** - * @param {{ imageItems: Array, perView: number}} props + * @param {{ imageItems: Array, perView: number, bgColor: string}} props * @returns { JSX.Element} */ -const Wrapper = ({ imageItems, perView }) => ( +const Wrapper = ({ imageItems, perView, bgColor }) => (
( perView={perView} maxWidth={maxWidth} imageItems={imageItems} + // @ts-ignore + bgColor={cardCarouselBgColorClassName[bgColor]} />
); diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/TestimonialCarousel/TestimonialCarousel.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/TestimonialCarousel/TestimonialCarousel.jsx index 334e6c1a5c..bd2a014049 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/components/TestimonialCarousel/TestimonialCarousel.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/components/TestimonialCarousel/TestimonialCarousel.jsx @@ -43,8 +43,8 @@ const htmlTemplate = ( id, item: ( diff --git a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx index 83216dce94..210a707c8f 100644 --- a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx +++ b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/components/BulletItems.jsx @@ -41,10 +41,10 @@ BaseBulletItemContainer.propTypes = { /** * - * @param {{ buttonCount: number }} props + * @param {{ buttonCount: number, buttonTheme?: string }} props * @returns { JSX.Element } */ -const BulletItems = ({ buttonCount }) => { +const BulletItems = ({ buttonCount, buttonTheme = '' }) => { // Build out bullets markup based on buttonCount. const bulletItems = []; for (let i = 0; i < buttonCount; i += 1) { @@ -52,7 +52,7 @@ const BulletItems = ({ buttonCount }) => {