disco_app 0.12.1

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/image/_image.scss

@@ -0,0 +1,82 @@
+.aspect-ratio {
+  position: relative;
+  display: block;
+  background: #fafbfc;
+  padding: 0;
+}
+
+.aspect-ratio__content {
+  position: absolute;
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
+.aspect-ratio::before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: 1px solid rgba(195,207,216,0.3);
+}
+
+.aspect-ratio--square {
+  width: 100%;
+  padding-bottom: 100%;
+}
+
+.aspect-ratio--square--50 {
+  width: 50px;
+  padding-bottom: 50px;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.aspect-ratio--square {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.next-icon.aspect-ratio__content, .aspect-ratio__content.next-icon__text {
+  position: absolute;
+}
+
+
+@keyframes next-spinner-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.next-spinner {
+  display: inline-block;
+  -webkit-animation: next-spinner-rotate 600ms linear infinite;
+  animation: next-spinner-rotate 600ms linear infinite;
+  position: relative;
+}
+
+.next-spinner>.next-icon, .next-spinner>.next-icon__text {
+  position: static;
+}
+
+.next-spinner__ring {
+  stroke: #0078bd;
+  stroke-dasharray: 100%;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  fill: none;
+}

data/app/assets/components/shopify/table/_table.scss

@@ -0,0 +1,18 @@
+.next-table--data, .next-table--line-items {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.next-table--line-items td {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.next-table--line-items td:first-of-type, .next-table--line-items th:first-of-type {
+  padding-left: 0;
+}
+
+.next-table--line-items .next-table__image-cell {
+  vertical-align: top;
+  min-width: 48px;
+}

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
+};