From 3b15c786cff20649d72b23dbeced142e3ef2e530 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Wed, 21 Sep 2022 08:39:59 +0700 Subject: [PATCH] feat: Button with icon --- .../_includes/patterns/button-with-icon.njk | 4 + contents/button-with-icon.md | 40 ++++++++++ contents/index.njk | 7 ++ pages/button-with-icon/index.tsx | 73 ------------------- patterns/button-with-icon/Cover.tsx | 40 ---------- styles/index.scss | 1 + styles/patterns/_button-with-icon.scss | 18 +++++ 7 files changed, 70 insertions(+), 113 deletions(-) create mode 100644 contents/_includes/patterns/button-with-icon.njk create mode 100644 contents/button-with-icon.md delete mode 100644 pages/button-with-icon/index.tsx delete mode 100644 patterns/button-with-icon/Cover.tsx create mode 100644 styles/patterns/_button-with-icon.scss diff --git a/contents/_includes/patterns/button-with-icon.njk b/contents/_includes/patterns/button-with-icon.njk new file mode 100644 index 0000000..37a07d3 --- /dev/null +++ b/contents/_includes/patterns/button-with-icon.njk @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/contents/button-with-icon.md b/contents/button-with-icon.md new file mode 100644 index 0000000..9da5edc --- /dev/null +++ b/contents/button-with-icon.md @@ -0,0 +1,40 @@ +--- +layout: layouts/post.njk +title: Button with icon +description: Create an icon button with CSS flexbox +keywords: css flexbox, css icon button +--- + +## HTML + +```html + +``` + +## CSS + +```css +.button-with-icon { + /* Center the content */ + align-items: center; + display: flex; + flex-direction: row; + justify-content: center; +} + +.button-with-icon__label { + margin-left: 0.5rem; +} +``` + +{% demo %} +{% include "patterns/button-with-icon.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 946fd9e..1585fd2 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -84,5 +84,12 @@ eleventyExcludeFromCollections: true +
+

Input

+
+ {% pattern "Button with icon" %}{% include "patterns/button-with-icon.njk" %}{% endpattern %} +
+
+ {% include "follow.njk" %} \ No newline at end of file diff --git a/pages/button-with-icon/index.tsx b/pages/button-with-icon/index.tsx deleted file mode 100644 index 3f82a7f..0000000 --- a/pages/button-with-icon/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - - ... - - - ... - -`} - css={` - .button { - /* Center the content */ - align-items: center; - display: flex; - flex-direction: row; - justify-content: center; - } - `} - > -
-
- -
-
- - - ); -}; - -export default Details; diff --git a/patterns/button-with-icon/Cover.tsx b/patterns/button-with-icon/Cover.tsx deleted file mode 100644 index f584881..0000000 --- a/patterns/button-with-icon/Cover.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
- -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index cd504b7..4225762 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -16,6 +16,7 @@ @import './patterns/avatar'; @import './patterns/avatar-list'; @import './patterns/badge'; +@import './patterns/button-with-icon'; @import './patterns/card'; @import './patterns/centering'; @import './patterns/close-button'; diff --git a/styles/patterns/_button-with-icon.scss b/styles/patterns/_button-with-icon.scss new file mode 100644 index 0000000..199919b --- /dev/null +++ b/styles/patterns/_button-with-icon.scss @@ -0,0 +1,18 @@ +.button-with-icon { + /* Center the content */ + align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + + /* Demo */ + background: #fff; + border: 1px solid #d1d5db; + border-radius: 0.25rem; + width: 8rem; +} + +.button-with-icon__label { + flex: 1; + margin-left: 0.5rem; +} \ No newline at end of file