disco_app 0.11.0

data/app/assets/components/shopify/buttons/button.es6.jsx

@@ -0,0 +1,15 @@
+const Button = ({ children, disabled, name=false, onClick = ()=>{}, primary = false, destroy = false, type = 'button' }) => {
+
+  const className = classNames({
+    'btn': true,
+    'btn-primary': primary,
+    'btn-destroy': destroy
+  });
+
+  return(
+    <button type={type} name={name} disabled={disabled} className={className} onClick={onClick}>
+      {children}
+    </button>
+  )
+
+};

data/app/assets/components/shopify/card/_card.scss

@@ -0,0 +1,342 @@
+.next-card {
+  background-color: #ffffff;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: #31373d;
+}
+
+.next-card ~ .next-card {
+  margin-top: 20px;
+}
+
+.next-card--aside {
+  background-color: #f5f6f7;
+}
+
+.next-card--aside-lighter {
+  background-color: #fafbfc;
+}
+
+.next-card--plain {
+  box-shadow: none;
+}
+
+.next-card--hide-overflow {
+  overflow: hidden;
+}
+
+.next-card--stacked {
+  margin: 0;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.next-card--stacked ~ .next-card--stacked {
+  margin-top: 0;
+}
+
+.next-card--preserve-first-and-last-section-spacing .next-card__section--half-spacing:first-of-type {
+  padding-top: 20px;
+}
+
+.next-card--preserve-first-and-last-section-spacing .next-card__section--half-spacing:last-of-type {
+  padding-bottom: 20px;
+}
+
+.next-card--sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 76px;
+}
+
+.next-card--js-sticky {
+  position: fixed;
+  top: 56px;
+  margin-top: 20px;
+}
+
+.next-card__header {
+  padding: 20px 20px 0;
+}
+
+.next-card__header .next-heading {
+  margin-bottom: 0;
+}
+
+.next-card__footer {
+  padding: 0 20px 20px;
+}
+
+.next-card__section {
+  padding: 20px;
+}
+
+.next-card__section ~ .next-card__section {
+  border-top: 1px solid #ebeef0;
+}
+
+.next-card__section ~ .next-card__section.next-card__section--no-border {
+  border-top: 0;
+}
+
+.next-card__section:first-child {
+  border-radius: 3px 3px 0 0;
+}
+
+.next-card__section:last-child {
+  border-radius: 0 0 3px 3px;
+}
+
+.next-card__section--no-vertical-spacing {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.next-card__section--no-vertical-spacing + .next-card__section {
+  border-top: none;
+}
+
+.next-card__section--no-horizontal-spacing {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.next-card__section--half-spacing {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.next-card__section--half-spacing.next-card__header {
+  padding-bottom: 0;
+}
+
+.next-card__section--half-spacing.next-card__footer {
+  padding-top: 0;
+}
+
+.next-card__section--three-quarter-spacing {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.next-card__section--double-spacing {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.next-card__section--no-padding {
+  padding: 0;
+}
+
+.next-card__section--subdued {
+  background-color: #f5f6f7;
+}
+
+.next-card__section--more-subdued {
+  background-color: #ebeef0;
+}
+
+.next-card__section--less-subdued {
+  background-color: #fafbfc;
+}
+
+.next-card__section--accentuated {
+  background-color: #0078bd;
+}
+
+.next-card__section--accentuated .next-heading {
+  color: #ffffff;
+}
+
+.next-card__section--bordered {
+  border-top: 1px solid #ebeef0;
+}
+
+.next-card__section--no-bottom-spacing {
+  padding-bottom: 0;
+}
+
+.next-card__section--no-bottom-spacing + .next-card__section {
+  border-top: 0;
+}
+
+.next-card__section--no-top-spacing {
+  padding-top: 0;
+}
+
+.next-card__section ~ .next-card__section--no-top-spacing {
+  border-top: 0;
+}
+
+.next-card__section--border-left {
+  border-left: 1px solid #ebeef0;
+}
+
+.next-card__section--border-bottom {
+  border-bottom: 1px solid #ebeef0;
+}
+
+.next-card__section--centered {
+  text-align: center;
+}
+
+.next-card__section--sello-only {
+  position: relative;
+}
+
+.next-card__section--sello-only::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 10px;
+  background-color: #2cc699;
+}
+
+.next-card__section--sello-only:last-child::after {
+  border-radius: 0 0 3px 0;
+}
+
+.next-card__section--sello-only:first-child::after {
+  border-radius: 0 3px 0 0;
+}
+
+.next-card--with-full-height-image {
+  position: relative;
+  padding-left: 250px;
+  max-width: calc(100% - 250px);
+}
+
+.next-card--with-full-height-image .next-card__image {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 250px;
+  background-size: cover;
+  background-position: center;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.page--condense-spacing .next-card--with-full-height-image {
+  padding-left: 0;
+  max-width: 100%;
+}
+
+.page--condense-spacing .next-card--with-full-height-image .next-card__image {
+  position: static;
+  display: block;
+  width: 100%;
+  height: 120px;
+  border-radius: 0;
+}
+
+.next-card__section__separator {
+  margin: 20px auto;
+  background-color: #ebeef0;
+}
+
+.next-card__section__separator--no-margin {
+  margin: 0;
+}
+
+.next-card__separator {
+  margin: 0;
+  height: 1px;
+  background: #ebeef0;
+}
+
+.next-card__separator--thick {
+  height: 5px;
+}
+
+.next-card__separator--inline {
+  margin: 10px 20px;
+}
+
+.next-card--top-rounded-corners {
+  border-radius: 3px 3px 0 0 !important;
+}
+
+.next-card--bottom-rounded-corners {
+  border-radius: 0 0 3px 3px !important;
+}
+
+.next-card--all-rounded-corners {
+  border-radius: 3px !important;
+}
+
+.next-card--left-rounded-corners {
+  border-radius: 3px 0 0 3px;
+}
+
+.next-card--right-rounded-corners {
+  border-radius: 0 3px 3px 0;
+}
+
+.next-card--top-right-rounded-corner {
+  border-top-right-radius: 3px;
+}
+
+.next-card--bottom-right-rounded-corner {
+  border-bottom-right-radius: 3px;
+}
+
+.next-card--top-left-rounded-corner {
+  border-top-left-radius: 3px;
+}
+
+.next-card--bottom-left-rounded-corner {
+  border-bottom-left-radius: 3px;
+}
+
+.next-card__ribbon {
+  background: #fafbfc;
+  border-right: solid 1px #ebeef0;
+  border-radius: 3px 0 0 3px;
+  padding: 20px;
+  display: block;
+}
+
+.next-card__ribbon--warning {
+  background: #ffd117;
+  border-right: solid 1px rgba(212, 160, 2, 0.25);
+}
+
+.next-card__ribbon--vertically-centered {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.next-ui .next-text-slate {
+  color: #31373d;
+}
+
+.next-card__header--fully-padded {
+  padding-bottom: 20px;
+}
+
+.next-card--semi-transparent {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.next-card__channel-image {
+  margin-right: 20px;
+}
+
+.next-grid--single-column .next-card__channel-image {
+  display: none;
+}

data/app/assets/components/shopify/card/card-header.es6.jsx

@@ -0,0 +1,34 @@
+const CardHeader = ({ title, subheading, children }) => {
+
+  // If children were provided, insert them as the "action" item on the right
+  // hand side of the header.
+  let actionStackItem = null;
+  if(children) {
+    actionStackItem = (
+      <UIStackItem>
+        {children}
+      </UIStackItem>
+    )
+  }
+
+  return (
+    <header className="next-card__header">
+      <UIStack>
+        <UIStackItem fill={true}>
+          <UIHeading subheading={subheading}>{title}</UIHeading>
+        </UIStackItem>
+        {actionStackItem}
+      </UIStack>
+    </header>
+  );
+};
+
+CardHeader.propTypes = {
+  title: React.PropTypes.string.isRequired,
+  subheading: React.PropTypes.bool,
+  children: React.PropTypes.node
+};
+
+CardHeader.defaultProps = {
+  subheading: false
+};

data/app/assets/components/shopify/card/card-section.es6.jsx

@@ -0,0 +1,26 @@
+const CardSection = ({ children, wrappable, borderless }) => {
+  const className = classNames({
+    'next-card__section': true,
+    'wrappable': wrappable,
+    'wrappable--half-spacing': wrappable,
+    'next-card__section--no-border': borderless,
+    'next-card__section--no-top-spacing': borderless
+  });
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+CardSection.propTypes = {
+  children: React.PropTypes.node.isRequired,
+  wrappable: React.PropTypes.bool,
+  borderless: React.PropTypes.bool
+};
+
+CardSection.defaultProps = {
+  wrappable: false,
+  borderless: false
+};

data/app/assets/components/shopify/card/card.es6.jsx

@@ -0,0 +1,16 @@
+const Card = ({ children, aside }) => {
+
+  const className = classNames({
+    'next-card': true,
+    'next-card--aside': aside
+  });
+
+  return (
+    <div className={className}>{children}</div>
+  );
+};
+
+Card.PropTypes = {
+  children: React.PropTypes.node,
+  aside: React.PropTypes.bool
+};

data/app/assets/components/shopify/typography/_typography.scss

@@ -0,0 +1,23 @@
+.ui-heading {
+  font-size: 1.21429rem;
+  line-height: 1.71429rem;
+  font-weight: 600;
+}
+
+.ui-subheading {
+  font-size: 0.92857rem;
+  line-height: 1.42857rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+@media screen and (min-width: 640px) {
+  .ui-heading {
+    font-size: 1.14286rem;
+  }
+
+  .ui-subheading {
+    font-size: 0.85714rem;
+  }
+}

data/app/assets/components/shopify/typography/ui-heading.es6.jsx

@@ -0,0 +1,16 @@
+const UIHeading = ({ children, subheading }) => {
+  if(subheading) {
+    return <h3 className="ui-subheading">{children}</h3>;
+  }
+
+  return <h2 className="ui-heading">{children}</h2>;
+};
+
+UIHeading.propTypes = {
+  children: React.PropTypes.node.isRequired,
+  subheading: React.PropTypes.bool
+};
+
+UIHeading.defaultProps = {
+  subheading: false
+};

data/app/assets/components/shopify/ui-layout/_ui-layout.scss

@@ -0,0 +1,157 @@
+.ui-page-actions {
+  @include flexbox();
+  margin: 0 auto;
+  max-width: 1036px;
+  padding: 20px 0;
+  border-top: 1px solid #d3dbe2;
+}
+
+.ui-page-actions__primary {
+  @include flex(1 1 auto);
+  padding-right: 20px;
+}
+
+.ui-page-actions__secondary {
+  @include flex(1 1 auto);
+  padding: 0 20px;
+}
+
+.ui-footer-help {
+  margin: 1.71429rem 0;
+  text-align: center;
+  width: 100%;
+}
+
+.ui-footer-help__content {
+  color: rgba(0,0,0,0.56);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: left;
+  margin: 0 auto;
+  padding: 1.14286rem;
+  border: 1px solid #d3dbe2;
+  border-radius: 3px;
+}
+
+.ui-empty-state {
+  text-align: center;
+
+  .next-heading {
+    font-weight: 300;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.ui-empty-state__title {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.92857rem;
+  line-height: 2.57143rem;
+  font-weight: 400;
+  margin: 0 0 20px;
+
+  @media (min-width: 640px) {
+    font-size: 2.35714rem;
+    line-height: 3.14286rem;
+  }
+}
+
+.ui-empty-state__subtitle {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.14286rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  color: rgba(0,0,0,0.56);
+  margin: 0 0 20px;
+
+  @media (min-width: 640px) {
+    font-size: 1.42857rem;
+    line-height: 2rem;
+  }
+}
+
+.ui-empty-state__section {
+  padding: 60px 0;
+}
+
+.ui-empty-state__subsection {
+  @include flexbox();
+  @include flex-direction(column);
+  @include align-items(center);
+
+  max-width: 1000px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 0 30px;
+
+  & > *+* {
+    margin-bottom: 20px;
+  }
+}
+
+.ui-empty-state__items {
+  @include flexbox();
+  @include flex-wrap(wrap);
+  @include justify-content(center);
+
+  margin-top: -30px;
+  margin-left: -30px;
+  max-width: calc(100% + 30px);
+  width: calc(100% + 30px);
+}
+
+.ui-empty-state__item {
+  @include flex(1 1 263.33333px);
+  margin-top: 30px;
+  margin-left: 30px;
+
+  &:only-of-type {
+    @include flex(0 1 454px);
+  }
+}
+
+.ui-empty-state__subitems {
+  @include flexbox();
+  @include flex-wrap(wrap);
+
+  margin-top: -20px;
+  margin-left: -20px;
+  max-width: calc(100% + 20px);
+  width: calc(100% + 20px);
+}
+
+.ui-empty-state__subitem {
+  margin-top: 20px;
+  margin-left: 20px;
+  position: relative;
+
+  &:first-child {
+    @include flex(1 1 150px);
+    height: 90px;
+    min-width: 0;
+  }
+
+  &:last-child {
+    @include flex(1 1 60%);
+  }
+
+
+  img {
+    margin: 0 auto;
+    max-height: 100%;
+    position: absolute;
+    bottom: 0;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    left: 50%;
+  }
+}
+

data/app/assets/components/shopify/ui-layout/ui-annotated-section.es6.jsx

@@ -0,0 +1,29 @@
+const UIAnnotatedSection = ({ title, description, children }) => {
+
+  return (
+    <section className="ui-annotated-section">
+
+      <div className="ui-annotated-section__annotation">
+        <div className="ui-annotated-section__title">
+          <h2 className="next-heading next-heading--no-margin">{title}</h2>
+        </div>
+
+        <div className="ui-annotated-section__description">
+          {typeof description == 'string' ? <p>{description}</p> : description}
+        </div>
+      </div>
+
+      <div className="ui-annotated-section__content">
+        {children}
+      </div>
+
+    </section>
+  );
+
+};
+
+UIAnnotatedSection.propTypes = {
+  title: React.PropTypes.string.isRequired,
+  description: React.PropTypes.node,
+  children: React.PropTypes.node
+};

data/app/assets/components/shopify/ui-layout/ui-empty-state.es6.jsx

@@ -0,0 +1,35 @@
+const UIEmptyState = ({ title, subtitle, image, href, label }) => {
+
+  let imageSubsection = null;
+  if(image) {
+    imageSubsection = (
+      <div className="ui-empty-state__subsection">
+        <div className="ui-empty-state__items">
+          <div className="ui-empty-state__item">
+            <div className="ui-empty-state__subitems">
+              <div className="ui-empty-state__subitem">
+                <img src={image} alt={title} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return(
+    <div className="ui-empty-state">
+      <div className="ui-empty-state__section">
+        <div className="ui-empty-state__subsection">
+          <h1 className="ui-empty-state__title">{title}</h1>
+          <h2 className="ui-empty-state__subtitle">{subtitle}</h2>
+        </div>
+        {imageSubsection}
+        <div className="ui-empty-state__subsection">
+          <a className="btn btn-large btn-primary" href={href}>{label}</a>
+        </div>
+      </div>
+    </div>
+  )
+
+};

data/app/assets/components/shopify/ui-layout/ui-footer-help.es6.jsx

@@ -0,0 +1,13 @@
+const UIFooterHelp = ({ __html }) => {
+
+  return(
+    <div className="ui-footer-help">
+      <div className="ui-footer-help__content">
+        <div>
+          <p dangerouslySetInnerHTML={{__html: __html}} />
+        </div>
+      </div>
+    </div>
+  )
+
+};