diff --git a/package.json b/package.json index 57a043a5..9f72a5b3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@user-interviews/ui-design-system", - "version": "2.3.1", + "version": "2.4.0", "dependencies": { "@tiptap/core": "^2.0.3", "@tiptap/extension-bold": "^2.0.3", diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap index a9cbaa1f..f253dcef 100644 --- a/spec/__snapshots__/Storyshots.test.js.snap +++ b/spec/__snapshots__/Storyshots.test.js.snap @@ -9054,8 +9054,8 @@ Array [ `; exports[`Storyshots Components/Heading Default 1`] = ` -

The fastest way to recruit research participants -

+ `; exports[`Storyshots Components/Heading Levels 1`] = ` @@ -9128,7 +9128,72 @@ Array [ > The fastest way to recruit research participants , -
+ This is a heading level 2 with size="xxxl" +
, +

+ This is a heading level 2 with size="xxl" +

, +

+ This is a heading level 2 with size="xl" +

, +

+ This is a heading level 2 with size="lg" +

, +

+ This is a heading level 2 with size="md" +

, +

+ This is a heading level 2 with size="sm" +

, +

- The fastest way to recruit research participants -

, + This is a heading level 2 with size="xs" + , ] `; @@ -10425,11 +10490,11 @@ exports[`Storyshots Components/MoneyInput Default 1`] = ` onKeyUp={[Function]} placeholder="Please enter a number" type="text" - value="$1,250.99" + value="$ 1,250.99" />
-

Value: 1250.99 -

+ + +`; + +exports[`Storyshots Components/MoneyInput Prefix 1`] = ` +
+ +
+ Change the prefix +
+ +
+

+ Value: + 500 +

+
+`; + +exports[`Storyshots Components/MoneyInput Step 1`] = ` +
+ +
+ Use the Up Arrow (↑) or Down Arrow (↓) to adjust the incremental value change +
+ +
+

+ Value: + 200 +

