@spaced-out/ui-design-system 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.6](https://github.com/spaced-out/ui-design-system/compare/v0.3.5...v0.3.6) (2024-11-27)
+
+
+### Bug Fixes
+
+* added role=group for weekdayPicker ([#294](https://github.com/spaced-out/ui-design-system/issues/294)) ([bf61f70](https://github.com/spaced-out/ui-design-system/commit/bf61f7034a557b7adee858be10f990aed93d6b50))
+
+### [0.3.5](https://github.com/spaced-out/ui-design-system/compare/v0.3.4...v0.3.5) (2024-11-27)
+
+
+### Features
+
+* [GDS-445, GDS-467] Add 'description' prop to TimelineItem component and pass event as second argument in checkbox onChange handler ([#290](https://github.com/spaced-out/ui-design-system/issues/290)) ([f8e234b](https://github.com/spaced-out/ui-design-system/commit/f8e234bcb3d8dcd9b1a619aa90678fe21678f937))
+* weekdayname inside weekday picker ([#293](https://github.com/spaced-out/ui-design-system/issues/293)) ([ccdc996](https://github.com/spaced-out/ui-design-system/commit/ccdc996edff4f5775723f3226e938761aaf6da8c))
+
 ### [0.3.4](https://github.com/spaced-out/ui-design-system/compare/v0.3.3...v0.3.4) (2024-11-22)
 
 

package/lib/components/Checkbox/Checkbox.js

@@ -30,12 +30,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   } = _ref;
   const checkboxInput = /*#__PURE__*/React.createRef();
   React.useImperativeHandle(forwardRef, () => checkboxInput.current);
-  const handleOnClick = () => {
+  const handleOnClick = event => {
     if (!disabled) {
       onChange && onChange({
         value,
         checked: !checked
-      });
+      }, event);
     }
   };
   React.useEffect(() => {

package/lib/components/Checkbox/Checkbox.js.flow

@@ -29,7 +29,10 @@ export type CheckboxProps = {
   focused?: boolean,
   disabled?: boolean,
   error?: boolean,
-  onChange?: ({value: string, checked: boolean}) => mixed,
+  onChange?: (
+    {value: string, checked: boolean},
+    ?SyntheticEvent<HTMLElement>,
+  ) => mixed,
   align?: GroupAlign,
   classNames?: ClassNames,
   tabIndex?: number,
@@ -61,13 +64,16 @@ export const Checkbox: React$AbstractComponent<
     const checkboxInput = React.createRef<HTMLInputElement>();
     React.useImperativeHandle(forwardRef, () => checkboxInput.current);
 
-    const handleOnClick = () => {
+    const handleOnClick = (event) => {
       if (!disabled) {
         onChange &&
-          onChange({
-            value,
-            checked: !checked,
-          });
+          onChange(
+            {
+              value,
+              checked: !checked,
+            },
+            event,
+          );
       }
     };
 

package/lib/components/Timeline/Timeline.module.css

@@ -80,15 +80,22 @@
   flex-direction: column;
   margin-bottom: spaceMedium;
 
-  & .timelineItemTitle {
-    justify-content: var(--justify);
+  & .timelineItemInfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: var(--align);
+    min-height: size26;
   }
 }
 
 .timelineItemTitle {
+  composes: bodyMedium from '../../styles/typography.module.css';
+}
+
+.timelineItemDescription {
   composes: bodySmall from '../../styles/typography.module.css';
   composes: secondary from '../../styles/typography.module.css';
-  min-height: size26;
 }
 
 .timelineItemCardWrapper {

package/lib/components/Timeline/TimelineItem/TimelineItem.js

@@ -25,6 +25,7 @@ const TimelineItem_ = (_ref, ref) => {
     children,
     iconColor = _typography.TEXT_COLORS.information,
     classNames,
+    description,
     orientation = _Timeline.ORIENTATION.left,
     parentComponent,
     enableCardWrapper = true
@@ -56,13 +57,14 @@ const TimelineItem_ = (_ref, ref) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: _TimelineModule.default.border
   }))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      '--justify': orientation === 'left' ? 'flex-start' : 'flex-end'
-    },
     className: _TimelineModule.default.timelineItemEventDetails
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TimelineModule.default.timelineItemInfo
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_TimelineModule.default.timelineItemTitle, classNames?.title)
-  }, title), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+  }, title), description ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_TimelineModule.default.timelineItemDescription, classNames?.description)
+  }, description) : null), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: enableCardWrapper,
     wrapper: children => /*#__PURE__*/React.createElement(_Card.Card, {
       paddingTop: _Card.PADDING_SIZES.small,

package/lib/components/Timeline/TimelineItem/TimelineItem.js.flow

@@ -19,6 +19,7 @@ type ClassNames = $ReadOnly<{
   icon?: string,
   title?: string,
   wrapper?: string,
+  description?: string,
 }>;
 
 export type TimelineItemProps = {
@@ -29,6 +30,7 @@ export type TimelineItemProps = {
   iconType?: IconType,
   iconColor?: ColorTypes,
   classNames?: ClassNames,
+  description?: React.Node,
   orientation?: Orientation,
   parentComponent?: React.Node,
   enableCardWrapper?: boolean,
@@ -43,6 +45,7 @@ const TimelineItem_ = (
     children,
     iconColor = TEXT_COLORS.information,
     classNames,
+    description,
     orientation = ORIENTATION.left,
     parentComponent,
     enableCardWrapper = true,
@@ -78,14 +81,21 @@ const TimelineItem_ = (
           <div className={css.border} />
         </div>
       </div>
-      <div
-        style={{
-          '--justify': orientation === 'left' ? 'flex-start' : 'flex-end',
-        }}
-        className={css.timelineItemEventDetails}
-      >
-        <div className={classify(css.timelineItemTitle, classNames?.title)}>
-          {title}
+      <div className={css.timelineItemEventDetails}>
+        <div className={css.timelineItemInfo}>
+          <div className={classify(css.timelineItemTitle, classNames?.title)}>
+            {title}
+          </div>
+          {description ? (
+            <div
+              className={classify(
+                css.timelineItemDescription,
+                classNames?.description,
+              )}
+            >
+              {description}
+            </div>
+          ) : null}
         </div>
         <ConditionalWrapper
           condition={enableCardWrapper}

package/lib/components/WeekdayPicker/WeekdayPicker.js

@@ -63,7 +63,12 @@ const DayButton = _ref => {
     "aria-label": `Select ${day.label}`,
     tabIndex: isDisabled || readOnly ? -1 : 0,
     role: "checkbox"
-  }, day.label);
+  }, day.secondaryLabel && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_WeekdayPickerModule.default.secondaryLabel, {
+      [_WeekdayPickerModule.default.secondaryLabelSelected]: isSelected,
+      [_WeekdayPickerModule.default.secondaryLabelDisabled]: isDisabled
+    })
+  }, day.secondaryLabel), day.label);
 };
 const WeekdayPicker = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
