feat: Accordionを追加

packages/tailwindcss/accordion.js

@@ -0,0 +1,50 @@
+const plugin = require("tailwindcss/plugin");
+const theme = require("./theme");
+
+module.exports = plugin.withOptions(
+  () => {
+    return ({ addComponents, theme }) => {
+      addComponents([
+        {
+          ".accordion": {
+            ".accordion-header": {
+              width: "100%",
+              padding: `${theme("spacing.3")} ${theme("spacing.4")}`,
+              display: "flex",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              border: `1px solid ${theme("colors.gray.300")}`,
+              cursor: "pointer",
+              outline: "none",
+              "&:hover": {
+                backgroundColor: `${theme("colors.gray.50")}`,
+              },
+              "&:active": {
+                backgroundColor: `${theme("colors.gray.100")}`,
+              },
+              ".ballet ": {
+                transition: "0.5s",
+                marginRight: `${theme("spacing.4")}`,
+                fill: `${theme("colors.gray.900")}`,
+                width: `${theme("width.4")}`,
+                height: `${theme("height.4")}`,
+              },
+            },
+            ".accordion-body": {
+              transition: "0.2s",
+              overflow: "hidden",
+            },
+            "&.accordion-collapsed": {
+              ".accordion-header": {
+                ".ballet": {
+                  transform: "rotate(180deg)",
+                },
+              },
+            },
+          },
+        },
+      ]);
+    };
+  },
+  () => ({ theme })
+);

packages/tailwindcss/index.js

@@ -6,6 +6,7 @@ const input = require("./input");
 const select = require("./select");
 const toggleSwitch = require("./toggleSwitch");
 const Avatar = require("./Avatar");
+const Accordion = require("./Accordion");
 
 module.exports = [
   button,
@@ -16,4 +17,5 @@ module.exports = [
   select,
   toggleSwitch,
   Avatar,
+  Accordion,
 ];

packages/tailwindcss/stories/Accordion.stories.js

@@ -0,0 +1,37 @@
+export default {
+  title: "Accordion/Default",
+};
+
+const Template = () => {
+  return `
+    <div class="accordion">
+        <button class="accordion-header">
+            <div class="ballet">
+                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path></svg>
+            </div>
+            <div class="accordion-header-label">人間失格</div>
+        </button>
+        <div class="accordion-body">
+            <div class="p-4">
+            <p>恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。</p>
+            <p>しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。</p>
+            </div>
+        </div>
+    </div>
+    `;
+};
+export const Default = Template.bind({});
+
+const CollapsedTemplate = () => {
+  return `
+      <div class="accordion accordion-collapsed">
+          <button class="accordion-header">
+            <div class="ballet">
+                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path></svg>
+            </div>
+            <div class="accordion-header-label">人間失格</div>
+          </button>
+      </div>
+      `;
+};
+export const Collapsed = CollapsedTemplate.bind({});