Added children

Added the option to embed other elements next to the svg in the button components
AlfieJones · May 30, 2022 · f91a2e4 · f91a2e4
1 parent 5664f38
commit f91a2e4
Show file tree

Hide file tree

Showing 17 changed files with 49 additions and 11 deletions.
diff --git a/assets/raw/within.svg b/assets/raw/within.svg
diff --git a/assets/svgs/within.svg b/assets/svgs/within.svg
diff --git a/packages/react/src/toggles/Around.tsx b/packages/react/src/toggles/Around.tsx
@@ -16,6 +16,7 @@ const SvgAround = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgAround = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/Classic.tsx b/packages/react/src/toggles/Classic.tsx
@@ -16,6 +16,7 @@ const SvgClassic = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgClassic = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/DarkInner.tsx b/packages/react/src/toggles/DarkInner.tsx
@@ -16,6 +16,7 @@ const SvgDarkInner = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgDarkInner = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/DarkSide.tsx b/packages/react/src/toggles/DarkSide.tsx
@@ -16,6 +16,7 @@ const SvgDarkSide = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgDarkSide = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/Eclipse.tsx b/packages/react/src/toggles/Eclipse.tsx
@@ -16,6 +16,7 @@ const SvgEclipse = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgEclipse = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/Expand.tsx b/packages/react/src/toggles/Expand.tsx
@@ -16,6 +16,7 @@ const SvgExpand = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgExpand = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/HalfSun.tsx b/packages/react/src/toggles/HalfSun.tsx
@@ -16,6 +16,7 @@ const SvgHalfSun = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgHalfSun = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/Horizon.tsx b/packages/react/src/toggles/Horizon.tsx
@@ -16,6 +16,7 @@ const SvgHorizon = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgHorizon = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/InnerMoon.tsx b/packages/react/src/toggles/InnerMoon.tsx
@@ -16,6 +16,7 @@ const SvgInnerMoon = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgInnerMoon = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/Lightbulb.tsx b/packages/react/src/toggles/Lightbulb.tsx
@@ -16,6 +16,7 @@ const SvgLightbulb = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgLightbulb = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/Simple.tsx b/packages/react/src/toggles/Simple.tsx
@@ -16,6 +16,7 @@ const SvgSimple = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgSimple = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/toggles/Within.tsx b/packages/react/src/toggles/Within.tsx
@@ -16,6 +16,7 @@ const SvgWithin = forwardRef<HTMLButtonElement, ToggleProps>(
       style,
       "aria-label": ariaLabel = "Toggle theme",
       className,
+      children,
       ...rest
     } = props;
     const [toggledInternal, toggleInternal] = useState(false);