@@ -110,7 +115,8 @@ const WeekdayPicker = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayPickerContainer, classNames.wrapper, {
       [_WeekdayPickerModule.default.weekdayReadOnly]: readOnly
     }),
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    role: "group"
   }, !!label && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayLabel, classNames.label)
   }, label), /*#__PURE__*/React.createElement("div", {

package/lib/components/WeekdayPicker/WeekdayPicker.js.flow

@@ -36,6 +36,7 @@ type WeekdayPickerSize = $Values<typeof WEEKDAY_PICKER_SIZE>;
 type Weekday = {
   key: string,
   label: string,
+  secondaryLabel?: string,
 };
 
 export type WeekdayPickerProps = {
@@ -94,6 +95,16 @@ const DayButton = ({
     tabIndex={isDisabled || readOnly ? -1 : 0}
     role="checkbox"
   >
+    {day.secondaryLabel && (
+      <div
+        className={classify(css.secondaryLabel, {
+          [css.secondaryLabelSelected]: isSelected,
+          [css.secondaryLabelDisabled]: isDisabled,
+        })}
+      >
+        {day.secondaryLabel}
+      </div>
+    )}
     {day.label}
   </UnstyledButton>
 );
@@ -165,6 +176,7 @@ export const WeekdayPicker: React$AbstractComponent<
           [css.weekdayReadOnly]: readOnly,
         })}
         aria-label={ariaLabel}
+        role="group"
       >
         {!!label && (
           <div className={classify(css.weekdayLabel, classNames.label)}>

package/lib/components/WeekdayPicker/WeekdayPicker.module.css

@@ -1,5 +1,4 @@
-@value (
-  colorTextSecondary,
+@value (colorTextSecondary,
   colorFillSecondary,
   colorButtonFillTertiaryHovered,
   colorTextPrimary,
@@ -10,13 +9,12 @@
   colorFillDisabled,
   colorFocusPrimary,
   colorBackgroundSecondary,
-  colorGrayLightest
-) from '../../styles/variables/_color.css';
+  colorGrayLightest) from '../../styles/variables/_color.css';
 
-@value (spaceXXSmall,spaceXSmall,spaceSmall) from '../../styles/variables/_space.css';
-@value (size42,size34) from '../../styles/variables/_size.css';
+@value (spaceXXSmall, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+@value (size8, size42, size34) from '../../styles/variables/_size.css';
 
-@value (borderRadiusSmall,borderWidthNone,borderWidthTertiary) from '../../styles/variables/_border.css';
+@value (borderRadiusSmall, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
 
 .weekdayPickerContainer {
   display: flex;
@@ -32,6 +30,7 @@
 .weekdayButton {
   composes: formLabelSmall from '../../styles/typography.module.css';
   composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  flex-direction: column;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -63,6 +62,10 @@
   composes: buttonTextSmall from '../../styles/typography.module.css';
   height: size34;
   width: size34;
+
+  .secondaryLabel {
+    font-size: size8;
+  }
 }
 
 .weekdayButtonSelected {
@@ -73,6 +76,11 @@
   &:focus-visible {
     background-color: colorButtonFillPrimaryHovered;
     color: colorTextInversePrimary;
+
+    .secondaryLabel {
+      background-color: colorButtonFillPrimaryHovered;
+      color: colorTextInversePrimary;
+    }
   }
 }
 
@@ -83,6 +91,28 @@
   cursor: not-allowed;
 }
 
+.secondaryLabel {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+
+  /* Added a transition to .secondaryLabel for smoother and immediate style updates 
+   during hover or focus-visible states of .secondaryLabelSelected. This ensures the 
+   change feels intentional, even if there’s a minor rendering delay. */
+  transition: background-color 0.1s, color 0.1s, font-size 0.1s;
+}
+
+.secondaryLabelSelected {
+  background-color: colorButtonFillPrimaryEnabled;
+  color: colorTextInversePrimary;
+}
+
+.secondaryLabelDisabled {
+  background-color: colorFillDisabled;
+  color: colorTextDisabled;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
 .weekdayLabel {
   composes: formLabelSmall from '../../styles/typography.module.css';
   color: colorTextSecondary;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {