@times-tooling/layout - npm Package Compare versions

Comparing version 2.0.4 to 3.0.0

lib/style.scss

+@import '~@times-tooling/style-guide/_index.scss';
+
+.wrapper {
+  max-width: $maxWidth;
+  margin: 0 auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  height: 100%;
+}
+
+.panel {
+  border-radius: 1px;
+  background: $white;
+  padding: 3.5rem 5rem;
+
+  .title {
+    margin-bottom: 6rem;
+  }
+
+  .heading {
+    margin: 0;
+    font-family: $sansSerif;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .subheading {
+    font-family: $sansSerif;
+    font-weight: normal;
+    color: $colourAccent;
+  }
+}
+
+.pageContent {
+  width: 100%;
+  padding: 5rem 10rem;
+  margin: 0 auto;
+}
+
+.banner {
+  // to be used in plans and templates
+  position: relative;
+  padding: 3rem 10rem;
+  color: $colourActiveText;
+  background-color: $colourPrimary;
+
+  .bannerInner {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  h1 {
+    color: $colourActiveText;
+  }
+}
+
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 1rem 0;
+
+  :global .wide {
+    width: 100%;
+  }
+}
+
+.buttonRow {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.halfRow {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+
+  > div {
+    flex: 1;
+  }
+
+  > div:nth-child(odd) {
+    margin-right: 20px;
+  }
+}
+
+.panelHeader {
+  text-align: center;
+  padding: 1rem;
+  margin-bottom: 2.5rem;
+  border-radius: 25px;
+  background-color: $colourBorder;
+  font-weight: 500;
+}

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-## [2.0.4](https://github.com/newsuk/times-tooling/compare/@times-tooling/layout@2.0.2...@times-tooling/layout@2.0.4) (2020-11-25)
+# [3.0.0](https://github.com/newsuk/times-tooling/compare/@times-tooling/layout@2.0.2...@times-tooling/layout@3.0.0) (2020-12-02)
 
@@ -15,10 +15,2 @@ **Note:** Version bump only for package @times-tooling/layout
 
-## [2.0.3](https://github.com/newsuk/times-tooling/compare/@times-tooling/layout@2.0.2...@times-tooling/layout@2.0.3) (2020-11-25)
-
-**Note:** Version bump only for package @times-tooling/layout
-
-
-
-
-
 ## [2.0.2](https://github.com/newsuk/times-tooling/compare/@times-tooling/layout@2.0.1...@times-tooling/layout@2.0.2) (2019-11-11)
@@ -25,0 +17,0 @@

lib/index.js

@@ -0,30 +1,72 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import React from 'react';
-import PropTypes from 'prop-types';
-import { MainContainer, PageContainer, BannerContainer, BannerInner, PanelContainer, PanelTitleContainer, PanelHeading } from './styles';
-export const Page = ({
-  children
-}) => React.createElement(PageContainer, null, React.createElement(MainContainer, null, children));
-Page.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+import styles from './style.scss';
+
+const mainContainer = (_ref) => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["children"]);
+
+  return React.createElement("div", _extends({
+    className: styles.wrapper
+  }, props), children);
 };
-export const Banner = ({
+
+const pageContentComponent = ({
   children
-}) => React.createElement(BannerContainer, null, React.createElement(MainContainer, null, React.createElement(BannerInner, null, children)));
-Banner.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-};
-export const Panel = ({
+}) => React.createElement("div", {
+  className: styles.pageContent
+}, children);
+
+const bannerComponent = ({
   children
-}) => React.createElement(PanelContainer, null, children);
-Panel.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-};
-export const PanelTitle = ({
-  children,
-  subheading = null
-}) => React.createElement(PanelTitleContainer, null, React.createElement("h2", null, children), subheading && React.createElement("p", null, subheading));
-PanelTitle.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  subheading: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
-};
-export { MainContainer, PanelHeading };
+}) => React.createElement("div", {
+  className: styles.banner
+}, React.createElement(MainContainer, null, React.createElement("div", {
+  className: styles.bannerInner
+}, children)));
+
+const panelComponent = ({
+  children
+}) => React.createElement("div", {
+  className: styles.panel
+}, children);
+
+const panelHeaderComponent = ({
+  children
+}) => React.createElement("div", {
+  className: styles.panelHeader
+}, children);
+
+const rowComponent = ({
+  children
+}) => React.createElement("div", {
+  className: styles.row
+}, children);
+
+const buttonRowComponent = ({
+  children
+}) => React.createElement("div", {
+  className: styles.buttonRow
+}, children);
+
+const halfRowComponent = ({
+  children
+}) => React.createElement("div", {
+  className: styles.halfRow
+}, children);
+
+export const MainContainer = mainContainer;
+export const Banner = bannerComponent;
+export const PageContent = pageContentComponent;
+export const Panel = panelComponent;
+export const PanelHeader = panelHeaderComponent;
+export const Row = rowComponent;
+export const ButtonRow = buttonRowComponent;
+export const HalfRow = halfRowComponent;

