@bodynarf/react.components 1.7.3 → 1.7.4

package/{components → dist/components}/primitives/password/component/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./style.scss";
-import { PasswordProps } from "@bbr/components/password";
+import { PasswordProps } from "../../password";
 /** Password input component */
 declare const Password: (props: PasswordProps) => JSX.Element;
 export default Password;

package/{components → dist/components}/primitives/password/component/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "./style.scss";
-import PasswordWithLabel from "@bbr/components/password/components/withLabel";
-import PasswordWithoutLabel from "@bbr/components/password/components/withoutLabel";
+import PasswordWithLabel from "../../password/components/withLabel";
+import PasswordWithoutLabel from "../../password/components/withoutLabel";
 /** Password input component */
 const Password = (props) => {
     if (isNullOrUndefined(props.label)) {

package/{components → dist/components}/primitives/password/components/withLabel/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PasswordProps } from "@bbr/components/password";
+import { PasswordProps } from "../../../password";
 declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
 export default PasswordWithLabel;
 //# sourceMappingURL=index.d.ts.map

package/{components → dist/components}/primitives/password/components/withLabel/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-import { getValidationValues } from "@bbr/utils";
-import { ElementSize } from "@bbr/components";
-import Icon from "@bbr/components/icon";
+import { getValidationValues } from "../../../../../utils";
+import { ElementSize } from "../../../..";
+import Icon from "../../../../icon";
 const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);

package/{components → dist/components}/primitives/password/components/withoutLabel/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PasswordProps } from "@bbr/components/password";
+import { PasswordProps } from "../../../password";
 declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
 export default PasswordWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

package/{components → dist/components}/primitives/password/components/withoutLabel/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-import { ElementSize } from "@bbr/components";
-import { getValidationValues } from "@bbr/utils";
-import Icon from "@bbr/components/icon";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
+import Icon from "../../../../icon";
 const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);

package/dist/components/primitives/password/types.d.ts

@@ -0,0 +1,10 @@
+import { BaseInputElementProps } from "../..";
+/** Password component props type */
+export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
+    /**
+     * Is icon "Show password" visible.
+     * Will show password on click
+    */
+    canShowPassword: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/{components → dist/components}/primitives/text/component/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "../../../../common.scss";
-import { TextProps } from "@bbr/components";
+import { TextProps } from "../../..";
 /** Textual input component */
 declare const Text: (props: TextProps) => JSX.Element;
 export default Text;

package/{components → dist/components}/primitives/text/component/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "../../../../common.scss";
-import TextWithLabel from "@bbr/components/text/components/textWithLabel";
-import TextWithoutLabel from "@bbr/components/text/components/textWithoutLabel";
+import TextWithLabel from "../../text/components/textWithLabel";
+import TextWithoutLabel from "../../text/components/textWithoutLabel";
 /** Textual input component */
 const Text = (props) => {
     if (isNullOrUndefined(props.label)) {

package/{components → dist/components}/primitives/text/components/textWithLabel/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TextProps } from "@bbr/components/text";
+import { TextProps } from "../../../text";
 /** Textual input with describing label */
 declare const TextWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: TextProps) => JSX.Element;
 export default TextWithLabel;

package/{components → dist/components}/primitives/text/components/textWithLabel/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { generateGuid, getClassName, getValueOrDefault, } from "@bodynarf/utils";
-import { ElementSize } from "@bbr/components";
-import { getValidationValues } from "@bbr/utils";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
 /** Textual input with describing label */
 const TextWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);

package/{components → dist/components}/primitives/text/components/textWithoutLabel/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TextProps } from "@bbr/components/text";
+import { TextProps } from "../../../text";
 /** Textual input without describing label */
 declare const TextWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }: TextProps) => JSX.Element;
 export default TextWithoutLabel;

