diff --git a/.eleventy.js b/.eleventy.js index fd7bde8..6041599 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -50,7 +50,7 @@ module.exports = function(eleventyConfig) { eleventyConfig.addShortcode('rectangle', function(dir, size, width) { const direction = dir || 'hor'; const s = size || 'sm'; - const w = width || randomInteger(1, 4) * 20; + const w = width || randomInteger(2, 4) * 20; return `
`; }); eleventyConfig.addShortcode('square', function(size) { diff --git a/contents/_includes/patterns/questions-and-answers.njk b/contents/_includes/patterns/questions-and-answers.njk new file mode 100644 index 0000000..bd4cd74 --- /dev/null +++ b/contents/_includes/patterns/questions-and-answers.njk @@ -0,0 +1,35 @@ +
+
+
+
+ {% rectangle %} +
+
+ {% triangle "r" %} +
+
+
+
+
+
+ {% rectangle %} +
+
+ {% triangle "b" %} +
+
+
+ {% lines "hor", 3 %} +
+
+
+
+
+ {% rectangle %} +
+
+ {% triangle "r" %} +
+
+
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index b7f23ac..768fbcb 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -218,9 +218,9 @@ eleventyExcludeFromCollections: true
- -
{% include "patterns/triangle-buttons.njk" %}
-
Triangle buttons
+ +
{% include "patterns/questions-and-answers.njk" %}
+
Questions and answers
diff --git a/contents/questions-and-answers.md b/contents/questions-and-answers.md new file mode 100644 index 0000000..e6ab310 --- /dev/null +++ b/contents/questions-and-answers.md @@ -0,0 +1,71 @@ +--- +layout: layouts/post.njk +title: Questions and answers +description: Create a questions and answers section with CSS flexbox +keywords: css accordion, css faq, css flexbox +--- + +## HTML + +```html + +
+ +
+ +
+ ... +
+ + +
+
+
+ + +
+ ... +
+
+ + +
+ ... +
+``` + +## CSS + +```css +.questions-and-answers__item:not(:last-child) { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); +} +.questions-and-answers__header { + align-items: center; + display: flex; + justify-content: center; + cursor: pointer; + padding: 0.5rem; +} +.questions-and-answers__toggle { + margin-right: 0.25rem; +} +.questions-and-answers__title { + /* Take the available width */ + flex: 1; +} +.questions-and-answers__content { + padding: 0 0.5rem; +} + +.questions-and-answers__item--collapsed .questions-and-answers__content { + display: none; +} +.questions-and-answers__item--expanded .questions-and-answers__content { + display: block; +} +``` + +{% demo %} +{% include "patterns/questions-and-answers.njk" %} +{% enddemo %} diff --git a/pages/questions-and-answers/index.tsx b/pages/questions-and-answers/index.tsx deleted file mode 100644 index b7c85b0..0000000 --- a/pages/questions-and-answers/index.tsx +++ /dev/null @@ -1,161 +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 Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; -import Triangle from '../../placeholders/Triangle'; - -interface ItemProps { - index: number; - title: React.ReactNode; -} - -const Details: React.FC<{}> = () => { - const [activeItem, setActiveItem] = React.useState(-1); - - const Item: React.FC = ({ index, title, children }) => { - const isOpened = index === activeItem; - const click = () => setActiveItem(isOpened ? -1 : index); - return ( - <> -
- {title} - -
-
- {children} -
- - ); - }; - - return ( - - - - - - - - -
- -
- - ... - - - ... -
- - -
-`} - css={` - .container { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - } - - .container__heading { - display: flex; - align-items: center; - justify-content: space-between; - } - `} - > -
-
-
- -
-
- - -
- } - > - - -
-
- - -
- } - > - - -
-
- - -
- } - > - - -
- - - - - - - ); -}; - -export default Details; diff --git a/patterns/questions-and-answers/Cover.tsx b/patterns/questions-and-answers/Cover.tsx deleted file mode 100644 index 0b7b099..0000000 --- a/patterns/questions-and-answers/Cover.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; -import Rectangle from '../../placeholders/Rectangle'; -import Triangle from '../../placeholders/Triangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
- -
- -
-
-
-
- -
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 6da504a..8a1c039 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -45,6 +45,7 @@ @import './patterns/price-tag'; @import './patterns/pricing-table'; @import './patterns/property-list'; +@import './patterns/questions-and-answers'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_questions-and-answers.scss b/styles/patterns/_questions-and-answers.scss new file mode 100644 index 0000000..5fd49f2 --- /dev/null +++ b/styles/patterns/_questions-and-answers.scss @@ -0,0 +1,29 @@ +.questions-and-answers { + width: 100%; +} +.questions-and-answers__item:not(:last-child) { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); +} +.questions-and-answers__header { + align-items: center; + display: flex; + justify-content: center; + cursor: pointer; + padding: 0.5rem; +} +.questions-and-answers__toggle { + margin-right: 0.25rem; +} +.questions-and-answers__title { + flex: 1; +} +.questions-and-answers__content { + padding: 0 0.5rem; +} + +.questions-and-answers__item--collapsed .questions-and-answers__content { + display: none; +} +.questions-and-answers__item--expanded .questions-and-answers__content { + display: block; +} \ No newline at end of file