revelrylabs / harmonium Goto Github PK

• enable icons in pagination component (make them work and use the Icon component.
• As a developer, I would like to use custom content for the first, previous, next, and last links.
• As a developer, I would like to have default content for the first, previous, next, and last links (words plus icons).

stateless and stateful versions

https://foundation.zurb.com/sites/docs/badge.html

<Badge>
  [things]
</Badge>

• props to be added as classes:
  • primary, secondary, tertiary, alert, warning, success, info, small, medium, large
• should allow for nested content (i.e. icons, text, etc.)

• upgrade to Node 8.1.0 or thereabouts
• update dependencies to latest versions
• fix React.Proptypes deprecation warnings
• fix assorted update deprecation warnings probably

Not sure what's going on, but I always have to restart.

I’m trying to add some props to the Button component, but doesn’t seem like they are rendered

import Button from 'revelry-components/src/Button';

class MyExample extends React.Component {
  render() {
    return (
        <Button alert value="cancel" type="submit" name="action">Cancel</Button>
    );
  }
}

Renders as:

<button class="RevButton button alert" data-reactid="7">Cancel</button>

Expected:

<button class="RevButton button alert" value="cancel" type="submit" name="action" data-reactid="7">Cancel</button>

http://foundation.zurb.com/sites/docs/orbit.html

Roll your own JS into the component. Read here to learn how to make CSS animations happen properly in React: https://facebook.github.io/react/docs/animation.html

Add button trigger for modal example so a user can see how it works and looks/feels.

Details guidelines and tips for the following:

• Every module file must come with a corresponding example file.
• Every module file should get tests.
• How to write/run tests.

(Tests should use mocha/chai/enzyme.)

A common task we need to do in applications is share a page on social media. We should build a reusable component for share links.

• Takes a url to be shared, message to share with it, and a social network as props.
• Accepts children which are the body of the link
• Based on the social network, properly builds a share link URL.
• Supports multiple networks. At least facebook and twitter to start, but the skies are the limit.

Implementation notes:
We should use the link method supported by most network, not any javascript based share widgets or SDKs. These add a ton of page weight and clash with everything else. Links are simple, easy, and flexible and are a cornerstone of the web. Stop making it complicated. No really, stop.

This repo does a good job of documenting the common options for different networks, but some of them may have more options not listed there: https://github.com/bradvin/social-share-urls

Don't worry about icons or images or button look vs link look-- we're going to use the children prop to define the contents of the share link, remember?

Component Vars Audit

• component vars should be written consistently
  $[component]-[css-property]-[variant]-[state]
• each component should have !default vars listed at the top of the component stylesheet
• component vars should be smart (ex: chain colors to other design decisions the user has already made, no hex or static color vars)
• component vars should be copied to the settings file, remove the !defaults and comment out using //. This way, uncommenting vars in the settings file will easily overwrite the !default vars on the component stylesheet
• Rows & Cols
• Expanding Cols
• Button
• Checkboxes and Fieldsets
• File Input
• Input
• Input Group
• Label
• Radio
• Select
• Textarea
• Emptyable
• Pagination (this is a mess!)
• Currency
• NumberFormatter
• Pluralize
• Menu
• TopBar
• Card
• CardLayout (can we combine with Card??)
• FlexVideo (WAT?)
• MediaObject (what is this supposed to do?)
• Accordion
• Callout
• Modal
• Tabs
• Badge
• CloseButton
• Icon ** WAIT!** <-- what are we doing here?
• Authenticity Toke (N/A)
• Browser Support Warning
• HelpText
• Social
• Progress
• TextAlign (I'm not convinced on the value of this vs. already exiting text-align classes - also example markup is dumb and can/will never work that way)
• Visibility (I'm not convinced on the value of this vs. already exiting visibility classes)
• LoremIpsum

http://foundation.zurb.com/sites/docs/pagination.html#

As a user...

• I can see which page I am currently on.
• I can find a link to the first page.
• I can find a link to the last page.
• I can find a link to the previous page.
• I can find a link to the next page.
• when I'm on mobile, the pagination makes sense and I can still go forward, backward, first, and last.

As a developer...

• I can pass in custom labels or icons for first, last, previous, and next.
  • If I don't pass in a custom label, it defaults to FontAwesome chevrons.
• I can set the number of pages that are shown on the component at one time.
  • If I don't pass in a max pages, it defaults to 5.
• I can pass in a click event that will handle what to do for each page link that is clicked, and the target page number is passed as an argument to it.
• I can pass in an option to not show first and last links. By default they are included.

Displays basically all the visual components in one spot. Easy way for designers to add a style guide to the project.

I'd like to use a Brand component for adding the logo to a site, along with screenreader text and link to homepage or root of app.

I'd like to write it somewhat like this:

<Brand href="root or landing page" img="logo.jpg" title="screen reader title" />

Where the generated markup looks kind of like this:

<a href="props href" className="rev-Brand">
  <img src="magic-image-path-to-logo-from-props"/>
  <span className="ShowForSR">props Title for Screen Readers</span>
</a>

https://foundation.zurb.com/sites/docs/label.html

<Label>
  [children]
</Label>

• Label props to be added as classes: primary, secondary, tertiary, alert, warning, success, info, small, medium, large
• should allow for children

The modal style isn't really a modal - see screenshot below. The "modal" is the "your session is about to expire" bit.

Cards come up frequently in applications. I think we should add a card component (with some common variations) to our framwork. Material Design has a good "system" of variations for cards, and they've thought about handling cards with images / video, cards with action buttons, responsive layout, etc. I would suggest we use their "system" / "wireframes", but implement in our toolkit, using foundation styles which go with our other styles (e.g. cards probably have the same corner and border as callouts?).

Link: https://material.google.com/components/cards.html#cards-usage

Acceptance Criteria:

• The card "container" itself is styled similarly to a "Callout" from Foundation and powered by the standard variables (border radius, border, shadows, etc)
• The card can accept a renderable item (component instance or string) as a title
  • and the title is displayed at the top of the card
  • and if there is no title (empty string or null), there is no title area and subsequent content (for example, image/video/body content) is aligned against the top
• The card can accept a piece of media (image or video) and that will be displayed after a title (if there is a title) or at the top of the card (if there is no title)
  • The media can be presented "full bleed"-- it is aspect scaled so it extends from the left side of the card to the right.
• The card can accept body content. It is presented after the title and media.
  • The body content can be a string or a react component instance (recommend making the body this.props.children
• The card can accept actions, which are one or more buttons or links, presented at the bottom of the card
• The padding and margins of the card should be consistent with other Foundation elements.
• Padding and margins behave reasonably, regardless of whether any given elements (title, media, body, or actions) are present or not

http://foundation.zurb.com/sites/docs/flex-grid.html

• They should do what the foundation flex grid does.
• I should be able to import {Row, Col} from './flexGrid' the same way I import {Row, Col} from './grid'

Right now, the docs site is pretty barebones and doesn't really show off the styles of the framework.

Would like to build a site that has:

• Actually bring in our new default SCSS
• A static home page that explains what the framework is and why you want to use it
• A well organized component gallery with examples and prop documentation
  • Can we make the examples into codepen style things (editable in page)?
• Documentation of any global variables and settings

https://foundation.zurb.com/sites/docs/forms.html

<HelpText>[children]</HelpText>

• component should accept classNames
• component should allow for children

The pagination component handles making elements of navigation, but how do you have it create proper links for your pagination scheme?

Nick was looking at it and didn't see the option. Either it is there and not properly documented, or it isn't there and should be.

The idea: a button / link / switch / etc for actions that are dangerous and need confirmation. When given an event handler (i.e. onClick / onChange / onSubmit), it wraps it such that it first displays a designed confirmation message and a confirmation button / link /switch / etc. Only upon hitting the confirmation does the original event handler actually run.

We frequently get requests that the error message should go away when the input value is changed. Let's build this in so that we can stop making per-project code that almost always sucks.

From our conversation here: https://github.com/revelrylabs/dcm/issues/245 We need to create two types of table components for Rev Core.

1. A table component that actually uses the <table> tags

2. A table component that mimics a table, but uses Rows and Cols (or listed items). A reference for this type of table is already built out for DCM.

Also, make sure to follow the instructions for the mobile table view from the DCM reference above.

Right now, all the components are in a flat directory and so they just show up as a alphabetical list on the cli and in editors. It would be better if it were organized into logical groups (e.g. grid, forms, nav).

• For backwards compatibility, make components in directories under src build directly into the root of lib (so we don't break projects using the old scheme) as well as their real place in the structure
• Add a warning in dev mode for imports from the root instead of the subdirectories (e.g.
  "hey, in version X, you'll have to import this from 'revelry-components/grid/Row' instead)
• Group component files into logical directories
• Ensure test, build, and docs tasks still run correctly

and add the appropriate build pipeline for the docs site.

we don't need to build the stylesheet for distribution. i think it's fine to expect people to include the right component-specific sass files from node_modules/revelry_core_node/scss or whatever.

• Sass build pipeline exists and is incorporated into docs site auto-build.
• scss/ directory is created, and these files are also built into docs site styles.

Want to start building our roadmap for the back half of this year, work out what we're doing and not doing.

Thoughts in no particular order

• Branding: revelry_core_node is a particularly bad name because it isn't really for node, and it isn't just for Revelry. Even the package name revelry-components is bad, because you can use this outside of our toolkit. We should name this thing after what it does and why you would use it.
• Better docs site. Right now, the docs site is very bare bones.
  • Need to bring in the next base styles.
  • Needs non-example content.
    • Home page explaining what it is and why you'd use it.
    • Needs a getting started guide / tutorial.
  • The examples could be better.
  • Need documentation of the props.
• Integration of more modern tooling
  • Styled Component?
    • Sketch integration
  • React Primitives?
  • Can we build a toolkit that 100% works on both React DOM and React Native?

Open to any other ideas. Let's get it all on the board and decide how and where to start.

I'd like to be able to update the example markup. I want to add descriptions and reasons behind why we made certain decisions, as well as provide clarity into how components behave inside other components vs. on their own.

Currently, I can only add an h2 title for a component example.

As a user of the internets, I would like to see a well designed, informative notification if the site or application I am visiting is not supported because of my old-ass browser.

Unless specifically required for a really really (REALLY) good reason, 'out of date browser' notification should show for lt-ie9.

Something along these lines:
https://github.com/ded/bowser

AC:

• Proofed / Spelled-checked message about users browser being unsupported
• Link to browsehappy.com or some other well maintained list of current browsers (We don't want to maintain this list ourselves since it changes all the time)
• Notification should cover the entire screen. (The issue here is that if the message is too small the user could 1. not notice it 2. still access the site - for most sites this wouldn't be a big deal, but for those dealing with money or secure data, using a browser that has not been tested seems like a big risk)

http://foundation.zurb.com/sites/docs/close-button.html

<CloseButton icon="optional-icon-name">
  <span>Optional content inside close button</span>
</CloseButton>

• CloseButton should accept classNames
• CloseButton should be able to pair with an element that has the 'data-closable' to close that element

We're using ExpandingColStateContainer when it should probably be ExpandingCol.Stateful to match other things.

• I do not have to kill the server and restart to recompile the stylesheet.

https://foundation.zurb.com/sites/docs/media-object.html

<MediaObject>
  <MediaObjectSection>
     [things]
  </MediaObjectSection>
  <MediaObjectSection>
     [more things]
  </MediaObjectSection>
</MediaObject>

• MediaObject props to be added as classes:
  stack-for-[breakpoint-size], align-bottom, align-center, align-top
  breakpoint-sizes: small, medium, large, xlarge, xxlarge
• MediaObjectSection props to be added as classes: main-section, bottom, middle, top, align-self-bottom, align-self-top, align-self-center