Add presence indicator

client/constants/Pattern.ts

@@ -21,6 +21,7 @@ enum Pattern {
     Modal = 'Modal',
     Notification = 'Notification',
     Pagination = 'Pagination',
+    PresenceIndicator = 'Presence indicator',
     PreviousNextButtons = 'Previous next buttons',
     PricingTable = 'Pricing table',
     PropertyList = 'Property list',

client/pages/ExplorePage.tsx

@@ -104,6 +104,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Modal} />
                         <CoverCard pattern={Pattern.Notification} />
                         <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PresenceIndicator} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />
                         <CoverCard pattern={Pattern.PricingTable} />
                         <CoverCard pattern={Pattern.PropertyList} />

client/pages/HomePage.tsx

@@ -216,6 +216,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.Modal} />
                         <CoverCard pattern={Pattern.Notification} />
                         <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PresenceIndicator} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />
                         <CoverCard pattern={Pattern.PricingTable} />
                         <CoverCard pattern={Pattern.PropertyList} />

client/patterns/docked-at-corner/Details.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import Heading from '../../components/Heading';
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -138,6 +140,7 @@ const Details: React.FC<{}> = () => {
                     </div>
                 </div>
             </section>
+            <RelatedPatterns patterns={[Pattern.PresenceIndicator]} />
         </DetailsLayout>
     );
 };

client/patterns/drop-cap/Cover.tsx

@@ -23,8 +23,8 @@ const Cover: React.FC<{}> = () => {
                             alignItems: 'center',
                             border: '2px dashed rgba(0, 0, 0, 0.3)',
                             display: 'flex',
-                            marginRight: '8px',
                             justifyContent: 'center',
+                            marginRight: '8px',
                             width: '32px',
                         }}
                     >

client/patterns/drop-cap/Details.tsx

@@ -26,8 +26,9 @@ const Details: React.FC<{}> = () => {
                         >
                             <div style={{ width: '256px' }}>
                                 <div className="p-drop-cap">
-                                    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
+                                    Cascading Style Sheets (CSS) is a style sheet language used for
-                                    written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                    describing the presentation of a document written in a markup
+                                    language like HTML. CSS is a cornerstone technology of the World Wide Web,
                                     alongside HTML and JavaScript.
                                 </div>
                             </div>

client/patterns/presence-indicator/Cover.tsx

@@ -0,0 +1,45 @@
+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={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        height: '32px',
+                        position: 'relative',
+                        width: '32px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#FF4136',
+                            borderRadius: '9999px',
+                            bottom: 0,
+                            height: '8px',
+                            position: 'absolute',
+                            right: 0,
+                            transform: 'translate(50%, 50%)',
+                            width: '8px',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/presence-indicator/Details.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Presence indicator">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '64px',
+                                    marginRight: '16px',
+                                    position: 'relative',
+                                    width: '64px',
+                                }}
+                            >
+                                <Circle size={64} />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FF4136',
+                                        borderRadius: '9999px',
+                                        bottom: 0,
+                                        height: '16px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        transform: 'translate(50%, 50%)',
+                                        width: '16px',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    position: relative;
+">
+    <!-- Other element such as avatar -->
+    ...
+
+    <!-- The presense indicator -->
+    <div style="
+        /* Shown at the bottom right corner */
+        bottom: 0,
+        position: absolute;
+        right: 0;
+        transform: translate(50%, 50%);
+
+        /* Rounded border */
+        border-radius: 9999px;
+        height: 16px;
+        width: 16px;
+
+        /* Background color */
+        background-color: #FF4136;
+    " />
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.DockedAtCorner]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

public/sitemap.xml

@@ -26,6 +26,7 @@
     <url><loc>https://csslayout.io/patterns/modal</loc></url>
     <url><loc>https://csslayout.io/patterns/notification</loc></url>
     <url><loc>https://csslayout.io/patterns/pagination</loc></url>
+    <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
     <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
     <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
     <url><loc>https://csslayout.io/patterns/progress-bar</loc></url>