acinguiux-ds-react-framework 0.0.1 → 0.0.4

package/CHANGELOG.md

@@ -1,8 +1,9 @@
-# acinguiux-ds-react-framework
-
-## 0.0.1
-
-### Patch Changes
-
-- small Table fixes
-
+# acinguiux-ds-react-framework
+
+## 12.0.0-next-major.20
+
+### Minor Changes
+
+- [#3142](https://github.com/acinguiux-ds-react-framework/pull/3142) [`90adfc0d`](https://github.com/acinguiux-ds-react-framework/commit/90adfc0dd507ddc3f37efa7a6e434df1a46b0d5e) Thanks [@Wyrobowa](https://github.com/Wyrobowa)! - feat(react-framework): add styles to sorter button
+
+## 11.3.0-beta.10

package/README.md

@@ -0,0 +1,124 @@
+# acinguiux Design System - React Framework
+
+---
+
+Welcome to the acinguiux Design System React Framework, a collection of reusable components written in ReactJS. You can explore these components on our [Storybook page](https://acinguiux-ds-react-framework.azurewebsites.net/).
+
+## Table of Contents
+
+1. [Documentation](#documentation)
+2. [Installation](#installation)
+3. [Commands](#commands)
+4. [Support](#support)
+5. [Transpiling](#transpiling)
+
+---
+
+## Documentation
+
+Our comprehensive documentation is available in the [GitHub Wiki](https://github.com/acinguiux-ds-react-framework/wiki).
+We provide a Storybook page to showcase and document our components:
+- beta (release/minor_patch branch): [https://acinguiux-ds-minor-patch-react-framework.azurewebsites.net/](https://acinguiux-ds-minor-patch-react-framework.azurewebsites.net/)
+- next-major (release/major branch): [https://acinguiux-ds-major-react-framework.azurewebsites.net/](https://acinguiux-ds-major-react-framework.azurewebsites.net/)
+- stable (main branch): [https://acinguiux-ds-react-framework.azurewebsites.net/](https://acinguiux-ds-react-framework.azurewebsites.net/)
+
+---
+
+## Installation
+
+To use the acinguiux Design System React Framework in your project, follow these steps:
+
+### Step 1: Generate GitHub Token
+
+1. Go to [GitHub Tokens](https://github.com/settings/tokens)or navigate to GitHub Settings => Developer Settings => Personal Access Tokens.
+2. Generate a new token with at least the repo and read:packages scopes.
+3. Copy the token and, if prompted, configure SSO authorization in the `sede-x` organization.
+
+Add the token to the file `~/.npmrc` (if it does not exist, create it):
+
+```
+//npm.pkg.github.com/:_authToken=YOUR_TOKEN_HERE
+```
+
+If you do not have access to this file or you are in a Windows OS, you can run the following command:
+
+```
+npm login --scope=@sede-x --registry=https://npm.pkg.github.com
+> Username: USERNAME
+> Password: TOKEN
+> Email: PUBLIC-EMAIL-ADDRESS
+```
+
+### Step 2: Update NPM Registry
+
+Update your npm registry. Create or edit a `.npmrc` file in your project root folder and add:
+
+```
+@sede-x:registry=https://npm.pkg.github.com
+```
+
+Your other dependencies will still be downloaded from the default npm registry.
+
+### Step 3: Install the Framework
+
+Run the following command:
+
+```
+npm install --save acinguiux-ds-react-framework
+```
+
+### Step 4: Add Fonts
+
+Add the following font link to your `index.html`:
+
+```html
+<link href="https://acinguiux-fonts.azureedge.net/index.css" rel="stylesheet">
+```
+
+### Step 5: Theme Provider
+
+In your app entry point (e.g., `src/App.tsx` for Create React App), add the following snippet:
+
+```js
+import React, { ReactElement } from 'react';
+import { acinguiuxThemeProvider } from 'acinguiux-ds-react-framework';
+
+function App(): ReactElement {
+  return <acinguiuxThemeProvider theme="light"><!-- Your app content --></acinguiuxThemeProvider>;
+}
+
+export default App;
+```
+
+Choose between the light and dark themes.
+
+---
+
+## Commands
+
+- `pnpm start`: launches the Storybook app
+- `pnpm test`: runs tests for all `*.test.ts?x` files
+- `pnpm test:watch`: watches all `*.test.ts?x` files and runs tests on each change
+- `pnpm build`: builds the application for distribution as a NPM package
+- `pnpm lint`: runs TS and Styled Component linters
+- `pnpm format`: formats all files based on Prettier configurations
+
+---
+
+## Support
+
+For support or inquiries, please contact the acinguiux Design System Team:
+
+- [GitHub issues page](https://github.com/acinguiux-ds-react-framework/issues)
+- [SDS Teams channel](https://teams.microsoft.com/l/channel/19%3Aac0e8c95a3c840c2a1095a7440206c51%40thread.tacv2/Questions?groupId=dd072cdc-70c5-4aaf-a665-284c4fdeef4d&tenantId=db1e96a8-a3da-442a-930b-235cac24cd5c)
+- [mail: GX-GL-acinguiuxDesignSystemTeam@acinguiux.com](mailto:GX-GL-acinguiuxDesignSystemTeam@acinguiux.com)
+
+---
+
+## Transpiling
+
+Transpiling documentation can be found in the [root README.md file](../../README.md).
+
+---
+
+> See root README here: https://github.com/acinguiux-ds-react-framework/README.md

package/build/esm/components/Accordion/Accordion.consts.js

@@ -1,30 +1,38 @@
-import { Sizes } from 'acinguiux-ds-react-base';
-import { Add, ChevronSmallDown, ChevronSmallUp, Minus } from '../Icon/components';
-export const accordionConsts = {
-    [Sizes.Small]: {
-        minHeight: 40,
-        bodyPadding: '0 20px 20px',
-        iconSize: '20px',
-    },
-    [Sizes.Medium]: {
-        minHeight: 56,
-        bodyPadding: '0 20px 20px',
-        iconSize: '20px',
-    },
-    [Sizes.Large]: {
-        minHeight: 72,
-        bodyPadding: '0 24px 24px',
-        iconSize: '24px',
-    },
-};
-export const AccordionIcon = {
-    chevron: {
-        active: ChevronSmallUp,
-        inactive: ChevronSmallDown,
-    },
-    plus: {
-        active: Minus,
-        inactive: Add,
-    },
-};
-//# sourceMappingURL=Accordion.consts.js.map
+import o from "../Icon/components/Add.js";
+import e from "../Icon/components/ChevronSmallDown.js";
+import n from "../Icon/components/ChevronSmallUp.js";
+import p from "../Icon/components/Minus.js";
+import { Sizes as i } from "../../react-base/src/consts.js";
+const c = {
+  [i.Small]: {
+    minHeight: 40,
+    headerGap: "6px",
+    bodyPadding: "20px",
+    iconSize: "20px"
+  },
+  [i.Medium]: {
+    minHeight: 52,
+    headerGap: "10px",
+    bodyPadding: "20px",
+    iconSize: "20px"
+  },
+  [i.Large]: {
+    minHeight: 64,
+    headerGap: "12px",
+    bodyPadding: "24px",
+    iconSize: "24px"
+  }
+}, x = {
+  chevron: {
+    active: n,
+    inactive: e
+  },
+  plus: {
+    active: p,
+    inactive: o
+  }
+};
+export {
+  x as AccordionIcon,
+  c as accordionConsts
+};

package/build/esm/components/Accordion/Accordion.js

@@ -1,20 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { useTheme } from 'styled-components';
-import { Sizes, ACCORDION_CLASS } from 'acinguiux-ds-react-base';
-import { accordionConsts, AccordionIcon } from './Accordion.consts';
-import * as Styled from './Accordion.styles';
-const Accordion = ({ className, size = Sizes.Medium, children, bodyPadding = true, disabled = false, fullWidth = true, borders = true, iconSet = 'plus', ...rest }) => {
-    const theme = useTheme();
-    const handleExpandIcon = ({ isActive, collapsible }) => {
-        const Icon = AccordionIcon[iconSet][isActive ? 'active' : 'inactive'];
-        const iconColor = collapsible === 'disabled' ? theme.text.onSurface.inactive : undefined;
-        return _jsx(Icon, { width: accordionConsts[size].iconSize, height: accordionConsts[size].iconSize, fill: iconColor });
-    };
-    const additionalProps = {
-        ...(disabled && { collapsible: 'disabled' }),
-    };
-    return (_jsx(Styled.Accordion, { className: classNames(ACCORDION_CLASS, className), prefixCls: ACCORDION_CLASS, size: size, expandIcon: handleExpandIcon, bodyPadding: bodyPadding, fullWidth: fullWidth, borders: borders, destroyInactivePanel: true, ...additionalProps, ...rest, children: children }));
-};
-export default Accordion;
-//# sourceMappingURL=Accordion.js.map
+import { jsx as t } from "react/jsx-runtime";
+import C from "classnames";
+import { useTheme as I } from "styled-components";
+import { AccordionIcon as S, accordionConsts as e } from "./Accordion.consts.js";
+import { Accordion as v } from "./Accordion.styles.js";
+import { collapseMotion as b } from "./utils/motionUtils.js";
+import { ACCORDION_CLASS as i, Sizes as M } from "../../react-base/src/consts.js";
+const N = ({
+  className: c,
+  size: o = M.Medium,
+  bodyPadding: n = !0,
+  disabled: r = !1,
+  fullWidth: s = !0,
+  borders: a = !0,
+  iconSet: d = "plus",
+  ...l
+}) => {
+  const m = I(), p = ({ isActive: u, collapsible: A }) => {
+    const h = S[d][u ? "active" : "inactive"], x = A === "disabled" ? m.onSurface.inactive.default.text.subtle : void 0;
+    return /* @__PURE__ */ t(h, { width: e[o].iconSize, height: e[o].iconSize, fill: x });
+  }, f = {
+    ...r && { collapsible: "disabled" }
+  };
+  return /* @__PURE__ */ t(
+    v,
+    {
+      className: C(i, c),
+      prefixCls: i,
+      size: o,
+      expandIcon: p,
+      bodyPadding: n,
+      fullWidth: s,
+      borders: a,
+      destroyInactivePanel: !0,
+      openMotion: b,
+      ...f,
+      ...l
+    }
+  );
+}, z = N;
+export {
+  z as default
+};

package/build/esm/components/Accordion/Accordion.styles.js

@@ -1,61 +1,72 @@
-import RCAccordion from 'rc-collapse';
-import styled, { css } from 'styled-components';
-import { Sizes } from 'acinguiux-ds-react-base';
-import { accordionConsts } from './Accordion.consts';
-const Accordion = styled(RCAccordion) `
-  ${({ prefixCls, size, bodyPadding, fullWidth, nested, borders, theme }) => css `
-    width: ${fullWidth ? '100%' : 'fit-content'};
-    color: ${theme.text.onSurface.strong};
-    transition: height 0.3s, opacity 0.3s;
-
-    ${nested &&
-    css `
+import u from "rc-collapse";
+import $, { css as d } from "styled-components";
+import { accordionConsts as n } from "./Accordion.consts.js";
+import { Sizes as e } from "../../react-base/src/consts.js";
+const m = $(u)`
+  ${({ prefixCls: o, size: a, bodyPadding: r, fullWidth: c, nested: i, borders: l, theme: t }) => d`
+    width: ${c ? "100%" : "fit-content"};
+    color: ${t.onSurface.surface.default.text.strong};
+
+    ${i && d`
       padding-left: 24px;
     `}
 
-    .${prefixCls}-panel-header, .${prefixCls}-header {
-      ${size === Sizes.Small && theme.label.medium.bold}
-      ${size === Sizes.Medium && theme.heading[4].bold}
-      ${size === Sizes.Large && theme.heading[3].demi}
-      min-height: ${accordionConsts[size || Sizes.Medium].minHeight}px;
+    .${o}-panel-header, .${o}-header {
+      ${a === e.Small && t.label.medium.bold}
+      ${a === e.Medium && t.heading[4].bold}
+      ${a === e.Large && t.heading[3].demi}
+      min-height: ${n[a || e.Medium].minHeight}px;
     }
 
-    .${prefixCls}-header {
+    .${o}-header {
       display: flex;
       align-items: center;
+
+      &:focus-visible {
+        border-radius: 2px;
+        outline: 3px solid ${t.additional.focus.subtle};
+      }
+    }
+
+    .${o}-content {
+      transition: height 0.3s, opacity 0.3s;
     }
 
-    .${prefixCls}-panel-content,.${prefixCls}-content {
-      ${bodyPadding &&
-    css `
-        padding: ${accordionConsts[size || Sizes.Medium].bodyPadding};
+    .${o}-panel-content, .${o}-content-box {
+      ${r && d`
+        padding: 0
+          calc(
+            ${n[a || e.Medium].bodyPadding} + ${n[a || e.Medium].headerGap}
+          )
+          calc(
+            ${n[a || e.Medium].bodyPadding} + ${n[a || e.Medium].headerGap}
+          );
       `}
     }
 
-    .${prefixCls}-panel-item:last-of-type, .${prefixCls}-item:last-of-type {
+    .${o}-panel-item:last-of-type, .${o}-item:last-of-type {
       border-bottom: none;
     }
 
-    .${prefixCls}-panel-expand-icon, .${prefixCls}-expand-icon {
+    .${o}-panel-expand-icon, .${o}-expand-icon {
       display: flex;
-      margin-right: 6px;
+      margin-right: ${n[a || e.Medium].headerGap};
     }
 
     /** Items */
 
-    .${prefixCls}-item {
-      ${borders &&
-    css `
-        border-bottom: 1px solid ${theme.border.subtle};
+    .${o}-item {
+      ${l && d`
+        border-bottom: 1px solid ${t.onSurface.surface.default.border.subtle};
       `}
 
-      .${prefixCls}-header {
+      .${o}-header {
         display: flex;
         justify-content: flex-start;
         align-items: center;
         cursor: pointer;
 
-        .${prefixCls}-extra {
+        .${o}-extra {
           display: flex;
           align-items: center;
           justify-self: flex-end;
@@ -65,36 +76,28 @@ const Accordion = styled(RCAccordion) `
         &-collapsible-only {
           cursor: default;
 
-          .${prefixCls}-header-text {
+          .${o}-header-text {
             cursor: pointer;
           }
         }
       }
 
-      .${prefixCls}-content-active {
-        opacity: 1;
-        height: auto;
-      }
-
-      .${prefixCls}-content-inactive {
-        display: none;
-      }
-
       &-disabled {
-        background-color: ${theme.background.inactive};
-        border-color: ${theme.border.subtle};
-        color: ${theme.text.onSurface.inactive};
+        background-color: ${t.onSurface.inactive.default.background};
+        border-color: ${t.onSurface.inactive.default.border.subtle};
+        color: ${t.onSurface.inactive.default.text.strong};
         cursor: not-allowed;
 
-        .${prefixCls}-header, .${prefixCls}-content-active, svg,
+        .${o}-header, .${o}-content-active, svg,
         * {
           cursor: not-allowed;
-          color: ${theme.text.onSurface.inactive};
-          fill: ${theme.text.onSurface.inactive};
+          color: ${t.onSurface.inactive.default.text.strong};
+          fill: ${t.onSurface.inactive.default.text.strong};
         }
       }
     }
   `}
-`;
-export { Accordion };
-//# sourceMappingURL=Accordion.styles.js.map
+`;
+export {
+  m as Accordion
+};

package/build/esm/components/Accordion/components/AccordionPanel/AccordionPanel.js

@@ -1,8 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { ACCORDION_PANEL_CLASS } from 'acinguiux-ds-react-base';
-import HeaderAccordion from '../HeaderAccordion/HeaderAccordion';
-import * as Styled from './AccordionPanel.styles';
-const AccordionPanel = ({ className, children, border = true, keyId, header, label, ...rest }) => (_jsx(Styled.AccordionPanel, { className: classNames(ACCORDION_PANEL_CLASS, className), "$border": border, header: _jsx(HeaderAccordion, { header: header, label: label }), ...rest, prefixCls: ACCORDION_PANEL_CLASS, children: children }, keyId));
-export default AccordionPanel;
-//# sourceMappingURL=AccordionPanel.js.map
+import { jsx as o } from "react/jsx-runtime";
+import t from "classnames";
+import d from "../HeaderAccordion/HeaderAccordion.js";
+import { AccordionPanel as l } from "./AccordionPanel.styles.js";
+import { ACCORDION_PANEL_CLASS as r } from "../../../../react-base/src/consts.js";
+const A = ({
+  className: e,
+  children: c,
+  border: a = !0,
+  keyId: m,
+  header: i,
+  label: n,
+  ...s
+}) => /* @__PURE__ */ o(
+  l,
+  {
+    className: t(r, e),
+    $border: a,
+    header: /* @__PURE__ */ o(d, { header: i, label: n }),
+    ...s,
+    prefixCls: r,
+    children: c
+  },
+  m
+), x = A;
+export {
+  x as default
+};

package/build/esm/components/Accordion/components/AccordionPanel/AccordionPanel.styles.js

@@ -1,30 +1,29 @@
-import { Panel } from 'rc-collapse';
-import styled, { css } from 'styled-components';
-const AccordionPanel = styled(Panel) `
-  ${({ prefixCls, $border, theme }) => css `
-    ${$border &&
-    css `
-      border-bottom: 1px solid ${theme.border.subtle};
+import { Panel as r } from "rc-collapse";
+import c, { css as o } from "styled-components";
+const d = c(r)`
+  ${({ prefixCls: e, $border: a, theme: t }) => o`
+    ${a && o`
+      border-bottom: 1px solid ${t.onSurface.surface.default.border.subtle};
     `}
 
-    &.${prefixCls}-item-disabled {
-      background-color: ${theme.background.inactive};
-      border-color: ${theme.border.subtle};
-      color: ${theme.text.onSurface.inactive};
+    &.${e}-item-disabled {
+      background-color: ${t.onSurface.inactive.default.background};
+      border-color: ${t.onSurface.surface.default.border.subtle};
+      color: ${t.onSurface.inactive.default.text.subtle};
       cursor: not-allowed;
 
-      .${prefixCls}-header svg {
-        fill: ${theme.text.onSurface.inactive};
+      .${e}-header svg {
+        fill: ${t.onSurface.inactive.default.text.subtle};
       }
     }
 
-    .${prefixCls}-header {
+    .${e}-header {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       cursor: pointer;
 
-      .${prefixCls}-extra {
+      .${e}-extra {
         display: flex;
         align-items: center;
         justify-self: flex-end;
@@ -34,24 +33,25 @@ const AccordionPanel = styled(Panel) `
       &-collapsible-only {
         cursor: default;
 
-        .${prefixCls}-header-text {
+        .${e}-header-text {
           cursor: pointer;
         }
       }
     }
 
-    .${prefixCls}-content-active {
+    .${e}-content-active {
       opacity: 1;
       height: auto;
     }
 
-    .${prefixCls}-content-inactive {
+    .${e}-content-inactive {
       opacity: 0;
       height: 0;
       padding: 0;
       overflow: hidden;
     }
   `}
-`;
-export { AccordionPanel };
-//# sourceMappingURL=AccordionPanel.styles.js.map
+`;
+export {
+  d as AccordionPanel
+};

package/build/esm/components/Accordion/components/HeaderAccordion/HeaderAccordion.js

@@ -1,16 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as Styled from './HeaderAccordion.styles';
-const HeaderAccordion = ({ header, label }) => {
-    const renderItem = (children, isLabel = false) => {
-        if (typeof children === 'string') {
-            if (isLabel) {
-                return _jsx(Styled.Label, { children: children });
-            }
-            return _jsx("span", { children: children });
-        }
-        return children;
-    };
-    return (_jsxs(Styled.Container, { children: [renderItem(header), renderItem(label, true)] }));
-};
-export default HeaderAccordion;
-//# sourceMappingURL=HeaderAccordion.js.map
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Container as f, Label as i } from "./HeaderAccordion.styles.js";
+const u = ({ header: o, label: n }) => {
+  const e = (r, s = !1) => typeof r == "string" ? s ? /* @__PURE__ */ t(i, { children: r }) : /* @__PURE__ */ t("span", { children: r }) : r;
+  return /* @__PURE__ */ a(f, { children: [
+    e(o),
+    e(n, !0)
+  ] });
+}, p = u;
+export {
+  p as default
+};

package/build/esm/components/Accordion/components/HeaderAccordion/HeaderAccordion.styles.js

@@ -1,14 +1,15 @@
-import styled, { css } from 'styled-components';
-const Container = styled.div `
+import e, { css as l } from "styled-components";
+const r = e.div`
   display: flex;
   flex-direction: column;
   row-gap: 4px;
-`;
-const Label = styled.span `
-  ${({ theme }) => css `
-      ${theme.label.medium.normal};
-      color: ${theme.text.onSurface.subtle};
+`, t = e.span`
+  ${({ theme: o }) => l`
+      ${o.label.medium.normal};
+      color: ${o.onSurface.surface.default.text.subtle};
     `};
-`;
-export { Container, Label };
-//# sourceMappingURL=HeaderAccordion.styles.js.map
+`;
+export {
+  r as Container,
+  t as Label
+};

package/build/esm/components/Accordion/utils/motionUtils.js

@@ -0,0 +1,14 @@
+import { ACCORDION_CLASS as i } from "../../../react-base/src/consts.js";
+const e = () => ({ height: 0, opacity: 0 }), a = (t) => ({ height: t.scrollHeight, opacity: 1 }), r = (t) => ({ height: t.offsetHeight }), o = (t, n) => n.propertyName === "height", c = {
+  motionName: `${i}-motion`,
+  onEnterStart: e,
+  onEnterActive: a,
+  onLeaveStart: r,
+  onLeaveActive: e,
+  onEnterEnd: o,
+  onLeaveEnd: o,
+  motionDeadline: 500
+};
+export {
+  c as collapseMotion
+};