Add burgers with two lines

docs/src/components/card.tsx

@@ -3,12 +3,14 @@ import React from 'react'
 export default ({
   children,
   title,
+  last,
 }: {
   children: [React.ReactNode, React.ReactNode, React.ReactNode]
   title: string
+  last?: boolean
 }) => (
   <div
-    className="
+    className={`
       bg-gray-800
       rounded-lg
       shadow-xl
@@ -19,11 +21,10 @@ export default ({
       sm:px-8
       lg:px-12
       flex
-      mb-4
-      md:mb-6
+      ${last ? '' : 'mb-4 md:mb-6'}
       flex-col
       items-center
-  "
+    `}
   >
     <h2 className="mb-2 leading-snug text-center font-semibold flex items-center">
       <span className="text-l mr-2 text-gray-400">Hamburger type:</span>

docs/src/components/cards.tsx

@@ -1,9 +1,15 @@
+import { Cross } from '../../../src'
 import { Fade } from '../../../src'
+import { Pivot } from '../../../src'
+import { Rotate } from '../../../src'
+import { Slant } from '../../../src'
 import { Sling } from '../../../src'
 import { Spin } from '../../../src'
+import { Spiral } from '../../../src'
+import { Squash } from '../../../src'
+import { Squeeze } from '../../../src'
 import { Turn } from '../../../src'
 import { Twirl } from '../../../src'
-import { Squash } from '../../../src'
 import Hamburger from '../../../src'
 import Card from './card'
 import NewCard from './new-card'
@@ -34,6 +40,18 @@ export default () => (
         <Fade size={36} />
       </Card>
 
+      <Card title="Cross">
+        <Cross size={36} direction="right" />
+        <div>
+          import {'{'}
+          <span className="text-white"> Cross </span>
+          as
+          <span className="text-white"> Hamburger </span>
+          {'}'} from '<span className="text-green-400">hamburger-react</span>'
+        </div>
+        <Cross size={36} />
+      </Card>
+
       <Card title="Twirl">
         <Twirl size={36} direction="right" />
         <div>
@@ -58,6 +76,42 @@ export default () => (
         <Turn size={36} />
       </Card>
 
+      <Card title="Slant">
+        <Slant size={36} direction="right" />
+        <div>
+          import {'{'}
+          <span className="text-white"> Slant </span>
+          as
+          <span className="text-white"> Hamburger </span>
+          {'}'} from '<span className="text-green-400">hamburger-react</span>'
+        </div>
+        <Slant size={36} />
+      </Card>
+
+      <Card title="Pivot">
+        <Pivot size={36} direction="right" />
+        <div>
+          import {'{'}
+          <span className="text-white"> Pivot </span>
+          as
+          <span className="text-white"> Hamburger </span>
+          {'}'} from '<span className="text-green-400">hamburger-react</span>'
+        </div>
+        <Pivot size={36} />
+      </Card>
+
+      <Card title="Spiral">
+        <Spiral size={36} direction="right" />
+        <div>
+          import {'{'}
+          <span className="text-white"> Spiral </span>
+          as
+          <span className="text-white"> Hamburger </span>
+          {'}'} from '<span className="text-green-400">hamburger-react</span>'
+        </div>
+        <Spiral size={36} />
+      </Card>
+
       <Card title="Sling">
         <Sling size={36} direction="right" />
         <div>
@@ -82,6 +136,18 @@ export default () => (
         <Spin size={36} />
       </Card>
 
+      <Card title="Rotate">
+        <Rotate size={36} direction="right" />
+        <div>
+          import {'{'}
+          <span className="text-white"> Rotate </span>
+          as
+          <span className="text-white"> Hamburger </span>
+          {'}'} from '<span className="text-green-400">hamburger-react</span>'
+        </div>
+        <Rotate size={36} />
+      </Card>
+
       <NewCard title="Squash">
         <Squash size={36} />
         <div>
@@ -92,6 +158,17 @@ export default () => (
           {'}'} from '<span className="text-green-400">hamburger-react</span>'
         </div>
       </NewCard>
+
+      <NewCard title="Squeeze" last>
+        <Squeeze size={36} />
+        <div>
+          import {'{'}
+          <span className="text-white"> Squeeze </span>
+          as
+          <span className="text-white"> Hamburger </span>
+          {'}'} from '<span className="text-green-400">hamburger-react</span>'
+        </div>
+      </NewCard>
     </div>
   </>
 )

docs/src/components/footer.tsx

@@ -7,7 +7,7 @@ export default () => (
       <a
         className="underline font-medium"
         href="https://www.luuk.site"
-        target="_blank" // eslint-disable-line react/jsx-no-target-blank
+        target="_blank"
         rel="noopener"
       >
         Luuk
@@ -16,7 +16,7 @@ export default () => (
       <a
         className="underline font-medium"
         href="https://www.stutpak.nl"
-        target="_blank" // eslint-disable-line react/jsx-no-target-blank
+        target="_blank"
         rel="noopener"
       >
         Stutpak
@@ -27,23 +27,23 @@ export default () => (
       <a
         className="underline font-medium px-4"
         href="https://www.npmjs.com/package/hamburger-react"
-        target="_blank" // eslint-disable-line react/jsx-no-target-blank
+        target="_blank"
         rel="noopener"
       >
         NPM
       </a>
       <a
         className="underline font-medium px-4"
         href="https://github.com/luukdv/hamburger-react"
-        target="_blank" // eslint-disable-line react/jsx-no-target-blank
+        target="_blank"
         rel="noopener"
       >
         GitHub
       </a>
       <a
         className="underline font-medium px-4"
         href="https://www.luuk.site"
-        target="_blank" // eslint-disable-line react/jsx-no-target-blank
+        target="_blank"
         rel="noopener"
       >
         Contact

docs/src/components/information.tsx

@@ -9,7 +9,7 @@ export default () => (
       <a
         className="underline font-medium text-purple-400"
         href="https://github.com/luukdv/hamburger-react"
-        target="_blank" // eslint-disable-line react/jsx-no-target-blank
+        target="_blank"
         rel="noopener"
       >
         GitHub repository

docs/src/components/new-card.tsx

@@ -3,12 +3,14 @@ import React from 'react'
 export default ({
   children,
   title,
+  last,
 }: {
   children: [React.ReactNode, React.ReactNode]
   title: string
+  last?: boolean
 }) => (
   <div
-    className="
+    className={`
       bg-gray-800
       rounded-lg
       shadow-xl
@@ -19,11 +21,11 @@ export default ({
       sm:px-8
       lg:px-12
       flex
-      mb-0
+      ${last ? '' : 'mb-4 md:mb-6'}
       relative
       flex-col
       items-center
-    "
+    `}
   >
     <h2 className="mb-2 leading-snug text-center font-semibold flex items-center">
       <span className="text-l mr-2 text-gray-400">Hamburger type:</span>

docs/src/components/properties.tsx

@@ -28,7 +28,7 @@ export default () => {
 
         <Example>
           <Property name="direction" initial="left" type="string" />
-          <Hamburger direction="right" size={30} />
+          <Hamburger direction="right" size={26} />
           The animation direction of the icon, left or right.
           <div>
             {'<'}
@@ -40,6 +40,21 @@ export default () => {
           </div>
         </Example>
 
+        <Example>
+          <Property name="distance" initial="md" type="string" />
+          <Hamburger distance="lg" size={32} />
+          The vertical distance between the lines. Small (sm), medium (md) or
+          large (lg).
+          <div>
+            {'<'}
+            <span className="text-yellow-400">Hamburger</span>
+            &nbsp;
+            <span className="text-purple-400">distance</span>="
+            <span className="text-green-400">lg</span>
+            {'" />'}
+          </div>
+        </Example>
+
         <Example>
           <Property
             name="duration"

docs/src/components/version.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 export default () => (
   <a
     href="https://github.com/luukdv/hamburger-react/releases"
-    target="_blank" // eslint-disable-line react/jsx-no-target-blank
+    target="_blank"
     rel="noopener"
     className="
       border-gray-600
@@ -23,6 +23,6 @@ export default () => (
       text-xs
   "
   >
-    v2.0.0 (1.5 KB)
+    v2.1.0 (1.5 KB)
   </a>
 )

src/Burger.tsx

@@ -3,11 +3,11 @@ import { BurgerProps } from './'
 
 const area = 48
 const timing = 'cubic-bezier(0, 0, 0, 1)'
-const translate = 4.6325
 
 export const Burger = (({
   color = 'currentColor',
   direction = 'left',
+  distance = 'md',
   duration = 0.4,
   hideOutline = true,
   label,
@@ -17,6 +17,7 @@ export const Burger = (({
   size = 32,
   toggle,
   toggled,
+  _lines = 3,
 }) => {
   const [toggledInternal, toggleInternal] = useState(false)
 
@@ -25,13 +26,18 @@ export const Burger = (({
 
   const barHeightRaw = width / 12
   const barHeight = Math.round(barHeightRaw)
-  const marginRaw = width / 4.5
+
+  const space = distance === 'lg' ? 0.25 : distance === 'sm' ? 0.75 : 0.5
+  const marginRaw = width / (_lines * (space + (_lines === 3 ? 1 : 1.25)))
   const margin = Math.round(marginRaw)
 
-  const height = barHeight * 3 + margin * 2
+  const height = (barHeight * _lines) + margin * (_lines - 1)
   const topOffset = Math.round((area - height) / 2)
 
-  const deviation = (barHeightRaw - barHeight) + (marginRaw - margin)
+  const translate = _lines === 3
+    ? distance === 'lg' ? 4.0425 : distance === 'sm' ? 5.1625 : 4.6325
+    : distance === 'lg' ? 6.7875 : distance === 'sm' ? 8.4875 : 7.6675
+  const deviation = ((barHeightRaw - barHeight) + (marginRaw - margin)) / (_lines === 3 ? 1 : 2)
   const move = parseFloat(((width / translate) - (deviation / (4 / 3))).toFixed(2))
   const time = Math.max(0, duration)
 

src/Cross.tsx

@@ -0,0 +1,38 @@
+import { Burger } from './Burger'
+import React, { FunctionComponent } from 'react'
+import { CommonBurgerProps } from './'
+
+export const Cross = ((props) => (
+  <Burger {...props} _lines={2} render={(o) => (
+    <div
+      className="hamburger-react"
+      aria-label={o.label}
+      data-testid="cross"
+      onClick={o.handler}
+      onKeyUp={(e) => (e.key === 'Enter' || e.keyCode === 13) && o.handler()}
+      role="button"
+      style={o.burgerStyles}
+      tabIndex={0}
+    >
+      <div data-testid="bar-one" style={{
+        ...o.barStyles,
+        top: `${o.topOffset}px`,
+        transition: `${o.time}s ${o.timing}`,
+        transform: `${o.isToggled
+          ? `rotate(${45 * (o.isLeft ? -1 : 1)}deg) translate(${o.move * (o.isLeft ? -1 : 1)}px, ${o.move}px)`
+          : 'none'
+        }`,
+      }} />
+
+      <div data-testid="bar-two" style={{
+        ...o.barStyles,
+        top: `${o.topOffset + o.barHeight + o.margin}px`,
+        transition: `${o.time}s ${o.timing}`,
+        transform: `${o.isToggled
+          ? `rotate(${45 * (o.isLeft ? 1 : -1)}deg) translate(${o.move * (o.isLeft ? -1 : 1)}px, ${o.move * -1}px)`
+          : 'none'
+        }`,
+      }} />
+    </div>
+  )} />
+)) as FunctionComponent<CommonBurgerProps>