@sipesistemas/polaris 1.2.1 → 1.2.2

package/build/cjs/components/TopBar/TopBar.css.js

@@ -18,6 +18,8 @@ var styles = {
   "LeftContent": "Polaris-TopBar__LeftContent",
   "Search": "Polaris-TopBar__Search",
   "RightContent": "Polaris-TopBar__RightContent",
+  "HelpActivatorWrapper": "Polaris-TopBar__HelpActivatorWrapper",
+  "HelpActivator": "Polaris-TopBar__HelpActivator",
   "SecondaryMenu": "Polaris-TopBar__SecondaryMenu"
 };
 

package/build/cjs/components/TopBar/TopBar.js

@@ -30,6 +30,7 @@ const TopBar = function TopBar({
   searchResultsVisible,
   searchResultsOverlayVisible = false,
   onNavigationToggle,
+  onHelpToggle,
   onSearchResultsDismiss,
   contextControl,
   logoSuffix
@@ -106,7 +107,17 @@ const TopBar = function TopBar({
         children: searchMarkup
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: TopBar_module.default.RightContent,
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        children: [onHelpToggle && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: TopBar_module.default.HelpActivatorWrapper,
+          children: /*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            className: css.classNames(TopBar_module.default.HelpActivator, userMenu && TopBar_module.default['Activator-userMenu']),
+            onClick: onHelpToggle,
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              source: polarisIcons.QuestionCircleIcon
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: TopBar_module.default.SecondaryMenu,
           children: secondaryMenu
         }), userMenu]

package/build/esm/components/TopBar/TopBar.css.js

@@ -14,6 +14,8 @@ var styles = {
   "LeftContent": "Polaris-TopBar__LeftContent",
   "Search": "Polaris-TopBar__Search",
   "RightContent": "Polaris-TopBar__RightContent",
+  "HelpActivatorWrapper": "Polaris-TopBar__HelpActivatorWrapper",
+  "HelpActivator": "Polaris-TopBar__HelpActivator",
   "SecondaryMenu": "Polaris-TopBar__SecondaryMenu"
 };
 

package/build/esm/components/TopBar/TopBar.js

@@ -1,4 +1,4 @@
-import { MenuIcon } from '@shopify/polaris-icons';
+import { MenuIcon, QuestionCircleIcon } from '@shopify/polaris-icons';
 import { classNames } from '../../utilities/css.js';
 import { getWidth } from '../../utilities/get-width.js';
 import { useToggle } from '../../utilities/use-toggle.js';
@@ -28,6 +28,7 @@ const TopBar = function TopBar({
   searchResultsVisible,
   searchResultsOverlayVisible = false,
   onNavigationToggle,
+  onHelpToggle,
   onSearchResultsDismiss,
   contextControl,
   logoSuffix
@@ -104,7 +105,17 @@ const TopBar = function TopBar({
         children: searchMarkup
       }), /*#__PURE__*/jsxs("div", {
         className: styles.RightContent,
-        children: [/*#__PURE__*/jsx("div", {
+        children: [onHelpToggle && /*#__PURE__*/jsx("div", {
+          className: styles.HelpActivatorWrapper,
+          children: /*#__PURE__*/jsx("button", {
+            type: "button",
+            className: classNames(styles.HelpActivator, userMenu && styles['Activator-userMenu']),
+            onClick: onHelpToggle,
+            children: /*#__PURE__*/jsx(Icon, {
+              source: QuestionCircleIcon
+            })
+          })
+        }), /*#__PURE__*/jsx("div", {
           className: styles.SecondaryMenu,
           children: secondaryMenu
         }), userMenu]

package/build/esm/styles.css

@@ -3456,7 +3456,7 @@
 @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
 
 :root{
-  --polaris-version-number:'1.2.1';
+  --polaris-version-number:'1.2.2';
 
   --pg-navigation-width:15rem;
   --pg-dangerous-magic-space-4:1rem;
@@ -15704,10 +15704,106 @@ body{
   justify-content:flex-end;
 }
 
-.Polaris-TopBar__SecondaryMenu{
-  margin-left:var(--p-space-200);
+.Polaris-TopBar__HelpActivatorWrapper{
+  height:var(--pg-top-bar-height);
+  display:flex;
+  align-items:center;
+}
+
+.Polaris-TopBar__HelpActivator{
+  -webkit-appearance:none;
+          appearance:none;
+  margin:0;
+  padding:0;
+  background:none;
+  border:none;
+  font-size:inherit;
+  line-height:inherit;
+  color:inherit;
+  cursor:pointer;
+  position: relative;
+  color:var(--p-color-text-inverse);
+  position:relative;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  min-width:auto;
+  min-height:2rem;
+  padding:var(--p-space-150);
+  border:0;
+  cursor:pointer;
+  transition:background-color var(--p-motion-duration-100);
+  margin-right:var(--p-space-200);
+  border-radius:var(--p-border-radius-200);
+  background-color:var(--p-color-bg-fill-inverse);
+}
+
+.Polaris-TopBar__HelpActivator:focus{
+    outline:none;
+  }
+
+.Polaris-TopBar__HelpActivator::after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: -0.0625rem;
+  right: -0.0625rem;
+  bottom: -0.0625rem;
+  left: -0.0625rem;
+  display: block;
+  pointer-events: none;
+  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
+  border-radius: var(--p-border-radius-100);
 }
 
+.Polaris-TopBar__HelpActivator:focus{
+    background-color:var(--p-color-bg-fill-inverse-hover);
+    outline:none;
+  }
+
+.Polaris-TopBar__HelpActivator:focus-visible{
+    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
+    outline-offset:var(--p-space-050);
+  }
+
+.Polaris-TopBar__HelpActivator:focus-visible::after{
+    content:none;
+  }
+
+.Polaris-TopBar__HelpActivator:hover{
+    background-color:var(--p-color-bg-fill-inverse-hover);
+  }
+
+.Polaris-TopBar__HelpActivator:active,
+  .Polaris-TopBar__HelpActivator[aria-expanded='true']{
+    background-color:var(--p-color-bg-fill-inverse-active);
+    outline:none;
+    transition:none;
+  }
+
+.Polaris-TopBar__HelpActivator:active::after, .Polaris-TopBar__HelpActivator[aria-expanded='true']::after{
+      border:none;
+    }
+
+.Polaris-TopBar__HelpActivator:active p, .Polaris-TopBar__HelpActivator[aria-expanded='true'] p{
+      color:var(--p-color-text-inverse);
+    }
+
+@media (max-width: 47.9975em){
+
+.Polaris-TopBar__HelpActivator{
+    margin-right:var(--p-space-200);
+    background-color:var(--p-color-bg-inverse);
+}
+
+    .Polaris-TopBar__HelpActivator:focus,
+    .Polaris-TopBar__HelpActivator:hover,
+    .Polaris-TopBar__HelpActivator:active,
+    .Polaris-TopBar__HelpActivator[aria-expanded='true']{
+      opacity:0.85;
+    }
+  }
+
 .Polaris-TopBar__SecondaryMenu svg{
   fill:var(--p-color-icon-inverse);
 }

package/build/esnext/components/AppProvider/global.out.css

@@ -21,7 +21,7 @@
 @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
 
 :root{
-  --polaris-version-number:'1.2.1';
+  --polaris-version-number:'1.2.2';
 
   --pg-navigation-width:15rem;
   --pg-dangerous-magic-space-4:1rem;

package/build/esnext/components/TopBar/TopBar.css.esnext

@@ -16,6 +16,8 @@ var styles = {
   "LeftContent": "Polaris-TopBar__LeftContent_1rxtg",
   "Search": "Polaris-TopBar__Search_q76sw",
   "RightContent": "Polaris-TopBar__RightContent_1e3it",
+  "HelpActivatorWrapper": "Polaris-TopBar__HelpActivatorWrapper_1kens",
+  "HelpActivator": "Polaris-TopBar__HelpActivator_11bev",
   "SecondaryMenu": "Polaris-TopBar__SecondaryMenu_7y4ay"
 };
 

package/build/esnext/components/TopBar/TopBar.esnext

@@ -1,4 +1,4 @@
-import { MenuIcon } from '@shopify/polaris-icons';
+import { MenuIcon, QuestionCircleIcon } from '@shopify/polaris-icons';
 import { classNames } from '../../utilities/css.esnext';
 import { getWidth } from '../../utilities/get-width.esnext';
 import { useToggle } from '../../utilities/use-toggle.esnext';
@@ -28,6 +28,7 @@ const TopBar = function TopBar({
   searchResultsVisible,
   searchResultsOverlayVisible = false,
   onNavigationToggle,
+  onHelpToggle,
   onSearchResultsDismiss,
   contextControl,
   logoSuffix
@@ -104,7 +105,17 @@ const TopBar = function TopBar({
         children: searchMarkup
       }), /*#__PURE__*/jsxs("div", {
         className: styles.RightContent,
-        children: [/*#__PURE__*/jsx("div", {
+        children: [onHelpToggle && /*#__PURE__*/jsx("div", {
+          className: styles.HelpActivatorWrapper,
+          children: /*#__PURE__*/jsx("button", {
+            type: "button",
+            className: classNames(styles.HelpActivator, userMenu && styles['Activator-userMenu']),
+            onClick: onHelpToggle,
+            children: /*#__PURE__*/jsx(Icon, {
+              source: QuestionCircleIcon
+            })
+          })
+        }), /*#__PURE__*/jsx("div", {
           className: styles.SecondaryMenu,
           children: secondaryMenu
         }), userMenu]

package/build/esnext/components/TopBar/TopBar.out.css

@@ -188,10 +188,106 @@
   justify-content:flex-end;
 }
 
-.Polaris-TopBar__SecondaryMenu_7y4ay{
-  margin-left:var(--p-space-200);
+.Polaris-TopBar__HelpActivatorWrapper_1kens{
+  height:var(--pg-top-bar-height);
+  display:flex;
+  align-items:center;
+}
+
+.Polaris-TopBar__HelpActivator_11bev{
+  -webkit-appearance:none;
+          appearance:none;
+  margin:0;
+  padding:0;
+  background:none;
+  border:none;
+  font-size:inherit;
+  line-height:inherit;
+  color:inherit;
+  cursor:pointer;
+  position: relative;
+  color:var(--p-color-text-inverse);
+  position:relative;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  min-width:auto;
+  min-height:2rem;
+  padding:var(--p-space-150);
+  border:0;
+  cursor:pointer;
+  transition:background-color var(--p-motion-duration-100);
+  margin-right:var(--p-space-200);
+  border-radius:var(--p-border-radius-200);
+  background-color:var(--p-color-bg-fill-inverse);
+}
+
+.Polaris-TopBar__HelpActivator_11bev:focus{
+    outline:none;
+  }
+
+.Polaris-TopBar__HelpActivator_11bev::after {
+  content: '';
+  position: absolute;
+  z-index: 1;
+  top: -0.0625rem;
+  right: -0.0625rem;
+  bottom: -0.0625rem;
+  left: -0.0625rem;
+  display: block;
+  pointer-events: none;
+  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);
+  border-radius: var(--p-border-radius-100);
 }
 
+.Polaris-TopBar__HelpActivator_11bev:focus{
+    background-color:var(--p-color-bg-fill-inverse-hover);
+    outline:none;
+  }
+
+.Polaris-TopBar__HelpActivator_11bev:focus-visible{
+    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
+    outline-offset:var(--p-space-050);
+  }
+
+.Polaris-TopBar__HelpActivator_11bev:focus-visible::after{
+    content:none;
+  }
+
+.Polaris-TopBar__HelpActivator_11bev:hover{
+    background-color:var(--p-color-bg-fill-inverse-hover);
+  }
+
+.Polaris-TopBar__HelpActivator_11bev:active,
+  .Polaris-TopBar__HelpActivator_11bev[aria-expanded='true']{
+    background-color:var(--p-color-bg-fill-inverse-active);
+    outline:none;
+    transition:none;
+  }
+
+.Polaris-TopBar__HelpActivator_11bev:active::after, .Polaris-TopBar__HelpActivator_11bev[aria-expanded='true']::after{
+      border:none;
+    }
+
+.Polaris-TopBar__HelpActivator_11bev:active p, .Polaris-TopBar__HelpActivator_11bev[aria-expanded='true'] p{
+      color:var(--p-color-text-inverse);
+    }
+
+@media (max-width: 47.9975em){
+
+.Polaris-TopBar__HelpActivator_11bev{
+    margin-right:var(--p-space-200);
+    background-color:var(--p-color-bg-inverse);
+}
+
+    .Polaris-TopBar__HelpActivator_11bev:focus,
+    .Polaris-TopBar__HelpActivator_11bev:hover,
+    .Polaris-TopBar__HelpActivator_11bev:active,
+    .Polaris-TopBar__HelpActivator_11bev[aria-expanded='true']{
+      opacity:0.85;
+    }
+  }
+
 .Polaris-TopBar__SecondaryMenu_7y4ay svg{
   fill:var(--p-color-icon-inverse);
 }

package/build/ts/src/components/TopBar/TopBar.d.ts

@@ -23,6 +23,8 @@ export interface TopBarProps {
     onSearchResultsDismiss?: SearchProps['onDismiss'];
     /** A callback function that handles hiding and showing mobile navigation */
     onNavigationToggle?(): void;
+    /** A callback function that handles the help button click. */
+    onHelpToggle?(): void;
     /** Accepts a component that is used to supplement the logo markup */
     logoSuffix?: React.ReactNode;
 }

package/build/ts/src/components/TopBar/TopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopBar/TopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,EAAE,IAAI,EAAU,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEhF,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA;AAE/C,MAAM,WAAW,WAAW;IAC1B,6HAA6H;IAC7H,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kIAAkI;IAClI,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,sHAAsH;IACtH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,qIAAqI;IACrI,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,uEAAuE;IACvE,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,uEAAuE;IACvE,sBAAsB,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACjD,4EAA4E;IAC5E,kBAAkB,CAAC,IAAI,IAAI,CAAA;IAC3B,qEAAqE;IACrE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAOD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG;IAC1D,IAAI,EAAE,OAAO,IAAI,CAAA;IACjB,WAAW,EAAE,OAAO,WAAW,CAAA;IAC/B,QAAQ,EAAE,OAAO,QAAQ,CAAA;CA2F1B,CAAA"}
+{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopBar/TopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,EAAE,IAAI,EAAU,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAEhF,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA;AAE/C,MAAM,WAAW,WAAW;IAC1B,6HAA6H;IAC7H,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kIAAkI;IAClI,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,sHAAsH;IACtH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,qIAAqI;IACrI,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,kFAAkF;IAClF,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,uEAAuE;IACvE,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,uEAAuE;IACvE,sBAAsB,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACjD,4EAA4E;IAC5E,kBAAkB,CAAC,IAAI,IAAI,CAAA;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,IAAI,IAAI,CAAA;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAOD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG;IAC1D,IAAI,EAAE,OAAO,IAAI,CAAA;IACjB,WAAW,EAAE,OAAO,WAAW,CAAA;IAC/B,QAAQ,EAAE,OAAO,QAAQ,CAAA;CAqG1B,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sipesistemas/polaris",
   "description": "sspp product component library",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": false,
   "author": "SSPP <dev@sipesistemas.com>",
   "repository": "https://github.com/sipesistemas/ui",