diff --git a/CHANGELOG.md b/CHANGELOG.md
index 833494c..8c934ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [1.0.0] - 2024-03-10
+* [FuiCheckbox] - Fixed naming ([#8](https://github.com/functional-ui/functional-ui-kit/issues/8))
+* [FuiTextInput / FuiRadio / FuiStepper] - Improved adherence to WCAG ([#7](https://github.com/functional-ui/functional-ui-kit/issues/7))
+* [Docs] - Upgrade to Storybook@7.6.17
+
## [0.1.0] - 2024-02-07
* [FuiPopover] - Removed `react-tiny-popover` and replace with `floating-ui`
* [FuiOptionGroup] - New Component 🎉
diff --git a/package.json b/package.json
index 7385707..33748da 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,8 @@
{
"name": "functional-ui-kit",
- "version": "0.1.0",
+ "version": "1.0.0",
"description": "Functional UI Kit",
+ "homepage": "https://functional-ui-kit.com/",
"scripts": {
"build": "vite build --config vite.config.ts",
"dev": "npm run storybook",
@@ -33,6 +34,10 @@
"style"
],
"author": "Alex Yakir",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/functional-ui/functional-ui-kit.git"
+ },
"license": "ISC",
"dependencies": {
"@floating-ui/react": "^0.25.2",
@@ -44,17 +49,17 @@
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5",
"@storybook/addon-designs": "^7.0.7",
- "@storybook/addon-essentials": "^7.6.10",
- "@storybook/addon-interactions": "^7.6.10",
- "@storybook/addon-links": "^7.6.10",
- "@storybook/addon-mdx-gfm": "^7.6.10",
- "@storybook/addon-toolbars": "^7.6.10",
- "@storybook/blocks": "^7.6.10",
- "@storybook/manager-api": "^7.6.10",
- "@storybook/react": "^7.6.10",
- "@storybook/react-webpack5": "^7.6.10",
+ "@storybook/addon-essentials": "^7.6.17",
+ "@storybook/addon-interactions": "^7.6.17",
+ "@storybook/addon-links": "^7.6.17",
+ "@storybook/addon-mdx-gfm": "^7.6.17",
+ "@storybook/addon-toolbars": "^7.6.17",
+ "@storybook/blocks": "^7.6.17",
+ "@storybook/manager-api": "^7.6.17",
+ "@storybook/react": "^7.6.17",
+ "@storybook/react-webpack5": "^7.6.17",
"@storybook/testing-library": "^0.2.2",
- "@storybook/theming": "^7.6.10",
+ "@storybook/theming": "^7.6.17",
"@types/react": "^18.0.0",
"@types/react-modal": "^3.16.0",
"@typescript-eslint/eslint-plugin": "^5.59.5",
@@ -71,7 +76,7 @@
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "storybook": "^7.6.10",
+ "storybook": "^7.6.17",
"storybook-dark-mode": "^3.0.3",
"typescript": "^5.0.4",
"vite": "^4.4.4",
diff --git a/src/components/fui-checkbox/fui-checkbox.stories.tsx b/src/components/fui-checkbox/fui-checkbox.stories.tsx
index bad536a..4c1b581 100644
--- a/src/components/fui-checkbox/fui-checkbox.stories.tsx
+++ b/src/components/fui-checkbox/fui-checkbox.stories.tsx
@@ -20,7 +20,7 @@ const meta = {
},
argTypes: {
checked: { name: '🔗 checked' },
- intermediate: { name: '🔗 intermediate' },
+ indeterminate: { name: '🔗 indeterminate' },
disabled: { name: '🔗 disabled' },
checkLabel: { name: '🔗 checkLabel' },
className: {
@@ -63,10 +63,10 @@ export const Disabled: Story = {
-
+
-
+
);
},
@@ -90,7 +90,7 @@ export const Disabled: Story = {
disable: true
}
},
- intermediate: {
+ indeterminate: {
table: {
disable: true
}
@@ -98,7 +98,7 @@ export const Disabled: Story = {
}
};
-export const Intermediate: Story = {
+export const Indeterminate: Story = {
render: (args) => {
const [checked1, setChecked1] = React.useState(true);
const [checked2, setChecked2] = React.useState(false);
@@ -115,7 +115,7 @@ export const Intermediate: Story = {
return (
<>
-
+
@@ -131,7 +131,7 @@ export const Intermediate: Story = {
url: 'https://www.figma.com/file/zHutj6e9DcPngHZTDtAL1u/Functional-UI-Kit?type=design&node-id=2461-15326'
}
},
- name: 'Intermediate',
+ name: 'Indeterminate',
argTypes: {
disabled: {
table: {
@@ -143,7 +143,7 @@ export const Intermediate: Story = {
disable: true
}
},
- intermediate: {
+ indeterminate: {
table: {
disable: true
}
diff --git a/src/components/fui-checkbox/fui-checkbox.tsx b/src/components/fui-checkbox/fui-checkbox.tsx
index 9af3599..d797065 100644
--- a/src/components/fui-checkbox/fui-checkbox.tsx
+++ b/src/components/fui-checkbox/fui-checkbox.tsx
@@ -2,13 +2,13 @@ import React from 'react';
import { prefix } from '../prefix';
import FuiIconCheck12X12 from '../../icons/fui-icon-check-12x12';
import classnames from 'classnames';
-import FuiIconIntermediateLine2x10 from '../../icons/fui-icon-intermediate-line-2x10';
+import FuiIconIndeterminateLine2x10 from '../../icons/fui-icon-indeterminate-line-2x10';
const compPrefix = `${prefix}-checkbox`;
export interface FuiCheckboxProps {
checked?: boolean
- intermediate?: boolean
+ indeterminate?: boolean
disabled?: boolean
onToggle: (isChecked: boolean) => void
checkLabel?: string
@@ -22,7 +22,7 @@ export const FuiCheckbox = (props: FuiCheckboxProps) => {
`${compPrefix}-wrapper`,
props.disabled ? `${prefix}-disabled` : `${prefix}-interactable`,
props.className,
- (props.checked || props.intermediate) ? 'checked' : ''
+ (props.checked || props.indeterminate) ? 'checked' : ''
);
const onClick = (e: React.MouseEvent
) => {
@@ -41,7 +41,7 @@ export const FuiCheckbox = (props: FuiCheckboxProps) => {
return (
- {props.checked ? : props.intermediate ? : null}
+ {props.checked ? : props.indeterminate ? : null}
{props.checkLabel &&
}
diff --git a/src/components/fui-radio/fui-radio.tsx b/src/components/fui-radio/fui-radio.tsx
index f9ea1e8..c37e540 100644
--- a/src/components/fui-radio/fui-radio.tsx
+++ b/src/components/fui-radio/fui-radio.tsx
@@ -17,6 +17,9 @@ const compPrefix = `${prefix}-radio`;
export const FuiRadio = (props: FuiRadioProps) => {
const [focused, setFocused] = React.useState(false);
const ref = React.useRef(null);
+ const inputId = React.useMemo(() => `${compPrefix}-input-${Math.random().toString(36).substring(7)}`, []);
+ const labelId = React.useMemo(() => `${compPrefix}-label-${Math.random().toString(36).substring(7)}`, []);
+
const indicatorClassNames = classnames(
`${compPrefix}-indicator`,
props.className,
@@ -48,11 +51,11 @@ export const FuiRadio = (props: FuiRadioProps) => {
return (
);
};
diff --git a/src/components/fui-stepper/fui-stepper.tsx b/src/components/fui-stepper/fui-stepper.tsx
index c66392b..00f2367 100644
--- a/src/components/fui-stepper/fui-stepper.tsx
+++ b/src/components/fui-stepper/fui-stepper.tsx
@@ -25,6 +25,9 @@ export interface FuiStepperProps {
}
export const FuiStepper = (props: FuiStepperProps) => {
+ const inputId = React.useMemo(() => `${compPrefix}-input-${Math.random().toString(36).substring(7)}`, []);
+ const labelId = React.useMemo(() => `${compPrefix}-label-${Math.random().toString(36).substring(7)}`, []);
+
const isIncDisabled = React.useMemo(() => {
return props.disabled && [FuiStepperDisabled.All, FuiStepperDisabled.Plus].includes(props.disabled);
}, [props.disabled]);
@@ -73,14 +76,14 @@ export const FuiStepper = (props: FuiStepperProps) => {
return (
- {props.label &&
{props.label}
}
+ {props.label &&
}
{props.status &&
}
- { props.onChange(Number(e.target.value)); }} disabled={isAllDisabled} />
+ { props.onChange(Number(e.target.value)); }} disabled={isAllDisabled} />