From 434a425496b3a32eb4189b9efb820d4725197b25 Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Fri, 4 Jun 2021 16:35:14 +0100 Subject: [PATCH] Add chip and specification print components --- src/components/Chip/index.tsx | 27 ++++ src/components/Chip/styles.ts | 32 ++++ src/components/Specification/index.tsx | 204 +++++++++++++++++++++++++ src/components/Specification/styles.ts | 5 + src/components/index.tsx | 4 + 5 files changed, 272 insertions(+) create mode 100644 src/components/Chip/index.tsx create mode 100644 src/components/Chip/styles.ts create mode 100644 src/components/Specification/index.tsx create mode 100644 src/components/Specification/styles.ts diff --git a/src/components/Chip/index.tsx b/src/components/Chip/index.tsx new file mode 100644 index 0000000..fbbb20f --- /dev/null +++ b/src/components/Chip/index.tsx @@ -0,0 +1,27 @@ +import { Wrapper } from './styles'; +import { Text } from '..'; + +type ChipProps = { + variant?: 'outlined' | 'filled'; + color: + | 'client' + | 'productOwner' + | 'developer' + | 'admin' + | 'success' + | 'warning' + | 'error'; + text: string; +}; + +const Chip = ({ variant = 'outlined', color, text }: ChipProps) => { + return ( + + + {text} + + + ); +}; + +export default Chip; diff --git a/src/components/Chip/styles.ts b/src/components/Chip/styles.ts new file mode 100644 index 0000000..16245d7 --- /dev/null +++ b/src/components/Chip/styles.ts @@ -0,0 +1,32 @@ +import styled, { css } from 'styled-components'; + +type WrapperProps = { + color: + | 'client' + | 'productOwner' + | 'developer' + | 'admin' + | 'success' + | 'warning' + | 'error'; + variant: 'outlined' | 'filled'; +}; + +export const Wrapper = styled.div` + padding: 5px 15px; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + + ${({ variant, color, theme }) => + variant === 'outlined' + ? css` + border: 2px solid ${theme.colors[color].main}; + color: ${theme.colors[color].main}; + ` + : css` + background: ${theme.colors[color].main}; + color: ${theme.colors.white.main}; + `} +`; diff --git a/src/components/Specification/index.tsx b/src/components/Specification/index.tsx new file mode 100644 index 0000000..e289489 --- /dev/null +++ b/src/components/Specification/index.tsx @@ -0,0 +1,204 @@ +import { forwardRef } from 'react'; +import { Box, Text } from '..'; +import { FeatureOutput, SpecificationOutput } from '../../graphql/types'; +import { Wrapper } from './styles'; + +type SpecificationProps = { + specification: SpecificationOutput; + features: Array; +}; + +const Specification = forwardRef( + ({ specification, features }, ref) => { + return ( + + + Customer Requirements Specifications + + + + + 1. Introduction + + + + + 1.1. Purpose + + {specification.introduction.purpose} + + + + 1.2. Document Conventions + + + {specification.introduction.documentConventions} + + + + + 1.3. Intended Audience and Reading Suggestions + + + {specification.introduction.intendedAudience} + + + + + 1.4. Project Scope + + + {specification.introduction.projectScope} + + + + + + + 2. Overall Description + + + + + 2.1. Project Perspective + + + {specification.overallDescription.perspective} + + + + + 2.2. User Classes and Characteristics + + + {specification.overallDescription.userCharacteristics} + + + + + 2.3. Operating Environment + + + {specification.overallDescription.operatingEnvironment} + + + + + 2.4. Design and Implementation Constraints + + + {specification.overallDescription.designImplementationConstraints} + + + + + 2.5. User Documentation + + + {specification.overallDescription.userDocumentation} + + + + + 2.6. Assumptions and Dependencies + + + {specification.overallDescription.assemptionsDependencies} + + + + + + + 3. System Features + + + {features.map((feature, index) => ( + + + 3.{index + 1}. {feature.name} + + {feature.description} + + ))} + + + + + 4. Other Non-Functional Requirements + + + + + 4.1. Performance Requirements + + + {specification.nonFunctionalRequirements.performanceRequirements} + + + + + 4.2. Safety Requirements + + + {specification.nonFunctionalRequirements.safetyRequirements} + + + + + 4.3. Security Requirements + + + {specification.nonFunctionalRequirements.securityRequirements} + + + + + 4.4. Software Quality Attributes + + + { + specification.nonFunctionalRequirements + .softwareQualityAttributes + } + + + + + + + 5. Other Requirements + + + {specification.otherRequirements} + + + + + 6. Glossary + + + {specification.glossary} + + + + + 6. Analysis Models + + + {specification.analysisModels} + + + + + 7. Issues List + + + {specification.issuesList} + + + ); + } +); + +export default Specification; diff --git a/src/components/Specification/styles.ts b/src/components/Specification/styles.ts new file mode 100644 index 0000000..08b6808 --- /dev/null +++ b/src/components/Specification/styles.ts @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const Wrapper = styled.div` + padding: 1rem; +`; diff --git a/src/components/index.tsx b/src/components/index.tsx index 6195545..f3eed71 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -24,6 +24,8 @@ import ImagePreview from './ImagePreview'; import FeatureCard from './FeatureCard'; import FrontendFeatureCard from './FrontendFeatureCard'; import BackendFeatureCard from './BackendFeatureCard'; +import Specification from './Specification'; +import Chip from './Chip'; export { Button, @@ -52,4 +54,6 @@ export { FeatureCard, FrontendFeatureCard, BackendFeatureCard, + Specification, + Chip, };