IBX-10156: Inputs foundation

.storybook/main.js

@@ -6,6 +6,7 @@ const config = {
     stories: ['../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
     staticDirs: ['../packages/assets/src/'],
     addons: [
+        '@storybook/addon-docs',
         '@storybook/addon-webpack5-compiler-swc',
         '@storybook/addon-a11y',
         'storybook-addon-pseudo-states',
@@ -50,6 +51,12 @@ const config = {
             use: ['raw-loader'],
         });
 
+        webpackConfig.resolve.alias = {
+            ...webpackConfig.resolve.alias,
+            '@ids-context': path.resolve(__dirname, '../packages/components/src/context'),
+            '@ids-internal': path.resolve(__dirname, '../packages/components/src/internal'),
+        };
+
         webpackConfig.plugins.push(new NodePolyfillPlugin());
 
         return webpackConfig;

package.json

@@ -26,6 +26,7 @@
     "@ibexa/ts-config": "https://github.com/ibexa/ts-config-ibexa#~v1.1.0",
     "@storybook/addon-a11y": "^9.0.4",
     "@storybook/addon-coverage": "^1.0.5",
+    "@storybook/addon-docs": "^9.0.8",
     "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/react": "^9.0.4",
@@ -34,6 +35,7 @@
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@vitest/coverage-v8": "^3.2.1",
+    "babel-plugin-module-resolver": "^5.0.2",
     "jsdom": "^26.1.0",
     "node-polyfill-webpack-plugin": "^4.1.0",
     "prop-types": "^15.8.1",

packages/assets/src/scss/_accordion.scss

@@ -16,7 +16,7 @@
     }
 
     &__content {
-        transition: height $admin-transition-duration $admin-transition;
+        transition: height $transition-duration $transition-timing-function;
         overflow: hidden;
         height: 0;
         display: none;

packages/assets/src/scss/_autosave.scss

@@ -7,7 +7,7 @@
     justify-content: center;
     color: $color-neutral-160;
     font-size: $text-font-size-s;
-    transition: all $admin-transition-duration $admin-transition;
+    transition: all $transition-duration $transition-timing-function;
 
     .ids-icon {
         fill: $color-neutral-160;

packages/assets/src/scss/_buttons.scss

@@ -163,7 +163,7 @@ $btns-sizes: (
     white-space: nowrap;
     padding: calculateRem(14px) calculateRem(15px);
     outline: none;
-    border-radius: calculateRem(8px);
+    border-radius: $border-radius-medium;
     text-decoration: none;
     font-size: $text-font-size-m;
     line-height: calculateRem(18px);
@@ -172,7 +172,7 @@ $btns-sizes: (
     fill: var(--ids-default-text-color);
     background: var(--ids-default-bg-color);
     border: calculateRem(1px) solid var(--ids-default-border-color);
-    transition: all 1s $admin-transition;
+    transition: all 1s $transition-timing-function;
 
     &:focus {
         color: var(--ids-focus-text-color);

packages/assets/src/scss/_helper-text.scss

@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use 'functions' as *;
+@use 'variables' as *;
+
+$helper-text-types: (
+    'default': $color-neutral-160,
+    'error': $color-error-80,
+);
+
+.ids-helper-text {
+    $self: &;
+
+    font-size: $text-font-size-m;
+    color: #{map.get($helper-text-types, 'default')};
+    display: flex;
+
+    &__icon-wrapper {
+        display: flex;
+        align-items: center;
+        height: $text-font-size-m * $base-line-height;
+        padding-right: calculateRem(4px);
+    }
+
+    @each $name, $color in $helper-text-types {
+        &--#{$name} {
+            color: $color;
+
+            #{$self}__icon {
+                fill: $color;
+            }
+        }
+    }
+}

packages/assets/src/scss/_icons.scss

@@ -15,7 +15,7 @@ $icons-sizes:
 .ids-icon {
     width: calculateRem(32px);
     height: calculateRem(32px);
-    transition: fill 0.3s $admin-transition;
+    transition: fill 0.3s $transition-timing-function;
 
     @each $name, $size in $icons-sizes {
         &--#{$name} {

packages/assets/src/scss/_input.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use 'functions' as *;
+@use 'variables' as *;
+@use 'mixins/icons' as mixins;
+
+$input-sizes: (
+    'small': (
+        'font-size': $text-font-size-s,
+        'padding': calculateRem(7px) calculateRem(16px) calculateRem(7px),
+    ),
+    'medium': (
+        'font-size': $text-font-size-m,
+        'padding': calculateRem(9px) calculateRem(16px) calculateRem(10px),
+    ),
+);
+
+.ids-input {
+    border-radius: $border-radius-medium;
+    background: var(--ids-input-default-bg-color, #{$color-neutral-10});
+    border: calculateRem(1px) solid var(--ids-input-default-border-color, #{$color-neutral-80});
+    color: var(--ids-input-default-text-color, #{$color-neutral-240});
+    outline: 0;
+
+    @each $name, $properties in $input-sizes {
+        &--#{$name} {
+            font-size: map.get($properties, 'font-size');
+            padding: map.get($properties, 'padding');
+        }
+    }
+
+    &.ids-input--error {
+        background: var(--ids-input-error-bg-color, #{$color-error-20});
+        border-color: var(--ids-input-error-border-color, #{$color-error-80});
+        color: var(--ids-input-error-text-color, #{$color-error-90});
+    }
+
+    &.ids-input--disabled,
+    &.disabled,
+    &[disabled],
+    &:disabled {
+        color: var(--ids-input-disabled-text-color, #{$color-neutral-150});
+        background: var(--ids-input-disabled-bg-color, #{$color-neutral-40});
+        border-color: var(--ids-input-disabled-border-color, #{$color-neutral-80});
+        pointer-events: none;
+    }
+
+    &:hover {
+        border-color: var(--ids-input-hover-border-color, #{$color-primary-80});
+    }
+
+    &:active {
+        border-color: var(--ids-input-active-border-color, #{$color-primary-90});
+    }
+
+    &:focus {
+        border-color: var(--ids-input-focus-border-color, #{$color-primary-80});
+        box-shadow: var(--ids-input-focus-box-shadow, #{$box-shadow-focus-primary});
+    }
+}

packages/assets/src/scss/_label.scss

@@ -0,0 +1,16 @@
+@use 'variables' as *;
+
+.ids-label {
+    font-size: $text-font-size-s;
+    color: var(--ids-label-default-text-color, #{$color-neutral-160});
+
+    &--required {
+        &::after {
+            content: '*';
+        }
+    }
+
+    &--error {
+        color: var(--ids-label-error-text-color, #{$color-error-80});
+    }
+}

packages/assets/src/scss/_root.scss

@@ -1,12 +1,12 @@
 @use 'functions/calculate.rem' as *;
-@use 'variables';
+@use 'variables' as *;
 
 html {
     font-size: $base-font-size;
-    line-height: 1.5;
+    line-height: $base-line-height;
     letter-spacing: calculateRem(0.12px);
 }
 
 body {
-    font-family: variables.$font-family;
+    font-family: $font-family;
 }

packages/assets/src/scss/_variables.scss

@@ -2,8 +2,16 @@
 @forward 'variables/shadows';
 @forward 'variables/typography';
 
+@use 'functions/calculate.rem' as *;
+
 // Ibexa transition function
-$admin-transition: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-$admin-transition-duration: 0.4s !default;
+$transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$transition-duration: 0.4s !default;
+
+// Root variables
+$base-line-height: 1.5 !default;
+
+// Various component variables
+$border-radius-medium: calculateRem(8px) !default;
 
 $assets-base-path: '/' !default;

packages/assets/src/scss/styles.scss

@@ -7,3 +7,6 @@
 @use 'expander';
 @use 'fonts';
 @use 'icons';
+@use 'input';
+@use 'label';
+@use 'helper-text';

packages/components/.babelrc

@@ -1,5 +1,17 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"],
-  "plugins": [],
-  "ignore": ["**/*.stories.ts", "**/*.stories.tsx", "**/*.types.ts"]
+    "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"],
+    "plugins": [
+        [
+            "module-resolver", 
+            {
+                "root": ["./"],
+                "alias": {
+                    "@ids-context": "./packages/components/src/context",
+                    "@ids-internal": "./packages/components/src/internal",
+                    "@ids-types": "./types"
+                }
+            }
+        ]
+    ],
+    "ignore": ["**/*.stories.ts", "**/*.stories.tsx", "**/*.types.ts"]
 }

packages/components/src/Accordion/Accordion.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import Expander from '../Expander';
-import { TranslatorContext } from '../context/Translator';
+import { TranslatorContext } from '@ids-context/Translator';
 
-import { createCssClassNames } from '../internal/shared/css.class.names';
+import { createCssClassNames } from '@ids-internal/shared/css.class.names';
 
 import { AccordionProps } from './Accordion.types';
 

packages/components/src/Button/Button.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 
-import { createCssClassNames } from '../internal/shared/css.class.names';
+import { createCssClassNames } from '@ids-internal/shared/css.class.names';
 
 import { ButtonProps } from './Button.types';
 
 const Button = ({
-    type = 'primary',
-    size = 'large',
-    ariaLabel,
-    extraAria = {},
+    onClick,
     children,
+    ariaLabel,
     disabled = false,
+    extraAria = {},
     extraClasses = '',
-    onClick,
+    size = 'large',
+    title = '',
+    type = 'primary',
 }: ButtonProps) => {
     const classes = createCssClassNames({
         'ids-btn': true,
@@ -31,6 +32,7 @@ const Button = ({
             disabled={disabled}
             onClick={onClick}
             role="button"
+            title={title}
             type="button"
             {...extraAria}
         >

packages/components/src/Button/Button.types.ts

@@ -1,15 +1,17 @@
 import { ReactNode } from 'react';
 
-export const BUTTON_TYPE_VALUES = ['primary', 'secondary', 'tertiary', 'black-secondary', 'black-tertiary'] as const;
+import { BaseComponentAriaAttributes } from '@ids-types/general';
+
 export const BUTTON_SIZE_VALUES = ['large', 'small', 'extra-small'] as const;
+export const BUTTON_TYPE_VALUES = ['primary', 'secondary', 'tertiary', 'black-secondary', 'black-tertiary'] as const;
 
-interface ButtonSharedProps {
+export type ButtonSizeType = (typeof BUTTON_SIZE_VALUES)[number];
+export type ButtonTypesType = (typeof BUTTON_TYPE_VALUES)[number];
+interface ButtonSharedProps extends BaseComponentAriaAttributes {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
-    type?: (typeof BUTTON_TYPE_VALUES)[number];
-    size?: (typeof BUTTON_SIZE_VALUES)[number];
     disabled?: boolean;
-    extraClasses?: string;
-    extraAria?: Record<`aria-${string}`, boolean | number | string>;
+    size?: ButtonSizeType;
+    type?: ButtonTypesType;
 }
 
 interface ButtonHTMLProps extends ButtonSharedProps {

packages/components/src/Expander/Expander.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Button from '../Button';
 import Icon from '../Icon';
 
-import { createCssClassNames } from '../internal/shared/css.class.names';
+import { createCssClassNames } from '@ids-internal/shared/css.class.names';
 
 import { ExpanderProps } from './Expander.types';
 

packages/components/src/HelperText/HelperText.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HELPER_TEXT_TYPE_VALUES } from './HelperText.types';
+import HelperText from './HelperText';
+
+const meta: Meta<typeof HelperText> = {
+    component: HelperText,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: Object.values(HELPER_TEXT_TYPE_VALUES),
+        },
+        extraClasses: {
+            control: 'text',
+        },
+        title: {
+            control: 'text',
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HelperText>;
+
+export const Default: Story = {
+    name: 'Default',
+    args: {
+        children: 'Lorem Ipsum',
+    },
+};
+
+export const withHTML: Story = {
+    name: 'With HTML',
+    args: {
+        children: (
+            <>
+                <b>Lorem</b>
+                <br />
+                <u>Ipsum</u>
+            </>
+        ),
+    },
+};
+
+export const Error: Story = {
+    name: 'Error',
+    args: {
+        children: 'Lorem Ipsum',
+        type: 'error',
+    },
+};