feat: Implementation & Specification & Replacement sidesheets

src/Components/SideSheet/ChangeLog/ChangeLogSideSheet.tsx

@@ -7,6 +7,7 @@ import { external_link } from "@equinor/eds-icons"
 import { ViewContext } from "../../../Context/ViewContext"
 import Card from "../Card"
 import Table from "../Table"
+import TabsTitle from "../Equipment/TabsTitle"
 
 const Container = styled.div`
     display: flex;
@@ -20,7 +21,7 @@ const Title = styled(Typography)`
 `
 
 const Header = styled.div`
-    margin: 35px 0 20px 0;
+    margin: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -57,9 +58,7 @@ const ChangeLogSideSheet: FC = () => {
     return (
         <Container>
             <Card>
-                <Typography variant="h5">
-                    CHANGELOG
-                </Typography>
+                <TabsTitle>CHANGELOG</TabsTitle>
                 <History chevronPosition="right">
                     <Accordion.Item>
                         <Accordion.Header>
@@ -79,52 +78,50 @@ const ChangeLogSideSheet: FC = () => {
                         ))}
                     </Accordion.Item>
                 </History>
-                <div>
-                    <Header>
-                        <Typography variant="h6">
-                            PRODUCT INFORMATION
-                        </Typography>
-                        <Button variant="ghost">
-                            View in EqHub
-                            <Icon data={external_link} />
-                        </Button>
-                    </Header>
+            </Card>
+            <Card>
+                <Header>
+                    <Typography variant="h5">
+                        PRODUCT INFORMATION
+                    </Typography>
+                    <Button variant="ghost">
+                        View in EqHub
+                        <Icon data={external_link} />
+                    </Button>
+                </Header>
 
