Blue - v0.0.64

Animate: Implement AnimeJS

This mega update implements anime.js to power the Animate component. The animation sequencing setup has been overhauled with additional lifecycle hooks provided by react-transition-group.

These hooks (props) are:

• onEnter
• onEntering
• onEntered
• onExiting
• onExit
• onExited

Which correspond the the specified animation sequence (if available).

Dat Bounce

This update also provides a new elastic/bounce animation curve, which is used by default (with the exception of opacity based animations).

Component API change

Note, the Animate component's sequence prop did receive some changes. The fadeIn sequence has been renamed to fade. Below are a list of sequences. Like before, they can be used by themselves or combined:

• down
• downSmall
• fade
• left
• right
• scale
• scaleBig
• up

Other than that, nothing needs to be adjusted for Animate or AnimateGroup

Resolves: #69

---

Modal: Fix overlapping UI for scrollable content

This update adjusts the width of the Scrollable faders and the position
of the CloseButton for Modal. Previously, these elements had fixed
sizes/offsets, which overlapped with the (native) scrollbar that appears.

To remedy this, a util function was added to calculate the web
scrollbar width, determined by the OS. Calculcations where then added
to inline styles when applicable.

This update also fixes the Modal scroll bug, introduced by the
AnimeJS integration.

Resolves: #141

Blue - v0.0.63

Icon: Add new User and Tag icons

This update adds 2 new SVG icons for the Icon component, user and
tag. The Icon component storybook has been updated.

Resolves: #129

Blue - v0.0.62

StatusDot: Add additional props

This update enhances the StatusDot component by providing it with
additional props to have a more varied rendering style.

Additional props include:

• inline (ability to render the dot as display: inline-block)
• size (md|sm)
• outerBorderColor
• a new active state (which renders a green dot)

The new active state allows for this component to be more general,
instead of using online as the state for a green color.

Documentation and tests have been updated.

Resolves: #128

---

StatusDot: Icon

This update adds a new Icon prop to the StatusDot component, allowing it
to render an Icon component within, but also to adjust the component's
style.

This will add additional flexibility for the use-cases for the StatusDot
component :).

Note: You can pass any icon you wish into StatusDot (assuming it exists
as an Icon component name). The color of the icon is based on the
status of the StatusDot.

For example, if you want a red x icon, you would write:

<StatusDot status='offline' icon='cross' />

To make it easier to use some of the more common icons, icons like
tick-large or cross-large have received aliases of tick, cross,
etc...

No updates are required for the user's end.

Tests + readme have been updated.

Resolves: #130

---

Icon: Add ability to have a (right) side caret

This update adds a new withCaret prop, which renders a small caret
on the right hand side of an Icon component. The caret is automatically
aligned in the center (vertically), regardless of icon size. The caret
does not hinder other prop styles like center, and inherits the same
SVG fill color as the regular icon.

To make triple sure of this, I've written some Karma acceptance tests 🎉.

P.S. Acceptance tests are awesome. Boy, I love being able to test
ACTUAL DOM properties.

Partially resolves: #129

Blue - v0.0.61

PortalWrapper: Fix integration with Route usage

This commit resolves the issue where Route (react-router) mounted
components built with PortalWrapper (specifically Modals) don't
correctly close when the ESCAPE key is pressed.

This is due to react-router injecting the Modals in a non-linear
order. To resolve this, I've adjusted how PortalWrapper works with
it's GlobalManager. Instead of using IDs, it will use unique
incrementing index number values. This ensures that the latest
injected component, always has the highest index value. Therefore,
when triggere a close (with the escape key), the GlobalManager will
look for the highest index value and execute the close action it.

Unit tests were enhanced, but more importantly, acceptance tests
were added to test out these interactions, especially with
route changes/ESCAPE interactions.

Note: Storybook was updated to the latest versions in this update.

Resolves: #127

Blue - v0.0.60

Pressing ESC should not close all Portal components

