button secondary fix and avatar image updated

next.js

@@ -10,22 +10,22 @@ export const DynamicButtonGroup = dynamic(() => import("./dist/index.esm.js").th
 export const DynamicButtonIcon = dynamic(() => import("./dist/index.esm.js").then(m => m.ButtonIcon), { ssr: false });
 export const DynamicCardbase = dynamic(() => import("./dist/index.esm.js").then(m => m.Cardbase), { ssr: false });
 export const DynamicCardimage = dynamic(() => import("./dist/index.esm.js").then(m => m.Cardimage), { ssr: false });
-export const DynamicInputCheckbox = dynamic(() => import("./dist/index.esm.js").then(m => m.InputCheckbox), { ssr: false });
 export const DynamicHeader = dynamic(() => import("./dist/index.esm.js").then(m => m.Header), { ssr: false });
 export const DynamicHeaderEmpty = dynamic(() => import("./dist/index.esm.js").then(m => m.HeaderEmpty), { ssr: false });
 export const DynamicIcon = dynamic(() => import("./dist/index.esm.js").then(m => m.Icon), { ssr: false });
 export const DynamicIconShape = dynamic(() => import("./dist/index.esm.js").then(m => m.IconShape), { ssr: false });
+export const DynamicInputCheckbox = dynamic(() => import("./dist/index.esm.js").then(m => m.InputCheckbox), { ssr: false });
 export const DynamicInputPassword = dynamic(() => import("./dist/index.esm.js").then(m => m.InputPassword), { ssr: false });
 export const DynamicInputRadiobutton = dynamic(() => import("./dist/index.esm.js").then(m => m.InputRadiobutton), { ssr: false });
 export const DynamicInputSearch = dynamic(() => import("./dist/index.esm.js").then(m => m.InputSearch), { ssr: false });
+export const DynamicInputSelect = dynamic(() => import("./dist/index.esm.js").then(m => m.InputSelect), { ssr: false });
 export const DynamicInputText = dynamic(() => import("./dist/index.esm.js").then(m => m.InputText), { ssr: false });
 export const DynamicInputTextarea = dynamic(() => import("./dist/index.esm.js").then(m => m.InputTextarea), { ssr: false });
 export const DynamicLink = dynamic(() => import("./dist/index.esm.js").then(m => m.Link), { ssr: false });
 export const DynamicMenu = dynamic(() => import("./dist/index.esm.js").then(m => m.Menu), { ssr: false });
 export const DynamicModal = dynamic(() => import("./dist/index.esm.js").then(m => m.Modal), { ssr: false });
 export const DynamicNotification = dynamic(() => import("./dist/index.esm.js").then(m => m.Notification), { ssr: false });
 export const DynamicOverflowMenu = dynamic(() => import("./dist/index.esm.js").then(m => m.OverflowMenu), { ssr: false });
-export const DynamicInputSelect = dynamic(() => import("./dist/index.esm.js").then(m => m.InputSelect), { ssr: false });
 export const DynamicStep = dynamic(() => import("./dist/index.esm.js").then(m => m.Step), { ssr: false });
 export const DynamicSteps = dynamic(() => import("./dist/index.esm.js").then(m => m.Steps), { ssr: false });
 export const DynamicSwitch = dynamic(() => import("./dist/index.esm.js").then(m => m.Switch), { ssr: false });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jota-ds/lib-react",
   "description": "Jota Design System",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "author": "Meiuca <meiuca@meiuca.design>",
   "main": "dist/index.cjs.js",
@@ -32,11 +32,9 @@
     "build": "rollup -c"
   },
   "dependencies": {
-    "@jota-ds/context-element-react": "*",
-    "@jota-ds/motion-tokens": "*",
-    "focus-visible": "^5.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@jota-ds/context-element-react": "^1.0.0",
+    "@jota-ds/motion-tokens": "^1.0.4",
+    "focus-visible": "^5.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",
@@ -68,7 +66,9 @@
     "react-scripts": "^4.0.3",
     "sinon": ">=4.0.0 <11.0.0",
     "url-loader": "^4.1.1",
-    "@rollup/plugin-node-resolve": "*"
+    "@rollup/plugin-node-resolve": "*",
+    "react": ">=16.14",
+    "react-dom": ">=16.14"
   },
   "browserslist": {
     "production": [
@@ -83,6 +83,8 @@
     ]
   },
   "peerDependencies": {
-    "next": "^11"
+    "next": "^11",
+    "react": ">=16.14",
+    "react-dom": ">=16.14"
   }
 }

