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

package/src/components/kvpList/KVPList.tsx

@@ -0,0 +1,109 @@
+import classNames from 'classnames';
+
+export type KVPListProps = React.HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode;
+};
+
+export type KVPListRowProps = React.HTMLAttributes<HTMLDListElement> & {
+  children?: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+};
+
+export type KVPListTermProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+};
+
+export type KVPListDefinitionProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+  isRow?: boolean;
+  isPercentage?: boolean;
+  prominence?: 'neutral' | 'strong';
+};
+
+const KVPListRoot = ({
+  children,
+  className,
+  role,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  ...rest
+}: KVPListProps): React.JSX.Element => (
+  <div
+    className={classNames('ds-kvp-list', className)}
+    role={role ?? (ariaLabel || ariaLabelledBy ? 'group' : undefined)}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledBy}
+    {...rest}
+  >
+    {children}
+  </div>
+);
+
+const KVPListRow = ({
+  children,
+  className,
+  orientation = 'vertical',
+  ...rest
+}: KVPListRowProps): React.JSX.Element => (
+  <dl
+    className={classNames(
+      'ds-kvp-list__row',
+      `ds-kvp-list__row--${orientation}`,
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </dl>
+);
+
+const KVPListTerm = ({
+  children,
+  className,
+  ...rest
+}: KVPListTermProps): React.JSX.Element => (
+  <dt className={classNames('ds-kvp-list__term', className)} {...rest}>
+    {children}
+  </dt>
+);
+
+const KVPListDefinition = ({
+  children,
+  className,
+  isRow = false,
+  isPercentage = false,
+  prominence = 'neutral',
+  ...rest
+}: KVPListDefinitionProps): React.JSX.Element => (
+  <dd
+    className={classNames(
+      'ds-kvp-list__description',
+      `ds-kvp-list__description--${prominence}`,
+      {
+        'ds-kvp-list__description--row': isRow,
+      },
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+    {isPercentage
+      ? (
+          <span className="ds-kvp-list__suffix">
+            %
+          </span>
+        )
+      : null}
+  </dd>
+);
+
+KVPListRoot.displayName = 'KVPList';
+KVPListRow.displayName = 'KVPList.Row';
+KVPListTerm.displayName = 'KVPList.Term';
+KVPListDefinition.displayName = 'KVPList.Definition';
+
+export const KVPList = Object.assign(KVPListRoot, {
+  Row: KVPListRow,
+  Term: KVPListTerm,
+  Definition: KVPListDefinition,
+});

package/src/components/kvpList/kvpList.scss

@@ -0,0 +1,64 @@
+.ds-kvp-list {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-medium);
+  box-sizing: border-box;
+}
+
+.ds-kvp-list__term,
+.ds-kvp-list__description {
+  margin: 0;
+  flex: 1;
+}
+
+.ds-kvp-list__term,
+.ds-kvp-list__description--neutral {
+  color: var(--kvp-list-color-text-subtle);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  line-height: var(--type-body-line-height);
+}
+
+.ds-kvp-list__description--strong {
+  color: var(--kvp-list-color-text-strong);
+  font-family: var(--type-headings-h2-family);
+  font-size: var(--type-headings-h2-size);
+  font-weight: var(--type-headings-h2-weight);
+  line-height: var(--type-headings-h2-line-height);
+}
+
+.ds-kvp-list__description--row {
+  flex-basis: 100%;
+  width: 100%;
+}
+
+.ds-kvp-list__suffix {
+  margin-left: var(--spacing-xsmall);
+  font: inherit;
+}
+
+.ds-kvp-list__description {
+  text-align: right;
+}
+
+.ds-kvp-list__row {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  gap: var(--spacing-small);
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    flex-wrap: wrap;
+    align-items: center;
+
+    .ds-kvp-list__description:not(.ds-kvp-list__description--row) {
+      flex: 0 0 auto;
+    }
+  }
+}

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";
@@ -35,6 +37,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,11 @@ 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 { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
+export { CheckboxCellRenderer } from 'Components/table/cellRenderers/CheckboxCellRenderer';
+export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
+export { GridApiContext } from 'Components/table/GridApiContext';
 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",