This update adds a new "Manager" to the PortalWrapper component,
created with the new globalManager utility. This manager ensures
that pressing Escape ONLY closes the most recently Portal'ed component.

This is done by the manager tracking the IDs (which are unique) of
all the PortalWrapper created components.

This has been tested with Modals as well as Dropdowns.

Resolves: #97

Blue - v0.0.59

Adds AvatarGrid and StatusDot components

This update adds a new AvatarGrid component. It's similar to
AvatarStack and AvatarList, in that it renders an array of Avatars.
However the presentation for the avatars is different. Like AvatarList,
the new AvatarGrid component provides animations.

Example

<AvatarGrid>
  <Avatar />
  <Avatar />
  <Avatar />
</AvatarGrid>

Eventually, we'll want to update the AvatarStack and AvatarList
components to follow the same children prop convention, instead
of passing in Avatars via an avatar prop.

This update also adds a new StatusDot component, which is now
built into Avatar, and can be enabled by passing in the appropriate
status prop.

Example

<Avatar status='offline' />

Resolves: #121

Blue - v0.0.58

Add Karma acceptance testing

This update adds a Karma acceptance testing solution. A couple of
tests have been setup, but it isn't integrated into the main testing
scripts yet.

Bug fixes 🐛

During Karma testing, it revealed some bugs for PortalWrapper, via
Dropdown/Modal testing. (YAY)

The bug was that the className prop was unexpectedly being added
to <div> elements that WEREN'T the ComposedComponent. Resulting
in custom classNames being added to 2-3 nodes instead of just 1.

These have been addressed and the Jest unit tests have been updated
accordingly.

Resolves: #60

Blue - v0.0.57

Add ChatSidebar component

This (pretty big) update adds (and enhances) a variety of components to create a new ChatSidebar component.

The ChatSidebar is a larger component that helps manage the presentation, interactions, and state for the new ChatInbox and ChatList components. Ideally, state for ChatSidebar should be managed externally (via a parent component), and passed in as props.

Example

class MyComponent extends Component {
  ...
  render() {
    const {
      handleOnHideStatusBar,
      isShowStatusBar,
      newMessageCount,
    } = this.state

    return (
      <ChatSidebar
        newMessageCount={newMessageCount}
        onHideStatusBar={handleOnHideStatusBar}
        isShowStatusBar={isShowStatusBar}
      >
        <ChatInbox>
          ...
        </ChatInbox>
      </ChatSidebar>
    );
  }
}

An example of this (and all the new components) can be found in Blue's storybook:
http://localhost:8900/?selectedKind=ChatSidebar&selectedStory=default&full=0&down=1&left=1&panelRight=0

List of new components

• ChatSidebar
• ChatInbox
  • ChatInbox
  • Header
  • Content
• ChatList
  • ChatList
  • BlankSlate
  • Item
• Tag
• Illo
• Overflow
• StatusBar

List of existing components that were enhanced

• AnimateGroup
• Scrollable
• ScrollLock
• Text

Resolves: #115

Blue - v0.0.56

PortalWrapper: Remove body lock

This update removes the document.body.style.overflow: hidden approach,
which was previously used as an attempt to scroll lock the body
if components like Modals were open.

However, this approach has side effects, such as if Modals were
used within an iframe.

A couple of updates back, we introduced a new component called
<ScrollLock> (thanks @alisdair ! ❤️ ),
which has been built into <Scrollable>, and indirectly, <Modal>, that magically
remedies these issues.

Modal and PortalWrapper components have been updated to remove
any trace of body locking, and the tests have been updated to match.

No changes are required for Blue users!

Addresses: #118

Blue - v0.0.55

Add Skeleton components ☠️

This spooky update adds a collection of Skeleton components, which serve as
placeholder UI when content is loading.

The collection includes:

• Avatar
• Block
• Heading
• Image
• Paragraph
• Text

Just a heads up, these components do have shiny animations (CSS). (The screenshot, above, is static, so you can't see them shine)

Resolves: #116