@ausbom/page-title 0.1.0

package/README.md

@@ -0,0 +1,18 @@
+# @ausbom/page-title
+
+> Sample description
+
+
+### Installation
+
+```bash
+npm install @ausbom/page-title
+```
+
+### Usage
+
+```javascript
+import PageTitle from '@ausbom/page-title'
+import React from 'react'
+```
+

package/lib/PageTitle.d.ts

@@ -0,0 +1,63 @@
+import React from 'react'
+import { BreakpointProp } from '../../grid/lib/Grid'
+
+type Background = {
+  name: 'isobars'
+  id: '01' | '02' | '03' | '04'
+}
+
+export interface IProps {
+  /**
+   * `theme` is an optional property that defines the color scheme of the component.
+   * It can be set to 'white', 'bureau-blue', 'dark-blue', or 'yellow'.
+   */
+  theme?: 'white' | 'bureau-blue' | 'dark-blue' | 'yellow'
+
+  /**
+   * `background` is an optional property that allows setting a background from predefined backgrounds.
+   * The type `Background` should be defined elsewhere in the codebase with specifics of what it entails.
+   */
+  background?: Background
+
+  /**
+   * `title` is a required string property that specifies the main text or title of the component.
+   */
+  title: string
+
+  /**
+   * `subTitle` is an optional string property for additional text below the main title.
+   */
+  subTitle?: string
+
+  /**
+   * `subTitleAs` is an optional property that determines the React component used to render the subtitle.
+   * It allows for customization by accepting any valid React element type (e.g., 'div', 'span', custom components).
+   */
+  subTitleAs?: React.ElementType
+
+  /**
+   * `metaData` is an optional string property intended for any supplementary information that the component should display.
+   */
+  metaData?: string
+
+  /**
+   * `metaDataAs` is an optional property that determines the React component used to render the metadata.
+   * Similar to `subTitleAs`, it accepts any valid React element type for rendering flexibility.
+   */
+  metaDataAs?: React.ElementType
+
+  /**
+   * `small` is an optional boolean property that, when true, suggests that the component should use a smaller variant of its styling.
+   */
+  small?: boolean
+
+  /**
+   * `gridLayout` is an optional property that defines responsive layout settings based on screen size breakpoints.
+   * The `BreakpointProp` type would typically define how the component's layout should adapt to various screen widths.
+   */
+  gridLayout?: BreakpointProp
+}
+
+export default class extends React.PureComponent<IProps> {
+  render(): JSX.Element
+}

package/lib/PageTitle.js

@@ -0,0 +1 @@
+"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");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"));var _grid=_interopRequireWildcard(require("../../grid"));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 PageTitle=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(PageTitle,_React$PureComponent);var _super=_createSuper(PageTitle);function PageTitle(){(0,_classCallCheck2["default"])(this,PageTitle);return _super.apply(this,arguments)}(0,_createClass2["default"])(PageTitle,[{key:"render",value:function render(){var _cn;var _ref=this.props,background=_ref.background,gridLayout=_ref.gridLayout,metaData=_ref.metaData,metaDataAs=_ref.metaDataAs,small=_ref.small,subTitle=_ref.subTitle,subTitleAs=_ref.subTitleAs,theme=_ref.theme,title=_ref.title;var classes=(0,_classnames["default"])("bom-page-title",(_cn={"bom-page-title--small":small},(0,_defineProperty2["default"])(_cn,"bom-page-title--theme-".concat(theme),theme),(0,_defineProperty2["default"])(_cn,"bom-page-title--background-".concat(background&&background.name||"isobars","-").concat(background&&background.id||"01"),background!=null),_cn));var MetaDataTag=metaDataAs||PageTitle.defaultProps.metaDataAs||"div";var SubTitleTag=subTitleAs||PageTitle.defaultProps.subTitleAs||"div";var metaDataClasses=(0,_classnames["default"])("bom-page-title__meta-data");var subTitleClasses=(0,_classnames["default"])("bom-page-title__sub-title");var titleClasses=(0,_classnames["default"])("bom-page-title__title");return/*#__PURE__*/_react["default"].createElement(_grid["default"],{className:classes,noRowGutter:true},/*#__PURE__*/_react["default"].createElement(_grid.GridItem,gridLayout,/*#__PURE__*/_react["default"].createElement("h1",{className:titleClasses},title),subTitle!=null&&/*#__PURE__*/_react["default"].createElement(SubTitleTag,{className:subTitleClasses},subTitle),metaData!=null&&/*#__PURE__*/_react["default"].createElement(MetaDataTag,{className:metaDataClasses},metaData)))}}]);return PageTitle}(_react["default"].PureComponent);(0,_defineProperty2["default"])(PageTitle,"defaultProps",{subTitleAs:"div",metaDataAs:"div",theme:"white"});var PageTitleWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(PageTitle,(0,_extends2["default"])({innerRef:ref},props))});PageTitleWithRef.displayName="PageTitle";var _default=PageTitleWithRef;exports["default"]=_default;