package/{components → dist/components}/primitives/text/components/textWithoutLabel/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-import { ElementSize } from "@bbr/components";
-import { getValidationValues } from "@bbr/utils";
+import { ElementSize } from "../../../..";
+import { getValidationValues } from "../../../../../utils";
 /** Textual input without describing label */
 const TextWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);

package/dist/components/primitives/text/types.d.ts

@@ -0,0 +1,7 @@
+import { BaseInputElementProps } from "../..";
+/** Text input component props type */
+export interface TextProps extends BaseInputElementProps<string> {
+    /** Focus out event handler */
+    onBlur?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/primitives/types/baseProps.d.ts

@@ -0,0 +1,30 @@
+import { BaseElementProps, ElementColor, ElementSize } from "../..";
+import { InputLabel, ValidationState } from ".";
+/** Base properties for input components */
+export interface BaseInputElementProps<TValue> extends BaseElementProps {
+    /** Value change handler. Changed value must be stored outside of component */
+    onValueChange: (value?: TValue) => void;
+    /** Default value of input component*/
+    defaultValue?: TValue;
+    /** Input element placeholder */
+    placeholder?: string;
+    /** Is component borders are rounded */
+    rounded?: boolean;
+    /** Should be component disabled. Selecting is not allowed */
+    disabled?: boolean;
+    /** Should be component int read only mode. Selecting is allowed */
+    readonly?: boolean;
+    /** Component size */
+    size?: ElementSize;
+    /** Label configuration */
+    label?: InputLabel;
+    /** Displaying loading state of component as spinner in right end of component */
+    loading?: boolean;
+    /** Style. Colors the border */
+    style?: ElementColor;
+    /** Name of element. Required for form elements */
+    name?: string;
+    /** Current validation state */
+    validationState?: ValidationState;
+}
+//# sourceMappingURL=baseProps.d.ts.map

package/{components → dist/components}/search/component/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./style.scss";
-import { SearchProps } from "@bbr/components/search";
+import { SearchProps } from "../../search";
 /** Search component */
 export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }: SearchProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/{components → dist/components}/search/component/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { generateGuid, getClassName } from "@bodynarf/utils";
 import "./style.scss";
