@ausbom/page-title 0.2.0 → 0.3.0

package/lib/PageTitle.d.ts

@@ -1,10 +1,24 @@
 import React from 'react'
-import { IGridItemProps } from '../../grid/lib/Grid'
 
-type Background = {
-  name: 'isobars'
-  id: '01' | '02' | '03' | '04'
+export type Title = { className?: string, children: string, small?: boolean }
+
+export type SubTitle = {
+  className?: string
+  as?: React.ElementType
+  children?: string
+  small?: boolean
+}
+export type SubTitleProps<As extends React.ElementType = 'div'> = SubTitle &
+React.ComponentPropsWithoutRef<As>
+
+export type MetaData = {
+  className?: string
+  as?: React.ElementType
+  children?: string
+  small?: boolean
 }
+export type MetaDataProps<As extends React.ElementType = 'div'> = MetaData &
+React.ComponentPropsWithoutRef<As>
 
 export interface IProps {
   /**
@@ -13,18 +27,6 @@ export interface IProps {
    */
   className?: string
 
-  /**
-   * `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.
    */
@@ -56,12 +58,6 @@ export interface IProps {
    * `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 `IGridItemProps` type would typically define how the component's layout should adapt to various screen widths.
-   */
-  gridLayout?: IGridItemProps
 }
 
 export default class extends React.PureComponent<IProps> {

package/lib/PageTitle.js

@@ -1 +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,className=_ref.className,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"])(className,"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;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=exports.MetaData=exports.SubTitle=exports.Title=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 Title=function Title(_ref){var className=_ref.className,children=_ref.children,small=_ref.small;if(!children)return null;var classes=(0,_classnames["default"])(className,"bom-page-title__title",{"bom-page-title__title--small":small});return/*#__PURE__*/_react["default"].createElement("h1",{className:classes},children)};exports.Title=Title;var SubTitle=function SubTitle(_ref2){var className=_ref2.className,As=_ref2.as,children=_ref2.children,small=_ref2.small;if(!children)return null;var classes=(0,_classnames["default"])(className,"bom-page-title__subtitle",{"bom-page-title__subtitle--small":small});return/*#__PURE__*/_react["default"].createElement(As,{className:classes},children)};exports.SubTitle=SubTitle;var MetaData=function MetaData(_ref3){var className=_ref3.className,As=_ref3.as,children=_ref3.children,small=_ref3.small;if(!children)return null;var classes=(0,_classnames["default"])(className,"bom-page-title__metadata",{"bom-page-title__metadata--small":small});return/*#__PURE__*/_react["default"].createElement(As,{className:classes},children)};exports.MetaData=MetaData;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 _ref4=this.props,className=_ref4.className,metaData=_ref4.metaData,metaDataAs=_ref4.metaDataAs,small=_ref4.small,subTitle=_ref4.subTitle,subTitleAs=_ref4.subTitleAs,title=_ref4.title;var classes=(0,_classnames["default"])(className,"bom-page-title",{"bom-page-title--small":small});var MetaDataTag=metaDataAs||PageTitle.defaultProps.metaDataAs||"div";var SubTitleTag=subTitleAs||PageTitle.defaultProps.subTitleAs||"div";return/*#__PURE__*/_react["default"].createElement("div",{className:classes},/*#__PURE__*/_react["default"].createElement(Title,{small:small},title),/*#__PURE__*/_react["default"].createElement(SubTitle,{as:MetaDataTag,small:small},subTitle),/*#__PURE__*/_react["default"].createElement(MetaData,{as:SubTitleTag,small:small},metaData))}}]);return PageTitle}(_react["default"].PureComponent);(0,_defineProperty2["default"])(PageTitle,"defaultProps",{subTitleAs:"div",metaDataAs:"div"});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

@@ -1 +1,3 @@
-export { default } from './PageTitle'
+export {
+  default, Title, SubTitle, MetaData
+} from './PageTitle'

package/lib/index.js

@@ -1 +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"));
+"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function get(){return _PageTitle["default"]}});Object.defineProperty(exports,"Title",{enumerable:true,get:function get(){return _PageTitle.Title}});Object.defineProperty(exports,"SubTitle",{enumerable:true,get:function get(){return _PageTitle.SubTitle}});Object.defineProperty(exports,"MetaData",{enumerable:true,get:function get(){return _PageTitle.MetaData}});var _PageTitle=_interopRequireWildcard(require("./PageTitle"));

package/lib/scss/module.scss

@@ -1,29 +1,29 @@
-@import '../../lib/scss/globals';
 @import '~@ausbom/styles/lib/scss/globals';
 @import '~@ausbom/typography/lib/scss/globals';
 
 .bom-page-title {
-  padding: 16px;
+  font-family: inherit;
+  padding-top: 16px;
+  padding-bottom: 16px;
 
-  .bom-grid-col {
-    display: flex;
-    flex-direction: column;
+  @include bp(m) {
+    padding-top: 32px;
+    padding-bottom: 32px;
   }
 
-  &__title,
-  &__sub-title,
-  &__meta-data {
-    margin: 0;
+  @include bp(l) {
+    padding-top: 40px;
+    padding-bottom: 40px;
   }
 
-  &__title + &__sub-title,
-  &__sub-title + &__meta-data,
-  &__title + &__meta-data {
+  &__title + &__subtitle,
+  &__title + &__metadata,
+  &__subtitle + &__metadata {
     margin-top: 16px;
   }
 
-  &--small {
-    .bom-page-title__title + .bom-page-title__sub-title {
+  &.bom-page-title--small {
+    .bom-page-title__title + .bom-page-title__subtitle {
       margin-top: 12px;
 
       @include bp(m) {
@@ -34,110 +34,78 @@
         margin-top: 24px;
       }
     }
-  }
 
-  @include bp(m) {
-    padding: 32px;
-  }
+    .bom-page-title__title + .bom-page-title__metadata {
+      margin-top: 16px;
+    }
 
-  @include bp(l) {
-    padding: 40px 0;
+    .bom-page-title__subtitle + .bom-page-title__metadata {
+      margin-top: 16px;
+    }
   }
+}
 
-  // 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);
+.bom-page-title__title {
+  font-weight: 500;
+  margin: 0;
 
-          @include bp(m) {
-            @include apply-typography('subtitle', 'm', $typo-dark);
-          }
+  @include bom-type-scale($size: 'type-32', $line: 'display');
 
-          @include bp(l) {
-            @include apply-typography('subtitle', 'l', $typo-dark);
-          }
-        }
+  @include bp(m) {
+    @include bom-type-scale($size: 'type-56', $line: 'display');
+  }
 
-        &__meta-data {
-          @include apply-typography('metadata', 's', $typo-dark);
+  @include bp(l) {
+    @include bom-type-scale($size: 'type-64', $line: 'display');
+  }
 
-          @include bp(m) {
-            @include apply-typography('metadata', 'm', $typo-dark);
-          }
+  &--small {
+    @include bom-type-scale($size: 'type-32', $line: 'display');
 
-          @include bp(l) {
-            @include apply-typography('metadata', 'l', $typo-dark);
-          }
-        }
-      }
+    @include bp(m) {
+      @include bom-type-scale($size: 'type-44', $line: 'display');
+    }
 
-      &.bom-page-title--small {
-        .bom-page-title {
-          &__title {
-            @include apply-typography('small-title', 's', $typo-dark);
+    @include bp(l) {
+      @include bom-type-scale($size: 'type-56', $line: 'display');
+    }
+  }
+}
 
-            @include bp(m) {
-              @include apply-typography('small-title', 'm', $typo-dark);
-            }
+.bom-page-title__subtitle {
+  font-weight: 500;
 
-            @include bp(l) {
-              @include apply-typography('small-title', 'l', $typo-dark);
-            }
-          }
+  @include bom-type-scale($size: 'type-22', $line: 'display');
 
-          &__sub-title {
-            @include apply-typography('small-subtitle', 's', $typo-dark);
+  @include bp(m) {
+    @include bom-type-scale($size: 'type-28', $line: 'display');
+  }
 
-            @include bp(m) {
-              @include apply-typography('small-subtitle', 'm', $typo-dark);
-            }
+  &--small {
+    @include bom-type-scale($size: 'type-18', $line: 'display');
 
-            @include bp(l) {
-              @include apply-typography('small-subtitle', 'l', $typo-dark);
-            }
-          }
+    @include bp(m) {
+      @include bom-type-scale($size: 'type-22', $line: 'display');
+    }
+  }
+}
 
-          &__meta-data {
-            @include apply-typography('small-metadata', 's', $typo-dark);
+.bom-page-title__metadata {
+  color: get-palette-color('neutral.charcoalMedium');
 
-            @include bp(m) {
-              @include apply-typography('small-metadata', 'm', $typo-dark);
-            }
+  .bom-background--theme-white &,
+  .bom-background--theme-yellow & {
+    color: get-palette-color('neutral.charcoalMedium');
+  }
 
-            @include bp(l) {
-              @include apply-typography('small-metadata', 'l', $typo-dark);
-            }
-          }
-        }
-      }
-    }
+  .bom-background--theme-bureau-blue &,
+  .bom-background--theme-dark-blue & {
+    color: get-palette-color('neutral.white');
   }
 
-  // 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');
+  @include bom-type-scale($size: 'type-16', $line: 'display');
 
-      &--#{$theme}.bom-page-title--background-isobars-0#{$i} {
-        @include bom-background($background-type, '0#{$i}');
-      }
-    }
+  @include bp(m) {
+    @include bom-type-scale($size: 'type-18', $line: 'display');
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/page-title",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "keywords": [],
   "author": "",
@@ -41,5 +41,5 @@
     "@ausbom/styles": "^0.13.0",
     "@ausbom/typography": "^0.4.6"
   },
-  "gitHead": "769d1c15a695f1960d8483bd372aea1cd1bec7a4"
+  "gitHead": "2ad0211c24f63644659d03bc36b051db14f7322e"
 }

package/lib/scss/exports.scss

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

package/lib/scss/globals.scss

@@ -1,118 +0,0 @@
-// 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-m',
-      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('secondary.electricBlueDark'),
-    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);
-}