@arbor-education/design-system.components 0.16.1 → 0.17.0

package/src/components/row/Row.tsx

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
-import type { MouseEvent, MouseEventHandler } from 'react';
+import type { CSSProperties, MouseEvent, MouseEventHandler } from 'react';
 import { ENTER_KEY, SPACE_KEY } from 'Utils/keyboardConstants';
 
 export type RowProps = {
   className?: string;
+  style?: CSSProperties;
   label?: string;
   value?: string;
   note?: string;
@@ -14,6 +15,7 @@ export type RowProps = {
 export const Row = (props: RowProps) => {
   const {
     className,
+    style,
     label,
     value,
     note,
@@ -31,6 +33,7 @@ export const Row = (props: RowProps) => {
         },
         className,
       )}
+      style={style}
       onClick={onClick}
       onKeyDown={(e) => {
         if (isClickable && [ENTER_KEY, SPACE_KEY].includes(e.key)) {

package/src/components/row/row.scss

@@ -47,15 +47,23 @@
   }
 
   &__label {
-    min-width: 190px;
+    flex-basis: 30%;
+    max-width: 190px;
     font-weight: var(--font-weight-semi-bold);
   }
 
   &__value {
     flex-grow: 1;
+    flex-basis: 70%;
+
+    &:has(+ .ds-row__note) {
+      flex-basis: 50%;
+    }
   }
 
   &__note {
     font-style: italic;
+    flex-basis: 20%;
+    text-align: right;
   }
 }