package/lib/index.d.ts

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

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 _PageTitle["default"]}});var _PageTitle=_interopRequireDefault(require("./PageTitle"));

package/lib/scss/exports.scss

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

package/lib/scss/globals.scss

@@ -0,0 +1,118 @@
+// Typo-map with nested maps for each size
+$typo-map: (
+  title: (
+    s: (
+      style: 'heading-xxl',
+      large: false,
+    ),
+    m: (
+      style: 'heading-xl',
+      large: true,
+    ),
+    l: (
+      style: 'heading-xxl',
+      large: true,
+    ),
+  ),
+  small-title: (
+    s: (
+      style: 'heading-xxl',
+      large: false,
+    ),
+    m: (
+      style: 'heading-l',
+      large: true,
+    ),
+    l: (
+      style: 'heading-xl',
+      large: true,
+    ),
+  ),
+  subtitle: (
+    s: (
+      style: 'heading-s',
+      large: true,
+    ),
+    m: (
+      style: 'heading-m',
+      large: true,
+    ),
+    l: (
+      style: 'heading-m',
+      large: true,
+    ),
+  ),
+  small-subtitle: (
+    s: (
+      style: 'heading-xs',
+      large: false,
+    ),
+    m: (
+      style: 'heading-s',
+      large: false,
+    ),
+    l: (
+      style: 'heading-m',
+      large: false,
+    ),
+  ),
+  metadata: (
+    s: (
+      style: 'body',
+      large: false,
+    ),
+    m: (
+      style: 'body',
+      large: true,
+    ),
+    l: (
+      style: 'body',
+      large: true,
+    ),
+  ),
+  small-metadata: (
+    s: (
+      style: 'body',
+      large: false,
+    ),
+    m: (
+      style: 'body',
+      large: true,
+    ),
+    l: (
+      style: 'body',
+      large: true,
+    ),
+  ),
+);
+
+// Theme map without repeating $typo-map
+$theme-map: (
+  theme-white: (
+    bg-color: get-palette-color('neutral.white'),
+    typo-dark: false,
+  ),
+  theme-bureau-blue: (
+    bg-color: get-palette-color('primary.electricBlue'),
+    typo-dark: true,
+  ),
+  theme-dark-blue: (
+    bg-color: get-palette-color('primary.darkBlue'),
+    typo-dark: true,
+  ),
+  theme-yellow: (
+    bg-color: get-palette-color('secondary.yellow'),
+    typo-dark: false,
+  ),
+);
+
+@mixin apply-typography($type, $size, $typo-dark) {
+  // Retrieve the nested map for the type
+  $type-map: map-get($typo-map, $type);
+
+  // Now retrieve the style and large values from the nested map
+  $typo-style: map-get(map-get($type-map, $size), style);
+  $large: map-get(map-get($type-map, $size), large);
+
+  @include bom-typography($typo-style, $typo-dark, $large);
+}

package/lib/scss/module.scss

