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,
};