Skip to content
This repository has been archived by the owner on Aug 21, 2023. It is now read-only.

FluffyCard + OptionTile components #348

Merged
merged 10 commits into from Sep 18, 2018
Merged

FluffyCard + OptionTile components #348

merged 10 commits into from Sep 18, 2018

Conversation

ItsJonQ
Copy link
Contributor

@ItsJonQ ItsJonQ commented Sep 17, 2018

FluffyCard + OptionTile components

screen recording 2018-09-17 at 06 50 pm

This update adds a couple of new components, notably FluffyCard and OptionTile.
The base Card component was refactored with modern Blue standards, as well as
CSS-in-JS styling.

I did a beta test build with Card within Embed (to double check), and everything worked
fine.

OptionTile (specifically OptionIcon) is the first Blue component setup to use CSS-in-JS
based theming, defined by a ThemeProvider. This will make it easier to implement into a
user-themable environment like Embed.

Stories, docs, and tests for added for all the new components.

Interactions and styles based on @digitaldesigner 's Codepen:
https://codepen.io/buzzusborne/full/982b39329647ad92088b496705a74c78/

How to test

  • Pull down this branch
  • run npm start
  • Go to https://localhost:8900
  • Find OptionTile or OptionIcon or FluffyCard in storybook

Example

The component API for these guys should be relatively simple as well!

<ThemeProvider theme={myTheme}>
  <OptionTile.Container>
    <OptionTile icon="search" title="Go searchin" />
    <OptionTile icon="search" title="Go chattin" />
  </OptionTile.Container>
</ThemeProvider>

Jon Q added 9 commits September 14, 2018 16:39
This update creates the new FluffyCard component (along with a Container).
This component uses the base `Card` component, which has been refactored
with the latest Blue conventions.

This needs to be E2E tested, as Card will no longer render styles using
SCSS.
Setup ThemeProvider support for OptionIcon. Add stories for both components.
@coveralls
Copy link

coveralls commented Sep 17, 2018

Coverage Status

Coverage remained the same at 100.0% when pulling 18df775 on fluffy-card into aeeb82d on master.

Copy link
Collaborator

@Charca Charca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💥 Fantastic work, @ItsJonQ! These look amazing!

@ItsJonQ
Copy link
Contributor Author

ItsJonQ commented Sep 18, 2018

Thanks @Charca ! 🤗

Copy link
Contributor

@tjbo tjbo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet work.

@ItsJonQ
Copy link
Contributor Author

ItsJonQ commented Sep 18, 2018

Thanks all! Merging and make a minor release!

@ItsJonQ ItsJonQ merged commit 8d7b2a8 into master Sep 18, 2018
@ItsJonQ ItsJonQ deleted the fluffy-card branch September 18, 2018 18:44
@ItsJonQ ItsJonQ restored the fluffy-card branch September 18, 2018 18:44
@ItsJonQ ItsJonQ deleted the fluffy-card branch September 27, 2018 20:09
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants