Add new version style

Author: javizqh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [

src/components/Button/Button.styles.tsx

@@ -10,6 +10,7 @@ interface StyledButtonProps {
   variant: ButtonVariant;
   iconType: IconVariant;
   active: boolean;
+  isLabel: boolean;
 }
 
 const handleVariant = (p: StyledButtonProps) => {
@@ -58,11 +59,19 @@ const handleActive = (p: StyledButtonProps) => {
   }
 };
 
+const handleLabel = (p: StyledButtonProps) => {
+  if (!p.isLabel) {
+    return `
+      width: 24px;
+    `;
+  }
+};
+
+
 export const StyledButton = styled.button<StyledButtonProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 24px;
   height: 24px;
   border: 0;
   padding: 0 0 0 0;
@@ -79,6 +88,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
   ${handleVariant}
   ${handleActive}
   ${handleIcon}
+  ${handleLabel}
 
   & svg {
     width: 20px;

src/components/Button/Button.tsx

@@ -5,6 +5,7 @@ export type IconVariant = "fill" | "stroke";
 
 const Button = ({
   active = false,
+  isLabel = false,
   variant = "standard",
   iconType,
   title,
@@ -13,6 +14,7 @@ const Button = ({
   children,
 }: {
   active: boolean;
+  isLabel: boolean;
   variant: ButtonVariant;
   iconType: IconVariant;
   title: string;
@@ -28,6 +30,7 @@ const Button = ({
       color={theme.palette?.text}
       roundness={theme.roundness}
       variant={variant}
+      isLabel={isLabel}
       iconType={iconType}
       title={title}
       id={id}
@@ -57,6 +60,7 @@ export const MenuButton = ({
       active={false}
       variant="standard"
       iconType="fill"
+      isLabel={false}
       title={title}
       id={id}
       onClick={() => onClick()}
@@ -82,6 +86,7 @@ export const MenuButtonStroke = ({
       active={false}
       variant="standard"
       iconType="stroke"
+      isLabel={false}
       title={title}
       id={id}
       onClick={() => onClick()}
@@ -90,3 +95,29 @@ export const MenuButtonStroke = ({
     </Button>
   );
 };
+
+export const MenuButtonLabel = ({
+  title,
+  id,
+  onClick,
+  children,
+}: {
+  title: string;
+  id: string;
+  onClick: Function;
+  children: any;
+}) => {
+  return (
+    <Button
+      active={false}
+      variant="standard"
+      iconType="fill"
+      isLabel={true}
+      title={title}
+      id={id}
+      onClick={() => onClick()}
+    >
+      {children}
+    </Button>
+  );
+};

src/components/Button/index.ts

@@ -1 +1 @@
-export { default as Button, MenuButton, MenuButtonStroke } from "./Button";
+export { default as Button, MenuButton, MenuButtonStroke, MenuButtonLabel } from "./Button";

src/index.ts

@@ -2,7 +2,7 @@ import { IdeInterface } from "./components";
 export default IdeInterface;
 
 export { VncViewer } from "./components";
-export { Button, MenuButton, MenuButtonStroke } from "./components";
+export { Button, MenuButton, MenuButtonStroke, MenuButtonLabel } from "./components";
 export {
   ThemeProvider,
   useTheme,