From 0ac778ba3966feee6bd0128d6c2c6eded7fa5f5f Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Fri, 29 Nov 2019 13:51:49 +0700
Subject: [PATCH] Add drop cap

---
 client/constants/Pattern.ts          |  1 +
 client/pages/ExplorePage.tsx         |  1 +
 client/pages/HomePage.tsx            |  2 +
 client/patterns/drop-cap/Cover.tsx   | 55 ++++++++++++++++++++++++
 client/patterns/drop-cap/Details.tsx | 64 ++++++++++++++++++++++++++++
 client/patterns/drop-cap/dropcap.css |  9 ++++
 public/sitemap.xml                   |  1 +
 7 files changed, 133 insertions(+)
 create mode 100644 client/patterns/drop-cap/Cover.tsx
 create mode 100644 client/patterns/drop-cap/Details.tsx
 create mode 100644 client/patterns/drop-cap/dropcap.css

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index e9a192c..88edecd 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -9,6 +9,7 @@ enum Pattern {
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
     DropArea = 'Drop area',
+    DropCap = 'Drop cap',
     Dropdown = 'Dropdown',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 0a0aae5..68d6056 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -93,6 +93,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.DropCap} />
                         <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 805ff5d..4f51ed9 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -195,6 +195,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.SplitScreen} />
                         <CoverCard pattern={Pattern.StickyFooter} />
                         <CoverCard pattern={Pattern.StickyHeader} />
+                        <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -204,6 +205,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.DropCap} />
                         <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
diff --git a/client/patterns/drop-cap/Cover.tsx b/client/patterns/drop-cap/Cover.tsx
new file mode 100644
index 0000000..2ceb749
--- /dev/null
+++ b/client/patterns/drop-cap/Cover.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                    width: '100%',
+                }}
+            >
+                <div style={{ display: 'flex', height: '32px', width: '100%' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            border: '2px dashed rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            marginRight: '8px',
+                            justifyContent: 'center',
+                            width: '32px',
+                        }}
+                    >
+                        <Circle />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                    </div>
+                </div>
+                <div style={{ marginTop: '4px' }}>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
new file mode 100644
index 0000000..88dba3a
--- /dev/null
+++ b/client/patterns/drop-cap/Details.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import './dropcap.css';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Square from '../../placeholders/Square';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Drop cap">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <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
+                                    written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                    alongside HTML and JavaScript.
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+/* Styles for the first letter */
+.p-drop-cap:first-letter {
+    /* Display at the left */
+    float: left;
+    line-height: 1;
+
+    /* Spacing */
+    margin: 0 8px 0 0;
+    padding: 0 8px;
+
+    /* Optional */
+    font-size: 64px;
+    font-weight: 700;
+}
+</style>
+
+<div class="p-drop-cap">
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/drop-cap/dropcap.css b/client/patterns/drop-cap/dropcap.css
new file mode 100644
index 0000000..8959409
--- /dev/null
+++ b/client/patterns/drop-cap/dropcap.css
@@ -0,0 +1,9 @@
+.p-drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px; 
+}
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 9ef9518..2ea3ef8 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -15,6 +15,7 @@
     <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/drop-area</loc></url>
+    <url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
     <url><loc>https://csslayout.io/patterns/dropdown</loc></url>
     <url><loc>https://csslayout.io/patterns/feature-list</loc></url>
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>