Merge pull request #166 from phuoc-ng/css-panel

Add CSS panel for feedback patterns

client/patterns/modal/Details.tsx

@@ -28,18 +28,9 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Border */
-    border: 1px solid rgba(0, 0, 0.3);
-    border-radius: 4px;
-">
     <!-- Header -->
-    <div style="
+    <div class="container__header">
-        display: flex;
-        justify-content: space-between;
-        /* Border */
-        border-bottom: 1px solid rgba(0, 0, 0.3);
-    ">
         <!-- Title -->
         ...
         <!-- Close icon sticks to the right -->
@@ -50,18 +41,33 @@ html={`
     ...
 
     <!-- Footer -->
-    <div style="
+    <div class="container__footer">
+        ...
+    </div>
+</div>
+`}
+css={`
+.container {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0.3);
+    border-radius: 4px;
+}
+
+.container__header {
+    display: flex;
+    justify-content: space-between;
+    /* Border */
+    border-bottom: 1px solid rgba(0, 0, 0.3);
+}
+
+.container__footer {
     display: flex;
     /* Push the buttons to the right */
     justify-content: flex-end;
     /* Border */
     border-top: 1px solid rgba(0, 0, 0.3);
-    ">
+}
-        ...
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/notification/Details.tsx

@@ -27,10 +27,7 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-    justify-content: space-between;
-">
     <!-- Content -->
     ...
 
@@ -38,7 +35,12 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+    justify-content: space-between;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/popover-arrow/Details.tsx

@@ -21,234 +21,197 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The content -->
+    ...
+
+    <!-- Top left arrow -->
+    <div class="container__arrow container__arrow--tl"></div>
+
+    <!-- Top center arrow -->
+    <div class="container__arrow container__arrow--tc"></div>
+
+    <!-- Top right arrow -->
+    <div class="container__arrow container__arrow--tr"></div>
+
+    <!-- Right top arrow -->
+    <div class="container__arrow container__arrow--rt"></div>
+
+    <!-- Right center arrow -->
+    <div class="container__arrow container__arrow--rc"></div>
+
+    <!-- Right bottom arrow -->
+    <div class="container__arrow container__arrow--rb"></div>
+
+    <!-- Bottom left arrow -->
+    <div class="container__arrow container__arrow--bl"></div>
+
+    <!-- Bottom center arrow -->
+    <div class="container__arrow container__arrow--bc"></div>
+
+    <!-- Bottom right arrow -->
+    <div class="container__arrow container__arrow--br"></div>
+
+    <!-- Left top arrow -->
+    <div class="container__arrow container__arrow--lt"></div>
+
+    <!-- Left center arrow -->
+    <div class="container__arrow container__arrow--lc"></div>
+
+    <!-- Left bottom arrow -->
+    <div class="container__arrow container__arrow--lb"></div>
+</div>
+`}
+css={`
+.container {
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
 
     /* Used to position the arrow */
     position: relative;
-">
+}
-    <!-- The content -->
-    ...
 
-    <!-- Top left arrow -->
+.container__arrow {
-    <div style="
+    /* Size */
+    height: 16px;
+    width: 16px;
+
+    background-color: #FFF;
+    position: absolute;
+}
+
+.container__arrow--tl {
     /* Position at the top left corner */
     left: 32px;
-        position: absolute;
     top: 0px;
 
     /* Border */
-        background-color: #FFF;
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--tc {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Top center arrow -->
-    <div style="
     /* Position at the top center */
     left: 50%;
-        position: absolute;
     top: 0px;
 
     /* Border */
-        background-color: #FFF;
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(-50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--tr {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Top right arrow -->
-    <div style="
     /* Position at the top right corner */
-        position: absolute;
     right: 32px;
     top: 0px;
 
     /* Border */
-        background-color: #FFF;
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(-50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--rt {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Right top arrow -->
-    <div style="
     /* Position at the right top corner */
-        position: absolute;
     right: 0;
     top: 32px;
 
     /* Border */
-        background-color: #FFF;
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(50%, 50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--rc {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Right center arrow -->
-    <div style="
     /* Position at the right center */
-        position: absolute;
     right: 0;
     top: 50%;
 
     /* Border */
-        background-color: #FFF;
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--rb {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Right bottom arrow -->
-    <div style="
     /* Position at the right bottom corner */
     bottom: 32px;
-        position: absolute;
     right: 0;
 
     /* Border */
-        background-color: #FFF;
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     border-top: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--bl {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Bottom left arrow -->
-    <div style="
     /* Position at the bottom left corner */
     bottom: -16px;
-        position: absolute;
     left: 32px;
 
     /* Border */
-        background-color: #FFF;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--bc {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Bottom center arrow -->
-    <div style="
     /* Position at the bottom center */
     bottom: -16px;
-        position: absolute;
     left: 50%;
 
     /* Border */
-        background-color: #FFF;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(-50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--br {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Bottom right arrow -->
-    <div style="
     /* Position at the bottom right corner */
     bottom: -16px;
-        position: absolute;
     right: 32px;
 
     /* Border */
-        background-color: #FFF;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-right: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(-50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--lt {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Left top arrow -->
-    <div style="
     /* Position at the left top corner */
     left: 0;
-        position: absolute;
     top: 32px;
 
     /* Border */
-        background-color: #FFF;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(-50%, 50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--lc {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Left center arrow -->
-    <div style="
     /* Position at the left center */
     left: 0;
-        position: absolute;
     top: 50%;
 
     /* Border */
-        background-color: #FFF;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(-50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--lb {
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Left bottom arrow -->
-    <div style="
     /* Position at the left bottom corner */
     bottom: 32px;
     left: 0;
-        position: absolute;
 
     /* Border */
-        background-color: #FFF;
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     transform: translate(-50%, -50%) rotate(45deg);
-
+}
-        /* Size */
-        height: 16px;
-        width: 16px;
-    " />
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/presence-indicator/Details.tsx

@@ -22,14 +22,20 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    position: relative;
-">
     <!-- Other element such as avatar -->
     ...
 
     <!-- The presence indicator -->
-    <div style="
+    <div class="container__indicator"></div>
+</div>
+`}
+css={`
+.container {
+    position: relative;
+}
+
+.container__indicator {
     /* Shown at the bottom right corner */
     bottom: 0,
     position: absolute;
@@ -43,10 +49,8 @@ html={`
 
     /* Background color */
     background-color: #FF4136;
-    " />
+}
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/progress-bar/Details.tsx

