@spaced-out/ui-design-system 0.1.87-beta.0 → 0.1.87

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.1.87](https://github.com/spaced-out/ui-design-system/compare/v0.1.87-beta.0...v0.1.87) (2024-04-24)
+
+
+### Features
+
+* adding autoFit gridType in grid ([#193](https://github.com/spaced-out/ui-design-system/issues/193)) ([a339f4c](https://github.com/spaced-out/ui-design-system/commit/a339f4ca1957f885ed080a80da66289330ef8c3f))
+
+
+### Bug Fixes
+
+* 📖 added docs for chart types ([#191](https://github.com/spaced-out/ui-design-system/issues/191)) ([f73f471](https://github.com/spaced-out/ui-design-system/commit/f73f471fb5efe2e8f1b49440d56a59193bb276a5))
+* story enhancement and breadcrumb position fix ([#192](https://github.com/spaced-out/ui-design-system/issues/192)) ([89a2cb7](https://github.com/spaced-out/ui-design-system/commit/89a2cb7391c5a8920a97ce7683faf897b636b3b3))
+
 ### [0.1.87-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.86...v0.1.87-beta.0) (2024-04-19)
 
 

package/lib/components/ColumnChart/ColumnChart.js

@@ -47,7 +47,10 @@ const ColumnChart = _ref => {
   }));
   const columnDrilldown = drilldown ? {
     ...drilldown,
-    series: addColorToDrilldownSeries(drilldown.series)
+    series: addColorToDrilldownSeries(drilldown.series),
+    breadcrumbs: {
+      floating: false
+    }
   } : {};
   const defaultColumnChartOptions = (0, _charts.getColumnChartOptions)();
 

package/lib/components/ColumnChart/ColumnChart.js.flow

@@ -73,6 +73,7 @@ export const ColumnChart = ({
     ? {
       ...drilldown,
       series: addColorToDrilldownSeries(drilldown.series),
+      breadcrumbs: {floating: false},
     }
     : {};
 

package/lib/components/DonutChart/DonutChart.js

@@ -63,7 +63,10 @@ const DonutChart = _ref => {
   }));
   const donutDrilldown = drilldown ? {
     ...drilldown,
-    series: addColorToDrilldownSeries(drilldown.series)
+    series: addColorToDrilldownSeries(drilldown.series),
+    breadcrumbs: {
+      floating: false
+    }
   } : {};
   const defaultLineChartOptions = (0, _charts.getDonutChartOptions)({
     legend,

package/lib/components/DonutChart/DonutChart.js.flow

@@ -110,6 +110,7 @@ export const DonutChart = ({
     ? {
       ...drilldown,
       series: addColorToDrilldownSeries(drilldown.series),
+      breadcrumbs: {floating: false},
     }
     : {};
 

package/lib/components/Grid/Grid.js

@@ -15,7 +15,8 @@ const GRID_SYSTEM_MAP = {
   small: 24,
   medium: 12,
   large: 6,
-  autoFill: 'auto-fill'
+  autoFill: 'auto-fill',
+  autoFit: 'auto-fit'
 };
 const Row = _ref => {
   let {
@@ -46,7 +47,7 @@ const Row = _ref => {
       columnSpanCount = lastChildColCount + offset + span;
       let gridColumnStart = 0,
         gridColumnEnd = 0;
-      if (gridType === 'autoFill') {
+      if (gridType === 'autoFill' || gridType === 'autoFit') {
         gridColumnStart = 'auto';
         return /*#__PURE__*/React.cloneElement(child, {
           gridColumnStart,

package/lib/components/Grid/Grid.js.flow

@@ -11,7 +11,7 @@ export type RowProps = {
   children?: React.Node,
   span?: number,
   offset?: number,
-  gridType?: 'small' | 'medium' | 'large' | 'autoFill',
+  gridType?: 'small' | 'medium' | 'large' | 'autoFill' | 'autoFit',
   repeatTracks?: string,
 };
 
@@ -20,6 +20,7 @@ const GRID_SYSTEM_MAP = {
   medium: 12,
   large: 6,
   autoFill: 'auto-fill',
+  autoFit: 'auto-fit',
 };
 
 export const Row = ({
@@ -47,7 +48,7 @@ export const Row = ({
       columnSpanCount = lastChildColCount + offset + span;
       let gridColumnStart = 0,
         gridColumnEnd = 0;
-      if (gridType === 'autoFill') {
+      if (gridType === 'autoFill' || gridType === 'autoFit') {
         gridColumnStart = 'auto';
         return React.cloneElement(child, {
           gridColumnStart,

package/lib/components/LineChart/LineChart.js

@@ -26,6 +26,7 @@ const LineChart = _ref => {
     customExportOptions,
     series,
     headerActions,
+    drilldown,
     ...userOptions
   } = _ref;
   const chartRef = /*#__PURE__*/React.createRef();
@@ -36,10 +37,17 @@ const LineChart = _ref => {
     color: (0, _charts.getDataVizColor)(index)
   }));
   const defaultLineChartOptions = (0, _charts.getLineChartOptions)();
+  const columnDrilldown = drilldown ? {
+    ...drilldown,
+    breadcrumbs: {
+      floating: false
+    }
+  } : {};
 
   //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
     series: lineChartSeries,
+    drilldown: columnDrilldown,
     ...userOptions
   });
   const {

package/lib/components/LineChart/LineChart.js.flow

@@ -6,6 +6,7 @@ import Highcharts from 'highcharts';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
+import type {Drilldown} from '../../types/charts';
 import {
   getDataVizColor,
   getLineChartOptions,
@@ -34,6 +35,7 @@ export type LineChartProps = {
   customExportOptions?: Array<ExportOptionType> | null,
   series: Array<LineSeriesItem>,
   headerActions?: React.Node,
+  drilldown: Drilldown,
   ...
 };
 
@@ -43,6 +45,7 @@ export const LineChart = ({
   customExportOptions,
   series,
   headerActions,
+  drilldown,
   ...userOptions
 }: LineChartProps): React.Node => {
   const chartRef = React.createRef();
@@ -56,9 +59,17 @@ export const LineChart = ({
 
   const defaultLineChartOptions = getLineChartOptions();
 
+  const columnDrilldown = drilldown
+    ? {
+      ...drilldown,
+      breadcrumbs: {floating: false},
+    }
+    : {};
+
   //$FlowFixMe[cannot-spread-inexact]
   const chartOptions = mergeChartUserOptions(defaultLineChartOptions, {
     series: lineChartSeries,
+    drilldown: columnDrilldown,
     ...userOptions,
   });
 

package/package.json

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