crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-02 02:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add chip and specification print components

Browse Source
This commit is contained in:
Hazem Krimi
2021-06-04 16:35:14 +01:00
parent 0bfe7c5328
commit 434a425496
5 changed files with 272 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Chip/index.tsx
+27
View File
@@ -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 (
<Wrapper variant={variant} color={color}>
<Text variant='caption' weight='bold'>
{text}
</Text>
</Wrapper>
);
};
export default Chip;
src/components/Chip/styles.ts
+32
View File
@@ -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<WrapperProps>`
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};
`}
`;
src/components/Specification/index.tsx
+204
View File
@@ -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<FeatureOutput>;
};
const Specification = forwardRef<HTMLDivElement, SpecificationProps>(
({ specification, features }, ref) => {
return (
<Wrapper ref={ref}>
<Box marginBottom='30px'>
<Text variant='title'>Customer Requirements Specifications</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
1. Introduction
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.1. Purpose
</Text>
<Text variant='body'>{specification.introduction.purpose}</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.2. Document Conventions
</Text>
<Text variant='body'>
{specification.introduction.documentConventions}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.3. Intended Audience and Reading Suggestions
</Text>
<Text variant='body'>
{specification.introduction.intendedAudience}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
1.4. Project Scope
</Text>
<Text variant='body'>
{specification.introduction.projectScope}
</Text>
</Box>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
2. Overall Description
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.1. Project Perspective
</Text>
<Text variant='body'>
{specification.overallDescription.perspective}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.2. User Classes and Characteristics
</Text>
<Text variant='body'>
{specification.overallDescription.userCharacteristics}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.3. Operating Environment
</Text>
<Text variant='body'>
{specification.overallDescription.operatingEnvironment}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.4. Design and Implementation Constraints
</Text>
<Text variant='body'>
{specification.overallDescription.designImplementationConstraints}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.5. User Documentation
</Text>
<Text variant='body'>
{specification.overallDescription.userDocumentation}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
2.6. Assumptions and Dependencies
</Text>
<Text variant='body'>
{specification.overallDescription.assemptionsDependencies}
</Text>
</Box>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
3. System Features
</Text>
</Box>
{features.map((feature, index) => (
<Box marginBottom='5px' key={feature.id}>
<Text variant='subheader' weight='bold' gutterBottom>
3.{index + 1}. {feature.name}
</Text>
<Text variant='body'>{feature.description}</Text>
</Box>
))}
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
4. Other Non-Functional Requirements
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.1. Performance Requirements
</Text>
<Text variant='body'>
{specification.nonFunctionalRequirements.performanceRequirements}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.2. Safety Requirements
</Text>
<Text variant='body'>
{specification.nonFunctionalRequirements.safetyRequirements}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.3. Security Requirements
</Text>
<Text variant='body'>
{specification.nonFunctionalRequirements.securityRequirements}
</Text>
</Box>
<Box marginBottom='5px'>
<Text variant='subheader' weight='bold' gutterBottom>
4.4. Software Quality Attributes
</Text>
<Text variant='body'>
{
specification.nonFunctionalRequirements
.softwareQualityAttributes
}
</Text>
</Box>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
5. Other Requirements
</Text>
</Box>
<Text variant='body'>{specification.otherRequirements}</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
6. Glossary
</Text>
</Box>
<Text variant='body'>{specification.glossary}</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
6. Analysis Models
</Text>
</Box>
<Text variant='body'>{specification.analysisModels}</Text>
</Box>
<Box marginBottom='15px'>
<Box marginBottom='10px'>
<Text variant='headline' weight='bold'>
7. Issues List
</Text>
</Box>
<Text variant='body'>{specification.issuesList}</Text>
</Box>
</Wrapper>
);
}
);
export default Specification;
src/components/Specification/styles.ts
+5
View File
@@ -0,0 +1,5 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
padding: 1rem;
`;
src/components/index.tsx
+4
View File
@@ -24,6 +24,8 @@ import ImagePreview from './ImagePreview';
import FeatureCard from './FeatureCard'; import FeatureCard from './FeatureCard';
import FrontendFeatureCard from './FrontendFeatureCard'; import FrontendFeatureCard from './FrontendFeatureCard';
import BackendFeatureCard from './BackendFeatureCard'; import BackendFeatureCard from './BackendFeatureCard';
import Specification from './Specification';
import Chip from './Chip';
export { export {
Button, Button,
@@ -52,4 +54,6 @@ export {
FeatureCard, FeatureCard,
FrontendFeatureCard, FrontendFeatureCard,
BackendFeatureCard, BackendFeatureCard,
Specification,
Chip,
}; };