@arbor-education/design-system.components 0.13.1 → 0.15.0

package/src/components/table/cellEditors/NumberCellEditor.tsx

@@ -0,0 +1,83 @@
+import { NumberInput } from 'Components/formField/inputs/number/NumberInput';
+import {
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react';
+
+export type NumberCellEditorProps = {
+  value: number | null | undefined;
+  onValueChange: (value: number | null) => void;
+  min: number;
+  max: number;
+  step: number;
+  disableSpinners: boolean;
+};
+
+const clampValue = (value: number, min: number, max: number) => (
+  Math.min(Math.max(value, min), max)
+);
+
+export const NumberCellEditor = (props: NumberCellEditorProps) => {
+  const {
+    value,
+    onValueChange,
+    min,
+    max,
+    step,
+    disableSpinners,
+  } = props;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const nextValue = event.currentTarget.value.trim();
+
+    if (nextValue === '') {
+      onValueChange(null);
+      return;
+    }
+
+    const parsedValue = Number(nextValue);
+
+    if (!Number.isNaN(parsedValue)) {
+      onValueChange(clampValue(parsedValue, min, max));
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    const rawValue = event.currentTarget.value.trim();
+
+    if (rawValue === '') {
+      onValueChange(null);
+      return;
+    }
+
+    const parsedValue = Number(rawValue);
+
+    if (!Number.isNaN(parsedValue)) {
+      onValueChange(clampValue(parsedValue, min, max));
+    }
+  };
+
+  return (
+    <div
+      className="ds-number-cell-editor__wrapper"
+    >
+      <NumberInput
+        containerClassName="ds-number-cell-editor__container"
+        defaultValue={value == null ? '' : String(value)}
+        autoFocus
+        min={min}
+        max={max}
+        step={step}
+        disableSpinners={disableSpinners}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      />
+    </div>
+  );
+};
+
+NumberCellEditor.displayName = 'NumberCellEditor';

package/src/components/table/cellEditors/numberCellEditor.scss

@@ -0,0 +1,11 @@
+.ds-number-cell-editor__wrapper {
+  height: 100%;
+}
+
+.ds-number-cell-editor__container {
+  height: 100%;
+
+  &:focus-within {
+    outline: none;
+  }
+}

package/src/components/table/table.scss

@@ -1,4 +1,15 @@
 .ds-table {
+  &--vertical-header-text {
+    .ag-header-cell-label .ag-header-cell-text {
+      writing-mode: vertical-rl; 
+      transform: rotate(180deg);
+      text-wrap: balance;
+      text-align: center;
+      flex-shrink: 0;
+      min-width: fit-content;
+    }
+  }
+
   &__select-dropdown-cell {
     width: 100%;
   }

package/src/index.scss

@@ -3,8 +3,10 @@
 @use "./global.scss";
 @use "components/button/button.scss";
 @use "components/icon/icon.scss";
+@use "components/icoText/icoText.scss";
 @use "components/heading/heading.scss";
 @use "components/card/card.scss";
+@use "components/articleCard/articleCard.scss";
 @use "components/dropdown/dropdown.scss";
 @use "components/formField/formField.scss";
 @use "components/formField/fieldset/fieldset.scss";
@@ -26,6 +28,7 @@
 @use "components/slideover/slideover.scss";
 @use "components/table/table.scss";
 @use "components/searchBar/searchBar.scss";
+@use "components/table/cellEditors/numberCellEditor.scss";
 @use "components/table/pagination/pagination.scss";
 @use "components/tooltip/tooltip.scss";
 @use "components/separator/separator.scss";
@@ -35,6 +38,8 @@
 @use "components/banner/banner.scss";
 @use "components/editableText/editableText.scss";
 @use "components/progress/progress.scss";
+@use "components/kpiCard/kpiCard.scss";
+@use "components/kvpList/kvpList.scss";
 @use "components/toast/toast.scss";
 @use "components/datePicker/datePicker.scss";
 @use "components/dateTimePicker/dateTimePicker.scss";

package/src/index.ts

@@ -1,15 +1,18 @@
+export { ArticleCard, type ArticleCardProps } from 'Components/articleCard/ArticleCard';
 export { Avatar } from 'Components/avatar/Avatar';
 export { AvatarGroup } from 'Components/avatarGroup/AvatarGroup';
 export { Badge } from 'Components/badge/Badge';
 export { Banner } from 'Components/banner/Banner';
 export { Button } from 'Components/button/Button';
-export { Card } from 'Components/card/Card';
+export { Card, type CardProps } from 'Components/card/Card';
 export { Combobox } from 'Components/combobox/Combobox';
 export { DatePicker } from 'Components/datePicker/DatePicker';
 export { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
 export { Dot } from 'Components/dot/Dot';
 export { Dropdown } from 'Components/dropdown/Dropdown';
 export { EditableText } from 'Components/editableText/EditableText';
+export { Fieldset } from 'Components/formField/fieldset/Fieldset';
+export { FormField } from 'Components/formField/FormField';
 export { CheckboxGroup } from 'Components/formField/inputs/checkbox/CheckboxGroup';
 export { CheckboxInput } from 'Components/formField/inputs/checkbox/CheckboxInput';
 export { ColourPickerDropdown } from 'Components/formField/inputs/colourPickerDropdown/ColourPickerDropdown';
@@ -18,12 +21,13 @@ export { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonG
 export { RadioButtonInput } from 'Components/formField/inputs/radio/RadioButtonInput';
 export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 export { TextInput } from 'Components/formField/inputs/text/TextInput';
-export { TimeInput } from 'Components/formField/inputs/time/TimeInput';
 export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
-export { Fieldset } from 'Components/formField/fieldset/Fieldset';
-export { FormField } from 'Components/formField/FormField';
+export { TimeInput } from 'Components/formField/inputs/time/TimeInput';
 export { Heading } from 'Components/heading/Heading';
 export { Icon } from 'Components/icon/Icon';
+export { IcoText, type IcoTextHeadingProps, type IcoTextIconProps, type IcoTextParagraphProps, type IcoTextProps } from 'Components/icoText/IcoText';
+export { KPICard, type KPICardProps } from 'Components/kpiCard/KPICard';
+export { KVPList, type KVPListDefinitionProps, type KVPListProps, type KVPListRowProps, type KVPListTermProps } from 'Components/kvpList/KVPList';
 export { Modal } from 'Components/modal/Modal';
 export { ModalManager } from 'Components/modal/modalManager/ModalManager';
 export { Pill } from 'Components/pill/Pill';
@@ -35,6 +39,12 @@ export { Separator } from 'Components/separator/Separator';
 export { SingleUser } from 'Components/singleUser/SingleUser';
 export { Slideover } from 'Components/slideover/Slideover';
 export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
+export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
+export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
+export { GridApiContext } from 'Components/table/GridApiContext';
+export { NumberCellEditor } from 'Components/table/cellEditors/NumberCellEditor';
+export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';
 export { Table } from 'Components/table/Table';
 export { Tabs } from 'Components/tabs/Tabs';
 export { Tag } from 'Components/tag/Tag';

package/src/tokens.scss

@@ -211,6 +211,12 @@
   --kpi-spacing-vertical: var(--spacing-large);
   --kpi-color-benchmark-text: var(--color-grey-500);
   --kpi-color-benchmark-text-bg: var(--color-grey-100);
+  --kvp-list-color-text-subtle: var(--color-grey-800);
+  --kvp-list-color-text-strong: var(--color-mono-black);
+  --ico-text-spacing-gap-horizontal: var(--spacing-large);
+  --ico-text-spacing-gap-vertical: var(--spacing-medium);
+  --kpi-card-color-text-label: var(--color-grey-800);
+  --kpi-card-color-text-value: var(--color-mono-black);
   --tag-radius: var(--border-radius-round);
   --tag-neutral-color-text: var(--color-grey-900);
   --tag-neutral-color-background: var(--color-grey-050);

package/tokens/json/Arbor.json

@@ -51,6 +51,36 @@
       "$value": "{color.grey.100}"
     }
   },
+  "kvp-list": {
+    "color-text-subtle": {
+      "$type": "color",
+      "$value": "{color.grey.800}"
+    },
+    "color-text-strong": {
+      "$type": "color",
+      "$value": "{color.mono.black}"
+    }
+  },
+  "ico-text": {
+    "spacing-gap-horizontal": {
+      "$type": "dimension",
+      "$value": "{spacing.large}"
+    },
+    "spacing-gap-vertical": {
+      "$type": "dimension",
+      "$value": "{spacing.medium}"
+    }
+  },
+  "kpi-card": {
+    "color-text-label": {
+      "$type": "color",
+      "$value": "{color.grey.800}"
+    },
+    "color-text-value": {
+      "$type": "color",
+      "$value": "{color.mono.black}"
+    }
+  },
   "tag": {
     "radius": {
       "$type": "borderRadius",