src/base-components/avatar/avatar.stories.jsx

@@ -19,19 +19,6 @@ export default {
         defaultValue: { summary: 'false' },
       },
     },
-    useLocalImage: {
-      name: 'Local Image',
-      description: 'Define se a imagem do avatar será uma imagem local',
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Modifiers',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
     size: {
       name: 'Size',
       description: 'Define o tamanho do avatar',
@@ -101,22 +88,15 @@ export default {
 };
 
 export function Avatar(args) {
-  const src =
-    args.useLocalImage && args.useImage
-      ? avatarExample
-      : !args.useLocalImage && args.useImage
-      ? args.imgUrl
-      : '';
-
+  const src = args.useImage ? args.imgUrl : '';
   return <AvatarTag {...args} imgUrl={src}></AvatarTag>;
 }
 
 Avatar.args = {
   size: 'small',
-  imgUrl: '',
+  imgUrl: avatarExample,
   imgAlt: 'Avatar',
   onColor: false,
-  useLocalImage: true,
   useImage: true,
   hasNotification: false,
 };

src/base-components/button/style.js

@@ -83,8 +83,7 @@ export default css`
     &--secondary {
       background-color: transparent;
       color: ${({ buttonSecondary }) => buttonSecondary.color};
-      border: ${({ buttonSecondary }) => buttonSecondary.borderColor}
-        ${({ buttonSecondary }) => buttonSecondary.borderWidth} solid;
+      border: ${({ buttonSecondary }) => `${buttonSecondary.borderWidth} solid ${buttonSecondary.borderColor}`};
 
       &:hover {
         background-color: ${({ buttonSecondary }) =>

src/base-components/tag-category/style.js

@@ -10,7 +10,6 @@ export default css`
     font-family: ${context => context.fontFamily};
     font-weight: ${context => context.fontWeight};
     font-size: ${context => context.fontSize};
-    /* line-height: ${context => context.lineHeight}; */
     color: ${context => context.color};
     opacity: ${context => context.opacity};
     display: inline-flex;

src/base-components/tag-highlight/style.js

@@ -13,7 +13,6 @@ export default css`
     font-family: ${context => context.fontFamily};
     font-weight: ${context => context.fontWeight};
     font-size: ${context => context.fontSize};
-    /* line-height: ${context => context.lineHeight}; */
     padding: ${context => context.paddingVertical} ${context => context.paddingHorizontal};
   }
 `;

src/base-components/tag-select/style.js

@@ -13,7 +13,6 @@ export default css`
     border-radius: ${context => context.borderRadius};
     border: ${context => context.color} ${context => context.borderWidth} solid;
     color: ${context => context.color};
-    /* line-height: ${context => context.lineHeight}; */
     padding: ${context => context.paddingVertical} ${context => context.paddingHorizontal};
     background-color: transparent;
     cursor: pointer;

src/base-components/tooltip/tooltip.stories.jsx

@@ -52,7 +52,7 @@ export function Tooltip(args) {
       <Typography component="paragraph" onColor={args.onColor}>
         Se não for sobre fazer a diferença, é sobre o quê? <br />
         <TooltipTag {...args}>
-          <strong> Passe o mouse aqui para ver o tooltip.</strong>
+          <strong>Passe o mouse aqui para ver o tooltip.</strong>
         </TooltipTag>
       </Typography>
     </div>
@@ -61,6 +61,6 @@ export function Tooltip(args) {
 
 Tooltip.args = {
   position: 'top',
-  body: 'Hello there, this is a tooltip message.',
+  body: 'O Design System open source da Meiuca',
   onColor: false,
 };

src/index.js

@@ -8,22 +8,22 @@ export { default as ButtonGroup } from "./base-components/button-group/index.js"
 export { default as ButtonIcon } from "./base-components/button-icon/index.js";
 export { default as Cardbase } from "./base-components/cardbase/index.js";
 export { default as Cardimage } from "./base-components/cardimage/index.js";
-export { default as InputCheckbox } from "./base-components/input-checkbox/index.js";
 export { default as Header } from "./base-components/header/index.js";
 export { default as HeaderEmpty } from "./base-components/header-empty/index.js";
 export { default as Icon } from "./base-components/icon/index.js";
 export { default as IconShape } from "./base-components/icon-shape/index.js";
+export { default as InputCheckbox } from "./base-components/input-checkbox/index.js";
 export { default as InputPassword } from "./base-components/input-password/index.js";
 export { default as InputRadiobutton } from "./base-components/input-radiobutton/index.js";
 export { default as InputSearch } from "./base-components/input-search/index.js";
+export { default as InputSelect } from "./base-components/input-select/index.js";
 export { default as InputText } from "./base-components/input-text/index.js";
 export { default as InputTextarea } from "./base-components/input-textarea/index.js";
 export { default as Link } from "./base-components/link/index.js";
 export { default as Menu } from "./base-components/menu/index.js";
 export { default as Modal } from "./base-components/modal/index.js";
 export { default as Notification } from "./base-components/notification/index.js";
 export { default as OverflowMenu } from "./base-components/overflow-menu/index.js";
-export { default as InputSelect } from "./base-components/input-select/index.js";
 export { default as Step } from "./base-components/step/index.js";
 export { default as Steps } from "./base-components/steps/index.js";
 export { default as Switch } from "./base-components/switch/index.js";

src/storybook/welcome/index.js

@@ -11,15 +11,13 @@ function Welcome() {
       <div className={`${namespace}-Welcome`}>
         <div className={`${namespace}-Welcome__textBox`}>
           <div className={`${namespace}-Welcome__upperTextBox`}>
-            <h1>
-              {ds} <br /> Design System
-            </h1>
+            <h1>{ds} DS</h1>
             <h2>React</h2>
           </div>
 
           <div className={`${namespace}-Welcome__bottomTextBox`}>
             <caption>
-              O Design System <br /> Open Source da Meiuca
+              O Design System <br /> open source da Meiuca
             </caption>
 
             <img src={MeiucaLogo} alt="logo meiuca" />

src/storybook/welcome/style-type.js

@@ -1,8 +1,8 @@
 import brandingTokens from '../../styles/tokens/branding.js';
 import * as globalTokens from '../../styles/tokens/global.js';
 
-export default /** @type {import('@jota-ds/zero-builder/types/components').StyleType} */ ({
+export default {
   backgroundColor: brandingTokens.brandColorPrimaryPure,
   color: brandingTokens.neutralColorHighPure,
   fontFamily: brandingTokens.fontFamilyHighlight,
-});
+};

src/styles/tokens/branding.js

@@ -1,2 +1,2 @@
-import * as brandingTokens from './brands/jota/default.js'
-export default brandingTokens
+import * as brandingTokens from "./brands/jota/default.js";
+export default brandingTokens;

src/styles/tokens/brands/jota/default.js

@@ -31,3 +31,4 @@ export const feedbackColorHelperPure = "#FF8A00";
 export const feedbackColorHelperLight = "#FFE3C2";
 export const feedbackColorHelperMedium = "#CC6E00";
 export const feedbackColorHelperDark = "#7A4200";
+

src/styles/tokens/global.js

@@ -1,3 +1,8 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 18 May 2021 13:26:26 GMT
+ */
+
 export const lineHeightDefault = "100%";
 export const lineHeightXs = "115%";
 export const lineHeightSm = "120%";
@@ -72,4 +77,4 @@ export const spacingInsetSizeXsH = "16px";
 export const spacingInsetSizeXsStack = "16px 16px";
 export const spacingInsetSizeSmV = "24px";
 export const spacingInsetSizeSmH = "24px";
-export const spacingInsetSizeSmStack = "24px 24px";
+export const spacingInsetSizeSmStack = "24px 24px";