Merge pull request #221 from silinternational/feat/add-lowContrast-to-DataRowItem

add(DataTable): add lowContrast prop to DataRowItem

Author: hobbitronics

components/mdc/Datatable/DataRowItem.svelte

@@ -1,8 +1,32 @@
 <script>
+/**
+ * @prop {boolean}
+ * @description Whether the cell contains numeric data.
+ */
 export let numeric = false
+/**
+ * @prop {number}
+ * @description The number of columns the cell spans.
+ */
 export let colspan = 1
+/**
+ * @prop {boolean}
+ * @description Whether the cell has low contrast.
+ */
+export let lowContrast = false
 </script>
 
-<td class="mdc-data-table__cell {$$props.class || ''}" class:mdc-data-table__cell--numeric={numeric} {colspan}
-  ><slot /></td
+<style>
+.lowContrast {
+  color: var(--mdc-theme-text-secondary-on-light);
+}
+</style>
+
+<td
+  class="mdc-data-table__cell {$$props.class || ''}"
+  class:lowContrast
+  class:mdc-data-table__cell--numeric={numeric}
+  {colspan}
 >
+  <slot />
+</td>

index.d.ts

@@ -84,6 +84,7 @@ declare module '@silintl/ui-components' {
           numeric?: boolean
           colspan?: number
           class?: string
+          lowContrast?: boolean
         }
         export class Item extends SvelteComponentTyped<ItemProps> {}
       }

stories/DataRowItem.stories.svelte

@@ -5,6 +5,9 @@ import { copyAndModifyArgs } from './helpers.js'
 
 const args = {
   class: '', //only works for global classes
+  numeric: false,
+  colspan: 1,
+  lowContrast: false,
 }
 </script>
 
@@ -16,6 +19,8 @@ const args = {
 
 <Story name="Default" {args} />
 
-<Story name="Numberic" args={copyAndModifyArgs(args, { numeric: 'true' })} />
+<Story name="Numeric" args={copyAndModifyArgs(args, { numeric: 'true' })} />
+
+<Story name="LowContrast" args={copyAndModifyArgs(args, { lowContrast: 'true' })} />
 
 <Story name="Colspan 1" args={copyAndModifyArgs(args, { colspan: 1 })} />