@@ -26,14 +26,26 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <div class="container__progress" style="
+        /* Width based on the number of percentages */
+        width: 40%;
+    ">
+        <!-- The number of percentages -->
+        40%
+    </div>
+</div>
+`}
+css={`
+.container {
     /* Colors */
     background-color: rgba(0, 0, 0, .1);
 
     /* Rounded border */
     border-radius: 9999px;
-">
+}
-    <div style="
+
+.container__progress {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -45,16 +57,8 @@ html={`
 
     /* Rounded border */
     border-radius: 9999px;
-
+}
-        /* Width based on the number of percentages */
-        width: 40%;
-    ">
-        <!-- The number of percentages -->
-        40%
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/radial-progress-bar/Details.tsx

@@ -81,11 +81,28 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    position: relative;
-">
     <!-- Show number of percentages -->
-    <div style="
+    <div class="container__percentages">
+        ...
+    </div>
+
+    <!-- The curve -->
+    <div class="container__curve">
+        <!-- The first half -->
+        <div class="container__half container__half--first"></div>
+
+        <!-- The second half -->
+        <div class="container__half container__half--second"></div>
+    </div>
+</div>
+`}
+css={`
+.container {
+    position: relative;
+}
+
+.container__percentages {
     /* Center the content */
     align-items: center;
     display: flex;
@@ -98,12 +115,9 @@ html={`
     /* Size */
     height: 128px;
     width: 128px;
-    ">
+}
-        ...
-    </div>
 
-    <!-- The curve -->
+.container__curve {
-    <div style="
     /* Position */
     left: 0;
     position: absolute;
@@ -118,9 +132,9 @@ html={`
 
     /* If percentages is greater than or equals to 50 */
     clip: rect(auto, auto, auto, auto);
-    ">
+}
-        <!-- The first half -->
+
-        <div style="
+.container__half {
     /* Take full size */
     height: 100%;
     position: absolute;
@@ -132,26 +146,15 @@ html={`
     */
     border: 12px solid rgb(0, 68, 158);
     border-radius: 9999px;
+}
 
+.container__half--first {    
     /* Position */
     clip: rect(0px, 64px, 128px, 0px);
     transform: rotate(162deg); /* Number of percentages * 360 / 100 */
-        " />
+}
-
-        <!-- The second half -->
-        <div style="
-            /* Take full size */
-            height: 100%;
-            position: absolute;
-            width: 100%;
-
-            /*
-            Background color of curve.
-            The border width should be the same as the area showing the percentages
-            */
-            border: 12px solid rgb(0, 68, 158);
-            border-radius: 9999px;
 
+.container__half--second {
     /* Position */
     clip: rect(0px, 64px, 128px, 0px);
 
@@ -160,11 +163,8 @@ html={`
 
     /* If percentages is greater than or equals to 50 */
     transform: rotate(180deg);
-        " />
+}
-    </div>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/resizable-element/Details.tsx

@@ -24,170 +24,134 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The content -->
+    ...
+
+    <!-- The top left square -->
+    <div class="container__resizer container__resizer--tl"></div>
+
+    <!-- The top square -->
+    <div class="container__resizer container__resizer--tc"></div>
+
+    <!-- The top right square -->
+    <div class="container__resizer container__resizer--tr"></div>
+
+    <!-- The right square -->
+    <div class="container__resizer container__resizer--rc"></div>
+
+    <!-- The right bottom square -->
+    <div class="container__resizer container__resizer--rb"></div>
+
+    <!-- The bottom square -->
+    <div class="container__resizer container__resizer--bc"></div>
+
+    <!-- The bottom left square -->
+    <div class="container__resizer container__resizer--bl"></div>
+
+    <!-- The left square -->
+    <div class="container__resizer container__resizer--lc"></div>
+</div>
+`}
+css={`
+.container {
     /* Border */
     border: 1px dashed rgba(0, 0, 0, 0.3);
 
     /* Used to position the squares */
     position: relative;
-">
+}
-    <!-- The content -->
-    ...
 
-    <!-- The top left square -->
+.container__resizer {
-    <div style="
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
+    position: absolute;
 
+    /* Size */
+    height: 12px;
+    width: 12px;
+}
+
+.container__resizer--tl {
     /* Resize cursor */
     cursor: nwse-resize;
 
     /* Positioned at the top left corner */
     left: 0px;
-        position: absolute;
     top: 0px;
     transform: translate(-50%, -50%);
+}
 
-        /* Size */
+.container__resizer--tc {
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The top square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
     /* Resize cursor */
     cursor: ns-resize;
 
     /* Positioned at the middle of top side */
     left: 50%;
-        position: absolute;
     top: 0px;
     transform: translate(-50%, -50%);
+}
 
-        /* Size */
+.container__resizer--tr {
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The top right square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
     /* Resize cursor */
     cursor: nesw-resize;
 
     /* Positioned at the top right corner */
-        position: absolute;
     right: 0px;
     top: 0px;
     transform: translate(50%, -50%);
+}
 
-        /* Size */
+.container__resizer--rc {
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The right square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
     /* Resize cursor */
     cursor: ew-resize;
 
     /* Positioned at the middle of right side */
-        position: absolute;
     right: 0px;
     top: 50%;
     transform: translate(50%, -50%);
+}
 
-        /* Size */
+.container__resizer--rb {
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The right bottom square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
     /* Resize cursor */
     cursor: nwse-resize;
 
     /* Positioned at the right bottom corner */
     bottom: 0px;
-        position: absolute;
     right: 0px;
     transform: translate(50%, 50%);
+}
 
-        /* Size */
+.container__resizer--bc {
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The bottom square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
     /* Resize cursor */
     cursor: ns-resize;
 
     /* Positioned at the middle of bottom side */
     bottom: 0px;
-        position: absolute;
     right: 50%;
     transform: translate(50%, 50%);
+}
 
-        /* Size */
+.container__resizer--bl {
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The bottom left square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
     /* Resize cursor */
     cursor: nesw-resize;
 
     /* Positioned at the bottom left corner */
     bottom: 0px;
     left: 0px;
-        position: absolute;
     transform: translate(-50%, 50%);
+}
 
-        /* Size */
+.container__resizer--lc {
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The left square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
     /* Resize cursor */
     cursor: ew-resize;
 
     /* Positioned at the middle of left side */
     left: 0px;
-        position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-
+}
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "/>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/tooltip/Details.tsx

@@ -28,19 +28,32 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<style>
+<div class="container">
-.p-tooltip {
+    <!-- The tooltip content -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- The tooltip arrow -->
+    <div class="container__arrow" />
+
+    <!-- The trigger element -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Used to position the arrow */
     position: relative;
 }
 
 /* Show the arrow and content when hovering the trigger element */
-.p-tooltip:hover .p-tooltip-arrow,
+.container:hover .container__arrow,
-.p-tooltip:hover .p-tooltip-content {
+.container:hover .container__content {
     opacity: 1;
 }
 
-.p-tooltip-arrow {
+.container__arrow {
     /* Invisible by default */
     opacity: 0;
 
@@ -62,7 +75,7 @@ html={`
     z-index: 10;
 }
 
-.p-tooltip-content {
+.container__content {
     /* Invisible by default */
     opacity: 0;
 
@@ -79,22 +92,7 @@ html={`
     /* Displayed on top of other element */
     z-index: 10;
 }
-</style>
-
-<div class="p-tooltip">
-    <!-- The tooltip content -->
-    <div class="p-tooltip-content">
-        ...
-    </div>
-
-    <!-- The tooltip arrow -->
-    <div class="p-tooltip-arrow" />
-
-    <!-- The trigger element -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/validation-icon/Details.tsx

@@ -20,12 +20,24 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The input -->
+    <input class="container__input" />
+
+    <!-- The icon container -->
+    <span class="container__icon">
+        <!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
+        ...
+    </span>
+</div>
+`}
+css={`
+.container {
     /* Used to position the validation icon */
     position: relative;
-">
+}
-    <!-- The input -->
+
-    <input style="
+.container__input {
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
     border-radius: 4px;
@@ -35,10 +47,9 @@ html={`
 
     /* Don't overlap the icon */
     padding-right: 24px;
-    " />
+}
 
-    <!-- The icon container -->
+.container__icon {
-    <i style="
     /* Positioned at the right side */
     position: absolute;
     right: 8px;
@@ -46,13 +57,8 @@ html={`
     transform: translate(0, -50%);
 
     z-index: 10;
-    ">
+}
-        <!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
-        ...
-    </i>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{