Add reference icon on the header #53

Mixtini · Sep 3, 2020 · 09e8e3e · 09e8e3e
1 parent 4c46fc5
commit 09e8e3e
Show file tree

Hide file tree

Showing 8 changed files with 1,420 additions and 1,428 deletions.
diff --git a/app/.env b/app/.env
@@ -1 +1 @@
-APP_VERSION=v1.0.2
+APP_VERSION=v1.0.3
diff --git a/app/src/__tests__/container/header/__snapshots__/header.test.js.snap b/app/src/__tests__/container/header/__snapshots__/header.test.js.snap
@@ -6,33 +6,167 @@ Object {
   "baseElement": <body>
     <div>
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary sc-AxirZ eNxAJX mui-fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary sc-AxhCb fuvxef mui-fixed MuiPaper-elevation4"
         minwidth="350"
       >
         <div
-          class="sc-AxiKw dSQgYu"
+          class="sc-AxhUy kKiCNH"
         >
           <div
             class="sc-AxjAm bHVBpE"
           >
-            Over Party Lab 醉佳話。研酒室
+            Over Party Lab
+          </div>
+          <div
+            class="sc-AxirZ hWWwzO"
+          >
+            <div
+              class="sc-AxiKw jHupki"
+            >
+              <a
+                class="sc-fzoLsD fNiQHW"
+                href="https://www.instagram.com/over.party.lab/"
+                target="_blank"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
+                  />
+                </svg>
+              </a>
+            </div>
+            <div
+              class="sc-AxiKw jHupki"
+            >
+              <a
+                class="sc-fzoLsD fNiQHW"
+                href="https://www.facebook.com/over.party.lab/"
+                target="_blank"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
+                  />
+                </svg>
+              </a>
+            </div>
+            <div
+              class="sc-AxiKw jHupki"
+            >
+              <a
+                class="sc-fzoLsD fNiQHW"
+                href="https://github.com/overpartylab/cocktails-guide-book"
+                target="_blank"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"
+                  />
+                </svg>
+              </a>
+            </div>
           </div>
         </div>
       </header>
     </div>
   </body>,
   "container": <div>
     <header
-      class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary sc-AxirZ eNxAJX mui-fixed MuiPaper-elevation4"
+      class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary sc-AxhCb fuvxef mui-fixed MuiPaper-elevation4"
       minwidth="350"
     >
       <div
-        class="sc-AxiKw dSQgYu"
+        class="sc-AxhUy kKiCNH"
       >
         <div
           class="sc-AxjAm bHVBpE"
         >
-          Over Party Lab 醉佳話。研酒室
+          Over Party Lab
+        </div>
+        <div
+          class="sc-AxirZ hWWwzO"
+        >
+          <div
+            class="sc-AxiKw jHupki"
+          >
+            <a
+              class="sc-fzoLsD fNiQHW"
+              href="https://www.instagram.com/over.party.lab/"
+              target="_blank"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
+                />
+              </svg>
+            </a>
+          </div>
+          <div
+            class="sc-AxiKw jHupki"
+          >
+            <a
+              class="sc-fzoLsD fNiQHW"
+              href="https://www.facebook.com/over.party.lab/"
+              target="_blank"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
+                />
+              </svg>
+            </a>
+          </div>
+          <div
+            class="sc-AxiKw jHupki"
+          >
+            <a
+              class="sc-fzoLsD fNiQHW"
+              href="https://github.com/overpartylab/cocktails-guide-book"
+              target="_blank"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"
+                />
+              </svg>
+            </a>
+          </div>
         </div>
       </div>
     </header>

diff --git a/app/src/assets/wording/common.json b/app/src/assets/wording/common.json
@@ -1,3 +1,3 @@
 {
-    "title": "Over Party Lab 醉佳話。研酒室"
+    "title": "Over Party Lab"
 }
diff --git a/app/src/config/contact.js b/app/src/config/contact.js
@@ -1,5 +1,6 @@
 export const LINK = {
     FACEBOOK: 'https://www.facebook.com/over.party.lab/',
     INSTAGRAM: 'https://www.instagram.com/over.party.lab/',
-    MEDIUM: 'https://medium.com/@overpartylab'
+    MEDIUM: 'https://medium.com/@overpartylab',
+    GITHUB: 'https://github.com/overpartylab/cocktails-guide-book'
 };
diff --git a/app/src/container/header/header.css.js b/app/src/container/header/header.css.js
@@ -6,6 +6,16 @@ export const HeaderText = styled.div`
     padding: 15px; 
 `;
 
+export const HeaderInfo = styled.div`
+    display: flex;
+`;
+
+export const InfoItem = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+`;
+
 export const StyledAppBar = styled(AppBar)`
     min-width: ${({minwidth}) => `${minwidth}px`};
 `;

diff --git a/app/src/container/header/header.js b/app/src/container/header/header.js
@@ -1,15 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { HeaderText, StyledAppBar, AppBarContainer } from './header.css.js';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import InstagramIcon from '@material-ui/icons/Instagram';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import { HeaderText, HeaderInfo, InfoItem, StyledAppBar, AppBarContainer } from './header.css.js';
+import { StyledIcon } from '../style.css.js';
 
 import COMMON_TEXT from '../../assets/wording/common.json';
+import { LINK } from '../../config/contact';
 
 const Header = ({ minwidth }) => {
     return (
         <StyledAppBar minwidth={minwidth} position="fixed">
             <AppBarContainer>
                 <HeaderText>{COMMON_TEXT.title}</HeaderText>
+                <HeaderInfo>
+                    <InfoItem>
+                        <StyledIcon href={LINK.INSTAGRAM} target="_blank" svgSize="2rem">
+                            <InstagramIcon /> 
+                        </StyledIcon>
+                    </InfoItem>
+                    <InfoItem>
+                        <StyledIcon href={LINK.FACEBOOK} target="_blank" svgSize="2rem">
+                            <FacebookIcon /> 
+                        </StyledIcon>
+                    </InfoItem>
+                    <InfoItem>
+                        <StyledIcon href={LINK.GITHUB} target="_blank" svgSize="2rem">
+                            <GitHubIcon /> 
+                        </StyledIcon>
+                    </InfoItem>
+                </HeaderInfo>
             </AppBarContainer>
         </StyledAppBar>
     );

diff --git a/app/src/container/style.css.js b/app/src/container/style.css.js
@@ -29,3 +29,14 @@ export const Item = styled.div`
 export const Content = styled.div`
     width: ${STYLE.MIN_WIDTH - STYLE.PADDING}px;
 `;
+
+export const StyledIcon = styled.a`
+    && svg {
+        ${({ svgSize }) => svgSize && (`font-size: ${svgSize}`)};
+    }
+    ${({ height }) => height && height};
+    ${({ width }) => width && width};
+    margin: 10px;
+    color: inherit;
+    cursor: pointer;
+`;