Ocrvs 8276 Create a banner component

CHANGELOG.md

@@ -24,6 +24,7 @@
 - **Template Selection Dropdown**: Updated print workflow to include a dropdown menu for template selection when issuing a certificate.
 - Auth now allows exchanging user's token for a new record-specific token [#7728](https://github.com/opencrvs/opencrvs-core/issues/7728)
 - A new GraphQL mutation `upsertRegistrationIdentifier` is added to allow updating the patient identifiers of a registration record such as NID [#8034](https://github.com/opencrvs/opencrvs-core/pull/8034)
+- Introduced a new customisable UI component: Banner [#8276](https://github.com/opencrvs/opencrvs-core/issues/8276)
 
 ### Improvements
 

packages/components/src/Banner/Banner.stories.tsx

@@ -0,0 +1,97 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import React from 'react'
+import { Banner, IBannerProps } from './Banner'
+import { Text } from '../Text'
+import { Meta, StoryObj } from '@storybook/react'
+import { Button } from '../Button'
+import { Pill } from '../Pill'
+import { Icon } from '../Icon'
+
+const meta: Meta<IBannerProps> = {
+  title: 'Layout/Banner',
+  argTypes: {
+    type: {
+      control: {
+        type: 'radio',
+        options: ['active', 'inactive', 'pending', 'default']
+      }
+    }
+  },
+  render: (args) => (
+    <Banner.Container>
+      <Banner.Header type={args.type}>
+        <Text variant="reg16" element="span">
+          This is header
+        </Text>
+      </Banner.Header>
+      <Banner.Body>
+        <Text variant="reg16" element="span">
+          This is body
+        </Text>
+      </Banner.Body>
+      <Banner.Footer>
+        <Button type="primary">Click me</Button>
+      </Banner.Footer>
+    </Banner.Container>
+  )
+}
+
+export default meta
+
+export const Default: StoryObj<IBannerProps> = {
+  args: {
+    type: 'default'
+  }
+}
+
+export const Active: StoryObj<IBannerProps> = {
+  args: {
+    type: 'active'
+  }
+}
+
+export const Pending: StoryObj<IBannerProps> = {
+  args: {
+    type: 'pending'
+  }
+}
+
+export const PendingAdvanced: StoryObj<IBannerProps> = {
+  render: () => (
+    <Banner.Container>
+      <Banner.Header type="pending">
+        <Pill
+          type="pending"
+          size="small"
+          pillTheme="dark"
+          label={
+            <>
+              <Icon name="QrCode" size="small" />
+              ID Pending Verification
+            </>
+          }
+        />
+        <Icon name="Clock" size="large" />
+      </Banner.Header>
+      <Banner.Body>
+        <Text variant="reg16" element="span">
+          The Notifier’s identity has been verified successfully using the
+          National Identity system. To make edits, please remove the
+          verification first.
+        </Text>
+      </Banner.Body>
+      <Banner.Footer justifyContent="flex-end">
+        <Button type="secondary">Reset</Button>
+      </Banner.Footer>
+    </Banner.Container>
+  )
+}

packages/components/src/Banner/Banner.tsx

@@ -0,0 +1,72 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+import React from 'react'
+import { Box } from '../Box'
+import { IStackProps, Stack } from '../Stack'
+import styled from 'styled-components'
+
+const Wrapper = styled(Box)`
+  padding: 0;
+`
+const HeaderWrapper = styled(Stack)<{
+  type: 'active' | 'inactive' | 'pending' | 'default'
+}>`
+  padding: 8px 16px;
+  --background-color: ${({ type, theme }) => `
+  ${type === 'active' ? theme.colors.greenLighter : ''}
+  ${type === 'inactive' ? theme.colors.redLighter : ''}
+  ${type === 'pending' ? theme.colors.orangeLighter : ''}
+  ${type === 'default' ? theme.colors.primaryLighter : ''}
+  `};
+  --color: ${({ type, theme }) => `
+  ${type === 'active' ? theme.colors.positiveDarker : ''}
+  ${type === 'inactive' ? theme.colors.negativeDarker : ''}
+  ${type === 'pending' ? theme.colors.neutralDarker : ''}
+  ${type === 'default' ? theme.colors.primaryDarker : ''}
+`};
+  background-color: var(--background-color);
+  color: var(--color);
+`
+const ContentWrapper = styled(Stack)`
+  padding: 16px;
+`
+
+export interface IBannerProps {
+  type: 'active' | 'inactive' | 'pending' | 'default'
+}
+
+const Container: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Wrapper>{children}</Wrapper>
+)
+
+const Header: React.FC<{ children: React.ReactNode } & IBannerProps> = ({
+  children,
+  type
+}) => (
+  <HeaderWrapper justifyContent="space-between" type={type}>
+    {children}
+  </HeaderWrapper>
+)
+
+const Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <ContentWrapper>{children}</ContentWrapper>
+)
+
+const Footer: React.FC<{ children: React.ReactNode } & IStackProps> = ({
+  children,
+  ...otherProps
+}) => (
+  <ContentWrapper direction="row" {...otherProps}>
+    {children}
+  </ContentWrapper>
+)
+
+export const Banner = { Container, Header, Body, Footer }

