From 3d6c5e8c978df1d0f779f4b7c5e4d996395d78e9 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 29 Sep 2021 22:20:06 -0400 Subject: [PATCH] Update layout --- src/layout/base/NitroLayoutBase.types.ts | 4 ++-- .../button-group/NitroLayoutButtonGroup.tsx | 19 +++++++++++++++++ .../NitroLayoutButtonGroup.types.ts | 6 ++++++ src/layout/button-group/index.ts | 2 ++ src/layout/card/grid/NitroCardGridView.tsx | 2 +- .../card/grid/item/NitroCardGridItemView.tsx | 4 ++-- .../grid/item/NitroCardGridItemView.types.ts | 1 + .../card/header/NitroCardHeaderView.tsx | 4 ++-- src/layout/card/index.ts | 1 + .../sub-header/NitroCardSubHeaderView.tsx | 21 +++++++++++++++++++ .../NitroCardSubHeaderView.types.ts | 6 ++++++ src/layout/card/sub-header/index.ts | 2 ++ src/layout/common/NitroLayoutVariant.type.ts | 2 +- .../NitroLayoutGiftCardView.types.ts | 2 +- .../grid/column/NitroLayoutGridColumn.tsx | 6 +++--- src/layout/index.ts | 1 + 16 files changed, 71 insertions(+), 12 deletions(-) create mode 100644 src/layout/button-group/NitroLayoutButtonGroup.tsx create mode 100644 src/layout/button-group/NitroLayoutButtonGroup.types.ts create mode 100644 src/layout/button-group/index.ts create mode 100644 src/layout/card/sub-header/NitroCardSubHeaderView.tsx create mode 100644 src/layout/card/sub-header/NitroCardSubHeaderView.types.ts create mode 100644 src/layout/card/sub-header/index.ts diff --git a/src/layout/base/NitroLayoutBase.types.ts b/src/layout/base/NitroLayoutBase.types.ts index fe2219fa..846ddaf2 100644 --- a/src/layout/base/NitroLayoutBase.types.ts +++ b/src/layout/base/NitroLayoutBase.types.ts @@ -1,7 +1,7 @@ -import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'; +import { DetailedHTMLProps, HTMLAttributes } from 'react'; import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common'; -export interface NitroLayoutBaseProps extends DetailedHTMLProps, HTMLDivElement> +export interface NitroLayoutBaseProps extends DetailedHTMLProps, HTMLDivElement> { overflow?: NitroLayoutOverflow; position?: NitroLayoutPosition; diff --git a/src/layout/button-group/NitroLayoutButtonGroup.tsx b/src/layout/button-group/NitroLayoutButtonGroup.tsx new file mode 100644 index 00000000..7617d07a --- /dev/null +++ b/src/layout/button-group/NitroLayoutButtonGroup.tsx @@ -0,0 +1,19 @@ +import { FC, useMemo } from 'react'; +import { NitroLayoutBase } from '../base'; +import { NitroLayoutButtonGroupProps } from './NitroLayoutButtonGroup.types'; + +export const NitroLayoutButtonGroup: FC = props => +{ + const { className = '', ...rest } = props; + + const getClassName = useMemo(() => + { + let newClassName = 'btn-group'; + + if(className && className.length) newClassName += ` ${ className }`; + + return newClassName; + }, [ className ]); + + return ; +} diff --git a/src/layout/button-group/NitroLayoutButtonGroup.types.ts b/src/layout/button-group/NitroLayoutButtonGroup.types.ts new file mode 100644 index 00000000..8e428d0e --- /dev/null +++ b/src/layout/button-group/NitroLayoutButtonGroup.types.ts @@ -0,0 +1,6 @@ +import { NitroLayoutBaseProps } from '../base'; + +export interface NitroLayoutButtonGroupProps extends NitroLayoutBaseProps +{ + +} diff --git a/src/layout/button-group/index.ts b/src/layout/button-group/index.ts new file mode 100644 index 00000000..23d85cc8 --- /dev/null +++ b/src/layout/button-group/index.ts @@ -0,0 +1,2 @@ +export * from './NitroLayoutButtonGroup'; +export * from './NitroLayoutButtonGroup.types'; diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx index 97c17237..0eead8f5 100644 --- a/src/layout/card/grid/NitroCardGridView.tsx +++ b/src/layout/card/grid/NitroCardGridView.tsx @@ -20,7 +20,7 @@ export const NitroCardGridView: FC = props => if(columns && (columns >= 1)) { - newStyle['grid-template-columns'] = 'unset'; + newStyle.gridTemplateColumns = 'unset'; newStyle['--bs-columns'] = columns.toString(); } diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx index 3bc431ef..6c1e4886 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.tsx +++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx @@ -4,7 +4,7 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types'; export const NitroCardGridItemView: FC = props => { - const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props; + const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props; const getClassName = useMemo(() => { @@ -38,7 +38,7 @@ export const NitroCardGridItemView: FC = props => return (
- { (itemCount > 1) && + { (itemCount > itemCountMinimum) && { itemCount } } { (itemUniqueNumber > 0) &&
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts index 97861569..3aa21515 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts +++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts @@ -6,6 +6,7 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes = props => { return (
-
+
{ headerText }
@@ -31,7 +31,7 @@ export const NitroCardHeaderView: FC = props => return (
-
+
{ headerText }
diff --git a/src/layout/card/index.ts b/src/layout/card/index.ts index 9191b143..c12c5247 100644 --- a/src/layout/card/index.ts +++ b/src/layout/card/index.ts @@ -5,4 +5,5 @@ export * from './grid'; export * from './header'; export * from './NitroCardView'; export * from './NitroCardView.types'; +export * from './sub-header'; export * from './tabs'; diff --git a/src/layout/card/sub-header/NitroCardSubHeaderView.tsx b/src/layout/card/sub-header/NitroCardSubHeaderView.tsx new file mode 100644 index 00000000..e8e24ea3 --- /dev/null +++ b/src/layout/card/sub-header/NitroCardSubHeaderView.tsx @@ -0,0 +1,21 @@ +import { FC, useMemo } from 'react'; +import { NitroLayoutFlex } from '../..'; +import { NitroCardSubHeaderViewProps } from './NitroCardSubHeaderView.types'; + +export const NitroCardSubHeaderView: FC = props => +{ + const { className = '', ...rest } = props; + + const getClassName = useMemo(() => + { + let newClassName = 'container-fluid bg-muted justify-content-center py-1'; + + if(className && className.length) newClassName += ` ${ className }`; + + return newClassName; + }, [ className ]); + + return ( + + ); +} diff --git a/src/layout/card/sub-header/NitroCardSubHeaderView.types.ts b/src/layout/card/sub-header/NitroCardSubHeaderView.types.ts new file mode 100644 index 00000000..b160cc93 --- /dev/null +++ b/src/layout/card/sub-header/NitroCardSubHeaderView.types.ts @@ -0,0 +1,6 @@ +import { NitroLayoutFlexProps } from '../../flex'; + +export interface NitroCardSubHeaderViewProps extends NitroLayoutFlexProps +{ + +} diff --git a/src/layout/card/sub-header/index.ts b/src/layout/card/sub-header/index.ts new file mode 100644 index 00000000..3597f89b --- /dev/null +++ b/src/layout/card/sub-header/index.ts @@ -0,0 +1,2 @@ +export * from './NitroCardSubHeaderView'; +export * from './NitroCardSubHeaderView.types'; diff --git a/src/layout/common/NitroLayoutVariant.type.ts b/src/layout/common/NitroLayoutVariant.type.ts index 69c4699a..cf973357 100644 --- a/src/layout/common/NitroLayoutVariant.type.ts +++ b/src/layout/common/NitroLayoutVariant.type.ts @@ -1 +1 @@ -export type NitroLayoutVariant = 'primary' | 'success' | 'danger'; +export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary'; diff --git a/src/layout/gift-card/NitroLayoutGiftCardView.types.ts b/src/layout/gift-card/NitroLayoutGiftCardView.types.ts index c530d65c..def9113b 100644 --- a/src/layout/gift-card/NitroLayoutGiftCardView.types.ts +++ b/src/layout/gift-card/NitroLayoutGiftCardView.types.ts @@ -1,6 +1,6 @@ export interface NitroLayoutGiftCardViewProps { - figure?:string; + figure?: string; userName?: string; message?: string; editable?: boolean; diff --git a/src/layout/grid/column/NitroLayoutGridColumn.tsx b/src/layout/grid/column/NitroLayoutGridColumn.tsx index f169ca09..dfa34267 100644 --- a/src/layout/grid/column/NitroLayoutGridColumn.tsx +++ b/src/layout/grid/column/NitroLayoutGridColumn.tsx @@ -4,16 +4,16 @@ import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types'; export const NitroLayoutGridColumn: FC = props => { - const { className = '', size = 12, gap = 3, ...rest } = props; + const { className = '', size = 12, gap = 2, overflow = 'auto', ...rest } = props; const getClassName = useMemo(() => { let newClassName = `g-col-${ size }`; - if(className && className.length) newClassName += ' ' + className; + if(className && className.length) newClassName += ` ${ className }`; return newClassName; }, [ className, size ]); - return + return } diff --git a/src/layout/index.ts b/src/layout/index.ts index 2859e2a3..2d721551 100644 --- a/src/layout/index.ts +++ b/src/layout/index.ts @@ -1,4 +1,5 @@ export * from './button'; +export * from './button-group'; export * from './card'; export * from './common'; export * from './draggable-window';