carbon-react 114.5.1 → 114.6.1

package/lib/components/vertical-menu/vertical-menu.style.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PaddingProps } from "styled-system";
+export declare const StyledList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+interface StyledVerticalMenuProps extends PaddingProps {
+    active?: boolean;
+    height: string;
+}
+export declare const StyledVerticalMenuItem: import("styled-components").StyledComponent<"div", any, StyledVerticalMenuProps, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const StyledAdornment: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledChevronIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledVerticalMenu: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
+export declare const StyledVerticalMenuFullScreen: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
+export {};

package/lib/components/vertical-menu/vertical-menu.style.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledVerticalMenuFullScreen = exports.StyledVerticalMenu = exports.StyledChevronIcon = exports.StyledTitleIcon = exports.StyledAdornment = exports.StyledTitle = exports.StyledVerticalMenuItem = exports.StyledList = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledSystem = require("styled-system");
+
+var _icon = _interopRequireDefault(require("../icon/icon.style"));
+
+var _icon2 = _interopRequireDefault(require("../icon"));
+
+var _box = _interopRequireDefault(require("../box"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledList = _styledComponents.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+exports.StyledList = StyledList;
+const StyledVerticalMenuItem = _styledComponents.default.div`
+  min-height: ${({
+  height
+}) => height};
+  width: 100%;
+  display: flex;
+  border: none;
+  align-items: center;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--colorsComponentsLeftnavWinterStandardContent);
+  position: relative;
+  box-sizing: border-box;
+  text-decoration: none;
+  background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
+
+  ${_styledSystem.padding}
+
+  &:hover {
+    background-color: var(--colorsComponentsLeftnavWinterStandardHover);
+  }
+
+  &:focus {
+    outline: 3px solid var(--colorsSemanticFocus500);
+    outline-offset: -3px;
+  }
+
+  ${({
+  active
+}) => active && (0, _styledComponents.css)`
+      &:before {
+        background: var(--colorsComponentsLeftnavWinterStandardSelected);
+        content: "";
+        height: calc(100% - 16px);
+        left: 24px;
+        position: absolute;
+        top: 8px;
+        width: calc(100% - 48px);
+        z-index: 0;
+      }
+
+      &:hover {
+        &:before {
+          background: var(--colorsComponentsLeftnavWinterStandardHover);
+        }
+      }
+    `}
+
+  ${_icon.default} {
+    width: 20px;
+  }
+`;
+exports.StyledVerticalMenuItem = StyledVerticalMenuItem;
+const StyledTitle = _styledComponents.default.h3`
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 21px;
+  margin: 0;
+  z-index: 1;
+  text-align: left;
+`;
+exports.StyledTitle = StyledTitle;
+const StyledAdornment = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+`;
+exports.StyledAdornment = StyledAdornment;
+const StyledTitleIcon = (0, _styledComponents.default)(_icon2.default)`
+  margin-right: 12px;
+  width: 20px;
+  color: var(--colorsComponentsLeftnavWinterStandardContent);
+`;
+exports.StyledTitleIcon = StyledTitleIcon;
+const StyledChevronIcon = (0, _styledComponents.default)(_icon2.default)`
+  margin-left: auto;
+  padding-left: 12px;
+  width: 20px;
+  color: var(--colorsComponentsLeftnavWinterStandardContent);
+`;
+exports.StyledChevronIcon = StyledChevronIcon;
+const StyledVerticalMenu = (0, _styledComponents.default)(_box.default)`
+  // TODO remove hardcoded values when DS have had chance to review which token to use
+  &::-webkit-scrollbar-track {
+    background-color: #cccccc;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #808080;
+  }
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+`;
+exports.StyledVerticalMenu = StyledVerticalMenu;
+const StyledVerticalMenuFullScreen = (0, _styledComponents.default)(_box.default)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  height: 100vh;
+  width: 100%;
+  outline: none;
+  padding: 8px 0px;
+  overflow: auto;
+  background-color: var(--colorsComponentsLeftnavWinterStandardBackground);
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  z-index: ${({
+  theme
+}) => theme.zIndex.fullScreenModal};
+
+  // TODO remove hardcoded values when DS have had chance to review which token to use
+  &::-webkit-scrollbar-track {
+    background-color: #cccccc;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #808080;
+  }
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+`;
+exports.StyledVerticalMenuFullScreen = StyledVerticalMenuFullScreen;

package/lib/locales/en-gb.js

@@ -134,6 +134,11 @@ const enGB = {
     ariaLabels: {
       close: () => "Close"
     }
+  },
+  verticalMenuFullScreen: {
+    ariaLabels: {
+      close: () => "Close"
+    }
   }
 };
 var _default = enGB;

package/lib/locales/locale.d.ts

@@ -101,5 +101,10 @@ interface Locale {
             close: () => string;
         };
     };
+    verticalMenuFullScreen: {
+        ariaLabels: {
+            close: () => string;
+        };
+    };
 }
 export default Locale;

package/lib/locales/pl-pl.js

@@ -132,6 +132,11 @@ const plPL = {
     ariaLabels: {
       close: () => "Zamknij"
     }
+  },
+  verticalMenuFullScreen: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
   }
 };
 var _default = plPL;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "114.5.1",
+  "version": "114.6.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",