@seeqdev/qomponents 0.0.76 → 0.0.77

package/dist/Tooltip/qTip.utilities.js

@@ -0,0 +1,11 @@
+import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
+export const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => tooltip
+    ? {
+        'data-qtip-text': tooltip,
+        'data-qtip-placement': tooltipPlacement,
+        'data-qtip-is-html': isHtmlTooltip,
+        'data-qtip-testid': tooltipTestId,
+        'data-qtip-delay': tooltipDelay,
+    }
+    : undefined;
+//# sourceMappingURL=qTip.utilities.js.map

package/dist/Tooltip/qTip.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qTip.utilities.js","sourceRoot":"","sources":["../../src/Tooltip/qTip.utilities.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAyB,MAAM,iBAAiB,CAAC;AAEhF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY,GAAG,sBAAsB,GACf,EAAkC,EAAE,CAC1D,OAAO;IACL,CAAC,CAAC;QACE,gBAAgB,EAAE,OAAO;QACzB,qBAAqB,EAAE,gBAAgB;QACvC,mBAAmB,EAAE,aAAa;QAClC,kBAAkB,EAAE,aAAa;QACjC,iBAAiB,EAAE,YAAY;KAChC;IACH,CAAC,CAAC,SAAS,CAAC"}

package/dist/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "0.0.20",
+    "@seeqdev/qomponents": "0.0.72",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/example/src/Example.tsx

@@ -1,6 +1,20 @@
 import React from 'react';
-import { Button, Checkbox, Icon, QTip, Select, TextArea, TextField } from '@seeqdev/qomponents';
+import {
+  Button,
+  ButtonWithDropdown,
+  ButtonWithPopover,
+  Checkbox,
+  Icon,
+  Modal,
+  QTip,
+  Select,
+  Tabs,
+  TextArea,
+  TextField,
+  ToolbarButton,
+} from '@seeqdev/qomponents';
 import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
