iridiumui/iridium

A Vue UI framework with no UI

What is Iridium?

Iridium is a UI framework with no UI. It's built for Vue. It focuses on providing reuseable renderless UI components and convenient helper components.

Check out the documentation to learn more.

iridium's Issues

Visually Hidden - Should be able to accept no dom node

Currently Visually Hidden wil throw an error if you just pass in some text. Instead you have to pass in a tag or something similar. But Visually Hidden will almost always just be used to pass in some text so it should be able to support that.

Implement snapshot tests

Part of switching the project over to using Storybook will be to implement snapshot tests.

Screen - Should only accept 'up' or 'down' as prop strings

The Screen helpers currently accept a direction prop of the type String. However the only valid Strings should be 'up' and 'down'.

Implement a11y tests

Since accessibility is an important part of the project I will play around with automatic a11y tests using Storybook.

New folder structure

Some things will be moved around slightly. The new folder structure will be as follows:

/src
..../components
........./core
........./extra
........./helpers
........./transitions
........./accessibility
..../stories
........./core
........./extra
........./helpers
........./transitions
........./accessibility
..../tests
........./plugin

Accordion component

The accordion will be built on top of the new Toggle component. The accordion will be responsible for managin several Toggles called Accordion Items.

Features:

• Managing whether 1 or more items are allowed to be open at the same time
• Accordion Item slot

Tabs component

The Tabs component will be a container for multiple Tab Items. It will be responsible for making sure that only 1 Tab Item is visible at once.

Features:

• Tab Navigation slot
• Tab Item slot
• Support for routing either locally (#tab1) or globally (/tab1)

Better eslint setup

Currently the eslint setup is pretty relaxed about certain stuff. Below is a list of improvements I want to make:

• Force semicolons
• Force use of double quotes
• Force 1 empty line at the end of file
• Implement prettier

Toggle component

As I've been building more components I've noticed a pattern where a lot of the components contain the same basic functionality. The ability to show / hide something. The idea with the toggle component is that it will be a parent component that contains this functionality. Then the rest of the components can be built on top of this.

API:

• Open state
• Toggle method
• OpenDefault prop

Todo:

• Build toggle component
• Convert existing components to use toggle component

Add changelog

As we're getting close to v.1 I want to introduce a CHANGELOG.md file that makes it easy for people to see what have been added/changed.

Add folder aliases

A nice feature would be the ability to add aliases to certain folders.

This means it's no longer necessary to manually navigating folders when importing modules from other files.

Below is a list of aliases that will initially be implemented:

• @ (src folder)
• ~ (root folder)

Automatically include components in plugin

Currently every new component is manually registered and exported in the main index.js file. But as the number of components grow this file becomes very cluttered. It would be better if we could find a way to automatically register the components

ClickOutside - 'Active' is not working.

Fixed - Add more abstrations

Currently the library have abstractions on the Fixed component such as FixedBottom and FixedRight. It should have a few more abstractions such as FixedBottomRight etc. This will make the component slightly more useful.

Components:

• FixedTopRight

• FixedTopLeft

• FixedBottomRight

• FixedBottomLeft

Convert old tests to Storybook

Since Storybook will be implemented in the project, all old tests will have to be converted.

• Hamburger Nav
  • It can be opened by default
  • It can render the default slot content
  • It can render a toggle and content
• Modal
  • It renders a toggle and content
  • It can render in a portal
  • It can render outside a portal
  • It traps focus
  • The toggle knows if it's open
• Code Block
  • Render a code block
  • Render a copy button
  • It can copy the code
  • It can run a callback if the copy was successful
• Cookie Banner
  • It can render a cookie bar
  • It can accept cookies
  • It doesn't render the cookie bar if cookies are already accepted
• Breakpoint
• Breakpoint Helpers
• Click Outside
• Fixed
• Fixed Helpers
• Focus Trap
  • It can trap focus
  • The trap can be deactivated
  • The trap accepts options
• In View
  • It can check whether another element is in the viewport
  • It can check whether the slot element is in the viewport
  • It can listen for an event to be emitted
  • It accepts an array as a threshold
  • The default threshold is 0
• Scroll To
  • Scroll to an element
  • Scroll to a fixed position
  • Scroll with offset
  • Scroll behaviour can be defined
• Visually Hidden
  • It can render text that is only visibile for screen readers
  • It passes an accessibility test

Add Page Progress component

The library should include a page progress component. This component will return a % of the page that has been scrolled. Optionally it could also be a % of a specific container.

This is useful for websites that have long-form articles and want to show a progress indicator. It could also be useful if you want to trigger an action after 50% of an article has been read.

Features:

• Return a % of the page/container that has been read/scrolled
• Emit an event/run a callback when a certain threshold is reached
  • The threshold could optionally be passed in as a prop
  • Or an event can be emitted when the progress is updated and it's up to the user to check the progress
• Improve scroll performance by using passive event listeners?

Click Outside - Remove event listener when it's destroyed

The component should remove the event listener it has attached when it's destroyed.

Modal - Add component

The library should contain a modal component.

The modal should have the following features:

• Open / Close methods
• Handle focus trapping
• Render with portal
• Prevent body from scrolling in the background
• Handle various ways to close it
  • Close button
  • Click outside
  • Press escape

InView shouldn't accept an array as a threshold

Currently InView accepts an array of numbers as a threshold. It does that because it's based on the Intersection Observer API which accepts the same array. But it doesn't actually work properly in the component since that's only returning a boolean of whether the element is in view. This mean that this boolean will only be updated when the first item in the array matches. Therefor it doesn't make any sense to accept an array and it should be removed.

ClickOutside - Should accept an 'active' prop

A problem with the ClickOutside component is that you can't control when it's active. If you for example use it in a modal where you attach a method that will close the modal to it. If this code is active when the modal trigger is clicked the method will still fire and automatically close the modal right away again. This can be solved by allowing it to accept an 'active' prop. If the prop is provided it will only emit events if the prop is 'true'.

Move HamburgerNavToggle into HamburgerNav

There isn't really a need for these this to live in a seperate file. It's basically just another really simple component and it uses a render function so it doesn't need to be a .vue file either. It will be simpler if it was simply moved into the parent component

Stories for transitions

Stories should be added for all the transitions

Breakpoint - Create test for resizing

The Breakpoint component currently supports resizing, but there is not test that proves it