disco_app 0.10.5 → 0.11.0

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/{javascripts/disco_app/components/ui-kit/cards → components/shopify/card}/card-section.es6.jsx

@@ -1,5 +1,4 @@
-const CardSection = ({ title, title_small, children, wrappable, borderless }) => {
-
+const CardSection = ({ children, wrappable, borderless }) => {
   const className = classNames({
     'next-card__section': true,
     'wrappable': wrappable,
@@ -8,23 +7,20 @@ const CardSection = ({ title, title_small, children, wrappable, borderless }) =>
     'next-card__section--no-top-spacing': borderless
   });
 
-  const showTitle = () => {
-    if (title) {
-      return <CardSectionTitle title={title} small={title_small} />;
-    } else {
-      return null;
-    }
-  };
-
   return (
     <div className={className}>
-      {showTitle()}
       {children}
     </div>
   );
 };
 
 CardSection.propTypes = {
-  title: React.PropTypes.string,
-  children: React.PropTypes.node
+  children: React.PropTypes.node.isRequired,
+  wrappable: React.PropTypes.bool,
+  borderless: React.PropTypes.bool
+};
+
+CardSection.defaultProps = {
+  wrappable: false,
+  borderless: false
 };

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/{stylesheets/disco_app/ui-kit/_ui-empty-state.scss → components/shopify/ui-layout/_ui-layout.scss}

@@ -1,8 +1,43 @@
-//
-// ui-empty-state.scss
-// Styles for empty states not provided by the
-// Channel SDK UI Kit.
-// --------------------------------------------------
+.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;
@@ -119,3 +154,4 @@
     left: 50%;
   }
 }
+

data/app/assets/components/shopify/ui-stack/ui-stack-item.es6.jsx

@@ -0,0 +1,21 @@
+const UIStackItem = ({ children, fill }) => {
+  const className = classNames({
+    'ui-stack-item': true,
+    'ui-stack-item--fill': fill
+  });
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+UIStackItem.propTypes = {
+  children: React.PropTypes.node,
+  fill: React.PropTypes.bool
+};
+
+UIStackItem.defaultProps = {
+  fill: false
+};

data/app/assets/components/shopify/ui-stack/ui-stack.es6.jsx

@@ -0,0 +1,24 @@
+const UIStack = ({ children, wrap, center }) => {
+  const className = classNames({
+    'ui-stack': true,
+    'ui-stack--wrap': wrap,
+    'ui-stack--alignment-center': center
+  });
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+UIStack.propTypes = {
+  children: React.PropTypes.node,
+  wrap: React.PropTypes.bool,
+  center: React.PropTypes.bool
+};
+
+UIStack.defaultProps = {
+  wrap: true,
+  center: true
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/input-select.es6.jsx

@@ -1,7 +1,7 @@
 const InputSelect = ({ id, label, labelHidden, name, options, value, defaultValue, helpMessage, onChange }) => {
 
   const optionElements = options.map((option) => {
-    return <option key={option.value} value={option.value}>{option.label}</option>;
+    return <option key={option.value} value={option.value} disabled={option.disabled}>{option.label}</option>;
   });
 
   const labelClassName = classNames({

data/app/assets/javascripts/disco_app/components/ui-kit/tables/table.es6.jsx

@@ -15,8 +15,13 @@ const Table = ({ children, scrollable, sticky }) => {
   );
 };
 
-Card.PropTypes = {
+Table.PropTypes = {
   children: React.PropTypes.node.isRequired,
   scrollable: React.PropTypes.bool,
   sticky: React.PropTypes.bool
 };
+
+Table.defaultProps = {
+  scrollable: false,
+  sticky: false
+};

data/app/assets/javascripts/disco_app/components.js

@@ -1,2 +1,3 @@
 //= require classnames
 //= require_tree ./components
+//= require_tree ../../components

data/app/assets/stylesheets/disco_app/disco_app.scss

@@ -14,8 +14,11 @@ $font-family: -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", "S
 @import 'ui-kit/ui-icons';
 @import 'ui-kit/ui-layout';
 @import 'ui-kit/ui-forms';
-@import 'ui-kit/ui-stack';
-@import 'ui-kit/ui-empty-state';
-@import 'ui-kit/ui-footer-help';
-@import 'ui-kit/ui-page-actions';
 @import 'ui-kit/ui-tabs';
+
+// Components
+@import '../../components/shopify/ui-layout/ui-layout';
+@import '../../components/shopify/ui-stack/ui-stack';
+@import '../../components/shopify/typography/typography';
+@import '../../components/shopify/buttons/buttons';
+@import '../../components/shopify/card/card';

data/app/helpers/disco_app/application_helper.rb

@@ -42,9 +42,27 @@ module DiscoApp::ApplicationHelper
     link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
   end
 
+  # Return the props required to instantiate a React ModelForm component for the
+  # given model instance.
+  def model_form_props(model)
+    {
+      model: model,
+      modelTitle: model.persisted? ? model.to_s : "New #{model.model_name.human.downcase}",
+      modelName: model.model_name.singular,
+      modelUrl: model.persisted? ? send("#{model.model_name.singular}_path", model) : nil,
+      modelsUrl: send("#{model.model_name.plural}_path"),
+      authenticityToken: form_authenticity_token,
+      errors: errors_to_react(model)
+    }.as_json
+  end
+
   # Helper method that provides detailed error information from an active record as JSON
-  def errors_to_react(record)
-    {type: record.model_name.human.downcase, errors: record.errors.keys, messages: record.errors.full_messages}.as_json
+  def errors_to_react(model)
+    {
+      type: model.model_name.human.downcase,
+      errors: model.errors.keys,
+      messages: model.errors.full_messages
+    }.as_json
   end
 
 end

data/app/views/layouts/embedded_app.html.erb

@@ -21,11 +21,17 @@
 </head>
 <body>
   <script type="text/javascript">
+    window.DiscoApp = {
+      INITIAL_TITLE: "<%= yield(:title) %>",
+      INITIAL_ICON: "<%= image_url("disco_app/icon.svg") %>",
+      INITIAL_BUTTONS: <%= content_for?(:buttons) ? content_for(:buttons) : '{}' %>,
+      INITIAL_BREADCRUMB: <%= content_for?(:breadcrumb) ? content_for(:breadcrumb) : 'undefined' %>
+    };
     ShopifyApp.Bar.initialize({
-      title: "<%= yield(:title) %>",
-      icon: "<%= image_url("disco_app/icon.svg") %>",
-      buttons: <%= content_for?(:buttons) ? content_for(:buttons) : '{}' %>,
-      breadcrumb: <%= content_for?(:breadcrumb) ? content_for(:breadcrumb) : 'undefined' %>
+      title: DiscoApp.INITIAL_TITLE,
+      icon: DiscoApp.INITIAL_ICON,
+      buttons: DiscoApp.INITIAL_BUTTONS,
+      breadcrumb: DiscoApp.INITIAL_BREADCRUMB
     });
   </script>
 

data/lib/disco_app/version.rb

@@ -1,3 +1,3 @@
 module DiscoApp
-  VERSION = '0.10.5'
+  VERSION = '0.11.0'
 end