@ausbom/background 0.1.0

package/README.md

@@ -0,0 +1,22 @@
+# @ausbom/background
+
+> Sample description
+
+
+### Installation
+
+```bash
+npm install @ausbom/background
+```
+
+### Usage
+
+```jsx
+import Background from '@ausbom/background'
+import React from 'react'
+
+<Background theme="bureau-blue" image="isobar-02">
+  <Content>...</Content>
+</Background>
+```
+

package/lib/Background.d.ts

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export type BackgroundTheme = 'white' | 'bureau-blue' | 'dark-blue' | 'yellow'
+
+export interface IProps {
+  children?: JSX.Element | JSX.Element[]
+  theme?: BackgroundTheme
+  image?: true | 'isobars-01' | 'isobars-02' | 'isobars-03' | 'isobars-04'
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IDefaultProps {}
+
+export type IPropsWithDefaults = IProps
+
+export default class extends React.PureComponent<IProps> {
+  displayName: string
+
+  render(): JSX.Element
+}

package/lib/Background.js

@@ -0,0 +1,2 @@
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Background=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Background,_React$PureComponent);var _super=_createSuper(Background);function Background(){(0,_classCallCheck2["default"])(this,Background);return _super.apply(this,arguments)}(0,_createClass2["default"])(Background,[{key:"render",value:function render(){var _cn;var _ref=this.props,children=_ref.children,theme=_ref.theme,image=_ref.image;// eslint-disable-line no-empty-pattern
+var classes=(0,_classnames["default"])("bom-background",(_cn={},(0,_defineProperty2["default"])(_cn,"bom-background--theme-".concat(theme),theme),(0,_defineProperty2["default"])(_cn,"bom-background--image-".concat(image),image!==true),(0,_defineProperty2["default"])(_cn,"bom-background--image-isobars-01",image===true),_cn));return/*#__PURE__*/_react["default"].createElement("div",{className:classes},children)}}]);return Background}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Background,"defaultProps",{theme:"white"});var BackgroundWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(Background,(0,_extends2["default"])({innerRef:ref},props))});BackgroundWithRef.displayName="Background";var _default=BackgroundWithRef;exports["default"]=_default;

package/lib/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Background'

package/lib/index.js

@@ -0,0 +1 @@
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function get(){return _Background["default"]}});var _Background=_interopRequireDefault(require("./Background"));

package/lib/scss/exports.scss

@@ -0,0 +1,7 @@
+@import './globals';
+
+:export {
+  @each $key, $value in $bom-background {
+    #{unquote($key)}: $value;
+  }
+}

package/lib/scss/globals.scss

@@ -0,0 +1,7 @@
+$bom-background: () !default;
+$bom-background: map-merge(
+  (
+    'exampleVariable': 12px,
+  ),
+  $bom-background
+);

package/lib/scss/module.scss

@@ -0,0 +1,53 @@
+@import '~@ausbom/styles/lib/scss/globals';
+
+@mixin add-image-classes($theme: 'light') {
+  &.bom-background--image-isobars-01 {
+    @include bom-background($theme, '01');
+  }
+
+  &.bom-background--image-isobars-02 {
+    @include bom-background($theme, '02');
+  }
+
+  &.bom-background--image-isobars-03 {
+    @include bom-background($theme, '03');
+  }
+
+  &.bom-background--image-isobars-04 {
+    @include bom-background($theme, '04');
+  }
+}
+
+@mixin theme-background($text-color, $background-color, $theme) {
+  color: get-palette-color($text-color);
+  background-color: get-palette-color($background-color);
+
+  @include add-image-classes($theme);
+}
+
+.bom-background {
+  // Apply the mixin with appropriate arguments for each theme modifier
+  &.bom-background--theme-white {
+    @include theme-background('neutral.charcoalDark', 'neutral.white', 'light');
+  }
+
+  &.bom-background--theme-bureau-blue {
+    @include theme-background(
+      'neutral.white',
+      'secondary.electricBlueDark',
+      'dark'
+    );
+  }
+
+  &.bom-background--theme-dark-blue {
+    @include theme-background('neutral.white', 'primary.darkBlue', 'dark');
+  }
+
+  &.bom-background--theme-yellow {
+    @include theme-background(
+      'neutral.charcoalDark',
+      'secondary.yellow',
+      'light'
+    );
+  }
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@ausbom/background",
+  "version": "0.1.0",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "homepage": "https://beta.design.bom.gov.au/components/background",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AusBOM/bom-design-system.git"
+  },
+  "scripts": {
+    "build": "babel src --out-dir lib --extensions '.ts,.tsx' --delete-dir-on-start",
+    "build:watch": "npm run build -- --copy-files --watch",
+    "build:readme": "../generate-readme.sh",
+    "postbuild": "copyfiles -u 1 \"./src/**/{*.d.*,*.scss}\" ./lib"
+  },
+  "bugs": {
+    "url": "https://github.com/AusBOM/bom-design-system/issues"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "devDependencies": {
+    "@ausbom/babel-preset": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">= 16.3.x"
+  },
+  "dependencies": {
+    "@ausbom/styles": "^0.13.0",
+    "@ausbom/typography": "^0.4.6"
+  },
+  "gitHead": "2ad0211c24f63644659d03bc36b051db14f7322e"
+}