Merge pull request #54 from phuoc-ng/rating

Add rating

client/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
 import './index.css';
 
 import Pattern from './constants/Pattern';
+import Explore from './Explore';
 import Home from './Home';
 import DetailsLoader from './loaders/DetailsLoader';
 
@@ -12,6 +13,7 @@ const App = () => {
         <Router>
             <RouteSwitch>
                 <Route exact={true} path='/'><Home /></Route>
+                <Route exact={true} path='/explore'><Explore /></Route>
                 <Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
                 <Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
                 <Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
@@ -37,9 +39,8 @@ const App = () => {
                 <Route exact={true} path='/questions-and-answers'>
                     <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
                 </Route>
-                <Route exact={true} path='/radio-switch'>
+                <Route exact={true} path='/radio-switch'><DetailsLoader pattern={Pattern.RadioSwitch} /></Route>
-                    <DetailsLoader pattern={Pattern.RadioSwitch} />
+                <Route exact={true} path='/rating'><DetailsLoader pattern={Pattern.Rating} /></Route>
-                </Route>
                 <Route exact={true} path='/same-height-columns'>
                     <DetailsLoader pattern={Pattern.SameHeightColumns} />
                 </Route>

client/Explore.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import CoverCard from './components/CoverCard';
+import Heading from './components/Heading';
+import Pattern from './constants/Pattern';
+import useDocumentTitle from './hooks/useDocumentTitle';
+import Layout from './layouts/Layout';
+
+const Home = () => {
+    useDocumentTitle('CSS Layout ∙ Explore');
+
+    return (
+        <Layout>
+            <div className="mv4">
+                <Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
+            </div>
+            <div className="bt br bl b--black-20 relative br4 br--top">
+                <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>Explore</h1>
+
+                <h2 className="fw3 f3 tc lh-copy ma0 pa4">Here is the collection of patterns</h2>
+
+                <section>
+                    <Heading title="Layouts" />
+
+                    <div className="flex flex-wrap items-start pa4">
+                        <CoverCard pattern={Pattern.HolyGrail} />
+                        <CoverCard pattern={Pattern.Sidebar} />
+                        <CoverCard pattern={Pattern.SplitScreen} />
+                        <CoverCard pattern={Pattern.StickyFooter} />
+                        <CoverCard pattern={Pattern.StickyHeader} />
+                    </div>
+                </section>
+
+                <section>
+                    <Heading title="Patterns" />
+
+                    <div className="flex flex-wrap items-start pa4">
+                        <CoverCard pattern={Pattern.Badge} />
+                        <CoverCard pattern={Pattern.Breadcrumb} />
+                        <CoverCard pattern={Pattern.ButtonWithIcon} />
+                        <CoverCard pattern={Pattern.Card} />
+                        <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.DockedAtCorner} />
+                        <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.FeatureList} />
+                        <CoverCard pattern={Pattern.FixedAtCorner} />
+                        <CoverCard pattern={Pattern.InputAddOn} />
+                        <CoverCard pattern={Pattern.MediaObject} />
+                        <CoverCard pattern={Pattern.Menu} />
+                        <CoverCard pattern={Pattern.Modal} />
+                        <CoverCard pattern={Pattern.Notification} />
+                        <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PreviousNextButtons} />
+                        <CoverCard pattern={Pattern.PricingTable} />
+                        <CoverCard pattern={Pattern.PropertyList} />
+                        <CoverCard pattern={Pattern.ProgressBar} />
+                        <CoverCard pattern={Pattern.QuestionsAndAnswers} />
+                        <CoverCard pattern={Pattern.RadioSwitch} />
+                        <CoverCard pattern={Pattern.Rating} />
+                        <CoverCard pattern={Pattern.SameHeightColumns} />
+                        <CoverCard pattern={Pattern.SearchBox} />
+                        <CoverCard pattern={Pattern.Separator} />
+                        <CoverCard pattern={Pattern.SimpleGrid} />
+                        <CoverCard pattern={Pattern.Slider} />
+                        <CoverCard pattern={Pattern.SpinButton} />
+                        <CoverCard pattern={Pattern.SplitNavigation} />
+                        <CoverCard pattern={Pattern.StepperInput} />
+                        <CoverCard pattern={Pattern.Switch} />
+                        <CoverCard pattern={Pattern.Tab} />
+                        <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                        <CoverCard pattern={Pattern.Wizard} />
+                    </div>
+                </section>
+            </div>
+        </Layout>
+    );
+};
+
+export default Home;

client/Home.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import CoverCard from './components/CoverCard';
-import Heading from './components/Heading';
 import Pattern from './constants/Pattern';
 import useDocumentTitle from './hooks/useDocumentTitle';
 import Layout from './layouts/Layout';
@@ -20,7 +20,16 @@ const Home = () => {
                         CSS Layout
                     </h1>
 
-                    <h2 className="fw3 f3 tc lh-copy ma0 pa4">
+                    <h2
+                        style={{
+                            fontSize: '24px',
+                            fontWeight: 300,
+                            lineHeight: 1.5,
+                            margin: 0,
+                            padding: '64px 0px 32px 0',
+                            textAlign: 'center',
+                        }}
+                    >
                         a collection of popular layouts and patterns made with CSS
                     </h2>
 
@@ -54,22 +63,57 @@ const Home = () => {
                     </div>
                 </div>
 
-                <section>
+                <section style={{ position: 'relative' }}>
-                    <Heading title="Layouts" />
+                    <div
-
+                        style={{
-                    <div className="flex flex-wrap items-start pa4">
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                            zIndex: 9999,
+                        }}
+                    >
+                        <div
+                            style={{
+                                fontSize: '64px',
+                                fontWeight: 600,
+                                marginBottom: '16px',
+                            }}
+                        >
+                            50+ patterns
+                        </div>
+                        <Link
+                            to="/explore"
+                            style={{
+                                backgroundColor: '#00449e',
+                                borderRadius: '4px',
+                                color: '#FFF',
+                                fontSize: '24px',
+                                padding: '12px 16px',
+                                textDecoration: 'none',
+                            }}
+                        >
+                                Explore the collection
+                        </Link>
+                    </div>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            opacity: '0.4',
+                            padding: '32px 16px',
+                        }}
+                    >
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.Sidebar} />
                         <CoverCard pattern={Pattern.SplitScreen} />
                         <CoverCard pattern={Pattern.StickyFooter} />
                         <CoverCard pattern={Pattern.StickyHeader} />