package.json

 {
   "name": "@times-tooling/layout",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "main": "lib/index.js",
@@ -11,16 +11,13 @@ "module": "lib/index.js",
     "test": "jest",
-    "build": "rm -rf lib; babel src --out-dir lib",
+    "build": "rm -rf lib; babel src --out-dir lib && cp src/style.scss lib",
     "lint": "eslint ."
   },
   "dependencies": {
-    "@times-tooling/style-guide": "2.0.4",
-    "classnames": "^2.2.6",
-    "prop-types": "^15.6.2",
+    "@times-tooling/style-guide": "2.0.2",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "styled-components": "^4.1.3"
+    "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "@times-tooling/configure-babelrc": "1.0.23",
-    "@times-tooling/eslint-config-times-tooling": "1.0.20",
+    "@times-tooling/configure-babelrc": "2.0.0",
+    "@times-tooling/eslint-config-times-tooling": "2.0.0",
     "react-testing-library": "^5.4.4"
@@ -40,3 +37,3 @@ },
   ],
-  "gitHead": "b5229b75a83c0ada03f74e84e8feecb9f5922c4b"
+  "gitHead": "b0b255b983ebd5e68acfa2d49e0883239d6dc587"
 }

lib/styles.js

-import styled from 'styled-components';
-import { colors, fonts, breakpoints } from '@times-tooling/style-guide';
-export const MainContainer = styled.main`
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
-
-  @media screen and (min-width: ${breakpoints.tablet}) {
-    padding: 0 10rem;
-  }
-`;
-export const PageContainer = styled.div`
-  width: 100%;
-  padding: 5rem 0;
-  margin: 0 auto;
-  background-color: ${colors.background};
-`;
-export const BannerContainer = styled.header`
-  position: relative;
-  padding: 3rem 0;
-  color: ${colors.activeText};
-  background-color: ${colors.primary};
-
-  h1 {
-    color: ${colors.activeText};
-  }
-`;
-export const BannerInner = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-export const PanelContainer = styled.div`
-  border-radius: 1px;
-  background: ${colors.white};
-  padding: 2rem;
-
-  @media screen and (min-width: ${breakpoints.tablet}) {
-    padding: 3.5rem 5rem;
-  }
-`;
-export const PanelTitleContainer = styled.header`
-  margin: 0 0 1rem;
-  font-family: ${fonts.sansSerif};
-  font-weight: normal;
-  -webkit-font-smoothing: antialiased;
-
-  h2 {
-    font-size: 2.5rem;
-    line-height: 3.5rem;
-  }
-
-  p {
-    color: ${colors.baliHaiBlue};
-    margin: 0 0 2rem;
-  }
-`;
-export const PanelHeading = styled.header`
-  text-align: center;
-  padding: 1rem;
-  margin-bottom: 2.5rem;
-  border-radius: 25px;
-  background-color: ${colors.mysticGrey};
-  font-weight: 500;
-`;

No alert changes

Improved metrics

Total package byte prevSize

8674

13.18%

Dependency count

3

-50%

Worsened metrics

Lines of code

61

-29.89%

Dependency changes

• + Added

  @times-tooling/style-guide@2.0.2
  (transitive)

• - Removed

  classnames@^2.2.6

• - Removed

  prop-types@^15.6.2

• - Removed

  styled-components@^4.1.3

• - Removed

  @babel/code-frame@7.29.0
  (transitive)

• - Removed

  @babel/compat-data@7.29.0
  (transitive)

