@arbor-education/design-system.components 4.2.0 → 4.4.0

package/src/components/widgetCalendar/widgetCalendar.scss

@@ -75,6 +75,30 @@
   background-color: var(--widget-calendar-type-secondary-color);
 }
 
+.ds-widget-calendar__item--destructive .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-destructive-color);
+}
+
+.ds-widget-calendar__item--caution .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-caution-color);
+}
+
+.ds-widget-calendar__item--info .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-info-color);
+}
+
+.ds-widget-calendar__item--warning .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-warning-color);
+}
+
+.ds-widget-calendar__item--green .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-green-color);
+}
+
+.ds-widget-calendar__item--purple .ds-widget-calendar__content::before {
+  background-color: var(--widget-calendar-type-purple-color);
+}
+
 .ds-widget-calendar__details {
   margin: 0;
 }

package/src/docs/Contributing.mdx

@@ -225,6 +225,8 @@ Both are defined in `vitest.config.ts` as named Vitest projects (`unit` and `sto
 
 The Storybook project needs Playwright's Chromium browser installed locally the first time: `yarn playwright install chromium`. You can also run these tests interactively right here — click **Run Tests** in the bottom-left panel of this Storybook.
 
+Every story also runs axe-core accessibility checks scoped to WCAG 2.2 A/AA. Every story and component should meet WCAG 2.2 standards — violations surface as warnings in the test output, so address them when you touch the affected component rather than leaving them for someone else to find.
+
 ---
 
 ## Quality gates

package/src/tokens.scss

@@ -841,6 +841,12 @@
   --widget-calendar-type-bar-radius: var(--border-radius-xsmall);
   --widget-calendar-type-primary-color: var(--color-brand-500);
   --widget-calendar-type-secondary-color: var(--color-grey-300);
+  --widget-calendar-type-destructive-color: var(--color-semantic-destructive-500);
+  --widget-calendar-type-caution-color: var(--color-semantic-caution-500);
+  --widget-calendar-type-info-color: var(--color-semantic-info-500);
+  --widget-calendar-type-warning-color: var(--color-semantic-warning-500);
+  --widget-calendar-type-green-color: var(--color-ramp-gradient-sequential-500);
+  --widget-calendar-type-purple-color: var(--color-extended-colours-purple-500);
   --widget-calendar-color-title: var(--color-grey-900);
   --widget-list-row-hover-hover-bg: var(--color-grey-050);
   --widget-list-row-hover-color-icon-arrow: var(--color-grey-900);

package/src/utils/SlideoverUtils.ts

@@ -2,8 +2,11 @@ import type { SlideoverProps } from 'Components/slideover/Slideover';
 import { SLIDEOVER } from './Constants.js';
 import PubSub from './PubSub.js';
 
+// SlideoverManager cannot update a panel once added, so closing props would do nothing
+type ManagedSlideoverProps = Omit<SlideoverProps, 'isClosing' | 'onCloseTransitionEnd'>;
+
 export const SlideoverUtils = {
-  addSlideover: (slideoverConfig: SlideoverProps) => PubSub.publish(SLIDEOVER.ADD_SLIDEOVER, slideoverConfig),
+  addSlideover: (slideoverConfig: ManagedSlideoverProps) => PubSub.publish(SLIDEOVER.ADD_SLIDEOVER, slideoverConfig),
   removeSlideover: () => PubSub.publish(SLIDEOVER.REMOVE_SLIDEOVER),
   removeAllSlideovers: () => PubSub.publish(SLIDEOVER.REMOVE_ALL_SLIDEOVERS),
 };