Colors page to Styleguide

2026-07-27 19:42:11 +10:00 · 2017-05-29 19:58:51 +03:00 · 2017-05-29 19:58:51 +03:00 · 97b6ae6bf4
commit 97b6ae6bf4
parent 2999347351
4 changed files with 246 additions and 24 deletions
--- a/src/containers/StyleguidePage/Colors.example.js
+++ b/src/containers/StyleguidePage/Colors.example.js
@ -0,0 +1,118 @@
+import React, { PropTypes } from 'react';
+import css from './StyleguidePage.css';
+import mpCSS from '../../marketplace.css';
+
+const ColorCard = props => {
+  const { mpColor, name, usage } = props;
+  const colorClasses = mpColor || css.color;
+
+  return (
+    <div className={css.colorCard}>
+      <div className={colorClasses} />
+      <div className={css.colorDescription}>
+        <p>
+          <span>{name}</span>
+          <br />
+          <span className={mpCSS.tinyFont}>{usage}</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const { string } = PropTypes;
+
+// Jest test strip off CSS classes (css is an empty object). Otherwise this could be required prop.
+const defaultProps = { mpColor: undefined };
+// Create a real undefined value, not just injecting a hopefully undefined object.
+delete defaultProps.mpColor;
+ColorCard.defaultProps = defaultProps;
+
+ColorCard.propTypes = {
+  mpColor: string,
+  name: string.isRequired,
+  usage: string.isRequired,
+};
+
+const MarketplaceColors = () => {
+  return (
+    <div className={css.content}>
+      <p className={css.spacing2x}>
+        Marketplace colors have three groups: branding color and its variations, action colors, and
+        grey palette for fine tuning UI elements.
+      </p>
+      <p className={css.spacing2x}>
+        N.B. you should import marketplace.css where ever you are going to use marketplace variables
+        (e.g. <i>@import '../../marketplace.css';</i>).
+      </p>
+      <div className={css.colorsContainer}>
+        <div className={css.colorsGroup}>
+          <ColorCard
+            mpColor={css.marketplaceColorBackground}
+            name="--marketplaceColor"
+            usage="e.g. color: var(--marketplaceColor);"
+          />
+          <ColorCard
+            mpColor={css.marketplaceColorLightBackground}
+            name="--marketplaceColorLight"
+            usage="e.g. color: var(--marketplaceColorLight);"
+          />
+          <ColorCard
+            mpColor={css.marketplaceColorDarkBackground}
+            name="--marketplaceColorDark"
+            usage="e.g. color: var(--marketplaceColorDark);"
+          />
+        </div>
+        <div className={css.colorsGroup}>
+          <ColorCard
+            mpColor={css.successColorBackground}
+            name="--successColor"
+            usage="e.g. color: var(--successColor);"
+          />
+          <ColorCard
+            mpColor={css.failColorBackground}
+            name="--failColor"
+            usage="e.g. color: var(--failColor);"
+          />
+          <ColorCard
+            mpColor={css.attentionColorBackground}
+            name="--attentionColor"
+            usage="e.g. color: var(--attentionColor);"
+          />
+        </div>
+        <div className={css.colorsGroup}>
+          <ColorCard
+            mpColor={css.matterColorDarkBackground}
+            name="--matterColorDark"
+            usage="e.g. color: var(--matterColorDark);"
+          />
+          <ColorCard
+            mpColor={css.matterColorBackground}
+            name="--matterColor"
+            usage="e.g. color: var(--matterColor);"
+          />
+          <ColorCard
+            mpColor={css.matterColorAntiBackground}
+            name="--matterColorAnti"
+            usage="e.g. color: var(--matterColorAnti);"
+          />
+          <ColorCard
+            mpColor={css.matterColorNegativeBackground}
+            name="--matterColorNegative"
+            usage="e.g. color: var(--matterColorNegative);"
+          />
+          <ColorCard
+            mpColor={css.matterColorLightBackground}
+            name="--matterColorLight"
+            usage="e.g. color: var(--matterColorLight);"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Colors = {
+  component: MarketplaceColors,
+  props: {},
+};
--- a/src/containers/StyleguidePage/StyleguidePage.css
+++ b/src/containers/StyleguidePage/StyleguidePage.css
@ -1,6 +1,4 @@
-:root {
-  --spacing-unit: 6px;
-}
+@import '../../marketplace.css';

 .root {
  padding: 1rem 0;
@ -11,11 +9,14 @@
  padding: 12px;
 }

-/* Typography.example */
-.content {
-
+.selectedGroup {
+  font-weight: bold;
 }

+
+/* Typography.example */
+.typographyContent {}
+
 .baselines {
  background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 5h10M0 11h10M0 17h10" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
  background-repeat: repeat;
@ -26,23 +27,14 @@
  }
 }

-
 .spacing2x {
-  margin: calc(2 * var(--spacing-unit)) 0;
+  margin: calc(2 * var(--spacingUnit)) 0;
 }

 .fontsContainer {
  display: flex;
  flex-wrap: wrap;
-  margin-top: calc(4 * var(--spacing-unit));
-
-  &::after {
-    content: ".";
-    visibility: hidden;
-    display: block;
-    height: 0;
-    clear: both;
-  }
+  margin-top: calc(4 * var(--spacingUnit));
 }

 .fontCard {
@ -55,8 +47,8 @@
   * box-sizing: border-box;
   * In this case, we'll adjust margin-bottoms (24px - 4px = 20px)
   */
-  margin-bottom: calc(4 * var(--spacing-unit) - 4px);
-  margin-right: calc(2 * var(--spacing-unit));
+  margin-bottom: calc(4 * var(--spacingUnit) - 4px);
+  margin-right: calc(2 * var(--spacingUnit));
 }

 .element {
@ -69,7 +61,7 @@
  flex-grow: 1;
  width: 100%;
  background-color: #f1f1f1;
-  padding: calc(2 * var(--spacing-unit));
+  padding: calc(2 * var(--spacingUnit));

  border-style: solid;
  border-color: #aaa;
@ -77,6 +69,95 @@
  border-top-color: transparent;
 }

-.selectedGroup {
-  font-weight: bold;
+/* Colors.example */
+
+.colorsContent,
+.colorsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.colorsGroup {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(4 * var(--spacingUnit));
+}
+
+.colorCard {
+  flex-basis: 275px;
+  height: 275px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: calc(4 * var(--spacingUnit));
+  margin-right: calc(2 * var(--spacingUnit));
+  overflow: hidden;
+
+  border: 1px solid var(--matterColorNegative);
+}
+
+.color {
+  width: 100%;
+  height: 66.6%;
+}
+
+.colorDescription {
+  flex-grow: 1;
+  width: 100%;
+  background-color: #fff;
+  padding: calc(2 * var(--spacingUnit));
+}
+
+.marketplaceColorBackground {
+  composes: color;
+  background-color: var(--marketplaceColor);
+}
+
+.marketplaceColorLightBackground {
+  composes: color;
+  background-color: var(--marketplaceColorLight);
+}
+
+.marketplaceColorDarkBackground {
+  composes: color;
+  background-color: var(--marketplaceColorDark);
+}
+
+.successColorBackground {
+  composes: color;
+  background-color: var(--successColor);
+}
+
+.failColorBackground {
+  composes: color;
+  background-color: var(--failColor);
+}
+
+.attentionColorBackground {
+  composes: color;
+  background-color: var(--attentionColor);
+}
+
+.matterColorBackground {
+  composes: color;
+  background-color: var(--matterColor);
+}
+
+.matterColorAntiBackground {
+  composes: color;
+  background-color: var(--matterColorAnti);
+}
+
+.matterColorDarkBackground {
+  composes: color;
+  background-color: var(--matterColorDark);
+}
+
+.matterColorNegativeBackground {
+  composes: color;
+  background-color: var(--matterColorNegative);
+}
+
+.matterColorLightBackground {
+  composes: color;
+  background-color: var(--matterColorLight);
 }
--- a/src/examples.js
+++ b/src/examples.js
@ -23,6 +23,7 @@ import * as BookingDatesForm from './containers/BookingDatesForm/BookingDatesFor
 import * as ChangeAccountPasswordForm
  from './containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example';
 import * as ChangePasswordForm from './containers/ChangePasswordForm/ChangePasswordForm.example';
+import * as Colors from './containers/StyleguidePage/Colors.example';
 import * as EditListingDescriptionForm
  from './containers/EditListingDescriptionForm/EditListingDescriptionForm.example';
 import * as EditListingLocationForm
@ -47,6 +48,7 @@ export {
  BookingInfo,
  ChangeAccountPasswordForm,
  ChangePasswordForm,
+  Colors,
  CurrencyInput,
  DateInput,
  EditListingDescriptionForm,
--- a/src/marketplace.css
+++ b/src/marketplace.css
@ -1,5 +1,27 @@
@import "sanitize.css";

+:root {
+  /* Colors */
+  --marketplaceColor: #C0392B;
+  --marketplaceColorLight: #FF4C38;
+  --marketplaceColorDark: #8C291E;
+
+  --successColor: #2ECC71;
+  --failColor: #FF0000;
+  --attentionColor: #FFAA00;
+
+  --matterColorDark: #000000;
+  --matterColor: #4A4A4A;
+  --matterColorAnti: #B2B2B2;
+  --matterColorNegative: #E7E7E7;
+  --matterColorLight: #FFFFFF;
+
+  /* Spacing units */
+  /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */
+  --spacingUnit: 6px;
+  --spacingUnitDesktop: 8px;
+}
+
 /* FONTS */
 h1, h2, h3, h4, h5, h6, p, pre {
  margin: 0;
@ -118,11 +140,10 @@ pre,
  /* TODO Desktop styles needs to be extracted */
 }

-/* COLORS */
 /* Base font color */
 html,
 .textColor {
-  color: #4A4A4A;
+  color: var(--matterColor);
 }

 /* NORMALIZATIONS for other elements */