Merge pull request #95 from phuoc-ng/chip

Add chip pattern

client/constants/Pattern.ts

@@ -7,6 +7,7 @@ enum Pattern {
     ButtonWithIcon = 'Button with icon',
     Card = 'Card',
     Centering = 'Centering',
+    Chip = 'Chip',
     CircularNavigation = 'Circular navigation',
     CloseButton = 'Close button',
     CookieBanner = 'Cookie banner',

client/pages/ExplorePage.tsx

@@ -139,6 +139,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Card} />
                         <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.Chip} />
                         <CoverCard pattern={Pattern.CloseButton} />
                         <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.CornerRibbon} />

client/patterns/chip/Cover.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                        borderRadius: '9999px',
+                        display: 'inline-flex',
+                        justifyContent: 'center',
+                        padding: '4px 8px',
+                        width: '80%',
+                    }}
+                >
+                    <div style={{ flex: 1, marginRight: '4px' }}>
+                        <Rectangle />
+                    </div>
+                    <button
+                        style={{
+                            backgroundColor: 'transparent',
+                            borderColor: 'transparent',
+                            cursor: 'pointer',
+                            height: '16px',
+                            position: 'relative',
+                            width: '16px',
+                        }}
+                    >
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '1px',
+                                left: 0,
+                                position: 'absolute',
+                                top: '50%',
+                                transform: 'translate(0%, -50%) rotate(45deg)',
+                                width: '100%',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                height: '100%',
+                                left: '50%',
+                                position: 'absolute',
+                                top: 0,
+                                transform: 'translate(-50%, 0%) rotate(45deg)',
+                                width: '1px',
+                            }}
+                        />
+                    </button>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/chip/Details.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import InputChip from './InputChip';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Chip">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <InputChip>CSS</InputChip>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Center the content */
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+
+    /* Background color */
+    background-color: rgba(0, 0, 0, .1);
+
+    /* Rounded border */
+    border-radius: 9999px;
+
+    /* Spacing */
+    padding: 4px 8px;
+">
+    <!-- Content -->
+    <div style="margin-right: 4px;">
+        ...
+    </div>
+
+    <!-- The close button -->
+    <!-- See https://csslayout.io/patterns/close-button -->
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.CloseButton]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/chip/InputChip.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const InputChip: React.FC<{}> = ({ children }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                borderRadius: '9999px',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                padding: '4px 8px',
+            }}
+        >
+            <div style={{ flex: 1, marginRight: '4px' }}>
+                {children}
+            </div>
+            <button
+                style={{
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    cursor: 'pointer',
+                    height: '16px',
+                    position: 'relative',
+                    width: '16px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '1px',
+                        left: 0,
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translate(0%, -50%) rotate(45deg)',
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '100%',
+                        left: '50%',
+                        position: 'absolute',
+                        top: 0,
+                        transform: 'translate(-50%, 0%) rotate(45deg)',
+                        width: '1px',
+                    }}
+                />
+            </button>
+        </div>
+    );
+};
+
+export default InputChip;

client/patterns/close-button/Details.tsx

@@ -106,7 +106,7 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.Modal, Pattern.Notification]} />
+            <RelatedPatterns patterns={[Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
         </DetailsLayout>
     );
 };

public/sitemap.xml

@@ -8,6 +8,7 @@
     <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/card</loc></url>
     <url><loc>https://csslayout.io/patterns/centering</loc></url>
+    <url><loc>https://csslayout.io/patterns/chip</loc></url>
     <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/close-button</loc></url>
     <url><loc>https://csslayout.io/patterns/cookie-banner</loc></url>