@spaced-out/ui-design-system 0.1.113 → 0.1.115

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.115](https://github.com/spaced-out/ui-design-system/compare/v0.1.114...v0.1.115) (2024-07-18)
+
+
+### Features
+
+* xAxis color borderPrimary in column and line chart ([#246](https://github.com/spaced-out/ui-design-system/issues/246)) ([b21dd11](https://github.com/spaced-out/ui-design-system/commit/b21dd113a9e6408d87f60afef2a680c2ce9072de))
+
+### [0.1.114](https://github.com/spaced-out/ui-design-system/compare/v0.1.113...v0.1.114) (2024-07-18)
+
+
+### Features
+
+* tooltip on back button in pageTitle ([#245](https://github.com/spaced-out/ui-design-system/issues/245)) ([2441a31](https://github.com/spaced-out/ui-design-system/commit/2441a310c247d013c5f49fc338e61e093e734984))
+
+
+### Bug Fixes
+
+* focus-visible ([#224](https://github.com/spaced-out/ui-design-system/issues/224)) ([0da8db6](https://github.com/spaced-out/ui-design-system/commit/0da8db61a982192e304f60615d1e577f9705a695))
+* text center issue ([#244](https://github.com/spaced-out/ui-design-system/issues/244)) ([7946f04](https://github.com/spaced-out/ui-design-system/commit/7946f043fdece4578118c5138fc7c3ab0efba57d))
+
 ### [0.1.113](https://github.com/spaced-out/ui-design-system/compare/v0.1.112...v0.1.113) (2024-07-16)
 
 

package/lib/components/PageTitle/PageTitle.js

@@ -9,6 +9,7 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
 var _PageTitleModule = _interopRequireDefault(require("./PageTitle.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -216,11 +217,14 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot)
   }, /*#__PURE__*/React.createElement("div", {
     className: _PageTitleModule.default.headerWithBackBtn
-  }, showBackButton && /*#__PURE__*/React.createElement(_Button.Button, {
+  }, showBackButton && /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+    title: "Navigate Back"
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
     onClick: handleBack,
     type: "tertiary",
-    iconLeftName: "chevron-left"
-  }), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
+    iconLeftName: "chevron-left",
+    ariaLabel: "Navigate Back Button"
+  })), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: PAGE_NAME_LIST[pageNameKey].iconType,
     name: PAGE_NAME_LIST[pageNameKey].iconName,
     size: "medium",

package/lib/components/PageTitle/PageTitle.js.flow

@@ -6,6 +6,7 @@ import classify from '../../utils/classify';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {TEXT_COLORS, TitleMedium} from '../Text';
+import {Tooltip} from '../Tooltip';
 
 import css from './PageTitle.module.css';
 
@@ -238,11 +239,14 @@ export const PageTitle: React$AbstractComponent<
         <div className={classify(css.leftSlot, classNames?.leftSlot)}>
           <div className={css.headerWithBackBtn}>
             {showBackButton && (
-              <Button
-                onClick={handleBack}
-                type="tertiary"
-                iconLeftName="chevron-left"
-              />
+              <Tooltip title="Navigate Back">
+                <Button
+                  onClick={handleBack}
+                  type="tertiary"
+                  iconLeftName="chevron-left"
+                  ariaLabel="Navigate Back Button"
+                />
+              </Tooltip>
             )}
             {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
               <PageName>

package/lib/components/ProgressDonut/ProgressDonut.module.css

@@ -14,9 +14,10 @@
 
 .donutChart {
   position: relative;
-  display: inline-block;
-  width: fit-content;
-  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   background-color: colorBackgroundPrimary;
 }
 
@@ -39,7 +40,4 @@
 
 .donutChartPercentage {
   position: absolute;
-  top: spaceHalfFluid;
-  left: spaceHalfFluid;
-  transform: translate(spaceNegHalfFluid, spaceNegHalfFluid);
 }

package/lib/components/SideMenuLink/SideMenuLink.module.css

@@ -39,9 +39,6 @@
 
 .linkWrapper:focus-visible {
   outline: none;
-}
-
-.linkWrapper:focus {
   box-shadow: borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
 }

package/lib/utils/charts/columnChart.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getColumnChartOptions = exports.columnPlotWidth = void 0;
+var _color = require("../../styles/variables/_color.js");
 var _charts = require("./charts");
 var _helpers = require("./helpers");
 
@@ -31,7 +32,8 @@ const getColumnChartOptions = () => ({
     title: {
       margin: 12,
       style: _helpers.xAxisTitleStyle
-    }
+    },
+    lineColor: _color.colorBorderPrimary
   },
   yAxis: {
     labels: {

package/lib/utils/charts/columnChart.js.flow

@@ -1,5 +1,6 @@
 // @flow strict
 
+import {colorBorderPrimary} from '../../styles/variables/_color.js';
 import type {ChartOptions} from '../../types/charts';
 
 import {commonChartOptions} from './charts';
@@ -37,6 +38,7 @@ export const getColumnChartOptions = (): ChartOptions => ({
       margin: 12,
       style: xAxisTitleStyle,
     },
+    lineColor: colorBorderPrimary,
   },
   yAxis: {
     labels: {

package/lib/utils/charts/lineChart.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLineChartOptions = void 0;
+var _color = require("../../styles/variables/_color.js");
 var _charts = require("./charts");
 var _helpers = require("./helpers");
 var _typography = require("./typography");
@@ -31,7 +32,8 @@ const getLineChartOptions = () => ({
     title: {
       margin: 12,
       style: _helpers.xAxisTitleStyle
-    }
+    },
+    lineColor: _color.colorBorderPrimary
   },
   yAxis: {
     labels: {

package/lib/utils/charts/lineChart.js.flow

@@ -1,4 +1,5 @@
 // @flow strict
+import {colorBorderPrimary} from '../../styles/variables/_color.js';
 import type {ChartOptions} from '../../types/charts';
 
 import {commonChartOptions} from './charts';
@@ -34,6 +35,7 @@ export const getLineChartOptions = (): ChartOptions => ({
       margin: 12,
       style: xAxisTitleStyle,
     },
+    lineColor: colorBorderPrimary,
   },
   yAxis: {
     labels: {

package/package.json

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