Merge pull request #76 from phuoc-ng/initial-avatar

Add initial avatar

client/constants/Pattern.ts

@@ -21,6 +21,7 @@ enum Pattern {
     FloatingLabel = 'Floating label',
     FullScreenMenu = 'Full screen menu',
     HolyGrail = 'Holy grail',
+    InitialAvatar = 'Initial avatar',
     InputAddon = 'Input addon',
     MediaObject = 'Media object',
     Menu = 'Menu',

client/pages/ExplorePage.tsx

@@ -109,6 +109,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FloatingLabel} />
                         <CoverCard pattern={Pattern.FullScreenMenu} />
+                        <CoverCard pattern={Pattern.InitialAvatar} />
                         <CoverCard pattern={Pattern.InputAddon} />
                         <CoverCard pattern={Pattern.MediaObject} />
                         <CoverCard pattern={Pattern.Menu} />

client/patterns/avatar-list/Details.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
@@ -77,6 +79,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
         </DetailsLayout>
     );
 };

client/patterns/badge/Details.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
@@ -58,6 +60,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
         </DetailsLayout>
     );
 };

client/patterns/initial-avatar/Cover.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        color: '#FFF',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '48px',
+                        justifyContent: 'center',
+                        width: '48px',
+                    }}
+                >
+                    PN
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/initial-avatar/Details.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Initial avatar">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    To center the content, you also can use other technique demonstrated in
+                    the <Link to='/patterns/centering'>Centering</Link> pattern.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '50%',
+                                    color: '#FFF',
+                                    display: 'inline-block',
+                                    fontSize: '24px',
+                                    height: '48px',
+                                    position: 'relative',
+                                    verticalAlign: 'middle',
+                                    width: '48px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        left: '50%',
+                                        position: 'absolute',
+                                        top: '50%',
+                                        transform: 'translate(-50%, -50%)',
+                                    }}
+                                >
+                                    PN
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Center the content */
+    display: inline-block;
+    vertical-align: middle;
+
+    /* Used to position the content */
+    position: relative;
+
+    /* Colors */
+    background-color: rgba(0, 0, 0, .3);
+    color: #FFF;
+
+    /* Rounded border */
+    border-radius: 50%;
+    height: 48px;
+    width: 48px;
+">
+    <div style="
+        /* Center the content */
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    ">
+        <!-- The letters -->
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns
+                patterns={[Pattern.AvatarList, Pattern.Badge, Pattern.Centering, Pattern.PresenceIndicator]}
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/presence-indicator/Details.tsx

@@ -72,7 +72,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.DockedAtCorner]} />
+            <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]} />
         </DetailsLayout>
     );
 };

public/sitemap.xml

@@ -26,6 +26,7 @@
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
     <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
     <url><loc>https://csslayout.io/patterns/full-screen-menu</loc></url>
+    <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
     <url><loc>https://csslayout.io/patterns/media-object</loc></url>
     <url><loc>https://csslayout.io/patterns/menu</loc></url>