-                    <Table data={{
+                <Table data={{
                         Manufacturer: "Emerson",
                         Model: "Rosemount 3051S",
                         Type: "Pressure transmitter",
                         "Serial number": "123456789",
                         "Tag number": "123456789",
                     }}
-                    />
-                </div>
-                <div>
-                    <Title variant="h6">
-                        PERFORMANCE
-                    </Title>
-                    <Table data={{
+                />
+            </Card>
+            <Card>
+                <Table
+                    title="PERFORMANCE"
+                    data={{
                         Manufacturer: "Emerson",
                         Model: "Rosemount 3051S",
                         Type: "Pressure transmitter",
                         "Serial number": "123456789",
                         "Tag number": "123456789",
                     }}
-                    />
-                </div>
-                <div>
-                    <Title variant="h6">
-                        BODY/ELEMENT/SENSOR
-                    </Title>
-                    <Table data={{
+                />
+            </Card>
+            <Card>
+                <Table
+                    title="BODY/ELEMENT/SENSOR"
+                    data={{
                         Manufacturer: "Emerson",
                         Model: "Rosemount 3051S",
                         Type: "Pressure transmitter",
                         "Serial number": "123456789",
                         "Tag number": "123456789",
                     }}
-                    />
-                </div>
+                />
             </Card>
         </Container>
     )

src/Components/SideSheet/Equipment/ButtonBar.tsx

@@ -0,0 +1,53 @@
+import React, { FC } from "react"
+import styled from "styled-components"
+import { Button, Icon, Tooltip } from "@equinor/eds-core-react"
+import {
+ shopping_card, library_image, help_outline, build_wrench, library_books,
+} from "@equinor/eds-icons"
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-right: 15px;
+`
+
+const TabButton = styled(Button)`
+    margin-bottom: 15px;
+`
+
+interface ButtonBarProps {
+    setActiveTab: (index: number) => void
+}
+
+const ButtonBar: FC<ButtonBarProps> = ({ setActiveTab }) => (
+    <Container>
+        <Tooltip title="Implementation" placement="right">
+            <TabButton variant="ghost" onClick={() => setActiveTab(0)}>
+                <Icon data={build_wrench} />
+            </TabButton>
+        </Tooltip>
+        <Tooltip title="Spesifications" placement="right">
+            <TabButton variant="ghost" onClick={() => setActiveTab(1)}>
+                <Icon data={library_books} />
+            </TabButton>
+        </Tooltip>
+        <Tooltip title="User manuals" placement="right">
+            <TabButton variant="ghost" onClick={() => setActiveTab(2)}>
+                <Icon data={help_outline} />
+            </TabButton>
+        </Tooltip>
+        <Tooltip title="Media" placement="right">
+            <TabButton variant="ghost" onClick={() => setActiveTab(3)}>
+                <Icon data={library_image} />
+            </TabButton>
+        </Tooltip>
+        <Tooltip title="Replacements" placement="right">
+            <TabButton variant="ghost" onClick={() => setActiveTab(4)}>
+                <Icon data={shopping_card} />
+            </TabButton>
+        </Tooltip>
+    </Container>
+    )
+
+export default ButtonBar

src/Components/SideSheet/Equipment/EquipmentSideSheet.tsx

@@ -0,0 +1,32 @@
+import React, { FC, useState } from "react"
+import styled from "styled-components"
+import ButtonBar from "./ButtonBar"
+import TabView from "./TabView"
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    padding: 15px;
+`
+
+const EquipmentSideSheet: FC = () => {
+    const [activeTab, setActiveTab] = useState(0)
+
+    const handleTabChange = (index: number) => {
+        console.log(index)
+        setActiveTab(index)
+    }
+
+    return (
+        <Container>
+            <ButtonBar setActiveTab={setActiveTab} />
+            <TabView
+                activeTab={activeTab}
+                handleTabChange={handleTabChange}
+            />
+        </Container>
+    )
+}
+
+export default EquipmentSideSheet

src/Components/SideSheet/Equipment/MatchIndicator.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from "react"
+import styled from "styled-components"
+import { CircularProgress, Typography } from "@equinor/eds-core-react"
+
+const Container = styled.div`
+    position: relative;
+    width: 150px;
+    height: 150px;
+
+    & > svg {
+        width: 100%;
+        height: 100%;
+`
+
+const MatchText = styled.div`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    & > * {
+        color: #007079;
+`
+
+const MatchCircle = styled(CircularProgress)`
+`
+
+interface MatchIndicatorProps {
+    percentage: number
+}
+
+const MatchIndicator: FC<MatchIndicatorProps> = ({ percentage }) => (
+    <Container>
+        <MatchCircle variant="determinate" value={percentage} />
+        <MatchText>
+            <Typography variant="h3">
+                <strong>
+                    {percentage}
+                    %
+                </strong>
+
+            </Typography>
+            <Typography variant="body_short">
+                Match
+            </Typography>
+        </MatchText>
+    </Container>
+)
+
+export default MatchIndicator

src/Components/SideSheet/Equipment/TabView.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react"
+import styled from "styled-components"
+import Implementation from "./Tabs/Implementation"
+import Specifications from "./Tabs/Specifications"
+import UserManuals from "./Tabs/UserManuals"
+import Media from "./Tabs/Media"
+import Replacements from "./Tabs/Replacements"
+
+const TabsContainer = styled.div`
+    width: 100%;
+`
+
+interface TabViewProps {
+    activeTab: number
+    handleTabChange: (index: number) => void
+}
+
+const TabView: FC<TabViewProps> = ({ activeTab, handleTabChange }) => (
+    <TabsContainer>
+        {activeTab === 0 && <Implementation />}
+        {activeTab === 1 && <Specifications />}
+        {activeTab === 2 && <UserManuals />}
+        {activeTab === 3 && <Media />}
+        {activeTab === 4 && <Replacements />}
+    </TabsContainer>
+)
+
+export default TabView

src/Components/SideSheet/Equipment/Tabs/Implementation.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from "react"
+import TabsTitle from "../TabsTitle"
+import Card from "../../Card"
+import Table from "../../Table"
+
+const Implementation: FC = () => {
+    const dummyData = {
+        "Implementation status 1": "Not implemented",
+        "Implementation status 2": "Not implemented",
+        "Implementation status 3": "Not implemented",
+        "Implementation status 4": "Not implemented",
+        "Implementation status 5": "Not implemented",
+    }
+
+    return (
+        <div>
+            <TabsTitle>Implementation</TabsTitle>
+            <Card>
+                <Table title="HEALTH" data={dummyData} />
+            </Card>
+            <Card>
+                <Table title="INSTALATION CONFIGURATIONS" data={dummyData} />
+            </Card>
+            <Card>
+                <Table title="SPATIAL ATTRIBUTES" data={dummyData} />
+            </Card>
+        </div>
+    )
+    }
+
+export default Implementation

src/Components/SideSheet/Equipment/Tabs/Media.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from "react"
+import { Typography } from "@equinor/eds-core-react"
+
+const Media: FC = () => (
+    <div>
+        <Typography variant="h4">Media</Typography>
+    </div>
+)
+
+export default Media