@@ -0,0 +1,143 @@
+@import '../../lib/scss/globals';
+@import '~@ausbom/styles/lib/scss/globals';
+@import '~@ausbom/typography/lib/scss/globals';
+
+.bom-page-title {
+  padding: 16px 8px;
+
+  .bom-grid-col {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title,
+  &__sub-title,
+  &__meta-data {
+    margin: 0;
+  }
+
+  &__title + &__sub-title,
+  &__sub-title + &__meta-data,
+  &__title + &__meta-data {
+    margin-top: 16px;
+  }
+
+  &--small {
+    .bom-page-title__title + .bom-page-title__sub-title {
+      margin-top: 12px;
+
+      @include bp(m) {
+        margin-top: 16px;
+      }
+
+      @include bp(l) {
+        margin-top: 24px;
+      }
+    }
+  }
+
+  @include bp(m) {
+    padding: 32px 20px;
+  }
+
+  @include bp(l) {
+    padding: 40px 0;
+  }
+
+  // Apply background colors and typography based on theme
+  @each $theme-name, $theme-properties in $theme-map {
+    &--#{$theme-name} {
+      background-color: map-get($theme-properties, 'bg-color');
+      $typo-dark: map-get($theme-properties, 'typo-dark');
+
+      .bom-page-title {
+        &__title {
+          @include apply-typography('title', 's', $typo-dark);
+
+          @include bp(m) {
+            @include apply-typography('title', 'm', $typo-dark);
+          }
+
+          @include bp(l) {
+            @include apply-typography('title', 'l', $typo-dark);
+          }
+        }
+
+        &__sub-title {
+          @include apply-typography('subtitle', 's', $typo-dark);
+
+          @include bp(m) {
+            @include apply-typography('subtitle', 'm', $typo-dark);
+          }
+
+          @include bp(l) {
+            @include apply-typography('subtitle', 'l', $typo-dark);
+          }
+        }
+
+        &__meta-data {
+          @include apply-typography('metadata', 's', $typo-dark);
+
+          @include bp(m) {
+            @include apply-typography('metadata', 'm', $typo-dark);
+          }
+
+          @include bp(l) {
+            @include apply-typography('metadata', 'l', $typo-dark);
+          }
+        }
+      }
+
+      &.bom-page-title--small {
+        .bom-page-title {
+          &__title {
+            @include apply-typography('small-title', 's', $typo-dark);
+
+            @include bp(m) {
+              @include apply-typography('small-title', 'm', $typo-dark);
+            }
+
+            @include bp(l) {
+              @include apply-typography('small-title', 'l', $typo-dark);
+            }
+          }
+
+          &__sub-title {
+            @include apply-typography('small-subtitle', 's', $typo-dark);
+
+            @include bp(m) {
+              @include apply-typography('small-subtitle', 'm', $typo-dark);
+            }
+
+            @include bp(l) {
+              @include apply-typography('small-subtitle', 'l', $typo-dark);
+            }
+          }
+
+          &__meta-data {
+            @include apply-typography('small-metadata', 's', $typo-dark);
+
+            @include bp(m) {
+              @include apply-typography('small-metadata', 'm', $typo-dark);
+            }
+
+            @include bp(l) {
+              @include apply-typography('small-metadata', 'l', $typo-dark);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Generate background classes using a loop
+  @for $i from 1 through 4 {
+    @each $theme, $properties in $theme-map {
+      $background-type: if(map-get($properties, 'typo-dark'), 'dark', 'light');
+
+      &--#{$theme}.bom-page-title--background-isobars-0#{$i} {
+        @include bom-background($background-type, '0#{$i}');
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@ausbom/page-title",
+  "version": "0.1.0",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "homepage": "https://beta.design.bom.gov.au/components/page-title",
+  "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/grid": "^0.5.0",
+    "@ausbom/styles": "^0.13.0",
+    "@ausbom/typography": "^0.4.6"
+  },
+  "gitHead": "fb700e0e3fdab1b33a91603366afa9bb05cfc2f2"
+}