Add rating

client/App.tsx

@@ -37,9 +37,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/Home.tsx

@@ -91,6 +91,7 @@ const Home = () => {
                         <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} />

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>