diff --git a/contents/_includes/patterns/presence-indicator.njk b/contents/_includes/patterns/presence-indicator.njk new file mode 100644 index 0000000..bedd38b --- /dev/null +++ b/contents/_includes/patterns/presence-indicator.njk @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 03fe99c..10250ed 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -73,6 +73,7 @@ eleventyExcludeFromCollections: true

Feedback

{% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %} + {% pattern "Presence indicator" %}{% include "patterns/presence-indicator.njk" %}{% endpattern %} {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %} {% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %} {% pattern "Resizable element" %}{% include "patterns/resizable-element.njk" %}{% endpattern %} diff --git a/contents/presence-indicator.md b/contents/presence-indicator.md new file mode 100644 index 0000000..ae5d3c3 --- /dev/null +++ b/contents/presence-indicator.md @@ -0,0 +1,46 @@ +--- +layout: layouts/post.njk +title: Presence indicator +description: Create a presence indicator with CSS +keywords: css indicator +--- + +## HTML + +```html +
+ + ... + + +
+
+``` + +## CSS + +```css +.presence-indicator { + position: relative; +} + +.presence-indicator__indicator { + /* Shown at the bottom right corner */ + bottom: 0; + position: absolute; + right: 0; + transform: translate(50%, 50%); + + /* Rounded border */ + border-radius: 9999px; + height: 1rem; + width: 1rem; + + /* Background color */ + background-color: #22c55e; +} +``` + +{% demo %} +{% include "patterns/presence-indicator.njk" %} +{% enddemo %} diff --git a/pages/presence-indicator/index.tsx b/pages/presence-indicator/index.tsx deleted file mode 100644 index 0454afa..0000000 --- a/pages/presence-indicator/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - - ... - - -
-
-`} - css={` -.container { - position: relative; -} - -.container__indicator { - /* Shown at the bottom right corner */ - bottom: 0, - position: absolute; - right: 0; - transform: translate(50%, 50%); - - /* Rounded border */ - border-radius: 9999px; - height: 16px; - width: 16px; - - /* Background color */ - background-color: #FF4136; -} -`} - > -
-
- -
-
-
- - - - - - - ); -}; - -export default Details; diff --git a/patterns/presence-indicator/Cover.tsx b/patterns/presence-indicator/Cover.tsx deleted file mode 100644 index 56f1cc4..0000000 --- a/patterns/presence-indicator/Cover.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index e11e627..76b8604 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -44,6 +44,7 @@ @import './patterns/media-object'; @import './patterns/overlay-play-button'; @import './patterns/popover-arrow'; +@import './patterns/presence-indicator'; @import './patterns/price-tag'; @import './patterns/pricing-table'; @import './patterns/progress-bar'; diff --git a/styles/patterns/_presence-indicator.scss b/styles/patterns/_presence-indicator.scss new file mode 100644 index 0000000..cd296b4 --- /dev/null +++ b/styles/patterns/_presence-indicator.scss @@ -0,0 +1,25 @@ +.presence-indicator { + position: relative; + + /* Demo */ + background-color: #d1d5db; + border-radius: 9999px; + height: 6rem; + width: 6rem; +} + +.presence-indicator__indicator { + /* Shown at the bottom right corner */ + bottom: 0; + position: absolute; + right: 0; + transform: translate(50%, 50%); + + /* Rounded border */ + border-radius: 9999px; + height: 1rem; + width: 1rem; + + /* Background color */ + background-color: #22c55e; +} \ No newline at end of file