packages/components/src/Banner/index.ts

@@ -0,0 +1,12 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * OpenCRVS is also distributed under the terms of the Civil Registration
+ * & Healthcare Disclaimer located at http://opencrvs.org/license.
+ *
+ * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
+ */
+
+export * from './Banner'

packages/components/src/Icon/all-icons.ts

@@ -74,6 +74,8 @@ export {
   PencilLine,
   PencilCircle,
   Handshake,
-  UserCircle
+  UserCircle,
+  Clock,
+  QrCode
 } from 'phosphor-react'
 export * from './custom-icons'

packages/components/src/Pill/Pill.stories.tsx

@@ -56,3 +56,17 @@ Inactive.args = {
   label: 'Inactive',
   type: 'inactive'
 }
+
+export const ActiveDark = Template.bind({})
+ActiveDark.args = {
+  label: 'Active Dark',
+  type: 'active',
+  pillTheme: 'dark'
+}
+
+export const PendingDark = Template.bind({})
+PendingDark.args = {
+  label: 'Pending Dark',
+  type: 'pending',
+  pillTheme: 'dark'
+}

packages/components/src/Pill/Pill.tsx

@@ -16,10 +16,13 @@ type IPillType = 'active' | 'inactive' | 'pending' | 'default'
 
 type IPillSize = 'small' | 'medium'
 
+type IPillTheme = 'light' | 'dark'
+
 export interface IPillProps {
-  label: string
+  label: React.ReactNode
   type?: IPillType
   size?: IPillSize
+  pillTheme?: IPillTheme
 }
 
 const heightMap: Record<IPillSize, string> = {
@@ -32,21 +35,35 @@ const fontMap: Record<IPillSize, IFont> = {
   medium: 'bold16'
 }
 
-const StyledPill = styled.span<{ size: IPillSize; type: IPillType }>`
-  --background-color: ${({ type, theme }) => `
+const StyledPill = styled.span<{
+  size: IPillSize
+  type: IPillType
+  pillTheme: IPillTheme
+}>`
+  --lighterShade: ${({ type, theme }) => `
     ${type === 'active' ? theme.colors.greenLighter : ''}
     ${type === 'inactive' ? theme.colors.redLighter : ''}
     ${type === 'pending' ? theme.colors.orangeLighter : ''}
     ${type === 'default' ? theme.colors.primaryLighter : ''}
   `};
 
-  --color: ${({ type, theme }) => `
+  --darkerShade: ${({ type, theme }) => `
   ${type === 'active' ? theme.colors.positiveDarker : ''}
   ${type === 'inactive' ? theme.colors.negativeDarker : ''}
   ${type === 'pending' ? theme.colors.neutralDarker : ''}
   ${type === 'default' ? theme.colors.primaryDarker : ''}
 `};
 
+  ${({ pillTheme }) =>
+    pillTheme === 'dark'
+      ? `
+    --color: var(--lighterShade);
+    --background-color: var(--darkerShade);
+    `
+      : `
+    --color: var(--darkerShade);
+    --background-color: var(--lighterShade);
+  `}
   color: var(--color);
   background: var(--background-color);
   height: ${({ size }) => heightMap[size]};
@@ -61,10 +78,11 @@ export function Pill({
   label,
   type = 'default',
   size = 'small',
+  pillTheme = 'light',
   ...rest
 }: IPillProps) {
   return (
-    <StyledPill type={type} size={size} {...rest}>
+    <StyledPill type={type} size={size} pillTheme={pillTheme} {...rest}>
       {label}
     </StyledPill>
   )