• - Removed

  @babel/core@7.29.0
  (transitive)

• - Removed

  @babel/generator@7.29.1
  (transitive)

• - Removed

  @babel/helper-annotate-as-pure@7.27.3
  (transitive)

• - Removed

  @babel/helper-compilation-targets@7.28.6
  (transitive)

• - Removed

  @babel/helper-globals@7.28.0
  (transitive)

• - Removed

  @babel/helper-module-imports@7.28.6
  (transitive)

• - Removed

  @babel/helper-module-transforms@7.28.6
  (transitive)

• - Removed

  @babel/helper-plugin-utils@7.28.6
  (transitive)

• - Removed

  @babel/helper-string-parser@7.27.1
  (transitive)

• - Removed

  @babel/helper-validator-identifier@7.28.5
  (transitive)

• - Removed

  @babel/helper-validator-option@7.27.1
  (transitive)

• - Removed

  @babel/helpers@7.29.2
  (transitive)

• - Removed

  @babel/parser@7.29.2
  (transitive)

• - Removed

  @babel/plugin-syntax-jsx@7.28.6
  (transitive)

• - Removed

  @babel/template@7.28.6
  (transitive)

• - Removed

  @babel/traverse@7.29.0
  (transitive)

• - Removed

  @babel/types@7.29.0
  (transitive)

• - Removed

  @emotion/is-prop-valid@0.8.8
  (transitive)

• - Removed

  @emotion/memoize@0.7.4
  (transitive)

• - Removed

  @emotion/unitless@0.7.5
  (transitive)

• - Removed

  @jridgewell/gen-mapping@0.3.13
  (transitive)

• - Removed

  @jridgewell/remapping@2.3.5
  (transitive)

• - Removed

  @jridgewell/resolve-uri@3.1.2
  (transitive)

• - Removed

  @jridgewell/sourcemap-codec@1.5.5
  (transitive)

• - Removed

  @jridgewell/trace-mapping@0.3.31
  (transitive)

• - Removed

  @times-tooling/style-guide@2.0.4
  (transitive)

• - Removed

  babel-plugin-styled-components@2.1.4
  (transitive)

• - Removed

  baseline-browser-mapping@2.10.11
  (transitive)

• - Removed

  browserslist@4.28.1
  (transitive)

• - Removed

  camelize@1.0.1
  (transitive)

• - Removed

  caniuse-lite@1.0.30001781
  (transitive)

• - Removed

  classnames@2.5.1
  (transitive)

• - Removed

  convert-source-map@2.0.0
  (transitive)

• - Removed

  css-color-keywords@1.0.0
  (transitive)

• - Removed

  css-to-react-native@2.3.2
  (transitive)

• - Removed

  debug@4.4.3
  (transitive)

• - Removed

  electron-to-chromium@1.5.328
  (transitive)

• - Removed

  escalade@3.2.0
  (transitive)

• - Removed

  gensync@1.0.0-beta.2
  (transitive)

• - Removed

  has-flag@3.0.0
  (transitive)

• - Removed

  is-what@3.14.1
  (transitive)

• - Removed

  jsesc@3.1.0
  (transitive)

• - Removed

  json5@2.2.3
  (transitive)

• - Removed

  lodash@4.17.23
  (transitive)

• - Removed

  lru-cache@5.1.1
  (transitive)

• - Removed

  memoize-one@5.2.1
  (transitive)

• - Removed

  merge-anything@2.4.4
  (transitive)

• - Removed

  ms@2.1.3
  (transitive)

• - Removed

  node-releases@2.0.36
  (transitive)

• - Removed

  picocolors@1.1.1
  (transitive)

• - Removed

  picomatch@2.3.2
  (transitive)

• - Removed

  postcss-value-parser@3.3.1
  (transitive)

• - Removed

  semver@6.3.1
  (transitive)

• - Removed

  styled-components@4.4.1
  (transitive)

• - Removed

  stylis@3.5.4
  (transitive)

• - Removed

  stylis-rule-sheet@0.0.10
  (transitive)

• - Removed

  supports-color@5.5.0
  (transitive)

• - Removed

  update-browserslist-db@1.2.3
  (transitive)

• - Removed

  yallist@3.1.1
  (transitive)

• Updated

  @times-tooling/style-guide@2.0.2