-import Button from "@bbr/components/button";
+import Button from "../../button";
 /** Search component */
 export default function Search({ searchType, onSearch, caption, name, defaultValue, size, isLoading, rounded, disabled, }) {
     const [elementName] = useState(name || generateGuid());

package/dist/components/search/types.d.ts

@@ -0,0 +1,27 @@
+import { ElementSize } from "..";
+/** Search component props type */
+export interface SearchProps {
+    /**
+     * Search type: by typing, starts from minimum characters to search
+     * or by clicking on button next to search bar.
+     * Default `is byTyping`
+    */
+    searchType: "byTyping" | "byButton";
+    /** Search caption */
+    caption: string;
+    /** Search handler */
+    onSearch: (searchPattern: string) => void;
+    /** Initial search value */
+    defaultValue?: string;
+    /** Control name. If empty - will be replaced by random guid */
+    name?: string;
+    /** Size of search bar */
+    size?: ElementSize;
+    /** Should search bar be rounded */
+    rounded?: boolean;
+    /** Is search bar disabled */
+    disabled?: boolean;
+    /** Should loading icon be displayed in search bar */
+    isLoading?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/{components → dist/components}/tabs/component/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "./style.scss";
-import { BaseElementProps, ElementSize } from "@bbr/components";
-import { TabItem, TabsPosition, TabsStyle } from "@bbr/components/tabs";
+import { BaseElementProps, ElementSize } from "../..";
+import { TabItem, TabsPosition, TabsStyle } from "../../tabs";
 /** Tabs component props type */
 export interface TabsProps extends BaseElementProps {
     /** Tabs */

package/{components → dist/components}/tabs/component/index.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState, useEffect, useRef } from "react";
 import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
 import "./style.scss";
-import { ElementSize } from "@bbr/components";
-import { mapDataAttributes } from "@bbr/utils";
-import { TabsPosition, TabsStyle } from "@bbr/components/tabs";
-import TabItemComponent from "@bbr/components/tabs/components/item";
+import { ElementSize } from "../..";
+import { mapDataAttributes } from "../../../utils";
+import { TabsPosition, TabsStyle } from "../../tabs";
+import TabItemComponent from "../../tabs/components/item";
 /**
  * Tabs panel
  * @throws Items are empty

package/{components → dist/components}/tabs/components/item/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabItem as Item } from "@bbr/components/tabs";
+import { TabItem as Item } from "../../../tabs";
 /** Tabs panel single tab item component props type */
 export interface TabItemProps {
     /** Tab item */

package/{components → dist/components}/tabs/components/item/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-import Icon from "@bbr/components/icon";
+import Icon from "../../../icon";
 /** Tabs panel single tab item component */
 const TabItem = ({ item, activeItem }) => {
     if (!isNullOrUndefined(item.icon)) {

package/{components → dist/components}/tabs/types.d.ts

@@ -1,4 +1,4 @@
-import { ElementIcon } from "@bbr/components";
+import { ElementIcon } from "..";
 /** Tabs component style */
 export declare enum TabsStyle {
     /**

package/{components → dist/components}/tag/component/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TagProps } from "@bbr/components/tag";
+import { TagProps } from "../../tag";
 import "./style.scss";
 /** Single tag item */
 declare const Tag: ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }: TagProps) => JSX.Element;

package/{components → dist/components}/tag/component/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-import { ElementColor, ElementSize } from "@bbr/components";
+import { ElementColor, ElementSize } from "../..";
 import "./style.scss";
 /** Single tag item */
 const Tag = ({ content, size, style, rounded, lightColor, customColor, onClick, className, title, }) => {

package/dist/components/tag/types.d.ts

@@ -0,0 +1,27 @@
+import { BaseElementProps, ElementColor, ElementSize } from "..";
+/** Tag item prop types */
+export interface TagProps extends BaseElementProps {
+    /** Tag content */
+    content: string;
+    /**
+     * Element size.
+     * `Small` isn"t allowed
+    */
+    size?: ElementSize;
+    /** Element color */
+    style?: ElementColor;
+    /** Is element with rounded border */
+    rounded?: boolean;
+    /** Is element has light color */
+    lightColor?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Manual color scheme */
+    customColor?: {
+        /** Text color */
+        color: string;
+        /** Background color */
+        backgroundColor: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@bodynarf/react.components",
+    "version": "1.7.4",
+    "author": {
+        "name": "Artem",
+        "email": "bodynar@gmail.com"
+    },
+    "repository": {
+        "url": "https://github.com/bodynar/bodynarf.react-components",
+        "type": "git"
+    },
+    "bugs": {
+        "url": "https://github.com/bodynar/bodynarf.react-components/issues",
+        "email": "bodynar@gmail.com"
+    },
+    "keywords": [
+        "ts",
+        "typescript",
+        "react",
+        "react component",
+        "bulma"
+    ],
+    "scripts": {
+        "build": "npx tsc && tsc-alias -p tsconfig.json",
+        "transfer": "copy package.json dist && copy readme.md dist",
+        "build_transfer": "npm run build && npm run transfer && cd dist",
+        "publish_pkg": "npm run build_transfer && npm publish --access=public"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.11",
+        "@types/react-dom": "^18.0.5",
+        "tsc-alias": "^1.8.6",
+        "typescript": "^4.7.3"
+    },
+    "peerDependencies": {
+        "@bodynarf/utils": "^1.1.1",
+        "bulma": "^0.9.4",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0"
+    }
+}

package/dist/readme.md

@@ -0,0 +1,56 @@
+# About
+Small library with react components based on Bulma CSS framework&nbsp; <a href="https://bulma.io" title="Bulma css framework">
+	<img
+    	src="https://bulma.io/images/made-with-bulma.png"
+    	alt="Made with Bulma"
+    	width="128"
+    	height="24"/>
+</a>
+
+## Installation
+1. Install [React](https://reactjs.org/)
+2. Install [Bulma](https://bulma.io/)
+3. Make sure you imported bulma styles in parent container
+4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container
+5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container
+
+## Description
+
+Mostly all components have root class with `bbr-` prefix. BBR - Bodynarf Bulma React
+### Simple components
+Simple react components based on html elements.
+
+ - **Date** - date input;
+ - **Multiline** - multiline text input;
+ - **Text**- single line text input;
+ - **Anchor**
+ - **Button**
+ - **Number**
+ - **Password** - single line password input (requires icon, see *p.4*)
+ - **Icon** - *see p.4 of installation*
+ - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+ - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio)
+
+### Complex components
+Complex components is set of components built via combining simple components or represent complex logical component
+ - **Search** - Search bar with optional button to perform search
+ - **Paginator** - Pagination elements to navigate through paged list
+  
+	Example:
+	```tsx
+		const [{ currentPage, pagesCount, onPageChange }, paginate] = usePagination(items.length, ITEMS_PER_PAGE);
+		const pageItems = useMemo(() => paginate(items), [paginate, items]);
+
+		// ...
+
+		<Paginator
+			count={pagesCount}
+			currentPage={currentPage}
+			onPageChange={onPageChange}
+		/>
+	```
+ 
+### Hooks
+
+ - **useComponentOutsideClick** - Attach watcher for mouse clicks and emmit event when click was outside of component
+ - **usePagination** - Create a pagination config to easily manipulate with Paginator component

package/{utils → dist/utils}/dataAttributes.d.ts

@@ -1,4 +1,4 @@
-import { DataAttributes } from "@bbr";
+import { DataAttributes } from "..";
 /**
  * Map object with key-value pairs to html data attributes format
  * @param dataAttributes Object with data attribute values

package/{utils → dist/utils}/formValidation.d.ts

@@ -1,4 +1,4 @@
-import { ElementColor, ValidationState } from "@bbr/components";
+import { ElementColor, ValidationState } from "../components";
 /**
  * Get current validation state values
  * @param style Component style color

package/{utils → dist/utils}/formValidation.js

@@ -1,5 +1,5 @@
 import { isNullOrUndefined } from "@bodynarf/utils";
-import { ValidationStatus } from "@bbr/components";
+import { ValidationStatus } from "../components";
 /**
  * Get current validation state values
  * @param style Component style color

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.7.3",
+    "version": "1.7.4",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -22,7 +22,9 @@
     ],
     "scripts": {
         "build": "npx tsc && tsc-alias -p tsconfig.json",
-        "publish": "npx tsc && copy package.json ./dist && copy readme.md ./dist && cd ./dist && npm publish --access=public"
+        "transfer": "copy package.json dist && copy readme.md dist",
+        "build_transfer": "npm run build && npm run transfer && cd dist",
+        "publish_pkg": "npm run build_transfer && npm publish --access=public"
     },
     "devDependencies": {
         "@types/react": "^18.0.11",
@@ -30,7 +32,7 @@
         "tsc-alias": "^1.8.6",
         "typescript": "^4.7.3"
     },
-    "dependencies": {
+    "peerDependencies": {
         "@bodynarf/utils": "^1.1.1",
         "bulma": "^0.9.4",
         "react": "^18.1.0",

package/src/common.scss

@@ -0,0 +1,3 @@
+.help.m-help {
+    white-space: pre-line;
+}

package/src/components/accordion/component/index.tsx

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { ElementSize } from "@bbr/components";
+import Icon from "@bbr/components/icon";
+
+import { mapDataAttributes } from "@bbr/utils";
+
+import { AccordionProps } from "@bbr/components/accordion";
+
+/** Accordion panel */
+const Accordion = ({
+    children, caption,
+    style, size, defaultExpanded,
+    onToggle,
+    className, data, title,
+}: AccordionProps): JSX.Element => {
+    const expandablePanelRef = useRef<HTMLDivElement>(null);
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded ?? false);
+    const [maxHeight, setMaxHeight] = useState<number | undefined>(defaultExpanded === true ? undefined : 0);
+
+    const toggleCollapse = useCallback(
+        () => setMaxHeight(isExpanded ? 0 : expandablePanelRef.current!.scrollHeight),
+        [isExpanded]
+    );
+
+    useEffect(() => {
+        if (defaultExpanded === true && !isNullOrUndefined(expandablePanelRef.current)) {
+            setMaxHeight(expandablePanelRef.current!.scrollHeight);
+        }
+    }, [defaultExpanded]);
+
+    useEffect(() => setIsExpanded(maxHeight !== 0), [maxHeight]);
+    useEffect(() => {
+        onToggle?.call(undefined, !isExpanded);
+    }, [isExpanded, onToggle]);
+
+    const elClassName = getClassName([
+        "bbr-accordion",
+        "message",
+        isNullOrUndefined(style) ? "" : `is-${style}`,
+        isNullOrUndefined(size) ? "" : `is-${size}`,
+        className,
+    ]);
+
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data!);
+
+    return (
+        <article
+            className={elClassName}
+            aria-expanded={isExpanded}
+            {...dataAttributes}
+        >
+            <div
+                className="message-header is-unselectable"
+                onClick={toggleCollapse}
+            >
+                <span title={title}>
+                    {caption}
+                </span>
+                <Icon
+                    name="arrow-down"
+                    size={size ?? ElementSize.Medium}
+                />
+            </div>
+            <div
+                className="message-body"
+                ref={expandablePanelRef}
+                style={{ maxHeight: `${maxHeight}px` }}
+            >
+                <div className="message-body__content">
+                    {children}
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export default Accordion;

package/src/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/{components/accordion/types.d.ts → src/components/accordion/types.ts}

@@ -1,18 +1,22 @@
-/// <reference types="react" />
 import { BaseElementProps, ElementColor, ElementSize } from "@bbr/components";
+
 /** Accordion panel props type */
 export interface AccordionProps extends BaseElementProps {
     /** Content that should be collapsed inside */
     children: React.ReactNode;
+
     /** Collapsible panel caption */
     caption: string;
+
     /** Default expanded state */
     defaultExpanded?: boolean;
+
     /** Panel size */
     size?: ElementSize;
+
     /** Color */
     style?: ElementColor;
+
     /** Extra handler for toggling visibility. Doesn't affect component logic */
     onToggle?: (collapsed: boolean) => void;
 }
-//# sourceMappingURL=types.d.ts.map

package/src/components/anchor/component/index.tsx

@@ -0,0 +1,40 @@
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { AnchorProps, ElementIcon } from "@bbr/components";
+
+import { SimpleAnchor } from "@bbr/components/anchor/components/simpleAnchor";
+import { AnchorWithIcon } from "@bbr/components/anchor/components/anchorWithIcon";
+
+/** Anchor component */
+export default function Anchor(props: AnchorProps): JSX.Element {
+    if (isNullOrUndefined(props.caption) && isNullOrUndefined(props.icon)) {
+        throw new Error("No anchor content provided");
+    }
+
+    const className: string = getClassName([
+        "bbr-anchor",
+        !isNullOrEmpty(props.className) ? ` ${props.className}` : "",
+        props.disableHovering === true ? " bbr-anchor--unhoverable" : ""
+    ]);
+
+    if (isNullOrUndefined(props.icon)) {
+        return (
+            <SimpleAnchor
+                {...props}
+                className={className}
+                onClick={props.onClick}
+            />
+        );
+    }
+
+    return (
+        <AnchorWithIcon
+            {...props}
+            className={className}
+            onClick={props.onClick}
+            icon={props.icon as ElementIcon}
+        />
+    );
+}