-                    </div>
-                </section>
-
-                <section>
-                    <Heading title="Patterns" />
-
-                    <div className="flex flex-wrap items-start pa4">
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -90,19 +134,6 @@ const Home = () => {
                         <CoverCard pattern={Pattern.PropertyList} />
                         <CoverCard pattern={Pattern.ProgressBar} />
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
-                        <CoverCard pattern={Pattern.RadioSwitch} />
-                        <CoverCard pattern={Pattern.SameHeightColumns} />
-                        <CoverCard pattern={Pattern.SearchBox} />
-                        <CoverCard pattern={Pattern.Separator} />
-                        <CoverCard pattern={Pattern.SimpleGrid} />
-                        <CoverCard pattern={Pattern.Slider} />
-                        <CoverCard pattern={Pattern.SpinButton} />
-                        <CoverCard pattern={Pattern.SplitNavigation} />
-                        <CoverCard pattern={Pattern.StepperInput} />
-                        <CoverCard pattern={Pattern.Switch} />
-                        <CoverCard pattern={Pattern.Tab} />
-                        <CoverCard pattern={Pattern.TogglePasswordVisibility} />
-                        <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>
             </div>

client/constants/Pattern.ts

@@ -21,6 +21,7 @@ enum Pattern {
     ProgressBar = 'Progress bar',
     QuestionsAndAnswers = 'Questions and answers',
     RadioSwitch = 'Radio switch',
+    Rating = 'Rating',
     SameHeightColumns = 'Same height columns',
     SearchBox = 'Search box',
     Separator = 'Separator',

client/patterns/rating/Cover.tsx

@@ -0,0 +1,36 @@
+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',
+                        display: 'flex',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
+                    <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
+                    <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>★</div>
+                    <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>☆</div>
+                    <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '12px', padding: '2px' }}>☆</div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/rating/Details.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Star from './Star';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Rating">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div className="rating">
+                                <Star isActive={false} />
+                                <Star isActive={false} />
+                                <Star isActive={false} />
+                                <Star isActive={false} />
+                                <Star isActive={true} />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+.rating {
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    flex-direction: row-reverse;
+
+    font-size: 32px;
+}
+
+.rating .star:hover, .rating .star:hover ~ .star {
+    color: transparent;
+}
+
+/*
+Make all previous stars selected when hover on a star
+Note that we use \`flex-direction: row-reverse\` on the container
+*/
+.rating .star:hover:before,
+.rating .star:hover ~ .star:before {
+    color: #00449e;
+    content: '\\2605';
+    left: 0;
+    position: absolute;
+}
+
+.star {
+    /* Reset styles for button */
+    background-color: transparent;
+    border: transparent;
+    margin: 0 2px;
+    padding: 0;
+
+    /* Used to postion the hover state */
+    position: relative;
+}
+</style>
+
+<div class="rating">
+    <button class="star">☆</button>
+    <button class="star">☆</button>
+    <button class="star">☆</button>
+    <button class="star">☆</button>
+    <button class="star">★</button>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/rating/Star.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './star.css';
+
+interface StarProps {
+    isActive: boolean;
+}
+
+const Star: React.FC<StarProps> = ({ isActive }) => {
+    return (
+        <button className="star">
+            {isActive ? '★' : '☆'}
+        </button>
+    );
+};
+
+export default Star;

client/patterns/rating/star.css

@@ -0,0 +1,26 @@
+.rating {
+    align-items: center;
+    display: flex;
+    font-size: 32px;
+    justify-content: center;
+    flex-direction: row-reverse;
+}
+
+.rating .star:hover, .rating .star:hover ~ .star {
+    color: transparent;
+}
+
+.rating .star:hover:before, .rating .star:hover ~ .star:before {
+    color: #00449e;
+    content: '\2605';
+    left: 0;
+    position: absolute;
+}
+
+.star {
+    background-color: transparent;
+    border: transparent;
+    margin: 0 2px;
+    padding: 0;
+    position: relative;
+}

client/placeholders/Frame.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 const Frame: React.FC<{}> = ({ children }) => {
     return (
         <div
-            className="ba b--black-30 br2"
             style={{
+                border: '1px solid rgba(0, 0, 0, 0.3)',
+                borderRadius: '4px',
                 boxShadow: 'rgba(0, 0, 0, 0.2) 0px 16px 24px -4px, rgba(0, 0, 0, 0.05) 0px 8px 8px -4px',
                 height: '100px',
                 width: '100px',

public/sitemap.xml

@@ -25,6 +25,7 @@
     <url><loc>https://csslayout.io/property-list</loc></url>
     <url><loc>https://csslayout.io/questions-and-answers</loc></url>
     <url><loc>https://csslayout.io/radio-switch</loc></url>
+    <url><loc>https://csslayout.io/rating</loc></url>
     <url><loc>https://csslayout.io/same-height-columns</loc></url>
     <url><loc>https://csslayout.io/search-box</loc></url>
     <url><loc>https://csslayout.io/separator</loc></url>