@@ -48,6 +49,7 @@ const SvgWithin = forwardRef<HTMLButtonElement, ToggleProps>(
         onClick={handleClick}
         {...rest}
       >
+        {children}
         {
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/templates/button.js b/packages/react/templates/button.js
@@ -19,6 +19,7 @@ const template = (variables, { tpl }) => {
             style,
             "aria-label": ariaLabel = "Toggle theme",
             className,
+            children,
             ...rest
         } = props;
       const [toggledInternal, toggleInternal] = useState(false);
@@ -40,6 +41,7 @@ const template = (variables, { tpl }) => {
   
       return (
           <button ref={ref} type={type} className={btnClass} style={btnStyle} aria-label={ariaLabel} title={title} onClick={handleClick} {...rest}>
+            {children}
             {${variables.jsx}}
           </button>
       );

diff --git a/test/button.html b/test/button.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="./global.css" rel="stylesheet"/>
-    <link href="./../css/bundle.min.css" rel="stylesheet" />
+    <link href="./../css/within.css" rel="stylesheet" />
     <title>Checkbox</title>
 </head>
 <body>

diff --git a/test/checkbox.html b/test/checkbox.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="./global.css" rel="stylesheet"/>
-    <link href="./../css/bundle.min.css" rel="stylesheet" />
+    <link href="./../css/within.css" rel="stylesheet" />
     <title>Checkbox</title>
 </head>
 <body>
@@ -130,15 +130,15 @@
             <label class="theme-toggle" id="within">
                 <input type="checkbox" />
                 <span class="theme-toggle-sr">Toggle theme</span>
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="theme-toggle__within"  height="1em" width="1em" viewBox="0 0 32 32" fill="currentColor" viewBox="0 0 32 32">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="theme-toggle__within"  height="1em" width="1em" viewBox="0 0 32 32" fill="black" viewBox="0 0 32 32">
                     <clipPath id="theme-toggle__within__clip">
-                    <path d="M0 0h32v32h-32ZM6 16A1 1 0 0026 16 1 1 0 006 16" />
-                    </clipPath>
-                    <g clip-path="url(#theme-toggle__within__clip)">
-                    <path d="M30.7 21.3 27.1 16l3.7-5.3c.4-.5.1-1.3-.6-1.4l-6.3-1.1-1.1-6.3c-.1-.6-.8-.9-1.4-.6L16 5l-5.4-3.7c-.5-.4-1.3-.1-1.4.6l-1 6.3-6.4 1.1c-.6.1-.9.9-.6 1.3L4.9 16l-3.7 5.3c-.4.5-.1 1.3.6 1.4l6.3 1.1 1.1 6.3c.1.6.8.9 1.4.6l5.3-3.7 5.3 3.7c.5.4 1.3.1 1.4-.6l1.1-6.3 6.3-1.1c.8-.1 1.1-.8.7-1.4zM16 25.1c-5.1 0-9.1-4.1-9.1-9.1 0-5.1 4.1-9.1 9.1-9.1s9.1 4.1 9.1 9.1c0 5.1-4 9.1-9.1 9.1z"/>
-                    </g>
-                    <path class="theme-toggle__within__circle" d="M16 7.7c-4.6 0-8.2 3.7-8.2 8.2s3.6 8.4 8.2 8.4 8.2-3.7 8.2-8.2-3.6-8.4-8.2-8.4zm0 14.4c-3.4 0-6.1-2.9-6.1-6.2s2.7-6.1 6.1-6.1c3.4 0 6.1 2.9 6.1 6.2s-2.7 6.1-6.1 6.1z"/>
-                    <path class="theme-toggle__within__inner" d="M16 9.5c-3.6 0-6.4 2.9-6.4 6.4s2.8 6.5 6.4 6.5 6.4-2.9 6.4-6.4-2.8-6.5-6.4-6.5z"/>
+                        <path d="M0 0h32v32H0Zm6 16a1 1 0 0 0 20 0 1 1 0 0 0-20 0"/>
+                      </clipPath>
+                      <g clip-path="url(#theme-toggle__within__clip)">
+                        <path d="M25.6 19.5 23.2 16l2.4-3.4c.2-.3 0-.8-.4-.9l-4.1-.7-.7-4.1c-.1-.4-.6-.6-.9-.4L16 8.8l-3.5-2.4c-.3-.2-.8 0-.9.4l-.7 4.1-4.1.7c-.4.1-.6.6-.4.9L8.8 16l-2.4 3.4c-.2.3 0 .8.4.9l4.1.7.7 4.1c.1.4.6.6.9.4l3.4-2.4 3.4 2.4c.3.2.8 0 .9-.4l.7-4.1 4.1-.7c.6 0 .8-.5.6-.8zM16 21.9c-3.3 0-5.9-2.7-5.9-5.9 0-3.3 2.7-5.9 5.9-5.9s5.9 2.7 5.9 5.9c0 3.3-2.6 5.9-5.9 5.9z"/>
+                      </g>
+                      <path d="M16 3.6C9.1 3.6 3.7 9.1 3.7 15.9S9 28.4 16 28.4s12.3-5.6 12.3-12.3S22.9 3.6 16 3.6zm0 21.6c-5.1 0-9.1-4.3-9.1-9.3s4-9.1 9.1-9.1 9.1 4.3 9.1 9.3-4 9.1-9.1 9.1z" class="theme-toggle__within__circle"/>
+                      <path d="M19 5.2c-4.3 0-7.7 3.5-7.7 7.7s3.3 7.9 7.7 7.9 7.7-3.5 7.7-7.7-3.4-7.9-7.7-7.9z" class="theme-toggle__within__inner"/>
                 </svg>
             </label>
             <label>