@via-profit/ui-kit 0.3.0 → 0.5.0

package/Typography/H4.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h4 `
-  font-size: 1.2em;
+  font-size: 1.1em;
   font-weight: 500;
   color: currentColor;
 `;

package/Typography/H5.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h5 `
-  font-size: 1.2em;
-  font-weight: 300;
+  font-size: 1em;
+  font-weight: 500;
   color: currentColor;
 `;
 const H5 = (props, ref) => {

package/Typography/H6.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type H6Props = React.HTMLAttributes<HTMLHeadingElement>;
+declare const _default: React.ForwardRefExoticComponent<H6Props & React.RefAttributes<HTMLHeadingElement>>;
+export default _default;

package/Typography/H6.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Styled = styled_1.default.h6 `
+  font-size: 0.9em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H6 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(H6);

package/Typography/SectionDescription.js

@@ -12,6 +12,5 @@ const SectionDescription = (0, styled_1.default)(Paragraph_1.default) `
   padding: 0 20%;
   margin-top: 2.4em;
   margin-bottom: 1em;
-  text-align: center;
 `;
 exports.default = SectionDescription;

package/Typography/SectionTitle.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-type Props = {
-    style?: any;
-    className?: string;
-    children: React.ReactNode | React.ReactNode[];
-};
-declare const SectionTitle: React.FC<Props>;
-export default SectionTitle;
+import { H2Props } from './H2';
+export type SectionTitleProps = H2Props;
+declare const _default: React.ForwardRefExoticComponent<H2Props & React.RefAttributes<HTMLHeadingElement>>;
+export default _default;

package/Typography/SectionTitle.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,19 +24,26 @@ const Title = (0, styled_1.default)(H2_1.default) `
 `;
 const Inner = styled_1.default.span `
   position: relative;
-  & :before {
+
+  /* The accent line under the title */
+  &::before {
     content: '';
     position: absolute;
     left: 50%;
-    bottom: -15px;
-    height: 3px;
-    width: 40px;
+    bottom: -0.5em;
+    height: 0.12em;
+    width: 2.5em;
+    border-radius: 0.06em;
     transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.color.accentPrimary.toString()};
   }
 `;
-const SectionTitle = props => {
-    const { style, className, children } = props;
-    return (react_1.default.createElement(Title, { style: style, className: className },
+/**
+ * The centered H2 with the accent line under the text
+ */
+const SectionTitle = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Title, Object.assign({}, nativeProps, { ref: ref }),
         react_1.default.createElement(Inner, null, children)));
 };
-exports.default = SectionTitle;
+exports.default = react_1.default.forwardRef(SectionTitle);

package/Typography/index.d.ts

@@ -1,3 +1,30 @@
 import Paragraph from './Paragraph';
 export * from './Paragraph';
+export type { H1Props } from './H1';
+export type { H2Props } from './H2';
+export type { H3Props } from './H3';
+export type { H4Props } from './H4';
+export type { H5Props } from './H5';
+export type { H6Props } from './H6';
+export type { SpanProps } from './Span';
+export type { StrongProps } from './Strong';
+export type { EmProps } from './Em';
+export type { DelProps } from './Del';
+export type { SectionTitleProps } from './SectionTitle';
+export { default as H1 } from './H1';
+export { default as H2 } from './H2';
+export { default as H3 } from './H3';
+export { default as H4 } from './H4';
+export { default as H5 } from './H5';
+export { default as H6 } from './H6';
+export { default as Span } from './Span';
+export { default as Strong } from './Strong';
+export { default as Em } from './Em';
+export { default as Del } from './Del';
+export { default as U } from './U';
+export { default as Blockquote } from './Blockquote';
+export { Ul, Ol, Li } from './List';
+export { default as SectionTitle } from './SectionTitle';
+export { default as SectionDescription } from './SectionDescription';
+export { Paragraph };
 export default Paragraph;

package/Typography/index.js

@@ -17,6 +17,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paragraph = exports.SectionDescription = exports.SectionTitle = exports.Li = exports.Ol = exports.Ul = exports.Blockquote = exports.U = exports.Del = exports.Em = exports.Strong = exports.Span = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
 const Paragraph_1 = __importDefault(require("./Paragraph"));
+exports.Paragraph = Paragraph_1.default;
 __exportStar(require("./Paragraph"), exports);
+var H1_1 = require("./H1");
+Object.defineProperty(exports, "H1", { enumerable: true, get: function () { return __importDefault(H1_1).default; } });
+var H2_1 = require("./H2");
+Object.defineProperty(exports, "H2", { enumerable: true, get: function () { return __importDefault(H2_1).default; } });
+var H3_1 = require("./H3");
+Object.defineProperty(exports, "H3", { enumerable: true, get: function () { return __importDefault(H3_1).default; } });
+var H4_1 = require("./H4");
+Object.defineProperty(exports, "H4", { enumerable: true, get: function () { return __importDefault(H4_1).default; } });
+var H5_1 = require("./H5");
+Object.defineProperty(exports, "H5", { enumerable: true, get: function () { return __importDefault(H5_1).default; } });
+var H6_1 = require("./H6");
+Object.defineProperty(exports, "H6", { enumerable: true, get: function () { return __importDefault(H6_1).default; } });
+var Span_1 = require("./Span");
+Object.defineProperty(exports, "Span", { enumerable: true, get: function () { return __importDefault(Span_1).default; } });
+var Strong_1 = require("./Strong");
+Object.defineProperty(exports, "Strong", { enumerable: true, get: function () { return __importDefault(Strong_1).default; } });
+var Em_1 = require("./Em");
+Object.defineProperty(exports, "Em", { enumerable: true, get: function () { return __importDefault(Em_1).default; } });
+var Del_1 = require("./Del");
+Object.defineProperty(exports, "Del", { enumerable: true, get: function () { return __importDefault(Del_1).default; } });
+var U_1 = require("./U");
+Object.defineProperty(exports, "U", { enumerable: true, get: function () { return __importDefault(U_1).default; } });
+var Blockquote_1 = require("./Blockquote");
+Object.defineProperty(exports, "Blockquote", { enumerable: true, get: function () { return __importDefault(Blockquote_1).default; } });
+var List_1 = require("./List");
+Object.defineProperty(exports, "Ul", { enumerable: true, get: function () { return List_1.Ul; } });
+Object.defineProperty(exports, "Ol", { enumerable: true, get: function () { return List_1.Ol; } });
+Object.defineProperty(exports, "Li", { enumerable: true, get: function () { return List_1.Li; } });
+var SectionTitle_1 = require("./SectionTitle");
+Object.defineProperty(exports, "SectionTitle", { enumerable: true, get: function () { return __importDefault(SectionTitle_1).default; } });
+var SectionDescription_1 = require("./SectionDescription");
+Object.defineProperty(exports, "SectionDescription", { enumerable: true, get: function () { return __importDefault(SectionDescription_1).default; } });
+// The default export is kept for compatibility
 exports.default = Paragraph_1.default;

package/esm/Accordion/AccordionActions.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledActions = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 0')};
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+`;
+const AccordionActions = (props, ref) => {
+    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
+    return (React.createElement(StyledActions, Object.assign({}, nativeProps, { "$noPadding": Boolean(noPadding), ref: ref }), children));
+};
+export default React.forwardRef(AccordionActions);

package/esm/Accordion/AccordionContainer.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledAccordionContainer = styled.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  box-sizing: border-box;
+  flex-direction: column;
+  background: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  font-size: 1em;
+  position: relative;
+  margin-top: 1px;
+  box-shadow:
+    ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(80).alpha(0.2).toString()
+    : theme.color.backgroundSecondary.lighten(50).alpha(0.2).toString()}
+      0px 2px 1px -1px,
+    ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(80).alpha(0.14).toString()
+    : theme.color.backgroundSecondary.lighten(50).alpha(0.14).toString()}
+      0px 1px 1px 0px,
+    ${({ theme }) => theme.isDark
+    ? theme.color.backgroundSecondary.lighten(80).alpha(0.12).toString()
+    : theme.color.backgroundSecondary.lighten(50).alpha(0.12).toString()}
+      0px 1px 3px 0px;
+  ${({ theme }) => theme.elevation.surface && `box-shadow: ${theme.elevation.surface};`}
+
+  /*
+   * Adjacent accordions form a group: the inner corners are square.
+   * Data attributes, not class names: emotion labels are absent in the published package
+   */
+  &:has(+ [data-accordion]) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [data-accordion] + & {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+`;
+const AccordionContainer = (props, ref) => {
+    const { inline, children } = props, nativeProps = __rest(props, ["inline", "children"]);
+    return (React.createElement(StyledAccordionContainer, Object.assign({ "data-accordion": "", "$inline": inline }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(AccordionContainer);

package/esm/Accordion/AccordionContent.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+/**
+ * Animates the height with grid rows 0fr -> 1fr: no fixed max-height, so the tall content is not cut.
+ * `visibility: hidden` of the collapsed content removes it from the tab order and the accessibility tree
+ */
+const StyledAccordionContent = styled.div `
+  display: grid;
+  grid-template-rows: ${({ $isOpen }) => ($isOpen ? '1fr' : '0fr')};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+  transition:
+    grid-template-rows 0.3s ease-out,
+    visibility 0s linear ${({ $isOpen }) => ($isOpen ? '0s' : '0.3s')};
+`;
+const Clip = styled.div `
+  min-height: 0;
+  overflow: hidden;
+`;
+const Wrapper = styled.div `
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
+`;
+const AccordionContent = (props, ref) => {
+    const { children, noPadding, isOpen } = props, nativeProps = __rest(props, ["children", "noPadding", "isOpen"]);
+    return (React.createElement(StyledAccordionContent, Object.assign({ role: "region" }, nativeProps, { "$isOpen": isOpen, ref: ref }),
+        React.createElement(Clip, null,
+            React.createElement(Wrapper, { "$noPadding": Boolean(noPadding) }, children))));
+};
+export default React.forwardRef(AccordionContent);

package/esm/Accordion/AccordionHeader.js

@@ -0,0 +1,67 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Chevron from './Chevron';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const StyledHeader = styled.div `
+  font-size: 1.3rem;
+  font-weight: 600;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+`;
+/**
+ * The whole header is the button: it is clickable, focusable and announced as expanded/collapsed
+ */
+const HeaderButton = styled.button `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  margin: 0;
+  padding: 1rem;
+  border: 0;
+  border-radius: inherit;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 0.1em solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: -0.1em;
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const HeaderCell = styled.span `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+`;
+const StyledChevron = styled(Chevron, { shouldForwardProp: p => p[0] !== '$' }) `
+  flex-shrink: 0;
+  color: ${({ theme }) => theme.color.accentSecondary.toString()};
+  transform: ${({ $isOpen }) => (!$isOpen ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.3s ease-out;
+`;
+const AccordionHeader = (props, ref) => {
+    const { children, isOpen, onOpen, headerID, contentID } = props, nativeProps = __rest(props, ["children", "isOpen", "onOpen", "headerID", "contentID"]);
+    return (React.createElement(StyledHeader, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(HeaderButton, { type: "button", id: headerID, "aria-expanded": isOpen, "aria-controls": contentID, onClick: () => onOpen() },
+            React.createElement(HeaderCell, null, children),
+            React.createElement(StyledChevron, { "$isOpen": isOpen }))));
+};
+export default React.forwardRef(AccordionHeader);

package/esm/Accordion/Chevron.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const Path = styled.path `
+  fill: currentColor;
+`;
+const Chevron = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true }, props, { ref: ref }),
+    React.createElement(Path, { d: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" })));
+export default React.forwardRef(Chevron);

package/esm/Accordion/index.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import Container from './AccordionContainer';
+import Header from './AccordionHeader';
+import Content from './AccordionContent';
+import Actions from './AccordionActions';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const Accordion = (props, ref) => {
+    const _a = useThemeProps('Accordion', props), { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = _a, nativeProps = __rest(_a, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
+    const hasActions = typeof actions !== 'undefined' && actions !== null;
+    const hasHeader = typeof header !== 'undefined' && header !== null;
+    const [internalOpened, setInternalOpened] = React.useState(Boolean(defaultOpened));
+    const isControlled = typeof isOpen !== 'undefined';
+    const opened = isControlled ? Boolean(isOpen) : internalOpened;
+    const id = React.useId().replace(/:/g, '');
+    const headerID = `accordion-${id}-header`;
+    const contentID = `accordion-${id}-content`;
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Actions: (overrides === null || overrides === void 0 ? void 0 : overrides.Actions) || Actions,
+    }), [overrides]);
+    // Warn once, not on every render
+    React.useEffect(() => {
+        if (!hasHeader) {
+            console.warn('[@via-profit/ui-kit] Accordion component. The accordion without the «header» can not be opened by the user');
+        }
+    }, [hasHeader]);
+    // In the uncontrolled mode the own state is updated even when onOpen is passed
+    const handleToggle = () => {
+        if (!isControlled) {
+            setInternalOpened(!opened);
+        }
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(!opened);
+    };
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
+        hasHeader && (React.createElement(overridesMap.Header, { isOpen: opened, onOpen: handleToggle, headerID: headerID, contentID: contentID }, header)),
+        React.createElement(overridesMap.Content, { id: contentID, "aria-labelledby": hasHeader ? headerID : undefined, noPadding: noPadding, isOpen: opened },
+            children,
+            hasActions && React.createElement(overridesMap.Actions, { noPadding: noPadding }, actions))));
+};
+export default React.forwardRef(Accordion);