Add: ボタンコンポーネントの生成

#258
manabuyasuda · Sep 27, 2019 · dacab44 · dacab44
1 parent e48afc1
commit dacab44
Show file tree

Hide file tree

Showing 15 changed files with 398 additions and 333 deletions.
diff --git a/htdocs/styleguide/components/detail/button--auto.html b/htdocs/styleguide/components/detail/button--auto.html
@@ -152,18 +152,13 @@ <h1 class="Pen-title">
     <code class="Code Code--lang-html">
 
         <pre><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>横幅をなりゆきにします。<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Auto a<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto -disabled"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>Auto a<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span>&gt;</span>Auto button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">disabled</span>&gt;</span>Auto button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Auto input"</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Auto nput"</span> <span class="hljs-attr">disabled</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button_More"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"img"</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"/assets/svg/sprite.svg#right-arrow1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-    Auto Arrow
-<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></pre>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Auto"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>disabled<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -disabled -auto"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">"disabled"</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Auto"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">"disabled"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>icon<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button -auto"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button_More"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"img"</span>&gt;</span>
+            <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"/assets/svg/sprite.svg#right-arrow1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+        <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Auto<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
 
     </code>
 </div>
@@ -228,7 +223,7 @@ <h1 id="sw-button">sw-Button</h1>
         </li>
         <li class="Meta-item">
             <strong class="Meta-key">Filesystem Path:</strong>
-            <span class="Meta-value">src/styleguide/components/sw/Button/Button.hbs</span>
+            <span class="Meta-value">src/styleguide/components/sw/Button/Button.pug</span>
         </li>
 
 
@@ -237,20 +232,28 @@ <h1 id="sw-button">sw-Button</h1>
 
 
     <div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-2e919de9fc1fa677ea5620b74ee850a4-panel-view">
-    <code class="Code Code--lang-handlebars">
-        <pre><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span></span><span class="hljs-template-variable">{{desctiption}}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button </span></span></span><span class="hljs-template-variable">{{variant}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span></span><span class="hljs-template-variable">{{text}}</span><span class="xml"> a<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button </span></span></span><span class="hljs-template-variable">{{variant}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string"> -disabled"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span></span><span class="hljs-template-variable">{{text}}</span><span class="xml"> a<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button </span></span></span><span class="hljs-template-variable">{{variant}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span></span><span class="hljs-template-variable">{{text}}</span><span class="xml"> button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button </span></span></span><span class="hljs-template-variable">{{variant}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">disabled</span>&gt;</span></span><span class="hljs-template-variable">{{text}}</span><span class="xml"> button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button </span></span></span><span class="hljs-template-variable">{{variant}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{text}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string"> input"</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button </span></span></span><span class="hljs-template-variable">{{variant}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{text}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string"> nput"</span> <span class="hljs-attr">disabled</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button </span></span></span><span class="hljs-template-variable">{{variant}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sw-Button_More"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"img"</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"/assets/svg/sprite.svg#right-arrow1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-  </span><span class="hljs-template-variable">{{text}}</span><span class="xml"> Arrow
-<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span></pre>
+    <code class="Code Code--lang-text">
+        <pre>p #{description}
+
+div
+  a.sw-<span class="hljs-constructor">Button(<span class="hljs-params">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-params">class</span>=<span class="hljs-params">variant</span>)</span> #{text}
+  button.sw-<span class="hljs-constructor">Button(<span class="hljs-params">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-params">class</span>=<span class="hljs-params">variant</span>)</span> #{text}
+  input.sw-<span class="hljs-constructor">Button(<span class="hljs-params">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-params">class</span>=<span class="hljs-params">variant</span> <span class="hljs-params">value</span>=<span class="hljs-params">text</span>)</span>
+
+h2 disabled
+
+div
+  a.sw-Button.-disabled(href=<span class="hljs-string">"#"</span> <span class="hljs-keyword">class</span>=variant tabindex=<span class="hljs-string">"-1"</span>) #{text}
+  button.sw-<span class="hljs-constructor">Button(<span class="hljs-params">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-params">class</span>=<span class="hljs-params">variant</span> <span class="hljs-params">disabled</span>)</span> #{text}
+  input.sw-<span class="hljs-constructor">Button(<span class="hljs-params">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-params">class</span>=<span class="hljs-params">variant</span> <span class="hljs-params">value</span>=<span class="hljs-params">text</span> <span class="hljs-params">disabled</span>)</span>
+
+h2 icon
+
+div
+  a.sw-<span class="hljs-constructor">Button(<span class="hljs-params">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-params">class</span>=<span class="hljs-params">variant</span>)</span>
+    svg.sw-<span class="hljs-constructor">Button_More(<span class="hljs-params">role</span>=<span class="hljs-string">"img"</span>)</span>
+      use(xlink:href=<span class="hljs-string">"/assets/svg/sprite.svg#right-arrow1"</span>)
+    span #{text}</pre>
     </code>
 </div>
 
@@ -262,7 +265,7 @@ <h1 id="sw-button">sw-Button</h1>
             <pre>{
   <span class="hljs-attr">"variant"</span>: <span class="hljs-string">"-auto"</span>,
   <span class="hljs-attr">"text"</span>: <span class="hljs-string">"Auto"</span>,
-  <span class="hljs-attr">"desctiption"</span>: <span class="hljs-string">"横幅をなりゆきにします。"</span>
+  <span class="hljs-attr">"description"</span>: <span class="hljs-string">"横幅をなりゆきにします。"</span>
 }</pre>