`; diff --git a/src/Dropdown/DropdownItem.jsx b/src/Dropdown/DropdownItem.jsx index 5d6b03b0..59e95ece 100644 --- a/src/Dropdown/DropdownItem.jsx +++ b/src/Dropdown/DropdownItem.jsx @@ -6,11 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Dropdown as RBDropdown } from 'react-bootstrap'; -import './DropdownItem.scss'; - -const DropdownItemVariants = { - DANGER: 'danger', -}; +import styles from './DropdownItem.module.scss'; const DropdownItem = ({ active, @@ -22,7 +18,6 @@ const DropdownItem = ({ href, leadingIcon, onClick, - variant, bsPrefix, ...props }) => ( @@ -33,7 +28,7 @@ const DropdownItem = ({ className={classNames( className, 'DropdownItem', - variant && `DropdownItem--${variant}`, + styles.DropdownItem, )} disabled={disabled} eventKey={eventKey} @@ -41,7 +36,7 @@ const DropdownItem = ({ onClick={onClick} {...props} > - { leadingIcon && } + { leadingIcon && } { children } ); @@ -74,10 +69,6 @@ DropdownItem.propTypes = { */ href: PropTypes.string, leadingIcon: PropTypes.object, - /** - Optional variant for controlling color and hover states (e.g. destructive actions) - */ - variant: PropTypes.oneOf(Object.values(DropdownItemVariants)), /** Callback fired when the menu item is clicked. */ @@ -93,7 +84,6 @@ DropdownItem.defaultProps = { eventKey: undefined, href: undefined, leadingIcon: undefined, - variant: undefined, onClick: undefined, }; diff --git a/src/Dropdown/DropdownItem.module.scss b/src/Dropdown/DropdownItem.module.scss new file mode 100644 index 00000000..254775e0 --- /dev/null +++ b/src/Dropdown/DropdownItem.module.scss @@ -0,0 +1,20 @@ +@import '../../scss/theme'; + +.DropdownItem { + @include synth-font-type-30; + color: $ux-gray-900; + + &:hover { + background-color: $synth-hover-state; + text-decoration: none; + } + + &:focus { + background-color: $synth-selected-state-green; + color: $ux-gray-900; + } +} + +.DropdownItemIcon { + margin-right: $ux-spacing-20; +} diff --git a/src/Dropdown/DropdownItem.scss b/src/Dropdown/DropdownItem.scss deleted file mode 100644 index 6dcb0d37..00000000 --- a/src/Dropdown/DropdownItem.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../scss/theme'; - -.DropdownItem { - @include synth-font-type-30; - color: $ux-gray-900; - - i, svg { - &.icon-left { - margin-right: $ux-spacing-20; - } - } - - &:hover { - background-color: $ux-blue-100; - text-decoration: none; - } - - &:focus { - background-color: $ux-blue-200; - color: $ux-gray-900; - } - - &--danger { - color: $ux-red; - - &:hover { - background-color: $ux-red-100; - color: $ux-red-600; - } - } -} diff --git a/src/Heading/Heading.stories.tsx b/src/Heading/Heading.stories.tsx index 7be127c0..e7b2765a 100644 --- a/src/Heading/Heading.stories.tsx +++ b/src/Heading/Heading.stories.tsx @@ -24,6 +24,7 @@ type Story = StoryObj; export const Default: Story = { args: { children: 'The fastest way to recruit research participants', + level: 1, }, }; @@ -61,13 +62,30 @@ export const Default: Story = { export const Levels: Story = { render: () => ( <> - The fastest way to recruit research participants - The fastest way to recruit research participants - The fastest way to recruit research participants - The fastest way to recruit research participants - The fastest way to recruit research participants - The fastest way to recruit research participants - The fastest way to recruit research participants + The fastest way to recruit research participants + The fastest way to recruit research participants + The fastest way to recruit research participants + The fastest way to recruit research participants + The fastest way to recruit research participants + The fastest way to recruit research participants + + ), +}; + +/** + Headings come with default sizes based on their level, but you are able to + adjust its size based on visual hierarchy needs. +*/ +export const Sizes: Story = { + render: () => ( + <> + This is a heading level 2 with size="xxxl" + This is a heading level 2 with size="xxl" + This is a heading level 2 with size="xl" + This is a heading level 2 with size="lg" + This is a heading level 2 with size="md" + This is a heading level 2 with size="sm" + This is a heading level 2 with size="xs" ), }; diff --git a/src/Heading/Heading.tsx b/src/Heading/Heading.tsx index bb219af8..efa3e810 100644 --- a/src/Heading/Heading.tsx +++ b/src/Heading/Heading.tsx @@ -7,17 +7,42 @@ import './Heading.scss'; export interface HeadingProps { children?: ReactNode; className?: string; + /** + * @type {number} + * @description Choose the appropriate heading level (h1 to h6) based on a + * page's semantic structure. + * Headings define the document structure, and screen readers use them for navigation. + * For accessibility, a page must contain at least one h1, headings should follow a + * logical hierarchy where each heading level represents a sublevel of the previous one, + * and avoid skipping levels. + */ level: 1 | 2 | 3 | 4 | 5 | 6; + /** + * @type {string} + * @description Sizes map to the available font-sizes from the defined list of font-types. + * Adjust for visual hierarchy. + */ size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'; textAlign?: 'left' | 'center' | 'right'; - weight: 'regular' | 'medium' | 'bold'; + weight?: 'regular' | 'medium' | 'bold'; } +const LevelToSizeMap = { + 1: 'xxxl', + 2: 'xxl', + 3: 'xl', + 4: 'lg', + 5: 'md', + 6: 'sm', +}; + +const getHeadingSizeClassFromLevel = (level: number) => `Heading--${LevelToSizeMap[level]}`; + const Heading = ({ children, className, - level = 2, - size = 'xxl', + level = 1, + size, textAlign, weight = 'bold', ...props @@ -28,6 +53,7 @@ const Heading = ({ className: classNames( className, 'Heading', + !size && getHeadingSizeClassFromLevel(level), { [`Heading--${size}`]: !!size, [`Heading--${weight}`]: !!weight, diff --git a/src/MoneyInput/MoneyInput.jsx b/src/MoneyInput/MoneyInput.jsx index e18a07a0..523c739c 100644 --- a/src/MoneyInput/MoneyInput.jsx +++ b/src/MoneyInput/MoneyInput.jsx @@ -34,6 +34,14 @@ MoneyInput.propTypes = { Placeholder if no value */ placeholder: PropTypes.string, + /** + Include a prefix eg. £ or $ + */ + prefix: PropTypes.string, + /** + Incremental value change on arrow down and arrow up key press + */ + step: PropTypes.number, /** Transform the raw value from the input before parsing. Needs to return string. */ @@ -51,6 +59,8 @@ MoneyInput.defaultProps = { intlConfig: { locale: 'en-US', currency: 'USD' }, maxLength: undefined, placeholder: undefined, + prefix: '$ ', + step: undefined, transformRawValue: undefined, value: undefined, onValueChange: undefined, diff --git a/src/MoneyInput/MoneyInput.mdx b/src/MoneyInput/MoneyInput.mdx index a605ff6e..00be3426 100644 --- a/src/MoneyInput/MoneyInput.mdx +++ b/src/MoneyInput/MoneyInput.mdx @@ -20,3 +20,15 @@ import * as ComponentStories from './MoneyInput.stories'; ### Default + +### Step + +Adjust the `step` prop to adjust the incremental value change on arrow down and arrow up key press + + + +### Prefix + +Adjust the `prefix` prop. Default is `$ ` + + diff --git a/src/MoneyInput/MoneyInput.scss b/src/MoneyInput/MoneyInput.scss index 3052d358..e21fe771 100644 --- a/src/MoneyInput/MoneyInput.scss +++ b/src/MoneyInput/MoneyInput.scss @@ -2,10 +2,9 @@ .MoneyInput { @include synth-font-type-30; - box-shadow: $input-box-shadow; &:focus { - border: 0.06rem solid $ux-blue-500; + border: 1px solid $ux-blue-500; box-shadow: $input-focus-box-shadow; color: $input-focus-color; } diff --git a/src/MoneyInput/MoneyInput.stories.jsx b/src/MoneyInput/MoneyInput.stories.jsx index e579d764..2fb5de50 100644 --- a/src/MoneyInput/MoneyInput.stories.jsx +++ b/src/MoneyInput/MoneyInput.stories.jsx @@ -47,3 +47,78 @@ Default.args = { placeholder: 'Please enter a number', decimalsLimit: 2, }; + +export const Step = (args) => { + const [value, setValue] = useState(200); + + const handleOnValueChange = (val) => { + if (!val) { + setValue(''); + return; + } + setValue(val); + }; + + return ( + <> + + +
+ Value: {value} + + + ); +}; + +Step.args = { + decimalsLimit: 2, + id: 'money-input-2', + placeholder: 'Please enter a number', + step: 1, +}; + +export const Prefix = (args) => { + const [value, setValue] = useState(500); + + const handleOnValueChange = (val) => { + if (!val) { + setValue(''); + return; + } + setValue(val); + }; + + return ( + <> + + +
+ Value: {value} + + + ); +}; + +Prefix.args = { + decimalsLimit: 2, + id: 'money-input-3', + placeholder: 'Please enter a number', + prefix: 'USD$ ', + step: 1, +}; diff --git a/yarn.lock b/yarn.lock index f6d66216..caf6f4c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8,9 +8,9 @@ integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA== "@adobe/css-tools@^4.3.1": - version "4.3.1" - resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28" - integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg== + version "4.3.2" + resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11" + integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw== "@ampproject/remapping@^2.2.0": version "2.2.1"