Blue - v0.0.24

Add Sortable Component for "dragon-drop" (drag and drop) 🐉

This update adds a new Sortable component, built using react-sortable-hoc. Sortable enhances react-sortable-hoc a lot. Child components added to the new Sortable component automatically get wrapped with the various HOC provided by the react-sortable-hoc library.

Example

Any child components placed inside this component automatically become sortable.

<Sortable>
  <Card>Jacobim Mugatu</Card>
  <Card>Lord Business</Card>
  <Card>Brennan Huff</Card>
</Sortable>

The SidebarCollapsibleCard component has been enhanced with sortable abilities using the DragHandle from react-sortable-hoc.

Finally, a new drag SVG icon has been added for the Drag Handler UI.

Resolves: #43

Note: It doesn't look like react-sortable-hoc provides aria roles. And it looks like the library lacks tests. In terms of functionality, it most fits what we need. We may need to enhance it in the future though.

---

Move bind(this) to constructor() method for Components 🔧

This update moves the instantiation of bind(this) from the render() method to constructor() for non-Stateless components. This is done for performance + best practice reasons.

Thanks to @brettjonesdev for the tip!

Blue - v0.0.23

SidebarCollapsibleCard: Toggle open with prop change

This update allows for the SidebarCollapsibleCard open state to be influenced by the prop change of isOpen, allowing for more programmatic control from a parent component/container.

Blue - v0.0.22

Add SidebarCollapsibleCard component

Add SidebarCollapsibleCard + Collapsible component

This update adds a new general Collapsible component. It is self contained, and responsible for rendering content with the ability to expand/collapse. It also provides onOpen and onClose callback methods that can be tapped into.

This update also adds a new SidebarCollapsibleCard component, which uses Collapsible to handle the main functionality. I was able to re-use a lot of other Blue components (like Heading and Flexy) in constructing this sucker, so that's awesome!

Example

<SidebarCollapsibleCard title='Quote'>
  <div>By the beard of Zeus!</div>
</SidebarCollapsibleCard>

Add new caret icons

This update also adds 4 new caret icons: up, down, left, right.

Tests and readmes were added/updated for all the things!

This update mostly adds additional functionality and does not modify previous component API. Users/consumers of Blue should be unaffected.

Resolves: #38

Blue - v0.0.21

Added method to close Portals from child component

Added the closePortal method to PortalWrapper's context, so it can be called from the child component.

Example:

class Contents extends React.Component {
  render () {
    return (
      <p>
        <button onClick={this.context.closePortal}>Close me</button>
      </p>
    )
  }
}

Contents.contextTypes = {
  closePortal: PropTypes.func
}

return (
  <Modal trigger={<Link>Open me</Link>}>
    <Contents />
  </Modal>
)

Blue - v0.0.20

Card: Enhance with flex and scrollable styles + features

In this update, the Card and Card.Block components have been enhanced with the flex prop, which enable flexbox styling. Card.Block also receives a scrollable prop, which enables a more seamless integration with the Scrollable component.

Resolves: #39

Blue - v0.0.19

Improve component exports

• Refactor and change CardBlock to Card.Block
• Update documentation + tests for Card.Block
• Export Scrollable, Portal, PortalWrapper, and RouteWrapper

Blue - v0.0.18

Fix Animate animation className

Rename from animate -> Animate

#35

Resolves: #35

Blue - v0.0.17

Add RouteWrapper HOC

In beacon embed, we had a problem where we wanted to fetch some data from the server before navigating to a new . To make this easier, this Pull Request creates a Higher Order Component, RouteWrapper, which wraps around components and adds fetch and to properties. The to property works like the to on a React Router <Link>, but the fetch property lets you specify a thunk-returning function to fetch data before triggering the route specified in to.

The <Link> and <Button> components have been wrapped with RouteWrapper, which means we can now do things like:

<Link fetch="fetchArticle" to={`docs/articles/${id}`}>
<Button fetch="fetchArticles" to="docs/articles">
<Button to="synchronous/route/path">

---

Implement specified enum propTypes

This update provides most components with a specific range of acceptable values.

For example, the states (string) that we use in Blue are error, success, warning. Components with a state prop should only accept these values, as other values will fall to render the correct styling.

To be things easier (and more consistent), I've added constants/propTypes.js that contain an export of common propTypes, such as state or size.

Blue - v0.0.16

CSS: Create hs-app dedicated stylesheet without duplicate styles

This update adds a new blue.hs-app.slim.scss file that only includes not within hs-app. This will reduce the overall build size of hs-app's CSS.

The approach I took was to comment out all of the component imports in the dedicated slim file. It's not ideal, as you'd have to update 2 .scss files everytime a new component style is added. However, it's the simplest solution for now.

To integration into hs-app, simply import the slim file:

@import "blue.hs-app.slim";

No need to import the base Blue styles + hs-app theme (which was the previous approach)

In addition to this, the components that leverage seed styles have had their classNames restored to the default classNames found in Seed.

Example:
c-Link -> c-link

CC'ing @knicklabs ❤️

Resolves: #29

Blue v0.0.15

Add ProgressBar component

This update adds a new ProgressBar component, complete with README and tests.

Example

<ProgressBar value={50} />

Props

Prop	Type	Description
onChange	function	Callback when component value updates. Returns value as percent.
size	string	Determines the size of the input.
value	number/string	Progress value to visualize in component.

Minor update: The className for the Animate component was renamed from animate to Animate.

Resolves: #25

---

ProgressBar: Add accessibility aria tags

This update adds the role="progressbar" tag, as well as aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext.

The following code:

<ProgressBar value={20} />

Will render:

<div data-reactroot="" class="c-ProgressBar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="c-ProgressBar__bar" style="width: 50%;"></div>
</div>

Follow up for #30

---

Fix SCSS path on import for color config in Icon component

The path to the color configuration in the CSS for the icon component was incorrect. This PR is to switch it to the correct path.