+import Accordion from '../../src/Accordion';
 
 const availableThemes = [
   { display: 'Analysis', value: 'color_analysis' },
@@ -14,6 +28,76 @@ const options = [
   { value: '3', label: 'Expert' },
 ];
 
+const Trigger = ({ label }: { label: string }) => (
+  <div className="tw-flex tw-justify-start tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark">
+    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[12px]" type="text" />
+    {label}
+  </div>
+);
+
+const accordionItems = [
+  {
+    value: 'phone',
+    id: 'phone',
+    itemTestId: 'phonecall',
+    trigger: <Trigger label="Phone" />,
+    content: (
+      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+        If you need to reach us, please call us at 555-555-5555.
+      </div>
+    ),
+  },
+  {
+    value: 'email',
+    id: 'email',
+    itemTestId: 'email',
+    trigger: <Trigger label="Email" />,
+    content: (
+      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+        If you need to reach us, please mail example@seeqtest.com
+      </div>
+    ),
+  },
+  {
+    value: 'address',
+    id: 'address',
+    itemTestId: 'address',
+    trigger: <Trigger label="Address" />,
+    content: (
+      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+        If you need to reach us, please visit us at 1234 Main St., Anytown, USA.
+      </div>
+    ),
+  },
+];
+
+const renderData = (text: string) => (
+  <div className="tw-text-sq-color-gray dark:tw-text-sq-white tw-p-6">
+    <p className="tw-mb-5 tw-text-[15px] tw-leading-normal">{text}</p>
+  </div>
+);
+
+const tabsList = [
+  {
+    id: 'plugins',
+    label: 'Plugins',
+    icon: 'fc-data',
+    content: renderData("Here's where you can find all the plugins you need. Enjoy!"),
+  },
+  {
+    id: 'addons',
+    label: 'Addons',
+    icon: 'fc-gears-2',
+    content: renderData("Here's where you can find all the addons you need. Enjoy!"),
+  },
+  {
+    id: 'shelf',
+    label: 'Shelf',
+    icon: 'fc-workbook-lock',
+    content: renderData("Here's where you can find all the private documents you need. Enjoy!"),
+  },
+];
+
 function Example() {
   /**
    * Theming is supported "out of the box". To apply a theme wrap your addOn in a div and assign the class that
@@ -40,6 +124,12 @@ function Example() {
   const [easeOfUse, setEaseOfUse] = React.useState(false);
   const [lookAndFeel, setLookAndFeel] = React.useState(false);
   const [speed, setSpeed] = React.useState(false);
+  const [help, setHelp] = React.useState('phone');
+  const [openDropdown, setOpenDropdown] = React.useState('');
+  const [openPopver, setOpenPopover] = React.useState('');
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [modalTitle, setModalTitle] = React.useState('Modal Title');
+  const [activeTab, setActiveTab] = React.useState('plugins');
 
   return (
     // outer-wrapper div that assigns the mode (dark-mode or light) as well as the theme
@@ -140,6 +230,157 @@ function Example() {
               onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
             />
           </div>
+          <div className="formRow">
+            <div className="labelWidth">Website tools</div>
+            <div className="formElementWidth tw-border tw-rounded-sm">
+              <Tabs
+                stretchTabs={true}
+                activeTab={activeTab}
+                onTabSelect={setActiveTab}
+                defaultActiveTab="data"
+                tabs={tabsList}
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Get help</div>
+            <div className="formElementWidth tw-border tw-rounded-sm">
+              <Accordion
+                accordionItems={accordionItems}
+                value={help}
+                testId="basic-accordion1"
+                onItemSelect={(value) => setHelp(value)}
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Tools</div>
+            <div className="formElementWidth formRow tw-border tw-rounded-sm tw-p-4 tw-flex tw-justify-center">
+              <ToolbarButton
+                icon="fc-y-axis"
+                label="Analyzer"
+                testId="basic-analyzer"
+                tooltipText="Analize data from any csv document"
+                hasArrow
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                isHtmlTooltip={false}
+                popoverContent={
+                  <div className="tw-text-sm dark:tw-text-white">
+                    <p className="tw-p-2">Select file from your computer or google drive</p>
+                    <Button type="button" label="Click to select file" />
+                  </div>
+                }
+              />
+              <ToolbarButton
+                icon="fc-sun"
+                label={mode === 'tw-light' ? 'Dark Mode' : 'Light Mode'}
+                testId="basic-toggler"
+                isActive={mode === 'tw-light'}
+                tooltipText="Toggle light and dark modes"
+                onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                isHtmlTooltip={false}
+              />
+              <ToolbarButton
+                icon="fc-marker"
+                label="Language"
+                testId="basic-language-changer"
+                tooltipText="Disabled toolbar to change website language"
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                disabled
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Take action</div>
+            <div className="formElementWidth">
+              <ButtonWithDropdown
+                onOpenChange={(isOpen) => setOpenDropdown(isOpen ? 'dropdown-1' : '')}
+                isOpen={openDropdown === 'dropdown-1'}
+                triggerIcon={
+                  <Icon
+                    icon="fc-more"
+                    type="text"
+                    extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]"
+                  />
+                }
+                containerTestId="basic-dropdown1"
+                tooltip="See actions to take for plugins"
+                tooltipDelay={0}
+                hasArrow
+                tooltipPlacement="top"
+                dropdownItems={[
+                  { label: 'Create', icon: 'fc-add-row', onClick: () => setOpenDropdown('') },
+                  { label: 'Update', icon: 'fc-asset-tree', onClick: () => setOpenDropdown(''), hasDivider: true },
+                  {
+                    label: 'Sort',
+                    icon: 'fc-search-power',
+                    onClick: () => setOpenDropdown(''),
+                    subMenuItems: [
+                      { label: 'Ascending', iconClass: 'fc-arrow_up', onClick: () => setOpenDropdown('') },
+                      { label: 'Descending', iconClass: 'fc-arrow_down', onClick: () => setOpenDropdown('') },
+                    ],
+                  },
+                  { label: 'Delete', icon: 'fc-delete', onClick: () => setOpenDropdown('') },
+                ]}
+              />
+            </div>
+          </div>
+          <div className="formRow tw-mt-4">
+            <div className="labelWidth">More information</div>
+            <div className="formElementWidth">
+              <ButtonWithPopover
+                trigger={<Icon type="text" icon="fc-circle_info" />}
+                containerTestId="basic-popover-1"
+                isOpen={openPopver === 'basic-popover-1'}
+                onOpenChange={(isOpen) => setOpenPopover(isOpen ? 'basic-popover-1' : '')}
+                isHoverEnabled={false}
+                align="start"
+                tooltipPlacement="top"
+                hasArrow
+                isHtmlTooltip={false}>
+                <div className="tw-text-sm dark:tw-text-white tw-w-72 tw-p-4">
+                  <p className="tw-font-bold">What are plugins?</p>
+                  Plugins are modular software components that extend the functionality of an application. They allow
+                  users to add new features or customize existing ones. Plugins can be easily integrated into an
+                  application and provide a way to enhance its capabilities without modifying the core codebase.Plugins
+                  are modular software components that extend the functionality of an application.
+                </div>
+              </ButtonWithPopover>
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Accept terms</div>
+            <div className="formElementWidth">
+              <Button
+                onClick={() => {
+                  setModalOpen(true);
+                }}
+                label="View terms of use"
+              />
+              <Modal
+                open={modalOpen}
+                onClose={() => setModalOpen(false)}
+                title="Terms of use"
+                titleIcon="fc-circle_info"
+                isTitleEditable
+                onTitleChanged={(event) => setModalTitle(event.target.value)}
+                hideCloseIcon={false}
+                size="lg"
+                customButton={true}
+                customButtonLabel="Back">
+                <div>
+                  <p>
+                    By using this website, you agree to the following terms of use: Lorem ipsum dolor sit amet,
+                    consectetur adipiscing elit. Sed euismod, justo id aliquet aliquam, elit enim tincidunt mauris, nec
+                    aliquam nunc elit vitae nunc. Sed vitae fringilla mauris. Nulla facilisi. Sed auctor, nunc vel
+                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc. Sed auctor, nunc vel
+                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc.
+                  </p>
+                </div>
+              </Modal>
+            </div>
+          </div>
           <div className="buttonRow">
             <Button
               label="Cancel"

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utils/browserId.js

@@ -0,0 +1,29 @@
+/**
+ * @exports the browser id (i.e., 'IE 11' 'Chrome 90')
+ * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
+ */
+export const browserId = (function () {
+    let tem;
+    const ua = navigator.userAgent;
+    let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+    if (/trident/i.test(M[1])) {
+        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+        return `IE ${tem[1] || ''}`;
+    }
+    if (M[1] === 'Chrome') {
+        tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
+        if (tem !== null) {
+            return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');
+        }
+    }
+    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    if ((tem = ua.match(/version\/(\d+)/i)) !== null) {
+        M.splice(1, 1, tem[1]);
+    }
+    return M.join(' ');
+})();
+export const browserName = browserId && browserId.split(' ', 2)[0];
+export const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);
+export const browserIsFirefox = browserId && browserName === 'Firefox';
+export const browserIsEdgeBeforeChromium = browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;
+//# sourceMappingURL=browserId.js.map

package/dist/utils/browserId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browserId.js","sourceRoot":"","sources":["../../src/utils/browserId.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW,CAAC;IAChC,IAAI,GAAG,CAAC;IACR,MAAM,EAAE,GAAG,SAAS,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,8DAA8D,CAAC,IAAI,EAAE,CAAC;IACvF,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;QACzB,GAAG,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QACvC,OAAO,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;KAC7B;IAED,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;QACrB,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC;QACvC,IAAI,GAAG,KAAK,IAAI,EAAE;YAChB,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;SAChF;KACF;IAED,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IAC1E,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,IAAI,EAAE;QAChD,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;KACxB;IAED,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACrB,CAAC,CAAC,EAAE,CAAC;AACL,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnE,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACpF,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,IAAI,WAAW,KAAK,SAAS,CAAC;AACvE,MAAM,CAAC,MAAM,2BAA2B,GACtC,WAAW,IAAI,cAAc,IAAI,WAAW,KAAK,MAAM,IAAI,cAAc,GAAG,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.js",