@occmundial/occ-atomic 2.0.0-beta.3 → 2.0.0-beta.5

package/build/Text/Text.test.js

@@ -31,20 +31,20 @@ describe("Text", function () {
       hero: true,
       classes: classes
     }, "Text"));
-    expect(wrapper.find('.hero').length).toBe(1);
+    expect(wrapper.find('.h1').length).toBe(1);
   });
   it('has a default color style', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Text["default"], {
       classes: classes
     }, "Text"));
-    expect(wrapper.find('.highEmphasis').length).toBe(1);
+    expect(wrapper.find('.corpPrimary').length).toBe(1);
   });
   it('has the correct color style', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Text["default"], {
       primary: true,
       classes: classes
     }, "Text"));
-    expect(wrapper.find('.primary').length).toBe(1);
+    expect(wrapper.find('.indigoPrimary').length).toBe(1);
   });
   it('has the correct align style', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Text["default"], {
@@ -59,8 +59,8 @@ describe("Text", function () {
       bottomLarge: true,
       classes: classes
     }, "Text"));
-    expect(wrapper.find('.topTiny').length).toBe(1);
-    expect(wrapper.find('.bottomLarge').length).toBe(1);
+    expect(wrapper.find('.top2').length).toBe(1);
+    expect(wrapper.find('.bottom8').length).toBe(1);
   });
   it('has the correct html tag', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Text["default"], {

package/build/Text/__snapshots__/Text.test.js.snap

@@ -4,116 +4,153 @@ exports[`Text matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Text styles matches the snapshot 1`] = `
 Object {
-  "bottomBase": Object {
-    "marginBottom": 24,
+  "bodyLarge": Object {
+    "font": "300 18px/1.5 'OccText', sans-serif",
   },
-  "bottomLarge": Object {
-    "marginBottom": 48,
+  "bodyLargeStrong": Object {
+    "font": "400 18px/1.5 'OccText', sans-serif",
   },
-  "bottomMedium": Object {
-    "marginBottom": 32,
+  "bodyRegular": Object {
+    "font": "300 16px/1.5 'OccText', sans-serif",
   },
-  "bottomSmall": Object {
-    "marginBottom": 16,
+  "bodyRegularStrong": Object {
+    "font": "400 16px/1.5 'OccText', sans-serif",
   },
-  "bottomTiny": Object {
-    "marginBottom": 8,
+  "bodySmall": Object {
+    "font": "300 14px/1.5 'OccText', sans-serif",
   },
-  "bottomXLarge": Object {
-    "marginBottom": 64,
+  "bodySmallStrong": Object {
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "bottomXTiny": Object {
-    "marginBottom": 4,
+  "bodyXLarge": Object {
+    "font": "300 20px/1.5 'OccText', sans-serif",
+  },
+  "bodyXSmall": Object {
+    "font": "300 12px/1.5 'OccText', sans-serif",
+  },
+  "bottom0": Object {
+    "marginBottom": "2px",
+  },
+  "bottom1": Object {
+    "marginBottom": "4px",
+  },
+  "bottom10": Object {
+    "marginBottom": "80px",
+  },
+  "bottom11": Object {
+    "marginBottom": "120px",
+  },
+  "bottom12": Object {
+    "marginBottom": "160px",
+  },
+  "bottom2": Object {
+    "marginBottom": "8px",
+  },
+  "bottom3": Object {
+    "marginBottom": "12px",
+  },
+  "bottom4": Object {
+    "marginBottom": "16px",
+  },
+  "bottom5": Object {
+    "marginBottom": "24px",
+  },
+  "bottom6": Object {
+    "marginBottom": "32px",
+  },
+  "bottom7": Object {
+    "marginBottom": "40px",
+  },
+  "bottom8": Object {
+    "marginBottom": "48px",
+  },
+  "bottom9": Object {
+    "marginBottom": "64px",
   },
   "center": Object {
     "textAlign": "center",
   },
+  "corpDisabled": Object {
+    "color": "#878A9F",
+  },
+  "corpPrimary": Object {
+    "color": "#080D39",
+  },
+  "corpSecondary": Object {
+    "color": "#5A5D7B",
+  },
   "disabled": Object {
     "color": "#dddddd",
   },
+  "display": Object {
+    "@media screen and (min-width:768px)": Object {
+      "font": "400 72px/1.1 'OccText', sans-serif",
+      "letterSpacing": "-0.02em",
+    },
+    "font": "400 48px/1.1 'OccText', sans-serif",
+    "letterSpacing": "-0.02em",
+  },
   "error": Object {
-    "color": "#db3737",
+    "color": "#8b1313",
   },
-  "extraLarge": Object {
-    "fontSize": 20,
-    "lineHeight": 1.5,
+  "h1": Object {
+    "@media screen and (min-width:768px)": Object {
+      "font": "400 48px/1.1 'OccText', sans-serif",
+      "letterSpacing": "-0.02em",
+    },
+    "font": "400 32px/1.1 'OccText', sans-serif",
+    "letterSpacing": "-0.02em",
   },
-  "heading": Object {
-    "fontSize": 24,
-    "fontWeight": 400,
-    "lineHeight": 1.1,
+  "h2": Object {
+    "@media screen and (min-width:768px)": Object {
+      "font": "400 40px/1.1 'OccText', sans-serif",
+    },
+    "font": "400 28px/1.1 'OccText', sans-serif",
   },
-  "headline": Object {
+  "h3": Object {
     "@media screen and (min-width:768px)": Object {
-      "fontSize": 40,
+      "font": "400 28px/1.1 'OccText', sans-serif",
     },
-    "fontSize": 28,
-    "fontWeight": 400,
-    "lineHeight": 1.1,
+    "font": "400 24px/1.1 'OccText', sans-serif",
   },
-  "hero": Object {
+  "h4": Object {
     "@media screen and (min-width:768px)": Object {
-      "fontSize": 48,
-      "letterSpacing": -0.96,
+      "font": "400 24px/1.1 'OccText', sans-serif",
     },
-    "fontSize": 32,
-    "fontWeight": 400,
-    "letterSpacing": -0.64,
-    "lineHeight": 1.1,
+    "font": "400 20px/1.1 'OccText', sans-serif",
+  },
+  "h5": Object {
+    "font": "400 18px/1.1 'OccText', sans-serif",
+  },
+  "indigoPrimary": Object {
+    "color": "#083CAE",
   },
-  "highEmphasis": Object {
-    "color": "#222222",
+  "indigoSecondary": Object {
+    "color": "#486EC3",
   },
   "info": Object {
     "color": "#5736ab",
   },
-  "large": Object {
-    "fontSize": 18,
-    "lineHeight": 1.5,
-  },
   "left": Object {
     "textAlign": "left",
   },
   "link": Object {
     "color": "#0946CB",
   },
-  "lowEmphasis": Object {
-    "color": "#aaaaaa",
-  },
-  "micro": Object {
-    "fontSize": 12,
-    "lineHeight": 1.5,
-  },
-  "midEmphasis": Object {
-    "color": "#777777",
-  },
-  "primary": Object {
-    "color": "#083cae",
+  "pinkPrimary": Object {
+    "color": "#D32E58",
   },
   "right": Object {
     "textAlign": "right",
   },
-  "secondary": Object {
-    "color": "#f13465",
-  },
-  "small": Object {
-    "fontSize": 14,
-    "lineHeight": 1.5,
-  },
-  "standard": Object {
-    "fontSize": 16,
-    "lineHeight": 1.5,
-  },
   "strong": Object {
     "fontWeight": 400,
   },
-  "subheading": Object {
-    "fontSize": 18,
-    "fontWeight": 400,
-    "lineHeight": 1.1,
-  },
   "success": Object {
-    "color": "#009537",
+    "color": "#16542e",
+  },
+  "tag": Object {
+    "font": "400 10px/1.5 'OccText', sans-serif",
   },
   "text": Object {
     "fontFamily": "'OccText', sans-serif",
@@ -125,32 +162,53 @@ Object {
   "titleCase": Object {
     "textTransform": "capitalize",
   },
-  "topBase": Object {
-    "marginTop": 24,
+  "top0": Object {
+    "marginTop": "2px",
+  },
+  "top1": Object {
+    "marginTop": "4px",
+  },
+  "top10": Object {
+    "marginTop": "80px",
   },
-  "topLarge": Object {
-    "marginTop": 48,
+  "top11": Object {
+    "marginTop": "120px",
   },
-  "topMedium": Object {
-    "marginTop": 32,
+  "top12": Object {
+    "marginTop": "160px",
   },
-  "topSmall": Object {
-    "marginTop": 16,
+  "top2": Object {
+    "marginTop": "8px",
   },
-  "topTiny": Object {
-    "marginTop": 8,
+  "top3": Object {
+    "marginTop": "12px",
   },
-  "topXLarge": Object {
-    "marginTop": 64,
+  "top4": Object {
+    "marginTop": "16px",
   },
-  "topXTiny": Object {
-    "marginTop": 4,
+  "top5": Object {
+    "marginTop": "24px",
+  },
+  "top6": Object {
+    "marginTop": "32px",
+  },
+  "top7": Object {
+    "marginTop": "40px",
+  },
+  "top8": Object {
+    "marginTop": "48px",
+  },
+  "top9": Object {
+    "marginTop": "64px",
   },
   "warning": Object {
-    "color": "#e69000",
+    "color": "#664a0e",
+  },
+  "whitePrimary": Object {
+    "color": "#fff",
   },
-  "white": Object {
-    "color": "#ffffff",
+  "whiteSecondary": Object {
+    "color": "rgba(255,255,255,0.7)",
   },
 }
 `;

package/build/Text/styles.js

@@ -11,12 +11,41 @@ var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var display = _fonts2["default"]['display-display-clean'];
+var displayM = _fonts2["default"]['mobile-display-clean-m'];
+var h1 = _fonts2["default"]['heading-h1'];
+var h1M = _fonts2["default"]['mobile-h1-m'];
+var h2 = _fonts2["default"]['heading-h2'];
+var h2M = _fonts2["default"]['mobile-h2-m'];
+var h3 = _fonts2["default"]['heading-h3'];
+var h3M = _fonts2["default"]['mobile-h3-m'];
+var h4 = _fonts2["default"]['heading-h4'];
+var h4M = _fonts2["default"]['mobile-h4-m'];
+var h5 = _fonts2["default"]['heading-h5'];
+var tag = _fonts2["default"]['heading-tag'];
+var bodyXLarge = _fonts2["default"]['body-x-large'];
+var bodyLargeStrong = _fonts2["default"]['body-large-strong'];
+var bodyLarge = _fonts2["default"]['body-large'];
+var bodyRegularStrong = _fonts2["default"]['body-regular-strong'];
+var bodyRegular = _fonts2["default"]['body-regular'];
+var bodySmallStrong = _fonts2["default"]['body-small-strong'];
+var bodySmall = _fonts2["default"]['body-small'];
+var bodyXSmall = _fonts2["default"]['body-x-small'];
+
+var parseFontValue = function parseFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
 var _default = {
   text: {
     letterSpacing: 0,
@@ -26,71 +55,87 @@ var _default = {
     margin: 0
   },
   // Sizes
-  hero: _defineProperty({
-    fontSize: 32,
-    lineHeight: 1.1,
-    fontWeight: 400,
-    letterSpacing: -0.64
+  display: _defineProperty({
+    font: parseFontValue(displayM),
+    letterSpacing: displayM.letterSpacing
   }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    fontSize: 48,
-    letterSpacing: -0.96
+    letterSpacing: display.letterSpacing,
+    font: parseFontValue(display)
   }),
-  headline: _defineProperty({
-    fontSize: 28,
-    lineHeight: 1.1,
-    fontWeight: 400
+  h1: _defineProperty({
+    font: parseFontValue(h1M),
+    letterSpacing: h1M.letterSpacing
   }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    fontSize: 40
+    font: parseFontValue(h1),
+    letterSpacing: h1.letterSpacing
   }),
-  heading: {
-    fontSize: 24,
-    lineHeight: 1.1,
-    fontWeight: 400
+  h2: _defineProperty({
+    font: parseFontValue(h2M)
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    font: parseFontValue(h2)
+  }),
+  h3: _defineProperty({
+    font: parseFontValue(h3M)
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    font: parseFontValue(h3)
+  }),
+  h4: _defineProperty({
+    font: parseFontValue(h4M)
+  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    font: parseFontValue(h4)
+  }),
+  h5: {
+    font: parseFontValue(h5)
   },
-  subheading: {
-    fontSize: 18,
-    lineHeight: 1.1,
-    fontWeight: 400
+  tag: {
+    font: parseFontValue(tag)
   },
-  extraLarge: {
-    fontSize: 20,
-    lineHeight: 1.5
+  bodyXLarge: {
+    font: parseFontValue(bodyXLarge)
   },
-  large: {
-    fontSize: 18,
-    lineHeight: 1.5
+  bodyLargeStrong: {
+    font: parseFontValue(bodyLargeStrong)
   },
-  standard: {
-    fontSize: 16,
-    lineHeight: 1.5
+  bodyLarge: {
+    font: parseFontValue(bodyLarge)
   },
-  small: {
-    fontSize: 14,
-    lineHeight: 1.5
+  bodyRegularStrong: {
+    font: parseFontValue(bodyRegularStrong)
   },
-  micro: {
-    fontSize: 12,
-    lineHeight: 1.5
+  bodyRegular: {
+    font: parseFontValue(bodyRegular)
+  },
+  bodySmallStrong: {
+    font: parseFontValue(bodySmallStrong)
+  },
+  bodySmall: {
+    font: parseFontValue(bodySmall)
+  },
+  bodyXSmall: {
+    font: parseFontValue(bodyXSmall)
   },
   // Weight
   strong: {
     fontWeight: 400
   },
   // Colors
-  primary: {
-    color: _colors["default"].prim
+  indigoPrimary: {
+    color: _colors2["default"].text.indigo.primary
   },
-  secondary: {
-    color: _colors["default"].sec
+  indigoSecondary: {
+    color: _colors2["default"].text.indigo.secondary
   },
-  success: {
-    color: _colors["default"].successText
+  pinkPrimary: {
+    color: _colors2["default"].text.pink.primary
   },
-  error: {
-    color: _colors["default"].errorText
+  success: {
+    color: _colors2["default"].text.success
   },
   warning: {
-    color: _colors["default"].warningText
+    color: _colors2["default"].text.warning
+  },
+  error: {
+    color: _colors2["default"].text.error
   },
   info: {
     color: _colors["default"].infoText
@@ -98,21 +143,24 @@ var _default = {
   disabled: {
     color: _colors["default"].inkLightest
   },
-  white: {
-    color: _colors["default"].white
+  whiteSecondary: {
+    color: _colors2["default"].text.white.secondary
+  },
+  whitePrimary: {
+    color: _colors2["default"].text.white.primary
   },
   link: {
     color: _colors["default"].textLink
   },
   // Emphasis
-  highEmphasis: {
-    color: _colors["default"].ink
+  corpPrimary: {
+    color: _colors2["default"].text.corp.primary
   },
-  midEmphasis: {
-    color: _colors["default"].inkLight
+  corpSecondary: {
+    color: _colors2["default"].text.corp.secondary
   },
-  lowEmphasis: {
-    color: _colors["default"].inkLighter
+  corpDisabled: {
+    color: _colors2["default"].text.corp.disabled
   },
   // Align
   left: {
@@ -125,47 +173,83 @@ var _default = {
     textAlign: 'right'
   },
   // Spacing
-  topXTiny: {
-    marginTop: _spacing["default"].xTiny
+  top0: {
+    marginTop: _spacing["default"]['size-0']
+  },
+  top1: {
+    marginTop: _spacing["default"]['size-1']
+  },
+  top2: {
+    marginTop: _spacing["default"]['size-2']
+  },
+  top3: {
+    marginTop: _spacing["default"]['size-3']
+  },
+  top4: {
+    marginTop: _spacing["default"]['size-4']
+  },
+  top5: {
+    marginTop: _spacing["default"]['size-5']
+  },
+  top6: {
+    marginTop: _spacing["default"]['size-6']
+  },
+  top7: {
+    marginTop: _spacing["default"]['size-7']
+  },
+  top8: {
+    marginTop: _spacing["default"]['size-8']
+  },
+  top9: {
+    marginTop: _spacing["default"]['size-9']
+  },
+  top10: {
+    marginTop: _spacing["default"]['size-10']
+  },
+  top11: {
+    marginTop: _spacing["default"]['size-11']
+  },
+  top12: {
+    marginTop: _spacing["default"]['size-12']
   },
-  topTiny: {
-    marginTop: _spacing["default"].tiny
+  bottom0: {
+    marginBottom: _spacing["default"]['size-0']
   },
-  topSmall: {
-    marginTop: _spacing["default"].small
+  bottom1: {
+    marginBottom: _spacing["default"]['size-1']
   },
-  topBase: {
-    marginTop: _spacing["default"].base
+  bottom2: {
+    marginBottom: _spacing["default"]['size-2']
   },
-  topMedium: {
-    marginTop: _spacing["default"].medium
+  bottom3: {
+    marginBottom: _spacing["default"]['size-3']
   },
-  topLarge: {
-    marginTop: _spacing["default"].large
+  bottom4: {
+    marginBottom: _spacing["default"]['size-4']
   },
-  topXLarge: {
-    marginTop: _spacing["default"].xLarge
+  bottom5: {
+    marginBottom: _spacing["default"]['size-5']
   },
-  bottomXTiny: {
-    marginBottom: _spacing["default"].xTiny
+  bottom6: {
+    marginBottom: _spacing["default"]['size-6']
   },
-  bottomTiny: {
-    marginBottom: _spacing["default"].tiny
+  bottom7: {
+    marginBottom: _spacing["default"]['size-7']
   },
-  bottomSmall: {
-    marginBottom: _spacing["default"].small
+  bottom8: {
+    marginBottom: _spacing["default"]['size-8']
   },
-  bottomBase: {
-    marginBottom: _spacing["default"].base
+  bottom9: {
+    marginBottom: _spacing["default"]['size-9']
   },
-  bottomMedium: {
-    marginBottom: _spacing["default"].medium
+  bottom10: {
+    marginBottom: _spacing["default"]['size-10']
   },
-  bottomLarge: {
-    marginBottom: _spacing["default"].large
+  bottom11: {
+    marginBottom: _spacing["default"]['size-11']
   },
-  bottomXLarge: {
-    marginBottom: _spacing["default"].xLarge
+  bottom12: {
+    marginBottom: _spacing["default"]['size-12']
   },
   titleCase: {
     textTransform: 'capitalize'

package/build/Toaster/__snapshots__/Toaster.test.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-12 Toast-content-0-1-7\\"><div class=\\"Flexbox-flex-0-1-12 Flexbox-acenter-0-1-29\\"><div class=\\"\\" style=\\"flex: 1;\\"><p class=\\"Text-text-0-1-44 Text-subheading-0-1-48 Text-white-0-1-62\\">Title</p></div></div></div></div></div>"`;
+exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-12 Toast-content-0-1-7\\"><div class=\\"Flexbox-flex-0-1-12 Flexbox-acenter-0-1-29\\"><div class=\\"\\" style=\\"flex: 1;\\"><p class=\\"Text-text-0-1-44 Text-h5-0-1-50 Text-whitePrimary-0-1-70\\">Title</p></div></div></div></div></div>"`;
 
 exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",